/* Fichier assemblé par bin/build-css à partir de dashboard/assets/css/ :
   ne pas le modifier ici, modifier sa partie puis lancer « php bin/build-css ». */

/* ---- 01-base.css ---- */
/* Base : page, en-tête partagé (render_topbar), logo, déconnexion, cloche des notifications.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-ink); }
a:hover { color: var(--brand-dark); }

button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); }

/* ---- En-tête partagé (render_topbar) ----
   Fond crème translucide flouté, collé en haut. Gauche : logo Déclic
   (le même dans tous les espaces) et puce de l'espace actif ; centre : navigation en pilule blanche (défile
   horizontalement si elle manque de place) ; droite : avatar, nom, bouton
   Déconnexion rond (icône seule). */

header.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 18px 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}

header.topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: auto;
  min-width: 0;
}

header.topbar .topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-pill);
}

/* Logo Déclic : hauteur fixe, largeur déduite (attributs width/height du
   fichier), jamais écrasé quand la barre manque de place. */
header.topbar img.brand-logo {
  height: 26px;
  width: auto;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
/* Logo « sur fond sombre » : affiché à la place du logo d'en-tête en mode sombre. */
header.topbar img.brand-logo-on-dark { display: none; }

/* Filet entre le logo Déclic et la puce de l'espace. */
header.topbar .topbar-brand:has(+ .space-chip, + .space-switch)::after {
  content: "";
  width: 1px;
  height: 24px;
  background: var(--border-dash);
}

header.topbar .topbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--card-bg);
  border-radius: var(--radius-pill);
  padding: 4px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: var(--shadow-nav);
}
header.topbar .topbar-nav::-webkit-scrollbar { display: none; }

header.topbar .topbar-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

header.topbar .topbar-action:hover {
  background: var(--surface-2);
  color: var(--ink);
}

header.topbar .topbar-action[aria-current="page"] {
  background: var(--inverse);
  color: var(--on-inverse);
  font-weight: var(--weight-bold);
}

header.topbar .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

header.topbar .topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
}
header.topbar .topbar-user:focus-visible { outline: none; box-shadow: var(--focus-ring); }

header.topbar .avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  color: var(--on-brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
}

header.topbar .userbox-name {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Déconnexion : formulaire POST (jamais un simple lien GET), bouton habillé
   comme les autres actions de la barre. */
header.topbar .topbar-logout-form { display: inline-flex; margin: 0; }
header.topbar .topbar-logout {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(31, 36, 38, 0.06);
  transition: color var(--transition-fast), background var(--transition-fast);
}
header.topbar .topbar-logout .icon-btn-svg { width: 15px; height: 15px; }
header.topbar .topbar-logout:hover { color: var(--danger); background: var(--danger-bg); }

header.topbar .topbar-login { padding: 9px 18px; font-size: 13px; }

/* Lien vers le site de présentation (version connectée) : même pastille ronde. */
header.topbar .topbar-site {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(31, 36, 38, 0.06);
  transition: color var(--transition-fast), background var(--transition-fast);
}
header.topbar .topbar-site .icon-btn-svg { width: 15px; height: 15px; }
header.topbar .topbar-site:hover { color: var(--brand-dark); background: var(--brand-tint); }
header.topbar .topbar-site:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Cloche des notifications de l'équipe (render_notification_bell(),
   assets/js/notifications.js) : même pastille ronde que la déconnexion,
   compteur rouge, panneau déroulant sous la barre. */
header.topbar .notif { position: relative; display: inline-flex; }
header.topbar .topbar-notif {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(31, 36, 38, 0.06);
  transition: color var(--transition-fast), background var(--transition-fast);
}
header.topbar .topbar-notif .icon-btn-svg { width: 16px; height: 16px; }
header.topbar .topbar-notif:hover,
header.topbar .topbar-notif[aria-expanded="true"] { color: var(--brand-dark); background: var(--brand-tint); }
header.topbar .topbar-notif:focus-visible { outline: none; box-shadow: var(--focus-ring); }
header.topbar .topbar-notif-count {
  position: absolute;
  top: -3px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: var(--weight-heavy);
  line-height: 1;
  color: #fff;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg);
}
header.topbar .topbar-notif-count[hidden] { display: none; }
header.topbar .notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  z-index: 70;
  width: min(380px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 120px));
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg), var(--shadow-xs);
}
header.topbar .notif-panel[hidden] { display: none; }
header.topbar .notif-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 8px;
}
header.topbar .notif-panel-title { font-size: 14px; font-weight: var(--weight-bold); color: var(--ink); }
header.topbar .notif-panel-scope { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.topbar .notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
header.topbar .notif-link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
header.topbar .notif-link:hover { background: var(--surface-2); }
header.topbar .notif-item.is-unread .notif-link { background: var(--brand-tint-soft); }
header.topbar .notif-item.is-unread .notif-link:hover { background: var(--brand-tint); }
header.topbar .notif-avatar { width: 30px; height: 30px; font-size: 12px; }
header.topbar .notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
header.topbar .notif-text { font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
header.topbar .notif-text strong { color: var(--ink); font-weight: var(--weight-bold); }
header.topbar .notif-title { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header.topbar .notif-time { font-size: 11.5px; color: var(--muted); }
header.topbar .notif-item.is-unread .notif-time { color: var(--brand-dark); font-weight: var(--weight-semibold); }
header.topbar .notif-empty { margin: 0; padding: 6px 12px 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
/* Téléphone : panneau sur toute la largeur, sous la première ligne de la barre. */
@media (max-width: 720px) {
  header.topbar .notif { position: static; }
  header.topbar .notif-panel { top: 60px; left: 16px; right: 16px; width: auto; }
}

header.topbar a:focus-visible,
header.topbar .topbar-logout:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Bouton présenté comme un lien (ex. « Se déconnecter » en pied de page). */
.inline-form { display: inline; margin: 0; }
.btn-link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Largeur moyenne : logo et utilisateur restent sur la première ligne, la
   navigation passe dessous (défilement horizontal si elle manque de place). */
@media (max-width: 1260px) {
  header.topbar .topbar-right { order: 2; }
  header.topbar .topbar-nav { order: 3; }
}

@media (max-width: 720px) {
  header.topbar { padding: 12px 16px; gap: 10px 12px; }
  header.topbar .userbox-name { display: none; }
  header.topbar img.brand-logo { height: 22px; }
  header.topbar .topbar-brand::after { display: none; }
  header.topbar .topbar-action { padding: 7px 13px; }
}

main {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 28px 40px 80px;
}

@media (max-width: 720px) {
  main { padding: 20px 16px 56px; }
}

/* ---- 02-tableau-de-bord.css ---- */
/* Tableau de bord (dashboard/index.php) : en-tête de page, filtres, cartes de pack, pastilles, badges de catégorie, archives.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ==========================================================================
   Dashboard (dashboard/index.php) — refonte « Aérien »
   ========================================================================== */

/* Masqué à l'écran, lu par les lecteurs d'écran (prioritaire sur les styles
   de contrôles, d'où !important). */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

main.dashboard-main,
main.archives-main { max-width: var(--content-width-wide); }

/* ---- En-tête de page (titre + sous-titre + action) ---- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.page-head h1 {
  font-size: 32px;
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 6px;
}

.page-head-sub {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.page-head .btn-primary .icon-btn-svg { width: 16px; height: 16px; }

/* ---- Groupes segmentés (filtres statut / catégorie / vue / réseaux) ---- */

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--card-bg);
  border-radius: var(--radius-pill);
  padding: 4px;
  box-shadow: var(--shadow-xs);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }

.segmented-sunken {
  background: var(--surface-2);
  box-shadow: none;
}

.segmented button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.segmented button:hover { background: var(--surface-2); color: var(--ink); }
.segmented-sunken button:hover { background: var(--sunken-hover); }
.segmented button.active,
.segmented button.active:hover {
  background: var(--inverse);
  color: var(--on-inverse);
}
.segmented-sunken button.active,
.segmented-sunken button.active:hover {
  background: var(--card-bg);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.segmented button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.segmented button .icon-btn-svg { width: 14px; height: 14px; }

/* ---- Barre d'outils ---- */

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.toolbar .view-switch { margin-left: auto; }

/* Pastille de statut devant chaque filtre (rappel visuel ; le libellé reste
   explicite) + compteur en mini-pilule. */
.filters button[data-filter]:not([data-filter="all"])::before {
  content: "";
  width: 8px;
  height: 8px;
  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="Programmé"]::before { background: var(--status-scheduled-fg); }
.filters button[data-filter="Publié"]::before { background: var(--status-published-fg); }

.filter-count {
  font-size: 11px;
  font-weight: var(--weight-bold);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
}
.filters button.active .filter-count { background: color-mix(in srgb, var(--on-inverse) 18%, transparent); color: var(--on-inverse); }

/* Menu « Filtrer » : statut, type de contenu, réseau et tri dans un panneau ;
   seul le choix Grille / Calendrier reste dans la barre. */
.filter-menu { position: relative; }
.filter-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  box-shadow: var(--shadow-xs);
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.filter-menu > summary::-webkit-details-marker { display: none; }
.filter-menu > summary:hover,
.filter-menu[open] > summary { background: var(--surface-2); color: var(--ink); }
.filter-menu > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.filter-menu > summary .icon-btn-svg { width: 15px; height: 15px; }
.filter-menu-count {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--inverse);
  color: var(--on-inverse);
  font-size: 11px;
  text-align: center;
}
.filter-menu-count[hidden] { display: none; }
.filter-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  width: max-content;
  max-width: min(480px, calc(100vw - 32px));
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg), var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.filter-menu-section { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.filter-menu-section[hidden] { display: none; }
.filter-menu-label {
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Dans le panneau, les groupes deviennent des pastilles qui passent à la ligne. */
.filter-menu-panel .segmented { flex-wrap: wrap; overflow: visible; gap: 6px; padding: 0; background: none; box-shadow: none; }
.filter-menu-panel .segmented button { padding: 7px 12px; }
.filter-menu-panel .segmented button:not(.active) { background: var(--surface-2); }
.filter-menu-panel .segmented button:not(.active):hover { background: var(--surface-3); color: var(--ink); }
.filter-menu-panel .sort-control select { background-color: var(--surface-2); }
.filter-menu-reset {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.filter-menu-reset:hover { color: var(--ink); }
.filter-menu-reset:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

/* ---- Selects et champs « Aérien » : sans bordure, chevron personnalisé ---- */

.select-pill,
.sort-control select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--card-bg) var(--select-chevron) no-repeat right 12px center;
  border-radius: var(--radius-pill);
  padding: 10px 38px 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
.select-pill:focus-visible,
.sort-control select:focus-visible { outline: none; box-shadow: var(--focus-ring); }

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

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 22px;
  align-items: start;
}

.card {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

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

/* Carte dépliée : pas de soulèvement (on y édite des champs). */
.card[data-expanded="true"]:hover { transform: none; }

.card-media { cursor: pointer; }

/* Vignette partagée horizontale + verticale : l'horizontale occupe la place,
   la verticale (souvent le seul visuel qui différencie des formats courts
   tirés d'un même tournage) est accolée à droite, séparée par un trait blanc. */
.card .thumb,
.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: var(--surface-3);
  display: flex;
  overflow: hidden;
}

.card .thumb-h {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card .thumb-v {
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}

.thumb.thumb-split .thumb-v { border-left: 3px solid var(--card-bg); }
/* Post RS : visuel montré en entier (portrait ou carré) sur fond bleu pâle. */
.thumb.thumb-post { background: var(--category-linkedin-soft); }
.card .thumb.thumb-post .thumb-h { object-fit: contain; }
.thumb.thumb-post .thumb-empty svg { color: var(--category-linkedin); }
.thumb.thumb-vertical-only { justify-content: center; }

.card .thumb-empty,
.thumb-empty {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--muted-soft);
}
.thumb-empty svg { width: 26px; height: 26px; stroke-width: 1.6; }

/* Badge émission (haut-gauche) : pilule blanche translucide. */
.thumb-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 11px;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.02em;
  line-height: 1.3;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badge catégorie (haut-droite) : pilule sombre, ou blanche pointillée si le
   pack n'est pas catégorisé. */
.card .thumb-category {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.card .body {
  padding: 14px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

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

.card-date {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--muted);
}

.card h2 {
  font-size: 15px;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}

.card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  min-height: 22px;
}

.card-networks { display: contents; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1.4;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.tag-video {
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.tag-video:hover { color: var(--brand-dark); background: var(--brand-tint-hover); }
.tag-video .icon-btn-svg { width: 9px; height: 9px; }
.tag[hidden] { display: none; }

/* ---- Pied de carte : bascule « Modifier » + actions en icônes rondes ---- */

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 6px 4px;
}

.card-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--weight-bold);
  background: var(--surface-2);
  color: var(--ink-soft);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.card-toggle .icon-btn-svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
  transition: transform 200ms ease;
}
.card-toggle:hover,
.card-toggle[aria-expanded="true"] {
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.card-toggle[aria-expanded="true"] .icon-btn-svg { transform: rotate(180deg); }
.card-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.card-actions {
  display: flex;
  gap: 2px;
}

.card-act {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.card-act .icon-btn-svg { width: 15px; height: 15px; }
.card-actions .card-act > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.card-act:hover { background: var(--surface-2); color: var(--ink); }
.card-act:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Bloc déplié : réglages de publication ---- */

.card-details {
  margin-top: 6px;
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-details[hidden] { display: none; }

.card-details .meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.meta-confidence { white-space: nowrap; }

.field-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.card-details select,
.card-details .date-input {
  width: 100%;
  min-width: 0;
  border: 0;
  background-color: var(--card-bg);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.card-details select {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
  cursor: pointer;
}
.card-details .date-input { padding: 9px 14px; cursor: text; }
/* Date et heure de publication sur une ligne entière de la carte. */
.card-fields .field-label-wide { grid-column: 1 / -1; }
.date-time { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; }
.card-details select:focus-visible,
.card-details .date-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.status-select { font-weight: var(--weight-bold); }
.status-select.badge-status-pending { color: var(--status-pending-fg); }
.status-select.badge-status-validated { color: var(--status-validated-fg); }
.status-select.badge-status-scheduled { color: var(--status-scheduled-fg); }
.status-select.badge-status-published { color: var(--status-published-fg); }
.status-select option { color: var(--ink); }

/* Réseaux : pilules toggles (case à cocher masquée), cochée = fond encre. */
.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.platform-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: var(--weight-bold);
  text-transform: none;
  letter-spacing: 0;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--ink-soft);
  box-shadow: 0 1px 2px rgba(31, 36, 38, 0.06);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.platform-option:hover { background: var(--surface-2); }
.platform-option .platform-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.platform-option:has(.platform-checkbox:checked) {
  background: var(--inverse);
  color: var(--on-inverse);
  box-shadow: none;
}
.platform-option:has(.platform-checkbox:focus-visible) { box-shadow: var(--focus-ring); }

.category-assign select { width: 100%; }

.card-actions-secondary {
  display: flex;
  gap: 6px;
  padding-top: 4px;
}

.card-actions-secondary .card-act {
  width: auto;
  height: auto;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--weight-bold);
}
.card-actions-secondary .card-act .icon-btn-svg { width: 13px; height: 13px; }
.card-actions-secondary .card-act:hover { background: var(--card-bg); color: var(--ink); }
.card-actions-secondary .card-act-danger:hover { background: var(--danger-bg); color: var(--danger); }

/* ---- Archives (archives.php) : cartes du dashboard, vignette désaturée ---- */

.grid-archives { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card-archived .thumb img { filter: saturate(0.7); }
.card-archived .meta { font-size: 12px; color: var(--muted); }
.card-archived .meta:empty { display: none; }
.badge.badge-archived { background: var(--surface-2); color: var(--muted); }
.card-archived:hover { transform: none; }

.card-foot-archive {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 6px 4px;
}
.card-foot-archive .btn-secondary { padding: 8px 12px; font-size: 12px; }
.card-foot-archive .btn-ghost { padding: 8px 12px; }
.card-foot-archive .btn-ghost .icon-btn-svg { width: 13px; height: 13px; }
.card-foot-archive .btn-delete-link { margin-left: auto; }

.btn-ghost-teal { color: var(--brand-dark); }
.btn-ghost-teal:hover { background: var(--brand-tint); color: var(--brand-dark); }

/* ---- Pastilles (statut, confiance, commentaires) ---- */

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

.badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--weight-heavy);
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  background: var(--surface-2);
  color: var(--ink-soft);
}

.status-pill::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-scheduled { background: var(--status-scheduled-bg); color: var(--status-scheduled-fg); }
.badge-status-published { background: var(--status-published-bg); color: var(--status-published-fg); }

/* « N à traiter » : pastille ambre avec icône bulle. */
.badge.badge-comments {
  gap: 4px;
  font-weight: var(--weight-bold);
  padding: 3px 9px;
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
}
.badge.badge-comments:hover { color: var(--status-pending-fg); filter: brightness(0.97); }
.badge-comments .icon-btn-svg { width: 11px; height: 11px; stroke-width: 2.2; }

/* ---- Badge de catégorie (vignette, fiche pack) ----
   Le libellé arrive en majuscules depuis config/editorial.json ; il est
   affiché en casse de phrase (« Épisode complet »). */
.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  white-space: nowrap;
  color: #fff;
  background: rgba(31, 36, 38, 0.78);
}
.category-badge > span {
  display: inline-block;
  text-transform: lowercase;
}
.category-badge > span::first-letter { text-transform: uppercase; }
.category-badge .icon-btn-svg { width: 12px; height: 12px; stroke-width: 2.2; flex-shrink: 0; }
.category-badge.category-none {
  background: var(--glass);
  color: var(--muted);
}
.category-badge.category-post_linkedin { background: var(--category-linkedin); }
/* Nom de marque : casse d'origine (« Post RS »), pas de passage en minuscules. */
.category-badge.category-post_linkedin > span { text-transform: none; }
/* Filtre « Posts RS » du tableau de bord, actif en bleu LinkedIn. */
.category-filters .category-filter-post_linkedin .icon-btn-svg { color: var(--category-linkedin); }
.segmented.category-filters button.category-filter-post_linkedin.active,
.segmented.category-filters button.category-filter-post_linkedin.active:hover { background: var(--category-linkedin); color: #fff; }
.category-filters .category-filter-post_linkedin.active .icon-btn-svg { color: #fff; }

/* ---- 03-calendrier.css ---- */
/* Calendrier éditorial du tableau de bord.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

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

.calendar-view {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.calendar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.calendar-nav { display: flex; align-items: center; gap: 4px; }

.icon-round {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.icon-round:hover { background: var(--surface-2-hover); }
.icon-round:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon-round .icon-btn-svg { width: 16px; height: 16px; stroke-width: 2.2; }

.calendar-header h2 {
  font-size: 22px;
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: capitalize;
}

.calendar-header #calToday { padding: 8px 14px; font-size: 12px; color: var(--ink-soft); }

.calendar-toolbar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.network-filters button { padding: 7px 13px; font-size: 12px; }

.calendar-count {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--muted);
}

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

.calendar-weekdays { margin-bottom: 8px; }

.calendar-weekday {
  font-size: 11px;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 10px;
  color: var(--muted-soft);
}

.calendar-day {
  min-height: 150px;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg);
  transition: background var(--transition-fast);
}

.calendar-day.outside-month { background: transparent; }
.calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--brand); }

.calendar-day-number {
  font-size: 13px;
  font-weight: var(--weight-heavy);
  color: var(--ink-soft);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.calendar-day.is-today .calendar-day-number { background: var(--brand); color: var(--on-brand); }

/* Carte de pack : émission et heure en petit, titre complet (retour à la ligne). */
.calendar-chip {
  display: block;
  min-width: 0;
  font-size: 13px;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-soft);
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-decoration: none;
  cursor: grab;
  transition: filter var(--transition-fast);
}
.calendar-chip-meta {
  display: block;
  font-size: 10.5px;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-chip-title { display: block; color: var(--ink); }
.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-scheduled { background: var(--status-scheduled-bg); color: var(--status-scheduled-fg); }
.calendar-chip.badge-status-published { background: var(--status-published-bg); color: var(--status-published-fg); }
.calendar-chip.dragging { opacity: 0.5; }

.calendar-more {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--muted-soft);
  padding-left: 4px;
}
.calendar-more-btn {
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: var(--brand-dark);
  cursor: pointer;
  padding: 2px 4px;
}
.calendar-more-btn:hover { text-decoration: underline; }

.calendar-day.drop-target,
.calendar-unscheduled-drop.drop-target {
  outline: 2px dashed var(--brand);
  outline-offset: -2px;
  background: var(--brand-tint);
}

.calendar-unscheduled { margin-top: 24px; }

.calendar-unscheduled h3 {
  font-size: 11px;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-soft);
  margin: 0 0 8px;
}

.calendar-unscheduled-drop {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 48px;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 2px dashed var(--placeholder);
}
.calendar-unscheduled-drop .calendar-chip { max-width: 300px; padding: 5px 11px; }

@media (max-width: 720px) {
  .page-head h1 { font-size: 26px; }
  .toolbar .view-switch { margin-left: 0; }
  .calendar-view { padding: 14px; border-radius: var(--radius-lg); }
  .calendar-toolbar { margin-left: 0; }
  /* Petit écran : le mois devient une liste des jours qui ont des publications. */
  .calendar-weekdays { display: none; }
  .calendar-grid { display: flex; flex-direction: column; gap: 8px; }
  .calendar-day { min-height: 0; padding: 10px; border-radius: 12px; }
  .calendar-day.outside-month, .calendar-day.is-empty:not(.is-today):not(.drop-target) { display: none; }
  .calendar-day-number { width: auto; height: auto; border-radius: var(--radius-pill); padding: 2px 8px; align-self: flex-start; }
  .calendar-day-number::before { content: attr(data-weekday) "\00a0"; }
  .card-fields { grid-template-columns: 1fr; }
}

/* ---- 04-champs.css ---- */
/* Pastilles de sauvegarde et composant lien vidéo (assets/video-link.js).
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ---- Sauvegarde : pastilles pastel ---- */

.save-status {
  align-self: flex-start;
  font-size: 12px;
  font-weight: var(--weight-bold);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.save-status-dirty { background: var(--brand-tint); color: var(--brand-dark); }
.save-status-saving { background: var(--surface-2); color: var(--muted); }
.save-status-saved { background: var(--status-published-bg); color: var(--status-published-fg); }
.save-status-error { background: var(--danger-bg); color: var(--danger); }

/* 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-bold);
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.ef-linkbtn:hover { text-decoration: none; }
.ef-linkbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }

/* ---- Composant lien vidéo (video-link.js) : vide / validé / édition ----
   Les libellés arrivent en majuscules du composant ; affichés en casse de
   phrase (« Copier le lien »). */
.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; }
/* Précision sous un intitulé en majuscules (« Lien Google Drive (fichier de l’épisode…) »). */
.field-hint {
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--weight-regular);
  color: var(--muted);
}

.video-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.video-row-icon { display: none; }

.video-input {
  flex: 1 1 140px;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  color: var(--ink);
  background: var(--card-bg);
}
.video-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.video-domain {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: var(--weight-bold);
  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: 12px;
  font-weight: var(--weight-bold);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  cursor: pointer;
  background: var(--card-bg);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.video-btn > span {
  display: inline-block;
  text-transform: lowercase;
}
.video-btn > span::first-letter { text-transform: uppercase; }
.video-btn:hover { background: var(--surface-2); color: var(--ink); }
.video-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.video-btn-icon { flex: 0 0 auto; width: 12px; height: 12px; }
.video-btn-copy .video-btn-icon { display: none; }

.video-btn-primary,
.video-btn-watch {
  background: var(--brand);
  color: var(--on-brand);
}
.video-btn-primary:hover,
.video-btn-watch:hover { background: var(--brand-hover); color: var(--on-brand); }
.video-btn-watch .video-btn-icon { width: 10px; height: 10px; }

.video-btn-copy.is-copied { background: var(--status-published-bg); color: var(--status-published-fg); }

.video-btn-ghost {
  background: transparent;
  color: var(--muted);
  font-weight: var(--weight-semibold);
  padding: 7px 8px;
}
.video-btn-ghost .video-btn-icon { display: none; }
.video-btn-ghost:hover { background: transparent; color: var(--ink); }
.video-btn-delete:hover { color: var(--danger); }

.video-error {
  font-size: 12px;
  color: var(--danger);
  font-weight: var(--weight-semibold);
}
.video-status { margin: 0; }

/* ---- 05-boutons.css ---- */
/* Primitives de marque partagées (hero, step-card, panneaux de résultat) et boutons.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

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

.hero {
  background: var(--deep);
  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.brand-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-radius: var(--radius-lg);
  padding: 24px 28px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}

.step-card .step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.step-card .step-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--inverse);
  color: var(--on-inverse);
  font-size: 12px;
  font-weight: var(--weight-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-card h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.01em;
}

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

/* ---- Boutons ----
   Primaire : pilule teal + ombre colorée. Secondaire : pilule --surface-2 (ou
   blanche + ombre légère sur fond crème, variante .btn-secondary-white).
   Fantôme : transparent, --muted. */

.btn {
  font-family: inherit;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  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), color var(--transition-fast);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand);
  color: var(--on-brand);
  border: none;
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary:hover {
  background: var(--brand-hover);
  color: var(--on-brand);
}

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

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--surface-2);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--weight-bold);
  line-height: 1.3;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--surface-2-hover);
  color: var(--ink);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Sur fond crème : pilule blanche + ombre légère. */
.btn-secondary-white {
  background: var(--card-bg);
  box-shadow: var(--shadow-xs);
}
.btn-secondary-white:hover { background: var(--surface-2); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--muted);
  border: none;
  padding: 7px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.btn-ghost-danger:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--brand-tint);
  border-top-color: var(--brand);
  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: 24px 28px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
}

.result-panel.running { background: var(--card-bg); }
.result-panel.success { background: var(--card-bg); box-shadow: inset 0 0 0 2px var(--outcome-success-border), var(--shadow-card); }
.result-panel.warning { background: var(--outcome-warning-bg); }
.result-panel.error { background: var(--outcome-error-bg); }

.result-panel .result-title { font-size: var(--text-lg); font-weight: var(--weight-heavy); letter-spacing: -0.01em; }

.result-panel .result-meta {
  font-size: 12px;
  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: 12px;
  font-weight: var(--weight-semibold);
}

/* ---- 06-attente-generation.css ---- */
/* Page d'attente d'une génération (dashboard/generate.php, generation-progress.js).
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* Page d'attente d'une génération (dashboard/generate.php, generation-progress.js) :
   barre de progression, étapes, encart « Le saviez-vous ? » / « Astuce ». */
.gen-progress { gap: 14px; }
.gen-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gen-progress-head strong { font-weight: var(--weight-semibold); }
.gen-progress-percent { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); color: var(--brand-ink); }
.gen-progress-bar { position: relative; height: 10px; border-radius: 999px; background: var(--brand-tint); overflow: hidden; }
.gen-progress-bar > span {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  transition: width .4s ease-out;
}
.gen-progress-bar > span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: translateX(-100%); animation: gen-shimmer 1.8s ease-in-out infinite;
}
@keyframes gen-shimmer { to { transform: translateX(100%); } }
.gen-progress-detail { min-height: 1.2em; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gen-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.gen-steps li {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: var(--weight-semibold); background: var(--surface-2); color: var(--muted);
}
.gen-steps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-dash); flex-shrink: 0; }
.gen-steps li.is-current { background: var(--brand-tint); color: var(--brand-dark); }
.gen-steps li.is-current::before { background: var(--brand); animation: gen-pulse 1.2s ease-in-out infinite; }
.gen-steps li.is-done { color: var(--ink-soft); }
.gen-steps li.is-done::before { background: var(--status-published-fg); }
@keyframes gen-pulse { 50% { opacity: .35; } }
.gen-tip {
  margin-top: 4px; padding: 14px 16px; border-radius: var(--radius-md, 12px);
  background: var(--surface-sunken); border: 1px solid var(--border-soft); border-left: 3px solid var(--brand);
  opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease;
}
.gen-tip.is-visible { opacity: 1; transform: none; }
.gen-tip[data-kind="tip"] { border-left-color: var(--status-pending-fg); }
.gen-tip-kind { display: block; font-size: 11px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--brand-ink); margin-bottom: 4px; }
.gen-tip[data-kind="tip"] .gen-tip-kind { color: var(--status-pending-fg); }
.gen-tip-text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.gen-tip-source { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--muted); text-decoration: none; }
.gen-tip-source[href]:hover { text-decoration: underline; color: var(--brand-ink); }
@media (prefers-reduced-motion: reduce) {
  .gen-progress-bar > span::after, .gen-steps li.is-current::before { animation: none; }
  .gen-progress-bar > span, .gen-tip { transition: none; }
}
.transcription-model { margin-top: 14px; }
.transcription-model label { display: block; font-size: 12px; font-weight: var(--weight-bold); color: var(--muted); margin-bottom: 6px; }

.result-panel .thumb-preview {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.result-panel .thumb-preview-item { margin: 0; min-width: 0; }
.result-panel .thumb-preview-item.is-horizontal { flex: 1 1 520px; }
.result-panel .thumb-preview-item.is-vertical { flex: 0 1 auto; }
.result-panel .thumb-preview-item a { display: block; }
.result-panel .thumb-preview img {
  display: block;
  border-radius: 14px;
  box-shadow: var(--shadow-xs);
}
.result-panel .thumb-preview-item.is-horizontal img { width: 100%; height: auto; max-height: 75vh; object-fit: contain; }
.result-panel .thumb-preview-item.is-vertical img { height: min(70vh, 720px); width: auto; max-width: 100%; }
.result-panel .thumb-preview-item figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); }
.result-panel .thumb-preview-item figcaption a { display: inline; color: inherit; }
@media (max-width: 720px) {
  .result-panel .thumb-preview-item.is-vertical { flex: 1 1 100%; }
  .result-panel .thumb-preview-item.is-vertical img { height: auto; width: 100%; max-height: 80vh; object-fit: contain; }
}

.security-note {
  font-size: 12px;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: var(--space-2);
}

.notice {
  font-size: 13px;
  background: var(--status-pending-bg);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--notice-fg);
}

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

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

.log-disclosure pre {
  background: var(--deep);
  color: #e6e9ea;
  font-family: var(--font-mono);
  font-size: 12px;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  max-height: 300px;
  overflow-y: auto;
  white-space: pre-wrap;
  margin-top: var(--space-1);
}

/* ---- 07-accueil.css ---- */
/* Accueil (index.php) : « Ma journée » — en-tête illustré (bonjour, collage de miniatures), à faire pour vous, 7 prochains jours, activité de l'espace, derniers packs, espaces.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ==========================================================================
   Accueil de l'outil (personne connectée, dashboard/lib/home.php)
   Titre posé sur la page comme le tableau de bord, puis des cartes blanches
   pleine largeur ; « 7 prochains jours » et « Activité » côte à côte, à la
   même hauteur (jamais de vide gris sous la plus courte).
   ========================================================================== */

main.home-main {
  max-width: var(--content-width);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- En-tête illustré : halos, bonjour, collage de miniatures ---- */
.home-hero {
  background:
    radial-gradient(900px 500px at 15% 0%, var(--brand-tint) 0%, transparent 60%),
    radial-gradient(700px 400px at 95% 100%, var(--halo-warm) 0%, transparent 60%);
}
.home-hero-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 48px 40px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 48px;
  align-items: center;
}
.home-hero-copy { min-width: 0; }
.hero-eyebrow-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-dark);
  background: var(--card-bg);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 3px rgba(31, 36, 38, 0.06);
  margin-bottom: 20px;
}
/* Logo de l'espace : hauteur plafonnée, largeur plafonnée pour les logos très
   allongés, proportions toujours gardées. */
.home-space-logo { margin-bottom: 22px; }
.home-space-logo-img {
  display: block;
  width: auto;
  height: auto;
  max-height: 88px;
  max-width: min(100%, 380px);
}
.home-space-logo-on-dark { display: none; }
.home-hero h1 {
  font-size: 44px;
  font-weight: var(--weight-heavy);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 14px;
}
.home-hero h1 .accent { color: var(--brand-ink); }
.home-hero-sub { margin: 0 0 26px; font-size: 16px; color: var(--ink-soft); line-height: 1.6; }
.home-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.home-hero-actions .btn-primary,
.home-hero-actions .btn-secondary { padding: 13px 22px; font-size: 14px; }
.home-hero-actions .btn-primary { box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--brand) 70%, transparent); }
.home-hero-actions .icon-btn-svg { width: 16px; height: 16px; }

/* Collage de trois tuiles, légèrement incliné ; chaque tuile mène à son pack. */
.hero-illustration {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  transform: rotate(-2deg);
}
.hero-tile {
  display: block;
  background: var(--card-bg);
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 20px 40px -24px rgba(31, 36, 38, 0.3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: transform 0.4s var(--ease-spring), box-shadow var(--transition-base);
}
a.hero-tile[href]:hover { transform: translateY(-4px) rotate(0.6deg); box-shadow: 0 28px 50px -24px rgba(31, 36, 38, 0.38); }
a.hero-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hero-tile-main {
  grid-column: 1 / -1;
  border-radius: var(--radius-lg);
  padding: 12px;
  box-shadow: 0 30px 60px -30px rgba(31, 36, 38, 0.3);
}
.hero-tile-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  background: var(--surface-3);
}
.hero-tile-img.is-contain { object-fit: contain; }
.hero-tile-main .hero-tile-img { aspect-ratio: 16 / 8; border-radius: 14px; }
.hero-tile-empty { display: flex; align-items: center; justify-content: center; color: var(--muted-soft); }
.hero-tile-empty .icon-btn-svg { width: 28px; height: 28px; stroke-width: 1.6; }
.hero-tile-caption {
  padding: 10px 4px 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}
.hero-tile-kicker-light { font-size: 11px; font-weight: var(--weight-heavy); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.hero-chip { min-height: 24px; font-size: 11.5px; cursor: inherit; }
.hero-chip:hover { transform: none; box-shadow: none; }
.hero-tile-title {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: var(--weight-bold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-tile-note {
  display: block;
  padding: 8px 4px 0;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-tile-note.badge-status-pending { background: none; color: var(--status-pending-fg); }
.hero-tile-note.badge-status-validated { background: none; color: var(--status-validated-fg); }
.hero-tile-note.badge-status-scheduled { background: none; color: var(--status-scheduled-fg); }
.hero-tile-note.badge-status-published { background: none; color: var(--status-published-fg); }
.hero-tile-line { display: block; height: 8px; width: 60%; border-radius: var(--radius-pill); background: var(--surface-2); }
.hero-tile-dark {
  background: var(--deep);
  color: #fff;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 20px 40px -24px rgba(31, 36, 38, 0.4);
}
.hero-tile-kicker { font-size: 11px; font-weight: var(--weight-bold); color: rgba(255, 255, 255, 0.6); letter-spacing: 0.04em; text-transform: uppercase; }
.hero-tile-count { display: block; font-size: 30px; font-weight: var(--weight-heavy); letter-spacing: -0.02em; line-height: 1; }
.hero-tile-sub { display: block; margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, 0.7); }

/* ---- Cartes ---- */
.home-panel {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.home-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.home-panel-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: var(--weight-heavy);
  letter-spacing: -0.01em;
}
.home-panel-head .home-panel-title { margin: 0; }
.home-panel-count { font-size: 12px; font-weight: var(--weight-semibold); color: var(--muted); }
.home-panel-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--brand-ink);
  text-decoration: none;
  white-space: nowrap;
}
.home-panel-link .icon-btn-svg { width: 14px; height: 14px; }
.home-panel-link:hover { text-decoration: underline; }
.home-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}
.home-empty .icon-btn-svg { width: 18px; height: 18px; flex: none; color: var(--brand-ink); }
.home-empty a { color: var(--brand-ink); font-weight: var(--weight-semibold); }

/* ---- À faire pour vous ---- */
.home-todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.home-todo-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.home-todo-item:hover { background: var(--surface-2-hover); }
.home-todo-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-todo-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  color: var(--brand-ink);
}
.home-todo-icon .icon-btn-svg { width: 17px; height: 17px; }
.home-todo-item.is-warn .home-todo-icon { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.home-todo-item.is-danger .home-todo-icon { background: var(--danger-bg); color: var(--danger); }
.home-todo-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-todo-text { font-size: 14px; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.home-todo-detail { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-todo-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--brand-ink);
}
.home-todo-cta .icon-btn-svg { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.home-todo-item:hover .home-todo-cta .icon-btn-svg { transform: translateX(3px); }

/* ---- 7 prochains jours + activité : deux colonnes de même hauteur ---- */
.home-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}
.home-week { display: flex; flex-direction: column; }
.home-week-days {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.home-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 132px;
  padding: 8px 6px;
  border-radius: 12px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  min-width: 0;
}
.home-day.is-weekend { background: transparent; }
.home-day.is-today { border-color: var(--brand); background: var(--brand-tint-soft); }
.home-day-label { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.home-day-label b { font-size: 14px; font-weight: var(--weight-heavy); color: var(--ink); }
.home-day.is-today .home-day-label,
.home-day.is-today .home-day-label b { color: var(--brand-ink); }
.home-day-items { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home-day-chip {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.3;
  text-decoration: none;
  min-width: 0;
  transition: transform var(--transition-fast);
}
.home-day-chip:hover { transform: translateY(-1px); }
.home-day-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-day-time { font-variant-numeric: tabular-nums; opacity: 0.8; }
.home-day-ref { font-weight: var(--weight-heavy); overflow-wrap: anywhere; }

.home-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.home-activity-list li + li { border-top: 1px solid var(--border-soft); }
.home-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 4px;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}
.home-activity-item:hover { background: var(--surface-sunken); }
.home-activity-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.home-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: var(--weight-heavy);
}
.home-activity-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.home-activity-text { font-size: 13px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: anywhere; }
.home-activity-text b { color: var(--ink); font-weight: var(--weight-bold); }
.home-activity-detail { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-activity-when { flex: none; font-size: 11.5px; color: var(--muted-soft); white-space: nowrap; padding-top: 2px; }

/* ---- Derniers packs ---- */
.home-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.home-recent-card { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
.home-recent-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-3);
  color: var(--muted-soft);
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease-spring), box-shadow var(--transition-base);
}
.home-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-recent-thumb.is-contain img { object-fit: contain; }
.home-recent-thumb .icon-btn-svg { width: 24px; height: 24px; stroke-width: 1.6; }
.home-recent-card:hover .home-recent-thumb { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.home-recent-card:focus-visible { outline: none; }
.home-recent-card:focus-visible .home-recent-thumb { box-shadow: var(--focus-ring); }
.home-recent-title {
  font-size: 13.5px;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-recent-card:hover .home-recent-title { color: var(--brand-ink); }
.home-recent-chip { align-self: flex-start; min-height: 24px; font-size: 11.5px; cursor: inherit; }
.home-recent-chip:hover { transform: none; box-shadow: none; }

/* ---- Espaces et pied de page ---- */
.spaces-panel .spaces-home-list { margin-top: 0; }
.home-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.home-foot a { color: var(--muted); }
.home-foot a:hover { color: var(--brand-ink); }

/* Notes de version (notes-de-version.php) : numéro de version. */
.release-version-pill {
  font-size: 11px;
  font-weight: var(--weight-heavy);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  color: var(--brand-dark);
}

/* Les 7 jours côte à côte demandent de la largeur : en dessous, semaine puis activité. */
@media (max-width: 1100px) {
  .home-columns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .home-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 36px 24px 28px; }
  .hero-illustration { max-width: 520px; }
}
@media (max-width: 1000px) {
  .home-recent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  main.home-main { gap: 14px; }
  .home-hero-inner { padding: 24px 16px 20px; gap: 26px; }
  .home-hero h1 { font-size: 30px; }
  .home-hero-sub { font-size: 14.5px; margin-bottom: 20px; }
  .home-space-logo { margin-bottom: 16px; }
  .home-space-logo-img { max-height: 56px; }
  .home-hero-actions > * { flex: 1; justify-content: center; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
  /* Collage réduit à une ligne : prochaine sortie et chiffres, pour laisser « À faire » en vue. */
  .hero-illustration { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); transform: rotate(-1.5deg); gap: 10px; }
  .hero-tile-main { grid-column: auto; padding: 8px; border-radius: 16px; }
  .hero-tile-main .hero-tile-img { aspect-ratio: 16 / 9; border-radius: 10px; }
  .hero-tile-small, .hero-tile-title { display: none; }
  .hero-tile-caption { padding: 8px 2px 0; gap: 4px; }
  .hero-chip b, .hero-chip .release-when::before { display: none; }
  .hero-tile-dark { padding: 12px; }
  .hero-tile-count { font-size: 26px; }
  .home-panel { padding: 16px; border-radius: var(--radius-md); }
  .home-todo-item { gap: 10px; padding: 10px 12px; }
  .home-todo-cta { font-size: 0; gap: 0; }
  .home-todo-cta .icon-btn-svg { width: 16px; height: 16px; }
  /* La semaine devient une liste : jours avec des sorties, et aujourd'hui. */
  .home-week-days { flex: none; display: flex; flex-direction: column; gap: 6px; }
  .home-day { flex-direction: row; align-items: flex-start; min-height: 0; padding: 8px 10px; gap: 12px; }
  .home-day.is-empty:not(.is-today) { display: none; }
  .home-day.is-today.is-empty .home-day-items::after { content: "Aucune sortie"; padding-top: 4px; font-size: 12.5px; color: var(--muted); }
  .home-day-label { width: 56px; flex: none; padding-top: 4px; }
  .home-day-items { flex: 1; flex-direction: row; flex-wrap: wrap; }
  .home-day-chip { flex-direction: row; gap: 6px; padding: 4px 8px; font-size: 12px; }
  .home-recent-list { gap: 14px; }
}

/* ---- 08-assistants.css ---- */
/* Assistants (generate.php, thumbnails.php, personas.php) : en-tête de page, étapes, contrôles, choix du modèle, dépôt de fichier.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ==========================================================================
   Assistants (generate.php, thumbnails.php, personas.php) — refonte « Aérien »
   En-tête de page (.page-hero), étapes en sections blanches (.step-card),
   contrôles sans bordure, dernière étape « Génération » sombre.
   ========================================================================== */

/* ---- En-tête de page : fil d'ariane + icône + titre ---- */
.page-hero { margin-bottom: 32px; }
.page-breadcrumb-sep { color: var(--muted-soft); }

.page-hero-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.page-hero-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-tint);
  color: var(--brand-dark);
}
.page-hero-icon .icon-btn-svg { width: 22px; height: 22px; }
.page-hero-text { min-width: 0; }
.page-hero-text h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.page-hero-sub {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  max-width: 60ch;
}

/* ---- Assistant ---- */
.wizard-wrap { max-width: 1100px; }
.wizard-wrap.wizard-narrow { max-width: 880px; }

.wizard,
.wizard #genBlocks { display: flex; flex-direction: column; gap: 16px; }
.wizard .step-card { margin-bottom: 0; }
.wizard .step-card .step-head { margin-bottom: 18px; }

/* Contrôles de formulaire : sans bordure, fond --surface-2. */
.wizard select,
.wizard input[type="text"],
.wizard input[type="email"],
.wizard input[type="password"],
.wizard input[type="url"],
.wizard textarea {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--weight-semibold);
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  color: var(--ink);
  background-color: var(--surface-2);
  transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.wizard select {
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.wizard textarea { resize: vertical; line-height: 1.55; font-weight: var(--weight-regular); padding: 14px 16px; }
.wizard select:focus-visible,
.wizard input[type="text"]:focus-visible,
.wizard input[type="email"]:focus-visible,
.wizard input[type="password"]:focus-visible,
.wizard input[type="url"]:focus-visible,
.wizard textarea:focus-visible {
  outline: none;
  background-color: var(--card-bg);
  box-shadow: var(--focus-ring);
}
.wizard .step-hint { margin-top: 10px; }

/* Source (radios) en groupe segmenté : pilules, radio masquée. */
.mode-options {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.mode-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mode-options label:hover { color: var(--ink); }
.mode-options input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.mode-options label:has(input:checked) {
  background: var(--card-bg);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}
.mode-options label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.mode-panel { margin-top: 0; }
.mode-options label.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* Source « Depuis YouTube » et correction du transcript (page Générer). */
.youtube-source-row { display: flex; gap: 10px; align-items: center; }
.youtube-source-row input { flex: 1 1 auto; min-width: 0; }
.youtube-source-row .btn-secondary { flex-shrink: 0; }
.youtube-source-status:empty { display: none; }
.youtube-source-status.is-ok { color: var(--ink); font-weight: var(--weight-semibold); }
.youtube-source-status.is-error { color: var(--danger); font-weight: var(--weight-semibold); }
.network-choice { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.network-choice-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card-bg); font-size: 14px; font-weight: var(--weight-semibold); cursor: pointer; }
.network-choice-item input { width: 16px; height: 16px; accent-color: var(--brand); margin: 0; }
.network-choice-item .network-logo { width: 20px; height: 20px; }
.network-choice-item:has(input:not(:checked)) { opacity: .55; background: var(--surface-sunken); }
.network-choice-error { margin-top: 10px; }
.free-prompt { margin-top: 20px; }
.free-prompt label { display: block; font-size: 12px; font-weight: var(--weight-bold); color: var(--muted); margin-bottom: 6px; }
.free-prompt[data-mode="prompt"] { margin-top: 16px; }
.correction-option { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.correction-names { margin-top: 12px; }
.correction-names label { display: block; font-size: 12px; font-weight: var(--weight-bold); color: var(--muted); margin-bottom: 6px; }

/* Catégorie : deux grandes tuiles radio. */
.category-choice {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.category-choice-legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.category-choice label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 2px solid var(--border-soft);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--ink);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.category-choice label:hover { border-color: var(--border-dash); }
.category-choice label .icon-btn-svg { width: 22px; height: 22px; flex-shrink: 0; }
.category-choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.category-choice label:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.category-choice label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
/* Type de pack (page Générer) : titre et explication sur deux lignes ; le post
   LinkedIn choisi prend le bleu LinkedIn. */
.pack-type-choice label > span { display: flex; flex-direction: column; gap: 3px; }
.pack-type-choice label small { font-size: 12px; font-weight: var(--weight-regular); color: var(--muted); line-height: 1.4; }
.pack-type-choice .pack-type-linkedin .icon-btn-svg { color: var(--category-linkedin); }
.pack-type-choice .pack-type-linkedin:has(input:checked) { border-color: var(--category-linkedin); background: var(--category-linkedin-soft); }
.wizard [hidden] { display: none !important; }
.category-error { margin-top: 12px; }

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

.model-label {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 6px;
}

/* ---- Choix du modèle d'IA (render_model_select, assets/js/model-picker.js) ---- */
.model-picker { position: relative; width: 100%; }
.model-picker.is-enhanced > select.model-select { display: none; }
.model-picker-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.model-picker-button:hover { background: var(--surface-2-hover); }
.model-picker-button:focus-visible,
.model-picker.is-open .model-picker-button { outline: none; background: var(--card-bg); box-shadow: var(--focus-ring); }
.model-picker-current { flex: 1 1 auto; min-width: 0; }
.model-picker-chevron { flex: none; color: var(--muted); transition: transform var(--transition-fast); }
.model-picker.is-open .model-picker-chevron { transform: rotate(180deg); }

.model-picker-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 360px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg), var(--shadow-xs);
  overscroll-behavior: contain;
}
.model-picker.opens-up .model-picker-list { top: auto; bottom: calc(100% + 8px); }
.model-picker-list:focus { outline: none; }
.model-picker-list[hidden] { display: none; }

.model-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 8px;
  border-radius: 12px;
  cursor: pointer;
}
.model-option-sep { position: relative; margin-top: 9px; }
.model-option-sep::before { content: ""; position: absolute; left: 8px; right: 8px; top: -5px; border-top: 1px solid var(--border-soft); }
.model-option.is-active { background: var(--surface-2); }
.model-option[aria-selected="true"] .model-option-label { color: var(--brand-dark); }
.model-option-check { flex: none; color: var(--brand-ink); visibility: hidden; }
.model-option[aria-selected="true"] .model-option-check { visibility: visible; }

.model-option-body { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; }
.model-logo { width: 32px; height: 32px; flex: none; display: block; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(31, 36, 38, 0.06); }
.model-option-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.model-option-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.model-option-label {
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-option-meta {
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-tier {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  line-height: 1.5;
  background: var(--surface-3);
  color: var(--ink-soft);
}
.model-tier-recommended { background: var(--brand-tint); color: var(--brand-dark); }
.model-tier-premium { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.model-tier-eco { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.model-tier-new { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); }

/* ---- Zone de dépôt de fichier ---- */
.dropzone {
  position: relative;
  border: 2px dashed var(--border-dash);
  border-radius: 18px;
  padding: 36px 24px;
  text-align: center;
  background: var(--surface-sunken);
  transition: border-color var(--transition-base), background var(--transition-base);
}
.dropzone:hover { border-color: var(--brand); }
.dropzone.is-dragover { border-color: var(--brand); background: var(--brand-tint); }
.dropzone-hint { font-size: 13px; color: var(--muted); pointer-events: none; line-height: 1.5; }
.dropzone-hint strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: var(--weight-bold); }
.dropzone-hint strong + br { display: none; }
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.dropzone:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* Notice de doublon / avertissement dans l'assistant */
.wizard .result-panel { margin-top: 0; }

/* ---- Dernière étape « Génération » : section sombre ---- */
.step-card.step-card-generate {
  background: var(--deep);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}
.step-generate-text { flex: 1; min-width: 220px; }
.step-card-generate .step-head { margin-bottom: 6px; }
.wizard .step-card-generate .step-head { margin-bottom: 6px; }
.step-card-generate .step-number { background: rgba(255, 255, 255, 0.14); color: #fff; }
.step-card-generate .security-note {
  margin: 0;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}
.step-card-generate .btn-primary {
  padding: 14px 22px;
  box-shadow: 0 12px 24px -12px rgba(13, 139, 156, 0.8);
}
.step-card-generate .btn-primary:hover { background: var(--teal-on-dark); }
.step-card-generate .btn-primary:disabled { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.5); }
.step-card-generate .btn-primary:focus-visible { box-shadow: var(--focus-ring-dark); }
.step-card-generate .step-hint,
.step-card-generate .notice { flex-basis: 100%; }

/* Carte de contexte du pack sélectionné (thumbnails.php) */
.pack-context {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg);
}
.pack-context-thumb {
  flex-shrink: 0;
  width: 128px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: var(--surface-3) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-soft);
  font-size: 11px;
  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: 11px;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-ink);
}
.pack-context-title { font-size: 14px; font-weight: var(--weight-bold); color: var(--ink); margin-top: 2px; }
.pack-context-id { font-size: 12px; color: var(--muted-soft); margin-top: 2px; }

@media (max-width: 720px) {
  .page-hero { margin-bottom: 20px; }
  .page-hero-icon { display: none; }
  .page-hero-text h1 { font-size: 22px; }
  .page-hero-sub { font-size: 13px; }
  .step-card,
  .wizard .step-card { padding: 18px 16px; }
  .pack-context { flex-direction: column; align-items: stretch; }
  .pack-context-thumb { width: 100%; }
  .security-note { overflow-wrap: anywhere; }
}

/* ---- 09-fiche-pack.css ---- */
/* Fiche du pack (dashboard/pack.php) : hero, champs éditables, informations projet, miniatures, JSON brut.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ==========================================================================
   Fiche pack (dashboard/pack.php) — refonte « Aérien »
   En-tête (titre, statut, date, actions), relecture, puis onglets
   Publication, Visuels, Validation, Détails en pleine largeur.
   ========================================================================== */

.pack-main-v3 { max-width: 1240px; }

/* Fil d'ariane (fiche pack, pages en étapes). */
.page-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--muted-soft);
  margin-bottom: 20px;
}
.page-breadcrumbs a { color: var(--muted); text-decoration: none; }
.page-breadcrumbs a:hover { color: var(--brand-dark); }
.page-breadcrumbs [aria-current="page"] { color: var(--ink); }

/* Sections blanches (fiche pack) */
.pack-section {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
  min-width: 0;
}

.pack-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.pack-section-head > h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.01em;
}

/* ---- En-tête : titre posé sur la page (comme le tableau de bord), puis un
   bandeau unique de gauche à droite : statut, sortie, réseaux, actions ---- */

.pack-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.pack-head-main { min-width: 0; }
.pack-head h1 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.pack-head-sub {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.pack-head-show { font-weight: var(--weight-bold); color: var(--brand-ink); }
.pack-head-id { font-variant-numeric: tabular-nums; }
.pack-head-sub .badge { font-weight: var(--weight-bold); }
.pack-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 6px 6px 4px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
}
.pack-bar-seg {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px 0 10px;
  border-right: 1px solid var(--border-soft);
}
.pack-bar-seg[hidden] { display: none; }
.pack-bar-label { font-size: 10.5px; font-weight: var(--weight-heavy); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pack-bar-spacer { flex: 1 1 0; min-width: 0; }
/* Actions toujours à droite, même passées à la ligne. */
.pack-bar .pack-head-actions { margin-left: auto; }
.pack-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pack-head-actions .btn-primary,
.pack-head-actions .btn-secondary { padding: 9px 14px; font-size: 13px; }
/* Messages d'enregistrement du statut et des dates, sous le bandeau. */
.pack-bar-notes { display: flex; justify-content: flex-end; gap: 10px; margin-top: -8px; }
body:not(.edit-mode) .pack-bar-notes:not(:has(.save-status:not([hidden]))) { display: none; }
.pack-bar-notes .save-indicator { margin: 0; }
.pack-head-actions .icon-btn-svg { width: 15px; height: 15px; }

/* Menu « … » (Régénérer, miniatures, copier le pack, JSON brut). */
.pack-more { position: relative; }
.pack-more > summary { list-style: none; cursor: pointer; padding: 9px 11px; }
.pack-more > summary::-webkit-details-marker { display: none; }
.pack-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 230px;
  padding: 6px;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop, 0 12px 32px -12px rgba(31, 36, 38, 0.35));
  display: flex;
  flex-direction: column;
}
.pack-more-menu a,
.pack-more-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pack-more-menu a:hover,
.pack-more-menu button:hover { background: var(--surface-2); }
.pack-more-menu a:focus-visible,
.pack-more-menu button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pack-more-menu .icon-btn-svg { width: 15px; height: 15px; flex: none; color: var(--muted); }

/* Mode édition : le bouton principal passe en encre (« Quitter le mode édition »). */
body.edit-mode #editModeToggle { background: var(--inverse); color: var(--on-inverse); box-shadow: none; }
.save-indicator { margin-left: 0; }
body.edit-mode #editModeToggle:hover { background: color-mix(in srgb, var(--inverse) 85%, var(--on-inverse)); }

/* Indicateur global de sauvegarde, visible en mode édition. */
.save-indicator {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--status-published-fg);
  white-space: nowrap;
}
body.edit-mode .save-indicator { display: inline-flex; }
.save-indicator-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-published-fg); flex-shrink: 0; }
.save-indicator[data-state="unsaved"] { color: var(--status-pending-fg); }
.save-indicator[data-state="unsaved"] .save-indicator-dot { background: var(--status-pending-fg); }
.save-indicator[data-state="saving"] { color: var(--muted); }
.save-indicator[data-state="saving"] .save-indicator-dot { background: var(--brand); animation: save-indicator-pulse 1s ease-in-out infinite; }
.save-indicator[data-state="error"] { color: var(--danger); }
.save-indicator[data-state="error"] .save-indicator-dot { background: var(--danger); }
@keyframes save-indicator-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Boutons « Copier » (champs, pack complet). */
.pack-copy {
  border: 0;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--weight-bold);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pack-copy:hover { background: var(--surface-2-hover); color: var(--ink); }
.pack-copy:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pack-copy.is-copied { background: var(--status-published-bg); color: var(--status-published-fg); }

/* ---- Onglets (Publication, Visuels, Validation, Détails) ----
   Sous la relecture, en pleine largeur. Onglets en pilule comme le sélecteur
   Grille / Tableau / Calendrier du tableau de bord (assets/js/pack-layout.js). */

.pack-layout { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* Onglet fermé : masqué même si son bloc a son propre display (.pack-thumbs…). */
.pack-pane[hidden] { display: none !important; }
.pack-tabs {
  align-self: flex-start;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
}
.pack-tabs [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.pack-tabs [role="tab"]:hover { color: var(--ink); background: var(--surface-2); }
.pack-tabs [role="tab"][aria-selected="true"] { background: var(--inverse); color: var(--on-inverse); }
.pack-tabs [role="tab"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pack-tab-count {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
  font-size: 11px;
  font-weight: var(--weight-heavy);
  text-align: center;
}
.pack-pane-title { margin: 0 0 14px; font-size: var(--text-lg); font-weight: var(--weight-heavy); letter-spacing: -0.01em; }
.pack-post-reference { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border-soft); }

/* Onglet Détails : le pack | sources et liens. */
.pack-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px 40px;
  align-items: start;
}
.pack-detail-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pack-detail-title { margin: 0 0 4px; font-size: 15px; font-weight: var(--weight-heavy); }
#details .pack-raw { margin-top: 24px; }
/* Vidéo originale (onglet Détails) : état, envois en cours, téléchargement. */
.pack-original { display: grid; gap: 8px; }
.pack-original-state { margin: 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.pack-original-links { margin: 0; padding-left: 18px; font-size: 12px; color: var(--muted); }

/* Onglet Visuels : miniatures à gauche, accroches et personas à droite. */
.pack-thumbs-layout {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  gap: 20px 32px;
  align-items: start;
}
.pack-thumbs-post .pack-thumbs-layout { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
.pack-thumbs-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.pack-section-editorial { display: flex; flex-direction: column; gap: 22px; }
.pack-section-editorial .pack-section-head { margin-bottom: 0; }

/* ---- Champ éditable générique (.ef, piloté par pack.js) ---- */

.ef { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.ef-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ef-label,
h3.ef-label {
  margin: 0;
  font-size: 11px;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-soft);
}

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

/* « Modifier » : visible en mode édition ou au survol du champ. */
.ef-edit {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--weight-bold);
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.ef-edit .icon-btn-svg { width: 11px; height: 11px; stroke-width: 2.2; }
.ef-edit:hover { background: var(--brand-tint-hover); }
.ef:hover .ef-edit,
.ef-edit:focus-visible,
body.edit-mode .ef-edit { opacity: 1; }
.ef-edit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ef.is-editing .ef-edit { display: none; }
@media (hover: none) { .ef-edit { opacity: 1; } }

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

.ef-read {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  border-radius: 8px;
  transition: background var(--transition-slow);
}
.ef-read.just-saved { background: var(--status-published-bg); }
.ef-read ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  white-space: normal;
}
.ef-readonly { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.ef-empty { color: var(--muted-soft); font-style: italic; }
.ef-read-small { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* Mots-clés en pastilles (affichage « list-badges »). */
.ef-read .tag {
  display: inline-flex;
  margin: 0 6px 6px 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
}

/* 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: 2px; }

.ef-control input[type="text"],
.ef-control textarea,
.ef-control select {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  background: var(--surface-2);
}
.ef-control select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2) var(--select-chevron) no-repeat right 14px center;
  padding-right: 40px;
  font-weight: var(--weight-semibold);
}
.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: none;
  background-color: var(--card-bg);
  box-shadow: var(--focus-ring);
}
.ef-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--weight-semibold); cursor: pointer; }
.ef-check input { width: 16px; height: 16px; accent-color: var(--brand); }

.ef-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ef-controls .btn-primary { padding: 8px 16px; font-size: 13px; box-shadow: none; }
.ef-controls .btn-secondary { padding: 8px 14px; font-size: 13px; }
.ef-status { margin: 0; }
.ef-error { margin-top: 6px; }

/* Champ non éditable (lien vidéo, fichier, personas) */
.ef-static { display: flex; flex-direction: column; gap: 8px; }
.ef-static-sep { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.pack-transcript { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pack-transcript-name { font-size: 13px; font-weight: var(--weight-semibold); overflow-wrap: anywhere; min-width: 0; }
.pack-transcript .btn-secondary { padding: 7px 14px; font-size: 12px; }

/* Carte « Le pack » : lignes libellé | valeur (110 px / 1fr). */
.ef-grid { display: flex; flex-direction: column; gap: 12px; }
.ef-grid .ef {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: start;
}
.ef-grid .ef-head { display: contents; }
.ef-grid .ef-label { grid-column: 1; padding-top: 2px; }
.ef-grid .ef-actions { grid-column: 3; grid-row: 1; flex: none; }
.ef-grid .ef-read { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: var(--weight-semibold); line-height: 1.45; overflow-wrap: anywhere; }
.ef-grid .ef-edit { font-size: 10px; padding: 2px 8px; }
.ef-grid .ef-edit .icon-btn-svg { display: none; }
.ef-grid .ef-edit-zone { grid-column: 1 / -1; }
/* Champs en lecture seule (identifiant, transcript source) : même grille. */
.ef-grid .ef-static { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.ef-grid .ef-static .ef-readonly { overflow-wrap: anywhere; padding-top: 2px; }
/* Statut du pack (barre du pack) : menu aux couleurs du statut. */
.pack-status-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
/* select.… : plus précis que .badge-status-*, dont le fond effacerait le chevron. */
select.pack-status-select {
  padding: 7px 34px 7px 14px;
  font-size: 12.5px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.pack-status-select option { color: var(--ink); background: var(--card-bg); }
.pack-status-select.badge-status-pending { background-color: var(--status-pending-bg); color: var(--status-pending-fg); }
.pack-status-select.badge-status-validated { background-color: var(--status-validated-bg); color: var(--status-validated-fg); }
.pack-status-select.badge-status-scheduled { background-color: var(--status-scheduled-bg); color: var(--status-scheduled-fg); }
.pack-status-select.badge-status-published { background-color: var(--status-published-bg); color: var(--status-published-fg); }
.pack-status-select:disabled { opacity: 0.6; cursor: progress; }
.pack-status-control .save-status { align-self: center; }
/* Date et heure de sortie (barre du pack), comme sur la carte. */
.pack-date-time { grid-template-columns: 142px 92px; }
.pack-date-input {
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--surface-2);
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.pack-date-input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pack-date-input:disabled { opacity: 0.6; cursor: progress; }

/* Validation éditoriale : colonnes auto. */
.ef-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px 32px;
}
.ef-cols .ef-read { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.ef-cols .ef-read ul { gap: 6px; }

/* ---- Miniatures (onglet Visuels) ---- */

.pack-thumbs { display: flex; flex-direction: column; gap: 14px; }
.pack-thumbs .pack-section-head { margin-bottom: 2px; }

.pack-thumbs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.316fr);  /* même hauteur pour 16:9 et 9:16 */
  gap: 12px;
  align-items: start;
}
.media-card { min-width: 0; }
.media-preview {
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-card-horizontal .media-preview { aspect-ratio: 16 / 9; }
.media-card-vertical .media-preview { aspect-ratio: 9 / 16; }
.media-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Visuel d'un post RS : une seule image, aux proportions de son format. */
.pack-thumbs-post .pack-thumbs-grid { grid-template-columns: minmax(0, 1fr); }
.pack-thumbs-post .media-preview.media-ratio-portrait { aspect-ratio: 4 / 5; }
.pack-thumbs-post .media-preview.media-ratio-carre { aspect-ratio: 1 / 1; }
.pack-brief { max-height: 220px; overflow: auto; }
.media-preview .thumb-edit-empty {
  padding: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--muted-soft);
}
.pack-thumb-format { font-size: 11px; font-weight: var(--weight-semibold); color: var(--muted); margin-top: 6px; }
/* Emplacement vide : importer une miniature déjà faite. */
.media-preview.is-empty { border: 2px dashed var(--border-dash); background: var(--surface-sunken); }
.media-preview.is-dragover { border: 2px dashed var(--brand); background: var(--brand-tint); }
.thumb-import { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; text-align: center; }
.thumb-import .thumb-edit-empty { padding: 0; }
.thumb-import-btn { padding: 8px 14px; font-size: 12px; }
.thumb-import-btn .icon-btn-svg { width: 14px; height: 14px; }
.thumb-import-hint { font-size: 11px; color: var(--muted-soft); }
.media-card > .thumb-edit-status { display: block; margin-top: 4px; }
.pack-thumb-format .format-ratio { color: var(--muted); }

/* Visuels en cours de création (étape « Visuels » de Générer), image ratée. */
.pack-visuals-running { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-dark); font-size: 13px; font-weight: var(--weight-bold); }
.pack-visuals-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: pack-visuals-spin 0.9s linear infinite; flex: none; }
@keyframes pack-visuals-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pack-visuals-spinner { animation: none; } }
.thumb-visual-error { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 0; font-size: 12px; color: var(--danger-ink); }

/* Déplacer le logo posé par l'outil (sans nouvelle génération), colonne des réglages. */
.thumb-logo { padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.thumb-logo-hint { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.thumb-logo > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: var(--weight-bold); color: var(--brand-ink); list-style: none; }
.thumb-logo > summary::-webkit-details-marker { display: none; }
.thumb-logo > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.thumb-logo[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.thumb-logo-row { display: grid; gap: 6px; margin-top: 12px; }
.thumb-logo-label { font-size: 12px; color: var(--muted); }
.thumb-logo-row .logo-choice-options { max-width: 100%; }
.thumb-logo-row .logo-choice-options label { padding: 6px 10px; font-size: 12px; }
.thumb-logo-row.is-busy { opacity: .6; pointer-events: none; }

.thumb-edit-controls { flex-wrap: wrap; align-items: center; gap: 6px; }
.thumb-edit-controls .btn-secondary { padding: 8px 14px; font-size: 12px; }
.thumb-edit-status { font-size: 12px; color: var(--muted); }
.thumb-edit-status:empty { display: none; }
.thumb-edit-status-error { color: var(--danger); }

.pack-thumbs .ef-read { font-size: 13px; font-weight: var(--weight-bold); }

/* JSON brut du pack, replié par défaut. */
.pack-raw {
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
}
.pack-raw > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 11px;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.pack-raw > summary::-webkit-details-marker { display: none; }
.pack-raw > summary .icon-btn-svg { width: 14px; height: 14px; transition: transform 200ms ease; }
.pack-raw[open] > summary .icon-btn-svg { transform: rotate(180deg); }
.pack-raw > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }

/* ---- JSON brut (administration) ---- */

.pack-raw { border-top: 0; padding-top: 24px; }
.pack-raw > summary { font-size: var(--text-lg); text-transform: none; letter-spacing: -0.01em; color: var(--ink); }
.pack-raw-pre {
  margin: 16px 0 0;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  max-height: 420px;
}
.pack-raw-edit { margin-top: 16px; }
.json-textarea {
  width: 100%;
  min-height: 320px;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  padding: 14px 16px;
  resize: vertical;
}
.json-textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.modal-hint { color: var(--muted); font-size: 13px; margin: 12px 0 0; }
.modal-error {
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: var(--weight-semibold);
}
.modal-error[hidden] { display: none; }

.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.empty-state p { margin: 0 0 16px; }

@media (max-width: 1000px) {
  .pack-thumbs-layout, .pack-thumbs-post .pack-thumbs-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .pack-head h1 { font-size: 23px; }
  /* Téléphone : une ligne par élément du bandeau, les actions en bas. */
  .pack-bar { padding: 6px; gap: 0; }
  .pack-bar-seg { flex: 1 1 100%; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .pack-bar-seg .pack-bar-label { min-width: 58px; }
  .pack-bar-spacer { display: none; }
  .pack-bar .pack-head-actions { flex: 1 1 100%; margin: 0; padding: 8px 2px 2px; }
  .pack-net-toggle .icon-btn-svg { margin-left: auto; }
  .pack-head-actions .btn-primary, .pack-head-actions #editModeToggle { flex: 1 1 0; justify-content: center; }
  .pack-date-time { grid-template-columns: minmax(0, 1fr) 92px; flex: 1 1 auto; }
  .pack-bar-notes { justify-content: flex-start; margin-top: -6px; }
  .pack-tabs { align-self: stretch; display: flex; }
  .pack-tabs [role="tab"] { flex: 1 1 auto; justify-content: center; padding: 8px 10px; }
  .pack-section { padding: 18px 16px; }
  .ef-grid .ef { grid-template-columns: minmax(0, 1fr) auto; }
  .ef-grid .ef-label { grid-column: 1; grid-row: 1; }
  .ef-grid .ef-read { grid-column: 1 / -1; grid-row: 2; }
  .ef-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Après un changement d'émission : proposer de réécrire les textes avec son ton. */
.ef-show-rewrite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--brand-tint-soft); font-size: 13px; color: var(--ink); }

/* Onglet « Copies » (national et agences, dashboard/lib/pack_copy_view.php). */
.pack-copies-origin { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-ink); font-size: 13px; font-weight: var(--weight-bold); }
.pack-copies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.pack-copies-card { display: grid; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); }
.pack-copies-card h3 { margin: 0; font-size: 15px; }
.pack-copies-card [hidden], .pack-copies-grid > [hidden] { display: none; }
.pack-copies-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pack-copies-head select { max-width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card-bg); color: var(--ink); font: inherit; font-weight: var(--weight-bold); }
.pack-copies-list, .pack-copies-notes, .pack-copies-done { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.pack-copies-list { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.pack-copies-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 9px 12px; border-bottom: 1px solid var(--border-soft); }
.pack-copies-row:last-child { border-bottom: 0; }
.pack-copies-row .checkbox-row { margin: 0; min-width: 0; font-weight: var(--weight-bold); }
.pack-copies-state { font-size: 12px; color: var(--muted); }
.pack-copies-state.is-warn, .pack-copies-notes .is-warn { color: var(--status-pending-fg); font-weight: var(--weight-bold); }
.pack-copies-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: var(--weight-bold); color: var(--ink-soft); }
.pack-copies-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.pack-copies-title { margin: 0; font-weight: var(--weight-bold); }
.pack-copies-text { margin: 0; padding: 12px; border-radius: var(--radius-md); background: var(--surface-2); font-size: 13px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }
.pack-copies-mark { padding: 0 3px; border-radius: 4px; background: var(--brand-tint); color: var(--brand-ink); font-weight: var(--weight-bold); }
.pack-copies-notes { gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.pack-copies-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.pack-copies-copy:last-child { border-bottom: 0; }
.pack-copies-copy .space-switch-form { margin-left: auto; }
@media (max-width: 720px) {
  .pack-copies-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Champs de l'espace repérés dans les textes (dashboard/lib/pack_fields.php,
   assets/js/pack-fields.js) : valeur surlignée, nom du champ en petit après
   elle (contenu de style, jamais copié avec le texte). */
.ef-field { padding: 0 3px; border-radius: 4px; background: var(--brand-tint); color: var(--brand-ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ef-field::after { content: attr(data-field-label); margin-left: 4px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--card-bg); color: var(--brand-ink); font-size: 10.5px; font-weight: var(--weight-bold); vertical-align: 1px; white-space: nowrap; }
.ef-fields { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.ef-fields-insert { padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card-bg); color: var(--brand-ink); font: inherit; font-size: 12.5px; font-weight: var(--weight-bold); cursor: pointer; }
.ef-fields-insert:hover { border-color: var(--brand-ink); }
.ef-fields-hint { font-size: 12px; color: var(--muted); }
.ef-fields-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; width: min(340px, 100%); max-height: 260px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: var(--radius-md); background: var(--card-bg); box-shadow: var(--shadow-lg), var(--shadow-xs); overscroll-behavior: contain; }
.ef-fields-list[hidden] { display: none; }
.ef-fields-option { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.ef-fields-option.is-active { background: var(--surface-2); }
.ef-fields-option strong { font-size: 13px; color: var(--ink); }
.ef-fields-option span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }

/* ---- 10-relecture.css ---- */
/* Relecture vidéo et commentaires (fiche du pack et fenêtre du tableau de bord), puis accessibilité globale (focus, animations réduites).
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ==========================================================================
   Relecture : vidéo + commentaires (fiche du pack et fenêtre du dashboard)
   ========================================================================== */

.review.pack-section { padding: 14px; margin-bottom: 22px; }

.review-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 14px;
}

/* Fiche du pack : la vidéo (16:9) fixe la hauteur de la rangée ; la colonne
   commentaires s'y aligne sans l'agrandir (fil défilant). */
.review-layout:not(.review-layout-modal) .review-stage { aspect-ratio: 16 / 9; }
.review-layout:not(.review-layout-modal) .review-chat { height: 0; min-height: 100%; }

.review-stage {
  position: relative;
  background: var(--deep);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}
.review-player { position: relative; width: 100%; max-height: 100%; aspect-ratio: 16 / 9; background: #000; }
.review-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.review-player video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.review-post-visual { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.review-post-visual img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.review-stage-empty { margin: 0; padding: 24px; max-width: 42ch; text-align: center; color: rgba(255, 255, 255, 0.7); font-size: 13px; line-height: 1.6; }
.review-stage-empty a,
.review-stage-hint a { color: var(--brand-light); }
.review-stage-hint { margin: 0; padding: 8px 14px; align-self: stretch; color: rgba(255, 255, 255, 0.6); font-size: 11px; line-height: 1.5; }

.review-empty { margin: 10px 4px 0; color: var(--muted); font-size: 12px; }

.review-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 6px 6px 6px 0;
}
.review-chat > .review-empty { padding: 16px; }

.review-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.review-chat-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--weight-heavy);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.review-chat-title .icon-btn-svg { width: 16px; height: 16px; }
.review-count:not(:empty) {
  font-size: 11px;
  font-weight: var(--weight-heavy);
  letter-spacing: 0;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
}

.review-filters {
  display: flex;
  gap: 2px;
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  padding: 3px;
}
.review-filter {
  border: 0;
  cursor: pointer;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--weight-bold);
  background: transparent;
  color: var(--muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.review-filter:hover { color: var(--ink); }
.review-filter.is-active { background: var(--card-bg); color: var(--ink); box-shadow: var(--shadow-xs); }
.review-filter:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.review-thread {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.review-none { color: var(--muted); font-size: 13px; padding: 8px 0; }

/* Commentaire : avatar rond à gauche + bulle crème (pseudo-élément, pour ne
   pas toucher au DOM produit par review.js). */
.review-item {
  position: relative;
  padding: 10px 12px 10px 52px;
  display: grid;
  gap: 4px;
}
.review-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  right: 0;
  background: var(--bg);
  border-radius: 14px;
  transition: background var(--transition-fast);
}
.review-item > * { position: relative; }
.review-item:hover::before,
.review-item:focus-within::before { background: var(--surface-2); }
.review-item.is-mine::before { background: var(--brand-tint-soft); }
.review-item.is-mine:hover::before,
.review-item.is-mine:focus-within::before { background: var(--brand-tint); }
.review-item.is-resolved { opacity: 0.6; }
.review-item.is-resolved .review-body { text-decoration: line-through; text-decoration-thickness: 1px; }

.review-item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}
.review-avatar {
  position: absolute;
  left: -52px;
  top: -10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--weight-heavy);
  color: var(--on-brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
}
.review-item-head { position: relative; }
.review-author { font-weight: var(--weight-bold); color: var(--ink); }
.review-date { color: var(--muted); }
.review-tc {
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0 6px;
  cursor: pointer;
  background: var(--brand-tint);
  color: var(--brand-ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--weight-heavy);
  font-variant-numeric: tabular-nums;
}
.review-tc:disabled { cursor: default; }
.review-tc:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.review-body { margin: 0; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

.review-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 11px; }
.review-action {
  border: 0;
  background: none;
  padding: 0;
  color: var(--brand-dark);
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.review-action:hover { text-decoration: underline; }
.review-action-danger { color: var(--danger); }
.review-resolved-by { color: var(--status-published-fg); font-weight: var(--weight-bold); }

/* Actions discrètes, révélées au survol (toujours visibles au toucher). */
.review-chat .review-actions { opacity: 0; transition: opacity var(--transition-fast); }
.review-chat .review-item:hover .review-actions,
.review-chat .review-item:focus-within .review-actions,
.review-chat .review-item.is-resolved .review-actions { opacity: 1; }

.review-status { margin: 0; min-height: 1.2em; font-size: 12px; color: var(--muted); }
.review-status.is-error { color: var(--danger); }

.review-composer { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.review-composer textarea {
  width: 100%;
  border: 0;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  resize: none;
  min-height: 64px;
}
.review-composer textarea:focus-visible { outline: none; background: var(--card-bg); box-shadow: var(--focus-ring); }
.review-composer-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.review-send { margin-left: auto; padding: 8px 16px; font-size: 12px; box-shadow: none; }

.review-timecode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}
.review-timecode-clear {
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: var(--weight-heavy);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.review-timecode[hidden],
.review-manual-tc[hidden] { display: none; }
.review-manual-tc { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-weight: var(--weight-bold); }
.review-manual-tc input {
  width: 7.5em;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  padding: 5px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.review-manual-tc input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.review-hint { color: var(--muted-soft); font-size: 11px; }

@media (hover: none) {
  .review-chat .review-actions { opacity: 1; }
  .review-hint { display: none; }
}

@media (max-width: 900px) {
  .review-layout { grid-template-columns: minmax(0, 1fr); height: auto; }
  .review-layout:not(.review-layout-modal) .review-chat { height: auto; min-height: 0; }
  .review-chat { padding: 0; }
  .review-layout:not(.review-layout-modal) .review-thread { max-height: 360px; }
}

/* ---- Fenêtre « Relecture » du dashboard, par-dessus l'interface ---- */

html.has-review-modal { overflow: hidden; }
.review-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
}
.review-modal[hidden] { display: none; }
.review-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.review-modal-panel {
  position: relative;
  width: min(1320px, 100%);
  height: min(800px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  padding: 14px;
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.review-modal.is-open .review-modal-backdrop { opacity: 1; }
.review-modal.is-open .review-modal-panel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .review-modal-backdrop,
  .review-modal-panel { transition: none; }
}
.review-modal-head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; }
.review-modal-heading { flex: 1; min-width: 0; display: grid; gap: 2px; }
.review-modal-kicker {
  font-size: 11px;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-ink);
}
.review-modal-head h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-modal-link { flex-shrink: 0; }
.review-modal-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.review-modal-close:hover { background: var(--surface-2-hover); }
.review-modal-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.review-layout-modal { flex: 1; min-height: 0; height: auto; }
@media (max-width: 900px) {
  .review-modal { padding: 0; }
  .review-modal-panel { width: 100%; height: 100%; border-radius: 0; }
  .review-modal-link span { display: none; }
  .review-layout-modal { grid-template-rows: auto minmax(0, 1fr); }
}

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

/* Fallback de focus clavier visible pour tout élément interactif non couvert
   par une règle dédiée : anneau teal, jamais l'outline du navigateur. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* 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,
  .btn-primary:hover { transform: none; }
}

/* ---- 11-visuels-personas.css ---- */
/* Page Visuels (thumbnails.php) et page Personas (personas.php).
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ==========================================================================
   Personas (visages de référence) — personas.php + sélection dans thumbnails.php
   ========================================================================== */

/* ---- Miniatures (thumbnails.php) : étapes + récapitulatif latéral ---- */

.wizard-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.wizard-summary {
  position: sticky;
  top: 96px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
}
/* Pendant la génération (étapes masquées par JobPoll), le récapitulatif se retire. */
.wizard-layout:has(#flow[style*="none"]) { grid-template-columns: minmax(0, 1fr); }
.wizard-layout:has(#flow[style*="none"]) .wizard-summary { display: none; }

.wizard-summary-title {
  font-size: 11px;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-soft);
  margin-bottom: 12px;
}
.wizard-summary-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 14px;
  font-size: 13px;
}
.wizard-summary-list dt { color: var(--muted); }
.wizard-summary-list dd { margin: 0; font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.wizard-summary-note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--muted);
}

/* Étape « Miniatures existantes » : une zone de dépôt par format, aperçu dedans. */
.existing-thumbs { display: grid; grid-template-columns: 16fr 9fr; gap: 16px; margin-top: 16px; align-items: start; }
.existing-thumb { display: grid; gap: 8px; min-width: 0; }
.existing-thumb-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.existing-thumb-head span { font-size: 11px; color: var(--muted); }
.existing-thumb .dropzone {
  display: flex; align-items: center; justify-content: center; padding: 16px;
  border-radius: var(--radius-md); overflow: hidden;
}
.existing-thumb-horizontal .dropzone { aspect-ratio: 16 / 9; }
.existing-thumb-vertical .dropzone { aspect-ratio: 9 / 16; width: min(100%, 220px); margin: 0 auto; }
.existing-thumb-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.existing-thumb .dropzone.has-image .dropzone-hint {
  position: relative; background: var(--glass); padding: 6px 10px; border-radius: var(--radius-sm);
  opacity: 0; transition: opacity var(--transition-fast);
}
.existing-thumb .dropzone.has-image:hover .dropzone-hint,
.existing-thumb .dropzone.has-image.is-dragover .dropzone-hint,
.existing-thumb .dropzone.has-image:has(input:focus-visible) .dropzone-hint { opacity: 1; }
.existing-thumb-status { margin: 0; min-height: 1em; }
.existing-thumb-status.is-error { color: var(--danger, #b42318); }
.notice.notice-info { margin-top: 14px; background: var(--status-validated-bg); color: var(--ink); }
@media (max-width: 640px) {
  .existing-thumbs { grid-template-columns: 1fr; }
}
.step-actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Étape « Choisir le format » : sous-blocs séparés par un filet. */
.step-card-stack { display: flex; flex-direction: column; }
.step-card-stack > .step-head { margin-bottom: 18px; }

.mode-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mode-tiles.mode-tiles-3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mode-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid var(--border-soft);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.mode-tile:hover { border-color: var(--border-dash); }
.mode-tile[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); }
.mode-tile:disabled { opacity: 0.45; cursor: not-allowed; }
.mode-tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mode-tile-ratios { display: flex; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.mode-tile-ratios .ratio-h { width: 28px; height: 16px; border-radius: 3px; background: var(--ink); }
.mode-tile-ratios .ratio-v { width: 10px; height: 18px; border-radius: 3px; background: var(--ink); }
.mode-tile-title { display: block; font-weight: var(--weight-bold); font-size: 13px; }
.mode-tile-sub { display: block; font-size: 11px; color: var(--muted); }

.ratio-line { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; font-size: 11px; color: var(--muted-soft); }

.logo-choice,
.ref-images,
.step-card-stack .text-options {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.ref-images-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: var(--weight-heavy);
}
.ref-images-optional { font-size: 11px; font-weight: var(--weight-semibold); color: var(--muted); }
/* Visuel d'un post RS : tuiles de format (aperçu des proportions). */
.pill-recommended {
  margin-left: 6px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: #fff;
  background: var(--category-linkedin);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  vertical-align: 1px;
}
.post-format-tiles { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.post-ratio { display: block; flex-shrink: 0; border-radius: 3px; background: var(--ink); }
.post-ratio-portrait { width: 16px; height: 20px; }
.post-ratio-carre { width: 18px; height: 18px; }
.post-ratio-paysage { width: 28px; height: 16px; }
.pill-required {
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--status-pending-fg);
  background: var(--status-pending-bg);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}
.logo-choice .step-hint,
.ref-images .step-hint { margin: 0 0 12px; }
.logo-choice .notice { margin-top: 12px; }

/* Logo : radios en groupe segmenté. */
.logo-choice-options {
  border: 0;
  margin: 0;
  width: fit-content;
  flex-wrap: wrap;
}
.logo-choice-options label {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.logo-choice-options label:hover { color: var(--ink); }
.logo-choice-options input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.logo-choice-options label:has(input:checked) { background: var(--card-bg); color: var(--ink); box-shadow: var(--shadow-xs); }
.logo-choice-options label:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.ref-images .dropzone { padding: 22px; border-radius: var(--radius-md); }

/* Texte incrusté : une ligne par format (libellé, mode, texte). */
.text-options .text-mode-label { flex: 0 0 90px; font-size: 13px; font-weight: var(--weight-bold); }

/* Modèle de visuel de la rubrique : aperçus à leurs proportions. */
.template-previews { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.template-preview { margin: 0; display: grid; gap: 4px; }
.template-preview img { display: block; height: 120px; width: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); object-fit: cover; }
.template-preview figcaption { font-size: 11px; color: var(--muted); }

/* Logo : position et taille, une ligne par format. */
.logo-placement { margin-top: 14px; display: grid; gap: 10px; }
.logo-placement[hidden] { display: none; }
.logo-placement-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 8px 12px; }
.logo-placement-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.logo-placement-label { font-size: 13px; font-weight: var(--weight-bold); }
@media (max-width: 480px) { .logo-placement-row { grid-template-columns: 1fr; } }
.logo-placement .step-hint { margin: 0; }

/* Images de référence : tuiles. */
.ref-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.ref-list:empty { display: none; }
.ref-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-md);
  background: var(--bg);
}
.ref-item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; display: block; background: var(--surface-3); }
.ref-item-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-item-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.ref-item-actions button { padding: 5px 10px; font-size: 11px; background: var(--card-bg); }
.ref-item-actions .ref-remove { margin-left: auto; }
.ref-item-actions .ref-remove:hover { background: var(--danger-bg); color: var(--danger); }

.step-card-stack .text-mode-options { gap: 10px; }
.step-card-stack .text-mode-options select,
.step-card-stack .text-mode-options input[type="text"] { flex: 1 1 200px; width: auto; }

/* Personas (sélection) : tuiles 2 px, avatar rond. */
.persona-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.persona-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.persona-option:hover { border-color: var(--border-dash); }
.persona-option:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.persona-option:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.persona-option:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.persona-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.persona-option-face {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--placeholder);
}
.persona-option-meta { min-width: 0; }
.persona-option-name { display: block; font-weight: var(--weight-bold); font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-option-role { display: block; font-size: 11px; color: var(--muted); }
.persona-option-shows { display: block; font-size: 11px; color: var(--muted-soft); }
.persona-option.is-suggested .persona-option-name::before { content: "★ "; color: var(--status-pending-fg); }
.persona-picker-hint { margin-top: 12px; }

.step-counter { text-align: right; font-size: 11px; color: var(--muted-soft); margin-top: 6px; }

.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.model-grid > div { min-width: 0; }

.empty-state-inline { padding: 20px; box-shadow: none; background: var(--bg); text-align: left; }

@media (max-width: 900px) {
  .wizard-layout { grid-template-columns: minmax(0, 1fr); }
  .wizard-summary { position: static; }
}
@media (max-width: 720px) {
  .upload-row { flex-direction: column; }
  .upload-current { flex-basis: auto; }
  .mode-tiles,
  .model-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Page Personas (personas.php) ---- */

.section-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.section-title-row h2,
.section-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.01em;
  margin: 0;
}
.section-title { margin-bottom: 14px; }
.count-pill {
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--muted);
  background: var(--card-bg);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-xs);
}

.persona-list { margin-bottom: 32px; }

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.persona-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-card);
}
.persona-card-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.persona-card-photos figure { margin: 0; }
.persona-card-photos figcaption {
  font-size: 10px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-soft);
  margin-top: 6px;
  text-align: center;
}
.persona-card-photos img,
.persona-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--muted-soft);
  font-size: 18px;
}
.persona-card-body { padding: 14px 6px 4px; }
.persona-card-name { font-size: 15px; font-weight: var(--weight-heavy); letter-spacing: -0.01em; }
.persona-card-role { font-size: 12px; color: var(--muted); }
.persona-card-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.persona-card-actions .btn-ghost .icon-btn-svg { width: 13px; height: 13px; }

.persona-form { max-width: 880px; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-caption,
.field-row label {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.persona-form .step-hint { margin: 12px 0 16px; }
.persona-form .step-hint:last-child { margin-bottom: 0; }

/* Émissions : pilules toggles (case masquée). */
.persona-shows { display: flex; flex-wrap: wrap; gap: 6px; }
.persona-shows label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: var(--weight-bold);
  background: var(--card-bg);
  color: var(--ink-soft);
  box-shadow: 0 1px 2px rgba(31, 36, 38, 0.08), inset 0 0 0 1px var(--border-soft);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.persona-shows label:hover { background: var(--surface-2); }
.persona-shows input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.persona-shows label:has(input:checked) { background: var(--inverse); color: var(--on-inverse); box-shadow: none; }
.persona-shows label:has(input:focus-visible) { box-shadow: var(--focus-ring); }

/* Photos : trois dépôts carrés. */
.persona-drop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.persona-drop {
  position: relative;
  aspect-ratio: 1;
  border: 2px dashed var(--border-dash);
  border-radius: 18px;
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.persona-drop:hover { border-color: var(--brand); }
.persona-drop.is-dragover { border-color: var(--brand); background: var(--brand-tint); }
.persona-drop.has-image { border-style: solid; border-color: var(--brand); }
.persona-drop:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.persona-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.persona-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.persona-drop-hint { font-size: 12px; color: var(--muted); padding: 16px; pointer-events: none; }
.persona-drop-hint strong { display: block; color: var(--ink); font-size: 13px; font-weight: var(--weight-bold); margin-bottom: 4px; }
.persona-drop.has-image .persona-drop-hint { display: none; }

/* Dernière étape sombre en bloc (consentement + bouton empilés). */
.step-card.step-card-dark-block { display: block; }
.step-card-dark-block .step-head { margin-bottom: 14px; }
.step-card-generate { --red: #ff9f9f; }
.step-card-generate .step-hint { color: rgba(255, 255, 255, 0.7); }
.step-card-dark-block .step-actions { margin-top: 18px; }
.persona-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.persona-consent input[type="checkbox"] { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--brand); flex-shrink: 0; }

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .persona-drop-grid { gap: 8px; }
}

.card .thumb:has(.thumb-category) .thumb-badge { max-width: calc(100% - 150px); }

/* ---- 12-espaces.css ---- */
/* Badge de version, espaces : puce de l'espace actif, sélecteur, accueil.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ---- Badge de version (barre du haut, toutes les pages) ---- */

.version-flair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  box-shadow: var(--shadow-xs);
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.version-flair:hover { background: var(--brand-tint); color: var(--brand-dark); }
.version-flair:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.version-flair-stage {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-weight: var(--weight-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.version-flair:not(.version-flair-beta) { padding-left: 9px; }
.version-flair-number { font-variant-numeric: tabular-nums; }

/* ---- Espaces : marque sans logo, sélecteur de la barre du haut, accueil ---- */

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 12px;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.space-switch { position: relative; flex-shrink: 1; min-width: 0; }
/* Puce de l'espace actif (render_space_switcher()) : sigle sur la couleur de
   l'espace et nom ; cliquable seulement avec plusieurs espaces. */
.space-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  padding: 3px 10px 3px 3px;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  box-shadow: var(--shadow-xs);
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--ink);
}
.space-chip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 10.5px;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.space-switch > summary { list-style: none; cursor: pointer; transition: background var(--transition-fast); }
.space-switch > summary::-webkit-details-marker { display: none; }
.space-switch > summary:hover { background: var(--brand-tint); }
.space-switch > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.space-switch-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.space-switch > summary .icon-btn-svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); transition: transform var(--transition-fast); }
.space-switch[open] > summary .icon-btn-svg { transform: rotate(180deg); }
.space-switch-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  min-width: 240px;
  max-width: min(320px, calc(100vw - 32px));
  padding: 6px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg), var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.space-switch-form { margin: 0; }
.space-switch-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  text-align: left;
  cursor: pointer;
}
.space-switch-item:hover { background: var(--surface-2); }
/* Agence rangée sous son national. */
.space-switch-item.is-agency { padding-left: 26px; font-size: 13px; }
.space-switch-item:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.space-switch-item[aria-current="true"] { color: var(--brand-dark); font-weight: var(--weight-bold); }
.space-switch-check { color: var(--brand-ink); }
.space-switch-manage {
  margin-top: 4px;
  padding: 9px 12px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--brand-ink);
  text-decoration: none;
}
.space-switch-manage:hover { color: var(--brand-dark); }

@media (max-width: 720px) {
  .space-switch-name { max-width: 110px; }
}

.spaces-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.spaces-panel .spaces-panel-head h2 { margin: 0; }
.spaces-home-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.spaces-home-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.spaces-home-item.is-current { background: var(--brand-tint); }
.spaces-home-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.spaces-home-copy strong { font-size: 14px; overflow-wrap: anywhere; }
.spaces-home-copy span { font-size: 12px; color: var(--muted); font-weight: var(--weight-semibold); }
.spaces-home-current { font-size: 12px; font-weight: var(--weight-bold); color: var(--brand-dark); white-space: nowrap; }
.spaces-home-item .btn-secondary { padding: 8px 16px; font-size: 13px; }

/* Aperçu « Voir comme » de l'exploitant (dashboard/lib/view_as.php) :
   bandeau au-dessus de la barre du haut, boutons de l'onglet Utilisateurs. */
.view-as-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 40px;
  background: var(--status-pending-bg);
  color: var(--notice-fg);
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.view-as-bar p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.view-as-bar-title {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--inverse);
  color: var(--on-inverse);
  font-size: 11px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.view-as-stop { margin: 0; }
.view-as-bar-stop {
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.view-as-bar-stop:hover { background: var(--card-bg); }
.view-as-roles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.view-as-roles-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
}
.view-as-roles-label svg,
.view-as-user svg { width: 16px; height: 16px; }
.view-as-start { margin: 0; }
.view-as-user { margin-top: 12px; }
.view-as-user .btn-secondary { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .view-as-bar { padding: 8px 16px; justify-content: flex-start; }
}

/* ---- 13-feuille-de-route.css ---- */
/* Feuille de route (dashboard/roadmap.php), puis en-tête non collant sur téléphone.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ---- Feuille de route (dashboard/roadmap.php) ---- */

main.roadmap { max-width: 960px; display: flex; flex-direction: column; gap: 24px; }
.roadmap .page-hero { margin-bottom: 12px; }
.roadmap .page-hero-sub { max-width: 68ch; }
.roadmap h2 { margin: 0 0 14px; font-size: 20px; font-weight: var(--weight-heavy); letter-spacing: -0.02em; }
.roadmap h3 { margin: 0 0 12px; font-size: 16px; font-weight: var(--weight-heavy); letter-spacing: -0.01em; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.roadmap p { margin: 0 0 14px; max-width: 70ch; font-size: 13px; color: var(--muted); line-height: 1.6; }
.roadmap p strong { color: var(--ink); }
.roadmap ul,
.roadmap ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.roadmap code { font-size: 12px; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.roadmap-note { color: var(--muted); font-size: 12px; }
.roadmap-block { display: block; }

/* Frises : sections blanches, points reliés. */
.roadmap-track-block {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 24px 28px 28px;
  box-shadow: var(--shadow-card);
  overflow-x: auto;
}
.roadmap h2.roadmap-track-title {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-soft);
}
.roadmap .roadmap-track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(var(--roadmap-steps, 10), minmax(72px, 1fr));
  gap: 0;
}
.roadmap-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  min-width: 0;
}
/* Trait vers le point suivant (teal si les deux sont livrés). */
.roadmap-stop::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border-dash);
}
.roadmap-stop:last-child::before { display: none; }
.roadmap-stop.is-done:has(+ .roadmap-stop.is-done)::before { background: var(--brand); }
.roadmap-dot {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 3px solid var(--border-dash);
  box-shadow: 0 0 0 4px var(--card-bg);
}
.roadmap-stop.is-done .roadmap-dot { background: var(--brand); border-color: var(--brand); }
.roadmap-stop.is-v1 .roadmap-dot { background: var(--ink); border-color: var(--ink); }
.roadmap-stop.is-next .roadmap-dot { border-color: var(--brand); }
.roadmap-v { font-size: 12px; font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; color: var(--muted-soft); }
.roadmap-stop.is-done .roadmap-v,
.roadmap-stop.is-next .roadmap-v { color: var(--brand-dark); }
.roadmap-stop.is-v1 .roadmap-v { color: var(--ink); }
.roadmap-l { font-size: 11px; color: var(--muted); line-height: 1.3; padding: 0 4px; }

/* Périmètre V1 / hors V1 */
.roadmap-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 14px; }
.roadmap-box {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
}
.roadmap-box h3 { font-size: 14px; color: var(--brand-dark); }
.roadmap-box.is-out { background: var(--surface-2); box-shadow: none; }
.roadmap-box.is-out h3 { color: var(--muted); }

/* Démarches / paramètres : liste dans une section blanche. */
.roadmap-deps {
  margin: 0;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 8px 28px;
  box-shadow: var(--shadow-card);
}
.roadmap-deps > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: start;
}
.roadmap-deps > div:last-child { border-bottom: 0; }
.roadmap-deps dt { grid-column: 1; font-size: 14px; font-weight: var(--weight-bold); }
.roadmap-deps dd { grid-column: 1; margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.roadmap-deps dd.roadmap-when {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  font-size: 11px;
  font-weight: var(--weight-heavy);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  color: var(--brand-dark);
  white-space: nowrap;
}
.roadmap-params > div { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); }
.roadmap-params dd.roadmap-when {
  white-space: normal;
  justify-self: stretch;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}
.roadmap-params code { background: transparent; padding: 0; }

/* Étapes : cartes 96 px / contenu. */
.roadmap-ms {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 20px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
}
.roadmap-ms.is-done { opacity: 0.72; }
.roadmap-ms-v {
  font-size: 24px;
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.2;
}
.roadmap-ms.is-done .roadmap-ms-v { color: var(--brand-ink); }
.roadmap-ms-v.roadmap-ms-tag { font-size: 15px; color: var(--muted); letter-spacing: -0.01em; }
.roadmap-ms.is-next .roadmap-ms-v.roadmap-ms-tag { color: var(--brand-dark); }
.roadmap-ms.is-next { box-shadow: inset 0 0 0 2px var(--brand), var(--shadow-card); }
.roadmap-ms-v small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.roadmap-ms-body { min-width: 0; }
.roadmap-ms-body h3 { margin-bottom: 8px; }
.roadmap .roadmap-exit {
  margin: 12px 0 0;
  max-width: none;
  font-size: 12px;
  color: var(--muted);
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 12px;
}
.roadmap-chip { display: inline-block; font-size: 11px; font-weight: var(--weight-heavy); padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: 0; }
.roadmap-chip.is-ext { background: var(--brand-tint); color: var(--brand-dark); }
.roadmap-chip.is-sec { background: var(--status-pending-bg); color: var(--status-pending-fg); }

/* Tableau sécurité : lignes aérées dans une section blanche. */
.roadmap-table-wrap {
  overflow-x: auto;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 8px 28px;
  box-shadow: var(--shadow-card);
}
.roadmap-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 13px; }
.roadmap-table th,
.roadmap-table td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.roadmap-table th { font-size: 11px; font-weight: var(--weight-heavy); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-soft); padding-top: 12px; padding-bottom: 12px; }
.roadmap-table tr:last-child td { border-bottom: 0; }
.roadmap-table td:first-child { font-weight: var(--weight-bold); width: 28%; }
.roadmap-table td:nth-child(2) { color: var(--ink-soft); }
.roadmap-table td:last-child { width: 22%; font-weight: var(--weight-bold); color: var(--brand-dark); }

/* Décisions : items blancs numérotés. */
.roadmap .roadmap-decisions {
  list-style: none;
  padding: 0;
  counter-reset: decision;
  gap: 8px;
}
.roadmap-decisions li {
  counter-increment: decision;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  box-shadow: var(--shadow-xs);
}
.roadmap-decisions li::before {
  content: counter(decision);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--inverse);
  color: var(--on-inverse);
  font-size: 11px;
  font-weight: var(--weight-heavy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* V2 : espaces en pilules, paramètres. */
.roadmap-v2 > h3 { margin-top: 24px; }
.roadmap .roadmap-spaces { list-style: none; padding: 0; margin: 0 0 16px; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.roadmap-spaces li {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  box-shadow: var(--shadow-xs);
  font-weight: var(--weight-bold);
  font-size: 12px;
  color: var(--ink-soft);
}
.roadmap-spaces li.is-current { background: var(--inverse); color: var(--on-inverse); box-shadow: none; }
.roadmap-spaces li.is-current small { font-weight: var(--weight-medium); opacity: 0.75; margin-left: 4px; }
.roadmap-spaces li.is-more { background: transparent; box-shadow: none; color: var(--muted); }
.roadmap-params { margin-bottom: 16px; }
.roadmap .roadmap-journey { margin: 0 0 16px; font-size: 14px; gap: 8px; }
.roadmap-v2 .roadmap-scope { margin-top: 24px; }
.roadmap-v2 .roadmap-box ol { padding-left: 18px; }

@media (max-width: 760px) {
  .roadmap-track-block { padding: 20px 16px; }
  .roadmap .roadmap-track { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .roadmap-stop { flex-direction: row; align-items: center; text-align: left; gap: 10px; }
  .roadmap-stop::before { top: 20px; left: 9px; width: 2px; height: calc(100% + 12px); }
  .roadmap-v { flex: 0 0 72px; }
  .roadmap-deps,
  .roadmap-table-wrap { padding: 4px 16px; }
  .roadmap-deps > div,
  .roadmap-params > div { grid-template-columns: minmax(0, 1fr); }
  .roadmap-deps dd.roadmap-when { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 6px; }
  .roadmap-ms { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 16px; }
  .roadmap-box { padding: 18px 16px; }
}


/* ---- Téléphone (≤ 720 px) : en-tête non collant, filtres sur une ligne ----
   L'en-tête n'est plus collé en haut (il prendrait trop de hauteur d'écran) ;
   les groupes segmentés défilent horizontalement au lieu de s'empiler. */
@media (max-width: 720px) {
  /* Relatif (et non statique) : garde son z-index au-dessus du contenu, pour
     les menus qui en descendent (cloche, sélecteur d'espace). */
  header.topbar { position: relative; }

  .toolbar { gap: 8px; }
  .toolbar .segmented { flex: 0 1 auto; }
  .filter-menu-panel { width: calc(100vw - 32px); }
  .sort-control select { width: 100%; }

  .grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 14-connexion-et-comptes.css ---- */
/* Connexion (login.php), couleurs de Déclic des pages communes, double authentification, envoi YouTube, pages publiques, sécurité du compte, état YouTube du calendrier, bannière de base indisponible.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ==========================================================================
   Connexion (dashboard/login.php)
   ========================================================================== */

body.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 600px at 20% 0%, var(--brand-tint) 0%, transparent 60%),
    radial-gradient(700px 500px at 100% 100%, var(--halo-warm) 0%, transparent 60%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 400px;
  margin: 0;
  background: var(--card-bg);
  border-radius: 28px;
  padding: 40px 36px 32px;
  box-shadow: 0 1px 3px rgba(31, 36, 38, 0.04), var(--shadow-hero);
}

.login-card .login-logo {
  display: block;
  height: 34px;
  width: auto;
  margin: 0 0 28px;
}

.login-card h1 {
  font-size: 24px;
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 6px;
}

.login-card .login-subtitle {
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--muted);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-field label {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-field input {
  width: 100%;
  font-size: 15px;
  padding: 13px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  transition: box-shadow var(--transition-fast), background var(--transition-fast);
}

.login-field input:focus {
  outline: none;
  background: var(--card-bg);
  box-shadow: var(--focus-ring);
}

.login-error {
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

.login-submit {
  margin-top: 8px;
  width: 100%;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 15px;
  font-weight: var(--weight-bold);
  padding: 14px 0;
  cursor: pointer;
  box-shadow: 0 12px 24px -12px rgba(13, 139, 156, 0.7);
  transition: background var(--transition-fast);
}

.login-submit:hover { background: var(--brand-hover); }
.login-submit:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Couleurs de Déclic (produit), pour les pages communes à tous les espaces
   (connexion, règles de confidentialité) : bleu nuit du D, violet de la mine
   (voir site/declic/assets/declic.css). */
body.declic-theme {
  --ink: #172136;
  --ink-soft: #3a4459;
  --muted: #596579;
  --muted-soft: #8e97a8;
  --surface-2: #efedf5;
  --brand: #6554e8;
  --brand-dark: #4a3bc4;
  --brand-hover: #5646d6;
  --brand-tint: #f2f0f9;
  --brand-light: #bcb1ff;
  --brand-tint-hover: #e7e3f6;
  --brand-tint-soft: #f6f5fb;
  /* Couleurs du produit, quelle que soit la couleur réglée pour l'espace. */
  --on-brand: #ffffff;
  --brand-ink: var(--brand);
  --focus-ring: 0 0 0 3px rgba(101, 84, 232, 0.3);
  background:
    radial-gradient(900px 600px at 20% 0%, var(--brand-tint) 0%, rgba(242, 240, 249, 0) 60%),
    radial-gradient(700px 500px at 100% 100%, #ece8f7 0%, rgba(236, 232, 247, 0) 60%),
    #f7f5f0;
  color: var(--ink);
}
body.declic-theme .login-submit { box-shadow: 0 12px 24px -12px rgba(101, 84, 232, 0.75); }
body.declic-theme .login-card { box-shadow: 0 1px 3px rgba(23, 33, 54, 0.04), 0 30px 60px -30px rgba(23, 33, 54, 0.3); }

/* Double authentification : « ne plus demander le code sur cet appareil ». */
.login-remember { font-size: 13px; color: var(--ink-soft); align-items: flex-start; }
.login-remember input[type="checkbox"] { margin-top: 1px; }
.login-remember-hint { margin: -10px 0 0 28px; font-size: 12px; color: var(--muted); }

/* Mot de passe oublié, nouveau mot de passe, confirmation d'adresse
   (dashboard/password_forgot.php, password_reset.php, email_confirm.php). */
.login-notice {
  background: var(--brand-tint);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 12px;
  margin: 0 0 18px;
}
.login-notice p { margin: 0 0 8px; }
.login-notice p:last-child { margin: 0; }
.login-hint { font-weight: 400; color: var(--muted); }
.login-forgot { margin: -6px 0 0; text-align: right; font-size: 13px; }
.login-forgot a, .login-card .login-subtitle a { color: var(--brand-ink); }
.login-note { margin: 14px 0 0; font-size: 12px; color: var(--muted); }

.login-foot {
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--muted-soft);
  text-align: center;
}

/* Case à cocher sur une ligne (page Générer : socle commun du descriptif). */
.checkbox-row { display: flex; gap: 10px; align-items: center; font-weight: 600; cursor: pointer; }
.checkbox-row input[type="checkbox"] { margin: 0; width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; }

/* ---- Envoi vers YouTube (fiche du pack) ---- */
.pack-youtube .yt-intro, .pack-youtube .yt-last { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); }
.pack-youtube .yt-last { color: var(--muted); }
.yt-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.yt-status { margin: 0; font-size: 13px; font-weight: var(--weight-semibold); }
.yt-status:empty { display: none; }
.yt-status.is-ok { padding: 12px 16px; border-radius: var(--radius-md); background: var(--status-published-bg); color: var(--status-published-fg); }
.yt-status.is-warn { padding: 12px 16px; border-radius: var(--radius-md); background: var(--status-pending-bg); color: var(--status-pending-fg); }
.yt-status.is-error { padding: 12px 16px; border-radius: var(--radius-md); background: var(--danger-bg); color: var(--danger); }
.yt-panel { display: grid; gap: 14px; margin-top: 12px; }
.yt-video { margin: 0; font-size: 14px; }
.yt-errors, .yt-warnings, .yt-claims { margin: 0; padding-left: 20px; font-size: 13px; }
.yt-errors { color: var(--danger); }
.yt-warnings { color: var(--status-pending-fg); }
.yt-diff-wrap { overflow-x: auto; }
.yt-diff { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.yt-diff th, .yt-diff td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.yt-diff thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.yt-diff tbody th { width: 170px; font-weight: var(--weight-bold); }
.yt-field-toggle { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.yt-field-toggle input { margin: 0; width: 17px; height: 17px; accent-color: var(--brand); flex-shrink: 0; }
.yt-field-toggle:has(input:disabled) { cursor: default; color: var(--muted); }
.yt-field-error, .yt-field-note { display: block; margin-top: 4px; font-size: 12px; font-weight: var(--weight-semibold); }
.yt-field-error { color: var(--danger); }
.yt-field-note { color: var(--muted); }
.yt-diff .yt-thumb { width: 100%; max-width: 240px; }
.yt-diff td { white-space: pre-wrap; word-break: break-word; max-height: 260px; }
.yt-diff tr.is-changed .yt-diff-after { background: var(--brand-tint); }
.yt-diff tr.is-same td { color: var(--muted); }
.yt-thumb { margin: 0; width: 240px; max-width: 100%; }
.yt-thumb img, .yt-thumb-empty { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg); }
.yt-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); }
.yt-thumb figcaption { margin-top: 6px; font-size: 12px; color: var(--muted); }
.yt-checks { display: grid; gap: 10px; }
.yt-claims-title { margin: 0; font-size: 13px; font-weight: var(--weight-bold); }
@media (max-width: 640px) {
  .yt-diff tbody th { width: 110px; }
}

/* ---- Règles de confidentialité (page publique) ---- */
.legal-header { max-width: 760px; margin: 0 auto; padding: 24px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.legal-brand img { display: block; height: 30px; width: auto; }
.legal-list { margin: 0 0 10px; display: grid; gap: 6px; }
.legal-list > div { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 12px; }
.legal-list dt { color: var(--muted); }
.legal-list dd { margin: 0; }
@media (max-width: 560px) { .legal-list > div { grid-template-columns: 1fr; gap: 0; } }
.legal-foot { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; font-size: 13px; color: var(--muted); }
.legal-lang { font-size: 13px; color: var(--muted); margin: 0 0 20px; }
.legal-translation { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); }
.legal-page { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; line-height: 1.6; }
.legal-page h1 { margin: 0 0 6px; }
.legal-meta { margin: 0 0 28px; color: var(--muted); font-size: 14px; }
.legal-page section { margin-bottom: 28px; }
.legal-page h2 { font-size: 18px; margin: 0 0 10px; }
.legal-page h3 { font-size: 15px; margin: 16px 0 6px; }
.legal-page ul { padding-left: 20px; margin: 0 0 10px; }
.legal-page p { margin: 0 0 10px; }
/* Notes de version (page publique). */
.public-release { padding-top: 22px; border-top: 1px solid var(--border); }
.public-release h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 2px; }
.public-release-version { color: var(--brand-dark); font-variant-numeric: tabular-nums; }
.public-release-date { font-size: 13px; color: var(--muted); }
.home-legal { margin: 24px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* Fiche du pack : fichier de sous-titres. */
.pack-subtitles-state { margin: 0 0 8px; font-size: 13px; }
.pack-cost { margin: 0; font-size: 13px; color: var(--ink-soft); }
.pack-cost strong { color: var(--ink); }
.pack-subtitles-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pack-subtitles-actions .btn-secondary { padding: 8px 14px; font-size: 12px; }
.pack-subtitles-status { margin: 8px 0 0; font-size: 12px; font-weight: var(--weight-semibold); }
.pack-subtitles-status:empty { display: none; }
.pack-subtitles-status.is-ok { color: var(--status-published-fg); }
.pack-subtitles-status.is-error { color: var(--danger); }

/* ---- Sécurité du compte (double authentification) ---- */
.account-security .step-card h2 { margin: 16px 0 10px; font-size: 18px; }
.account-role { margin: 0; font-size: 14px; color: var(--ink-soft); }
.mfa-steps { padding-left: 20px; display: grid; gap: 12px; font-size: 14px; }
.mfa-qr { margin: 12px 0 6px; line-height: 0; }
.mfa-qr svg { border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); max-width: 100%; height: auto; }
.mfa-key { font-size: 14px; letter-spacing: 0.06em; word-break: break-all; }
.mfa-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.mfa-form input[type="text"] { width: 12ch; font-size: 20px; letter-spacing: 0.15em; text-align: center; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font-family: var(--font-mono); }
.mfa-form input[type="text"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Code par e-mail (dashboard/lib/mfa_email.php) : case « appareil de confiance »
   sous le champ. */
.mfa-form-email .mfa-remember { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
/* Choix de la méthode : deux cartes à égalité (code par e-mail, application),
   celle en place cernée de la couleur de l'espace ; une colonne sur téléphone. */
.mfa-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 8px; }
.mfa-method { min-width: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mfa-method.is-active { border: 2px solid var(--brand-ink); padding: 15px 17px; }
.mfa-method .step-hint { margin: 0; }
.mfa-method .mfa-form { margin-top: 2px; }
.mfa-method-head { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 2px; font-size: 15px; }
.mfa-method-head .icon-btn-svg { width: 18px; height: 18px; flex: none; }
.mfa-method-head > span:not(.badge) { flex: 1 1 auto; min-width: 0; }
.mfa-method-head .badge { flex: none; }
.account-security .mfa-sub { margin: 10px 0 0; font-size: 14px; }
.mfa-cancel { margin: 14px 0 0; }
.recovery-codes { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.recovery-codes code { display: block; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 15px; text-align: center; letter-spacing: 0.05em; }

/* ---- Calendrier éditorial : état YouTube, alertes, reprogrammation ---- */
.yt-state {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: var(--weight-bold); background: var(--surface-2); color: var(--ink-soft); white-space: nowrap;
}
.yt-state::before { content: "▶"; font-size: 8px; }
.yt-state.is-scheduled { background: var(--status-validated-bg); color: var(--brand-dark); }
.yt-state.is-public { background: var(--status-published-bg); color: var(--status-published-fg); }
.yt-state.is-missing { background: var(--danger-bg); color: var(--danger); }
.yt-views { font-size: 11px; font-weight: var(--weight-semibold); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-alert {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; font-weight: var(--weight-heavy); cursor: help; flex-shrink: 0;
}
.card-alert.alert-info { background: var(--status-validated-bg); color: var(--brand-dark); }
.card-alert.alert-warn { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.card-alert.alert-danger { background: var(--danger); color: #fff; }
.card-status-row { flex-wrap: wrap; }

.dashboard-alerts { margin: 0 0 18px; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 4px 20px; }
.dashboard-alerts > summary {
  display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none;
  font-size: 14px; font-weight: var(--weight-heavy);
}
.dashboard-alerts > summary::-webkit-details-marker { display: none; }
.dashboard-alerts > summary .icon-btn-svg { width: 16px; height: 16px; color: var(--status-pending-fg); }
.dashboard-alerts-count { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--status-pending-bg); color: var(--status-pending-fg); font-size: 12px; }
.dashboard-alerts-list { list-style: none; margin: 0; padding: 0 0 14px; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.dashboard-alerts-list li { font-size: 13px; padding: 8px 12px 8px 14px; border-radius: var(--radius-sm); background: var(--bg); border-left: 3px solid var(--border-soft); }
.dashboard-alerts-list li.alert-danger { border-left-color: var(--danger); }
.dashboard-alerts-list li.alert-warn { border-left-color: var(--status-pending-fg); }
.dashboard-alerts-list li.alert-info { border-left-color: var(--brand); }
.dashboard-alerts-list a { font-weight: var(--weight-bold); color: var(--ink); }

.calendar-chip.yt-is-scheduled::before { content: "⏱ "; }
.calendar-chip.yt-is-public::before { content: "▶ "; }
.calendar-chip.has-alert { box-shadow: inset 3px 0 0 var(--status-pending-fg); }
.calendar-chip.alert-danger { box-shadow: inset 3px 0 0 var(--danger); }

.reprogram-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  width: min(560px, calc(100vw - 32px)); padding: 16px 18px; border-radius: var(--radius-lg);
  background: var(--deep); color: #fff; box-shadow: var(--shadow-card); display: grid; gap: 12px;
}
.reprogram-toast p { margin: 0; font-size: 14px; line-height: 1.45; }
.reprogram-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.yt-state[hidden], .card-alert[hidden], .reprogram-toast[hidden], .dashboard-alerts[hidden] { display: none; }

/* Bannière : base de données présente mais inaccessible (lecture disque seule). */
.db-unavailable {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-ink);
  font-weight: 600;
}

/* ---- 15-statistiques.css ---- */
/* Statistiques (dashboard/stats.php, section de la fiche du pack) : onglets des réseaux, graphiques.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ==========================================================================
   Statistiques YouTube (dashboard/stats.php, section de la fiche du pack)
   Graphiques : dashboard/lib/charts.php (une série, couleur de marque, trait
   de 2 px, aire à 10 %, grille en filets), info-bulle : assets/js/stats.js.
   ========================================================================== */

main.stats-main { max-width: var(--content-width-wide); }
.stats-periods { display: flex; flex-wrap: wrap; gap: 4px; background: var(--card-bg); padding: 4px; border-radius: var(--radius-pill); box-shadow: var(--shadow-xs); }
.stats-period { padding: 7px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: var(--weight-semibold); color: var(--ink-soft); text-decoration: none; }
.stats-period:hover { background: var(--surface-2); color: var(--ink); }
.stats-period.is-active { background: var(--brand); color: var(--on-brand); }
.stats-period:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Onglets des réseaux (dashboard/lib/stats_networks.php) : réseau disponible
   ou marqué « Bientôt » ; défile horizontalement sur mobile (.segmented). */
.stats-networks { margin: 0 0 24px; width: fit-content; max-width: 100%; }
.stats-network { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: var(--weight-semibold); color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.stats-network .icon-btn-svg { width: 14px; height: 14px; }
.stats-network:hover { background: var(--surface-2); color: var(--ink); }
.stats-network.active, .stats-network.active:hover { background: var(--inverse); color: var(--on-inverse); }
.stats-network:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.stats-soon { font-size: 10px; font-weight: var(--weight-bold); padding: 1px 7px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); }
.stats-network.active .stats-soon { background: color-mix(in srgb, var(--on-inverse) 18%, transparent); color: var(--on-inverse); }
.stats-upcoming { max-width: 640px; }
.stats-upcoming h2 { font-size: 18px; font-weight: var(--weight-heavy); margin: 10px 0 8px; }
.stats-upcoming p { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.stats-upcoming .stats-hint { margin: 0 0 10px; }
.stats-upcoming-icon { display: inline-flex; padding: 10px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-dark); }
.stats-upcoming-icon .icon-btn-svg { width: 22px; height: 22px; }
.stats-upcoming-status { padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface-sunken); }

.stats-section { margin: 0 0 28px; }
.stats-section h2 { font-size: 18px; font-weight: var(--weight-heavy); letter-spacing: -0.01em; margin: 0 0 12px; }
.stats-card { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 22px 24px; }
.stats-hint { margin: -4px 0 14px; font-size: 13px; color: var(--muted); }
.stats-source { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.stats-notice { background: var(--brand-tint); border-radius: var(--radius-lg); padding: 18px 22px; margin: 0 0 24px; font-size: 14px; color: var(--ink-soft); }
.stats-notice p { margin: 0 0 12px; }
.stats-notice p:last-child { margin-bottom: 0; }
.stats-main .notice { margin: 0 0 16px; }

.stats-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.stats-tiles.is-compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stats-tile { background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stats-tiles.is-compact .stats-tile { background: var(--surface-sunken); box-shadow: none; padding: 12px 14px; }
.stats-tile-label { font-size: 12px; font-weight: var(--weight-semibold); color: var(--muted); }
.stats-tile-value { font-size: 26px; font-weight: var(--weight-heavy); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); }
.stats-tiles.is-compact .stats-tile-value { font-size: 20px; }
.stats-tile-note { font-size: 12px; color: var(--muted); }

.stats-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.stats-group h3 { font-size: 15px; font-weight: var(--weight-heavy); margin: 0 0 12px; }
.stats-group h3 small { font-weight: var(--weight-medium); color: var(--muted); margin-left: 6px; }

.stats-table-scroll { overflow-x: auto; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.stats-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stats-table th, .stats-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.stats-table tbody tr:last-child td { border-bottom: 0; }
.stats-table th { font-size: 12px; color: var(--muted); font-weight: var(--weight-semibold); }
.stats-table th button { all: unset; cursor: pointer; }
.stats-table th button:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }
.stats-table th[aria-sort="descending"] button::after { content: " ↓"; }
.stats-table th[aria-sort="ascending"] button::after { content: " ↑"; }
.stats-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.stats-pack { white-space: normal !important; min-width: 260px; }
.stats-pack a { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: var(--weight-semibold); }
.stats-pack a:hover span { text-decoration: underline; }
.stats-pack img, .stats-thumb-empty { width: 64px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--surface-3); flex-shrink: 0; }
.stats-pack small { display: block; font-weight: var(--weight-regular); color: var(--muted); font-size: 12px; }
.stats-pack small:empty { display: none; }

/* Choix de la source d'un réseau (Upload-Post, Agorapulse) : stats_networks.php. */
.stats-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -8px 0 24px; }
.stats-sources > span:first-child { font-size: 12px; font-weight: var(--weight-semibold); color: var(--muted); margin-right: 6px; }

/* Onglets alimentés par Upload-Post (dashboard/lib/stats_uploadpost.php) : mêmes
   blocs que ceux d'Agorapulse, plus le lien vers le pack d'un post publié
   depuis Déclic et l'erreur de lecture d'un post. */
.stats-up-pack { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: var(--weight-semibold); color: var(--brand-ink); }
.stats-up-error { display: block; font-size: 12px; color: var(--muted); }

/* Onglets alimentés par Agorapulse (dashboard/lib/stats_agorapulse.php) */
.stats-ap-profile { margin-bottom: 40px; }
.stats-ap-title { display: flex; align-items: center; gap: 10px; }
.stats-ap-title small { font-size: 13px; font-weight: var(--weight-medium); color: var(--muted); margin-left: 4px; }
.stats-ap-title .network-logo { width: 26px; height: 26px; flex-shrink: 0; }
.stats-ap-detail { margin-top: 12px; }
.stats-ap-chart { margin-top: 16px; }
.stats-ap-chart h3, .stats-ap-subtitle { font-size: 15px; font-weight: var(--weight-heavy); margin: 0 0 12px; }
.stats-ap-subtitle { margin-top: 20px; }
.stats-ap-post { min-width: 320px; max-width: 520px; }
.stats-ap-post > span, .stats-ap-post a > span { font-weight: var(--weight-medium); }

/* ---- Graphiques ---- */
.chart { margin: 0; }
.chart-frame { position: relative; padding: 8px 8px 0 56px; border-radius: var(--radius-sm); }
.chart-frame:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.chart-plot { position: relative; height: 200px; }
.chart-gridline { position: absolute; left: 0; right: 0; height: 1px; background: var(--border-soft); }
.chart-ytick { position: absolute; right: calc(100% + 10px); transform: translateY(50%); font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart-stroke { fill: none; stroke: var(--brand); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-area { fill: var(--brand); fill-opacity: 0.1; stroke: none; }
.chart-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--card-bg); pointer-events: none; }
.chart-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--muted-soft); pointer-events: none; }
.chart-tip { position: absolute; top: -4px; transform: translate(12px, -100%); background: var(--inverse); color: var(--on-inverse); border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.35; white-space: nowrap; pointer-events: none; z-index: 2; box-shadow: var(--shadow-sm); }
.chart-tip.is-left { transform: translate(calc(-100% - 12px), -100%); }
.chart-tip strong { display: block; font-size: 14px; }
.chart-tip span { color: color-mix(in srgb, var(--on-inverse) 75%, transparent); }
.chart-xaxis { position: relative; height: 26px; }
.chart-xtick { position: absolute; top: 8px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.chart-xtick.is-start { transform: none; }
.chart-xtick.is-end { transform: translateX(-100%); }
.chart-data { margin-top: 10px; font-size: 13px; }
.chart-data summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.chart-data-scroll { max-height: 260px; overflow-y: auto; margin-top: 8px; }
.chart-data table { border-collapse: collapse; width: 100%; max-width: 420px; }
.chart-data th, .chart-data td { padding: 4px 10px; border-bottom: 1px solid var(--border-soft); text-align: left; font-weight: var(--weight-regular); }
.chart-data td { text-align: right; font-variant-numeric: tabular-nums; }

.chart-bar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chart-bar-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.chart-bar-label { color: var(--ink); font-weight: var(--weight-semibold); min-width: 0; }
.chart-bar-label small { display: block; color: var(--muted); font-weight: var(--weight-regular); font-size: 12px; }
.chart-bar-track { position: relative; height: 16px; }
.chart-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand); border-radius: 0 4px 4px 0; transition: opacity var(--transition-fast); }
.chart-bar-row:hover .chart-bar { opacity: 0.85; }
.chart-bar-value { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Fiche du pack */
.pack-stats .stats-tiles { margin-bottom: 18px; }
.pack-stats h3:not(.network-sub-title), .pack-stats h4 { font-size: 14px; font-weight: var(--weight-heavy); margin: 18px 0 10px; }
.pack-stats .stats-link { font-size: 13px; }

@media (max-width: 720px) {
  .stats-card { padding: 16px; }
  .stats-tiles, .stats-tiles.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stats-tile, .stats-tiles.is-compact .stats-tile { padding: 12px; }
  .stats-tile-value, .stats-tiles.is-compact .stats-tile-value { font-size: 19px; }
  .chart-frame { padding-left: 46px; }
  .chart-plot { height: 170px; }
  .chart-bar-row { grid-template-columns: minmax(90px, 130px) 1fr auto; gap: 8px; }
}
@media (max-width: 480px) {
  .chart-xtick:not(.is-start):not(.is-end):not(.is-mid) { display: none; }
  .chart-bar-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .chart-bar-label { grid-column: 1 / -1; }
  .stats-tile-value, .stats-tiles.is-compact .stats-tile-value { font-size: 17px; }
}

/* ---- 16-notion-et-reglages.css ---- */
/* Calendrier Notion, régénération par l'IA, préférences et profil du compte, versions par réseau, publication sur les réseaux, bouton « Générer », bulles d'aide « ? », rôle des connexions de l'onglet Réseaux.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ---- Calendrier Notion (dashboard/notion.php) ---- */

main.notion-main { max-width: var(--content-width-wide); }
.notion-sync-line { margin: -12px 0 18px; font-size: 13px; color: var(--muted); }
.notion-status-line { margin: 0 0 12px; font-size: 13px; color: var(--ink-soft); min-height: 1em; }
.notion-status-line:empty { display: none; }
.notion-status-line.is-error { color: var(--danger); font-weight: var(--weight-semibold); }
.notion-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notion-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
}
.notion-item.is-past { opacity: 0.85; }
.notion-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--brand-tint); color: var(--brand-dark); border-radius: var(--radius-md); padding: 8px 4px; line-height: 1.1; }
.notion-item.is-past .notion-date { background: var(--surface-2); color: var(--muted); }
.notion-date strong { font-size: 22px; font-weight: var(--weight-heavy); }
.notion-date span { font-size: 11px; font-weight: var(--weight-semibold); text-align: center; }
.notion-body { min-width: 0; }
.notion-body h2 { margin: 0 0 8px; font-size: 16px; font-weight: var(--weight-heavy); line-height: 1.3; overflow-wrap: anywhere; }
.notion-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.notion-tag-pillar { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.notion-tag-common { background: var(--surface-3); color: var(--muted); }
.notion-state { font-size: 12px; color: var(--muted); }
.notion-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.notion-actions .icon-btn-svg { width: 14px; height: 14px; }

@media (max-width: 720px) {
  .notion-item { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .notion-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .notion-date strong { font-size: 18px; }
}
.notion-reminder { display: flex; align-items: center; gap: 10px; margin: -12px 0 20px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-dark); font-size: 14px; text-decoration: none; }
.notion-reminder:hover { background: var(--brand-tint-hover); }
.notion-reminder span { flex: 1; min-width: 0; }
.notion-reminder .icon-btn-svg { width: 16px; height: 16px; flex-shrink: 0; }
.pack-notion-links { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.pack-notion-links a { overflow-wrap: anywhere; }
.pack-notion-hint { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
/* Verticale (colonne étroite de 84 px) : bouton seul, sans texte d'aide. */
.media-card-vertical .thumb-import { padding: 6px; gap: 6px; }
.media-card-vertical .thumb-import .thumb-edit-empty,
.media-card-vertical .thumb-import-hint { display: none; }
.media-card-vertical .thumb-import-btn { flex-direction: column; gap: 4px; padding: 8px 6px; font-size: 11px; border-radius: 12px; }
.pack-notion-error { color: var(--danger); font-weight: var(--weight-semibold); }
.pack-notion-conflict { margin-top: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--status-pending-bg); color: var(--notice-fg); font-size: 13px; display: grid; gap: 6px; }
.pack-notion-conflict dl { margin: 0; display: grid; gap: 4px; }
.pack-notion-conflict dl div { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 8px; }
.pack-notion-conflict dt { font-weight: var(--weight-bold); }
.pack-notion-conflict dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.pack-notion-conflict-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pack-notion-conflict-actions .btn-secondary { padding: 7px 12px; font-size: 12px; }

/* ---- Régénération par l'IA (fiche du pack, assets/js/regenerate.js) ---- */
.regen-panel { border: 2px solid var(--brand-tint); }
.regen-panel .pack-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.regen-panel .pack-section-head h2 { display: flex; align-items: center; gap: 8px; }
.regen-panel .pack-section-head .icon-btn-svg { width: 18px; height: 18px; color: var(--brand-ink); }
.regen-hint { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.regen-fields { border: 0; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 16px; }
.regen-fields label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--weight-semibold); cursor: pointer; }
.regen-fields input, .regen-choice input { accent-color: var(--brand); width: 16px; height: 16px; }
.regen-label { display: block; font-size: 12px; font-weight: var(--weight-bold); color: var(--muted); margin-bottom: 6px; }
.regen-label span { font-weight: var(--weight-semibold); }
#regenInstruction { width: 100%; box-sizing: border-box; border: 0; border-radius: var(--radius-md); background: var(--surface-2); padding: 12px 14px; font: inherit; font-size: 14px; resize: vertical; }
#regenInstruction:focus { outline: none; box-shadow: var(--focus-ring); }
.regen-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.regen-actions-end { justify-content: flex-end; }
.regen-model { flex: 0 1 340px; min-width: 0; }
.regen-status { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.regen-status:empty { display: none; }
.regen-status.is-error { color: var(--danger); font-weight: var(--weight-semibold); }
.regen-item { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.regen-item h3 { margin: 0 0 8px; font-size: 14px; font-weight: var(--weight-heavy); }
.regen-compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.regen-col { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; font-size: 13px; color: var(--ink-soft); min-width: 0; }
.regen-col.is-new { border-color: var(--brand); background: var(--brand-tint); color: var(--ink); }
.regen-col-label { display: block; font-size: 11px; font-weight: var(--weight-heavy); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 4px; }
.regen-col.is-new .regen-col-label { color: var(--brand-dark); }
.regen-col ul { margin: 0; padding-left: 18px; }
.regen-col p { margin: 0; overflow-wrap: anywhere; }
.regen-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.regen-choice { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 13px; }
.regen-choice label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ef-regen { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--brand-dark); font: inherit; font-size: 12px; font-weight: var(--weight-bold); padding: 5px 8px; border-radius: var(--radius-pill); cursor: pointer; }
.ef-regen:hover { background: var(--brand-tint); }
.ef-regen .icon-btn-svg { width: 13px; height: 13px; }
@media (max-width: 720px) {
  .regen-compare { grid-template-columns: minmax(0, 1fr); }
  .ef-regen span { display: none; }
}
/* Mon compte : préférences d'affichage (dashboard/lib/user_prefs.php). */
.account-security .step-card h2.account-section-title, .account-prefs h2 { margin: 0 0 12px; }
.account-prefs-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.account-prefs-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.account-prefs-form legend { font-size: 13px; font-weight: var(--weight-bold); color: var(--muted); margin-bottom: 8px; padding: 0; }
.account-prefs-form label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--surface-2); font-size: 14px; font-weight: var(--weight-semibold); cursor: pointer; }
.account-prefs-form label:has(input:checked) { background: var(--brand-tint); color: var(--brand-dark); box-shadow: inset 0 0 0 2px var(--brand); }
.account-prefs-form input { accent-color: var(--brand); }
.account-prefs-form .icon-btn-svg { width: 16px; height: 16px; }
.account-prefs .step-hint { margin-top: 10px; }
/* Apparence : trois vignettes d'aperçu (couleurs fixes : elles montrent chaque mode). */
.account-prefs-form fieldset.theme-choices { flex-basis: 100%; gap: 12px; }
.account-prefs-form label.theme-choice { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 8px 10px; border-radius: var(--radius-md); width: 150px; }
.theme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.theme-choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.theme-choice-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.theme-preview { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 8px 1fr; gap: 6px; height: 72px; padding: 8px; border-radius: 10px; overflow: hidden; background: #f9f7f4; box-shadow: inset 0 0 0 1px rgba(31, 36, 38, 0.08); }
.theme-preview i { display: block; border-radius: 4px; background: #fff; box-shadow: 0 1px 2px rgba(31, 36, 38, 0.1); }
.theme-preview .tp-bar { grid-column: 1 / -1; background: #e9e5dd; box-shadow: none; }
.theme-preview .tp-pill { position: absolute; left: 14px; bottom: 14px; width: 26px; height: 8px; border-radius: 99px; background: var(--brand); box-shadow: none; }
.theme-preview-dark { background: #111516; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.theme-preview-dark i { background: #1f2528; box-shadow: none; }
.theme-preview-dark .tp-bar { background: #2b3337; }
/* Comme l'appareil : aperçu clair, et aperçu sombre par-dessus sur la moitié droite. */
.theme-preview-auto { padding: 0; display: block; }
.theme-preview-auto > .theme-preview { position: absolute; inset: 0; height: auto; border-radius: 0; }
.theme-preview-auto > .theme-preview-dark { clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%); }

/* ---- Versions par réseau d'un post RS (fiche du pack, assets/js/pack.js) ---- */
.pack-networks-hint { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
/* Section « Publication » de la fiche : onglets des réseaux et bloc de publication (social-publish.js). */
.network-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; border-bottom: 1px solid var(--border-soft); padding-bottom: 10px; }
.network-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--card-bg); font: inherit; font-size: 14px; font-weight: var(--weight-semibold); color: var(--ink-soft); cursor: pointer; }
.network-tab .network-logo { width: 20px; height: 20px; }
.network-tab[aria-selected="true"] { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.network-tab.is-unplanned { opacity: .6; }
.network-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.network-panel-note { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.pack-networks .pack-section-head { flex-wrap: wrap; }
.pack-networks-generate { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Onglet d'un réseau : textes en pleine largeur ; avec « Aperçu », aperçu du
   post à droite (assets/js/pack-preview.js). */
.network-panel-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.network-preview { display: none; min-width: 0; }
.pack-networks.show-preview .network-panel-body { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); }
.pack-networks.show-preview .network-preview { display: block; }
.pack-networks .pack-section-head > h2 { margin: 0 auto 0 0; }
.pack-preview-toggle[aria-pressed="true"] { background: var(--inverse); color: var(--on-inverse); }
.network-preview-label { margin: 0 0 6px; font-size: 11px; font-weight: var(--weight-heavy); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.network-preview-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.network-preview-card { max-width: 360px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); overflow: hidden; font-size: 13px; line-height: 1.45; color: var(--ink); }
.network-preview-card.np-instagram .np-media, .network-preview-card.np-tiktok .np-media { max-height: 420px; }
.np-media { position: relative; background: var(--surface-3); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.np-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-ratio-16-9 { aspect-ratio: 16 / 9; }
.np-ratio-9-16 { aspect-ratio: 9 / 16; width: min(100%, 236px); margin: 0 auto; }
.np-ratio-4-5 { aspect-ratio: 4 / 5; }
.np-ratio-1-1 { aspect-ratio: 1 / 1; }
.np-media-empty { font-size: 12px; color: var(--muted); padding: 12px; text-align: center; }
.np-account { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.np-avatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--weight-heavy); }
.np-names { display: flex; flex-direction: column; min-width: 0; }
.np-names strong { font-size: 13px; }
.np-names span { font-size: 11px; color: var(--muted); }
.np-text { margin: 0; padding: 0 12px 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.np-instagram .np-text { padding-top: 10px; }
.np-more { color: var(--muted); }
.np-tags { color: var(--brand-ink); }
.np-empty { color: var(--muted); font-style: italic; }
.np-yt-meta { display: flex; gap: 10px; padding: 10px 12px; }
.np-yt-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.35; }
.np-tiktok { background: #000; border-color: transparent; }
.np-tiktok .np-media { width: 100%; max-width: 236px; }
.np-tt-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; font-size: 12px; }
.np-tt-overlay .np-text { padding: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.np-tt-overlay .np-more, .np-tt-overlay .np-empty { color: rgba(255, 255, 255, .75); }
.np-tt-overlay .np-tags { color: #fff; font-weight: var(--weight-bold); }
/* Aperçu sous les textes quand l'onglet est étroit (largeur du panneau, pas de l'écran). */
.pack-networks { container-type: inline-size; }
@container (max-width: 680px) {
  .pack-networks.show-preview .network-panel-body { grid-template-columns: minmax(0, 1fr); }
}
/* Onglet YouTube : contenu éditorial du pack, puis mise à jour de la vidéo et statistiques. */
.network-youtube { display: flex; flex-direction: column; gap: 14px; }
.network-youtube .ef { margin-top: 0; }
.network-youtube + .network-panel-note { margin-top: 10px; }
.network-sub { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); min-width: 0; }
.network-sub-title { margin: 0 0 10px; font-size: 16px; }
.social-publish { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.social-publish-title { margin: 0 0 12px; font-size: 16px; }
.social-media { margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border-soft); }
.social-media-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; }
.social-media-state .icon-btn-svg, .social-media-state svg { width: 18px; height: 18px; flex: none; }
.social-media-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.social-media-pick { cursor: pointer; }
.social-media-progress { margin-top: 10px; }
.social-targets { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.social-target { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); font-size: 14px; }
.social-target label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.social-target input { width: 17px; height: 17px; accent-color: var(--brand); margin: 0; }
.social-target.is-unavailable { background: var(--surface-sunken); }
.social-target.is-unavailable label { cursor: default; opacity: .7; }
.social-account { color: var(--muted); font-size: 13px; }
.social-reason { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--status-pending-bg); color: var(--status-pending-fg); }
.social-status { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
.social-state { font-weight: 700; }
.social-state.is-published { color: var(--status-published-fg); }
.social-state.is-scheduled,
.social-state.is-deferred { color: var(--status-scheduled-fg); }
.social-state.is-failed { color: var(--danger); }
.social-state.is-cancelled { color: var(--muted); }
.social-error { flex-basis: 100%; color: var(--danger); font-size: 12px; }
.social-claims { margin: 0 0 12px; }
.social-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.social-message { min-height: 1.2em; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.social-message.is-error { color: var(--danger); }
.pack-networks-grid { display: grid; gap: 14px; }
.network-version { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); padding: 14px 16px; min-width: 0; }
.network-version-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.network-version-head h3 { margin: 0; font-size: 15px; }
.network-version-head .network-logo { width: 24px; height: 24px; flex: none; }
.network-version-count { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.network-version-count.is-over { color: var(--danger); font-weight: 600; }
.network-version .ef { margin-top: 8px; }
.network-version .ef-read { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- Photos de profil (dashboard/lib/user_profile.php) ---- */
header.topbar .avatar.has-photo,
.user-avatar.has-photo { background: var(--surface-2); overflow: hidden; }
header.topbar .avatar img,
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.user-avatar {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: var(--weight-heavy); text-transform: uppercase; color: var(--on-brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
}
.user-avatar-lg { width: 88px; height: 88px; font-size: 32px; }

/* ---- Mon compte : profil et mot de passe ---- */
.account-profile-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.account-profile-photo { display: grid; gap: 8px; justify-items: start; min-width: 0; flex: 1; }
.account-inline-form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.account-file { position: relative; cursor: pointer; }
.account-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.account-file:focus-within { box-shadow: var(--focus-ring); }
.account-form { display: grid; gap: 12px; max-width: 420px; }
.account-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.account-form input[type="text"],
.account-form input[type="password"] {
  border: 1px solid var(--border); background: var(--card-bg); border-radius: var(--radius-sm);
  padding: 10px 14px; font: inherit; font-size: 14px; color: var(--ink); width: 100%;
}
.account-form input:focus { outline: none; box-shadow: var(--focus-ring); }
.account-form button { justify-self: start; }

/* ---- « Générer » : bouton mis en avant (couleur de l'espace, étoile de l'IA)
   et choix packs / visuels / personas en tête des trois pages ---- */
header.topbar .topbar-action-generate {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: var(--weight-bold);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 35%, transparent);
}
header.topbar .topbar-action-generate .icon-btn-svg { width: 15px; height: 15px; }
header.topbar .topbar-action-generate:hover { background: var(--brand-hover); color: var(--on-brand); }
header.topbar .topbar-action-generate[aria-current="page"] { background: var(--brand-dark); color: #fff; }

.generate-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 22px; }
.generate-tab {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0;
  border-radius: var(--radius-md); background: var(--card-bg); box-shadow: var(--shadow-card);
  color: var(--ink); text-decoration: none; border: 2px solid transparent;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.generate-tab:hover { border-color: var(--brand-tint); }
.generate-tab[aria-current="page"] { border-color: var(--brand); background: var(--brand-tint); }
.generate-tab-icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-tint); color: var(--brand-dark);
}
.generate-tab[aria-current="page"] .generate-tab-icon { background: var(--brand); color: var(--on-brand); }
.generate-tab-icon .icon-btn-svg { width: 18px; height: 18px; }
.generate-tab-text { display: grid; gap: 2px; min-width: 0; }
.generate-tab-text strong { font-size: 14px; }
.generate-tab-text small { font-size: 12px; color: var(--muted); line-height: 1.3; }
@media (max-width: 640px) {
  .generate-tabs { gap: 6px; }
  .generate-tab { flex-direction: column; gap: 4px; padding: 8px 4px; text-align: center; }
  .generate-tab-icon { width: 30px; height: 30px; }
  .generate-tab-text strong { font-size: 12px; }
  .generate-tab-text small { display: none; }
}

/* Aide contextuelle « ? » (help_tip() de dashboard/lib/packs/layout.php, assets/js/help-tip.js) :
   l'interface garde une indication courte, le détail s'ouvre au clic. */
.help-tip {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1;
}
.help-tip-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--border-dash);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--muted);
  font: var(--weight-bold) 11px/1 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.help-tip-btn:hover,
.help-tip-btn[aria-expanded="true"] {
  color: var(--brand-ink);
  border-color: var(--brand-ink);
  background: var(--brand-tint-soft);
}
.help-tip-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.help-tip-panel {
  position: fixed;
  z-index: 300;
  display: block;
  width: max-content;
  max-width: min(360px, calc(100vw - 24px));
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg), var(--shadow-xs);
  color: var(--ink-soft);
  font: var(--weight-regular) 13px/1.55 var(--font-sans);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  white-space: normal;
}
.help-tip-panel[hidden] { display: none; }
/* Le « ? » peut se trouver dans un <p>, un <h2> ou un <label> : contenu
   « phrasé » seulement (pas de <p> ni de <ul>) ; paragraphes et puces en
   <span class="help-tip-p"> et <span class="help-tip-li">. */
.help-tip-p,
.help-tip-li { display: block; }
.help-tip-p + .help-tip-p,
.help-tip-li + .help-tip-p,
.help-tip-p + .help-tip-li { margin-top: 6px; }
.help-tip-li { position: relative; padding-left: 14px; }
.help-tip-li::before { content: "•"; position: absolute; left: 2px; color: var(--muted); }
.help-tip-panel strong { color: var(--ink); }
.help-tip-panel a { color: var(--brand-ink); }
.help-tip-panel code { font-family: var(--font-mono); font-size: 12px; }
/* Dans une zone de dépôt, le « ? » passe au-dessus du champ fichier invisible. */
.dropzone .help-tip { position: relative; z-index: 1; }
h1 > .help-tip { margin-left: 10px; }
/* Libellé de champ en bloc suivi de son « ? » : <div class="field-head"><label>…</label>help_tip()</div>. */
.field-head { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.field-head > label { margin-bottom: 0; }

/* ---- Rôle de chaque connexion, onglet Réseaux de l'administration (network_purpose(), network_crosslink()) ---- */
.network-lead { margin: 6px 0 12px; font-size: 14px; }
.network-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin: 0 0 16px; }
.network-role { padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-sunken); font-size: 13px; }
.network-role-title { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.network-role ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.network-role li { position: relative; padding-left: 20px; line-height: 1.45; overflow-wrap: anywhere; }
.network-role li::before { position: absolute; left: 2px; font-weight: 800; }
.network-role.is-yes li::before { content: "✓"; color: var(--status-published-fg); }
.network-role.is-no li::before { content: "✕"; color: var(--danger-ink); }
.network-crosslink { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 13px; color: var(--muted); }
.network-crosslink a { color: var(--brand-ink); font-weight: 600; }
/* Cibles des rappels croisés et des liens « connecter » : le titre reste visible sous l'en-tête collé. */
#uploadpost,
#network-youtube-title { scroll-margin-top: 140px; }

/* ---- 17-telephone.css ---- */
/* Téléphone (≤ 720 px) : une seule colonne, menu de navigation, tableaux en cartes.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ==========================================================================
   Téléphone (≤ 720 px) : une seule colonne, défilement vertical seulement.
   Rien ne défile en largeur : navigation en menu déroulant, tableaux en
   cartes (assets/js/table-cards.js), code et titres longs à la ligne.
   ========================================================================== */

/* Menu de navigation (render_topbar(), assets/js/topbar-menu.js) : masqué sur ordinateur. */
header.topbar .topbar-menu { display: none; }
header.topbar .topbar-menu > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h-md);
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  box-shadow: var(--shadow-nav);
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--ink);
  cursor: pointer;
}
header.topbar .topbar-menu > summary::-webkit-details-marker { display: none; }
header.topbar .topbar-menu > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
header.topbar .topbar-menu > summary .icon-btn-svg { width: 18px; height: 18px; flex: none; }
header.topbar .topbar-menu > summary .icon-btn-svg:last-child { margin-left: auto; width: 16px; height: 16px; color: var(--muted); transition: transform var(--transition-fast); }
header.topbar .topbar-menu[open] > summary .icon-btn-svg:last-child { transform: rotate(180deg); }
header.topbar .topbar-menu-current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Avec la page en cours affichée, « Menu » reste pour les lecteurs d'écran. */
header.topbar .topbar-menu > summary:has(.topbar-menu-current) .topbar-menu-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
header.topbar .topbar-menu-panel {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(100% - 6px);
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg), var(--shadow-xs);
}
header.topbar .topbar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
header.topbar .topbar-menu-item:hover { background: var(--surface-2); color: var(--ink); }
header.topbar .topbar-menu-item[aria-current="page"] { background: var(--brand-tint); color: var(--ink); font-weight: var(--weight-bold); }
header.topbar .topbar-menu-item .icon-btn-svg { width: 16px; height: 16px; flex: none; }
header.topbar .topbar-menu-item[aria-current="page"] .icon-btn-svg:last-child { margin-left: auto; color: var(--brand-ink); }
header.topbar .topbar-menu-generate { color: var(--brand-ink); }
header.topbar .topbar-menu-sep { height: 1px; margin: 4px 8px; background: var(--border-soft); }
header.topbar .topbar-menu-form { margin: 0; }

@media (max-width: 720px) {
  /* Ligne 1 : logo, espace, version ; ligne 2 : menu, cloche, compte. */
  header.topbar .topbar-nav { display: none; }
  header.topbar .topbar-menu { display: block; order: 2; flex: 1 1 140px; min-width: 0; }
  header.topbar .topbar-right { order: 3; }
  /* Lien vers le site : dans le menu déroulant au téléphone. */
  header.topbar .topbar-site { display: none; }

  /* Onglets des statistiques : grille de 2 colonnes au lieu d'une bande. */
  .stats-networks.segmented { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: var(--radius-lg); overflow: visible; }
  .stats-networks .stats-network { justify-content: center; white-space: normal; text-align: center; }
  .stats-networks .stats-network .icon-btn-svg { flex: none; }

  /* Code et JSON : retour à la ligne. */
  .pack-raw-pre,
  .admin-json pre { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* Titres de carte longs (Administration › Réseaux) : à la ligne, pastille dessous. */
  .network-title { flex-wrap: wrap; }

  /* Tableaux en cartes : une carte par ligne, « libellé  valeur » dessous. */
  .admin-table-wrap,
  .stats-table-scroll,
  .roadmap-table-wrap,
  .yt-diff-wrap { overflow-x: visible; }
  table.rt-cards { display: block; width: 100%; min-width: 0; table-layout: auto; }
  table.rt-cards tbody,
  table.rt-cards tr,
  table.rt-cards td,
  table.rt-cards tbody th { display: block; width: auto; }
  table.rt-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.rt-cards tbody tr { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
  table.rt-cards tbody tr:last-child { border-bottom: 0; }
  table.rt-cards td,
  table.rt-cards tbody th {
    position: relative;
    min-height: 22px;
    padding: 3px 0 3px 38%;
    border: 0;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: var(--weight-regular);
  }
  table.rt-cards td.num { text-align: left; }
  table.rt-cards tr:not(.rt-full) > .rt-empty { display: none; }
  table.rt-cards td::before,
  table.rt-cards tbody th::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 5px;
    width: calc(38% - 10px);
    font-size: 11px;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: left;
    color: var(--muted);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  /* Colonne sans titre (actions) ou ligne d'une seule cellule : pleine largeur. */
  table.rt-cards td[data-label=""],
  table.rt-cards tr.rt-full > * { padding-left: 0; }
  table.rt-cards td[data-label=""]::before,
  table.rt-cards tr.rt-full > *::before { content: none; }
  /* Première cellule : titre de la carte. */
  table.rt-cards tbody tr:not(.rt-full) > :first-child { padding: 0 0 8px; font-size: 14px; font-weight: var(--weight-bold); color: var(--ink); }
  table.rt-cards tbody tr:not(.rt-full) > :first-child::before { content: none; }
  /* Tableaux triables (Statistiques) : l'en-tête devient une rangée de boutons « Trier par ». */
  table.rt-cards[data-sortable] thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: block; padding: 14px 16px 6px; white-space: normal; }
  table.rt-cards[data-sortable] thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  table.rt-cards[data-sortable] thead tr::before { content: "Trier par"; font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-right: 4px; }
  table.rt-cards[data-sortable] thead th { display: block; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12px; white-space: nowrap; }
  table.rt-cards[data-sortable] thead th[aria-sort] { border-color: var(--ink); color: var(--ink); }
  /* Aperçu de l'envoi YouTube : avant puis après, l'un sous l'autre. */
  table.yt-diff.rt-cards tbody th { width: auto; }
  table.yt-diff.rt-cards td { padding-left: 0; padding-top: 22px; }
  table.yt-diff.rt-cards td::before { top: 4px; width: 100%; }
}

/* ---- 18-formats-courts.css ---- */
/* Formats courts rattachés à un épisode, images extraites de la vidéo (page Visuels).
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ---- Formats courts rattachés à un épisode complet (dashboard/lib/pack_family.php) ---- */
/* Carte du tableau de bord : « 16:9 CAD018 » sur un format court, « 9:16 3 formats courts » sur l'épisode. */
.tag-family { background: var(--surface-sunken); color: var(--ink-soft); border: 1px solid var(--border-soft); }
.tag-family:hover { color: var(--brand-ink); border-color: var(--brand-tint-hover); }
.tag-family .icon-btn-svg, .tag-family svg { width: 11px; height: 11px; }
/* Fiche : épisode d'origine ou formats courts de l'épisode. */
.pack-family-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pack-family-card {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 8px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--ink); text-decoration: none;
}
.pack-family-card:hover { border-color: var(--brand-tint-hover); }
.pack-family-card img,
.pack-family-card-empty { flex: none; width: 54px; border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.pack-family-card img { aspect-ratio: 9 / 16; }
.pack-family-card-empty { aspect-ratio: 9 / 16; display: flex; align-items: center; justify-content: center; color: var(--muted); }
#episode-complet .pack-family-card img,
#episode-complet .pack-family-card-empty { width: 96px; aspect-ratio: 16 / 9; }
.pack-family-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pack-family-card-id { font-size: 11px; font-weight: var(--weight-bold); color: var(--muted); }
.pack-family-card-title { font-size: 13px; font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.pack-family-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pack-family-empty { margin: 6px 0 10px; font-size: 13px; color: var(--muted); }
.pack-family-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pack-family-edit select { min-width: 0; max-width: 100%; flex: 1 1 220px; }
/* Page Générer : choix de l'épisode d'origine sous la catégorie. */
.parent-choice { margin-top: 16px; }
.parent-choice select { width: 100%; max-width: 100%; }

/* ---- Page Visuels : images extraites de la vidéo (dashboard/lib/pack_frames.php) ---- */
.frame-gallery { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.frame-gallery-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.frame-gallery-title { margin: 0; font-size: 13px; font-weight: var(--weight-semibold); color: var(--ink); }
.frame-gallery-title[hidden] { display: none; }
#parentFrameTitle { margin-top: 14px; }
.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin-top: 8px; }
.frame-grid:empty { display: none; }
.frame-thumb {
  position: relative; display: block; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--surface-2);
  aspect-ratio: 16 / 9;
}
.frame-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-thumb:hover { border-color: var(--brand-tint-hover); }
.frame-thumb[aria-pressed="true"] { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }
.frame-thumb[aria-pressed="true"]::after {
  content: "✓"; position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--weight-bold);
  background: var(--brand); color: var(--on-brand);
}
.frame-thumb:disabled { opacity: 0.45; cursor: not-allowed; }
.frame-thumb-time {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 5px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: var(--weight-semibold); background: rgba(0, 0, 0, 0.6); color: #fff;
}
.frame-thumb-time:empty { display: none; }
@media (max-width: 720px) {
  .frame-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.frame-grid-portrait { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.frame-grid-portrait .frame-thumb { aspect-ratio: 9 / 16; }
@media (max-width: 720px) {
  .frame-grid-portrait { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- 19-grille.css ---- */
/* Tableau de bord : grille simple, cartes, arbre des formats courts, panneau de modification rapide.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

/* ==========================================================================
   Tableau de bord : grille simple (dashboard/index.php, assets/js/index.js)
   Épisode complet (ou pack non catégorisé) en carte large 16:9 sur deux
   pistes, format court sans épisode et publication en carte étroite 9:16 ;
   les formats courts rattachés se déplient en arbre sous la ligne de leur
   épisode. Une carte = miniature, titre, pastille « statut · date de sortie ».
   ========================================================================== */

:root { --ease-spring: cubic-bezier(.34, 1.4, .64, 1); }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1); }
}

/* .grid : la fiche du pack a aussi sa .pack-grid (deux colonnes), à ne pas toucher. */
.grid.pack-grid {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  grid-auto-flow: row dense;
  gap: 28px 18px;
}
.pack-grid-store { display: none; }
.pack-grid .card.pack-card-wide { grid-column: span 2; }

/* Les cartes n'ont plus de cadre : la miniature porte l'ombre. */
.pack-grid .card {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  transition: opacity var(--transition-base), filter var(--transition-base), transform 0.4s var(--ease-spring), box-shadow var(--transition-base);
}
.pack-grid .card:hover { transform: none; box-shadow: none; }
.pack-grid .card[hidden] { display: none; }
.pack-grid .card.is-dimmed { opacity: 0.4; filter: saturate(0.4); }
.pack-grid .card.is-dimmed:hover,
.pack-grid .card.is-dimmed:focus-within { opacity: 0.85; }

.pack-card-media {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.45s var(--ease-spring), box-shadow var(--transition-base);
}
.pack-card-media-link { position: absolute; inset: 0; z-index: 1; }
.pack-card-wide:hover .pack-card-media { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.pack-card-wide.is-tree-open .pack-card-media { transform: translateY(-2px); box-shadow: 0 0 0 3px var(--brand), var(--shadow-card-hover); }

.pc-thumb {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-3);
}
.pc-thumb-v,
.pack-card-narrow .pc-thumb,
.pack-branch .pc-thumb { aspect-ratio: 9 / 16; }
.pc-thumb-post { background: var(--category-linkedin-soft); }
.pc-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.pc-thumb.is-contain img { object-fit: contain; }
.pack-grid .card:hover .pc-thumb img { transform: scale(1.04); }
.pc-thumb-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--muted-soft);
  text-align: center;
}
.pc-thumb-empty svg { width: 24px; height: 24px; stroke-width: 1.6; }
.pc-thumb-post .pc-thumb-empty svg { color: var(--category-linkedin); }
.pack-card-narrow .pc-thumb-empty,
.pack-branch .pc-thumb-empty { margin-bottom: 40%; }
.quick-edit-thumb .pc-thumb-empty span { display: none; }

/* Pack créé il y a moins de 24 h : étiquette « Nouveau » et halo à l'ouverture. */
.pack-card-fresh {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--on-brand);
  font-size: 10.5px;
  font-weight: var(--weight-heavy);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: var(--shadow-cta);
}
.pack-card-narrow .pack-card-fresh,
.pack-branch .pack-card-fresh { top: 8px; left: 8px; padding: 3px 7px; font-size: 9.5px; }
.pack-grid .card[data-fresh] .pack-card-media { animation: pack-fresh 2.4s ease-out 0.4s 2; }
@keyframes pack-fresh {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent), var(--shadow-card); }
  70%, 100% { box-shadow: 0 0 0 14px transparent, var(--shadow-card); }
}

/* Formats courts d'un épisode : nombre, un point par statut, flèche. */
.pack-card-kids {
  position: absolute;
  z-index: 3;
  left: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 8px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(15, 18, 20, 0.72);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: var(--weight-heavy);
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--transition-fast), transform 0.3s var(--ease-spring);
}
.pack-card-kids[hidden] { display: none; }
.pack-card-kids:hover { transform: scale(1.05); }
.pack-card-kids:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pack-card-kids svg { width: 13px; height: 13px; }
.pack-card-kids svg:last-child { transition: transform 0.45s var(--ease-spring); }
.is-tree-open .pack-card-kids { background: var(--brand); color: var(--on-brand); }
.is-tree-open .pack-card-kids svg:last-child { transform: rotate(180deg); }
.pack-card-kids-dots { display: inline-flex; gap: 3px; }
.pack-card-kids-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
.pack-card-kids-dots .badge-status-pending { color: #e0a443; }
.pack-card-kids-dots .badge-status-validated { color: #2bb6c8; }
.pack-card-kids-dots .badge-status-scheduled { color: #e2584b; }
.pack-card-kids-dots .badge-status-published { color: #3cb46a; }
.pack-card-kids.has-fresh::after {
  content: "Nouveau";
  margin-left: 2px;
  padding: 3px 6px;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #0a7482;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Commentaires d'équipe à traiter : pastille au coin de la miniature. */
.pack-card-comments {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 7px;
  border-radius: var(--radius-pill);
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
  font-size: 12px;
  font-weight: var(--weight-heavy);
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 4px 12px -4px rgba(31, 36, 38, 0.4);
  transition: transform 0.3s var(--ease-spring);
}
.pack-card-comments:hover { transform: scale(1.08); color: var(--status-pending-fg); }
.pack-card-comments:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pack-card-comments svg { width: 13px; height: 13px; stroke-width: 2.2; }
.pack-card-narrow .pack-card-comments,
.pack-branch .pack-card-comments { top: 8px; right: 8px; padding: 3px 7px 3px 6px; font-size: 11px; }
.pack-card-narrow .pack-card-comments svg,
.pack-branch .pack-card-comments svg { width: 11px; height: 11px; }

/* Carte large : titre et pastille sous la miniature. */
.pack-card-body { display: grid; gap: 9px; padding: 12px 2px 0; min-width: 0; }
.pack-card-kind { font-size: 11px; font-weight: var(--weight-bold); }
.pack-card-kind[hidden] { display: none; }
.pack-grid .card h2.pack-card-title {
  display: block;
  margin: 0;
  overflow: visible;
  font-size: 16px;
  font-weight: var(--weight-heavy);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  cursor: auto;
}
.pack-card-title a { color: inherit; text-decoration: none; }
.pack-card-title a:hover { color: var(--brand-ink); }
.pack-card-title a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.pack-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }

/* Carte étroite (format court, publication) : titre et pastille posés sur l'image. */
.pack-grid .card.pack-card-narrow,
.pack-branch .card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.pack-grid .card.pack-card-narrow:hover,
.pack-branch .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.pack-card-narrow .pack-card-media,
.pack-branch .pack-card-media { border-radius: 0; box-shadow: none; }
.pack-card-narrow .pack-card-media,
.pack-branch .pack-card-media,
.pack-card-narrow:hover .pack-card-media,
.pack-branch .card:hover .pack-card-media { transform: none; }
.pack-card-narrow .pack-card-body,
.pack-branch .pack-card-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  gap: 7px;
  padding: 34px 10px 10px;
  background: linear-gradient(to top, rgba(10, 12, 14, 0.9) 0%, rgba(10, 12, 14, 0.55) 60%, transparent 100%);
  color: #fff;
  pointer-events: none;
}
.pack-card-narrow .pack-card-body a,
.pack-card-narrow .pack-card-body button,
.pack-branch .pack-card-body a,
.pack-branch .pack-card-body button { pointer-events: auto; }
.pack-card-narrow .pack-card-kind { color: rgba(255, 255, 255, 0.75); }
.pack-grid .pack-card-narrow h2.pack-card-title,
.pack-grid .pack-branch h2.pack-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  font-weight: var(--weight-bold);
  line-height: 1.3;
}
.pack-card-narrow .pack-card-title a:hover,
.pack-branch .pack-card-title a:hover { color: #fff; text-decoration: underline; }
.pack-card-narrow .release-chip,
.pack-branch .release-chip { justify-self: start; min-height: 22px; padding: 0 8px 0 7px; gap: 5px; font-size: 11px; }
.pack-card-narrow .release-chip b,
.pack-branch .release-chip b { display: none; }
.pack-card-narrow .release-when::before,
.pack-branch .release-when::before { content: none; }

/* Pastille de sortie : statut et date réunis (couleur = statut). */
.release-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  max-width: 100%;
  padding: 0 11px 0 9px;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s var(--ease-spring), box-shadow var(--transition-fast);
}
.release-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px currentColor; }
.release-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.release-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.release-chip b { font-weight: var(--weight-heavy); }
.release-when { overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.release-when::before { content: "·"; margin-right: 6px; opacity: 0.55; }
.release-alert {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  animation: release-ping 2s ease-out infinite;
}
.release-alert.alert-warn { background: var(--status-pending-fg); }
.release-alert.alert-info { background: var(--brand); }
.release-alert[hidden] { display: none; }
@keyframes release-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 50%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
.release-edit { display: inline-flex; flex: none; margin-left: 1px; opacity: 0.7; transition: opacity var(--transition-fast); }
.release-edit svg { width: 13px; height: 13px; }
.release-chip:hover .release-edit,
.release-chip:focus-visible .release-edit { opacity: 1; }
.release-chip.is-changed { animation: release-pop 0.6s var(--ease-spring); }
@keyframes release-pop { from { transform: scale(0.75); } }

/* Arbre des formats courts : bandeau sous la ligne de l'épisode, relié à lui
   par une flèche et un fil (tracé par index.js). */
.pack-branch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -14px;
  transition: grid-template-rows 0.55s cubic-bezier(.2, .8, .2, 1), margin 0.55s cubic-bezier(.2, .8, .2, 1);
}
.pack-branch.is-shown { grid-template-rows: 1fr; margin-top: -6px; }
.pack-branch-in { min-height: 0; overflow: hidden; }
.pack-branch-box {
  position: relative;
  margin-top: 14px;
  padding: 46px 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.pack-branch-box::before {
  content: "";
  position: absolute;
  top: -9px;
  left: calc(var(--branch-x, 50%) - 9px);
  width: 16px;
  height: 16px;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 4px 0 0 0;
  background: var(--surface-2);
  transform: rotate(45deg);
}
.pack-branch-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pack-branch-svg path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.75;
}
.pack-branch-svg circle { fill: var(--brand); }
.pack-branch.is-opening .pack-branch-svg path { stroke-dashoffset: 1; animation: branch-draw 0.8s 0.15s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes branch-draw { to { stroke-dashoffset: 0; } }
.pack-branch-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
}
.pack-branch-close:hover { color: var(--ink); }
.pack-branch-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pack-branch-kids { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; }
.pack-branch.is-opening .pack-branch-kids > .card { animation: branch-fly 0.75s var(--ease-spring) both; }
.pack-branch.is-opening .pack-branch-kids > .card:nth-child(2) { animation-delay: 70ms; }
.pack-branch.is-opening .pack-branch-kids > .card:nth-child(3) { animation-delay: 140ms; }
.pack-branch.is-opening .pack-branch-kids > .card:nth-child(4) { animation-delay: 210ms; }
.pack-branch.is-opening .pack-branch-kids > .card:nth-child(n+5) { animation-delay: 280ms; }
@keyframes branch-fly { from { opacity: 0; transform: translate(var(--fly-x, 0), -40px) scale(0.6) rotate(-4deg); } }

@media (max-width: 720px) {
  .grid.pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .pack-branch-box { padding: 44px 10px 12px; }
  .pack-branch-kids { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ---- Panneau de modification rapide (fenêtre ; feuille sur téléphone) ---- */

html.has-quick-edit { overflow: hidden; }
.quick-edit { position: fixed; inset: 0; z-index: var(--z-modal); }
.quick-edit[hidden] { display: none; }
.quick-edit-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: qe-fade 0.25s ease-out backwards;
}
.quick-edit-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 16px;
  width: min(480px, calc(100% - 32px));
  max-height: calc(100% - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 20px;
  transform: translate(-50%, -50%);
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: qe-in 0.5s var(--ease-spring) backwards;
}
.quick-edit.is-closing .quick-edit-panel { animation: qe-out 0.2s ease-in forwards; }
.quick-edit.is-closing .quick-edit-backdrop { animation: qe-fade 0.2s ease-in reverse forwards; }
@keyframes qe-fade { from { opacity: 0; } }
@keyframes qe-in { from { opacity: 0; transform: translate(-50%, -46%) scale(0.94); } }
@keyframes qe-out { to { opacity: 0; transform: translate(-50%, -48%) scale(0.96); } }

.quick-edit-grab { display: none; justify-content: center; margin: -4px 0 -8px; padding: 2px 0 6px; cursor: grab; touch-action: none; }
.quick-edit-grab span { width: 42px; height: 5px; border-radius: 3px; background: var(--border-dash); }
.quick-edit-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.quick-edit-thumb { width: 112px; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-xs); }
.quick-edit-thumb.is-vertical { width: 46px; }
.quick-edit-thumb.is-post { width: 72px; }
.quick-edit-heading { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.quick-edit-kicker { font-size: 12px; font-weight: var(--weight-bold); color: var(--muted); }
.quick-edit-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.quick-edit-close:hover { background: var(--surface-2-hover); color: var(--ink); }
.quick-edit-field { display: grid; gap: 7px; margin: 0; }
.quick-edit-field[hidden] { display: none; }
.quick-edit-label { font-size: 11px; font-weight: var(--weight-heavy); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.quick-edit textarea,
.quick-edit input,
.quick-edit select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.quick-edit textarea {
  min-height: 3.2em;
  resize: none;
  field-sizing: content;
  font-size: 15px;
  font-weight: var(--weight-bold);
  line-height: 1.35;
}
.quick-edit textarea:focus-visible,
.quick-edit input:focus-visible,
.quick-edit select:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.quick-edit-status { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.quick-edit-status [data-qe-status="A valider"] { --qe-bg: var(--status-pending-bg); --qe-fg: var(--status-pending-fg); }
.quick-edit-status [data-qe-status="Validé"] { --qe-bg: var(--status-validated-bg); --qe-fg: var(--status-validated-fg); }
.quick-edit-status [data-qe-status="Programmé"] { --qe-bg: var(--status-scheduled-bg); --qe-fg: var(--status-scheduled-fg); }
.quick-edit-status [data-qe-status="Publié"] { --qe-bg: var(--status-published-bg); --qe-fg: var(--status-published-fg); }
.quick-edit-status button {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 10px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: var(--weight-heavy);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform 0.3s var(--ease-spring);
}
.quick-edit-status .release-dot { background: var(--qe-fg); }
.quick-edit-status button[aria-checked="true"] { background: var(--qe-bg); color: var(--qe-fg); border-color: transparent; transform: scale(1.03); }
.quick-edit-status button:not(:disabled):hover { border-color: var(--qe-fg); }
.quick-edit-status button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.quick-edit-status button:disabled { cursor: not-allowed; }
.quick-edit-status button:disabled:not([aria-checked="true"]) { opacity: 0.5; }
.quick-edit-note { margin: 0; font-size: 12px; color: var(--muted); }
.quick-edit-when { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.quick-edit-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.quick-edit-link {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: var(--weight-heavy);
  text-decoration: none;
  transition: background var(--transition-fast), transform 0.3s var(--ease-spring);
}
.quick-edit-link:hover { background: var(--surface-2-hover); color: var(--ink); transform: translateY(-1px); }
.quick-edit-link.is-primary { background: var(--brand); color: var(--on-brand); }
.quick-edit-link.is-primary:hover { background: var(--brand-hover); color: var(--on-brand); }
.quick-edit-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.quick-edit-link svg { width: 16px; height: 16px; }
.quick-edit-admin { display: flex; justify-content: flex-end; gap: 6px; margin-top: -6px; }
.quick-edit-admin button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.quick-edit-admin button:hover { background: var(--surface-2); color: var(--ink); }
.quick-edit-admin button.is-danger:hover { background: var(--danger-bg); color: var(--danger); }
.quick-edit-admin svg { width: 13px; height: 13px; }

@media (max-width: 720px) {
  .quick-edit-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 90%;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    animation-name: qe-sheet-in;
    transition: transform 0.35s var(--ease-spring);
  }
  .quick-edit.is-closing .quick-edit-panel { animation-name: qe-sheet-out; }
  .quick-edit-grab { display: flex; }
  .quick-edit-thumb { width: 96px; }
}
@media (max-width: 400px) {
  .quick-edit-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes qe-sheet-in { from { transform: translateY(100%); } }
@keyframes qe-sheet-out { to { transform: translateY(100%); } }

/* ---- 20-tableau.css ---- */
/* Tableau de bord, vue « Tableau » (dashboard/index.php, assets/js/pack-table.js) :
   une ligne par publication, en-tête collé sous la barre du haut, colonnes
   triables, statut et date modifiables en place, formats courts en arbre sous
   leur épisode ; au téléphone, une carte par ligne.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

.table-view { display: grid; gap: 14px; }
.table-view[hidden] { display: none; }

/* Barre d'outils : recherche, tri (téléphone), regroupement, colonnes. */
.table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.table-toolbar-grow { flex: 1; }
.table-search { flex: 0 1 260px; min-width: 0; }
.table-search input {
  width: 100%;
  height: var(--control-h-sm);
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.table-search input:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.table-group { display: inline-flex; align-items: center; gap: 4px; }
.table-toggle,
.table-cols-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--control-h-sm);
  padding: 0 12px 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.table-cols-btn { padding: 0 12px; gap: 6px; }
.table-cols-btn svg { width: 14px; height: 14px; }
.table-toggle:focus-visible,
.table-cols-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.table-toggle-track { position: relative; width: 30px; height: 18px; border-radius: var(--radius-pill); background: var(--border-dash); transition: background var(--transition-fast); }
.table-toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.35s var(--ease-spring); }
.table-toggle[aria-pressed="true"] .table-toggle-track { background: var(--brand); }
.table-toggle[aria-pressed="true"] .table-toggle-track::after { transform: translateX(12px); }
.table-sort-mobile { display: none; gap: 8px; align-items: center; }
.table-sort-mobile select { flex: 1; min-width: 0; }
.table-sort-dir {
  display: grid;
  place-items: center;
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card-bg);
  color: var(--ink-soft);
  cursor: pointer;
}
.table-sort-dir svg { width: 15px; height: 15px; transform: rotate(180deg); transition: transform 0.35s var(--ease-spring); }
.table-sort-dir[data-dir="desc"] svg { transform: none; }

/* Tableau */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: var(--shadow-card); overflow: clip; }
.pack-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.pack-table thead th {
  position: sticky;
  top: var(--table-sticky-top, 0px);
  z-index: 5;
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-bg) 94%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-align: left;
  white-space: nowrap;
}
.tt-th {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 12px 10px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: var(--weight-heavy);
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}
button.tt-th { cursor: pointer; }
button.tt-th:hover { color: var(--ink); }
button.tt-th:focus-visible { outline: none; box-shadow: inset var(--focus-ring); border-radius: 8px; }
.tt-th-arrow { width: 12px; height: 12px; opacity: 0; transform: rotate(180deg); transition: opacity var(--transition-fast), transform 0.35s var(--ease-spring); }
button.tt-th:hover .tt-th-arrow { opacity: 0.45; }
th[aria-sort] .tt-th { color: var(--brand-ink); }
th[aria-sort] .tt-th-arrow { opacity: 1; }
th[aria-sort="descending"] .tt-th-arrow { transform: none; }
.tt-th-auto { margin-left: 2px; padding: 2px 5px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand-ink); font-size: 9px; letter-spacing: 0.04em; }

.pack-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.pack-table tbody tr { transition: background var(--transition-fast); }
.pack-table tbody tr:hover { background: var(--surface-sunken); }
.pack-table tbody tr.is-selected { background: var(--brand-tint-soft); }
.pack-table tbody tr:last-child td { border-bottom: 0; }
.pack-table tbody tr.is-dim td > * { opacity: 0.45; }
.pack-table tbody tr.is-flash { animation: tt-flash 1.4s ease-out; }
@keyframes tt-flash { 0%, 30% { background: color-mix(in srgb, var(--brand) 18%, transparent); } }
.pack-table .tt-empty td { padding: 40px 16px; text-align: center; color: var(--muted); }

.pack-table .tc-check { width: 44px; padding-left: 14px; }
.pack-table .tc-check input { width: 16px; height: 16px; accent-color: var(--brand); }
.pack-table .tc-thumb { width: 92px; }
.pack-table .tc-title { width: auto; }
.pack-table .tc-type { width: 116px; }
.pack-table .tc-status { width: 140px; white-space: nowrap; }
.pack-table .tc-date { width: 200px; }
.pack-table .tc-family { width: 200px; overflow: hidden; }
.pack-table .tc-com { width: 60px; text-align: center; }
.pack-table .tc-created { width: 100px; }
.pack-table .tc-id { width: 84px; }
.pack-table .tc-open { width: 46px; padding-right: 14px; }
/* Colonnes masquées par le bouton « Colonnes » (classe posée par pack-table.js). */
.pack-table.hide-thumb .tc-thumb,
.pack-table.hide-type .tc-type,
.pack-table.hide-family .tc-family,
.pack-table.hide-com .tc-com,
.pack-table.hide-created .tc-created,
.pack-table.hide-id .tc-id { display: none; }

.tt { display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--surface-3); color: var(--muted-soft); }
.tt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tt svg { width: 14px; height: 14px; }
.tt-h { width: 72px; aspect-ratio: 16 / 9; }
.tt-p { width: 40px; aspect-ratio: 4 / 5; margin-left: 16px; background: var(--category-linkedin-soft); }
.tt-p img { object-fit: contain; }
.tt-v { width: 27px; aspect-ratio: 9 / 16; margin-left: 22px; }

.tt-title-cell { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.tt-caret {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.tt-caret:hover { background: var(--surface-2); color: var(--ink); }
.tt-caret:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tt-caret svg { width: 14px; height: 14px; transition: transform 0.35s var(--ease-spring); }
.tt-caret[aria-expanded="true"] svg { transform: rotate(90deg); }
.tt-caret-space { flex: none; width: 24px; }
.tt-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: var(--weight-bold);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.tt-title:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.tt-title:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.tt-fresh { flex: none; padding: 3px 6px; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font-size: 9px; font-weight: var(--weight-heavy); line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; }

/* Formats courts dans l'arbre : ligne en retrait, reliée à l'épisode par un trait. */
.pack-table tr.is-kid td { background: color-mix(in srgb, var(--surface-sunken) 80%, transparent); }
.pack-table tr.is-kid .tt-title-cell { padding-left: 34px; }
.pack-table tr.is-kid .tt-title-cell::before {
  content: "";
  position: absolute;
  left: 11px;
  top: -21px;
  width: 16px;
  height: calc(50% + 21px);
  border-left: 2px solid var(--border-dash);
  border-bottom: 2px solid var(--border-dash);
  border-bottom-left-radius: 9px;
}
.pack-table tr.is-kid:not(.is-last) .tt-title-cell::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  bottom: -21px;
  border-left: 2px solid var(--border-dash);
}
.pack-table tr.is-kid .tt-title { font-weight: var(--weight-semibold); color: var(--ink-soft); }

.tt-type { font-size: 12px; font-weight: var(--weight-bold); color: var(--ink-soft); }
.tt-muted { font-size: 12px; color: var(--muted-soft); }
.tt-id { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }

/* Statut modifiable en place (menu). */
.tt-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 12px;
  font-weight: var(--weight-heavy);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--ease-spring), box-shadow var(--transition-fast);
}
.tt-status:not(:disabled):hover { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 30%, transparent); }
.tt-status:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tt-status:disabled { cursor: default; }
.tt-status svg { width: 11px; height: 11px; opacity: 0.6; }
.tt-status.is-changed { animation: release-pop 0.55s var(--ease-spring); }
.tt-alert { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--danger); vertical-align: middle; animation: release-ping 2s ease-out infinite; }

/* Date et heure modifiables en place. */
.tt-when { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid transparent; border-radius: 10px; transition: border-color var(--transition-fast), background var(--transition-fast); }
.pack-table tr:hover .tt-when,
.tt-when:focus-within { border-color: var(--border); background: var(--card-bg); }
.tt-when input { padding: 4px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.tt-when input:focus { outline: none; }
.tt-when input[type="date"] { width: 122px; }
.tt-when input[type="time"] { width: 72px; color: var(--muted); }
.tt-when.is-empty input[type="date"] { color: var(--muted-soft); }
.tt-rel { display: block; margin: 1px 0 0 6px; font-size: 11px; color: var(--muted); }

/* Parenté : formats courts d'un épisode, ou épisode d'un format court. */
.tt-kids,
.tt-parent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 0;
  font: inherit;
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
}
.tt-kids { padding: 4px 9px; border-radius: var(--radius-pill); background: var(--surface-2); font-weight: var(--weight-bold); }
.tt-kids:hover { background: var(--surface-2-hover); }
.tt-kids svg { width: 12px; height: 12px; }
.tt-kids-dots { display: inline-flex; gap: 3px; }
.tt-kids-dots i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tt-parent { padding: 4px 8px 4px 4px; border-radius: 8px; background: none; text-align: left; }
.tt-parent:hover { background: var(--surface-2); }
.tt-parent-mini { flex: none; width: 34px; aspect-ratio: 16 / 9; border-radius: 4px; object-fit: cover; }
.tt-parent span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-parent b { font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-semibold); }
.tt-kids:focus-visible,
.tt-parent:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tt-com { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: var(--radius-pill); background: var(--status-pending-bg); color: var(--status-pending-fg); font-size: 11.5px; font-weight: var(--weight-heavy); text-decoration: none; }
.tt-com:hover { color: var(--status-pending-fg); }
.tt-com svg { width: 11px; height: 11px; }
.tt-open { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--muted); }
.tt-open:hover { background: var(--surface-2); color: var(--brand-ink); }
.tt-open svg { width: 15px; height: 15px; }

/* Menus (statut, colonnes), ouverts par-dessus la page. */
.tt-menu {
  position: fixed;
  z-index: var(--z-dropdown);
  display: grid;
  gap: 2px;
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
  animation: tt-menu-in 0.3s var(--ease-spring) both;
}
@keyframes tt-menu-in { from { opacity: 0; transform: scale(0.94) translateY(-4px); } }
.tt-menu-head { margin: 4px 10px; font-size: 10.5px; font-weight: var(--weight-heavy); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.tt-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-bold);
  text-align: left;
  cursor: pointer;
}
.tt-menu button:hover,
.tt-menu button:focus-visible { outline: none; background: var(--surface-2); }
.tt-menu button[aria-checked="true"] { background: var(--status-pending-bg); }
.tt-menu button.badge-status-validated[aria-checked="true"] { background: var(--status-validated-bg); }
.tt-menu button.badge-status-scheduled[aria-checked="true"] { background: var(--status-scheduled-bg); }
.tt-menu button.badge-status-published[aria-checked="true"] { background: var(--status-published-bg); }
.tt-menu button:not([aria-checked="true"]) { background: none; }
.tt-menu button:not([aria-checked="true"]):hover { background: var(--surface-2); }
.tt-menu label { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; font-size: 13px; font-weight: var(--weight-semibold); cursor: pointer; }
.tt-menu label:hover { background: var(--surface-2); }
.tt-menu input { width: 15px; height: 15px; accent-color: var(--brand); }

/* Barre de sélection multiple. */
.table-bulk {
  position: fixed;
  z-index: var(--z-overlay);
  left: 50%;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 8px 8px 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--deep);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
  animation: tt-bulk-in 0.5s var(--ease-spring) both;
}
.table-bulk[hidden] { display: none; }
@keyframes tt-bulk-in { from { opacity: 0; transform: translate(-50%, 30px); } }
.table-bulk b { white-space: nowrap; }
.table-bulk button,
.table-bulk-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: var(--weight-heavy);
  white-space: nowrap;
  cursor: pointer;
}
.table-bulk button:hover { background: rgba(255, 255, 255, 0.24); }
.table-bulk button svg { width: 12px; height: 12px; }
.table-bulk-date input { border: 0; background: none; color: #fff; font: inherit; color-scheme: dark; }
.table-bulk .table-bulk-clear { width: 32px; padding: 0; justify-content: center; font-size: 17px; }

.tt-notice {
  position: fixed;
  z-index: var(--z-overlay);
  left: 50%;
  bottom: 78px;
  margin: 0;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--deep);
  color: #fff;
  font-size: 13px;
  font-weight: var(--weight-bold);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 20px);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform 0.45s var(--ease-spring);
  pointer-events: none;
}
.tt-notice.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tt-notice.is-error { background: var(--danger); }

/* Largeur moyenne : les colonnes secondaires cèdent la place. */
@media (max-width: 1180px) {
  .pack-table .tc-type,
  .pack-table .tc-created,
  .pack-table .tc-id { display: none; }
  .pack-table .tc-family { width: 170px; }
}
@media (max-width: 960px) {
  .pack-table .tc-thumb,
  .pack-table .tc-com { display: none; }
  .pack-table .tc-date { width: 180px; }
}

/* Téléphone : une carte par ligne, tri par menu. */
@media (max-width: 720px) {
  .table-search { flex: 1 1 100%; }
  .table-sort-mobile { display: flex; flex: 1 1 100%; }
  .table-cols-btn,
  .table-toolbar-grow,
  .table-bulk { display: none; }
  .table-wrap { border: 0; background: none; box-shadow: none; overflow: visible; }
  .pack-table,
  .pack-table tbody { display: block; }
  .pack-table thead { display: none; }
  .pack-table tbody tr {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "thumb title" "thumb status" "thumb date";
    column-gap: 12px;
    row-gap: 6px;
    margin-bottom: 10px;
    padding: 12px;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
  }
  .pack-table tbody tr.is-kid { margin-left: 22px; }
  .pack-table tbody tr.is-kid td { background: none; }
  .pack-table tbody tr.is-kid::before { content: ""; position: absolute; left: -14px; top: -10px; width: 12px; height: calc(50% + 10px); border-left: 2px solid var(--border-dash); border-bottom: 2px solid var(--border-dash); border-bottom-left-radius: 9px; }
  .pack-table td { display: block; width: auto !important; padding: 0; border: 0; }
  .pack-table .tc-check,
  .pack-table .tc-type,
  .pack-table .tc-created,
  .pack-table .tc-id,
  .pack-table .tc-open,
  .pack-table tr.is-kid .tc-family { display: none; }
  .pack-table .tc-thumb { display: block; grid-area: thumb; align-self: start; }
  .pack-table .tc-title { grid-area: title; min-width: 0; }
  .pack-table .tc-status { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .pack-table .tc-date { grid-area: date; }
  .pack-table .tc-family { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid var(--border-soft); }
  .pack-table .tc-family:has(.tt-muted) { display: none; }
  .pack-table .tc-com { position: absolute; top: 10px; right: 10px; }
  .pack-table .tc-com:empty { display: none; }
  .pack-table tr.is-kid .tt-title-cell { padding-left: 0; }
  .pack-table tr.is-kid .tt-title-cell::before,
  .pack-table tr.is-kid .tt-title-cell::after { display: none; }
  .tt-caret-space { display: none; }
  .tt-v { width: 40px; margin-left: 0; }
  .tt-p { width: 56px; margin-left: 0; }
  .tt-h { width: 92px; }
  .tt-when { border-color: var(--border); background: var(--surface-sunken); }
  .tt-rel { margin: 3px 0 0 4px; }
  .pack-table .tt-empty { display: block; }
}

/* ---- 21-dictee.css ---- */
/* Dictée vocale des consignes (assets/js/voice-dictation.js) : micro posé dans
   le coin du champ, barre d'état dessous (écoute, transcription, texte ajouté).
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

.dictation-field { display: block; min-width: 0; }
.dictation-box { position: relative; }
.dictation-box > .dictation-target { display: block; width: 100%; box-sizing: border-box; }
.dictation-box > textarea.dictation-target { padding-right: 58px; }
.dictation-box > input.dictation-target { width: 100%; padding-right: 44px; }
.text-mode-options .dictation-field { flex: 1 1 200px; }
.text-mode-options .dictation-box > input.dictation-target { width: 100%; flex: none; }

.dictation-mic {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.dictation-mic:hover { background: var(--surface-2); color: var(--ink); }
.dictation-mic:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.dictation-mic:disabled { cursor: default; opacity: 0.6; }
.dictation-field-inline .dictation-mic { width: 32px; height: 32px; right: 5px; bottom: auto; top: 50%; transform: translateY(-50%); }
.dictation-field-inline .dictation-mic svg { width: 17px; height: 17px; }

.dictation-field.is-recording .dictation-target { border-color: var(--danger-border); box-shadow: 0 0 0 1px var(--danger-border); }
.dictation-field.is-recording .dictation-mic {
  background: var(--danger-border);
  border-color: transparent;
  color: #fff;
  animation: dictation-pulse 1.3s ease-out infinite;
}
@keyframes dictation-pulse {
  0% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(217, 83, 79, 0); }
}

.dictation-target.dictation-flash { background-color: var(--brand-tint); transition: background-color 0s; }
.dictation-target { transition: background-color 1.4s ease; }

.dictation-bar { display: none; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.dictation-bar.is-visible { display: flex; }
.dictation-bar .btn-primary { padding: 7px 14px; font-size: 13px; box-shadow: none; }
.dictation-bar .btn-ghost { padding: 7px 10px; }
.dictation-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger-border); animation: dictation-blink 1s steps(2) infinite; }
@keyframes dictation-blink { 50% { opacity: 0.25; } }
.dictation-clock { color: var(--danger); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; min-width: 34px; }
.dictation-level { display: flex; align-items: center; gap: 2px; height: 20px; flex: 1 1 60px; min-width: 60px; }
.dictation-level i { display: block; width: 3px; height: 3px; border-radius: 2px; background: var(--danger-border); transition: height 80ms linear; }
.dictation-message { flex: 1 1 auto; min-width: 0; }
.dictation-message-error { color: var(--danger); }
.dictation-done { color: var(--green); font-weight: var(--weight-bold); }
.dictation-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--brand); animation: dictation-spin 0.8s linear infinite; }
@keyframes dictation-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .dictation-field.is-recording .dictation-mic,
  .dictation-dot,
  .dictation-spinner { animation: none; }
}

/* ---- 22-tunnel-et-photos.css ---- */
/* Page Générer : photos d'une publication, document en lien sous la consigne
   et, au téléphone (≤ 720 px), tunnel d'une étape par écran
   (assets/js/generate-tunnel.js : barre d'avancement, « Retour » /
   « Continuer » collés en bas, récapitulatif avant la génération).
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

.link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--brand-ink);
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.link-button svg { width: 16px; height: 16px; }
.link-button:hover { text-decoration: underline; }
.link-button:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.document-toggle { margin-top: 10px; }
.document-field { margin-top: 8px; }
.document-field[hidden] { display: none; }

/* Photos et images d'une publication : vignettes carrées, la première en couverture. */
.post-photo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  .post-photo-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .post-photo-btn { width: 28px; height: 28px; font-size: 14px; }
}
.post-photo-list[hidden],
#photoDropzone[hidden],
#photoVisionRow[hidden] { display: none; }
.post-photo-item,
.post-photo-add { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; }
.post-photo-item { background: var(--surface-2); }
.post-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-photo-cover {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  color: var(--ink);
  font-size: 11px;
  font-weight: var(--weight-bold);
}
.post-photo-actions { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; justify-content: space-between; gap: 4px; }
.post-photo-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--card-bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xs);
}
.post-photo-btn:disabled { opacity: 0.35; cursor: default; }
.post-photo-btn:last-child { margin-left: auto; }
.post-photo-add button {
  width: 100%;
  height: 100%;
  border: 2px dashed var(--border-dash);
  border-radius: 14px;
  background: var(--surface-sunken);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.post-photo-add button span { font-size: 24px; line-height: 1; }
.post-photo-add button:hover { border-color: var(--brand); color: var(--ink); }
#photoStatus { margin-top: 8px; }
#photoVisionRow { margin-top: 10px; }

/* ---- Tunnel au téléphone ---- */
.tunnel-head[hidden],
.tunnel-nav[hidden],
.tunnel-recap[hidden],
.tunnel-nav [hidden] { display: none; }
.wizard.is-tunnel .tunnel-off { display: none; }
.wizard.is-tunnel .step-number { display: none; }
.tunnel-head { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: var(--weight-bold); color: var(--muted); }
.tunnel-bar { display: flex; gap: 4px; }
.tunnel-bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--border); transition: background var(--transition-fast); }
.tunnel-bar i.is-done { background: var(--ink); }
/* Barre collée au bas de l'écran, comme dans une application ; la page garde
   la place qu'elle occupe pour que rien ne passe dessous. */
.wizard.is-tunnel { padding-bottom: 84px; }
.tunnel-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.tunnel-nav button { flex: 1; min-height: 48px; font-size: 15px; }
.tunnel-nav .btn-primary:disabled { background: var(--surface-2); color: var(--muted-soft); box-shadow: none; }
.wizard.is-tunnel .step-card-generate { flex-direction: column; align-items: stretch; }
.wizard.is-tunnel .step-card-generate .btn-primary { width: 100%; min-height: 52px; }
.tunnel-recap { flex-basis: 100%; }
.tunnel-recap-title { margin: 0 0 8px; font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.tunnel-recap-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; margin: 0; font-size: 13px; }
.tunnel-recap-list dt,
.tunnel-recap-list dd { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.tunnel-recap-list dt { color: rgba(255, 255, 255, 0.6); }
.tunnel-recap-list dd { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.tunnel-recap-value { min-width: 0; overflow-wrap: anywhere; color: #fff; }
.tunnel-recap .link-button { color: var(--teal-on-dark); padding: 0; flex-shrink: 0; font-size: 12px; }

/* Fiche d'une publication, onglet « Visuels » : photos fournies à la génération. */
.pack-post-photos { margin-bottom: 14px; }
.pack-post-photo-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pack-post-photo-list li { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.pack-post-photo-list img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--surface-2); display: block; }
.pack-post-photo-list li.is-cover img { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ---- 23-visuels-generer.css ---- */
/* Étape « Visuels » de la page Générer (assets/js/generate-visuals.js) et
   suite de la page d'attente quand les visuels se créent après le pack. */
.visuals-step [data-visuals-part][hidden],
.visuals-step [hidden] { display: none !important; }
.visuals-formats { margin-bottom: 4px; }
.visuals-post-title { margin: 0 0 8px; font-size: 13px; font-weight: var(--weight-bold); color: var(--ink-soft); }
.visuals-post-choice { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.visuals-post-format { margin-top: 12px; }


/* Résumé en puces, coût, « Plus d'options ». */
.visuals-summary { margin-top: 14px; }
.visuals-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.visuals-chips li { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); font-size: 12px; color: var(--ink-soft); }
.visuals-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.visuals-summary.is-empty .visuals-foot { margin-top: 4px; }
.visuals-more-toggle { display: inline-flex; align-items: center; gap: 6px; }
.visuals-more-toggle .icon-btn-svg { width: 15px; height: 15px; }
.visuals-cost { font-size: 12px; color: var(--muted); }

.visuals-more { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.visuals-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.visuals-tab { padding: 6px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--card-bg); font: inherit; font-size: 13px; font-weight: var(--weight-bold); color: var(--ink-soft); cursor: pointer; }
.visuals-tab:hover { color: var(--ink); }
.visuals-tab[aria-selected="true"] { background: var(--inverse); border-color: var(--inverse); color: var(--on-inverse); }
.visuals-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.visuals-pane { display: grid; gap: 10px; margin-top: 14px; }
.visuals-text-row { display: grid; gap: 6px; }
.visuals-text-input { width: 100%; }
.visuals-logo-place { display: grid; gap: 4px; }
.visuals-logo-place .thumb-logo-row { margin-top: 8px; }
.visuals-personas .persona-option.is-show-persona .persona-option-name::after { content: " ★"; color: var(--gold); }

/* Page d'attente : pack prêt, visuels en cours. */
.gen-visuals-ready { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand-dark); font-size: 13px; font-weight: var(--weight-bold); }

@media (max-width: 720px) {
  .visuals-post-choice { grid-template-columns: 1fr; }
  /* Carte verticale étroite : boutons réduits à leur icône (nom gardé en visually-hidden). */
  .media-card-vertical .thumb-actions span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .media-card-vertical .thumb-actions .btn-secondary { padding: 7px 9px; }
}

/* Fiche du pack : actions d'un format, panneau « Refaire ». */
.thumb-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.thumb-actions .btn-secondary { padding: 6px 12px; font-size: 12px; }
.thumb-actions .icon-btn-svg { width: 14px; height: 14px; }
.thumb-remove.is-confirm { border-color: var(--danger-border); color: var(--danger-ink); background: var(--danger-bg); }
.visuals-retouch { margin-top: 18px; }
.visuals-retouch .step-head h2 { display: flex; align-items: center; gap: 6px; }
.visuals-sources { display: grid; gap: 4px; margin-top: 4px; }
.visuals-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.visuals-submit-status { font-size: 13px; color: var(--muted); }
.visuals-submit-status.is-error { color: var(--danger-ink); }
.visuals-retouch[hidden] { display: none; }

/* Carrousel d'une publication (fiche du pack). */
.visuals-carousel-count { margin-top: 12px; }
.carousel-board { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.carousel-board-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.carousel-board-head h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 15px; }
.carousel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.carousel-slide { display: grid; gap: 8px; align-content: start; min-width: 0; }
.carousel-slide-image { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); display: flex; align-items: center; justify-content: center; }
.carousel-slide-image.media-ratio-carre { aspect-ratio: 1; }
.carousel-slide-image.media-ratio-paysage { aspect-ratio: 16 / 9; }
.carousel-slide-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-slide-image.is-empty span:first-child { font-size: 12px; color: var(--muted); padding: 8px; text-align: center; }
.carousel-slide-num { position: absolute; top: 6px; left: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--inverse); color: var(--on-inverse); font-size: 12px; font-weight: var(--weight-bold); display: flex; align-items: center; justify-content: center; }
.carousel-slide-text { display: grid; gap: 2px; font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
.carousel-slide-text strong { font-size: 13px; color: var(--ink); }
.carousel-slide-form { display: grid; gap: 6px; }
.carousel-slide-form input, .carousel-slide-form textarea { width: 100%; font-size: 13px; }
.carousel-slide-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.carousel-slide-actions .btn-secondary, .carousel-slide-actions .btn-primary { padding: 6px 10px; font-size: 12px; }
.carousel-slide-actions .icon-btn-svg { width: 13px; height: 13px; }
@media (max-width: 720px) { .carousel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carousel-slide [hidden] { display: none !important; }

.visuals-sources .step-hint { margin-top: 2px; }

/* Versions précédentes d'un format (fiche du pack) : grille, rétablir sans coût. */
.thumb-versions { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.thumb-versions-title { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: var(--weight-bold); color: var(--ink-soft); }
.thumb-versions-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.media-card-vertical .thumb-versions-list { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.thumb-version { display: grid; gap: 4px; align-content: start; min-width: 0; }
.thumb-version img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-sunken); }
.thumb-version.thumb-version-vertical img { aspect-ratio: 9 / 16; }
.thumb-version.media-ratio-portrait img { aspect-ratio: 4 / 5; }
.thumb-version.media-ratio-carre img { aspect-ratio: 1; }
.thumb-version-meta { display: grid; font-size: 11px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.thumb-version-meta strong { color: var(--ink-soft); font-size: 12px; }
.thumb-version .btn-secondary { justify-self: start; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; font-size: 12px; }
.thumb-version .icon-btn-svg { width: 13px; height: 13px; }
.thumb-version-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.thumb-version-delete { font-size: 12px; color: var(--muted); }
.thumb-version-delete[data-armed="1"] { color: var(--danger-ink); }
@media (max-width: 720px) {
  .thumb-versions-list, .media-card-vertical .thumb-versions-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Téléphone : choix du format et de la source en grille régulière (pas de
   pilule repliée sur deux lignes). */
@media (max-width: 720px) {
  .visuals-step .visuals-formats,
  .visuals-step .visuals-sources .logo-choice-options { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); border-radius: var(--radius-md); }
  .visuals-step .visuals-formats label,
  .visuals-step .visuals-sources .logo-choice-options label { justify-content: center; padding: 8px 6px; text-align: center; white-space: normal; line-height: 1.25; }
}

/* ===== Atelier (étape « Visuels » de Générer, panneau de la fiche) ===== */
.atelier { display: grid; gap: 18px; }
/* Fiche : configurateur, réglages à gauche, aperçu collant à droite (mis à jour sur place). */
.atelier-pack { grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); grid-template-areas: "panel stage"; align-items: start; gap: 22px; }
.atelier-pack > .atelier-panel { grid-area: panel; }
.atelier-pack > .atelier-stage { grid-area: stage; }
.atelier-panel { display: grid; gap: 16px; min-width: 0; }
.atelier-pack .atelier-panel { gap: 14px; }
.atelier-step { display: grid; gap: 8px; }
.atelier-step-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--weight-bold); color: var(--ink); }
.atelier-step-hint { font-weight: var(--weight-regular); font-size: 12px; color: var(--muted); }
.atelier-n { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); font-size: 12px; }
.atelier-n:empty { display: none; }
.visuals-retouch .step-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.atelier-close { font-size: 13px; }

/* Aperçu vivant */
.atelier-stage { position: sticky; top: 76px; display: grid; gap: 12px; max-height: calc(100vh - 92px); overflow-y: auto; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-sunken); min-width: 0; }
.atelier-stage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.atelier-stage-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.atelier-stage-tabs .visuals-tab.is-off { opacity: .6; }
.atelier-stage-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.atelier-full-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-size: 12px; }
.atelier-full-btn .icon-btn-svg { width: 14px; height: 14px; }
.atelier-view[data-view="image"] { display: block; }
.atelier-frame { display: grid; gap: 6px; margin: 0; transition: opacity var(--transition-fast); }
.atelier-frame.is-off { opacity: .45; }
/* Une seule image, aussi grande que la colonne et la hauteur de la fenêtre le permettent. */
.atelier-frame-img { position: relative; width: min(100%, calc((100vh - 420px) * var(--ar, 16 / 9))); min-width: min(100%, 140px); margin-inline: auto; overflow: hidden; border-radius: var(--radius-md); background: var(--placeholder); box-shadow: var(--shadow-sm); container-type: inline-size; }
.atelier-frame-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.atelier-frame-open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.atelier-frame-open:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.atelier-busy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 12px; background: rgba(15, 17, 19, .6); color: #fff; font-size: 13px; font-weight: var(--weight-bold); text-align: center; }
.atelier-busy .pack-visuals-spinner { width: 22px; height: 22px; }

/* Diapos d'un carrousel, côte à côte. */
.atelier-slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.atelier-slide { min-width: 0; }
.atelier-slide-img { position: relative; display: block; width: 100%; aspect-ratio: var(--slide-ratio, 4 / 5); padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-sm); background: var(--placeholder); cursor: zoom-in; }
.atelier-slide-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.atelier-slide-img:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Versions du format affiché, sous l'aperçu. */
.atelier-versions { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.atelier-versions-head { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: var(--weight-bold); color: var(--ink-soft); }
.atelier-versions-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.atelier-version { position: relative; display: grid; gap: 3px; width: 104px; min-width: 0; }
.atelier-version.is-vertical { width: 62px; }
.atelier-version-img { display: block; width: 100%; aspect-ratio: var(--ar, 16 / 9); padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 7px; background: var(--placeholder); cursor: zoom-in; }
.atelier-version.is-vertical .atelier-version-img { aspect-ratio: 9 / 16; }
.atelier-version.is-current .atelier-version-img { border-color: var(--brand); }
.atelier-version-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.atelier-version-img:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.atelier-version-label { overflow: hidden; font-size: 11px; color: var(--muted); line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.atelier-version-delete { position: absolute; top: 3px; right: 3px; min-width: 20px; height: 20px; padding: 0 6px; border: 0; border-radius: var(--radius-pill); background: var(--inverse); color: var(--on-inverse); font: inherit; font-size: 12px; line-height: 20px; cursor: pointer; }
.atelier-version-delete[data-armed="1"] { background: var(--danger-bg); color: var(--danger-ink); box-shadow: 0 0 0 1px var(--danger-border); font-size: 11px; font-weight: var(--weight-bold); }

/* Plein écran : image en place, version (rétablir, comparer, supprimer), diapo. */
.atelier-lightbox { width: min(96vw, 1400px); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--card-bg); color: var(--ink); box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, .35)); }
.atelier-lightbox::backdrop { background: rgba(10, 11, 12, .78); }
.atelier-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.atelier-lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); font-size: 14px; }
.atelier-lightbox-body { display: grid; place-items: center; min-height: 0; padding: 12px; background: var(--surface-sunken); }
.atelier-lightbox-frame { position: relative; max-width: 100%; }
.atelier-lightbox-frame > img { display: block; max-width: 100%; max-height: calc(94vh - 150px); object-fit: contain; }
.atelier-lightbox-compare img { object-fit: contain; }
.atelier-lightbox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border-soft); }
.atelier-lightbox-actions .btn-primary, .atelier-lightbox-actions .btn-secondary { display: inline-flex; align-items: center; gap: 6px; }
.atelier-lightbox-actions .icon-btn-svg { width: 14px; height: 14px; }
.atelier-lightbox [hidden] { display: none !important; }

/* L'Atelier ouvert prend la place des cartes de l'onglet. */
.pack-thumbs.is-atelier-open .pack-thumbs-layout,
.pack-thumbs.is-atelier-open .carousel-board,
.pack-thumbs.is-atelier-open .pack-section-head [data-visuals-open] { display: none; }
.pack-thumbs.is-atelier-open .visuals-retouch { margin-top: 0; }

/* Coût et lancement collés en bas de la colonne des réglages. */
.atelier-pack .visuals-submit { position: sticky; bottom: 0; z-index: 2; justify-content: space-between; margin-top: 0; padding: 12px 0; background: var(--card-bg); }
.visuals-submit-buttons { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.atelier-pack .visuals-submit-status { flex: 1 1 100%; }
.atelier-pack .visuals-submit-status:empty { display: none; }
.visuals-logo-step .thumb-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
.visuals-logo-step .thumb-logo-label { min-width: 72px; }
.visuals-logo-step .atelier-logo-apply { flex-basis: 100%; text-align: left; font-size: 12px; }
.atelier-frame-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; font-size: 12px; color: var(--muted); text-align: center; }
.atelier-frame figcaption, .atelier-frame > figcaption { font-size: 12px; color: var(--muted); }
.atelier-logo-box { position: absolute; aspect-ratio: 3 / 1; display: grid; place-items: center; border: 2px dashed rgba(255, 255, 255, .92); border-radius: 6px; background: rgba(0, 0, 0, .28); color: #fff; font-size: clamp(9px, 4cqi, 12px); font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; transition: left var(--transition-fast), width var(--transition-fast); }
.atelier-text-chip { position: absolute; left: 6px; right: 6px; bottom: 6px; overflow: hidden; padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(15, 17, 19, .72); color: #fff; font-size: 11px; font-weight: var(--weight-bold); white-space: nowrap; text-overflow: ellipsis; text-align: center; }
.atelier-logo-apply { font-size: 12px; }
.atelier-text-chip.is-top { top: 6px; bottom: auto; } /* logo dans le bas de l'image */
.atelier-text-chip.is-middle { top: 50%; bottom: auto; transform: translateY(-50%); } /* logos en haut et en bas */
/* Configurateur du logo : le vrai logo, à attraper (déplacer), avec sa poignée
   (taille), ses effets (ombre portée, fond sombre) et des repères aimantés. */
.atelier-logo-box.has-logo { z-index: 2; aspect-ratio: auto; border: 0; border-radius: 4px; background: none; outline: 1.5px dashed rgba(255, 255, 255, .85); outline-offset: 3px; cursor: grab; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; transition: none; }
.atelier-logo-box.has-logo > span:not(.logo-handle) { display: none; }
.atelier-logo-box.has-logo img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.atelier-logo-box.has-logo.has-shadow img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.atelier-logo-box.has-logo.has-halo::before { content: ""; position: absolute; inset: -110% -35%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .45) 0 35%, rgba(0, 0, 0, 0) 70%); pointer-events: none; }
.atelier-logo-box.is-dragging { cursor: grabbing; outline-style: solid; }
.atelier-logo-box.has-logo:focus-visible { outline: 2px solid #fff; box-shadow: 0 0 0 5px rgba(15, 17, 19, .55); }
.logo-handle { display: none; position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border: 2px solid #1f2426; border-radius: 50%; background: #fff; cursor: nwse-resize; touch-action: none; }
.atelier-logo-box.has-logo .logo-handle { display: block; }
.atelier-logo-box.is-edge-r .logo-handle { right: 2px; }
.atelier-logo-box.is-edge-b .logo-handle { bottom: 2px; }
.logo-guide { position: absolute; z-index: 3; display: none; background: #ff3f9b; pointer-events: none; }
.logo-guide.is-on { display: block; }
.logo-guide-v { top: 0; bottom: 0; width: 1px; }
.logo-guide-h { left: 0; right: 0; height: 1px; }
.logo-config-frame { position: relative; flex-basis: 100%; width: min(100%, 300px); max-width: 300px; overflow: hidden; border-radius: var(--radius-md); background: repeating-linear-gradient(135deg, var(--surface-2) 0 12px, var(--surface-3) 12px 24px); box-shadow: var(--shadow-sm); }
.logo-config-frame[data-logo-frame="vertical"] { max-width: 150px; }
.logo-config-bg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted); pointer-events: none; }
.logo-config-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; }
.logo-config-tools .checkbox-row { margin: 0; }
@media (pointer: coarse) {
  .logo-handle { right: -12px; bottom: -12px; width: 24px; height: 24px; }
}
.atelier-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.atelier-feed-item { display: grid; gap: 5px; align-content: start; min-width: 0; }
.atelier-feed-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--placeholder); }
.atelier-feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atelier-feed-item.is-mine .atelier-feed-thumb { outline: 2px solid var(--brand); outline-offset: 2px; }
.atelier-feed-dur { position: absolute; right: 4px; bottom: 4px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, .8); color: #fff; font-size: 10px; font-weight: var(--weight-bold); }
.atelier-feed-dur:empty { display: none; }
.atelier-feed-title { overflow: hidden; font-size: 11px; font-weight: var(--weight-bold); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.atelier-feed-line { height: 7px; width: 60%; border-radius: 4px; background: var(--border-soft); }
.atelier-view-phone { display: grid; justify-items: center; gap: 8px; }
.atelier-phone { width: 180px; max-width: 100%; aspect-ratio: 9 / 19; padding: 8px; border-radius: 26px; background: #0d0f10; }
.atelier-phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 19px; background: #222; }
.atelier-phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atelier-safe { position: absolute; background: repeating-linear-gradient(45deg, rgba(255, 80, 80, .4) 0 6px, rgba(255, 80, 80, .14) 6px 12px); }
.atelier-safe-bottom { left: 0; right: 0; bottom: 0; height: 22%; }
.atelier-safe-right { top: 40%; bottom: 22%; right: 0; width: 15%; }

/* Que faire ? */
.atelier-intents { display: grid; gap: 8px; }
.atelier-intent { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--border-soft); border-radius: var(--radius-md); background: var(--card-bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.atelier-intent strong { display: block; font-size: 14px; }
.atelier-intent small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.atelier-intent-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-sunken); color: var(--ink-soft); }
.atelier-intent-ico .icon-btn-svg { width: 17px; height: 17px; }
.atelier-intent[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); }
.atelier-intent[aria-pressed="true"] .atelier-intent-ico { background: var(--brand); color: var(--on-brand); }
.atelier-intent[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.atelier-intent:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* À partir de : une seule bande, en grille (jamais de défilement en largeur). */
.atelier-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.atelier-src { position: relative; display: grid; gap: 3px; align-content: start; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; min-width: 0; }
button.atelier-src { cursor: pointer; }
.atelier-src-thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid transparent; border-radius: 9px; background: var(--surface-sunken); color: var(--muted); font-size: 20px; }
.atelier-src-thumb.is-portrait { aspect-ratio: 9 / 16; }
.atelier-src-thumb.is-square { aspect-ratio: 1; }
.atelier-src-thumb.is-portrait img { object-position: center 30%; }
.atelier-src-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atelier-src[aria-pressed="true"] .atelier-src-thumb, .atelier-src.is-fixed .atelier-src-thumb, .atelier-src.is-kept .atelier-src-thumb { border-color: var(--brand); }
.atelier-src[aria-pressed="true"] .atelier-src-thumb::after { content: "✓"; position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: var(--weight-bold); }
.atelier-src.is-add .atelier-src-thumb { border: 2px dashed var(--border-dash); background: var(--card-bg); }
.atelier-src.is-add.is-dragover .atelier-src-thumb { border-color: var(--brand); }
.atelier-src-star { position: absolute; left: 4px; top: 3px; color: var(--gold); font-size: 13px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.atelier-src-role { font-size: 10px; font-weight: var(--weight-bold); color: var(--brand-ink); text-transform: uppercase; letter-spacing: .04em; min-height: 13px; }
.atelier-src-label { overflow: hidden; font-size: 11px; color: var(--muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.atelier-src-remove { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: var(--inverse); color: var(--on-inverse); font-size: 13px; cursor: pointer; }
.atelier-src:focus-visible .atelier-src-thumb { box-shadow: var(--focus-ring); }

/* Pistes, retouches rapides */
.atelier-ideas-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.atelier-ideas-bar .btn-secondary { display: inline-flex; align-items: center; gap: 6px; }
.atelier-ideas-bar .icon-btn-svg { width: 15px; height: 15px; }
.atelier-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.atelier-idea { display: grid; gap: 6px; align-content: start; padding: 12px; border: 1.5px solid var(--border-soft); border-radius: var(--radius-md); background: var(--card-bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.atelier-idea.is-picked { border-color: var(--brand); background: var(--brand-tint); }
.atelier-idea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.atelier-idea-tag { font-size: 11px; font-weight: var(--weight-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--brand-ink); }
.atelier-idea-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.atelier-idea-hook { justify-self: start; padding: 3px 8px; border-radius: 8px; background: var(--surface-sunken); font-size: 12px; font-weight: var(--weight-bold); }
.atelier-quick { display: grid; gap: 6px; }
.atelier-quick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.atelier-chip { padding: 6px 11px; border: 1px solid var(--border-soft); border-radius: var(--radius-pill); background: var(--card-bg); color: var(--ink-soft); font: inherit; font-size: 12px; font-weight: var(--weight-bold); cursor: pointer; }
.atelier-chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); }
.atelier-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Texte, récapitulatif */
.visuals-text-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.visuals-text-row > fieldset { flex: none; }
.visuals-text-row > .dictation-field, .visuals-text-row > .visuals-text-input { flex: 1 1 100%; width: 100%; }
.visuals-text-row .visuals-text-input { width: 100%; }
.visuals-text-slot { font-size: 12px; color: var(--muted); min-width: 72px; }
.atelier-recap { padding: 12px 14px; border: 1px dashed var(--border-dash); border-radius: var(--radius-md); background: var(--brand-tint-soft); }
.atelier-recap-head { margin-bottom: 6px; font-size: 13px; font-weight: var(--weight-bold); }
.atelier-recap ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink-soft); }
.atelier-recap strong { color: var(--ink); }

/* Fiche : contrôle, journal, comparaison */
.thumb-check { margin: 6px 0 0; padding: 5px 10px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.thumb-check.is-ok { background: var(--outcome-success-bg); color: var(--ink-soft); }
.thumb-check.is-warn { background: var(--outcome-warning-bg); color: var(--ink); }
.thumb-journal { margin-top: 8px; font-size: 12px; color: var(--ink-soft); }
.thumb-journal summary { cursor: pointer; color: var(--muted); font-weight: var(--weight-bold); }
.thumb-journal dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin: 8px 0 0; }
.thumb-journal dt { color: var(--muted); }
.thumb-journal dd { margin: 0; overflow-wrap: anywhere; }
.thumb-journal pre { max-height: 220px; overflow: auto; margin: 6px 0 0; padding: 8px; border-radius: var(--radius-sm); background: var(--surface-sunken); font-family: var(--font-mono); font-size: 11px; white-space: pre-wrap; }
.media-preview { position: relative; }
.thumb-compare { position: absolute; inset: 0; --compare: 50%; }
.thumb-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--compare)) 0 0); }
.thumb-compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--compare); width: 2px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .5); pointer-events: none; }
.thumb-compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.thumb-compare-tag { position: absolute; top: 6px; padding: 1px 8px; border-radius: var(--radius-pill); background: rgba(15, 17, 19, .72); color: #fff; font-size: 11px; font-weight: var(--weight-bold); pointer-events: none; }
.thumb-compare-before { left: 6px; }
.thumb-compare-after { right: 6px; }

@media (max-width: 900px) {
  .atelier-pack { grid-template-columns: 1fr; grid-template-areas: "stage" "panel"; }
  .atelier-stage { position: static; max-height: none; overflow: visible; }
  .atelier-frame-img { width: min(100%, calc(70vh * var(--ar, 16 / 9))); }
}
@media (max-width: 720px) {
  .atelier-stage-tools { width: 100%; margin-left: 0; }
  .atelier-views { display: grid; flex: 1 1 100%; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); border-radius: var(--radius-md); }
  .atelier-views label { justify-content: center; padding: 8px 6px; text-align: center; white-space: normal; line-height: 1.25; }
  .atelier-lightbox { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; }
  .atelier-lightbox-frame > img { max-height: calc(100vh - 170px); }
}
@media (max-width: 720px) {
  .atelier-sources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .atelier-feed { grid-template-columns: 1fr 1fr; }
  .atelier-feed-item:first-child { display: none; }
}

/* ---- 24-catalogue-youtube.css ---- */
/* Onglet « Catalogue YouTube » de la page Statistiques (dashboard/lib/stats_catalog.php,
   assets/js/youtube-catalog.js) : vidéos de la chaîne et leurs packs. */
.catalog [hidden] { display: none !important; }
.catalog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.catalog-head .stats-hint { margin: 6px 0 0; }
.catalog-head .btn-secondary { flex: none; gap: 6px; }
.catalog-head .icon-btn-svg { width: 15px; height: 15px; }
.catalog[data-running="1"] .catalog-head .icon-btn-svg { animation: catalog-spin 1.2s linear infinite; }
@keyframes catalog-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .catalog[data-running="1"] .catalog-head .icon-btn-svg { animation: none; } }
.catalog-tiles { margin-bottom: 18px; }

.catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.catalog-filters { flex: 0 1 auto; }
.catalog-count { font-weight: var(--weight-regular); opacity: .7; margin-left: 2px; }
.catalog-playlist, .catalog-search { height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--card-bg); color: var(--ink); font: inherit; font-size: 13px; }
.catalog-playlist { margin-left: auto; max-width: 240px; }
.catalog-search { width: 200px; }

.catalog-list { list-style: none; margin: 0; padding: 0 16px; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.catalog-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.catalog-row:first-child { border-top: 0; }
.catalog-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.catalog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalog-thumb span { position: absolute; right: 4px; bottom: 4px; padding: 0 5px; border-radius: 4px; background: rgba(20, 20, 20, .82); color: #fff; font-size: 11px; font-weight: var(--weight-semibold); line-height: 17px; }
.catalog-body { min-width: 0; }
.catalog-title { margin: 0; font-size: 14px; font-weight: var(--weight-semibold); line-height: 1.35; overflow-wrap: anywhere; }
.catalog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.catalog-privacy { padding: 1px 8px; border-radius: var(--radius-pill); font-weight: var(--weight-semibold); background: var(--surface-2); color: var(--ink-soft); }
.catalog-privacy.is-public { background: var(--status-published-bg); color: var(--status-published-fg); }
.catalog-privacy.is-scheduled { background: var(--status-scheduled-bg); color: var(--status-scheduled-fg); }
.catalog-chip { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink-soft); }
.catalog-suggest { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--status-pending-fg); }
.catalog-suggest .icon-btn-svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.catalog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.catalog-actions .btn-primary, .catalog-actions .btn-secondary { min-height: 32px; padding: 5px 12px; font-size: 13px; gap: 6px; }
.catalog-actions .icon-btn-svg { width: 14px; height: 14px; }
.catalog-second-life { color: var(--brand-ink); }
.catalog-pack { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: var(--weight-semibold); color: var(--brand-ink); text-decoration: none; white-space: nowrap; }
.catalog-pack .icon-btn-svg { width: 14px; height: 14px; }
.catalog-pack:hover { text-decoration: underline; }
.catalog-choose { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.catalog-choose select { flex: 1 1 220px; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); color: var(--ink); font: inherit; font-size: 13px; }
.catalog-row-error { grid-column: 2 / -1; margin: 0; font-size: 12px; color: var(--danger-ink); }
.catalog [data-catalog-empty] { margin: 14px 0 0; }

@media (max-width: 720px) {
  .catalog-head { flex-direction: column; }
  .catalog-playlist, .catalog-search { margin-left: 0; flex: 1 1 100%; width: 100%; max-width: none; }
  .catalog-filters { width: 100%; flex-wrap: wrap; overflow: visible; }
  .catalog-list { padding: 0 12px; }
  .catalog-row { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
  .catalog-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .catalog-choose, .catalog-row-error { grid-column: 1 / -1; }
}

/* ---- 25-medias.css ---- */
/* ==========================================================================
   Administration › Médias stockés (dashboard/admin/lib/tabs/media.php) :
   choix « Cet espace / Toute la plateforme » (exploitant), tuiles du résumé,
   pastilles d'emplacement et d'état, actions. Le tableau reprend
   .admin-table (cartes sous 720 px, assets/js/table-cards.js).
   ========================================================================== */

.media-views { margin-bottom: 16px; }
.media-views a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.media-views a:hover { background: var(--surface-2); color: var(--ink); }
.media-views a.active,
.media-views a.active:hover { background: var(--inverse); color: var(--on-inverse); }
.media-views a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.media-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.media-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.media-tile span {
  font-size: 11px;
  font-weight: var(--weight-heavy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-soft);
}
.media-tile strong { font-size: 24px; font-weight: var(--weight-heavy); line-height: 1.1; color: var(--ink); }
.media-tile small { font-size: 12px; color: var(--muted); }
.media-tile.is-warn strong { color: var(--confidence-medium-fg); }
.media-warn { font-style: normal; font-weight: var(--weight-bold); color: var(--confidence-medium-fg); }

.media-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: -6px 0 16px;
  font-size: 12px;
  color: var(--muted);
}
.media-error { color: var(--danger-ink); }
.media-spaces { margin-bottom: 18px; }

.media-pill {
  display: inline-block;
  margin-right: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--weight-bold);
  white-space: nowrap;
  background: var(--brand-tint);
  color: var(--brand-ink);
}
.media-pill.r2 { background: var(--status-scheduled-bg); color: var(--status-scheduled-fg); }
.media-pill.ok { background: var(--confidence-high-bg); color: var(--confidence-high-fg); }
.media-pill.warn { background: var(--confidence-medium-bg); color: var(--confidence-medium-fg); }
.media-pill.err { background: var(--confidence-low-bg); color: var(--confidence-low-fg); }
.media-pill.muted { background: var(--confidence-unknown-bg); color: var(--confidence-unknown-fg); }

.media-sub {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: var(--weight-regular);
  color: var(--muted);
  white-space: normal;
}
.media-table .media-name { white-space: normal; overflow-wrap: anywhere; min-width: 140px; max-width: 220px; }
.media-table .media-sends { white-space: normal; min-width: 180px; max-width: 260px; }

.media-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.media-actions .btn-secondary,
.media-actions .btn-ghost { padding: 6px 12px; font-size: 12px; }
.media-actions .space-switch-form { margin: 0; }
.media-actions .btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }
.media-actions-note { flex-basis: 100%; margin-top: 0; }

.media-section { margin-top: 26px; }
.media-section h2 { margin: 0 0 10px; font-size: 17px; }
.media-section code { overflow-wrap: anywhere; white-space: normal; }

@media (max-width: 720px) {
  .media-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .media-tile strong { font-size: 20px; }
  .media-table .media-name,
  .media-table .media-sends { min-width: 0; max-width: none; }
}

/* ---- 26-dates-reseaux.css ---- */
/* Dates de sortie par réseau : éditeur (panneau « Planifier », en-tête de la
   fiche), logos des cartes du calendrier, « + N dates » de la grille.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css. */

.net-logo { display: inline-flex; flex: none; line-height: 0; }
.net-logo .network-logo { width: 18px; height: 18px; }

/* Éditeur : interrupteur, logos (même date) ou une ligne par réseau. */
.net-schedule { display: grid; gap: 8px; margin-top: 4px; }
.net-schedule-head { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.net-schedule-head > span { cursor: pointer; }
.net-schedule-switch {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.net-schedule-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--card-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left var(--transition-fast);
}
.net-schedule-switch[aria-checked="true"] { background: var(--brand); }
.net-schedule-switch[aria-checked="true"]::after { left: 16px; }
.net-schedule-switch:disabled { opacity: 0.45; cursor: default; }
.net-schedule-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.net-schedule-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--muted); }
.net-schedule-summary > span:last-child { margin-left: 4px; }
.net-schedule-summary[hidden],
.net-schedule-rows[hidden],
.net-schedule-note[hidden] { display: none; }
.net-schedule-rows { display: grid; }
.net-schedule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 132px) minmax(0, 92px);
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--border-soft);
}
.net-schedule-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: var(--weight-semibold); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-edit .net-schedule-row input { padding: 7px 8px; font-size: 13px; }
.net-schedule-row input { min-width: 0; }
.net-schedule-note { margin: 0; font-size: 12px; color: var(--muted); }

/* Fiche du pack : segment « Réseaux » du bandeau (logos et nombre de
   sorties), qui déplie sous le bandeau une carte par réseau, côte à côte. */
.pack-net-toggle {
  background: none;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  font: inherit;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
}
.pack-net-toggle:hover { background: var(--surface-2); }
.pack-net-toggle[hidden] { display: none; }
.pack-net-logos { display: inline-flex; gap: 3px; }
.pack-net-logos .network-logo { width: 18px; height: 18px; display: block; }
.pack-net-toggle .icon-btn-svg { width: 14px; height: 14px; color: var(--muted); transition: transform var(--transition-fast); }
.pack-net-toggle[aria-expanded="true"] .icon-btn-svg { transform: rotate(180deg); }
.pack-net-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pack-net-panel { margin-top: -6px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--card-bg); box-shadow: var(--shadow-card); }
.pack-net-panel[hidden] { display: none; }
.pack-net-panel .net-schedule { margin: 0; }
.pack-net-panel .net-schedule-rows { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pack-net-panel .net-schedule-row {
  grid-template-columns: minmax(0, 1fr) 84px;
  grid-template-areas: "name name" "date time";
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.pack-net-panel .net-schedule-name { grid-area: name; }
.pack-net-panel .net-schedule-row input[type="date"] { grid-area: date; }
.pack-net-panel .net-schedule-row input[type="time"] { grid-area: time; }
.pack-net-panel .net-schedule-row input { padding: 6px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink); }

/* Calendrier : logos des réseaux de chaque sortie, filtre par réseau. */
.calendar-chip-networks { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin: 2px 0 3px; }
.calendar-chip-networks .network-logo { width: 15px; height: 15px; }
.calendar-chip-part { margin-left: auto; font-size: 10.5px; font-weight: var(--weight-heavy); font-variant-numeric: tabular-nums; opacity: 0.75; }
.network-filters button .network-logo { width: 18px; height: 18px; display: block; }
.network-filters button[data-network]:not([data-network="all"]) { padding: 5px 8px; }

/* Grille : réseaux décalés, « + N dates » dans la pastille de sortie. */
.release-more {
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 10.5px;
  font-weight: var(--weight-heavy);
  white-space: nowrap;
}
.release-more[hidden] { display: none; }

/* Fiche › Publier sur les réseaux : date de sortie de chaque réseau décalé. */
.social-when { font-size: 12px; color: var(--muted); }

@media (max-width: 720px) {
  .net-schedule-row { grid-template-columns: minmax(0, 1fr) 92px; }
  .net-schedule-name { grid-column: 1 / -1; }
}

/* ---- 27-preproduction.css ---- */
/* ==========================================================================
   Mention « Préproduction » (render_preprod_banner() de
   dashboard/lib/packs/layout.php) : bandeau discret au-dessus de l'en-tête de
   chaque page de l'outil, et en haut de la connexion. Jamais en production.
   Partie de dashboard/assets/style.css, assemblé par bin/build-css.
   ========================================================================== */

.preprod-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 10px;
  padding: 6px 16px;
  background: var(--confidence-medium-bg);
  border-bottom: 1px solid var(--outcome-warning-border);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-align: center;
}

.preprod-banner strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Pastille de la couleur d'avertissement devant le mot. */
.preprod-banner strong::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--confidence-medium-fg);
}

/* Connexion et pages des liens reçus par e-mail : carte centrée dans la page,
   le bandeau reste collé en haut, au-dessus de la carte. */
body.login-body:has(> .preprod-banner) {
  padding-top: 56px;
}

body.login-body > .preprod-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
}

/* « Mon compte » : double authentification coupée sur ce serveur. */
.account-security .mfa-off {
  margin: 8px 0 0;
}

/* ---- 28-credits.css ---- */
/* Crédits IA (dashboard/lib/credits_view.php, assets/js/credits.js,
   credits-cost.js) : pastille de la barre du haut et sa fenêtre, bandeaux
   « critique » et « épuisé », coût sur les boutons d'IA, page Crédits,
   onglet de l'exploitant. Couleurs : jetons seulement (tokens.css). */

/* ---- Pastille ---- */
header.topbar .credits { position: relative; display: inline-flex; }
header.topbar .credits-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 10px;
  border: 0;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--ink-soft);
  background: var(--card-bg);
  box-shadow: 0 1px 3px rgba(31, 36, 38, 0.06);
  transition: color var(--transition-fast), background var(--transition-fast);
}
header.topbar .credits-pill .icon-btn-svg { width: 15px; height: 15px; color: var(--brand-ink); flex: none; }
header.topbar .credits-pill strong { font-weight: var(--weight-bold); color: var(--ink); font-variant-numeric: tabular-nums; }
header.topbar .credits-pill:hover,
header.topbar .credits-pill[aria-expanded="true"] { background: var(--brand-tint); }
header.topbar .credits-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
header.topbar .credits-pill-packs { color: inherit; font-weight: var(--weight-semibold); }

/* Jauge : part du dernier niveau atteint par une recharge. */
.credits-gauge {
  display: inline-block;
  position: relative;
  width: 34px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
  flex: none;
}
.credits-gauge > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--brand); }
.credits-gauge.is-low > span, .is-low .credits-gauge > span { background: var(--status-pending-fg); }
.credits-gauge.is-critical > span, .is-critical .credits-gauge > span,
.credits-gauge.is-empty > span { background: var(--danger); }
.credits-gauge-lg { display: block; width: 100%; height: 8px; }

/* Palier bas : couleurs d'avertissement. */
/* Texte en --notice-fg (plus foncé que --status-pending-fg) : contraste ≥ 4,5:1 à 13 px. */
header.topbar .credits-pill.is-low { background: var(--status-pending-bg); color: var(--notice-fg); }
header.topbar .credits-pill.is-low strong { color: var(--notice-fg); }
header.topbar .credits-pill.is-low .icon-btn-svg { color: var(--status-pending-fg); }
header.topbar .credits-pill.is-low .credits-gauge { background: var(--card-bg); }
/* Palier critique : couleurs de danger, point qui pulse doucement. */
header.topbar .credits-pill.is-critical { background: var(--danger-bg); color: var(--danger-ink); box-shadow: inset 0 0 0 1px var(--danger-border); }
header.topbar .credits-pill.is-critical strong,
header.topbar .credits-pill.is-critical .icon-btn-svg { color: var(--danger); }
header.topbar .credits-pill.is-critical .credits-gauge { background: var(--card-bg); }
header.topbar .credits-pill-pulse {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--bg);
}
header.topbar .credits-pill-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--danger);
  animation: credits-pulse 1.8s ease-out infinite;
}
@keyframes credits-pulse {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  header.topbar .credits-pill-pulse::after { animation: none; }
}
/* Épuisé : fond de danger plein. */
header.topbar .credits-pill.is-empty { background: var(--danger); color: var(--danger-bg); }
header.topbar .credits-pill.is-empty strong,
header.topbar .credits-pill.is-empty .icon-btn-svg { color: var(--danger-bg); }

/* ---- Fenêtre de la pastille ---- */
header.topbar .credits-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: -8px;
  z-index: 70;
  width: min(340px, calc(100vw - 32px));
  padding: 14px 16px 16px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg), var(--shadow-xs);
  white-space: normal;
}
header.topbar .credits-panel[hidden] { display: none; }
.credits-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.credits-panel-title { font-size: 14px; font-weight: var(--weight-bold); color: var(--ink); }
.credits-panel-scope { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credits-big { margin: 4px 0 8px; font-size: 14px; color: var(--muted); }
.credits-big strong { font-size: 34px; line-height: 1.1; font-weight: var(--weight-heavy); color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 4px; }
.credits-big.is-low strong { color: var(--status-pending-fg); }
.credits-big.is-critical strong, .credits-big.is-empty strong { color: var(--danger); }
.credits-panel-meta { margin: 8px 0 0; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.credits-panel-sub { margin: 14px 0 4px; font-size: 12px; font-weight: var(--weight-semibold); color: var(--muted); }
.credits-moves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.credits-move { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border-soft); }
.credits-move:last-child { border-bottom: 0; }
.credits-move-text { display: flex; flex-direction: column; min-width: 0; }
.credits-move-label { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.credits-move-at { font-size: 11.5px; color: var(--muted); }
.credits-move-delta { font-size: 13px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.credits-move-delta.is-plus { color: var(--status-published-fg); }
.credits-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.credits-panel-status { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.credits-panel-status:empty { display: none; }

/* ---- Bandeaux sous la barre du haut ---- */
.credits-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 40px 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  background: var(--danger-bg);
  color: var(--danger-ink);
  box-shadow: inset 0 0 0 1px var(--danger-border);
}
.credits-banner .icon-btn-svg { width: 16px; height: 16px; flex: none; color: var(--danger); }
.credits-banner p { margin: 0; flex: 1; min-width: 0; line-height: 1.4; }
.credits-banner-link {
  flex: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  text-decoration: none;
  background: var(--danger);
  color: var(--danger-bg);
}
.credits-banner-link:hover { filter: brightness(1.08); }
.credits-banner-link:focus-visible, .credits-banner-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.credits-banner-close {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--danger-ink);
  background: transparent;
}
.credits-banner-close:hover { background: var(--card-bg); }
.credits-banner.is-empty { background: var(--danger); color: var(--danger-bg); box-shadow: none; }
.credits-banner.is-empty .icon-btn-svg { color: var(--danger-bg); }
.credits-banner.is-empty .credits-banner-link { background: var(--danger-bg); color: var(--danger-ink); }

/* ---- Coût sur les boutons d'IA (credits-cost.js) ---- */
.credits-cost { font-weight: var(--weight-semibold); opacity: 0.85; white-space: nowrap; }
.credits-cost:empty { display: none; }
.credits-cost-line { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--muted); }
.credits-cost-line[hidden], .credits-cost-recharge[hidden] { display: none; }
/* Bouton d'IA remplacé par « Recharger » : masqué par une classe, que le style
   propre du bouton (panneau de régénération de la fiche) ne peut pas annuler. */
.credits-cost-hidden { display: none !important; }
.credits-cost-line.is-low { color: var(--status-pending-fg); font-weight: var(--weight-semibold); }
.credits-cost-line.is-critical, .credits-cost-line.is-empty { color: var(--danger); font-weight: var(--weight-semibold); }
/* Dernière étape de la page Générer : fond sombre dans les deux modes, donc
   l'orange clair des grands panneaux sombres (--warning-on-deep, tokens.css). */
.step-card-generate .credits-cost-line { text-align: right; color: var(--muted-soft); }
.step-card-generate .credits-cost-line.is-low { color: var(--warning-on-deep); }
.step-card-generate .credits-cost-line.is-critical,
.step-card-generate .credits-cost-line.is-empty { color: var(--red); }
.gen-visuals-skipped { background: var(--outcome-warning-bg); }

/* ---- Page Crédits ---- */
.credits-page { max-width: var(--content-width-narrow); margin: 0 auto; padding: 0 24px 64px; }
.credits-card, .credits-figure, .credits-offer {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.credits-card { padding: 20px 22px; }
.credits-unlimited { margin: 0; color: var(--ink-soft); }
.credits-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.credits-figure { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; }
.credits-figure-label { font-size: 12.5px; color: var(--muted); font-weight: var(--weight-semibold); }
.credits-figure-value { font-size: 30px; line-height: 1.1; font-weight: var(--weight-heavy); color: var(--ink); font-variant-numeric: tabular-nums; }
.credits-figure.is-low .credits-figure-value { color: var(--status-pending-fg); }
.credits-figure.is-critical .credits-figure-value, .credits-figure.is-empty .credits-figure-value { color: var(--danger); }
.credits-figure-sub { font-size: 12.5px; color: var(--muted); }
.credits-section { margin-bottom: 30px; }
.credits-section h2 { font-size: var(--text-lg); margin: 0 0 12px; }
.credits-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.credits-offer { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.credits-offer.is-featured { box-shadow: var(--shadow-card), inset 0 0 0 2px var(--brand); }
.credits-offer-flag {
  position: absolute;
  top: -10px;
  left: 18px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  font-weight: var(--weight-bold);
  background: var(--brand);
  color: var(--on-brand);
}
.credits-offer-credits { font-size: 22px; font-weight: var(--weight-heavy); color: var(--ink); }
.credits-offer-price { font-size: 15px; font-weight: var(--weight-semibold); color: var(--brand-ink); }
.credits-offer-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.credits-offer button { margin-top: auto; }
.credits-request-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.credits-request-hint { font-size: 12.5px; color: var(--muted); }
.credits-status { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.credits-status:empty { display: none; }
.credits-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.credits-table td { white-space: normal; }
.credits-table .credits-move-delta { font-size: inherit; }
.credits-empty { color: var(--muted); }
.credits-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--muted); }

/* ---- Administration › Crédits (exploitant) ---- */
.credits-level-tag { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--weight-semibold); background: var(--surface-2); color: var(--ink-soft); white-space: nowrap; }
.credits-level-tag.is-normal { background: var(--status-validated-bg); color: var(--status-validated-fg); }
.credits-level-tag.is-low { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.credits-level-tag.is-critical, .credits-level-tag.is-empty { background: var(--danger-bg); color: var(--danger-ink); }
.credits-cost-alert { color: var(--danger); font-weight: var(--weight-bold); }
.credits-admin-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.credits-admin-actions .btn-secondary { padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }
/* Réglage d'un espace (bouton « Régler ») : fenêtre modale ; en bas de l'écran sur téléphone. */
.credits-dialog {
  width: min(400px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  border: 0;
  padding: 18px 20px 16px;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.credits-dialog::backdrop { background: var(--backdrop); }
.credits-dialog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.credits-dialog-head h3 { margin: 0; font-size: var(--text-lg); }
.credits-dialog-balance { font-size: 13px; color: var(--muted); white-space: nowrap; }
.credits-dialog-form { display: flex; flex-direction: column; gap: 10px; }
.credits-dialog-form .space-field { min-width: 0; }
.credits-dialog-form .space-field small { font-size: 11.5px; font-weight: var(--weight-regular); color: var(--muted); text-transform: none; letter-spacing: 0; }
.credits-dialog-form .btn-primary { align-self: stretch; }
.credits-dialog-preview { margin: 0; font-size: 13px; color: var(--ink-soft); }
.credits-dialog-preview:empty { display: none; }
.credits-dialog-preview.is-remove { color: var(--notice-fg); font-weight: var(--weight-semibold); }
.credits-dialog-preview.is-error { color: var(--danger); font-weight: var(--weight-semibold); }
.credits-dialog-cap { flex-direction: row; align-items: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.credits-dialog-cap .space-field { flex: 1; }
.credits-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.credits-dialog-status { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.credits-dialog-status:empty { display: none; }
.credits-field-hint { display: block; margin-top: 4px; font-size: 11.5px; font-weight: var(--weight-regular); color: var(--muted); text-transform: none; letter-spacing: 0; }
.credits-admin-toggle { display: inline-flex; align-items: center; gap: 4px; }

/* ---- Recharges et factures (page Crédits, onglet de l'exploitant) ---- */
.credits-cap-line { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.credits-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.credits-section-head h2 { margin: 0; }
.credits-periods { display: flex; flex-wrap: wrap; gap: 6px; }
.credits-period {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--surface-2);
}
.credits-period:hover { background: var(--surface-2-hover); }
.credits-period.is-current { background: var(--inverse); color: var(--on-inverse); }
.credits-period:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.credits-state { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: var(--weight-semibold); white-space: normal; background: var(--surface-2); color: var(--ink-soft); }
.credits-state.is-to_invoice, .credits-state.is-pending { background: var(--status-pending-bg); color: var(--notice-fg); }
.credits-state.is-invoiced { background: var(--status-validated-bg); color: var(--status-validated-fg); }
.credits-state.is-paid { background: var(--status-published-bg); color: var(--status-published-fg); }
.credits-state.is-refused, .credits-state.is-cancelled { background: var(--surface-2); color: var(--muted); }
.credits-total { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.credits-total strong { color: var(--ink); }
.credits-total-hint { font-size: 12px; color: var(--muted); }
.credits-billing { margin-top: 28px; }
.credits-billing h2 { font-size: var(--text-lg); margin: 0 0 12px; }
.credits-billing-sub { margin: 18px 0 8px; font-size: 14px; color: var(--ink-soft); }
.credits-to-invoice { color: var(--notice-fg); font-weight: var(--weight-bold); }
.credits-row-actions { flex-direction: row; flex-wrap: wrap; }
.credits-invoice-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; padding: 16px; border-radius: var(--radius-md); background: var(--card-bg); box-shadow: var(--shadow-card); }
.credits-invoice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.credits-invoice-grid .space-field { min-width: 0; }
.credits-invoice-grid input, .credits-invoice-grid select { width: 100%; min-width: 0; }
/* Menus du dépôt d'une facture : même allure que les champs de l'administration, chevron des jetons. */
.credits-invoice-grid select {
  appearance: none;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 12px 36px 12px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface-2) var(--select-chevron) no-repeat right 12px center;
}
.credits-invoice-grid select:focus { outline: none; box-shadow: var(--focus-ring); }
.credits-invoice-grid input[type="file"] { padding: 8px 12px; font-weight: 400; }
.credits-invoice-topups { margin: 0; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.credits-invoice-topups[hidden] { display: none; }
.credits-invoice-topups legend { padding: 0 4px; font-size: 12.5px; color: var(--muted); }
.credits-invoice-form > .btn-primary { align-self: flex-start; }

/* ---- Téléphone ---- */
@media (max-width: 720px) {
  .credits-dialog { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 90vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  header.topbar .credits { position: static; }
  header.topbar .credits-panel { top: 60px; left: 16px; right: 16px; width: auto; }
  header.topbar .credits-pill { padding: 0 10px 0 8px; gap: 5px; }
  header.topbar .credits-pill-gauge,
  header.topbar .credits-pill-packs { display: none; }
  .credits-banner { margin: 0 16px 10px; flex-wrap: wrap; }
  .credits-banner p { flex-basis: calc(100% - 60px); }
  .credits-page { padding: 0 16px 48px; }
  .credits-figures, .credits-offers, .credits-prices { grid-template-columns: 1fr; }
  .credits-offers { gap: 20px; }
}
@media (max-width: 420px) {
  header.topbar .credits-pill-unit { display: none; }
}

/* ---- 29-sans-ia.css ---- */
/* Pack créé sans IA : entrée de la page Générer (mise en avant quand les
   crédits ne couvrent plus une rédaction), lien « Créer le pack sans IA » à
   côté de « Recharger » (credits-cost.js), page dashboard/manual_pack.php.
   Couleurs : jetons seulement (tokens.css). */

/* ---- Entrée de la page Générer ---- */
.manual-pack-entry {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.manual-pack-entry p { flex: 1 1 220px; margin: 0; }
.manual-pack-entry strong { color: var(--ink); font-weight: var(--weight-bold); }
.manual-pack-entry .btn-secondary { flex: none; }
.manual-pack-entry.is-highlighted { border: 2px solid var(--brand); background: var(--brand-tint); }

/* Lien à côté de « Recharger » quand il manque des crédits. */
.credits-cost-manual[hidden] { display: none; }
.step-card-generate .credits-cost-manual { color: #fff; background: rgba(255, 255, 255, 0.14); }
.step-card-generate .credits-cost-manual:hover { color: #fff; background: rgba(255, 255, 255, 0.24); }
.step-card-generate .credits-cost-manual:focus-visible { box-shadow: var(--focus-ring-dark); }

/* ---- Page « Créer un pack sans IA » ---- */
.manual-pack[data-type="video"] [data-for="linkedin"],
.manual-pack[data-type="linkedin"] [data-for="video"] { display: none; }
.manual-type-choice { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.manual-field + .manual-field { margin-top: 16px; }
.manual-field input[type="text"],
.manual-field textarea { width: 100%; }
.manual-field .checkbox-row { margin-top: 10px; }
.manual-required { font-size: 11px; font-weight: var(--weight-semibold); color: var(--brand-ink); text-transform: lowercase; }
.manual-pack .dropzone { padding: 24px 16px; }
.manual-pack .space-reset { margin-top: 8px; }
.manual-pack .post-photo-list:not(:empty) { margin-top: 12px; }
.manual-network-head { flex-wrap: nowrap; justify-content: space-between; gap: 12px; }
.manual-network-head select { flex: 0 1 200px; min-width: 0; }
.manual-network-count { display: block; margin-top: 4px; text-align: right; font-size: 12px; color: var(--ink-soft); }
.manual-network-count.is-error { color: var(--danger); font-weight: var(--weight-semibold); }
.manual-network textarea { margin-top: 8px; }
.manual-network-notice { margin-top: 8px; color: var(--ink); font-weight: var(--weight-semibold); }
.manual-network-notice:empty { display: none; }
.manual-network-add { margin-top: 12px; }
.manual-network-add[hidden], .manual-network-remove[hidden] { display: none; }
.manual-thumb-modes { margin-bottom: 12px; }
.manual-thumb-panel[hidden] { display: none; }
.manual-hashtags-count:empty { display: none; }
.manual-hashtags-count.is-error { color: var(--danger); font-weight: var(--weight-semibold); }
.manual-frames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.manual-frame {
  position: relative;
  display: block;
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: var(--placeholder);
}
.manual-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.manual-frame input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.manual-frame:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }
.manual-frame:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.manual-pack .notice[hidden] { display: none; }

@media (max-width: 720px) {
  .manual-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manual-pack-entry .btn-secondary { width: 100%; justify-content: center; }
}

/* ---- 30-explorateur-stats.css ---- */
/* Explorateur des statistiques (dashboard/stats_explorer.php), réservé à l'exploitant. */
.sx-page { max-width: var(--content-width-wide); margin: 0 auto; padding: 0 20px 48px; }
.sx-card { background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 18px 20px; }
.sx-empty { margin: 0; color: var(--ink-soft); }
.sx-section { margin-bottom: 28px; }
.sx-section h2 { font-size: var(--text-lg); margin: 0 0 12px; }
.sx-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sx-section-head h2 { margin: 0; }

.sx-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 14px; }
.sx-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sx-field > span, .sx-field legend, .sx-folders summary span { font-size: var(--text-xs); color: var(--muted); font-weight: var(--weight-semibold); padding: 0; }
.sx-field select, .sx-field input { height: var(--control-h-md); }
.sx-period { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.sx-period legend { width: 100%; margin-bottom: 4px; }
.sx-period.is-a legend::before, .sx-period.is-b legend::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sx-period.is-a legend::before, .sx-key.is-a, .sx-bar.is-a { background: var(--brand); }
.sx-period.is-b legend::before, .sx-key.is-b, .sx-bar.is-b { background: var(--muted-soft); }
.sx-folders { position: relative; }
.sx-folders summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.sx-folders summary::-webkit-details-marker { display: none; }
.sx-folders summary strong { display: flex; align-items: center; height: var(--control-h-md); padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card-bg); font-weight: var(--weight-medium); }
.sx-folder-list { position: absolute; z-index: var(--z-dropdown); top: 100%; left: 0; margin-top: 4px; width: 300px; max-height: 340px; overflow-y: auto; padding: 10px 12px; background: var(--card-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 6px; }
.sx-folder-list label { display: flex; gap: 8px; align-items: center; font-size: var(--text-sm); }
.sx-actions { margin-left: auto; }

.sx-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sx-preset { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink); font-size: var(--text-sm); text-decoration: none; }
.sx-preset:hover { background: var(--surface-2-hover); }
.sx-preset.is-active { background: var(--inverse); color: var(--on-inverse); }

.sx-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.sx-figure { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; background: var(--card-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.sx-figure.is-a { box-shadow: var(--shadow-card), inset 3px 0 0 var(--brand); }
.sx-figure.is-b { box-shadow: var(--shadow-card), inset 3px 0 0 var(--muted-soft); }
.sx-figure-label { font-size: 12.5px; color: var(--muted); font-weight: var(--weight-semibold); }
.sx-figure-value { font-size: 30px; line-height: 1.1; font-weight: var(--weight-heavy); color: var(--ink); font-variant-numeric: tabular-nums; }
.sx-figure-sub { font-size: 12.5px; color: var(--muted); }
.sx-warn { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--status-pending-bg); color: var(--status-pending-fg); font-size: var(--text-xs); font-weight: var(--weight-semibold); white-space: nowrap; }
.is-up { color: var(--status-published-fg); }
.is-down { color: var(--danger); }
.sx-figure-value.is-up { color: var(--status-published-fg); }
.sx-figure-value.is-down { color: var(--danger); }

.sx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; font-size: var(--text-sm); color: var(--ink-soft); }
.sx-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.sx-legend-note { color: var(--muted); margin-left: auto; }
.sx-chart { display: flex; align-items: flex-end; gap: 2px; height: 220px; padding-top: 6px; border-bottom: 1px solid var(--border-soft); }
.sx-col { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 1px; }
.sx-col:hover { background: var(--surface-sunken); }
/* Beaucoup de colonnes (par jour sur une longue période) : sans espace, rien ne déborde. */
.sx-chart { overflow: hidden; min-width: 0; }
.sx-chart.is-dense, .sx-chart.is-dense .sx-col { gap: 0; }
.sx-chart.is-dense .sx-bar { width: 50%; border-radius: 0; }
.sx-bar { display: block; width: 45%; max-width: 22px; border-radius: 3px 3px 0 0; min-height: 0; }
.sx-chart-axis { display: flex; justify-content: space-between; margin: 6px 0 10px; font-size: var(--text-xs); color: var(--muted); }

.sx-sub { color: var(--muted); font-size: 12px; }
.sx-table td:first-child, .sx-matrix td:first-child, .sx-posts td:nth-child(3) { white-space: normal; }
.sx-posts td:nth-child(3) { min-width: 280px; }
.sx-page .sx-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-table th a { color: inherit; text-decoration: none; }
.sx-table th a[aria-current] { color: var(--brand-ink); }
.sx-matrix-wrap { overflow-x: auto; }
.sx-matrix td, .sx-matrix th { font-size: var(--text-sm); }
.sx-heat.is-0 { background: transparent; }
.sx-heat.is-1 { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.sx-heat.is-2 { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.sx-heat.is-3 { background: color-mix(in srgb, var(--brand) 32%, transparent); }
.sx-heat.is-4 { background: color-mix(in srgb, var(--brand) 46%, transparent); }

@media (max-width: 720px) {
  .sx-page { padding: 0 16px 40px; }
  .sx-chart, .sx-col { gap: 0; }
  /* Cartes du tableau : les chiffres et leurs pastilles passent à la ligne. */
  .sx-page .sx-num, .sx-warn { white-space: normal; }
  .sx-filters { flex-direction: column; align-items: stretch; }
  .sx-field select, .sx-field input { width: 100%; }
  .sx-period input { flex: 1 1 0; min-width: 0; }
  .sx-folder-list { position: static; width: auto; box-shadow: none; padding: 6px 0; }
  .sx-actions { margin-left: 0; }
  .sx-actions .btn { width: 100%; }
  .sx-figures { grid-template-columns: 1fr; }
  .sx-figure-value { font-size: 24px; }
  .sx-chart { height: 160px; }
  .sx-legend-note { margin-left: 0; width: 100%; }
  .sx-matrix-wrap { overflow-x: visible; }
}