/**
 * theme-minitel.css — RPUC
 * ========================
 *
 * Videotex, 1982. Le Minitel 1 affichait 40 colonnes sur 24 lignes de
 * caractères, sur un tube cathodique monochrome. La norme Antiope prévoyait
 * huit couleurs, rendues en niveaux de gris sur les terminaux monochromes et
 * en couleurs saturées sur les rares modèles qui savaient les afficher. Ce
 * sont ces huit-là qu'on reprend ici, telles quelles : pas de dégradé, pas
 * d'ombre portée, pas de coin arrondi. Un pixel était un pixel.
 *
 * Ce fichier ne redéfinit que des jetons, plus une poignée de règles
 * structurelles pour aplatir ce que les jetons ne couvrent pas (rayons,
 * ombres, images). Aucune classe de l'application n'est renommée : le thème
 * se pose et se retire sans toucher au balisage.
 *
 * Lisibilité : le phosphore pur sur noir fatigue vite, donc le texte courant
 * reste blanc cassé et les couleurs saturées sont réservées aux accents.
 * C'est une blague, pas une punition.
 *
 * Police : Minitel.ttf de Zigazou (github.com/Zigazou/Minitel-Canvas), placée
 * en CC0, convertie en WOFF2 (3 Ko). Elle est à chasse fixe, couvre tout
 * l'ASCII et les minuscules accentuées, mais il lui manque les capitales
 * accentuées, les guillemets français et les caractères de bloc. D'où le
 * repli sur JetBrains Mono dans la pile : le navigateur va y chercher glyphe
 * par glyphe ce que Minitel n'a pas, au lieu d'afficher des tofus.
 */

@font-face {
  font-family: 'Minitel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Minitel.woff2') format('woff2');
}

:root[data-theme="minitel"] {
  /* Palette videotex. Les huit couleurs de la norme, sans retouche. */
  --vtx-black:   #000000;
  --vtx-red:     #ff3b30;
  --vtx-green:   #38ff64;
  --vtx-yellow:  #ffe14d;
  --vtx-blue:    #4d7cff;
  --vtx-magenta: #ff5cf0;
  --vtx-cyan:    #4de6ff;
  --vtx-white:   #e8f4ef;

  /* Pas d'alpha. Un Minitel affiche huit couleurs et rien entre les deux :
     il n'a ni canal de transparence ni mélange. Toute valeur translucide est
     donc remplacée par un aplat, et les niveaux de surface disparaissent au
     profit du noir. Ce qui distinguait les blocs par un voile à 10 % les
     distingue maintenant par un trait, comme sur un vrai écran videotex. */
  --bg-base: #000000;
  --bg-primary: #000000;
  --bg-surface: #000000;
  --bg-surface-hover: #000000;
  --bg-surface-active: #000000;
  --bg-elevated: #000000;

  /* Les bordures sont du trait plein à pleine intensité : sur un tube, une
     ligne existe ou n'existe pas. */
  --border-color: #1d6b7a;
  --border-color-light: #2f9db2;
  --border-color-strong: var(--vtx-cyan);

  --text-primary: var(--vtx-white);
  --text-secondary: var(--vtx-cyan);
  --text-muted: #4a8a86;
  --text-inverse: var(--vtx-black);

  --accent: var(--vtx-yellow);
  --accent-hover: #fff29e;
  --accent-glow: #7a6a17;
  --accent-bg: #000000;
  --accent-border: var(--vtx-yellow);
  /* Un aplat, pas « none » : plusieurs éléments peignent leur texte avec ce
     fond via background-clip, et « none » les rendait invisibles. */
  --accent-gradient: linear-gradient(var(--vtx-yellow), var(--vtx-yellow));

  --success: var(--vtx-green);
  --success-bg: #000000;
  --success-border: var(--vtx-green);
  --warning: var(--vtx-yellow);
  --warning-bg: #000000;
  --warning-border: var(--vtx-yellow);
  --error: var(--vtx-red);
  --error-bg: #000000;
  --error-border: var(--vtx-red);
  --info: var(--vtx-cyan);
  --info-bg: #000000;

  /* Le bandeau fixe et les voiles de modale deviennent opaques : sur un
     terminal, une nouvelle page effaçait la précédente, elle ne la voilait
     pas. Le flou d'arrière-plan est désactivé plus bas. */
  --bg-glass: #000000;
  --bg-scrim: #000000;
  --tint-weak: #000000;
  --tint-medium: #000000;
  --tint-strong: #000000;
  --tint-neutral: #000000;
  --text-on-accent: var(--vtx-black);

  /* Seule exception assumée : la vignette et les lignes de balayage. Elles ne
     simulent pas le signal videotex mais le tube cathodique lui-même, dont le
     masque et la courbure sont bien des phénomènes continus. */
  --bg-ambient:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.75) 100%);

  /* Les lignes de balayage. 3px de pas : assez visible pour qu'on comprenne,
     assez fin pour qu'on puisse lire. */
  --screen-overlay: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.22) 0px,
      rgba(0, 0, 0, 0.22) 1px,
      transparent 1px,
      transparent 3px);

  --text-glow: 0 0 6px currentColor;

  /* Tout est carré. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-full: 0;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 0 0 1px var(--border-color);
  --shadow-glow: 0 0 14px var(--accent-glow);
  --shadow-glow-sm: 0 0 8px var(--accent-glow);

  /* Minitel d'abord, JetBrains Mono pour boucher ses trous de glyphes. */
  --font-minitel: 'Minitel', 'JetBrains Mono', monospace;
  --font-heading: var(--font-minitel);
  --heading-transform: uppercase;
  --heading-spacing: 0.08em;
}

/* Grille de caractères : tout passe en chasse fixe, y compris ce qui était
   en Inter. C'est le seul vrai « reset » du thème. */
:root[data-theme="minitel"] body,
:root[data-theme="minitel"] button,
:root[data-theme="minitel"] input,
:root[data-theme="minitel"] select,
:root[data-theme="minitel"] textarea {
  font-family: var(--font-minitel);
  letter-spacing: 0;
}

/* Grille de caractères. La police est dessinée sur une cellule de 8x10 pixels
   et son avance vaut exactement 1 em, donc un corps en pixels pairs tombe sur
   un multiple entier de la grille d'origine et reste net. L'échelle typo du
   thème sobre (13px, 17px, 19px...) tombait entre deux pixels. */
:root[data-theme="minitel"] {
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  --font-size-6xl: 48px;
}

:root[data-theme="minitel"] body {
  font-size: 16px;
  line-height: 1.5;
}

/* La vignette du tube doit couvrir toute la page, pas seulement le fond. */
:root[data-theme="minitel"] body::before {
  z-index: 9998;
}

/* Des touches de fonction, pas des boutons d'application web. */
:root[data-theme="minitel"] button,
:root[data-theme="minitel"] .btn,
:root[data-theme="minitel"] .btn-default {
  border: 1px solid var(--border-color-light);
  background: transparent;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  transition: none;
}

:root[data-theme="minitel"] button:hover,
:root[data-theme="minitel"] .btn:hover,
:root[data-theme="minitel"] .btn-default:hover {
  background: var(--vtx-cyan);
  color: var(--vtx-black);
  border-color: var(--vtx-cyan);
  transform: none;
  box-shadow: none;
  text-shadow: none;
}

:root[data-theme="minitel"] .btn-primary {
  background: var(--accent);
  color: var(--vtx-black);
  border-color: var(--accent);
  text-shadow: none;
}

:root[data-theme="minitel"] .btn-primary:hover {
  background: var(--accent-hover);
  color: var(--vtx-black);
}

/* Le curseur bloc clignotant, signature de l'écran. Réservé au titre de page
   pour ne pas transformer l'interface en sapin de Noël. */
/* Curseur bloc. Dessiné en CSS et non avec U+2588 : la police d'origine
   n'embarque aucun caractère semi-graphique, le glyphe sortirait en tofu. */
:root[data-theme="minitel"] .app-window-title::after {
  content: '';
  display: inline-block;
  width: 0.62em;
  height: 0.95em;
  margin-left: 0.28em;
  vertical-align: -0.1em;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: minitel-blink 1.05s steps(1) infinite;
}

@keyframes minitel-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="minitel"] .app-window-title::after { animation: none; }
}

/* Les champs de saisie ont le liseré du terminal. */
:root[data-theme="minitel"] input,
:root[data-theme="minitel"] textarea,
:root[data-theme="minitel"] select {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--vtx-white);
}

:root[data-theme="minitel"] input::placeholder,
:root[data-theme="minitel"] textarea::placeholder {
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.9em;
}

/* Les vignettes et avatars : un tube n'affichait pas de photo en couleur. */
:root[data-theme="minitel"] .profile-avatar,
:root[data-theme="minitel"] .avatar-popover img,
:root[data-theme="minitel"] .vault-row-thumb,
:root[data-theme="minitel"] .geoloc-preview-img {
  filter: grayscale(1) contrast(1.35) sepia(0.45) hue-rotate(75deg) saturate(2.2);
}

/* Le logo suit le même traitement. */
:root[data-theme="minitel"] .app-header-logo-svg {
  color: var(--vtx-cyan);
}

/* Barres et jauges : des blocs pleins, pas des dégradés. */
:root[data-theme="minitel"] .search-progress-fill,
:root[data-theme="minitel"] .geoloc-confidence-fill {
  background: var(--accent);
  animation: none;
}

:root[data-theme="minitel"] .search-progress-fill::after { display: none; }

/* Les libellés de section prennent la casse du terminal. */
:root[data-theme="minitel"] .profile-site,
:root[data-theme="minitel"] .summary-facet-label,
:root[data-theme="minitel"] .tab-btn,
:root[data-theme="minitel"] .sidebar-section-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Les pastilles rondes deviennent carrées d'office via --radius-full, mais
   la sélection et les cases à cocher méritent la couleur du terminal. */
:root[data-theme="minitel"] ::selection {
  background: var(--vtx-cyan);
  color: var(--vtx-black);
  text-shadow: none;
}

:root[data-theme="minitel"] input[type="checkbox"] {
  accent-color: var(--accent);
}

/* La carte MapLibre reste une carte : on la teinte plutôt que de la casser. */
:root[data-theme="minitel"] .maplibregl-map {
  filter: grayscale(1) contrast(1.2) sepia(0.5) hue-rotate(75deg) saturate(1.8);
}

/* Le halo sur du texte fin finit en bouillie : on le retire là où la densité
   est forte. */
:root[data-theme="minitel"] .profile-stat-label,
:root[data-theme="minitel"] .vault-row-meta,
:root[data-theme="minitel"] .profile-url,
:root[data-theme="minitel"] .results-timestamp {
  text-shadow: none;
}

/* Le halo est fait pour du phosphore clair sur fond noir. Sur un texte sombre
   posé sur un aplat vif, il le noie : on le coupe partout où c'est inversé. */
:root[data-theme="minitel"] .enrich-cost,
:root[data-theme="minitel"] .token-buy-link,
:root[data-theme="minitel"] .app-package-tokens,
:root[data-theme="minitel"] .app-token-balance-value,
:root[data-theme="minitel"] .btn-primary,
:root[data-theme="minitel"] .sidebar-link.active,
:root[data-theme="minitel"] mark.hl {
  text-shadow: none;
}

/* Un peu d'air : la chasse fixe plus l'interlettrage serrent les chips. */
:root[data-theme="minitel"] .enrich-cost,
:root[data-theme="minitel"] .tab-count,
:root[data-theme="minitel"] .sidebar-link-badge {
  letter-spacing: 0;
  padding-left: 8px;
  padding-right: 8px;
}

/* La police Minitel est nettement plus large que Inter à corps égal, et les
   libellés de la barre latérale sortaient tronqués en « Userna... ». Plutôt
   que de caler une largeur au pifomètre, on les laisse passer à la ligne :
   deux lignes de texte sont parfaitement à leur place sur un terminal. */
:root[data-theme="minitel"] .sidebar-link,
:root[data-theme="minitel"] .app-header-link {
  font-size: 13px;
  letter-spacing: 0;
  align-items: flex-start;
}

:root[data-theme="minitel"] .sidebar-link-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* À 208px, la sidebar sobre est trop étroite pour cette police : les badges
   de coût sortaient du cadre. On lui rend un peu de largeur. */
@media (min-width: 641px) {
  :root[data-theme="minitel"] .app-sidebar { width: 240px; }
  :root[data-theme="minitel"] .app-content { margin-left: 240px; }
}

:root[data-theme="minitel"] .sidebar-link-badge,
:root[data-theme="minitel"] .app-header-tokens {
  font-size: 11px;
}

/* Les en-têtes de panneau qui ne sont pas des <h*> prennent quand même la
   casse du terminal, sinon le mélange saute aux yeux. */
:root[data-theme="minitel"] .search-summary-header,
:root[data-theme="minitel"] .app-panel-header,
:root[data-theme="minitel"] .results-title {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================
   PAS DE TRANSPARENCE
   ============================================

   Un Minitel n'a pas de canal alpha. Au-delà des jetons, trois mécanismes de
   l'interface reposaient sur de la translucidité : le flou d'arrière-plan, la
   mise en retrait par opacity, et les fonds teintés qui distinguaient les
   blocs. Les deux premiers sont supprimés, le troisième est remplacé par du
   trait ou de la vidéo inverse, qui sont les deux seuls outils qu'avait le
   videotex pour hiérarchiser.
   ============================================ */

:root[data-theme="minitel"] .app-header,
:root[data-theme="minitel"] .app-footer,
:root[data-theme="minitel"] .app-sidebar-scrim,
:root[data-theme="minitel"] .app-modal-overlay,
:root[data-theme="minitel"] .app-checkout-overlay,
:root[data-theme="minitel"] .copy-tooltip,
:root[data-theme="minitel"] #watchlist-modal-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* La mise en retrait passait par opacity, donc par de la transparence. On
   redéfinit plutôt les jetons de couleur à l'intérieur de l'élément : toute
   sa descendance vire au gris phosphore, en restant parfaitement opaque. */
:root[data-theme="minitel"] .profile-card.card-deselected,
:root[data-theme="minitel"] button:disabled,
:root[data-theme="minitel"] .btn:disabled,
:root[data-theme="minitel"] .app-buy-button:disabled {
  opacity: 1;
  --text-primary: var(--text-muted);
  --text-secondary: var(--text-muted);
  --accent: var(--text-muted);
  --border-color: #1a3b3a;
  --border-color-light: #1a3b3a;
  color: var(--text-muted);
  border-color: #1a3b3a;
}

:root[data-theme="minitel"] .profile-card.card-deselected {
  border-style: dashed;
}

/* Ce que le voile teinté distinguait, le trait le distingue maintenant. */
:root[data-theme="minitel"] .sidebar-link-badge,
:root[data-theme="minitel"] .tab-count,
:root[data-theme="minitel"] .profile-relme-count,
:root[data-theme="minitel"] .facet-count {
  border: 1px solid var(--border-color);
  background: var(--vtx-black);
}

/* Vidéo inverse : la seule mise en valeur dont disposait le videotex, donc
   réservée aux états uniques. Appliquée à une facette entière du résumé, elle
   transformait cinq chips en pavés jaunes qui écrasaient le reste. */
:root[data-theme="minitel"] .sidebar-link.active,
:root[data-theme="minitel"] .tab-btn.active {
  background: var(--accent);
  color: var(--vtx-black);
  border-color: var(--accent);
  text-shadow: none;
}

:root[data-theme="minitel"] .sidebar-link.active .sidebar-link-name,
:root[data-theme="minitel"] .sidebar-link.active .sidebar-link-badge {
  color: var(--vtx-black);
  border-color: var(--vtx-black);
  background: transparent;
  text-shadow: none;
}

/* Onglets. Le thème sobre les dessine en soulignement : padding asymétrique,
   marge négative, bordure basse seule. Ici la règle générique des boutons
   leur remet une bordure sur quatre côtés, et l'actif reçoit un fond : il
   faut donc une géométrie de boîte, symétrique, de même hauteur pour tous. */
:root[data-theme="minitel"] .tab-bar {
  gap: 8px;
  padding-bottom: 8px;
}

:root[data-theme="minitel"] .tab-btn {
  min-height: 32px;
  padding: 0 14px;
  margin-bottom: 0;
  border: 1px solid var(--border-color-light);
  color: var(--text-secondary);
  line-height: 1;
}

:root[data-theme="minitel"] .tab-btn:hover {
  background: var(--vtx-cyan);
  color: var(--vtx-black);
  border-color: var(--vtx-cyan);
}

:root[data-theme="minitel"] .tab-btn.active {
  border-color: var(--accent);
}

/* Le compteur dans l'onglet actif : noir sur jaune, sans son propre cadre. */
:root[data-theme="minitel"] .tab-btn.active .tab-count {
  color: var(--vtx-black);
  border-color: var(--vtx-black);
  background: transparent;
  text-shadow: none;
}

/* Les facettes à forte valeur gardent le trait plutôt que l'aplat : bordure
   et texte à l'accent, fond noir comme le reste. */
:root[data-theme="minitel"] .summary-chip-accent {
  background: var(--vtx-black);
  border-color: var(--accent);
  color: var(--accent);
}