/**
 * COMCYDEF — Display Mode Adaptive CSS
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Système de variables CSS + classes de mode pour adapter l'interface
 * aux différents types d'affichage (desktop, TV HD, TV FHD, TV 4K).
 *
 * Architecture :
 *   :root          → valeurs par défaut (desktop)
 *   body.mode-tv-hd   → TV HD Ready (≤1366×768, ex. WIWlil 32")
 *   body.mode-tv-fhd  → TV Full HD 1080p
 *   body.mode-tv-4k   → TV 4K / UHD
 *
 * Toutes les dimensions utilisent des variables — aucun pixel codé en dur
 * dans les composants.
 */

/* ── Variables de base (Desktop) ─────────────────────────────────────────── */
:root {
  /* Typographie */
  --dm-font-size:       16px;
  --dm-font-size-sm:    0.875rem;   /* 14px */
  --dm-font-size-xs:    0.75rem;    /* 12px */
  --dm-font-size-lg:    1.125rem;   /* 18px */
  --dm-font-size-xl:    1.35rem;
  --dm-font-size-2xl:   1.65rem;
  --dm-font-size-3xl:   2rem;
  --dm-line-height:     1.5;

  /* Espacement */
  --dm-padding:         16px;
  --dm-padding-sm:      10px;
  --dm-padding-lg:      24px;
  --dm-gap:             16px;
  --dm-gap-sm:          10px;
  --dm-gap-lg:          24px;
  --dm-margin:          16px;

  /* Cartes */
  --dm-card-padding:    16px;
  --dm-card-radius:     14px;
  --dm-card-gap:        16px;

  /* Boutons */
  --dm-btn-height:      38px;
  --dm-btn-height-lg:   46px;
  --dm-btn-padding-h:   14px;
  --dm-btn-font-size:   0.875rem;
  --dm-btn-radius:      10px;

  /* Tableaux */
  --dm-table-cell-py:   8px;
  --dm-table-cell-px:   12px;
  --dm-table-font-size: 0.875rem;
  --dm-table-row-height:40px;

  /* Navigation */
  --dm-nav-width:       220px;
  --dm-nav-item-height: 40px;
  --dm-nav-font-size:   0.8rem;
  --dm-nav-icon-size:   1rem;

  /* Topbar */
  --dm-topbar-height:   52px;
  --dm-topbar-font-size:0.8rem;

  /* Badges / Tags */
  --dm-badge-font-size: 0.7rem;
  --dm-badge-padding:   2px 7px;
  --dm-badge-radius:    6px;

  /* Grilles */
  --dm-grid-cols:       12;
  --dm-grid-cols-4:     4;   /* grille 4 colonnes */
  --dm-grid-cols-3:     3;
  --dm-grid-cols-2:     2;

  /* KPI / Metrics */
  --dm-kpi-font-size:   2rem;
  --dm-kpi-label-size:  0.75rem;

  /* Transitions */
  --dm-transition:      0.25s ease;
}

/* ── Mode Desktop (explicite) ─────────────────────────────────────────────── */
body.mode-desktop {
  /* Identique à :root — déclaré pour clarté et override explicite */
  --dm-font-size:       16px;
  --dm-font-size-sm:    0.875rem;
  --dm-font-size-xs:    0.75rem;
  --dm-font-size-lg:    1.125rem;
  --dm-font-size-xl:    1.35rem;
  --dm-font-size-2xl:   1.65rem;
  --dm-font-size-3xl:   2rem;

  --dm-padding:         16px;
  --dm-padding-sm:      10px;
  --dm-padding-lg:      24px;
  --dm-gap:             16px;
  --dm-card-padding:    16px;
  --dm-card-radius:     14px;
  --dm-card-gap:        16px;

  --dm-btn-height:      38px;
  --dm-btn-height-lg:   46px;
  --dm-btn-padding-h:   14px;
  --dm-btn-font-size:   0.875rem;

  --dm-table-cell-py:   8px;
  --dm-table-cell-px:   12px;
  --dm-table-font-size: 0.875rem;
  --dm-table-row-height:40px;

  --dm-nav-width:       220px;
  --dm-nav-item-height: 40px;
  --dm-nav-font-size:   0.8rem;
  --dm-nav-icon-size:   1rem;
  --dm-topbar-height:   52px;
  --dm-topbar-font-size:0.8rem;

  --dm-badge-font-size: 0.7rem;
  --dm-badge-padding:   2px 7px;

  --dm-grid-cols:       12;
  --dm-grid-cols-4:     4;
  --dm-grid-cols-3:     3;
  --dm-grid-cols-2:     2;

  --dm-kpi-font-size:   2rem;
  --dm-kpi-label-size:  0.75rem;
}

/* ── Mode TV HD Ready (≤1366×768) ─────────────────────────────────────────── */
/*    Ex. WIWlil 32" — texte large, espacement important, grille réduite       */
body.mode-tv-hd {
  --dm-font-size:       20px;
  --dm-font-size-sm:    1rem;       /* 20px */
  --dm-font-size-xs:    0.9rem;
  --dm-font-size-lg:    1.25rem;
  --dm-font-size-xl:    1.55rem;
  --dm-font-size-2xl:   1.9rem;
  --dm-font-size-3xl:   2.4rem;
  --dm-line-height:     1.6;

  --dm-padding:         24px;
  --dm-padding-sm:      16px;
  --dm-padding-lg:      36px;
  --dm-gap:             20px;
  --dm-gap-sm:          14px;
  --dm-gap-lg:          28px;
  --dm-margin:          20px;

  --dm-card-padding:    22px;
  --dm-card-radius:     18px;
  --dm-card-gap:        20px;

  --dm-btn-height:      52px;
  --dm-btn-height-lg:   62px;
  --dm-btn-padding-h:   22px;
  --dm-btn-font-size:   1rem;
  --dm-btn-radius:      14px;

  --dm-table-cell-py:   12px;
  --dm-table-cell-px:   16px;
  --dm-table-font-size: 1rem;
  --dm-table-row-height:54px;

  --dm-nav-width:       260px;
  --dm-nav-item-height: 54px;
  --dm-nav-font-size:   0.95rem;
  --dm-nav-icon-size:   1.15rem;
  --dm-topbar-height:   64px;
  --dm-topbar-font-size:0.95rem;

  --dm-badge-font-size: 0.85rem;
  --dm-badge-padding:   4px 10px;
  --dm-badge-radius:    8px;

  /* Grille réduite : moins de colonnes, éléments plus larges */
  --dm-grid-cols:       6;
  --dm-grid-cols-4:     3;
  --dm-grid-cols-3:     2;
  --dm-grid-cols-2:     2;

  --dm-kpi-font-size:   2.4rem;
  --dm-kpi-label-size:  0.9rem;
}

/* ── Mode TV Full HD (1920×1080) ──────────────────────────────────────────── */
body.mode-tv-fhd {
  --dm-font-size:       18px;
  --dm-font-size-sm:    0.95rem;
  --dm-font-size-xs:    0.85rem;
  --dm-font-size-lg:    1.15rem;
  --dm-font-size-xl:    1.45rem;
  --dm-font-size-2xl:   1.75rem;
  --dm-font-size-3xl:   2.2rem;
  --dm-line-height:     1.55;

  --dm-padding:         20px;
  --dm-padding-sm:      14px;
  --dm-padding-lg:      30px;
  --dm-gap:             18px;
  --dm-gap-sm:          12px;
  --dm-gap-lg:          26px;
  --dm-margin:          18px;

  --dm-card-padding:    20px;
  --dm-card-radius:     16px;
  --dm-card-gap:        18px;

  --dm-btn-height:      48px;
  --dm-btn-height-lg:   56px;
  --dm-btn-padding-h:   20px;
  --dm-btn-font-size:   0.95rem;
  --dm-btn-radius:      12px;

  --dm-table-cell-py:   11px;
  --dm-table-cell-px:   15px;
  --dm-table-font-size: 0.95rem;
  --dm-table-row-height:50px;

  --dm-nav-width:       240px;
  --dm-nav-item-height: 50px;
  --dm-nav-font-size:   0.875rem;
  --dm-nav-icon-size:   1.1rem;
  --dm-topbar-height:   58px;
  --dm-topbar-font-size:0.875rem;

  --dm-badge-font-size: 0.8rem;
  --dm-badge-padding:   3px 9px;
  --dm-badge-radius:    7px;

  --dm-grid-cols:       8;
  --dm-grid-cols-4:     4;
  --dm-grid-cols-3:     3;
  --dm-grid-cols-2:     2;

  --dm-kpi-font-size:   2.2rem;
  --dm-kpi-label-size:  0.85rem;
}

/* ── Mode TV 4K (3840×2160) ───────────────────────────────────────────────── */
body.mode-tv-4k {
  --dm-font-size:       22px;
  --dm-font-size-sm:    1.1rem;
  --dm-font-size-xs:    1rem;
  --dm-font-size-lg:    1.35rem;
  --dm-font-size-xl:    1.7rem;
  --dm-font-size-2xl:   2.1rem;
  --dm-font-size-3xl:   2.6rem;
  --dm-line-height:     1.6;

  --dm-padding:         30px;
  --dm-padding-sm:      20px;
  --dm-padding-lg:      44px;
  --dm-gap:             26px;
  --dm-gap-sm:          18px;
  --dm-gap-lg:          36px;
  --dm-margin:          26px;

  --dm-card-padding:    28px;
  --dm-card-radius:     20px;
  --dm-card-gap:        26px;

  --dm-btn-height:      58px;
  --dm-btn-height-lg:   70px;
  --dm-btn-padding-h:   28px;
  --dm-btn-font-size:   1.1rem;
  --dm-btn-radius:      16px;

  --dm-table-cell-py:   14px;
  --dm-table-cell-px:   20px;
  --dm-table-font-size: 1.05rem;
  --dm-table-row-height:62px;

  --dm-nav-width:       300px;
  --dm-nav-item-height: 62px;
  --dm-nav-font-size:   1.05rem;
  --dm-nav-icon-size:   1.3rem;
  --dm-topbar-height:   72px;
  --dm-topbar-font-size:1rem;

  --dm-badge-font-size: 0.9rem;
  --dm-badge-padding:   5px 12px;
  --dm-badge-radius:    9px;

  --dm-grid-cols:       10;
  --dm-grid-cols-4:     4;
  --dm-grid-cols-3:     3;
  --dm-grid-cols-2:     2;

  --dm-kpi-font-size:   2.8rem;
  --dm-kpi-label-size:  1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* APPLICATION DES VARIABLES AUX COMPOSANTS COMCYDEF                         */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Typographie de base ─────────────────────────────────────────────────── */
body {
  font-size: var(--dm-font-size);
  line-height: var(--dm-line-height);
  transition: font-size var(--dm-transition),
              padding    var(--dm-transition);
}

/* ── Navigation latérale ─────────────────────────────────────────────────── */
.sidebar,
#sidebar,
.nav-sidebar {
  width: var(--dm-nav-width);
  min-width: var(--dm-nav-width);
  transition: width var(--dm-transition);
}

.nav-item,
.sidebar-item {
  min-height: var(--dm-nav-item-height);
  font-size:  var(--dm-nav-font-size);
  padding:    0 var(--dm-padding-sm);
}

.nav-icon,
.sidebar-icon {
  font-size: var(--dm-nav-icon-size);
  width:     calc(var(--dm-nav-icon-size) * 1.5);
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar,
#topbar,
.header-bar {
  height:    var(--dm-topbar-height);
  min-height:var(--dm-topbar-height);
  font-size: var(--dm-topbar-font-size);
  padding:   0 var(--dm-padding);
  transition: height var(--dm-transition);
}

/* ── Cartes ──────────────────────────────────────────────────────────────── */
.card,
.metric-card,
.incident-card,
.oiv-card,
.status-card {
  padding:       var(--dm-card-padding);
  border-radius: var(--dm-card-radius);
  transition:    padding var(--dm-transition), border-radius var(--dm-transition);
}

.card-title,
.card-header .title {
  font-size: var(--dm-font-size-xl);
}

.card-subtitle,
.card-meta {
  font-size: var(--dm-font-size-xs);
}

/* ── Grilles dashboard ───────────────────────────────────────────────────── */
.dashboard-grid,
.metrics-grid {
  display: grid;
  gap: var(--dm-card-gap);
  grid-template-columns: repeat(var(--dm-grid-cols), 1fr);
}

.grid-4 { grid-template-columns: repeat(var(--dm-grid-cols-4), 1fr); }
.grid-3 { grid-template-columns: repeat(var(--dm-grid-cols-3), 1fr); }
.grid-2 { grid-template-columns: repeat(var(--dm-grid-cols-2), 1fr); }

/* ── KPI / Métriques ─────────────────────────────────────────────────────── */
.kpi-value,
.metric-value,
.stat-number {
  font-size: var(--dm-kpi-font-size);
  line-height: 1.1;
  transition: font-size var(--dm-transition);
}

.kpi-label,
.metric-label,
.stat-label {
  font-size: var(--dm-kpi-label-size);
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn,
button.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost,
.btn-action {
  min-height:    var(--dm-btn-height);
  padding:       0 var(--dm-btn-padding-h);
  font-size:     var(--dm-btn-font-size);
  border-radius: var(--dm-btn-radius);
  transition:    min-height var(--dm-transition),
                 padding    var(--dm-transition),
                 font-size  var(--dm-transition);
}

.btn-lg,
.btn-large {
  min-height: var(--dm-btn-height-lg);
  font-size:  calc(var(--dm-btn-font-size) * 1.1);
}

/* ── Tableaux ────────────────────────────────────────────────────────────── */
.table,
table.data-table,
.incident-table,
.oiv-table,
.audit-table {
  font-size: var(--dm-table-font-size);
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td,
table.data-table th,
table.data-table td {
  padding:    var(--dm-table-cell-py) var(--dm-table-cell-px);
  transition: padding var(--dm-transition);
}

.table tr,
table.data-table tr {
  min-height: var(--dm-table-row-height);
}

/* ── Badges / Tags ───────────────────────────────────────────────────────── */
.badge,
.tag,
.status-badge,
.severity-badge,
.classification-badge {
  font-size:     var(--dm-badge-font-size);
  padding:       var(--dm-badge-padding);
  border-radius: var(--dm-badge-radius);
  transition:    font-size var(--dm-transition);
}

/* ── Textes généraux ─────────────────────────────────────────────────────── */
.text-base  { font-size: var(--dm-font-size);    }
.text-sm    { font-size: var(--dm-font-size-sm); }
.text-xs    { font-size: var(--dm-font-size-xs); }
.text-lg    { font-size: var(--dm-font-size-lg); }
.text-xl    { font-size: var(--dm-font-size-xl); }
.text-2xl   { font-size: var(--dm-font-size-2xl);}
.text-3xl   { font-size: var(--dm-font-size-3xl);}

/* Tailwind overrides pour modes TV */
body.mode-tv-hd .text-xs,
body.mode-tv-fhd .text-xs {
  font-size: var(--dm-font-size-xs) !important;
}

body.mode-tv-hd .text-sm,
body.mode-tv-fhd .text-sm {
  font-size: var(--dm-font-size-sm) !important;
}

/* ── Espacement général ──────────────────────────────────────────────────── */
.app-shell,
.main-content,
#app-content {
  padding: var(--dm-padding);
}

.section-gap {
  gap: var(--dm-gap);
}

/* ── Comportements spécifiques TV ────────────────────────────────────────── */

/* TV : cacher les éléments trop denses pour une vue à distance */
body[data-is-tv="true"] .compact-only,
body[data-is-tv="true"] .desktop-only {
  display: none !important;
}

/* TV : afficher les éléments optimisés pour la distance */
body[data-is-tv="true"] .tv-only {
  display: block !important;
}

.tv-only { display: none; }

/* TV HD : sidebar plus large, police grande */
body.mode-tv-hd .sidebar {
  width: var(--dm-nav-width);
}

/* TV : hauteur minimale des cartes critiques */
body.mode-tv-hd .critical-card,
body.mode-tv-fhd .critical-card {
  min-height: 140px;
}

body.mode-tv-4k .critical-card {
  min-height: 180px;
}

/* TV : marges intérieures des sections */
body[data-is-tv="true"] .section-header {
  padding: var(--dm-padding-sm) 0;
  margin-bottom: var(--dm-gap-sm);
}

/* ── Panneau de contrôle du mode d'affichage ─────────────────────────────── */
#display-mode-panel {
  /* Positionné par le composant qui l'intègre (topbar, paramètres…) */
}

.dm-panel-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dm-panel-title {
  font-size:   0.75rem;
  font-weight: 700;
  color:       #64748b;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.dm-current-badge {
  font-size: 0.75rem;
}

.dm-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dm-buttons {
  display: flex;
  gap: 4px;
}

.dm-btn {
  display:        flex;
  align-items:    center;
  gap:            4px;
  padding:        4px 8px;
  border-radius:  6px;
  font-size:      0.7rem;
  font-weight:    600;
  cursor:         pointer;
  background:     rgba(51, 65, 85, 0.6);
  border:         1px solid rgba(100, 116, 139, 0.3);
  color:          #94a3b8;
  transition:     all 0.15s ease;
  white-space:    nowrap;
}

.dm-btn:hover {
  background: rgba(71, 85, 105, 0.8);
  color:      #e2e8f0;
}

.dm-btn.dm-active {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.6);
  color: #a5b4fc;
}

.dm-btn-auto.dm-active    { background: rgba(16, 185, 129, 0.2); border-color: rgba(16,185,129,.5); color: #6ee7b7; }
.dm-btn-tvhd.dm-active    { background: rgba(245, 158, 11, 0.2); border-color: rgba(245,158,11,.5); color: #fcd34d; }
.dm-btn-tvfhd.dm-active   { background: rgba(249, 115, 22, 0.2); border-color: rgba(249,115,22,.5); color: #fdba74; }
.dm-btn-tv4k.dm-active    { background: rgba(239, 68, 68,  0.2); border-color: rgba(239,68,68,.5);  color: #fca5a5; }
.dm-btn-desktop.dm-active { background: rgba(99, 102, 241, 0.2); border-color: rgba(99,102,241,.5); color: #a5b4fc; }

.display-mode-indicator {
  display:     inline-flex;
  align-items: center;
  font-weight: 700;
  font-size:   0.75rem;
}

/* ── Responsive fallback (media queries navigateur) ──────────────────────── */
/* Utilisé quand Electron n'est pas disponible */

@media screen and (max-width: 1366px) and (max-height: 768px) {
  body:not(.mode-desktop):not(.mode-tv-fhd):not(.mode-tv-4k) {
    --dm-font-size:    20px;
    --dm-padding:      24px;
    --dm-card-padding: 22px;
    --dm-btn-height:   52px;
    --dm-grid-cols:    6;
    --dm-kpi-font-size:2.4rem;
  }
}

@media screen and (min-width: 1920px) and (min-height: 1080px) {
  body:not(.mode-desktop):not(.mode-tv-hd):not(.mode-tv-4k) {
    --dm-font-size:    18px;
    --dm-padding:      20px;
    --dm-card-padding: 20px;
    --dm-btn-height:   48px;
    --dm-grid-cols:    8;
    --dm-kpi-font-size:2.2rem;
  }
}

/* ── Animations TV : pas d'animation complexe à distance ────────────────── */
body.mode-tv-hd *,
body.mode-tv-fhd *,
body.mode-tv-4k * {
  /* Réduire les animations subtiles illisibles à distance */
  animation-duration: 0.5s !important;
}

/* Conserver les animations importantes (pulse critique, etc.) */
body[data-is-tv="true"] .animate-pulse {
  animation-duration: 1.5s !important;
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SCREENS BLOC 6 — RÉFÉRENTIEL JURIDIQUE (40) & ADMIN JURIDIQUE (41)        */
/* Adaptation TV via facteur d'échelle --jur-scale                           */
/* ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Architecture :
 *   - Les screens Juridique/Admin utilisent des inline font-size en rem
 *     (ex. .48rem, .52rem, .58rem, .6rem, .65rem, .9rem, 1.1rem)
 *   - La variable --jur-scale multiplie ces valeurs via font-size sur le wrapper
 *   - Desktop : scale = 1 (pas de changement)
 *   - TV HD   : scale = 1.65  → .52rem → ~0.86rem, .6rem → ~0.99rem
 *   - TV FHD  : scale = 1.50  → .52rem → ~0.78rem, .6rem → ~0.90rem
 *   - TV 4K   : scale = 1.90  → .52rem → ~0.99rem, .6rem → ~1.14rem
 *
 * Usage dans le JS :
 *   <div class="jur-screen">  ← wrapper Référentiel Juridique
 *   <div class="jur-admin-screen">  ← wrapper Admin Juridique
 */

/* ── Variables par défaut (desktop) ────────────────────────────────────── */
:root {
  --jur-scale:        1;
  --jur-zoom:         1;       /* zoom CSS appliqué au wrapper .jur-screen */
  --jur-padding:      .6rem;
  --jur-gap:          .5rem;
  --jur-card-radius:  .35rem;
  --jur-border:       1px solid #1f2937;
  --jur-header-size:  .85rem;
  --jur-title-size:   .75rem;
  --jur-body-size:    .6rem;
  --jur-small-size:   .52rem;
  --jur-micro-size:   .48rem;
  --jur-kpi-size:     1.1rem;
  --jur-icon-size:    .9rem;
  --jur-btn-padding:  .2rem .5rem;
  --jur-tab-padding:  .2rem .5rem;
  --jur-table-py:     .25rem;
  --jur-table-px:     .35rem;
  --jur-badge-px:     .2rem .4rem;
}

/* ── Mode TV HD (1366×768) ──────────────────────────────────────────────── */
body.mode-tv-hd {
  --jur-scale:        1.65;
  --jur-zoom:         1.65;   /* amplifie TOUT le wrapper jur (rem, px, gaps) */
  --jur-padding:      1rem;
  --jur-gap:          .85rem;
  --jur-card-radius:  .55rem;
  --jur-header-size:  1.4rem;
  --jur-title-size:   1.25rem;
  --jur-body-size:    1rem;
  --jur-small-size:   .88rem;
  --jur-micro-size:   .8rem;
  --jur-kpi-size:     1.8rem;
  --jur-icon-size:    1.5rem;
  --jur-btn-padding:  .5rem 1rem;
  --jur-tab-padding:  .4rem .9rem;
  --jur-table-py:     .5rem;
  --jur-table-px:     .75rem;
  --jur-badge-px:     .35rem .7rem;
}

/* ── Mode TV Full HD (1920×1080) ────────────────────────────────────────── */
body.mode-tv-fhd {
  --jur-scale:        1.50;
  --jur-zoom:         1.50;
  --jur-padding:      .9rem;
  --jur-gap:          .75rem;
  --jur-card-radius:  .5rem;
  --jur-header-size:  1.25rem;
  --jur-title-size:   1.1rem;
  --jur-body-size:    .9rem;
  --jur-small-size:   .8rem;
  --jur-micro-size:   .72rem;
  --jur-kpi-size:     1.6rem;
  --jur-icon-size:    1.35rem;
  --jur-btn-padding:  .45rem .9rem;
  --jur-tab-padding:  .35rem .8rem;
  --jur-table-py:     .45rem;
  --jur-table-px:     .65rem;
  --jur-badge-px:     .3rem .6rem;
}

/* ── Mode TV 4K (3840×2160) ─────────────────────────────────────────────── */
body.mode-tv-4k {
  --jur-scale:        1.90;
  --jur-zoom:         1.90;
  --jur-padding:      1.2rem;
  --jur-gap:          1rem;
  --jur-card-radius:  .65rem;
  --jur-header-size:  1.6rem;
  --jur-title-size:   1.4rem;
  --jur-body-size:    1.15rem;
  --jur-small-size:   1rem;
  --jur-micro-size:   .9rem;
  --jur-kpi-size:     2.1rem;
  --jur-icon-size:    1.7rem;
  --jur-btn-padding:  .6rem 1.2rem;
  --jur-tab-padding:  .5rem 1.1rem;
  --jur-table-py:     .6rem;
  --jur-table-px:     .9rem;
  --jur-badge-px:     .4rem .8rem;
}

/* ── Wrapper commun aux deux screens ────────────────────────────────────── */
.jur-screen,
.jur-admin-screen {
  background:   #030712;
  min-height:   100vh;
  padding:      var(--jur-padding);
  font-family:  'Inter', sans-serif;
  color:        #e5e7eb;
  /*
   * STRATÉGIE D'ÉCHELLE TV (Chromium/Edge sur TV) :
   * Les inline styles utilisent des valeurs rem (ex: .58rem, .6rem).
   * rem est relatif au <html> root (16px), pas au parent.
   * On utilise "zoom" CSS qui amplifie TOUT (rem, px, espacements, images).
   * - Desktop  : zoom = 1   (aucun changement)
   * - TV HD    : zoom = 1.65 → .58rem → ~15px lisible à distance
   * - TV FHD   : zoom = 1.50 → .58rem → ~14px lisible
   * - TV 4K    : zoom = 1.90 → .58rem → ~17.5px très lisible
   * Note : zoom CSS ne supporte pas les variables CSS (var()) ;
   *        la valeur est fixée directement dans chaque sélecteur de mode TV.
   *        Firefox ne supporte pas zoom, mais les TV utilisent Chromium.
   */
  zoom: 1; /* desktop par défaut */
}

/* TV HD : zoom 1.65 */
body.mode-tv-hd .jur-screen,
body.mode-tv-hd .jur-admin-screen {
  zoom: 1.65;
}

/* TV FHD : zoom 1.50 */
body.mode-tv-fhd .jur-screen,
body.mode-tv-fhd .jur-admin-screen {
  zoom: 1.50;
}

/* TV 4K : zoom 1.90 */
body.mode-tv-4k .jur-screen,
body.mode-tv-4k .jur-admin-screen {
  zoom: 1.90;
}

/* ── Éléments structurants ──────────────────────────────────────────────── */
.jur-screen .jur-header,
.jur-admin-screen .jur-header {
  display:       flex;
  align-items:   center;
  gap:           var(--jur-gap);
  margin-bottom: var(--jur-gap);
  padding-bottom:.4em;
  border-bottom: var(--jur-border);
}

.jur-screen .jur-title,
.jur-admin-screen .jur-title {
  font-size:   var(--jur-header-size);
  font-weight: 800;
  color:       #fff;
  letter-spacing: .02em;
}

.jur-screen .jur-subtitle,
.jur-admin-screen .jur-subtitle {
  font-size: var(--jur-small-size);
  color:     #6b7280;
}

/* ── Cartes KPI ─────────────────────────────────────────────────────────── */
.jur-screen .jur-kpi-grid,
.jur-admin-screen .jur-kpi-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
  gap:                   var(--jur-gap);
  margin-bottom:         var(--jur-gap);
}

.jur-screen .jur-kpi-card,
.jur-admin-screen .jur-kpi-card {
  background:    rgba(255,255,255,.03);
  border:        1px solid #1f2937;
  border-radius: var(--jur-card-radius);
  padding:       var(--jur-padding);
  text-align:    center;
}

.jur-kpi-card .jur-kpi-val {
  font-size:   var(--jur-kpi-size);
  font-weight: 800;
  line-height: 1.1;
}

.jur-kpi-card .jur-kpi-lbl {
  font-size:  var(--jur-small-size);
  color:      #6b7280;
  margin-top: .2em;
}

/* ── Onglets ────────────────────────────────────────────────────────────── */
.jur-screen .jur-tabs,
.jur-admin-screen .jur-tabs {
  display:       flex;
  gap:           .15em;
  border-bottom: 1px solid #1f2937;
  margin-bottom: var(--jur-gap);
  overflow-x:    auto;
}

.jur-screen .jur-tab,
.jur-admin-screen .jur-tab {
  padding:         var(--jur-tab-padding);
  font-size:       var(--jur-body-size);
  font-weight:     600;
  border-bottom:   2px solid transparent;
  cursor:          pointer;
  white-space:     nowrap;
  color:           #6b7280;
  background:      none;
  border-top:      none;
  border-left:     none;
  border-right:    none;
  transition:      color .15s, border-color .15s;
}

.jur-tab.jur-tab-active {
  color:         #a78bfa;
  border-color:  #7c3aed;
  background:    rgba(124,58,237,.08);
  border-radius: .2em .2em 0 0;
}

/* ── Tableau sources / qualifications ───────────────────────────────────── */
.jur-screen .jur-table,
.jur-admin-screen .jur-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--jur-body-size);
}

.jur-table th {
  font-size:  var(--jur-small-size);
  color:      #6b7280;
  text-align: left;
  padding:    var(--jur-table-py) var(--jur-table-px);
  border-bottom: 1px solid #1f2937;
  white-space: nowrap;
}

.jur-table td {
  padding:       var(--jur-table-py) var(--jur-table-px);
  border-bottom: 1px solid rgba(31,41,55,.6);
  vertical-align: top;
}

.jur-table tr:hover td {
  background: rgba(255,255,255,.02);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.jur-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           .2em;
  padding:       var(--jur-badge-px);
  border-radius: .2em;
  font-size:     var(--jur-micro-size);
  font-weight:   700;
  line-height:   1.2;
  white-space:   nowrap;
}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.jur-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           .3em;
  padding:       var(--jur-btn-padding);
  border-radius: var(--jur-card-radius);
  font-size:     var(--jur-body-size);
  font-weight:   600;
  cursor:        pointer;
  border:        1px solid transparent;
  transition:    background .15s, color .15s;
  white-space:   nowrap;
}

/* ── Icônes de section ──────────────────────────────────────────────────── */
.jur-icon-box {
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: var(--jur-card-radius);
  padding:       .3em .45em;
  flex-shrink:   0;
}

.jur-icon-box i {
  font-size: var(--jur-icon-size);
}

/* ── Section séparateur ─────────────────────────────────────────────────── */
.jur-section-title {
  font-size:     var(--jur-title-size);
  font-weight:   700;
  color:         #e5e7eb;
  margin-bottom: .4em;
}

/* ── Textarea / zones de saisie ─────────────────────────────────────────── */
.jur-admin-screen textarea,
.jur-admin-screen input[type="text"],
.jur-admin-screen input[type="search"],
.jur-admin-screen select {
  font-size: var(--jur-body-size) !important;
}

/*
 * IMPORTANT : Avec zoom CSS sur le wrapper, les inline font-size (en rem ou px)
 * sont automatiquement agrandis proportionnellement. Il n'est donc PAS nécessaire
 * de les surcharger ou de les réinitialiser — le zoom les gère globalement.
 * Les règles font-size: unset précédentes sont supprimées pour éviter
 * les conflits avec le mécanisme zoom.
 */

/* ── TV : ajustements structurels spécifiques ───────────────────────────── */
/*
 * zoom CSS agrandit le contenu ET le wrapper occupe plus de place visuellement.
 * Mais avec zoom sur un block-level, le navigateur compense automatiquement
 * en réduisant la largeur logique. On force width: 100% pour s'assurer
 * que le wrapper prend bien toute la largeur disponible.
 */
body[data-is-tv="true"] .jur-screen,
body[data-is-tv="true"] .jur-admin-screen {
  padding:    var(--jur-padding);
  width:      100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Compenser la hauteur min après zoom */
body.mode-tv-hd  .jur-screen, body.mode-tv-hd  .jur-admin-screen { min-height: calc(100vh / 1.65); }
body.mode-tv-fhd .jur-screen, body.mode-tv-fhd .jur-admin-screen { min-height: calc(100vh / 1.50); }
body.mode-tv-4k  .jur-screen, body.mode-tv-4k  .jur-admin-screen { min-height: calc(100vh / 1.90); }

/*
 * Avec zoom CSS sur le wrapper .jur-screen / .jur-admin-screen,
 * TOUS les éléments enfants (onglets, boutons, tableaux, badges, icônes,
 * inputs, inline font-size rem/px) sont automatiquement agrandis.
 * Les règles !important par élément ne sont plus nécessaires.
 *
 * On garde seulement les ajustements de STRUCTURE (colonnes de grille, etc.)
 * qui ne sont pas gérés par le zoom.
 */

/* TV : grille KPI — ajuster le nombre de colonnes pour les grandes polices */
body.mode-tv-hd .jur-screen .jur-kpi-grid,
body.mode-tv-hd .jur-admin-screen .jur-kpi-grid {
  /* Avec zoom 1.65, 6 colonnes ne tiennent plus — réduire à 3 ou auto */
  grid-template-columns: repeat(3, 1fr);
}

body.mode-tv-fhd .jur-screen .jur-kpi-grid,
body.mode-tv-fhd .jur-admin-screen .jur-kpi-grid {
  /* Avec zoom 1.50, réduire à 4 colonnes */
  grid-template-columns: repeat(4, 1fr);
}

body.mode-tv-4k .jur-screen .jur-kpi-grid,
body.mode-tv-4k .jur-admin-screen .jur-kpi-grid {
  /* Avec zoom 1.90, réduire à 3 colonnes */
  grid-template-columns: repeat(3, 1fr);
}

/* TV : résultats d'import — forcer la taille KPI (en plus du zoom global) */
body[data-is-tv="true"] .jur-admin-screen .upload-result-count {
  font-size: var(--jur-kpi-size);
}

/* ── Grilles de contenu (dashboard, sources) ────────────────────────────── */
/* Ces grilles inline sont remplacées par des classes pour contrôle TV */
.jur-dashboard-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   .4rem;
}

/* TV : passer à 2 colonnes (avec zoom les 3 colonnes ne tiennent plus) */
body.mode-tv-hd  .jur-dashboard-grid,
body.mode-tv-4k  .jur-dashboard-grid { grid-template-columns: 1fr 1fr; }
body.mode-tv-fhd .jur-dashboard-grid { grid-template-columns: 1fr 1fr; }

/* Grille sources légales (3 colonnes) */
.jur-sources-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   .35rem;
}

body.mode-tv-hd  .jur-sources-grid { grid-template-columns: 1fr 1fr; }
body.mode-tv-fhd .jur-sources-grid { grid-template-columns: 1fr 1fr; }
body.mode-tv-4k  .jur-sources-grid { grid-template-columns: 1fr 1fr; }

/* Grille actions légales (2 colonnes) */
.jur-actions-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   .4rem;
}

body.mode-tv-hd  .jur-actions-grid { grid-template-columns: 1fr; }
body.mode-tv-fhd .jur-actions-grid { grid-template-columns: 1fr 1fr; }
body.mode-tv-4k  .jur-actions-grid { grid-template-columns: 1fr; }

/* Grille dashboard Admin Juridique (2 colonnes) */
.jur-admin-dashboard-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   .4rem;
}

body.mode-tv-hd  .jur-admin-dashboard-grid { grid-template-columns: 1fr; }
body.mode-tv-fhd .jur-admin-dashboard-grid { grid-template-columns: 1fr 1fr; }
body.mode-tv-4k  .jur-admin-dashboard-grid { grid-template-columns: 1fr; }

/* Grille upload (Import fichier) — 2 colonnes */
.jur-upload-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   .4rem;
}

body.mode-tv-hd  .jur-upload-grid { grid-template-columns: 1fr; }
body.mode-tv-fhd .jur-upload-grid { grid-template-columns: 1fr 1fr; }
body.mode-tv-4k  .jur-upload-grid { grid-template-columns: 1fr; }

/* ── Animations TV ──────────────────────────────────────────────────────── */
body[data-is-tv="true"] .jur-screen .animate-pulse,
body[data-is-tv="true"] .jur-admin-screen .animate-pulse {
  animation-duration: 1.5s !important;
}

/* ── Panneaux scrollables dans les onglets ──────────────────────────────── */
/*
 * En desktop : max-height limité à ~60vh pour ne pas dépasser l'écran.
 * En TV avec zoom : le viewport CSS interne est réduit (100vh / zoom),
 * donc on limite à ~55vh divisé par le zoom pour rester dans la fenêtre.
 */
.jur-scroll-panel {
  max-height: 60vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #374151 transparent;
}

.jur-scroll-panel::-webkit-scrollbar        { width: 4px; }
.jur-scroll-panel::-webkit-scrollbar-track  { background: transparent; }
.jur-scroll-panel::-webkit-scrollbar-thumb  { background: #374151; border-radius: 2px; }

/* TV : réduire le max-height pour compenser le zoom */
body.mode-tv-hd  .jur-scroll-panel { max-height: calc(55vh / 1.65); }
body.mode-tv-fhd .jur-scroll-panel { max-height: calc(55vh / 1.50); }
body.mode-tv-4k  .jur-scroll-panel { max-height: calc(55vh / 1.90); }

/* ── Panneaux scrollables internes (war room summary, journal log, etc.) ── */
/* Note : max-height est écrasé par les valeurs inline ; on fournit juste
   le overflow et le style scrollbar comme classe de base.
   Les modes TV utilisent la compensation zoom du wrapper parent. */
.jur-inner-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #1f2937 transparent;
}
.jur-inner-scroll::-webkit-scrollbar       { width: 3px; }
.jur-inner-scroll::-webkit-scrollbar-thumb { background: #1f2937; border-radius: 2px; }