/* Palettes au choix (demande de Menad, 5 octobre 2026). Chargé en dernier. L'attribut data-palette change les couleurs ;
   data-theme (« sombre » ou « clair ») reste la famille, que lisent les autres feuilles de style. */

/* ---------- Familles foncées ---------- */
[data-palette="bleu"] { --fond: #0A1428; --panneau: #101D36; --panneau-2: #162642; --texte: #EEF3FB; --doux: #B2C0D6; --pale: #7C8CA8; --accent: #F2F5FA; --accent-encre: #0A1428; --gris: #C2CAD6; }
[data-palette="ardoise"] { --fond: #15181D; --panneau: #1C2027; --panneau-2: #232831; --texte: #ECEFF3; --doux: #AEB6C1; --pale: #7B8592; --accent: #F2F3F5; --accent-encre: #15181D; --gris: #BEC4CD; }
[data-palette="emeraude"] { --fond: #06231B; --panneau: #0B2E24; --panneau-2: #10392D; --texte: #F0F6F2; --doux: #B4C9BF; --pale: #7E998D; --accent: #E8CC7A; --accent-encre: #1B1503; --gris: #C3CEC8; --vert: #4BE39A; }
[data-palette] body { background: var(--fond); }
[data-palette="bleu"] body { background: radial-gradient(1200px 700px at 75% -10%, #17305c 0%, transparent 60%), var(--fond); }
[data-palette="emeraude"] body { background: radial-gradient(1200px 700px at 75% -10%, #0f4a37 0%, transparent 60%), var(--fond); }
[data-palette="ardoise"] body { background: radial-gradient(1200px 700px at 75% -10%, #2a303a 0%, transparent 60%), var(--fond); }
[data-palette] .compte { background: var(--panneau); }
[data-palette="emeraude"] .offre-onglet { background: var(--accent); color: var(--accent-encre); }

/* ---------- Familles claires : fond teinté, texte foncé, cartes bien détachées ---------- */
[data-palette="ivoire"] { --fond: #F1E9DA; --panneau: #FFFCF6; --panneau-2: #EBE1CF; --trait: rgba(52, 40, 16, .18); --trait-fort: rgba(52, 40, 16, .38); --texte: #13202B; --doux: #37434F; --pale: #5F6A75; --accent: #0E5A43; --accent-encre: #FFFFFF; --vert: #0B8A4B; --rouge: #C3243B; --gris: #5E6875; }
[data-palette="ciel"] { --fond: #E3EBF5; --panneau: #FFFFFF; --panneau-2: #D6E1EE; --trait: rgba(14, 32, 64, .18); --trait-fort: rgba(14, 32, 64, .38); --texte: #0C1A2E; --doux: #30415A; --pale: #586A84; --accent: #12407F; --accent-encre: #FFFFFF; --vert: #0B8A4B; --rouge: #C3243B; --gris: #56647A; }
[data-palette="ivoire"] body { background: radial-gradient(1100px 650px at 75% -10%, #fff7e6 0%, transparent 62%), var(--fond); }
[data-palette="ciel"] body { background: radial-gradient(1100px 650px at 75% -10%, #ffffff 0%, transparent 62%), var(--fond); }

[data-theme="clair"] :is(.fiche, .offre, .bilan-carte, .avis-carte, .rubrique, .chiffres div, .dossier, .zk-carte, .zk-panneau, .zk-sources, .zk-atouts div, .terminal-carte, .secteur-carte, .vitrine-carte, .alerte-exemple, .apercu-ouvert, .apercu-ferme, .transparence-grille div, .bandeau-alerte, .voisine, .compte, .detecteur, .repartition) {
  background: var(--panneau); border-color: var(--trait-fort); box-shadow: 0 1px 2px rgba(20, 25, 35, .06), 0 12px 28px -20px rgba(20, 25, 35, .45);
}
[data-theme="clair"] .offre.phare { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -24px rgba(20, 25, 35, .5); }
[data-theme="clair"] .offre-onglet { background: var(--accent); color: var(--accent-encre); }
[data-theme="clair"] :is(.zk-saisie, .liste-secteur, .zk-choix, .bascule, .filtre, .liste-champ) { border-color: var(--trait-fort); }
[data-theme="clair"] .zk-saisie { background: #fff; }
[data-theme="clair"] .zk-cours { background: linear-gradient(135deg, rgba(212, 175, 55, .22), var(--panneau) 60%); }
[data-theme="clair"] .zk-panneau { background: var(--panneau); }
[data-theme="clair"] .zk-jauge-piste { background: rgba(20, 25, 35, .14); }
[data-theme="clair"] .zk-jauge-piste i { background: linear-gradient(90deg, var(--pale), var(--texte)); }
[data-theme="clair"] .zk-jauge-piste b { background: var(--doux); }
[data-theme="clair"] .zk-jauge-piste b.or, [data-theme="clair"] .zk-jauge-legende span:last-child { background-color: transparent; color: #8a6a0a; }
[data-theme="clair"] .zk-jauge-piste b.or { background: #a8830f; }
[data-theme="clair"] .zk-fourchette { background: var(--panneau-2); }
[data-theme="clair"] .secteur-barre, [data-theme="clair"] .repartition-barre { background: rgba(20, 25, 35, .12); }
[data-theme="clair"] .piece-disque { background: radial-gradient(circle at 32% 26%, #fff, var(--panneau-2) 75%); border-color: var(--trait-fort); box-shadow: 0 12px 22px -12px rgba(20, 25, 35, .45); }
[data-theme="clair"] .piece-disque::after { border-color: var(--panneau); }
[data-theme="clair"] .piece[data-verdict="attente"] .piece-disque::after { border-color: transparent; }
[data-theme="clair"] .terminal-carte:hover, [data-theme="clair"] .secteur-carte:hover, [data-theme="clair"] .voisine:hover, [data-theme="clair"] .bandeau-alerte:hover { border-color: var(--accent); }
[data-theme="clair"] .entete-vue h1, [data-theme="clair"] .bloc-tete h2 { color: var(--texte); }
[data-theme="clair"] .note, [data-theme="clair"] .petit { color: var(--doux); }
[data-theme="clair"] .defile { background: var(--panneau-2); }

/* ---------- Sélecteur de palette ---------- */
.palettes { position: fixed; top: 64px; right: 16px; z-index: 60; display: grid; gap: 4px; padding: 10px; width: 220px; border-radius: 16px; border: 1px solid var(--trait-fort); background: var(--panneau); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); }
.palettes[hidden] { display: none; }
.palettes-titre { margin: 2px 6px 6px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pale); }
.palette-choix { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--texte); font: inherit; font-size: .9rem; cursor: pointer; text-align: left; }
.palette-choix:hover, .palette-choix:focus-visible { background: var(--panneau-2); }
.palette-choix[aria-checked="true"] { border-color: var(--trait-fort); background: var(--panneau-2); }
.palette-pastille { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(127, 127, 127, .5); background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); flex: none; }

/* Logos de sociétés qui défilent : disque blanc pour que chaque couleur de marque reste lisible sur toutes les palettes */
.logos-defile { margin-bottom: 18px; }
.logos-defile .crypto-piste { animation-duration: 90s; }
.logos-defile .crypto-rangee[data-sens="droite"] .crypto-piste { animation-duration: 104s; }
.piece-logo .piece-disque, [data-theme="clair"] .piece-logo .piece-disque { background: radial-gradient(circle at 32% 26%, #ffffff, #e9ecf1 85%); border-color: rgba(255, 255, 255, .6); }
[data-theme="clair"] .piece-logo .piece-disque { border-color: var(--trait-fort); }
.piece-logo .piece-disque img { width: 36px; height: 36px; object-fit: contain; }
@media (max-width: 720px) { .piece-logo .piece-disque img { width: 30px; height: 30px; } }