/* @portee: tous */
/* =========================================================================
   Module « système » du back-office (agent 3) : comptes carrière, journal, profil, notifications,
   utilisateurs & rôles, assistant IA. Préfixe .sy-  — variables du thème uniquement.
   ========================================================================= */

/* ------------------------------------------------------------------ Outils communs */
.sy-cands .stats .kpi-label, .sy-users .stats .kpi-label, .sy-journal .stats .kpi-label,
.sy-cands .stats .kpi-foot, .sy-users .stats .kpi-foot, .sy-journal .stats .kpi-foot { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.text-break { overflow-wrap: anywhere; }
.sy-slim { padding: .6rem .9rem; flex-shrink: 0; }
.sy-slim > .ph { font-size: 1.15rem; }
.sy-danger { color: var(--danger) !important; }
.sy-danger .ph { color: var(--danger) !important; }
.sy-left { justify-content: flex-start; }
.sy-dim { opacity: .62; }
.sy-pre { white-space: pre-wrap; margin: .3rem 0 0; font-size: .74rem; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-xs); padding: .5rem .6rem; max-height: 220px; overflow: auto; }
.sy-section-title { font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: .6rem; }
.sy-pad { padding: 1.1rem 1.25rem; }
.sy-empty { padding: 3rem 1rem; }
.sy-table tbody tr { transition: background .12s; }
.sy-table tbody tr.is-selected { background: var(--brand-soft); }
.sy-table .row-link { color: var(--text); }
.sy-table .row-link:hover { color: var(--brand-ink); }
.sy-badges .badge { font-size: .7rem; }

/* Tons pour pastilles d'icône (évènements, actions) */
.sy-ev { --b-fg: var(--text-2); --b-bg: var(--muted-soft); width: 2rem; height: 2rem; border-radius: 10px; display: inline-grid; place-items: center; flex-shrink: 0; background: var(--b-bg); color: var(--b-fg); font-size: 1rem; }

/* Barre de complétude */
.sy-meter { height: 5px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; margin-top: .35rem; max-width: 160px; }
.sy-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width .6s var(--ease); }
.sy-meter > i.is-mid { background: var(--warning); }
.sy-meter > i.is-low { background: var(--danger); }

/* Avatar d'un compte suspendu */
.sy-av[data-off] { filter: grayscale(1); opacity: .7; }

/* Menu flottant (téléporté) */
.sy-rowmenu { display: inline-flex; }
.menu.sy-floatmenu { position: fixed; top: 0; left: 0; right: auto; z-index: 300; min-width: 240px; max-width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 24px); overflow-y: auto; }
.sy-floatmenu form { margin: 0; }

/* Barre d'actions groupées */
.sy-bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .55rem .9rem; background: var(--bg-inverse); color: var(--text-inverse); flex-shrink: 0; }
.sy-bulkbar .link-btn { color: inherit; opacity: .75; }
.sy-bulkbar .select, .sy-bulkbar .input { background: var(--bg-elev); color: var(--text); }
.sy-bulkbar .btn-dark { background: var(--brand); color: #000; border-color: var(--brand); }
.sy-bulkbar .grow { flex: 1; }

/* ------------------------------------------------------------------ Comptes carrière : cartes */
.sy-ccard { gap: .7rem; }
.sy-ccard .row-link { color: var(--text); }
.sy-ccard-dossier { padding: .6rem .7rem; border-radius: var(--r-sm); background: var(--bg-sunken); border: 1px solid var(--line); min-height: 3.6rem; }
.sy-ccard-dossier .sy-meter { max-width: none; }
.sy-ccard-actions { border-top: 1px solid var(--line); padding-top: .6rem; }
.sy-avedit { padding: .8rem; border-radius: var(--r); background: var(--bg-sunken); border: 1px solid var(--line); }

/* Gel global */
.sy-gel { display: flex; flex-direction: column; }
.sy-gel-card { border-left: 4px solid var(--line-strong); }
.sy-gel-card.is-on { border-left-color: var(--info); background: linear-gradient(90deg, var(--info-soft), var(--bg-elev) 60%); }
.sy-gel-icon { width: 3.4rem; height: 3.4rem; border-radius: 16px; display: grid; place-items: center; font-size: 1.7rem; background: var(--bg-sunken); color: var(--text-2); flex-shrink: 0; }
.sy-gel-card.is-on .sy-gel-icon { background: var(--info); color: #fff; }

/* ------------------------------------------------------------------ Pages de détail (fiche compte, profil) */
.sy-detail { display: flex; flex-direction: column; gap: 1rem; }
.sy-aside { display: flex; flex-direction: column; gap: 1rem; }
.sy-main { display: flex; flex-direction: column; min-width: 0; }
.sy-tabpanel { min-width: 0; }
.sy-main .subtabs { width: 100%; }
@media (min-width: 1024px) {
  .sy-main .subtab { padding: .45rem .7rem; font-size: .86rem; }
  .sy-detail { display: grid; grid-template-columns: minmax(270px, 300px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; }
  .sy-aside { min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
  .sy-main { min-height: 0; }
  .sy-tabpanel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  .sy-tabpanel > .fit-scroll { scrollbar-width: thin; }
}
.sy-idcard .panel-body { padding-top: 1.4rem; }
.sy-facts { margin: 0; border-top: 1px solid var(--line); }
.sy-facts > div { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .85rem; }
.sy-facts > div:last-child { border-bottom: 0; }
.sy-facts dt { color: var(--text-3); font-weight: 600; flex-shrink: 0; }
.sy-facts dd { margin: 0; text-align: right; font-weight: 650; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.sy-grid-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; margin: 0; }
.sy-grid-dl > div { padding: .65rem .8rem; border-radius: var(--r-sm); background: var(--bg-sunken); border: 1px solid var(--line); min-width: 0; }
.sy-grid-dl dt { font-size: .74rem; color: var(--text-3); font-weight: 650; }
.sy-grid-dl dd { margin: .1rem 0 0; font-weight: 650; font-size: .9rem; }
.sy-dossier-head { padding: .9rem; border-radius: var(--r); background: var(--bg-sunken); border: 1px solid var(--line); }
.sy-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; }
.sy-rows { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.sy-rows .list-row:last-child, .sy-tabpanel .list-row:last-child { border-bottom: 0; }
.sy-link-row { color: var(--text); text-decoration: none !important; }
.sy-link-row:hover .ph-caret-right { transform: translateX(2px); color: var(--text); }
.sy-link-row .ph-caret-right { transition: transform .15s; }
.sy-datebox { width: 2.8rem; height: 2.9rem; border-radius: 10px; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; align-content: center; flex-shrink: 0; line-height: 1; }
.sy-datebox b { font-size: 1.05rem; }
.sy-datebox span { font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.sy-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .sy-two { grid-template-columns: minmax(0, 1fr); } }

/* Lignes de connexion */
.sy-login-row { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.sy-login-row:last-child { border-bottom: 0; }
.sy-login-row.is-compact .sy-ev { width: 1.75rem; height: 1.75rem; font-size: .9rem; border-radius: 8px; }

/* ------------------------------------------------------------------ Profil */
.sy-photo { position: relative; cursor: pointer; display: inline-block; border-radius: 50%; }
.sy-photo .avatar { box-shadow: 0 0 0 4px var(--bg-elev), 0 0 0 5px var(--line); transition: transform .2s var(--ease); }
.sy-photo:hover .avatar { transform: scale(1.02); }
.sy-photo-btn { position: absolute; right: .3rem; bottom: .3rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--brand); color: #000; display: grid; place-items: center; font-size: 1.05rem; box-shadow: var(--shadow-2); border: 3px solid var(--bg-elev); }
.sy-role { --role: #64748b; background: color-mix(in srgb, var(--role) 15%, transparent); color: var(--text); }
.sy-role .ph-circle { color: var(--role); font-size: .55rem; }
.sy-lockinfo { display: flex; gap: .5rem; align-items: flex-start; padding: .7rem 1.1rem; font-size: .76rem; color: var(--text-3); border-top: 1px solid var(--line); background: var(--bg-sunken); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.sy-narrow { max-width: 720px; }
.sy-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: .4rem; }
.sy-strength i { height: 4px; border-radius: 4px; background: var(--bg-sunken); transition: background .2s; }
.sy-strength[data-level="1"] i:nth-child(-n+1) { background: var(--danger); }
.sy-strength[data-level="2"] i:nth-child(-n+2) { background: var(--warning); }
.sy-strength[data-level="3"] i:nth-child(-n+3) { background: var(--brand); }
.sy-strength[data-level="4"] i { background: var(--brand); }
.sy-choice-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
.sy-choice { display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--bg-elev); cursor: pointer; font-weight: 650; font-size: .9rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sy-choice:hover { transform: translateY(-1px); }
.sy-choice.is-on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }
.sy-swatch { width: 2.4rem; height: 1.7rem; border-radius: 7px; border: 1px solid var(--line-strong); flex-shrink: 0; position: relative; overflow: hidden; }
.sy-swatch.is-light { background: linear-gradient(135deg, #FFFFFF 55%, #EEF0EC 55%); }
.sy-swatch.is-dark { background: linear-gradient(135deg, #0F110E 55%, #000000 55%); }
.sy-swatch::after { content: ""; position: absolute; left: 5px; bottom: 5px; width: 40%; height: 4px; border-radius: 2px; background: #5CAC30; }
.sy-flag { width: 2.4rem; height: 1.7rem; border-radius: 7px; display: grid; place-items: center; background: var(--bg-inverse); color: var(--text-inverse); font-size: .72rem; font-weight: 800; letter-spacing: .05em; flex-shrink: 0; }
.sy-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .4rem; }
.sy-perm { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .65rem; border-radius: var(--r-sm); font-size: .85rem; color: var(--text-3); background: var(--bg-sunken); }
.sy-perm .ph { font-size: 1.1rem; margin-top: .05rem; }
.sy-perm.is-on { color: var(--text); background: var(--brand-soft); }
.sy-perm.is-on .ph { color: var(--brand-ink); }

/* ------------------------------------------------------------------ Cloche de notifications */
.sy-bell-btn { position: relative; }
.sy-bell-btn [data-notif-count] { position: absolute; top: 4px; right: 2px; min-width: 1.1rem; height: 1.1rem; font-size: .65rem; box-shadow: 0 0 0 2px var(--bg); }
.sy-bell-btn.is-ringing .ph { animation: sy-ring 1.2s var(--ease); transform-origin: 50% 10%; }
@keyframes sy-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
.menu.sy-bell-menu { width: min(400px, calc(100vw - 20px)); padding: 0; overflow: hidden; }
@media (max-width: 560px) { .menu.sy-bell-menu { position: fixed; top: calc(var(--topbar-h) + 4px); left: 10px; right: 10px; width: auto; } }
.sy-bell-head { padding: .8rem 1rem .6rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .6rem; }
.sy-bell-tabs { display: flex; gap: .25rem; padding: .2rem; border-radius: var(--r-sm); background: var(--bg-sunken); border: 1px solid var(--line); }
.sy-bell-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .38rem .6rem; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.sy-bell-tabs button.is-active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-1); }
.sy-bell-tabs .count { min-width: 1.15rem; height: 1.15rem; font-size: .66rem; }
.sy-bell-list { max-height: min(440px, calc(100dvh - 220px)); overflow-y: auto; padding: .3rem; scrollbar-width: thin; }
.sy-bell-day { font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: .6rem .7rem .3rem; }
.sy-day-sticky { position: sticky; top: 0; z-index: 1; background: var(--bg-elev); border-bottom: 1px solid var(--line); padding: .5rem .95rem; }
.sy-bell-item { display: flex; align-items: flex-start; gap: .65rem; padding: .6rem .7rem; border-radius: var(--r-sm); color: var(--text); text-decoration: none !important; position: relative; transition: background .12s; }
.sy-bell-item:hover { background: var(--bg-hover); }
.sy-bell-item.is-unread { background: color-mix(in srgb, var(--brand-soft) 70%, transparent); }
.sy-bell-item.is-unread:hover { background: var(--brand-soft); }
.sy-bell-title { display: block; line-height: 1.3; }
.sy-bell-ico { --b-fg: var(--info); --b-bg: var(--info-soft); width: 2.15rem; height: 2.15rem; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--b-bg); color: var(--b-fg); font-size: 1.05rem; }
.sy-bell-ico[data-tone="success"] { --b-fg: var(--brand-ink); --b-bg: var(--brand-soft); }
.sy-bell-ico[data-tone="warning"] { --b-fg: var(--warning); --b-bg: var(--warning-soft); }
.sy-bell-ico[data-tone="danger"] { --b-fg: var(--danger); --b-bg: var(--danger-soft); }
.sy-bell-ico[data-tone="muted"] { --b-fg: var(--text-2); --b-bg: var(--muted-soft); }
.sy-bell-mark { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-elev); color: var(--text-2); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; opacity: .0; transition: opacity .15s, border-color .15s, color .15s; }
.sy-bell-item:hover .sy-bell-mark, .sy-bell-mark:focus-visible { opacity: 1; }
.sy-bell-mark:hover { border-color: var(--brand); color: var(--brand-ink); }
@media (hover: none) { .sy-bell-mark { opacity: 1; } }
.sy-bell-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand); margin-top: .45rem; flex-shrink: 0; }
.sy-bell-item.is-unread::before { content: ""; position: absolute; left: 2px; top: .9rem; width: 3px; height: 1.2rem; border-radius: 3px; background: var(--brand); }
.sy-bell-empty { padding: 2.2rem 1rem; }
.sy-bell-foot { display: flex; align-items: center; gap: .25rem; padding: .25rem; border-top: 1px solid var(--line); }
.sy-bell-foot .menu-item { justify-content: center; flex: 1; }

/* Page Notifications */
.sy-notif-row { align-items: flex-start; position: relative; }
.sy-notif-row.is-unread { background: color-mix(in srgb, var(--brand-soft) 60%, transparent); }
.sy-notif-row.is-unread::before { content: ""; position: absolute; left: 0; top: .8rem; bottom: .8rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.sy-notif-main { min-width: 0; color: var(--text); text-decoration: none !important; }
.sy-notif-main:hover .strong { color: var(--brand-ink); }
.sy-notif-card { color: var(--text); text-decoration: none !important; }
.sy-notif-card.is-unread { border-color: var(--brand-line); background: linear-gradient(180deg, var(--brand-soft), var(--bg-elev) 70%); }

/* ------------------------------------------------------------------ Utilisateurs */
.sy-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .55rem; }
.sy-role-choice { --role: #64748b; display: flex; flex-direction: column; gap: .2rem; padding: .7rem .85rem; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg-elev); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sy-role-choice .ph-circle { color: var(--role); font-size: .6rem; }
.sy-role-choice.is-on { border-color: var(--role); box-shadow: inset 0 0 0 1px var(--role); background: color-mix(in srgb, var(--role) 9%, var(--bg-elev)); }
.sy-ucard .sy-role { font-size: .7rem; }
.sy-secret { display: flex; align-items: center; gap: .6rem; padding: .8rem; border-radius: var(--r); background: var(--bg-sunken); border: 1px dashed var(--line-strong); }
.sy-secret code { flex: 1; font-size: 1.25rem; font-weight: 800; letter-spacing: .06em; color: var(--text); background: none; }

/* ------------------------------------------------------------------ Rôles : cartes + matrice */
.sy-role-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: .7rem; overflow-x: auto; padding: 2px 2px .6rem; margin-bottom: .4rem; flex-shrink: 0; scrollbar-width: thin; }
.sy-role-card { --role: #64748b; position: relative; padding: .85rem .95rem .8rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--bg-elev); border-top: 3px solid var(--role); min-width: 0; }
.sy-role-ico { color: var(--role); font-size: 1.05rem; }
.sy-role-bar { height: 4px; border-radius: 4px; background: var(--bg-sunken); margin-top: .5rem; overflow: hidden; }
.sy-role-bar > i { display: block; height: 100%; background: var(--role); border-radius: inherit; transition: width .3s var(--ease); }
.sy-role-sys { position: absolute; right: .7rem; bottom: .9rem; font-size: .62rem; display: none; }
.sy-matrix { border-collapse: separate; border-spacing: 0; }
.sy-matrix th, .sy-matrix td { border-bottom: 1px solid var(--line); }
.sy-matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-elev); }
.sy-matrix .sy-mx-first { position: sticky; left: 0; z-index: 2; background: var(--bg-elev); text-align: left; min-width: 260px; max-width: 360px; font-weight: 500; }
.sy-matrix thead .sy-mx-first { z-index: 4; background: var(--bg-elev); }
.sy-matrix .sy-mx-group .sy-mx-first { background: var(--bg-sunken); }
.sy-matrix .sy-mx-row:hover .sy-mx-first { background: var(--bg-hover); }
.sy-mx-first .small { display: block; font-weight: 600; color: var(--text); }
.sy-mx-key { font-size: .68rem; color: var(--text-3); background: none; padding: 0; }
.sy-mx-role { --role: #64748b; text-align: center; min-width: 118px; vertical-align: bottom; }
.sy-mx-rolename { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--role) 14%, transparent); font-size: .78rem; font-weight: 750; color: var(--text); white-space: nowrap; }
.sy-mx-rolename i { color: var(--role); font-size: .55rem; }
.sy-mx-group th, .sy-mx-group td { background: var(--bg-sunken); padding-top: .55rem; padding-bottom: .55rem; }
.sy-mx-group th { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.sy-mx-cell { text-align: center; }
.sy-mx-row:hover th, .sy-mx-row:hover td { background: var(--bg-hover); }
.sy-mx-box { width: 1.7rem; height: 1.7rem; border-radius: 7px; border: 1.5px solid var(--line-strong); background: var(--bg-elev); display: inline-grid; place-items: center; cursor: pointer; color: transparent; font-size: .9rem; transition: background .12s, border-color .12s, transform .12s; padding: 0; }
.sy-mx-box:hover { border-color: var(--brand); transform: scale(1.06); }
.sy-mx-box.is-on { background: var(--brand); border-color: var(--brand); color: #000; }
.sy-mx-box.is-locked { cursor: default; opacity: .55; }
.sy-mx-box.is-locked:hover { transform: none; }
.sy-mx-box.is-changed { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 45%, transparent); }
.sy-color { width: 3rem; height: 2.6rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: transparent; padding: .2rem; cursor: pointer; }

/* ------------------------------------------------------------------ Assistant IA (1 ou 2 volets) */
.sy-ai { display: grid; grid-template-columns: 280px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; background: var(--bg-elev); height: calc(100dvh - var(--topbar-h) - 9.5rem); min-height: 460px; }
body.is-fit .sy-ai { flex: 1; min-height: 0; height: auto; }
.sy-ai.list-hidden { grid-template-columns: minmax(0, 1fr); }
.sy-ai.list-hidden .sy-ai-list { display: none; }
.sy-ai-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--bg-sunken); animation: sy-slide .25s var(--ease); }
@keyframes sy-slide { from { opacity: 0; transform: translateX(-12px); } }
.sy-ai-list-head { display: flex; gap: .4rem; padding: .7rem; }
.sy-ai-items { flex: 1; min-height: 0; overflow-y: auto; padding: .2rem .45rem .5rem; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.sy-ai-item { display: flex; align-items: center; gap: .1rem; border-radius: var(--r-sm); position: relative; }
.sy-ai-item:hover { background: var(--bg-hover); }
.sy-ai-item.is-open-0, .sy-ai-item.is-open-1 { background: var(--bg-elev); box-shadow: var(--shadow-1); }
.sy-ai-item-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; padding: .55rem .6rem; border: 0; background: none; text-align: left; cursor: pointer; color: var(--text-2); font-size: .86rem; font-weight: 600; border-radius: var(--r-sm); }
.sy-ai-item.is-open-0 .sy-ai-item-main, .sy-ai-item.is-open-1 .sy-ai-item-main { color: var(--text); }
.sy-ai-item .input { margin: .2rem; }
.sy-ai-where { min-width: 1.2rem; height: 1.2rem; border-radius: 6px; background: var(--brand); color: #000; font-size: .66rem; font-weight: 800; display: grid; place-items: center; }
.sy-ai-where:empty { width: .45rem; min-width: .45rem; height: .45rem; border-radius: 50%; }
.sy-ai-item-tools { display: flex; gap: 1px; opacity: 0; transition: opacity .12s; padding-right: .2rem; }
.sy-ai-item:hover .sy-ai-item-tools, .sy-ai-item:focus-within .sy-ai-item-tools { opacity: 1; }
@media (hover: none) { .sy-ai-item-tools { opacity: 1; } }
.sy-ai-list-foot { padding: .65rem .9rem; border-top: 1px solid var(--line); }
.sy-ai-panes { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sy-ai-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.sy-ai-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.sy-ai.is-dual .sy-ai-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sy-ai-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
.sy-ai.is-dual .sy-ai-pane + .sy-ai-pane { border-left: 1px solid var(--line); }
.sy-ai-pane::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; transition: background .2s; z-index: 1; }
.sy-ai-pane.is-active::before { background: var(--brand); }
.sy-ai-head { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.sy-ai-num { width: 1.5rem; height: 1.5rem; border-radius: 7px; background: var(--bg-sunken); border: 1px solid var(--line); display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: var(--text-2); }
.sy-ai-pane.is-active .sy-ai-num { background: var(--brand); border-color: var(--brand); color: #000; }
.sy-ai-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.1rem clamp(.8rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: .9rem; scrollbar-width: thin; }
.sy-ai-body .chat-msg { max-width: min(860px, 94%); }
.sy-ai.is-dual .sy-ai-body .chat-msg { max-width: 96%; }
.chat-bubble.is-error { background: var(--danger-soft); color: var(--text); }
.sy-ai-actions { display: flex; gap: .2rem; margin-top: .25rem; opacity: 0; transition: opacity .15s; }
.chat-msg:hover .sy-ai-actions, .chat-msg:focus-within .sy-ai-actions { opacity: 1; }
.sy-ai-welcome { margin: auto; width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: .8rem; align-items: center; text-align: center; padding: 1rem 0; animation: page-rise .4s var(--ease) both; }
.sy-ai-welcome .prose { max-width: 60ch; margin: 0 auto; }
.sy-ai-sugg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; width: 100%; text-align: left; margin-top: .4rem; }
.sy-ai.is-dual .sy-ai-sugg { grid-template-columns: minmax(0, 1fr); }
.sy-sugg { display: flex; gap: .65rem; align-items: flex-start; padding: .75rem .85rem; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-elev); cursor: pointer; font: inherit; font-size: .86rem; font-weight: 600; color: var(--text); text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sy-sugg:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.sy-sugg .ph { color: var(--brand-ink); font-size: 1.15rem; flex-shrink: 0; }
.sy-ai-input { display: flex; gap: .5rem; padding: .75rem clamp(.7rem, 2.4vw, 2rem); border-top: 1px solid var(--line); align-items: flex-end; flex-shrink: 0; }
.sy-ai-input textarea { flex: 1; resize: none; min-height: 2.8rem; max-height: 10rem; border-radius: var(--r); }
.sy-ai-hint { padding: .45rem .9rem .6rem; border-top: 1px solid var(--line); flex-shrink: 0; }
@media (max-width: 1023px) {
  .sy-ai { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--topbar-h) - 8rem); }
  .sy-ai .sy-ai-list { display: none; }
  .sy-ai.show-list .sy-ai-list { display: flex; }
  .sy-ai.show-list .sy-ai-panes { display: none; }
  .sy-ai-sugg { grid-template-columns: minmax(0, 1fr); }
  .sy-ai-hint { display: none; }
}

/* ------------------------------------------------------------------ Petits écrans */
@media (max-width: 767px) {
  .sy-table td[style*="min-width"] { min-width: 0 !important; }
  .sy-idcard .avatar-2xl { --s: 5.5rem; }
  .sy-role-strip { grid-auto-columns: minmax(200px, 78%); }
  .sy-bulkbar .select-inline, .sy-bulkbar .input { flex: 1 1 100%; width: 100% !important; }
}