/* ── Calque dans le lecteur ────────────────────────────────────────────────────
   Puce, badge et cartes vivent DANS #movie_player (et non plus en fixed sur
   la page, où ils recouvraient le logo et les boutons du masthead, et où les
   cartes tombaient sur la colonne de recommandations / le chat au lieu de la
   vidéo). Le calque suit le mode cinéma et le plein écran. z-index 58 : au-
   dessus de la vidéo et des sous-titres, sous la barre de contrôle (59) et
   les menus du lecteur. Container queries : tailles adaptées à la taille du
   lecteur, masquage dans le mini-lecteur. */

#fct-layer {
  position: absolute;
  inset: 0;
  z-index: 58;
  pointer-events: none;
  container: fct / size;
  /* le lecteur impose 11px / 14.3px / sa police : on repart d'une base propre */
  font-family: 'FCT Archivo', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  color: #fff;
  text-align: left;
  letter-spacing: normal;
  /* Placement : tout est en haut du lecteur — le bas droit appartient à
     YouTube (paramètres, logo de la chaîne, boutons rapides du plein écran) */
  --fct-edge: 12px;   /* marge au bord du lecteur */
  --fct-chip-h: 38px; /* hauteur de la puce : les cartes se posent dessous */
}
/* Hors YouTube : calque fixe recalé sur le rectangle du lecteur (inline
   left/top/width/height, voir overlayRoot), ou plein écran d'un conteneur */
#fct-layer.fct-layer--rect {
  position: fixed;
  inset: auto;
  z-index: 2147483000;
}
#fct-layer.fct-layer--fs {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
}
/* Repli sans lecteur trouvé : calque sur la page, sous le masthead */
#fct-layer.fct-layer--page {
  position: fixed;
  inset: 64px 0 0 0;
  z-index: 10000;
}

/* ── Status chip ───────────────────────────────────────────────────────────── */

#fct-chip {
  position: absolute;
  top: var(--fct-edge);
  right: var(--fct-edge);
  box-sizing: border-box;
  height: var(--fct-chip-h);
  z-index: 2; /* jamais recouverte par une carte */
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px 7px 11px;
  border-radius: 999px;
  background: rgba(16, 18, 22, 0.65);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
  font-family: 'FCT Archivo', system-ui, sans-serif;
}

.fct-ping {
  position: relative;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.fct-ping-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: oklch(0.74 0.13 145);
}
.fct-ping-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: oklch(0.74 0.13 145);
  animation: fct-ping 1.8s ease-out infinite;
}

/* États de connexion (classe posée sur #fct-chip par le content script) */
.fct-chip--warn .fct-ping-core,
.fct-chip--warn .fct-ping-ring  { background: oklch(0.78 0.15 75); }
.fct-chip--warn .fct-chip-sub   { color: oklch(0.78 0.15 75); }
.fct-chip--error .fct-ping-core,
.fct-chip--error .fct-ping-ring { background: oklch(0.62 0.20 25); }
.fct-chip--error .fct-ping-ring { animation: none; }
.fct-chip--error .fct-chip-sub  { color: oklch(0.72 0.16 28); }
/* Analyse terminée : plus de pulsation, point gris */
.fct-chip--ended .fct-ping-core { background: rgba(255, 255, 255, 0.45); }
.fct-chip--ended .fct-ping-ring { display: none; }

.fct-chip-brand {
  font-family: 'FCT Newsreader', serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.fct-chip-dot { color: #e0324f; }
.fct-chip-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46cqw;
}

.fct-chip-stop {
  background: rgba(224, 50, 79, 0.12);
  border: 1px solid rgba(224, 50, 79, 0.3);
  border-radius: 999px;
  color: rgba(224, 50, 79, 0.85);
  font-size: 10px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: 'FCT Archivo', system-ui, sans-serif;
}
.fct-chip-stop:hover {
  background: rgba(224, 50, 79, 0.25);
  color: #f28a9c;
}

.fct-chip-recap {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'FCT Archivo', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fct-chip-recap:hover,
.fct-chip-recap--active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.fct-chip-recap--pulse {
  animation: fct-pop 0.45s ease;
}

/* ── Badge "qui parle" (haut gauche) ───────────────────────────────────────── */

#fct-speaker-badge {
  position: absolute;
  top: var(--fct-edge);
  left: var(--fct-edge);
  display: flex;
  align-items: flex-end; /* le texte repose sur le bas de l'équaliseur (voir .fct-badge-name) */
  gap: 9px;
  padding: 9.5px 14px 9.5px 12px;
  border-radius: 999px;
  background: rgba(16, 18, 22, 0.65);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(224, 50, 79, 0);
  font-family: 'FCT Archivo', system-ui, sans-serif;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.25, 1),
    border-radius 0.35s ease, box-shadow 0.5s ease;
}
#fct-speaker-badge.fct-badge--on {
  opacity: 1;
  transform: none;
}
/* Nom connu, empreinte vocale pas encore en banque : la pastille passe en 2
   lignes (nom + "empreinte vocale…" juste dessous) — l'équaliseur se
   recentre alors sur le bloc de texte plutôt que de rester calé sur la
   dernière ligne. */
#fct-speaker-badge.fct-badge--enrolling {
  border-radius: 16px;
  padding-top: 9px;
  padding-bottom: 9px;
  align-items: center;
}

#fct-speaker-badge.fct-badge--pulsing { animation: fct-badge-pop 0.46s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* Anneau qui pulse au moment précis où un nom vient d'être identifié
   (transition état gris/en recherche → nom connu). */
#fct-speaker-badge.fct-badge--flash { animation: fct-badge-ring 0.65s ease-out; }

.fct-badge-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  transition: color 0.4s ease; /* le texte grise EXACTEMENT comme l'équaliseur */
}
/* Une seule ligne : boîte de texte rognée aux capitales en haut et à la
   ligne de base en bas. Sans ça, calée par le bas, la boîte gardait sous les
   lettres la place des jambages (≈ 4,4 px) : le texte flottait au-dessus des
   barres de l'équaliseur, collé vers le haut du badge. */
#fct-speaker-badge:not(.fct-badge--enrolling) .fct-badge-name {
  display: block;
  text-box: trim-both cap alphabetic;
}
/* Le gap n'existe qu'en état 2 lignes : sinon il laisse un blanc fantôme
   sous le texte (la ligne d'empreinte repliée compte pour 0px mais le gap
   restait), ce qui décalait le texte hors du bas réel du badge. */
#fct-speaker-badge.fct-badge--enrolling .fct-badge-name { gap: 3px; }
#fct-speaker-badge.fct-badge--pending-id .fct-badge-name { color: rgba(255, 255, 255, 0.58); }
#fct-speaker-badge.fct-badge--unknown .fct-badge-name { font-style: italic; }

.fct-badge-enroll-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.22, 0.9, 0.3, 1.05);
}
#fct-speaker-badge.fct-badge--enrolling .fct-badge-enroll-wrap { grid-template-rows: 1fr; }
.fct-badge-enroll-inner { overflow: hidden; }
.fct-badge-enroll {
  opacity: 0;
  transform: translateX(-6px);
  /* padding vertical : laisse la place au point vert agrandi (transform:scale,
     cf. .fct-ident-icon--done) sans que l'overflow:hidden du repli ne le rogne */
  padding: 3px 0;
  transition: opacity 0.32s ease 0.1s, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
#fct-speaker-badge.fct-badge--enrolling .fct-badge-enroll { opacity: 1; transform: translateX(0); }
.fct-badge-enroll-text {
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.fct-eq {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 12px;
  flex-shrink: 0;
}
.fct-eq span {
  width: 3px;
  border-radius: 2px;
  background: #e0324f;
  animation: fct-eq 1s ease-in-out infinite;
  transition: background 0.4s ease;
}
.fct-eq span:nth-child(2) { animation-delay: 0.2s; }
.fct-eq span:nth-child(3) { animation-delay: 0.4s; }

@keyframes fct-eq {
  0%, 100% { height: 4px; }
  50%      { height: 12px; }
}

/* Locuteur en cours d'identification ou jamais identifié — même petit
   vocabulaire visuel que le spinner/point de verdict des cartes (spinner =
   recherche en cours, point statique = verdict tombé), appliqué ici à la
   voix plutôt qu'au fait.
   Dans le badge, tant que le NOM lui-même n'est pas connu, une 2e icône
   animée à côté de l'équaliseur ferait surcharge pour rien : seule sa
   couleur porte cet état (rouge/gris, cf. fct-badge--pending-id). Une fois
   le nom connu, la capture d'empreinte vocale (fct-badge-enroll ci-dessous)
   réutilise ce même .fct-ident — le badge a alors la place pour elle. */
.fct-ident {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fct-ident-icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fct-ident-icon--progress {
  border: 1.4px solid rgba(255, 255, 255, 0.22);
  border-top-color: oklch(0.72 0.14 240); /* même bleu que le tag AFFIRMATION */
  animation: fct-spin 0.7s linear infinite;
}
.fct-ident-icon--unknown {
  background: rgba(255, 255, 255, 0.32);
}
/* Capture d'empreinte réussie : l'anneau qui tourne devient un point plein
   vert avec un petit rebond d'échelle, affiché un instant avant que la ligne
   ne se replie (séquence gérée en JS, voir onVoiceEnrolled dans content.js). */
.fct-ident-icon--done {
  animation: none;
  border: none;
  background: oklch(0.75 0.16 145);
  transform: scale(1.2);
}
.fct-ident--progress { color: oklch(0.72 0.14 240); }
.fct-ident--unknown { color: rgba(255, 255, 255, 0.4); font-style: italic; }
.fct-ident--done { color: oklch(0.75 0.16 145); }

#fct-speaker-badge.fct-badge--pending-id .fct-eq span {
  background: rgba(255, 255, 255, 0.35); /* équaliseur rouge = voix identifiée ; gris = en recherche */
}

@keyframes fct-badge-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}
@keyframes fct-badge-ring {
  0%   { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(224, 50, 79, 0.45); }
  100% { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 0 11px rgba(224, 50, 79, 0); }
}

/* ── Card slot ─────────────────────────────────────────────────────────────── */

#fct-card-slot {
  position: absolute;
  top: calc(var(--fct-edge) + var(--fct-chip-h) + 8px); /* sous la puce */
  right: var(--fct-edge);
  width: min(400px, 44cqw);
  pointer-events: none;
}

/* Plein écran, contrôles affichés : YouTube pose le titre de la vidéo en
   haut à gauche (.ytp-fullscreen-metadata, au-dessus du calque). Le badge
   s'efface le temps qu'ils sont visibles au lieu de laisser, en permanence,
   une bande vide en haut de l'écran. */
#movie_player.ytp-fullscreen:not(.ytp-autohide) #fct-speaker-badge { opacity: 0; }



/* ── Card ──────────────────────────────────────────────────────────────────── */

.fct-card {
  position: relative;
  background: linear-gradient(180deg, rgba(22, 24, 29, 0.84), rgba(15, 16, 20, 0.82));
  backdrop-filter: blur(26px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow:
    0 32px 84px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 10px 50px color-mix(in oklch, var(--accent) 12%, transparent);
  overflow: hidden;
  pointer-events: all;
  font-family: 'FCT Archivo', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.95);

  opacity: 0;
  transform: translateX(34px) scale(0.97);
  filter: blur(7px);
  transition:
    opacity 0.52s ease,
    transform 0.62s cubic-bezier(0.2, 0.9, 0.25, 1),
    filter 0.52s ease,
    box-shadow 0.55s ease;
}

.fct-card--in {
  opacity: 1;
  transform: none;
  filter: none;
}

.fct-card--out {
  opacity: 0;
  transform: translateX(34px) scale(0.97);
  filter: blur(7px);
}

/* Accent bar */
.fct-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
}
.fct-bar-fill {
  height: 100%;
  background: var(--accent);
  transition: background 0.55s ease;
}
.fct-bar-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  animation: fct-shimmer 3.4s ease-in-out infinite;
}

/* Inner glow overlay */
.fct-inner-glow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.fct-card-inner {
  padding: 16px 19px 17px;
}

/* Card header */
.fct-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}

.fct-brand {
  font-family: 'FCT Newsreader', serif;
  font-style: italic;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}
.fct-brand-diamond {
  color: var(--accent);
  font-size: 9px;
  margin-right: 5px;
  transition: color 0.55s ease;
}
.fct-brand-dot {
  color: var(--accent);
  transition: color 0.55s ease;
}

/* Tag pill */
.fct-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 9px;
  border-radius: 20px;
  background: color-mix(in oklch, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 42%, transparent);
  transition: background 0.5s ease, border-color 0.5s ease;
}
.fct-tag-text {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  transition: color 0.5s ease;
}

/* Tag icon — spinner state */
.fct-spinner-icon {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(255, 255, 255, 0.8);
  animation: fct-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* Tag icon — resolved dot state */
.fct-dot-icon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  transition: background 0.55s ease;
  border: none;
  animation: none;
}

/* Locuteur (diarisation) + position dans la vidéo */
.fct-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  min-height: 14px;
}
.fct-speaker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.5s ease;
}
.fct-card-ts {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'FCT Plex Mono', monospace;
  font-size: 10px;
  padding: 1px 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fct-card-ts:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Claim — tronquée au-delà de 4 lignes sur la vidéo (texte complet au récap) */
.fct-claim {
  margin: 0 0 12px;
  font-family: 'FCT Newsreader', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.34;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.97);
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Mots exacts du propos (récap) */
.fct-recap-quote .fct-quote-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 4px;
}

/* Checking */
.fct-checking {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
}
.fct-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.72);
  animation: fct-spin 0.72s linear infinite;
  flex-shrink: 0;
}
.fct-checking span:last-child {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

/* Body — 5 lignes max sur la vidéo (texte complet au récap) */
.fct-body {
  margin: 0 0 0;
  font-size: 13px;
  line-height: 1.52;
  color: rgba(255, 255, 255, 0.74);
  min-height: 42px;
}
.fct-body[style*="block"] {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* Footer */
.fct-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.fct-source {
  font-family: 'FCT Plex Mono', monospace;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 10px;
}
.fct-source a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
  transition: color 0.15s, border-color 0.15s;
}
.fct-source a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}
.fct-footer-right {
  font-size: 10.5px;
  font-weight: 500;
  transition: color 0.5s ease;
}

/* Verdict + bouton ⚑ en bout de pied de carte / de récap */
.fct-footer-end {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.fct-report {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'FCT Archivo', system-ui, sans-serif;
  font-size: 10.5px;
  line-height: 1;
  padding: 3px 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fct-report:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.fct-report--done { cursor: default; border-color: transparent; color: rgba(255, 255, 255, 0.5); }

/* Menu des motifs de signalement, sous le pied de carte */
.fct-report-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.fct-report-title {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 2px;
}
.fct-report-menu button {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'FCT Archivo', system-ui, sans-serif;
  font-size: 10.5px;
  padding: 3px 9px;
  cursor: pointer;
}
.fct-report-menu button:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.fct-report-menu .fct-report-close { border-color: transparent; background: none; color: rgba(255, 255, 255, 0.55); }

/* Rise-in animation for resolved content */
.fct-risein {
  animation: fct-risein 0.4s ease both;
}

/* ── Repères sur la barre de progression YouTube ───────────────────────────── */

#fct-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 34;
}
.fct-marker {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 4px;
  margin-left: -2px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

/* ── Recap panel ───────────────────────────────────────────────────────────── */

/* Panneau de page (pas dans le lecteur : il a besoin de hauteur), sous le
   masthead YouTube (56 px) plutôt que par-dessus */
#fct-recap {
  position: fixed;
  top: 64px;
  right: 20px;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 84px);
  line-height: 1.35;
  text-align: left;
  background: linear-gradient(180deg, rgba(18, 20, 26, 0.95), rgba(12, 13, 18, 0.95));
  backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 32px 84px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
  z-index: 10000; /* au-dessus des cartes : une carte (même sortie) ne doit jamais bloquer les clics du récap */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'FCT Archivo', system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.9);

  opacity: 0;
  transform: translateX(20px) scale(0.98);
  transition: opacity 0.32s ease, transform 0.38s cubic-bezier(0.2, 0.9, 0.25, 1);
}
#fct-recap.fct-recap--in {
  opacity: 1;
  transform: none;
}

.fct-recap-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}
.fct-recap-title {
  font-family: 'FCT Newsreader', serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.fct-recap-filter,
.fct-recap-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'FCT Archivo', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fct-recap-filter:hover,
.fct-recap-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Filtre à deux états : l'état actif est visible (l'ancien bouton unique
   affichait l'action, pas l'état) */
.fct-seg {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
}
.fct-seg button {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'FCT Archivo', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fct-seg button + button { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.fct-seg button:hover { color: #fff; }
.fct-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: #fff; }

.fct-recap-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  flex-shrink: 0;
}
.fct-recap-stats-sep { color: rgba(255, 255, 255, 0.2); }

.fct-recap-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fct-recap-body::-webkit-scrollbar { width: 4px; }
.fct-recap-body::-webkit-scrollbar-track { background: transparent; }
.fct-recap-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.fct-recap-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  text-align: center;
}

.fct-recap-card {
  position: relative;
  background: rgba(22, 24, 30, 0.7);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  display: flex;
  /* overflow: hidden (coins arrondis) autorise un élément flex à rétrécir
     jusqu'à 0 : sans ça, au-delà d'une quinzaine de points, la liste
     écrasait toutes les cartes à quelques pixels au lieu de défiler */
  flex-shrink: 0;
}
.fct-recap-bar {
  width: 3px;
  flex-shrink: 0;
  background: var(--accent);
}
.fct-recap-card-inner {
  padding: 10px 13px 11px;
  flex: 1;
}
.fct-recap-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 6px;
}
.fct-recap-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
}
.fct-recap-pending {
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.55);
}
.fct-recap-speaker {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
}
.fct-recap-claim {
  margin: 0 0 6px;
  font-family: 'FCT Newsreader', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.38;
  color: rgba(255, 255, 255, 0.9);
}
.fct-recap-quote {
  margin: -2px 0 6px;
  padding-left: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
}
.fct-recap-explanation {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.fct-recap-footer {
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fct-recap-src {
  font-family: 'FCT Plex Mono', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
a.fct-recap-src:hover { color: #fff; }

.fct-recap-ts {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'FCT Plex Mono', monospace;
  font-size: 10px;
  padding: 2px 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fct-recap-ts:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.fct-recap-footer-right {
  font-size: 10.5px;
  font-weight: 500;
}

/* ── Dots ──────────────────────────────────────────────────────────────────── */

.fct-dots { display: flex; gap: 5px; }
.fct-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  animation: fct-bounce 1.2s infinite;
}
.fct-dots span:nth-child(2) { animation-delay: 0.2s; }
.fct-dots span:nth-child(3) { animation-delay: 0.4s; }

/* ── Keyframes ─────────────────────────────────────────────────────────────── */

@keyframes fct-ping {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

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

@keyframes fct-shimmer {
  0%       { transform: translateX(-120%); }
  60%, 100% { transform: translateX(420%); }
}

@keyframes fct-risein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fct-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

@keyframes fct-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ── Tailles de lecteur (container queries) ──────────────────────────────────
   En fin de fichier : à spécificité égale, ces règles doivent passer APRÈS
   les règles de base qu'elles ajustent. */

/* Lecteur étroit (fenêtre réduite) : cartes plus compactes */
@container fct (max-width: 760px) {
  #fct-card-slot { width: min(330px, 58cqw); }
  .fct-card-inner { padding: 12px 14px 13px; }
  .fct-claim { font-size: 15.5px; }
  .fct-body { font-size: 12px; min-height: 0; }
  .fct-card-head { margin-bottom: 9px; }
}
/* Mini-lecteur / lecteur minuscule : ni cartes ni badge (illisibles),
   la puce se réduit à son point et au compteur du récap */
@container fct (max-width: 480px) {
  #fct-card-slot, #fct-speaker-badge { display: none; }
  .fct-chip-brand, .fct-chip-sub { display: none; }
}
/* Lecteur bas : cartes plus courtes pour ne pas descendre jusqu'à la barre de contrôle */
@container fct (max-height: 460px) {
  .fct-claim { -webkit-line-clamp: 3; }
  .fct-body[style*="block"] { -webkit-line-clamp: 3; }
  .fct-checking, .fct-body { min-height: 0; }
  .fct-footer { margin-top: 8px; padding-top: 8px; }
}
@container fct (max-height: 300px) {
  #fct-card-slot { display: none; }
}

/* ── Fiche de fin de débat (onglet du récap) ───────────────────────────────── */

.fct-fiche { display: flex; flex-direction: column; gap: 8px; }
.fct-fiche-h {
  margin: 8px 0 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.fct-fiche-resume {
  margin: 0;
  font-family: 'FCT Newsreader', serif;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}
.fct-fiche-note { margin: 0; font-size: 11px; line-height: 1.45; color: rgba(255, 255, 255, 0.55); }
.fct-fiche-deb {
  padding: 9px 12px 10px;
  background: rgba(22, 24, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  flex-shrink: 0;
}
.fct-fiche-deb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.fct-fiche-name { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.fct-fiche-idx { font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.fct-fiche-idx small { font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, 0.55); }
.fct-fiche-idx--na { font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.fct-fiche-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 1px; margin-bottom: 6px; }
.fct-fiche-bar i { display: block; min-width: 2px; }
.fct-fiche-counts { font-size: 10.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }
.fct-fiche-themes { list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
.fct-fiche-themes li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.fct-fiche-themes li span:last-child { color: rgba(255, 255, 255, 0.55); white-space: nowrap; }