/* État-major graphite. The category colors, forms and live game hooks stay in design-2026.css. */
body:has(.command-header) {
  --cx-accent: #D4B77C;
  --cx-text: #EEECE6;
  --cx-muted: #A8A7A2;
  --cx-line: #42423F;
  --cx-panel: #222326;
  --cx-panel-raised: #2A2B2D;
  --hq-heading: Georgia, 'Times New Roman', serif;
}
body:has(.command-header[data-country-id='1']) { --hq-national-bg: url('images/fonds/fondusa.png'); }
body:has(.command-header[data-country-id='2']) { --hq-national-bg: url('images/fonds/fondall.png'); }
body:has(.command-header[data-country-id='3']) { --hq-national-bg: url('images/fonds/fondrfa.png'); }
body:has(.command-header[data-country-id='4']) { --hq-national-bg: url('images/fonds/fondrda.png'); }
body:has(.command-header[data-country-id='5']) { --hq-national-bg: url('images/fonds/fondurss.png'); }
body:has(.command-header[data-country-id='6']) { --hq-national-bg: url('images/fonds/fondgb.png'); }
body:has(.command-header[data-country-id='7']) { --hq-national-bg: url('images/fonds/fondfrance.png'); }
body:has(.command-header[data-country-id='8']) { --hq-national-bg: url('images/fonds/fondjapon.png'); }
html body:has(.command-header) {
  background: linear-gradient(#101113DE, #101113E8), var(--hq-national-bg) center / cover fixed !important;
}
body .command-header {
  padding: 0 28px 18px !important;
  background: #1B1C1F;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 24px;
  border-bottom-color: #44433D;
}
/* Sur ordinateur, conserver les ressources à l'écran pendant le défilement.
   Le bandeau reste dans le flux : aucun décalage de contenu à calculer en JavaScript.
   Son niveau reste inférieur aux fenêtres modales du jeu. */
@media (min-width: 601px) {
  body .command-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 8px 20px #0004;
  }
}
.hq-topline { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; margin-bottom: 15px; border-bottom: 1px solid #FFFFFF0B; }
.hq-topline > span { color: #B6B4AB; font-size: 10px; letter-spacing: 2px; }
.hq-topline > span > span { color: #666761; padding: 0 12px; }
.hq-topline > div { display: flex; align-items: center; gap: 24px; font-size: 12px; }
.hq-topline a { color: var(--cx-muted); text-decoration: none; }
.hq-player { display: inline-flex; align-items: center; gap: 9px; color: #D6D4CC; }
.hq-player img { width: 25px; height: 17px; object-fit: cover; border-radius: 1px; }
body .command-header > .cx-brand { display: none; }
.command-resources { gap: 0; }
body .command-resource { background: transparent; border: 0; border-right: 1px solid #FFFFFF14; border-radius: 0; box-shadow: none; padding: 0 20px; justify-content: start; min-height: 58px; grid-template-columns: 30px minmax(0, 1fr); }
body .command-resource:first-child { padding-left: 0; }
body .command-resource img { width: 29px; height: 29px; }
body .command-resource strong { grid-column: 2; grid-row: 1; font-family: var(--hq-heading); font-size: 25px; font-weight: 400; color: #E5D7B8; white-space: nowrap; }
body .command-resource small { grid-column: 2; grid-row: 2; font-size: 13px; color: #B7B4AA; }
/* Sous la réserve, conserver un format compact pour le montant et son unité horaire. */
.hq-resource-production { grid-column: 2; grid-row: 3; display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #C8B990; font-size: 12px; }
.hq-resource-production-value { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hq-mobile-productions { display: none; }
body .command-resource .hq-resource-production img { display: inline-block; width: 15px; height: 15px; flex-shrink: 0; margin: 0; object-fit: contain; }
body .command-score { font-size: 16px; gap: 6px; padding-left: 10px; }
body .command-score img { width: 24px; height: 24px; }
body:has(.command-header) .menu-lateral-fixe { background: #191A1D; border-right: 1px solid #3C3C38; padding: 24px 16px !important; }
.hq-sidebar-brand { padding: 0 2px 24px; width: 100%; }
.hq-sidebar-brand strong { font-family: var(--hq-heading); font-size: 14px; letter-spacing: 1px; }
.hq-sidebar-brand .cx-brand-watch { width: 34px; height: 39px; }
.hq-sidebar-brand small { font-size: 8px; letter-spacing: 2px; }
body:has(.command-header) .menu-lateral-fixe .navigation::before { padding: 5px 10px 12px; font: 600 12px/1.4 var(--cx-font); letter-spacing: 2px; color: #9F9C91; }
body .menu-lateral-fixe .navigation li a { padding: 9px 10px; margin: 3px 0; border: 1px solid transparent; border-radius: 2px; display: flex; align-items: center; gap: 10px; font: 500 13px/1.35 var(--cx-font); color: #C5C3BA; }
body:has(.command-header) .navigation a[aria-current='page'] { background: #D4B77C10; border-color: #71664C; box-shadow: inset 2px 0 var(--cx-accent); color: #E7D9B7; }
body:has(.command-header) .navigation li a:hover { background: #FFFFFF08; color: #F0E9D8; }
.hq-nav-icon { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
/* Isoler l'administration au-dessus des liens du jeu, comme la déconnexion en bas. */
body .navigation > li.navigation-admin { border-bottom: 1px solid #FFFFFF80; padding-bottom: 10px; margin-bottom: 10px; }
/* Même séparation blanche pour la déconnexion, sur toute la largeur du menu. */
body .navigation > li:has(> a[href='deconnexion.php']) { border-top: 1px solid #FFFFFF80; padding-top: 10px; margin-top: 10px; }
body .menu-lateral-fixe .navigation a[href='deconnexion.php'] { border-top: 0; margin-top: 3px; }
/* Sur téléphone, réserver une ligne complète à la déconnexion et à son séparateur. */
body .mobile-command-menu .navigation > li:has(> a[href='deconnexion.php']) { grid-column: 1 / -1; background: transparent !important; }
/* Le lien admin occupe une ligne entière dans le menu mobile à deux colonnes. */
body .mobile-command-menu .navigation > li.navigation-admin { grid-column: 1 / -1; background: transparent !important; }
/* Uniformiser les deux zones mobiles, en conservant leurs séparateurs respectifs. */
body .mobile-command-menu .navigation > :is(li.navigation-admin, li:has(> a[href='deconnexion.php'])) { padding-block: 3px; margin-block: 3px !important; }
body .mobile-command-menu .navigation > :is(li.navigation-admin, li:has(> a[href='deconnexion.php'])) > a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 0; padding: 5px 10px; margin: 0; }
body:has(.command-header) .mobile-command-menu { background: #191A1D; }
body:has(.command-header) .mobile-command-menu summary { background: #27282B; }
/* Afficher les alertes à côté de Menu, même quand le volet est fermé.
   Autoriser le retour à la ligne sur les écrans étroits, sans réduire les logos. */
.mobile-command-menu > summary .mobile-menu-alerts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; max-width: 100%; margin-left: 10px; vertical-align: middle; line-height: 1; letter-spacing: normal; }
.mobile-menu-alerts img { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; vertical-align: middle; }
body .mobile-command-menu .navigation li.w3-black { background: #222326 !important; }
body:has(.command-header) :is(.searchera, .titre_construction_en_cours, .soin_accueil) { background: #27282B; border-left-width: 1px; color: #EAE3D1; }

/* Home dashboard: CSS reorders the view; PHP keeps its original data dependencies. */
body.home-dashboard .contenu_page { padding-top: 0; }
.hq-dashboard { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; padding: 28px; margin-left: var(--cx-sidebar-width); align-items: start; }
/* Même respiration au-dessus et en dessous de l'ensemble de bienvenue. */
body.home-dashboard .hq-dashboard { padding-top: 14px; row-gap: 14px; }
body.home-dashboard .hq-dashboard > .home-welcome > .padding-bottom-17 { display: flow-root; padding-bottom: 0 !important; }
body.home-dashboard .hq-dashboard > * { margin: 0; min-width: 0; float: none; width: auto; padding: 0; }
.hq-dashboard > .w3-container::before, .hq-dashboard > .w3-container::after { display: none; }
.hq-dashboard .w3-col:empty { display: none; }
body.home-dashboard .hq-dashboard > .home-welcome > .w3-col,
.hq-dashboard :is(.hq-queue, .hq-missions, .hq-round-notice, .hq-vacation) > .w3-col,
.hq-dashboard :is(.hq-queue, .hq-missions, .hq-round-notice, .hq-vacation) > .w3-col > .w3-col { width: 100%; float: none; padding: 0; }
.hq-dashboard .home-welcome { grid-column: 1 / -1; grid-row: 1; }
.hq-eyebrow { color: #B6A478; font: 600 10px/1.5 var(--cx-font); letter-spacing: 1.8px; }
body .hq-page-title { margin: 9px 0 6px; font: 400 clamp(28px, 2.6vw, 40px)/1.15 var(--hq-heading); letter-spacing: -.8px; }
body.home-dashboard .home-welcome .accueil_nom_joueur { text-align: left; font: 400 20px/1.5 var(--cx-font) !important; margin-top: 6px; padding: 0; color: #C1BDB2; }
/* Centrer la bande des rapports dans la colonne du territoire sans changer son apparence. */
body.home-dashboard .home-welcome .new_rc { float: none; clear: both; margin-inline: auto; text-align: center; }
.hq-page-subtitle { margin: 7px 0 0; color: #99998F; font-size: 12px; }
.hq-dashboard .hq-round-notice { clear: both; }
body .hq-dashboard .home-base-section { grid-column: 1; grid-row: 2; overflow: hidden; border: 1px solid var(--cx-line); border-radius: 3px; background: #202124; }
/* Alerte douce autour du territoire : aucun calque au-dessus des bâtiments cliquables. */
body .hq-dashboard .home-base-section.hq-territory-under-attack { border-color: transparent; animation: hq-territory-alert 5.5s ease-in-out infinite; }
@keyframes hq-territory-alert {
  /* Le halo disparaît complètement au point bas ; aucun contour rouge n'est dessiné. */
  0%, 100% { box-shadow: 0 0 18px 5px #D9444400, 0 0 42px 12px #C52F2F00; }
  /* Deux ombres floues renforcent la lueur sans créer de ligne pleine. */
  50% { box-shadow: 0 0 18px 5px #D9444499, 0 0 42px 12px #C52F2F52; }
}
/* Conserver l'alerte fixe lorsque le joueur préfère limiter les animations. */
@media(prefers-reduced-motion: reduce) {
  body .hq-dashboard .home-base-section.hq-territory-under-attack { animation: none; box-shadow: 0 0 18px 5px #D9444473, 0 0 42px 12px #C52F2F38; }
}
.hq-section-heading { padding: 19px 20px; border-bottom: 1px solid var(--cx-line); }
body .hq-section-heading h2, body .hq-support h2 { margin: 5px 0 0; font: 400 23px/1.25 var(--hq-heading); color: #E7DFCB; }
/* Reprendre la typographie du surtitre, en conservant la taille du titre des opérations. */
body :is(.hq-queue, .hq-operations) > .hq-section-heading h2 { margin: 0; font-family: var(--cx-font); font-weight: 600; color: #B6A478; letter-spacing: 1.8px; }
/* Le titre plus long du volet de production reste compact dans les colonnes étroites. */
body :is(.hq-queue, .hq-operations) > .hq-section-heading h2 { font-size: 16px; line-height: 1.35; letter-spacing: 0; }
/* Même style que les titres des volets d'opérations. */
.hq-alliance-heading { margin: 0; font: 600 16px/1.35 var(--cx-font); color: #B6A478; letter-spacing: 0; }
.hq-section-heading.hq-territory-heading { display: grid; align-content: center; height: 56px; padding: 0 20px; background: #27282B; }
/* Police et couleur de l'ancien surtitre, avec la taille de « Vue de l'empire ». */
body .hq-territory-heading .hq-territory-title { margin: 0; font: 600 23px/1.15 var(--cx-font); color: #B6A478; letter-spacing: 1.8px; }
.hq-text-link { color: #D4C396; text-decoration: none; font-size: 12px; }
.hq-text-link:hover { color: #FFF0C9; }
.hq-dashboard .home-base-canvas { position: relative; width: 100%; max-width: none; padding: 0; }
.home-base-canvas > .w3-display-container > img { display: block; border-radius: 0 !important; }
/* Sur ordinateur seulement, réduire le panneau et toute la scène dans les mêmes proportions. */
@media(min-width: 1001px) {
  /* Le bloc de bienvenue suit exactement la même colonne et la même largeur que la carte. */
  body.home-dashboard .hq-dashboard > .home-welcome { grid-column: 1; width: 95%; max-width: 1200px; justify-self: center; }
  body.home-dashboard .hq-dashboard > .home-base-section { width: 95%; max-width: 1200px; justify-self: center; }
}
.hq-map-building { z-index: 11; pointer-events: none; }
.home-base-canvas .w3-display-position:has(> img[src$='attaque_subie.gif']),
.home-base-canvas .w3-display-position:has(> img[src$='bouclier.gif']) { pointer-events: none; }
.hq-building-trigger {
  pointer-events: auto;
  position: relative; display: inline-block; vertical-align: top;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; cursor: pointer;
  font-family: var(--cx-font); line-height: 1.3; text-align: center;
}
.hq-building-gif { display: block; width: 100%; height: auto; }
/* Pendant la construction active, griser seulement le bâtiment, pas l'engrenage. */
.hq-building-trigger[data-building-constructing='1'] > .hq-building-gif { filter: grayscale(.8) brightness(.78); }
/* Centrer l'engrenage en superposition sur l'image, en conservant le clic du bouton. */
.hq-construction-gear { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48%; height: auto; z-index: 2; pointer-events: none; filter: drop-shadow(0 2px 3px #0009); }
.hq-map-building:has(.hq-construction-gear) { z-index: 12; }
.hq-map-building.is-selected { z-index: 50; }
.hq-building-badge {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 60;
  display: grid; gap: 2px; width: max-content; max-width: 190px;
  padding: 7px 13px; background: #24262AED; color: #F0E7D2;
  border: 1px solid #9D885D; border-radius: 2px 9px 2px 9px;
  box-shadow: 0 3px 12px #0008; cursor: pointer;
  font-family: var(--cx-font); line-height: 1.3; text-align: center;
}
.hq-building-badge[hidden] { display: none !important; }
.hq-building-name { font-size: clamp(9px, .85vw, 12px); font-weight: 600; }
.hq-building-level { font-size: 10px; color: #CCBB94; }
.hq-building-trigger[aria-expanded='true'] .hq-building-badge { background: #4C422F; border-color: #E0C68E; }
.hq-building-trigger[data-building-constructing='1'] .hq-building-badge::after { content: ''; position: absolute; width: 7px; height: 7px; right: -4px; top: -4px; border-radius: 50%; background: #E5C786; border: 2px solid #FFF0CC; }
.hq-building-info {
  position: absolute; bottom: 16px; left: 16px; right: 16px; z-index: 100;
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  max-width: 620px; padding: 14px 34px 14px 14px; text-align: left;
  background: #222326F5; border: 1px solid #AC9362; border-radius: 2px 10px 2px 10px;
  box-shadow: 0 7px 24px #0008;
}
.hq-building-info[hidden], .hq-building-info [hidden] { display: none !important; }
.hq-building-info .hq-building-portrait { display: block; width: 88px; height: 78px; object-fit: contain; }
body .hq-building-info h3 { font: 400 22px/1.2 var(--hq-heading); color: #F0DFB6; margin: 5px 0; }
.hq-building-info p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #CDC8BC; }
.hq-building-info .hq-building-resource-icon { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
.hq-building-details { display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 15px; background: linear-gradient(#C6A96C,#8B723E); border: 1px solid #E0C68E; border-radius: 2px 8px 2px 8px; color: #FFF8E8; text-decoration: none; font-size: 13px; }
.hq-building-details:hover { background: #BD9B58; }
.hq-building-close { position: absolute; top: 3px; right: 3px; min-width: 30px; min-height: 30px; padding: 0; background: transparent; color: #DCCBA6; border: 0; cursor: pointer; font-size: 23px; line-height: 1; }

/* Fenêtre de construction : couche native au-dessus de la carte et de la navigation. */
.hq-building-dialog {
  width: min(520px, calc(100% - 28px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; overflow-y: auto; overscroll-behavior: contain;
  color: #EEE8DA; background: #242528; border: 1px solid #887750;
  border-radius: 2px 12px 2px 12px; box-shadow: 0 20px 80px #000A;
}
.hq-building-dialog::backdrop { background: #060709C9; backdrop-filter: blur(5px); }
body:has(.hq-building-dialog[open]) { overflow: hidden; }
.hq-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; }
.hq-dialog-close { border: 0; background: transparent; color: #D7CFBC; min-width: 36px; min-height: 36px; font-size: 26px; cursor: pointer; }
.hq-dialog-hero { height: 145px; display: grid; place-items: center; background: linear-gradient(#191A1D80,#191A1DBB), url('images/fonds/base_accueil.jpg') center 35% / cover; border-block: 1px solid #42423F; }
.hq-dialog-hero .hq-dialog-image { width: 175px; height: 130px; object-fit: contain; }
.hq-dialog-body { padding: 22px; }
body .hq-dialog-body h2 { color: #E8D2A4; font: 400 30px/1.2 var(--hq-heading); margin: 12px 0 16px; }
.hq-dialog-description { color: #C9C3B7; font-size: 13px; line-height: 1.7; margin: 0 0 16px; }
.hq-dialog-production { color: #DBCBAC; font-size: 12px; }
.hq-dialog-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.hq-dialog-stats > div { display: grid; align-content: start; gap: 10px; padding: 14px; border: 1px solid #4A4840; background: #191B1D; }
.hq-dialog-stats span { font-size: 11px; color: #B7B0A1; }
.hq-dialog-stats strong { font: 400 21px/1.35 var(--hq-heading); color: #E8D2A4; }
.hq-dialog-costs { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 20px 0; }
.hq-dialog-costs > div { display: inline-flex; align-items: center; gap: 8px; color: #DBC699; font-size: 13px; }
.hq-dialog-costs img { width: 22px; height: 22px; object-fit: contain; }
body .hq-dialog-build { display: flex; justify-content: space-between; gap: 18px; width: 100%; background: linear-gradient(#AD935A,#796437); border: 1px solid #D5BC82; color: #FFF6E3; padding: 13px 16px; }
.hq-dialog-note { margin: 14px 0 0; color: #A5A093; font-size: 11px; line-height: 1.6; }
@media(max-width: 600px) {
  .hq-dialog-header { padding: 10px 16px; }
  .hq-dialog-body { padding: 18px; }
  .hq-dialog-hero { height: 110px; }
  .hq-dialog-hero .hq-dialog-image { height: 100px; width: 140px; }
  body .hq-dialog-body h2 { font-size: 25px; }
}
@media(max-width: 600px) {
  .hq-building-badge { max-width: 114px; padding: 4px 7px; }
  .hq-building-name { font-size: 9px; }
  .hq-building-level { font-size: 9px; }
  .hq-building-info { position: relative; left: auto; right: auto; bottom: auto; margin: 8px; padding: 12px 25px 12px 10px; grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
  .hq-building-info .hq-building-portrait { width: 48px; height: 52px; }
  body .hq-building-info h3 { font-size: 18px; }
  .hq-building-info .hq-eyebrow { font-size: 8px; letter-spacing: .7px; }
  .hq-building-info p { font-size: 10px; }
  .hq-building-details { grid-column: 2; justify-self: start; padding: 7px 12px; font-size: 12px; }
}
.hq-territory-footer { height: 56px; padding: 0; border-top: 1px solid var(--cx-line); background: #27282B; }
body .hq-dashboard .hq-queue { grid-column: 2; grid-row: 2; background: #222326; border: 1px solid var(--cx-line); border-radius: 3px; overflow: hidden; align-self: stretch; }
@media(min-width: 1001px) {
  /* La carte détermine seule la hauteur de cette ligne de grille : les volets ouverts défilent à l'intérieur. */
  body .hq-dashboard .hq-queue { contain: size; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #8C7A56 #1B1C1F; }
  /* Garder le titre visible pendant la consultation des opérations. */
  .hq-queue > .hq-section-heading { position: sticky; top: 0; z-index: 2; background: #222326; }
  .hq-queue::-webkit-scrollbar { width: 8px; }
  .hq-queue::-webkit-scrollbar-track { background: #1B1C1F; }
  .hq-queue::-webkit-scrollbar-thumb { background: #8C7A56; border: 2px solid #1B1C1F; border-radius: 8px; }
  .hq-queue::-webkit-scrollbar-thumb:hover { background: #D4B77C; }
}
.hq-queue-caption { color: #A5A194; font-size: 11px; padding: 12px 18px 0; margin: 0; }
/* Chantier actif : graphite et laiton, avec les GIF du jeu et un accent bleu sur la progression. */
.hq-construction, .hq-construction * { box-sizing: border-box; }
.hq-construction { margin: 14px; border: 1px solid #726348; border-radius: 2px 10px 2px 10px; overflow: hidden; background: #171B20; }
.hq-construction-heading { padding: 12px; border-bottom: 1px solid #726348; color: #E4C897; font: 500 18px/1.25 var(--hq-heading); }
.hq-construction-heading > span { margin-right: 6px; }
.hq-construction-active { padding: 14px 12px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; background: radial-gradient(ellipse at top left, #34495780, transparent 75%); }
.hq-construction-portrait { width: 76px; height: 80px; object-fit: contain; grid-row: span 2; filter: drop-shadow(0 5px 7px #0008); }
.hq-construction-name { align-self: end; color: #ECD5AE; font: 500 18px/1.2 var(--hq-heading); overflow-wrap: anywhere; }
.hq-construction-name > span { display: block; margin-top: 5px; color: #B4B7BC; font: 400 12px/1.4 var(--cx-font); }
.hq-construction-time { font-size: 11px; color: #AFB4BC; }
.hq-construction-time strong { display: block; color: #9AC5ED; font-size: 13px; font-variant-numeric: tabular-nums; }
.hq-construction-progress { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; }
.hq-construction-progress progress { appearance: none; flex: 1; min-width: 0; height: 12px; overflow: hidden; border: 1px solid #7A7059; border-radius: 3px; background: #0E151C; }
.hq-construction-progress progress::-webkit-progress-bar { background: #0E151C; }
.hq-construction-progress progress::-webkit-progress-value { background: linear-gradient(#9ACFEB, #487FA7); box-shadow: 0 0 8px #8ACDF5; }
.hq-construction-progress progress::-moz-progress-bar { background: linear-gradient(#9ACFEB, #487FA7); }
.hq-construction-progress > span { color: #D7DDE3; min-width: 35px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.hq-construction-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.hq-construction-actions form { flex: 1; min-width: 0; }
body .hq-construction button { width: 100%; padding: 7px 9px; min-height: 32px; border: 1px solid #77684C; border-radius: 2px 6px 2px 6px; background: #20252B; color: #DFCBA6; font: 500 11px/1.3 var(--cx-font); cursor: pointer; }
body .hq-construction button:hover { border-color: #D4B77C; background: #30353A; }
body .hq-construction .hq-construction-finish { background: linear-gradient(#AD9258, #776037); color: #FFF2D3; }
.hq-construction-finish img { width: 15px; height: 15px; object-fit: contain; vertical-align: middle; }
.hq-construction-waiting { border-top: 1px solid #5C5547; }
.hq-construction-waiting summary { display: flex; align-items: center; gap: 8px; padding: 11px 12px; cursor: pointer; color: #D9C39D; font-size: 12px; list-style: none; }
.hq-construction-waiting summary::-webkit-details-marker { display: none; }
.hq-construction-waiting summary::before { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-right: 3px; margin-top: -3px; }
.hq-construction-waiting[open] summary::before { transform: rotate(225deg); margin-top: 3px; }
.hq-construction-waiting summary > span { margin-left: auto; border: 1px solid #635B4B; padding: 2px 6px; border-radius: 2px; font-size: 10px; }
.hq-construction-waiting ol { list-style: none; margin: 0; padding: 0 8px 8px; }
.hq-construction-waiting li { display: grid; grid-template-columns: 16px 47px minmax(0, 1fr); align-items: center; gap: 7px; padding: 10px 6px; border: 1px solid #41454A; border-radius: 2px 6px 2px 6px; background: linear-gradient(110deg, #30383F, #1B2026); }
.hq-construction-waiting li + li { margin-top: 6px; }
.hq-construction-position { color: #D4B77C; font-size: 11px; text-align: center; }
.hq-waiting-portrait { width: 47px; height: 51px; object-fit: contain; }
.hq-waiting-description { min-width: 0; display: grid; gap: 3px; }
.hq-waiting-description > strong { color: #E0CCA9; font: 500 14px/1.3 var(--hq-heading); overflow-wrap: anywhere; }
.hq-waiting-description > span { color: #B6BAC0; font-size: 10px; }
.hq-waiting-description small { color: #AFB4BC; font-size: 10px; }
.hq-waiting-description b { color: #9AC5ED; font-weight: 500; font-variant-numeric: tabular-nums; }
.hq-construction-waiting form { grid-column: 3; justify-self: end; }
body .hq-construction-waiting button { min-height: 0; padding: 4px 8px; font-size: 10px; }
.hq-construction-empty { padding: 10px 12px; border-top: 1px solid #41454A; color: #969C9F; font-size: 10px; text-align: center; }
/* Recrutements parallèles : une synthèse par catégorie, puis les lots à la demande. */
.hq-recruitments, .hq-recruitments * { box-sizing: border-box; }
.hq-recruitments { margin: 14px; background: #171B20; border: 1px solid #726348; border-radius: 2px 10px 2px 10px; overflow: hidden; }
.hq-recruitments > .hq-construction-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hq-recruitment-total { font: 500 11px/1.4 var(--cx-font); border: 1px solid #635B4B; padding: 2px 6px; border-radius: 2px; }
.hq-recruitment-infantry { --recruit-bg: #512D38; --recruit-text: #FFD5D8; --recruit-accent: #C7878D; }
.hq-recruitment-armor { --recruit-bg: #29443F; --recruit-text: #D4EEE4; --recruit-accent: #8AB5A2; }
.hq-recruitment-air { --recruit-bg: #DBDFE5; --recruit-text: #202B3B; --recruit-accent: #687D96; }
.hq-recruitment-navy { --recruit-bg: #254563; --recruit-text: #D9EDFF; --recruit-accent: #86B6DD; }
/* Les agents reprennent les tons jaunes des opérations des services secrets. */
.hq-recruitment-agents { --recruit-bg: #514630; --recruit-text: #F3E5BD; --recruit-accent: #C5AD70; }
.hq-recruitment-group { color: var(--recruit-text); background: var(--recruit-bg); }
.hq-recruitment-group + .hq-recruitment-group { border-top: 1px solid #FFFFFF30; }
.hq-recruitment-group summary { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 7px; align-items: center; gap: 8px; padding: 12px 10px; cursor: pointer; list-style: none; }
.hq-recruitment-group summary::-webkit-details-marker { display: none; }
.hq-recruitment-group summary::after { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.hq-recruitment-group[open] summary::after { transform: rotate(225deg); }
.hq-recruitment-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hq-recruitment-category { font: 600 12px/1.4 var(--cx-font); }
.hq-recruitment-group small { display: block; font: 400 10px/1.4 var(--cx-font); opacity: .8; }
.hq-recruitment-next { text-align: right; }
.hq-recruitment-next strong { display: block; font: 500 10px/1.5 var(--cx-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hq-recruitment-list { padding: 0 8px 8px; display: grid; gap: 7px; }
.hq-recruitment-card { display: grid; grid-template-columns: 63px minmax(0, 1fr); gap: 9px; padding: 11px 9px; background: #00000014; border: 1px solid #80808060; border-radius: 2px 6px 2px 6px; }
.hq-recruitment-portrait { width: 63px; height: 66px; object-fit: contain; align-self: center; }
.hq-recruitment-description { align-self: center; min-width: 0; }
.hq-recruitment-description > span { font-size: 10px; opacity: .8; }
body .hq-recruitment-description h3 { font: 500 15px/1.25 var(--hq-heading); color: inherit; margin: 3px 0 5px; overflow-wrap: anywhere; }
.hq-recruitment-description > strong { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.hq-recruitment-card .hq-construction-progress > span { color: inherit; }
.hq-recruitment-card progress { accent-color: var(--recruit-accent); }
.hq-recruitment-card progress::-webkit-progress-value { background: var(--recruit-accent); box-shadow: none; }
.hq-recruitment-card progress::-moz-progress-bar { background: var(--recruit-accent); }
body .hq-recruitment-card button { width: 100%; padding: 7px 5px; min-height: 32px; border: 1px solid var(--recruit-accent); border-radius: 2px 6px 2px 6px; background: #00000012; color: inherit; font: 500 10px/1.3 var(--cx-font); cursor: pointer; }
body .hq-recruitment-card button:hover { background: #80808030; }
body .hq-recruitment-card .hq-recruitment-finish { background: linear-gradient(#AD9258, #776037); border-color: #C2AA74; color: #FFF2D3; }
.hq-recruitment-finish img { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; }
body .hq-queue .w3-panel { margin: 14px !important; width: auto; padding: 14px; font-size: 13px; border-radius: 2px; }
body .hq-queue .w3-panel > div + div { margin-top: 12px; }
body .hq-queue [class*='pushbutton'] { padding: 7px 10px; font-size: 11px !important; min-height: 34px; }
.hq-panel-footer { display: flex; justify-content: space-between; padding: 17px 18px; font-size: 12px; text-decoration: none; color: #C8B88E; border-top: 1px solid var(--cx-line); clear: both; }
.hq-empty-state { padding: 38px 24px; text-align: center; color: #A7A49A; font-size: 13px; }
.hq-empty-state > span { color: var(--cx-accent); font-size: 35px; }
body .hq-empty-state h3 { font-family: var(--hq-heading); font-size: 20px; color: #DFD6C2; }
.hq-dashboard .hq-missions { grid-column: 1 / -1; grid-row: 3; }
/* Le panneau des opérations reste présent, même sans mission ni bonus. */
body .hq-dashboard .hq-operations { display: block; background: #222326; border: 1px solid var(--cx-line); border-radius: 3px; overflow: hidden; }
.hq-operations-subtitle { margin-top: 8px; padding: 13px 14px 5px; border-top: 1px solid #FFFFFF14; color: #B6A478; font: 600 12px/1.4 var(--cx-font); letter-spacing: .7px; }
body .hq-operations .w3-panel { margin: 12px !important; width: auto; padding: 12px; font-size: 12px; overflow-wrap: anywhere; }
.hq-operations .w3-panel > div + div { margin-top: 8px; }
.hq-operations form { max-width: 100%; }
body .hq-operations [class*='pushbutton'] { max-width: 100%; white-space: normal; padding: 7px 9px; font-size: 11px !important; }
.hq-operations-empty { padding: 20px 16px; margin: 0; color: #A7A49A; text-align: center; font-size: 12px; }
.hq-operations:has(.w3-panel) > .hq-operations-empty { display: none; }
/* Bonus actifs : illustration du catalogue et durée compacte, sans phrase répétitive. */
body .hq-operations .hq-active-bonus { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px; text-align: left; }
/* Les pseudo-éléments de clearfix W3 ne doivent pas occuper des cellules de la grille. */
.hq-active-bonus::before, .hq-active-bonus::after { display: none; }
.hq-active-bonus-image { display: block; width: 56px; height: 56px; object-fit: contain; }
.hq-active-bonus-info { min-width: 0; }
.hq-active-bonus-resource { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 12px; }
.hq-active-bonus-resource img { width: 17px; height: 17px; object-fit: contain; }
.hq-active-bonus-label { display: block; font-size: 10px; opacity: .8; }
.hq-active-bonus-time { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Cartes de soutien : résumé visible, effectifs détaillés à la demande. */
body .hq-operations :is(.hq-support-mission, .hq-outgoing-mission, .hq-incoming-mission) { text-align: left; padding: 13px; }
.hq-support-mission-title { display: flex; align-items: center; gap: 8px; }
.hq-support-mission-title svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hq-support-mission-title strong { font: 600 14px/1.3 var(--cx-font); }
.hq-support-destination { font-size: 12px; }
.hq-support-status { font-size: 10px; opacity: .8; }
.hq-support-times { margin: 13px 0; display: grid; gap: 8px; font-size: 11px; }
.hq-support-times > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: baseline; }
.hq-support-times > div[hidden] { display: none; }
.hq-support-times dt { opacity: .8; }
.hq-support-times dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.hq-support-troops { border-top: 1px solid #FFFFFF30; border-bottom: 1px solid #FFFFFF30; }
.hq-support-troops summary { display: flex; gap: 6px; align-items: center; cursor: pointer; padding: 10px 0; font-size: 11px; list-style: none; }
.hq-support-troops summary::-webkit-details-marker { display: none; }
.hq-support-troops summary::before { content: '▸'; }
.hq-support-troops[open] summary::before { content: '▾'; }
.hq-support-troops summary span { margin-left: auto; opacity: .75; font-size: 10px; white-space: nowrap; }
.hq-support-troops table { width: 100%; border-collapse: collapse; font-size: 11px; color: inherit; background: transparent; }
.hq-support-troops :is(th, td) { padding: 6px 0; border: 0; border-top: 1px solid #FFFFFF18; vertical-align: top; text-align: left; }
.hq-support-troops th { font-size: 10px; opacity: .75; font-weight: 500; }
.hq-support-troops :is(th, td):last-child { text-align: right; padding-left: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hq-support-recall { margin-top: 12px; }
body .hq-operations .hq-support-recall button { width: 100%; }
.hq-mission-participant { padding: 8px 0 4px; font-size: 11px; font-weight: 600; }
.hq-rally-troops { text-align: left; }
/* Missions secrètes menées : conserver une identité jaune, avec une lecture alignée à gauche. */
body .hq-operations .hq-secret-mission { text-align: left; padding: 13px; background: #514625 !important; color: #F6E7B4 !important; border-color: #8D7B42 !important; }
.hq-secret-objective { font-size: 11px; line-height: 1.5; color: #E0CC8D; }
.hq-secret-mission .hq-support-times { padding-top: 10px; border-top: 1px solid #D8BE6D40; }
.hq-secret-mission .hq-support-times > div { grid-template-columns: minmax(0, 1fr) auto; }
body .hq-operations .hq-secret-mission button { background: #66552E; color: #FFF0C4; border: 1px solid #AE9252; }
body .hq-operations .hq-secret-mission button:hover { background: #786338; }
.hq-dashboard .hq-forces { grid-column: 1; grid-row: 4; }
.hq-dashboard .home-tactics { grid-column: 1; grid-row: 5; }
.hq-dashboard .home-overview-grid { width: 100%; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.hq-dashboard .home-overview-column { background: #222326; padding: 0 14px 14px; border: 1px solid var(--cx-line); border-radius: 3px; }
body .hq-dashboard .home-overview-column > .searchera { background: transparent; border: 0 !important; border-bottom: 1px solid var(--cx-line) !important; border-radius: 0; font: 400 21px/1.3 var(--hq-heading); padding: 18px 0; margin-top: 0 !important; }
.hq-dashboard .home-overview-column > .w3-panel:not(.searchera) { font-size: 13px !important; padding: 10px 12px; }
/* Inventaire des forces : images du jeu, noms complets et quantités exactes. */
.hq-forces-panels { align-items: start; }
.hq-force-panel { align-self: start; }
.hq-force-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.hq-force-card, .hq-force-card * { box-sizing: border-box; }
.hq-force-infantry { --force-bg: #512D38; --force-text: #FFD5D8; --force-line: #8C555F; }
.hq-force-armor { --force-bg: #29443F; --force-text: #D4EEE4; --force-line: #52776A; }
.hq-force-air { --force-bg: #DBDFE5; --force-text: #202B3B; --force-line: #AAB4C0; }
.hq-force-navy { --force-bg: #254563; --force-text: #D9EDFF; --force-line: #4B6E8D; }
.hq-force-card { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 10px; border: 1px solid var(--force-line); border-radius: 2px 12px 2px 12px; background: linear-gradient(145deg, #FFFFFF0D, #00000014), var(--force-bg); color: var(--force-text); text-align: center; overflow-wrap: anywhere; }
.hq-force-art { width: 100%; height: 82px; display: grid; place-items: center; margin-bottom: 9px; background: radial-gradient(ellipse, #FFFFFF1A, transparent 72%); }
.hq-force-art img { display: block; width: 100%; height: 82px; object-fit: contain; filter: drop-shadow(0 4px 4px #0003); }
body .hq-force-card h3 { width: 100%; margin: 0 0 9px; font: 600 12px/1.4 var(--cx-font); color: inherit; }
.hq-force-quantity { max-width: 100%; margin-top: auto; font: 600 22px/1.2 var(--cx-font); font-variant-numeric: tabular-nums; }
.hq-force-recovery { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: center; gap: 8px 12px; padding: 12px 8px 0; margin-top: 14px; border-top: 1px solid var(--cx-line); color: #BDB7A9; font-size: 11px; text-align: center; }
/* Icône de soin à côté du pourcentage ; le libellé figure dans son infobulle. */
.hq-force-recovery > img { justify-self: center; width: 36px; height: 36px; object-fit: contain; }
.hq-force-recovery strong { color: #DFC899; font: 600 20px/1.2 var(--cx-font); }
.hq-force-empty { margin: 20px 0; color: #A8A7A2; font-size: 12px; text-align: center; }
@media(max-width: 600px) {
  /* Deux cartes par ligne, même pour les noms longs ; aucun nom ni nombre n'est tronqué. */
  .hq-force-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .hq-force-card { padding: 9px; }
  .hq-force-art, .hq-force-art img { height: 75px; }
  .hq-force-quantity { font-size: 21px; }
}
/* Tactique : libellé illustré et valeur lisible, dans le style des taux de reconstitution. */
body .hq-dashboard .home-tactics-panel { display: grid; grid-template-columns: minmax(0, 300px) auto; align-items: center; gap: 20px; box-sizing: border-box; margin: 0 auto; font-size: 14px !important; }
.home-tactics-panel::before, .home-tactics-panel::after { display: none; }
.hq-tactics-caption { display: grid; justify-items: center; gap: 8px; text-align: center; font: 500 14px/1.45 var(--cx-font); }
.hq-tactics-caption img { width: 42px; height: 42px; object-fit: contain; }
.hq-tactics-value { color: #DFC899; font: 600 28px/1.2 var(--cx-font); font-variant-numeric: tabular-nums; }
.hq-dashboard .hq-support { grid-column: 2; grid-row: 4 / 6; display: grid; gap: 20px; }
.hq-support-card { padding: 22px; background: #242427; border: 1px solid var(--cx-line); border-radius: 3px; }
.hq-support p { color: #BBB6A9; font-size: 13px; line-height: 1.8; }
.hq-support .hq-alliance-name { overflow-wrap: anywhere; }
.hq-support .hq-alliance-tag { color: #D9C28F; font: 600 18px/1.4 var(--cx-font); margin: 0; overflow-wrap: anywhere; }
/* Respecter les proportions du logo de l'alliance, y compris pour une image rectangulaire. */
.hq-alliance-logo { display: block; width: min(100%, 120px); height: 100px; object-fit: contain; margin: 16px auto; }
.hq-history-card { display: block; padding: 22px; text-decoration: none; background: #242427; border: 1px solid var(--cx-line); border-radius: 3px; }
.hq-history-card .hq-text-link { display: inline-block; margin-top: 24px; }
.hq-history-mission-title { overflow-wrap: anywhere; }
body .hq-support .hq-history-mission-title { margin-top: 12px; }
/* Afficher l'illustration complète de la mission, sans en déformer les proportions. */
.hq-history-mission-image { display: block; width: 100%; height: auto; max-height: 180px; object-fit: contain; margin-top: 16px; }
/* Le mode vacances suit la carte Histoire, dans la même colonne, sans anciennes marges de grille. */
.hq-support > .hq-vacation { grid-column: -2 / -1; min-width: 0; width: 100%; margin-top: 28px; padding: 22px; background: linear-gradient(135deg,#282A29,#202225); border: 1px solid #4E5149; border-radius: 2px 12px 2px 12px; }
.hq-vacation, .hq-vacation * { box-sizing: border-box; }
body .hq-support .hq-vacation-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 0; border: 0; background: none; }
body .hq-support .hq-vacation-heading h2 { margin: 0; color: #B6A478; font: 600 23px/1.2 var(--cx-font); letter-spacing: 1.8px; }
.hq-vacation-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 42px; color: #C2B58E; background: #1A1D1F; border: 1px solid #5A5849; border-radius: 2px 8px 2px 8px; }
.hq-vacation-icon svg { width: 28px; height: 28px; }
.hq-vacation-status { display: inline-block; padding: 4px 9px; color: #B9B9AB; background: #353730; border: 1px solid #53564A; border-radius: 3px; font: 500 10px/1.5 var(--cx-font); }
.hq-vacation.is-active .hq-vacation-status { color: #C5DDD0; background: #29443F; border-color: #567466; }
.hq-vacation-delay { margin-top: 18px; padding: 14px 0; border-top: 1px solid #FFFFFF12; border-bottom: 1px solid #FFFFFF12; }
.hq-vacation-delay > span { display: block; color: #A7AC9E; font-size: 11px; }
.hq-vacation-delay strong { display: block; margin-top: 7px; color: #DDC89B; font: 500 17px/1.6 var(--cx-font); overflow-wrap: anywhere; }
body .hq-vacation .hq-vacation-description { margin: 18px 0 0; color: #B6B8AA; font-size: 12px; line-height: 1.8; }
.hq-vacation form { margin-top: 20px; }
body .hq-support .hq-vacation input[type='submit'] { width: 100%; max-width: 100%; min-height: 42px; padding: 11px 12px; color: #E2D3AE !important; background: #3B382E !important; border: 1px solid #80704D !important; border-radius: 2px 8px 2px 8px; font: 500 12px/1.5 var(--cx-font); white-space: normal; cursor: pointer; }
body .hq-support .hq-vacation input[type='submit']:hover { background: #4B4534 !important; }
.hq-vacation input[type='submit']:focus-visible { outline: 2px solid #CDB57F; outline-offset: 3px; }
body:has(.command-header) .contenu_page > .w3-container:has(footer) { margin-left: var(--cx-sidebar-width); width: calc(100% - var(--cx-sidebar-width)); }

@media(min-width: 601px) {
  :root { --cx-sidebar-width: 232px; }
}
@media(min-width: 1600px) {
  .hq-dashboard { grid-template-columns: minmax(0, 1fr) 350px; padding: 32px; gap: 24px; }
}
@media(min-width: 601px) and (max-width: 1200px) {
  :root { --cx-sidebar-width: 200px; }
  body .command-header { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 20px !important; }
  .hq-topline { grid-row: 1; }
  .command-resources { grid-column: 1; grid-row: 2; }
  .command-score { grid-column: 2; grid-row: 2; }
  body .command-resource { padding: 0 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  body .command-resource img { display: block; width: 22px; height: 22px; }
  body .command-resource strong { font-size: 22px; }
  .hq-dashboard { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; padding: 20px; }
  .hq-territory-heading { align-items: start; flex-direction: column; }
}
@media(max-width: 1000px) {
  .hq-dashboard { grid-template-columns: minmax(0, 1fr); }
  body.home-dashboard .hq-dashboard > * { grid-column: 1; grid-row: auto; }
  .hq-dashboard .home-welcome { order: 0; }
  .hq-dashboard .hq-round-notice { order: 1; }
  body .hq-dashboard .home-base-section { grid-column: 1; grid-row: auto; order: 2; }
  body .hq-dashboard .hq-queue { grid-column: 1; grid-row: auto; order: 3; }
  .hq-dashboard .hq-missions { order: 1; }
  .hq-dashboard .hq-forces { order: 5; }
  .hq-dashboard .home-tactics { order: 6; }
  .hq-dashboard .hq-support { order: 7; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 600px) {
  /* Téléphone : conserver aussi les ressources en haut pendant le défilement.
     Les productions se déplient à la demande pour limiter la hauteur occupée. */
  body .command-header { position: sticky; top: 0; z-index: 1000; box-shadow: 0 8px 20px #0004; margin-left: 0; padding: 10px 12px !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  body .command-header > .cx-brand { display: inline-flex; grid-row: 1; grid-column: 1; padding-top: 0; }
  body .command-header > .cx-brand .cx-brand-watch { width: 24px; height: 28px; }
  body .command-header > .cx-brand strong { font-size: 12px; }
  body .command-header > .cx-brand small { display: none; }
  .hq-topline { grid-row: 1; grid-column: 2; margin-bottom: 0; padding: 0; border: 0; gap: 0; }
  .hq-topline > span:empty { display: none; }
  .hq-topline > span { font-size: 9px; letter-spacing: .8px; }
  .hq-topline > div > a { display: none; }
  .hq-topline .hq-player { font-size: 11px; }
  .command-resources { grid-row: 2; grid-column: 1 / -1; }
  body .command-resource { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 4px; row-gap: 2px; text-align: center; padding: 0 6px; min-height: 0; }
  body .command-resource img { display: block; margin: 0; width: 20px; height: 20px; grid-row: 1; }
  body .command-resource strong { grid-column: 2; grid-row: 1; font-size: 20px; }
  body .command-resource small { grid-column: 1 / -1; grid-row: 2; font-size: 11px; }
  /* Masquer les productions des petites colonnes et utiliser trois lignes communes. */
  body .command-resource .hq-resource-production { display: none; }
  .hq-mobile-productions { display: block; grid-column: 1 / -1; grid-row: 3; padding: 0 8px; border-block: 1px solid #FFFFFF14; color: #C8B990; font-size: 12px; }
  /* La flèche indique l'état du volet ; conserver le focus visible au clavier. */
  .hq-mobile-productions > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; cursor: pointer; list-style: none; }
  .hq-mobile-productions > summary::-webkit-details-marker { display: none; }
  .hq-mobile-productions > summary::after { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin: 0 2px 3px; }
  .hq-mobile-productions[open] > summary::after { transform: rotate(225deg); margin-bottom: 0; }
  .hq-mobile-productions > summary:focus-visible { outline: 1px solid var(--cx-accent); outline-offset: 2px; }
  .hq-mobile-productions-list { display: grid; gap: 2px; padding-bottom: 5px; }
  .hq-mobile-production { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .hq-mobile-production img { width: 14px; height: 14px; object-fit: contain; }
  .hq-mobile-production-value { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  body .command-score { grid-row: 4; grid-column: 1 / -1; display: flex; padding: 0; font-size: 13px; justify-content: space-between; }
  body .command-score img { width: 18px; height: 18px; }
  .hq-dashboard { margin-left: 0; padding: 18px 14px; gap: 16px; }
  body .hq-page-title { font-size: 29px; }
  .hq-dashboard .home-overview-grid, .hq-dashboard .hq-support { grid-template-columns: minmax(0, 1fr); }
  .hq-section-heading { padding: 16px; }
  /* Garder les deux bandes identiques, avec la place pour un titre sur deux lignes. */
  .hq-section-heading.hq-territory-heading, .hq-territory-footer { height: 64px; }
  .hq-territory-heading { flex-direction: column; align-items: start; gap: 9px; }
  body:has(.command-header) .contenu_page > .w3-container:has(footer) { margin-left: 0; width: 100%; }
}

@media(min-width: 1001px) {
  /* Deux volets symétriques autour du territoire ; la carte fixe seule leur hauteur. */
  body.home-dashboard .hq-dashboard { grid-template-columns: clamp(220px, 18vw, 310px) minmax(0, 1fr) clamp(220px, 18vw, 310px); column-gap: 16px; }
  body.home-dashboard .hq-dashboard > .home-welcome { grid-column: 2; width: 100%; }
  body.home-dashboard .hq-dashboard > .home-base-section { grid-column: 2; width: 100%; }
  body .hq-dashboard .hq-queue { grid-column: 3; }
  body .hq-dashboard .hq-operations { grid-column: 1; grid-row: 2; align-self: stretch; contain: size; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #8C7A56 #1B1C1F; }
  .hq-operations > .hq-section-heading { position: sticky; top: 0; z-index: 2; background: #222326; }
  .hq-operations::-webkit-scrollbar { width: 8px; }
  .hq-operations::-webkit-scrollbar-track { background: #1B1C1F; }
  .hq-operations::-webkit-scrollbar-thumb { background: #8C7A56; border: 2px solid #1B1C1F; border-radius: 8px; }
  .hq-operations::-webkit-scrollbar-thumb:hover { background: #D4B77C; }
  /* Le contenu de synthèse reprend directement sous la rangée principale, sans ligne vide. */
  .hq-dashboard .hq-forces { grid-column: 1 / 3; grid-row: 3; }
  .hq-dashboard .home-tactics { grid-column: 1 / 3; grid-row: 4; }
  .hq-dashboard .hq-support { grid-column: 3; grid-row: 3 / 5; }
}