* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---- Bandeau produit ----
   3 zones : gauche (identité), centre (stats), droite (actions).
   Desktop : une ligne, space-between. Tablette/mobile : zones empilées,
   la zone actions passe en grille pour garder tous les boutons visibles
   sans scroll (Accueil et Déconnexion doivent toujours rester atteignables). */

header.topbar {
  background: linear-gradient(180deg, var(--header-bg) 0%, var(--header-bg-2) 100%);
  color: var(--header-fg);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-2);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--shadow-header);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

header.topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

header.topbar img.jtv-logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}

header.topbar .topbar-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

header.topbar h1 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

header.topbar .topbar-subtitle {
  font-size: var(--text-sm);
  color: rgba(207, 233, 238, 0.75);
  white-space: nowrap;
}

/* Zone centre : cartes de stats compactes */

header.topbar .topbar-center {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

header.topbar .stat-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px;
  border-radius: var(--radius-md);
  background: var(--header-surface);
  border: 1px solid var(--header-border);
}

header.topbar .stat-card-pending {
  background: rgba(240, 168, 96, 0.1);
  border-color: rgba(240, 168, 96, 0.3);
}

header.topbar .stat-card .icon-btn-svg {
  color: rgba(207, 233, 238, 0.85);
}

header.topbar .stat-card-pending .icon-btn-svg {
  color: #f0a860;
}

header.topbar .stat-card-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

header.topbar .stat-card-text strong {
  color: #fff;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

header.topbar .stat-card-pending .stat-card-text strong {
  color: #f0a860;
}

header.topbar .stat-card-text span {
  font-size: 0.65rem;
  color: rgba(207, 233, 238, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Zone droite : actions courtes, icône + libellé */

header.topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

header.topbar .userbox-name {
  color: #cfe9ee;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  padding: 0 2px;
  white-space: nowrap;
}

header.topbar .topbar-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #cfe9ee;
  text-decoration: none;
  font-family: inherit;
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

header.topbar .topbar-action:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

header.topbar .topbar-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

header.topbar .topbar-action-primary {
  color: #cfe9ee;
  border-color: var(--jtv-teal);
}

header.topbar .topbar-action-primary:hover {
  background: var(--jtv-teal);
  border-color: var(--jtv-teal);
  color: #fff;
}

header.topbar .topbar-action-danger {
  color: #ffcfcf;
  border-color: rgba(226, 122, 122, 0.4);
}

header.topbar .topbar-action-danger:hover {
  background: #b23a3a;
  border-color: #b23a3a;
  color: #fff;
}

/* État actif de navigation (page courante) */
header.topbar .topbar-action[aria-current="page"] {
  background: var(--teal-on-dark-soft);
  border-color: var(--teal-on-dark);
  color: #fff;
}

/* Focus clavier visible et homogène sur tout le header */
header.topbar .topbar-action:focus-visible,
header.topbar .topbar-user:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-dark);
  border-color: var(--teal-on-dark);
}

/* Cluster utilisateur : avatar + nom */
header.topbar .topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border-radius: var(--radius-pill);
  min-width: 0;
}

header.topbar .avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--jtv-teal) 0%, var(--teal-on-dark) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Séparateur discret avant le cluster utilisateur */
header.topbar .topbar-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--header-border);
}

header.topbar .userbox-sync-status {
  font-size: var(--text-sm);
  color: rgba(207, 233, 238, 0.85);
  white-space: nowrap;
}

header.topbar .userbox-sync-status.userbox-sync-status-error {
  color: #ffb4b4;
}

header.topbar .userbox-sync-status.userbox-sync-status-ok {
  color: #b8f2c9;
}

/* Indicateur global de sauvegarde (pack.php) : compact, visible seulement en
   mode édition, cohérent avec le style clair sur fond sombre du topbar. */
header.topbar .save-indicator {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(207, 233, 238, 0.9);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
}
body.edit-mode header.topbar .save-indicator { display: inline-flex; }
header.topbar .save-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9fd6a8;
  flex-shrink: 0;
}
header.topbar .save-indicator[data-state="saved"] .save-indicator-dot { background: #7ddb96; }
header.topbar .save-indicator[data-state="unsaved"] .save-indicator-dot { background: #f2c46b; }
header.topbar .save-indicator[data-state="saving"] .save-indicator-dot {
  background: #8fd0e0;
  animation: save-indicator-pulse 1s ease-in-out infinite;
}
header.topbar .save-indicator[data-state="error"] {
  color: #ffcfcf;
  border-color: rgba(226, 122, 122, 0.5);
}
header.topbar .save-indicator[data-state="error"] .save-indicator-dot { background: #ffb4b4; }
@keyframes save-indicator-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (max-width: 900px) {
  header.topbar .save-indicator-text { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  header.topbar .save-indicator[data-state="saving"] .save-indicator-dot { animation: none; }
}

@media (max-width: 900px) {
  header.topbar {
    padding: var(--space-2) var(--space-2);
  }

  header.topbar .topbar-left,
  header.topbar .topbar-center,
  header.topbar .topbar-right {
    flex: 1 1 100%;
  }

  header.topbar .topbar-center {
    order: 2;
    justify-content: flex-start;
  }

  header.topbar .topbar-right {
    order: 3;
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  header.topbar .topbar-subtitle {
    display: none;
  }

  header.topbar .userbox-name {
    display: none;
  }

  header.topbar .topbar-action span,
  header.topbar #syncPacksBtn span {
    display: none;
  }

  header.topbar .topbar-action,
  header.topbar #syncPacksBtn {
    padding: 8px;
  }

  header.topbar h1 {
    white-space: normal;
    font-size: var(--text-md);
  }

  header.topbar .topbar-left {
    min-width: 0;
    flex-wrap: wrap;
  }
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
}

/* ---- Toolbar ---- */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filters button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  color: var(--muted);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* Pastille de statut (rappel visuel, jamais seule porteuse d'information : le
   libellé texte reste explicite). Couleurs alignées sur les statuts de l'app. */
.filters button[data-filter]:not([data-filter="all"])::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
.filters button[data-filter="A valider"]::before { background: var(--status-pending-fg); }
.filters button[data-filter="Validé"]::before { background: var(--status-validated-fg); }
.filters button[data-filter="Publié"]::before { background: var(--status-published-fg); }

.filters button:hover {
  border-color: var(--jtv-teal);
  color: var(--jtv-teal-dark);
}

.filters button.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.filters button:focus-visible,
.view-switch button:focus-visible,
.network-filters button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--jtv-teal);
}

.sort-control {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: var(--weight-semibold);
}

.sort-control select {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.sort-control select:focus-visible {
  outline: none;
  border-color: var(--jtv-teal);
  box-shadow: 0 0 0 3px rgba(13, 139, 156, 0.15);
}

.view-switch {
  display: flex;
  gap: 4px;
  background: var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 3px;
}

.view-switch button {
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  color: var(--muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.view-switch button.active {
  background: var(--jtv-teal);
  color: #fff;
}

/* ---- Calendrier ---- */

.calendar-view {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-xs);
}

.calendar-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.calendar-header h2 {
  flex: 1;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
  text-transform: capitalize;
}

.calendar-header button {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--ink);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.calendar-header button:hover {
  background: var(--border-soft);
  border-color: var(--jtv-teal);
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.calendar-weekday {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-soft);
  padding: 4px 0;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-day {
  height: 100px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  transition: border-color var(--transition-fast);
}

.calendar-day:hover {
  border-color: var(--jtv-teal);
}

.calendar-day.outside-month {
  background: var(--border-soft);
  border-style: dashed;
}

.calendar-day.outside-month:hover {
  border-color: var(--border);
}

.calendar-day.is-today {
  border-color: var(--jtv-teal);
  box-shadow: inset 0 0 0 1px var(--jtv-teal);
}

.calendar-day-number {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--muted);
}

.calendar-day.is-today .calendar-day-number {
  color: var(--jtv-teal-dark);
}

.calendar-chip {
  display: block;
  width: 100%;
  min-width: 0;
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  padding: 3px 7px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: filter var(--transition-fast);
}

.calendar-chip:hover {
  filter: brightness(0.96);
}

.calendar-chip.badge-status-pending { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.calendar-chip.badge-status-validated { background: var(--status-validated-bg); color: var(--status-validated-fg); }
.calendar-chip.badge-status-published { background: var(--status-published-bg); color: var(--status-published-fg); }

.calendar-more {
  font-size: 0.7rem;
  color: var(--muted);
}

@media (max-width: 720px) {
  .calendar-day { height: 64px; }
  .calendar-weekday { font-size: 0.65rem; }
}

/* ---- Grille de packs ---- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-2);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.card[data-status="A valider"] { border-top-color: var(--status-pending-fg); }
.card[data-status="Validé"] { border-top-color: var(--status-validated-fg); }
.card[data-status="Publié"] { border-top-color: var(--status-published-fg); }

.card .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--border-soft) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Fallback « Pas de miniature » : icône + libellé centrés */
.card .thumb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}
.card .thumb-empty svg { width: 30px; height: 30px; opacity: 0.7; }

/* Badge d'émission en overlay (haut-gauche de la miniature) */
.card .thumb-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(14, 21, 24, 0.82);
  color: #fff;
  font-size: 0.66rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.card .body {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.card .show-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card .show-row img.show-logo {
  height: 20px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
}

.card .show-row span.show-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.card h2 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  margin: 0;
  line-height: 1.35;
  /* Clamp 2 lignes : garde une hauteur régulière même sur titre très long */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.card .meta {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.card .meta:empty { display: none; }

.badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge-high { background: var(--confidence-high-bg); color: var(--confidence-high-fg); }
.badge-medium { background: var(--confidence-medium-bg); color: var(--confidence-medium-fg); }
.badge-low { background: var(--confidence-low-bg); color: var(--confidence-low-fg); }
.badge-unknown { background: var(--confidence-unknown-bg); color: var(--confidence-unknown-fg); }

.badge-status-pending { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.badge-status-validated { background: var(--status-validated-bg); color: var(--status-validated-fg); }
.badge-status-published { background: var(--status-published-bg); color: var(--status-published-fg); }

/* ---- Champs (statut, date, plateformes) ---- */

.field-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-select,
.date-input {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: none;
  letter-spacing: normal;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--ink);
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.status-select:focus-visible,
.date-input:focus-visible {
  outline: none;
  border-color: var(--jtv-teal);
  box-shadow: 0 0 0 3px rgba(13, 139, 156, 0.15);
}

.status-select.badge-status-pending { background: var(--status-pending-bg); }
.status-select.badge-status-validated { background: var(--status-validated-bg); }
.status-select.badge-status-published { background: var(--status-published-bg); }

.date-input { cursor: text; }

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.platform-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.platform-option .platform-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.platform-option:has(.platform-checkbox:checked) {
  color: #fff;
  border-color: transparent;
}

.platform-option:has(input[data-platform="YouTube"]:checked) { background: #d13c3c; }
.platform-option:has(input[data-platform="TikTok"]:checked) { background: var(--ink); }
.platform-option:has(input[data-platform="Instagram/Facebook"]:checked) { background: #b23a8f; }
.platform-option:has(input[data-platform="LinkedIn Groupe"]:checked) { background: #0a66c2; }

.card .actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: var(--space-1);
}

.card .actions a {
  font-size: var(--text-sm);
  color: var(--jtv-teal-dark);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}

.card .actions a:hover {
  text-decoration: underline;
}

.card .actions button {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-edit-link {
  color: var(--jtv-teal-dark);
}

.btn-edit-link:hover {
  text-decoration: underline;
}

.btn-archive-link {
  color: var(--muted);
}

.btn-archive-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.btn-delete-link {
  color: #b23a3a;
}

.btn-delete-link:hover {
  text-decoration: underline;
}

/* ---- Boutons d'action à icône (cartes du dashboard) ---- */

.card .actions .icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.icon-btn-svg {
  flex-shrink: 0;
}

.icon-btn-edit {
  color: var(--jtv-teal-dark);
  border-color: var(--border);
}

.icon-btn-edit:hover {
  background: var(--jtv-teal-tint);
  border-color: var(--jtv-teal);
}

/* Le bouton « Éditer » est désormais un lien (<a>) vers pack.php : on neutralise
   le soulignement au survol pour qu'il reste visuellement identique aux autres
   boutons d'action (archiver/supprimer). */
.card .actions a.icon-btn:hover { text-decoration: none; }

.icon-btn-archive {
  color: var(--muted);
  border-color: var(--border);
}

.icon-btn-archive:hover {
  color: var(--ink);
  background: var(--border-soft);
}

.icon-btn-delete {
  color: #b23a3a;
  border-color: rgba(178, 58, 58, 0.3);
}

.icon-btn-delete:hover {
  color: #fff;
  background: #b23a3a;
  border-color: #b23a3a;
}

/* ---- Cartes : grille de champs (Statut / Date côte à côte) ---- */

.card-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
@media (max-width: 380px) {
  .card-fields { grid-template-columns: 1fr; }
}

/* ---- Cartes : blocs d'actions en deux rangées ----
   Rangée 1 : Ouvrir / Miniatures / Éditer (3 colonnes égales).
   Rangée 2 : Archiver / Supprimer (2 colonnes égales).
   Grille = alignement parfait et hauteurs cohérentes quelles que soient les
   données ; « Éditer » ne flotte jamais seul. */

.card-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
}

.card-actions-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.card-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-h-sm);
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.card-act > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-act .icon-btn-svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.card-act:hover {
  background: var(--jtv-teal-tint);
  border-color: var(--jtv-teal);
  color: var(--jtv-teal-dark);
  text-decoration: none;
}

.card-act:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--jtv-teal);
}

.card-act-archive:hover {
  background: var(--border-soft);
  border-color: var(--muted-soft);
  color: var(--ink);
}

.card-act-danger {
  color: #b23a3a;
  border-color: rgba(178, 58, 58, 0.28);
}
.card-act-danger:hover {
  background: #b23a3a;
  border-color: #b23a3a;
  color: #fff;
}
.card-act-danger:focus-visible {
  box-shadow: 0 0 0 3px rgba(178, 58, 58, 0.25);
  border-color: #b23a3a;
}

/* ---- Modale d'édition manuelle des packs ---- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 31, 34, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-4) var(--space-2);
  overflow-y: auto;
  z-index: 100;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2 * var(--space-4));
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 0;
  font-size: var(--text-lg);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.modal-header-actions .btn-primary {
  padding: 8px 18px;
  font-size: var(--text-sm);
  box-shadow: none;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.modal-body {
  padding: var(--space-3);
  overflow-y: auto;
}

.modal-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) 0;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  cursor: pointer;
}

.modal-tab.active {
  color: var(--jtv-teal-dark);
  border-bottom-color: var(--jtv-teal);
}

.modal-tab-panel h3 {
  font-size: var(--text-base);
  margin: var(--space-3) 0 var(--space-1);
}

.modal-tab-panel h3:first-child {
  margin-top: 0;
}

.modal-tab-panel .field-label {
  display: block;
  margin-bottom: var(--space-2);
}

.modal-tab-panel .field-label-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.modal-tab-panel input[type="text"],
.modal-tab-panel textarea,
.modal-tab-panel select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-transform: none;
  letter-spacing: normal;
}

.json-textarea {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.8rem;
  min-height: 420px;
  resize: vertical;
}

.modal-hint {
  color: var(--muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-2);
}

.modal-error {
  color: #b23a3a;
  font-size: var(--text-sm);
  margin: var(--space-2) 0;
}

.thumb-edit-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.thumb-edit-preview {
  width: 120px;
  height: 68px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.thumb-edit-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-edit-empty {
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
  padding: 0 var(--space-1);
}

.thumb-edit-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.thumb-edit-controls .btn-secondary {
  padding: 8px 16px;
  font-size: var(--text-sm);
}

.thumb-edit-status {
  font-size: var(--text-xs);
  color: var(--jtv-teal-dark);
  min-height: 1em;
}

.thumb-edit-status-error {
  color: #b23a3a;
}

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: var(--space-5) var(--space-2);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.empty-state p {
  margin: 0 0 var(--space-2);
}

/* ---- Primitives de marque partagées (hero, step-card, boutons, panneaux de résultat) ---- */

.hero {
  background: var(--ink);
  color: #fff;
  padding: var(--space-4) var(--space-3) var(--space-4);
}

.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-eyebrow img.jtv-logo-lg {
  height: 44px;
  width: auto;
}

.hero h1 {
  font-size: var(--text-xl);
  margin: 0;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.hero .hero-subtitle {
  color: rgba(207, 233, 238, 0.85);
  max-width: 640px;
  font-size: var(--text-base);
  line-height: 1.6;
  margin: 0;
}

.step-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-xs);
}

.step-card .step-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: 6px;
}

.step-card .step-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--jtv-teal);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-card h2 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

.step-hint {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--space-1);
  line-height: 1.55;
}

.btn {
  font-family: inherit;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-primary {
  background: var(--jtv-teal);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 28px;
  font-family: inherit;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.btn-primary:hover {
  background: var(--jtv-teal-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--border-soft);
  border-color: var(--jtv-teal);
}

.btn-ghost {
  background: transparent;
  color: var(--jtv-teal-dark);
  border: none;
  padding: 10px 14px;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.btn-ghost:hover {
  background: var(--jtv-teal-tint);
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--border);
  border-top-color: var(--jtv-teal);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

.result-panel {
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.result-panel.running { background: var(--outcome-running-bg); border: 1px solid var(--border); }
.result-panel.success { background: var(--outcome-success-bg); border: 1px solid var(--outcome-success-border); }
.result-panel.warning { background: var(--outcome-warning-bg); border: 1px solid var(--outcome-warning-border); }
.result-panel.error { background: var(--outcome-error-bg); border: 1px solid var(--outcome-error-border); }

.result-panel .result-title { font-size: var(--text-lg); font-weight: var(--weight-bold); }

.result-panel .result-meta {
  font-size: var(--text-sm);
  color: var(--muted);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.result-panel .result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.result-panel .running-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.result-panel .thumb-preview {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.result-panel .thumb-preview img {
  max-height: 160px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.security-note {
  font-size: var(--text-sm);
  color: var(--muted);
  background: var(--outcome-running-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: var(--space-2);
}

.notice {
  font-size: var(--text-base);
  background: var(--outcome-warning-bg);
  border: 1px solid var(--outcome-warning-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: #6b5426;
}

.log-disclosure {
  margin-top: var(--space-1);
  font-size: var(--text-base);
}

.log-disclosure summary {
  cursor: pointer;
  font-weight: var(--weight-semibold);
  color: var(--jtv-teal-dark);
  padding: 6px 0;
}

.log-disclosure pre {
  background: #14181a;
  color: #d9e2e5;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  margin-top: var(--space-1);
}

/* ---- Timeline (page d'accueil) ---- */

.workflow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.workflow-list li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-base);
  position: relative;
  padding-bottom: var(--space-3);
}

.workflow-list li:last-child {
  padding-bottom: 0;
}

.workflow-list .workflow-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--jtv-teal);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.workflow-list li:not(:last-child) .workflow-num::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 50%;
  width: 2px;
  height: calc(100% + var(--space-3) - 28px);
  background: var(--border);
  transform: translateX(-50%);
}

.workflow-list .workflow-body {
  padding-top: 3px;
}

.workflow-list .workflow-title {
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.workflow-list .workflow-desc {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Améliorations planning : sauvegarde asynchrone, lien vidéo, filtre réseaux,
   glisser-déposer du calendrier, zone « Non planifié ».
   --------------------------------------------------------------------------- */

.save-status {
  font-size: var(--text-sm);
  padding: 4px 10px;
  border-radius: 6px;
  margin: 8px 0 4px;
  font-weight: 600;
}
.save-status-dirty { background: var(--outcome-running-bg); color: var(--jtv-teal-dark); }
.save-status-saving { background: var(--outcome-running-bg); color: var(--muted); }
.save-status-saved { background: var(--outcome-success-bg); color: var(--green); border: 1px solid var(--outcome-success-border); }
.save-status-error { background: var(--outcome-error-bg); color: var(--red); border: 1px solid var(--outcome-error-border); }

/* Boutons liens dans le statut par champ (Annuler après sauvegarde, Réessayer) */
.ef-linkbtn {
  background: none;
  border: none;
  padding: 0 2px;
  margin: 0;
  font: inherit;
  font-weight: var(--weight-semibold);
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.ef-linkbtn:hover { text-decoration: none; }
.ef-linkbtn:focus-visible { outline: 2px solid var(--jtv-teal); outline-offset: 2px; border-radius: 2px; }

/* Composant lien vidéo (video-link.js) : états vide / validé / édition. */
.video-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--weight-regular);
}
.video-field.is-busy { opacity: 0.7; pointer-events: none; }

.video-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.video-row-icon {
  flex: 0 0 auto;
  color: var(--jtv-teal-dark);
}
.video-input {
  flex: 1 1 140px;
  min-width: 120px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--ink);
  background: #fff;
}
.video-input:focus-visible {
  outline: none;
  border-color: var(--jtv-teal);
  box-shadow: 0 0 0 3px rgba(13, 139, 156, 0.15);
}

.video-domain {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.video-btn:hover { border-color: var(--jtv-teal); }
.video-btn-icon { flex: 0 0 auto; }

.video-btn-primary {
  background: var(--jtv-teal);
  border-color: var(--jtv-teal);
  color: #fff;
}
.video-btn-primary:hover { background: var(--jtv-teal-dark); border-color: var(--jtv-teal-dark); }

.video-btn-watch {
  background: var(--jtv-teal-dark);
  border-color: var(--jtv-teal-dark);
  color: #fff;
}
.video-btn-watch:hover { color: #fff; opacity: 0.92; }

.video-btn-copy.is-copied {
  background: var(--outcome-success-bg);
  border-color: var(--outcome-success-border);
  color: var(--green);
}

.video-btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  padding: 6px 6px;
}
.video-btn-ghost:hover { color: var(--ink); border-color: var(--border); }
.video-btn-delete:hover { color: var(--red); border-color: var(--red); }

.video-error {
  font-size: var(--text-xs);
  color: var(--red);
  font-weight: var(--weight-semibold);
}
.video-status { margin: 0; }

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.network-filters {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.network-filters button {
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.network-filters button:hover { border-color: var(--jtv-teal); }
.network-filters button.active {
  background: var(--jtv-teal);
  border-color: var(--jtv-teal);
  color: #fff;
}

.calendar-count {
  font-size: var(--text-sm);
  color: var(--muted);
}

.calendar-chip { cursor: grab; }
.calendar-chip.dragging { opacity: 0.5; }
.calendar-day.drop-target,
.calendar-unscheduled-drop.drop-target {
  outline: 2px dashed var(--jtv-teal);
  outline-offset: -2px;
  background: var(--jtv-teal-tint);
}

.calendar-unscheduled {
  margin-top: var(--space-3);
}
.calendar-unscheduled h3 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 8px;
}
.calendar-unscheduled-drop {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 48px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
}

/* ==========================================================================
   Page de détail / édition inline d'un pack (dashboard/pack.php)
   ========================================================================== */

.pack-main {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-2) var(--space-5);
}

.pack-toplinks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.back-link {
  color: var(--jtv-teal-dark);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
}
.back-link:hover { text-decoration: underline; }

.pack-topmeta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.pack-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}

.pack-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-xs);
}

.pack-section > h2 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jtv-teal-dark);
  margin: 0 0 var(--space-2);
}

/* Grille des champs courts du bloc Projet */
.ef-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Champ éditable générique */
.ef { margin-bottom: var(--space-2); }
.ef:last-child { margin-bottom: 0; }

.ef-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1);
  margin-bottom: 4px;
}

.ef-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--muted);
}
h3.ef-label {
  font-size: var(--text-base);
  color: var(--ink);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.ef-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Bouton "Modifier" (crayon) : discret, visible seulement en mode édition */
.ef-edit {
  display: none;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--jtv-teal-dark);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 3px 8px;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ef-edit:hover { background: var(--jtv-teal-tint); }
.ef-edit .icon-btn-svg { width: 13px; height: 13px; }
body.edit-mode .ef-edit { display: inline-flex; }

/* Actions réservées au mode édition (remplacement d'image) */
.edit-only { display: none; }
body.edit-mode .edit-only { display: flex; }

/* Bouton copier discret */
.pack-copy {
  background: var(--jtv-teal);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.pack-copy:hover { background: var(--jtv-teal-dark); }
.pack-copy.is-copied { background: var(--green); }

.ef-read {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-base);
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: background var(--transition-slow);
}
.ef-read.just-saved { background: var(--outcome-success-bg); }
.ef-read ul { margin: 4px 0; padding-left: 20px; }
.ef-readonly { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-sm); }
.ef-empty { color: var(--muted-soft); font-style: italic; }

/* En édition, on masque la lecture et on montre la zone d'édition */
.ef.is-editing .ef-read { display: none; }
.ef-edit-zone { margin-top: 6px; }

.ef-control input[type="text"],
.ef-control textarea,
.ef-control select {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: #fff;
}
.ef-control textarea { resize: vertical; line-height: 1.5; min-height: 44px; }
.ef-control input:focus-visible,
.ef-control textarea:focus-visible,
.ef-control select:focus-visible {
  outline: 2px solid var(--jtv-teal);
  outline-offset: 1px;
  border-color: var(--jtv-teal);
}
.ef-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-base); cursor: pointer; }

.ef-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}
/* Boutons compacts dans les zones d'édition inline */
.ef-controls .btn-primary { padding: 8px 16px; font-size: var(--text-base); box-shadow: none; }
.ef-controls .btn-secondary { padding: 7px 14px; }
.ef-status { margin: 0; }
.ef-error { margin-top: 6px; }

/* Champ non éditable inline (lien vidéo, nom de fichier) */
.ef-static { margin-top: var(--space-2); }
.ef-static > .ef-label { display: block; margin-bottom: 4px; }

/* JSON brut (admin) */
.pack-raw > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.pack-raw-pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  max-height: 420px;
}
.pack-raw-edit { margin-top: var(--space-2); }
.pack-raw .json-textarea { width: 100%; box-sizing: border-box; min-height: 320px; font-family: var(--font-mono); font-size: var(--text-sm); }

@media (max-width: 600px) {
  .ef-grid { grid-template-columns: 1fr; }
  .pack-toplinks { align-items: flex-start; }
  .ef-head { flex-wrap: wrap; }
}

/* ==========================================================================
   Page d'accueil (index.php) — refonte 2026
   Header partagé (.topbar) + hero premium + cartes de navigation + timeline.
   Styles centralisés ici (auparavant inline dans index.php).
   ========================================================================== */

.home {
  display: block;
}

/* Marque du header sur la home : logo + nom d'outil */
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  text-decoration: none;
  color: var(--header-fg);
}
.topbar-brand img.jtv-logo { height: 34px; width: auto; flex-shrink: 0; }
.topbar-brand .topbar-brand-name {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* ---- Hero ---- */

.home-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(900px 500px at 82% -10%, rgba(43, 182, 200, 0.16), transparent 60%),
    radial-gradient(700px 500px at 0% 120%, rgba(13, 139, 156, 0.14), transparent 55%),
    linear-gradient(160deg, var(--header-bg) 0%, var(--header-bg-2) 100%);
  border-bottom: 1px solid var(--header-border);
}

.home-hero-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-4);
  align-items: center;
}

.home-hero-copy { min-width: 0; }

.hero-eyebrow-tag,
.home-hero-sub,
.hero-callout-text,
.hero-callout-title { overflow-wrap: anywhere; }

.hero-eyebrow-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-on-dark);
  margin-bottom: var(--space-2);
}

.home-hero h1 {
  margin: 0 0 var(--space-2);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.06;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}
.home-hero h1 .accent {
  display: block;
  color: var(--teal-on-dark);
}

.home-hero-sub {
  margin: 0 0 var(--space-3);
  max-width: 34em;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--header-fg-muted);
}

.hero-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 34em;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--header-surface);
  border: 1px solid var(--header-border);
}
.hero-callout .hero-callout-icon {
  flex-shrink: 0;
  color: var(--teal-on-dark);
  margin-top: 1px;
}
.hero-callout-title {
  font-weight: var(--weight-semibold);
  color: #fff;
  font-size: var(--text-base);
}
.hero-callout-text {
  font-size: var(--text-sm);
  color: var(--header-fg-muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* ---- Illustration hero (100% HTML/CSS, aucune image externe) ---- */

.hero-illustration {
  position: relative;
  min-width: 0;
  max-width: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-mock {
  width: 100%;
  max-width: 440px;
  min-width: 0;
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}
.hero-mock-side {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-right: 4px;
}
.hero-mock-side i {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.09);
}
.hero-mock-side i:first-child { background: var(--teal-on-dark); }
.hero-mock-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.hero-mock-bar {
  height: 18px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}
.hero-mock-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hero-mock-tile {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.28);
}
.hero-mock-lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hero-mock-lines i { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); }

.hero-rocket {
  position: absolute;
  right: 4px;
  bottom: 18px;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--jtv-teal), var(--teal-on-dark));
  box-shadow: 0 12px 30px rgba(43, 182, 200, 0.45);
}
.hero-rocket svg { width: 32px; height: 32px; }

.hero-dots {
  position: absolute;
  top: 24px;
  right: 8px;
  width: 84px;
  height: 60px;
  background-image: radial-gradient(rgba(43, 182, 200, 0.5) 1.6px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.6;
  pointer-events: none;
}

/* ---- Zone claire : cartes de navigation + timeline ---- */

.home-wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
}

.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.home-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.home-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: var(--jtv-teal);
}
.home-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--jtv-teal);
}
.home-card-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--jtv-teal-tint);
  color: var(--jtv-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-card-icon svg { width: 22px; height: 22px; }
.home-card h2 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
}
.home-card p {
  font-size: var(--text-base);
  color: var(--muted);
  margin: 0;
  flex: 1;
  line-height: 1.55;
}
.home-card .cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--jtv-teal-dark);
  margin-top: 2px;
}
.home-card .cta svg { transition: transform var(--transition-fast); }
.home-card:hover .cta svg { transform: translateX(3px); }

/* ---- Timeline horizontale (desktop) / verticale (mobile) ---- */

.workflow-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-xs);
  margin-bottom: var(--space-2);
}
.workflow-panel h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.workflow-h {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}
.wf-step { position: relative; min-width: 0; }
.wf-step-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
/* Connecteur horizontal reliant les numéros d'une étape à la suivante */
.wf-step:not(:last-child) .wf-step-top::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  width: calc(100% + var(--space-2));
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.wf-num {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--jtv-teal);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wf-icon {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--jtv-teal-tint);
  color: var(--jtv-teal-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wf-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--ink);
  line-height: 1.3;
}
.wf-desc {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
}
.wf-desc code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 5px;
}

@media (max-width: 860px) {
  .workflow-h { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .wf-step:not(:last-child) .wf-step-top::before { display: none; }
}
@media (max-width: 520px) {
  .workflow-h { grid-template-columns: 1fr; }
}

/* ---- Barre sécurité / architecture (bas de home) ---- */

.home-security {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: var(--outcome-running-bg);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
}
.home-security .home-security-icon {
  flex-shrink: 0;
  color: var(--jtv-teal-dark);
}
.home-security strong { color: var(--ink); }

@media (max-width: 900px) {
  .home-hero-inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .hero-illustration { min-height: 0; order: -1; }
  .hero-mock { max-width: 360px; }
}

/* ==========================================================================
   Refonte V3 — pages secondaires (generate.php, thumbnails.php, pack.php)
   Langage graphique commun : header partagé (.topbar via render_topbar),
   bandeau de page clair (.page-hero), assistant (.wizard), fiche pack
   (.pack-hero + grille de sections). Purement additif.
   ========================================================================== */

/* ---- Bandeau de page (sous le header sombre) ---- */
.page-hero {
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.page-hero-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-3) var(--space-3) var(--space-3);
}
.page-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-2);
}
.page-breadcrumbs a {
  color: var(--jtv-teal-dark);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}
.page-breadcrumbs a:hover { text-decoration: underline; }
.page-breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: var(--weight-semibold); }
.page-breadcrumb-sep { color: var(--muted-soft); }

.page-hero-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.page-hero-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--jtv-teal-tint);
  color: var(--jtv-teal-dark);
  border: 1px solid rgba(13, 139, 156, 0.18);
}
.page-hero-icon .icon-btn-svg { width: 22px; height: 22px; }
.page-hero-text { min-width: 0; }
.page-hero-text h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.page-hero-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.55;
  max-width: 72ch;
}

/* ---- Assistant (wizard) : generate.php / thumbnails.php ---- */
.wizard-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3) var(--space-5);
}
.wizard-wrap.wizard-wrap-wide { max-width: 980px; }

/* Rail vertical reliant les étapes numérotées */
.wizard { position: relative; }
.wizard .step-card {
  position: relative;
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.wizard .step-card .step-head { margin-bottom: var(--space-1); }
.wizard .step-card .step-number {
  width: 30px;
  height: 30px;
  box-shadow: 0 0 0 4px var(--jtv-teal-tint);
}
.wizard .step-card h2 { font-size: var(--text-md); }

/* Contrôles de formulaire (migrés depuis local.css pour que les pages du
   dashboard soient autonomes sur le design system, sans dépendre de /local). */
.wizard select,
.wizard input[type="text"],
.wizard textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--text-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin-top: 8px;
  color: var(--ink);
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.wizard textarea { resize: vertical; line-height: 1.55; }
.wizard select:focus-visible,
.wizard input[type="text"]:focus-visible,
.wizard textarea:focus-visible {
  outline: none;
  border-color: var(--jtv-teal);
  box-shadow: var(--focus-ring);
}

/* Sélecteur de source exclusif (radios) : cartes cliquables plutôt que liste brute */
.mode-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: var(--space-2);
}
.mode-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.mode-options label:hover { border-color: var(--jtv-teal); }
.mode-options label:has(input[type="radio"]:checked) {
  border-color: var(--jtv-teal);
  background: var(--jtv-teal-tint);
  box-shadow: inset 0 0 0 1px var(--jtv-teal);
}
.mode-options label:has(input[type="radio"]:focus-visible) {
  box-shadow: var(--focus-ring);
}
.mode-options input[type="radio"] {
  accent-color: var(--jtv-teal);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
}
.mode-panel { margin-top: var(--space-2); }

.text-mode-options {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  flex-wrap: wrap;
}
.text-mode-options select { width: auto; flex: 0 0 auto; margin-top: 0; }
.text-mode-options input[type="text"] { width: auto; flex: 1 1 200px; margin-top: 0; }

/* Zone de dépôt de fichier */
.dropzone {
  position: relative;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
  background: var(--border-soft);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.dropzone:hover { border-color: var(--jtv-teal); }
.dropzone.is-dragover { border-color: var(--jtv-teal); background: var(--jtv-teal-tint); }
.dropzone-hint { font-size: var(--text-sm); color: var(--muted); pointer-events: none; }
.dropzone-hint strong { color: var(--ink); font-weight: var(--weight-semibold); }
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Notice de doublon / avertissement dans l'assistant */
.wizard .result-panel { margin-top: 0; margin-bottom: var(--space-2); }

/* Bloc de génération valorisé (dernière étape) */
.step-card-generate {
  background: linear-gradient(180deg, #fff 0%, var(--jtv-teal-tint) 220%);
  border-color: rgba(13, 139, 156, 0.25);
}
.step-card-generate .btn-primary { width: 100%; }
@media (min-width: 560px) {
  .step-card-generate .btn-primary { width: auto; min-width: 280px; }
}

/* Aperçus de ratio décoratifs (formats de miniature) */
.ratio-previews {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.ratio-chip { text-align: center; color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.ratio-box {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(135deg, var(--border-soft) 0 8px, #fff 8px 16px);
  margin: 0 auto 6px;
}
.ratio-box-h { width: 96px; height: 54px; }
.ratio-box-v { width: 40px; height: 71px; }

/* Carte de contexte du pack sélectionné (thumbnails.php) */
.pack-context {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.pack-context-thumb {
  flex-shrink: 0;
  width: 128px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-bg) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-soft);
  font-size: var(--text-xs);
  overflow: hidden;
}
.pack-context-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pack-context-meta { min-width: 0; }
.pack-context-show {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jtv-teal-dark);
  font-weight: var(--weight-semibold);
}
.pack-context-title { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--ink); margin-top: 2px; }
.pack-context-id { font-size: var(--text-sm); color: var(--muted); font-family: var(--font-mono); margin-top: 2px; }

/* ==========================================================================
   Fiche pack V3 (pack.php) — hero + grille de sections
   ========================================================================== */

.pack-main-v3 {
  max-width: var(--content-width-wide);
  margin: 0 auto;
  padding: var(--space-3) var(--space-3) var(--space-5);
}

/* Indicateur global de sauvegarde, hors header (dans la barre d'actions du hero) */
.save-indicator {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
}
body.edit-mode .save-indicator { display: inline-flex; }
.save-indicator-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.save-indicator[data-state="saved"] .save-indicator-dot { background: var(--green); }
.save-indicator[data-state="unsaved"] .save-indicator-dot { background: var(--gold); }
.save-indicator[data-state="saving"] .save-indicator-dot { background: var(--jtv-teal); animation: save-indicator-pulse 1s ease-in-out infinite; }
.save-indicator[data-state="error"] { color: var(--red); border-color: var(--outcome-error-border); background: var(--outcome-error-bg); }
.save-indicator[data-state="error"] .save-indicator-dot { background: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .save-indicator[data-state="saving"] .save-indicator-dot { animation: none; }
}

/* Hero du pack : miniature à gauche, identité + actions à droite */
.pack-hero {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--space-3);
  align-items: start;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-3);
}
.pack-hero-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pack-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pack-hero-media .thumb-edit-empty {
  color: var(--muted-soft);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pack-hero-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pack-hero-show {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--jtv-teal-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pack-hero h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}
.pack-hero-badges { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }
.pack-hero-summary { color: var(--muted); font-size: var(--text-base); line-height: 1.55; margin: 0; }
.pack-hero-actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-1);
}

/* Grille de sections de la fiche */
.pack-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-2);
}
.pack-grid .pack-section { margin-bottom: 0; }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
@media (max-width: 900px) {
  .col-8, .col-6, .col-4 { grid-column: span 12; }
}

/* En-tête de section avec actions alignées à droite */
.pack-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
/* h2 déplacée dans .pack-section-head : on lui réapplique le style des titres de
   section (auparavant porté par « .pack-section > h2 », enfant direct). */
.pack-section-head > h2 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jtv-teal-dark);
}
.section-actions { display: flex; gap: var(--space-1); flex-wrap: wrap; align-items: center; }

/* Carte individuelle de miniature (dans .pack-thumbs-grid) */
.media-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: var(--bg);
}
.media-card .ef { margin-bottom: var(--space-1); }

/* Bouton « Copier le pack complet » dans la barre d'actions du hero */
.pack-copy-lg { padding: 10px 16px; font-size: var(--text-base); }

/* Alignement icône + libellé dans les boutons pleins/secondaires */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary .icon-btn-svg,
.btn-secondary .icon-btn-svg { flex-shrink: 0; }

/* Grille de métadonnées (informations projet, en lecture) */
.metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2);
}
.metadata-item { min-width: 0; }
.metadata-item .metadata-label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: var(--weight-semibold);
  margin-bottom: 2px;
}
.metadata-item .metadata-value { font-size: var(--text-base); color: var(--ink); word-break: break-word; }
.metadata-item .metadata-value.is-mono { font-family: var(--font-mono); font-size: var(--text-sm); }

/* Miniatures : vraie grille 2 colonnes, hauteur verticale plafonnée */
.pack-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-3);
}
.media-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 340px;
}
.media-preview img { max-width: 100%; max-height: 340px; object-fit: contain; display: block; }
.media-preview .thumb-edit-empty {
  color: var(--muted-soft);
  font-size: var(--text-sm);
  padding: var(--space-4) var(--space-2);
}
.pack-thumb-format {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  margin: var(--space-1) 0;
  font-size: var(--text-sm);
  color: var(--muted);
}
.pack-thumb-format .format-ratio { font-weight: var(--weight-semibold); color: var(--ink); }

@media (max-width: 720px) {
  .pack-hero { grid-template-columns: 1fr; }
  .pack-hero-media { max-width: 480px; }
}

/* ---- Accessibilité globale ---- */

/* Fallback de focus clavier visible pour tout élément interactif non couvert
   par une règle dédiée ci-dessus. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--jtv-teal);
  outline-offset: 2px;
}

/* Respect de prefers-reduced-motion : on neutralise animations et
   déplacements décoratifs (hover d'élévation, spinners, etc.). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover,
  .home-card:hover { transform: none; }
}