/* styles/theme/pinboard/console-brief.css
 * ══════════════════════════════════════════════════════════════════
 * BRIEF "CONSOLE MACHINE" (handoff "New Paris" §01, briefs.jsx).
 * Plaque rivetée métal-dark haute (badge ligne + kicker + LED PRÊT)
 * + écran CRT ambre à scan-lines en bas (instruction + endpoints).
 *
 * Compat : utilisé par .trace-mission (IDs existants #traceMissionLine,
 * #traceMissionLabel, #traceMissionFrom, #traceMissionTo remplis par
 * src/ui/trace-mode.js). La classe .console-brief est posée côté
 * HTML en plus de .trace-mission pour activer ce style.
 *
 * Préfixe exclusif : .cb-* (console brief).
 * ══════════════════════════════════════════════════════════════════ */

.pinboard-theme .console-brief{
  /* Width adaptative : la carte grandit avec le texte le plus long
     (ex. MAIRIE DE MONTREUIL) grâce à max-content, tout en respectant
     un minimum pour conserver le layout en mode court (DESSINE…). */
  width:max-content;
  min-width:460px;
  max-width:calc(100vw - 32px);
  padding:14px;
  border:1px solid #6d6a63;
  border-radius:2px;
  background:
    /* grain brossé vertical fin */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.12) 0 1px,
      transparent 1px 2px),
    linear-gradient(180deg, #e4e1da 0%, #b9b4a8 100%);
  box-shadow:
    0 8px 24px rgba(0,0,0,.5),
    inset 0 2px 0 rgba(255,255,255,.4);
  /* 4 vis aux coins (radial-gradients en background) */
  background-image:
    radial-gradient(circle at 13px 13px, #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at calc(100% - 13px) 13px, #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at 13px calc(100% - 13px), #8b8679 0%, #4a463d 55%, transparent 60%),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #8b8679 0%, #4a463d 55%, transparent 60%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.12) 0 1px,
      transparent 1px 2px),
    linear-gradient(180deg, #e4e1da 0%, #b9b4a8 100%);
  background-size:10px 10px, 10px 10px, 10px 10px, 10px 10px, auto, auto;
  background-position:8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), 0 0, 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}

/* ─── PLAQUE D'IDENTIFICATION RIVETÉE (bandeau noir du haut) ── */
.pinboard-theme .cb-plate{
  position:relative;
  display:flex; align-items:center; gap:14px;
  padding:10px 14px 12px 12px;
  margin-bottom:10px;
  border:1px solid #000;
  background:linear-gradient(180deg, #2a2d30 0%, #14181d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -2px 6px rgba(0,0,0,.5);
  /* 4 rivets crème aux coins */
  background-image:
    radial-gradient(circle at 7px 7px, #c9bfa3 0%, #4a463d 90%, transparent 95%),
    radial-gradient(circle at calc(100% - 7px) 7px, #c9bfa3 0%, #4a463d 90%, transparent 95%),
    radial-gradient(circle at 7px calc(100% - 7px), #c9bfa3 0%, #4a463d 90%, transparent 95%),
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #c9bfa3 0%, #4a463d 90%, transparent 95%),
    linear-gradient(180deg, #2a2d30 0%, #14181d 100%);
  background-size:5px 5px, 5px 5px, 5px 5px, 5px 5px, auto;
  background-position:4px 4px, calc(100% - 4px) 4px, 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), 0 0;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat;
}

/* Badge ligne : wrapper qui contient le chip rond coloré injecté
 * par trace-mode.js. On force la taille du chip interne pour qu'il
 * ait l'allure d'un gros pastille 56×56 identique au handoff. */
.pinboard-theme .cb-plate-badge-wrap,
.pinboard-theme #traceMissionLine{
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:10px;
}
.pinboard-theme .cb-plate-badge-wrap .chip,
.pinboard-theme #traceMissionLine .chip{
  width:56px !important; height:56px !important;
  /* Même DA que les autres chips/tiles : Barlow 800 (signalétique RATP
   * alt. Parisine) + ratio texte/diamètre ~62% (56 × 0.62 ≈ 35px). */
  font-family:'Barlow','Barlow Semi Condensed','Helvetica Neue',sans-serif;
  font-weight:800; font-size:35px;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.25),
    inset 0 -2px 4px rgba(0,0,0,.3),
    0 2px 4px rgba(0,0,0,.5);
  border:1px solid rgba(0,0,0,.3);
  /* Pop physique à l'injection (innerHTML via trace-mode.js
   * _loadGuidedLine). L'animation joue une seule fois au mount. */
  animation:cb-plate-chip-pop .42s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes cb-plate-chip-pop{
  0%  { opacity:0; transform:scale(.4) rotate(-20deg); }
  60% { opacity:1; transform:scale(1.1) rotate(5deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce){
  .pinboard-theme .cb-plate-badge-wrap .chip,
  .pinboard-theme #traceMissionLine .chip{
    animation:none !important;
  }
}
.pinboard-theme .trace-mission-linename{
  /* discrète, sous le chip en ligne */
  display:none;   /* le nom de ligne est déjà dans le title ci-dessous */
}

/* Corps central : kicker ambre + titre crème */
.pinboard-theme .cb-plate-body{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:3px;
}
.pinboard-theme .cb-plate-kicker{
  font-family:'DM Mono','JetBrains Mono',monospace;
  font-weight:500; font-size:9px;
  letter-spacing:2.8px; text-transform:uppercase;
  color:#e8a23a;
  line-height:1;
}
.pinboard-theme .cb-plate-title{
  font-family:'Oswald','Barlow Semi Condensed',sans-serif;
  font-weight:700; font-size:22px;
  letter-spacing:1.3px; text-transform:uppercase;
  color:#ede4d0;
  line-height:1;
}

/* Statut PRÊT : LED verte + texte monospace */
.pinboard-theme .cb-plate-state{
  display:flex; align-items:center; gap:6px;
  font-family:'DM Mono','JetBrains Mono',monospace;
  font-size:9px; letter-spacing:2.4px; text-transform:uppercase;
  color:#ede4d0;
  flex-shrink:0;
}
.pinboard-theme .cb-led{
  width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,
    #ffd070 0%, #e8a23a 40%, #7a4d0c 90%);
  box-shadow:
    0 0 8px rgba(232,162,58,.7),
    inset 0 1px 1px rgba(255,255,255,.4);
}

/* ─── ÉCRAN CRT AMBRE (bas) ──────────────────────────────── */
.pinboard-theme .cb-crt{
  position:relative;
  padding:14px 20px 16px;
  border:1px solid #000;
  background:#0a1420;
  color:#e8a23a;
  font-family:'VT323','Share Tech Mono',monospace;
  box-shadow:inset 0 4px 12px rgba(0,0,0,.8);
  overflow:hidden;
}
/* scan-lines horizontales */
.pinboard-theme .cb-crt::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(180deg,
    transparent 0 3px,
    rgba(0,0,0,.25) 3px 4px);
  pointer-events:none;
}
.pinboard-theme .cb-crt > *{ position:relative; }
.pinboard-theme .cb-crt-mode{
  font-size:14px; letter-spacing:2px;
  margin-bottom:10px;
  opacity:.55;
}
.pinboard-theme .cb-crt-ends{
  display:flex; flex-direction:column; gap:2px;
}
.pinboard-theme .cb-crt-ends[hidden]{ display:none !important; }
.pinboard-theme .cb-crt-row{
  font-size:22px; letter-spacing:1.4px; line-height:1.35;
  text-transform:uppercase;
  white-space:nowrap;               /* station tient sur 1 ligne, la carte s'étend */
}
.pinboard-theme .cb-crt-row-k{
  opacity:.55;
  display:inline-block; margin-right:4px;
  white-space:pre;
}
.pinboard-theme .cb-crt-row-v{ color:#e8a23a; white-space:nowrap; }
.pinboard-theme .cb-crt-caret{
  display:inline-block;
  opacity:.7;
  animation:cb-blink 1s steps(2, start) infinite;
  margin-left:4px;
}
@keyframes cb-blink{
  50%{ opacity:.1; }
}

/* ─── Respect des anciennes règles trace.css ───
 * On neutralise ici le layout "flex column + gap" du .trace-mission
 * pinboard qui ne s'applique plus (c'est le .console-brief qui gère
 * sa propre structure). */
#view-trace.pinboard-theme .trace-mission.console-brief{
  padding:14px;
  display:block;
  flex-direction:row;
  gap:0;
}

/* ─── MODE "TRACER TOUT PARIS" (free) ──────────────────────
 * Pas de "LIGNE EN COURS" ni de badge ligne : on n'a pas de ligne
 * "courante" à montrer, mais l'historique des lignes déjà tracées
 * avec leur % de précision. Le compteur "X lignes restantes" est
 * déjà affiché dans le bandeau progress top-right, on ne le
 * duplique pas ici. */
.pinboard-theme .console-brief.is-free-mode .cb-plate-kicker,
.pinboard-theme .console-brief.is-free-mode .cb-plate-badge-wrap,
.pinboard-theme .console-brief.is-free-mode #traceMissionLine,
.pinboard-theme .console-brief.is-free-mode .cb-plate-state{
  display:none !important;
}
.pinboard-theme .console-brief.is-free-mode .cb-plate{
  padding:10px 14px;
  justify-content:flex-start;
}
.pinboard-theme .console-brief.is-free-mode .cb-plate-body{
  flex:1;
}
.pinboard-theme .console-brief.is-free-mode .cb-plate-title{
  font-size:20px;
  letter-spacing:2px;
}
.pinboard-theme .console-brief.is-free-mode .cb-crt-mode{
  margin-bottom:12px;
  letter-spacing:2.4px;
}

/* Liste des lignes déjà tracées dans la zone CRT */
.pinboard-theme .console-brief.is-free-mode .cb-crt-ends{
  max-height:200px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
  padding-right:4px;
}
.pinboard-theme .console-brief.is-free-mode .cb-crt-ends::-webkit-scrollbar{
  width:6px;
}
.pinboard-theme .console-brief.is-free-mode .cb-crt-ends::-webkit-scrollbar-thumb{
  background:rgba(232,162,58,.35);
  border-radius:3px;
}
.pinboard-theme .cb-free-row{
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  column-gap:10px;
  align-items:center;
  font-size:14px !important;
  letter-spacing:.6px !important;
  line-height:1.2;
  text-transform:none !important;
  padding:3px 0;
}
.pinboard-theme .cb-free-pill{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  font-family:'Oswald','Barlow Semi Condensed',sans-serif;
  font-weight:700; font-size:11px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.25),
    inset 0 -1px 2px rgba(0,0,0,.3),
    0 1px 2px rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.3);
}
.pinboard-theme .cb-free-name{
  font-family:'Oswald','Barlow Semi Condensed',sans-serif;
  font-weight:500;
  color:#e8a23a;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pinboard-theme .cb-free-score{
  font-family:'VT323','Share Tech Mono',monospace;
  color:#e8a23a;
  font-size:18px;
  letter-spacing:1px;
}
.pinboard-theme .cb-crt-free-empty{
  font-size:14px !important;
  opacity:.55;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
}

/* ══════════════════════════════════════════════════════════════
 * CRT FLICKER : transition lors d'un changement de contenu texte
 * (DE/À, mode, label, historique). Plutôt qu'un swap sec, on joue
 * un flash subtil "vieux tube cathodique" — brightness up + blur
 * doux + scanline qui passe. Déclenché par `.is-swapping` posé
 * ~140ms par src/ui/trace-mode.js autour de la mutation DOM.
 * ══════════════════════════════════════════════════════════════ */
.pinboard-theme .cb-crt.is-swapping,
.pinboard-theme .cb-plate-title.is-swapping,
.pinboard-theme .cb-crt-mode.is-swapping,
.pinboard-theme .cb-crt-ends.is-swapping{
  animation:cb-crt-flicker .22s cubic-bezier(.5,0,.3,1) both;
}
@keyframes cb-crt-flicker{
  0%   { filter:brightness(1)   blur(0); }
  45%  { filter:brightness(1.45) blur(1.5px); opacity:.72; }
  55%  { filter:brightness(.6)  blur(2px);   opacity:.55; }
  100% { filter:brightness(1)   blur(0);     opacity:1; }
}

/* Progress bar fill transition : déjà présent en base, on amplifie la
 * courbe pour un feel plus "jauge mécanique" (back-out léger). */
.pinboard-theme .cb-progress-fill{
  transition:width .45s cubic-bezier(.34,1.56,.64,1);
}

/* Nouvelle ligne d'historique free-mode : petite slide-in depuis le
 * haut (comme un ticket qui tombe dans la pile). La classe .is-new
 * est posée par _renderFreeHistory sur la dernière entrée ajoutée. */
.pinboard-theme .cb-free-row.is-new{
  animation:cb-free-row-in .38s cubic-bezier(.22,.9,.25,1) both;
  transform-origin:top;
}
@keyframes cb-free-row-in{
  0%  { opacity:0; transform:translateY(-8px) scaleY(.6); }
  60% { opacity:1; transform:translateY(1px)  scaleY(1); }
  100%{ opacity:1; transform:translateY(0)    scaleY(1); }
}

/* Pill (le rond de ligne) de la nouvelle entrée rebondit légèrement */
.pinboard-theme .cb-free-row.is-new .cb-free-pill{
  animation:cb-free-pill-pop .4s cubic-bezier(.34,1.56,.64,1) .1s both;
}
@keyframes cb-free-pill-pop{
  0%  { transform:scale(.5); }
  70% { transform:scale(1.18); }
  100%{ transform:scale(1); }
}

/* ══════════════════════════════════════════════════════════════
 * LINE PICKER INTÉGRÉ AU CRT (free-mode "Tracer tout Paris")
 * Quand le joueur doit choisir la prochaine ligne à tracer, on
 * injecte les chips directement dans l'écran ambre du brief — plus
 * cohérent que la stack flottante en bas-droite. Les chips gardent
 * leurs couleurs RATP (reconnaissance immédiate) mais posent un
 * cerne ambre CRT au hover/focus. Typo VT323 pour les en-têtes de
 * section, sticker rond (métro) / carré arrondi (RER) pour la forme.
 * Le markup est généré par src/ui/trace-mode.js::_showLinePicker.
 * ══════════════════════════════════════════════════════════════ */
.pinboard-theme .cb-crt-picker{
  display:flex; flex-direction:column; gap:12px;
  padding:2px 0 2px 0;
}
.pinboard-theme .cb-crt-pick-section{
  display:flex; flex-direction:column; gap:8px;
}
.pinboard-theme .cb-crt-pick-head{
  font-family:'VT323','Share Tech Mono',monospace;
  font-size:14px; letter-spacing:2px;
  color:#e8a23a; opacity:.6;
  line-height:1;
}
.pinboard-theme .cb-crt-pick-head b{
  font-weight:normal;
  color:#e8a23a; opacity:1;
  margin-right:4px;
}
/* Grille 5 colonnes qui REMPLIT la largeur du CRT (pas d'espace vide
 * à droite) : chaque chip s'étire pour occuper sa colonne, section
 * MÉTRO wrappe sur 4 rangs (16 ÷ 5). Les chips gardent leur carré
 * parfait via aspect-ratio — taille = largeur CRT / 5. */
.pinboard-theme .cb-crt-pick-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  width:100%;
}

/* Un chip = un bouton. Base chip RATP (rond métro / carré arrondi RER)
 * + inset highlight + ombre portée — reconnaissance signalétique.
 * Taille pilotée par la grille : width:100% de sa colonne, aspect-ratio
 * force le carré, font-size monte avec la chip pour rester lisible. */
.pinboard-theme .cb-pick-chip{
  width:100%;
  aspect-ratio:1;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; margin:0;
  border:1px solid rgba(0,0,0,.4);
  /* Même DA que .chip et .hx-line-tile : Barlow 800, forme géométrique
   * ronde de la signalétique RATP (Parisine alt.). */
  font-family:'Barlow','Barlow Semi Condensed','Helvetica Neue',sans-serif;
  font-weight:800; font-size:20px;
  cursor:pointer;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.3),
    inset 0 -1px 2px rgba(0,0,0,.3),
    0 2px 3px rgba(0,0,0,.45),
    0 0 0 0 rgba(232,162,58,0);          /* cerne ambre caché par défaut */
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),
             box-shadow .18s ease;
  /* bg + color sont posés inline (couleur de ligne) par le JS. */
}
.pinboard-theme .cb-pick-chip[data-type="metro"]{ border-radius:50%; }
.pinboard-theme .cb-pick-chip[data-type="rer"]  { border-radius:10px; }

.pinboard-theme .cb-pick-chip:hover,
.pinboard-theme .cb-pick-chip:focus-visible{
  outline:none;
  transform:translateY(-2px) scale(1.12);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.35),
    inset 0 -1px 2px rgba(0,0,0,.3),
    0 4px 8px rgba(0,0,0,.55),
    0 0 0 2px rgba(232,162,58,.85),      /* cerne ambre CRT */
    0 0 12px rgba(232,162,58,.45);       /* halo */
}
.pinboard-theme .cb-pick-chip:active{
  transform:translateY(0) scale(1.02);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.2),
    inset 0 -1px 2px rgba(0,0,0,.4),
    0 1px 2px rgba(0,0,0,.5),
    0 0 0 2px rgba(232,162,58,.85);
}

/* État "éteint" (landing : ligne masquée sur la carte).
 * Les chips du picker free-mode n'ont pas d'aria-pressed posé donc ne
 * sont pas affectées. L'hover ramène brièvement la couleur pleine pour
 * prévisualiser l'effet d'un toggle. */
.pinboard-theme .cb-pick-chip[aria-pressed="false"]{
  filter:grayscale(.85) brightness(.55);
  opacity:.55;
}
.pinboard-theme .cb-pick-chip[aria-pressed="false"]:hover,
.pinboard-theme .cb-pick-chip[aria-pressed="false"]:focus-visible{
  filter:grayscale(.25) brightness(.9);
  opacity:.9;
}

/* ── LANDING : 1 plaque métal, 2 CRT empilés (RER + MÉTRO) ─────────
 * Un seul .console-brief (cadre métal brossé + rivets + ombres) qui
 * encadre les deux écrans CRT verticalement. Chaque écran a son
 * propre titre VT323 gros + filet amber + compteur + grille chips. */
.pinboard-theme .landing-crt-brief{
  min-width:0;
  width:260px;
  max-width:calc(100vw - 32px);
  padding:10px;
  display:flex; flex-direction:column; gap:10px;
}
.pinboard-theme .landing-crt-brief .cb-crt{
  padding:12px 14px 14px;
}

/* Titre RER / MÉTRO : grand, VT323 dot-matrix, filet amber en dessous
 * pour séparer du reste du contenu. */
.pinboard-theme .cb-crt-pick-title{
  font-family:'VT323','Share Tech Mono',monospace;
  font-size:26px;
  letter-spacing:3px;
  color:#e8a23a;
  line-height:1;
  padding-bottom:6px;
  margin-bottom:8px;
  border-bottom:1px solid rgba(232,162,58,.32);
  text-shadow:0 0 6px rgba(232,162,58,.25);
}

/* Sous-header : compteur X/Y à gauche, bouton group-toggle à droite. */
.pinboard-theme .cb-crt-pick-subhead{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  font-family:'VT323','Share Tech Mono',monospace;
  font-size:14px; letter-spacing:1px;
  color:#e8a23a; opacity:.7;
  margin-bottom:10px;
}

/* Grille 5 colonnes pour les deux CRT (même taille de chips garantie
 * entre RER et MÉTRO). RER = 1 rangée. MÉTRO = 3 rangées pleines + M14
 * seul en 4e (volontaire : ligne la plus récente, mise en avant).
 *
 * `container-type: inline-size` pose un context de container-query sur
 * la grille → on peut calculer la font-size EN FONCTION de la largeur
 * réelle de la grille (pas du viewport), ce qui maintient le ratio
 * texte/chip ~62 % quel que soit le width du panneau. */
.pinboard-theme .landing-crt-brief .cb-crt-pick-grid{
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
  container-type:inline-size;
}
.pinboard-theme .landing-crt-brief .cb-pick-chip{
  /* Width chip = (grid - 4×8px) / 5. Texte = 62 % du chip → simplifie
   * en ≈ 11 % de la grille (11cqi). Fallback px si container-queries
   * non supportés. */
  font-size:11cqi;
  font-family:'Barlow','Barlow Semi Condensed','Helvetica Neue',sans-serif;
  font-weight:800;
}
@supports not (container-type: inline-size){
  .pinboard-theme .landing-crt-brief .cb-pick-chip{ font-size:20px; }
}
.pinboard-theme .landing-crt-brief .cb-pick-chip[data-type="rer"]{
  border-radius:6px;              /* RER carré arrondi, plus petit rayon à 30px */
}

/* Bouton "tout afficher / masquer" : petit LED ambre dans le header.
 * - Par défaut : contour ambre dim, vide
 * - `.all-on` (toutes les lignes affichées) : plein, glow
 * - `.all-off` (aucune) : très dim */
.pinboard-theme .cb-pick-group-btn{
  background:transparent;
  border:1px solid rgba(232,162,58,.4);
  color:#e8a23a;
  width:20px; height:20px;
  padding:0;
  border-radius:50%;
  font-family:'VT323','Share Tech Mono',monospace;
  font-size:12px; line-height:1;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s cubic-bezier(.34,1.56,.64,1);
}
.pinboard-theme .cb-pick-group-btn:hover,
.pinboard-theme .cb-pick-group-btn:focus-visible{
  outline:none;
  background:rgba(232,162,58,.18);
  border-color:rgba(232,162,58,.9);
  box-shadow:0 0 8px rgba(232,162,58,.5);
  transform:scale(1.1);
}
.pinboard-theme .cb-pick-group-btn:active{
  transform:scale(.92);
}
.pinboard-theme .cb-pick-group-btn.all-on{
  background:#e8a23a;
  color:#0a1420;
  border-color:#e8a23a;
  box-shadow:0 0 10px rgba(232,162,58,.6);
}
.pinboard-theme .cb-pick-group-btn.all-off{
  opacity:.55;
}

/* Entrée : stagger par chip via --pi, ressort back-out. Les en-têtes
 * de section (RER / MÉTRO) arrivent juste avant la 1ère chip. */
.pinboard-theme .cb-crt-pick-head.is-in{
  animation:cb-pick-head-in .3s cubic-bezier(.22,.9,.25,1) both;
}
@keyframes cb-pick-head-in{
  0%  { opacity:0; transform:translateX(-6px); }
  100%{ opacity:.6; transform:translateX(0); }
}
.pinboard-theme .cb-pick-chip.is-in{
  animation:cb-pick-chip-in .36s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(var(--pi, 0) * 26ms);
}
@keyframes cb-pick-chip-in{
  0%  { opacity:0; transform:scale(.4) rotate(-10deg); }
  60% { opacity:1; transform:scale(1.15) rotate(3deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}
/* Sortie : fade + léger scale-down, rapide (pas de stagger en sortie) */
.pinboard-theme .cb-crt-picker.is-leaving,
.pinboard-theme .cb-crt-picker.is-leaving .cb-pick-chip{
  animation:none !important;
}
.pinboard-theme .cb-crt-picker.is-leaving{
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .18s ease-in, transform .18s ease-in;
}

@media (prefers-reduced-motion: reduce){
  .pinboard-theme .cb-crt.is-swapping,
  .pinboard-theme .cb-plate-title.is-swapping,
  .pinboard-theme .cb-crt-mode.is-swapping,
  .pinboard-theme .cb-crt-ends.is-swapping,
  .pinboard-theme .cb-free-row.is-new,
  .pinboard-theme .cb-free-row.is-new .cb-free-pill,
  .pinboard-theme .cb-crt-pick-head.is-in,
  .pinboard-theme .cb-pick-chip.is-in{
    animation:none !important;
  }
  .pinboard-theme .cb-pick-chip{ transition:none !important; }
}

/* ══════════════════════════════════════════════════════════════
 * RESPONSIVE — fenêtres étroites (tablette portrait → iPhone SE 320px)
 * La LARGEUR du conteneur .trace-mission est gérée dans
 * pinboard/trace.css (règle autoritaire #view-trace.pinboard-theme,
 * spéc. plus forte). Ici on ne touche qu'au CONTENU : padding interne,
 * badge ligne et typos, qui sinon restent calibrés pour le desktop et
 * débordent / paraissent énormes dans le panneau rétréci.
 * Breakpoint aligné sur celui de trace.css (640px).
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  .pinboard-theme .cb-plate{
    gap:10px;
    padding:8px 10px 9px 9px;
    margin-bottom:8px;
  }
  .pinboard-theme .cb-plate-badge-wrap .chip,
  .pinboard-theme #traceMissionLine .chip{
    width:44px !important; height:44px !important;
    font-size:27px;
  }
  .pinboard-theme .cb-plate-kicker{ font-size:8px; letter-spacing:2.2px; }
  .pinboard-theme .cb-plate-title{ font-size:18px; letter-spacing:1px; }
  .pinboard-theme .cb-plate-state{ font-size:8px; letter-spacing:1.8px; }
  .pinboard-theme .cb-crt{ padding:10px 14px 12px; }
  .pinboard-theme .cb-crt-mode{ font-size:12px; margin-bottom:8px; }
  .pinboard-theme .cb-crt-row{
    font-size:17px; letter-spacing:1px;
    white-space:normal;                /* station longue : autorise le retour ligne */
  }
  .pinboard-theme .cb-crt-row-v{ white-space:normal; }
}

@media (max-width: 380px){
  #view-trace.pinboard-theme .trace-mission.console-brief{ padding:8px; }
  .pinboard-theme .cb-plate-badge-wrap .chip,
  .pinboard-theme #traceMissionLine .chip{
    width:38px !important; height:38px !important;
    font-size:23px;
  }
  .pinboard-theme .cb-plate-title{ font-size:16px; }
  .pinboard-theme .cb-crt-row{ font-size:15px; }
}