/* ================================================================================================
   THÈME SOMBRE « PASTEL CRAYON — NUIT » (2026-08-23, choix Simon : « thème sombre via un bouton
   clair/sombre de l'utilisateur »).
   ------------------------------------------------------------------------------------------------
   ACTIVÉ PAR LA CLASSE `body.theme-sombre` (posée par UI.applyTheme, réglage Options mémorisé dans
   META.settings.theme). La feuille est TOUJOURS chargée : c'est la classe qui commute — pas un
   <link> qu'il faudrait injecter/retirer, ce qui provoquerait un flash au changement.
   ------------------------------------------------------------------------------------------------
   Principe : la charte reste la MÊME (papier, encre, aplats pastel, gros traits) — on inverse
   seulement le couple support/encre. Le « papier » devient une ARDOISE bleu-nuit, l'« encre » une
   craie claire. Les accents (corail, menthe, beurre, lavande) sont conservés : ils portent le code
   couleur du jeu et gagnent en éclat sur sombre.
   ⚠️ RÈGLE D'OR : toute règle ici DOIT être préfixée `body.theme-sombre` — sinon elle fuiterait
   dans le thème clair. Et tout ce qui pose une couleur DOIT poser le fond ET l'encre ensemble
   (c'est la source des « texte foncé sur fond foncé » qu'on veut éviter).
   ============================================================================================== */

body.theme-sombre {
  /* — le SUPPORT : ardoise bleutée (jamais du noir pur : le noir mange les traits) — */
  --pc-papier: #1b222e;
  --pc-papier-2: #232c3a;
  --pc-carte: #232c3a;
  --pc-kraft: #2b3547;

  /* — l'ENCRE devient CRAIE : cette seule inversion retourne toute la charte — */
  --pc-encre: #e9eff7;
  --pc-encre-douce: #b3c1d4;
  --pc-encre-pale: #8493a8;

  /* — les ACCENTS ne bougent pas, SAUF les pastels très clairs qui servent de FOND : eux passent
       en versions profondes, sinon on aurait du texte craie sur un fond crème — */
  --pc-ciel-pale: #2a3f52;
  --pc-menthe-pale: #243b33;
  --pc-beurre-pale: #3a3524;
  --pc-rose-pale: #3d2a2c;

  /* l'ombre « papier découpé » devient une ombre franche (une ombre bleutée translucide ne se voit
     pas sur ardoise) */
  --pc-ombre: 3px 3px 0 rgba(0, 0, 0, 0.45);

  /* — GLASS-UI : mêmes rôles, valeurs de nuit — */
  --g-hi: rgba(255, 255, 255, 0.12);
  --g-edge: rgba(233, 239, 247, 0.28);
  --g-edge-strong: rgba(233, 239, 247, 0.50);
  --g-text: #e9eff7;
  --g-text-soft: #b3c1d4;
  --g-muted: #8493a8;
  --g-panel-bg: linear-gradient(180deg, #232c3a, #1b222e);
  --g-card-bg: linear-gradient(180deg, #27313f, #212936);
  --g-card-bg-2: linear-gradient(180deg, #232c3a, #1c2431);
  --g-field-bg: #161c26;
}

/* ---- jetons de POPUPS et d'ÉCRAN DE MORT (mêmes portées que la charte claire) ---- */
body.theme-sombre #options-panel, body.theme-sombre #tutorial-panel,
body.theme-sombre #login-panel, body.theme-sombre #quests-panel,
body.theme-sombre #feedback-panel, body.theme-sombre #legal-panel,
body.theme-sombre #stuff-panel, body.theme-sombre .chest-modal-backdrop,
body.theme-sombre #premium-panel {
  --pg-paper: #232c3a;
  --pg-card: #27313f;
  --pg-field: #161c26;
  --pg-card-bg: linear-gradient(180deg, #27313f, #1e2733);
  --pg-sheet: linear-gradient(180deg, #232c3a, #1b222e);
  --pg-shadow-sheet: 6px 6px 0 rgba(0, 0, 0, 0.45);
  --pg-border: rgba(233, 239, 247, 0.26);
  --pg-border-strong: rgba(233, 239, 247, 0.46);
  --pg-ink: #e9eff7;
  --pg-ink-soft: #b3c1d4;
  --pg-muted: #8493a8;
  --pg-veil: radial-gradient(120% 90% at 50% 0%, rgba(8, 12, 20, 0.60), rgba(8, 12, 20, 0.80) 70%);
}
body.theme-sombre #death-screen {
  --dth-surface: rgba(35, 44, 58, 0.97);
  --dth-surface-2: rgba(233, 239, 247, 0.07);
  --dth-border: rgba(233, 239, 247, 0.42);
  --dth-text: #e9eff7;
  --dth-muted: #b3c1d4;
}

/* ---- les endroits où la charte claire écrit une couleur EN DUR (fonds « papier » translucides du
   HUD, cartes) : on les repasse en ardoise. Fond ET encre ensemble, systématiquement. ---- */
body.theme-sombre #leaderboard,
body.theme-sombre #xpbar,
body.theme-sombre #cargo-bar,
body.theme-sombre #pearl-hud,
body.theme-sombre #kills-hud,
body.theme-sombre #coins,
body.theme-sombre #tap-chip,
body.theme-sombre #dash-chip,
body.theme-sombre #power-chip,
body.theme-sombre #boss-banner,
body.theme-sombre #heli-notice,
body.theme-sombre #quest-chip,
body.theme-sombre #quest-bubble,
body.theme-sombre #quest-toast,
body.theme-sombre #hud-menu,
body.theme-sombre #onboard-tip,
body.theme-sombre #stats-panel,
body.theme-sombre #fleet-panel,
body.theme-sombre #hull-card,
body.theme-sombre #arm-tip,
body.theme-sombre #shop-bar,
body.theme-sombre #minimap-big-wrap,
body.theme-sombre #privacy-notice,
body.theme-sombre #sound-prompt,
body.theme-sombre .boost-badge,
body.theme-sombre .arm-slot,
body.theme-sombre .shop-card,
body.theme-sombre .shop-item,
body.theme-sombre .tc-btn,
body.theme-sombre #tc-ability,
body.theme-sombre #tc-context,
body.theme-sombre #mob-aids-dock .mob-aid-btn,
body.theme-sombre .mob-aid-status,
body.theme-sombre #mob-settings-coach,
body.theme-sombre #killfeed .feed-msg,
body.theme-sombre .panel-x,
body.theme-sombre #options-panel .panel-x,
body.theme-sombre #tutorial-panel .panel-x,
body.theme-sombre #feedback-panel .panel-x,
body.theme-sombre #premium-panel .panel-x,
body.theme-sombre #gallery-panel .panel-x,
body.theme-sombre #minimap-modal .panel-x,
body.theme-sombre #quests-panel .panel-x,
body.theme-sombre #legal-panel .panel-x,
body.theme-sombre #stuff-panel .panel-x,
body.theme-sombre #login-panel .panel-x {
  background: rgba(35, 44, 58, 0.94) !important;
  color: var(--pc-encre) !important;
}
/* les jauges gardent leur couleur de rôle, en versions profondes (sinon vert pastel sur ardoise
   = un bandeau qui brille plus que le jeu) */
body.theme-sombre #xpbar-fill { background: linear-gradient(90deg, #3f7d5c, #6bb98d) !important; }
body.theme-sombre #cargo-fill { background: linear-gradient(90deg, #9c8226, #d8bb4e) !important; }
body.theme-sombre #xpbar-label,
body.theme-sombre #cargo-label,
body.theme-sombre #xpbar-name { color: var(--pc-encre) !important; text-shadow: 0 1px 2px rgba(0,0,0,.75) !important; }
body.theme-sombre #leaderboard > h3 { background: rgba(58, 53, 36, 0.85) !important; color: #f6dfa0 !important; }
body.theme-sombre #leaderboard > h3,
body.theme-sombre #lb-list li,
body.theme-sombre #lb-list li b,
body.theme-sombre #lb-count { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; }
body.theme-sombre #leaderboard .me,
body.theme-sombre #lb-list li.me { background: rgba(58, 53, 36, 0.55) !important; }
body.theme-sombre .tc-stick .tc-base { background: rgba(30, 38, 50, 0.30) !important; border-color: rgba(233, 239, 247, 0.55) !important; }
body.theme-sombre .tc-stick .tc-knob { background: rgba(40, 50, 64, 0.94) !important; border-color: rgba(233, 239, 247, 0.7) !important; }
body.theme-sombre .tc-guide-lbl,
body.theme-sombre .tc-edit-lbl { color: var(--pc-encre) !important; text-shadow: 0 1px 2px rgba(0,0,0,.8) !important; }

/* ---- MENU : la grande carte et la carte d'équipe en ardoise ---- */
body.theme-sombre #menu #menu-main,
body.theme-sombre #menu #team-card {
  background: linear-gradient(180deg, #232c3a, #1a212c) !important;
  color: var(--pc-encre) !important;
}
/* CHAMPS DE SAISIE : fond sombre ET texte craie ensemble — c'est ici que naissent les « champs trop
   clairs » ou le texte noir invisible. Le placeholder suit. */
body.theme-sombre #menu .pseudo-input,
body.theme-sombre #menu input[type="text"],
body.theme-sombre #menu select,
body.theme-sombre #menu .pseudo-flag-row #pseudo-edit,
body.theme-sombre #menu .flag-open,
body.theme-sombre #menu .srv-toggle,
body.theme-sombre #menu #team-card input,
body.theme-sombre #menu #team-card select,
body.theme-sombre #feedback-box input,
body.theme-sombre #feedback-box textarea,
body.theme-sombre #feedback-box select,
body.theme-sombre #options-panel input[type="text"],
body.theme-sombre #options-panel select,
body.theme-sombre #login-panel input {
  background: #151b25 !important;
  color: var(--pc-encre) !important;
  border-color: rgba(233, 239, 247, 0.55) !important;
}
body.theme-sombre #menu .pseudo-input::placeholder,
body.theme-sombre #menu input::placeholder,
body.theme-sombre #feedback-box input::placeholder,
body.theme-sombre #feedback-box textarea::placeholder,
body.theme-sombre #login-panel input::placeholder { color: #7d8ba0 !important; }
body.theme-sombre #menu #name-input,
body.theme-sombre #menu #flag-open-name { color: var(--pc-encre) !important; }
body.theme-sombre #menu .flag-open-txt b,
body.theme-sombre #menu .srv-lbl { color: var(--pc-encre-douce) !important; }
body.theme-sombre #menu #server-select,
body.theme-sombre #menu .server-select {
  background: #232c3a !important;
  color: var(--pc-encre) !important;
}
body.theme-sombre #menu .server-select b,
body.theme-sombre #menu .server-select span { color: var(--pc-encre) !important; }

/* BOUTONS PASTEL CLAIRS : sur ardoise ils restent clairs, donc leur texte doit rester FONCÉ.
   C'est le piège inverse (« bouton clair avec texte clair ») — on fixe l'encre foncée dessus. */
body.theme-sombre #menu #btn-play,
body.theme-sombre #menu .play-row #btn-play,
body.theme-sombre #btn-shop,
body.theme-sombre #btn-inventory,
body.theme-sombre #menu-corner .menu-corner-btn.btn-shop .btn-shop-txt,
body.theme-sombre #feedback-panel #fb-send,
body.theme-sombre #feedback-box .fb-type.selected,
body.theme-sombre #tutorial-panel .tuto-tab.selected,
body.theme-sombre #mm-tabs .mm-tab.selected,
body.theme-sombre .shop-item-price,
body.theme-sombre .shop-item-price.ok,
body.theme-sombre #death-box button.primary,
body.theme-sombre #death-box .btn-respawn,
body.theme-sombre #menu #menu-main .menu-teaser,
body.theme-sombre #menu #menu-main .menu-howto-step { color: #23282f !important; }
/* … et leurs fonds pastel restent EXACTEMENT ceux de la charte claire (rien à redire ici) */

/* les CHIPS d'aide du menu : fond pastel clair → texte foncé (même règle que ci-dessus) */
body.theme-sombre #menu #menu-main .menu-howto-step { background: var(--pc-ciel) !important; }
body.theme-sombre #menu #menu-main .menu-teaser { background: var(--pc-beurre) !important; }

/* ---- POPUPS : boutons secondaires et onglets non sélectionnés (fond ardoise → texte craie) ---- */
body.theme-sombre #options-panel .btn-secondary,
body.theme-sombre #tutorial-panel .btn-secondary,
body.theme-sombre #quests-panel .btn-secondary,
body.theme-sombre #feedback-panel .btn-secondary,
body.theme-sombre #legal-panel .btn-secondary,
body.theme-sombre #stuff-panel .btn-secondary,
body.theme-sombre #premium-panel .btn-secondary,
body.theme-sombre #tutorial-panel .tuto-tab,
body.theme-sombre #mm-tabs .mm-tab,
body.theme-sombre #feedback-box .fb-type,
body.theme-sombre #gallery-codex,
body.theme-sombre #onboard-tip button {
  background: #27313f !important;
  color: var(--pc-encre) !important;
  border-color: rgba(233, 239, 247, 0.5) !important;
}
body.theme-sombre #feedback-box .fb-chip {
  background: rgba(58, 53, 36, 0.5) !important;
  color: var(--pc-encre-douce) !important;
}
/* le formulaire d'idée : titres et libellés en craie */
body.theme-sombre #feedback-box h2,
body.theme-sombre #feedback-box .fb-field-lbl,
body.theme-sombre #feedback-box .fb-type-lbl,
body.theme-sombre #feedback-box .fb-count,
body.theme-sombre #feedback-box .fb-note,
body.theme-sombre #feedback-box .fb-optional { color: var(--pc-encre) !important; }
body.theme-sombre #feedback-box .fb-lead { color: var(--pc-encre-douce) !important; }

/* ---- ROUE [Y] et voiles ---- */
body.theme-sombre #gallery-panel { background-color: rgba(20, 26, 36, 0.62) !important; }
body.theme-sombre #gallery-box h2 { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75) !important; }
body.theme-sombre .overlay { background: rgba(10, 14, 22, 0.55); }
body.theme-sombre #death-screen { background: rgba(8, 12, 20, 0.62) !important; }

/* ---- MINIMAP et cadres du jeu ---- */
body.theme-sombre #minimap { border-color: rgba(233, 239, 247, 0.55) !important; }
body.theme-sombre #minimap-big { border-color: rgba(233, 239, 247, 0.55) !important; }
body.theme-sombre .minimap-legend li { color: var(--pc-encre) !important; }

/* ================================================================================================
   GARDE-FOUS DE CONTRASTE (2026-08-23, relevés par la sonde `mode=contraste` du pilote).
   Deux pièges symétriques, tous deux mesurés à moins de 1,2:1 — donc illisibles :
     · « texte foncé sur fond foncé » : un bouton dont le fond bascule en ardoise gardait l'encre
       foncée que la charte claire lui donnait (fond pastel) ;
     · « bouton clair à texte clair » : l'inverse, sur les boutons qui RESTENT pastel en sombre.
   La règle : chaque bouton déclare son fond ET son encre, ensemble, dans le même bloc.
   ============================================================================================== */

/* A. FONDS PASTEL CONSERVÉS en sombre (ils portent un code couleur) → ENCRE FONCÉE, toujours. */
body.theme-sombre #menu-corner .menu-corner-btn.btn-login:not(.is-connected),
body.theme-sombre #menu-topbar .menu-corner-btn.btn-login:not(.is-connected),
body.theme-sombre .menu-corner-btn.btn-login {
  background: var(--pc-menthe) !important;
  color: #23282f !important;
}
body.theme-sombre #menu-corner .menu-corner-btn.btn-shop,
body.theme-sombre #menu-topbar .menu-corner-btn.btn-shop,
body.theme-sombre #btn-shop,
body.theme-sombre .menu-corner-btn.btn-shop {
  background: var(--pc-beurre) !important;
  color: #23282f !important;
}
body.theme-sombre #menu-corner .menu-corner-btn.btn-shop .btn-shop-txt,
body.theme-sombre .menu-corner-btn.btn-shop .btn-shop-txt,
body.theme-sombre .menu-corner-btn.btn-login .btn-login-txt { color: #23282f !important; }
body.theme-sombre #menu-corner .menu-corner-btn.btn-inventory,
body.theme-sombre #menu-topbar .menu-corner-btn.btn-inventory,
body.theme-sombre #btn-inventory,
body.theme-sombre .menu-corner-btn.btn-inventory {
  background: var(--pc-lavande) !important;
  color: #23282f !important;
}
/* les boutons d'ACTION des cartes d'Options gardent le corail (pas l'ardoise) → encre foncée */
body.theme-sombre #options-panel .opt-card .btn-secondary,
body.theme-sombre #options-panel .opt-card .opt-btn {
  background: var(--pc-corail) !important;
  color: #23282f !important;
  border-color: rgba(233, 239, 247, 0.6) !important;
}

/* B. FONDS ARDOISE → ENCRE CRAIE. Les boutons « de coin » neutres (Options, Quitter…) tombent ici :
   leur fond suit --pc-carte, donc il devient ardoise et leur texte DOIT rester clair. */
body.theme-sombre #menu-corner .menu-corner-btn,
body.theme-sombre #menu-topbar .menu-corner-btn,
body.theme-sombre .menu-corner-btn,
body.theme-sombre #btn-menu-options,
body.theme-sombre #btn-menu-blog,
body.theme-sombre #btn-menu-forum,
body.theme-sombre #btn-menu-mute {
  background: var(--pc-carte) !important;
  color: var(--pc-encre) !important;
}
/* (les quatre règles pastel du bloc A sont écrites APRÈS dans le fichier source pour les coques
   colorées, mais la spécificité `.btn-shop`/`.btn-login` les fait gagner de toute façon) */

/* C. LIBELLÉS INTERNES sans fond propre : ils héritaient d'une couleur figée. */
body.theme-sombre #menu .pseudo-hint,
body.theme-sombre #menu #team-card b,
body.theme-sombre #menu #team-card small,
body.theme-sombre #options-panel b,
body.theme-sombre #options-panel small,
body.theme-sombre #options-panel label,
body.theme-sombre #options-panel .opt-card p,
body.theme-sombre #premium-box b,
body.theme-sombre #premium-box small { color: var(--pc-encre-douce) !important; }
body.theme-sombre #menu #flag-open-name,
body.theme-sombre #options-panel .opt-titre,
body.theme-sombre #options-panel h3 { color: var(--pc-encre) !important; }

/* D. CHAMPS DE LA CARTE ÉQUIPE — la charte claire les cible par `#menu #team-card button` (2 ids) :
   une règle sombre à 1 id PERD, quel que soit l'ordre de chargement. On reprend donc ses deux ids.
   C'est le « champ trop clair » relevé : bloc blanc + texte craie = illisible. */
body.theme-sombre #menu #team-card button,
body.theme-sombre #menu #team-card input,
body.theme-sombre #menu #team-card select,
body.theme-sombre #menu #team-card .pseudo-input,
body.theme-sombre #menu #team-card .flag-open,
body.theme-sombre #menu #team-card #pseudo-edit {
  background: #151b25 !important;
  color: var(--pc-encre) !important;
  border-color: rgba(233, 239, 247, 0.55) !important;
}
body.theme-sombre #menu #team-card small,
body.theme-sombre #menu #team-card .pseudo-hint { color: var(--pc-encre-pale) !important; }
body.theme-sombre #menu #team-card b,
body.theme-sombre #menu #team-card #flag-open-name { color: var(--pc-encre) !important; }

/* E. BLOC « MODE RADIO » (Options) : `#options-panel .opt-radio-row` code un `background:#ffffff`
   EN DUR — un bloc blanc avec du texte craie dessus, exactement le cas signalé. Fond ardoise et
   encre craie, ensemble. Même traitement pour le sélecteur de piste dessous. */
body.theme-sombre #options-panel .opt-radio-row,
body.theme-sombre #options-panel .opt-track-toggle,
body.theme-sombre #options-panel .opt-select,
body.theme-sombre #options-panel select {
  background: #1e2733 !important;
  color: var(--pc-encre) !important;
  border-color: rgba(233, 239, 247, 0.4) !important;
}
body.theme-sombre #options-panel .opt-radio-row b,
body.theme-sombre #options-panel .opt-track-toggle b,
body.theme-sombre #options-panel #opt-track-current { color: var(--pc-encre) !important; }
body.theme-sombre #options-panel .opt-radio-row small { color: var(--pc-encre-pale) !important; }
/* les notes explicatives sous chaque carte */
body.theme-sombre #options-panel .opt-note,
body.theme-sombre #options-panel .opt-note b { color: var(--pc-encre-douce) !important; }
body.theme-sombre #options-panel #dev-toggle,
body.theme-sombre #options-panel #opt-version { color: var(--pc-encre-douce) !important; }

/* ================================================================================================
   ÉCRAN D'INSTALLATION PWA — VARIANTE SOMBRE (2026-08-23 soir)
   Règle d'or de cette feuille : tout bloc qui pose une couleur pose le FOND ET L'ENCRE ensemble.
   Les règles claires ci-dessus portent toutes `!important` : chaque sélecteur est donc REPRIS ici
   à l'identique, préfixé — une règle plus générique perdrait, quel que soit l'ordre de chargement.
   ============================================================================================== */
body.theme-sombre #install-gate {
  background-color: #141a24 !important;
  background-image: linear-gradient(180deg, #141a24 0%, #18202c 40%, #1d2f3e 70%, #2b4a5f 100%) !important;
}
body.theme-sombre .ig-sun {
  background: radial-gradient(circle, rgba(246, 223, 160, 0.3) 0%, rgba(246, 223, 160, 0.14) 46%, rgba(246, 223, 160, 0) 76%) !important;
}
body.theme-sombre .ig-wave-1 { background: #2e4c52 !important; opacity: 0.85 !important; }
body.theme-sombre .ig-wave-2 { background: #274153 !important; opacity: 0.9 !important; }
body.theme-sombre .ig-card {
  background: #1b2330 !important;
  border-color: rgba(200, 224, 240, 0.45) !important;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35) !important;
  color: #e8eef6 !important;
}
body.theme-sombre .ig-logo { color: #f4efe4 !important; }
body.theme-sombre .ig-logo span { color: #9fb0c4 !important; }
body.theme-sombre .ig-title { color: #f4efe4 !important; }
body.theme-sombre .ig-sub { color: #bcc9da !important; }
body.theme-sombre .ig-sub b { color: #f6dfa0 !important; }
body.theme-sombre .ig-perks { color: #bcc9da !important; }
body.theme-sombre .ig-tick { background: #4c9a72 !important; color: #0f1620 !important; }
body.theme-sombre .ig-installed { color: #9fb0c4 !important; }
/* Le corail garde son encre FONCÉE : c'est un fond clair, il ne suit pas le thème — écrire dessus
   en clair reproduirait exactement le défaut « bouton clair, texte clair » signalé sur la boutique. */
body.theme-sombre .ig-btn { background: #f4a09a !important; color: #241a12 !important; border-bottom-color: rgba(0, 0, 0, 0.45) !important; }
body.theme-sombre .ig-btn--open { background: #9fd5b6 !important; color: #16241d !important; }
body.theme-sombre .ig-btn--ghost {
  background: transparent !important;
  color: #dbe6f2 !important;
  border-color: rgba(200, 224, 240, 0.42) !important;
}
body.theme-sombre .ig-hint {
  background: rgba(246, 223, 160, 0.14) !important;
  color: #f2e6c4 !important;
  border-color: rgba(246, 223, 160, 0.4) !important;
}
body.theme-sombre .mobile-promo {
  background: #1b2330 !important;
  border-color: rgba(200, 224, 240, 0.35) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3) !important;
  color: #e8eef6 !important;
}
body.theme-sombre .mobile-promo .mp-txt b { color: #f6dfa0 !important; }
body.theme-sombre .mobile-promo .mp-x {
  background: #232d3c !important;
  border-color: rgba(200, 224, 240, 0.35) !important;
  color: #e8eef6 !important;
}