/* ════════════════════════════════════════════════════════════════════════
   COQUILLE « MODE AGENTS » (2026-10-20) — toute l'interface de l'espace
   recruteur, fidèle À LA LETTRE à la maquette validée par Javi dans le plan
   (claude.ai/artifact/AdFm2r3vzmNmZtW75JHf1u, « L'écran ») : mêmes jetons,
   mêmes tailles, mêmes rayons, mêmes ombres. Chargé APRÈS visual.css.
   « Imagine que c'est Apple qui a fait l'outil » : une colonne, la police du
   système, des gris, une seule couleur d'accent, des matières translucides.
   ⚠️ Classes préfixées `ag-` / `sb-` : `.av`, `.chip`… existent ailleurs.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --ag-win: #ffffff;
  --ag-side: #f3f3f7;
  --ag-group: #f5f5f7;
  --ag-card: #ffffff;
  --ag-bubble: #f2f2f7;
  --ag-fill: rgba(120, 120, 128, .14);
  --ag-fill2: rgba(120, 120, 128, .08);
  --ag-sep: rgba(60, 60, 67, .12);
  --ag-label: #1d1d1f;
  --ag-sec: #6e6e73;
  --ag-ter: #a1a1a6;
  --ag-glass: rgba(255, 255, 255, .84);
  --ag-on-brand: #ffffff;
  --ag-brand: #3466f6;
}
:root[data-theme="dark"] {
  --ag-win: #1c1c1e; --ag-side: #262628; --ag-group: #141416; --ag-card: #2c2c2e; --ag-bubble: #2c2c2e;
  --ag-fill: rgba(120, 120, 128, .26); --ag-fill2: rgba(120, 120, 128, .16); --ag-sep: rgba(255, 255, 255, .09);
  --ag-label: #f5f5f7; --ag-sec: #98989d; --ag-ter: #6e6e73; --ag-glass: rgba(28, 28, 30, .84); --ag-on-brand: #ffffff; --ag-brand: #6f9bff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ag-win: #1c1c1e; --ag-side: #262628; --ag-group: #141416; --ag-card: #2c2c2e; --ag-bubble: #2c2c2e;
    --ag-fill: rgba(120, 120, 128, .26); --ag-fill2: rgba(120, 120, 128, .16); --ag-sep: rgba(255, 255, 255, .09);
    --ag-label: #f5f5f7; --ag-sec: #98989d; --ag-ter: #6e6e73; --ag-glass: rgba(28, 28, 30, .84); --ag-on-brand: #ffffff; --ag-brand: #6f9bff;
  }
}

/* Les couches cachées par `hidden` le restent (cf. la couche ⌘K du
   2026-10-02 qui avalait les clics). */
.ag-sheet[hidden], .ag-gate[hidden], .ag-menu[hidden], .ag-dock[hidden], .ag-home[hidden], .ag-thread[hidden],
.ag-chips[hidden], .ag-live[hidden], .ag-steps[hidden], .ag-profiles[hidden], .ag-canvas[hidden], .ag-acts[hidden],
.ag-clarify[hidden], .ag-sources[hidden], .nav-recents[hidden], .ag-pop[hidden], .ag-cbtn[hidden], .tb-ic[hidden] { display: none !important; }

/* ── La fenêtre ──────────────────────────────────────────────────────────── */
.app-view { grid-template-columns: 228px minmax(0, 1fr); background: var(--ag-group); color: var(--ag-label); font-family: var(--font); }
.app-view[data-section="agent"] { background: var(--ag-win); }
.app-view.sb-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.app-view.sb-collapsed .sidebar { display: none; }

/* ── Barre latérale (maquette : .win-side) ───────────────────────────────── */
.app-view .sidebar {
  display: flex; flex-direction: column; gap: 1px; padding: 12px 10px 10px;
  background: var(--ag-side); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--ag-sep); font-family: var(--font);
}
.sb-top { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 6px; margin-bottom: 10px; }
.sb-top .brand-logo { width: 20px; height: 20px; }
.sb-ic, .tb-ic {
  width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--ag-sec);
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.sb-ic:hover, .tb-ic:hover { background: var(--ag-fill2); }
.app-view .nav { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; overflow-y: auto; flex: 1 1 auto; }
.app-view .nav-item, .nav-recent, .sb-row {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 9px; border: 0; border-radius: 8px;
  background: transparent; color: var(--ag-label); font: 400 13.5px/1.35 var(--font); text-align: left; cursor: pointer; min-height: 0;
}
.app-view .nav-item:hover, .nav-recent:hover, .sb-row:hover, .sb-row[aria-expanded="true"] { background: var(--ag-fill2); color: var(--ag-label); }
.app-view .nav-item.active, .nav-recent.on { background: var(--ag-fill); color: var(--ag-label); font-weight: 400; }
.app-view .nav-item svg { width: 16px; height: 16px; color: var(--ag-sec); opacity: 1; flex: none; }
.app-view .nav-item.active svg { color: var(--ag-sec); }
.nav-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-kbd { margin-left: auto; border: 0; background: none; padding: 0; font: 400 11.5px/1 var(--font); color: var(--ag-ter); }
.nav-kbd:empty { display: none; }
.app-view .nav-count { margin-left: auto; }
.nav-lbl { font: 600 11.5px/1.3 var(--font); color: var(--ag-sec); padding: 16px 9px 4px; }
.nav-recents { display: flex; flex-direction: column; }
.nav-recents-list { display: flex; flex-direction: column; gap: 1px; }
.nav-recent > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-recent-x { opacity: 0; color: var(--ag-sec); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; flex: none; margin: -2px -4px -2px 0; }
.nav-recent:hover .nav-recent-x, .nav-recent:focus-visible .nav-recent-x { opacity: 1; }
.nav-recent-x:hover { background: var(--ag-fill); color: #e5484d; }
.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 1px; padding-top: 10px; }
.sb-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-k { margin-left: auto; font-size: 11.5px; color: var(--ag-ter); }
.sb-avs { display: flex; padding-left: 6px; flex: none; }
.sb-avs span { width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font: 600 8.5px/22px var(--font); text-align: center; margin-left: -6px; box-shadow: 0 0 0 2px var(--ag-side); }
.sb-me-av { width: 24px; height: 24px; border-radius: 50%; background: #424245; color: #fff; display: inline-grid; place-items: center; font: 600 10px/1 var(--font); flex: none; }

/* Menus du pied (profil, équipe) */
.ag-pop {
  position: fixed; z-index: 92; width: 264px; padding: 6px; border-radius: 14px;
  background: var(--ag-card); background: var(--ag-glass); -webkit-backdrop-filter: saturate(180%) blur(26px); backdrop-filter: saturate(180%) blur(26px);
  box-shadow: 0 0 0 1px var(--ag-sep), 0 18px 50px rgba(0, 0, 0, .18); font-family: var(--font); color: var(--ag-label);
}
.ag-pop-h { padding: 8px 10px 6px; }
.ag-pop-h b { display: block; font-size: 13.5px; font-weight: 600; }
.ag-pop-h small { display: block; font-size: 12px; color: var(--ag-sec); margin-top: 1px; }
.ag-pop-it {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 7px 10px;
  border-radius: 8px; font: 400 13.5px/1.3 var(--font); color: var(--ag-label); text-align: left; cursor: pointer;
}
.ag-pop-it:hover, .ag-pop-it:focus-visible { background: var(--ag-fill2); }
.ag-pop-it svg { width: 16px; height: 16px; color: var(--ag-sec); flex: none; }
.ag-pop-it .r { margin-left: auto; color: var(--ag-ter); font-size: 12px; }
.ag-pop-it .t small { display: block; color: var(--ag-sec); font-size: 12px; }
.ag-pop-it .ag-dot { margin: 0 4px; }
.ag-pop-sep { height: 1px; background: var(--ag-sep); margin: 5px 8px; }
.ag-pop-note { padding: 6px 10px 8px; font-size: 12px; color: var(--ag-sec); line-height: 1.4; }

/* ── Barre de titre (maquette : .wm-bar) ─────────────────────────────────── */
.app-view .content { padding: 0; max-width: none; min-width: 0; background: transparent; min-height: 100vh; }
.app-view .topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 0;
  height: 48px; margin: 0; padding: 0 54px; border: 0;
  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);
}
.app-view[data-section="agent"] .topbar { background: var(--ag-win); background: color-mix(in srgb, var(--ag-win) 88%, transparent); }
.app-view #section-title {
  visibility: visible !important; margin: 0; font: 600 13px/1.3 var(--font); letter-spacing: 0; color: var(--ag-label);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-view .nav-burger {
  position: absolute; left: 12px; top: 9px; width: 30px; height: 30px; border-radius: 8px; border: 0;
  background: transparent; color: var(--ag-sec); display: none; place-items: center; cursor: pointer; box-shadow: none;
}
.app-view .nav-burger:hover { background: var(--ag-fill2); }
.app-view.sb-collapsed .nav-burger { display: grid; }
.app-view #tb-share { position: absolute; right: 12px; top: 9px; }
.app-view .section { padding: 14px 32px 56px; max-width: 1240px; margin: 0 auto; }
.app-view .section[data-section="agent"] { padding: 0; max-width: none; }
/* La maquette n'a pas de bouton flottant dans la conversation (Notes et tâches reste dans Outils). */
body:has(.app-view[data-section="agent"]:not([hidden])) #notes-fab-wrap { display: none; }

/* ── La conversation ─────────────────────────────────────────────────────── */
.ag { position: relative; display: flex; flex-direction: column; height: calc(100dvh - 48px); min-height: 420px; font-family: var(--font); color: var(--ag-label); }
.ag-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ag-col { max-width: 700px; margin: 0 auto; padding: 8px 22px 30px; }
.ag.ag-is-home .ag-col { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }

/* Accueil (maquette : .home) */
.ag-home { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-block: 24px 40px; }
.ag-hi { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--ag-label); }
.ag-brief { margin: 4px 0 0; color: var(--ag-sec); font-size: 16px; line-height: 1.5; max-width: 540px; }
.ag-sugg { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-sugg button {
  border: 0; background: var(--ag-fill2); color: var(--ag-label); border-radius: 999px;
  padding: 8px 14px; font: 400 13.5px/1.3 var(--font); cursor: pointer; transition: background .15s;
}
.ag-sugg button:hover { background: var(--ag-fill); }

/* Saisie (maquette : .composer) */
.ag-composer {
  position: relative; background: var(--ag-card); border-radius: 28px; padding: 7px;
  box-shadow: 0 0 0 1px var(--ag-sep), 0 6px 20px rgba(0, 0, 0, .06);
}
.ag.ag-is-home .ag-composer { padding: 10px; }
.ag-composer.drop { box-shadow: 0 0 0 2px var(--ag-brand), 0 6px 20px rgba(0, 0, 0, .08); }
.ag-row { display: flex; align-items: center; gap: 6px; }
.ag-row textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent; color: var(--ag-label);
  font: 400 15px/1.45 var(--font); padding: 6px 6px; max-height: 220px; align-self: center;
}
.ag-row textarea::placeholder { color: var(--ag-ter); }
.ag-cbtn {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--ag-sec);
  display: grid; place-items: center; cursor: pointer; flex: none; align-self: flex-end;
}
.ag-cbtn:hover { background: var(--ag-fill2); }
.ag-plus { background: var(--ag-fill2); }
.ag-send { background: var(--ag-label); color: var(--ag-win); }
.ag-send:hover { background: var(--ag-label); opacity: .86; }
.ag-mic.on { color: #ff3b30; background: rgba(255, 59, 48, .12); }
.ag-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 4px 8px; }
.ag-chip, .ag-file {
  display: inline-flex; align-items: center; gap: 8px; max-width: 280px; background: var(--ag-card);
  box-shadow: 0 0 0 1px var(--ag-sep); border-radius: 12px; padding: 5px 8px 5px 5px; font-size: 12.5px; color: var(--ag-label);
}
.ag-chip > span:not(.ag-fi):not(.ag-app), .ag-file > span:not(.ag-fi) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-fi { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--ag-fill2); color: var(--ag-sec); flex: none; }
.ag-chip .ag-app { --s: 26px; }
.ag-chip button { border: 0; background: transparent; color: var(--ag-sec); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.ag-chip button:hover { background: var(--ag-fill); }
.ag-menu {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px); z-index: 6; background: var(--ag-card); border-radius: 16px;
  box-shadow: 0 0 0 1px var(--ag-sep), 0 18px 50px rgba(0, 0, 0, .16); padding: 6px; max-height: 320px; overflow: auto;
}
.ag.ag-is-home .ag-menu { bottom: auto; top: calc(100% + 8px); }
.ag-menu-it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.ag-menu-it.on, .ag-menu-it:hover { background: var(--ag-fill2); }
.ag-menu-t { display: flex; flex-direction: column; min-width: 0; }
.ag-menu-t b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-menu-t small { font-size: 12px; color: var(--ag-sec); }
.ag-menu-empty { padding: 10px 12px; font-size: 13.5px; color: var(--ag-sec); }

/* Saisie en bas (maquette : .wm-compose) */
.ag-dock { flex: none; padding: 6px 22px 14px; }
.ag-dock > div { max-width: 700px; margin: 0 auto; }
.ag-disc { max-width: 700px; margin: 8px auto 0; text-align: center; font-size: 11.5px; color: var(--ag-ter); }

/* ── Fil (maquette : .u-wrap, .a-msg) ────────────────────────────────────── */
.ag-thread { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; }
.ag-msg { animation: ag-rise .24s cubic-bezier(.2, .8, .2, 1) both; }
.ag-user { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 84%; }
.ag-bubble { background: var(--ag-bubble); border-radius: 20px; padding: 10px 16px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.ag-uchips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ag-agent { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ag-who { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ag-sec); }
.ag-dot { --c: var(--ag-brand); width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; display: inline-block; }
.ag-live { font-size: 13px; }
.ag-shimmer {
  background: linear-gradient(90deg, var(--ag-sec) 0%, var(--ag-label) 45%, var(--ag-sec) 90%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ag-shim 1.6s linear infinite;
}
details.ag-steps { font-size: 13px; color: var(--ag-sec); }
details.ag-steps summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
details.ag-steps summary::-webkit-details-marker { display: none; }
details.ag-steps summary::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
details.ag-steps[open] summary::after { transform: rotate(45deg); }
details.ag-steps ul { list-style: none; padding: 8px 0 0 2px; margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.ag-text { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.ag-text:empty { display: none; }
.ag-text p { margin: 0 0 10px; }
.ag-text p:last-child { margin-bottom: 0; }
.ag-text ul, .ag-text ol { margin: 0 0 10px; padding-left: 20px; }
.ag-text li { margin: 3px 0; }
.ag-text code { font-size: .88em; background: var(--ag-fill2); padding: .1em .35em; border-radius: 5px; }
.ag-text a { color: var(--ag-brand); }
.ag-err .ag-text { color: var(--ag-sec); }
.ag-note { font-size: 14px; color: var(--ag-sec); background: var(--ag-fill2); border-radius: 14px; padding: 12px 14px; }
.ag-muted { color: var(--ag-sec); font-size: 12.5px; }

/* Icônes des outils (maquette : .app) */
.ag-app {
  --s: 34px; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .265);
  background: linear-gradient(160deg, var(--g1), var(--g2)); color: #fff; display: inline-grid; place-items: center; flex: none;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28), 0 1px 2px rgba(0, 0, 0, .12);
}
.ag-app svg { width: 58%; height: 58%; }

/* Actions dans les outils (maquette : .acts, .act) */
.ag-acts { display: flex; flex-direction: column; background: var(--ag-card); border-radius: 18px; box-shadow: 0 0 0 1px var(--ag-sep); overflow: hidden; }
.ag-act { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 14px; position: relative; }
.ag-act + .ag-act::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; height: 1px; background: var(--ag-sep); }
.ag-act-t { min-width: 0; }
.ag-act-t b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ag-act-t span { display: block; font-size: 12.5px; color: var(--ag-sec); line-height: 1.35; overflow-wrap: anywhere; }
.ag-act-c { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.ag-ok { color: #0f9a77; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
:root[data-theme="dark"] .ag-ok { color: #3cc99c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ag-ok { color: #3cc99c; } }
.ag-pill {
  border: 0; border-radius: 999px; padding: 8px 15px; font: 600 13px/1.2 var(--font); white-space: nowrap;
  background: var(--ag-fill2); color: var(--ag-label); cursor: pointer; transition: background .15s, opacity .15s;
}
.ag-pill:hover { background: var(--ag-fill); }
.ag-pill.pri { background: var(--ag-brand); color: var(--ag-on-brand); }
.ag-pill.pri:hover { opacity: .9; background: var(--ag-brand); }
.ag-pill.sm { padding: 5px 12px; font-size: 12.5px; }
.ag-pill:disabled { opacity: .5; cursor: default; }

/* Profils du vivier (cartes de la maquette : .ui) */
.ag-profiles { display: flex; gap: 10px; overflow-x: auto; padding: 1px 1px 6px; scroll-snap-type: x proximity; }
.ag-prof {
  flex: 0 0 210px; scroll-snap-align: start; background: var(--ag-card); border-radius: 22px;
  box-shadow: 0 0 0 1px var(--ag-sep), 0 12px 32px rgba(0, 0, 0, .06); padding: 16px; display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.ag-prof-h { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--ag-fill); display: grid; place-items: center; margin-bottom: 4px; }
.ag-prof-h img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-prof-ini { font-weight: 700; color: var(--ag-sec); font-size: 15px; }
.ag-prof b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-prof small { font-size: 12px; color: var(--ag-sec); line-height: 1.35; }
.ag-prof p { margin: 0; font-size: 12px; line-height: 1.4; }
.ag-prof-f { display: flex; gap: 5px; flex-wrap: wrap; min-height: 4px; }
.ag-tag { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; background: var(--ag-fill2); color: var(--ag-sec); }
.ag-tag.ok { background: rgba(16, 163, 127, .12); color: #0f9a77; }
.ag-prof-a { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }

/* Interfaces sur mesure : la carte de la maquette (.ui), blanche en thème clair */
.ag-canvas .ldc-card { margin: 0; max-width: 100%; }
.ag-skel { border-radius: 22px; background: linear-gradient(90deg, var(--ag-fill2), var(--ag-fill), var(--ag-fill2)); background-size: 220% 100%; animation: ag-shim 1.4s linear infinite; }
body .ldc-askpill { background: var(--ag-brand); color: #fff; }
.ldc-light.ldc-card, .ldc-light .ldc-full-in { background: var(--ag-card); border: 0; box-shadow: 0 0 0 1px var(--ag-sep), 0 12px 32px rgba(0, 0, 0, .06); border-radius: 22px; }
.ldc-light.ldc-full { background: rgba(0, 0, 0, .28); }
.ldc-light .ldc-full-in { box-shadow: 0 40px 100px rgba(0, 0, 0, .25); }
.ldc-light.ldc-full .ldc-head { background: color-mix(in srgb, var(--ag-card) 92%, transparent); }
.ldc-light .ldc-head-t b { color: var(--ag-label); }
.ldc-light .ldc-head-t small { color: var(--ag-sec); }
.ldc-light .ldc-round { background: var(--ag-fill2); color: var(--ag-label); }
.ldc-light .ldc-round:hover { background: var(--ag-fill); }
.ldc-light .ldc-body, .ldc-light .ldc-root, .ldc-light .ldc-paint { color: var(--ag-label); }
.ldc-light .ldc-t-overline { color: var(--ag-sec); }
.ldc-light .ldc-ghost { border-color: var(--ag-sep); color: var(--ag-sec); }
.ldc-light .ldc-hyp { background: var(--ag-fill2); }
.ldc-light .ldc-hyp input { color: var(--ag-label); }
.ldc-light .ldc-hyp input::placeholder { color: var(--ag-ter); }
.ldc-light .ldc-hyp > .ldc-ic { color: var(--ag-brand); }
.ldc-light .ldc-hyp button { background: var(--ag-label); color: var(--ag-win); }
.ldc-light .ldc-img, .ldc-light .ldc-audio, .ldc-light .ldc-map, .ldc-light .ldc-map .leaflet-container { background: #f2f2f7; }
.ldc-light .ldc-audio-t small, .ldc-light .ldc-suffix, .ldc-light .ldc-checkrow.done .ldc-chk-l { color: var(--ag-sec); }
.ldc-light .ldc-slider::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--ldc-c) var(--ldc-p), #e5e5ea var(--ldc-p)); }
.ldc-light .ldc-slider::-moz-range-track { background: #e5e5ea; }
.ldc-light .ldc-slider::-webkit-slider-thumb { box-shadow: 0 1px 4px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .06); }
.ldc-light .ldc-switch { background: #e9e9eb; }
.ldc-light .ldc-check { border-color: rgba(60, 60, 67, .4); }
.ldc-light .ldc-seg { background: #eeeef0; }
.ldc-light .ldc-seg-b { color: var(--ag-label); }
.ldc-light .ldc-seg-b.on { background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ldc-light .ldc-chip, .ldc-light .ldc-stepper, .ldc-light .ldc-field { background: #f2f2f7; color: var(--ag-label); }
.ldc-light .ldc-stepper button, .ldc-light .ldc-field-in { color: var(--ag-label); }
.ldc-light .ldc-stepper button:disabled { color: var(--ag-ter); }
.ldc-light .ldc-stepper i { background: var(--ag-sep); }
.ldc-light .ldc-field-in::placeholder { color: var(--ag-ter); }

/* Questions à choix */
.ag-clarify { background: var(--ag-card); border-radius: 18px; box-shadow: 0 0 0 1px var(--ag-sep); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ag-cl-t { font-size: 14px; }
.ag-cl-q > span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.ag-cl-o { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-opt { border: 1px solid var(--ag-sep); background: transparent; color: var(--ag-label); border-radius: 999px; padding: 7px 13px; font: 400 13px/1.2 var(--font); cursor: pointer; }
.ag-opt:hover { background: var(--ag-fill2); }
.ag-opt.on { background: var(--ag-label); border-color: var(--ag-label); color: var(--ag-win); }
.ag-cl-a { display: flex; justify-content: flex-end; }

/* Sources */
.ag-sources { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--ag-sec); }
.ag-sources a { color: var(--ag-sec); text-decoration: none; background: var(--ag-fill2); border-radius: 999px; padding: 2px 9px; }
.ag-sources a:hover { color: var(--ag-label); }

/* ── Feuille Outils (maquette : .sheet) : couvre la zone de droite ───────── */
.ag-sheet {
  position: fixed; z-index: 40; top: 48px; right: 0; bottom: 0; left: 228px; overflow-y: auto;
  background: var(--ag-win); background: color-mix(in srgb, var(--ag-win) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(26px); backdrop-filter: saturate(180%) blur(26px);
  padding: 22px 26px 30px; opacity: 0; transition: opacity .16s;
}
.ag-sheet.full { left: 0; }
.ag-sheet.on { opacity: 1; }
.ag-sheet-in { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.ag-sheet-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ag-sheet-h h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ag-label); }
.ag-search { display: flex; align-items: center; gap: 8px; background: var(--ag-fill2); border-radius: 10px; padding: 7px 12px; color: var(--ag-ter); }
.ag-search input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; font: 400 13.5px/1.3 var(--font); color: var(--ag-label); }
.ag-search input::placeholder { color: var(--ag-ter); }
.ag-sheet-cat h4 { margin: 0 0 12px; font: 600 12px/1.3 var(--font); color: var(--ag-sec); }
.ag-sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 16px 8px; }
.ag-tool {
  display: flex; flex-direction: column; align-items: center; gap: 7px; font: 400 12px/1.25 var(--font); text-align: center;
  border: 0; background: transparent; color: var(--ag-label); padding: 4px; border-radius: 12px; cursor: pointer;
}
.ag-tool:hover, .ag-tool:focus-visible { background: var(--ag-fill2); }
.ag-tool .ag-app { --s: 54px; border-radius: 14px; }
.ag-tool small { color: var(--ag-ter); font-size: 10.5px; margin-top: -3px; }

/* ── Fenêtre du pass (maquette : .gate) ──────────────────────────────────── */
.ag-gate {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .16s;
}
.ag-gate.on { opacity: 1; }
.ag-gate-card {
  width: min(420px, 100%); background: var(--ag-card); border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
  padding: 26px 24px 20px; display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; color: var(--ag-label);
  transform: scale(.97); transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.ag-gate.on .ag-gate-card { transform: none; }
.ag-gate-card .ag-app { --s: 56px; border-radius: 15px; }
.ag-gate-card h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.ag-gate-card p { margin: 0; font-size: 14px; color: var(--ag-sec); line-height: 1.5; }
.ag-gate-card ul { list-style: none; padding: 0; margin: 2px 0 6px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; text-align: left; align-self: stretch; }
.ag-gate-card li { display: flex; gap: 8px; align-items: flex-start; }
.ag-gate-card li svg { flex: none; color: #0f9a77; margin-top: 3px; }
.ag-gate-row { display: flex; gap: 8px; align-self: stretch; justify-content: center; }
.ag-gate-row .ag-pill { flex: 1; }

/* ── Mouvements ──────────────────────────────────────────────────────────── */
@keyframes ag-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ag-shim { from { background-position: 200% 0; } to { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ag-msg, .ag-shimmer, .ag-skel { animation: none; }
  .ag-sheet, .ag-gate, .ag-gate-card { transition: none; }
}

/* ── Téléphone : la barre latérale devient un tiroir ─────────────────────── */
@media (max-width: 860px) {
  .app-view, .app-view.sb-collapsed { grid-template-columns: minmax(0, 1fr); }
  .app-view .sidebar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Tiroir fermé : son ombre ne doit pas déborder sur l'écran. */
  .app-view:not(.nav-open) .sidebar { box-shadow: none; }
  .app-view .nav-burger { display: grid; }
  #sb-collapse { display: none; }
  .app-view .section { padding: 12px 16px 48px; }
  .ag-col { padding: 6px 16px 22px; }
  .ag-dock { padding: 6px 12px 12px; }
  .ag-hi { font-size: 30px; }
  .ag-user { max-width: 92%; }
  .ag-act { grid-template-columns: 34px minmax(0, 1fr); }
  .ag-act-c { grid-column: 2; justify-content: flex-start; }
  .ag-sheet { left: 0; padding: 18px 16px 24px; }
}

/* ── Pages d'outils : le même langage que la maquette ────────────────────── */
.app-view .nav-count { background: transparent; color: var(--ag-sec); font: 500 12px/1 var(--font); min-width: 0; height: auto; padding: 0; }
.app-view .primary-btn, .modal-root .primary-btn, .drawer-root .primary-btn { background: var(--ag-brand); box-shadow: none; border-radius: 999px; }
.app-view .primary-btn:hover, .modal-root .primary-btn:hover, .drawer-root .primary-btn:hover { filter: none; opacity: .92; box-shadow: none; }
.app-view .chat-send { background: var(--ag-label); color: var(--ag-win); }
.notes-fab { background: var(--ag-label); color: var(--ag-win); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.notes-fab:hover { filter: none; opacity: .9; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
/* Une action faite affiche « Fait » ; Annuler et Voir apparaissent au survol (maquette : .ok seul). */
.ag-act .ag-act-more { display: none; }
.ag-act:hover .ag-act-more, .ag-act:focus-within .ag-act-more { display: inline-flex; }
@media (hover: none) { .ag-act .ag-act-more { display: inline-flex; } }

/* ── Pas de violet (Javi, 2026-10-20) ni de bouton flottant ──────────────────
   Les dégradés bleu → violet de l'ATS deviennent un bleu uni ; le bouton
   flottant des notes disparaît (Notes et tâches reste dans Outils). */
:root, :root[data-theme="dark"], :root:not([data-theme="light"]) { --brand-2: var(--brand); }
#notes-fab-wrap { display: none !important; }
:root { --week-b: #30b0c7; --s-short: #30b0c7; --s-pres: #34c759; --s-hired: #0f9a77; }