/* Chronicles XX — neutral interface chrome; Atlas category colors are retained. */
:root {
  color-scheme: dark;
  --cx-bg: #121B29;
  --cx-panel: #202E40;
  --cx-panel-raised: #34302C;
  --cx-line: #514B45;
  --cx-text: #F2EDE4;
  --cx-muted: #BFB6AB;
  --cx-accent: #CDA675;
  --cx-font: 'Exo 2', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --cx-heading-font: 'Rajdhani', 'Exo 2', 'Segoe UI', sans-serif;
  --cx-sidebar-width: 16.66666%;
}
html { scroll-behavior: smooth; scroll-padding-top: 140px; }
html body {
  color: var(--cx-text); font-family: var(--cx-font); line-height: 1.6;
  min-height: 100vh;
}
/* Connected pages keep the original map and flag from the country's stylesheet. */
html body:not(:has(.command-header)) {
  background: linear-gradient(110deg, rgba(18,27,41,.97), rgba(18,27,41,.89)), url('images/connexion/fond_connexion2_HQ.jpg') center / cover fixed !important;
}
body.font-family, body .font-family, body .font-courier, body .font-agency,
body .navigation li a, body .texte_presentation, body .enumeration_maj,
body .pantheon_tableau, body .contenu_colonne, body .intitule_colonne { font-family: var(--cx-font); line-height: 1.6; }
body h1, body h2, body h3, body h4 { font-family: var(--cx-font); color: var(--cx-text); line-height: 1.15; text-wrap: balance; }
a { text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--cx-accent) !important; outline-offset: 4px; }
body .w3-border, body .w3-border-top, body .w3-border-bottom,
body .bordure_noire, body .bordure_noire_fine { border-color: var(--cx-line) !important; border-width: 1px !important; }
body .w3-round { border-radius: 10px; }
body .w3-panel { padding-top: 12px; padding-bottom: 12px; }
body .fond_blanc, body .fond_gris, body .texte_batiment_en_cours,
body .texte_batiment_liste_en_cours, body .type_rc {
  color: #202B3B !important; background: #DBDFE5 !important;
}
body .fond_bleu, body .texte_recherche_scient_en_cours { background: #254563 !important; color: #D9EDFF !important; }
body .fond_rouge, body .texte_recherche_milit_en_cours { background: #512D38 !important; color: #FFD5D8 !important; }
body .fond_vert, body .texte_blindes_en_cours { background: #29443F !important; color: #D4EEE4 !important; }
body .fond_jaune, body .bonus_actif, body .mission_espionnage { background: #4B3B2D !important; color: #F5E1C1 !important; }
body .texte_recherche_fin_ere_en_cours { background: #343D50; color: #E2E7F1; }
body .fond_connexion, body .fond_texte, body .fond_grade, body .new_rc {
  background: var(--cx-panel); color: var(--cx-text); border: 1px solid var(--cx-line); border-radius: 12px;
}
body .searchera, body .titre_construction_en_cours, body .soin_accueil {
  background: var(--cx-panel-raised); color: var(--cx-text); font-family: var(--cx-font);
  padding: 12px 16px; border: 1px solid var(--cx-line); border-left: 3px solid var(--cx-accent);
  border-radius: 2px 10px 2px 10px;
  font-weight: 650; line-height: 1.4; text-align: left;
}
body .accueil_nom_joueur { color: var(--cx-text); font-size: 25px !important; padding: 24px 8px; }
body .texte-rouge { color: #ffaaa1; }
body .texte-vert { color: #a8dca0; }
body .texte-jaune { color: #ebd18d; }
body input:not([type='hidden']):not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']):not([type='image']):not([type='range']),
body select, body textarea {
  color: var(--cx-text); background: #152133; border: 1px solid #64758C; border-radius: 6px;
  padding: 9px 11px; font: inherit; max-width: 100%; min-height: 42px; accent-color: var(--cx-accent);
}
body input[type='number'] { min-width: 58px; }
body textarea { width: 100%; }
body [class*='pushbutton'], body .pushbutton {
  background: #D5AB79; color: #1B2638; border: 1px solid #E6C6A0; border-radius: 2px 9px 2px 9px;
  padding: 10px 18px; font: 650 14px/1.4 var(--cx-font); box-shadow: none; text-shadow: none;
  cursor: pointer; min-height: 42px; max-width: 100%; white-space: normal;
  transition: background .15s, border-color .15s;
}
body [class*='pushbutton']:hover { background: #E7C49D; color: #121B29; transform: none; box-shadow: none; }
body [class*='pushbutton_annuler'] { background: #304158; color: #F0EDE5; border-color: #64758C; }
body [class*='pushbutton']:disabled { opacity: .45; cursor: not-allowed; }
body .link-button { color: inherit; }
body .link-button:hover { background: #44546B; color: #fff; }
body .progress, body progress { accent-color: #D5AB79; border-radius: 10px; overflow: hidden; background: #152133; }
body progress::-webkit-progress-bar { background: #152133; }
body progress::-webkit-progress-value { background: #D5AB79; }
body progress::-moz-progress-bar { background: #D5AB79; }
body .w3-table td, body .w3-table th { padding: 12px 10px; }
body .w3-striped tbody tr:nth-child(even) { background: #2B3C52; }
body .fenetre-incluse, body .mapjournal, body .alliance-journal,
body .modal-territoire, body .w3-modal-content { background: var(--cx-panel); color: var(--cx-text); border-radius: 12px; }
body .close-modal { color: var(--cx-text); min-width: 40px; min-height: 40px; }
body img[src$='population_black.png'] { filter: invert(.9); }
body footer { clear: both; background: transparent; color: var(--cx-muted); font: 12px/1.8 var(--cx-font); padding: 32px 16px 20px; margin-top: 24px; }

/* Public pages share a compact horizontal navigation. */
.public-nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; max-width: 1440px; margin: auto; padding: 22px 5%; border-bottom: 1px solid var(--cx-line); }
.cx-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cx-text); white-space: nowrap; }
.cx-brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--cx-accent); color: var(--cx-accent); font: 600 22px Georgia,serif; }
.cx-brand-watch { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.cx-brand strong { display: block; letter-spacing: 3px; font-size: 15px; }
.cx-brand small { display: block; color: var(--cx-muted); font-size: 9px; letter-spacing: 2.3px; text-transform: uppercase; }
.public-nav .navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
body .public-nav .navigation a { padding: 9px 14px; font-size: 13px; font-weight: 500; border-radius: 5px; }
body .navigation a[aria-current='page'] { color: var(--cx-accent); background: #3A322B; box-shadow: inset 3px 0 var(--cx-accent); }
body .navigation li a:hover, body .navigation li a:focus { background: #38332E; color: #F2D4AF; }
body:has(.public-nav):not(.landing-page) > .w3-container:first-child header { display: none; }

/* Landing: editorial hero, followed by the original live PHP forms. */
html body.landing-page { background: #121B29 !important; }
.landing-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; min-height: 640px; max-width: 1600px; margin: auto; padding: 80px 7%; gap: 6%; overflow: hidden; border-bottom: 1px solid var(--cx-line); }
.landing-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: url('images/connexion/fond_connexion2_HQ.jpg') center / cover; opacity: .48; }
.landing-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#121B29 0%,rgba(18,27,41,.84) 38%,rgba(18,27,41,.12)),linear-gradient(0deg,#121B29,transparent 40%); }
.cx-eyebrow { color: var(--cx-accent); text-transform: uppercase; font-size: 11px; font-weight: 650; letter-spacing: 3px; }
.landing-hero h1 { font-size: clamp(46px,5.5vw,82px); font-weight: 400; letter-spacing: -3px; margin: 22px 0; line-height: 1.04; }
.landing-hero h1 em { color: var(--cx-accent); font-family: Georgia,serif; font-weight: 400; }
.landing-hero p { color: #C8D0DC; max-width: 500px; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cx-primary, .cx-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 13px 22px; min-height: 48px; border-radius: 5px; text-decoration: none; font-size: 14px; font-weight: 650; }
.cx-primary { background: var(--cx-accent); color: #1B2638; border: 1px solid var(--cx-accent); }
.cx-primary:hover { background: #E7C49D; }
.cx-secondary { border: 1px solid #64758C; color: #F0EDE5; background: #182538cc; }
.hero-caption { align-self: end; justify-self: end; border-top: 1px solid #D5AB79; padding-top: 16px; width: 240px; color: #D3DAE5; }
.hero-caption span { display: block; color: var(--cx-accent); font-size: 10px; letter-spacing: 2px; margin-bottom: 7px; }
.landing-pillars { max-width: 1440px; margin: auto; display: grid; grid-template-columns: repeat(3,1fr); padding: 0 5%; }
.landing-pillars article { padding: 32px 26px; border-bottom: 1px solid var(--cx-line); }
.landing-pillars article + article { border-left: 1px solid var(--cx-line); }
.landing-pillars span { color: var(--cx-accent); font: 12px ui-monospace,monospace; }
.landing-pillars h2 { font-size: 18px; font-weight: 550; margin: 10px 0; }
.landing-pillars p { color: var(--cx-muted); font-size: 13px; margin: 0; }
body .landing-content { float: none; width: min(100% - 40px,850px); margin: 64px auto 0; padding: 0; }
.landing-content::after { content: ''; display: table; clear: both; }
body .landing-page-title { font-size: 28px !important; text-align: left; padding: 8px 0 20px; color: var(--cx-text); }
body .landing-content .fond_connexion { padding: 28px clamp(12px,4vw,36px); margin: 0 0 20px; box-shadow: 0 12px 40px #0002; scroll-margin-top: 30px; }
body .landing-content .fond_connexion > .w3-xxlarge { text-align: left; font-size: 24px !important; font-weight: 550; margin-bottom: 20px; }
body .landing-content form > .w3-container { text-align: left; padding: 8px; }
.landing-content label, .landing-content form span.font-bold { display: block; color: #B5BFCD; font-size: 13px; margin-bottom: 7px; font-weight: 500; }
body .landing-content .champs_inscriptible, body .landing-content select { display: block; width: 100%; margin-top: 6px; }
.landing-content .cf-turnstile { max-width: 100%; overflow-x: auto; }
body .landing-content .pushbutton { min-width: 170px; }

/* In-game shell. Header is in normal flow; only the command navigation sticks. */
body .command-header { position: relative; max-height: none; border: 0; border-bottom: 1px solid var(--cx-line); padding: 18px 24px !important; background: #191919; display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 24px; align-items: center; }
.command-resources { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; width: 100%; min-width: 0; }
.command-resource { padding: 10px 14px; border: 1px solid var(--cx-line); border-radius: 7px; background: #282624; display: grid; grid-template-columns: 30px max-content; column-gap: 9px; align-items: center; justify-content: center; }
.command-resource img { width: 26px; height: 26px; object-fit: contain; grid-row: span 2; }
.command-resource strong { font-size: 20px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.command-resource small { font-size: 13px; color: #C7BDB1; }
.command-score { font-size: 18px; color: var(--cx-text); line-height: 1.5; white-space: nowrap; display: grid; gap: 8px; }
.command-score > div { display: flex; align-items: center; gap: 9px; }
.command-score img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.command-score a { color: var(--cx-accent); text-decoration: none; }
body:has(.command-header) .contenu_page { padding-top: 26px; }
body:has(.command-header) .menu-lateral-fixe { top: 0; bottom: 0; width: var(--cx-sidebar-width); overflow-y: auto; padding: 22px 12px !important; background: #191919; border-right: 1px solid var(--cx-line); scrollbar-width: thin; position: fixed !important; }
body .command-header { margin-left: var(--cx-sidebar-width); }
body:has(.command-header) .menu-lateral-fixe .navigation::before { content: 'Menu'; display: block; padding: 8px 12px 20px; color: var(--cx-muted); font: 600 18px/1.4 var(--cx-font); letter-spacing: 2px; }
body .menu-lateral-fixe .navigation li a { font-size: 13px; text-align: left; font-weight: 500; line-height: 1.4; padding: 9px 12px; margin: 2px 0; border-radius: 5px; overflow-wrap: anywhere; }
body .navigation .w3-xlarge { font-size: inherit !important; color: var(--cx-accent) !important; }
body .menu-lateral-fixe .navigation a[href='deconnexion.php'] { border-top: 1px solid var(--cx-line); margin-top: 15px; color: var(--cx-muted); }
body:has(.command-header) .contenu_page > .w3-container { margin-left: var(--cx-sidebar-width); }
body:has(.command-header) .contenu_page > .w3-container > .w3-col.l2.m2:empty { display: none; }
body:has(.command-header) .contenu_page > .w3-container > .w3-col.l10.m10 { width: 100%; }
body:has(.command-header) .contenu_page > .w3-col.l2.m2:empty { display: none; }
/* Direct grid siblings already reserve the menu column with their original l10 width. */
body:has(.command-header) .contenu_page > .w3-col.l10.m10 { margin-left: var(--cx-sidebar-width); width: calc(100% - var(--cx-sidebar-width)); }
/* Center the entire scene, including its buildings, within the available content area. */
.home-base-canvas, .home-overview-grid { width: 92%; max-width: 1440px; margin-inline: auto; }
.home-base-canvas { padding-bottom: 17px; }
body.home-dashboard .searchera,
body.home-dashboard .soin_accueil,
body.home-dashboard .titre_construction_en_cours { text-align: center; }
body.home-dashboard .home-progress-heading { border-left: 1px solid var(--cx-line); }
body.home-dashboard .contenu_page { padding-top: 12px; }
body.home-dashboard .home-welcome .accueil_nom_joueur { padding-block: 8px; }
body.home-dashboard .home-welcome > .padding-bottom-17 { padding-bottom: 8px !important; }
.home-overview { clear: both; }
.home-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: space-between; gap: 24px 32px; }
.home-overview-column { min-width: 0; }
body .home-overview-column > .w3-panel { margin-inline: 0 !important; }
.home-tactics { clear: both; }
body .home-tactics-panel { width: fit-content; max-width: 100%; margin: 16px auto; padding: 12px 24px; }
@media(min-width: 993px) {
  :root { --cx-sidebar-width: clamp(170px, 14vw, 210px); }
}
.mobile-command-menu { background: #191919; border-radius: 2px 10px 2px 10px; }
.mobile-command-menu summary { padding: 14px; cursor: pointer; border: 1px solid var(--cx-line); border-radius: 2px 10px 2px 10px; background: var(--cx-panel-raised); color: var(--cx-accent); font: 600 18px/1.4 var(--cx-font); letter-spacing: 2px; }
.mobile-command-menu .navigation { padding: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
body .mobile-command-menu .navigation a { font-size: 13px; padding: 10px; line-height: 1.4; }

@media(min-width: 1600px) { body .landing-hero { border-left: 1px solid var(--cx-line); border-right: 1px solid var(--cx-line); } }
@media(max-width: 992px) {
  .home-base-canvas, .home-overview-grid { width: 100%; }
  body .command-header { grid-template-columns: max-content minmax(0, 1fr); gap: 15px; }
  .command-score { grid-column: 1 / -1; display: flex; gap: 24px; justify-content: end; }
  .command-resource { padding: 8px; grid-template-columns: 1fr; text-align: center; }
  .command-resource img { display: block; grid-row: auto; margin-inline: auto; }
  .command-resource strong { font-size: 17px; }
  .command-resource img { width: 22px; }
  .landing-hero { min-height: 560px; grid-template-columns: 1fr; }
  .hero-caption { display: none; }
  body .menu-lateral-fixe .navigation li a { padding: 9px 5px; font-size: 12px; }
}
@media(min-width: 601px) and (max-width: 1200px) {
  body .command-header { grid-template-columns: minmax(0, 1fr) max-content; }
  .command-resources { grid-column: 1 / -1; grid-row: 2; }
  .command-score { grid-column: 2; grid-row: 1; display: grid; gap: 8px; }
}
@media(max-width: 600px) {
  .home-overview-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .public-nav { padding: 16px 20px; flex-direction: column; align-items: start; gap: 16px; }
  .public-nav .navigation { gap: 0; width: 100%; justify-content: space-between; }
  body .public-nav .navigation a { font-size: 11px; padding: 8px 6px; }
  .landing-hero { min-height: 530px; padding: 54px 24px; }
  .landing-hero h1 { letter-spacing: -1.5px; }
  .landing-hero::after { background: linear-gradient(90deg,#121B29ed,#121B2970),linear-gradient(0deg,#121B29,transparent); }
  .landing-pillars { grid-template-columns: 1fr; padding: 0 24px; }
  .landing-pillars article { padding: 23px 0; }
  .landing-pillars article + article { border-left: 0; }
  body .landing-content { width: calc(100% - 32px); margin-top: 36px; }
  body .command-header { grid-template-columns: 1fr; padding: 14px !important; gap: 12px; }
  body .command-header { margin-left: 0; }
  .command-header .cx-brand { justify-self: start; }
  .command-resources { gap: 5px; }
  .command-resource { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px; }
  .command-resource strong { font-size: 17px; }
  .command-resource small { font-size: 12px; }
  .command-score { justify-content: space-between; gap: 8px; font-size: 16px; }
  body:has(.command-header) .contenu_page { padding-top: 12px; }
  body:has(.command-header) .contenu_page > .w3-container,
  body:has(.command-header) .contenu_page > .w3-col.l10.m10 { margin-left: 0; }
  body:has(.command-header) .contenu_page > .w3-col.l10.m10 { width: 100%; }
  body:has(.command-header) .contenu_page > .w3-hide-large.w3-hide-medium { padding: 8px 16px !important; }
  body .accueil_nom_joueur { font-size: 21px !important; }
  body .w3-modal { padding: 16px 8px; }
}
/* Alliance pages share the same content bounds as the rest of the game. */
body.alliance-page .alliance-shell {
  margin-left: var(--cx-sidebar-width);
  padding: 0 12px;
}
.alliance-content { max-width: 1440px; margin-inline: auto; display: flow-root; }
body.alliance-page .searchera { text-align: center; }
body.alliance-page .alliance-summary { display: flow-root; }
body.alliance-page .alliance-edit { clear: both; padding-top: 12px; }
body.alliance-page .alliance-summary > .text-center img { max-width: 240px; }
@media(max-width: 600px) {
  body.alliance-page .alliance-shell { margin-left: 0; padding: 0 12px; }
}

/* Narrower bonus cards on desktop only; original vertical spacing is retained. */
@media(min-width: 993px) {
  body.bonus-page .bonus-catalog > .w3-col.l1.m1 { display: none; }
  body.bonus-page .bonus-catalog img[width='40%'] { width: 50%; height: auto; }
  body.bonus-page .bonus-catalog img[width='30%'] { width: 38%; height: auto; }
  body.bonus-page:has(.command-header) .contenu_page > .bonus-catalog > .w3-col.l10.m10 {
    float: none;
    clear: both;
    width: min(76%, 900px);
    margin: 0 auto;
  }
}

@media(prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Icons and embedded headings on the light semantic panels. */
body :is(.fond_blanc, .fond_gris, .texte_batiment_en_cours, .texte_batiment_liste_en_cours, .type_rc) img[src$="population_black.png"] { filter: none; }
body :is(.fond_blanc, .fond_gris, .texte_batiment_en_cours, .texte_batiment_liste_en_cours, .type_rc) :is(h1, h2, h3, h4) { color: inherit; }
body .mobile-command-menu .navigation li.w3-black { background: #282624 !important; }

/* Site-wide typography, including legacy public and in-game components. */
body :is(.ligne_ressources, .texte_construction_en_cours, .texte_ressources_reserve,
  .type_rc, .intitule_champs_connexion, .remarque_finale, .remarque_unites,
  .titre_general_liste_unites, .titre_pays_liste_unites, .cp-progress__label,
  .w3-sans-serif) { font-family: var(--cx-font); }
body :is(h1, h2, h3, h4, h5, h6),
body .font-agency,
body .searchera,
body .titre_construction_en_cours,
body .soin_accueil,
body .navigation li a,
body .cx-brand strong,
body .mobile-command-menu summary,
body .w3-xlarge.font-bold,
body .landing-hero h1 em,
body:has(.command-header) .menu-lateral-fixe .navigation::before {
  font-family: var(--cx-heading-font);
}