/* ══════════════════════════════════════════════════════════════════════════
   app-tools.css — composants communs des pages OUTILS de l'espace connecté :
   nouvelle transcription (new.html), lot (bulk.html), workflows (workflows.html).
   Maquette validée le 23/09/2026 (maquette/outils.css + ds.css).

   Loi : DESIGN.md racine. Les jetons ci-dessous sont ceux de history.html et
   account.html (mêmes noms, mêmes valeurs) : ces trois pages n'ont pas de
   <style> propre pour les couleurs, tout hex vit ici, le reste ne consomme que
   var(). Exceptions assumées : #fff sur fond plein, couleurs de marque des
   plateformes (logos tiers), et les nuances -700 déjà signalées dans la maquette.
   La coquille (barre latérale, onglets du bas) reste dans app-shell.css.
   ══════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-light: #ede9fe;
  --primary-50: #f5f3ff;
  --primary-200: #c4b5fd;
  --bg: #ffffff;
  --surface: #f8fafc;
  --surface-2: #f1f5f9;
  --border: #e2e8f0;
  --border-2: #cbd5e1;
  --text: #0f172a;
  --text-muted: #475569;
  --text-light: #5e6a7d;
  --success: #10b981;
  --success-ink: #047857;
  --success-bg: #ecfdf5;
  --error: #ef4444;
  --error-ink: #b91c1c;
  --error-bg: #fef2f2;
  --error-border: #fecaca;
  --warn: #f59e0b;
  --warn-ink: #92400e;
  --warn-bg: #fffbeb;
  --mark: #fde68a;
  --scrim: rgba(15, 23, 42, 0.4);
  --glass: rgba(255, 255, 255, 0.95);
  --shadow-sm: 0 1px 2px rgba(50,50,93,.06);
  --shadow: 0 4px 12px -2px rgba(50,50,93,.10), 0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-md: 0 12px 24px -6px rgba(50,50,93,.14), 0 4px 8px -4px rgba(0,0,0,.06);
  --shadow-lg: 0 30px 45px -30px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.10);
  --shadow-up: 0 -8px 24px -12px rgba(50,50,93,.16);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --ease: cubic-bezier(.22,1,.36,1);
  --transition: var(--dur-ui, 150ms) var(--ease);
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;
  --brand-tiktok: #010101;
  --brand-x: #010101;
  --brand-youtube: #ff0000;
  --brand-facebook: #1877f2;
  --brand-linkedin: #0a66c2;
  --brand-instagram: linear-gradient(135deg, #f9ce34, #ee2a7b 45%, #6228d7);
}
/* clip (et non hidden) : hidden ferait de <body> un conteneur de défilement et
   casserait le position: sticky de la barre latérale et du rail. */
html, body { overflow-x: clip; }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; background: var(--surface); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.6; }
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
input, textarea, select { font-family: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.meta { font-size: 13px; color: var(--text-muted); }

/* ── Boutons (DESIGN.md §4) ───────────────────────────────────────────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; line-height: 1.2; border: 1px solid transparent; cursor: pointer; text-decoration: none; text-align: center; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); box-shadow: var(--shadow-sm); }
.btn-ghost { background: var(--bg); border-color: var(--border-2); color: var(--primary); }
.btn-ghost:hover:not(:disabled) { border-color: var(--primary-200); background: var(--primary-50); }
.btn-quiet { background: transparent; color: var(--text-muted); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--bg); border-color: var(--error-border); color: var(--error-ink); }
.btn-danger:hover:not(:disabled) { background: var(--error-bg); }
.btn-icon { width: 44px; padding: 0; }
.btn:active:not(:disabled) { transform: scale(var(--press-scale, .97)); }
.link { font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--primary); }
.link:hover { text-decoration: underline; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; transition: var(--transition); }
.iconbtn:hover { background: var(--surface-2); color: var(--text); }

.pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.pill-line { background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
.pill-brand { background: var(--primary-light); color: var(--primary-hover); }
.pill-ok { background: var(--success-bg); color: var(--success-ink); }
.pill-err { background: var(--error-bg); color: var(--error-ink); }
.pill-warn { background: var(--warn-bg); color: var(--warn-ink); }
.pill-run { background: var(--primary-50); color: var(--primary-hover); }
.ok-t { color: var(--success-ink); }
.err-t { color: var(--error-ink); }

/* ── Plateformes (logos tiers) ───────────────────────────────────────── */
.plat { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.plat svg { width: 16px; height: 16px; display: block; }
.plat-file { background: var(--primary-light); color: var(--primary); }
.plat-none { background: var(--surface-2); color: var(--text-light); }
/* Vrai logo en couleurs (public/js/brand-logos.js) : tuile claire, bordure fine, logo à ~60 %.
   svg.dk-brand l'emporte sur les tailles fixes des pages (.res-h .plat svg, .item .plat svg). */
.plat.plat-brand { box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); }
.plat.plat-brand svg.dk-brand { width: 60%; height: 60%; }

/* ── Grille de page + rail ───────────────────────────────────────────── */
.pg { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding: 24px 32px 64px; align-items: start; max-width: 1480px; }
.col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; align-content: start; }
.rail { position: sticky; top: 24px; }
@media (max-width: 1180px) { .pg { grid-template-columns: minmax(0, 1fr); } .rail { position: static; } }
@media (min-width: 768px) and (max-width: 900px) { .pg { padding: 24px 24px 64px; } }
@media (max-width: 767px) { .pg { padding: 16px 16px 160px; gap: 16px; } .col { gap: 16px; } }

/* ── Sections ────────────────────────────────────────────────────────── */
.sec { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.sec-h { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
.sec-h > div:first-child { min-width: 0; }
.sec-h h2 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.sec-h p { font-size: 13px; color: var(--text-muted); }
.sec-h .end { margin-inline-start: auto; display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.sec-b { padding: 0 24px 24px; }
.sec-f { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--border); flex-wrap: wrap; }
@media (max-width: 767px) { .sec-h { padding: 16px; flex-wrap: wrap; } .sec-b { padding: 0 16px 16px; } .sec-f { padding: 12px 16px; } }

/* ── Sélecteur segmenté ──────────────────────────────────────────────── */
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--surface-2); max-width: 100%; }
.seg > * { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: var(--transition); min-width: 0; }
.seg > *:hover { color: var(--text); }
.seg > [aria-selected="true"], .seg > [aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: var(--shadow-sm); }
.seg svg { width: 16px; height: 16px; flex-shrink: 0; }
.seg-full { display: flex; width: 100%; }
.seg-full > * { flex: 1; }
@media (max-width: 767px) { .seg > * { min-height: 44px; padding: 0 12px; } }

/* ── Champs ──────────────────────────────────────────────────────────── */
.fld { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 4px 0 12px; background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); min-width: 0; }
[dir="rtl"] .fld { padding: 0 12px 0 4px; }
.fld:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.fld input { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--text); }
.fld input::placeholder { color: var(--text-light); }
.fld > svg { color: var(--text-light); flex-shrink: 0; }
.pick { position: relative; display: flex; align-items: center; min-width: 0; }
.pick select { width: 100%; height: 44px; padding: 0 36px; appearance: none; -webkit-appearance: none; background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: 16px; color: var(--text); cursor: pointer; text-overflow: ellipsis; }
.pick select:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.pick .lead { position: absolute; inset-inline-start: 12px; color: var(--text-light); pointer-events: none; }
.pick .chev { position: absolute; inset-inline-end: 12px; color: var(--text-light); pointer-events: none; }
.lbl { display: block; font-size: 13px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
textarea.area { width: 100%; min-height: 120px; padding: 12px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: 16px; line-height: 1.5; color: var(--text); background: var(--bg); resize: vertical; }
textarea.area:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* ── Interrupteur + ligne d'option ───────────────────────────────────── */
.sw { position: relative; flex-shrink: 0; width: 44px; height: 24px; }
.sw input { position: absolute; inset: -10px 0; width: 100%; height: 44px; opacity: 0; margin: 0; cursor: pointer; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--border-2); transition: background var(--transition); pointer-events: none; }
.sw i::before { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); box-shadow: var(--shadow-sm); transition: transform var(--transition); }
.sw input:checked + i { background: var(--primary); }
.sw input:checked + i::before { transform: translateX(20px); }
[dir="rtl"] .sw input:checked + i::before { transform: translateX(-20px); }
.sw input:focus-visible + i { box-shadow: 0 0 0 3px var(--primary-light); }
.opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.opt:hover { border-color: var(--border-2); }
.opt .ot { flex: 1; min-width: 0; }
.opt b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; }
.opt span.s { display: block; font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.opt .ico { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--primary-light); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }

/* ── Petits éléments ─────────────────────────────────────────────────── */
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary-light); border-top-color: var(--primary); animation: dk-rot .8s linear infinite; flex-shrink: 0; }
@keyframes dk-rot { to { transform: rotate(360deg); } }
.mini { display: grid; }
.mini a, .mini button.mrow { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--border); color: var(--text); text-align: start; width: 100%; }
.mini > :first-child { border-top: 0; }
.mini b { display: block; font-size: 13px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini span.m { display: block; font-size: 12px; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .plat svg { width: 14px; height: 14px; }
.mini-empty { font-size: 13px; color: var(--text-muted); }

/* Jauges de quota (mêmes valeurs que la coquille) */
.q { display: grid; gap: 16px; }
.urow { display: grid; gap: 6px; font-size: 13px; color: var(--text-muted); }
.urow .l { display: flex; justify-content: space-between; gap: 8px; }
.urow .l b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.gauge { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.gauge i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary); }
.gauge i.is-high { background: var(--warn); }
.gauge i.is-full { background: var(--error); }
.facts { display: grid; gap: 8px; font-size: 13px; color: var(--text-muted); }
.facts > div { display: flex; justify-content: space-between; gap: 12px; }
.facts b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }

/* ── Barre d'action du pouce (téléphone), au-dessus des onglets ──────── */
.actbar { display: none; }
@media (max-width: 767px) {
  .actbar { position: fixed; inset-inline: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 29; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
  .actbar[hidden] { display: none !important; }
  .actbar .btn { min-height: 48px; }
  .actbar .grow { flex: 1; min-width: 0; }
  .actbar .cnt { font-size: 13px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .actbar .cnt b { color: var(--text); }
}

/* ── Feuilles (téléphone : du bas ; ≥ 768 px : panneau à droite) ─────── */
.sheet { position: fixed; inset: 0; z-index: 950; visibility: hidden; }
.sheet .scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--transition); }
.sheet .panel { position: absolute; inset-inline: 0; bottom: 0; max-height: 85vh; overflow: auto; background: var(--bg); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); transform: translateY(100%); transition: transform 300ms var(--ease); padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.sheet.open { visibility: visible; }
.sheet.open .scrim { opacity: 1; }
.sheet.open .panel { transform: none; }
.sheet .grab { width: 40px; height: 4px; border-radius: 999px; background: var(--border-2); margin: 4px auto 12px; }
.sheet .sh-h { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sheet .sh-h h2 { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; }
@media (min-width: 768px) { .sheet .panel { inset-inline: auto 24px; bottom: 24px; width: 420px; max-height: calc(100vh - 48px); border-radius: var(--radius-lg); padding-bottom: 24px; } }
body.sheet-open { overflow: hidden; }

/* ── Toast + bandeau cookies ─────────────────────────────────────────── */
.toast { position: fixed; bottom: 24px; inset-inline-end: 24px; max-width: min(420px, calc(100vw - 32px)); background: var(--text); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 500; z-index: 9999; opacity: 0; transform: translateY(8px); transition: opacity var(--transition), transform var(--transition); pointer-events: none; overflow-wrap: anywhere; }
.toast.show { opacity: 1; transform: translateY(0); }
.ck-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; background: var(--bg); border-top: 1px solid var(--border); box-shadow: var(--shadow-up); font-size: 14px; color: var(--text-muted); }
.ck-banner a { color: var(--primary); text-decoration: underline; }
.ck-btn { min-height: 44px; padding: 0 18px; background: var(--primary); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; white-space: nowrap; font-size: 13px; }
.ck-btn:hover { background: var(--primary-hover); }
@media (max-width: 767px) {
  .toast { bottom: calc(144px + env(safe-area-inset-bottom, 0px)); inset-inline: 16px; max-width: none; text-align: center; }
  .ck-banner { flex-wrap: wrap; padding: 12px 16px; }
}

/* ── Alerte en ligne ─────────────────────────────────────────────────── */
.note { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; }
.note-info { background: var(--primary-50); color: var(--text-muted); border: 1px solid var(--primary-light); }
.note-err { background: var(--error-bg); color: var(--error-ink); border: 1px solid var(--error-border); }
.note-warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-bg); }
.note a { font-weight: 600; text-decoration: underline; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Champs de saisie : ils ont leur propre cadre violet au focus ; le contour ci-dessus s'y ajoutait en second rectangle (relevé par Ruben le 23/09). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus-visible,
textarea:focus-visible,
select:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}