/* Le terminal d appels : trois colonnes, un classement reactif, une pop-up.
 * pump.fun et FOMO partagent .panel / .direct-ligne / .squelette / .segments
 * du site (core.css, marche.css) ; ce fichier ajoute la grille, les cartes,
 * le classement et la pop-up qui leur sont propres. Droit au but : peu de
 * texte, des valeurs, jamais une surface pleine pour une simple mesure. */

.terminal-tabs { display: none; }

.terminal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.terminal-grid:has(> .terminal-col--fomo[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.terminal-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: calc(100vh - 220px); }
.terminal-col .onglet-tete { flex: none; }

/* ---- pump.fun : puces d abonnes, paliers reserves a cet usage seul ------- */
.terminal-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.terminal-chips__label { margin-right: 4px; color: var(--text-quiet); font-size: 12px; font-weight: 600; }
/* Les titres de colonnes se lisent de loin : capitales, police d affichage. */
.terminal-col .onglet-tete > h2 { color: var(--text-loud); font: 800 28px/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.terminal-chip {
  min-height: 30px; padding: 0 12px; border: 1px solid var(--edge-soft); border-radius: var(--radius-pill);
  background: transparent; color: var(--text-quiet); font: 500 11px var(--font-figure); cursor: pointer;
  transition: color var(--dur-tap) var(--ease-settle), background-color var(--dur-tap) var(--ease-settle), border-color var(--dur-tap) var(--ease-settle);
}
.terminal-chip:hover { color: var(--text-loud); }
.terminal-chip:focus-visible { outline: 2px solid var(--terminal-accent); outline-offset: 1px; }
.terminal-chip:active { transform: translateY(1px); }
.terminal-chip[aria-pressed="true"] { color: var(--text-loud); background: var(--email-800); border-color: var(--edge-firm); }
.terminal-chip--palier-1[aria-pressed="true"] { color: var(--palier-1); border-color: color-mix(in oklch, var(--palier-1) 55%, transparent); background: color-mix(in oklch, var(--palier-1) 14%, transparent); }
.terminal-chip--palier-2[aria-pressed="true"] { color: var(--palier-2); border-color: color-mix(in oklch, var(--palier-2) 55%, transparent); background: color-mix(in oklch, var(--palier-2) 14%, transparent); }
.terminal-chip--palier-3[aria-pressed="true"] { color: var(--palier-3); border-color: color-mix(in oklch, var(--palier-3) 55%, transparent); background: color-mix(in oklch, var(--palier-3) 14%, transparent); }

/* ---- Les cartes pump.fun et FOMO : mêmes fondations, une identite ------- */
.terminal-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }

.terminal-carte { padding: var(--space-3) 0; border-bottom: 1px solid var(--edge-soft);
  content-visibility: auto; contain-intrinsic-size: auto 110px; }
.terminal-carte:last-child { border-bottom: none; }
.terminal-carte__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; }
.terminal-carte__tete a { color: var(--text-plain); text-decoration: none; }
.terminal-carte__tete a:hover { color: var(--text-loud); text-decoration: underline; text-decoration-color: var(--edge-firm); text-underline-offset: 3px; }
.terminal-carte__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 0; font-size: 11.5px; }
.terminal-carte__texte { margin: 6px 0 0; max-width: 62ch; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow-wrap: anywhere; color: var(--text-plain); font-size: 13px; line-height: 1.5; }

.terminal-symbole {
  border: 0; background: transparent; padding: 1px 4px; margin: -1px -4px; border-radius: var(--radius-control);
  color: var(--jeton, var(--text-loud)); font: 600 13px var(--font-figure); cursor: pointer;
  transition: background-color var(--dur-tap) var(--ease-settle);
}
.terminal-symbole:hover { background: var(--surface-hover); }
.terminal-symbole:focus-visible { outline: 2px solid var(--terminal-accent); outline-offset: 1px; }

.terminal-vide { padding: 22px 4px; color: var(--text-faint); font-size: 12px; text-align: center; list-style: none; }

.terminal-source { margin: 10px 2px 0; font-size: 11px; }

.terminal-carte--squelette .squelette--court { width: 9ch; margin-right: 8px; }

@media (prefers-reduced-motion: no-preference) {
  .terminal-carte--neuf { animation: terminal-arrive 460ms var(--ressort-doux) backwards; }
}
@keyframes terminal-arrive { from { opacity: 0; transform: translateY(-8px); } }

/* ---- Le classement : un rang, un trait proportionnel, jamais une case pleine */
.terminal-rank-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; }
.terminal-rank { position: relative; display: flex; align-items: stretch; gap: 8px; }
.terminal-rank__bouton {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 20px 28px minmax(0,1fr) auto; align-items: center; gap: 10px;
  padding: 10px 4px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
  border-bottom: 1px solid color-mix(in oklch, var(--craie) 6%, transparent);
  transition: background-color var(--dur-tap) var(--ease-settle);
}
.terminal-rank:last-child .terminal-rank__bouton { border-bottom: none; }
.terminal-rank__bouton:hover { background-image: linear-gradient(90deg, color-mix(in oklch, var(--jeton, var(--menthe)) 12%, transparent), transparent 70%); }
.terminal-rank__bouton:focus-visible { outline: 2px solid var(--terminal-accent); outline-offset: -2px; }
.terminal-rank__n { color: var(--text-faint); font-size: 12px; }
.terminal-rank__avatar { width: 28px; height: 28px; border-radius: var(--radius-control); object-fit: cover;
  display: inline-grid; place-items: center; background: color-mix(in oklch, var(--jeton, var(--menthe)) 22%, var(--email-900));
  color: var(--jeton, var(--text-quiet)); border: 1px solid var(--anneau-jeton, var(--edge-soft)); font: 600 11px var(--font-figure); }
.terminal-rank__qui { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.terminal-rank__qui > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.terminal-rank__symbole { color: var(--jeton, var(--text-loud)); font: 600 14px var(--font-figure); }
.terminal-rank__badge { flex-basis: 100%; order: -1; color: var(--text-loud); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.terminal-rank__trait { flex-basis: 100%; display: flex; gap: 2px; height: 3px; margin-top: 2px;
  transform-origin: left center; transform: scaleX(var(--echelle, 1)); transition: transform 560ms var(--ressort-doux); }
@media (prefers-reduced-motion: reduce) { .terminal-rank__trait { transition: none; } }
.terminal-rank__trait-pump { flex: var(--poids, 1) 1 0%; min-width: 2px; background: var(--menthe); border-radius: var(--radius-pill); }
.terminal-rank__trait-fomo { flex: var(--poids, 0) 1 0%; min-width: 0; background: color-mix(in oklch, var(--craie) 35%, transparent); border-radius: var(--radius-pill); }
.terminal-rank__compte { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: var(--menthe); }
.terminal-rank__compte b { font-size: 16px; font-weight: 600; }
.terminal-rank__compte small { color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }

.terminal-rank--top { box-shadow: inset 2px 0 0 var(--menthe); }
.terminal-rank--top .terminal-rank__bouton { padding-left: 10px; }

.terminal-rank--squelette { padding: 10px 4px; gap: 10px; align-items: center; }

@media (prefers-reduced-motion: no-preference) {
  .terminal-rank--neuf { animation: terminal-arrive 460ms var(--ressort-doux) backwards; }
}

/* ---- Un badge generique : un token lance sur Paid2Call, jamais une surface */
.badge-paid2call { align-self: center; flex: none; display: inline-flex; align-items: center; padding: 2px 9px;
  border: 1px solid color-mix(in oklch, var(--menthe) 60%, transparent); border-radius: var(--radius-pill);
  background: transparent; color: var(--menthe); font-size: 11px; font-weight: 600; text-decoration: none;
  transition: border-color var(--dur-tap) var(--ease-settle); }
.badge-paid2call:hover { border-color: var(--menthe); }

.terminal-offline { margin: 60px auto; text-align: center; font-size: 14px; }

/* ---- pop-up : en-tete puis liste, jamais un paragraphe ------------------- */
.terminal-dialog { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 64px));
  padding: 0; border: 1px solid var(--edge-soft); border-radius: var(--radius-card); color: var(--text-plain);
  background-color: var(--email-900);
  background-image: linear-gradient(176deg, var(--email-850), var(--email-900) 46%, oklch(0.184 0.020 calc(var(--teinte) + 6)));
  box-shadow: var(--relief), 0 30px 60px -20px color-mix(in oklch, var(--email-950) 80%, transparent); }
.terminal-dialog::backdrop { background: color-mix(in oklch, var(--fond-0) 72%, transparent); }
.terminal-dialog__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px;
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--edge-soft);
  background-color: var(--email-900); border-radius: var(--radius-card) var(--radius-card) 0 0; }
.terminal-dialog__avatar { flex: none; width: 40px; height: 40px; border-radius: var(--radius-control); overflow: hidden;
  display: inline-grid; place-items: center; background: color-mix(in oklch, var(--jeton, var(--menthe)) 22%, var(--email-900));
  color: var(--jeton, var(--text-quiet)); border: 1px solid var(--anneau-jeton, var(--edge-soft)); font: 600 14px var(--font-figure); }
.terminal-dialog__avatar img { width: 100%; height: 100%; object-fit: cover; }
.terminal-dialog__identite { min-width: 0; flex: 1 1 auto; }
.terminal-dialog__symbole { margin: 0; color: var(--jeton, var(--text-loud)); font-size: 16px; font-weight: 600; }
.terminal-dialog__identite .quiet { margin: 2px 0 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.terminal-dialog__fermer { flex: none; width: 32px; height: 32px; display: inline-grid; place-items: center;
  border: 1px solid var(--edge-soft); border-radius: var(--radius-control); background: transparent; color: var(--text-quiet); cursor: pointer;
  transition: color var(--dur-tap) var(--ease-settle), background-color var(--dur-tap) var(--ease-settle); }
.terminal-dialog__fermer:hover { color: var(--text-loud); background: var(--surface-hover); }
.terminal-dialog__fermer:focus-visible { outline: 2px solid var(--terminal-accent); outline-offset: 1px; }
.terminal-dialog__comptes { display: flex; gap: var(--space-4); margin: 0; padding: var(--space-3) var(--space-4) 0; }
.terminal-dialog__comptes div { display: flex; flex-direction: column; gap: 2px; }
.terminal-dialog__comptes dt { margin: 0; color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.terminal-dialog__comptes dd { margin: 0; font-size: 18px; font-weight: 600; }
.terminal-dialog__liens { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-3) var(--space-4) 0; }
.terminal-dialog__liens:empty { display: none; }
.terminal-lien { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border: 1px solid var(--edge-firm);
  border-radius: var(--radius-pill); color: var(--text-plain); font: 600 12px var(--font-body); text-decoration: none;
  transition: color var(--dur-tap) var(--ease-settle), border-color var(--dur-tap) var(--ease-settle); }
.terminal-lien:hover { color: var(--text-loud); border-color: var(--craie); }
.terminal-lien:focus-visible { outline: 2px solid var(--terminal-accent); outline-offset: 2px; }
.terminal-lien:active { transform: translateY(1px); }
.terminal-dialog__corps { padding: var(--space-3) var(--space-4) var(--space-4); overflow-y: auto; }
.terminal-dialog__section + .terminal-dialog__section { margin-top: var(--space-4); }
.terminal-dialog__section h3 { margin: 0 0 6px; color: var(--text-quiet); font-size: 12px; font-weight: 600;
  text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.terminal-dialog .terminal-list { max-height: none; overflow-y: visible; }

@media (prefers-reduced-motion: no-preference) {
  .terminal-dialog[open] { animation: terminal-dialog-in 260ms var(--ease-settle); }
  .terminal-dialog::backdrop { animation: terminal-fond-in 260ms var(--ease-settle); }
}
@keyframes terminal-dialog-in { from { opacity: 0; transform: scale(0.97) translateY(6px); } }
@keyframes terminal-fond-in { from { opacity: 0; } }

@media (max-width: 1100px) {
  .terminal-tabs { display: flex; padding: 2px; gap: 2px; border: 1px solid var(--edge-soft); border-radius: var(--radius-card);
    background: color-mix(in oklch, var(--email-950) 45%, transparent); margin-bottom: 14px; }
  .terminal-tab { flex: 1 1 0; min-height: 38px; border: none; border-radius: var(--radius-control); background: transparent;
    color: var(--text-quiet); font: 500 12px var(--font-figure); cursor: pointer;
    transition: color var(--dur-tap) var(--ease-settle), background-color var(--dur-tap) var(--ease-settle); }
  .terminal-tab:hover { color: var(--text-loud); }
  .terminal-tab[aria-pressed="true"] { color: var(--text-loud); background: var(--email-800); box-shadow: inset 0 -2px 0 var(--craie); }
  .terminal-tab:focus-visible { outline: 2px solid var(--terminal-accent); outline-offset: 1px; }
  .terminal-tab[hidden] { display: none; }

  .terminal-grid { display: block; }
  .terminal-grid[data-view="ranking"] .terminal-col:not(.terminal-col--ranking),
  .terminal-grid[data-view="pump"] .terminal-col:not(.terminal-col--pump),
  .terminal-grid[data-view="fomo"] .terminal-col:not(.terminal-col--fomo) { display: none; }
  .terminal-col { max-height: none; }
  .terminal-col .onglet-tete > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}