/* Tournages — interface sobre inspirée des apps Apple :
   police système, surfaces translucides, coins arrondis, mode sombre automatique. */

:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, Segoe UI, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: #f5f5f7;
  --bg-elev: #ffffff;
  --bg-sunken: #ececf0;
  --glass: rgba(255, 255, 255, 0.72);
  --text: #1d1d1f;
  --text-2: #636366; /* 4,5:1 et plus, même sur l'accent doux (charte tdlm., relevé de F) */
  --text-3: #aeaeb2; /* icônes, traits, espaces réservés : jamais pour un texte à lire */
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  /* Accent de la charte tdlm. : bordeaux en clair, sable en sombre (docs/finition/design-commun.md). */
  --accent: #420017;
  --accent-hover: #6b0025;
  --accent-soft: rgba(66, 0, 23, 0.08);
  --on-accent: #ffffff; /* texte et icônes posés sur l'accent : blanc sur bordeaux, bordeaux sur sable */
  --danger: #ff3b30;
  --danger-soft: rgba(255, 59, 48, 0.12);
  --success: #34c759;
  --warning: #ff9f0a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.18);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --sidebar-w: 260px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- Commun aux trois sites (docs/finition/design-commun.md) ---- */
  /* Accent d'un texte (liens, pastilles) : au moins 4,5:1 sur tous les fonds. */
  --accent-text: #420017;
  /* Pastille du compte : sable pâle, initiales bordeaux. */
  --avatar-bg: #e8d9c6; --avatar-text: #420017;
  /* « Bleu » du texte d'un contenu (Édition, couleur choisie par l'auteur, pas l'accent) : 4,5:1. */
  --tx-bleu: #0a58ca;
  /* États : un plein (point, barre), un texte lisible (au moins 4,5:1 sur son fond pâle, même posé
     sur une surface grise, et sur la page), un fond pâle. ok = prêt, warn = à vérifier, bad = erreur ou retard, info = en cours,
     neutre = vide ou à venir, regie = en régie (direct seulement). */
  --ok: #34c759;   --ok-text: #146c2d;   --ok-soft: rgba(52, 199, 89, 0.16);
  --warn: #ff9f0a; --warn-text: #8a5000; --warn-soft: rgba(255, 159, 10, 0.18);
  --bad: #ff3b30;  --bad-text: #c00013;  --bad-soft: rgba(255, 59, 48, 0.12);
  --bad-fill: #e0281f; /* rouge plein sous un texte blanc (bouton, « à l'antenne ») : 4,7:1, clair et sombre */
  --info: var(--accent); --info-text: var(--accent-text); --info-soft: var(--accent-soft);
  --neutral-text: var(--text-2); --neutral-soft: var(--bg-sunken);
  --regie: #af52de; --regie-text: #7b3fa8; --regie-soft: rgba(175, 82, 222, 0.16);
  /* Surlignage du texte (Édition, a-richtext) : les teintes du Google Doc ; le texte (--text) y reste
     au-dessus de 4,5:1, en clair comme en sombre. */
  --hl-jaune: #ffe066; --hl-vert: #b2f2bb; --hl-bleu: #a5d8ff; --hl-rose: #fcc2d7; --hl-orange: #ffd8a8;
  /* Direct : mêmes valeurs en clair et en sombre (repères de régie). */
  --onair: #ff3b30; --preview: #30d158;
  /* Menus : verre dépoli plus opaque que les barres. */
  --glass-menu: rgba(255, 255, 255, 0.88);
  /* Rayons */
  --r-xs: 6px;      /* pastilles, petites étiquettes */
  --r-sm: 8px;      /* boutons icônes, lignes de menu, barre latérale */
  --r-md: 10px;     /* champs, menus, encadrés */
  --r-lg: 12px;     /* groupes, cartes */
  --r-xl: 18px;     /* modales, panneaux */
  --r-pill: 980px;  /* boutons, toasts, puces */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  /* Tailles de texte */
  --fs-xs: 11px;    /* capitales de section, méta */
  --fs-sm: 12px;    /* indications, pastilles, sous-textes */
  --fs-md: 13px;    /* texte secondaire, menus, petits boutons */
  --fs-base: 14px;  /* texte */
  --fs-lg: 17px;    /* titres de section */
  --fs-title: 24px; /* titre de page */
  /* Largeurs de page */
  --page-narrow: 820px; --page-wide: 1180px; --page-full: 1440px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elev: #1c1c1e;
    --bg-sunken: #0d0d0f;
    --glass: rgba(28, 28, 30, 0.72);
    --text: #f5f5f7;
    --text-2: #a1a1a6;
    --text-3: #5e5e63;
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.2);
    --accent: #d5bfa3;
    --accent-hover: rgba(213, 191, 163, 0.92);
    --accent-soft: rgba(213, 191, 163, 0.16);
    --on-accent: #420017;
    --danger: #ff453a;
    --danger-soft: rgba(255, 69, 58, 0.18);
    --success: #30d158;
    --warning: #ffd60a;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.6);
    --accent-text: #d5bfa3;
    --avatar-bg: #3a0a1b; --avatar-text: #d5bfa3;
    --tx-bleu: #64b0ff;
    --ok: #30d158;   --ok-text: #30d158;   --ok-soft: rgba(48, 209, 88, 0.2);
    --warn: #ffd60a; --warn-text: #ffd60a; --warn-soft: rgba(255, 159, 10, 0.2);
    --bad: #ff453a;  --bad-text: #ff6961;  --bad-soft: rgba(255, 69, 58, 0.18);
    --regie: #bf5af2; --regie-text: #d08bff; --regie-soft: rgba(191, 90, 242, 0.2);
    --hl-jaune: #5c4b00; --hl-vert: #1e4d2b; --hl-bleu: #1a446b; --hl-rose: #6b2843; --hl-orange: #6b3f10;
    --glass-menu: rgba(36, 36, 38, 0.9);
  }
}
/* Sans flou d'arrière-plan, ou « réduire la transparence » demandé : surfaces pleines. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: var(--bg-elev); --glass-menu: var(--bg-elev); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--bg-elev); --glass-menu: var(--bg-elev); }
}

* { box-sizing: border-box; }
/* Focus clavier : un trait de l'accent, bordeaux en clair, sable en sombre (charte tdlm.). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
.vbtns .tc { cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 24px; letter-spacing: -0.02em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 10px; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--accent-soft); }
.muted { color: var(--text-2); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
/* Ranger les sessions d'avant (js/ranger-sessions.js, vue Sessions et admin) : liste qui défile
   dans la fenêtre, une carte par session, détail des déplacements en repli. */
.rg-list { display: flex; flex-direction: column; gap: 8px; max-height: min(60vh, 560px); overflow: auto; margin-top: 10px; }
.rg-project { margin: 6px 0 0; font-size: 13px; color: var(--text-2); }
.rg-session { padding: 8px 10px; border-radius: 10px; background: var(--bg-sunken); }
.rg-session .mono { font-size: 12px; }
.rg-moves summary { display: flex; align-items: center; gap: 8px; margin-top: 4px; cursor: pointer; list-style: none; }
.rg-moves summary::-webkit-details-marker { display: none; }
/* Chevron dessiné : il reste quand le summary passe en flex (au doigt), et tourne à l'ouverture. */
.rg-moves summary::before { content: ''; flex: none; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; }
.rg-moves[open] summary::before { transform: rotate(90deg); }
.sess-ranger-btn .rg-short { display: none; }
@media (max-width: 600px) { .sess-ranger-btn .rg-full { display: none; } .sess-ranger-btn .rg-short { display: inline; } }
.rg-move-list { display: grid; gap: 2px; margin-top: 4px; max-height: 240px; overflow: auto; font-variant-numeric: tabular-nums; }
.rg-move { overflow-wrap: anywhere; }
.rg-skip-head { margin: 12px 0 4px; font-size: 13px; color: var(--text-2); }
.rg-skipped { background: none; border: 1px dashed var(--line-strong); }
.rg-link { margin-top: 2px; }
.rg-link-warn { display: flex; align-items: center; gap: 6px; color: var(--warn-text); }
.rg-link-warn .ico { flex: none; }
.rg-lost { padding: 6px 10px; border-radius: 10px; background: var(--warn-soft); }
.sess-rg { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sess-rg .tag { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spinner.spinner-tag { width: 11px; height: 11px; border-width: 2px; }
.sess-ranger-line { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ad-rg-check { display: inline-flex; align-items: center; min-width: 32px; min-height: 32px; cursor: pointer; }
.ad-rg-chev .ico { transition: transform 0.15s; }
.ad-rg-chev.open .ico { transform: rotate(90deg); }
.ad-rg-sessions { display: grid; gap: 2px; padding: 0 16px 10px 76px; }
@media (hover: none), (pointer: coarse) {
  .ad-rg-check { min-height: 44px; }
  .rg-moves summary { min-height: 44px; margin-top: 0; }
  .rg-session:has(> .rg-moves) { padding-bottom: 0; } /* les 44 px du summary suffisent en bas de la carte */
}
.pre { white-space: pre-wrap; }
.hidden { display: none !important; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.sm { width: 14px; height: 14px; }
.ico.lg { width: 28px; height: 28px; }
.ico.xl { width: 44px; height: 44px; stroke-width: 1.2; }
.row { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }
.wrap { flex-wrap: wrap; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; min-height: 32px;
  border-radius: 980px; border: 1px solid var(--line-strong);
  background: var(--bg-elev); color: var(--text);
  font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, transform 0.15s var(--ease), opacity 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--bg-sunken); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { background: var(--bad-fill); border-color: transparent; color: #fff; font-weight: 600; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent); }
.btn-sm { padding: 4px 10px; min-height: 26px; font-size: 12.5px; }
.btn-lg { padding: 11px 22px; min-height: 44px; font-size: 15px; }
.btn-block { width: 100%; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent;
  color: var(--text-2); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--bg-sunken); color: var(--text); }
.icon-btn.active { color: var(--accent); background: var(--accent-soft); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }

/* ---------- Formulaires ---------- */
.input, .select, .textarea {
  width: 100%; padding: 8px 12px; min-height: 36px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--bg-elev); color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-soft); }
.textarea { resize: vertical; min-height: 72px; line-height: 1.4; }
.select { appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field > span { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.field .hint, .hint { font-size: 12px; color: var(--text-2); }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.error-text { color: var(--bad-text); font-size: 13px; margin: 6px 0; }

/* Interrupteur style iOS */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; padding: 6px 0; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { width: 42px; height: 26px; border-radius: 13px; background: var(--line-strong); transition: background 0.2s; position: relative; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.25); transition: transform 0.2s var(--ease); }
.switch input:checked + .track { background: var(--success); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 2px var(--accent); }

/* Sélecteur segmenté */
.segmented { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--bg-sunken); }
.segmented button, .segmented > a { padding: 4px 12px; border: none; border-radius: 7px; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.segmented > a:hover { text-decoration: none; color: var(--text); }
.segmented button.active, .segmented > .on { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------- Mise en page ---------- */
#app { height: 100%; display: flex; flex-direction: column; }
.layout { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: var(--sidebar-w); flex: none; display: flex; flex-direction: column;
  background: var(--glass); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border-right: 1px solid var(--line); overflow-y: auto;
}
.sidebar-head { padding: 18px 16px 10px; display: flex; align-items: center; gap: 10px; }
.my-account .group-row .label .sub { white-space: normal; } /* Mon compte (moncompte.js) : les explications ne se coupent pas (plus précis que .group-row .label .sub, plus bas) */
/* Marque d'un produit (productMark) : le galet du kit, hauteur fixée, largeur automatique, jamais
   étiré, rogné, recoloré ni ombré. 26 px en tête de barre latérale, 23 dans la barre d'Édition,
   20 au menu des produits, 32 sur les cartes de l'administration, 48 à la connexion. */
.logo-mark { display: block; flex: none; height: 26px; width: auto; max-width: none; aspect-ratio: 121.4 / 106.5; } /* le rapport du galet avant le chargement : rien ne saute */
.brand { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.side-section { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.side-nav { padding: 0 8px; display: flex; flex-direction: column; gap: 1px; }
.side-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
  color: var(--text); cursor: pointer; border: none; background: transparent; text-align: left; width: 100%; font-size: 13.5px;
  transition: background 0.12s;
}
.side-item:hover { background: rgba(127,127,127,0.12); text-decoration: none; }
.side-item.active { background: var(--accent); color: var(--on-accent); }
.side-item .ico { width: 17px; height: 17px; opacity: 0.85; }
.side-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item .badge { font-size: 11px; opacity: 0.7; }
.side-item.active .badge { opacity: 1; } /* plein sur l'accent (0,7 tombait sous 4,5:1) */
/* Pied de la barre latérale (puce du compte, signature) : collé en bas quand la barre défile (une
   longue liste, un écran de portable), toujours visible. Opaque, à la teinte de la barre : le verre de
   la barre posé sur le fond de la page (ombre intérieure par-dessus --bg), rien ne passe au travers. */
.sidebar-foot { margin-top: auto; padding: 10px 8px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 2px;
  position: sticky; bottom: 0; z-index: 1; background: var(--bg); box-shadow: inset 0 0 0 100vmax var(--glass); }
.sidebar-foot .user-chip { flex: 1; min-width: 0; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.user-chip:hover { background: rgba(127,127,127,0.12); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--avatar-bg); color: var(--avatar-text); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex: none; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.toolbar {
  display: flex; align-items: center; gap: 8px; padding: 10px 20px; min-height: 54px;
  background: var(--glass); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5;
}
.toolbar h1 { font-size: 18px; }
.content { flex: 1; overflow: auto; padding: 20px; }
.content.narrow { max-width: 780px; width: 100%; margin: 0 auto; }
.page-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.page-title h1 { font-size: 28px; }

/* ---------- Cartes et listes ---------- */
.card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 18px; }
.group { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 18px; }
.group-title { padding: 14px 16px 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); }
.group-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); min-height: 48px; }
.group-row:first-child, .group-title + .group-row { border-top: none; }
.group-row .label { flex: 1; min-width: 0; }
.group-row .label .sub { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-row.clickable { cursor: pointer; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-list { max-height: min(60vh, 520px); overflow-y: auto; }
.trash-list .group-row input[type=checkbox] { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.trash-list .sub.right { text-align: right; font-size: 12px; color: var(--text-2); white-space: nowrap; flex: none; }
.trash-list .sub.right .warn { color: var(--warning); }
@media (max-width: 600px) { .trash-list .sub.right { display: none; } }
.group-row.clickable:hover { background: var(--bg-sunken); }
.empty { text-align: center; padding: 60px 20px; color: var(--text-2); }
.empty .ico { width: 44px; height: 44px; stroke-width: 1.2; color: var(--text-3); margin-bottom: 8px; }
/* Écran vide principal : le galet doux de l'outil (emptyMark, charte tdlm.), 52 px de haut. */
.empty-mark { display: block; width: fit-content; margin: 0 auto 10px; }
.empty-mark img { display: block; height: 52px; width: auto; aspect-ratio: 121.4 / 106.5; }
/* Signature tdlm. (tdlmSignature) : l'image du kit, hauteur fixée, jamais recolorée. */
.tdlm-sig { display: inline-flex; flex: none; }
.tdlm-sig img { display: block; height: 10px; width: auto; aspect-ratio: 404 / 84; }
.tdlm-link { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 44px; padding: 0 6px; border-radius: var(--r-sm); }
.tdlm-link:hover { background: rgba(127,127,127,0.12); }
.login-sig { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: 12px; color: var(--text-2); }
.login-sig .tdlm-sig img { height: 11px; }
/* Pied du menu du sélecteur de produit (les cinq produits) : la signature sous la famille d'outils. */
.menu-sig { display: flex; padding: 0 4px; }
.empty h3 { color: var(--text); margin-bottom: 4px; }
.tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--bg-sunken); color: var(--text-2); white-space: nowrap; }
button.tag { border: 0; cursor: pointer; font-family: inherit; }
.tag-accent, .tag.info { background: var(--info-soft); color: var(--info-text); }
.tag-success, .tag.ok { background: var(--ok-soft); color: var(--ok-text); }
.tag-warn, .tag.warn { background: var(--warn-soft); color: var(--warn-text); }
.tag-danger, .tag.bad { background: var(--bad-soft); color: var(--bad-text); }
.tag.regie { background: var(--regie-soft); color: var(--regie-text); }
.tag.onair { background: var(--bad-fill); color: #fff; }

/* ---------- Projets ---------- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.project-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  transition: transform 0.2s var(--ease), box-shadow 0.2s;
}
.project-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.project-card h3 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card .meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); align-items: center; }
.project-card .date-chip { display: inline-flex; flex-direction: column; align-items: center; width: 46px; padding: 4px 0; border-radius: 9px; background: var(--bg-sunken); line-height: 1.1; }
.project-card .date-chip b { font-size: 18px; }
.project-card .date-chip span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }

/* ---------- Clients (clients.js, pages/client.js) ---------- */
.client-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 170px; padding: 2px 8px 2px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--client, #8e8e93) 15%, transparent); white-space: nowrap; text-decoration: none; }
a.client-chip:hover { text-decoration: none; background: color-mix(in srgb, var(--client, #8e8e93) 26%, transparent); }
.client-chip .client-name { overflow: hidden; text-overflow: ellipsis; }
.client-chip.muted { background: var(--bg-sunken); color: var(--text-2); }
.client-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--client, #8e8e93); }
.crumbs .client-chip { flex: none; font-size: 13px; margin: 0 2px; }
.select.select-sm { width: auto; padding-top: 5px; padding-bottom: 5px; font-size: 13px; }
.client-group { margin-bottom: 28px; }
/* Accueil (pages/projects.js) : sections repliables du regroupement, encadré « À traiter ». */
.home-section { margin-bottom: 26px; }
.home-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; }
.home-section-head .home-fold .ico { transform: rotate(90deg); transition: transform 0.15s; }
.home-section.closed .home-section-head .home-fold .ico { transform: none; }
.home-section.closed { margin-bottom: 10px; }
.home-sec-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 15px; }
.home-sec-title .client-chip { max-width: none; padding: 4px 12px 4px 10px; font-size: 15px; }
.home-sec-prog { color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-count { cursor: pointer; white-space: nowrap; }
.home-todo { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.toolbar .home-group, .toolbar .home-sort { flex: 0 1 auto; min-width: 0; max-width: 190px; }
@media (max-width: 600px) {
  /* Téléphone : la recherche, outil principal, sur sa propre ligne en pleine largeur ; les deux
     sélecteurs se partagent la première. */
  .toolbar.home-toolbar { flex-wrap: wrap; }
  .toolbar.home-toolbar .search-box.search-main { order: 10; flex: 1 1 100%; }
  /* Deux lignes : menu, retour, regrouper, trier, + ; puis la recherche et grille/liste.
     « Actualiser » se replie au doigt. */
  .toolbar.home-toolbar:has(.home-view) .search-box.search-main { flex: 1 1 calc(100% - 110px); min-width: 0; }
  .toolbar.home-toolbar .home-view { order: 11; }
  .toolbar.home-toolbar .home-refresh, .toolbar.home-toolbar > .spacer { display: none; }
  .toolbar.home-toolbar .home-group, .toolbar.home-toolbar .home-sort { min-width: 0; text-overflow: ellipsis; }
  .toolbar.home-toolbar .home-group, .toolbar.home-toolbar .home-sort { flex: 1 1 0; max-width: none; }
  .home-sec-prog { display: none; }
}
/* Vue liste des projets (projectlist.js), sur l'accueil et la page d'un client : en-têtes qui
   trient, toute la ligne est un lien. Fenêtre moyenne : sans talents ni fichiers ; téléphone :
   chaque projet sur deux ou trois lignes, jamais de défilement horizontal. */
.toolbar .home-view { flex: none; }
.project-list-head, .project-list .prow { display: grid; grid-template-columns: minmax(160px, 2fr) minmax(120px, 1.4fr) 96px 96px minmax(100px, 1.2fr) 64px 76px minmax(80px, 1fr); gap: 12px; align-items: center; }
/* Regroupé par client et programme : la colonne du client n'est pas répétée (projectlist.js). */
.project-list-head.by-client, .project-list.by-client .prow { grid-template-columns: minmax(160px, 2fr) 96px 96px minmax(100px, 1.2fr) 64px 76px minmax(80px, 1fr); }
.project-list-head { position: sticky; top: 0; z-index: 1; padding: 8px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); background: var(--bg);
  font-size: 11.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
.project-list-head .sort { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 28px; margin: -4px -6px; padding: 0 6px; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; cursor: pointer; }
.project-list-head .sort:hover { color: var(--text); background: var(--bg-sunken); }
.project-list-head .sort.on { color: var(--text); }
.project-list-head .sort .arrow { font-size: 12px; letter-spacing: 0; }
.project-list { display: flex; flex-direction: column; }
.project-list .prow { min-height: 44px; padding: 6px 12px; border-radius: 10px; color: var(--text); font-size: 13.5px; }
.project-list .prow:hover { background: var(--bg-sunken); text-decoration: none; }
.project-list .prow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.project-list .prow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-list .prow .pl-name b { font-weight: 600; }
.project-list .prow .pl-client { display: flex; align-items: center; gap: 6px; }
.project-list .prow .pl-client > span { overflow: hidden; text-overflow: ellipsis; }
.project-list .prow > .pl-shoot, .project-list .prow > .pl-air, .project-list .prow > .pl-talents, .project-list .prow > .pl-files, .project-list .prow > .pl-size, .project-list .prow > .pl-status { color: var(--text-2); font-size: 12.5px; }
.project-list .prow > .pl-files, .project-list .prow > .pl-size { font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  .project-list-head, .project-list .prow { grid-template-columns: minmax(150px, 2fr) minmax(110px, 1.4fr) 92px 92px 76px minmax(70px, 1fr); }
  .project-list-head.by-client, .project-list.by-client .prow { grid-template-columns: minmax(150px, 2fr) 92px 92px 76px minmax(70px, 1fr); }
  .project-list-head .pl-talents, .project-list-head .pl-files, .project-list .prow > .pl-talents, .project-list .prow > .pl-files { display: none; }
}
@media (max-width: 640px) {
  .project-list-head { display: none; }
  /* La taille à côté du nom (comme l'heure d'un courriel) ; la ligne des talents, vide sans talents. */
  .project-list .prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name size" "client shoot" "talents talents"; gap: 2px 12px; padding: 10px 12px; }
  .project-list.by-client .prow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name size" "talents shoot"; }
  .project-list .prow > .pl-name { grid-area: name; }
  .project-list .prow > .pl-client { grid-area: client; }
  .project-list .prow > .pl-shoot { grid-area: shoot; justify-self: end; }
  .project-list .prow > .pl-talents { grid-area: talents; display: block; }
  .project-list .prow > .pl-size { grid-area: size; justify-self: end; }
  .project-list .prow > .pl-air, .project-list .prow > .pl-files, .project-list .prow > .pl-status { display: none; }
}
@media (hover: none), (pointer: coarse) { .project-list-head .sort { min-height: 44px; } }
.client-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.client-group-head .client-chip { max-width: none; padding: 4px 12px 4px 10px; font-size: 15px; }
.client-group-head .client-chip .client-dot { width: 10px; height: 10px; }
.client-title .client-dot { width: 12px; height: 12px; }
.client-title { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.side-dot { display: inline-flex; align-items: center; justify-content: center; }
.side-item.active .client-dot { box-shadow: 0 0 0 1.5px var(--on-accent); }
.resources-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 18px; color: inherit; text-decoration: none;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: box-shadow 0.2s; }
a.resources-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); }
.resources-card .label { flex: 1; min-width: 0; }
.resources-card.empty-res { border-style: dashed; box-shadow: none; }
.resources-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); }
.prog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.prog-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 980px; background: var(--bg-elev); color: var(--text); font-size: 13px; cursor: pointer; }
.prog-chip .n { color: var(--text-2); font-size: 12px; }
.prog-chip.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.prog-chip.active .n { color: inherit; opacity: 0.85; }
/* admin.tdlm.tv, Clients et programmes (admin/clients.js) */
.ad-client-row { color: inherit; text-decoration: none; }
.ad-client-row:hover { text-decoration: none; }
.ad-client-row .client-dot, .ad-client-title .client-dot { width: 10px; height: 10px; }
.ad-client-title { display: inline-flex; align-items: center; gap: 10px; }
.ad-orphan .select, .ad-add-access .select { flex: 0 1 180px; min-width: 0; }
.ad-add-access .select:first-child { flex: 1 1 220px; }
.ad-mail-logo img { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 12px 12px 0 0; }
.ad-mail-pick .select { flex: 1 1 260px; min-width: 0; }
/* Fond du logo des e-mails : deux aperçus côte à côte (un sous l'autre au téléphone), un clic choisit. */
.ad-mail-fonds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.ad-mail-fonds > .small, .ad-mail-fonds > .note { grid-column: 1 / -1; }
.ad-mail-fond { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ad-mail-fond:hover { border-color: var(--line-strong); background: var(--bg-sunken); }
.ad-mail-fond[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); cursor: default; background: var(--bg-elev); }
.ad-mail-fond:disabled { opacity: 0.6; cursor: progress; }
.ad-mail-fond-img img { display: block; width: 100%; height: auto; aspect-ratio: 520 / 56; border-radius: 8px; }
.ad-mail-fond-t { display: flex; align-items: center; gap: 8px; }
.ad-mail-fond-on, .ad-mail-fond-go { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent-text); }
.ad-mail-fond-go { font-weight: 500; }
@media (max-width: 640px) { .ad-mail-fonds { grid-template-columns: minmax(0, 1fr); } }
.ad-back { margin-bottom: 10px; }
.ad-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-swatch { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid transparent; border-radius: 50%; background: var(--bg-sunken); cursor: pointer; }
.ad-swatch .client-dot { width: 16px; height: 16px; }
.ad-swatch.active { border-color: var(--accent); }
.ad-danger-zone { display: flex; gap: 8px; justify-content: flex-end; margin: 6px 0 24px; }
@media (max-width: 600px) {
  .toolbar .client-filter { max-width: 120px; }
  .toolbar .client-view, .resources-access { display: none; }
  .ad-orphan, .ad-add-access { flex-wrap: wrap; }
  .client-group-head .btn { display: none; }
}

/* ---------- Explorateur de fichiers ---------- */
.crumbs { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; font-size: 14px; }
.crumbs::-webkit-scrollbar { display: none; }
.crumbs button { flex: none; border: none; background: transparent; padding: 4px 6px; border-radius: 6px; color: var(--text-2); cursor: pointer; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.crumbs .icon-btn { flex: none; }
.crumbs button:hover { background: var(--bg-sunken); color: var(--text); }
.crumbs button.current { color: var(--text); font-weight: 600; cursor: default; }
/* Fil d'Ariane replié (browser.js) : « … » vers les dossiers parents ; serré, le nom du projet se raccourcit. */
.crumbs .crumb-more { font-weight: 600; letter-spacing: 0.05em; }
.crumbs.tight > button:first-child:not(.icon-btn) { max-width: 24vw; }
.crumbs.tight > button.current { max-width: 38vw; }
.crumbs .sep { color: var(--text-3); }
.dropzone { position: relative; min-height: 100%; border-radius: var(--radius); transition: background 0.15s; }
.dropzone.over { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; }
.dropzone.over::after { content: "Déposer ici"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; color: var(--accent); pointer-events: none; }

.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.tile {
  position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--line); transition: transform 0.15s var(--ease), box-shadow 0.15s;
  user-select: none;
}
.tile:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.tile.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.tile .thumb { position: relative; aspect-ratio: 16 / 9; background: var(--bg-sunken); display: flex; align-items: center; justify-content: center; color: var(--text-3); overflow: hidden; }
.tile .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .thumb .sprite { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 1000% 100%; background-color: var(--bg-sunken); opacity: 0; transition: opacity 0.1s; }
.tile .thumb:hover .sprite.ready { opacity: 1; }
.tile .thumb .dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(0,0,0,0.65); color: #fff; font-size: 11px; font-family: var(--mono); }
.tile .thumb .status { position: absolute; left: 6px; top: 6px; }
.tile .thumb.folder { background: var(--bg-sunken); color: var(--accent); }
.tile .thumb.folder .ico { width: 56px; height: 56px; stroke-width: 1.3; }
/* Paquets (paquets.js : bibliothèque Final Cut…) : une ligne, l'icône du clap en couleur de la charte,
   la pastille du logiciel ; dans son contenu, la barre de lecture seule. */
.file-list .frow .mini.paquet { color: var(--accent); }
.tag.paquet-tag { background: var(--accent-soft); color: var(--accent-text); }
.file-list .frow .name .paquet-tag { margin-left: 8px; }
.tile .info .sub .paquet-tag { margin-right: 2px; }
.bundle-bar { align-items: center; margin-bottom: 12px; }
.bundle-bar > span { flex: 1; min-width: 0; }
.tile .info { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile .name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .sub { font-size: 11.5px; color: var(--text-2); display: flex; gap: 6px; }
.tile .check { position: absolute; left: 8px; top: 8px; width: 20px; height: 20px; padding: 0; z-index: 1; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); background: rgba(0,0,0,0.3); display: none; align-items: center; justify-content: center; color: #fff; }
.tile:hover .check, .tile.selected .check, .file-grid.selecting .tile .check { display: flex; }
.tile.selected .check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tile .check .ico { width: 12px; height: 12px; stroke-width: 3; }

.file-list { display: flex; flex-direction: column; }
.file-list .frow {
  display: grid; grid-template-columns: 28px 44px 1fr 110px 90px 140px 32px; align-items: center; gap: 10px;
  padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px;
}
.file-list .frow:hover { background: var(--bg-sunken); }
.file-list .frow.selected { background: var(--accent-soft); }
.file-list .frow .mini { width: 44px; height: 28px; border-radius: 4px; background: var(--bg-sunken); object-fit: cover; display: flex; align-items: center; justify-content: center; color: var(--text-3); overflow: hidden; }
.file-list .frow .mini img { width: 100%; height: 100%; object-fit: cover; }
.file-list .frow .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .frow .col { color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.file-list .frow .check { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: #fff; }
.file-list .frow.selected .check { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.file-list .frow .check .ico { width: 11px; height: 11px; stroke-width: 3; }
.file-list .head { display: grid; grid-template-columns: 28px 44px 1fr 110px 90px 140px 32px; gap: 10px; padding: 4px 10px 8px; font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.file-list .head .sort { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin: -6px -6px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.file-list .head .sort:hover { color: var(--text-2); background: var(--bg-sunken); }
.file-list .head .sort.on { color: var(--text); }
.file-list .head .sort .arrow { font-size: 12px; letter-spacing: 0; }

.selection-bar {
  position: sticky; bottom: 12px; margin: 16px auto 0; width: max-content; max-width: 100%;
  display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 16px; border-radius: 980px;
  background: var(--glass); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); z-index: 4;
  animation: popin 0.2s var(--ease);
}
@keyframes popin { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Lecteur ---------- */
.viewer { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; flex-direction: column; color: #f5f5f7; animation: fadein 0.2s;
  --accent: #d5bfa3; --accent-hover: rgba(213, 191, 163, 0.92); --accent-soft: rgba(213, 191, 163, 0.16); --accent-text: #d5bfa3; --on-accent: #420017; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.viewer .vtop { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(20,20,22,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.viewer .vtop .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer .vtop .icon-btn { color: #d0d0d5; }
.viewer .vtop .icon-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.viewer .vtop .btn { background: rgba(255,255,255,0.1); border-color: transparent; color: #fff; }
.viewer .vtop .btn:hover { background: rgba(255,255,255,0.18); }
.viewer .vbody { flex: 1; display: flex; min-height: 0; }
.viewer .stage { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; background: #000; position: relative; }
.viewer .media-wrap { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; }
.viewer video, .viewer img.full { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; outline: none; }
.viewer img.full { object-fit: contain; }
.viewer .media-msg { color: #98989d; text-align: center; padding: 40px; }
.viewer .media-msg .ico { width: 44px; height: 44px; stroke-width: 1.2; margin-bottom: 10px; }
/* Avancement d'un aperçu en cours de calcul (proxy_pct). */
.viewer .media-msg .media-prog { display: block; width: min(240px, 60vw); margin: 0 auto 12px; accent-color: var(--accent); }
.vctrl { padding: 8px 16px 12px; background: rgba(20,20,22,0.92); border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 6px; }
.timeline { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.timeline .track { position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); top: 9px; }
.timeline .buffered { position: absolute; left: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.3); top: 9px; }
.timeline .played { position: absolute; left: 0; height: 4px; border-radius: 2px; background: var(--accent); top: 9px; }
.timeline .knob { position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.5); transform: translateX(-50%); pointer-events: none; }
.timeline .mark { position: absolute; top: 1px; width: 2px; height: 20px; border-radius: 1px; background: var(--warning); transform: translateX(-50%); cursor: pointer; }
.timeline .mark.resolved { background: var(--success); }
.timeline .mark.range { height: 4px; top: 9px; opacity: 0.6; }
.vbtns { display: flex; align-items: center; gap: 6px; }
.vbtns .icon-btn { color: #e5e5ea; }
.vbtns .icon-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.vbtns .tc { font-family: var(--mono); font-size: 13px; color: #e5e5ea; min-width: 92px; }
.vbtns .tc.dim { color: #8e8e93; }
.vbtns .vol { width: 90px; accent-color: #fff; }
.vbtns .speed { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #e5e5ea; border-radius: 6px; padding: 2px 6px; font-size: 12px; }
.vside { width: 360px; flex: none; display: flex; flex-direction: column; background: #1c1c1e; border-left: 1px solid rgba(255,255,255,0.08); }
.vside .tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.08); }
.vside .tabs button { flex: 1; padding: 12px; background: transparent; border: none; color: #98989d; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; }
.vside .tabs button.active { color: #fff; border-bottom-color: var(--accent); }
.vside .pane { flex: 1; overflow-y: auto; padding: 12px; }
.vside .compose { padding: 12px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 8px; }
.vside .compose .textarea, .vside .compose .input { background: #2c2c2e; border-color: rgba(255,255,255,0.12); color: #fff; }
.vside .compose .tcchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.08); font-family: var(--mono); font-size: 12px; cursor: pointer; color: #e5e5ea; }
.vside .compose .tcchip.on { background: var(--accent-soft); color: var(--accent); }
.vside .compose .btn-sm.btn-ghost { color: #c7c7cc; }
.vside .compose .textarea { resize: none; transition: border-radius 0.15s; }
.vside .compose.collapsed .textarea { border-radius: 20px; min-height: 0; padding: 9px 14px; line-height: 20px; }
.vside .compose input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #2c2c2e inset; -webkit-text-fill-color: #fff; caret-color: #fff; }
.cmt { padding: 10px 10px 8px; border-radius: 10px; margin-bottom: 6px; background: #2c2c2e; cursor: pointer; transition: background 0.12s; }
.cmt:hover { background: #343436; }
.cmt.reply { margin-left: 22px; }
.cmt.resolved { opacity: 0.6; }
.cmt .chead { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #98989d; margin-bottom: 4px; }
.cmt .chead b { color: #f5f5f7; font-weight: 600; }
.cmt .tcl { font-family: var(--mono); font-size: 11.5px; color: var(--warn); margin: -2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmt .cbody { white-space: pre-wrap; word-break: break-word; color: #e5e5ea; }
.cmt .cacts { display: flex; gap: 2px; margin-top: 4px; opacity: 0; transition: opacity 0.15s; }
.cmt:hover .cacts { opacity: 1; }
.cmt .cacts .icon-btn { width: 26px; height: 26px; color: #98989d; }
.cmt .cacts .icon-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.vside .meta-table { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 13px; }
.vside .meta-table dt { color: #98989d; }
.vside .meta-table dd { margin: 0; color: #f5f5f7; word-break: break-all; }
.cmt-count { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); font-size: 11.5px; }
.cmt-count .ico { width: 12px; height: 12px; }

/* ---------- Fil de commentaires (js/fil.js) : un seul objet pour le texte, la vidéo et Tournages ----------
   Une carte par fil : en tête le passage cité ou le timecode (un clic y mène), le message, les
   réponses, « Répondre », « corrigé » (ou « résolu ») et le menu ⋯. */
.tx-cm-card { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev); color: var(--text); font-size: 13px; }
.tx-cm-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tx-cm-card.now { background: var(--accent-soft); border-color: transparent; } /* le fil du moment lu (vidéo) */
.tx-cm-card.done { opacity: 0.7; }
.tx-cm-card.new .textarea { margin: 6px 0; }
.tx-cm-quote { display: block; margin: 0 0 4px; color: var(--text-2); font-size: 12px; font-style: italic; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: left; }
.tx-cm-tc { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-style: normal; font-size: 12px; color: var(--accent-text); white-space: nowrap; }
.tx-cm-tc .ico { opacity: 0.8; }
.tx-cm-msg { padding: 4px 0; }
.tx-cm-msg.reply { margin-left: 14px; padding-left: 8px; border-left: 2px solid var(--line); }
.tx-cm-by { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tx-cm-by > span:not(.avatar) { white-space: nowrap; }
.tx-cm-av { width: 18px; height: 18px; font-size: 9px; }
.tx-cm-more { margin-left: auto; width: 26px; height: 26px; }
.tx-cm-text { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tx-cm-editing .textarea { margin: 4px 0; }
.tx-cm-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tx-cm-done { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; }
.tx-cm-reply:empty { display: none; }
.tx-cm-err { margin: 4px 0 0; color: var(--bad-text); }
.tx-cm-err:empty { display: none; }
.vthreads { display: flex; flex-direction: column; gap: 6px; }
.vthread { cursor: pointer; }
.vcmt-empty { margin: 2px 0; }

/* ---------- Lecteur : en-tête sur une ligne, commandes groupées, repères par sorte ---------- */
.viewer .vtop .vtitle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.viewer .vtop .title { flex: 0 1 auto; min-width: 0; }
.viewer .vtop .vmeta, .viewer .vtop .counter { color: #98989d; white-space: nowrap; }
.viewer .vtop .vmeta { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.viewer .vtop .side-toggle[aria-pressed="true"] { color: var(--accent-text); }
.viewer.side-off .vside { display: none; }
.vbtns { gap: 14px; }
.vbtns .vgrp { display: flex; align-items: center; gap: 4px; min-width: 0; }
.vbtns .vgrp .tc:first-of-type { margin-left: 6px; }
.vbtns .icon-btn .ico { width: 18px; height: 18px; } /* même taille pour toutes les icônes */
.vbtns .btn.io, .vbtns .btn.vcmt, .vbtns .btn.speed { background: rgba(255,255,255,0.1); border-color: transparent; color: #fff; }
.vbtns .btn.io:hover, .vbtns .btn.vcmt:hover, .vbtns .btn.speed:hover { background: rgba(255,255,255,0.18); }
.vbtns .btn.io { min-width: 30px; padding: 4px 0; font-family: var(--mono); font-weight: 700; }
.vbtns .btn.speed { min-width: 44px; font-variant-numeric: tabular-nums; }
.timeline .mark.range { transform: none; }
.timeline .mark.cmt { background: #ffd60a; } /* commentaires : jaune */
.timeline .mark.cmt.resolved { background: #ffd60a; opacity: 0.45; }
.timeline .mark.range.io { background: rgba(255,255,255,0.45); opacity: 1; } /* plages I/O : gris */
.timeline .mark.range.io.cur { background: rgba(255,255,255,0.7); }
.timeline .mark.io-pt { background: #d1d1d6; width: 2px; }
.viewer .timeline .mark.range.extra.x-synthes { background: var(--regie); opacity: 0.9; } /* synthés : violet */
/* Repères fins, zone de clic plus large. */
.timeline .mark::before { content: ""; position: absolute; inset: -4px -5px; }
.timeline .mark.cmt:hover, .timeline .mark.range.extra:hover { filter: brightness(1.15); z-index: 1; }
/* Onglets : un petit sélecteur segmenté en tête du panneau. */
.vside .tabs { display: flex; gap: 2px; margin: 8px 10px 0; padding: 2px; border-radius: 9px; border-bottom: none; background: rgba(255,255,255,0.08); flex: none; }
.vside .tabs button { flex: 1 1 auto; min-width: 0; padding: 4px 8px; border: none; border-radius: 7px; font-size: 12.5px; color: #98989d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vside .tabs button.active { background: rgba(255,255,255,0.18); color: #fff; border-bottom: none; }
.vside .pane { padding: 8px 10px; }
.vinfo-acts { margin-top: 16px; }
.vinfo-keys { color: #98989d; margin-top: 20px; line-height: 1.8; }
/* Le champ : une ligne ; ouvert, la carte d'un nouveau commentaire (celle du texte). */
.vside .compose { padding: 8px 10px; }
.vside .compose .vcompose { display: flex; flex-direction: column; gap: 6px; }
.vside .compose .vcompose .textarea { margin: 0; }
.vside .compose .vcompose-head { display: flex; align-items: center; gap: 6px; }
.vside .compose .vcompose .tx-cm-acts { margin-top: 0; }
.vside .compose .tcchip { border: none; }
.vside .compose.collapsed .vcompose { padding: 0; border: none; background: none; box-shadow: none; }
.vside .compose.collapsed .vcompose > :not(.textarea) { display: none; }
/* Le lecteur de Tournages (en grand, ou sur la page d'un lien) reste sombre : ses fils aussi. Le
   lecteur d'un contenu (edition.css, .ct-player) reprend les couleurs de la page. */
.viewer .vside { --bg-elev: #2c2c2e; --bg-sunken: #3a3a3c; --line: rgba(255,255,255,0.1); --line-strong: rgba(255,255,255,0.2); --text: #f5f5f7; --text-2: #98989d;
  color-scheme: dark; }

/* ---------- Panneau d'envoi ---------- */
/* Fichiers déjà dans le dossier (upload.js, conflictDialog) */
.ucf { display: flex; flex-direction: column; gap: 10px; }
.ucf-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ucf-list { display: flex; flex-direction: column; max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.ucf-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.ucf-row + .ucf-row { border-top: 1px solid var(--line); }
.ucf-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ucf-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ucf-sel { width: auto; flex: none; }
/* Éditeur des postes d'une émission (js/postes-editeur.js) : feuille de service et Administration. */
.modal.pe-modal { max-width: min(1240px, calc(100vw - 40px)); }
.pe { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.pe-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pe-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev); overflow-x: auto; }
.pe-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1fr) repeat(3, 84px) minmax(130px, 1fr) 64px auto auto; gap: 8px; align-items: center; padding: 6px 10px; min-width: 820px; }
.pe-row + .pe-row { border-top: 1px solid var(--line); }
.pe-row.on { background: var(--accent-soft); }
.pe-head { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.pe-head span:nth-child(n+3):nth-child(-n+7) { text-align: center; }
.pe-cell { display: flex; justify-content: center; align-items: center; min-height: 32px; cursor: pointer; }
.pe-cell input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.pe-lab { display: none; }
.pe-order, .pe-del { display: flex; gap: 2px; }
.pe-empty { padding: 14px; margin: 0; display: flex; align-items: center; gap: 8px; }
.pe-new { align-self: flex-start; }
.pe-side { position: sticky; top: 0; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--bg); }
.pe-h { margin: 0 0 8px; font-size: 13px; }
.pe-pv { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; }
.pe-pv-band { padding: 4px 8px; border-radius: 6px; background: var(--bg-sunken); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-2); }
.pe-pv-team { margin-top: 6px; }
.pe-pv-th { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pe-pv-p { padding: 2px 6px; border-radius: 6px; }
.pe-pv-p.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.pe-new-phs { display: flex; flex-wrap: wrap; gap: 14px; }
.pe-new-ph { display: inline-flex; align-items: center; gap: 6px; }
/* Au téléphone, chaque poste devient une carte : les cases portent leur libellé. */
@media (max-width: 900px) {
  .pe { grid-template-columns: 1fr; }
  .pe-side { position: static; }
  .pe-head { display: none; }
  .pe-table { overflow-x: visible; }
  .pe-row { grid-template-columns: 1fr 1fr; min-width: 0; padding: 10px 12px; }
  .pe-name, .pe-team, .pe-role { grid-column: 1 / -1; }
  .pe-cell { justify-content: flex-start; gap: 8px; }
  .pe-lab { display: inline; }
}
@media (hover: none), (pointer: coarse) { .pe-cell { min-height: 44px; } .pe-order .icon-btn, .pe-del .icon-btn { width: 44px; height: 44px; } .pe-pv-th .link-btn { min-height: 44px; padding: 0 6px; } }
/* Envoi d'un paquet (bibliothèque Final Cut…) : la fenêtre du dépôt (paquet-envoi.js). */
.pq { display: flex; flex-direction: column; gap: 14px; }
.pq p { margin: 0; }
.pq-block { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-elev); }
.pq-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pq-ic { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); }
.pq-id { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.pq-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pq-encours { display: flex; align-items: flex-start; gap: 6px; padding: 8px 10px; border-radius: 8px; background: var(--info-soft); color: var(--info-text); }
.pq-caches, .pq-where { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pq-caches legend, .pq-where legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.pq-cache .pq-cl { flex: 1; min-width: 0; }
.pq-cache .pq-sz { font-variant-numeric: tabular-nums; color: var(--text-2); }
.pq-rushs { display: flex; flex-direction: column; gap: 2px; }
.pq-opt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; }
.pq-opt input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.pq-ot { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pq-tag { margin-left: 8px; }
.pq-total { padding-top: 10px; border-top: 1px solid var(--line); }
.pq-choix { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
@media (hover: none), (pointer: coarse) { .pq-opt, .pq-cache { min-height: 44px; align-items: center; } }
@media (max-width: 560px) { .ucf-row { flex-wrap: wrap; } .ucf-sel { flex: 1 1 100%; } }
.upload-panel {
  position: fixed; right: 20px; bottom: 20px; width: 380px; max-height: 60vh; z-index: 40;
  display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--glass); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: popin 0.25s var(--ease);
}
.upload-panel .uhead { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.upload-panel .uhead .title { font-weight: 600; flex: 1; }
.upload-panel .uhead .pct { font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.upload-panel .ulist { overflow-y: auto; padding: 6px 0; }
.upload-panel .ulist.collapsed { display: none; }
.uitem { padding: 6px 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; font-size: 12.5px; }
.uitem .uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uitem .ustat { color: var(--text-2); font-size: 11.5px; white-space: nowrap; }
.uitem .bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.uitem .bar i { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }
.uitem.done .bar i { background: var(--success); }
.uitem.error .bar i { background: var(--danger); }
.uitem.error .ustat { color: var(--danger); }
.uitem .uact { width: 24px; height: 24px; }
.uitem .usub { grid-column: 1 / -1; color: var(--text-2); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uitem.ugroup .uname { font-weight: 600; }
.upload-panel .ufoot { padding: 8px 14px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); transition: width 0.3s; }

/* ---------- Modales ---------- */
.modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadein 0.15s; }
.modal { width: 100%; max-width: 480px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--bg-elev); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: modalin 0.22s var(--ease); }
.modal-wide { max-width: 720px; }
@keyframes modalin { from { transform: scale(0.96) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.modal-body { padding: 8px 18px 16px; overflow-y: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }

/* ---------- Notifications ---------- */
/* Toute la largeur, toasts centrés : avec left: 50%, la pile ne pouvait occuper que la moitié
   de l'écran et les messages passaient sur deux lignes (surtout sur mobile). */
#toasts { position: fixed; top: 16px; left: 12px; right: 12px; z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { padding: 10px 18px; border-radius: 980px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 500; animation: toastin 0.25s var(--ease); max-width: 90vw; }
.toast.out { opacity: 0; transform: translateY(-6px); transition: all 0.35s; }
.toast-success { color: var(--ok-text); }
.toast-error { color: var(--bad-text); }
@keyframes toastin { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Connexion ---------- */
/* Fond des écrans de connexion : le dégradé de la Cover (charte), en clair comme en sombre. La même
   image que le kit, allégée sans redessin (img/connexion/) : WebP, et JPEG progressif de repli,
   1920 px (143 Ko) et 960 px sous 860 px de large (57 et 49 Ko), au lieu de 1 048 Ko. Le bordeaux
   dessous s'affiche avant l'image. L'AVIF n'y est pas : à poids égal, il lisse le grain de la Cover. */
.login-page { height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px;
  background-color: #420017; background-position: center; background-size: cover; background-repeat: no-repeat;
  background-image: url(/static/v/4f009f88ca/img/connexion/fond-1920.jpg);
  background-image: image-set(url(/static/v/4f009f88ca/img/connexion/fond-1920.webp) type("image/webp"), url(/static/v/4f009f88ca/img/connexion/fond-1920.jpg) type("image/jpeg")); }
@media (max-width: 860px) {
  .login-page { background-image: url(/static/v/4f009f88ca/img/connexion/fond-960.jpg);
    background-image: image-set(url(/static/v/4f009f88ca/img/connexion/fond-960.webp) type("image/webp"), url(/static/v/4f009f88ca/img/connexion/fond-960.jpg) type("image/jpeg")); }
}
.login-card { width: 100%; max-width: 380px; padding: 32px 28px; background: var(--bg-elev); border-radius: 22px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); animation: modalin 0.3s var(--ease); }
.login-card .logo-mark { height: 48px; margin: 0 auto 14px; }
/* Boîte de dépôt (D, pages/public.js) : la carte d'envoi, sa zone et la liste de ses propres envois. */
.drop-card { max-width: 460px; }
.drop-zone { display: grid; justify-items: center; gap: 10px; padding: 24px 16px; margin: 12px 0; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--r-lg); color: var(--text-2); }
.drop-zone p { margin: 0; }
.drop-sent { margin-top: 12px; max-height: 40vh; overflow-y: auto; }
.login-card h1 { text-align: center; font-size: 22px; margin-bottom: 4px; }
.login-card .sub { text-align: center; color: var(--text-2); margin-bottom: 22px; }

/* ---------- Page publique ---------- */
.public-top { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.public-top .public-title { min-width: 0; flex: 1; }
.public-top .title { font-weight: 600; font-size: 16px; }
.public-top .sub { color: var(--text-2); font-size: 12.5px; }
/* Lien public d'un élément (public.js) : le fichier seul, au centre. */
.public-el { display: grid; place-items: center; min-height: calc(100vh - 66px); padding: 20px; }
.public-el-media { display: block; max-width: 100%; max-height: calc(100vh - 110px); border-radius: var(--r-md); background: #000; }
.public-el-audio { width: min(520px, 100%); }
.public-el-msg { text-align: center; color: var(--text-2); }
.public-el-msg .ico { width: 36px; height: 36px; margin-bottom: 8px; }

/* ---------- Divers ---------- */
.kbd { display: inline-block; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 11px; color: inherit; } /* la couleur de sa phrase, lisible aussi sur le fond sombre du lecteur */
/* Proposition de la page Notion d'un projet (browser.js, Réglages du projet) : le texte, puis « Garder »
   et « Reprendre » ; au téléphone, les deux boutons passent sous le texte, et suivent une rotation. Le
   lien reste en ligne dans sa phrase (exempté des 44 px, WCAG 2.5.8). */
.np-row { flex-wrap: wrap; }
.np-row .np-label .sub { white-space: normal; } /* même poids que .group-row .label .sub, et après elle */
.np-link { white-space: nowrap; }
@media (max-width: 600px) {
  .np-row > .np-label { flex: 1 1 calc(100% - 40px); }
  .np-row > .np-btn { flex: 1 1 40%; }
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); }
.stat .v { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.stat .l { font-size: 12px; color: var(--text-2); }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; padding: 8px 10px; font-size: 11.5px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--line); }
.table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--text-2); }
.search-box { position: relative; }
.search-box .input { padding-left: 32px; border-radius: 980px; background: var(--bg-sunken); border-color: transparent; }
.search-box .input:focus { background: var(--bg-elev); }
.search-box .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 16px; height: 16px; }
/* ✕ d'effacement (recherche des projets, projectlist.js) : à la place de celui du navigateur. */
.search-box input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-box:has(.search-clear:not(.hidden)) .input { padding-right: 36px; }
.search-box .search-clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; color: var(--text-2); }
.search-box .search-clear .ico { position: static; transform: none; color: inherit; width: 14px; height: 14px; }
@media (hover: none), (pointer: coarse) {
  .search-box:has(.search-clear:not(.hidden)) .input { padding-right: 44px; }
  .search-box .search-clear { right: 0; width: 44px; height: 44px; }
}
/* Menu « ⋯ » commun (menu() de ui.js) : verre dépoli opaque, plein sans flou ou en transparence réduite. */
.menu { position: fixed; z-index: 120; min-width: 210px; max-width: min(360px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto; padding: 5px; background: var(--glass-menu); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); animation: modalin 0.15s var(--ease); }
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: none; border-radius: 6px; background: transparent; color: var(--text); text-align: left; font-size: 13.5px; cursor: pointer; }
.menu button:hover:not(:disabled), .menu button:focus-visible { background: var(--accent); color: var(--on-accent); outline: none; }
.menu button:disabled { opacity: 0.4; cursor: default; }
.menu button.danger { color: var(--bad-text); }
.menu button.danger:hover:not(:disabled), .menu button.danger:focus-visible { background: var(--bad-fill); color: #fff; }
.menu hr { border: none; border-top: 1px solid var(--line); margin: 4px 6px; }
.menu-title { padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-heading { padding: 8px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.menu-label { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; text-overflow: ellipsis; }
.menu-label small { font-size: 11.5px; color: var(--text-2); white-space: normal; }
.menu button:hover:not(:disabled) .menu-label small, .menu button:focus-visible .menu-label small { color: inherit; opacity: 0.85; }
.menu-note { padding: 6px 10px; font-size: 12px; color: var(--text-2); }
.menu-check { flex: none; color: var(--accent-text); }
.menu button:hover .menu-check, .menu button:focus-visible .menu-check { color: inherit; }
.qr { display: block; margin: 10px auto; image-rendering: pixelated; border-radius: 8px; }
.list-pick { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
.list-pick .pick { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); cursor: pointer; }
.list-pick .pick:first-child { border-top: none; }
.list-pick .pick:hover { background: var(--bg-sunken); }
.list-pick .pick.linked { opacity: 0.55; cursor: default; }
.list-pick .pick .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 12px; border-radius: 980px; border: 1px solid var(--line-strong); background: var(--bg-elev); font-size: 13px; cursor: pointer; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.mobile-only { display: none !important; }
.viewer.embedded { position: static; flex: 1; min-height: 0; animation: none; }

@media (max-width: 1100px) {
  .toolbar .search-box { width: 130px !important; }
  .crumbs button { max-width: 160px; }
}
/* Projets : la recherche passe avant les autres contrôles ; serrés, ils gardent leurs icônes. */
.toolbar .search-box.search-main { flex: 0 1 260px; min-width: 150px; width: auto !important; }
.toolbar .client-filter { flex: 0 1 auto; min-width: 0; max-width: 200px; }
@media (max-width: 1100px) {
  .toolbar .search-box.search-main { flex: 1 1 200px; max-width: 320px; }
  .toolbar .client-filter { max-width: 150px; }
  .toolbar .client-view .label, .toolbar .search-main ~ .btn-primary .label { display: none; }
}
@media (max-width: 600px) {
  .toolbar .search-box.search-main { flex: 1 1 auto; min-width: 0; }
  .toolbar .client-filter { max-width: 110px; }
}

/* Menu « ⋯ » des vignettes : au survol sur ordinateur, toujours visible sur tactile. */
.tile .tile-menu { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,0.45); color: #fff; opacity: 0; transition: opacity 0.15s; z-index: 1; }
.tile:hover .tile-menu { opacity: 1; }
.tile .tile-menu:hover { background: rgba(0,0,0,0.7); color: #fff; }
.file-list .frow .row-menu { width: 30px; height: 30px; }

@media (hover: none) {
  .tile .tile-menu { opacity: 1; width: 44px; height: 44px; right: 4px; top: 4px; } /* cible de 44 px au doigt */
  .tile .check { display: flex; }
  .kbd-hint { display: none !important; }
  /* Cibles au doigt : 44 px (design commun), sur les trois sites. */
  .btn { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .segmented button { min-height: 44px; padding: 7px 12px; }
  .cmt .cacts { opacity: 1; }
}

@media (max-width: 860px) {
  .mobile-only { display: inline-flex !important; }
  .sidebar { display: none; }
  .sidebar.open { display: flex; position: fixed; inset: 0 auto 0 0; width: min(300px, 82vw); z-index: 61; box-shadow: var(--shadow-lg); padding-top: env(safe-area-inset-top); }
  .backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fadein 0.15s; }
  .toolbar { padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); gap: 6px; }
  .toolbar h1 { font-size: 17px; }
  .content { padding: 12px; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .page-title h1 { font-size: 24px; }
  .project-grid { grid-template-columns: 1fr; }
  .file-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .file-list .frow, .file-list .head { grid-template-columns: 28px 44px 1fr 72px 32px; }
  .file-list .frow .col:nth-child(5), .file-list .frow .col:nth-child(6), .file-list .head > :nth-child(5), .file-list .head > :nth-child(6) { display: none; }
  .selection-bar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; margin: 0; flex-wrap: wrap; justify-content: center; padding: 8px 10px; border-radius: 16px; }
  .upload-panel { right: 10px; left: 10px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom)); max-height: 50vh; }
  .form-grid { grid-template-columns: 1fr; }
  .input, .select, .textarea { font-size: 16px; } /* évite le zoom automatique d'iOS à la saisie */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; border-bottom: none; padding-bottom: env(safe-area-inset-bottom); animation: sheetin 0.25s var(--ease); }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1; min-height: 44px; }
  .modal-actions .spacer { flex-basis: 100%; height: 0; } /* action à part (Vider la corbeille) sur sa propre ligne */
  .menu { position: fixed !important; left: 10px !important; right: 10px; top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom)); min-width: 0; padding: 8px; border-radius: 16px; animation: sheetin 0.2s var(--ease); }
  .menu button { padding: 12px; font-size: 15px; }
  .group-row { flex-wrap: wrap; }
  .public-top { flex-wrap: wrap; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); }
  .public-top .search-box { order: 5; width: 100% !important; }
  /* Mobile : titre sur toute la ligne à côté du logo, boutons dessous à parts égales. */
  .public-top .public-title { flex: 1 1 calc(100% - 56px); }
  .public-top > .btn { flex: 1 1 auto; justify-content: center; }

  /* Lecteur : vidéo en haut, commentaires en dessous. */
  .viewer .vtop { padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top)); gap: 4px; }
  .viewer .vtop .size { display: none; }
  .viewer .vbody { flex-direction: column; }
  .viewer .stage { flex: none; }
  .viewer .media-wrap { height: min(42vh, 56.25vw); }
  .viewer .media-wrap video { height: 100%; }
  .vctrl { padding: 6px 10px 8px; }
  .timeline { height: 30px; }
  .timeline .track, .timeline .buffered, .timeline .played { top: 13px; }
  .timeline .knob { top: 8px; }
  .timeline .mark { top: 5px; }
  .vbtns .tc { min-width: 0; flex: none; white-space: nowrap; font-size: 12px; }
  .vbtns .tc.dim, .vbtns .vol, .vbtns .io, .vbtns .vcmt .lbl { display: none; }
  .vside { display: flex; width: 100%; flex: 1; min-height: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }
  .vside .compose { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

@keyframes sheetin { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

.vside .pane { min-height: 0; }

@media (max-width: 600px) {
  .toolbar-browser .search-box, .toolbar-browser .segmented { display: none; }
  .toolbar .btn-primary .label { display: none; }
  .toolbar .btn-primary { padding: 7px 11px; }
  .toolbar .icon-btn { width: 36px; height: 36px; }
  .crumbs { min-width: 60px; }
  .crumbs button { max-width: 120px; }
  .viewer .vtop .icon-btn { width: 34px; height: 34px; }
  .viewer .vtop .counter, .viewer .vtop .side-toggle { display: none; }
  .viewer .vtop .title { font-size: 14px; }
  .file-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Suivi des livraisons de la régie ---------- */
.activity { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 340px; max-width: calc(100vw - 32px); background: var(--glass); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: fadein 0.2s; }
.activity-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: transparent; border: none; color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer; text-align: left; }
.activity-head .chev { display: inline-flex; transform: rotate(90deg); transition: transform 0.2s; }
.activity.collapsed .activity-head .chev { transform: rotate(-90deg); }
.activity-list { max-height: 50vh; overflow-y: auto; border-top: 1px solid var(--line); }
.activity-row { padding: 10px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.activity-row:last-child { border-bottom: none; }
.activity-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.activity-title .name { font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.activity-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3, #8e8e93); flex: none; }
.activity-row.run .dot { background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.activity-row.ok .dot { background: var(--success, #30d158); }
.activity-row.err .dot { background: var(--danger, #ff453a); }
.activity-row.warn .dot { background: var(--warning, #ff9f0a); animation: pulse 1.4s ease-in-out infinite; }
.activity-row.pause .dot { background: var(--text-3, #aeaeb2); }
.activity-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; position: relative; }
.activity-bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.6s var(--ease, ease); }
.activity-bar.indeterminate span { position: absolute; animation: slide 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes slide { 0% { left: -35%; } 100% { left: 100%; } }
@media (max-width: 600px) {
  .activity { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-width: none; }
}
.viewer ~ .activity, body:has(.viewer:not(.embedded)) .activity { display: none; }

/* ---------- Téléphones, tablettes et écrans tactiles ---------- */
/* Hauteurs : sur Safari et Chrome mobiles, 100vh compte la barre d'adresse (le bas des fenêtres
   et des panneaux passait dessous) ; dvh suit la zone vraiment visible. La valeur en vh reste
   au-dessus pour les navigateurs qui ne connaissent pas dvh. */
#app { height: 100dvh; }
.modal { max-height: calc(100dvh - 40px); }
.upload-panel { max-height: 60dvh; bottom: calc(20px + var(--activity-h, 0px)); } /* au-dessus du panneau Régie */
.activity-list { max-height: 50dvh; }
.trash-list { max-height: min(60dvh, 520px); }

/* Encoche et barre d'accueil en paysage : rien sous les bords arrondis de l'écran. */
#toasts { top: calc(16px + env(safe-area-inset-top)); }
#app, .viewer:not(.embedded) { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.content { padding-bottom: max(20px, env(safe-area-inset-bottom), var(--activity-h, 0px)); } /* panneau Régie : activity.js */
.modal-overlay { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }

/* Cartes de projet : un titre long (insécable) ne doit pas élargir la grille au-delà de l'écran. */
.project-grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.project-card { min-width: 0; }

/* Fil d'Ariane : le dossier courant occupe toute la largeur du fil avant d'être coupé (le fil
   défile jusqu'à lui) ; les parents prennent au plus 45 % du fil au lieu de 120 à 260 px fixes. */
.crumbs button.current { max-width: 100%; }
.crumbs button:not(.current) { max-width: min(260px, 45%); } /* parents : selon la place, plus de plafond fixe */

/* Date des commentaires jamais coupée en deux lignes. */
.cmt .chead > span:last-child { white-space: nowrap; }

/* Titre de page et ses boutons : les boutons passent dessous plutôt que de se chevaucher. */
.page-title { flex-wrap: wrap; row-gap: 10px; }
.toolbar > .icon-btn, .toolbar > .btn, .activity-title > .btn, .activity-title > .icon-btn { flex: none; }

/* Tactile : cibles d'au moins 44 px (recommandation Apple et Android) et champs en 16 px, faute
   de quoi Safari iOS zoome à la saisie (en paysage aussi, au-delà de 860 px). */
@media (hover: none), (pointer: coarse) {
  .btn, .btn-sm { min-height: 44px; min-width: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .input, .select, .textarea { min-height: 44px; font-size: 16px; }
  .vside .compose.collapsed .textarea { min-height: 44px; }
  .crumbs button { min-height: 44px; min-width: 44px; }
  .segmented button, .segmented > a { min-height: 44px; min-width: 44px; justify-content: center; }
  .side-item, .user-chip, .menu button, .activity-head { min-height: 44px; }
  label.check, label.switch { min-height: 44px; }
  .chip { min-height: 40px; padding: 8px 14px; }
  .list-pick .pick { min-height: 48px; }
  .vbtns .speed { font-size: 16px; min-height: 44px; padding: 4px 8px; }
  .vbtns .vol { height: 40px; }
  .cmt .cacts .icon-btn { width: 44px; height: 44px; }
  .uitem .uact { width: 44px; height: 44px; }
  .tx-cm-more { width: 44px; height: 44px; }
  .tx-cm-done { min-height: 44px; }
  .vside .tabs button { min-height: 44px; }
  .vbtns .btn.io, .vbtns .btn.speed { min-width: 44px; }
  .viewer .vtop .icon-btn, .toolbar .icon-btn { width: 44px; height: 44px; }
  /* Pastilles des vignettes (sélection, menu ⋯) : zone de toucher agrandie, même dessin. */
  .tile .check::before, .tile .tile-menu::before { content: ""; position: absolute; inset: -10px; }
  /* Replis (« Noms des propriétés Notion »…) et liens dans le texte d'une ligne : zone agrandie. */
  summary { padding: 12px 0; }
  .group-row .sub .link-btn { padding: 12px 6px; margin: -12px -6px; }
}

@media (max-width: 860px) {
  .content { padding-bottom: max(calc(80px + env(safe-area-inset-bottom)), var(--activity-h, 0px)); } /* barres flottantes */
  .sidebar.open { padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); }
  /* Lignes à boutons : le libellé garde de quoi se lire, les boutons passent à la ligne (les
     lignes à simple étiquette ou chevron restent sur une ligne). */
  .group-row:has(> .btn, > select) .label { flex: 1 1 140px; }
  /* Boutons des feuilles : largeur selon le libellé, sur deux lignes au besoin (« Supprimer
     définitivement » débordait de son bouton à 320 px). */
  .modal-actions .btn { flex: 1 1 auto; white-space: normal; line-height: 1.2; }
  .modal-overlay { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } /* feuille pleine largeur */
  .modal { max-height: 92dvh; }
  .upload-panel { max-height: 50dvh; }
  /* Barres flottantes au-dessus du panneau Régie (même bas d'écran). */
  .selection-bar, .upload-panel { bottom: calc(10px + env(safe-area-inset-bottom) + var(--activity-h, 0px)); }
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  /* Lecteur : la vidéo garde sa forme (une vidéo verticale ne repousse plus les commentaires
     hors de l'écran), au plus la moitié de la hauteur. */
  .viewer .media-wrap { flex: none; height: auto; min-height: 120px; }
  .viewer .media-wrap video, .viewer .media-wrap img.full { width: auto; height: auto; max-width: 100%; max-height: 48vh; max-height: 48svh; }
}

@media (max-width: 600px) {
  /* Onglets (Administration) : sur leur propre ligne, à parts égales, défilants au besoin. */
  .toolbar-tabs { flex-wrap: wrap; row-gap: 8px; }
  .toolbar-tabs > .segmented { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .toolbar-tabs > .segmented::-webkit-scrollbar { display: none; }
  .toolbar-tabs > .segmented button { flex: 1 0 auto; justify-content: center; }
  /* Barre de l'explorateur : Nouveau dossier, Actualiser, Filtrer et l'affichage passent dans
     le menu Options ; le filtre s'ouvre sous la barre. */
  .toolbar-browser .wide-only { display: none; }
  .toolbar-browser.filtering { padding-bottom: 60px; }
  .toolbar-browser.filtering .search-box { display: block; position: absolute; left: 12px; right: 12px; bottom: 8px; width: auto !important; }
  .activity-list { max-height: 40dvh; }
}

@media (max-width: 420px) {
  /* Lecteur : image par image réservé aux écrans plus larges, pour garder des boutons de 44 px. */
  .vbtns .step { display: none; }
  .vbtns { gap: 4px; }
}

/* Téléphone en paysage : vidéo et commentaires côte à côte (empilés, les commentaires et leur
   champ de saisie sortaient de l'écran). */
@media (orientation: landscape) and (max-height: 500px) {
  .viewer .vbody { flex-direction: row; }
  .viewer .stage { flex: 1; min-width: 0; }
  .viewer .media-wrap { flex: 1; height: auto; min-height: 0; }
  .viewer .media-wrap video, .viewer .media-wrap img.full { max-height: 100%; }
  .vside { width: min(340px, 42vw); flex: none; border-top: none; border-left: 1px solid rgba(255,255,255,0.08); }
  .viewer .vtop { padding-top: 6px; padding-bottom: 6px; }
}

/* ---------- Sessions de régie d'un projet (pages/sessions.js) ---------- */
/* LUT des ISO caméras d'une session (sessions.js, contrat de B) */
.sess-lut-tag { background: var(--accent-soft); color: var(--accent-text); }
.sess-recalc { display: flex; flex-direction: column; gap: 10px; }
.sess-recalc p { margin: 0; }
.sess-recalc-notes { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.sess-luts { display: flex; flex-direction: column; gap: 10px; }
.sess-lut-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); }
.sess-lut { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.sess-lut + .sess-lut { border-top: 1px solid var(--line); }
.sess-lut-name { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.sess-lut .select { width: auto; min-width: 160px; flex: none; }
@media (max-width: 560px) { .sess-lut { flex-wrap: wrap; } .sess-lut .select { flex: 1 1 100%; } }
.sess-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sess-count.err { background: var(--danger); }
.sess-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.sess-filters .search-box { flex: 0 1 240px; min-width: 160px; }
.sess-filters .select { width: auto; max-width: 280px; min-width: 0; }
.sess-day { margin-bottom: 26px; }
/* Jour collé en haut pendant le défilement : on sait toujours quelle journée on regarde. */
/* Jour collé en haut : il recouvre aussi la marge haute de la page (rien ne dépasse au-dessus). */
.sess-day-head { position: sticky; top: -20px; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px;
  padding: 28px 0 8px; margin: -20px 0 4px; background: var(--bg); }
.sess-day-head h2 { font-size: 19px; }
.sess-dayflow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 14px; }
.sess-hour { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; }
.sess-hour-label { padding-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sess-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.sess-card { display: flex; flex-direction: column; width: 280px; max-width: 100%; overflow: hidden; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--radius); transition: box-shadow 0.15s var(--ease); }
.sess-card:hover { box-shadow: var(--shadow); }
.sess-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 9; padding: 0;
  border: none; background: var(--bg-sunken); color: var(--text-3); cursor: pointer; overflow: hidden; }
.sess-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sess-thumb .ico.lg { width: 34px; height: 34px; stroke-width: 1.3; }
/* Pastilles sur l'image : fond sombre, point de couleur selon l'état. */
.sess-thumb .tag { position: absolute; left: 8px; top: 8px; gap: 6px; background: rgba(0,0,0,0.62); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sess-thumb .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.7); }
.sess-thumb .tag.tag-accent::before { background: var(--accent); }
.sess-thumb .tag.tag-success::before { background: var(--success); }
.sess-thumb .tag.tag-warn::before { background: var(--warning); }
.sess-thumb .tag.tag-danger::before { background: var(--danger); }
.sess-thumb .dur { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 5px; background: rgba(0,0,0,0.65); color: #fff;
  font-size: 11px; font-family: var(--mono); }
.sess-thumb .sess-play { position: absolute; inset: 0; margin: auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; opacity: 0; transition: opacity 0.15s; }
.sess-thumb:hover .sess-play, .sess-thumb:focus-visible .sess-play { opacity: 1; }
.sess-thumb .sess-play .ico { width: 20px; height: 20px; }
.sess-thumb .activity-bar { position: absolute; left: 0; right: 0; bottom: 0; display: block; height: 4px; border-radius: 0; background: rgba(0,0,0,0.35); }
.sess-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px 12px; }
.sess-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-prog { display: inline-block; margin-right: 6px; padding: 1px 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent);
  font-size: 10.5px; font-weight: 700; vertical-align: 1px; }
.sess-guests { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; }
.sess-guests .ellipsis { min-width: 0; }
.sess-guests .ico { flex: none; width: 14px; height: 14px; color: var(--text-3); }
/* Session rangée par rôle de dossier : « Rushs · Projets · Audio », un lien par partie. */
.sess-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; }
.sess-parts a { color: var(--accent-text); }
@media (hover: none), (pointer: coarse) { .sess-parts a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; } }
.ad-roles-note { margin: 4px 0 8px; }
.sess-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-detail.err { color: var(--danger); }
.sess-angles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sess-angles .tag { padding: 1px 6px; font-size: 10.5px; }
.sess-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; }
.sess-actions .spacer { flex: 1; min-width: 0; }
.sess-nle { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--bg-sunken); }
.sess-nle button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: none; border-radius: 6px; background: transparent;
  color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.sess-nle button:hover { background: var(--bg-elev); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.sess-soft { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--text-3); }
.sess-soft.fcp { background: #af52de; }
.sess-soft.premiere { background: #5e5ce6; }
.sess-soft.resolve { background: #ff9f0a; }
.btn-sessions .sess-count { margin-left: 2px; }
.menu button .ellipsis { min-width: 0; max-width: 320px; }

@media (hover: none) {
  .sess-thumb .sess-play { opacity: 0.85; width: 40px; height: 40px; }
}
@media (hover: none), (pointer: coarse) {
  .sess-nle button { min-height: 40px; padding: 4px 10px; }
}

@media (max-width: 600px) {
  .toolbar .btn-sessions .label { display: none; }
  .toolbar .btn-sessions { padding: 7px 11px; }
  .sess-filters .search-box { flex: 1 1 100%; }
  .sess-filters .select { flex: 1 1 40%; max-width: none; }
  .sess-filters .segmented { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .sess-filters .segmented::-webkit-scrollbar { display: none; }
  .sess-filters .segmented button { flex: 1 0 auto; justify-content: center; }
  /* Téléphone : liste compacte par jour, vignette à gauche ; l'image lance la lecture. */
  .sess-dayflow { display: block; }
  .sess-hour { gap: 6px; margin-bottom: 12px; }
  .sess-grid { flex-direction: column; gap: 8px; }
  .sess-card { flex-direction: row; align-items: flex-start; width: 100%; }
  .sess-thumb { flex: none; width: 128px; margin: 8px 0 8px 8px; border-radius: 8px; }
  .sess-thumb .tag { left: 4px; top: 4px; padding: 1px 6px; font-size: 10.5px; }
  .sess-thumb .dur { right: 4px; bottom: 4px; }
  .sess-thumb .sess-play { display: none; }
  .sess-body { padding: 8px 10px; }
  .sess-angles, .sess-actions .btn, .sess-nle { display: none; }
  /* Dossier en bas à droite de la carte, sans ligne à lui. */
  .sess-card { position: relative; }
  .sess-body { padding-right: 44px; }
  .sess-actions { position: absolute; right: 4px; bottom: 4px; margin: 0; padding: 0; }
  .sess-actions .spacer { display: none; }
  .sess-actions .icon-btn { width: 36px; height: 36px; }
}
@media (max-width: 860px) {
  .sess-day-head { top: -12px; padding-top: 20px; margin-top: -12px; }
}
@media (max-width: 600px) and (hover: none) {
  .sess-actions .icon-btn { width: 44px; height: 44px; }
}

/* ---------- Corbeille : toast « Annuler », page globale (pages/trash.js) ---------- */
.side-slot { display: contents; }
.toast.toast-actions { display: flex; align-items: center; gap: 10px; padding-right: 8px; pointer-events: auto; }
/* Nouvelle version en ligne (ui.js, watchVersion) : en bas, au-dessus de tout sauf les fenêtres. */
.version-bar { position: fixed; z-index: 190; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 24px); padding: 6px 6px 6px 14px; border-radius: 980px; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: 13.5px; font-weight: 500; color: var(--text); }
.version-bar > span { min-width: 0; }
.toast-btn { flex: none; padding: 4px 11px; border: 0; border-radius: 980px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; }
.toast-btn:hover { background: var(--accent); color: var(--on-accent); }
.trash-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.trash-filters .search-box { flex: 1 1 220px; min-width: 0; }
.trash-filters .select { flex: 0 1 280px; width: auto; min-width: 0; }
.trash-page-list .group-row input[type=checkbox] { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.trash-page-list .sub.right { flex: none; text-align: right; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.trash-page-list .sub.right .warn { color: var(--warning); }
.trash-page-list .trash-when-phone { display: none; }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
/* Boutons collés en bas pendant le défilement, dès qu'un élément est choisi. */
.trash-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 10px 0; background: var(--bg); }
.trash-bar:not(.active) .trash-picked { display: none; }
@media (hover: none), (pointer: coarse) {
  .toast-btn { min-height: 36px; padding: 6px 14px; }
  .trash-page-list .group-row input[type=checkbox] { width: 22px; height: 22px; }
}
@media (max-width: 600px) {
  .trash-page-list .sub.right { display: none; }
  .trash-page-list .trash-when-phone { display: block; }
  .trash-page-list .trash-when-phone .warn { color: var(--warning); }
  .trash-filters .select { flex: 1 1 100%; }
  .trash-bar { flex-wrap: wrap; bottom: calc(var(--activity-h, 0px)); }
  .trash-bar .btn { flex: 1 1 auto; }
  .trash-bar .spacer { display: none; }
  .toast.toast-actions { flex-wrap: wrap; justify-content: center; border-radius: 18px; }
}

/* ---------- Composants communs (docs/finition/design-commun.md) ---------- */
/* Pastille à point : <span class="tag dot ok">Prêt</span> ; point seul : <i class="led warn"></i>. */
.tag.dot::before, .led { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-3); }
.tag.dot::before { margin-right: 6px; }
.tag.dot.ok::before, .led.ok { background: var(--ok); }
.tag.dot.warn::before, .led.warn { background: var(--warn); }
.tag.dot.bad::before, .led.bad { background: var(--bad); }
.tag.dot.info::before, .led.info { background: var(--info); }
.tag.dot.regie::before, .led.regie { background: var(--regie); }
.led.onair { background: var(--onair); box-shadow: 0 0 0 2px var(--bad-soft); }
/* Encadré de message dans une page ou une modale : <div class="note warn">{icône} texte</div>. */
.note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); background: var(--neutral-soft); color: var(--text); font-size: 13px; line-height: 1.45; }
.note > .ico { flex: none; margin-top: 1px; color: var(--text-2); }
.note.ok { background: var(--ok-soft); } .note.ok > .ico { color: var(--ok-text); }
.note.warn { background: var(--warn-soft); } .note.warn > .ico { color: var(--warn-text); }
.note.bad { background: var(--bad-soft); } .note.bad > .ico { color: var(--bad-text); }
.note.info { background: var(--info-soft); } .note.info > .ico { color: var(--info-text); }
/* Bouton enfoncé (mode actif, filtre appliqué). */
.btn.on { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
/* Réglage appliqué aussitôt : « Enregistré ✓ » discret qui s'efface (savedMark, flashSaved de ui.js). */
.saved-mark { font-size: 12px; color: var(--ok-text); opacity: 0; transition: opacity 0.2s; white-space: nowrap; }
.saved-mark.on { opacity: 1; }
.sw-row { display: flex; align-items: center; gap: 10px; }
.sw-row > .switch, .sw-row > .select { flex: 1; min-width: 0; }
/* Aide intégrée (/static/v/4f009f88ca/js/help.js) : « ? », panneau court, bulle du premier passage. */
.help-btn { width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: 14px; color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.help-btn:hover { color: var(--text); }
.help-pop { position: fixed; z-index: 1200; width: 340px; max-width: calc(100vw - 16px); padding: 12px 14px 10px; border-radius: 14px; background: var(--bg-elev); color: var(--text); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(0,0,0,0.18); }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.help-pop ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
/* Sous les fenêtres (100), les menus (120) et les toasts (200) : la bulle ne cache jamais un bouton Fermer ni « Annuler ». */
.help-bubble { position: fixed; z-index: 90; padding: 6px 12px; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,0.2); cursor: pointer; animation: helpin 0.25s ease-out; }
@media (hover: none), (pointer: coarse) { .help-bubble { min-height: 44px; padding: 10px 16px; } } /* au doigt : 44 px, même dessin à la souris */
@keyframes helpin { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .help-bubble, .menu { animation: none; } }
@media (max-width: 760px) { .help-btn { width: 40px; height: 40px; } }
@media (hover: none), (pointer: coarse) { .menu button { min-height: 44px; } }
/* Sélecteur de produit (productSwitcher, ui.js) : le même bouton sur les trois sites, à la place que
   lui donne chaque mise en page (barre latérale, barre du haut) ; la marque du produit, son nom, un chevron. */
.pd-btn { display: inline-flex; align-items: center; gap: 9px; flex: none; min-width: 0; height: 40px; margin: 0 -6px; padding: 0 8px 0 6px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; }
.pd-btn:hover { background: rgba(127,127,127,0.12); }
.pd-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.pd-btn .logo-mark { height: 26px; }
.pd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pd-chev { display: inline-flex; color: var(--text-2); transform: rotate(90deg); }
@media (hover: none), (pointer: coarse) { .pd-btn { min-height: 44px; } }
/* Marques des produits (productMark, ui.js) : même famille, une couleur chacun ; dans le menu, en petit. */
.menu .logo-mark { height: 20px; }
/* Connexion par clé d'accès (loginkey.js), sous « Se connecter ». */
.login-key { margin-top: 8px; }

/* ---------- Dock : widgets sur une grille de 12 colonnes (edition/live/dock.js) ----------
   Le direct et la vue d'un contenu d'Édition, l'éditeur de disposition d'admin.tdlm.tv. */
.dk { position: relative; }
.dk-w { position: absolute; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  transition: left 0.18s var(--ease), top 0.18s var(--ease), width 0.18s var(--ease), height 0.18s var(--ease); }
.dk-w.moving { transition: none; z-index: 10; box-shadow: var(--shadow-lg); }
.dk-head { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; flex: none; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--text-2); cursor: grab; user-select: none; touch-action: none; }
.dk-w.moving .dk-head { cursor: grabbing; }
.dk-head .icon-btn { width: 26px; height: 26px; font-size: 12px; }
.dk-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-body { position: relative; flex: 1; min-height: 0; overflow: auto; container-type: inline-size; }
.dk-grip { position: absolute; right: 0; bottom: 0; z-index: 2; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; }
.dk-grip::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); border-radius: 0 0 3px 0; }
/* Disposition figée (la vue d’un contenu) : ni poignée ni masquage. */
/* Coin gauche : seulement pour un widget collé au bord droit (il ne pourrait que rétrécir). */
.dk-grip.dk-grip-l { display: none; left: 0; right: auto; cursor: nesw-resize; }
.dk-at-right > .dk-grip.dk-grip-l { display: block; }
.dk-grip-l::after { left: 4px; right: auto; border-right: 0; border-left: 2px solid var(--text-3); border-radius: 0 0 0 3px; }
/* Poignée du bas d'un widget « grow: 'h' » (le Texte d'un contenu) : la hauteur seule, même
   disposition figée et sur téléphone. */
.dk-grip-b { position: absolute; left: 50%; bottom: 0; z-index: 2; width: 72px; height: 14px; transform: translateX(-50%); border-radius: 7px; cursor: ns-resize; touch-action: none; }
.dk-grip-b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 4px; margin: -2px 0 0 -18px; border-radius: 2px; background: var(--text-3); opacity: 0.6; }
.dk-grip-b:hover::after, .dk-grip-b:focus-visible::after { opacity: 1; background: var(--accent); }
.dk-grip-b:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.dk-locked .dk-grip, .dk-locked .dk-hide, .dk-locked .dk-at-right > .dk-grip-l { display: none; }
.dk-locked .dk-head { cursor: default; }
/* …sauf la poignée d'un widget dont la taille est un réglage de chacun (le Lecteur d'un contenu). */
@media (min-width: 761px) { .dk-locked .dk-personal .dk-grip { display: block; } .dk-locked .dk-personal .dk-grip-l { display: none; } }
.dk-ghost { position: absolute; border-radius: 12px; border: 2px dashed var(--accent); background: var(--accent-soft); pointer-events: none; }
/* Téléphone : widgets empilés. */
@media (max-width: 760px) {
  .dk { display: flex; flex-direction: column; gap: 10px; height: auto !important; }
  .dk-w { position: relative; height: 340px; }
  .dk-grip { display: none; } .dk-head { cursor: default; }
}
@media (hover: none), (pointer: coarse) {
  .dk-head { height: 48px; }
  .dk-head .icon-btn { width: 44px; height: 44px; }
  .dk-grip { width: 40px; height: 40px; }
  .dk-grip::after { right: 8px; bottom: 8px; width: 12px; height: 12px; }
  .dk-grip-b { width: 88px; height: 44px; } /* après .dk-grip-b : 44 px au doigt */
}

/* ---------- Console de direct d'Édition Régie (connPill, sessionBanner de ui.js ; docs/edition/console.md) ---------- */
.conn-pill { display: inline-flex; align-items: center; gap: 7px; flex: none; min-width: 0; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--bg-elev); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.conn-pill:hover { background: var(--bg-sunken); }
.conn-pill:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ok); }
.conn-sub { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.conn-pill[data-state="off"], .conn-pill[data-state="retry"] { border-color: transparent; background: var(--warn-soft); color: var(--warn-text); }
.conn-pill[data-state="off"] .conn-dot, .conn-pill[data-state="retry"] .conn-dot { background: var(--warn); }
.conn-pill[data-state="retry"] .conn-dot { animation: connpulse 1.2s ease-in-out infinite; }
@keyframes connpulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .conn-pill .conn-dot { animation: none; } }
@media (max-width: 1279px) { .conn-sub { display: none; } } /* barre étroite : l'état seul, la phrase au clic et en infobulle */
@media (hover: none), (pointer: coarse) { .conn-pill { min-height: 44px; } }
.session-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; flex: none; padding: 6px 16px; border-bottom: 1px solid var(--line);
  background: var(--bad-soft); color: var(--bad-text); font-size: 13px; }
.session-banner .btn { margin-left: auto; }
@media (hover: none), (pointer: coarse) { .session-banner .btn { min-height: 44px; } }

/* Safari : pas de bouton de contacts ni de clés dans un champ de saisie libre (autocomplete="off",
   posé par h() de ui.js) ; les champs de connexion et de compte gardent les leurs. Une règle par
   pseudo-élément : un navigateur qui ne le connaît pas ignore la règle entière. */
input[autocomplete="off"]::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; }
input[autocomplete="off"]::-webkit-credentials-auto-fill-button { visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; }

/* Commentaire et sonores (voix.js d'Édition, carte « voix » du lecteur commun) : types de passage.
   Commentaire : l'accent ; sonore : le vert ; plateau : le gris neutre. */
.tag.vx-t-off { background: var(--accent-soft); color: var(--accent-text); }
.tag.vx-t-son { background: var(--ok-soft); color: var(--ok-text); }
.tag.vx-t-pla { background: var(--neutral-soft); color: var(--neutral-text); }
.vx-cm { display: flex; flex-direction: column; gap: 8px; }
.vx-cm-h { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.vx-cm-pas { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vx-cm-pas li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 13px; }
.vx-tc-link { border: 0; padding: 0; background: none; color: var(--accent-text); font: inherit; font-variant-numeric: tabular-nums; font-weight: 600; cursor: pointer; }
.vx-tc-link:hover { text-decoration: underline; }
.vx-cm-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: none), (pointer: coarse) { .vx-tc-link { min-height: 44px; min-width: 44px; } } /* après .vx-tc-link : 44 px au doigt */