/* ============================================================
   dvnc — thème Ghost FLTR · screen.css
   Standalone : tokens portés depuis le FLTR Design System.
   ============================================================ */

:root {
  /* Marque & piliers */
  --dvnc-navy: #0E3556;
  --dvnc-navy-light: #2A6A99;
  --dvnc-cyan: #179FCD;
  --dvnc-green: #51B58C;
  --dvnc-yellow: #F1C16F;
  --dvnc-coral: #DC3E55;

  /* Neutres */
  --ink: #1A1A1A;
  --gray-700: #374151;
  --gray-600: #6B7280;
  --gray-500: #6C757D;
  --gray-400: #9CA3AF;
  --gray-300: #D1D5DB;
  --gray-200: #E9ECEF;
  --gray-150: #E5E7EB;
  --gray-100: #F8F9FA;
  --white: #FFFFFF;

  /* Sémantique surfaces/texte */
  --text-strong: var(--ink);
  --text-body: var(--gray-700);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-400);
  --border-card: var(--gray-200);
  --border-hairline: var(--gray-150);

  /* Type — polices imposées par l'identité FLTR (Newsreader display + Helvetica corps).
     Volontairement NON liées à var(--gh-font-*) : le picker de police Ghost écraserait
     la signature serif. D'où le warning GScan GS051 (custom fonts), assumé. */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Échelle */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;

  --tracking-label: 0.08em;
  --leading-relaxed: 1.65;

  /* Espacement / formes */
  --container-max: 1120px;
  --measure: 800px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --bar-accent: 6px;

  --shadow-sm: 0 2px 8px rgba(14, 53, 86, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 28px rgba(14, 53, 86, 0.14);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-base: 0.2s;

  /* Défaut de pilier (surchargé par .pillar-*) */
  --pillar: var(--dvnc-navy);
  --pillar-ink: var(--dvnc-navy);
  --pillar-soft: rgba(14, 53, 86, 0.12);
}

/* ---- Coloration par pilier (slug du primary_tag) ---- */
.pillar-souverainete   { --pillar: var(--dvnc-navy);   --pillar-ink: var(--dvnc-navy);   --pillar-soft: rgba(14, 53, 86, 0.12); }
.pillar-imprevisibilite{ --pillar: var(--dvnc-green);  --pillar-ink: #2F8C65;            --pillar-soft: rgba(81, 181, 140, 0.16); }
.pillar-mobilite       { --pillar: var(--dvnc-yellow); --pillar-ink: #B07C1E;            --pillar-soft: rgba(241, 193, 111, 0.20); }
.pillar-factualite     { --pillar: var(--dvnc-cyan);   --pillar-ink: var(--dvnc-cyan);   --pillar-soft: rgba(23, 159, 205, 0.14); }
.pillar-solidarite     { --pillar: var(--dvnc-coral);  --pillar-ink: var(--dvnc-coral);  --pillar-soft: rgba(220, 62, 85, 0.12); }

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dvnc-navy); text-decoration: none; }
.wrap { max-width: var(--container-max); margin: 0 auto; padding-left: 28px; padding-right: 28px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; line-height: 1.12; }
.label {
  font-family: var(--font-sans); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-faint);
}

/* ============================================================
   Cinq points signature
   ============================================================ */
.dots { display: inline-flex; gap: 9px; vertical-align: middle; }
.dots span { width: 12px; height: 12px; border-radius: 50%; }
.dots .d1 { background: var(--dvnc-navy); }
.dots .d2 { background: var(--dvnc-green); }
.dots .d3 { background: var(--dvnc-yellow); }
.dots .d4 { background: var(--dvnc-cyan); }
.dots .d5 { background: var(--dvnc-coral); }

/* ============================================================
   En-tête
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border-hairline);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; padding-top: 16px; padding-bottom: 16px; }
.site-header__logo img { height: 40px; width: auto; }
.site-nav { display: flex; gap: 4px; margin-left: 4px; flex-wrap: wrap; }
.site-nav a {
  padding: 8px 14px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500; color: var(--gray-500);
  transition: color var(--dur-base) var(--ease-out);
}
.site-nav a:hover, .site-nav a.active { color: var(--dvnc-navy); }
.site-header__cta { margin-left: auto; }

/* ============================================================
   Boutons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 700; font-size: var(--text-base);
  line-height: 1; padding: 11px 22px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: filter var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform 0.15s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--dvnc-navy); color: var(--white); border-color: var(--dvnc-navy); }
.btn--primary:hover { filter: brightness(0.92); }
.btn--secondary { background: var(--white); color: var(--dvnc-navy); border-color: var(--gray-200); }
.btn--secondary:hover { border-color: var(--dvnc-navy); }
.btn--cta { background: var(--dvnc-cyan); color: var(--white); border-color: var(--dvnc-cyan); }
.btn--cta:hover { filter: brightness(0.92); }
.btn--sm { padding: 8px 16px; font-size: var(--text-sm); }
.btn--lg { padding: 15px 30px; font-size: var(--text-md); }

/* ============================================================
   Pills piliers
   ============================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 700; line-height: 1.2; white-space: nowrap;
  background: var(--pillar-soft); color: var(--pillar-ink);
}
.pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pillar); }
.pill--nodot::before { display: none; }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding-top: 72px; padding-bottom: 40px; }
.hero__baseline { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hero h1 {
  font-size: clamp(38px, 5.2vw, 64px); line-height: 1.06; letter-spacing: -0.025em;
  margin: 0 0 24px; max-width: none; text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--dvnc-navy); }
.hero__lead {
  font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-body);
  margin: 0 0 32px; max-width: 58ch;
}
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================
   Bande des piliers
   ============================================================ */
.pillar-strip { padding-top: 8px; padding-bottom: 56px; }
.pillar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pillar-card {
  display: block; color: inherit; text-decoration: none;
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--border-card); border-radius: var(--radius-lg);
  padding: 20px 18px; transition: box-shadow var(--dur-base), transform var(--dur-base);
}
.pillar-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.pillar-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--pillar); }
.pillar-card__dot { width: 30px; height: 30px; border-radius: 50%; background: var(--pillar); margin-bottom: 14px; }
.pillar-card h3 { font-size: var(--text-md); margin: 0 0 6px; }
.pillar-card p { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.3; margin: 0; }

/* ============================================================
   Section + grille d'articles
   ============================================================ */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-bottom: 22px;
}
.section-head h2 { font-size: var(--text-2xl); margin: 0; }
.section-head .hint { font-size: var(--text-sm); color: var(--text-muted); }

.feed { padding-bottom: 64px; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* Galerie d'affiches : carte = image d'illustration seule + invite au clic */
.article-card {
  display: block; position: relative; color: inherit;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.article-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.article-card__cover {
  aspect-ratio: 4 / 5; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--dvnc-navy) 0%, var(--pillar) 145%);
}
.article-card__cover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.55s var(--ease-out);
}
.article-card:hover .article-card__cover img { transform: scale(1.045); }
/* voile dégradé au survol */
.article-card__cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(14, 53, 86, 0.55) 0%, rgba(14, 53, 86, 0) 42%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.article-card:hover .article-card__cover::after { opacity: 1; }
/* invite « Lire l'article » */
.article-card__cue {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 7px 15px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.96); color: var(--dvnc-navy);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 700; line-height: 1;
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.article-card:hover .article-card__cue { opacity: 1; transform: translateY(0); }
/* repli sans affiche : titre posé sur le dégradé du pilier */
.article-card__fallback {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end;
  padding: 20px; color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.15;
}

/* ============================================================
   Newsletter (formulaire membres Ghost)
   ============================================================ */
.newsletter { padding-bottom: 72px; }
.newsletter__inner {
  background: var(--dvnc-navy); border-radius: var(--radius-xl); padding: 56px 48px; color: var(--white);
}
.newsletter--light .newsletter__inner { background: var(--gray-100); border: 1px solid var(--gray-200); color: var(--ink); }
.newsletter__baseline { display: flex; align-items: center; gap: 12px; }
.newsletter__baseline .label { color: rgba(255, 255, 255, 0.6); }
.newsletter--light .newsletter__baseline .label { color: var(--text-faint); }
.newsletter h2 { color: var(--white); font-size: var(--text-2xl); margin: 16px 0 14px; max-width: 20ch; }
.newsletter h2 em { font-style: italic; color: var(--dvnc-cyan); }
.newsletter--light h2 { color: var(--ink); }
.newsletter--light h2 em { color: var(--dvnc-navy); }
.newsletter__lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: rgba(255, 255, 255, 0.78); margin: 0 0 28px; max-width: 56ch; }
.newsletter--light .newsletter__lead { color: var(--text-body); }
.newsletter__form { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; max-width: 560px; }
.newsletter__form input {
  flex: 1 1 240px; padding: 13px 16px; font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--ink); background: var(--white); border: 1px solid transparent; border-radius: var(--radius-lg); outline: none;
}
.newsletter__form input:focus { box-shadow: 0 0 0 3px rgba(23, 159, 205, 0.4); }
.newsletter__success { display: none; font-size: var(--text-md); color: rgba(255, 255, 255, 0.9); }
.newsletter__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ============================================================
   Article (post)
   ============================================================ */
.post-hero { padding-top: 40px; }
.post-hero__inner { max-width: var(--measure); margin: 0 auto; }
.post-hero__cover {
  aspect-ratio: 4 / 5; max-width: 480px; margin: 0 0 28px;
  border-radius: var(--radius-xl); overflow: hidden;
  background: linear-gradient(135deg, var(--dvnc-navy) 0%, var(--pillar) 150%);
}
.post-hero__cover img { width: 100%; height: 100%; object-fit: cover; }
.post-meta { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; }
.post-meta__date { font-size: var(--text-xs); color: var(--text-faint); }
.post-title { font-size: clamp(34px, 4.5vw, 56px); line-height: 1.08; margin: 0 0 18px; max-width: 22ch; }
.post-standfirst { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--text-muted); line-height: 1.4; margin: 0 0 32px; max-width: var(--measure); }

.post-content { max-width: var(--container-max); margin: 0 auto; }
.post-content > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
/* Koenig : images/cartes larges et pleine largeur sortent de la colonne de lecture */
.post-content > .kg-width-wide { max-width: 920px; }
.post-content > .kg-width-full { max-width: 100%; }
.post-content > .kg-width-full img { border-radius: var(--radius-xl); width: 100%; }
.post-content p, .post-content ul, .post-content ol { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-body); margin: 0 auto 24px; }
.post-content h2 { font-size: 1.8rem; margin: 44px auto 16px; }
.post-content h3 { font-size: 1.4rem; margin: 36px auto 12px; }
.post-content a { color: var(--dvnc-navy); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--pillar); }
.post-content blockquote {
  margin: 0 auto 28px; padding: 4px 0 4px 24px; border-left: var(--bar-accent) solid var(--pillar);
  font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--ink);
}
.post-content img, .post-content .kg-card { border-radius: var(--radius-lg); }
.post-content > img, .post-content > figure, .post-content > .kg-card { margin: 8px auto 28px; }
.post-content figcaption { font-size: var(--text-sm); color: var(--text-faint); text-align: center; margin-top: 8px; }
.post-author { display: flex; align-items: center; gap: 14px; margin: 40px auto; padding-top: 28px; border-top: 1px solid var(--border-hairline); }
.post-author img, .post-author .avatar { margin: 0; }
.post-author img, .post-author .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--dvnc-navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.post-author__name { font-weight: 700; color: var(--ink); }
.post-author__bio { font-size: var(--text-sm); color: var(--text-muted); }

/* ============================================================
   Pied de page
   ============================================================ */
.site-footer { background: var(--white); color: var(--text-muted); margin-top: 24px; border-top: 1px solid var(--border-hairline); }
.site-footer__inner { padding-top: 56px; padding-bottom: 40px; }
.site-footer__top { display: flex; flex-wrap: wrap; gap: 28px 40px; justify-content: space-between; align-items: center; }
.site-footer__brand { max-width: 360px; }
.site-footer__brand img { height: 104px; width: auto; margin-left: 0; }
.site-footer__brand .copy { display: block; margin-top: 16px; font-size: var(--text-xs); color: var(--text-faint); }
.site-footer__brand p { font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-top: 4px; color: var(--text-muted); }
.site-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.site-footer__social a { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.site-footer__social a:hover { color: var(--dvnc-navy); }

/* ============================================================
   Pagination
   ============================================================ */
.pagination { display: flex; justify-content: center; gap: 12px; padding-bottom: 64px; }
.pagination a, .pagination span { font-size: var(--text-sm); color: var(--text-muted); padding: 10px 18px; border: 1px solid var(--gray-200); border-radius: var(--radius-pill); }
.pagination a:hover { border-color: var(--dvnc-navy); color: var(--dvnc-navy); }

/* ============================================================
   Erreur
   ============================================================ */
.error { padding: 120px 0; text-align: center; }
.error__code { font-family: var(--font-display); font-size: 96px; color: var(--dvnc-navy); margin: 0; }
.error__msg { font-size: var(--text-lg); color: var(--text-muted); margin: 12px 0 28px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .article-grid { grid-template-columns: 1fr 1fr; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .site-nav { display: none; }
  .newsletter__inner { padding: 36px 24px; }
}
@media (max-width: 600px) {
  .article-grid { grid-template-columns: 1fr; }
  .pillar-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}