/* Homme Mode — « Wagon-lit Paris–Kyiv »
   Prata (titres) / Commissioner (corps) / Martian Mono (billets, métadonnées, tableaux) */

:root {
  --c-nuit: #18202E;
  --c-nuit-2: #232D3F;
  --c-linge: #F1F1EE;
  --c-encre: #1C1F24;
  --c-laiton: #B08A3E;
  --c-laiton-clair: #D2B06A; /* laiton lisible sur fond nuit */
  --c-acajou: #6B3A2A;
  --c-velours: #2F4A44;
  --c-voile: #DDE1E4;
  --c-encre-douce: #4A5059;

  --ff-titre: 'Prata', 'Didot', 'Bodoni MT', Georgia, serif;
  --ff-corps: 'Commissioner', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --measure-article: 840px;
  --measure-text: 68ch;
  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --space-section: clamp(4rem, 9vw, 7.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--c-linge);
  color: var(--c-encre);
  font-family: var(--ff-corps);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
}

/* Images : reset anti-distorsion */
img { max-width: 100%; height: auto; display: block; }
.img-hero, .img-card, .img-body, .img-interview { overflow: hidden; background: var(--c-voile); }
.img-hero--169 { aspect-ratio: 16 / 9; }
.img-hero--32, .img-card, .img-body { aspect-ratio: 3 / 2; }
.img-interview { aspect-ratio: 1 / 1; }
.img-hero img, .img-card img, .img-body img, .img-interview img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.img-placeholder { width: 100%; height: 100%; background: linear-gradient(160deg, var(--c-voile), #cfd5da); }
.img-placeholder--nuit { background: linear-gradient(160deg, var(--c-nuit-2), var(--c-nuit)); }

a { color: var(--c-velours); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--c-acajou); }
:focus-visible { outline: 2px solid var(--c-laiton); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--c-nuit); color: var(--c-linge); padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: 0; }

h1, h2, h3, h4 { font-family: var(--ff-titre); font-weight: 400; line-height: 1.18; color: var(--c-encre); margin: 0; letter-spacing: -0.005em; }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.muted { color: var(--c-encre-douce); }

/* Filet laiton double */
.rule-double { height: 7px; border-top: 1px solid var(--c-laiton); border-bottom: 1px solid var(--c-laiton); }
.rule-double--dark { width: 100%; }

/* Kicker « billet de train » */
.ticket {
  display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1.25rem;
  font-family: var(--ff-mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; line-height: 1.3;
  color: var(--c-nuit);
}
.ticket__stub { width: 1.6rem; height: 0; border-top: 1px dashed currentColor; flex: none; }
.ticket--dark { color: var(--c-laiton-clair); }

/* ---------- En-tête ---------- */
.site-header { background: var(--c-nuit); color: var(--c-linge); border-bottom: 1px solid var(--c-laiton); position: sticky; top: 0; z-index: 50; }
.site-header__inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--c-linge); }
.brand:hover { color: var(--c-linge); }
.brand__mark { width: 34px; height: 34px; }
.brand__name { font-family: var(--ff-titre); font-size: 1.35rem; letter-spacing: .01em; }
.site-nav ul { display: flex; gap: clamp(1rem, 2vw, 1.9rem); list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--c-linge); text-decoration: none; font-size: .95rem; font-weight: 500; padding: .4rem 0; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--c-laiton-clair); border-bottom-color: var(--c-laiton); }
.nav-toggle { display: none; background: none; border: 1px solid rgba(241,241,238,.35); border-radius: 2px; width: 2.75rem; height: 2.75rem; padding: 0; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--c-linge); }

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--c-nuit); border-bottom: 1px solid var(--c-laiton); padding: .5rem var(--gutter) 1.25rem; }
  .nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: .85rem 0; border-bottom: 1px solid rgba(241,241,238,.12); font-size: 1.05rem; }
}

/* ---------- Boutons ---------- */
.btn { display: inline-block; font-family: var(--ff-corps); font-weight: 600; font-size: .98rem; padding: .85rem 1.5rem; background: var(--c-nuit); color: var(--c-linge); border: 1px solid var(--c-nuit); border-radius: 2px; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: var(--c-acajou); border-color: var(--c-acajou); color: var(--c-linge); }
.btn--brass { background: var(--c-laiton-clair); border-color: var(--c-laiton-clair); color: var(--c-nuit); }
.btn--brass:hover { background: var(--c-linge); border-color: var(--c-linge); color: var(--c-nuit); }
.btn:disabled { opacity: .6; cursor: wait; }

/* ---------- Homepage ---------- */
.home-hero { background: var(--c-nuit); }
.home-hero__media { max-height: 78vh; width: 100%; }
.home-hero__band { background: var(--c-nuit); color: var(--c-linge); border-top: 1px solid var(--c-laiton); }
.home-hero__inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0; display: grid; gap: 1rem; }
.home-hero__inner h1 { color: var(--c-linge); font-size: clamp(2.1rem, 5.2vw, 4rem); max-width: 18ch; }
.home-hero__lead { max-width: 56ch; margin: .25rem 0 1rem; font-size: 1.15rem; color: #D6DADF; }
.home-hero__inner .btn { justify-self: start; }

.section { padding-block: var(--space-section); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .75rem; }
.section-head p { margin: 0; color: var(--c-encre-douce); font-size: 1.1rem; }
.section-more { margin-top: 2.5rem; font-weight: 600; }
.empty { color: var(--c-encre-douce); font-style: italic; }

/* Situations : liste éditoriale numérotée (les 7 pages sont une suite de situations) */
.situations { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-voile); }
.situation { border-bottom: 1px solid var(--c-voile); }
.situation a { display: grid; grid-template-columns: clamp(3.5rem, 8vw, 6rem) 1fr; align-items: baseline; gap: 1rem; padding: clamp(1.4rem, 2.6vw, 2.1rem) 0; text-decoration: none; color: var(--c-encre); transition: background .2s, padding-left .25s; }
.situation a:hover { background: #E8E9E6; padding-left: .75rem; color: var(--c-encre); }
.situation__n { font-family: var(--ff-titre); font-size: clamp(2rem, 4.4vw, 3.2rem); color: var(--c-laiton); line-height: 1; }
.situation__txt { display: grid; gap: .3rem; max-width: 52rem; }
.situation__title { font-family: var(--ff-titre); font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.2; }
.situation__desc { color: var(--c-encre-douce); }
.situation a:hover .situation__title { color: var(--c-acajou); }

/* Bloc L'homme à l'Est */
.est { background: var(--c-nuit); color: var(--c-linge); padding-block: var(--space-section); border-top: 1px solid var(--c-laiton); border-bottom: 1px solid var(--c-laiton); }
.est__inner { display: grid; gap: 1.1rem; }
.est__inner > * { max-width: 52rem; }
.est h2 { color: var(--c-linge); font-size: clamp(2rem, 4.4vw, 3.2rem); }
.est p:not(.ticket) { margin: 0; color: #D6DADF; font-size: 1.12rem; }
.est .btn { justify-self: start; margin-top: .5rem; }

/* ---------- Cartes ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: clamp(2rem, 3.4vw, 3rem) clamp(1.5rem, 2.6vw, 2.25rem); }
.card[hidden] { display: none; }
.card__link { display: block; text-decoration: none; color: var(--c-encre); }
.card__link:hover { color: var(--c-encre); }
.card .img-card { margin-bottom: 1.1rem; }
.card__link:hover .card__title { color: var(--c-acajou); }
.card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: 0 0 .6rem; font-family: var(--ff-mono); font-size: .72rem; color: var(--c-encre-douce); }
.badge { display: inline-block; background: var(--c-acajou); color: #fff; font-family: var(--ff-mono); font-size: .68rem; font-weight: 500; letter-spacing: .04em; padding: .22rem .55rem; border-radius: 2px; }
.badge--on-dark { background: var(--c-acajou); }
.card__title { font-size: 1.4rem; margin-bottom: .5rem; transition: color .2s; }
.card__text { margin: 0; color: var(--c-encre-douce); font-size: .98rem; line-height: 1.6; }

.category-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.category-filter button { font-family: var(--ff-corps); font-size: .92rem; font-weight: 500; background: transparent; color: var(--c-encre); border: 1px solid var(--c-encre-douce); border-radius: 2px; padding: .5rem 1rem; cursor: pointer; }
.category-filter button:hover { border-color: var(--c-acajou); color: var(--c-acajou); }
.category-filter button.active { background: var(--c-nuit); color: var(--c-linge); border-color: var(--c-nuit); }

/* ---------- Pages et articles ---------- */
.article-head { background: var(--c-nuit); color: var(--c-linge); border-bottom: 1px solid var(--c-laiton); }
.article-head__inner { width: min(100% - 2 * var(--gutter), var(--measure-article)); margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.25rem, 5vw, 3.5rem); }
.article-head h1 { color: var(--c-linge); font-size: clamp(2rem, 4.6vw, 3.4rem); }
.article-head__meta { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0 0; font-family: var(--ff-mono); font-size: .75rem; color: #C3C9D1; }
.crumbs { font-size: .85rem; color: #AEB6C1; margin-bottom: 1.5rem; }
.crumbs a { color: #D6DADF; }
.crumbs a:hover { color: var(--c-laiton-clair); }

.article-hero { margin: 0; background: var(--c-nuit); }
.article-hero .img-hero { max-width: 1200px; margin-inline: auto; }
.article-hero figcaption { max-width: 1200px; margin: 0 auto; padding: .75rem var(--gutter); font-size: .85rem; color: #C3C9D1; background: var(--c-nuit); }

.article-wrap { width: min(100% - 2 * var(--gutter), var(--measure-article)); margin-inline: auto; padding-block: clamp(2.5rem, 5vw, 4rem) var(--space-section); }
.article-summary { font-family: var(--ff-titre); font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.5; color: var(--c-encre); margin: 0 0 2.25rem; padding-bottom: 2rem; border-bottom: 1px solid var(--c-laiton); }

.article-sommaire { background: var(--c-voile); border-left: 3px solid var(--c-velours); padding: 1.4rem 1.6rem; margin: 0 0 2.75rem; }
.article-sommaire__titre { font-family: var(--ff-mono); font-size: .75rem; font-weight: 500; margin: 0 0 .75rem; color: var(--c-velours); letter-spacing: .05em; }
.article-sommaire ol { margin: 0; padding-left: 1.3rem; }
.article-sommaire li { padding: .15rem 0; }
.article-sommaire li::before { display: none; }

/* Corps de texte */
.prose { max-width: var(--measure-article); }
.prose > p, .prose li { max-width: var(--measure-text); }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); margin: 3.25rem 0 1.1rem; padding-top: 2rem; border-top: 1px solid var(--c-laiton); position: relative; }
.prose h2::before { content: ''; position: absolute; left: 0; top: 4px; width: 100%; height: 0; border-top: 1px solid var(--c-laiton); }
.prose h3 { font-size: 1.35rem; margin: 2.25rem 0 .75rem; }
.prose p { margin: 0 0 1.25rem; }
.prose strong { font-weight: 600; }
.prose a { font-weight: 500; }

.article--pilier .prose > p:first-of-type::first-letter {
  font-family: var(--ff-titre); float: left; font-size: 4.6rem; line-height: .8; padding: .35rem .6rem 0 0; color: var(--c-nuit);
}

/* Listes : puces losange laiton */
.prose ul, .site-footer ul, .related ul { list-style: none; padding-left: 0; }
.prose ul { margin: 0 0 1.5rem; }
.prose ul li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; }
.prose ul li::before, .related li::before { content: ''; position: absolute; left: .25rem; top: .72em; width: .42rem; height: .42rem; background: var(--c-laiton); transform: rotate(45deg); }
/* Listes ordonnées : chiffres laiton */
.prose ol { list-style: none; counter-reset: etape; padding: 0; margin: 0 0 1.75rem; }
.prose ol li { counter-increment: etape; position: relative; padding-left: 3.1rem; margin-bottom: 1rem; }
.prose ol li::before { content: counter(etape); position: absolute; left: 0; top: -.15rem; font-family: var(--ff-titre); font-size: 1.9rem; line-height: 1.2; color: var(--c-laiton); }
.article-sommaire ol { list-style: decimal; counter-reset: none; }
.article-sommaire ol li { counter-increment: none; padding-left: .3rem; }
.article-sommaire ol li::before { content: none; }

/* Tableaux d'horaires */
.prose table { width: 100%; border-collapse: collapse; margin: 2rem 0 2.25rem; font-size: .95rem; background: var(--c-linge); }
.prose thead th { background: var(--c-nuit); color: var(--c-linge); font-family: var(--ff-mono); font-size: .72rem; font-weight: 500; letter-spacing: .05em; text-align: left; padding: .85rem 1rem; border-bottom: 2px solid var(--c-laiton); }
.prose td { padding: .8rem 1rem; vertical-align: top; border-bottom: 1px solid var(--c-voile); }
.prose tbody tr:nth-child(even) td { background: var(--c-voile); }
@media (max-width: 700px) { .prose table { display: block; overflow-x: auto; } }

/* Icônes Font Awesome dans le texte (CODEX V6 §16.2bis) */
.prose i.fa-solid, .prose i.fa-regular { color: var(--c-acajou); margin-right: .45em; font-size: .9em; }
.prose h2 i.fa-solid, .prose h2 i.fa-regular, .prose h3 i.fa-solid, .prose h3 i.fa-regular { color: var(--c-laiton); }

/* Figures, citations */
.prose figure { margin: 2.5rem 0; }
.prose figcaption { font-size: .88rem; color: var(--c-encre-douce); padding-top: .6rem; border-top: 1px solid var(--c-voile); margin-top: .6rem; }
.prose blockquote { margin: 2.25rem 0; padding: .25rem 0 .25rem 1.6rem; border-left: 3px solid var(--c-laiton); font-family: var(--ff-titre); font-size: 1.3rem; line-height: 1.5; font-style: italic; color: var(--c-encre); }
.prose blockquote p { margin: 0; }

/* Encadré « Ce qu'elle remarque » */
.elle-remarque { background: var(--c-velours); color: var(--c-linge); margin: 2.75rem 0; padding: 1.9rem clamp(1.4rem, 3vw, 2.25rem); border-top: 3px double var(--c-laiton-clair); }
.elle-remarque__titre { font-family: var(--ff-mono); font-size: .75rem; font-weight: 500; letter-spacing: .06em; color: var(--c-laiton-clair); margin: 0 0 .9rem; }
.elle-remarque__corps, .elle-remarque__corps p { font-family: var(--ff-titre); font-style: italic; font-size: 1.3rem; line-height: 1.55; margin: 0; color: var(--c-linge); }
.elle-remarque a { color: #fff; }

/* FAQ */
.faq { margin-top: 3.5rem; }
.faq h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); margin-bottom: 1.25rem; padding-top: 2rem; border-top: 1px solid var(--c-laiton); }
.faq__item { border-bottom: 1px solid var(--c-voile); }
.faq__item summary { cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; font-weight: 600; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; position: absolute; right: .25rem; top: .9rem; font-family: var(--ff-titre); font-size: 1.5rem; color: var(--c-acajou); }
.faq__item[open] summary::after { content: '\2212'; }
.faq__item p { margin: 0 0 1.25rem; max-width: var(--measure-text); }

/* Pour aller plus loin */
.related { margin-top: 3.5rem; padding: 1.75rem 1.9rem; background: var(--c-voile); border-top: 3px double var(--c-laiton); }
.related__titre { font-family: var(--ff-mono); font-size: .75rem; font-weight: 500; letter-spacing: .05em; margin: 0 0 1rem; color: var(--c-nuit); }
.related ul { margin: 0; }
.related li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; }

/* Formulaire */
.contact-form { max-width: 34rem; display: grid; gap: 1.25rem; margin-top: 2rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .92rem; }
.field input, .field select, .field textarea { width: 100%; padding: .8rem 1rem; font: inherit; color: var(--c-encre); background: #fff; border: 1px solid #aab1b8; border-radius: 2px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--c-laiton); outline-offset: 1px; border-color: var(--c-laiton); }
.hp { position: absolute; left: -9999px; }
#contact-status { margin: 0; min-height: 1.5em; }
#contact-status.ok { color: var(--c-velours); font-weight: 600; }
#contact-status.ko { color: #9b2c2c; font-weight: 600; }
.contact-form .btn { justify-self: start; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--c-nuit); color: #D6DADF; margin-top: 0; }
.site-footer__inner { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
.site-footer__title { font-family: var(--ff-titre); font-size: 1.6rem; color: var(--c-linge); margin: 0 0 .5rem; }
.site-footer__tag { margin: 0; max-width: 26ch; }
.site-footer__head { font-family: var(--ff-mono); font-size: .72rem; font-weight: 500; letter-spacing: .05em; color: var(--c-laiton-clair); margin: 0 0 1rem; }
.site-footer ul { margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: #D6DADF; text-decoration: none; }
.site-footer a:hover { color: var(--c-laiton-clair); text-decoration: underline; }
.site-footer__legal { margin: 0; padding: 1.25rem var(--gutter); border-top: 1px solid rgba(241,241,238,.14); text-align: center; font-size: .85rem; color: #AEB6C1; }
@media (max-width: 760px) { .site-footer__inner { grid-template-columns: 1fr; gap: 2rem; } }

@media (max-width: 600px) {
  body { font-size: 1.02rem; }
  .article--pilier .prose > p:first-of-type::first-letter { font-size: 3.8rem; }
}

[hidden] { display: none !important; }

/* Hero accueil : sur grand écran, titre posé à gauche sur dégradé nuit (sujet dans le tiers droit) */
@media (min-width: 900px) {
  .home-hero { position: relative; }
  .home-hero__media { position: relative; max-height: none; }
  .home-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,32,46,.92) 0%, rgba(24,32,46,.7) 30%, rgba(24,32,46,0) 62%); pointer-events: none; }
  .home-hero__band { position: absolute; inset: 0; background: transparent; border-top: 0; display: flex; align-items: center; }
  .home-hero__inner { padding: 2rem 0; }
  .home-hero__inner > * { max-width: min(100%, 31rem); }
  .home-hero__inner h1 { font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
  .home-hero__lead { font-size: 1.05rem; }
}

/* Interviews (CODEX V6 §2.4 et §14) : sélecteurs directs, sans ancêtre, avec overrides !important */
.interview-expert-card { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; margin: 2rem 0 2.5rem; padding: 1.25rem 1.4rem; background: var(--c-voile); border-top: 3px solid var(--c-laiton); }
.interview-expert-card img { width: 96px; height: 96px; object-fit: cover; object-position: center top; border-radius: 50%; }
.interview-expert-card__nom { margin: 0; font-family: var(--ff-titre); font-size: 1.25rem; color: var(--c-encre); }
.interview-expert-card__fonction { margin: .15rem 0 .5rem; font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--c-acajou); }
.interview-expert-card__bio { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--c-encre-douce); }
blockquote.journalist-question,
blockquote.expert-answer,
blockquote.journalist-question p,
blockquote.expert-answer p {
  font-family: var(--ff-corps) !important;
  font-style: normal !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}
blockquote.journalist-question::before, blockquote.expert-answer::before { content: none !important; display: none !important; }
blockquote.journalist-question { margin: 1.75rem 0 .75rem !important; padding: .9rem 1.2rem !important; border-left: 3px solid var(--c-velours) !important; background: #E8ECEA; color: var(--c-encre); font-weight: 500; }
blockquote.expert-answer { margin: 0 0 1.75rem !important; padding: .25rem 0 .25rem 1.2rem !important; border-left: 3px solid var(--c-laiton) !important; color: var(--c-encre); }
blockquote.expert-answer p + p { margin-top: 1rem !important; }
@media (max-width: 560px) { .interview-expert-card { grid-template-columns: 1fr; } }

/* Racines de blocs : rendu explicite (ancrage des composants) */
.article { display: block; background: var(--c-linge); }
.card__body { display: block; }
.site-footer__brand { max-width: 28rem; }