/* Site Terra Bellum — suit la charte graphique (thème Nuit principal, thème Jour en option).
   Polices servies par le site lui-même (pas de Google Fonts : rien n'est envoyé à un tiers). */
@font-face { font-family: "Big Shoulders Display"; src: url("polices/BigShouldersDisplay.ttf"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("polices/Barlow-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("polices/Barlow-Medium.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("polices/Barlow-SemiBold.ttf"); font-weight: 600; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("polices/JetBrainsMono.ttf"); font-weight: 100 800; font-display: swap; }

:root {
  --surface-100: #12151C; --surface-200: #1C202A; --surface-300: #262B37; --ligne: #333A48;
  --encre: #ECE8DF; --encre-douce: #9AA1AE;
  --laiton: #D6AC4A; --laiton-plein: #D6AC4A; --encre-sur-laiton: #12151C;
  --front: #E0583F; --ocean: #5B9BC4; --terre: #8FAE6B;
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 19v11M19 24.5h11' stroke='%23D6AC4A' stroke-opacity='.16'/%3E%3C/svg%3E");
  --display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --texte: "Barlow", "Segoe UI", system-ui, sans-serif;
  --donnees: "JetBrains Mono", Consolas, ui-monospace, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --surface-100: #F1F2F4; --surface-200: #FFFFFF; --surface-300: #E3E6EA; --ligne: #C9CED6;
  --encre: #161A22; --encre-douce: #545C69; --laiton: #8C6826;
  --front: #B33A24; --ocean: #2D5D7B; --terre: #4E6B3A; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 19v11M19 24.5h11' stroke='%238C6826' stroke-opacity='.22'/%3E%3C/svg%3E");
  color-scheme: light } }
:root[data-theme="light"] {
  --surface-100: #F1F2F4; --surface-200: #FFFFFF; --surface-300: #E3E6EA; --ligne: #C9CED6;
  --encre: #161A22; --encre-douce: #545C69; --laiton: #8C6826;
  --front: #B33A24; --ocean: #2D5D7B; --terre: #4E6B3A; --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 19v11M19 24.5h11' stroke='%238C6826' stroke-opacity='.22'/%3E%3C/svg%3E");
  color-scheme: light }

* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--surface-100); color: var(--encre); font: 400 16px/24px var(--texte) }
img { max-width: 100%; height: auto; display: block }
a { color: var(--laiton); text-decoration-thickness: 1px; text-underline-offset: 3px }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ocean); outline-offset: 2px }
.cadre { max-width: 1180px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.mono, code { font-family: var(--donnees); font-weight: 500; font-variant-numeric: tabular-nums }
.etiquette { font: 600 12px/16px var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-douce) }
.evitement { position: absolute; left: -999px }
.evitement:focus { left: 16px; top: 16px; z-index: 20; background: var(--surface-200); padding: 8px 12px }

/* Motif de la marque : grille de croix fines */
.croix { background-image: var(--motif); background-size: 48px 48px }

/* En-tête */
.entete { border-bottom: 1px solid var(--ligne); background: var(--surface-100) }
.entete .cadre { display: flex; align-items: center; gap: 12px 24px; padding-block: 12px; flex-wrap: wrap }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--laiton) }
.logo b { display: grid; place-items: center; width: 34px; height: 34px; background: var(--laiton-plein);
  color: var(--encre-sur-laiton); font: 900 18px/1 var(--display) }
.logo span { font: 900 22px/1 var(--display); letter-spacing: .04em }
.menu { display: flex; gap: 20px; flex-wrap: wrap; flex: 1; min-width: 0 }
.menu a { color: var(--encre); text-decoration: none; font-weight: 600; font-size: 15px; padding-block: 4px; border-bottom: 2px solid transparent }
.menu a:hover { color: var(--laiton) }
.menu a[aria-current="page"] { color: var(--laiton); border-bottom-color: var(--laiton) }
.etat { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--encre-douce) }
.etat i { width: 8px; height: 8px; background: var(--terre) }
.etat.ferme i { background: var(--front) }
.theme { background: none; border: 1px solid var(--ligne); color: var(--encre-douce); border-radius: 2px;
  font: 600 12px/16px var(--texte); padding: 6px 10px; cursor: pointer }
.theme:hover { color: var(--encre); border-color: var(--encre-douce) }

/* Boutons et adresse du serveur */
.bouton { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
  background: var(--laiton-plein); color: var(--encre-sur-laiton); border-radius: 2px; text-decoration: none; font: 600 17px/24px var(--texte) }
.bouton:hover { filter: brightness(1.07) }
.bouton small { font: 500 12px/16px var(--donnees); opacity: .75; white-space: nowrap }
.bouton.bientot { background: var(--surface-300); color: var(--encre-douce); cursor: default }
.bouton.bientot:hover { filter: none }
.adresse { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-300); border-radius: 2px; min-width: 0 }
.adresse code { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; color: var(--encre); overflow-wrap: anywhere }
.copier { background: none; border: 1px solid var(--ligne); color: var(--laiton); font: 600 12px/16px var(--texte); padding: 6px 10px; border-radius: 2px; cursor: pointer }

/* Accueil */
.ouverture .cadre { padding-block: 56px 40px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: end }
.ouverture h1 { margin: 12px 0 0; font: 900 clamp(48px, 8vw, 92px)/.9 var(--display); text-transform: uppercase; text-wrap: balance }
.ouverture h1 em { font-style: normal; color: var(--laiton) }
.voies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.voies span { padding: 6px 12px; border: 1px solid currentColor; border-radius: 2px; font: 800 18px/20px var(--display); text-transform: uppercase; letter-spacing: .04em }
.v-commerce { color: var(--laiton) } .v-diplo { color: var(--ocean) } .v-guerre { color: var(--front) }
.chapeau { margin: 20px 0 0; max-width: 56ch; color: var(--encre-douce); font-size: 18px; line-height: 28px }
.agir { display: grid; gap: 16px; padding: 20px; background: var(--surface-200); border: 1px solid var(--ligne); border-radius: 4px }
.agir p { margin: 0; font-size: 14px; line-height: 20px; color: var(--encre-douce) }

.terre-bande { border-block: 1px solid var(--ligne); background: var(--surface-200) }
.terre-bande .cadre { padding-block: 24px }
.table-carte { position: relative; margin-top: 10px; border: 1px solid var(--ligne); background: #0d2340; overflow: hidden }
.table-carte img { width: 100%; aspect-ratio: 1280 / 742; object-fit: cover }
.table-carte::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(236,232,223,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(236,232,223,.16) 1px, transparent 1px);
  background-size: 8.3333% 14.2857% }
.graduations { display: flex; justify-content: space-between; padding: 6px 2px 0; font: 500 11px/14px var(--donnees); color: var(--encre-douce) }

/* Sections */
.bloc { border-top: 1px solid var(--ligne) }
.bloc > .cadre { padding-block: 48px }
h2 { margin: 6px 0 24px; font: 800 44px/44px var(--display); text-transform: uppercase; text-wrap: balance }
h3 { text-wrap: balance }

.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ligne) }
.etapes article { padding: 20px 20px 4px 0; display: grid; gap: 8px; align-content: start }
.etapes article + article { padding-left: 20px; border-left: 1px solid var(--ligne) }
.etapes .num { font: 500 13px/16px var(--donnees); color: var(--laiton) }
.etapes h3 { margin: 0; font: 800 28px/30px var(--display); text-transform: uppercase }
.etapes p { margin: 0; color: var(--encre-douce); font-size: 15px; line-height: 23px }
.etapes .fait { font: 500 13px/18px var(--donnees) }

.promesse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.promesse div { border-top: 2px solid var(--laiton); padding-top: 14px }
.promesse h3 { margin: 0 0 6px; font: 800 24px/26px var(--display); text-transform: uppercase }
.promesse p { margin: 0; color: var(--encre-douce); font-size: 15px; line-height: 23px }

.liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.lien { display: grid; gap: 4px; align-content: start; padding: 16px; background: var(--surface-200); border: 1px solid var(--ligne); border-radius: 4px; text-decoration: none; color: var(--encre) }
.lien:hover { border-color: var(--laiton) }
.lien b { font: 800 22px/24px var(--display); text-transform: uppercase; color: var(--laiton) }
.lien span { font-size: 14px; color: var(--encre-douce) }

/* Pages intérieures */
.titre-page .cadre { padding-block: 48px 32px }
.titre-page h1 { margin: 10px 0 0; font: 900 clamp(44px, 7vw, 72px)/.92 var(--display); text-transform: uppercase; text-wrap: balance }
.titre-page p { margin: 16px 0 0; max-width: 62ch; color: var(--encre-douce); font-size: 18px; line-height: 28px }
.prose { max-width: 68ch }
.prose p, .prose li { color: var(--encre) }
.prose p { margin: 0 0 14px }
.prose h3 { margin: 28px 0 8px; font: 800 26px/28px var(--display); text-transform: uppercase }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px }
.doux { color: var(--encre-douce) }

.deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start }
.deux > * { min-width: 0 }
figure { margin: 0 }
figure img { border: 1px solid var(--ligne) }
figcaption { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--encre-douce) }
ul.chiffres { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; padding: 0; list-style: none }
.chiffres li { padding: 4px 10px; background: var(--surface-300); border-radius: 2px; font: 500 13px/18px var(--donnees) }

.marches { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ligne); counter-reset: marche }
.marches li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ligne); counter-increment: marche }
.marches li::before { content: counter(marche); font: 500 14px/24px var(--donnees); color: var(--laiton) }
.marches b { display: block }
.marches span { color: var(--encre-douce) }

.panneau { background: var(--surface-200); border: 1px solid var(--ligne); border-radius: 4px; padding: 20px; display: grid; gap: 14px; align-content: start }
.panneau h3 { margin: 0; font: 800 24px/26px var(--display); text-transform: uppercase }
.panneau p { margin: 0; color: var(--encre-douce) }

.regles { list-style: none; margin: 0; padding: 0; counter-reset: regle; border-top: 1px solid var(--ligne) }
.regles li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--ligne); counter-increment: regle }
.regles li::before { content: counter(regle); font: 800 28px/28px var(--display); color: var(--laiton) }
.regles b { display: block; margin-bottom: 2px }
.regles span { color: var(--encre-douce) }

.commandes { width: 100%; border-collapse: collapse }
.commandes td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ligne); vertical-align: top }
.commandes td:first-child { white-space: nowrap; font-family: var(--donnees); color: var(--laiton) }
.defile { overflow-x: auto }

.tableau { width: 100%; border-collapse: collapse; font-size: 15px }
.tableau th { text-align: left; font: 600 12px/16px var(--texte); letter-spacing: .06em; text-transform: uppercase; color: var(--encre-douce); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--ligne) }
.tableau td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--ligne) }
.tableau .n { text-align: right; font-family: var(--donnees); font-variant-numeric: tabular-nums }
.tableau .pays { font-weight: 600 }
.note { padding: 10px 0; border-top: 1px solid var(--ligne) }
.note-tete { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: baseline }
.note-tete span { color: var(--laiton) }
.note-tete strong { color: var(--laiton) }
.note-details { margin-top: 2px; font-size: 13px; line-height: 18px }
.salons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.salons ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px }
.salons code { color: var(--encre) }
.guerre { color: var(--front) }

/* Pied de page */
.pied { border-top: 1px solid var(--ligne) }
.pied .cadre { padding-block: 24px 32px; display: flex; gap: 16px 32px; flex-wrap: wrap; justify-content: space-between; font-size: 13px; color: var(--encre-douce) }
.pied nav { display: flex; gap: 16px; flex-wrap: wrap }
.pied a { color: var(--encre-douce) }

@media (max-width: 860px) {
  .ouverture .cadre, .deux { grid-template-columns: minmax(0, 1fr); gap: 32px }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .etapes article:nth-child(3) { padding-left: 0; border-left: 0 }
  .promesse, .liens, .salons { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 560px) {
  .menu { order: 3; flex-basis: 100%; gap: 14px }
  .etapes { grid-template-columns: minmax(0, 1fr) }
  .etapes article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--ligne) }
  .graduations span:nth-child(even) { display: none }
  h2 { font-size: 34px; line-height: 36px }
}