/* ============ Linkii — design system (POC) · charte « Corporate », cf. brand/charte.md ============ */
:root {
  --bg: #F5F7FA; --surface: #fff; --ink: #0B1F3A; --muted: #5A6B80; --line: #DDE3EA; --line-2: #C5CED9; --row: #EDF1F5;
  --brand: #0B1F3A;            /* couleur principale : Nuit par défaut, remplacée par celle du revendeur */
  --brand-tint: color-mix(in srgb, var(--brand) 8%, #fff);
  --signal: #3B82C4;           /* accent : logo, sélection, focus, liens */
  --ok: #1E8E5A; --ok-bg: #E1F0E8; --ok-ink: #155A38;
  --warn: #B7791F; --warn-bg: #FBF0DC; --warn-ink: #7A4F12;
  --danger: #C8372D; --danger-bg: #FBE4E2; --danger-ink: #8A231C;
  --radius: 4px;
  --card-radius: 10px;          /* cartes Écrans, Playlists, Médiathèque */
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; font-weight: 500; }
p { font-weight: 400; }
b, strong, th { font-weight: 500; }
a { color: var(--signal); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

/* ---------- Logo (wordmark « linkii ») ---------- */
.wm { display: inline-flex; align-items: baseline; font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.wm .i { display: inline-block; width: .095em; height: .5em; background: currentColor; margin-left: .07em; position: relative; }
.wm .i + .i { margin-left: .1em; }
.wm .i::before { content: ""; position: absolute; left: 0; top: -.2em; width: .095em; height: .095em; background: currentColor; }
.wm .i.s::before { background: var(--signal); }
.mark { width: 30px; height: 30px; border-radius: var(--radius); background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 500; font-size: 15px; flex: none; }

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--surface); border-right: 1px solid var(--line); padding: 22px 14px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 17px; color: var(--ink); padding: 4px 10px 24px; }
.sidebar .brand .wm { font-size: 26px; }
.sidebar .brand .ver { font-size: 11px; font-weight: 400; color: var(--muted, #6b7280); align-self: flex-end; white-space: nowrap; }
.sidebar a.nav, .sidebar button.nav { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 12px; color: var(--muted); text-decoration: none; padding: 9px 12px; border-radius: var(--radius); transition: background .12s, color .12s; }
.sidebar .nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .nav:hover { background: var(--bg); color: var(--ink); }
.sidebar a.nav.active { background: var(--brand-tint); color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--brand); border-radius: 0 var(--radius) var(--radius) 0; }
.sidebar .spacer { flex: 1; }
main.content { flex: 1; padding: 32px 40px 60px; width: 100%; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: 28px; letter-spacing: -.01em; line-height: 1.2; }
.page-head .sub { color: var(--muted); margin-top: 4px; }

/* ---------- Composants ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.card h3 { font-size: 16px; margin-bottom: 4px; }
.card .hint, .modal .hint { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; }
.stat .n { font-size: 28px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .l { color: var(--muted); font-size: 13px; margin-top: 2px; }
.stat .n.ok { color: var(--ok); }

input, select, textarea { font: inherit; color: var(--ink); padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; outline: none; transition: border-color .12s; }
select { max-width: 100%; text-overflow: ellipsis; }   /* un nom d'option très long ne doit pas élargir la page */
input:focus, select:focus, textarea:focus { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
input:disabled { background: var(--bg); color: var(--muted); }
.btn { font: inherit; font-weight: 500; cursor: pointer; border: 1px solid var(--brand); border-radius: var(--radius); padding: 9px 16px; background: var(--brand); color: #fff; transition: background .12s, border-color .12s; display: inline-flex; align-items: center; gap: 8px; }
.btn:hover { background: color-mix(in srgb, var(--brand) 85%, #fff); border-color: color-mix(in srgb, var(--brand) 85%, #fff); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--bg); border-color: var(--muted); }
.btn.danger { background: #fff; color: var(--danger); border-color: #EBC2BE; }
.btn.danger:hover { background: var(--danger-bg); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn.icon { padding: 5px 9px; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--radius); font-size: 12px; font-weight: 500; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot, currentColor); }
.badge.en-ligne { color: var(--ok-ink); background: var(--ok-bg); --dot: var(--ok); }
.badge.mise-a-jour { color: var(--warn-ink); background: var(--warn-bg); --dot: var(--warn); }
.badge.hors-ligne { color: var(--danger-ink); background: var(--danger-bg); --dot: var(--danger); }

.msg { color: var(--ok); font-weight: 500; margin-top: 10px; }
.err { color: var(--danger); font-weight: 500; margin-top: 10px; }
small, .muted { color: var(--muted); }

/* ---------- Cartes écran ---------- */

/* ---------- Médiathèque ---------- */

/* ---------- Playlists ---------- */
/* Playlists : grille de cartes (liste) */
.pl-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--muted); }
.pl-tools select { font-size: 13px; padding: 5px 8px; }
.pl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pl-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color .12s; }
.pl-card:hover { border-color: var(--signal); }
.pl-card:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.pl-cover { position: relative; aspect-ratio: 16/9; border-radius: 3px 3px 0 0; text-decoration: none; background: var(--ink); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; overflow: hidden; }
.pl-cover.single { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.pl-cover:not(.single) .pl-tile:first-child { grid-row: span 2; }
.pl-cover:not(.single):has(.pl-tile:nth-child(2):nth-last-child(2)) .pl-tile:nth-child(2) { grid-row: span 2; }
.pl-tile { min-height: 0; display: grid; place-items: center; background: #23395A; color: #fff; overflow: hidden; }
.pl-tile img, .pl-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-tile.pl-void { background: var(--ink); color: #9AAABD; }
.pl-tile.pl-void svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pl-app { display: grid; place-items: center; font-size: 30px; line-height: 1; }
.pl-app svg { stroke: currentColor; }
.pl-count { position: absolute; left: 10px; bottom: 10px; font-family: var(--mono); font-size: 12px; background: rgba(11,31,58,.85); color: #fff; padding: 2px 8px; border-radius: var(--radius); }
.pl-body { padding: 14px 16px 16px; display: grid; gap: 6px; }
.pl-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-name { flex: 1; min-width: 0; font-size: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; }
.pl-name:hover { color: var(--signal); }
.pl-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); min-height: 22px; }
.pl-meta .mono { font-family: var(--mono); }
.pl-add { font: inherit; cursor: pointer; border-style: dashed; border-color: var(--line-2); background: transparent; align-items: center; justify-content: center; gap: 12px; min-height: 240px; color: var(--muted); }
.pl-add:hover { background: #fff; color: var(--ink); }
.pl-plus { width: 64px; height: 64px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; display: grid; place-items: center; color: var(--ink); transition: border-color .12s, color .12s; }
.pl-plus svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.pl-add:hover .pl-plus { border-color: var(--signal); color: var(--signal); }
.btn .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.back { display: inline-block; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 4px; }
.back:hover { color: var(--ink); }
.item-row { display: grid; grid-template-columns: 28px 84px minmax(0,1fr) auto auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 6px; }
.item-row .idx { color: var(--muted); font-family: var(--mono); font-size: 13px; text-align: center; }
.item-row .th { aspect-ratio: 16/9; background: var(--ink); border-radius: 3px; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 500; position: relative; }
.item-row .th img, .item-row .th video { width: 100%; height: 100%; object-fit: cover; }
.item-row input[type=number] { width: 100%; }
.item-row .dur-cell { color: var(--muted); font-size: 14px; white-space: nowrap; text-align: right; }
.item-row .kebab { margin-right: 0; }
.item-open { display: grid; justify-items: start; gap: 2px; min-width: 0; padding: 4px 6px; margin: -4px -6px; border: 0; border-radius: var(--radius); background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.item-open b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--signal); }
.item-open:hover { background: var(--bg); }
.item-open:hover .item-kind { text-decoration: underline; }
.item-open:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.sort-list .item-row { cursor: grab; position: relative; transition: transform .18s ease; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sort-list .item-row img, .sort-list .item-row video { -webkit-user-drag: none; pointer-events: none; }
.sort-list .item-row .grip { display: none; color: var(--muted); touch-action: none; }
.sort-list .item-row .grip .ico-svg { display: block; margin: 0 auto; }
.sort-list .item-row .idx .n { display: none; }   /* pas de numéro : la poignée reste visible */
.sort-list .item-row .grip { display: block; }
@media (hover: none) { .sort-list .item-row .idx .n { display: none; } .sort-list .item-row .grip { display: block; padding: 8px 0; } }
.sort-list.sorting { user-select: none; -webkit-user-select: none; }
.sort-list.sorting .item-row { cursor: grabbing; }
.sort-list .item-row.lifted { z-index: 5; transition: none; cursor: grabbing; border-color: var(--line-2); box-shadow: 0 10px 24px rgba(11,31,58,.18); }
.sort-list .item-row.lifted .idx .n { display: none; }
.sort-list .item-row.lifted .grip { display: block; color: var(--ink); }
.sort-list .item-row.settling { transition: transform .16s ease; }
.publish-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.draft-dot { color: var(--warn-ink); background: var(--warn-bg); padding: 2px 9px; border-radius: var(--radius); font-size: 12px; font-weight: 500; }
.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty .big { font-size: 18px; color: var(--ink); font-weight: 500; margin-bottom: 6px; }

/* ============ Connexion / création de compte ============ */
.wz { position: fixed; inset: 0; z-index: 100; background: var(--bg); color: var(--ink); display: grid; place-items: center; overflow: auto; padding: 24px; }
.wz-blobs { display: none; }
.wz.auth .auth-card { width: min(420px, 100%); padding: 36px 36px 30px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.auth-card .brand { padding: 0 0 26px; }
.auth-card .brand .wm { font-size: 34px; }
.auth-card h1 { font-size: 24px; letter-spacing: -.01em; margin-bottom: 6px; }
.auth-card .lead { color: var(--muted); margin-bottom: 22px; }
.auth-form { display: grid; gap: 6px; }
.auth-form label { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 10px; }
.auth-form input { width: 100%; padding: 11px 12px; }
.auth-form .btn { margin-top: 18px; justify-content: center; padding: 11px; }
.auth-form .validation-message { color: var(--danger); font-size: 13px; }
.auth-form ul.validation-errors { color: var(--danger); margin: 6px 0 0; padding-left: 18px; }
.auth-alt { margin: 16px 0 0; text-align: center; font-size: 14px; }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--signal); text-decoration: underline; cursor: pointer; }
.powered { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.sidebar .powered { margin: 10px 0 0; text-align: left; padding: 0 10px; }

/* Création d'un espace : Microsoft / Google, consentements, conditions générales, confirmation de l'adresse */
.wz.auth .auth-card { position: relative; }
.trial-tag { display: inline-block; background: var(--brand-tint); border-radius: var(--radius); padding: 3px 9px; font-size: 13px; font-weight: 500; margin-bottom: 12px; }
.sso { display: grid; gap: 10px; }
.sso-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; border: 1px solid var(--line-2); background: #fff; border-radius: var(--radius); color: var(--ink); font-weight: 500; text-decoration: none; }
.sso-btn:hover { border-color: var(--ink); text-decoration: none; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 20px 0 4px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sso-who { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 6px; }
.sso-who .grow { flex: 1; min-width: 0; font-size: 14px; }
.sso-who small { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.consents { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 4px; }
.auth-form label.consent { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; margin: 0; font-size: 14px; font-weight: 400; color: var(--ink); cursor: pointer; line-height: 1.4; position: relative; }
.consent + .consent { border-top: 1px solid var(--row); }
.consent .txt small { display: block; font-size: 12px; margin-top: 2px; }
.consent .req { color: var(--danger); font-size: 12px; font-weight: 500; }
.consent .opt { color: var(--muted); font-size: 12px; }
.auth-form input.switch-input { position: absolute; opacity: 0; width: 40px; height: 24px; margin: 0; padding: 0; pointer-events: none; }
/* Interrupteurs « iPhone » (.switch-ui, .switch, input.ios) : pilule grise, pastille blanche, verte une fois activée. Définis une seule fois, plus bas. */
/* « Créer mon espace » inactif tant que les conditions générales ne sont pas acceptées (contrôlé aussi par le serveur) */
form:has([data-terms]:not(:checked)) [data-needs-terms] { background: var(--line-2); border-color: var(--line-2); cursor: not-allowed; pointer-events: none; }
form:has([data-terms]:checked) .terms-hint { visibility: hidden; }
.terms-hint { font-size: 12px; color: var(--muted); text-align: center; margin: 4px 0 0; }
.terms-dialog { padding: 0; border: 1px solid var(--line); border-radius: var(--radius); width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 720px); color: var(--ink); }
.terms-dialog[open] { display: flex; flex-direction: column; }
.terms-dialog::backdrop { background: rgba(11,31,58,.45); }
.terms-dialog .modal-head h3 { margin: 0; font-size: 18px; }
.terms-dialog .modal-head small { display: block; font-size: 12px; }
.terms-dialog .modal-x { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 6px; border-radius: var(--radius); display: grid; }
.terms-dialog .modal-x:hover { background: var(--bg); color: var(--ink); }
.terms-body { padding: 16px 22px; overflow: auto; font-size: 14px; color: #2A3B52; }
.terms-body h4 { font-size: 15px; font-weight: 500; margin: 16px 0 4px; color: var(--ink); }
.terms-body h4:first-child { margin-top: 0; }
.terms-body p { margin: 0 0 6px; }
.terms-dialog .modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--bg); }
.auth-close { position: absolute; top: 14px; right: 14px; margin: 0; }
.auth-close .modal-x { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 6px; border-radius: var(--radius); display: grid; }
.auth-close .modal-x:hover { background: var(--bg); color: var(--ink); }
.auth-ico { width: 52px; height: 52px; border-radius: var(--radius); background: var(--brand-tint); display: grid; place-items: center; margin-bottom: 18px; }
.auth-ico.ok { background: var(--ok-bg); color: var(--ok); }
.addr { font-family: var(--mono); font-size: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 8px 8px 12px; margin: 4px 0 14px; display: flex; align-items: center; gap: 8px; }
.addr span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.addr .btn { font-family: inherit; text-decoration: none; }

/* Connexion en deux parties : e-mail à gauche, connexion rapide dans un panneau aux couleurs du revendeur à droite */
.wz.auth .auth-card:has(> .auth-split.with-side) { width: min(980px, 100%); min-height: min(600px, calc(100vh - 48px)); padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr auto; overflow: hidden; }
.auth-card:has(> .auth-split.with-side) > .brand { grid-column: 1; grid-row: 1; padding: 48px 56px 22px; }
.auth-card:has(> .auth-split.with-side) > .powered { grid-column: 1; grid-row: 3; margin: 0 0 22px; }
.auth-split { display: contents; }
.auth-split.with-side .split-main { grid-column: 1; grid-row: 2; padding: 0 56px 40px; display: flex; flex-direction: column; justify-content: center; }
.auth-split.with-side .split-main .auth-form { max-width: 380px; }
.split-side { grid-column: 2; grid-row: 1 / -1; background: var(--brand); color: #fff; padding: 48px 36px; display: flex; flex-direction: column; justify-content: center; }
.split-side h2 { font-size: 18px; margin: 0 0 2px; color: #fff; }
.split-side p { color: color-mix(in srgb, #fff 72%, var(--brand)); font-size: 14px; margin: 0 0 18px; }
.split-side .sso-btn { border-color: #fff; }
.split-side .sso-btn:hover { border-color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, #fff 45%, transparent); }
.auth-alt.left { text-align: left; color: var(--muted); }
@media (max-width: 820px) {
  .wz.auth .auth-card:has(> .auth-split.with-side) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; width: min(480px, 100%); }
  .auth-card:has(> .auth-split.with-side) > .brand { grid-row: auto; padding: 32px 28px 20px; }
  .auth-split.with-side .split-main { grid-row: auto; padding: 0 28px 28px; }
  .split-side { grid-column: 1; grid-row: auto; padding: 26px 28px; }
  .auth-card:has(> .auth-split.with-side) > .powered { grid-row: auto; margin: 16px 0; }
}

/* Création d'un espace : fenêtre compacte par-dessus la page de connexion (tient sans défilement sur un écran courant) */
.auth-modal-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(11,31,58,.45); }
.auth-modal { position: fixed; z-index: 111; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px 20px; box-shadow: 0 20px 50px rgba(11,31,58,.25); }
.auth-modal h1 { font-size: 21px; margin: 0 0 2px; }
.auth-modal .lead { margin-bottom: 12px; font-size: 14px; }
.auth-modal .trial-tag { margin-bottom: 8px; font-size: 12px; }
.auth-modal-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 0 28px 14px 0; }
.auth-modal-head h1 { margin: 0; }
.auth-modal-head .trial-tag { margin: 0; }
.auth-modal .auth-close { display: grid; text-decoration: none; }
.auth-modal .auth-or { margin: 14px 0 0; }
.auth-modal .auth-form label { margin-top: 8px; }
.auth-modal .auth-form input { padding: 8px 11px; }
.auth-modal .auth-form .btn { margin-top: 12px; padding: 10px; }
.auth-modal .auth-alt { margin-top: 10px; }
.auth-modal .consents { margin-top: 10px; padding-top: 0; }
.auth-modal .auth-form label.consent { padding: 4px 0; font-size: 13px; gap: 10px; line-height: 1.35; }
.auth-modal .switch-ui { width: 36px; height: 22px; border-radius: 11px; } .auth-modal .switch-ui::after { width: 18px; height: 18px; } .auth-modal .switch-input:checked + .switch-ui::after { transform: translateX(14px); }
.auth-modal .terms-hint { display: none; }   /* le bouton inactif suffit */
.auth-modal .consent .txt small { font-size: 11px; margin-top: 0; }
.auth-modal .sso-who { padding: 8px 10px; }
.auth-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.auth-cols > div { display: grid; gap: 6px; min-width: 0; }
.auth-cols .span-2 { grid-column: 1 / -1; }
.pwd-match { font-size: 12px; min-height: 0; margin-top: 4px; color: var(--muted); }
.pwd-match:empty { display: none; }
.pwd-match.bad { color: var(--danger); }
.pwd-match.ok { color: var(--ok); }
@media (max-width: 520px) {
  .auth-modal { padding: 16px 16px 12px; }
  .auth-modal .lead { margin-bottom: 8px; }
  .auth-modal .auth-form label { margin-top: 5px; }
  .auth-modal .auth-or { margin-top: 10px; }
}
.wz.auth .err + .hint-text, .wz.auth .ok-msg + .hint-text { margin-top: 10px; }
.addr-edit { display: flex; gap: 8px; margin: 4px 0 6px; }
.addr-edit input { flex: 1; min-width: 0; padding: 9px 12px; }
.hint-text { font-size: 14px; color: var(--muted); }
.ok-msg { color: var(--ok-ink); background: var(--ok-bg); border-radius: var(--radius); padding: 8px 12px; font-size: 14px; margin: 0 0 10px; }
.resend-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; }
.verify-steps { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.verify-steps li { display: flex; gap: 10px; align-items: center; }
.verify-steps i { width: 20px; height: 20px; border-radius: 3px; border: 1px solid var(--line-2); display: grid; place-items: center; font-style: normal; font-size: 11px; flex: none; }
.verify-steps .done { color: var(--ink); } .verify-steps .done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.verify-steps .cur { color: var(--ink); font-weight: 500; } .verify-steps .cur i { border-color: var(--ink); }
.btn.block { display: flex; width: 100%; justify-content: center; margin-top: 18px; padding: 11px; text-decoration: none; }

/* Console › Clients et accès : inscription, état, essai, consentements */
.tbl-scroll { overflow-x: auto; border-radius: var(--radius); }
.clients-tbl td, .clients-tbl th { white-space: nowrap; }
.clients-tbl .cell-sub { display: block; font-size: 12px; color: var(--muted); }
.clients-tbl .src { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.clients-tbl .pill + .pill { margin-left: 4px; }
.clients-tbl th, .clients-tbl td { padding-left: 10px; padding-right: 10px; }
.clients-tbl .acts-in { display: flex; gap: 2px; justify-content: flex-end; }
.clients-tbl .cell-sub .linkish { font-size: 12px; text-decoration: none; }
.clients-tbl .cell-sub .linkish:hover { text-decoration: underline; }
.cell-mail { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.clients-tbl .acts-in form { display: contents; }
.icon-act { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer; padding: 0; }
.icon-act:hover { border-color: var(--line-2); color: var(--ink); background: #fff; }
.icon-act.on { color: var(--danger); }
.icon-act.danger:hover { color: var(--danger); background: var(--danger-bg); border-color: #EBC2BE; }
.trial-cell { min-width: 120px; }
.trial-cell .wrap { display: block; white-space: normal; max-width: 100px; line-height: 1.3; }
.clients-bar .search-box { flex: 1 1 160px; min-width: 160px; }
.clients-bar .search-box input { min-width: 0; }
.trial-track { display: block; height: 4px; background: var(--row); border-radius: 2px; margin-top: 5px; overflow: hidden; }
.trial-track span { display: block; height: 100%; background: var(--ink); }
.trial-track span.low { background: var(--warn); }
.consent-cell span { display: block; font-size: 12px; }
.consent-cell .yes { color: var(--ok-ink); font-weight: 500; }
.consent-cell .no { color: var(--muted); }
.mono { font-family: var(--mono); }

/* Compte : préférences d'e-mails, connexion Microsoft / Google */
.pref-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--row); }
.pref-row + small { display: block; margin-top: 8px; }
.sso-note { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }

/* Bandeau d'essai gratuit (espace d'une organisation) */
.trial-bar { background: var(--brand-tint); color: var(--ink); border-bottom: 1px solid var(--line); padding: 8px 20px; display: flex; align-items: center; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.trial-bar.ended { background: var(--danger-bg); color: var(--danger-ink); border-bottom-color: #F1C4BF; }
.trial-bar.soon { background: var(--warn-bg); color: var(--warn-ink); border-bottom-color: #EBD3A6; }
.trial-bar a { color: inherit; font-weight: 500; text-decoration: underline; }

/* ============ Topbar + menu utilisateur ============ */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 20; }
.topbar .org { font-weight: 500; color: var(--ink); }
.user { position: relative; }
.user-btn { display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid transparent; border-radius: var(--radius); padding: 5px 8px; cursor: pointer; font: inherit; color: var(--ink); }
.user-btn:hover { background: var(--bg); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 500; font-size: 13px; }
.who { display: flex; flex-direction: column; text-align: left; line-height: 1.25; font-size: 14px; }
.who small { font-size: 12px; }
.chev { width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-backdrop { position: fixed; inset: 0; z-index: 29; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 4px; z-index: 30; }
.menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; }
.menu a, .menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 3px; border: 0; background: transparent; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--bg); }
.menu .logout { color: var(--danger); }
.menu form { margin: 0; }

/* ============ Segmented / format d'écran ============ */
.seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.seg button { font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--line-2); background: #fff; color: var(--ink); transition: border-color .12s; }
.seg button:hover { border-color: var(--muted); }
.seg button.on { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); font-weight: 500; }
.seg button small { background: var(--row); color: var(--muted); border-radius: 3px; padding: 0 6px; font-family: var(--mono); font-size: 11px; }
.seg button.on small { background: var(--signal); color: #fff; }
/* Choix simple / expert à l'inscription : mêmes pastilles que .seg */
.mode-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mode-pick .lbl, .mode-pick small { flex-basis: 100%; }
/* Interrupteur « Passer en mode expert » dans la barre latérale, au-dessus du compte */
.nav.mode-switch { width: 100%; background: none; border: 0; font: inherit; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.nav.mode-switch:hover { color: var(--ink); }
.nav.mode-switch .switch { flex: none; }
.mode-pick .lbl { font-size: 13px; color: var(--muted); }
.mode-pick label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; }
.mode-pick label:has(input:checked) { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); font-weight: 500; }
.mode-pick input[type=radio] { margin: 0; accent-color: var(--signal); }
.mode-pick small { font-size: 12.5px; color: var(--muted); }
.shape { display: inline-block; border: 2px solid currentColor; border-radius: 2px; }
.shape.land { width: 20px; height: 12px; } .shape.port { width: 12px; height: 20px; }
.fmt { display: grid; gap: 16px; }
.fmt label, .lbl { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.lbl { margin-top: 14px; } .full { width: 100%; }
.fmt-line { color: var(--muted); font-size: 13px; }
.fmt-line small { margin-left: 4px; }

.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
.settings-grid input[type=number], .settings-grid .full { width: 100%; }

/* ============ Widgets de données / connecteurs ============ */
.dw { display: grid; gap: 14px; max-width: 640px; }
.dw-field label, .dw-check { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.dw-field input[type=text], .dw-field select { width: 100%; }
.dw-field small { display: block; margin-top: 6px; font-weight: 400; }
.dw-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.dw-note { background: #EAF2FA; border: 1px solid #C4DAF0; color: #1F4E7E; padding: 10px 14px; border-radius: var(--radius); font-size: 13px; }
.csv-pick { position: relative; display: inline-block; }
.csv-pick input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
code { font-family: var(--mono); background: var(--row); padding: 1px 5px; border-radius: 3px; font-size: 12.5px; }
.linklike { background: none; border: none; color: var(--signal); cursor: pointer; font: inherit; padding: 8px; }

/* conversion vidéo */
.spinner-lg { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Multi-tenant / white-label ---------- */
.impersonation { background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid #EBD3A6; padding: 8px 20px; display: flex; align-items: center; gap: 14px; font-size: 14px; }
.impersonation form { margin: 0; }
.impersonation button { background: var(--warn-ink); color: #fff; border: 0; border-radius: var(--radius); padding: 5px 12px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; }
.tbl { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.tbl th, .tbl td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--row); font-size: 14px; vertical-align: middle; }
.tbl th { color: var(--muted); font-size: 13px; background: var(--bg); border-bottom-color: var(--line); }
.tbl .num { text-align: right; font-family: var(--mono); font-size: 13px; }
.tbl .num.ctr { text-align: center; }
.tbl form { display: inline; margin: 0; }
.pill { display: inline-block; padding: 2px 9px; border-radius: var(--radius); font-size: 12px; font-weight: 500; background: var(--row); color: var(--muted); }
.pill.ok { background: var(--ok-bg); color: var(--ok-ink); } .pill.bad { background: var(--danger-bg); color: var(--danger-ink); } .pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.logo-prev { height: 56px; max-width: 220px; object-fit: contain; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; display: block; margin-bottom: 8px; }

/* ---------- Apps : catalogue ---------- */
.app-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--app-c, #5A6B80); color: #fff; display: grid; place-items: center; flex: none; font-size: 22px; line-height: 1; }
.app-ico .ico-svg { stroke-width: 2; }
.app-ico.sm { width: 34px; height: 34px; }
.ico-svg { display: block; flex: none; }

/* catalogue : recherche, filtres, groupes pliables */
.search-box { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 0 10px; color: var(--muted); margin-bottom: 12px; }
.search-box:focus-within { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.search-box input { flex: 1; min-width: 0; border: 0; box-shadow: none; padding: 9px 0; background: transparent; }
.search-box input:focus { box-shadow: none; }
.chip { font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: var(--radius); }
.chip:hover { border-color: var(--muted); }
.chip .ico-svg { color: var(--muted); }
.chip small { font-family: var(--mono); font-size: 11px; }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip.on .ico-svg, .chip.on small { color: #B9C6D8; }
.note-line { display: block; margin-top: 10px; }
.dur { position: absolute; right: 6px; bottom: 6px; background: rgba(11,31,58,.88); color: #fff; font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 3px; line-height: 1.5; }

/* ---------- Fenêtre modale ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(11,31,58,.45); z-index: 100; }
.modal { position: fixed; z-index: 101; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto;
         background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 22px 24px; }
.modal h3 { margin: 0 0 4px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal.app-modal { padding: 0; width: min(640px, calc(100vw - 32px)); display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.app-modal .modal-head h3 { margin: 0; font-size: 18px; }
.app-modal .modal-x { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 6px; border-radius: var(--radius); display: grid; margin: -6px -6px -6px 0; }
.app-modal .modal-x:hover { background: var(--bg); color: var(--ink); }
.modal-form { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; margin: 0; }
.app-modal .modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.app-modal .modal-body > .lbl:first-of-type { margin-top: 16px; }
.app-modal .modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--bg); }

.nav-toggle { display: none; background: none; border: 0; padding: 6px; margin-left: -6px; color: var(--ink); cursor: pointer; border-radius: var(--radius); }
.nav-backdrop { display: none; }

/* ---------- Responsive : tablette et smartphone ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: auto; z-index: 60; width: min(280px, 85vw); transform: translateX(-100%); transition: transform .2s; overflow-y: auto; }
  .sidebar.open { transform: none; }
  .nav-backdrop { display: block; position: fixed; inset: 0; background: rgba(11,31,58,.45); z-index: 55; }
  .sidebar .nav { padding: 12px; }
  main.content { padding: 20px 16px 48px; } .topbar { padding: 0 16px; gap: 10px; }
  .topbar .org { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page-head { margin-bottom: 18px; } .page-head h1 { font-size: 24px; }
  .pl-grid { grid-template-columns: 1fr; gap: 14px; }
  .item-row { grid-template-columns: 24px 64px minmax(0,1fr) auto; } .item-row .dur-cell { grid-column: 3; grid-row: 2; text-align: left; font-size: 13px; } .item-row .kebab { grid-column: 4; grid-row: 1; }
}
@media (max-width: 640px) {
  .who, .user-btn .chev { display: none; }
  .menu { position: fixed; left: 12px; right: 12px; top: 64px; min-width: 0; }
  .card { padding: 16px; }
  .tbl { display: block; overflow-x: auto; white-space: nowrap; }
  .page-head > .btn, .page-head .row > .btn { flex: 1; justify-content: center; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 8px; } .stat { padding: 12px 14px; } .stat .n { font-size: 24px; }
  .publish-bar .btn { flex: 1 1 100%; justify-content: center; }
  .btn, select, input { min-height: 40px; } .btn.sm { min-height: 34px; }
  .modal:not(.app-modal) { width: calc(100vw - 16px); padding: 18px 16px; }
  .modal.app-modal { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; border-bottom: 0; }
  .app-modal .modal-foot { flex-direction: column-reverse; } .app-modal .modal-foot .btn { justify-content: center; }
}

/* fenêtres de confirmation (désinstaller, supprimer) */
.modal.app-modal.sm { width: min(440px, calc(100vw - 32px)); }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-solid:hover { background: #A92D24; border-color: #A92D24; }
@media (max-width: 640px) { .modal.app-modal.sm { width: 100%; } }

/* champ « fichier importé » des apps */
.file-pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.file-btn { position: relative; cursor: pointer; }
.file-btn input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; min-height: 0; }
.dw-field input[type=password], .dw-field input[type=number], .dw-field textarea { width: 100%; }
.dw-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ============ Installation sur l'écran d'accueil (PWA) ============ */
.pwa-install { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: 520px; margin: 0 auto;
               display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 14px;
               background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px 14px; }
.pwa-install[hidden] { display: none; }
.pwa-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; font-size: 14px; }
.pwa-text span { color: var(--muted); }
.pwa-actions { display: flex; gap: 8px; }
.menu .install-item { display: none; }
.can-install .menu .install-item { display: block; }
@media (min-width: 720px) { .pwa-install { left: auto; right: 20px; margin: 0; } }

/* ---------- Réglages : onglets et applications ---------- */
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin: -8px 0 24px; overflow-x: auto; }
.tabs a { padding: 10px 0; color: var(--muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--signal); }
/* Interrupteur iPhone, bleu Linkii : 40 × 24, pastille 20 qui glisse de 16. Trois habillages du même objet :
   button.switch (+ .on, span = pastille) · .switch-input + .switch-ui (formulaires d'inscription) · input[type=checkbox].ios (cases des formulaires) */
.switch, .switch-ui, input[type=checkbox].ios { position: relative; flex: none; box-sizing: border-box; width: 40px; height: 24px; border-radius: 12px; border: 0; background: #D1D5DB; padding: 0; transition: background .25s; }
.switch, input[type=checkbox].ios { cursor: pointer; }
.switch span, .switch-ui::after, input[type=checkbox].ios::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.16); transition: transform .25s; }
.switch.on, .switch-input:checked + .switch-ui, input[type=checkbox].ios:checked { background: var(--signal, #3B82C4); }
.switch.on span, .switch-input:checked + .switch-ui::after, input[type=checkbox].ios:checked::after { transform: translateX(16px); }
.switch:focus-visible, .switch-input:focus-visible + .switch-ui, input[type=checkbox].ios:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.switch:disabled, input[type=checkbox].ios:disabled { opacity: .45; cursor: not-allowed; }
input[type=checkbox].ios { -webkit-appearance: none; appearance: none; margin: 0; }
/* petit interrupteur pour les listes denses (arbre du périmètre, apps, dossiers) ; .some : « en partie » (pastille au milieu, bleu clair) */
.switch.sm { width: 32px; height: 20px; border-radius: 10px; }
.switch.sm span { width: 16px; height: 16px; }
.switch.sm.on span { transform: translateX(12px); }
.switch.some { background: color-mix(in srgb, var(--signal, #3B82C4) 45%, #D1D5DB); }
.switch.sm.some span { transform: translateX(6px); }
label:has(> input[type=checkbox].ios) { display: flex; align-items: center; gap: 10px; cursor: pointer; }

/* ---------- Éditeur de playlist : panneau Apps ---------- */
.pe-app { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .12s; }
.pe-app:hover { border-color: var(--signal); }
.pe-app b { display: block; font-weight: 500; }
.pe-app small { color: var(--muted); font-size: 12px; }
.modal.app-modal.wide { width: min(760px, calc(100vw - 32px)); }
.pe-sub { font-size: 15px; font-weight: 500; margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Menu « ⋮ » (cartes) ---------- */
.kebab { position: relative; flex: none; margin-right: -6px; }
.kebab-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--muted); cursor: pointer; }
.kebab-btn:hover, .kebab-btn[aria-expanded="true"] { background: var(--bg); border-color: var(--line); color: var(--ink); }
.kebab-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.kebab-backdrop { position: fixed; inset: 0; z-index: 40; }
.kebab-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 41; min-width: 180px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 4px; display: grid; }
.kebab-menu a, .kebab-menu button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 3px; background: none; font: inherit; font-size: 14px; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.kebab-menu a:hover, .kebab-menu button:hover { background: var(--bg); }
.kebab-menu .ico-svg { color: var(--muted); }
.kebab-menu .danger { color: var(--danger); }
.kebab-menu .danger .ico-svg { color: var(--danger); }
.badge.neutre { color: var(--muted); background: var(--row); font-weight: 400; }
.badge.neutre::before { display: none; }
.btn.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-solid:hover { background: var(--danger-ink); border-color: var(--danger-ink); }
.rename-row { gap: 8px; max-width: 560px; margin: 2px 0 4px; }
.rename-row input { font-size: 20px; }

/* ---------- Écrans : publication et widgets ---------- */
.modal.app-modal.wg-modal { width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.wg-zoom { display: none; }   /* zoom de l'aperçu : affiché seulement en mode PC */
/* Écran en mode PC : hauteur fixe, seule la colonne de droite défile (l'aperçu reste visible) */
@media (min-width: 901px) {
  .modal.app-modal.wg-modal { height: min(720px, calc(100vh - 48px)); }
  .modal.app-modal.wg-modal .modal-body { overflow: hidden; flex: 1; min-height: 0; }
  .modal.app-modal.wg-modal .wg-body { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .modal.app-modal.wg-modal .wg-body > :not(.wg-stage-wrap) { min-height: 0; overflow-y: auto; }
  .modal.app-modal.wg-modal .wg-side { align-content: start; }   /* le contenu remonte en haut au lieu de se répartir sur toute la hauteur */
  /* zone bleu nuit : taille de référence = sa hauteur (cqh) ou sa largeur (cqw) ; le zoom multiplie */
  .modal.app-modal.wg-modal .wg-stage-wrap { min-height: 0; display: flex; overflow: auto; padding: 16px 16px 56px; container-type: size; }
  .modal.app-modal.wg-modal .wg-stage { flex: none; margin: auto; outline: 2px solid #378ADD; outline-offset: 3px; }
  .modal.app-modal.wg-modal .wg-stage.portrait { height: calc(100cqh * var(--z, 1)); width: calc(100cqh * var(--z, 1) * 9 / 16); max-height: none; aspect-ratio: auto; }
  .modal.app-modal.wg-modal .wg-stage:not(.portrait) { width: calc(100cqw * var(--z, 1)); height: auto; aspect-ratio: 16 / 9; }
  .wg-zoom { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 99px; background: rgba(11,31,58,.85); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 13px; }
  .wg-zoom span { min-width: 48px; text-align: center; font-family: var(--mono); font-size: 12px; }
  .wg-zoom button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; }
  .wg-zoom button:hover:not(:disabled) { background: rgba(255,255,255,.15); }
  .wg-zoom button:disabled { opacity: .35; cursor: default; }
}
.wg-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.wg-stage { position: relative; aspect-ratio: 16/9; background: var(--ink); border-radius: var(--radius); overflow: hidden; container-type: inline-size; touch-action: none; user-select: none; }
.wg-stage.portrait { aspect-ratio: 9/16; max-height: 62vh; margin: 0 auto; }
.wg-stage-label { position: absolute; inset: 0; display: grid; place-items: center; color: #3A5170; font-size: 2.4cqw; font-weight: 500; pointer-events: none; }
/* 1 unité = 1 % de la largeur de l'écran, comme sur le player */
.wg-item { position: absolute; font-size: calc(var(--s, 1) * 1cqw); color: #fff; background: rgba(11,31,58,.86); border: .1em solid #23395A; border-radius: .4em;
           padding: 1.1em 1.9em; cursor: grab; white-space: nowrap; line-height: 1.1; }
.wg-item.dragging { cursor: grabbing; opacity: .85; }
.wg-item.sel { outline: 2px solid var(--signal); outline-offset: 2px; }
.wg-item:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.wg-time { font-size: 4.2em; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wg-sub { font-size: 1.5em; color: #9AAABD; text-transform: capitalize; margin-top: .35em; }
/* Météo : reprend exactement le widget du player (pictogramme, température, ville + min/max/vent) */
.wg-wx { display: flex; align-items: center; gap: 1.4em; }
.wg-info { display: flex; flex-direction: column; gap: .2em; }
.wg-city { font-size: 1.7em; font-weight: 500; }
.wg-rng { font-size: 1.4em; color: #9AAABD; }
.wg-wx .wg-ico, .wg-wx .wg-temp { line-height: 1; } .wg-wx .wg-temp { letter-spacing: -.03em; }
.wg-row { display: flex; align-items: center; gap: .3em; }
.wg-ico { font-size: 3.6em; } .wg-temp { font-size: 3.6em; font-weight: 500; }
.wg-side { display: grid; gap: 14px; }
.wg-add { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wg-sim { position: absolute; top: 8px; right: 8px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius); background: rgba(11,31,58,.45); color: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.wg-sim:hover { background: rgba(11,31,58,.8); }
.wg-stage-wrap { position: sticky; top: 0; background: #0b1f3a; border-radius: var(--radius); padding: 16px; }   /* l'aperçu reste visible quand le panneau de droite défile ; fond bleu nuit comme la fenêtre de contenu */
.fmt-seg { display: flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.fmt-seg button { flex: 1; display: inline-flex; gap: 6px; align-items: center; justify-content: center; padding: 8px 0; border: 0; background: #fff; font: inherit; color: var(--muted); cursor: pointer; }
.fmt-seg button.on { background: var(--ink); color: #fff; }
.fmt-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; }
.fmt-thumbs button { max-width: 112px; display: grid; gap: 6px; justify-items: center; align-content: end; padding: 8px 4px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.fmt-thumbs button.on { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); color: var(--ink); }
.fmt-mini { display: flex; gap: 2px; width: 100%; height: 22px; }
.fmt-mini.col { flex-direction: column; width: 26px; height: 40px; }
.fmt-mini i { background: var(--row); border: 1px solid var(--line-2); border-radius: 2px; }
.fmt-thumbs .on .fmt-mini i { background: #fff; border-color: var(--signal); }
.fmt-adv { border-top: 1px solid var(--line); padding-top: 10px; }
.fmt-adv summary { cursor: pointer; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.fmt-adv .fmt-sum { display: block; margin: 4px 0 0 21px; color: var(--muted); }
.fmt-adv[open] .fmt-sum { display: none; }
.fmt-adv[open] > .fmt-block { margin-top: 12px; }
.wg-placed { display: grid; }
.wg-placed-row { display: flex; align-items: center; border-bottom: 1px solid var(--line); border-radius: 4px; }
.wg-placed-row.sel { background: var(--row); }
.wg-placed-main { flex: 1; display: flex; align-items: center; gap: 10px; padding: 7px 4px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.wg-tile { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: grab; }
.wg-tile:hover { border-color: var(--signal); }
/* QR code, compte à rebours, citation : mêmes tailles que sur l'écran (index.html du player) */
.wg-qr { width: 12em; height: 12em; display: block; }
.wg-ql { font-size: 1.6em; font-weight: 600; text-align: center; margin: .5em auto 0; max-width: 7.5em; white-space: normal; line-height: 1.2; }
.wg-cd { display: flex; flex-direction: column; align-items: center; gap: .2em; min-width: 10em; }
.wg-cd.off { opacity: .45; }
.wg-cd-l { font-size: 1.8em; color: #9AAABD; }
.wg-cd-n { font-size: 6em; font-weight: 500; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.wg-cd-n.txt { font-size: 3em; text-align: center; }
.wg-cd-u { font-size: 1.8em; }
.wg-q-t { font-size: 2.2em; line-height: 1.25; font-style: italic; }
.wg-q-a { font-size: 1.5em; color: #9AAABD; margin-top: .5em; }
.wg-stage.drop { outline: 2px dashed var(--signal); outline-offset: -4px; }
.pe-app[draggable="true"] { cursor: grab; }
/* icône de réglages d'un widget posé : visible au survol et sur le widget sélectionné ; taille fixe (le widget, lui, suit l'échelle) */
.wg-gear { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; display: none; place-items: center; border: 0; border-radius: 6px;
           background: #fff; color: var(--ink); cursor: pointer; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.wg-item:hover .wg-gear, .wg-item.sel .wg-gear, .wg-item:focus-within .wg-gear { display: grid; }
.wg-gear:hover { background: var(--signal); color: #fff; }
.modal-backdrop.picker-backdrop + .modal.wg-settings { z-index: 111; }
.wg-settings .modal-foot .grow { flex: 1; }
@media (max-width: 900px) {
  .wg-body { grid-template-columns: 1fr; }
  .wg-stage-wrap { position: static; }   /* une seule colonne : l'aperçu ne doit pas rester collé par-dessus le formulaire */
  .wg-stage.portrait { max-height: 50vh; }
}

/* ---------- Écrans : cartes ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sc-head { padding: 14px 16px 4px; }
.sc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.sc-dot.en-ligne { background: var(--ok); }
.sc-dot.mise-a-jour { background: var(--warn); }
.linklike-name { background: none; border: 0; padding: 0; font: inherit; font-size: 18px; font-weight: 500; text-align: left; cursor: pointer; color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color .12s, text-decoration-color .12s; }
.linklike-name:hover, .linklike-name:focus-visible { color: var(--signal); text-decoration-color: currentColor; }
.sc-visual { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 14px 16px 18px; background: none; border: 0; cursor: pointer; }
.sc-monitor { width: 78%; aspect-ratio: 16/9; background: var(--ink); border: 4px solid var(--ink); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }
.sc-monitor.portrait { width: auto; height: 170px; aspect-ratio: 9/16; }
.sc-monitor img, .sc-monitor video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-monitor .pl-app { color: #fff; }
.sc-empty { color: #9AAABD; font-size: 13px; text-align: center; padding: 8px; }
/* Écran découpé : une vignette par zone, aux proportions du découpage */
.sc-zones { display: flex; width: 100%; height: 100%; gap: 2px; background: #3A5170; }
.sc-zones.dir-col { flex-direction: column; }
.sc-zone { min-width: 0; min-height: 0; overflow: hidden; display: grid; place-items: center; background: var(--ink); }
.sc-zone .sc-empty { font-size: 12px; padding: 4px; overflow: hidden; text-overflow: ellipsis; }
.sc-zones-btn { border: 1px solid var(--line-2); background: #fff; border-radius: var(--radius); padding: 8px 10px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-stand { width: 34%; height: 14px; position: relative; }
.sc-stand::before { content: ""; position: absolute; left: 50%; top: 0; width: 4px; height: 9px; margin-left: -2px; background: var(--line-2); }
.sc-stand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: var(--line-2); }
.sc-visual:hover .sc-monitor { border-color: var(--signal); }
.sc-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; min-height: 50px; }
.sc-lbl { color: var(--muted); font-size: 13px; flex: none; }
.sc-select { flex: 1; min-width: 0; font-weight: 500; }
.se-tabs { margin-bottom: 4px; }
.se-utabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.se-utabs button { display: inline-flex; align-items: center; gap: 7px; padding: 10px 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.se-utabs button:hover { color: var(--ink); }
.se-utabs button.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.se-utabs small { background: var(--row); color: var(--muted); border-radius: 10px; padding: 0 7px; font-family: var(--mono); font-size: 11px; }
.wg-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.wg-lrow { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 6px; border-bottom: 1px solid var(--line); background: #fff; }
.wg-lrow:last-child { border-bottom: 0; }
.wg-lrow.on { background: var(--row); }
.wg-lrow.sel { box-shadow: inset 3px 0 0 var(--signal); }
.wg-lrow[draggable="true"] { cursor: grab; }
.wg-lmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; }
button.wg-lmain { cursor: pointer; }
.wg-placed-t { display: grid; text-align: left; }
.wg-placed-t b { font-weight: 500; }
.wg-placed-t small { font-size: 12px; color: var(--muted); }
.se-note { display: flex; gap: 8px; align-items: flex-start; background: var(--row); border-radius: var(--radius); padding: 9px 10px; font-size: 12px; color: var(--muted); margin: 14px 0 0; }
.se-note svg { flex: none; color: var(--signal); }
.pair-modal { width: min(640px, calc(100vw - 32px)); }
.pair-grid { grid-template-columns: 1fr 1fr; gap: 12px 16px; max-width: none; }
.pair-grid .wide { grid-column: 1 / -1; }
.pair-grid .fmt { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pair-grid .fmt label { margin-bottom: 4px; }
.pair-grid .pair-code { width: 100%; box-sizing: border-box; font-size: 18px; letter-spacing: .25em; }
@media (max-width: 560px) { .pair-grid, .pair-grid .fmt { grid-template-columns: 1fr; } }
.pair-code { font-family: var(--mono); font-size: 22px; letter-spacing: .3em; width: 11ch; }
.head-actions { gap: 10px; }
.sel-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 28px; margin: -8px 0 14px; font-size: 13px; color: var(--muted); }
.sel-line .linklike { padding: 0; font-size: 13px; }
.sc-check { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--brand); cursor: pointer; }
.sc-card.picked { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.pub-list { list-style: none; margin: 4px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); max-height: 260px; overflow-y: auto; }
.pub-list li { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--row); font-size: 14px; }
.pub-list li:last-child { border-bottom: 0; }
.pub-list span { color: var(--muted); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-list small { color: var(--ok-ink); font-size: 12px; }
.confirm-line { flex: 1; color: var(--ink); font-size: 14px; }
.sc-pending { margin-top: 10px; }

/* ---------- Téléversement (médiathèque et sélecteur) ---------- */
.upl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.upl-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 26px 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--bg); color: var(--muted); text-align: center; cursor: pointer; transition: border-color .12s, background .12s; }
.upl-drop b { color: var(--ink); font-weight: 500; }
.upl-drop u { color: var(--signal); text-decoration: none; }
.upl-drop small { font-size: 12px; }
.upl-drop:hover, .upl-drop.over { border-color: var(--signal); background: #EAF2FA; }
.upl-drop:focus-within { outline: 2px solid var(--signal); outline-offset: 2px; }
.upl-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upl-url { display: flex; gap: 8px; margin: 0; }
.upl-url input { flex: 1; min-width: 0; }
.upl-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.upl-jobs li { display: grid; gap: 5px; }
.upl-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.upl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.upl-num { color: var(--muted); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.upl-x { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 3px; background: none; color: var(--muted); cursor: pointer; }
.upl-x:hover { background: var(--bg); color: var(--ink); }
.upl-bar { height: 6px; border-radius: 3px; background: var(--row); overflow: hidden; }
.upl-bar span { display: block; height: 100%; background: var(--signal); transition: width .2s; }
.done .upl-bar span { background: var(--ok); }
.processing .upl-bar span { background: var(--warn); }
.error .upl-bar span { background: var(--danger); }
.upl-bar.indet span { width: 35% !important; animation: upl-indet 1.2s ease-in-out infinite; }
@keyframes upl-indet { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.upl-err { color: var(--danger-ink); font-size: 12px; }

/* ---------- Médiathèque ---------- */
.lib-upload { margin-bottom: 20px; }
.lib-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.lib-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.lib-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lib-grid.sm { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.btns { display: flex; gap: 12px; align-items: center; }
.lib-grid.lib-folders { margin-bottom: 20px; }
.lib-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; color: var(--ink); text-align: left; padding: 0; transition: border-color .12s; }
button.lib-card { cursor: pointer; }
.lib-card.selectable { cursor: pointer; }
.lib-card:hover { border-color: var(--line-2); }
.lib-card.picked { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
/* glisser-déposer vers un dossier : la cible s'éclaire, les éléments glissés s'estompent */
.lib-card.drop-target { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.lib-card.dragging, .pl-card.dragging { opacity: .5; }
.lib-card[draggable="true"], .pl-card[draggable="true"] { cursor: grab; }.lib-card.failed { border-color: #EBC2BE; }
.lib-th { position: relative; aspect-ratio: 1; margin: 10px 10px 0; background: var(--bg); border-radius: 3px; overflow: hidden; display: grid; place-items: center; color: var(--muted); }
.lib-th img, .lib-th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-th .spinner-lg { border-color: rgba(11,31,58,.15); border-top-color: var(--ink); }
.lib-proc { position: absolute; left: 8px; right: 8px; bottom: 8px; font-size: 12px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-check { position: absolute; top: 10px; left: 10px; background: #fff; }
.lib-check:disabled { cursor: not-allowed; opacity: .45; }
.pl-check { position: absolute; top: 10px; left: 10px; z-index: 2; background: #fff; }
.lib-type { position: absolute; left: 8px; bottom: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 3px; background: rgba(255,255,255,.92); color: var(--ink); }
.lib-order { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 3px; background: var(--signal); color: #fff; font-family: var(--mono); font-size: 12px; display: grid; place-items: center; }
.lib-body { display: flex; align-items: flex-start; gap: 6px; padding: 10px 10px 12px 12px; }
.lib-card .kebab { margin-right: 0; }
.lib-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lib-name { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.lib-card .lib-name { padding: 8px 10px 0; font-size: 13px; }
.lib-size { color: var(--muted); font-size: 12px; }
button.lib-card .lib-size { padding: 0 10px 10px; }

/* ---------- Sélecteur de médias (par-dessus la fenêtre d'une app) ---------- */
.modal-backdrop.picker-backdrop { z-index: 110; }
.modal.app-modal.picker { z-index: 111; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 40px); }

/* Champ « média » d'une app */
.mf { display: grid; gap: 8px; justify-items: stretch; }
.mf-list { list-style: none; margin: 0; padding: 0; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }
.mf-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--row); }
.mf-list li:last-child { border-bottom: 0; }
.mf-th { flex: none; width: 56px; aspect-ratio: 16/9; border-radius: 3px; overflow: hidden; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.mf-th img, .mf-th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-name { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-list.sortable li { position: relative; background: #fff; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y; transition: transform .18s ease; }
.mf-list.sortable li img, .mf-list.sortable li video { -webkit-user-drag: none; pointer-events: none; }
.mf-list .grip { flex: none; display: grid; place-items: center; width: 18px; color: var(--muted); touch-action: none; }
.mf-list.sortable li:hover .grip { color: var(--ink); }
.mf-list.sorting li { cursor: grabbing; }
.mf-list li.lifted { z-index: 5; transition: none; outline: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: 0 8px 20px rgba(11,31,58,.18); }
.mf-list li.settling { transition: transform .16s ease; }

/* Médiathèque : 4 colonnes sur PC, moins sur écran étroit ; vue liste au choix sur PC uniquement */
.lib-col { display: none; }
.view-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: #fff; }
.view-toggle button { display: grid; place-items: center; width: 36px; height: 34px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.view-toggle button + button { border-left: 1px solid var(--line-2); }
.view-toggle button:hover { color: var(--ink); background: var(--bg); }
.view-toggle button.on { color: #fff; background: var(--brand); }
.view-toggle button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
@media (max-width: 760px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 640px) { .view-toggle { display: none; } }   /* mobile : cartes uniquement */
@media (max-width: 380px) { .lib-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 641px) {
  .lib-grid.list { grid-template-columns: minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
  .lib-grid.list .lib-card { flex-direction: row; align-items: center; gap: 14px; padding: 8px 8px 8px 12px; border: 0; border-bottom: 1px solid var(--row); border-radius: 0; }
  .lib-grid.list .lib-card:last-child { border-bottom: 0; }
  .lib-grid.list .lib-card.picked { box-shadow: inset 3px 0 0 var(--signal); background: #F4F8FC; }
  .lib-grid.list .lib-th { flex: none; width: 96px; aspect-ratio: 16/9; margin: 0; overflow: visible; }
  .lib-grid.list .lib-th img, .lib-grid.list .lib-th video { border-radius: 3px; }
  .lib-grid.list .lib-type, .lib-grid.list .lib-proc { display: none; }
  .lib-grid.list .lib-check { top: 50%; left: -14px; transform: translate(-100%, -50%); }
  .lib-grid.list .lib-card { padding-left: 40px; }
  .lib-grid.list .lib-body { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 90px 110px auto; align-items: center; gap: 12px; padding: 0; }
  .lib-grid.list .lib-col { display: block; color: var(--muted); font-size: 13px; }
}

/* Écrans et playlists : 4 colonnes sur PC ; vue liste au choix sur PC uniquement (mobile : cartes) */
@media (max-width: 860px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (max-width: 560px) { .pl-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 641px) {
  .pl-grid.list { grid-template-columns: minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
  .pl-grid.list > .pl-card { flex-direction: row; align-items: center; gap: 16px; padding: 8px 56px 8px 12px; border: 0; border-bottom: 1px solid var(--row); border-radius: 0; }
  .pl-grid.list > .pl-card > .pl-check { position: static; order: 0; flex: none; }
  .pl-grid.list > .pl-card:last-child { border-bottom: 0; }
  .pl-grid.list > .pl-card:hover { background: var(--bg); }
  /* centré sans transform : un transform enfermerait le menu et son fond « clic à côté » dans le bouton */
  .pl-grid.list .kebab { position: absolute; right: 12px; top: 0; bottom: 0; margin: 0; display: flex; align-items: center; }
  .pl-grid.list .kebab-menu { top: calc(50% + 20px); }

  /* playlists */
  .pl-grid.list .pl-cover { flex: none; width: 112px; border-radius: 3px; }
  .pl-grid.list .pl-count { display: none; }
  .pl-grid.list .pl-body { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 16px; padding: 0; }
  .pl-grid.list .pl-name { font-size: 16px; }
  .pl-grid.list .pl-meta { min-height: 0; }

  /* écrans */
  /* ordre : case à cocher, vignette, état + nom (à gauche) ; playlist par défaut à droite ; menu ⋮ tout au bout */
  .pl-grid.list .sc-head, .pl-grid.list .sc-head .pl-title { display: contents; }
  .pl-grid.list .sc-check { order: 0; }
  .pl-grid.list .sc-visual { order: 1; flex: none; padding: 0; }
  .pl-grid.list .sc-dot { order: 2; margin-right: -6px; }
  .pl-grid.list .linklike-name { order: 3; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pl-grid.list .sc-foot { order: 4; flex: 0 1 420px; min-width: 220px; border: 0; padding: 0; min-height: 0; margin: 0; }
  .pl-grid.list .sc-monitor { width: 96px; border-width: 2px; }
  .pl-grid.list .sc-monitor.portrait { width: auto; height: 54px; }
  .pl-grid.list .sc-stand { display: none; }
  .pl-grid.list .sc-pending { margin: 0; position: absolute; right: 56px; top: 50%; transform: translateY(-50%); }
  .pl-grid.list .sc-card:has(.sc-pending) .sc-foot { padding-right: 96px; }
  .pl-grid.list .linklike-name { font-size: 16px; }

  /* carte « + » */
  .pl-grid.list > .pl-add { min-height: 0; justify-content: flex-start; padding: 12px 16px; background: transparent; border: 0; color: var(--signal); }
  .pl-grid.list > .pl-add .pl-plus { width: 32px; height: 32px; }
  .pl-grid.list > .pl-add .pl-plus svg { width: 18px; height: 18px; }
}
/* Carte ou ligne dont le menu ⋮ est ouvert : au-dessus des suivantes (sinon elles recouvrent le menu) */
.pl-card:has(.kebab-menu), .lib-card:has(.kebab-menu) { z-index: 42; }

/* Médiathèque : import en cours, affiché comme une carte avec son pourcentage */
.lib-card.uploading .lib-th { background: var(--bg); }
.upl-pct { font-family: var(--mono); font-size: 28px; font-weight: 500; color: var(--ink); }
.lib-card.uploading .kebab-btn { flex: none; margin-right: -6px; }
@media (min-width: 641px) {
  .lib-grid.list .upl-pct { font-size: 15px; }
  .lib-grid.list .lib-card.uploading .kebab-btn { margin-right: 0; }
}

/* Compte de l'utilisateur en bas du menu latéral : le menu s'ouvre vers le haut */
.side-user { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.side-user .user-btn { width: 100%; padding: 8px; }
.side-user .user-btn[aria-expanded="true"] { background: var(--bg); }
.side-user .who { flex: 1; min-width: 0; }
.side-user .who b, .side-user .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .avatar { flex: none; }
.side-user .chev { flex: none; }
.side-user .menu { left: 0; right: 0; top: auto; bottom: calc(100% + 6px); min-width: 0; }
/* mobile : le panneau coulissant suit la hauteur visible (barres du navigateur) et le compte reste visible en bas */
@media (max-width: 900px) {
  .sidebar { height: 100dvh; padding-bottom: 0; }
  .side-user { position: sticky; bottom: 0; z-index: 2; background: var(--surface); padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .side-user .user-btn { min-height: 52px; }
  .side-user .menu a, .side-user .menu button { padding: 12px; }
}
@media (max-width: 640px) {
  .side-user .who { display: flex; } .side-user .user-btn .chev { display: block; }
  .side-user .menu { position: absolute; left: 0; right: 0; top: auto; bottom: calc(100% + 6px); }
}
.topbar .org { flex: 1; min-width: 0; }
/* Barre du haut : inutile sur PC (le compte est dans le menu latéral) ; gardée sur mobile pour le bouton ☰ */
@media (min-width: 901px) { .topbar { display: none; } }
.side-user .menu a, .side-user .menu button { display: flex; align-items: center; gap: 10px; }
.side-user .menu .ico-svg { flex: none; color: var(--muted); }
.side-user .menu .logout .ico-svg { color: var(--danger); }
.side-user .menu .install-item { display: none; }
.can-install .side-user .menu .install-item { display: flex; }

/* Cartes Écrans, Playlists et Médiathèque : angles plus arrondis */
.pl-card, .lib-card { border-radius: var(--card-radius); }
.pl-cover { border-radius: calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0; overflow: hidden; }
.lib-th { border-radius: 6px; }
.sc-monitor { border-radius: 6px; }
@media (min-width: 641px) {
  .pl-grid.list, .lib-grid.list { border-radius: var(--card-radius); }
  .lib-grid.list .lib-card { border-radius: 0; }
  /* survol et sélection des lignes : suivent les angles du cadre de la liste */
  .pl-grid.list > :first-child, .lib-grid.list > :first-child { border-top-left-radius: calc(var(--card-radius) - 1px); border-top-right-radius: calc(var(--card-radius) - 1px); }
  .pl-grid.list > :last-child, .lib-grid.list > :last-child { border-bottom-left-radius: calc(var(--card-radius) - 1px); border-bottom-right-radius: calc(var(--card-radius) - 1px); }
}

/* Popups de confirmation / d'erreur : en haut de page, centrées */
.toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 300; display: grid; gap: 8px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 11px 10px 11px 16px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 10px 28px rgba(11,31,58,.22); animation: toast-in .22s ease-out; max-width: 560px; }
.toast.ok { background: var(--ok); }
.toast.bad { background: var(--danger); }
.toast .ico-svg { flex: none; stroke-width: 2.4; }
.toast-text { flex: 1; min-width: 0; line-height: 1.4; }
.toast-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; opacity: .8; }
.toast-x:hover { opacity: 1; background: rgba(255,255,255,.18); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .toasts { top: 10px; width: calc(100vw - 20px); } .toast { max-width: none; } }

/* Statistiques */
.stats + .stats { margin-top: -12px; }
.stat .n small { font-size: 18px; color: var(--muted); font-weight: 400; }
.stat .n.bad { color: var(--danger); }
.stat .n.warn { color: var(--warn-ink, #8A5A00); }
.st-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.st-grid .card h3 { margin-bottom: 14px; }
.st-wide { grid-column: 1 / -1; }
.st-tbl { border-radius: var(--radius); }
.st-tbl a { color: var(--ink); text-decoration: none; } .st-tbl a:hover { color: var(--signal); }
.st-pending { margin-left: 8px; }
.st-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.st-bars li { display: flex; align-items: center; gap: 12px; }
.st-bar-txt { flex: 1; min-width: 0; display: grid; gap: 5px; }
.st-bar-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.st-bar { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.st-bar span { display: block; height: 100%; border-radius: 3px; background: var(--signal); }
@media (max-width: 1000px) { .st-grid { grid-template-columns: minmax(0, 1fr); } }

/* Menu latéral : trait de séparation entre deux groupes */
.sidebar .nav-sep { height: 1px; background: var(--line); margin: 8px 12px; }

/* Statistiques : historique de diffusion */
.st-hist { margin-bottom: 16px; }
.st-hist-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.st-hist-head h3 { margin: 0 auto 0 0; }
.st-mini { margin-bottom: 18px; }
.st-mini .stat { background: var(--bg); border-color: transparent; padding: 12px 16px; }
.st-mini .stat .n { font-size: 22px; }
.st-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding: 0 2px 22px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.st-col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.st-col-bar { display: block; width: 100%; background: var(--signal); border-radius: 3px 3px 0 0; opacity: .85; transition: opacity .12s; }
.st-col:hover .st-col-bar { opacity: 1; }
.st-col-lbl { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.st-hist-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.st-sub { font-size: 14px; font-weight: 500; color: var(--muted); margin: 0 0 10px; }
.st-content { display: inline-flex; align-items: center; gap: 10px; }
.st-content .app-ico.sm { width: 28px; height: 28px; }
.st-recent { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.st-recent li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--row); font-size: 14px; }
.st-recent li:last-child { border-bottom: 0; }
.st-recent .mono { flex: none; color: var(--muted); font-size: 12px; }
.st-recent-txt { min-width: 0; display: grid; }
.st-recent-txt b, .st-recent-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-recent-txt small { color: var(--muted); font-size: 12px; }
@media (max-width: 1000px) { .st-hist-grid { grid-template-columns: minmax(0, 1fr); } .st-chart { gap: 1px; } }

/* Format de l'écran : listes déroulantes */
.fmt-block select { width: 100%; }
.fmt-block small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }

/* Édition d'un écran : zones du découpage sur l'aperçu, chacune avec sa playlist (« + ») */
.wg-zones { position: absolute; inset: 0; display: flex; align-items: stretch; gap: .4cqw; }   /* chaque zone occupe toute sa part de l'écran */
.wg-zones.dir-col { flex-direction: column; }
.wg-zone { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; background: rgba(255,255,255,.03); outline: 1px dashed #3A5170; outline-offset: -1px; }
.wg-zone-n { position: absolute; left: 8px; top: 6px; font-size: 11px; color: #6E829B; text-transform: uppercase; letter-spacing: .06em; pointer-events: none; }
.wg-zone-add { display: grid; justify-items: center; gap: 4px; padding: 10px 14px; border: 1px dashed #5B7392; border-radius: 10px; background: rgba(11,31,58,.6); color: #C5CED9; font: inherit; font-size: 13px; cursor: pointer; }
.wg-zone-add:hover, .wg-zone-add:focus-visible { border-color: #fff; color: #fff; background: rgba(59,130,196,.25); outline: none; }
.wg-zone-pl { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 16px); padding: 7px 12px; border: 1px solid #3A5170; border-radius: 999px; background: rgba(11,31,58,.85); color: #fff; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-zone-pl:hover, .wg-zone-pl:focus-visible { border-color: var(--signal); outline: none; }
.wg-zone-img { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; pointer-events: none; }
.wg-zone-img img, .wg-zone-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wg-zone-img .pl-app { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; }
.wg-zone.has-img .wg-zone-pl, .wg-zone.has-img .wg-zone-add { position: relative; z-index: 1; }
.wg-zone.has-img .wg-zone-n { z-index: 1; padding: 1px 8px; border-radius: 999px; background: rgba(11,31,58,.78); color: #C5CED9; }
.wg-zone-menu { left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); max-height: 86%; overflow-y: auto; min-width: 200px; max-width: 94%; }
.wg-zone-menu .on { background: var(--brand-tint); font-weight: 500; }

/* Détail d'une playlist : la liste prend toute la largeur ; ajout d'un contenu par une galerie d'apps */
.pe-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pe-head h3 { margin: 0; }
.pe-total { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 13px; }
.pe-total b { color: var(--ink); font-weight: 500; }
.pe-add-end { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 4px; padding: 16px; border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: transparent; color: var(--muted); font: inherit; font-size: 15px; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.pe-add-end:hover, .pe-add-end:focus-visible { border-color: var(--signal); color: var(--signal); background: #F4F8FC; outline: none; }
/* « Insérer ici » : apparaît au survol de l'espace entre deux lignes */
.item-insert { position: absolute; left: 0; right: 0; top: -11px; height: 16px; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; cursor: pointer; opacity: 0; transition: opacity .12s; }
.item-insert::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; border-top: 2px dashed var(--signal); }
.item-insert span { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--signal); color: #fff; font-size: 12px; font-weight: 500; }
.item-insert:hover, .item-insert:focus-visible { opacity: 1; outline: none; }
.sort-list.sorting .item-insert { display: none; }
@media (hover: none) { .item-insert { display: none; } }   /* au doigt : bouton « Ajouter », puis Monter / Descendre */
/* Galerie d'apps */
.pk-modal { width: min(760px, calc(100vw - 32px)); }
.pk-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
.pk-cats button { padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.pk-cats button:hover { color: var(--ink); }
.pk-cats button.on { background: var(--brand-tint); border-color: var(--brand); color: var(--ink); font-weight: 500; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pk-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 8px 12px; border: 1px solid var(--line); border-radius: var(--card-radius); background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.pk-tile:hover, .pk-tile:focus-visible { border-color: var(--signal); background: #F4F8FC; outline: none; }
.pk-tile > span:last-child { min-width: 0; display: grid; gap: 3px; }
.pk-tile b { font-weight: 500; }
.pk-tile small { color: var(--muted); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* App Canva : connexion, choix et export d'un design */
.cv { display: grid; gap: 10px; }
.cv-connect, .cv-current { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; flex-wrap: wrap; }
.cv-current b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cv-current small { color: var(--muted); font-size: 12px; }
.cv-th { flex: none; width: 72px; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.cv-th img, .cv-th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cv-kind label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; font-weight: 500; }
.cv-kind label small { flex-basis: 100%; padding-left: 24px; color: var(--muted); font-weight: 400; font-size: 12px; }
.cv-kind label.on { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.cv-busy { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
.cv-busy .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--signal); animation: spin .9s linear infinite; flex: none; }
.cv-picker { width: min(860px, calc(100vw - 32px)); }
.cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.cv-tile { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--card-radius); background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.cv-tile:hover, .cv-tile:focus-visible { border-color: var(--signal); outline: none; }
.cv-tile.picked { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.cv-tile-th { aspect-ratio: 16/10; border-radius: 6px; overflow: hidden; background: var(--bg); display: grid; place-items: center; }
.cv-tile-th img { width: 100%; height: 100%; object-fit: contain; }
.cv-tile-name { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tile small { color: var(--muted); font-size: 12px; }
/* Édition d'un écran : aperçu du texte libre (mêmes tailles que sur l'écran) */
.wg-tx-t { font-size: 2.2em; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; margin-bottom: .4em; }
.wg-tx-b { font-size: 1.7em; line-height: 1.25; white-space: pre-line; }
.wg-tk { font-size: 1.7em; line-height: 1.4; overflow: hidden; }
.wg-tk-run { display: inline-block; padding-left: 100%; animation: wg-tk linear infinite; }
.wg-tk-sep { margin: 0 .6em; opacity: .6; }
@keyframes wg-tk { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.cvs-steps { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 6px; color: var(--ink); font-size: 14px; line-height: 1.5; }
.cvs-steps code { font-family: var(--mono); font-size: 12.5px; background: var(--bg); padding: 1px 5px; border-radius: 3px; }
/* Édition d'un écran : renommage dans l'en-tête */
.se-title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.se-rename { gap: 6px; flex-wrap: nowrap; margin-bottom: 2px; }
.se-rename input { min-width: 0; }
/* Pastille d'état d'une app reliée à un compte externe (Canva…) */
.app-ico { position: relative; }
.app-dot { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; }
.app-ico.sm .app-dot { width: 11px; height: 11px; }
.app-dot.ok { background: var(--ok); }
.app-dot.off { background: var(--danger); }

/* ---------- Intégrations et Widgets : cartes ou liste ---------- */
.cat-group { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); margin: 26px 0 12px; }
.cat-count { font-size: 12px; font-weight: 400; color: var(--muted); background: var(--row); border-radius: 10px; padding: 0 8px; line-height: 20px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.cat-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); overflow: hidden; transition: border-color .12s; }
.cat-card:hover { border-color: var(--signal); }
.cat-top { display: flex; align-items: flex-start; gap: 12px; padding: 18px 18px 0; }
.cat-top .app-ico { width: 42px; height: 42px; }
.cat-id { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cat-id small { color: var(--muted); font-size: 12px; }
.cat-name { font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--ink); text-decoration: none; }
.cat-name:hover { color: var(--signal); }
.cat-desc { flex: 1; margin: 0; padding: 10px 18px 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 10px 18px; background: color-mix(in srgb, var(--bg) 55%, #fff); border-top: 1px solid var(--row); }
.cat-meta { min-width: 0; color: var(--muted); font-size: 13px; }
.cat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: none; }
.cat-actions .btn { text-decoration: none; }
.cat-card.off .cat-name, .cat-row.off .cat-name { color: var(--muted); }
.cat-card.off .app-ico, .cat-row.off .app-ico { filter: saturate(.25); }
.cat-used { display: inline-flex; align-items: center; gap: 6px; }
.cat-account { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; color: var(--ink); }
.cat-account > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-avatar { width: 22px; height: 22px; border-radius: 50%; background: #00A3B4; color: #fff; font-size: 11px; font-weight: 500; display: grid; place-items: center; flex: none; }
.badge.inactif { color: var(--muted); background: var(--row); --dot: #A9B4C2; }
/* widgets : mini-écran montrant où le widget se pose */
.cat-pv { position: relative; aspect-ratio: 16 / 9; margin: 12px 12px 0; background: var(--ink); border-radius: 6px; overflow: hidden; }
.cat-pv-zone { position: absolute; inset: 18% 8% 24%; border: 1px dashed #23395A; border-radius: 3px; }
.cat-pv-clock, .cat-pv-weather { position: absolute; top: 7%; color: #fff; outline: 1px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
.cat-pv-clock { right: 6%; font-family: var(--mono); font-size: 14px; }
.cat-pv-weather { left: 6%; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.cat-pv-band { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 10px; background: #fff; color: var(--ink); font-size: 11px; white-space: nowrap; overflow: hidden; border-top: 2px solid var(--signal); }
/* liste */
.cat-list { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); overflow: hidden; }
.cat-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 120px 160px 190px; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--row); }
.cat-row:not(.cat-head):hover { background: var(--bg); }
.cat-row .cat-name { font-size: 15px; }
.cat-row .cat-id small { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-head { padding: 9px 16px; border-top: 0; background: color-mix(in srgb, var(--bg) 55%, #fff); color: var(--muted); font-size: 12px; }
.cat-subhead { padding: 12px 16px 6px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 55%, #fff); color: var(--muted); font-size: 12px; font-weight: 500; }
.cat-head + .cat-subhead { border-top-color: var(--row); }
@media (max-width: 900px) { .cat-row { grid-template-columns: 34px minmax(0, 1fr) 110px auto; } .cat-row > .cat-meta { display: none; } .cat-head > :nth-child(4) { display: none; } }
@media (max-width: 640px) {
  .cat-row { grid-template-columns: 34px minmax(0, 1fr) auto; } .cat-row > :nth-child(3), .cat-head { display: none; }
}
/* Canva : compte connecté (fenêtre « Gérer ») */
.cvs-account { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.cvs-account b { display: block; font-weight: 500; }
.cvs-account small { color: var(--muted); font-size: 13px; }

/* Calendriers partagés : fenêtre « Gérer » d'une source (connexion, puis calendriers) */
.pe-sub.csd-first { margin-top: 0; padding-top: 0; border-top: 0; }
.pe-sub .cat-count { margin-left: 6px; vertical-align: 2px; }
.dw input.mono, .dw textarea.mono, .cal-add input.mono { font-family: var(--mono); font-size: 13px; }
.cal-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cal-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto 32px; align-items: center; gap: 12px; padding: 8px 8px 8px 12px; border-bottom: 1px solid var(--row); }
.cal-row > .ico-svg { color: var(--muted); }
.cal-id { min-width: 0; display: grid; gap: 1px; }
.cal-id b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-id small { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-confirm { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius); background: var(--danger-bg); color: var(--danger-ink); font-size: 13px; }
.cal-empty { padding: 14px 12px; border-bottom: 1px solid var(--row); color: var(--muted); font-size: 13px; }
.cal-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; padding: 10px 12px; background: color-mix(in srgb, var(--bg) 55%, #fff); }
.cal-add > select, .cal-add > small { grid-column: 1 / -1; }
.cal-add > small { color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 640px) { .cal-add { grid-template-columns: minmax(0, 1fr); } }
/* Drives : fenêtre « Gérer » d'une source (réutilise la liste des calendriers) */
.cal-id small.cal-err { font-family: inherit; color: var(--danger-ink); }
.dsd-list { overflow: visible; }   /* le menu ⋮ d'un dossier déborde de la liste */
.cal-row.flash { animation: dsd-flash 1.6s ease-out; }
@keyframes dsd-flash { from { background: color-mix(in srgb, var(--signal) 12%, #fff); } to { background: transparent; } }
.cal-id small.dsd-warn { font-family: inherit; color: var(--warn-ink); white-space: normal; }
.dsd-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.badge.dsd-sub { color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, #fff); font-weight: 400; padding: 1px 8px; }
.badge.dsd-sub::before { display: none; }
.dsd-rename { font: inherit; font-weight: 500; padding: 2px 6px; margin: -3px 0 -3px -7px; border: 1px solid var(--signal); border-radius: var(--radius); min-width: 0; }
.dsd-chk { width: 16px; display: grid; place-items: center; }
.kebab-menu .dsd-chk .ico-svg { color: var(--ok); }
.dsd-add { display: grid; gap: 10px; padding: 12px; background: color-mix(in srgb, var(--bg) 55%, #fff); border-radius: 0 0 var(--radius) var(--radius); }
.dsd-add-line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dsd-add .cal-add { padding: 0; background: none; }
.dsd-add > small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.dsd-or { background: none; border: 0; padding: 0; color: var(--signal); cursor: pointer; font: inherit; font-size: 13px; }
.dsd-or:hover { text-decoration: underline; }

/* Drives : sélecteur de dossier (par-dessus la fenêtre « Gérer ») */
.modal.app-modal.dfp { width: min(880px, calc(100vw - 32px)); height: min(640px, calc(100vh - 40px)); }
.dfp-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); flex: 1; min-height: 0; }
.dfp-roots { border-right: 1px solid var(--line); padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; background: color-mix(in srgb, var(--bg) 55%, #fff); overflow-y: auto; }
.dfp-roots button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; border-radius: var(--radius); cursor: pointer; text-align: left; color: var(--muted); font: inherit; font-size: 14px; }
.dfp-roots button:hover { background: var(--row); color: var(--ink); }
.dfp-roots button.on { background: var(--brand-tint); color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--brand); border-radius: 0 var(--radius) var(--radius) 0; }
.dfp-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dfp-tools { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dfp-crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1; flex-wrap: wrap; font-size: 14px; }
.dfp-crumbs button { border: 0; background: none; padding: 3px 6px; border-radius: var(--radius); cursor: pointer; color: var(--muted); font: inherit; }
.dfp-crumbs button:hover { background: var(--row); color: var(--ink); }
.dfp-crumbs button:last-child { color: var(--ink); font-weight: 500; }
.dfp-crumbs .sep { color: var(--line-2); }
.dfp-muted { color: var(--muted); padding: 3px 6px; }
.search-box.dfp-search { width: 230px; margin: 0; }
.search-box.dfp-search input { padding: 6px 0; }
.dfp-items { overflow-y: auto; flex: 1; min-height: 0; }
.dfp-sect { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 12px 14px 6px; }
.dfp-it { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; border-bottom: 1px solid var(--row); }
.dfp-it:hover { background: color-mix(in srgb, var(--bg) 55%, #fff); }
.dfp-it.sel { background: color-mix(in srgb, var(--signal) 9%, #fff); box-shadow: inset 2px 0 0 var(--signal); }
.dfp-pick { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 4px 6px 14px; min-height: 46px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dfp-pick > .ico-svg { color: #0F6CBD; }
.dfp-pick:disabled { cursor: default; }
.dfp-nm { min-width: 0; }
.dfp-nm b { display: block; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfp-it.sel .dfp-nm b { font-weight: 500; }
.dfp-it.added .dfp-nm b { color: var(--muted); }
.dfp-nm small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfp-open { display: grid; place-items: center; width: 32px; height: 32px; border: 0; background: none; color: var(--muted); border-radius: var(--radius); cursor: pointer; }
.dfp-open:hover { background: var(--row); color: var(--ink); }
.dfp-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px; }
.dfp-file { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: var(--radius); padding: 3px 9px 3px 3px; font-size: 13px; color: var(--muted); max-width: 220px; }
.dfp-file > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfp-file.more { padding-left: 9px; }
.dfp-thumb { width: 22px; height: 22px; border-radius: 3px; display: grid; place-items: center; flex: none; color: #fff; background: #F0A92E; }
.dfp-thumb.video { background: #7B5CC4; }
.dfp-thumb .ico-svg { stroke-width: 2; }
.dfp-ignored { font-size: 12px; color: var(--muted); padding: 0 14px 14px; }
.dfp-empty { padding: 28px 14px; color: var(--muted); font-size: 14px; text-align: center; }
.dfp-empty.err { color: var(--danger-ink); }
.dfp-sp { padding: 22px 18px; display: grid; gap: 12px; max-width: 580px; }
.dfp-sp p { color: var(--muted); font-size: 14px; }
.dfp-sp-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.modal-foot.dfp-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; }
.dfp-chosen { grid-column: 1 / -1; min-width: 0; font-size: 13px; color: var(--muted); }
.dfp-chosen b { color: var(--ink); }
.dfp-chosen .loc { display: block; font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dfp-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; }
.dfp-opt input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--brand); }
.dfp-opt b { display: block; font-size: 14px; }
.dfp-opt small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.dfp-opt.dis { opacity: .55; cursor: not-allowed; }
.dfp-acts { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 640px) {
  .modal.app-modal.dfp { height: 94vh; max-height: 94vh; }
  .dfp-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .dfp-roots { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; padding: 8px; scrollbar-width: none; }
  .dfp-roots button { white-space: nowrap; }
  .dfp-roots button.on { box-shadow: inset 0 -2px 0 var(--brand); border-radius: var(--radius) var(--radius) 0 0; }
  .search-box.dfp-search { width: 100%; }
  .modal-foot.dfp-foot { grid-template-columns: minmax(0, 1fr); }
  .dfp-acts { flex-direction: column-reverse; } .dfp-acts .btn { justify-content: center; }
}
/* Connexion partagée entre calendriers et Drives (Google, Microsoft 365) */
.csd-shared { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.csd-shared .ico-svg { flex: none; margin-top: 2px; }
.cvs-account .gd-avatar { width: 32px; height: 32px; font-size: 13px; background: #0F6CBD; }
/* Médiathèque : fichier synchronisé depuis un dossier Drive (ni renommé ni supprimé ici) */
.lib-drive { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 3px; background: #0F6CBD; color: #fff; font-size: 11px; font-weight: 500; }
.kebab-menu .kebab-note { display: block; max-width: 240px; padding: 8px 10px; color: var(--muted); font-size: 12.5px; line-height: 1.4; border-bottom: 1px solid var(--row); margin-bottom: 2px; }
@media (min-width: 641px) { .lib-grid.list .lib-drive { right: 3px; bottom: 3px; height: 16px; padding: 0 4px; font-size: 10px; } }

/* ---------- Aires de gestion : sélecteur d'aire, zones, aires, membres ---------- */
.area-pick { position: relative; margin: -8px 0 12px; }
.area-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.area-btn:disabled { cursor: default; opacity: 1; }
.area-btn:not(:disabled):hover { border-color: var(--muted); }
.area-btn .ico-svg { flex: none; color: var(--muted); }
.area-txt { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.area-txt b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-txt small { font-size: 12px; }
.area-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 41; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 4px; display: grid; }
.area-menu button, .area-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 3px; background: none; font: inherit; font-size: 14px; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; }
.area-menu button:hover, .area-menu a:hover { background: var(--bg); }
.area-menu .on { font-weight: 500; }
.area-menu .ico-svg { color: var(--muted); flex: none; }
.area-menu small { font-size: 12px; }
.area-menu .area-manage { border-top: 1px solid var(--row); margin-top: 3px; border-radius: 0 0 3px 3px; }
.zone-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: -8px 0 14px; }
.zone-bar .chip { font-size: 13px; }
.chip.dashed { border-style: dashed; color: var(--muted); }
.sc-zone-name { margin: 2px 0 0 26px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-grid.list .sc-zone-name { margin-left: 0; }
/* Zones d'une aire : liste en colonnes (zone, écrans, synchronisation, menu) */
.zlist { border: 1px solid var(--line); border-radius: var(--radius); overflow: visible; }
.zhead, .zrow, .zadd { display: grid; grid-template-columns: 22px minmax(140px, 1fr) 96px 220px 36px; gap: 12px; align-items: center; padding: 8px 12px; }
.zhead { background: var(--row); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 500; border-radius: var(--radius) var(--radius) 0 0; }
.zrow { border-top: 1px solid var(--line); background: #fff; }
.zrow > .ico-svg, .zadd > .ico-svg { color: var(--muted); }
.zrow .zname { width: 100%; min-width: 0; border-color: transparent; background: transparent; padding: 6px 8px; }
.zrow .zname:hover { border-color: var(--line-2); }
.zrow .zname:focus { border-color: var(--signal); background: #fff; outline: none; }
.zrow.wall { background: #FBFCFE; }
.zrow.wall .zname { font-weight: 500; }
.zrow .cnt { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.zrow .cnt small { color: var(--muted); font-family: inherit; margin-left: 4px; }
.zrow .syn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.zrow .syn .sm { font-size: 12.5px; color: var(--muted); }
.zrow .syn .sm.on { color: #1F5C93; }
.zrow .kebab { margin-right: 0; justify-self: end; }
.zadd { grid-template-columns: 22px minmax(0, 1fr) auto; border-top: 1px dashed var(--line-2); }
.zadd input { min-width: 0; }

/* Aires : ligne dépliable (avatar, chevron, nom) et liste structurée des zones */
.area-toggle { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); text-align: left; font: inherit; }
.area-av { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 500; flex: none; }
.area-chev { flex: none; color: var(--muted); transition: transform .15s; }
.area-chev.open { transform: rotate(90deg); }
.tbl tr.area-det td { padding: 0 14px 14px 56px; border-top: 0; background: #FBFCFE; }
.zlist-det { list-style: none; margin: 0; padding: 0; }
.zlist-det li { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 260px); gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.zlist-det li:first-child { border-top: 0; }
.zd-name { font-weight: 500; min-width: 0; }
.zd-name small { font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.zd-cnt { font-family: var(--mono); font-size: 13px; color: var(--muted); text-align: right; }
.zd-sy { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.zd-sy .sm { font-size: 12.5px; color: var(--muted); }
.zd-sy .sm.on { color: #1F5C93; }
.zd-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 640px) {
  .zlist-det li { grid-template-columns: minmax(0, 1fr) auto; }
  .zd-sy { grid-column: 1 / -1; }
}
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: var(--bg); }
.tbl tr.dim td { color: var(--muted); }
.who-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-txt { display: grid; min-width: 0; }
.who-txt b, .who-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.off { background: var(--line-2); }
.avatars { display: flex; align-items: center; }
.avatars .avatar { width: 26px; height: 26px; font-size: 11px; border: 2px solid #fff; }
.avatars .avatar + .avatar { margin-left: -8px; }
.avatars small { margin-left: 8px; }
.pill.dark { background: var(--ink); color: #fff; }
.pill.blue { background: color-mix(in srgb, var(--signal) 14%, #fff); color: #1F4E7A; }
.role-rows { display: grid; gap: 6px; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; }
.role-row { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.role-row .ico-svg { color: var(--muted); flex: none; }
.role-row span { flex: 1; min-width: 0; }
.role-row select { width: 170px; }
.org-admin-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.org-admin-check input { margin-top: 3px; accent-color: var(--brand); }
.org-admin-check small { display: block; font-size: 12.5px; }
.opt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.opt-list li { display: flex; align-items: center; gap: 10px; }
.opt-list .ico-svg { color: var(--muted); flex: none; }
.opt-list a { font-size: 13px; white-space: nowrap; }
.th-sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.th-sort.on { color: var(--ink); }
.th-sort.on::after { content: " ↓"; }
.bar-btn { display: grid; gap: 2px; padding: 2px 0; text-align: left; color: var(--ink); width: 100%; }
.bar-btn small { color: var(--muted); font-size: 12px; }
.bar-btn:hover small { color: var(--signal); text-decoration: underline; }
.bar-cell { display: flex; align-items: center; gap: 10px; }
.bar-cell .n { width: 26px; text-align: right; font-family: var(--mono); font-size: 13px; }
.bar-track { flex: 1; max-width: 140px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--signal) 18%, #fff); overflow: hidden; }
.bar-track span { display: block; height: 100%; border-radius: 3px; background: var(--signal); }

/* Page Écrans : bouton « Ajouter » (connecter un écran, gérer les zones) */
.head-actions { align-items: center; }
.add-menu { margin-right: 0; }
.add-menu .btn { gap: 8px; }
.add-menu .kebab-menu { min-width: 300px; max-width: calc(100vw - 32px); padding: 6px; }
.add-menu .kebab-menu button { align-items: flex-start; padding: 9px 10px; }
.add-menu .kebab-menu button span { display: grid; gap: 1px; }
.add-menu .kebab-menu b { font-weight: 600; font-size: 14px; }
.add-menu .kebab-menu small { font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .head-actions { width: 100%; flex-wrap: nowrap; }
  .head-actions > .btn, .head-actions > .add-menu { flex: 1 1 0; min-width: 0; }
  .head-actions > .add-menu .btn { width: 100%; justify-content: center; }
}
.head-actions > .btn { min-width: 118px; justify-content: center; }   /* largeur fixe : le bouton ne bouge pas quand le libellé change */

/* ---------- Zones : type, synchro de lecture ---------- */
.modal.app-modal.area-dlg { width: min(880px, calc(100vw - 32px)); }
@media (max-width: 640px) { .modal.app-modal.area-dlg { width: 100%; } }
.badge.sync { color: #1F5C93; background: #E4EEF8; }
.badge.sync::before { display: none; }
.zone-strip { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--signal); border-radius: var(--radius); padding: 12px 16px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.zone-strip .t { display: flex; flex-direction: column; }
.zone-strip .t small { color: var(--muted); }
.zone-strip .grow { flex: 1; }
.zone-strip .zs-sync { display: inline-flex; align-items: center; gap: 8px; }
.chip.synced .ico-svg { color: var(--signal); }
.pl-card.sc-card.solo { border-style: dashed; }
.sc-sync { margin: 4px 0 0 26px; }
.pl-grid.list .sc-sync { margin-left: 0; }
.sc-sync .badge { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 640px) {
  .zhead { display: none; }
  .zrow { grid-template-columns: 22px minmax(0, 1fr) 36px; }
  .zrow > .cnt, .zrow > .syn { grid-column: 2 / 4; }
  .zrow > .kebab { grid-column: 3; grid-row: 1; }
  .zadd { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .zone-strip .grow { display: none; }
}

/* ---------- Mur d'écrans ---------- */
.modal.app-modal.wall-dlg { width: min(780px, calc(100vw - 32px)); }
@media (max-width: 640px) { .modal.app-modal.wall-dlg { width: 100%; } }
.wall-body { display: grid; grid-template-columns: 1fr 250px; gap: 20px; }
.wall-shapes { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wall-shapes .chip { font-family: var(--mono); }
.wall-box { background: var(--ink); padding: 10px; border-radius: 8px; }
.wall-grid { display: grid; gap: 6px; }
.wall-cell { aspect-ratio: 16 / 9; position: relative; border: 2px solid var(--signal); border-radius: var(--radius); background: #16294A; color: #fff; font: inherit; font-size: 13px; cursor: pointer; display: grid; place-items: center; align-content: center; gap: 2px; padding: 4px; overflow: hidden; text-align: center; }
.wall-cell:hover { background: #1F3A66; }
.wall-cell.sel { border-color: #FFD166; box-shadow: 0 0 0 2px rgba(255, 209, 102, .4); }
.wall-cell .n { position: absolute; top: 3px; left: 7px; font-family: var(--mono); font-size: 11px; opacity: .8; }
.wall-cell small { color: #9FB3CC; font-size: 11px; }
.wall-cell b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.wall-note { background: #E4EEF8; color: #1F5C93; border-radius: var(--radius); padding: 9px 12px; font-size: 13px; margin: 12px 0 8px; }
.wall-note.warn { background: var(--warn-bg); color: var(--warn-ink); }
.wall-note .mono { font-family: var(--mono); }
.zone-strip .wall-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.zone-strip .wall-actions select { padding: 5px 10px; font-size: 13px; }
.sc-wall { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .wall-body { grid-template-columns: 1fr; }
}

/* ---------- Page Écrans : une barre de listes déroulantes ---------- */
.btn.publish-btn { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn.publish-btn:hover { background: var(--warn-ink); border-color: var(--warn-ink); }
.btn.publish-btn .cnt { font-family: var(--mono); font-size: 12px; background: rgba(255, 255, 255, .22); border-radius: 3px; padding: 0 6px; }
.sc-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sc-bar .lib-all { margin-right: 4px; }
.dd { margin-right: 0; }
.dd-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.dd-btn:hover { border-color: var(--muted); }
.dd-btn .k { color: var(--muted); }
.dd-btn b { font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.dd-btn .c { font-family: var(--mono); font-size: 11px; background: var(--row); border-radius: 3px; padding: 0 5px; color: var(--muted); }
.dd-btn .ico-svg { color: var(--muted); }
.dd-btn.act { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dd-btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.dd-btn.dark .ico-svg { color: #B9C6D8; }
.kebab-menu.dd-menu { left: 0; right: auto; min-width: 230px; }
.kebab-menu.dd-menu.right { left: auto; right: 0; }
.kebab-menu.dd-menu hr { border: 0; border-top: 1px solid var(--row); margin: 4px 0; width: 100%; }
.kebab-menu.dd-menu .n { margin-left: auto; padding-left: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.kebab-menu.dd-menu button[role="menuitemradio"]::before { content: ""; width: 14px; flex: none; }
.kebab-menu.dd-menu button.sel { font-weight: 500; }
.kebab-menu.dd-menu button.sel::before { content: "✓"; color: var(--signal); }
.kebab-menu.dd-menu .dd-h { padding: 8px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.zline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 2px 14px; margin-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.zline b { color: var(--ink); font-weight: 500; }
.zline .grow { flex: 1; }
.zline .zstate { display: inline-flex; align-items: center; gap: 6px; }
.zline .zstate::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.zline .zstate.sync { color: #1F5C93; }
.zline .zstate.sync::before { display: none; }

/* ---------- Écrans : un mur d'écrans = une seule carte large ---------- */
/* effet « pile de cartes » : on voit qu'elle en regroupe plusieurs */
.pl-card.wall-card { --stack: 5px 5px 0 -1px #fff, 5px 5px 0 0 #B9CDE3, 10px 10px 0 -1px #fff, 10px 10px 0 0 #D6E2EF;
  grid-column: span 2; border-color: #B9CDE3; box-shadow: var(--stack); margin: 0 10px 10px 0; }
.pl-card.wall-card.w4 { grid-column: span 3; }
.pl-card.wall-card.wide { grid-column: 1 / -1; }
.pl-card.wall-card:hover { border-color: var(--signal); }
.sc-card.wall-card.picked { box-shadow: inset 0 0 0 1px var(--signal), var(--stack); }
.wall-card .pl-title > .pl-name { flex: 0 1 auto; }
.wall-card .wc-state { margin-right: auto; }
.wc-ico { display: inline-flex; color: var(--signal); flex: none; }
.wall-card .sc-zone-name { margin-left: 54px; }
.wc-vis { display: flex; flex-direction: column; align-items: center; padding: 16px 16px 8px; }
.wc-frame { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px; padding: 3px; background: var(--ink); border-radius: 6px;
  width: min(100%, calc(var(--cols) * 150px)); box-shadow: 0 6px 14px -8px rgba(11, 31, 58, .45); }
.wall-card.wide .wc-frame { width: min(100%, calc(var(--cols) * 280px)); }
.wc-tile { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 0; padding: 0; border-radius: 2px; background: #23395A; color: #fff; font: inherit; cursor: pointer; }
.wc-tile.portrait { aspect-ratio: 9 / 16; }
.wc-tile::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 2px; pointer-events: none; transition: box-shadow .12s; }
.wc-tile:not(:disabled):hover::after, .wc-tile:focus-visible::after { box-shadow: inset 0 0 0 2px var(--signal); }
.wc-tile.empty { cursor: default; background: repeating-linear-gradient(45deg, #1A2F4E 0 8px, #23395A 8px 16px); }
.wc-img { position: absolute; display: block; }
.wc-img img, .wc-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wc-img .pl-app { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; }
.wc-tile.off .wc-img { filter: grayscale(1) brightness(.5); }
.wc-tile.off { background: #4A5869; }
.wc-n { position: absolute; top: 4px; left: 4px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 5px; border-radius: 3px; background: rgba(11, 31, 58, .8); font: 500 11px/18px var(--mono); }
.wc-n::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5BD08F; }
.wc-tile.off .wc-n::after { background: #FF8A80; }
.wc-tile.empty .wc-n::after { display: none; }
.wc-off { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 12px; font-weight: 500; }
.wc-label { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; color: #9AAABD; font-size: 13px; text-align: center; pointer-events: none; }
.wc-stands { display: flex; justify-content: space-around; width: min(100%, calc(var(--cols) * 150px)); }
.wall-card.wide .wc-stands { width: min(100%, calc(var(--cols) * 280px)); }
.wc-stands .sc-stand { width: calc(60% / var(--cols)); }
.wc-members { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 2px 16px 14px; }
.wc-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 11px 3px 4px; font: inherit; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.wc-chip:hover, .wc-chip:focus-visible { border-color: var(--signal); background: #F6FAFE; }
.wc-chip .sc-dot { width: 8px; height: 8px; }
.wc-cn { min-width: 18px; height: 18px; border-radius: 50%; background: var(--row); font: 500 11px/18px var(--mono); text-align: center; }
.wc-cname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-card .sc-foot { flex-wrap: wrap; }
.wall-card .sc-foot .sc-select { max-width: 340px; }
.wall-card .sc-foot span.sc-select { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wall-card .wc-pub { margin-left: auto; }
@media (max-width: 1180px) { .pl-card.wall-card.w4 { grid-column: 1 / -1; } }
@media (max-width: 860px) { .pl-card.wall-card { grid-column: 1 / -1; } }
/* affichage liste : une ligne de groupe, ses écrans en pastilles dessous */
@media (min-width: 641px) {
  .pl-grid.list > .pl-card.wall-card { flex-wrap: wrap; margin: 0; box-shadow: inset 3px 0 0 var(--signal); background: #F6F9FD; border-color: var(--row); }
  .pl-grid.list > .sc-card.wall-card.picked { box-shadow: inset 3px 0 0 var(--signal), inset 0 0 0 1px var(--signal); }
  .pl-grid.list .wall-card .wc-ico { order: 2; }
  .pl-grid.list .wall-card .linklike-name, .pl-grid.list .wall-card .pl-name { order: 3; flex: 0 1 auto; font-size: 16px; }
  .pl-grid.list .wall-card .wc-state { order: 3; }
  .pl-grid.list .wall-card .sc-zone-name { display: none; }
  .pl-grid.list .wall-card .sc-vwrap { order: 1; }
  .pl-grid.list .wall-card .wc-vis { padding: 0; }
  .pl-grid.list .wall-card .wc-frame { width: calc(var(--cols) * 36px); gap: 2px; padding: 2px; border-radius: 3px; box-shadow: none; }
  .pl-grid.list .wall-card .wc-n, .pl-grid.list .wall-card .wc-off, .pl-grid.list .wall-card .wc-label, .pl-grid.list .wall-card .wc-stands, .pl-grid.list .wall-card .sc-sim { display: none; }
  .pl-grid.list .wall-card .sc-foot { order: 4; margin-left: auto; }
  .pl-grid.list .wall-card .wc-pub { display: none; }
  .pl-grid.list .wall-card .wc-members { order: 5; flex-basis: 100%; justify-content: flex-start; padding: 0 0 2px 30px; }
}
@media (max-width: 640px) {
  .pl-card.wall-card { margin: 0 8px 8px 0; }
  .wall-card .sc-zone-name { margin-left: 26px; }
}
@media (max-width: 640px) {
  .sc-bar .search-box { flex-basis: 100%; order: 10; }
  .dd-btn b { max-width: 110px; }
}

/* ---------- Intégrations › Comptes connectés ---------- */
.tabs button { padding: 10px 0; color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; margin: 0; font: inherit; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--signal); }
.tabs button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.tab-alert { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.acc-logo { width: var(--s); height: var(--s); display: inline-grid; place-items: center; flex: none; }
.acc-logo .provider-logo { width: var(--s); height: var(--s); }
.acc-logo .app-ico { width: var(--s); height: var(--s); }
.acc-logo .app-ico .ico-svg { width: 62%; height: 62%; }
.add-menu .kebab-menu a { align-items: flex-start; padding: 9px 10px; }
.add-menu .kebab-menu a span { display: grid; gap: 1px; }
.add-menu .kebab-menu .acc-logo { margin-top: 1px; }
.kebab-menu button:disabled { opacity: .5; cursor: not-allowed; background: none; }
/* carte d'intégration : compte utilisé */
.cat-detail { padding: 0 18px 14px; margin-top: -6px; min-width: 0; }
.cat-row .cat-detail { padding: 2px 0 0; margin: 0; }
.acc-none { font-size: 13px; color: var(--muted); }
.acc-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; padding: 3px 9px 3px 5px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.acc-chip > span:not(.acc-logo) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-chip:hover { border-color: var(--line-2); background: var(--bg); }
.acc-chip:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.acc-chip.lost { border-color: #EBC2BE; background: var(--danger-bg); color: var(--danger-ink); }
.acc-chip-note { flex: none; }
/* onglet Comptes connectés */
.acc-list { display: grid; gap: 16px; }
.acc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); transition: border-color .2s, box-shadow .2s; }
.acc-card:focus { outline: none; }
.acc-card.flash { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.acc-head { display: flex; align-items: center; gap: 14px; padding: 16px 12px 16px 18px; }
.acc-id { flex: 1; min-width: 0; display: grid; gap: 1px; }
.acc-id b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; font-weight: 500; }
.acc-id small { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-id .acc-user { color: var(--ink); font-size: 14px; }
.acc-card a.btn, .acc-connect + .modal-foot a.btn, .add-menu .kebab-menu a { text-decoration: none; }
.acc-alert { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; background: var(--danger-bg); color: var(--danger-ink); font-size: 14px; border-top: 1px solid #F3C9C5; }
.acc-body { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--row); }
.acc-body > div { padding: 14px 18px 16px; min-width: 0; }
.acc-body > div + div { border-left: 1px solid var(--row); }
.acc-body h4 { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.acc-perm { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; }
.acc-perm .ico-svg { color: var(--ok); flex: none; }
.acc-perm.no { color: var(--muted); }
.acc-perm.no .ico-svg { color: var(--muted); }
.acc-perm.warn { color: var(--warn-ink); }
.acc-perm.warn .ico-svg { color: var(--warn); }
.acc-use { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 4px 8px; margin: 0 -8px; box-sizing: content-box; border: 0; border-radius: var(--radius); background: none; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.acc-use:hover { background: var(--bg); }
.acc-use:focus-visible { outline: 2px solid var(--signal); }
.acc-use .app-ico { width: 24px; height: 24px; }
.acc-use .app-ico .ico-svg { width: 13px; height: 13px; }
.acc-use small { color: var(--muted); font-size: 13px; white-space: nowrap; }
.acc-aside { display: flex; gap: 8px; align-items: flex-start; margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.acc-aside .ico-svg { flex: none; margin-top: 3px; }
/* fenêtres : connexion et déconnexion d'un compte */
.acc-connect { display: grid; gap: 12px; }
.acc-connect p { margin: 0; }
.acc-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.acc-choice:has(input:checked) { border-color: var(--signal); }
.acc-choice span { display: grid; gap: 1px; }
.acc-choice small { color: var(--muted); font-size: 13px; }
.acc-hint { color: var(--muted); font-size: 13px; }
.acc-impact { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius); padding: 10px 14px; font-size: 14px; }
.acc-impact ul { margin: 4px 0 0; padding-left: 18px; }
@media (max-width: 760px) {
  .acc-body { grid-template-columns: 1fr; }
  .acc-body > div + div { border-left: 0; border-top: 1px solid var(--row); }
}

/* ---------- Simulateur d'écrans (sim.js) : le player en aperçu, réduit ; frise des contenus ---------- */
.modal.app-modal.sim-dlg { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.modal-backdrop.picker-backdrop + .modal.sim-dlg { z-index: 111; }
.sim-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sim-head h3 { margin: 0 4px 0 0; }
.sim-body { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; }
.sim-host { min-width: 0; }
.sim-box { background: #E9EDF2; border-radius: 8px; padding: 16px; display: grid; place-items: center; --maxh: min(56vh, 620px); }
.sim-box:fullscreen { background: #000; padding: 0; --maxh: 100vh; }
.sim-frame { position: relative; width: min(100%, calc(var(--maxh) * var(--ratio, 1.7778))); background: #000; overflow: hidden; }
.sim-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sim-grid { position: absolute; inset: 0; display: grid; pointer-events: none; }
.sim-cell { position: relative; box-shadow: inset 0 0 0 var(--bz, 0px) #050B16; }
.sim-grid.sep .sim-cell { box-shadow: inset 0 0 0 var(--bz, 0px) #E9EDF2; }
.sim-box:fullscreen .sim-grid.sep .sim-cell { box-shadow: inset 0 0 0 var(--bz, 0px) #000; }
.sim-grid.sep .sim-cell::after { content: ""; position: absolute; inset: var(--bz, 0px); border-radius: 2px; box-shadow: 0 0 0 1px rgba(5, 11, 22, .35); }
.sim-num { position: absolute; left: calc(var(--bz, 0px) + 6px); top: calc(var(--bz, 0px) + 5px); z-index: 2; font-family: var(--mono); font-size: 12px; color: #fff; background: rgba(11, 31, 58, .78); padding: 0 6px; border-radius: 3px; }
.sim-mask { position: absolute; inset: var(--bz, 0px); display: grid; place-items: center; background: repeating-linear-gradient(45deg, rgba(40, 48, 60, .92) 0 10px, rgba(60, 70, 84, .92) 10px 20px); }
.sim-mask b { background: var(--danger); color: #fff; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 3px; }
.sim-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.sim-b { font: inherit; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: var(--radius); cursor: pointer; }
.sim-b:hover { border-color: var(--muted); }
.sim-b.txt { padding: 0 10px; }
.sim-link { border: 0; background: none; color: var(--signal); cursor: pointer; font: inherit; font-size: 13px; padding: 0 4px; }
.sim-link:empty { display: none; }
.sim-grow { flex: 1; }
.sim-time { font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.badge.sim-state.live { color: #fff; background: var(--danger); --dot: #fff; }
.badge.sim-state.live::before { animation: sim-blink 1.4s infinite; }
.badge.sim-state.free { color: var(--warn-ink); background: var(--warn-bg); --dot: var(--warn); }
@keyframes sim-blink { 50% { opacity: .2; } }
.sim-tl { display: flex; gap: 3px; margin-top: 10px; }
.sim-seg { position: relative; min-width: 0; overflow: hidden; text-align: left; font: inherit; font-size: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 8px; cursor: pointer; color: var(--ink); }
.sim-seg:hover { border-color: var(--muted); }
.sim-seg.on { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.sim-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #E4EEF8; }
.sim-seg:not(.on) .sim-fill { display: none; }
.sim-lbl { position: relative; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-lbl i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sim-d { position: relative; display: block; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.sim-empty { color: var(--muted); font-size: 13px; }
.sim-note { margin-top: 8px; font-size: 13px; color: var(--muted); }
.sim-note s { color: var(--ink); }
.sim-note b { color: var(--ink); font-weight: 500; }
.sim-side section { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.sim-side h4 { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sim-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sim-chips .chip:disabled { opacity: .45; cursor: default; }
.sim-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-top: 10px; cursor: pointer; }
.sim-hint { font-size: 13px; margin: 6px 0 0; }
.sim-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
.sim-kv dt { color: var(--muted); }
.sim-kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .sim-body { grid-template-columns: minmax(0, 1fr); }
  .sim-box { padding: 8px; --maxh: 46vh; }
  .sim-d { display: none; }
}
@media (max-width: 640px) {
  .modal.app-modal.sim-dlg { width: 100%; max-height: 94vh; }
  .sim-foot { display: none; }
  .sim-b.txt { font-size: 0; gap: 0; padding: 0 8px; }   /* au téléphone : icônes seules */
}

/* Écrans : « Simuler » sur la vignette de l'écran (au survol ; toujours visible au doigt) */
.sc-vwrap { position: relative; display: flex; flex-direction: column; }
.sc-sim { position: absolute; z-index: 3; left: 50%; top: calc(50% - 9px); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 500;
  padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--radius); background: rgba(11, 31, 58, .82); color: #fff; cursor: pointer; opacity: 0; transition: opacity .12s; }
.sc-card:hover .sc-sim, .sc-sim:focus-visible { opacity: 1; }
.sc-sim:hover { background: var(--ink); }
@media (hover: none) { .sc-sim { opacity: 1; top: auto; bottom: 22px; left: auto; right: 12px; transform: none; padding: 5px 9px; } }
@media (min-width: 641px) {
  .pl-grid.list .sc-vwrap { order: 1; flex: none; position: static; }
  .pl-grid.list .sc-sim { display: none; }
}

/* Simulateur du mur : onglets Affichage / Réglages du mur, réglages essayés avant d'être appliqués */
.sim-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sim-ribbon { align-self: flex-start; }
.sim-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.sim-tabs button { font: inherit; font-size: 14px; border: 0; background: none; padding: 8px 12px; margin-bottom: -1px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.sim-tabs button.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.sim-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.sim-fmt { border: 0; padding: 0; margin: 0; min-width: 0; }
.sim-diffs { margin: 6px 0; padding-left: 18px; }
.sim-confirm { font-size: 14px; color: var(--warn-ink); }

/* Import d'un dossier Drive en cours (DriveSyncBar) */
.dsb { display: flex; gap: 14px; align-items: flex-start; background: #E4EEF8; border: 1px solid #B9CDE3; border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }
.dsb-spin { width: 18px; height: 18px; flex: none; margin-top: 3px; border-radius: 50%; border: 2px solid rgba(11,31,58,.18); border-top-color: var(--signal); animation: spin .9s linear infinite; }
.dsb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dsb-body .upl-bar { background: #fff; }
.dsb-body small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsb-body small.dsb-hint { white-space: normal; color: var(--warn-ink); }

/* ---------- Contrôle du direct (Growth) : carte écran, panneau, miroir, supervision ---------- */
.sc-device { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--muted); font-size: 12.5px; min-height: 22px; flex-basis: 100%; }
.sc-device .dev-logo { flex: none; }
.sc-device b { color: var(--ink); font-weight: 500; }
.sc-device .sep { opacity: .5; margin: 0 5px; }
.sc-device .mono { font-family: var(--mono); font-size: 12px; }
.sc-device.off { opacity: .6; }
.sc-paused-badge { margin-left: 2px; }
.sc-pause-art { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; background: var(--ink); color: #9AAABD; font-size: 11px; }
.sc-pause-art b { color: #fff; font-size: 22px; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.sc-pause-art i { color: var(--signal); font-style: normal; }
.sc-monitor.portrait .sc-pause-art { font-size: 9px; } .sc-monitor.portrait .sc-pause-art b { font-size: 15px; }

.sc-live { display: flex; gap: 4px; padding: 10px 10px 12px; border-top: 1px solid var(--row); }
.sc-live .act { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: 12px; padding: 6px 3px; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; cursor: pointer; white-space: nowrap; position: relative; }
.sc-live .act:hover:not(:disabled):not(.locked) { border-color: var(--signal); color: var(--signal); }
.sc-live .act:disabled { opacity: .45; cursor: not-allowed; }
.sc-live .act.locked { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.sc-live .act .lk { margin-left: 2px; }
/* bulle « verrouillé » : licence de base seulement (la classe .locked ne s'applique que dans ce cas) */
.act.locked[data-tip]:hover::after, .act.locked[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.35;
  padding: 7px 10px; border-radius: var(--radius); width: max-content; max-width: 230px; white-space: normal; text-align: left; z-index: 90; pointer-events: none; }
.act.locked[data-tip]:hover::before, .act.locked[data-tip]:focus-visible::before {
  content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; z-index: 90; pointer-events: none; }
@media (min-width: 641px) {
  .pl-grid.list .sc-device { display: none; }
  .pl-grid.list .sc-live { order: 5; border: 0; padding: 0 44px 0 0; flex: none; }
  .pl-grid.list .sc-live .act { padding: 5px 10px; }
}

/* Panneau de contrôle d'un écran */
.lp { position: fixed; z-index: 101; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: #fff; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.lp-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.lp-head h2 { margin: 0; font-size: 20px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-body { flex: 1; overflow: auto; padding: 18px 20px 30px; display: flex; flex-direction: column; gap: 22px; }
.lp-sect h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 500; }
.lp-offline { background: var(--danger-bg); color: var(--danger-ink); border-radius: var(--radius); padding: 10px 12px; font-size: 14px; }
.lp-frame { position: relative; aspect-ratio: 16/9; background: var(--ink); border: 5px solid var(--ink); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }
.lp-frame img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .2s; }
.lp-frame.loading img { opacity: .35; }
.lp-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9AAABD; font-size: 13px; }
.lp-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 13px; background: rgba(11,31,58,.35); }
.lp-spin { width: 26px; height: 26px; border: 3px solid #23395A; border-top-color: var(--signal); border-radius: 50%; animation: spin .8s linear infinite; }
.lp-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--muted); min-height: 34px; }
.lp-progress { height: 3px; background: var(--row); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.lp-progress i { display: block; height: 100%; width: 0; background: var(--signal); animation: lp-p 10s linear forwards; }
@keyframes lp-p { to { width: 100%; } }
.lp-err { color: var(--danger-ink); }
.lp-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.lp-state { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.lp-state.paused { background: var(--warn-bg); border-color: #EBD3A3; color: var(--warn-ink); }
.lp-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.lp-field select { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 7px 10px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); }
.lp-confirm { background: var(--danger-bg); border: 1px solid #E7B4B0; border-radius: var(--radius); padding: 10px 12px; margin-top: 10px; font-size: 14px; }
.lp-kv { display: grid; grid-template-columns: 140px 1fr; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); }
.lp-kv > * { padding: 8px 12px; border-bottom: 1px solid var(--row); font-size: 14px; }
.lp-kv > *:nth-last-child(-n+2) { border-bottom: 0; }
.lp-kv dt { color: var(--muted); background: var(--bg); }
.lp-kv dd { margin: 0; font-family: var(--mono); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.lp-hist { border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; }
.lp-hist > div { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--row); }
.lp-hist > div:last-child { border-bottom: 0; }
.lp-hist time { font-family: var(--mono); font-size: 12px; color: var(--muted); min-width: 64px; }
.lp-hist small { display: block; color: var(--muted); font-size: 12px; }

/* Miroir (édition d'un écran, réglages d'un mur) */
.mirror-opts { display: flex; flex-direction: column; gap: 10px; }
.mirror-row { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-weight: 400; }
.mirror-row small { display: block; color: var(--muted); font-size: 12.5px; }
.mirror-opts > small { color: var(--muted); }

/* Réglages › Supervision */
.sv-row { display: flex; gap: 18px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--row); }
.sv-row:last-child { border-bottom: 0; }
.sv-row .t { flex: 1; min-width: 0; }
.sv-row .t small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.sv-row .ctl { display: flex; align-items: center; gap: 8px; flex: none; }
.sv-row.locked-row { opacity: .55; cursor: not-allowed; position: relative; }
.sv-row.locked-row > * { pointer-events: none; }
.sv-upsell { display: flex; align-items: center; gap: 12px; background: var(--brand-tint); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
@media (max-width: 640px) { .sv-row { flex-direction: column; gap: 8px; } .lp-kv { grid-template-columns: 110px 1fr; } }
.sc-live .act > span { overflow: hidden; text-overflow: ellipsis; }
.sc-live .act svg { flex: none; width: 14px; height: 14px; }
.sc-live .act .lk { width: 11px; height: 11px; margin-left: 0; }
/* Aperçu au format configuré : un écran portrait s'affiche en portrait, même si l'appareil est tenu à plat */
.lp-frame { container-type: size; }
.lp-frame.portrait { aspect-ratio: 9/16; width: auto; height: min(62vh, 560px); margin: 0 auto; }

/* Aperçu d'un mur : la capture de chaque écran, à sa place */
.lp-wall { display: grid; gap: 3px; background: var(--ink); border: 4px solid var(--ink); border-radius: var(--radius); overflow: hidden; }
.lp-cell { position: relative; aspect-ratio: 16/9; background: #14294A; overflow: hidden; container-type: size; }
.lp-cell.portrait { aspect-ratio: 9/16; }
.lp-cell img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lp-cell-n { position: absolute; left: 4px; top: 4px; background: rgba(11,31,58,.8); color: #fff; font-size: 11px; padding: 0 5px; border-radius: 3px; font-family: var(--mono); }
.lp-cell-off { position: absolute; inset: 0; display: grid; place-items: center; color: #9AAABD; font-size: 12px; background: rgba(11,31,58,.7); }
.lp-spin.small { width: 14px; height: 14px; border-width: 2px; display: inline-block; vertical-align: -2px; border-color: var(--line-2); border-top-color: var(--signal); }
.pl-grid .wall-card .sc-live { margin-top: 0; }
.wc-chip .dev-logo { flex: none; }
.wc-os { font-size: 12px; color: var(--muted); }

/* ---------- Écrans : carte refondue (affichage vignettes) ----------
   L'aperçu est l'en-tête : scène à hauteur fixe, l'écran (ou le mur) s'y ajuste à ses vraies proportions.
   Case, état et menu sont posés sur la scène ; dessous : nom, appareil, contenu diffusé, actions. */
.wc-dots { display: none; }
.kebab-menu button:disabled { opacity: .45; cursor: not-allowed; }
.pl-grid:not(.list) .scr-card:not(.pl-add) { --stage-h: 128px; padding: 10px; }
.pl-grid:not(.list) .scr-card.wall-card.wide { --stage-h: 260px; }
.pl-grid:not(.list) .scr-card .sc-vwrap { order: -1; height: calc(var(--stage-h) + 28px); background: #0E1726; border-radius: 8px; }
.pl-grid:not(.list) .sc-visual { flex: 1; justify-content: center; padding: 14px; }
.pl-grid:not(.list) .sc-monitor { width: min(100%, calc(var(--stage-h) * 16 / 9)); background: #000; border: 3px solid #2E3B52; border-radius: 4px; }
.pl-grid:not(.list) .sc-monitor.portrait { width: auto; height: var(--stage-h); }
.pl-grid:not(.list) .sc-visual:hover .sc-monitor { border-color: var(--signal); }
.pl-grid:not(.list) .sc-visual > .sc-stand { display: none; }
.pl-grid:not(.list) .sc-pending { position: absolute; left: 10px; bottom: 10px; margin: 0; }
.pl-grid:not(.list) .scr-card.is-off .sc-monitor, .pl-grid:not(.list) .scr-card.is-off .wc-frame { filter: grayscale(1) brightness(.6); }

/* sur la scène : case, état, menu */
.pl-grid:not(.list) .wall-card .sc-check { position: absolute; z-index: 3; top: 20px; left: 20px; width: 18px; height: 18px; }
.pl-grid:not(.list) .wall-card .pl-title > .wc-state { position: absolute; z-index: 3; top: 18px; left: 46px; margin: 0; border-radius: 999px; padding: 3px 10px; }
.wc-state.partial { color: var(--warn-ink); background: var(--warn-bg); --dot: var(--warn); }
.pl-grid:not(.list) .wall-card .pl-title > .kebab { position: absolute; z-index: 4; top: 16px; right: 16px; margin: 0; }
.pl-grid:not(.list) .wall-card .pl-title > .kebab .kebab-btn { width: 28px; height: 28px; background: rgba(255, 255, 255, .94); color: var(--ink); }
.pl-grid:not(.list) .wall-card .wc-ico { display: none; }

/* écran indépendant : la ligne du titre (case, état, nom, menu) reste au-dessus de la scène, comme avant ;
   dessous, une ligne appareil · zone · synchro */
.pl-grid:not(.list) .scr-card:not(.wall-card) .sc-head { display: contents; }
.pl-grid:not(.list) .scr-card:not(.wall-card) .sc-head .pl-title { order: -2; padding: 2px 4px 10px; }
.pl-grid:not(.list) .sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 10px 4px 0; }
.pl-grid.list .sc-meta { display: contents; }
.pl-grid:not(.list) .wall-card .sc-head { padding: 12px 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.pl-grid:not(.list) .wall-card .sc-head .pl-title { flex: 1 0 100%; }
.pl-grid:not(.list) .scr-card .pl-name, .pl-grid:not(.list) .scr-card .linklike-name { font-size: 16px; }
.pl-grid:not(.list) .scr-card .sc-device { order: 1; flex-basis: auto; margin: 0; min-height: 0; }
.pl-grid:not(.list) .scr-card .sc-zone-name { order: 2; margin: 0; font-size: 12.5px; }
.pl-grid:not(.list) .scr-card .sc-zone-name::before { content: "· "; }
.pl-grid:not(.list) .scr-card.wall-card .sc-zone-name { order: 0; }
.pl-grid:not(.list) .scr-card.wall-card .sc-zone-name::before { content: none; }
.pl-grid:not(.list) .scr-card .sc-sync { order: 3; margin: 0; }

/* contenu diffusé : libellé au-dessus, sélecteur sur toute la largeur */
.pl-grid:not(.list) .scr-card .sc-foot { margin-top: auto; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 4px 0; border-top: 0; min-height: 0; }
.pl-grid:not(.list) .scr-card .sc-lbl { font-size: 11.5px; }
.pl-grid:not(.list) .scr-card .sc-foot .sc-select { flex: none; max-width: none; }
.pl-grid:not(.list) .scr-card .sc-foot .confirm-line { flex: none; }

/* actions : Aperçu en avant, Pause ; Redémarrer est dans le menu */
.pl-grid:not(.list) .scr-card .sc-live { padding: 10px 0 0; border-top: 0; gap: 6px; }
.pl-grid:not(.list) .scr-card .sc-live .act { padding: 8px 6px; font-size: 13px; }
.pl-grid:not(.list) .scr-card .sc-live .act:first-child:not(.locked) { flex: 1.4 1 0; background: var(--brand-tint); border-color: transparent; color: var(--ink); font-weight: 500; }
.pl-grid:not(.list) .scr-card .sc-live .act:first-child:not(.locked):hover:not(:disabled) { color: var(--signal); }

/* mur : la composition s'ajuste dans la scène, ses écrans sont repliés en pastilles */
.pl-grid:not(.list) .pl-card.wall-card { grid-column: span 1; }
.pl-grid:not(.list) .pl-card.wall-card.w4 { grid-column: span 2; }
.pl-grid:not(.list) .pl-card.wall-card.wide { grid-column: 1 / -1; }
@media (max-width: 860px) { .pl-grid:not(.list) .pl-card.wall-card.w4 { grid-column: 1 / -1; } }
.pl-grid:not(.list) .wc-vis { flex: 1; justify-content: center; padding: 14px; }
.pl-grid:not(.list) .wc-frame { width: min(100%, calc(var(--stage-h) * var(--ar))); aspect-ratio: var(--ar); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); background: #2E3B52; box-shadow: none; }
.pl-grid:not(.list) .wc-tile, .pl-grid:not(.list) .wc-tile.portrait { aspect-ratio: auto; min-height: 0; }
.pl-grid:not(.list) .wc-stands { display: none; }
.pl-grid:not(.list) .wc-dots { display: flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%; padding: 10px 4px 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; text-align: left; }
.pl-grid:not(.list) .wc-dots:hover { color: var(--ink); }
.pl-grid:not(.list) .wc-dots .sc-dot { width: 8px; height: 8px; }
.pl-grid:not(.list) .wc-dots span:last-of-type { margin-left: 3px; }
.pl-grid:not(.list) .wc-dots[aria-expanded="true"] svg { transform: rotate(180deg); }
.pl-grid:not(.list) .wc-members { display: none; justify-content: flex-start; padding: 8px 4px 0; }
.pl-grid:not(.list) .wc-members.open { display: flex; }

/* mobile : cartes uniquement, même si la vue « liste » est mémorisée depuis un PC */
@media (max-width: 640px) {
  .pl-grid.list .scr-card:not(.pl-add) { --stage-h: 128px; padding: 10px; }
  .pl-grid.list .scr-card.wall-card.wide { --stage-h: 260px; }
  .pl-grid.list .scr-card .sc-vwrap { order: -1; height: calc(var(--stage-h) + 28px); background: #0E1726; border-radius: 8px; }
  .pl-grid.list .sc-visual { flex: 1; justify-content: center; padding: 14px; }
  .pl-grid.list .sc-monitor { width: min(100%, calc(var(--stage-h) * 16 / 9)); background: #000; border: 3px solid #2E3B52; border-radius: 4px; }
  .pl-grid.list .sc-monitor.portrait { width: auto; height: var(--stage-h); }
  .pl-grid.list .sc-visual:hover .sc-monitor { border-color: var(--signal); }
  .pl-grid.list .sc-visual > .sc-stand { display: none; }
  .pl-grid.list .sc-pending { position: absolute; left: 10px; bottom: 10px; margin: 0; }
  .pl-grid.list .scr-card.is-off .sc-monitor, .pl-grid.list .scr-card.is-off .wc-frame { filter: grayscale(1) brightness(.6); }
  .pl-grid.list .wall-card .sc-check { position: absolute; z-index: 3; top: 20px; left: 20px; width: 18px; height: 18px; }
  .pl-grid.list .wall-card .pl-title > .wc-state { position: absolute; z-index: 3; top: 18px; left: 46px; margin: 0; border-radius: 999px; padding: 3px 10px; }
  .pl-grid.list .wall-card .pl-title > .kebab { position: absolute; z-index: 4; top: 16px; right: 16px; margin: 0; }
  .pl-grid.list .wall-card .pl-title > .kebab .kebab-btn { width: 28px; height: 28px; background: rgba(255, 255, 255, .94); color: var(--ink); }
  .pl-grid.list .wall-card .wc-ico { display: none; }
  .pl-grid.list .scr-card:not(.wall-card) .sc-head { display: contents; }
  .pl-grid.list .scr-card:not(.wall-card) .sc-head .pl-title { order: -2; padding: 2px 4px 10px; }
  .pl-grid.list .sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 10px 4px 0; }
  .pl-grid.list .wall-card .sc-head { padding: 12px 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
  .pl-grid.list .wall-card .sc-head .pl-title { flex: 1 0 100%; }
  .pl-grid.list .scr-card .pl-name, .pl-grid.list .scr-card .linklike-name { font-size: 16px; }
  .pl-grid.list .scr-card .sc-device { order: 1; flex-basis: auto; margin: 0; min-height: 0; }
  .pl-grid.list .scr-card .sc-zone-name { order: 2; margin: 0; font-size: 12.5px; }
  .pl-grid.list .scr-card .sc-zone-name::before { content: "· "; }
  .pl-grid.list .scr-card.wall-card .sc-zone-name { order: 0; }
  .pl-grid.list .scr-card.wall-card .sc-zone-name::before { content: none; }
  .pl-grid.list .scr-card .sc-sync { order: 3; margin: 0; }
  .pl-grid.list .scr-card .sc-foot { margin-top: auto; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 4px 0; border-top: 0; min-height: 0; }
  .pl-grid.list .scr-card .sc-lbl { font-size: 11.5px; }
  .pl-grid.list .scr-card .sc-foot .sc-select { flex: none; max-width: none; }
  .pl-grid.list .scr-card .sc-foot .confirm-line { flex: none; }
  .pl-grid.list .scr-card .sc-live { padding: 10px 0 0; border-top: 0; gap: 6px; }
  .pl-grid.list .scr-card .sc-live .act { padding: 8px 6px; font-size: 13px; }
  .pl-grid.list .scr-card .sc-live .act:first-child:not(.locked) { flex: 1.4 1 0; background: var(--brand-tint); border-color: transparent; color: var(--ink); font-weight: 500; }
  .pl-grid.list .scr-card .sc-live .act:first-child:not(.locked):hover:not(:disabled) { color: var(--signal); }
  .pl-grid.list .pl-card.wall-card { grid-column: span 1; }
  .pl-grid.list .pl-card.wall-card.w4 { grid-column: span 2; }
  .pl-grid.list .pl-card.wall-card.wide { grid-column: 1 / -1; }
  .pl-grid.list .wc-vis { flex: 1; justify-content: center; padding: 14px; }
  .pl-grid.list .wc-frame { width: min(100%, calc(var(--stage-h) * var(--ar))); aspect-ratio: var(--ar); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); background: #2E3B52; box-shadow: none; }
  .pl-grid.list .wc-tile, .pl-grid.list .wc-tile.portrait { aspect-ratio: auto; min-height: 0; }
  .pl-grid.list .wc-stands { display: none; }
  .pl-grid.list .wc-dots { display: flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%; padding: 10px 4px 0; border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; text-align: left; }
  .pl-grid.list .wc-dots:hover { color: var(--ink); }
  .pl-grid.list .wc-dots .sc-dot { width: 8px; height: 8px; }
  .pl-grid.list .wc-dots span:last-of-type { margin-left: 3px; }
  .pl-grid.list .wc-dots[aria-expanded="true"] svg { transform: rotate(180deg); }
  .pl-grid.list .wc-members { display: none; justify-content: flex-start; padding: 8px 4px 0; }
  .pl-grid.list .wc-members.open { display: flex; }
}
@media (max-width: 560px) { .pl-grid .scr-card:not(.pl-add) { --stage-h: 150px; } .pl-grid .scr-card.wall-card.wide { --stage-h: 200px; } }
@media (hover: none) { .pl-grid .sc-sim { bottom: 10px; right: 10px; } }
@media (max-width: 860px) { .pl-grid.list .pl-card.wall-card.w4 { grid-column: 1 / -1; } }

/* ---------- Écrans : liste refondue (PC) ----------
   Colonnes alignées : case · aperçu · (chevron du mur) · écran · état · en diffusion · actions · menu.
   Les écrans d'un mur se déplient en lignes sous le mur, sur les mêmes colonnes (sous-grille). */
.sc-listhead, .wc-chev, .wc-kids, .sc-pending-l { display: none; }
.zc { display: none; }
@media (min-width: 641px) {
  .pl-grid.list { --lcols: 20px 84px 18px minmax(0, 2fr) 180px minmax(0, 1fr) minmax(170px, 320px) 66px 28px; }
  .pl-grid.list .sc-listhead { display: grid; grid-template-columns: var(--lcols); column-gap: 12px; padding: 8px 12px; font-size: 12px; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--line); }
  .pl-grid.list > .scr-card { display: grid; grid-template-columns: var(--lcols); column-gap: 12px; row-gap: 0; align-items: center; padding: 8px 12px; }

  /* placement : tout ce qui est sur une seule ligne de contenu s'étend sur les deux lignes de la rangée */
  .pl-grid.list .scr-card .sc-check { grid-column: 1; grid-row: 1 / 3; order: 0; }
  .pl-grid.list .scr-card .sc-vwrap { grid-column: 2; grid-row: 1 / 3; order: 0; position: relative; width: 84px; height: 48px; background: #0E1726; border-radius: 6px; --stage-h: 40px; }
  .pl-grid.list .scr-card .wc-chev { grid-column: 3; grid-row: 1 / 3; }
  .pl-grid.list .scr-card .linklike-name, .pl-grid.list .scr-card .pl-name { grid-column: 4; grid-row: 1; align-self: end; order: 0; flex: none; min-width: 0; font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: start; max-width: 100%; }
  .pl-grid.list .scr-card .sc-meta, .pl-grid.list .scr-card.wall-card .sc-zone-name { grid-column: 4; grid-row: 2; align-self: start; }
  .pl-grid.list .scr-card .sc-dot, .pl-grid.list .scr-card .wc-state { grid-column: 5; grid-row: 1 / 3; order: 0; margin: 0; justify-self: start; }
  .pl-grid.list .scr-card .sc-foot { grid-column: 7; grid-row: 1 / 3; order: 0; flex: none; min-width: 0; padding: 0; }
  .pl-grid.list .scr-card .sc-live { grid-column: 8; grid-row: 1 / 3; order: 0; padding: 0; }
  .pl-grid.list .scr-card .kebab { grid-column: 9; grid-row: 1 / 3; position: relative; right: auto; top: auto; bottom: auto; display: block; }
  .pl-grid.list .scr-card .kebab-menu { top: calc(100% + 4px); }

  /* identité : une ligne appareil · zone · synchro sous le nom */
  .pl-grid.list .sc-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
  .pl-grid.list .sc-meta .sc-device { display: flex; order: 1; flex: none; flex-basis: auto; margin: 0; min-height: 0; font-size: 12px; }
  .pl-grid.list .sc-meta .sc-device .dev-logo { display: none; }
  .pl-grid.list .sc-meta .sc-zone-name { order: 2; margin: 0; font-size: 12px; }
  .pl-grid.list .sc-meta .sc-zone-name::before { content: "· "; }
  .pl-grid.list .sc-meta .sc-sync { order: 3; margin: 0; }
  .pl-grid.list .sc-meta .sc-sync .badge { padding: 0 7px; font-size: 11px; }
  .pl-grid.list .scr-card .sc-zone-name { display: block; font-size: 12px; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pl-grid.list .scr-card.wall-card .sc-zone-name::before { content: none; }
  .pl-grid.list .sc-pending-l { display: inline-flex; flex: none; padding: 0 7px; font-size: 11px; }
  .pl-grid.list .sc-pending { display: none; }
  .pl-grid.list .scr-card:has(.sc-pending) .sc-foot { padding-right: 0; }
  .pl-grid.list .sc-paused-badge { display: none; }

  /* aperçu en vignette fixe, à la vraie forme de l'écran */
  .pl-grid.list .sc-visual { width: 100%; height: 100%; padding: 4px; justify-content: center; }
  .pl-grid.list .sc-monitor { width: min(100%, calc(var(--stage-h) * 16 / 9)); background: #000; border: 2px solid #2E3B52; border-radius: 3px; }
  .pl-grid.list .sc-monitor.portrait { width: auto; height: var(--stage-h); }
  .pl-grid.list .scr-card.is-off .sc-monitor, .pl-grid.list .scr-card.is-off .wc-frame { filter: grayscale(1) brightness(.6); }
  .pl-grid.list .scr-card.is-off .sc-foot, .pl-grid.list .scr-card.is-off .sc-live { opacity: .6; }

  /* état : pastille + texte */
  .pl-grid.list .scr-card:not(.wall-card) .sc-dot { display: inline-flex; align-items: center; gap: 6px; width: auto; height: auto; background: none; color: var(--ink); font-size: 12.5px; white-space: nowrap; }
  .pl-grid.list .scr-card:not(.wall-card) .sc-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
  .pl-grid.list .scr-card:not(.wall-card) .sc-dot.en-ligne::before { background: var(--ok); }
  .pl-grid.list .scr-card:not(.wall-card) .sc-dot.mise-a-jour::before, .pl-grid.list .scr-card:not(.wall-card) .sc-dot.paused::before { background: var(--warn); }
  .pl-grid.list .scr-card .sc-st { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap; }

  /* en diffusion : sélecteur seul (le libellé est dans l'en-tête) */
  .pl-grid.list .scr-card .sc-lbl { display: none; }
  .pl-grid.list .scr-card .sc-foot .sc-select { width: 100%; min-width: 0; flex: 1; }
  .pl-grid.list .zc { display: inline; color: var(--muted); font-weight: 400; }
  .pl-grid.list .wall-card .sc-foot:has(.confirm-line) { grid-column: 4 / -1; flex-wrap: wrap; }
  /* En diffusion : liste alignée à gauche de sa colonne, mur compris ; État centré entre Écran et En diffusion */
  .pl-grid.list .wall-card .sc-foot { margin-left: 0; }
  .pl-grid.list .scr-card .sc-foot { justify-self: stretch; width: 100%; }
  .pl-grid.list .scr-card .wc-state, .pl-grid.list .scr-card .sc-dot { white-space: normal; text-align: left; }
  .sc-listhead > span:nth-child(5) { text-align: left; }

  /* actions : icônes seules */
  .pl-grid.list .sc-live { gap: 4px; flex: none; }
  .pl-grid.list .sc-live .act { flex: none; width: 30px; height: 30px; padding: 0; }
  .pl-grid.list .sc-live .act > span, .pl-grid.list .sc-live .act .lk { display: none; }
  .pl-grid.list .sc-live .act:first-child:not(.locked) { background: var(--brand-tint); border-color: transparent; }

  /* mur : ligne de groupe, composition en vignette, écrans dépliables */
  .pl-grid.list .wall-card .wc-ico { display: none; }
  .pl-grid.list .wall-card .wc-chev { display: grid; place-items: center; width: 18px; height: 24px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
  .pl-grid.list .wall-card .wc-chev svg { transform: rotate(-90deg); transition: transform .12s; }
  .pl-grid.list .wall-card .wc-chev[aria-expanded="true"] svg { transform: none; }
  .pl-grid.list .wall-card .wc-vis { flex: none; padding: 0; width: 100%; height: 100%; justify-content: center; }
  .pl-grid.list .wall-card .wc-frame { width: min(100%, calc(var(--stage-h) * var(--ar))); aspect-ratio: var(--ar); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); gap: 2px; padding: 2px; background: #2E3B52; box-shadow: none; border-radius: 3px; }
  .pl-grid.list .wall-card .wc-tile, .pl-grid.list .wall-card .wc-tile.portrait { aspect-ratio: auto; min-height: 0; }
  .pl-grid.list .wall-card .wc-members { display: none; }
  .pl-grid.list .wall-card .wc-kids { display: grid; grid-column: 1 / -1; grid-row: 3; grid-template-columns: subgrid; margin: 8px 0 0; }
  .pl-grid.list .wc-kid { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; padding: 6px 0; border-top: 1px solid var(--row); }
  .pl-grid.list .wc-kid .sc-check { grid-column: 1; grid-row: auto; }
  .pl-grid.list .wc-kid .wc-cn { grid-column: 2; justify-self: start; }
  .pl-grid.list .wc-kid .wc-kname { grid-column: 4; display: flex; flex-direction: column; min-width: 0; }
  .pl-grid.list .wc-kid .wc-kname small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pl-grid.list .wc-kid .linklike-name { grid-column: auto; grid-row: auto; font-size: 13.5px; align-self: auto; }
  .pl-grid.list .wc-kid .wc-kst { grid-column: 5; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; white-space: nowrap; }
  .pl-grid.list .wc-kid .wc-kst .sc-dot { width: 8px; height: 8px; }
  .pl-grid.list .wc-kid .wc-kmut { grid-column: 7; color: var(--muted); font-size: 12.5px; }
  .pl-grid.list .wc-kid.off { opacity: .6; }
}
@media (min-width: 641px) { .pl-grid.list > .pl-card.wall-card { grid-column: 1 / -1; } }

/* Suivi de la dernière publication d'un écran (carte) */
.sc-delivery { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; border-radius: var(--radius); padding: 2px 9px; }
.sc-delivery .dd { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sc-delivery.ok { color: var(--ok-ink); background: var(--ok-bg); }
.sc-delivery.wip { color: var(--warn-ink); background: var(--warn-bg); }
.sc-delivery.wip .dd { animation: sc-dd-pulse 1.2s ease-in-out infinite; }
.sc-delivery.late { color: var(--danger-ink); background: var(--danger-bg); }
@keyframes sc-dd-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sc-delivery.wip .dd { animation: none; } }

/* ============ Configuration d'un contenu : mise en page standard (voir DEV-POC.md) ============
   Ligne 1 : source · ligne 2 : aperçu (gauche) + configuration (droite) · icône « Options avancées » dans le bandeau. */
.modal.app-modal.ci-modal { width: min(900px, calc(100vw - 32px)); }
.ci { display: grid; }
.ci .dw { max-width: none; }
.ci-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.ci-gear { background: none; border: 0; cursor: pointer; color: var(--muted); padding: 6px; border-radius: var(--radius); display: grid; }
.ci-gear:hover { background: var(--bg); color: var(--ink); }
.ci-src { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; }
.app-modal .ci-src { margin: -16px -18px 20px; border-width: 0 0 1px; border-radius: 0; padding: 16px 18px; }
.ci-src-row { display: flex; gap: 10px; align-items: flex-start; }
.ci-src-row > .dw { flex: 1; min-width: 0; }
/* Le bouton s'aligne sur le champ (pas sur son texte d'aide) : on saute l'étiquette (13px × 1,5 + 6px de marge). */
.ci-src-row > .btn { flex: none; margin-top: 25.5px; }
.ci-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; }
.ci-cols.one { grid-template-columns: 1fr; max-width: 560px; }
.ci-t { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ci-conf { display: grid; gap: 14px; align-content: start; }
.ci-conf .ci-t { margin: 0; }
.ci-listset { display: grid; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.ci-listset .ci-t { margin: 0; }
/* Onglets de la fenêtre d'un contenu (style .se-utabs) : en tête de la colonne de droite ; la configuration de l'app est masquée, pas retirée. */
.ci-conf > .se-utabs { margin-bottom: 0; }
.ci-conf-main { display: grid; gap: 14px; align-content: start; }
.ci-conf-main .ci-t { margin: 0; }
.ci-conf-main[hidden], .ci-prev[hidden] { display: none !important; }
/* Bouton « Grille / Carrousel 3D » du carrousel : remonté sur la ligne de l'intitulé « Aperçu », à droite. */
.ci-prev { position: relative; }
.ci-prev:has(.car-mode) > .ci-t { display: flex; align-items: center; min-height: 26px; margin-bottom: 6px; }
.ci-prev .car-mode { position: absolute; top: -32px; right: 0; height: 26px; padding-block: 0; }
.se-utabs button:disabled { opacity: .45; cursor: not-allowed; }
.se-utabs button:disabled:hover { color: var(--muted); }
.se-utabs .tab-lock { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); border: 1px solid var(--line-2); border-radius: 99px; padding: 0 8px; background: #fff; }
.se-utabs small.on-badge { background: var(--ok-bg); color: var(--ok-ink); }
/* Onglet « QR code » : comptage des scans (voir QrTracking.cs) */
.ci-qr { display: grid; gap: 14px; align-content: start; }
.ci-qr-master { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.ci-qr-master b { display: block; }
.ci-qr-master small { display: block; color: var(--muted); font-size: 13px; }
.ci-qr .qr-fields { display: grid; gap: 14px; }
.ci-qr .qr-fields.off { opacity: .45; pointer-events: none; }
.ci-qr input[type=range] { width: 100%; padding: 0; border: 0; box-shadow: none; background: none; accent-color: var(--signal); }
.ci-qr .dw-field label .mono { color: var(--ink); font-weight: 400; margin-left: 4px; }
.ci-qr-locked { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid #E9CF9B; border-radius: var(--radius); padding: 10px 14px; font-size: 13px; }
/* Aperçu de l'écran où l'on glisse le QR code : 1cqw = 1 % de la largeur de l'écran, comme 1em dans le player */
.qr-stage { container-type: inline-size; }
.qr-bg { position: absolute; inset: 0; display: grid; place-items: center; }
.qr-bg img, .qr-bg video { width: 100%; height: 100%; object-fit: contain; display: block; }
.qr-bg .pl-app { display: grid; place-items: center; color: #fff; }
.qr-box { position: absolute; z-index: 5; background: #fff; display: flex; flex-direction: column; align-items: center; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .12s; }
.qr-box:hover, .qr-box:focus-visible, .qr-box.drag { outline-color: var(--signal); }
.qr-box.drag { cursor: grabbing; box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
.qr-box svg { width: 100%; display: block; pointer-events: none; }
.qr-box .qr-lbl { color: var(--ink); text-align: center; line-height: 1.15; padding: 0 .3em .4em; font-weight: 500; max-width: 100%; overflow: hidden; pointer-events: none; }
.qr-guide { position: absolute; background: var(--signal); display: none; z-index: 4; pointer-events: none; }
.qr-guide.v { top: 0; bottom: 0; width: 1px; left: 50%; } .qr-guide.h { left: 0; right: 0; height: 1px; top: 50%; }
.qr-stage.dragging .qr-guide.on { display: block; }
.cp-paper, .cp-browser { position: relative; }   /* le QR code (QrBadge) se place sur ces aperçus 16:9 comme sur les autres */
/* QR code affiché par-dessus un aperçu (QrBadge) : 11 cqw = 11 % de sa propre largeur pour le texte, comme le player */
.qr-badge { position: absolute; z-index: 6; container-type: inline-size; background: #fff; display: flex; flex-direction: column; align-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); pointer-events: none; }
.qr-badge svg { width: 100%; display: block; }
.qr-badge .qr-lbl { font-size: 11cqw; color: var(--ink); text-align: center; line-height: 1.15; padding: 0 .3em .4em; font-weight: 500; max-width: 100%; overflow: hidden; }
.qr-badge.mini { box-shadow: none; }
/* Ligne de la liste de lecture : nombre de scans, sur l'indicateur du type de contenu */
.item-qr { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 0; border-radius: 99px; background: var(--ok-bg); color: var(--ok-ink); font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer; }
.item-qr b { font-family: var(--mono); font-weight: 500; }
.item-qr:hover { background: color-mix(in srgb, var(--ok-bg) 85%, var(--ok)); }
.item-row .dur-cell { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
@media (max-width: 640px) { .item-row .dur-cell { justify-content: flex-start; } }
/* message de résultat (recherche, import, test, erreur) : bandeau collé en haut de la fenêtre, visible sans défilement */
.ci-notice { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 12px 10px 14px; border: 1px solid; border-radius: var(--radius); font-size: 14px; font-weight: 500; box-shadow: 0 4px 14px rgba(11, 31, 58, .12); }
.ci-notice > span { flex: 1; min-width: 0; }
.ci-notice.ok { background: var(--ok-bg); border-color: #9FD1B5; color: var(--ok-ink); }
.ci-notice.bad { background: var(--danger-bg); border-color: #F0B3AE; color: var(--danger-ink); }
.ci-notice.warn { background: var(--warn-bg); border-color: #E9CF9B; color: var(--warn-ink); }
.ci-notice.info { background: #E4EEF8; border-color: #B9D2EC; color: #1F5C93; }
.ci-notice-x { display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: none; color: inherit; cursor: pointer; opacity: .7; }
.ci-notice-x:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.app-modal .ci-notice { margin-top: -4px; }
.ci-notice + .ci-src { margin-top: 0; }
.ci .dw-field input[type=number] { width: 100%; }

/* nombre avec unité */
.unit { position: relative; }
.unit input { padding-right: 84px; }
.unit::after { content: attr(data-u); position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }

/* choix côte à côte (select « segmented ») */
.cseg { display: flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: #fff; }
.cseg label { flex: 1; position: relative; margin: 0; }
.cseg input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.cseg span { display: block; text-align: center; padding: 8px 6px; font-size: 13.5px; color: var(--muted); border-left: 1px solid var(--line-2); }
.cseg label:first-child span { border-left: 0; }
.cseg input:checked + span { background: var(--brand); color: #fff; }
.cseg input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: -2px; }

/* barre de choix de fichiers (ligne « source ») */
.ci-pick { display: flex; gap: 10px; align-items: center; }
.ci-pick-sum { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-pick-sum b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.ci-pick > .btn { flex: none; }
.mf-manage { margin-top: 10px; }
.mf-manage summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.mf-manage .mf-list { margin-top: 8px; max-height: 220px; overflow-y: auto; }

/* aperçu */
.cp { display: grid; gap: 10px; }
.cp-stage { position: relative; aspect-ratio: 16/9; background: #0b1f3a; border-radius: var(--radius); overflow: hidden; }
.cp-stage img, .cp-stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.cp-empty { aspect-ratio: 16/9; display: grid; place-content: center; justify-items: center; gap: 4px; text-align: center; padding: 12px; border: 2px dashed var(--line-2); border-radius: var(--radius); background: var(--bg); color: var(--muted); font-size: 14px; }
.cp-empty b { color: var(--ink); font-weight: 500; }
.cp-info { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.cp-info b { color: var(--ink); font-weight: 500; font-size: 14px; }
.cp-pill { display: inline-block; justify-self: start; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; }
.cp-pill.ok { background: #E1F0E8; color: #155A38; }
.cp-pill.warn { background: #FBF0DC; color: #7A4F12; }
.cp-pill.bad { background: #FBE4E4; color: #8A1F1F; }
.cp-paper { aspect-ratio: 16/9; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; box-shadow: inset 0 0 0 4px var(--bg); }
.cp-paper h4 { margin: 0 0 6px; font-size: 14px; }
.cp-day { margin-top: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cp-row { display: flex; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12px; }
.cp-row em { flex: none; width: 52px; font-style: normal; font-weight: 600; color: var(--signal); }
.cp-row small { display: block; color: var(--muted); font-size: 11px; }
.cp-browser { aspect-ratio: 16/9; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; }
/* Aperçu Facebook : mur de publications, photo en haut de chaque carte (même cadre 16:9 que les autres aperçus) */
.cp-fb { position: relative; aspect-ratio: 16/9; background: #0b1f3a; border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; overflow: hidden; }
.cp-fb-h { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 12px; font-weight: 500; }
.cp-fb-h b { width: 18px; height: 18px; border-radius: 4px; background: #1877F2; display: grid; place-items: center; font-size: 12px; line-height: 1; }
.cp-fb-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cp-fb-post { background: #fff; color: #0b1f3a; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.cp-fb-post img { flex: 1; min-height: 0; width: 100%; object-fit: cover; display: block; }
.cp-fb-t { padding: 4px 6px; font-size: 10px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.cp-fb-post:not(:has(img)) .cp-fb-t { flex: 1; font-size: 11px; -webkit-line-clamp: 4; }
.cp-url { padding: 5px 10px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-pg { padding: 16px; display: grid; gap: 8px; }
.cp-pg i { height: 10px; background: var(--line); border-radius: 4px; }
.cp-pg i:first-child { height: 70px; background: linear-gradient(135deg, #1d3a63, var(--signal)); border-radius: 6px; }
.car-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); pointer-events: none; }
.car-play::before { content: ""; position: absolute; left: 18px; top: 13px; border-left: 14px solid var(--ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }

/* carrousel 3D : affichage standard dès qu'il y a plus d'un élément */
.car-view { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); background: radial-gradient(ellipse at center, #1a3355, #0b1f3a 75%); perspective: 900px; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; outline-offset: 2px; }
.car-view.drag { cursor: grabbing; }
.car-item { position: absolute; top: 50%; left: 50%; width: 58%; aspect-ratio: 16/9; margin: calc(58% * 9 / 16 / -2) 0 0 -29%; border: 2px solid rgba(255,255,255,.18); border-radius: var(--radius); background: #0b1f3a; overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.45); transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s, filter .45s; cursor: pointer; }
.car-item.on { border-color: #fff; }
.car-item img, .car-item video { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.car-item em { position: absolute; left: 6px; top: 6px; z-index: 2; font-style: normal; font-size: 11px; background: rgba(0,0,0,.65); color: #fff; border-radius: 3px; padding: 0 6px; }
.car-item .car-play { width: 36px; height: 36px; }
.car-item .car-play::before { left: 14px; top: 10px; border-left-width: 11px; border-top-width: 8px; border-bottom-width: 8px; }
.car-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 99; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; }
.car-nav.p { left: 8px; } .car-nav.n { right: 8px; }
.car-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.car-foot .dots { display: flex; gap: 6px; }
.car-foot .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); cursor: pointer; }
.car-foot .dots i.on { background: var(--signal); }
.car-mode { font: inherit; font-size: 12.5px; color: var(--muted); background: none; border: 1px solid var(--line-2); border-radius: var(--radius); padding: 2px 10px; cursor: pointer; }
.car-mode:hover { color: var(--ink); border-color: var(--muted); }
.car.flat .car-view { perspective: none; aspect-ratio: auto; background: var(--bg); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; max-height: 260px; overflow-y: auto; cursor: default; }
.car.flat .car-item { position: relative; top: 0; left: 0; width: auto; margin: 0; box-shadow: none; }

.modal.app-modal.ci-adv { z-index: 111; width: min(460px, calc(100vw - 32px)); }
.ci-adv .dw { max-width: none; gap: 18px; }

@media (max-width: 720px) {
  .ci-cols { grid-template-columns: 1fr; }
  .ci-src-row { flex-wrap: wrap; }
  .ci-src-row > .btn { width: 100%; margin-top: 0; }
}
/* Fenêtre de contenu : seule la colonne de configuration défile, l'aperçu reste visible */
@media (min-width: 721px) {
  .modal.app-modal.ci-modal { height: min(720px, calc(100vh - 48px)); }
  .modal.app-modal.ci-modal .modal-body { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
  .modal.app-modal.ci-modal .modal-body > .ci { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .modal.app-modal.ci-modal { width: min(1120px, calc(100vw - 32px)); }
  .modal.app-modal.ci-modal .ci-cols { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .modal.app-modal.ci-modal .ci-cols:not(.one) { grid-template-columns: minmax(0, 1fr) 320px; }
  .modal.app-modal.ci-modal .ci-conf { min-height: 0; overflow-y: auto; padding-right: 6px; }
}
.car-view.fit-contain .car-item img, .car-view.fit-contain .car-item video { object-fit: contain; }
.cp-stage.fit-cover img, .cp-stage.fit-cover video { object-fit: cover; }

.ci-bar { align-items: center; gap: 4px; }
.ci-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ci-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ci-bar .ci-name { flex: none; max-width: 60%; }
.ci-bar .grow { flex: 1; }

/* Canva : choix du design sur une seule ligne (source compacte) */
.cv { position: relative; }
.cv-chip { position: absolute; right: 0; top: -26px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.cv-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1E8E5A; }
.cv-line { display: flex; gap: 10px; align-items: center; }
.cv-line > .ci-pick-sum { flex: 1; min-width: 0; padding: 4px 6px 4px 12px; }
.cv-pick .grow { flex: 1; }
.cv-pick .btn { flex: none; }
.cv-line > .cseg { flex: none; }
.cv-line > .cseg span { padding: 9px 14px; white-space: nowrap; }
@media (max-width: 720px) { .cv-line { flex-wrap: wrap; } .cv-line > .cseg { width: 100%; } }
/* Éditeur d'écran épuré (voir DEV-POC.md §31) : widgets en section, menu « Ajouter », aide courte */
.se-hint { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.se-info { width: 18px; height: 18px; border: 1px solid var(--line-2); border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-style: normal; color: var(--muted); cursor: help; }
.wg-side .se-wsec { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.se-wtop { display: flex; align-items: center; justify-content: space-between; }
.se-add { position: relative; }
.se-add-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 120; width: 280px; max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(11,31,58,.2); padding: 6px; display: grid; gap: 2px; }
.se-add-menu small { padding: 4px 10px 6px; }
.se-add-menu input { margin: 0 4px 6px; width: calc(100% - 8px); }
.se-add-item { display: flex; align-items: center; gap: 10px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; }
.se-add-item:hover { background: var(--bg); }
.ci-adv .fmt { display: grid; gap: 16px; }
.ci-adv .mirror-opts { margin-top: 16px; }
.modal.app-modal.wall-dlg { width: min(900px, calc(100vw - 32px)); }
.wall-dlg .ci-conf .wall-shapes { margin: 0; }

/* Mur : une colonne, sans défilement (largeur bornée par la fenêtre ET par une hauteur maximale) */
.modal.app-modal.wall-dlg { width: min(620px, calc(100vw - 32px)); }
.wall-dlg .modal-body { display: grid; gap: 14px; }
.wall-opts { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wall-opts .wall-note { margin: 0; }
.wall-dlg .wall-shapes { margin: 0; }
.wall-stage { display: grid; place-items: center; padding: 12px; border-radius: var(--radius); }
.wall-stage .wall-grid { gap: 5px; width: min(100%, calc(230px * var(--ar))); aspect-ratio: var(--ar); }
.wall-stage .wall-cell { aspect-ratio: auto; min-width: 0; }
/* reflet du contenu : la vignette de la liste du mur, découpée à la place de chaque écran ; noms lisibles par-dessus */
.wall-cell.has-img { background: #23395A; }
.wall-cell.has-img:hover { background: #23395A; filter: brightness(1.12); }
.wall-cell.has-img b, .wall-cell.has-img small, .wall-cell.has-img .n { position: relative; z-index: 1; padding: 1px 8px; border-radius: 999px; background: rgba(11, 31, 58, .78); opacity: 1; }
.wall-cell.has-img .n { position: absolute; padding: 0 6px; }

/* ---------- Écrans : carte à plat (vue cartes uniquement ; la vue liste garde .scr-card) ----------
   Aperçu en haut (case, menu, état, « À publier » posés dessus ; Simuler au survol de l'aperçu),
   dessous : nom, appareil, puces, liste de lecture déroulante + Aperçu / Pause en icônes. Écran et mur : même taille. */
.pl-grid .gc { overflow: visible; }
.gc.picked { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.gc-top { position: relative; }
.gc-stage { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; container-type: size; overflow: hidden; background: #0E1726; border-radius: calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0; }
.gc-mon { box-sizing: border-box; width: min(84cqw, calc(76cqh * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border: 3px solid #2E3B52; border-radius: 4px; overflow: hidden; }
.gc-mon.portrait { width: auto; height: 82cqh; aspect-ratio: 9 / 16; }
.gc-mon .sc-zones { width: 100%; height: 100%; }
.gc-mon.portrait .sc-pause-art { font-size: 9px; } .gc-mon.portrait .sc-pause-art b { font-size: 15px; }
.gc-frame { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); gap: 3px; padding: 3px; box-sizing: border-box; width: min(90cqw, calc(76cqh * var(--ar))); aspect-ratio: var(--ar); background: #2E3B52; border-radius: 4px; }
.gc-frame { z-index: 2; pointer-events: none; }
.gc-tile:not(.empty):hover, .gc-tile:not(.empty):focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, .14); z-index: 1; }
.gc-tile.empty:hover { box-shadow: inset 0 0 0 1px var(--signal); }
.gc-mon { position: relative; }
.gc-mon::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px var(--signal); opacity: 0; pointer-events: none; transition: opacity .12s; }
.gc-stage:hover .gc-mon::after { opacity: 1; }
.gc-tile { pointer-events: auto; padding: 0; border: 0; font: inherit; cursor: pointer; position: relative; min-height: 0; overflow: hidden; border-radius: 2px; background: #23395A; color: #fff; }
.gc-tile.empty { background: transparent; box-shadow: inset 0 0 0 1px #C8372D; }
.gc-tile.off { box-shadow: inset 0 0 0 1px #C8372D; }
.gc-tn { position: absolute; top: 3px; left: 4px; z-index: 1; font: 500 10px/1 var(--mono); text-shadow: 0 0 3px #000; }
.gc-toff { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 10px; font-weight: 500; background: rgba(14, 23, 38, .55); }
.gc.is-off .gc-mon, .gc.is-off .gc-frame { filter: grayscale(1) brightness(.6); }
.gc-hit { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.gc-pill { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 3px 10px; border-radius: 999px; background: rgba(14, 23, 38, .88); color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.gc-pills-r { position: absolute; right: 10px; bottom: 10px; display: flex; justify-content: flex-end; gap: 4px; max-width: calc(100% - 130px); }
.gc-pills-r .gc-pill { position: static; flex: 0 1 auto; min-width: 0; max-width: none; }
.gc-pill.dl.ok .gc-d { background: #3FBF7F; } .gc-pill.dl.wip .gc-d { background: #6FB1E8; } .gc-pill.dl.late .gc-d { background: #E0A23A; }
.gc-pill.warn { background: var(--warn-bg); color: var(--warn-ink); }
.gc-d { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #9AAABD; }
.gc-d.ok { background: #3FBF7F; } .gc-d.warn { background: #E0A23A; } .gc-d.bad { background: #E0554C; }
.gc-top > .sc-check { position: absolute; z-index: 3; top: 10px; left: 10px; }
.gc-top > .kebab { position: absolute; z-index: 4; top: 6px; right: 6px; margin: 0; }
.gc-top > .kebab .kebab-btn { width: 28px; height: 28px; background: rgba(255, 255, 255, .94); color: var(--ink); }
.gc-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.gc-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.gc .gc-nm { min-width: 0; font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-ico { display: inline-flex; flex: none; color: var(--muted); }
.gc-sub { min-height: 18px; margin-top: 2px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-sub b { font-weight: 500; color: var(--ink); }
.gc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 24px; margin-top: 8px; }
.gc-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 0; border-radius: 999px; background: var(--row); color: var(--muted); font: inherit; font-size: 12px; white-space: nowrap; }
.gc-chip.sync { background: #E4EEF8; color: #1F5C93; }
.gc-chip.dl.ok { background: var(--ok-bg); color: var(--ok-ink); } .gc-chip.dl.ok .gc-d { background: var(--ok); }
.gc-chip.dl.wip { background: #E4EEF8; color: #1F5C93; } .gc-chip.dl.wip .gc-d { background: var(--signal); }
.gc-chip.dl.late { background: var(--warn-bg); color: var(--warn-ink); } .gc-chip.dl.late .gc-d { background: var(--warn); }
.gc-chip.btn-chip { cursor: pointer; }
.gc-chip.btn-chip:hover { background: var(--line); color: var(--ink); }
.gc-chip .sc-dot { width: 8px; height: 8px; }
.gc-anchor { position: relative; }
.kebab-menu.gc-pop { left: 0; right: auto; min-width: 270px; max-width: min(340px, 80vw); }
.kebab-menu .gc-mrow { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; }
.kebab-menu .gc-mrow.off .gc-mname b { color: var(--muted); }
.gc-mname { display: grid; min-width: 0; }
.gc-mname b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-mname small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-mst { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.gc-plrow { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; }
.gc-sel { position: relative; flex: 1; min-width: 0; }
.gc-sel > .ico-svg:first-child { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; z-index: 1; }
.gc-sel select, .gc-zbtn { width: 100%; height: 36px; padding: 0 28px 0 30px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; -webkit-appearance: none; appearance: none; }
.gc-sel select:hover, .gc-zbtn:hover { border-color: var(--muted); }
.gc-zbtn .zc { color: var(--muted); }
.gc-chev { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--muted); pointer-events: none; }
.gc-selro { display: block; height: 36px; padding: 0 10px 0 30px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); font-size: 13.5px; line-height: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kebab-menu.gc-zpop { left: 0; right: 0; min-width: 0; max-width: none; padding: 6px; gap: 6px; }
.gc-zrow { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); }
.gc-zrow b { font-weight: 500; }
.gc-zrow select { height: 32px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink); font: inherit; font-size: 13px; min-width: 0; }
.gc-live { flex: none; padding: 0; border: 0; gap: 4px; }
.sc-live.gc-live .act { flex: none; width: 34px; height: 34px; padding: 0; overflow: visible; }
.gc-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; }
/* carte d'intégration épurée : icône, nom, usage ; compte à gauche, Gérer et interrupteur à droite */
.cat-card.compact .cat-top { padding: 16px 16px 0; align-items: center; }
.cat-card.compact .cat-top .app-ico { width: 38px; height: 38px; }
.cat-card.compact .cat-id small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-card.compact .cat-foot { background: none; border-top: 0; min-height: 0; padding: 14px 16px 14px; }
.cat-card.compact .cat-detail { padding: 0; margin: 0; flex: 1; }
.cat-card.compact .cat-actions { margin-left: auto; }
.cat-card.compact .cat-desc { padding: 10px 16px 0; }
.cat-card.compact .cat-desc { font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* comptes connectés : cartes en 2 colonnes (1 sur mobile) */
.acc-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-items: stretch; }
.acc-card { display: flex; flex-direction: column; }
.acc-head { padding: 16px 12px 12px 18px; }
.acc-id .acc-user { display: flex; align-items: center; gap: 7px; }
.acc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ok); }
.acc-dot.mise-a-jour { background: var(--warn); }
.acc-dot.hors-ligne { background: var(--danger-ink); }
.acc-card .acc-alert { margin: 0 14px 8px; border: 0; border-radius: var(--radius); padding: 8px 12px; font-size: 13px; }
.acc-uses { flex: 1; padding: 6px 18px 4px; border-top: 1px solid var(--row); }
.acc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 10px 18px 14px; color: var(--muted); font-size: 12px; }
.acc-perms { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.acc-perms .acc-perm { min-height: 0; font-size: 12px; gap: 4px; }
/* carte widget épurée : aperçu de hauteur fixe (même taille partout), interrupteur à côté du nom */
.cat-card.compact .cat-pv { aspect-ratio: auto; height: 96px; margin: 10px 10px 0; }
.cat-card.compact .cat-pv .cat-pv-clock, .cat-card.compact .cat-pv .cat-pv-weather { top: 10px; }
.cat-card.compact .cat-pv .cat-pv-band { white-space: normal; line-height: 1.3; }
.cat-card.compact.off .cat-pv { opacity: .55; filter: saturate(.3); }
.cat-card.compact .cat-pv ~ .cat-desc { padding-bottom: 14px; }
/* l'exemple reste dans l'écran simulé : le bandeau est une barre translucide dans la zone noire, pas un aplat blanc plein bord */
.cat-card.compact .cat-pv { height: 110px; flex: none; }
.cat-card.compact .cat-pv .cat-pv-band { left: 8%; right: 8%; bottom: 12%; padding: 5px 10px; background: rgba(255,255,255,.14); color: #fff; border: 0; border-left: 2px solid var(--signal); border-radius: 3px; text-overflow: ellipsis; }
/* durée de la liste de lecture : en haut à droite de la vignette (vue cartes) ; dans la ligne d'infos en vue liste */
.pl-dur { position: absolute; right: 10px; top: 10px; font-size: 12px; background: rgba(11,31,58,.85); color: #fff; padding: 2px 8px; border-radius: var(--radius); }
.pl-grid.list .pl-dur { display: none; }
.pl-grid:not(.list) .pl-meta-dur { display: none; }

/* Mise en veille : grille 7 jours × 24 heures (SleepGrid) et sa légende */
.sl-grid { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; user-select: none; }
.sl-h { font-size: 10px; color: var(--muted); text-align: center; }
.sl-d { font-size: 12px; color: var(--muted); display: flex; align-items: center; }
.sl-c { height: 20px; padding: 0; border-radius: 3px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; }
.sl-c:hover { border-color: var(--line-2); }
.sl-c.on { background: var(--brand); border-color: var(--brand); }
.sl-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.sl-legend .linklike { padding: 4px 8px; font-size: 13px; }
.sl-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--brand); margin-right: 4px; }.gc-d.sleep { background: #7F77DD; }
.sc-sleep-art { background: #14181F; color: #9AAABD; }
/* Luminosité et contraste : profils, semaine peinte, courbe et aperçu (DimEditor) */
.dm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .dm-cols { grid-template-columns: 1fr; } }
.dm-profs { display: flex; flex-direction: column; gap: 8px; }
.dm-prof { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; background: var(--surface, #fff); }
.dm-prof.sel { border-color: var(--signal); box-shadow: inset 2px 0 0 var(--signal); }
.dm-prof-h { display: flex; align-items: center; gap: 10px; }
.dm-prof-h .n { font-weight: 500; flex: 1; }
.dm-prof-h .v { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--muted); }
.dm-chip { width: 22px; height: 22px; border-radius: 3px; border: 1px solid var(--line-2); flex: none; }
.dm-prof-b { margin-top: 10px; }
.dm-rng { display: grid; grid-template-columns: 82px 1fr 46px; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.dm-rng output { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--ink, inherit); text-align: right; }
.dm-rng input[type=range] { width: 100%; accent-color: var(--signal); }
.dm-grid { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; user-select: none; }
.dm-day { cursor: pointer; }
.dm-day.sel { color: var(--ink, inherit); font-weight: 500; }
.dm-c { height: 22px; padding: 0; border-radius: 2px; border: 1px solid rgba(11,31,58,.12); cursor: crosshair; }
.dm-c:hover:not(.asleep) { outline: 2px solid var(--signal); outline-offset: -1px; }
.dm-c.asleep, .dm-hatch { background: repeating-linear-gradient(135deg, #fff 0 3px, #E8EDF3 3px 6px); border-color: var(--line); cursor: not-allowed; }
.dm-curve { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.dm-curve svg { width: 100%; height: 120px; display: block; }
.dm-curve .ax { font-family: "JetBrains Mono", monospace; font-size: 10px; fill: var(--muted); }
.dm-tv { background: #0B1F3A; border-radius: var(--radius); padding: 6px; }
.dm-scr { aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; position: relative; background: #fff; }
.dm-in { position: absolute; inset: 0; display: grid; grid-template-columns: 1.4fr 1fr; transition: filter .2s; }
.dm-ph { background: linear-gradient(160deg, #7FA7CF 0%, #3B6C9E 55%, #1D3F66 100%); position: relative; }
.dm-ph::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 14%; height: 34%; background: #F2D98C; clip-path: polygon(0 100%, 35% 30%, 55% 62%, 78% 10%, 100% 100%); }
.dm-tx { background: #F5F7FA; padding: 12% 10%; display: flex; flex-direction: column; gap: 8%; }
.dm-tx b { font-size: 12px; font-weight: 500; color: #0B1F3A; }
.dm-tx i { display: block; height: 5px; background: #9AAABD; border-radius: 1px; }
.dm-tx i:nth-child(4) { width: 70%; }
.dm-cap { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.dm-cap .mono { font-family: "JetBrains Mono", monospace; }
.dm-caps { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 13px; }
.dm-caps b { display: block; font-weight: 500; margin-bottom: 6px; }
.dm-caps div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.dm-caps div:last-child { border: 0; }
.dm-caps div span:first-child { color: var(--ink, inherit); }
.dm-ticks { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--muted); margin-top: 2px; }
.dm-curve svg { height: 100px; }
.modal.app-modal.sl-dlg { z-index: 111; width: min(680px, calc(100vw - 32px)); }/* boutons d icône du bandeau (luminosité, veille) : accent quand un réglage propre est actif */
.modal-x.set { color: var(--signal); }

/* ---------- Planning de diffusion ---------- */
.pn-top { margin-bottom: 14px; }
.pn-t { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pn-zones { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 10px; }
.pn-zc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); padding: 10px 14px; cursor: pointer; }
.pn-zc:hover { border-color: var(--muted); }
.pn-zc.on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pn-zc .n { font-weight: 500; display: flex; align-items: center; gap: 8px; }
.pn-zc small { display: block; color: var(--muted); font-size: 13px; }
.pn-bars { display: flex; height: 8px; gap: 1px; margin-top: 8px; border-radius: 2px; overflow: hidden; background: var(--row); }
.pn-bars i { display: block; height: 100%; background: var(--row); }
.pn-screens { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); }
.pn-screens .k { font-size: 13px; color: var(--muted); margin-right: 4px; }
.pn-chip { font: inherit; cursor: pointer; border: 1px solid var(--line-2); border-radius: 99px; padding: 3px 12px; font-size: 14px; background: #fff; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.pn-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pn-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.pn-banner { display: flex; gap: 10px; align-items: center; background: #EAF2FA; color: #245A8C; border-radius: var(--radius); padding: 9px 12px; font-size: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.pn-banner.own { background: var(--warn-bg); color: var(--warn-ink); }
.pn-lay { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.pn-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.pn-nav b { min-width: 170px; text-align: center; font-weight: 500; }
.pn-cal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); overflow: hidden; }
.pn-ch, .pn-cb { display: grid; grid-template-columns: 48px repeat(7, minmax(0, 1fr)); }
.pn-ch { background: var(--bg); border-bottom: 1px solid var(--line); }
.pn-ch div { padding: 6px 4px; text-align: center; font-size: 12.5px; color: var(--muted); border-left: 1px solid var(--line); }
.pn-ch div:first-child { border-left: 0; }
.pn-ch b { display: block; color: var(--ink); font-size: 14px; font-weight: 500; }
.pn-ch .today, .pn-ch .today b { color: var(--signal); }
.pn-cb { position: relative; }
.pn-hrs { position: relative; }
.pn-hrs span { position: absolute; right: 6px; font-size: 10.5px; color: var(--muted); transform: translateY(-50%); }
.pn-hrs span:first-child { transform: none; }
.pn-col { position: relative; border-left: 1px solid var(--line); cursor: cell; background-image: repeating-linear-gradient(to bottom, transparent 0 33px, var(--line) 33px 34px); background-size: 100% 34px; }
.pn-col.ro { cursor: default; }
.pn-ev { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 3px 6px; font-size: 11.5px; line-height: 1.25; color: #fff; overflow: hidden; cursor: pointer; border: 2px solid transparent; }
.pn-ev b { display: block; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-ev small { opacity: .9; font-size: 10.5px; }
.pn-ev.sel { border-color: var(--ink); }
.pn-ev.inh { opacity: .55; cursor: default; }
.pn-ev.ghost { background: repeating-linear-gradient(135deg, #fff 0 6px, #F1F4F8 6px 12px); color: var(--muted); border: 1px dashed var(--line-2); cursor: default; pointer-events: none; }
.pn-ev.c1, .pn-seg.c1, .pn-legend i.c1, .pn-stage i.c1 { background: #3B82C4; }
.pn-ev.c2, .pn-seg.c2, .pn-legend i.c2, .pn-stage i.c2 { background: #1E8E5A; }
.pn-ev.c3, .pn-seg.c3, .pn-legend i.c3, .pn-stage i.c3 { background: #B7791F; }
.pn-ev.c4, .pn-seg.c4, .pn-legend i.c4, .pn-stage i.c4 { background: #7B5EA7; }
.pn-ev.c5, .pn-seg.c5, .pn-legend i.c5, .pn-stage i.c5 { background: #D1568A; }
.pn-ev.c6, .pn-seg.c6, .pn-legend i.c6, .pn-stage i.c6 { background: #2F8F9D; }
.pn-now { position: absolute; left: 48px; right: 0; border-top: 2px solid var(--danger); z-index: 5; pointer-events: none; }
.pn-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); }
.pn-legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.pn-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pn-legend i.hatch, .pn-def i.hatch { background: repeating-linear-gradient(135deg, #fff 0 3px, #E2E8EF 3px 6px); border: 1px dashed var(--line-2); }
.pn-side { display: grid; gap: 14px; }
.pn-side .t { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pn-f { margin-bottom: 12px; }
.pn-f .lbl { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 5px; }
.pn-f select, .pn-f input[type=time], .pn-f input[type=date], .pn-pv select, .pn-pv input[type=time] { width: 100%; }
.pn-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pn-row2 > * { min-width: 0; }
.pn-days { display: flex; gap: 4px; }
.pn-days button { flex: 1; font: inherit; font-size: 13px; padding: 6px 0; border: 1px solid var(--line-2); border-radius: 4px; background: #fff; color: var(--muted); cursor: pointer; }
.pn-days button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pn-chk { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 5px; }
.pn-apply { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: var(--bg); }
.pn-warn { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius); padding: 8px 10px; font-size: 13px; margin-bottom: 10px; }
.pn-act { display: flex; gap: 8px; justify-content: space-between; margin-top: 12px; }
.pn-stage { aspect-ratio: 16 / 9; background: var(--brand); border-radius: 4px; display: grid; place-items: center; position: relative; color: #fff; padding: 10px; margin-top: 10px; }
.pn-stage .lab { position: absolute; left: 8px; top: 6px; font-size: 10.5px; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.pn-stage .pl { display: inline-flex; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 99px; padding: 7px 14px; font-weight: 500; font-size: 14px; }
.pn-stage .pl i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.pn-stage .why { position: absolute; left: 8px; right: 8px; bottom: 5px; font-size: 11px; color: rgba(255,255,255,.72); }
.pn-range { width: 100%; margin: 10px 0 2px; accent-color: var(--brand); }
.pn-tl { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.pn-def { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 4px; }
.pn-def i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.pn-def small { display: block; color: var(--muted); font-size: 12px; }
.pn-day { padding: 0; overflow: hidden; }
.pn-dr { display: grid; grid-template-columns: 210px minmax(0, 1fr); border-bottom: 1px solid var(--line); cursor: pointer; }
.pn-dr:last-child { border-bottom: 0; }
.pn-dr:hover:not(.pn-dh) { background: var(--bg); }
.pn-dh { cursor: default; background: var(--bg); }
.pn-axis { position: relative; height: 24px; }
.pn-axis span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); top: 4px; }
.pn-dl { padding: 10px 12px; font-size: 14px; border-right: 1px solid var(--line); }
.pn-dl small { display: block; color: var(--muted); font-size: 12px; }
.pn-dr.sub .pn-dl { padding-left: 30px; }
.pn-dt { position: relative; min-height: 56px; }
.pn-seg { position: absolute; top: 8px; bottom: 8px; border-radius: 6px; color: #fff; font-size: 12px; padding: 3px 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pn-seg.def { background: repeating-linear-gradient(135deg, #fff 0 6px, #F1F4F8 6px 12px); border: 1px dashed var(--line-2); color: var(--muted); }
@media (max-width: 1180px) { .pn-lay { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .pn-dr { grid-template-columns: 110px minmax(0, 1fr); } .pn-dl { padding: 8px; } }
.pn-axis span:first-child { transform: none; left: 4px !important; }
.pn-axis span:last-child { transform: translateX(-100%); left: calc(100% - 4px) !important; }
.modal.app-modal.pn-modal { width: min(520px, calc(100vw - 32px)); }
.pn-modal .modal-body .pn-f:last-child { margin-bottom: 0; }
.pn-foot .grow { flex: 1; }

/* ---------- Planning : calendrier d'abord (v9) ---------- */
.pn-head { margin-bottom: 12px; }
.pn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pn-row3 .pn-nav { margin: 0; }
.pn-view { margin-left: auto; flex-wrap: nowrap; gap: 0; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: #fff; }
.pn-view button { border: 0; border-radius: 0; border-left: 1px solid var(--line-2); padding: 6px 12px; box-shadow: none; }
.pn-view button:first-child { border-left: 0; }
.pn-view button.on { background: var(--brand); color: #fff; box-shadow: none; }
.pn-view button:hover { border-color: var(--line-2); }
.pn-target { position: relative; }
.pn-tbtn { font: inherit; cursor: pointer; background: #fff; border: 1px solid var(--ink); box-shadow: inset 0 0 0 1px var(--ink); border-radius: var(--radius); padding: 7px 12px; display: inline-flex; gap: 8px; align-items: center; min-width: 230px; }
.pn-tbtn small { color: var(--muted); margin-left: auto; font-size: 12.5px; }
.pn-bk { position: fixed; inset: 0; z-index: 100; background: transparent; }
.pn-menu { position: absolute; z-index: 101; top: calc(100% + 4px); left: 0; width: 360px; max-height: 60vh; overflow: auto; background: #fff; border: 1px solid var(--line-2); border-radius: var(--card-radius); box-shadow: 0 12px 32px rgba(11,31,58,.18); padding: 6px; }
.pn-menu .g { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 4px; }
.pn-menu .o { font: inherit; width: 100%; text-align: left; border: 0; background: none; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.pn-menu .o:hover { background: var(--bg); }
.pn-menu .o.sel { background: var(--brand-tint); font-weight: 500; }
.pn-menu .o.sub { padding-left: 28px; }
.pn-menu .o small { margin-left: auto; color: var(--muted); font-size: 12px; }
.pn-menu .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); flex: none; }
.pn-banner { padding: 6px 12px; margin-bottom: 10px; }
.pn-fill { height: max(480px, calc(100vh - 270px)); display: flex; flex-direction: column; }
.pn-fill .pn-ch { flex: none; }
.pn-fill .pn-cb { flex: 1; min-height: 0; }
.pn-fill .pn-legend { flex: none; align-items: center; }
.pn-col { display: flex; flex-direction: column; cursor: default; background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% calc(100% / var(--rows)); }
.pn-cell { flex: 1; cursor: cell; }
.pn-col:not(.ro) .pn-cell:hover { background: rgba(59,130,196,.08); }
.pn-dflt { margin-left: auto; }
.pn-dflt .btn { padding: 0 4px; }
.pn-dayrows { flex: 1; min-height: 0; overflow: auto; }
.pn-drawer { position: fixed; z-index: 102; top: 0; right: 0; bottom: 0; width: min(360px, 100vw); background: #fff; border-left: 1px solid var(--line-2); box-shadow: -12px 0 32px rgba(11,31,58,.14); padding: 18px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.pn-dh2 { display: flex; align-items: center; gap: 8px; }
.pn-dh2 h3 { flex: 1; font-size: 17px; margin: 0; }
.pn-drawer select, .pn-drawer input[type=time] { width: 100%; }
.pn-drawer .pn-stage { margin-top: 0; }
@media (max-width: 700px) { .pn-view { margin-left: 0; } .pn-tbtn { min-width: 0; width: 100%; } .pn-target { width: 100%; } }
.btn.link { background: none; border-color: transparent; color: var(--signal); }
.btn.link:hover { background: var(--bg); border-color: transparent; }

.pn-fill { height: max(560px, calc(100vh - 270px)); }
.pn-sleep { position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(11,31,58,.10) 0 5px, rgba(11,31,58,.04) 5px 10px); border-top: 1px solid rgba(11,31,58,.18); border-bottom: 1px solid rgba(11,31,58,.18); }
.pn-legend i.sleep { background: repeating-linear-gradient(135deg, rgba(11,31,58,.3) 0 3px, rgba(11,31,58,.12) 3px 6px); }
.pn-hrs span { font-size: 10px; }
.pn-ev small { color: inherit; opacity: 1; }

/* Document PDF (champ « pdf » : ligne source) */
.pdf-ico { flex: none; width: 22px; height: 26px; border-radius: 2px; background: #C0392B; color: #fff; font-size: 8px; font-weight: 700; display: grid; place-items: end center; padding-bottom: 3px; }
/* Google Slides et Google Docs (champ « gfile » : ligne source) */
.gf-ico { flex: none; width: 20px; height: 26px; border-radius: 2px; background: var(--gc, #4285F4); position: relative; }
.gf-ico::after { content: ""; position: absolute; left: 4px; right: 4px; top: 9px; bottom: 6px; border: 1.5px solid #fff; border-radius: 1px; }
.gf-warn { padding: 8px 12px; border-radius: var(--radius); background: #FFF1DB; color: #7A4A00; font-size: 13.5px; }
.gf-warn .linklike { color: inherit; font-weight: 500; text-decoration: underline; }
.file-btn.disabled { opacity: .45; pointer-events: none; }
.dw-field label.btn.file-btn { display: inline-flex; margin: 0; font-size: inherit; }
.dw-field label.btn.file-btn:not(.ghost) { color: #fff; }

/* ---------- Réglages : navigation latérale groupée, cartes à lignes « libellé / contrôle », barre d'enregistrement ---------- */
.rg-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 34px; align-items: start; }
.rg-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.rg-nav h4 { margin: 14px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rg-nav h4:first-child { margin-top: 0; }
.rg-nav button { background: none; border: 0; text-align: left; font: inherit; padding: 8px 10px; border-radius: var(--radius); color: var(--muted); cursor: pointer; display: flex; gap: 9px; align-items: center; }
.rg-nav button:hover { background: var(--row); }
.rg-nav button.on { background: var(--brand-tint); color: var(--ink); font-weight: 500; box-shadow: inset 2px 0 0 var(--brand); }
.rg-nav button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.rg-badge { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; background: #FBF0DC; color: #7A4F12; border-radius: var(--radius); padding: 0 6px; }
.rg-main { min-width: 0; }
.rg-ph { margin-bottom: 18px; }
.rg-ph h2 { font-size: 20px; }
.rg-ph p { color: var(--muted); font-size: 14px; }
.rg-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 18px; }
.rg-card > header { padding: 14px 18px; border-bottom: 1px solid var(--row); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rg-card > header h3 { font-size: 16px; margin: 0; }
.rg-card > header small { color: var(--muted); font-size: 13px; }
.rg-card .sv-row { padding: 14px 18px; align-items: center; }
.rg-card .sv-row:last-child { border-bottom: 0; }
.rg-body { padding: 14px 18px; }
.rg-card > header + .rg-body { padding-top: 16px; }
.rg-card .sv-row + .rg-body { border-top: 1px solid var(--row); }
.rg-in { border: 1px solid var(--line-2); border-radius: var(--radius); padding: 7px 10px; background: #fff; min-width: 220px; font: inherit; color: inherit; }
.rg-in.short { min-width: 0; width: 150px; }
.rg-in:disabled { opacity: .55; }
.rg-sec { margin-bottom: 24px; }
.rg-sec h5 { margin: 0 0 10px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; }
.rg-tiles { display: grid; gap: 14px; }
.rg-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rg-tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rg-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; color: inherit; display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.rg-tile:hover { border-color: var(--line-2); text-decoration: none; }
.rg-tile .top { color: var(--muted); font-size: 13px; }
.rg-tile .n { font-size: 30px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rg-tile .n small { font-size: 14px; color: var(--muted); font-weight: 400; }
.rg-tile .d { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-tile .go { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--row); font-size: 13px; color: var(--signal); }
.rg-media { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.rg-media .big { grid-column: 1 / -1; }
.rg-media .lb { color: var(--muted); font-size: 13px; }
.rg-media .n { font-size: 30px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.rg-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--row); margin: 6px 0 8px; }
.rg-bar i { display: block; }
.rg-legend { display: flex; gap: 18px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.rg-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; background: var(--c); }
.rg-legend b { color: var(--ink); }
.rg-legend a { margin-left: auto; }
.rg-savebar { position: sticky; bottom: 0; z-index: 20; margin: 24px -40px -60px; background: #fff; border-top: 1px solid var(--line); padding: 12px 40px; display: flex; gap: 12px; align-items: center; justify-content: flex-end; box-shadow: 0 -4px 12px rgba(11,31,58,.06); }
.rg-savebar span { margin-right: auto; color: var(--muted); font-size: 14px; }
.rg-savebar span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); margin-right: 8px; }
@media (max-width: 900px) {
  .rg-layout { grid-template-columns: 1fr; gap: 18px; }
  .rg-nav { position: static; flex-direction: row; flex-wrap: wrap; } .rg-nav h4 { display: none; }
  .rg-tiles.four, .rg-tiles.three, .rg-media { grid-template-columns: 1fr 1fr; }
  .rg-savebar { margin: 24px -16px -48px; padding: 12px 16px; }
  .rg-in { min-width: 0; width: 100%; }
}

/* ---------- Source dans l'aperçu : « + » tant que rien n'est choisi, carte de choix, bouton « Changer » ---------- */
.ci-empty { aspect-ratio: 16/9; border: 2px dashed var(--line-2); border-radius: 8px; background: var(--bg); display: grid; place-items: center; text-align: center; padding: 16px; }
.ci-add { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ci-add b { font-size: 17px; font-weight: 500; }
.ci-add span { color: var(--muted); font-size: 13.5px; max-width: 340px; }
.ci-plus { width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; font-size: 36px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 4px; box-shadow: 0 6px 16px rgba(11, 31, 58, .25); transition: transform .12s; }
.ci-plus:hover { transform: scale(1.06); }
.ci-plus:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.ci-empty.open { align-content: center; }
.ci-srccard { width: min(520px, 100%); background: #fff; border-radius: 10px; padding: 16px; box-shadow: 0 8px 24px rgba(11, 31, 58, .18); text-align: left; }
.ci-srccard .ci-src-row > .btn { margin-top: 25.5px; }
.ci-srcclose { margin-top: 10px; font-size: 13px; color: var(--muted); }
.ci-prevbody { position: relative; }
.ci-prevbody[hidden] { display: none !important; }
.ci-chg { position: absolute; top: 10px; right: 10px; z-index: 8; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .95); padding: 5px 11px; font-size: 13px; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.ci-chg:hover { background: #fff; }

/* Menu « Ajouter un contenu » d'une liste de lecture : les intégrations activées, un clic ajoute le contenu à vide */
.pe-addwrap { position: relative; }
.pe-addmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 340px; max-height: min(520px, 70vh); display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 36px rgba(11, 31, 58, .22); padding: 12px; }
.pe-addlist { overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.pe-addlist h5 { margin: 10px 4px 4px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pe-addlist h5:first-child { margin-top: 2px; }
.pe-addlist button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--radius); padding: 7px 8px; font: inherit; color: inherit; cursor: pointer; }
.pe-addlist button:hover, .pe-addlist button:focus-visible { background: var(--bg); outline: none; }

/* Médiathèque : cartes moins hautes (vignette en 16/9 au lieu d'un carré) */
.lib-grid:not(.sm):not(.list) .lib-th { aspect-ratio: 16 / 9; }
.lib-grid:not(.sm):not(.list) .lib-body { padding: 8px 10px 10px 12px; }

/* Panneau du direct : onglets, carte d'affichage, pied fixe */
.lp-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.lp-tabs button { border: 0; background: none; cursor: pointer; padding: 9px 12px 10px; font: inherit; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: 7px; align-items: center; }
.lp-tabs button.on { color: var(--ink); border-color: var(--ink); }
.lp-n { font-size: 11.5px; background: var(--danger-bg); color: var(--danger-ink); border-radius: 99px; padding: 0 7px; }
.lp-body { gap: 0; }
.lp-offline { margin-bottom: 16px; }
.lp-info { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 11px; color: var(--muted); cursor: help; margin-left: 4px; }
.lp-card { border: 1px solid var(--line); border-radius: 8px; margin-top: 18px; }
.lp-card-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.lp-card-row + .lp-card-row { border-top: 1px solid var(--line); }
.lp-lbl { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: 84px; }
.lp-st { display: flex; align-items: center; gap: 8px; }
.lp-sub { color: var(--muted); font-size: 14px; }
.lp-seg { display: flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.lp-seg select { border: 0; border-right: 1px solid var(--line-2); padding: 6px 8px; background: #fff; font: inherit; font-size: 14px; color: var(--ink); }
.lp-seg .btn { border: 0; border-radius: 0; }
.lp-foot { display: flex; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: #fff; }
.lp-cf-bd { z-index: 150; }
.lp-cf { z-index: 151; width: min(420px, calc(100vw - 32px)); }
.sc-dot.mise-a-jour { background: var(--warn); }
.lp-fail { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; background: rgba(11,31,58,.88); color: #fff; font-size: 13px; }
.lp-fail b { font-size: 15px; color: #FFB4AB; }
.lp-fail span { color: #C9D5E5; max-width: 90%; }
.sim-body.solo { grid-template-columns: minmax(0, 1fr); }

/* Liste de lecture en vue liste : « Modifiée… » sous le nom, durée dans une pastille sombre à droite */
.pl-mod { display: none; }
@media (min-width: 641px) {
  .pl-grid.list .pl-lc .pl-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 16px; }
  .pl-grid.list .pl-lc .pl-title { grid-column: 1; grid-row: 1; }
  .pl-grid.list .pl-lc .pl-mod { display: block; grid-column: 1; grid-row: 2; font-size: 13px; color: var(--muted); }
  .pl-grid.list .pl-lc .pl-meta { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; gap: 10px; }
  .pl-grid.list .pl-lc .pl-modtxt { display: none; }
  .pl-grid.list .pl-lc .pl-meta-dur { display: inline-block; min-width: 56px; text-align: center; font-size: 13px; background: var(--ink); color: #fff; padding: 3px 10px; border-radius: 99px; }
}

/* Médiathèque : date sous le nom, type en icône */
.lib-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 10px; }
.lib-added { color: var(--muted); font-size: 12px; }
@media (min-width: 641px) {
  .lib-grid.list .lib-sub { display: grid; justify-content: stretch; }
  .lib-grid.list .lib-body { grid-template-columns: minmax(0, 1fr) 48px auto; }
  .lib-grid.list .lib-kind { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
}

/* Comptes connectés : vue liste (lignes pliées par défaut, chevron comme les murs d'écrans) */
.acc-count, .acc-chev { display: none; }
@media (min-width: 641px) {
  .acc-list.list { grid-template-columns: minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); }
  .acc-list.list .acc-card { border: 0; border-bottom: 1px solid var(--row); border-radius: 0; }
  .acc-list.list .acc-card:last-child { border-bottom: 0; }
  .acc-list.list .acc-card.open { background: var(--bg); }
  .acc-list.list .acc-head { cursor: pointer; min-height: 68px; padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .acc-list.list .acc-head:hover { background: var(--bg); }
  .acc-list.list .acc-count { display: block; font-size: 14px; color: var(--muted); white-space: nowrap; margin-right: 8px; }
  .acc-list.list .acc-chev { display: grid; place-items: center; width: 18px; height: 24px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
  .acc-list.list .acc-chev svg { transform: rotate(-90deg); transition: transform .12s; }
  .acc-list.list .acc-chev[aria-expanded="true"] svg { transform: none; }
  .acc-list.list .acc-card:not(.open) .acc-detail { display: none; }
  .acc-list.list .acc-detail { background: #fff; border-top: 1px solid var(--row); padding-top: 8px; }
}

/* ---------- Niveaux de droits (Membres) ---------- */
.modal.app-modal.lv-modal { width: min(940px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.lv-cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; margin-top: 16px; align-items: start; }
.lv-sec { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 14px; background: var(--surface, #fff); }
.lv-sec > h4 { margin: 0; padding: 9px 14px; background: var(--row); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.lv-sec > h4 i { font-style: normal; background: #fff; color: var(--ink); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.lv-sec > h4 span { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; }
.lv-in { padding: 6px 14px 10px; }
.lv-tree { max-height: 340px; overflow: auto; }
.lv-sub { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 2px; display: flex; align-items: center; }
.lv-sub .linklike { margin-left: auto; padding: 0; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; }
.lv-note { color: var(--muted); font-size: 12.5px; margin: 8px 0 0; }
.lv-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; }
.lv-row.lv-root { padding-bottom: 8px; border-bottom: 1px solid var(--row); margin-bottom: 4px; }
.lv-lbl { cursor: pointer; user-select: none; flex: 0 1 auto; }
.lv-cnt { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.lv-tg { width: 16px; flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 12px; text-align: center; }

.lv-n2 { margin-left: 22px; } .lv-n3 { margin-left: 46px; }
.lv-sum { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 10px 14px; margin-top: 10px; font-size: 14px; display: grid; gap: 5px; }
.lv-sum div { display: flex; gap: 10px; }
.lv-sum b { width: 120px; flex: none; color: var(--muted); font-weight: 500; }
.content.ro .page-head > .btn, .content.ro .page-head .head-actions { display: none; }
.lv-wide { margin-top: 4px; }
.lv-apps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.lv-apps > .lv-sub, .lv-apps > .lv-note { grid-column: 1 / -1; }
@media (max-width: 800px) { .lv-cols { grid-template-columns: 1fr; } .lv-sum b { width: 96px; } .lv-apps { grid-template-columns: 1fr; } }




/* Éditeur d'écran (PC) : la colonne de droite défile. Ses lignes de grille gardent la taille de leur contenu ; sinon la liste (overflow: hidden)
   rétrécit pour tenir dans la hauteur et se rogne elle-même, sans rien laisser à faire défiler. */
@media (min-width: 901px) {
  .modal.app-modal.wg-modal .wg-side { grid-auto-rows: max-content; }
}


/* Réglages d'un widget Home Assistant : fenêtre plus large, pour lire les noms d'entités */
.modal.app-modal.sm.wg-settings.wg-settings-ha { width: min(680px, calc(100vw - 32px)); }

/* Sélecteur d'entités Home Assistant (réglages des widgets) : choix en pastilles, liste à interrupteurs Linkii, défilement vertical seulement */
.hp { display: grid; gap: 8px; min-width: 0; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 99px; background: var(--brand-tint); color: var(--ink); font-size: 13px; border: 1px solid var(--line); max-width: 100%; }
.hp-chip button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 99px; }
.hp-chip button:hover { background: var(--row); color: var(--ink); }
.hp-bar { display: flex; gap: 8px; align-items: center; min-width: 0; }
.hp-search { flex: 1; min-width: 0; }
.hp-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hp-refresh { display: inline-flex; align-items: center; gap: 6px; flex: none; border: 1px solid var(--line-2); background: #fff; border-radius: var(--radius); padding: 6px 10px; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.hp-refresh:disabled { opacity: .6; cursor: default; }
.hp-list { border: 1px solid var(--line); border-radius: var(--radius); max-height: 300px; overflow-y: auto; overflow-x: hidden; background: #fff; }
.hp-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); min-width: 0; }
.hp-row:first-child { border-top: 0; }
.hp-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hp-name { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-id { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-row .switch { margin-left: auto; }
.hp-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; }
.hp-note { font-size: 12px; color: var(--muted); margin: 0; }

/* Fenêtre du compte Home Assistant (après connexion) : bandeau, onglets par type, liste lisible, pied d'actions */
.hac-acct { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.hac-who { flex: 1; min-width: 0; }
.hac-who b { display: block; font-size: 14px; color: var(--ink); }
.hac-who small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hac-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ok-ink); background: var(--ok-bg); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.hac-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.hac-pill-err { color: var(--danger-ink); background: var(--danger-bg); }
.hac-pill-err::before { background: var(--danger); }
.hac-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.hac-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 16px 0 12px; }
.hac-tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 10px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.hac-tabs button:hover { color: var(--ink); }
.hac-tabs button.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--ink); }
.hac-tabs small { background: var(--row); color: var(--muted); border-radius: 10px; padding: 0 7px; font-family: var(--mono); font-size: 11px; }
.hac-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.hac-bar input { flex: 1; min-width: 0; }
.hac-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hac-list { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; max-height: 300px; overflow-y: auto; overflow-x: hidden; }
.hac-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); min-width: 0; }
.hac-row:first-child { border-top: 0; }
.hac-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hac-name { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hac-id { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hac-unit { font-size: 11px; color: var(--signal); background: var(--brand-tint); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.hac-empty { font-size: 13px; color: var(--muted); margin: 8px 0; }
.hac-foot { display: flex; align-items: center; gap: 8px; }
.hac-spacer { flex: 1; }
.hac-warn { font-size: 13px; color: var(--muted); }

/* Aperçu des widgets Home Assistant dans l'éditeur d'écran : mêmes dimensions que le vrai widget du player (voir .widget.ha dans player/index.html),
   pour que la position choisie dans l'éditeur soit celle de l'écran. À garder identique si le widget du player change. */
.wg-ha { color: #fff; text-align: left; display: flex; flex-direction: column; align-items: stretch; gap: .5em; min-width: 22em; max-width: 34em; padding: .9em 1.1em; background: rgba(11,31,58,.78); border-radius: .6em; box-sizing: border-box; }
.wg-ha-t { font-weight: 500; font-size: 1.2em; margin-bottom: .2em; }
.wg-ha-row { display: flex; align-items: center; gap: .8em; padding: .45em 0; border-top: 1px solid rgba(255,255,255,.12); }
.wg-ha-row:first-child { border-top: 0; }
.wg-ha-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-ha-v { color: #9AAABD; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wg-ha-sw { position: relative; flex: none; width: 3.4em; height: 1.9em; border-radius: 1em; background: #3A4A60; }
.wg-ha-sw::after { content: ""; position: absolute; top: .25em; left: .25em; width: 1.4em; height: 1.4em; border-radius: 50%; background: #fff; }
.wg-ha-none { color: #9AAABD; }


/* Pastille « pouls » : écrans en ligne, cliquable vers Statistiques (mode expert, licence Base). Voir PulsePill.razor. */
.pulse { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 999px; padding: 5px 12px 5px 8px; background: #FBFCFD; color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; white-space: nowrap; transition: border-color .15s, box-shadow .15s; }
.pulse:hover { border-color: var(--signal); box-shadow: 0 0 0 3px rgba(59, 130, 196, .14); }
.pulse:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); flex: none; animation: pulse-beat 2.2s infinite; }
@keyframes pulse-beat { 0% { box-shadow: 0 0 0 0 rgba(30, 142, 90, .45); } 70% { box-shadow: 0 0 0 8px rgba(30, 142, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(30, 142, 90, 0); } }
.pulse-count { font-variant-numeric: tabular-nums; }
.pulse-count b { font-weight: 500; }
.pulse-count { color: var(--muted); }
.pulse-count b { color: var(--ink); }
.pulse-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius); padding: 1px 6px; }
.pulse-go { color: var(--signal); font-size: 13px; }
/* emplacement : barre du haut sur téléphone, colonne latérale sur ordinateur */
.top-pulse { display: none; margin-left: auto; }
.side-pulse { margin: 0 12px 14px; justify-content: flex-start; }
@media (max-width: 900px) { .top-pulse { display: inline-flex; } .side-pulse { display: none; } }
@media (max-width: 900px) { .top-pulse .pulse-go { display: none; } }
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }

/* ---------- Listes de lecture et médiathèque épurées (DEV-POC §51) : même squelette sur les deux pages ---------- */
/* en-tête : le fil d'Ariane est le titre ; une pastille dit à qui est le dossier et ce qu'on y peut */
.lx-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.lx-top h1 { font-size: 26px; line-height: 1.25; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lx-top h1 .lx-crumb { font: inherit; color: var(--muted); font-weight: 400; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 3px; }
.lx-top h1 .lx-crumb:hover { color: var(--signal); }
.lx-top h1 .lx-crumb.drop-target { outline: 2px dashed var(--signal); outline-offset: 2px; }
.lx-top h1 .lx-sl { color: var(--line-2); font-weight: 400; }
.lx-right { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 400; letter-spacing: 0; color: var(--muted); background: var(--row); border-radius: var(--radius); padding: 2px 9px; }
.lx-right.ro { background: var(--warn-bg); color: var(--warn-ink); }
.lx-top .grow { flex: 1; }
.lx-top .btns { display: flex; gap: 8px; align-items: center; }
/* bouton principal à menu (« Nouvelle liste ▾ », « Importer ▾ ») */
.lx-split { position: relative; display: inline-flex; }
.lx-split > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lx-split > .btn.lx-car { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255, 255, 255, .28); padding-left: 8px; padding-right: 8px; }
.lx-split .kebab-menu { right: 0; left: auto; min-width: 220px; }
/* ligne d'état : compte, choses à faire, conseils */
.lx-status { display: flex; gap: 6px 18px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 14px; min-height: 20px; }
.lx-status > span { display: inline-flex; gap: 6px; align-items: center; }
.lx-status .linklike { font-size: 13px; }
.lx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none; }
.lx-dot.warn { background: var(--warn); } .lx-dot.off { background: #B0BAC6; } .lx-dot.bad { background: var(--danger); }
/* barre d'outils : une ligne */
.lx-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.lx-tools .search-box { flex: 1 1 220px; max-width: 380px; margin: 0; }
.lx-tools .search-box input { padding: 7px 0; }
.lx-tools .grow { flex: 1; }
.lx-tools select { font-size: 13.5px; padding: 6px 8px; }
.lx-chip { font: inherit; font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; background: #fff; color: var(--muted); cursor: pointer; white-space: nowrap; }
.lx-chip:hover { color: var(--ink); border-color: var(--muted); }
.lx-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.lx-chip small { font-family: var(--mono); font-size: 11px; opacity: .75; }
.lx-chip.scope { background: color-mix(in srgb, var(--signal) 12%, #fff); border-color: color-mix(in srgb, var(--signal) 35%, #fff); color: #1F4E7A; }
.lx-count { font-size: 13px; color: var(--muted); }
/* dossiers : puces sur une ligne */
.lx-folders { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.lx-fchip { position: relative; display: inline-flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 5px 4px 5px 10px; font-size: 14px; cursor: pointer; max-width: 320px; }
.lx-fchip:hover { border-color: var(--line-2); }
.lx-fchip:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.lx-fchip > .ico-svg:first-child { color: var(--signal); }
.lx-fchip.priv > .ico-svg:first-child { color: var(--muted); }
.lx-fchip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-fchip small { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.lx-fchip .ic { display: inline-flex; color: var(--muted); }
.lx-fchip .kebab { margin: 0; }
.lx-fchip .kebab-btn { width: 26px; height: 26px; }
.lx-fchip .kebab-menu { right: auto; left: 0; }
.lx-fchip.drop-target { outline: 2px dashed var(--signal); background: color-mix(in srgb, var(--signal) 10%, #fff); }
.lx-fchip:has(.kebab-menu) { z-index: 42; }
/* icône Partage d'un dossier : picto + nombre de personnes, infobulle au survol ou au focus (§53) */
.share-wrap { position: relative; display: inline-flex; }
.share { font: inherit; display: inline-flex; gap: 4px; align-items: center; border: 0; background: var(--brand-tint); color: var(--ink); border-radius: 999px; padding: 0 8px 0 6px; font-size: 12.5px; line-height: 20px; cursor: default; font-variant-numeric: tabular-nums; white-space: nowrap; }
button.share { cursor: pointer; }
button.share:hover { background: var(--signal-bg); color: #1F4E7A; }
.share.lvl { background: var(--signal-bg); color: #1F4E7A; }
.share.ro { background: var(--warn-bg); color: var(--warn-ink); }
.share:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }
.share-tip { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 250px; max-width: 320px; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(11, 31, 58, .16); padding: 10px 12px; font-size: 13px; color: var(--ink); text-align: left; white-space: normal; cursor: default; }
.share-wrap:hover .share-tip, .share-wrap:focus-within .share-tip { display: grid; gap: 4px; }
.share-h { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.share-r { display: flex; gap: 8px; align-items: center; }
.share-r .grow { flex: 1; min-width: 0; }
.share-r small, .share-n { color: var(--muted); font-size: 12.5px; }
.share-n { border-top: 1px solid var(--row); padding-top: 6px; margin-top: 2px; }
.lx-fchip:has(.share-wrap:hover), .lx-fchip:has(.share-wrap:focus-within) { z-index: 43; }
/* ---------- Partage d'un dossier épuré (§56) : champ d'ajout, lignes avec Lecture/Écriture, pied avec résumé ---------- */
.modal.app-modal.sh-modal { width: min(520px, calc(100vw - 32px)); overflow: visible; }
.sh-modal .modal-head { border-radius: 12px 12px 0 0; }
.sh-modal .modal-foot { border-radius: 0 0 12px 12px; }
.sh-body { display: grid; gap: 12px; align-content: start; overflow: visible; }
.sh-add { position: relative; }
.sh-add > .ico-svg { position: absolute; left: 12px; top: 12px; color: var(--muted); pointer-events: none; }
.sh-add input { width: 100%; box-sizing: border-box; padding-left: 36px; }
.sh-dd { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(11, 31, 58, .16); }
.sh-dd h5 { margin: 0; padding: 8px 12px 4px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.sh-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.sh-opt:hover:not(:disabled) { background: var(--bg); }
.sh-opt:disabled { color: var(--muted); cursor: default; }
.sh-opt b { font-weight: 500; }
.sh-opt small, .sh-row small { color: var(--muted); font-size: 12.5px; }
.sh-none { padding: 10px 12px; color: var(--muted); font-size: 13px; }
.sh-av { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--signal-bg); color: #1F4E7A; font-size: 11.5px; font-weight: 500; }
.sh-av.lv { border-radius: 8px; background: var(--bg); color: var(--muted); }
.sh-list { display: grid; }
.sh-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--row); }
.sh-row:last-child { border-bottom: 0; }
.sh-row .grow { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sh-row b { font-weight: 500; }
.sh-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.sh-seg button { font: inherit; font-size: 13px; padding: 5px 10px; border: 0; background: #fff; color: var(--muted); cursor: pointer; }
.sh-seg button.on { background: var(--ink); color: #fff; }
.sh-lead { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.sh-empty { margin: 0; display: grid; justify-items: center; gap: 4px; padding: 10px 0; font-size: 13.5px; color: var(--muted); }
.sh-foot { align-items: center; }
.sh-total { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.fs-total { display: flex; gap: 8px; align-items: flex-start; background: var(--bg); border-radius: 6px; padding: 8px 12px; font-size: 13.5px; margin-top: 12px; }
.fs-total .ico-svg { color: var(--muted); margin-top: 2px; }
.lx-top h1 .share-wrap .share { font-size: 12.5px; font-weight: 400; letter-spacing: 0; }
/* ---------- Niveau de droits en onglets (§54) ---------- */
.modal.app-modal.lvt-modal { width: min(1060px, calc(100vw - 32px)); max-width: none; height: min(760px, calc(100vh - 48px)); max-height: none; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lvt-card > .grow { display: grid; gap: 1px; }
.lvt-card .lvt-st { margin-left: 4px; align-self: flex-start; }
.lvt-head { display: flex; align-items: center; gap: 14px; }
.lvt-head h3 { margin: 0; }
.lvt-name { min-width: 240px; max-width: 360px; flex: 0 1 360px; padding: 5px 10px; }
.lvt-head .grow { flex: 1; }
.lvt-members { color: var(--muted); font-size: 13px; white-space: nowrap; }
.lvt-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.lvt-tabs { background: var(--bg); border-right: 1px solid var(--line); padding: 10px 8px; overflow: auto; display: grid; align-content: start; gap: 2px; }
.lvt-tabs h5 { margin: 10px 10px 2px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.lvt-tab { font: inherit; display: flex; gap: 10px; align-items: flex-start; width: 100%; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); min-width: 0; }
.lvt-tab:hover { background: #fff; }
.lvt-tab.on { background: #fff; box-shadow: inset 3px 0 0 var(--brand), 0 1px 2px rgba(11, 31, 58, .08); }
.lvt-ic { width: 28px; height: 28px; border-radius: 6px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); flex: none; }
.lvt-tab.on .lvt-ic { background: var(--brand); border-color: var(--brand); color: #fff; }
.lvt-t { min-width: 0; display: grid; }
.lvt-t b { font-size: 14px; font-weight: 500; white-space: nowrap; }
.lvt-t small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvt-tab.off .lvt-t b, .lvt-tab.off .lvt-t small { color: #9AA6B6; }
.lvt-tab.warn .lvt-t small { color: var(--warn-ink); }
.lvt-pane { overflow: auto; padding: 18px 22px; }
.lvt-pane > h4 { font-size: 17px; font-weight: 500; margin: 0 0 2px; }
.lvt-lead { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; max-width: 680px; }
.lvt-pane .lv-sec > h4 { background: #fff; border-bottom: 1px solid var(--row); }
.lvt-pane .lv-in { padding: 10px 14px 12px; }
.lvt-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.lvt-choice { font: inherit; text-align: left; border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 12px; background: #fff; display: grid; gap: 2px; align-content: start; cursor: pointer; color: var(--ink); }
.lvt-choice b { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 500; }
.lvt-choice small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.lvt-rd { width: 16px; height: 16px; border: 1.5px solid var(--line-2); border-radius: 50%; flex: none; position: relative; }
.lvt-choice.on { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); background: color-mix(in srgb, var(--signal) 4%, #fff); }
.lvt-choice.on .lvt-rd { border-color: var(--signal); }
.lvt-choice.on .lvt-rd::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--signal); }
.lvt-choice:disabled { opacity: .5; cursor: not-allowed; }
.lvt-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lvt-card { font: inherit; text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; background: #fff; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: var(--ink); min-width: 0; }
.lvt-card:hover { border-color: var(--line-2); }
.lvt-card.off { cursor: default; background: var(--bg); }
.lvt-card .ico-svg { color: var(--muted); margin-top: 2px; }
.lvt-card .grow { flex: 1; min-width: 0; display: grid; }
.lvt-card b { font-size: 14px; font-weight: 500; }
.lvt-card small { font-size: 12.5px; color: var(--muted); }
.lvt-st { font-size: 12px; border-radius: 999px; padding: 0 9px; white-space: nowrap; background: var(--row); color: var(--muted); }
.lvt-st.read { background: color-mix(in srgb, var(--signal) 12%, #fff); color: #1F5C93; }
.lvt-st.write { background: var(--ok-bg); color: var(--ok-ink); }
.lvt-st.none { color: #8A96A6; }
.lvt-tool { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.lvt-tool .search-box { margin: 0; flex: 1 1 200px; max-width: 280px; }
.lvt-tool .search-box input, .lvt-ptool .search-box input { padding: 5px 0; }
.lvt-seg { display: inline-flex; gap: 2px; background: #fff; border: 1px solid var(--line-2); border-radius: 6px; padding: 2px; }
.lvt-seg button { font: inherit; font-size: 13.5px; border: 0; background: none; color: var(--muted); padding: 3px 12px; border-radius: 4px; cursor: pointer; }
.lvt-seg button.on { background: var(--brand); color: #fff; }
.lvt-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
.lv-row.lv-dis { opacity: .5; }
.lv-row.lv-dis .switch, .lv-row.lv-dis .lv-lbl { cursor: not-allowed; }
.lvt-picker { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.lvt-ptool { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 7px 10px; background: var(--row); }
.lvt-ptool .search-box { margin: 0; flex: 1 1 180px; max-width: 260px; }
.lvt-ptool .grow { flex: 1; }
.lvt-ptool .linklike { font-size: 13px; }
.lvt-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.lvt-tbl th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; text-align: center; padding: 6px 8px; border-bottom: 1px solid var(--row); width: 80px; }
.lvt-tbl th:first-child { text-align: left; width: auto; padding-left: 12px; }
.lvt-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--row); text-align: center; vertical-align: middle; }
.lvt-tbl td:first-child { text-align: left; padding-left: 12px; }
.lvt-tbl tr:last-child td { border-bottom: 0; }
.lvt-tbl tr.off td { opacity: .55; }
.lvt-nm { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lvt-nm > .ico-svg { color: var(--signal); }
.lvt-ar { color: var(--muted); font-size: 12px; border: 1px solid var(--line); border-radius: 3px; padding: 0 5px; }
.lvt-tag { font-size: 11.5px; border-radius: 3px; padding: 0 6px; background: color-mix(in srgb, var(--signal) 12%, #fff); color: #1F5C93; }
.lvt-tag.off { background: var(--row); color: var(--muted); }
.lvt-cnt { font-size: 12px; color: var(--muted); }
.lvt-dot { width: 18px; height: 18px; border: 1.5px solid var(--line-2); border-radius: 50%; background: #fff; position: relative; cursor: pointer; padding: 0; vertical-align: middle; }
.lvt-dot:hover:not(:disabled) { border-color: var(--signal); }
.lvt-dot.on { border-color: var(--signal); }
.lvt-dot.on::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--signal); }
.lvt-dot.on.w { border-color: var(--ok); }
.lvt-dot.on.w::after { background: var(--ok); }
.lvt-dot.inh { border-color: color-mix(in srgb, var(--signal) 35%, #fff); }
.lvt-dot.inh::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: color-mix(in srgb, var(--signal) 35%, #fff); }
.lvt-dot:disabled { opacity: .3; cursor: not-allowed; }
.lvt-dot:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.lvt-pfoot { padding: 7px 12px; background: var(--row); font-size: 13px; color: var(--muted); }
.lvt-pfoot b { color: var(--ink); font-weight: 500; }
.lvt-modal .modal-foot { display: flex; align-items: center; gap: 8px; }
.lvt-foot { flex: 1; color: var(--muted); font-size: 13px; }
@media (max-width: 820px) {
  .lvt-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .lvt-tabs { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .lvt-tabs h5, .lvt-t small { display: none; }
  .lvt-choices, .lvt-sum, .lvt-apps { grid-template-columns: 1fr; }
  .lvt-name { min-width: 0; }
}
/* contenu d'une liste qui utilise un média que la personne ne voit pas (§54) */
.item-row.masked .th { background: repeating-linear-gradient(45deg, #F2F4F7 0 8px, #E9EDF2 8px 16px); display: grid; place-items: center; color: #8A96A6; }
.item-row.masked .item-masked b { color: var(--muted); font-weight: 500; }
.item-row.masked .item-masked small { display: block; color: var(--muted); font-size: 12.5px; }
/* état de diffusion / d'utilisation (une ligne, un point coloré) */
.lx-state { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--muted); min-width: 0; }
.lx-state > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-state.ok { color: var(--ok-ink); } .lx-state.warn { color: var(--warn-ink); } .lx-state.bad { color: var(--danger-ink); }
.lx-state .linklike { font-size: 12.5px; margin-left: 2px; white-space: nowrap; }

/* cartes des listes de lecture */
.lx-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.lx-pc { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); transition: box-shadow .15s, border-color .15s; min-width: 0; }
.lx-pc:hover { box-shadow: 0 4px 14px rgba(11, 31, 58, .10); }
.lx-pc.picked { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); }
.lx-pc.dragging { opacity: .5; }
.lx-pc[draggable="true"] { cursor: grab; }
.lx-pc:has(.kebab-menu) { z-index: 42; }
.lx-pc .pl-cover { border-radius: calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0; }
.lx-pc .pl-cover.lx-empty { display: flex; align-items: center; justify-content: center; gap: 6px; background: repeating-linear-gradient(45deg, #F2F4F7 0 10px, #EDF0F4 10px 20px); color: var(--muted); font-size: 13px; }
.lx-check { position: absolute; top: 10px; left: 10px; z-index: 2; width: 18px; height: 18px; margin: 0; background: #fff; opacity: 0; transition: opacity .12s; }
.lx-pc:hover .lx-check, .lx-mc:hover .lx-check, .lx-check:checked, .lx-check:focus-visible, .lx-selecting .lx-check { opacity: 1; }
.lx-lock { position: absolute; right: 8px; top: 8px; z-index: 2; display: flex; padding: 3px; border-radius: 4px; background: rgba(255, 255, 255, .92); color: var(--muted); }
.lx-try { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: inline-flex; gap: 5px; align-items: center; border: 0; border-radius: var(--radius); padding: 3px 9px; background: rgba(255, 255, 255, .95); color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); opacity: 0; transition: opacity .12s; }
.lx-pc:hover .lx-try, .lx-try:focus-visible { opacity: 1; }
.lx-pbody { padding: 10px 8px 11px 12px; display: flex; gap: 6px; align-items: flex-start; }
.lx-pbody .grow { flex: 1; min-width: 0; display: grid; gap: 1px; }
.lx-pbody .pl-name { font-size: 15px; }
.lx-meta { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-path { color: var(--muted); font-size: 12px; display: flex; gap: 4px; align-items: center; min-width: 0; }
.lx-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-pbody .kebab { margin: 0; }
.lx-pbody .kebab-btn { width: 28px; height: 28px; }

/* vue liste : vrai tableau */
.lx-tbl-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); overflow-x: auto; }
.lx-tbl { width: 100%; border-collapse: collapse; }
.lx-tbl th { background: var(--row); text-align: left; padding: 8px 12px; font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.lx-tbl th button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.lx-tbl th button.on { color: var(--ink); }
.lx-tbl td { padding: 7px 12px; border-top: 1px solid var(--row); vertical-align: middle; font-size: 14px; }
.lx-tbl tr:hover td { background: #FAFBFC; }
.lx-tbl tr.picked td { background: color-mix(in srgb, var(--signal) 7%, #fff); }
.lx-tbl .num { text-align: right; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.lx-tbl .lx-check { position: static; opacity: 1; }
.lx-tbl .nm { display: flex; gap: 10px; align-items: center; min-width: 0; }
.lx-tbl .nm a, .lx-tbl .nm button { color: var(--ink); font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.lx-tbl .nm a:hover, .lx-tbl .nm button:hover { color: var(--signal); }
.lx-tbl .nm button { font: inherit; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.lx-tbl .mini { width: 64px; height: 36px; flex: none; border-radius: 3px; overflow: hidden; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.lx-tbl .mini img, .lx-tbl .mini video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-tbl .mini .pl-app { font-size: 18px; }
.lx-tbl small { color: var(--muted); font-size: 12.5px; }
.lx-tbl .kebab { margin: 0; }
.lx-tbl tr:has(.kebab-menu) { position: relative; z-index: 42; }

/* médiathèque : vignettes « galerie » */
.lx-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px 16px; }
.lx-mc { position: relative; min-width: 0; cursor: pointer; border-radius: 8px; }
.lx-mc:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.lx-mc.dragging { opacity: .5; }
.lx-mc .th { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--row); border: 1px solid rgba(11, 31, 58, .06); display: grid; place-items: center; color: var(--muted); }
.lx-mc .th img, .lx-mc .th video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-mc:hover .th { border-color: var(--line-2); }
.lx-mc.picked .th { outline: 2px solid var(--signal); outline-offset: 2px; }
.lx-mc.open .th { outline: 2px solid var(--brand); outline-offset: 2px; }
.lx-mc .lx-badge { position: absolute; right: 6px; bottom: 6px; display: inline-flex; gap: 4px; align-items: center; background: rgba(11, 31, 58, .72); color: #fff; font-size: 11.5px; border-radius: 3px; padding: 1px 6px; font-family: var(--mono); }
.lx-mc .lx-src { position: absolute; left: 6px; bottom: 6px; display: inline-flex; gap: 4px; align-items: center; background: rgba(255, 255, 255, .94); color: var(--ink); font-size: 11px; border-radius: 3px; padding: 1px 6px; }
.lx-mc .lx-unused { position: absolute; right: 6px; top: 6px; background: rgba(255, 255, 255, .95); color: var(--muted); font-size: 11px; border-radius: 3px; padding: 1px 6px; }
.lx-mc .nm { font-size: 13.5px; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-mc .mt { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-mc.fail .th { background: var(--danger-bg); color: var(--danger-ink); font-size: 12px; text-align: center; padding: 8px; gap: 6px; align-content: center; }
.lx-mc.fail .th .acts { display: flex; gap: 6px; justify-content: center; }
.lx-mc.fail .th .acts button { font: inherit; font-size: 12px; background: #fff; border: 1px solid #E4B4B0; border-radius: 3px; padding: 1px 8px; color: var(--danger-ink); cursor: pointer; }
.lx-mc.up .th { background: var(--bg); align-content: end; }
.lx-mc.up .pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-family: var(--mono); color: var(--muted); }
.lx-mc.up .bar { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--signal); }
.lx-mc.up .x { position: absolute; right: 6px; top: 6px; }

/* barre de sélection flottante */
.lx-selbar { position: sticky; bottom: 18px; z-index: 30; margin: 22px auto 0; width: max-content; max-width: 100%; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: var(--brand); color: #fff; border-radius: 10px; padding: 7px 8px 7px 16px; box-shadow: 0 10px 30px rgba(11, 31, 58, .3); font-size: 14px; }
.lx-selbar b { margin-right: 8px; font-weight: 500; }
.lx-selbar button { font: inherit; display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border: 0; border-radius: 6px; background: none; color: #fff; cursor: pointer; white-space: nowrap; }
.lx-selbar button:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.lx-selbar button:disabled { opacity: .45; cursor: not-allowed; }
.lx-selbar button.del { color: #FFB4AE; }
.lx-selbar small { opacity: .75; font-size: 12px; }
.lx-selbar .vr { width: 1px; height: 20px; background: rgba(255, 255, 255, .2); margin: 0 4px; }

/* panneau latéral d'aperçu d'un média */
.lx-drawer-veil { position: fixed; inset: 0; z-index: 60; background: rgba(11, 31, 58, .18); }
.lx-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: 400px; max-width: 100%; background: #fff; border-left: 1px solid var(--line); box-shadow: -10px 0 30px rgba(11, 31, 58, .12); display: flex; flex-direction: column; }
.lx-drawer .dh { display: flex; align-items: center; gap: 6px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--row); }
.lx-drawer .dh b { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-drawer .db { padding: 16px; overflow: auto; flex: 1; }
.lx-drawer .big { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #0E1726; display: grid; place-items: center; color: #9AAABD; font-size: 13px; text-align: center; padding: 8px; }
.lx-drawer .big img, .lx-drawer .big video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.lx-drawer dl { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 6px 10px; margin: 14px 0 0; font-size: 13.5px; }
.lx-drawer dt { color: var(--muted); } .lx-drawer dd { margin: 0; overflow-wrap: anywhere; }
.lx-drawer h4 { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin: 20px 0 6px; }
.lx-use { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--row); font-size: 14px; }
.lx-use:first-of-type { border-top: 0; }
.lx-use > .ico-svg { color: var(--muted); }
.lx-use .grow { flex: 1; min-width: 0; display: grid; }
.lx-use .grow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-use small { color: var(--muted); font-size: 12.5px; }
.lx-use a { color: var(--signal); font-size: 13px; text-decoration: none; }
.lx-drawer .note { font-size: 13px; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 8px 10px; margin-top: 12px; }
.lx-drawer .df { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--row); flex-wrap: wrap; align-items: center; }
.lx-drawer .df .grow { flex: 1; }

/* dépôt de fichiers n'importe où sur la page */
/* toujours dans la page (le fichier déposé se lit depuis ce champ), visible seulement pendant un glisser de fichiers */
.lx-dropzone { display: none; }
.lx-dropzone.on { position: fixed; inset: 16px; z-index: 70; border: 2px dashed var(--signal); border-radius: 14px; background: color-mix(in srgb, var(--signal) 12%, rgba(255, 255, 255, .9)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #1F4E7A; font-size: 18px; pointer-events: none; }
.lx-dropzone small { font-size: 13.5px; color: var(--muted); }
.lx-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; pointer-events: auto; cursor: copy; }
/* conséquences d'une suppression (écrans, créneaux de planning) */
.lx-impact { border: 1px solid var(--line); border-radius: 8px; margin-top: 12px; font-size: 13.5px; }
.lx-impact > div { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-top: 1px solid var(--row); }
.lx-impact > div:first-child { border-top: 0; }
.lx-impact .ico-svg { color: var(--muted); margin-top: 2px; }
.lx-impact .grow { flex: 1; min-width: 0; }
.lx-impact small { color: var(--muted); font-size: 12.5px; }
/* fenêtre d'import (bouton « Importer ») */
.lx-import .upl { margin-top: 6px; }

@media (max-width: 900px) {
  .lx-try { opacity: 1; }
  .lx-check { opacity: 1; }
}
.lx-mobile-only { display: none; }
@media (max-width: 640px) {
  .lx-tbl-wrap { display: none; }
  .lx-mobile-only { display: grid; }
  .lx-status .lx-desk { display: none; }
  .lx-top h1 { font-size: 22px; }
  .lx-tools .search-box { max-width: none; flex-basis: 100%; }
  .lx-pgrid { grid-template-columns: 1fr; }
  .lx-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .lx-selbar { bottom: 10px; padding-left: 12px; }
  .lx-selbar .lx-lbl { display: none; }
}

/* ---------- Barres d'outils épurées (§57) : recherche, Filtres, tri discret, affichage ; puces des filtres actifs dessous ---------- */
.fm { position: relative; display: inline-block; }
.tb-btn { font: inherit; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; }
.tb-btn:hover { border-color: var(--muted); }
.tb-btn.act { border-color: var(--signal); }
.tb-n { font-size: 11px; background: var(--signal-bg); color: #1F4E7A; border-radius: 10px; padding: 0 6px; }
.fm-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 280px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 8px 24px rgba(11, 31, 58, .16); padding: 12px 14px; display: grid; gap: 8px; }
.fm-pop h5 { margin: 4px 0 0; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.fm-pop h5:first-child { margin-top: 0; }
.fm-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-opt { font: inherit; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--muted); cursor: pointer; }
.fm-opt:hover { color: var(--ink); border-color: var(--muted); }
.fm-opt.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.fm-opt small { font-family: var(--mono); font-size: 11px; opacity: .75; }
.fm-ft { display: flex; justify-content: flex-end; border-top: 1px solid var(--row); padding-top: 8px; font-size: 13px; }
.fm-note { font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--row); padding-top: 8px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.fc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 14px; font-size: 13px; }
.fc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 14px; background: var(--signal-bg); color: #1F4E7A; font-size: 12.5px; }
.fc-chip button { display: grid; place-items: center; border: 0; background: none; color: inherit; cursor: pointer; padding: 2px; border-radius: 50%; }
.fc-chip button:hover { background: rgba(11, 31, 58, .1); }
/* tri discret : texte avec chevron, sans cadre */
.lx-tools select.tb-sort, select.tb-sort { border-color: transparent; background-color: transparent; color: var(--muted); }
.lx-tools select.tb-sort:hover, select.tb-sort:hover { color: var(--ink); }
/* la recherche prend la place libre */
.lx-tools .search-box, .lib-tools .search-box { max-width: none; }
@media (max-width: 640px) { .lx-tools .search-box { flex-basis: 100%; } }
/* commutateur à quelques choix (ex. : Tous | Actifs | Inactifs) */
.tb-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: #fff; }
.tb-seg button { font: inherit; font-size: 13.5px; height: 34px; padding: 0 12px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.tb-seg button + button { border-left: 1px solid var(--line-2); }
.tb-seg button:hover { color: var(--ink); background: var(--bg); }
.tb-seg button.on { background: var(--brand); color: #fff; }
.lv-appico { display: inline-flex; flex: none; cursor: pointer; }