/* Thèmes graphiques. La barre du haut garde sa STRUCTURE ; seul le style change.
   default = base.css. Ici : matrix, 80s, 90s. */

/* ============ MATRIX ============ */
[data-theme="matrix"] {
  --bg: #000600; --panel: rgba(0, 20, 0, 0.6); --panel-solid: #02160a;
  /* Vert plus posé : moins saturé/lumineux que le néon d'origine (boutons & titres moins « pétants »). */
  --text: #2fdb5a; --muted: #1f9c43; --border: rgba(47, 219, 90, 0.22);
  --accent: #33c957; --accent-2: #15a345; --accent-3: #57c43a;
  --sans: var(--mono);
}
[data-theme="matrix"] body { background: #000600; }
[data-theme="matrix"] #matrix-canvas { display: block; opacity: 0.55; }
[data-theme="matrix"] .brand,
[data-theme="matrix"] .hero-title,
[data-theme="matrix"] .prose h1 { -webkit-text-fill-color: var(--accent); color: var(--accent); text-shadow: 0 0 5px rgba(51,201,87,0.4); }
[data-theme="matrix"] .card { background: rgba(0, 18, 0, 0.78); box-shadow: 0 0 24px rgba(51,201,87,0.1); }
[data-theme="matrix"] .btn-primary { color: #001a00; box-shadow: 0 0 7px rgba(51,201,87,0.28); }
/* Les icônes météo sont des emoji couleur : on les teinte en vert pour respecter le thème. */
[data-theme="matrix"] .wx-icon { filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(6) brightness(0.95); }
[data-theme="matrix"] .topbar { background: rgba(0,4,0,0.88); }
/* Icônes monochromes, héritent du vert du texte (pas d'emoji colorés). */
[data-theme="matrix"] .ic-projects::before { content: "▦"; }
[data-theme="matrix"] .ic-theme::before  { content: "◈"; }
[data-theme="matrix"] .ic-lang::before   { content: "⊕"; }
[data-theme="matrix"] .ic-config::before { content: "⊙"; }
[data-theme="matrix"] .ic-about::before  { content: "ℹ"; }
[data-theme="matrix"] .ic-admin::before  { content: "⚙"; }
[data-theme="matrix"] .ic-user::before   { content: "◉"; }
[data-theme="matrix"] .ic-signin::before { content: "⚿"; }

/* ============ ANNÉES 90 ============ */
[data-theme="90s"] {
  --bg: #008080; --panel: #c0c0c0; --panel-solid: #c0c0c0;
  --text: #000080; --muted: #333; --border: #808080;
  --accent: #ff00ff; --accent-2: #0000ff; --accent-3: #ff0000;
  --radius: 0px; --shadow: none;
  --sans: "Comic Sans MS", "Comic Sans", "Times New Roman", cursive;
}
[data-theme="90s"] body {
  background: #008080 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23008080'/%3E%3Cpath d='M0 20h40M20 0v40' stroke='%2300a0a0' stroke-width='1'/%3E%3C/svg%3E");
}
[data-theme="90s"] .topbar { background: #000080; border-bottom: 4px ridge #c0c0c0; }
[data-theme="90s"] .brand { color: #ffff00; -webkit-text-fill-color: #ffff00; font-family: "Comic Sans MS", cursive; text-shadow: 2px 2px #ff0000; }
[data-theme="90s"] .brand span { color: #00ffff; -webkit-text-fill-color: #00ffff; }
[data-theme="90s"] .clocks { color: #00ff00; }
[data-theme="90s"] .clock-line .city { color: #ffff00; }
/* L'heure et la météo héritaient de --text (#000080, bleu marine) sur la barre bleu
   marine : invisible. On force un vert LCD lisible. */
[data-theme="90s"] .clock-line .time { color: #00ff00; }
[data-theme="90s"] .clock-line .wx,
[data-theme="90s"] .clock-line .wx-temp { color: #00ff00; }
[data-theme="90s"] .btn, [data-theme="90s"] .admin-tab { border: 3px outset #c0c0c0; background: #c0c0c0; color: #000080; border-radius: 0; }
[data-theme="90s"] .btn:active { border-style: inset; }
[data-theme="90s"] .btn-primary { background: #c0c0c0; color: #000080; }
[data-theme="90s"] .card { border: 3px ridge #c0c0c0; background: #d4d0c8; color: #000080; }
[data-theme="90s"] .card::before { display: none; }
[data-theme="90s"] .hero-title { color: #ffff00; -webkit-text-fill-color: #ffff00; text-shadow: 3px 3px #ff0000; animation: blink90 1.2s steps(2) infinite; }
[data-theme="90s"] .visit-counter { display: inline-flex; }
/* Icônes rétro façon GeoCities. */
[data-theme="90s"] .ic-projects::before { content: "📁"; }
[data-theme="90s"] .ic-config::before { content: "🖥️"; }
[data-theme="90s"] .ic-about::before  { content: "💾"; }
[data-theme="90s"] .ic-admin::before  { content: "🔧"; }
[data-theme="90s"] .ic-user::before   { content: "😎"; }
[data-theme="90s"] .ic-signin::before { content: "🗝️"; }
@keyframes blink90 { 50% { opacity: 0.55; } }

/* ============ 80s (ex-Minitel) ============ */
[data-theme="80s"] {
  /* Palette restreinte « téletexte » : un seul accent cyan + un texte gris doux sur noir.
     Fini le jaune / blanc pur / bleu / orange : ça faisait trop de couleurs pour un Minitel. */
  --bg: #000000; --panel: #000000; --panel-solid: #000000;
  --text: #cfd6d6; --muted: #4f9a9a; --border: #1f6f6f;
  --accent: #33cccc; --accent-2: #33cccc; --accent-3: #33cccc;
  --radius: 0px; --shadow: none;
  --sans: var(--mono); --mono: "VT323", "Courier New", monospace;
}
[data-theme="80s"] body { background: #000; letter-spacing: 1px; }
[data-theme="80s"] .topbar { background: #000; border-bottom: 2px solid var(--accent); }
[data-theme="80s"] .brand { color: var(--accent); -webkit-text-fill-color: var(--accent); font-family: var(--mono); text-transform: uppercase; }
[data-theme="80s"] .brand span { color: var(--accent); -webkit-text-fill-color: var(--accent); }
[data-theme="80s"] .btn, [data-theme="80s"] .admin-tab { border: 1px solid var(--accent); background: #000; color: var(--accent); border-radius: 0; font-family: var(--mono); }
[data-theme="80s"] .btn-primary { background: #06302f; color: var(--accent); border: 1px solid var(--accent); }
[data-theme="80s"] .card-head h3 { color: var(--accent); }
[data-theme="80s"] .card-desc { color: var(--text); }
[data-theme="80s"] .hero-title { color: var(--accent); -webkit-text-fill-color: var(--accent); font-family: var(--mono); }
[data-theme="80s"] .card-logo { filter: saturate(0) brightness(1.4) contrast(1.3); border-radius: 0; }
/* Icônes météo (emoji couleur) teintées en cyan pour respecter le thème téletexte. */
[data-theme="80s"] .wx-icon { filter: grayscale(1) sepia(1) hue-rotate(150deg) saturate(5) brightness(1.05); }
[data-theme="80s"] .vc-digits { color: var(--accent); border-color: var(--accent); }

/* --- Structure ASCII : cadres carrés en tirets, plus aucune courbe. --- */
/* Les boîtes encadrées (.card, .login-card, .menu) sont dessinées en lignes ASCII
   (tirets + angles), pas en bords arrondis. .login-card forçait un border-radius:20px
   en dur dans base.css : c'était la source des « courbes » du bloc de connexion. */
[data-theme="80s"] .card,
[data-theme="80s"] .login-card,
[data-theme="80s"] .menu {
  border: 1px dashed var(--accent); background: #000; border-radius: 0; box-shadow: none;
}
[data-theme="80s"] .card::before { display: none; }
/* Angles ASCII pour le bloc encadré cité par l'utilisateur (connexion). */
[data-theme="80s"] .login-card { position: relative; }
[data-theme="80s"] .login-card::before,
[data-theme="80s"] .login-card::after {
  position: absolute; color: var(--accent); font-family: var(--mono); line-height: 1; font-size: 1.1rem;
}
[data-theme="80s"] .login-card::before { content: "+"; top: -2px; left: -1px; }
[data-theme="80s"] .login-card::after  { content: "+"; bottom: -2px; right: -1px; }
/* Icônes ASCII/téletexte, cyan monochrome. */
[data-theme="80s"] .ic-projects::before { content: "▦"; }
[data-theme="80s"] .ic-theme::before  { content: "▤"; }
[data-theme="80s"] .ic-lang::before   { content: "¶"; }
[data-theme="80s"] .ic-config::before { content: "*"; }
[data-theme="80s"] .ic-about::before  { content: "?"; }
[data-theme="80s"] .ic-admin::before  { content: "#"; }
[data-theme="80s"] .ic-user::before   { content: "@"; }
[data-theme="80s"] .ic-signin::before { content: ">"; }
[data-theme="80s"] .content::before { content: "+--- FOFLAB · SERVICE MINITEL · 3615 ---+"; display: block; text-align: center; color: var(--accent); border: 1px dashed var(--accent); padding: 6px; margin-bottom: 20px; font-family: var(--mono); }

/* ============ MODERNE ============ */
/* Dark, minimaliste et contemporain — inspiration Bootstrap / Twitter « Dim » :
   surfaces pleines (pas de transparence/halo), un seul accent bleu, coins arrondis
   discrets, ombres légères. On neutralise les effets « néon » du thème par défaut. */
[data-theme="moderne"] {
  --bg: #15202b; --bg-2: #15202b;
  --panel: #1c2732; --panel-solid: #1c2732;
  --text: #e7e9ea; --muted: #8b98a5; --border: #38444d;
  --accent: #1d9bf0; --accent-2: #1a8cd8; --accent-3: #1d9bf0;
  --radius: 12px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Fond plat : on retire les halos radiaux multicolores du thème par défaut. */
[data-theme="moderne"] body { background: var(--bg); }
[data-theme="moderne"] .topbar { background: rgba(21, 32, 43, 0.88); border-bottom: 1px solid var(--border); }
/* Marque & titre hero en bleu uni plutôt qu'en dégradé multicolore. */
[data-theme="moderne"] .brand { background: none; color: var(--text); -webkit-text-fill-color: var(--text); }
[data-theme="moderne"] .brand span { color: var(--accent); -webkit-text-fill-color: var(--accent); }
[data-theme="moderne"] .hero-title { background: none; color: var(--text); -webkit-text-fill-color: var(--text); }
/* Boutons pleins, sobres ; le primaire est bleu à texte blanc. */
[data-theme="moderne"] .btn-primary { background: var(--accent); color: #fff; border: none; }
[data-theme="moderne"] .btn-primary:hover { background: var(--accent-2); filter: none; }
/* Cartes plates : pas de barre d'accent latérale, bord net, survol bleu discret. */
[data-theme="moderne"] .card { background: var(--panel); box-shadow: var(--shadow); }
[data-theme="moderne"] .card::before { display: none; }
[data-theme="moderne"] .card:hover { transform: none; border-color: var(--accent); }
/* Étiquettes (#tags) teintées dans le bleu d'accent. */
[data-theme="moderne"] .tag { color: var(--accent); background: rgba(29, 155, 240, 0.12); }

/* Sur cellulaire : jamais d'horloges ni de compteur (FofLab + boutons seulement). */
@media (max-width: 780px) {
  .visit-counter { display: none !important; }
}