/* ============================================================
   Les Aventures de Cécé — Design System « Cinématique »
   Direction : immersif plein écran, photo-first, mouvement orchestré
   ============================================================ */

/* Polices chargées via <link preconnect> dans header.php */

/* ════════════════════════════════════════════════════════════
   TOKENS
════════════════════════════════════════════════════════════ */
:root {
  /* — Palette cinématique — */
  --ink:        #080b11;   /* near-black, chrome + overlays */
  --ink-2:      #0d1220;   /* surfaces sombres secondaires */
  --night:      #0d1b2a;   /* bleu profond de marque */
  --deep:       #16283f;   /* bleu intermédiaire */
  --sand:       #d8a960;   /* or chaud — accent signature */
  --sand-soft:  #e6c68a;   /* or clair (dégradés) */
  --cream:      #f6f2ea;   /* blanc chaud */
  --paper:      #fdfbf7;   /* fond clair pages */
  --mist:       #9aa7b4;   /* gris froid (texte sur sombre) */
  --stone:      #6b6255;   /* gris chaud (texte sur clair) */
  --line:       rgba(255,255,255,0.10);
  --line-dark:  rgba(10,15,25,0.10);

  /* Compat anciens noms (transition douce) */
  --color-night: var(--night);
  --color-sand:  var(--sand);
  --color-white: #ffffff;
  --color-cream: var(--paper);
  --color-text:  #1a2230;
  --color-muted: var(--stone);
  --color-ocean: var(--deep);

  /* — Typographie — */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  /* Échelle fluide cinématique */
  --step--1: clamp(0.80rem, 0.76rem + 0.2vw, 0.9rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.6rem);
  --step-4:  clamp(2.8rem, 2rem + 4vw, 5.5rem);
  --step-5:  clamp(3.4rem, 2rem + 7vw, 9rem);

  /* — Espacements — */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1rem;
  --space-md:  1.75rem;
  --space-lg:  3rem;
  --space-xl:  5.5rem;
  --space-2xl: 9rem;

  /* — Rayons — */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  28px;
  --radius-full: 9999px;

  /* — Ombres cinématiques — */
  --shadow-sm:  0 2px 12px rgba(8,11,17,0.10);
  --shadow-md:  0 16px 48px rgba(8,11,17,0.18);
  --shadow-lg:  0 40px 90px rgba(8,11,17,0.32);
  --shadow-gold: 0 12px 40px rgba(216,169,96,0.35);

  /* — Transitions — */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:    0.25s var(--ease-out);
  --t-normal:  0.45s var(--ease-out);
  --t-slow:    0.8s var(--ease-out);

  --container:  1240px;
  --container-wide: 1600px;
}

/* ════════════════════════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Les animations [data-reveal="left|right"] utilisent translateX(±48px)
     avant leur apparition : ce transform élargit le scrollWidth du document
     même sans débordement visuel. overflow-x:hidden doit être sur <html>
     (pas seulement <body>) sinon les navigateurs mobiles élargissent leur
     viewport en conséquence et poussent le menu burger hors écran. */
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: #1a2230;
  background: var(--paper);
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { font-family: inherit; }
::selection { background: var(--sand); color: var(--ink); }

/* ════════════════════════════════════════════════════════════
   TYPOGRAPHIE
════════════════════════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--night);
  font-optical-sizing: auto;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { margin-bottom: var(--space-sm); }

/* Kicker mono — eyebrow signature */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}
.kicker::before {
  content: '';
  width: 2.2em; height: 1px;
  background: var(--sand);
  opacity: 0.6;
}
.kicker--center { justify-content: center; }

/* ════════════════════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════════════════════ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-md);
}
.container--narrow { max-width: 760px; }
.container--wide   { max-width: var(--container-wide); }

.section { padding: var(--space-xl) 0; }
.section--dark { background: var(--ink); color: var(--cream); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--cream); }

/* ════════════════════════════════════════════════════════════
   NAVBAR — chrome minimal, transparent → solide
════════════════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  padding: var(--space-sm) 0;
  transition: background var(--t-normal), padding var(--t-normal), box-shadow var(--t-normal);
}
.navbar.scrolled {
  background: rgba(8,11,17,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: 0.6rem 0;
  box-shadow: 0 1px 0 var(--line);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.navbar__logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  transition: opacity var(--t-fast);
}
.navbar__logo span { color: var(--sand); font-style: italic; }
.navbar__logo:hover { opacity: 0.75; }

.navbar__links { display: flex; align-items: center; gap: var(--space-md); }
.navbar__link {
  color: rgba(255,255,255,0.82);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
  transition: color var(--t-fast);
}
.navbar__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1.5px;
  background: var(--sand);
  transition: width var(--t-normal);
}
.navbar__link:hover,
.navbar__link.active { color: #fff; }
.navbar__link:hover::after,
.navbar__link.active::after { width: 100%; }

.lang-switcher { display: flex; gap: 4px; align-items: center; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  color: rgba(255,255,255,0.75);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast);
}
.lang-btn__flag { font-size: 0.95em; line-height: 1; }

/* Icônes drapeaux auto-hébergées (assets/vendor/flag-icons) — remplacent
   les emoji Unicode dont le rendu n'est pas garanti sur toutes les
   plateformes. Largeur/hauteur en `em` : la taille suit le font-size du
   contexte (ex. .lang-btn__flag, .country-explorer__flag ci-dessous). */
.flag-icon {
  display: inline-block;
  width: 1.3em;
  height: 1em;
  object-fit: cover;
  border-radius: 2px;
  vertical-align: -0.15em;
}
.flag-icon--lg { width: 1.95rem; height: 1.5rem; }
.lang-btn:hover, .lang-btn.active {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--ink);
}

.navbar__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
}
.navbar__burger span {
  width: 26px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.navbar__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__burger.open span:nth-child(2) { opacity: 0; }
.navbar__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════════════════════════
   HERO CINÉMATIQUE — plein écran, Ken Burns, révélation
════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100dvh;
  /* Réserve un espace sous la navbar fixe (z-index 1000) : sans cette
     marge, le titre — aligné en bas via flex-end — peut venir toucher
     ou passer sous la navbar quand le contenu est haut par rapport à
     la hauteur de fenêtre (min-height est un plancher, pas un plafond :
     ce padding pousse .hero à grandir plutôt que de laisser le
     contenu déborder par le haut). */
  padding-top: clamp(5.5rem, 14vh, 8rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
  animation: kenburns 22s var(--ease-io) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.08) translate(0, 0); }
  to   { transform: scale(1.18) translate(-2%, -2%); }
}
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(8,11,17,0.22), rgba(8,11,17,0.22)),
    linear-gradient(to top, var(--ink) 2%, rgba(8,11,17,0.45) 45%, rgba(8,11,17,0.68) 100%),
    linear-gradient(to right, rgba(8,11,17,0.6) 0%, transparent 55%);
}
.hero__content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding-bottom: clamp(4rem, 12vh, 9rem);
  max-width: 900px;
}
.hero__title {
  font-size: var(--step-5);
  font-weight: 400;
  line-height: 0.98;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}
.hero__title em { font-style: italic; color: var(--sand); }
.hero__subtitle {
  font-size: var(--step-1);
  color: rgba(255,255,255,0.82);
  font-weight: 300;
  max-width: 40ch;
  margin-bottom: var(--space-md);
}
.hero__quote {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-md);
  max-width: 46ch;
}
.hero__actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

.hero__scroll {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.75em;
  color: rgba(255,255,255,0.7);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: '';
  width: 1px; height: 48px;
  background: linear-gradient(var(--sand), transparent);
  animation: scrollpulse 2s var(--ease-io) infinite;
}
@keyframes scrollpulse {
  0%, 100% { transform: scaleY(0.5); opacity: 0.4; transform-origin: top; }
  50%      { transform: scaleY(1);   opacity: 1;   transform-origin: top; }
}

/* Hero secondaire (pages internes) */
.page-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--night);
}
.page-hero__media { position: absolute; inset: 0; z-index: 0; }
.page-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55; will-change: transform;
}
.page-hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink) 5%, rgba(8,11,17,0.3) 70%);
}
.page-hero__content {
  position: relative; z-index: 2;
  color: #fff;
  padding-bottom: var(--space-lg);
}
.page-hero__title {
  font-size: var(--step-4);
  color: #fff;
  font-weight: 400;
  margin-top: var(--space-sm);
}

/* ════════════════════════════════════════════════════════════
   BOUTONS
════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn--primary {
  background: var(--sand);
  color: var(--ink);
  box-shadow: var(--shadow-gold);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 18px 50px rgba(216,169,96,0.5); }
.btn--outline {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
}
.btn--outline:hover { background: rgba(255,255,255,0.14); border-color: #fff; transform: translateY(-3px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--night); transform: translateY(-3px); }
.btn--ghost { background: transparent; color: var(--night); border: 1px solid var(--line-dark); }
.btn--ghost:hover { background: var(--night); color: #fff; border-color: var(--night); }

/* ════════════════════════════════════════════════════════════
   SECTION HEADERS
════════════════════════════════════════════════════════════ */
.section-header { margin-bottom: var(--space-lg); max-width: 720px; }
.section-header--center { margin-inline: auto; text-align: center; }
.section-header__eyebrow { margin-bottom: var(--space-sm); }
.section-header__title { font-size: var(--step-3); margin-bottom: var(--space-sm); }
.section-header__lead { font-size: var(--step-1); color: var(--stone); font-weight: 300; }
.section--dark .section-header__lead { color: var(--mist); }

/* ════════════════════════════════════════════════════════════
   CARTES ARTICLES — grille (listes)
════════════════════════════════════════════════════════════ */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--space-md);
}
.article-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: flex-end;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
  box-shadow: var(--shadow-sm);
}
.article-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.article-card__img-wrap { position: absolute; inset: 0; overflow: hidden; }
.article-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.article-card:hover .article-card__img { transform: scale(1.07); }
.article-card__img-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,11,17,0.92) 0%, rgba(8,11,17,0.15) 55%, transparent 100%);
}
.article-card__tags {
  position: absolute; top: var(--space-sm); left: var(--space-sm);
  display: flex; gap: var(--space-2xs); flex-wrap: wrap; z-index: 2;
}
.tag {
  background: rgba(8,11,17,0.55);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.14);
}
.tag--country { background: rgba(216,169,96,0.85); color: var(--ink); }
.article-card__body { position: relative; z-index: 2; padding: var(--space-md); color: #fff; }
.article-card__date {
  display: inline-flex;
  align-items: center;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-xs);
  box-shadow: var(--shadow-sm);
}
.article-card__title {
  font-size: var(--step-1);
  color: #fff;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: var(--space-2xs);
}
.article-card__excerpt {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--t-normal), opacity var(--t-normal), margin var(--t-normal);
}
.article-card:hover .article-card__excerpt { max-height: 4rem; opacity: 1; margin-top: var(--space-2xs); }

/* ════════════════════════════════════════════════════════════
   STATS
════════════════════════════════════════════════════════════ */
.stats-strip { background: var(--ink); padding: var(--space-xl) 0; color: #fff; }
.stats-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.stat { text-align: center; position: relative; }
.stat + .stat::before {
  content: ''; position: absolute; left: calc(var(--space-md) / -2); top: 20%;
  height: 60%; width: 1px; background: var(--line);
}
.stat__number {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 400;
  color: var(--sand);
  line-height: 1;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mist);
  margin-top: var(--space-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════
   CARTE (Leaflet preview)
════════════════════════════════════════════════════════════ */
.map-preview {
  height: 560px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}

/* ════════════════════════════════════════════════════════════
   GALERIE — mosaïque masonry
════════════════════════════════════════════════════════════ */
.gallery-grid { columns: 4 170px; gap: var(--space-xs); }
.gallery-item {
  break-inside: avoid;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.gallery-item img { width: 100%; height: auto; display: block; transition: transform var(--t-slow); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,11,17,0.85) 0%, transparent 55%);
  opacity: 0;
  transition: opacity var(--t-normal);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-md);
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }
.gallery-item__caption { color: #fff; font-size: 0.88rem; font-style: italic; }
.gallery-item__country {
  font-family: var(--font-mono);
  color: var(--sand); font-size: 0.72rem;
  letter-spacing: 0.05em; margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════
   LIGHTBOX
════════════════════════════════════════════════════════════ */
.lightbox {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(8,11,17,0.97);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-normal);
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox img {
  max-width: 92vw; max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  transform: scale(0.96);
  transition: transform var(--t-normal);
}
.lightbox.open img { transform: scale(1); }
.lightbox__close {
  position: absolute; top: var(--space-md); right: var(--space-md);
  color: #fff; font-size: 1.8rem; cursor: pointer;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  width: 48px; height: 48px; border-radius: 50%;
  line-height: 1; transition: background var(--t-fast), transform var(--t-fast);
}
.lightbox__close:hover { background: rgba(255,255,255,0.2); transform: rotate(90deg); }

/* ════════════════════════════════════════════════════════════
   DIAPORAMA (bloc inséré dans le texte d'un article, via l'admin)
   Une seule photo visible à la fois, navigation par flèches.
════════════════════════════════════════════════════════════ */
.article-slideshow {
  position:      relative;
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin:        var(--space-lg) 0;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  background:    var(--ink);
  box-shadow:    var(--shadow-md);
  /* Pas de ratio fixe : le cadre épouse la taille réelle de la photo
     affichée (jamais recadrée) — seule sa hauteur est plafonnée pour
     éviter qu'une photo très haute ne domine toute la page. */
}
.article-slideshow img {
  display:    none;
  width:      100%;
  height:     auto;
  max-height: 80vh;
}
.article-slideshow img.is-active { display: block; }
.article-slideshow__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,11,17,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background var(--t-fast), transform var(--t-fast);
  z-index: 2;
}
@supports not (backdrop-filter: blur(8px)) {
  .article-slideshow__nav { background: rgba(8,11,17,0.85); }
}
.article-slideshow__nav:hover { background: rgba(8,11,17,0.82); transform: translateY(-50%) scale(1.08); }
.article-slideshow__nav--prev { left:  var(--space-sm); }
.article-slideshow__nav--next { right: var(--space-sm); }
.article-slideshow__counter {
  position: absolute; bottom: var(--space-sm); right: var(--space-sm);
  z-index: 2;
  background: rgba(8,11,17,0.6);
  color: #fff;
  font-family: var(--font-mono); font-size: 0.72rem;
  padding: 3px 11px; border-radius: var(--radius-full);
}

/* ════════════════════════════════════════════════════════════
   PAGINATION & FILTRES
════════════════════════════════════════════════════════════ */
.filter-bar {
  display: flex; gap: var(--space-xs); flex-wrap: wrap;
  justify-content: center; margin-bottom: var(--space-lg);
}
.filter-btn {
  background: transparent;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-full);
  padding: 0.5rem 1.15rem;
  font-size: 0.82rem; font-weight: 500;
  cursor: pointer; color: var(--stone);
  text-decoration: none;
  transition: all var(--t-fast);
  display: inline-flex; align-items: center; gap: 0.4em;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--night); border-color: var(--night); color: #fff;
}
.pagination { display: flex; justify-content: center; gap: var(--space-xs); margin-top: var(--space-xl); }
.page-btn {
  min-width: 44px; height: 44px; padding: 0 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--line-dark);
  background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--night);
  transition: all var(--t-fast);
}
.page-btn.active, .page-btn:hover { background: var(--night); border-color: var(--night); color: #fff; }

/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
.footer { background: var(--ink); color: var(--mist); padding: var(--space-xl) 0 var(--space-md); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.footer__brand { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; color: #fff; margin-bottom: var(--space-sm); }
.footer__brand span { color: var(--sand); font-style: italic; }
.footer__desc { font-size: 0.92rem; max-width: 38ch; }
.footer__heading {
  font-family: var(--font-mono);
  color: #fff; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--space-sm);
}
.footer__links { display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer__link { font-size: 0.92rem; transition: color var(--t-fast); display: inline-flex; align-items: center; gap: 0.5em; }
.footer__link:hover { color: var(--sand); }
.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: var(--space-md);
  display: flex; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 0.72rem; color: rgba(255,255,255,0.4);
}
.footer__bottom-right { display: flex; align-items: center; gap: var(--space-md); }
.footer__legal-link { color: rgba(255,255,255,0.4); text-decoration: underline; text-underline-offset: 2px; transition: color var(--t-fast); }
.footer__legal-link:hover { color: var(--sand); }
.footer__admin-btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-full);
  padding: 0.35rem 0.85rem;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.footer__admin-btn:hover {
  color: var(--sand); border-color: var(--sand); background: rgba(216,169,96,0.08);
}

/* ════════════════════════════════════════════════════════════
   ARTICLE (page individuelle)
════════════════════════════════════════════════════════════ */
/* Mise en page « presse » : la colonne reste à une largeur de lecture
   confortable (720px), mais citations, images et diaporamas s'étendent
   sur un cadre plus large (960px) pour occuper l'espace au lieu de
   laisser de grandes marges vides sur desktop. Sur mobile, les deux
   largeurs collent au viewport donc tout revient naturellement en une
   seule colonne — pas de media query nécessaire. */
.article-body {
  max-width: 960px; margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  font-size: var(--step-1); line-height: 1.8; color: #26303f;
  hyphens: auto;
}
.article-body > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.article-body > * + * { margin-top: var(--space-md); }
.article-body h2, .article-body h3 { margin-top: var(--space-lg); }

/* Lettrine sur le premier paragraphe — signature éditoriale */
.article-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.4em;
  font-weight: 600;
  line-height: 0.72;
  float: left;
  margin: 0.04em 0.09em 0 0;
  color: var(--sand);
}

/* Images et diaporama : sortent de la colonne de texte, comme dans un
   article de presse — mais une simple image au fil du texte (avec
   d'autres mots sur la même ligne) reste dans la colonne. */
.article-body > blockquote,
.article-body > .article-slideshow,
.article-body > figure,
.article-body > p:has(> img:only-child) {
  max-width: 100%;
}
.article-body img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-md); margin: var(--space-md) auto; box-shadow: var(--shadow-md);
}
.article-body blockquote {
  position: relative;
  padding: var(--space-sm) var(--space-lg);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic; font-size: var(--step-3);
  color: var(--night); line-height: 1.3;
}
.article-body blockquote::before {
  content: '"';
  display: block;
  font-family: var(--font-display);
  font-style: normal; font-weight: 600;
  font-size: 3em; line-height: 1;
  color: var(--sand);
  margin-bottom: 0.1em;
}
.article-body a { color: var(--deep); text-decoration: underline; text-decoration-color: var(--sand); text-underline-offset: 3px; }

.countries-chips { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-sm); }
.country-chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--night); color: #fff;
  padding: 0.5rem 1.1rem; border-radius: var(--radius-full);
  font-size: 0.85rem; transition: background var(--t-fast), transform var(--t-fast);
  cursor: pointer;
}
.country-chip:hover { background: var(--deep); transform: translateY(-2px); }

/* Menu déroulant — explorateur de pays visités */
.country-explorer { margin-top: var(--space-lg); }
.country-explorer__trigger {
  display: inline-flex; align-items: center; gap: 0.6em;
  list-style: none; cursor: pointer; user-select: none;
  background: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-full);
  padding: 0.65rem 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--night);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.country-explorer__trigger::-webkit-details-marker { display: none; }
.country-explorer__trigger:hover { background: #fff; border-color: var(--sand); }
.country-explorer__trigger:focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; }
.country-explorer__chevron { transition: transform var(--t-fast); margin-left: 0.2em; }
.country-explorer[open] .country-explorer__chevron { transform: rotate(180deg); }

.country-explorer__panel {
  margin-top: var(--space-sm);
  background: #fff;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-md);
  max-width: min(560px, calc(100vw - 2 * var(--space-md)));
  animation: explorerOpen 0.25s var(--ease-out);
}
@keyframes explorerOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.country-explorer__label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone);
  margin-bottom: var(--space-sm);
}
/* Liste en pastilles horizontales (wrap) plutôt qu'une colonne haute —
   le panneau reste large et court au lieu de s'étirer verticalement. */
.country-explorer__list {
  list-style: none; margin: 0; padding: 0;
  max-height: 220px; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.country-explorer__item {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.4rem 0.75rem; border-radius: var(--radius-full);
  border: 1px solid var(--line-dark);
  background: var(--paper);
  color: var(--night); font-size: 0.82rem;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  cursor: pointer;
}
.country-explorer__item:hover { background: #fff; border-color: var(--sand); }
.country-explorer__item.is-current { background: var(--night); border-color: var(--night); color: #fff; }
.country-explorer__flag { font-size: 1.05rem; line-height: 1; }
.country-explorer__name { flex: none; }
.country-explorer__count {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--stone);
  background: var(--paper); border-radius: var(--radius-full);
  padding: 0.1rem 0.42rem; min-width: 1.4em; text-align: center;
}
.country-explorer__item.is-current .country-explorer__count { background: rgba(255,255,255,0.2); color: #fff; }

/* Ligne de filtres (pays + date) côte à côte — jamais l'un sous l'autre.
   Chaque pastille peut rétrécir (et son libellé s'ellipser) plutôt que
   de faire déborder ou wrapper la ligne sur mobile. */
.filters-row {
  display: flex; flex-wrap: nowrap; gap: var(--space-sm);
  margin: var(--space-lg) 0 var(--space-xl);
}
.filters-row .country-explorer { margin-top: 0; min-width: 0; flex: 0 1 auto; position: relative; }
.filters-row .country-explorer__trigger { max-width: 100%; min-width: 0; }
.filters-row .country-explorer__trigger > svg { flex-shrink: 0; }
.filters-row .country-explorer__trigger > span:not([class]) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Filtre date — réutilise le style de .country-explorer, complété ici */
.date-explorer__panel { max-width: min(480px, calc(100vw - 2 * var(--space-md))); }
.date-explorer__divider {
  display: flex; align-items: center; gap: var(--space-sm);
  margin: var(--space-md) 0;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist);
}
.date-explorer__divider::before, .date-explorer__divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line-dark);
}
.date-explorer__range {
  display: flex; align-items: center; gap: var(--space-2xs);
  flex-wrap: wrap;
}
.date-explorer__input {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-size: 0.82rem;
  color: var(--night);
  background: var(--paper);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.6rem;
}
.date-explorer__input:focus { outline: none; border-color: var(--sand); }
.date-explorer__arrow { color: var(--stone); font-size: 0.85rem; flex-shrink: 0; }
.date-explorer__apply {
  width: 100%; margin-top: var(--space-sm);
  background: var(--night); color: #fff;
  border: none; border-radius: var(--radius-full);
  padding: 0.6rem 1rem;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-fast);
}
.date-explorer__apply:hover { background: var(--deep); }

/* ════════════════════════════════════════════════════════════
   MOTION — reveals au scroll
════════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Révélation par masque (hero title) — animation CSS pure (déclenchée au
   rendu, pas via une classe JS) : le titre reste toujours lisible même si
   le JS échoue à charger/s'exécuter (bloqueur de script, erreur, etc.). */
.reveal-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }
.reveal-mask > span {
  display: inline-block;
  animation: revealMaskIn 1s var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes revealMaskIn {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   ACCESSIBILITÉ
════════════════════════════════════════════════════════════ */
:focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; border-radius: var(--radius-sm); }
.skip-link {
  position: absolute; top: -60px; left: 0;
  padding: 10px 18px; background: var(--sand); color: var(--ink);
  font-weight: 700; z-index: 9999; transition: top var(--t-fast);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { top: 0; }

.not-found {
  min-height: 90vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-xl) var(--space-md);
  background: var(--ink); color: #fff;
}
.not-found__code {
  font-family: var(--font-display); font-size: var(--step-5);
  color: var(--sand); line-height: 1; margin-bottom: var(--space-sm);
}
.not-found h1 { color: #fff; margin-bottom: var(--space-sm); }
.not-found p { color: var(--mist); margin-bottom: var(--space-md); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .stats-strip__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg) var(--space-md); }
  .stat:nth-child(3)::before { display: none; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-md); }
}
@media (max-width: 768px) {
  .navbar__burger { display: flex; position: relative; z-index: 2001; }

  /* Menu plein écran mobile — fond opaque garanti en base (certains
     WebView in-app, ex. navigateurs intégrés de réseaux sociaux, ne
     compositent pas backdrop-filter correctement et laissaient
     transparaître la page en dessous). Le flou n'est qu'une amélioration
     progressive ajoutée séparément via @supports, jamais porteur de
     l'opacité elle-même. */
  .navbar__links {
    position: fixed;
    inset: 0;
    z-index: 2000;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    background: var(--night);
    padding: calc(var(--space-xl) + env(safe-area-inset-top, 0px)) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--t-normal);
  }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .navbar__links {
      background: rgba(8,11,17,0.97);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
    }
  }
  .navbar__links.open { transform: translateX(0); }

  .navbar__link {
    font-size: 1.4rem;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--t-normal), transform var(--t-normal);
  }
  .navbar__links.open .navbar__link {
    opacity: 1;
    transform: none;
  }
  .navbar__link:nth-child(1) { transition-delay: 0.04s; }
  .navbar__link:nth-child(2) { transition-delay: 0.08s; }
  .navbar__link:nth-child(3) { transition-delay: 0.12s; }
  .navbar__link:nth-child(4) { transition-delay: 0.16s; }
  .navbar__link:nth-child(5) { transition-delay: 0.20s; }
  .navbar__link:nth-child(6) { transition-delay: 0.24s; }
  .navbar__link:last-of-type { border-bottom: none; }

  .lang-switcher {
    margin-top: var(--space-lg);
    justify-content: center;
    opacity: 0;
    transition: opacity var(--t-normal) 0.28s;
  }
  .navbar__links.open .lang-switcher { opacity: 1; }

  .stat + .stat::before { display: none; }
  .hero__scroll { display: none; }

  /* Hero : l'alignement éditorial asymétrique (tout à gauche) perd son
     effet sur un écran étroit — le bloc lit comme collé au bord plutôt
     que composé. On centre l'ensemble (kicker + titre + texte + boutons)
     en un bloc cohérent ; le desktop garde l'alignement asymétrique. */
  .hero__content { text-align: center; }
  .hero__subtitle, .hero__quote { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__media img { animation: none; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-mask > span { transform: none !important; }
}