/*
 * Modèle éditorial commun Geopolo
 * Inspiré du fichier de référence « modèle-design-codex.html ».
 * Cette feuille est chargée après les styles de chaque dossier afin de
 * garantir une présentation homogène sur l'ensemble des articles.
 */

:root {
  --codex-paper: #fff;
  --codex-canvas: #ededed;
  --codex-ink: #242424;
  --codex-muted: #666;
  --codex-accent: #7b5054;
  --codex-accent-dark: #59383c;
  --codex-soft: #f3f1ef;
  --codex-line: #d8d8d8;
  --codex-serif: Georgia, "Times New Roman", serif;
  --codex-sans: Arial, Helvetica, sans-serif;
  --codex-text: "Walbaumgrot", Helvetica, Arial, sans-serif;
  --codex-page: 1040px;
}

/*
 * Palette éditoriale des clusters.
 * La couleur est volontairement limitée aux h1 et h2 : tous les autres
 * éléments conservent l'identité neutre et cohérente du modèle commun.
 */
html:has(link[href*="arabie-saoudite-pilier.css"]) { --cluster-title: #0b6044; }
html:has(link[href*="chine-pilier.css"]),
html:has(meta[name="keywords"][content^="Chine routes maritimes"]),
html:has(meta[name="keywords"][content^="Chine 2040"]),
html:has(meta[name="keywords"][content^="bases militaires chinoises"]) { --cluster-title: #9c2727; }
html:has(link[href*="coree-du-nord-pilier.css"]) { --cluster-title: #8a2432; }
html:has(link[href*="coree-du-sud-pilier.css"]),
html:has(link[href*="onu-pilier.css"]) { --cluster-title: #245a86; }
html:has(link[href*="etats-unis-pilier.css"]),
html:has(meta[name="keywords"][content^="Washington Chine"]) { --cluster-title: #1c4675; }
html:has(link[href*="inde-pilier.css"]) { --cluster-title: #9a4e08; }
html:has(link[href*="iran-pilier.css"]) { --cluster-title: #086c5c; }
html:has(link[href*="japon-pilier.css"]) { --cluster-title: #a52a35; }
html:has(link[href*="renseignement-mondial-pilier.css"]) { --cluster-title: #5b427a; }
html:has(link[href*="russie-pilier.css"]) { --cluster-title: #465b78; }
html:has(link[href*="semi-conducteurs-pilier.css"]) { --cluster-title: #17678d; }
html:has(link[href*="turquie-pilier.css"]),
html:has(meta[property="og:title"][content^="Top 10 des armées"]) { --cluster-title: #176b70; }

html {
  background: var(--codex-canvas) !important;
}

body {
  width: min(100%, var(--codex-page));
  min-height: 100vh;
  margin: 0 auto !important;
  background: var(--codex-paper) !important;
  color: var(--codex-ink) !important;
  font-family: var(--codex-sans) !important;
  line-height: 1.55;
  box-shadow: 0 0 28px rgb(0 0 0 / 8%);
}

body > .top,
body > .nav {
  display: none !important;
}

/* Ancienne signature injectée avec l'en-tête historique sur certains lots. */
body > div[style*="font-family:Arial"][style*="font-size:.58rem"] {
  display: none !important;
}

/* En-tête éditorial */
.gph-topbar {
  min-height: 44px;
  padding: 9px 42px !important;
  background: #f2f2f2 !important;
  border: 0 !important;
  color: #6d6d6d !important;
  font-family: var(--codex-sans) !important;
  font-size: 0.72rem !important;
}

.gph-topbar a {
  color: #555 !important;
}

.gph-topbar__right a:last-child {
  padding: 0.4rem 0.85rem !important;
  border-radius: 999px;
  background: #698f99 !important;
  color: #fff !important;
}

.gph-header {
  min-height: 148px;
  padding: 30px 42px 24px !important;
  background: var(--codex-paper) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.gph-header-left,
.gph-header-date {
  color: var(--codex-muted) !important;
  font-family: var(--codex-sans) !important;
  font-size: 0.68rem !important;
  line-height: 1.65 !important;
}

.gph-logo-wrap {
  color: #111 !important;
}

.gph-logo-wordmark {
  color: #111 !important;
  font-family: var(--codex-serif) !important;
  font-size: clamp(2.45rem, 5vw, 3.7rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.065em !important;
  line-height: 0.9 !important;
}

.gph-logo-wordmark em {
  color: #111 !important;
  font-weight: 400 !important;
}

.gph-logo-sub {
  margin-top: 0.65rem !important;
  color: #777 !important;
  font-family: var(--codex-sans) !important;
  font-size: 0.57rem !important;
  letter-spacing: 0.15em !important;
}

.gph-nav {
  min-height: 42px;
  padding: 0 28px !important;
  background: var(--codex-paper) !important;
  border-top: 1px solid var(--codex-line) !important;
  border-bottom: 1px solid var(--codex-line) !important;
  box-shadow: none !important;
  overflow-x: auto;
  scrollbar-width: thin;
}

.gph-nav a {
  min-height: 41px;
  padding: 0 0.72rem !important;
  border: 0 !important;
  background: transparent !important;
  color: #363636 !important;
  font-family: var(--codex-sans) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase;
  white-space: nowrap;
}

.gph-nav a:hover,
.gph-nav a:focus-visible {
  color: var(--codex-accent) !important;
}

.gph-nav .nd {
  display: none !important;
}

/* Cartouche de l'article : le modèle privilégie le texte, sans image géante. */
.hero {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: var(--codex-paper) !important;
  border: 0 !important;
}

.hero::before,
.hero::after {
  display: none !important;
  content: none !important;
}

.hero > img {
  display: none !important;
}

.hc {
  position: static !important;
  inset: auto !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 68px 64px 30px !important;
}

.cat {
  display: block !important;
  width: auto !important;
  margin: 0 0 0.8rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #3f3f3f !important;
  font-family: var(--codex-sans) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.035em !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
}

.hero h1,
.hc h1,
h1 {
  max-width: 860px !important;
  margin: 0 !important;
  color: var(--cluster-title, var(--codex-accent)) !important;
  font-family: var(--codex-serif) !important;
  font-size: clamp(2.55rem, 5.8vw, 4.35rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
  line-height: 0.98 !important;
  text-shadow: none !important;
}

.hero h1 em,
.hc h1 em,
h1 em {
  color: inherit !important;
  font-weight: inherit !important;
}

.sub {
  max-width: 840px !important;
  margin: 1.45rem 0 0 !important;
  color: #222 !important;
  font-family: var(--codex-sans) !important;
  font-size: clamp(1.05rem, 2.1vw, 1.34rem) !important;
  font-weight: 400 !important;
  line-height: 1.52 !important;
}

.meta {
  padding: 0 64px 26px !important;
  background: var(--codex-paper) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.meta > div {
  max-width: 792px !important;
  margin: 0 auto !important;
  padding-top: 1rem;
  border-top: 1px solid var(--codex-line);
  color: var(--codex-muted) !important;
  font-family: var(--codex-sans) !important;
  font-size: 0.72rem !important;
  line-height: 1.5;
}

.meta strong {
  color: var(--codex-ink) !important;
}

/* Corps de lecture */
.layout {
  grid-template-columns: minmax(0, 1fr) 218px !important;
  gap: 42px !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 44px 64px 70px !important;
  background: var(--codex-paper) !important;
}

.body {
  min-width: 0;
}

/*
 * Image de couverture replacée sous le bloc auteur.
 * Elle appartient à la colonne de lecture et ne peut donc jamais dépasser
 * la largeur du corps de l'article.
 */
.article-cover {
  width: 100%;
  max-width: 100%;
  margin: 0 0 2rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--codex-soft);
}

.article-cover img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  filter: none !important;
}

.body p {
  margin: 0 0 0.8em !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--codex-ink) !important;
  font-family: var(--codex-text) !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.body :is(li, dd) {
  font-family: var(--codex-text) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

.body :is(p, li, dd) :is(strong, b) {
  color: #111216 !important;
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: -0.008em !important;
}

/* Suppression explicite de toute ligne entre deux paragraphes. */
.body p + p,
.body > p + p,
.body section p + p {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

.body > p:first-of-type::first-letter {
  float: none !important;
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
}

.kicker {
  display: block !important;
  margin: 2.8rem 0 0.25rem !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--codex-accent) !important;
  font-family: var(--codex-sans) !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.kicker::after {
  display: none !important;
  content: none !important;
}

.body h2,
h2 {
  margin: 0 0 1.05rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cluster-title, var(--codex-accent-dark)) !important;
  font-family: var(--codex-text) !important;
  font-size: clamp(1.65rem, 3vw, 2.05rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
}

.body h3 {
  margin: 1.8rem 0 0.55rem !important;
  color: var(--codex-ink) !important;
  font-family: var(--codex-text) !important;
  font-weight: 800 !important;
}

.chips {
  margin: 0 0 2rem !important;
  padding: 0.85rem 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--codex-line) !important;
  border-bottom: 1px solid var(--codex-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chips b {
  color: var(--codex-accent) !important;
}

.chips span {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--codex-muted) !important;
}

.chips span:not(:last-child)::after {
  margin-left: 0.45rem;
  color: #aaa;
  content: "·";
}

/* Éléments éditoriaux secondaires */
.pull,
.infobox,
.verdict,
.nextbox,
.related,
.faq,
.author,
.tl,
.card,
.sb {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.pull {
  margin: 2.5rem 0 !important;
  padding: 1.4rem 1.65rem !important;
  border: 0 !important;
  border-left: 5px solid var(--codex-accent) !important;
  background: var(--codex-soft) !important;
}

.pull p {
  margin: 0 !important;
  color: var(--codex-accent-dark) !important;
  font-size: 1.34rem !important;
  line-height: 1.55 !important;
}

.infobox,
.author {
  border: 0 !important;
  border-left: 4px solid var(--codex-accent) !important;
  background: var(--codex-soft) !important;
}

.infobox li {
  border-top-color: var(--codex-line) !important;
}

.cards {
  gap: 0.8rem !important;
}

.card {
  border: 1px solid var(--codex-line) !important;
  border-top: 3px solid var(--codex-accent) !important;
  background: #fff !important;
}

.card:hover {
  box-shadow: 0 7px 18px rgb(0 0 0 / 8%) !important;
}

.card span,
.sources a,
.tl b {
  color: var(--codex-accent) !important;
}

.table table,
.table tr:nth-child(even) td {
  background: #fff !important;
}

.table th {
  background: var(--codex-accent-dark) !important;
}

.table td {
  border-bottom-color: var(--codex-line) !important;
}

.timeline {
  border-left-color: var(--codex-accent) !important;
}

.verdict,
.nextbox,
.related,
.faq {
  border: 1px solid var(--codex-line) !important;
  background: #fff !important;
}

.vt,
.boxt,
.faqt {
  background: var(--codex-accent-dark) !important;
}

.fqi {
  border-bottom-color: var(--codex-line) !important;
}

.author img {
  border-color: var(--codex-accent) !important;
}

.role,
.site {
  color: var(--codex-accent) !important;
}

.sources {
  border-top-color: var(--codex-accent) !important;
}

/* Colonne latérale, discrète comme dans une maquette de presse. */
.side {
  top: 1rem !important;
}

.sb {
  border: 0 !important;
  border-top: 4px solid var(--codex-accent) !important;
  background: var(--codex-soft) !important;
}

.st {
  padding: 0.75rem 0.85rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--codex-line) !important;
  background: transparent !important;
  color: var(--codex-ink) !important;
}

.toc a {
  padding: 0.62rem 0.85rem !important;
  border-bottom-color: var(--codex-line) !important;
  color: #424242 !important;
  line-height: 1.35 !important;
}

.toc span {
  color: var(--codex-accent) !important;
}

.note {
  color: var(--codex-muted) !important;
}

/*
 * Articles associés (sidebar, sous le Sommaire).
 * Cartes texte sans image, effet de survol dans geopolo-card-effects.css
 * (barre rouge qui glisse, titre en couleur flamme au survol/focus).
 */
.related-list {
  display: block;
}

a.related-item {
  display: block;
  padding: 0.62rem 0.85rem;
  border-bottom: 1px solid var(--codex-line);
}

a.related-item:last-child {
  border-bottom: 0;
}

.related-tag {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--codex-muted);
  font-family: var(--codex-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.related-item-title {
  display: block;
  color: var(--codex-ink);
  font-family: var(--codex-text);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
}

footer {
  padding: 2rem 1.5rem !important;
  border-top: 1px solid var(--codex-line) !important;
  background: #f1f1f1 !important;
  color: #6b6b6b !important;
  font-family: var(--codex-sans) !important;
}

@media (max-width: 820px) {
  body {
    box-shadow: none;
  }

  .gph-header {
    min-height: 118px;
    padding: 26px 24px 20px !important;
  }

  .gph-header-left,
  .gph-header-date {
    display: none !important;
  }

  .gph-nav {
    padding: 0 12px !important;
  }

  .hc {
    padding: 48px 28px 24px !important;
  }

  .meta {
    padding: 0 28px 22px !important;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2.5rem !important;
    padding: 34px 28px 56px !important;
  }

  .side {
    position: static !important;
  }
}

@media (max-width: 520px) {
  .gph-topbar {
    display: none !important;
  }

  .gph-logo-wordmark {
    font-size: 2.65rem !important;
  }

  .hc {
    padding: 38px 20px 22px !important;
  }

  .hero h1,
  .hc h1,
  h1 {
    font-size: clamp(2.3rem, 13vw, 3.35rem) !important;
  }

  .meta {
    padding: 0 20px 18px !important;
  }

  .meta > div {
    gap: 0.45rem 0.8rem !important;
  }

  .layout {
    padding: 30px 20px 48px !important;
  }

  .body p {
    font-size: 1.1rem !important;
    line-height: 1.42 !important;
  }

  .cards {
    grid-template-columns: 1fr !important;
  }
}

@media print {
  html,
  body {
    background: #fff !important;
    box-shadow: none !important;
  }

  .gph-topbar,
  .gph-nav,
  .side {
    display: none !important;
  }

  .layout {
    display: block !important;
    max-width: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Encadré auteur unifié  ·  aligné sur articles/ .article-author
   (surcharge les *-pilier.css + les regles .author plus haut)
═══════════════════════════════════════════════════════════════ */
.author {
  width: 650px !important;
  max-width: 100% !important;
  margin: 3rem auto 2.4rem !important;
  padding: 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 1.1rem !important;
  background: #faf8f3 !important;
  border: 1px solid #e5e2da !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.author::before { display: none !important; }
.author img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  border: 0 !important;
  flex-shrink: 0 !important;
}
.author .name {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #7b5054 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}
.author .role {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #8a8a8a !important;
  margin: 0.15rem 0 0.5rem !important;
}
.author .bio {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  color: #555 !important;
  margin: 0 !important;
}
.author .links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin-top: 0.6rem !important;
}
.author .links a {
  margin: 0 1rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}
.author .links a.x,
.author .links a.site { color: #61373b !important; }
.author .links a:hover { text-decoration: underline !important; }
@media (max-width: 760px) {
  .author {
    flex-direction: column !important;
    text-align: center !important;
    padding: 1.5rem 1.3rem !important;
  }
}