/* ============================================================= SUPREM CONQUEST — THEMES VISUELS PAR AGE · V1 ------------------------------------------------------------- Le moteur JS ajoute automatiquement au et au : .age-primitif / .age-bronze / ... / .age-technologique V1 : - Primitif : thème complet bois / pierre / terre / braises. - Technologique : thème actuel Suprem conservé, accents cyan. - Les autres âges reçoivent déjà leurs variables/badge afin de pouvoir être habillés progressivement sans refaire le moteur. ============================================================= */ .suprem-age-theme { --age-accent: #4f8fff; --age-accent-rgb: 79, 143, 255; --age-accent-2: #6edaff; --age-ink: #eef6ff; --age-muted: #a7bad0; --age-panel: rgba(5, 14, 29, .94); --age-panel-2: rgba(8, 22, 43, .92); --age-border: rgba(104, 178, 255, .24); --age-border-strong: rgba(104, 205, 255, .48); --age-shadow: 0 18px 44px rgba(0,0,0,.38); --age-title-font: Inter, Arial, sans-serif; } .age-primitif { --age-accent: #d59a4f; --age-accent-rgb: 213, 154, 79; --age-accent-2: #f0c46f; --age-ink: #f6ead0; --age-muted: #c8ad84; --age-panel: rgba(35, 23, 14, .95); --age-panel-2: rgba(54, 35, 19, .92); --age-border: rgba(181, 126, 67, .38); --age-border-strong: rgba(231, 177, 94, .64); --age-shadow: 0 18px 46px rgba(10, 5, 2, .54); --age-title-font: "Palatino Linotype", "Book Antiqua", Georgia, serif; } /* 2026-09-13, retour utilisateur : la palette de ces 6 paliers ne doit pas être devinée par moi - par défaut ils restent sur le bleu de .suprem-age-theme (accent + panneaux). L'admin choisit lui-même la couleur de chaque âge via le préréglage (Server/ageThemePresetService.js, admin.html onglet Thèmes par âge) ; ce module injecte alors les variables --age-* correspondantes en style inline sur , qui l'emportent sur ces classes sans avoir à toucher ce fichier. */ .age-bronze { --age-accent:#b87333; --age-accent-rgb:184,115,51; --age-accent-2:#dfad67; } .age-fer-antiquite { --age-accent:#8c9299; --age-accent-rgb:140,146,153; --age-accent-2:#c4b189; } .age-medieval { --age-accent:#9c7448; --age-accent-rgb:156,116,72; --age-accent-2:#d0ae6c; } .age-industriel { --age-accent:#a4937d; --age-accent-rgb:164,147,125; --age-accent-2:#d0b16f; } .age-moderne { --age-accent:#5185a4; --age-accent-rgb:81,133,164; --age-accent-2:#7fbad1; } .age-technologique { --age-accent:#45d9ff; --age-accent-rgb:69,217,255; --age-accent-2:#4c8dff; } .age-futuriste { --age-accent:#9b82ff; --age-accent-rgb:155,130,255; --age-accent-2:#58e4ff; } /* ---------- Signature d'âge dans le HUD global ---------- */ .suprem-age-signature { flex: 0 0 auto; min-width: 154px; min-height: 44px; padding: 5px 10px 5px 7px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--age-border); background: linear-gradient(145deg, rgba(var(--age-accent-rgb), .12), rgba(4, 10, 20, .76)); color: var(--age-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); } .suprem-age-emblem { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--age-border-strong); background: rgba(var(--age-accent-rgb), .12); color: var(--age-accent-2); font-family: var(--age-title-font); font-size: 12px; font-weight: 900; box-shadow: 0 0 15px rgba(var(--age-accent-rgb), .12); } .suprem-age-copy { min-width: 0; display: grid; gap: 1px; } .suprem-age-copy small { color: var(--age-muted); font-size: 8px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; } .suprem-age-copy strong { overflow: hidden; color: var(--age-ink); font-family: var(--age-title-font); font-size: 11px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } /* ============================================================= AGE PRIMITIF — BOIS / PIERRE / TERRE / BRAISES ============================================================= */ body.age-primitif { color: #f3e6ca !important; background-color: #171008 !important; background-image: radial-gradient(circle at 15% 8%, rgba(171, 102, 44, .24), transparent 25%), radial-gradient(circle at 84% 18%, rgba(105, 72, 37, .20), transparent 32%), repeating-linear-gradient(7deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px), linear-gradient(180deg, #20150c 0%, #120d08 48%, #0c0906 100%) !important; background-attachment: fixed !important; } body.age-primitif .page-overlay, body.age-primitif .pixi-page-bg { background: radial-gradient(circle at 50% -10%, rgba(219, 143, 68, .16), transparent 38%), linear-gradient(180deg, rgba(37, 23, 12, .30), rgba(12, 8, 5, .86)) !important; } body.age-primitif .banner-image { border-color: rgba(183, 124, 62, .42) !important; box-shadow: 0 18px 50px rgba(8,4,2,.48), inset 0 0 0 1px rgba(255,211,135,.04) !important; filter: sepia(.34) saturate(.78) contrast(1.04) brightness(.82) !important; } /* Navigation : on abandonne le langage hexagonal/néon pour une barre de bois. */ body.age-primitif:not(.account-body) .top-bar, body.age-primitif.pixi-page:not(.account-body) .top-bar.pixi-nav { border: 1px solid rgba(154, 101, 51, .55) !important; border-radius: 9px !important; background: repeating-linear-gradient(3deg, rgba(255,255,255,.018) 0 1px, transparent 1px 8px), linear-gradient(180deg, rgba(71, 45, 24, .97), rgba(38, 25, 15, .98)) !important; box-shadow: 0 15px 34px rgba(8,4,2,.42), inset 0 1px 0 rgba(255,226,171,.08), inset 0 -1px 0 rgba(0,0,0,.35) !important; } body.age-primitif:not(.account-body) .top-bar::before, body.age-primitif:not(.account-body) .top-bar::after, body.age-primitif.pixi-page:not(.account-body) .top-bar.pixi-nav::before, body.age-primitif.pixi-page:not(.account-body) .top-bar.pixi-nav::after { width: 110px !important; height: 2px !important; background: linear-gradient(90deg, transparent, rgba(236, 166, 82, .86), rgba(255, 215, 139, .42)) !important; box-shadow: 0 0 10px rgba(213,126,47,.26) !important; } body.age-primitif:not(.account-body) .top-bar > button, body.age-primitif:not(.account-body) .top-bar > a, body.age-primitif:not(.account-body) .top-bar > .player-menu-nav > summary, body.age-primitif.pixi-page:not(.account-body) .top-bar.pixi-nav > button, body.age-primitif.pixi-page:not(.account-body) .top-bar.pixi-nav > a, body.age-primitif.pixi-page:not(.account-body) .top-bar.pixi-nav > .player-menu-nav > summary { border-color: rgba(175, 121, 66, .36) !important; border-radius: 5px !important; clip-path: polygon(3% 0, 96% 2%, 100% 18%, 98% 82%, 94% 100%, 5% 97%, 0 80%, 2% 18%) !important; background: repeating-linear-gradient(4deg, rgba(255,255,255,.015) 0 1px, transparent 1px 7px), linear-gradient(180deg, rgba(91, 58, 31, .98), rgba(48, 31, 19, .99)) !important; color: #f1dfbd !important; font-family: var(--age-title-font) !important; letter-spacing: .025em !important; box-shadow: inset 0 1px 0 rgba(255,227,175,.08), 0 7px 15px rgba(8,4,2,.20) !important; } body.age-primitif:not(.account-body) .top-bar > button:hover, body.age-primitif:not(.account-body) .top-bar > a:hover, body.age-primitif:not(.account-body) .top-bar > .player-menu-nav > summary:hover, body.age-primitif:not(.account-body) .top-bar > button.active, body.age-primitif:not(.account-body) .top-bar > button.is-active, body.age-primitif:not(.account-body) .top-bar > a.active, body.age-primitif:not(.account-body) .top-bar > a.is-active, body.age-primitif:not(.account-body) .top-bar > .player-menu-nav.is-active > summary, body.age-primitif:not(.account-body) .top-bar > .player-menu-nav[open] > summary { border-color: rgba(236, 177, 91, .66) !important; background: repeating-linear-gradient(4deg, rgba(255,255,255,.02) 0 1px, transparent 1px 7px), linear-gradient(180deg, rgba(130, 78, 35, .98), rgba(79, 47, 24, .99)) !important; color: #fff1cd !important; box-shadow: 0 0 0 1px rgba(205,137,57,.12), 0 0 22px rgba(188,101,35,.20), inset 0 1px 0 rgba(255,224,159,.12) !important; } body.age-primitif .player-menu-panel, body.age-primitif .kingdom-menu-panel { border-color: rgba(167, 111, 57, .44) !important; background: linear-gradient(180deg, rgba(50, 32, 19, .99), rgba(27, 19, 13, .995)) !important; box-shadow: 0 20px 42px rgba(7,3,1,.48) !important; } body.age-primitif .player-menu-panel a, body.age-primitif .kingdom-menu-panel a { color: #e9d6b5 !important; } body.age-primitif .player-menu-panel a:hover, body.age-primitif .player-menu-panel a.is-active, body.age-primitif .kingdom-menu-panel a:hover, body.age-primitif .kingdom-menu-panel a.is-active { background: rgba(181, 105, 43, .16) !important; color: #ffe6ae !important; } /* HUD du village : planche massive + pierre. */ body.age-primitif .global-village-hud-inner { border-color: rgba(151, 98, 51, .46) !important; background: repeating-linear-gradient(2deg, rgba(255,255,255,.012) 0 1px, transparent 1px 8px), linear-gradient(180deg, rgba(53, 35, 21, .985), rgba(27, 19, 13, .99)) !important; box-shadow: 0 13px 28px rgba(7,4,2,.38), inset 0 1px 0 rgba(255,224,170,.06) !important; } body.age-primitif .global-village-cycle, body.age-primitif .global-village-trigger, body.age-primitif .global-village-resource, body.age-primitif .suprem-age-signature { border-color: rgba(174, 118, 61, .30) !important; background: linear-gradient(180deg, rgba(84, 54, 31, .82), rgba(43, 29, 19, .88)) !important; color: #f2e2c3 !important; } body.age-primitif .global-village-resource strong { color: #f6e8ca !important; } body.age-primitif .global-village-resource-label, body.age-primitif .global-village-resource-cap, body.age-primitif .global-village-title-wrap small, body.age-primitif .global-village-title-wrap span { color: #bea682 !important; } body.age-primitif .global-village-popover { border-color: rgba(161, 106, 55, .40) !important; background: rgba(32, 22, 15, .995) !important; } body.age-primitif .global-village-option { border-color: rgba(145, 99, 53, .20) !important; background: rgba(111, 73, 39, .08) !important; } body.age-primitif .global-village-option:hover, body.age-primitif .global-village-option.is-active { border-color: rgba(217, 151, 70, .48) !important; background: linear-gradient(90deg, rgba(158, 89, 37, .21), rgba(74, 45, 25, .10)) !important; box-shadow: inset 3px 0 0 #d49a4c !important; } body.age-primitif .suprem-age-emblem { border-radius: 50% !important; background: radial-gradient(circle at 42% 35%, rgba(246,201,121,.18), transparent 36%), #49301d !important; border-color: rgba(224, 162, 78, .56) !important; color: #f1c674 !important; box-shadow: inset 0 0 0 2px rgba(28,17,10,.48), 0 0 13px rgba(184,100,36,.17) !important; } /* Panneaux principaux communs. */ body.age-primitif :is( .panel, .academy-panel, .academy-side-panel, .caserne-panel, .caserne-table-panel, .forge-panel, .map-panel, .map-side-card, .tutorial-rail, .tutorial-hero-card, .tutorial-progress-card, .tutorial-guide-box, .construction-queue-panel, .command-operations-panel, .command-situation-panel ) { border-color: rgba(163, 109, 57, .34) !important; background: radial-gradient(circle at 100% 0, rgba(198, 127, 52, .07), transparent 27%), linear-gradient(180deg, rgba(45, 30, 18, .96), rgba(24, 17, 12, .94)) !important; box-shadow: var(--age-shadow) !important; } body.age-primitif :is( .building-card, .building-list-card, .building-detail-card, .building-info-block, .building-next-benefits, .building-summary-card, .command-kpi-card, .commandement-card-link, .commandement-metric-card, .commandement-production-card, .commandement-reports-card, .commandement-stat-card, .commandement-village-card, .caserne-overview-card, .caserne-queue-card, .forge-stat-card, .tutorial-commander-mini ) { border-color: rgba(173, 117, 61, .28) !important; background: linear-gradient(155deg, rgba(76, 49, 27, .76), rgba(35, 24, 16, .90)) !important; box-shadow: 0 10px 26px rgba(8,4,2,.28), inset 0 1px 0 rgba(255,226,174,.035) !important; } body.age-primitif :is( .ultra-hero-title, .village-title-row h1, .caserne-title, .forge-title, .academy-title, .tutorial-hero-copy h1, .tutorial-hero-copy h2, .forge-section-title, .academy-panel h1, .academy-panel h2, .panel h1, .panel h2, .panel h3 ) { color: #f4dfb5 !important; font-family: var(--age-title-font) !important; text-shadow: 0 2px 0 rgba(0,0,0,.42), 0 0 15px rgba(189,111,40,.08) !important; } body.age-primitif :is(.ultra-eyebrow,.panel-kicker,.caserne-kicker,.forge-kicker,.academy-kicker,.tutorial-kicker,.forge-section-kicker) { color: #d9a45d !important; } body.age-primitif :is(.ultra-hero-sub,.caserne-info,.forge-subtitle,.academy-info,.tutorial-guide-box p) { color: #cbb694 !important; } /* Boutons d'action : bois renforcé / braises, sans glow bleu. */ body.age-primitif :is( .btn-primary,.btn-secondary,.mode-tab,.academy-btn,.caserne-btn,.caserne-return-btn, .forge-btn,.compact-action,.strategic-action,.tutorial-primary-action,.tutorial-claim-action, .building-switcher button,.academy-view-btn,.caserne-filter-btn ) { border-color: rgba(181, 124, 65, .42) !important; background: linear-gradient(180deg, rgba(101, 63, 32, .96), rgba(53, 34, 20, .98)) !important; color: #f4e3c2 !important; box-shadow: inset 0 1px 0 rgba(255,225,168,.07), 0 7px 16px rgba(7,4,2,.20) !important; } body.age-primitif :is( .btn-primary,.btn-secondary,.mode-tab,.academy-btn,.caserne-btn,.caserne-return-btn, .forge-btn,.compact-action,.strategic-action,.tutorial-primary-action,.tutorial-claim-action, .building-switcher button,.academy-view-btn,.caserne-filter-btn ):hover, body.age-primitif :is(.mode-tab.active,.academy-view-btn.is-active,.caserne-filter-btn.is-active,.building-switcher .is-active) { border-color: rgba(232, 174, 88, .68) !important; background: linear-gradient(180deg, rgba(139, 82, 34, .98), rgba(76, 45, 23, .99)) !important; color: #fff0c8 !important; box-shadow: 0 0 18px rgba(186,100,34,.14), inset 0 1px 0 rgba(255,225,157,.10) !important; } /* Caserne compacte : cartes d'unités primitives réellement terreuses. */ body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-row { border-color: rgba(171, 115, 60, .32) !important; background: linear-gradient(160deg, rgba(64, 42, 24, .98), rgba(27, 19, 13, .99)) !important; box-shadow: 0 11px 24px rgba(6,3,1,.32), inset 0 1px rgba(255,226,173,.035) !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-cell-cost { border-right-color: rgba(217,160,89,.12) !important; background: rgba(32, 22, 14, .72) !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-cost-pill { border-color: rgba(178,120,63,.23) !important; background: linear-gradient(180deg, rgba(83,53,29,.94), rgba(45,31,20,.94)) !important; color: #f1e0c0 !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-unit-visual-image { filter: sepia(.20) saturate(.83) contrast(1.04) !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-unit-visual-shade { background: linear-gradient(90deg, rgba(42,28,17,0) 42%, rgba(42,28,17,.08) 58%, rgba(27,18,12,.34) 100%), linear-gradient(90deg, rgba(38,25,15,.12), transparent 52%) !important; } /* Carte : seulement l'enveloppe UI. Le terrain Pixi reste lisible et intact. */ body.age-primitif .pixi-toolbar, body.age-primitif .map-toolbar { border-color: rgba(167,111,57,.32) !important; background: linear-gradient(180deg, rgba(58,38,22,.95), rgba(29,21,14,.96)) !important; } body.age-primitif :is(.world-chip,.caserne-chip,.forge-chip,.ultra-chip,.building-tech-badge) { border-color: rgba(188,132,70,.30) !important; background: rgba(129,78,34,.14) !important; color: #ebc981 !important; } /* Inputs/selects pour supprimer le bleu technologique résiduel. */ body.age-primitif :is(input,select,textarea) { border-color: rgba(159,106,58,.36) !important; background-color: rgba(32,22,15,.94) !important; color: #f1e3c8 !important; } body.age-primitif :is(input,select,textarea):focus { border-color: rgba(222,161,78,.62) !important; box-shadow: 0 0 0 3px rgba(190,112,42,.12) !important; } /* ============================================================= AGE TECHNOLOGIQUE — le design actuel EST le thème techno. On ne le remplace pas : seulement signature/accent de cohérence. ============================================================= */ body.age-technologique .suprem-age-signature { border-color: rgba(69,217,255,.30) !important; background: linear-gradient(145deg, rgba(16,106,157,.22), rgba(5,16,36,.84)) !important; box-shadow: inset 0 1px 0 rgba(181,242,255,.07), 0 0 20px rgba(32,160,255,.08) !important; } body.age-technologique .suprem-age-emblem { clip-path: polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%); border-color: rgba(84,226,255,.58) !important; background: rgba(25,119,178,.18) !important; color: #78e9ff !important; box-shadow: 0 0 17px rgba(43,195,255,.24) !important; } /* Responsive */ @media (max-width: 1120px) { .suprem-age-signature { min-width: 136px; } .suprem-age-copy strong { max-width: 112px; } } @media (max-width: 780px) { .suprem-age-signature { min-width: 44px; width: 44px; padding: 5px; justify-content: center; } .suprem-age-copy { display: none; } .suprem-age-emblem { width: 30px; height: 30px; } body.age-primitif:not(.account-body) .top-bar, body.age-primitif.pixi-page:not(.account-body) .top-bar.pixi-nav { border-radius: 6px !important; } } @media (prefers-reduced-motion: reduce) { .suprem-age-signature, .suprem-age-emblem { transition: none !important; } } /* ============================================================= AGE PRIMITIF — V2 / NETTOYAGE DES DERNIERS ACCENTS TECHNO Les anciennes feuilles de Suprem contiennent plusieurs familles de variables bleues. On les redéfinit ici au niveau du body afin que tous les composants descendants adoptent le vocabulaire terre. ============================================================= */ body.age-primitif { --accent: #d59a4f !important; --accent-2: #f0c46f !important; --accent-soft: rgba(213,154,79,.18) !important; --hud-cyan: #d59a4f !important; --hud-cyan-soft: rgba(213,154,79,.34) !important; --hud-blue: #9f612f !important; --hud-bg: rgba(30,20,13,.94) !important; --hud-bg-2: rgba(48,31,18,.91) !important; --hud-panel: rgba(45,29,17,.91) !important; --hud-panel-2: rgba(62,40,22,.88) !important; --hud-card: rgba(74,47,25,.74) !important; --hud-line: rgba(213,154,79,.30) !important; --hud-line-soft: rgba(213,154,79,.15) !important; --hud-glow: rgba(177,96,37,.20) !important; --hud-border: rgba(213,154,79,.28) !important; --hud-border-soft: rgba(213,154,79,.14) !important; --v2-cyan: #d59a4f !important; --v2-blue: #a5612e !important; --v2-blue-soft: rgba(165,97,46,.18) !important; --v2-line: rgba(213,154,79,.32) !important; --v2-line-soft: rgba(213,154,79,.15) !important; --v2-panel: rgba(38,24,14,.94) !important; --v2-panel-2: rgba(54,34,18,.88) !important; --blue: #c18343 !important; --cyan: #e0ac61 !important; --border-strong: rgba(222,163,84,.38) !important; --academy-bg: rgba(35,23,14,.94) !important; --academy-bg-soft: rgba(255,224,171,.035) !important; --academy-border: rgba(181,126,67,.22) !important; --academy-border-strong: rgba(222,163,84,.38) !important; --academy-muted: rgba(231,209,173,.68) !important; --kg-border: rgba(181,126,67,.24) !important; --kg-blue: #d9a45d !important; --kg-soft: rgba(233,217,190,.72) !important; } /* Village / tableau de bord */ body.age-primitif::before { background-image: linear-gradient(rgba(210,151,76,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(210,151,76,.014) 1px, transparent 1px) !important; opacity: .48 !important; } body.age-primitif :is(.top-meta-card,.resource-rich-card,.global-village-card,.combat-card,.combat-unit-card, .construction-queue-panel,.academy-side-panel,#tutorial-panel,#progression-roadmap-panel,#empire-command-center) { border-color: rgba(181,126,67,.24) !important; background: radial-gradient(circle at 100% 0, rgba(198,127,52,.055), transparent 31%), linear-gradient(180deg, rgba(51,33,19,.95), rgba(27,19,13,.95)) !important; box-shadow: 0 18px 48px rgba(8,4,2,.35) !important; } body.age-primitif :is(.top-resource-icon,.combat-unit-icon,.empire-compact-stat-icon,.empire-icon-button,.empire-compact-movement-icon) { border-color: rgba(197,139,72,.22) !important; background: rgba(127,77,35,.12) !important; color: #e8ba72 !important; box-shadow: none !important; } body.age-primitif :is(.global-village-label,.commandement-card-link,.onboarding-next-index, .onboarding-step-dot.active,.empire-compact-stat-icon,.empire-icon-button,.empire-compact-movement-icon) { color: #e1ad65 !important; } body.age-primitif .global-village-card::before, body.age-primitif .village-preview-panel::after { background: linear-gradient(90deg, transparent, rgba(218,157,76,.65), transparent) !important; } body.age-primitif .village-side-panel::before { border-color: rgba(218,157,76,.48) !important; } body.age-primitif :is(.summary-left h1,.forge-title) { text-shadow: 0 2px 0 rgba(0,0,0,.42),0 0 20px rgba(181,100,36,.11) !important; } body.age-primitif .building-visual-shell { background: radial-gradient(circle at 24% 18%, rgba(213,154,79,.13), transparent 38%), linear-gradient(145deg,#4a301d 0%,#291b12 52%,#130e09 100%) !important; border-color: rgba(189,127,63,.25) !important; } body.age-primitif #tutorial-panel::after { background: linear-gradient(180deg,#d59a4f,rgba(129,71,31,.28)) !important; } body.age-primitif :is(.commandement-stock-meter > span,.onboarding-compact-progress > span,.movement-commerce .movement-progress span) { background: linear-gradient(90deg,#9f612f,#e0ac61) !important; box-shadow: 0 0 12px rgba(181,100,36,.20) !important; } body.age-primitif :is(.commandement-metric-card:hover,.commandement-production-total,.commandement-production-row, .onboarding-next-step,.empire-command-error,.empire-compact-empty) { border-color: rgba(181,126,67,.20) !important; background: rgba(79,50,28,.18) !important; } body.age-primitif .report-interception-location { border-color: rgba(197,139,72,.30) !important; background: linear-gradient(135deg,rgba(81,49,24,.45),rgba(31,22,15,.64)) !important; } body.age-primitif .report-interception-location span { color:#e2b36e !important; } /* Vue globale (Village > Global) — village-global-v22.css a ses propres couleurs bleues codées en dur, jamais reliées aux variables ci-dessus (retour utilisateur 2026-09-01 : "les info dans les case sont toujours en bleu"). */ body.age-primitif #global-commandement-section { background: radial-gradient(circle at 90% 0%, rgba(198,127,52,.13), transparent 32%), radial-gradient(circle at 0% 45%, rgba(34,211,168,.06), transparent 30%), linear-gradient(145deg, rgba(35,23,14,.98), rgba(20,13,8,.98)) !important; } body.age-primitif :is(.global-command-summary article,#global-commandement-section .global-village-card-v19, #global-commandement-section .global-village-card-v22,.global-command-toolbar) { border-color: rgba(181,126,67,.22) !important; background: linear-gradient(155deg, rgba(51,33,19,.82), rgba(24,16,10,.92)) !important; } body.age-primitif .global-command-summary article.is-alert.has-alerts { background: linear-gradient(145deg, rgba(99,52,22,.55), rgba(28,14,18,.88)) !important; } body.age-primitif :is(.global-command-summary span,.global-search span,.global-sort span,.global-view-result) { color: rgba(216,189,153,.72) !important; } body.age-primitif :is(.global-command-summary strong,.global-card-resources strong,.global-card-foot > span strong, .global-detail-heading h2,.global-detail-section-head) { color: #f6ead0 !important; } body.age-primitif .global-command-summary small { color: rgba(216,189,153,.55) !important; } body.age-primitif .global-view-filters button { color: rgba(233,214,181,.75) !important; } body.age-primitif :is(.global-view-filters button:hover,.global-view-filters button.is-active) { border-color: rgba(224,168,88,.45) !important; background: linear-gradient(135deg, rgba(158,97,42,.42), rgba(90,54,22,.40)) !important; } body.age-primitif :is(.global-search input,.global-sort select) { border-color: rgba(181,126,67,.28) !important; background: rgba(31,20,12,.92) !important; color: #f3e6cc !important; } body.age-primitif :is(.global-search input:focus,.global-sort select:focus) { border-color: rgba(224,168,88,.60) !important; box-shadow: 0 0 0 3px rgba(198,127,52,.14) !important; } body.age-primitif .global-unit-filter-badge { background: rgba(180,120,55,.20) !important; border-color: rgba(224,168,88,.42) !important; color: #f6ead0 !important; } body.age-primitif .global-event-row { border-color: rgba(181,126,67,.20) !important; background: rgba(35,23,14,.42) !important; } body.age-primitif .global-event-row:hover { border-color: rgba(224,168,88,.42) !important; background: rgba(198,127,52,.10) !important; } body.age-primitif :is(.global-card-open,.global-card-foot > button) { border-color: rgba(197,139,72,.28) !important; background: rgba(139,82,34,.16) !important; color: #f0dfc0 !important; } body.age-primitif .global-card-open:hover { border-color: rgba(224,168,88,.55) !important; background: rgba(139,82,34,.28) !important; } body.age-primitif .global-card-state { color: rgba(224,205,177,.76) !important; } body.age-primitif .global-card-resources > span { border-color: rgba(181,126,67,.16) !important; background: rgba(24,16,10,.46) !important; } body.age-primitif :is(.global-card-resources small,.global-card-foot small) { color: rgba(216,189,153,.62) !important; } body.age-primitif .global-detail-heading p { color: rgba(216,189,153,.68) !important; } body.age-primitif .global-detail-section-head small { color: rgba(216,189,153,.60) !important; } /* Panneau colonisation (colons disponibles / en route) — omega-ui-clean-fix.css force un bleu "Omega" y compris en âge primitif ("Nettoyage des panneaux colonisation : bleu Omega") ; on sur-écrit ici avec une spécificité équivalente (classes seules côté source, donc body.age-primitif suffit à gagner). */ body.age-primitif :is(.sidebar-colonisation-box,.colonisation-village-box,.colonisation-combat-panel) { border-color: rgba(181,126,67,.30) !important; background: radial-gradient(circle at 0% 0%, rgba(198,127,52,.13), transparent 34%), linear-gradient(180deg, rgba(35,23,14,.96), rgba(20,13,8,.94)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 28px rgba(8,4,2,.30), 0 0 22px rgba(198,127,52,.08) !important; } body.age-primitif :is(.sidebar-colonisation-box .colonisation-kicker,.colonisation-combat-panel .panel-kicker, .colonisation-village-box .colonisation-kicker) { color: #e0ac61 !important; } body.age-primitif :is(.sidebar-colonisation-box h3,.colonisation-village-box h3,.colonisation-combat-panel h2, .movement-colonisation .report-title) { color: #f6ead0 !important; text-shadow: 0 0 14px rgba(198,127,52,.14) !important; } body.age-primitif :is(.colonisation-count,.sidebar-colonisation-box .colonisation-count) { color: #f6ead0 !important; border-color: rgba(224,168,88,.32) !important; background: linear-gradient(180deg, rgba(158,97,42,.26), rgba(90,54,22,.10)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 14px rgba(198,127,52,.14) !important; } body.age-primitif :is(.colonisation-badges span,.sidebar-colonisation-box .colonisation-badges span) { border-color: rgba(224,168,88,.26) !important; background: rgba(158,97,42,.11) !important; color: #f0dfc0 !important; } body.age-primitif :is(.colonisation-badges span.ok,.sidebar-colonisation-box .colonisation-badges span.ok) { border-color: rgba(231,177,94,.40) !important; background: rgba(198,127,52,.16) !important; color: #f6ead0 !important; } body.age-primitif :is(.colonisation-main-btn,.sidebar-colonisation-box button, .movement-colonisation .movement-actions button,.mv-btn,.mv-list-btn) { border-color: rgba(224,168,88,.32) !important; background: linear-gradient(180deg, rgba(158,97,42,.92), rgba(74,45,25,.92)) !important; color: #fbf1dc !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(8,4,2,.22), 0 0 18px rgba(198,127,52,.12) !important; } body.age-primitif :is(.colonisation-main-btn:disabled,.sidebar-colonisation-box button:disabled) { background: linear-gradient(180deg, rgba(50,36,20,.80), rgba(26,18,10,.85)) !important; color: rgba(235,220,195,.55) !important; border-color: rgba(181,126,67,.14) !important; } body.age-primitif :is(.colonisation-movements-list .movement-colonisation,.movement-colonisation.report-item) { border-color: rgba(181,126,67,.32) !important; background: radial-gradient(circle at 0% 0%, rgba(198,127,52,.14), transparent 28%), linear-gradient(180deg, rgba(44,29,16,.96), rgba(24,16,10,.96)) !important; box-shadow: inset 0 0 24px rgba(198,127,52,.06), 0 0 18px rgba(198,127,52,.06) !important; } body.age-primitif .movement-colonisation .movement-progress { background: rgba(158,97,42,.14) !important; } body.age-primitif .movement-colonisation .movement-progress span { background: linear-gradient(90deg,#9f612f,#e0ac61) !important; box-shadow: 0 0 12px rgba(181,100,36,.28) !important; } body.age-primitif :is(.nav-pill-blue,#combat-colon-badge,#colonisation-nav-badge) { background: linear-gradient(180deg, rgba(158,97,42,.30), rgba(90,54,22,.12)) !important; border-color: rgba(224,168,88,.36) !important; color: #f6ead0 !important; } body.age-primitif :is(.empty-state,.reports-list > .empty-state,.no-data,.placeholder-row) { background: rgba(35,23,14,.55) !important; border-color: rgba(181,126,67,.18) !important; } /* Architecte — styles-architecte.css (section "PATCH ARCHITECTE V2") code tout en bleu, sans variables d'âge. */ body.age-primitif :is(.architecte-body .architecte-hero,.architecte-body .architecte-panel, .architecte-body .architecte-status,.architecte-body .architecte-card) { border-color: rgba(181,126,67,.28) !important; background: radial-gradient(circle at 0% 0%, rgba(198,127,52,.13), transparent 32%), linear-gradient(145deg, rgba(45,29,17,.96), rgba(24,16,10,.96)) !important; } body.age-primitif :is(.architecte-body .architecte-hero h1,.architecte-body .architecte-card h2, .architecte-body .architecte-panel h2) { color: #f6ead0 !important; text-shadow: 0 0 16px rgba(198,127,52,.16) !important; } body.age-primitif :is(.architecte-kicker,.architecte-body .architecte-kicker,.architecte-body .architecte-stat span, .architecte-section-label) { color: #e0ac61 !important; } body.age-primitif .architecte-card.unlocked { border-color: rgba(224,168,88,.34) !important; } body.age-primitif :is(.architecte-costs span,.architecte-requirements span,.architecte-bonus span,.architecte-meta) { background: rgba(158,97,42,.12) !important; border-color: rgba(224,168,88,.22) !important; color: #f0dfc0 !important; } body.age-primitif .placed-row { border-color: rgba(181,126,67,.20) !important; } body.age-primitif .placed-row button { border-color: rgba(224,168,88,.28) !important; background: rgba(158,97,42,.16) !important; color: #f0dfc0 !important; } body.age-primitif .architecte-logistics-line > span { color: #f0dfc0 !important; } /* Bâtiments (Village > Bâtiments) — village-buildings-v68-complete.css utilise des sélecteurs #buildings-panel[data-ui-module-display="compact-pro"] très spécifiques (ID + attribut) : une règle .age-primitif à base de classes seules ne peut pas gagner la cascade contre ça, même en !important (l'ID l'emporte toujours sur n'importe quel nombre de classes). D'où le préfixe identique ci-dessous plutôt qu'un simple ".building-xxx". Ne touche pas .is-active/.is-queue/ .is-ready/.is-blocked : ces états ont déjà leur propre couleur sémantique (déjà ambrée/verte/ rouge), pas la couleur bleue générique par défaut. */ body.age-primitif #buildings-panel[data-ui-module-display="compact-pro"] .building-filter-btn { border-color: rgba(181,126,67,.24) !important; background: linear-gradient(180deg, rgba(51,33,19,.86), rgba(27,19,13,.90)) !important; color: rgba(240,223,192,.86) !important; } body.age-primitif #buildings-panel[data-ui-module-display="compact-pro"] .building-filter-btn:hover { border-color: rgba(224,168,88,.40) !important; } body.age-primitif #buildings-panel[data-ui-module-display="compact-pro"] .building-summary-card { background: linear-gradient(180deg, rgba(45,29,17,.86), rgba(24,16,10,.90)) !important; border-color: rgba(181,126,67,.20) !important; } body.age-primitif #buildings-panel[data-ui-module-display="compact-pro"] .building-summary-label { color: rgba(216,189,153,.68) !important; } body.age-primitif #buildings-panel[data-ui-module-display="compact-pro"] .building-summary-value { color: #f6ead0 !important; } body.age-primitif #buildings-panel[data-ui-module-display="compact-pro"] .building-compact-sort label { color: rgba(216,189,153,.58) !important; } body.age-primitif #buildings-panel[data-ui-module-display="compact-pro"] tbody tr { background: #1c130b !important; border-color: rgba(181,126,67,.26) !important; } body.age-primitif #buildings-panel[data-ui-module-display="compact-pro"] tbody tr:hover { border-color: rgba(224,168,88,.48) !important; } body.age-primitif #batiments-list .btn-queue-next { border-color: rgba(224,168,88,.42) !important; background: linear-gradient(180deg, rgba(139,82,34,.42), rgba(74,45,25,.48)) !important; color: #f6ead0 !important; } body.age-primitif #batiments-list .btn-queue-next:hover:not(:disabled) { border-color: rgba(231,177,94,.68) !important; background: linear-gradient(180deg, rgba(158,97,42,.55), rgba(90,54,22,.60)) !important; } /* Navigation / HUD global */ body.age-primitif .top-bar .kingdom-menu-panel a.is-active::after { background:#d9a45d !important; box-shadow:0 0 10px rgba(190,112,42,.65) !important; } body.age-primitif :is(.global-village-title-wrap small,.global-village-popover-head small,.global-village-option-action) { color:#d7aa68 !important; } body.age-primitif .global-village-option.is-active { border-color:rgba(217,151,70,.48) !important; background:linear-gradient(90deg,rgba(158,89,37,.21),rgba(74,45,25,.10)) !important; box-shadow:inset 3px 0 0 #d49a4c !important; } /* Caserne */ body.age-primitif :is(.caserne-section-kicker,.caserne-synergy-arrow,.caserne-details-panel > summary::after,.caserne-counter-card b) { color:#dfad67 !important; } body.age-primitif .caserne-speed-hero-field label { color:#bda582 !important; } body.age-primitif .caserne-speed-hero-field :is(input,select) { border-color:rgba(181,126,67,.28) !important; background:#2a1c12 !important; color:#f0dfc0 !important; } body.age-primitif .caserne-speed-hero-field :is(input,select):focus { border-color:rgba(226,166,84,.58) !important; } body.age-primitif .caserne-speed-hero-btn { border-color:rgba(197,139,72,.36) !important; background:rgba(139,82,34,.28) !important; color:#f7e5c2 !important; } /* Académie / Cercle des anciens */ body.age-primitif .academy-domain-dot { background:#d59a4f !important; box-shadow:0 0 0 5px rgba(181,105,43,.12),0 0 15px rgba(190,112,42,.22) !important; } body.age-primitif .academy-tree :is(.academy-node,.academy-research-card,.academy-domain-card) { border-color:rgba(181,126,67,.24) !important; } /* Royaume / inventaire : les raretés légendaires/erreurs gardent leurs couleurs, mais le bleu générique de l'interface devient ocre. */ body.age-primitif .kingdom-progress > span, body.age-primitif .chief-progress > span { background:linear-gradient(90deg,#8f552c,#dc9f52) !important; box-shadow:0 0 12px rgba(180,100,38,.18) !important; } body.age-primitif :is(.inventory-filter-search > span,.inventory-category-tag) { color:#d9aa68 !important; } body.age-primitif .inventory-slot.is-drop-target { border-color:#d9a45d !important; box-shadow:0 0 0 2px rgba(213,154,79,.16),0 0 22px rgba(181,100,36,.15) !important; } /* Carte : uniquement les contrôles autour du terrain, pas les couleurs tactiques des joueurs/alliance/ennemis. */ body.age-primitif :is(.pixi-action-kicker,.pixi-nearby-pill.iron) { color:#dfad67 !important; } body.age-primitif :is(.pixi-action-footer .primary,.pixi-placement-actions .primary,.pixi-minimap-style-footer .primary) { border-color:#d59a4f !important; background:#845027 !important; color:#fff1d2 !important; } body.age-primitif :is(.pixi-minimap-visible-toggle input,.pixi-weather-sound-row input,.pixi-weather-sound-volume input) { accent-color:#d59a4f !important; } body.age-primitif .pixi-loading-bar > i { background:#d59a4f !important; background:linear-gradient(90deg,#8d542b,#e0ac61) !important; } body.age-primitif .pixi-nearby-pill.iron { background:rgba(120,77,38,.16) !important; border-color:rgba(181,126,67,.30) !important; } /* Petits textes génériques encore teintés bleu dans certains modules. */ body.age-primitif :is(.panel-kicker,.global-village-label,.caserne-section-kicker,.forge-section-kicker) { color:#d9a45d !important; } /* ========================================================= V3 — HUD AGE LAYOUT STABILITY --------------------------------------------------------- L'insert dynamique de .suprem-age-signature ajoute un troisième enfant au HUD. La page Village utilisait encore une grille à 2 colonnes, ce qui repoussait les ressources sur une seconde ligne. On réserve désormais explicitement une colonne à l'âge sur desktop et une zone compacte sur tablette/mobile. ========================================================= */ @media (min-width: 981px) { .global-village-hud-inner { display: grid !important; grid-template-columns: minmax(260px, 365px) minmax(136px, 154px) minmax(0, 1fr) !important; align-items: stretch !important; } .global-village-switcher { width: auto !important; min-width: 0 !important; } .suprem-age-signature { width: auto !important; min-width: 0 !important; max-width: 154px; } .global-village-hud-resources { width: 100% !important; min-width: 0 !important; align-self: stretch !important; } .global-village-hud[data-page="village.html"] .global-village-hud-inner { grid-template-columns: minmax(300px, 350px) minmax(136px, 154px) minmax(0, 1fr) !important; } } /* Tablette : village + âge sur la première ligne, ressources sur toute la largeur juste dessous. Aucun enfant implicite. */ @media (max-width: 980px) { .global-village-hud-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: "village age" "resources resources" !important; align-items: stretch !important; } .global-village-switcher { grid-area: village; width: auto !important; min-width: 0 !important; } .suprem-age-signature { grid-area: age; align-self: stretch; min-width: 136px; max-width: 154px; } .global-village-hud-resources { grid-area: resources; width: 100% !important; min-width: 0 !important; } } /* Mobile : le CSS d'âge masque déjà le texte sous 780px. On force simplement la pastille à rester compacte. */ @media (max-width: 780px) { .suprem-age-signature { min-width: 44px !important; width: 44px !important; max-width: 44px !important; } } /* Conserve les proportions prévues par le HUD ultrawide tout en gardant la colonne d'âge explicite. */ @media (min-width: 2200px) and (min-height: 1100px) { .global-village-hud-inner, .global-village-hud[data-page="village.html"] .global-village-hud-inner { grid-template-columns: minmax(360px, 420px) minmax(150px, 170px) minmax(0, 1fr) !important; } .suprem-age-signature { max-width: 170px; } } @media (min-width: 3000px) and (min-height: 1200px) { .global-village-hud-inner, .global-village-hud[data-page="village.html"] .global-village-hud-inner { grid-template-columns: minmax(410px, 470px) minmax(160px, 180px) minmax(0, 1fr) !important; } .suprem-age-signature { max-width: 180px; } } @media (min-width: 3800px) and (min-height: 1500px) { .global-village-hud-inner, .global-village-hud[data-page="village.html"] .global-village-hud-inner { grid-template-columns: minmax(450px, 520px) minmax(170px, 190px) minmax(0, 1fr) !important; } .suprem-age-signature { max-width: 190px; } } /* ============================================================= AGE PRIMITIF — CASERNE V4 ------------------------------------------------------------- Les derniers layouts de caserne utilisent plusieurs sélecteurs à ID + !important. Cette couche est volontairement plus précise afin que le thème Primitif remplace réellement les bleus/cyan. ============================================================= */ body.age-primitif .caserne-head, body.age-primitif #ui-caserne-queue, body.age-primitif #ui-caserne-resources, body.age-primitif #ui-caserne-army, body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-table-panel, body.age-primitif .caserne-counter-panel, body.age-primitif .caserne-details-panel { border-color: rgba(190, 128, 63, .34) !important; background: radial-gradient(circle at 100% 0, rgba(213,154,79,.075), transparent 30%), linear-gradient(180deg, rgba(49,32,19,.98), rgba(25,17,11,.985)) !important; box-shadow: inset 0 1px 0 rgba(255,226,174,.045), 0 18px 42px rgba(8,4,2,.30) !important; } body.age-primitif .building-switcher { border-color: rgba(181,126,67,.30) !important; background: linear-gradient(180deg, rgba(58,38,22,.90), rgba(30,21,14,.94)) !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-table-titlebar, body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-recruit-toolbar { border-color: rgba(194,133,66,.28) !important; background: linear-gradient(180deg, rgba(69,44,24,.91), rgba(36,24,16,.93)) !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-stat-card, body.age-primitif #ui-caserne-resources .caserne-compact-grid > div, body.age-primitif #ui-caserne-army .caserne-compact-grid > div, body.age-primitif .caserne-counter-card, body.age-primitif .caserne-synergy-card, body.age-primitif .caserne-overview-card { border-color: rgba(190,128,63,.24) !important; background: linear-gradient(160deg, rgba(78,50,28,.76), rgba(38,25,16,.88)) !important; box-shadow: inset 0 1px 0 rgba(255,226,174,.03) !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-row { border-color: rgba(205,139,68,.40) !important; background: #2d1e13 !important; box-shadow: inset 0 1px 0 rgba(255,226,174,.045), 0 10px 28px rgba(7,3,1,.30) !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-row:hover { border-color: rgba(238,177,91,.70) !important; box-shadow: inset 0 1px 0 rgba(255,232,182,.06), 0 15px 34px rgba(8,4,2,.36), 0 0 18px rgba(190,108,38,.10) !important; } /* Coût : petite ligne de pastilles, jamais un grand panneau vertical. */ body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-cell-cost { min-height: 0 !important; height: auto !important; width: fit-content !important; max-width: calc(100% - 24px) !important; right: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; backdrop-filter: none !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-cost-stack { display: flex !important; flex-flow: row wrap !important; align-items: center !important; gap: 4px !important; width: auto !important; max-width: 100% !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-cost-pill { min-height: 20px !important; width: auto !important; min-width: 0 !important; padding: 3px 7px !important; border-radius: 999px !important; border-color: rgba(216,153,78,.30) !important; background: rgba(55,35,20,.88) !important; color: #f4dfba !important; box-shadow: 0 3px 10px rgba(7,3,1,.20) !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-cost-pill.is-missing { border-color: rgba(210,96,72,.52) !important; background: rgba(80,31,22,.86) !important; color: #ffd0bd !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] :is( .caserne-level-badge, .caserne-badge, .caserne-unit-tags span, .caserne-compact-unit-meta > span, .caserne-unit-stats > span ) { border-color: rgba(206,143,72,.25) !important; background: rgba(48,31,19,.80) !important; color: #f4e2c2 !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-filter-btn, body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-visual-sort select, body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-action-line input, body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-action-line .js-unit-fill-max { border-color: rgba(191,129,65,.30) !important; background: rgba(58,38,23,.88) !important; color: #f1dfbd !important; } body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-filter-btn:hover, body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-filter-btn.is-active { border-color: rgba(231,171,85,.62) !important; background: rgba(112,67,30,.70) !important; color: #fff0ca !important; } body.age-primitif #ui-caserne-resources .caserne-compact-grid span, body.age-primitif #ui-caserne-army .caserne-compact-grid span, body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-stat-label, body.age-primitif #ui-caserne-resources .caserne-mini-meta, body.age-primitif #ui-caserne-army .caserne-mini-meta { color: #c9b18b !important; } body.age-primitif #ui-caserne-resources .caserne-compact-grid strong, body.age-primitif #ui-caserne-army .caserne-compact-grid strong, body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-stat-value { color: #f4e3c3 !important; } body.age-primitif #ui-caserne-resources .caserne-mini-meta span, body.age-primitif #ui-caserne-army .caserne-mini-meta span { border-color: rgba(190,128,63,.22) !important; background: rgba(61,39,23,.70) !important; } body.age-primitif .caserne-queue-card, body.age-primitif .caserne-queue-card--unitlike, body.age-primitif #caserne-queue-panel.caserne-empty { border-color: rgba(190,128,63,.27) !important; background: linear-gradient(180deg, rgba(70,45,25,.92), rgba(35,24,16,.96)) !important; } body.age-primitif .caserne-queue-pill { border-color: rgba(209,146,72,.30) !important; background: rgba(54,35,20,.84) !important; color: #f0dcb8 !important; } body.age-primitif :is(.caserne-queue-progress,.caserne-progress) { background: rgba(255,232,187,.09) !important; } body.age-primitif :is(.caserne-queue-progress,.caserne-progress) > span { background: linear-gradient(90deg, #9c5f2f, #e0aa5d) !important; box-shadow: 0 0 10px rgba(190,106,37,.18) !important; } @media (max-width: 640px) { body.age-primitif #ui-caserne-recruit[data-ui-module-display="compact-pro"] .caserne-cell-cost { left: 8px !important; right: auto !important; width: fit-content !important; max-width: calc(100% - 16px) !important; min-height: 0 !important; height: auto !important; } } /* ============================================================= AGE PRIMITIF — MODALE "GÉRER CE VILLAGE" (Vue globale) ------------------------------------------------------------- styles-village.css (.global-management-*, .global-recruit-*, .global-army-overview, .global-modal-*) code cette fenêtre en bleu, sans lien avec les variables d'âge — retour utilisateur 2026-09-10 : "les informations de village et les troupes restent en fond bleu". Cette fenêtre est ouverte via le bouton "Détails"/"Gérer ce village" des cartes de Vue globale. ============================================================= */ body.age-primitif .global-management-card { border-color: rgba(181, 126, 67, .34) !important; background: linear-gradient(145deg, rgba(45, 29, 17, .96), rgba(20, 13, 8, .98)), #150e08 !important; box-shadow: 0 32px 90px rgba(0,0,0,.48), 0 0 38px rgba(198,127,52,.10) !important; } body.age-primitif .global-management-close { border-color: rgba(197, 139, 72, .28) !important; background: rgba(38, 25, 15, .90) !important; color: #f4dfb5 !important; } body.age-primitif :is(.global-modal-stats span, .global-modal-item) { border-color: rgba(181, 126, 67, .24) !important; background: rgba(255, 226, 174, .035) !important; color: rgba(224, 205, 177, .78) !important; } body.age-primitif :is(.global-modal-stats strong, .global-recruit-heading strong, .global-army-overview strong, .global-modal-label) { color: #f6ead0 !important; } body.age-primitif .global-modal-item small { color: rgba(216, 189, 153, .72) !important; } body.age-primitif .global-recruit-panel { border-color: rgba(190, 128, 63, .30) !important; background: linear-gradient(135deg, rgba(78, 50, 28, .46), rgba(27, 19, 13, .90)) !important; } body.age-primitif .global-recruit-heading small { color: rgba(224, 168, 88, .78) !important; } body.age-primitif :is(.global-recruit-select, .global-recruit-input) { border-color: rgba(181, 126, 67, .32) !important; background: rgba(32, 22, 15, .94) !important; color: #f1e3c8 !important; } body.age-primitif .global-army-overview span { border-color: rgba(190, 128, 63, .22) !important; background: rgba(48, 31, 19, .78) !important; } body.age-primitif .global-army-overview small { color: rgba(216, 189, 153, .68) !important; } body.age-primitif .global-army-overview > span em { color: rgba(224, 205, 177, .82) !important; } body.age-primitif .global-unit-status-card strong { color: #f4dfb5 !important; } body.age-primitif .global-unit-status-card em { color: rgba(216, 189, 153, .76) !important; }