/* ── Player dashboard (index.html) — shell partagé dans app-shell.css ── */
/* L'engrenage de la topbar remplace le groupe "Paramètres" de la nav */
#settings-tab-group { display: none !important; }
/* ── Overview workspace: stats | carte | doctrines + régions ─────── */
.overview-layout {
display: grid;
grid-template-columns: minmax(220px, 280px) 1fr minmax(260px, 340px);
gap: var(--sp-3);
height: calc(100vh - 125px);
min-height: 480px;
}
.overview-panel {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
.overview-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border-subtle);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.95rem;
color: var(--text-primary);
flex-shrink: 0;
}
.overview-panel-hint {
font-size: 0.68rem;
font-family: var(--font-body);
font-weight: 400;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.overview-panel-body {
padding: var(--sp-3);
overflow-y: auto;
flex: 1;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--bg-overlay) var(--bg-surface);
}
.overview-panel-body.no-pad { padding: 0; }
/* Stats en colonne compacte */
.overview-stats .stat-grid {
grid-template-columns: 1fr;
gap: var(--sp-2);
}
.overview-stats .stat-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
text-align: left;
padding: var(--sp-2) var(--sp-3);
}
.overview-stats .stat-value { font-size: 1.15rem; order: 2; }
.overview-stats .stat-label { margin-top: 0; order: 1; }
/* Carte pleine hauteur + bouton plein écran */
.overview-map {
position: relative;
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
overflow: hidden;
min-height: 0;
background: var(--bg-surface);
}
.overview-map .map-embed {
width: 100%;
height: 100%;
border: none;
border-radius: 0;
display: block;
}
.map-fullscreen-btn {
position: absolute;
bottom: var(--sp-3);
right: var(--sp-3);
width: 36px;
height: 36px;
border-radius: var(--r-sm);
border: 1px solid var(--border-mid);
background: rgba(14,14,14,0.75);
color: var(--text-primary);
font-size: 1.1rem;
cursor: pointer;
transition: all var(--ease);
}
.map-fullscreen-btn:hover { border-color: var(--border-gold); color: var(--gold); }
.overview-map:fullscreen .map-embed { height: 100vh; }
/* Colonne droite : doctrines (haut) + régions (reste) */
.overview-side {
display: flex;
flex-direction: column;
gap: var(--sp-3);
min-height: 0;
}
.overview-doctrines { flex: 0 0 auto; max-height: 45%; }
.overview-regions { flex: 1; }
.overview-regions .region-list { max-height: none; }
/* Sélecteurs de doctrine (une par catégorie) */
.doctrine-selects {
display: grid;
gap: var(--sp-2);
}
.doctrine-select-row {
display: grid;
gap: 2px;
}
.doctrine-select-row label {
font-size: 0.7rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.doctrine-select-row select {
background: var(--bg-base);
border: 1px solid var(--border-mid);
border-radius: var(--r-sm);
padding: var(--sp-1) var(--sp-2);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 0.85rem;
width: 100%;
}
.doctrine-select-row select:focus { outline: none; border-color: var(--gold); }
.doctrine-select-row select.dirty { border-color: var(--warning); }
/* Bouton « voir toutes les statistiques » et chevrons de repli : inertes
au-dessus de 480px, où les trois panneaux tiennent tous ouverts. */
.overview-stats-more {
display: none;
width: 100%;
margin-top: var(--sp-2);
padding: var(--sp-2);
min-height: var(--pr-touch-target);
background: transparent;
border: 1px solid var(--border-subtle);
border-radius: var(--r-sm);
color: var(--text-muted);
font-family: inherit;
font-size: 0.78rem;
cursor: pointer;
}
.overview-stats-more:hover { border-color: var(--border-gold); color: var(--gold); }
/* Le repli des panneaux de droite : à toutes les largeurs, plus seulement
sur téléphone. Sur un écran large, les trois panneaux se partagent une
colonne et la liste des régions — celle qui a le plus de lignes — n'en
reçoit qu'un tiers. Replier Doctrines et Activité est ce qui la rend
lisible ; c'était justement impossible là où c'est utile. */
.overview-collapse-arrow {
display: inline;
margin-left: auto;
color: var(--gold);
font-size: 0.65rem;
}
.overview-panel.is-collapsed .overview-panel-body { display: none; }
.overview-side .overview-panel-header { cursor: pointer; }
/* Ce que le repli rend : la place va aux panneaux restés ouverts. */
.overview-side .overview-panel.is-collapsed { flex: 0 0 auto; }
/* ── 1024px — la carte passe en tête et prend toute la largeur ────────
4a : rien n'est ajouté ni retiré, seul l'ordre change en descendant.
La carte est le repère du joueur, elle monte en premier ; les stats
puis doctrines + régions suivent. Le 1100px d'origine ne figurait sur
aucune échelle — voir static/css/pr-breakpoints.css. */
@media (max-width: 1024px) {
.overview-layout {
grid-template-columns: 1fr;
height: auto;
}
.overview-map { height: 420px; order: -1; }
/* Pleine largeur, une stat par ligne laisse deux tiers de vide. */
.overview-stats .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.overview-doctrines { max-height: none; }
/* Doctrines | Régions côte à côte : empilés, ces deux panneaux courts
donnent une page à faire défiler pour rien. */
.overview-side {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
/* ── 480px — mobile : carte, quatre stats + « voir tout », puis deux
panneaux repliables — Régions ouvert, Doctrines fermé (4a). ──────── */
@media (max-width: 480px) {
.overview-map { height: 300px; }
/* Deux colonnes fixes tenaient sur un 480px et débordaient sur un
360x760 : la carte fait 152px de large, l'étiquette et la valeur en
demandent ~85 chacune. `auto-fit` laisse l'appareil trancher — une
colonne sous ~420px, deux au-delà — sans ajouter un cinquième palier
à l'échelle partagée (static/css/pr-breakpoints.css). */
.overview-stats .stat-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.overview-side { grid-template-columns: 1fr; }
.overview-panel-body { max-height: 320px; }
.dashboard-topbar .country-name { max-width: 180px; }
/* Sur 336px utiles, chaque gouttière compte : le corps des panneaux et
la marge de page passent au cran inférieur. */
.main-content { padding: var(--sp-3) var(--sp-2); }
.overview-panel-body { padding: var(--sp-2); }
.overview-panel-header { padding: var(--sp-2); font-size: 0.88rem; }
/* Une carte de stat est « libellé | valeur » sur une ligne : sans
min-width:0 la valeur pousse le libellé hors de la carte au lieu de
le tronquer. */
.overview-stats .stat-card { min-width: 0; gap: var(--sp-1); }
.overview-stats .stat-label {
min-width: 0;
overflow-wrap: anywhere;
line-height: 1.25;
}
.overview-stats .stat-value { font-size: 1.05rem; white-space: nowrap; }
/* Neuf cartes sous la carte, c'est un mur. On en montre quatre et le
bouton révèle le reste. `nth-child` plutôt qu'une classe posée au
rendu : core.js garde une seule template string pour les stats. */
.overview-stats .stat-card:nth-child(n+5) { display: none; }
.overview-stats.stats-all .stat-card:nth-child(n+5) { display: flex; }
.overview-stats-more { display: block; }
/* WCAG 2.5.5 : l'en-tête devient la cible du repli. La flèche et la règle
de repli sont désormais posées hors média — voir plus haut. */
.overview-side .overview-panel-header {
min-height: var(--pr-touch-target);
}
/* Région | population | superficie en `space-between` sans gouttière :
« Provinces-Maritimes-du-Nord » chevauchait les deux chiffres. Le nom
prend sa ligne, les deux mesures la suivante. */
.overview-regions .region-item {
display: grid;
grid-template-columns: 1fr auto;
column-gap: var(--sp-2);
row-gap: 2px;
min-height: var(--pr-touch-target);
align-content: center;
}
.overview-regions .region-name { grid-column: 1 / -1; }
.overview-regions .region-area { text-align: right; }
}
/* ── Overview Tab ────────────────────────────────────────────────── */
.overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--sp-5);
}
.overview-grid .full-width { grid-column: 1 / -1; }
/* ── Region List ─────────────────────────────────────────────────── */
.region-list {
max-height: 300px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--bg-overlay) var(--bg-surface);
}
.region-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border-subtle);
font-size: 0.85rem;
}
.region-item:hover { background: var(--bg-hover); }
.region-name { color: var(--text-primary); font-weight: 500; }
.region-pop { color: var(--text-muted); font-family: var(--font-display); }
.region-area { color: var(--text-muted); font-family: var(--font-display); font-size: 0.85em; }
/* ── Military Totals ────────────────────────────────────────────── */
.military-totals {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
}
.mil-total-item {
text-align: center;
padding: var(--sp-3);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
}
.mil-total-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.mil-total-value {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.mil-total-value.private { color: #F44336; }
.mil-total-value.public { color: #4CAF50; }
.mil-total-value.diff { color: #FF9800; font-size: 1rem; }
/* ── Unit List ──────────────────────────────────────────────────── */
.unit-row {
display: grid;
grid-template-columns: 40px 1fr 80px 80px 80px 80px;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border-subtle);
transition: background var(--ease);
}
.unit-row:hover { background: var(--bg-hover); }
.unit-row:last-child { border-bottom: none; }
.unit-row-icon { font-size: 1.3rem; text-align: center; }
.unit-row-name { font-weight: 500; color: var(--text-primary); font-size: 0.9rem; }
.unit-row-cell { text-align: center; }
.unit-row-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.unit-row-value {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.unit-row-value.private { color: #F44336; }
.unit-row-value.public { color: #4CAF50; }
.unit-row-value.diff { color: #FF9800; }
.unit-list-header {
display: grid;
grid-template-columns: 40px 1fr 80px 80px 80px 80px;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-4);
background: var(--bg-overlay);
border-bottom: 1px solid var(--border-mid);
font-size: 0.7rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.unit-list-header > div { text-align: center; }
.unit-list-header > div:first-child { text-align: center; }
.unit-list-header > div:nth-child(2) { text-align: left; }
/* ── Tech List ───────────────────────────────────────────────────── */
.tech-item {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
border-bottom: 1px solid var(--border-subtle);
}
.tech-item:hover { background: var(--bg-hover); }
.tech-level-badge {
width: 28px;
height: 28px;
border-radius: var(--r-sm);
background: var(--gold-subtle);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 0.85rem;
flex-shrink: 0;
}
.tech-info { flex: 1; }
.tech-name { font-weight: 500; color: var(--text-primary); font-size: 0.9rem; }
.tech-meta { font-size: 0.8rem; color: var(--text-muted); }
/* ── Gov Members ─────────────────────────────────────────────────── */
.gov-member {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border-subtle);
}
.gov-avatar {
width: 36px;
height: 36px;
border-radius: var(--r-full);
background: var(--gold-subtle);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
flex-shrink: 0;
}
.gov-name { font-weight: 500; color: var(--text-primary); }
.gov-role { font-size: 0.8rem; color: var(--text-muted); }
/* ── Leaderboard ─────────────────────────────────────────────────── */
.lb-section {
border-bottom: 1px solid var(--border-mid);
}
.lb-section:last-child { border-bottom: none; }
.lb-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-4);
cursor: pointer;
user-select: none;
transition: background var(--ease);
}
.lb-header:hover { background: var(--bg-hover); }
.lb-title {
font-family: var(--font-display);
color: var(--gold);
font-size: 1rem;
font-weight: 600;
}
.lb-arrow {
color: var(--text-muted);
transition: transform var(--ease);
font-size: 0.8rem;
}
.lb-arrow.open { transform: rotate(90deg); }
.lb-body {
display: none;
}
.lb-body.open { display: block; }
.lb-row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-4);
border-bottom: 1px solid var(--border-subtle);
font-size: 0.85rem;
}
.lb-row:last-child { border-bottom: none; }
.lb-row.is-user { background: var(--gold-subtle); border-radius: var(--r-sm); }
.lb-rank {
width: 24px;
text-align: center;
font-family: var(--font-display);
font-weight: 700;
color: var(--text-muted);
}
.lb-rank.top { color: var(--gold); }
.lb-name { flex: 1; color: var(--text-primary); }
.lb-value { font-family: var(--font-display); font-weight: 600; color: var(--gold); }
/* Leaderboard — player row with golden outline when outside top 20 */
.lb-row-me {
background: var(--gold-subtle);
border: 1px solid var(--border-gold);
border-radius: var(--r-sm);
margin: 2px 0;
}
.lb-row-me-last {
margin-bottom: var(--sp-2);
}
.lb-row-context {
opacity: 0.55;
font-size: 0.82rem;
}
.lb-separator {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-4);
color: var(--text-muted);
font-size: 0.78rem;
}
.lb-separator-line {
flex: 1;
height: 1px;
background: var(--border-subtle);
}
.lb-separator-text {
letter-spacing: 0.15em;
}
/* ── Region List (clickable) ────────────────────────────────────── */
.region-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border-subtle);
font-size: 0.85rem;
cursor: pointer;
transition: background var(--ease);
}
.region-item:hover { background: var(--bg-hover); }
.region-item.active { background: var(--gold-subtle); }
.region-name { color: var(--text-primary); font-weight: 500; }
.region-pop { color: var(--text-muted); font-family: var(--font-display); }
.region-area { color: var(--text-muted); font-family: var(--font-display); font-size: 0.85em; }
/* ── Doctrine Tags ───────────────────────────────────────────────── */
.doctrine-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.doctrine-tag {
padding: var(--sp-1) var(--sp-3);
background: var(--bg-overlay);
border: 1px solid var(--border-subtle);
border-radius: var(--r-full);
font-size: 0.8rem;
color: var(--text-secondary);
}
/* ── History Charts ─────────────────────────────────────────────── */
.history-chart {
width: 100%;
height: 220px;
display: block;
border-radius: var(--r-md);
}
/* Year toggle pills below each chart — click to hide/show that year's data point */
.history-chart-legend {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1);
padding: var(--sp-2) 0;
justify-content: center;
}
.history-pill {
padding: 2px 10px;
border-radius: var(--r-full);
border: 1px solid var(--border-subtle);
background: transparent;
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 0.75rem;
cursor: pointer;
transition: all 0.15s;
}
.history-pill:hover {
border-color: var(--border-mid);
color: var(--text-primary);
}
.history-pill.hidden {
opacity: 0.35;
text-decoration: line-through;
border-color: transparent;
}
/* GD-5 : l'année a quelque chose à raconter. Le repère du canvas ne se lit
qu'en survolant le bon point ; celui-ci se voit sans viser, et son `title`
répond sans qu'on ait à ouvrir le fil. */
.history-pill.has-events {
border-color: var(--border-gold);
color: var(--gold-light);
}
.history-pill.has-events::after {
content: " ●";
font-size: 0.55em;
vertical-align: 2px;
color: var(--gold);
}
.history-pill.has-events.hidden::after { color: inherit; }
/* ── Tech Panel Embed ───────────────────────────────────────────── */
.tech-panel-wrapper {
position: relative;
overflow: hidden;
}
.tech-panel-embed {
width: calc(100% + 2px);
height: 660px;
margin-top: -60px;
border: none;
overflow: hidden;
}
/* ── Tech Inventory ─────────────────────────────────────────────── */
.tech-inventory-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--sp-3);
padding: var(--sp-3);
}
.tech-inv-card {
background: var(--bg-raised);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
padding: var(--sp-3);
display: flex;
gap: var(--sp-3);
align-items: center;
transition: all var(--ease);
}
.tech-inv-card:hover { border-color: var(--border-gold); }
.tech-inv-icon {
width: 48px;
height: 48px;
border-radius: var(--r-md);
background: var(--gold-subtle);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.tech-inv-info { flex: 1; min-width: 0; }
.tech-inv-name { font-weight: 600; color: var(--text-primary); font-size: 0.9rem; }
.tech-inv-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.tech-inv-qty {
font-family: var(--font-display);
font-weight: 700;
color: var(--gold);
font-size: 1.1rem;
flex-shrink: 0;
}
/* ── Structures Summary ─────────────────────────────────────────── */
.structures-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--sp-3);
padding: var(--sp-3);
}
.structure-card {
background: var(--bg-raised);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
padding: var(--sp-3);
text-align: center;
transition: all var(--ease);
}
.structure-card:hover { border-color: var(--border-gold); }
.structure-card.filter-active {
border-color: var(--gold);
background: var(--gold-subtle);
box-shadow: var(--shadow-gold);
}
.structure-card.filter-active:hover { border-color: var(--gold-light); }
.stat-card[onclick] { cursor: pointer; }
.stat-card[onclick]:hover { border-color: var(--border-gold); }
.structure-icon { font-size: 1.5rem; margin-bottom: var(--sp-1); cursor: pointer; }
.structure-type-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; }
.structure-icon { font-size: 1.5rem; margin-bottom: var(--sp-1); }
.structure-type { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.structure-count {
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 700;
color: var(--gold);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.structure-level { font-size: 0.75rem; color: var(--text-secondary); }
/* ── Structures by Region ───────────────────────────────────────── */
.region-struct {
border-bottom: 1px solid var(--border-subtle);
padding: var(--sp-3) var(--sp-4);
}
.region-struct:last-child { border-bottom: none; }
.region-struct-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
}
.region-struct-header:hover { background: var(--bg-hover); margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); }
.region-struct-name {
font-weight: 600;
color: var(--text-primary);
font-size: 0.95rem;
}
.region-struct-count {
font-family: var(--font-display);
font-size: 0.85rem;
color: var(--text-muted);
}
.region-struct-arrow {
color: var(--text-muted);
transition: transform var(--ease);
font-size: 0.8rem;
}
.region-struct-arrow.open { transform: rotate(90deg); }
.region-struct-body {
display: none;
padding-top: var(--sp-2);
}
.region-struct-body.open { display: block; }
.region-struct-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--sp-2);
}
.region-struct-item {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-sm);
padding: var(--sp-2);
text-align: center;
}
.region-struct-item .structure-icon { font-size: 1.2rem; }
.region-struct-item .structure-count { font-size: 1.3rem; }
.region-struct-item .structure-level { font-size: 0.7rem; }
/* ── Infrastructures Summary ────────────────────────────────────── */
.infrastructure-card {
background: var(--bg-raised);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
padding: var(--sp-3);
text-align: center;
transition: all var(--ease);
}
.infrastructure-card:hover { border-color: var(--border-gold); }
.infrastructure-icon { font-size: 1.5rem; margin-bottom: var(--sp-1); }
.infrastructure-type { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.infrastructure-length {
font-family: var(--font-display);
font-size: 1.8rem;
font-weight: 700;
color: var(--gold);
font-variant-numeric: tabular-nums;
line-height: 1.2;
}
.infrastructure-cost { font-size: 0.75rem; color: var(--text-secondary); }
/* ── Infrastructures by Region ──────────────────────────────────── */
.region-infra {
border-bottom: 1px solid var(--border-subtle);
padding: var(--sp-3) var(--sp-4);
}
.region-infra:last-child { border-bottom: none; }
.region-infra-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
}
.region-infra-header:hover { background: var(--bg-hover); margin: 0 calc(-1 * var(--sp-4)); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); }
.region-infra-name {
font-weight: 600;
color: var(--text-primary);
font-size: 0.95rem;
}
.region-infra-count {
font-family: var(--font-display);
font-size: 0.85rem;
color: var(--text-muted);
}
.region-infra-arrow {
color: var(--text-muted);
transition: transform var(--ease);
font-size: 0.8rem;
}
.region-infra-arrow.open { transform: rotate(90deg); }
.region-infra-body {
display: none;
padding-top: var(--sp-2);
}
.region-infra-body.open { display: block; }
.region-infra-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--sp-2);
}
.region-infra-item {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-sm);
padding: var(--sp-2);
text-align: center;
}
.region-infra-item .infrastructure-icon { font-size: 1.2rem; }
.region-infra-item .infrastructure-length { font-size: 1.3rem; }
.region-infra-item .infrastructure-cost { font-size: 0.7rem; }
/* ── Traités Tab ────────────────────────────────────────────────── */
#traites-editor {
width: 100%;
min-height: 400px;
}
/* Sub-tabs */
.sub-tabs {
display: flex;
gap: var(--sp-1);
border-bottom: 1px solid var(--border-mid);
margin-bottom: var(--sp-4);
}
.sub-tab-btn {
padding: var(--sp-2) var(--sp-4);
background: transparent;
border: none;
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 0.9rem;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
.sub-tab-btn:hover {
color: var(--text-primary);
}
.sub-tab-btn.active {
color: var(--gold);
border-bottom-color: var(--gold);
}
.sub-tab-badge {
display: inline-block;
min-width: 1.4em;
padding: 0 0.4em;
margin-left: var(--sp-1);
border-radius: 999px;
background: #f44336;
color: #fff;
font-size: 0.7rem;
line-height: 1.4em;
text-align: center;
}
.sub-tab-panel {
display: none;
}
.sub-tab-panel.active {
display: block;
}
/* Treaty form */
.treaty-form {
display: grid;
gap: var(--sp-4);
}
.form-group {
display: grid;
gap: var(--sp-1);
}
.form-group label {
color: var(--text-muted);
font-size: 0.82rem;
font-weight: 500;
}
.form-group input,
.form-group textarea,
.form-group select {
background: var(--bg-base);
border: 1px solid var(--border-mid);
border-radius: var(--r-sm);
padding: var(--sp-2) var(--sp-3);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 0.9rem;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--gold);
}
.form-group textarea {
min-height: 150px;
resize: vertical;
}
/* Type checkboxes */
.type-checkboxes {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
.type-checkbox {
display: flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-1) var(--sp-2);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-sm);
cursor: pointer;
transition: all 0.2s;
}
.type-checkbox:hover {
border-color: var(--border-mid);
}
.type-checkbox.selected {
border-color: var(--gold);
background: rgba(213, 182, 84, 0.1);
}
.type-checkbox input[type="checkbox"] {
display: none;
}
.type-checkbox .check-icon {
width: 16px;
height: 16px;
border: 2px solid var(--border-mid);
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.type-checkbox.selected .check-icon {
border-color: var(--gold);
background: var(--gold);
}
.type-checkbox.selected .check-icon::after {
content: '✓';
color: var(--bg-void);
font-size: 10px;
font-weight: bold;
}
/* Country selector */
.country-selector {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1);
margin-top: var(--sp-2);
}
.country-tag {
display: flex;
align-items: center;
gap: var(--sp-1);
padding: var(--sp-1) var(--sp-2);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-sm);
font-size: 0.85rem;
}
.country-tag .remove-country {
cursor: pointer;
color: var(--text-muted);
font-size: 1rem;
line-height: 1;
}
.country-tag .remove-country:hover {
color: #f44336;
}
.country-dropdown {
position: relative;
}
.country-dropdown-list {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-raised);
border: 1px solid var(--border-mid);
border-radius: var(--r-sm);
max-height: 200px;
overflow-y: auto;
z-index: 100;
margin-top: 4px;
}
.country-dropdown-list.open {
display: block;
}
.country-dropdown-item {
padding: var(--sp-2) var(--sp-3);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--sp-2);
}
.country-dropdown-item:hover {
background: var(--bg-surface);
}
.country-dropdown-item .color-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.country-dropdown-item.disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Items section */
.items-section {
display: grid;
gap: var(--sp-2);
}
.item-row {
display: grid;
grid-template-columns: 1fr 1fr 80px 40px;
gap: var(--sp-2);
align-items: end;
}
.item-row select,
.item-row input {
background: var(--bg-base);
border: 1px solid var(--border-mid);
border-radius: var(--r-sm);
padding: var(--sp-2);
color: var(--text-primary);
font-size: 0.85rem;
}
.item-row .remove-item-btn {
background: transparent;
border: none;
color: #f44336;
cursor: pointer;
font-size: 1.2rem;
padding: var(--sp-1);
}
/* Treaty filter bar */
.treaty-filter-bar {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--border-subtle);
}
.treaty-filter-btn {
padding: 6px 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-sm);
background: var(--bg-surface);
color: var(--text-secondary);
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.treaty-filter-btn:hover {
border-color: var(--border-mid);
color: var(--text-primary);
}
.treaty-filter-btn.active {
background: var(--gold);
border-color: var(--gold);
color: var(--bg-void);
}
/* Treaty list */
.treaty-list {
display: grid;
gap: var(--sp-3);
}
.treaty-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
padding: var(--sp-3);
cursor: pointer;
transition: all 0.2s;
}
.treaty-card:hover {
border-color: var(--border-mid);
}
.treaty-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--sp-2);
}
.treaty-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.treaty-card-status {
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 12px;
text-transform: uppercase;
}
.status-draft { background: #607D8B; color: white; }
.status-published { background: #2196F3; color: white; }
.status-active { background: #4CAF50; color: white; }
/* Closed treaty statuses: muted tones so they read as "historical"
rather than alarming. Red was too aggressive for a past event. */
.status-cancelled { background: rgba(158, 158, 158, 0.25); color: var(--text-muted); border: 1px solid rgba(158, 158, 158, 0.3); }
.status-rejected { background: rgba(255, 152, 0, 0.15); color: #e0a050; border: 1px solid rgba(255, 152, 0, 0.25); }
.status-modification_requested { background: #FF9800; color: white; }
.treaty-card-meta {
display: flex;
gap: var(--sp-3);
font-size: 0.8rem;
color: var(--text-muted);
}
.treaty-card-types {
display: flex;
gap: var(--sp-1);
flex-wrap: wrap;
margin-top: var(--sp-2);
}
.treaty-type-badge {
font-size: 0.7rem;
padding: 2px 6px;
background: var(--bg-base);
border-radius: 4px;
color: var(--text-secondary);
}
/* Treaty detail modal */
.treaty-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
z-index: 200;
overflow-y: auto;
}
.treaty-modal.open {
display: flex;
align-items: flex-start;
justify-content: center;
padding: var(--sp-8);
}
.treaty-modal-content {
background: var(--bg-base);
border: 1px solid var(--border-mid);
border-radius: var(--r-lg);
width: 100%;
max-width: 800px;
max-height: 90vh;
overflow-y: auto;
position: relative;
top: 60px;
}
.treaty-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--sp-4);
border-bottom: 1px solid var(--border-subtle);
}
.treaty-modal-header h2 {
margin: 0;
font-size: 1.2rem;
}
.treaty-modal-close {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1.5rem;
cursor: pointer;
}
.treaty-modal-refresh {
background: transparent;
border: none;
color: var(--text-muted);
font-size: 1.2rem;
cursor: pointer;
}
.treaty-modal-refresh:hover, .treaty-modal-close:hover {
color: var(--text-primary);
}
.treaty-modal-body {
padding: var(--sp-4);
overflow-y: auto;
}
.treaty-section {
margin-bottom: var(--sp-4);
}
.treaty-section h3 {
font-size: 0.9rem;
color: var(--gold);
margin-bottom: var(--sp-2);
text-transform: uppercase;
}
.party-list {
display: grid;
gap: var(--sp-2);
}
.party-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--sp-2);
background: var(--bg-surface);
border-radius: var(--r-sm);
}
.party-status {
font-size: 0.8rem;
padding: 2px 8px;
border-radius: 12px;
}
.party-pending { background: #607D8B; color: white; }
/* « N'a pas signé » : un fait acquis sur un traité clos, pas une attente en
cours — d'où le traitement neutre plutôt que la couleur d'action. */
.party-unsigned { background: transparent; color: var(--text-muted); border: 1px solid var(--border-mid); }
.party-signed { background: #4CAF50; color: white; }
.party-refused { background: #f44336; color: white; }
.party-modification_requested { background: #FF9800; color: white; }
.item-list {
display: grid;
gap: var(--sp-1);
}
.item-entry {
display: flex;
justify-content: space-between;
padding: var(--sp-1) var(--sp-2);
background: var(--bg-surface);
border-radius: var(--r-sm);
font-size: 0.85rem;
}
.comment-list {
display: grid;
gap: var(--sp-2);
}
.comment-entry {
padding: var(--sp-2);
background: var(--bg-surface);
border-radius: var(--r-sm);
}
.comment-entry .comment-author {
font-size: 0.8rem;
color: var(--gold);
margin-bottom: 4px;
}
.comment-entry .comment-text {
font-size: 0.9rem;
color: var(--text-primary);
}
.comment-entry .comment-date {
font-size: 0.7rem;
color: var(--text-muted);
margin-top: 4px;
}
.treaty-actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
padding: var(--sp-4);
border-top: 1px solid var(--border-subtle);
}
/* Treaty lifecycle visualizer */
.treaty-lifecycle {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-3);
background: var(--bg-surface);
border-radius: var(--r-md);
}
.lifecycle-step {
display: flex;
align-items: center;
gap: var(--sp-1);
font-size: 0.8rem;
color: var(--text-muted);
white-space: nowrap;
}
.lifecycle-step.active { color: var(--gold); font-weight: 600; }
.lifecycle-step.completed { color: #4CAF50; }
.lifecycle-connector {
width: 24px;
height: 2px;
background: var(--border-mid);
margin: 0 var(--sp-1);
}
.lifecycle-connector.completed { background: #4CAF50; }
.lifecycle-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--border-mid);
flex-shrink: 0;
}
.lifecycle-step.active .lifecycle-dot { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.lifecycle-step.completed .lifecycle-dot { background: #4CAF50; }
/* Party signing progress bar */
.signing-progress {
margin-bottom: var(--sp-3);
}
.signing-progress-bar {
height: 6px;
background: var(--bg-surface);
border-radius: 3px;
overflow: hidden;
margin-top: var(--sp-1);
}
.signing-progress-fill {
height: 100%;
border-radius: 3px;
transition: width 0.3s ease;
}
.signing-progress-fill.all-signed { background: #4CAF50; }
.signing-progress-fill.partial { background: #2196F3; }
.signing-progress-fill.refused { background: #f44336; }
.signing-progress-label {
font-size: 0.8rem;
color: var(--text-secondary);
}
/* Party contribution text */
.party-contribution {
font-size: 0.8rem;
color: var(--text-secondary);
font-style: italic;
margin-top: 4px;
padding: 4px 8px;
background: var(--bg-base);
border-radius: 4px;
border-left: 2px solid var(--gold);
}
/* Treaty item summary table */
.item-summary-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.item-summary-table th {
text-align: left;
padding: var(--sp-1) var(--sp-2);
background: var(--bg-surface);
color: var(--gold);
font-size: 0.75rem;
text-transform: uppercase;
border-bottom: 1px solid var(--border-mid);
}
.item-summary-table td {
padding: var(--sp-1) var(--sp-2);
border-bottom: 1px solid var(--border-subtle);
}
.item-type-badge {
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
}
.item-type-money { background: #FFD700; color: #000; }
.item-type-weapon { background: #f44336; color: #fff; }
.item-type-region { background: #4CAF50; color: #fff; }
.item-type-license { background: #9C27B0; color: #fff; }
.item-type-technology { background: #2196F3; color: #fff; }
/* Publish confirmation modal */
.publish-confirm-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.8);
z-index: 300;
align-items: center;
justify-content: center;
}
.publish-confirm-overlay.open { display: flex; }
.publish-confirm-box {
background: var(--bg-base);
border: 1px solid var(--border-mid);
border-radius: var(--r-lg);
padding: var(--sp-4);
max-width: 500px;
width: 90%;
}
.publish-confirm-box h3 {
color: var(--gold);
margin-bottom: var(--sp-3);
}
.publish-confirm-summary {
background: var(--bg-surface);
border-radius: var(--r-sm);
padding: var(--sp-2);
margin-bottom: var(--sp-3);
font-size: 0.85rem;
}
.publish-confirm-summary div { margin-bottom: var(--sp-1); }
.publish-confirm-actions {
display: flex;
gap: var(--sp-2);
justify-content: flex-end;
}
/* Inline comment input */
.comment-input-row {
display: flex;
gap: var(--sp-2);
margin-top: var(--sp-2);
}
.comment-input-row input {
flex: 1;
padding: var(--sp-2);
background: var(--bg-surface);
border: 1px solid var(--border-mid);
border-radius: var(--r-sm);
color: var(--text-primary);
font-size: 0.85rem;
}
.comment-input-row input:focus {
outline: none;
border-color: var(--gold);
}
/* Auto-save indicator */
.autosave-indicator {
font-size: 0.7rem;
color: var(--text-muted);
margin-left: var(--sp-2);
}
.autosave-indicator.saved { color: #4CAF50; }
.autosave-indicator.dirty { color: #FF9800; }
/* Treaty list search and sort */
.treaty-search-input {
padding: var(--sp-2);
background: var(--bg-surface);
border: 1px solid var(--border-mid);
border-radius: var(--r-sm);
color: var(--text-primary);
font-size: 0.85rem;
width: 200px;
}
.treaty-search-input:focus {
outline: none;
border-color: var(--gold);
}
.treaty-sort-btn {
background: transparent;
border: 1px solid var(--border-mid);
border-radius: var(--r-sm);
color: var(--text-secondary);
padding: var(--sp-1) var(--sp-2);
font-size: 0.75rem;
cursor: pointer;
}
.treaty-sort-btn:hover { border-color: var(--gold); color: var(--gold); }
.treaty-show-closed-toggle {
display: flex;
align-items: center;
gap: var(--sp-1);
margin-left: auto;
color: var(--text-secondary);
font-size: 0.8rem;
cursor: pointer;
white-space: nowrap;
}
.treaty-show-closed-toggle input { cursor: pointer; }
.treaty-filter-bar {
display: flex;
align-items: center;
gap: var(--sp-2);
flex-wrap: wrap;
margin-bottom: var(--sp-3);
}
.rp-text-block-viewer {
color: var(--text-primary);
font-size: 0.9rem;
line-height: 1.6;
padding: var(--sp-4);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
}
.rp-text-block-viewer h1, .rp-text-block-viewer h2, .rp-text-block-viewer h3 {
color: var(--gold);
margin: var(--sp-3) 0 var(--sp-2);
}
.rp-text-block-viewer p {
margin: var(--sp-2) 0;
}
.rp-text-block-viewer ul, .rp-text-block-viewer ol {
padding-left: var(--sp-4);
margin: var(--sp-2) 0;
}
.rp-text-block-viewer blockquote {
border-left: 3px solid var(--gold);
padding-left: var(--sp-3);
color: var(--text-secondary);
margin: var(--sp-3) 0;
}
.rp-text-block-viewer code {
background: var(--bg-void);
padding: 2px 6px;
border-radius: var(--r-sm);
font-family: monospace;
font-size: 0.85em;
}
.rp-text-block-viewer pre {
background: var(--bg-void);
padding: var(--sp-3);
border-radius: var(--r-md);
overflow-x: auto;
margin: var(--sp-3) 0;
}
.rp-text-block-viewer pre code {
background: none;
padding: 0;
}
/* Empty state */
.empty-state {
text-align: center;
padding: var(--sp-8);
color: var(--text-muted);
}
.empty-state .empty-icon {
font-size: 3rem;
margin-bottom: var(--sp-3);
}
/* ── Tech Level Progression ──────────────────────────────────────── */
.exp-progress-bar {
height: 10px;
background: var(--bg-surface);
border-radius: var(--r-full);
overflow: hidden;
}
.exp-progress-fill {
height: 100%;
background: var(--gold);
border-radius: var(--r-full);
transition: width 0.3s ease;
}
.exp-progress-label {
margin-top: var(--sp-2);
font-size: 0.85rem;
color: var(--text-secondary);
}
.tech-level-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--sp-4);
}
.tech-level-card {
background: var(--bg-raised);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
padding: var(--sp-4);
transition: border-color var(--ease);
}
.tech-level-card:hover { border-color: var(--border-mid); }
.tech-level-card.locked { opacity: 0.6; }
.tech-level-card-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--sp-2);
}
.tech-level-card-name {
font-family: var(--font-display);
font-weight: 600;
color: var(--text-primary);
}
.tech-level-card-value {
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 700;
color: var(--gold);
}
.tech-level-card-pending {
color: var(--success);
font-size: 1rem;
margin-left: var(--sp-1);
}
.tech-level-card-cost {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: var(--sp-3);
}
.tech-level-card-locked-reason {
font-size: 0.8rem;
color: var(--danger);
margin-bottom: var(--sp-3);
}
.tech-level-stepper {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-3);
}
.tech-level-stepper button {
width: 32px;
height: 32px;
border-radius: var(--r-full);
border: 1px solid var(--border-mid);
background: var(--bg-surface);
color: var(--text-primary);
cursor: pointer;
font-size: 1.1rem;
line-height: 1;
}
.tech-level-stepper button:hover:not(:disabled) {
border-color: var(--border-gold);
color: var(--gold);
}
.tech-level-stepper button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* Le compteur est un champ saisissable : taper « 7 » vaut sept clics sur « + ».
Les flèches natives sont masquées — le pas est déjà servi par les deux
boutons ronds qui l'encadrent, et un troisième jeu de flèches dans le même
contrôle ne veut rien dire. */
.tech-level-stepper-count {
width: 3.25rem;
min-width: 3.25rem;
text-align: center;
font-weight: 600;
font-family: inherit;
font-size: 0.95rem;
padding: 4px 2px;
color: var(--text-primary);
background: var(--bg-surface);
border: 1px solid var(--border-mid);
border-radius: var(--r-sm);
-moz-appearance: textfield;
appearance: textfield;
}
.tech-level-stepper-count::-webkit-outer-spin-button,
.tech-level-stepper-count::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.tech-level-stepper-count:focus {
outline: none;
border-color: var(--border-gold);
}
.tech-level-stepper-count:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.tech-level-summary-bar {
position: sticky;
bottom: var(--sp-4);
margin-top: var(--sp-5);
background: var(--bg-overlay);
border: 1px solid var(--border-gold);
border-radius: var(--r-md);
padding: var(--sp-3) var(--sp-4);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-3);
box-shadow: var(--shadow-lg);
}
.tech-level-summary-cost {
font-size: 0.9rem;
color: var(--text-secondary);
}
.tech-level-summary-cost strong {
color: var(--gold);
font-size: 1.1rem;
}
/* ── Structures toolbar: search + level filter chips ──────────── */
.structures-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.search-input-wrap {
position: relative;
flex: 1 1 260px;
min-width: 200px;
}
.search-input-icon {
position: absolute;
left: var(--sp-3);
top: 50%;
transform: translateY(-50%);
font-size: 0.85rem;
opacity: 0.6;
pointer-events: none;
}
.search-input {
width: 100%;
padding: var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 1.3rem);
background: var(--bg-surface);
border: 1px solid var(--border-mid);
border-radius: var(--r-md);
color: var(--text-primary);
font-family: var(--font-body);
font-size: 0.875rem;
transition: border-color var(--ease);
}
.search-input:focus {
outline: none;
border-color: var(--border-gold);
}
.search-input::placeholder { color: var(--text-muted); }
.level-chip-row {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.level-chip-label {
font-size: 0.75rem;
color: var(--text-muted);
margin-right: var(--sp-1);
}
.level-chip {
background: var(--bg-surface);
border: 1px solid var(--border-mid);
border-radius: var(--r-full);
color: var(--text-secondary);
font-size: 0.8rem;
font-weight: 600;
padding: var(--sp-1) var(--sp-3);
cursor: pointer;
transition: all var(--ease);
}
.level-chip:hover { border-color: var(--border-gold); color: var(--text-primary); }
.level-chip.active {
background: var(--gold);
border-color: var(--gold);
color: var(--bg-void);
}
/* ── Power plants ──────────────────────────────────────────────── */
.power-plant-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-3);
padding: var(--sp-3);
}
.power-plant-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
padding: var(--sp-3);
}
.power-plant-header {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-bottom: var(--sp-2);
}
.power-plant-icon { font-size: 1.4rem; flex-shrink: 0; }
.power-plant-info { flex: 1; min-width: 0; }
.power-plant-type {
font-weight: 600;
font-size: 0.9rem;
color: var(--text-primary);
}
.power-plant-level {
font-weight: 400;
font-size: 0.75rem;
color: var(--gold);
}
.power-plant-meta {
font-size: 0.78rem;
color: var(--text-muted);
}
.plant-badge {
font-size: 0.68rem;
padding: 2px var(--sp-2);
border-radius: var(--r-full);
white-space: nowrap;
}
.plant-badge-pending {
background: rgba(245, 158, 11, 0.15);
color: var(--warning);
}
.plant-upgrade-panel {
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.plant-upgrade-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
color: var(--text-secondary);
}
.plant-upgrade-cost {
font-weight: 600;
color: var(--gold);
}
.plant-upgrade-note {
font-size: 0.78rem;
color: var(--text-muted);
}
.w-full { width: 100%; justify-content: center; }
/* ── Structure drill-down (individual structures within a type/region group) ── */
.region-struct-item {
cursor: pointer;
position: relative;
}
.region-struct-item:hover { border-color: var(--border-gold); }
.region-struct-item.expanded {
border-color: var(--border-gold);
background: var(--bg-overlay);
}
.structure-expand-hint {
font-size: 0.62rem;
color: var(--text-faint);
margin-top: 2px;
}
.structure-detail-list {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: var(--sp-1);
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--r-sm);
padding: var(--sp-2);
margin: 0 0 var(--sp-1);
}
.structure-detail-row {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
padding: var(--sp-1) var(--sp-2);
font-size: 0.75rem;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-subtle);
}
.structure-detail-row:last-child { border-bottom: none; }
.structure-detail-id { color: var(--text-faint); font-family: monospace; }
.structure-detail-level { color: var(--gold); font-weight: 600; }
/* ── Couleur d'organisation ──────────────────────────────────────────────
La carte porte `--org-color` en style inline (organisation.js) ; tout ce qui
suit s'y accroche, si bien qu'une organisation sans couleur hérite
simplement de l'or via la valeur de repli posée par le JS. */
.org-card {
border-left: 3px solid var(--org-color, var(--gold));
}
.org-card-icon {
background: color-mix(in srgb, var(--org-color, var(--gold)) 18%, transparent);
color: var(--org-color, var(--gold));
border: 1px solid color-mix(in srgb, var(--org-color, var(--gold)) 45%, transparent);
}
.org-color-field {
display: flex;
align-items: center;
gap: var(--sp-2);
}
/* Le sélecteur natif est un bloc opaque suivant l'OS : on ne garde que la
pastille, en retirant le chrome que Chrome et Firefox dessinent autour. */
.org-color-swatch {
width: 42px;
height: 34px;
padding: 0;
border: 1px solid var(--border-mid);
border-radius: var(--r-sm);
background: none;
cursor: pointer;
flex-shrink: 0;
}
.org-color-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.org-color-swatch::-webkit-color-swatch { border: none; border-radius: 4px; }
.org-color-swatch::-moz-color-swatch { border: none; border-radius: 4px; }
.org-color-hex {
width: 8ch;
font-family: var(--font-mono, monospace);
text-transform: lowercase;
}
.org-color-presets {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1);
margin-top: var(--sp-2);
}
.org-color-preset {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--border-mid);
cursor: pointer;
padding: 0;
/* La pastille porte sa couleur via --preset (posé en style inline) plutôt
que via `background` : c'est la même variable qui sert au halo du survol,
donc les deux ne peuvent pas diverger. */
background: var(--preset, var(--gold));
color: var(--preset, var(--gold));
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.org-color-preset:hover {
transform: scale(1.15);
box-shadow: 0 0 0 2px var(--bg-raised), 0 0 0 3px currentColor;
}
.war-form-grid, .org-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--sp-3);
align-items: end;
}
/* `minmax(0, 1fr)` et non `1fr` : une piste `1fr` vaut `minmax(auto, 1fr)`,
donc elle refuse de descendre sous la largeur de son contenu. Un nom de pays
long élargissait la grille entière au lieu de se replier, et les trois
colonnes fixes qui suivent partaient hors de l'écran — d'où un débordement
qui variait d'une ligne à l'autre (9 à 34 px sur un téléphone de 360 px)
selon la longueur du nom, ce qui se lit comme un défaut aléatoire alors que
c'est le piège le plus banal de CSS grid. */
.war-declaration-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 100px 100px 80px;
gap: var(--sp-3);
padding: var(--sp-3);
border-bottom: 1px solid var(--border-subtle);
align-items: center;
font-size: 0.85rem;
}
/* La liste des déclarations de guerre n'a que quatre cellules. Sur le gabarit
à cinq pistes, la cinquième — 80 px — restait réservée pour rien et poussait
d'autant la ligne vers la droite. */
.war-declaration-row.is-war { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 100px auto; }
.war-declaration-row:last-child { border-bottom: none; }
/* Un téléphone n'a pas la place de 100 + 100 + 80 px de pistes fixes ET de deux
colonnes de texte. La grille cède la place à une ligne qui se replie : le nom
sur sa propre ligne, le reste à la suite, le bouton à droite. Rien n'est
masqué — c'est la sortie de secours facile, et elle fait disparaître
l'information sans que ça se voie. Le sélecteur passe avant les
`style="grid-template-columns:…"` posés en ligne par organisation.js, parce
que `display: flex` rend `grid-template-columns` sans effet.
480 px et non une valeur inventée : `pr-breakpoints.css` fixe l'échelle
(480 / 768 / 1024 / 1280) et demande d'écrire ces littéraux. Elle couvre
exactement les deux largeurs de téléphone mesurées par la couche navigateur
(360 et 414) et laisse la tablette sur la grille, où elle tient. Entre les
deux, c'est `minmax(0, 1fr)` qui fait le travail — c'est précisément son
rôle. */
@media (max-width: 480px) {
.war-declaration-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-2);
}
.war-declaration-row > * { min-width: 0; }
.war-declaration-row > :first-child {
flex: 1 1 100%;
font-weight: 600;
overflow-wrap: anywhere;
}
.war-declaration-row > .btn { margin-left: auto; }
}
.war-status-badge {
font-size: 0.7rem;
padding: 2px var(--sp-2);
border-radius: var(--r-full);
text-align: center;
/* Une pastille est courte : elle ne doit ni s'étirer ni se couper. */
flex: none;
white-space: nowrap;
}
.war-status-active { background: rgba(239,68,68,0.15); color: var(--danger); }
.war-status-resolved { background: rgba(34,197,94,0.15); color: var(--success); }
.war-status-terminated { background: var(--bg-overlay); color: var(--text-muted); }
/* ── Prêts ─────────────────────────────────────────────────────── */
.loan-gauge { margin-top: var(--sp-4); }
.loan-gauge-bar {
height: 10px;
background: var(--bg-overlay);
border-radius: var(--r-full);
overflow: hidden;
}
.loan-gauge-fill {
height: 100%;
width: 0;
background: var(--gold);
transition: width 0.3s ease;
}
.loan-gauge-fill.is-high { background: var(--danger); }
.loan-gauge-legend {
margin-top: var(--sp-2);
font-size: 0.8rem;
color: var(--text-muted);
}
.loan-notice {
padding: var(--sp-3);
border: 1px solid var(--border-mid);
border-left: 3px solid var(--danger);
border-radius: var(--r-sm);
background: var(--bg-overlay);
color: var(--text-secondary);
font-size: 0.85rem;
}
.loan-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--sp-3);
align-items: end;
}
.loan-estimate, .loan-form > .btn { grid-column: 1 / -1; }
.loan-estimate { font-size: 0.85rem; color: var(--text-secondary); }
.loan-estimate-hint { color: var(--text-muted); }
.loan-estimate-warn { margin-top: var(--sp-1); color: var(--danger); }
.loan-form > .btn { justify-self: start; }
.loan-item {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
align-items: center;
justify-content: space-between;
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border-subtle);
}
.loan-item:last-child { border-bottom: none; }
.loan-ref {
font-family: var(--font-display), monospace;
color: var(--gold);
letter-spacing: 0.04em;
}
.loan-meta {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
margin-top: var(--sp-1);
font-size: 0.8rem;
color: var(--text-muted);
}
.loan-item-actions { display: flex; gap: var(--sp-2); align-items: center; }
.loan-repay-input {
width: 140px;
padding: var(--sp-2);
background: var(--bg-base);
border: 1px solid var(--border-mid);
border-radius: var(--r-sm);
color: var(--text-primary);
font-size: 0.85rem;
}
/* ── Traités du monde ─────────────────────────────────────────────
Public diplomatic record: a responsive card grid of every non-secret
concluded treaty. */
/* "Nouveau traité" is an action, not a view — it sits at the far right of the
sub-tab bar, away from the three listings. */
.sub-tab-btn-end { margin-left: auto; }
.card-header-hint {
margin-left: auto;
font-size: 0.8rem;
color: var(--text-muted);
white-space: nowrap;
}
.world-treaties-intro {
color: var(--text-secondary);
font-size: 0.85rem;
margin-bottom: var(--sp-3);
max-width: 70ch;
}
/* Visual break between the type filters and the status filters, so the two
groups don't read as one long row of interchangeable buttons. */
.treaty-filter-sep {
width: 1px;
align-self: stretch;
min-height: 20px;
background: var(--border-mid);
margin: 0 var(--sp-1);
}
.treaty-status-btn {
padding: 6px 14px;
border: 1px solid var(--border-subtle);
border-radius: var(--r-sm);
background: var(--bg-surface);
color: var(--text-secondary);
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.treaty-status-btn:hover { border-color: var(--border-mid); color: var(--text-primary); }
.treaty-status-btn.active {
background: var(--bg-raised);
border-color: var(--gold);
color: var(--gold);
}
/* auto-fill (not auto-fit) so a lone treaty keeps card width instead of
stretching across the whole page. */
.world-treaty-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-3);
}
.world-treaty-grid .empty-state { grid-column: 1 / -1; }
.world-treaty-card {
display: flex;
flex-direction: column;
gap: var(--sp-2);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-left: 3px solid var(--border-mid);
border-radius: var(--r-md);
padding: var(--sp-3);
cursor: pointer;
transition: border-color 0.15s, transform 0.15s;
}
.world-treaty-card:hover,
.world-treaty-card:focus-visible {
border-color: var(--border-mid);
border-left-color: var(--gold);
transform: translateY(-2px);
outline: none;
}
/* Status is carried by the left edge as well as the badge — colour alone is
hard to scan across a grid. */
.world-treaty-card.status-active { border-left-color: #4CAF50; }
/* Revoked and cancelled: softer tones so the card reads as "concluded"
rather than shouting in red. The border still marks the status. */
.world-treaty-card.status-revoked { border-left-color: rgba(255, 152, 0, 0.6); }
.world-treaty-card.status-cancelled { border-left-color: rgba(158, 158, 158, 0.5); }
.world-treaty-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
}
.world-treaty-date { font-size: 0.75rem; color: var(--text-muted); }
.world-treaty-title {
margin: 0;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.world-treaty-parties {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1);
}
.party-chip {
font-size: 0.72rem;
padding: 2px 8px;
border-radius: 999px;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
}
.party-chip-revoked {
color: #e0a050;
border-color: rgba(255, 152, 0, 0.3);
text-decoration: line-through;
}
.party-chip-more { color: var(--text-muted); }
.world-treaty-footer {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-2);
margin-top: auto;
padding-top: var(--sp-2);
border-top: 1px solid var(--border-subtle);
}
.world-treaty-footer .treaty-card-types { margin-top: 0; }
.world-treaty-author {
font-size: 0.72rem;
color: var(--text-muted);
text-align: right;
white-space: nowrap;
}
/* Revoked treaties existed before this view did; without a rule they'd render
with no badge background at all. Softened from the original #f44336 red —
a revoked treaty is historical, not an active alarm. */
.status-revoked { background: rgba(255, 152, 0, 0.15); color: #e0a050; border: 1px solid rgba(255, 152, 0, 0.25); }
/* Secret treaties: shown on your own cards only. */
.treaty-secret-badge {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: var(--sp-2);
font-size: 0.7rem;
padding: 2px 8px;
border-radius: 999px;
background: rgba(213, 182, 84, 0.12);
border: 1px solid var(--gold-dark);
color: var(--gold);
vertical-align: middle;
}
.treaty-secret-toggle {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
padding: var(--sp-3);
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
cursor: pointer;
}
.treaty-secret-toggle:hover { border-color: var(--gold-dark); }
.treaty-secret-toggle input { margin-top: 3px; cursor: pointer; }
.treaty-secret-text { display: flex; flex-direction: column; gap: 2px; }
.treaty-secret-text strong { color: var(--text-primary); font-size: 0.9rem; }
.treaty-secret-text small { color: var(--text-muted); font-size: 0.78rem; line-height: 1.4; }
@media (max-width: 640px) {
/* The sub-tab bar wraps on phones, so pushing "Nouveau traité" right would
strand it alone on a second line. */
.sub-tabs { flex-wrap: wrap; }
.sub-tab-btn-end { margin-left: 0; }
.world-treaty-grid { grid-template-columns: 1fr; }
.treaty-search-input { width: 100%; }
.world-treaty-footer { flex-direction: column; align-items: flex-start; }
.world-treaty-author { text-align: left; }
}
/* ══════════════════════════════════════════════════════════════════════════
Économie › Finances (1e) et Budget (2b).
Deux colonnes : ce qu'on règle à gauche, ce que ça produit à droite. La
colonne de droite est étroite volontairement — elle ne porte que des
directions et un rappel, jamais un tableau.
══════════════════════════════════════════════════════════════════════════ */
.fin-kpis { margin-bottom: var(--sp-4); }
.fin-budget-layout {
display: grid;
grid-template-columns: 1fr minmax(280px, 360px);
gap: var(--sp-4);
align-items: start;
}
.fin-budget-side {
display: grid;
gap: var(--sp-4);
}
.fin-envelope {
margin-left: auto;
font-size: 0.78rem;
color: var(--text-muted);
}
.fin-envelope strong { color: var(--gold); font-variant-numeric: tabular-nums; }
.fin-note {
font-size: 0.78rem;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: var(--sp-3);
}
/* ── Fin sub-tabs (Territoire Énergie/Structures/Réseaux) ────────
Même style que les sub-tabs Budget/Prêts/Classements mais réutilisé
dans le territoire. Les boutons gris informes n'avaient aucun CSS. */
.fin-sub-tabs {
display: flex;
gap: var(--sp-1);
border-bottom: 1px solid var(--border-mid);
margin-bottom: var(--sp-4);
/* Le rang défile pour lui-même plutôt que d'élargir la page. Territoire
est passé à quatre onglets quand le calculateur y est entré, et quatre
ne tiennent pas dans 360 px : le rang faisait 378, et TOUT le panneau
suivait — en-tête, indicateurs, cartes, champ de recherche débordaient
des mêmes 18 px. Un rang d'onglets est exactement ce qui a le droit de
défiler latéralement ; le corps de la page, non.
`min-width: 0` va avec : sans lui, un descendant de flex ou de grille
garde `min-width: auto` et repousse son parent malgré l'overflow. */
overflow-x: auto;
min-width: 0;
scrollbar-width: thin;
}
.fin-sub-tab {
/* Ne pas comprimer : des onglets rétrécis jusqu'à l'illisible ressemblent
à un défaut de rendu, alors que défiler se comprend. */
flex: 0 0 auto;
white-space: nowrap;
padding: var(--sp-2) var(--sp-4);
background: transparent;
border: none;
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 0.9rem;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
.fin-sub-tab:hover {
color: var(--text-primary);
}
.fin-sub-tab.active {
color: var(--gold);
border-bottom-color: var(--gold);
}
/* ── Barre de répartition ─────────────────────────────────────────────── */
/* Une seule barre pour les trois parts : la somme est visible sans lire les
chiffres, ce qui est tout l'intérêt d'un budget verrouillé à 100 %. */
.alloc-bar {
display: flex;
height: 10px;
border-radius: var(--r-full);
overflow: hidden;
background: var(--bg-surface);
margin-bottom: var(--sp-4);
}
.alloc-bar-mini { height: 6px; margin-bottom: var(--sp-2); }
.alloc-seg { transition: width var(--ease); }
.alloc-seg-primary { background: var(--gold); }
.alloc-seg-secondary { background: var(--gold-dark); }
.alloc-seg-tertiary { background: var(--border-mid); }
.alloc-rows { display: grid; gap: var(--sp-4); }
.alloc-row-head {
display: flex;
align-items: baseline;
gap: var(--sp-2);
margin-bottom: var(--sp-2);
}
.alloc-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex: none;
}
.alloc-dot-primary { background: var(--gold); }
.alloc-dot-secondary { background: var(--gold-dark); }
.alloc-dot-tertiary { background: var(--border-mid); }
.alloc-label { font-size: 0.86rem; font-weight: 600; color: var(--text-primary); }
.alloc-hint { font-size: 0.72rem; color: var(--text-faint); }
.alloc-pct {
margin-left: auto;
font-size: 0.86rem;
font-weight: 700;
color: var(--gold);
font-variant-numeric: tabular-nums;
}
.alloc-money {
font-size: 0.74rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
min-width: 92px;
text-align: right;
}
.alloc-slider {
width: 100%;
height: var(--pr-touch-target);
accent-color: var(--gold);
background: transparent;
cursor: pointer;
}
.alloc-foot {
display: flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-4);
padding-top: var(--sp-3);
border-top: 1px solid var(--border-subtle);
}
.alloc-total { font-size: 0.78rem; color: var(--text-muted); }
.alloc-total strong { color: var(--gold); font-variant-numeric: tabular-nums; }
.alloc-foot .btn:first-of-type { margin-left: auto; }
/* ── Impact attendu ───────────────────────────────────────────────────── */
/* Le verdict est un mot, pas un nombre : 2b insiste sur le fait que le joueur
n'a jamais accès à la formule. La couleur double le mot, elle ne le
remplace pas (contraste seul = information perdue). */
.impact-list { display: grid; gap: var(--sp-2); }
.impact-row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
background: var(--bg-surface);
}
.impact-text { flex: 1; min-width: 0; }
.impact-label { font-size: 0.82rem; color: var(--text-primary); }
.impact-why { font-size: 0.72rem; color: var(--text-muted); }
.impact-verdict {
font-size: 0.72rem;
text-transform: lowercase;
padding: 2px 9px;
border-radius: var(--r-full);
border: 1px solid var(--border-mid);
color: var(--text-muted);
}
.impact-good { border-color: rgba(34, 197, 94, 0.35); }
.impact-good .impact-verdict { color: #22c55e; border-color: rgba(34, 197, 94, 0.45); }
.impact-good .impact-icon { color: #22c55e; }
.impact-bad { border-color: rgba(224, 90, 80, 0.35); }
.impact-bad .impact-verdict { color: #e05a50; border-color: rgba(224, 90, 80, 0.45); }
.impact-bad .impact-icon { color: #e05a50; }
.impact-flat .impact-icon { color: var(--text-muted); }
.fin-last-split {
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--gold);
font-variant-numeric: tabular-nums;
}
/* ── 1024px — la colonne d'impact passe sous la répartition ───────────── */
@media (max-width: 1024px) {
.fin-budget-layout { grid-template-columns: 1fr; }
/* Deux cartes courtes côte à côte plutôt qu'empilées : la même règle que
Doctrines | Régions sur l'accueil. */
.fin-budget-side { grid-template-columns: 1fr 1fr; }
}
/* ── 480px — une colonne, et les actions du budget en pleine largeur ──── */
@media (max-width: 480px) {
.fin-budget-side { grid-template-columns: 1fr; }
.alloc-hint { display: none; }
.alloc-foot { flex-wrap: wrap; }
.alloc-foot .btn {
flex: 1;
min-height: var(--pr-touch-target);
justify-content: center;
}
}
/* ════════════════════════════════════════════════════════════════════════
Territoire page (2d) — KPI strip, region table, Parc/Chantiers/À-traiter
trio, and sub-tab selector. Sub-tab body styles are inherited from the
existing Structures/Power plants/Infrastyles cards.
════════════════════════════════════════════════════════════════════════ */
.ter-workspace { gap: var(--sp-4); }
.tab-panel.ter-workspace.active { display: grid; }
.ter-workspace-head { display: grid; gap: var(--sp-2); }
.ter-kpis { grid-template-columns: repeat(4, 1fr); margin: 0; }
.ter-kpis .stat-card { text-align: left; }
.ter-good { color: #22c55e; }
.ter-warn { color: #e0b050; }
.ter-bad { color: #ef4444; }
/* La phrase qui dit ce que « consommation » recouvre. Sans elle, quatre
chiffres nationaux surmontant un tableau régional se lisent comme un solde
par région — ce que la page laissait croire. */
.ter-energy-basis {
margin: 0;
padding: 0 var(--sp-1);
font-size: 0.8rem;
color: var(--text-muted);
line-height: 1.5;
}
.ter-energy-basis b { color: var(--text-secondary); font-weight: 600; }
.ter-energy-basis .ter-good { color: #22c55e; }
.ter-energy-basis .ter-bad { color: #ef4444; }
/* ── Region table ──────────────────────────────────────────────────────── */
.ter-overview-details {
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
background: var(--bg-surface);
}
.ter-overview-details > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
min-height: var(--pr-touch-target);
padding: var(--sp-3) var(--sp-4);
cursor: pointer;
list-style: none;
}
.ter-overview-details > summary::-webkit-details-marker { display: none; }
.ter-overview-details > summary::after {
content: '+';
color: var(--gold);
font-size: 1.1rem;
line-height: 1;
}
.ter-overview-details[open] > summary {
border-bottom: 1px solid var(--border-subtle);
}
.ter-overview-details[open] > summary::after { content: '−'; }
.ter-overview-title { color: var(--text-primary); font-weight: 600; }
.ter-overview-hint { margin-left: auto; color: var(--text-muted); font-size: 0.78rem; }
.ter-overview-content { padding: var(--sp-4); }
.ter-region-card { margin-bottom: var(--sp-4); }
.ter-region-table { width: 100%; }
.ter-region-thead,
.ter-region-row {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr 96px;
gap: var(--sp-3);
align-items: center;
}
.ter-region-thead {
padding: var(--sp-2) var(--sp-4);
border-bottom: 1px solid var(--border-subtle);
font-size: 0.7rem;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-muted);
}
.ter-region-tbody .ter-region-row {
padding: var(--sp-2) var(--sp-4);
border-bottom: 1px solid var(--border-subtle);
}
.ter-region-tbody .ter-region-row:last-child { border-bottom: none; }
.ter-col-region {
display: flex;
align-items: center;
gap: var(--sp-2);
font-size: 0.85rem;
color: var(--text-primary);
}
.ter-dot {
width: 8px; height: 8px;
border-radius: 2px;
flex: none;
}
.ter-dot-ok { background: #22c55e; }
.ter-dot-warn { background: #e0b050; }
.ter-num {
font-size: 0.82rem;
color: var(--text-secondary);
font-variant-numeric: tabular-nums;
}
.ter-bar-cell {
min-width: 0;
display: flex;
align-items: center;
gap: var(--sp-2);
}
.ter-bar-track {
height: 7px;
flex: 1;
min-width: 0;
border-radius: var(--r-full);
background: var(--bg-raised);
overflow: hidden;
}
.ter-bar-fill { height: 100%; border-radius: var(--r-full); background: var(--gold); }
.ter-bar-pct {
font-size: 0.72rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
flex: none;
}
.ter-open-btn {
font-size: 0.75rem;
color: var(--text-secondary);
border: 1px solid var(--border-mid);
border-radius: var(--r-sm);
padding: 4px 0;
width: 100%;
text-align: center;
background: transparent;
cursor: pointer;
transition: border-color var(--ease), color var(--ease);
}
.ter-open-btn:hover { border-color: var(--border-gold); color: var(--gold); }
.ter-empty { color: var(--text-muted); font-size: 0.85rem; padding: var(--sp-3) 0; }
/* ── Parc / Chantiers / À traiter trio ──────────────────────────────────── */
.ter-trio {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.ter-parc-row {
display: flex;
justify-content: space-between;
font-size: 0.82rem;
color: var(--text-secondary);
padding: 3px 0;
}
.ter-parc-prod { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ter-chantier { margin-bottom: var(--sp-2); }
.ter-chantier-head {
display: flex;
justify-content: space-between;
font-size: 0.82rem;
color: var(--text-secondary);
margin-bottom: 4px;
}
.ter-chantier-pct { color: var(--text-muted); }
.ter-chantier-bar {
height: 5px;
border-radius: var(--r-full);
background: var(--bg-raised);
overflow: hidden;
}
.ter-chantier-fill { height: 100%; border-radius: var(--r-full); background: var(--gold); }
.ter-alert-card { border-color: rgba(213, 182, 84, 0.25); }
.ter-alert-text {
font-size: 0.82rem;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: var(--sp-3);
}
.ter-alert-btn { border-color: rgba(213, 182, 84, 0.4); color: var(--gold-light); }
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.ter-kpis { grid-template-columns: 1fr 1fr; }
.ter-trio { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.ter-region-thead,
.ter-region-row {
grid-template-columns: 1.4fr 1fr 1fr 80px;
}
.ter-region-thead > div:nth-child(5),
.ter-region-thead > div:nth-child(6),
.ter-region-row > .ter-bar-cell,
.ter-region-row > div:last-child {
display: none;
}
}
@media (max-width: 480px) {
.ter-kpis { grid-template-columns: 1fr 1fr; }
.ter-region-thead,
.ter-region-row {
grid-template-columns: 1.4fr 1fr 80px;
}
.ter-region-thead > div:nth-child(3),
.ter-region-thead > div:nth-child(4),
.ter-region-row > .ter-num:nth-of-type(2),
.ter-region-row > .ter-num:nth-of-type(3) {
display: none;
}
.ter-region-thead > div:nth-child(2)::after { content: " MWh"; }
.ter-overview-details > summary { padding: var(--sp-3); }
.ter-overview-hint { display: none; }
.ter-overview-content { padding: var(--sp-3); }
}
/* ── Searchable Select (Relations) ─────────────────────────────── */
.searchable-select {
position: relative;
width: 100%;
}
.searchable-select-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-raised);
border: 1px solid var(--border-mid);
border-top: none;
border-radius: 0 0 6px 6px;
max-height: 240px;
overflow-y: auto;
z-index: 100;
display: none;
}
.searchable-select-dropdown.open {
display: block;
}
.searchable-select-option {
padding: 0.5rem 0.75rem;
cursor: pointer;
transition: background 0.1s;
}
.searchable-select-option:hover {
background: var(--bg-surface);
}
.searchable-select-empty {
padding: 0.75rem;
text-align: center;
color: var(--text-muted);
font-size: 0.85rem;
}
/* ── Fil d'activité (GD-2) ─────────────────────────────────────────────────
Un seul jeu de règles pour les deux surfaces — les dix lignes de la Vue
d'ensemble et la page complète. Deux feuilles divergeraient au premier champ
ajouté, et c'est la moins regardée qui garderait l'ancienne. */
.act-list {
list-style: none;
margin: 0;
padding: 0;
}
.act-entry {
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--border-subtle);
}
.act-entry:last-child { border-bottom: none; }
.act-entry-head {
display: flex;
align-items: baseline;
gap: var(--sp-2);
}
.act-entry-title {
font-weight: 600;
color: var(--text-primary);
font-size: 0.88rem;
min-width: 0;
overflow-wrap: anywhere;
}
/* L'heure est poussée à droite et ne se coupe jamais : c'est la colonne qu'on
parcourt du regard pour situer un fil. */
.act-entry-when {
margin-left: auto;
flex: none;
font-size: 0.72rem;
color: var(--text-faint);
white-space: nowrap;
}
.act-entry-flag { flex: none; }
.act-entry-meta {
margin-top: 2px;
font-size: 0.74rem;
color: var(--text-muted);
}
/* Un événement secret se voit sans être lu : c'est ce qui rappelle au membre du
gouvernement que ce qu'il a sous les yeux n'est pas ce que voient les autres
joueurs de son pays. */
.act-entry-secret { box-shadow: inset 3px 0 0 var(--gold); }
.act-entry-fields {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
gap: 1px var(--sp-3);
margin: var(--sp-2) 0 0;
font-size: 0.76rem;
}
.act-entry-fields dt { color: var(--text-faint); white-space: nowrap; }
.act-entry-fields dd {
margin: 0;
color: var(--text-secondary);
min-width: 0;
overflow-wrap: anywhere;
}
.act-filters {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
margin-bottom: var(--sp-3);
}
.act-chip {
padding: 6px 13px;
min-height: var(--pr-touch-target);
border-radius: var(--r-full);
border: 1px solid var(--border-mid);
background: var(--bg-surface);
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 0.78rem;
white-space: nowrap;
cursor: pointer;
}
.act-chip.active {
background: var(--gold);
border-color: var(--gold);
color: #111;
font-weight: 600;
}
.act-pager {
display: flex;
align-items: center;
gap: var(--sp-3);
margin-top: var(--sp-3);
}
.act-pager-count {
font-size: 0.78rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* Le panneau de la Vue d'ensemble : la liste défile plutôt que d'étirer la
colonne latérale sous la carte. */
.overview-activity .overview-panel-body { max-height: 340px; overflow-y: auto; }
.agenda-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--sp-4);
margin-bottom: var(--sp-4);
}
.agenda-head h2 { margin: 4px 0 0; }
.agenda-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-4);
}
.agenda-card .card-body { display: grid; gap: var(--sp-2); }
.agenda-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-3);
border: 1px solid var(--border-subtle);
border-radius: var(--r-md);
background: var(--bg-surface);
}
.agenda-row span { min-width: 0; }
.agenda-row strong, .agenda-row small { display: block; }
.agenda-row small, .agenda-focus span, .agenda-empty { color: var(--text-muted); }
.agenda-row b { flex: none; color: var(--gold); font-size: .82rem; }
.agenda-focus { display: grid; gap: var(--sp-2); padding: var(--sp-3); }
.agenda-focus strong { font-size: 1.2rem; }
.agenda-empty { padding: var(--sp-3); }
@media (max-width: 760px) {
.agenda-grid { grid-template-columns: 1fr; }
.agenda-head { align-items: start; }
}
.country-audit-row {
padding: var(--sp-3) 0;
border-bottom: 1px solid var(--border-subtle);
}
.country-audit-row:last-child { border-bottom: 0; }
.country-audit-row header {
display: flex;
justify-content: space-between;
gap: var(--sp-3);
}
.country-audit-row time, .country-audit-row small { color: var(--text-faint); }
.country-audit-row p { margin: var(--sp-2) 0; color: var(--text-secondary); }
.country-audit-values { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.country-audit-values span {
padding: 3px 8px;
border-radius: var(--r-sm);
background: var(--bg-surface);
font-size: .75rem;
color: var(--text-muted);
}
.comparator-controls {
display: flex;
align-items: end;
flex-wrap: wrap;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.comparator-controls label { display: grid; gap: 5px; color: var(--text-muted); font-size: .78rem; }
.comparator-controls input { min-width: 190px; }
.comparator-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--sp-3);
}
.comparator-country .card-body { display: grid; gap: var(--sp-2); }
.comparator-metric {
display: flex;
justify-content: space-between;
gap: var(--sp-3);
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--border-subtle);
}
.comparator-metric span { color: var(--text-muted); }
.comparator-metric strong { text-align: right; }
@media (max-width: 900px) { .comparator-grid { grid-template-columns: 1fr; } }
.country-sheet-actions {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--sp-4);
margin-bottom: var(--sp-4);
}
.country-sheet-actions h2 { margin: 4px 0 0; }
.country-sheet {
max-width: 980px;
margin: 0 auto;
padding: clamp(24px, 5vw, 64px);
border: 1px solid var(--border-subtle);
border-radius: var(--r-lg);
background: var(--bg-surface);
}
.country-sheet-hero { display: flex; align-items: center; gap: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 2px solid var(--gold); }
.country-sheet-hero img { width: 132px; max-height: 88px; object-fit: contain; }
.country-sheet-hero span, .country-sheet-hero p { color: var(--text-muted); }
.country-sheet-hero h1 { margin: 5px 0; font-family: var(--font-display); color: var(--gold); font-size: 2.2rem; }
.country-sheet-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin: var(--sp-5) 0; }
.country-sheet-stats div { padding: var(--sp-3); border: 1px solid var(--border-subtle); border-radius: var(--r-md); }
.country-sheet-stats span, .country-sheet-stats strong { display: block; }
.country-sheet-stats span { color: var(--text-muted); font-size: .76rem; }
.country-sheet-stats strong { margin-top: 4px; }
.country-sheet-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.country-sheet-columns h2 { font-size: 1rem; color: var(--gold); }
.country-sheet-columns ul { margin: 0; padding-left: 18px; }
.country-sheet-columns li { padding: 4px 0; }
.country-sheet-columns li span { float: right; color: var(--text-muted); }
.country-sheet-wide { grid-column: 1 / -1; }
.country-sheet footer { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); color: var(--text-faint); font-size: .72rem; }
@media (max-width: 700px) {
.country-sheet-actions { align-items: start; flex-direction: column; }
.country-sheet-stats, .country-sheet-columns { grid-template-columns: 1fr; }
.country-sheet-wide { grid-column: auto; }
}
@media print {
@page { size: A4; margin: 12mm; }
pr-site-header, #login-section, .country-sheet-actions { display: none !important; }
body, #app-section, #dashboard-content { background: #fff !important; color: #111 !important; }
.tab-panel { display: none !important; }
#tab-country-sheet { display: block !important; }
.country-sheet {
max-width: none;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: #fff !important;
color: #111 !important;
box-shadow: none;
}
.country-sheet * { color: #111 !important; }
.country-sheet-hero, .country-sheet footer { border-color: #555 !important; }
.country-sheet-stats div { border-color: #bbb !important; break-inside: avoid; }
.country-sheet-columns section { break-inside: avoid; }
}