/* affiliate-base-v3 — variant V3-E : editorial magazine navy/coral premium
   Sites empire utilisant V3-E : Reference Sites Canal 5 backlinks (refonte Q3 2026
   productivity-lab-fr cobaye + data-shield-mag + audiophile-lab + interieurs-magazine
   + carry-on-edit + 9 autres sites planifiés).

   Source : brief brain-dir-design S104 (D:/@empire/audits/s104_backlinks_design_p273.md)
   Rule p273 : 12 features design premium MANDATORY pre-marketplaces submit
   (RankRebel/Whitepress/GoldenWord/Getfluence).

   Anti-footprint : palette + fonts + composants uniques vs V3-A (navy/green executive),
   V3-B (amber/violet), V3-C (teal/pink), V3-D (rouge/bleu IAD).

   Inspirations : Les Echos Week-End / Society / L'ADN / The Atlantic / FT Weekend.
   Stack image : Pexels CC0 + Adobe Stock retouché + Datawrapper inline (anti-Bourelly-splop). */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,900&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================================
   Variables — palette editorial premium
   ============================================================================ */
body.variant-v3e {
  /* Palette primaire */
  --color-primary: #1A1A2E;          /* navy profond editorial */
  --color-accent: #E94560;           /* coral signature unique empire */
  --color-accent-hover: #C73650;
  --color-surface: #FAFAF7;          /* off-white papier */
  --color-surface-2: #F5F5EE;        /* texture papier subtile */
  --color-dark: #0F0F1E;             /* dark mode sections */
  --color-text: #1A1A2E;
  --color-text-light: #FAFAF7;
  --color-muted: #6B6B7B;
  --color-border: #E5E5DE;
  --color-card-bg: #FFFFFF;
  --color-quote-bg: #F5F5EE;

  /* Datavis colors (FT-like) */
  --datavis-primary: #1A1A2E;
  --datavis-secondary: #E94560;
  --datavis-tertiary: #4A6FA5;
  --datavis-quaternary: #8B7355;
  --datavis-grid: rgba(26,26,46,0.08);
  --datavis-axis: rgba(26,26,46,0.25);

  /* Typography editorial */
  --font-heading: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  /* Spacing reading (max-width 720px per feature F9) */
  --reading-max-width: 720px;
  --reading-line-height: 1.75;
  --reading-paragraph-spacing: 1.5em;
}

/* ============================================================================
   Reading column — max-width 720px (rule p273 F9)
   ============================================================================ */
body.variant-v3e .article-content,
body.variant-v3e .single-post-content,
body.variant-v3e .entry-content,
body.variant-v3e article.entry .content {
  max-width: var(--reading-max-width);
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-body);
  font-size: 1.0625rem;          /* 17px */
  line-height: var(--reading-line-height);
  color: var(--color-text);
}

body.variant-v3e .article-content p {
  margin-bottom: var(--reading-paragraph-spacing);
}

/* ============================================================================
   Drop-cap on first paragraph (rule p273 F8)
   ============================================================================ */
body.variant-v3e .article-content > p:first-of-type::first-letter,
body.variant-v3e .single-post-content > p:first-of-type::first-letter,
body.variant-v3e .entry-content > p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.12em 0 0;
  color: var(--color-accent);
}

/* ============================================================================
   Typography Fraunces serif premium (rule p273 F2)
   ============================================================================ */
body.variant-v3e h1,
body.variant-v3e h2,
body.variant-v3e h3,
body.variant-v3e h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  /* S105 fix : color NE force PAS h3/h4 (laisse theme natif gérer cards bg-light vs bg-dark) */
}

/* S105 fix Julien feedback : color forcé UNIQUEMENT sur h1+h2 (titles principaux hero/section)
   pas sur h3/h4 qui sont dans les cards (peuvent être sur fond light dans site dark) */
body.variant-v3e h1,
body.variant-v3e h2 {
  color: var(--color-primary);
}

body.variant-v3e h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 900;
  font-variation-settings: 'opsz' 144;
  margin: 1rem 0 1.5rem;
}

body.variant-v3e h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  font-weight: 600;
  font-variation-settings: 'opsz' 96;
  margin: 2.5rem 0 1rem;
}

body.variant-v3e h2::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-accent);
  margin-bottom: 0.875rem;
}

body.variant-v3e h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 500;
  font-style: italic;
  font-variation-settings: 'opsz' 72;
  margin: 1.75rem 0 0.75rem;
}

body.variant-v3e .article-meta,
body.variant-v3e .post-date,
body.variant-v3e .reading-time {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ============================================================================
   Hero impactant (rule p273 F1)
   ============================================================================ */
body.variant-v3e .hero {
  background: var(--color-surface);
  padding: clamp(3rem, 6vw, 5rem) 0;
  border-bottom: 1px solid var(--color-border);
}

body.variant-v3e .hero-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  max-width: 920px;
}

body.variant-v3e .hero-subtitle {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  color: var(--color-muted);
  max-width: 720px;
  margin-top: 1.25rem;
}

body.variant-v3e .hero-cta {
  background: var(--color-accent);
  color: var(--color-text-light);
  padding: 0.875rem 2rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 0;
  text-decoration: none;
  display: inline-block;
  margin-top: 2rem;
  transition: background 0.2s;
}

body.variant-v3e .hero-cta:hover {
  background: var(--color-accent-hover);
}

/* ============================================================================
   Datavis inline charts FT-style (rule p273 F3)
   ============================================================================ */
body.variant-v3e .datavis,
body.variant-v3e figure.chart {
  background: var(--color-surface-2);
  border-left: 4px solid var(--color-accent);
  padding: 1.5rem 1.75rem;
  margin: 2.5rem 0;
  font-family: var(--font-body);
}

body.variant-v3e .datavis-title,
body.variant-v3e figure.chart .chart-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

body.variant-v3e .datavis-subtitle,
body.variant-v3e figure.chart .chart-subtitle {
  font-size: 0.8125rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
}

body.variant-v3e .datavis-source,
body.variant-v3e figure.chart figcaption {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-muted);
  margin-top: 0.875rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.5rem;
}

/* ============================================================================
   Pull-quote editorial
   ============================================================================ */
body.variant-v3e blockquote.pullquote {
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.35;
  color: var(--color-primary);
  border-left: 3px solid var(--color-accent);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 2.5rem 0;
}

body.variant-v3e blockquote.pullquote cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ============================================================================
   Media mentions strip (rule p273 F6 — logos SVG)
   ============================================================================ */
body.variant-v3e .media-mentions {
  background: var(--color-surface-2);
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

body.variant-v3e .media-mentions-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
  margin-bottom: 1.25rem;
}

body.variant-v3e .media-mentions-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  filter: grayscale(100%) opacity(0.55);
  transition: filter 0.2s;
}

body.variant-v3e .media-mentions-grid:hover {
  filter: grayscale(0%) opacity(1);
}

body.variant-v3e .media-mentions-grid img,
body.variant-v3e .media-mentions-grid svg {
  height: 28px;
  width: auto;
}

/* ============================================================================
   Newsletter dark section (rule p273 F7)
   ============================================================================ */
body.variant-v3e .newsletter,
body.variant-v3e .newsletter-section {
  background: var(--color-dark);
  color: var(--color-text-light);
  padding: clamp(3rem, 5vw, 4.5rem) 0;
  margin: 3.5rem 0;
}

body.variant-v3e .newsletter h2 {
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

body.variant-v3e .newsletter h2::before {
  background: var(--color-accent);
}

body.variant-v3e .newsletter p {
  color: rgba(250,250,247,0.75);
  font-family: var(--font-body);
  font-size: 1rem;
  max-width: 560px;
}

body.variant-v3e .newsletter-form {
  display: flex;
  gap: 0.5rem;
  max-width: 480px;
  margin-top: 1.5rem;
}

body.variant-v3e .newsletter-form input[type="email"] {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--color-text-light);
  padding: 0.875rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

body.variant-v3e .newsletter-form input[type="email"]::placeholder {
  color: rgba(250,250,247,0.4);
}

body.variant-v3e .newsletter-form button {
  background: var(--color-accent);
  color: var(--color-text-light);
  border: 0;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

body.variant-v3e .newsletter-form button:hover {
  background: var(--color-accent-hover);
}

/* ============================================================================
   Author rail E-E-A-T (rule p273 F11)
   ============================================================================ */
body.variant-v3e .author-rail,
body.variant-v3e .author-bio-block {
  background: var(--color-surface-2);
  border-left: 4px solid var(--color-accent);
  padding: 2rem 2.25rem;
  margin: 3rem 0;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.5rem;
  align-items: start;
}

body.variant-v3e .author-rail img,
body.variant-v3e .author-bio-block .author-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-card-bg);
}

body.variant-v3e .author-rail .author-name,
body.variant-v3e .author-bio-block .author-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--color-primary);
}

body.variant-v3e .author-rail .author-title,
body.variant-v3e .author-bio-block .author-title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-top: 0.125rem;
}

body.variant-v3e .author-rail .author-bio,
body.variant-v3e .author-bio-block .author-bio {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
  margin-top: 0.5rem;
}

body.variant-v3e .author-rail .author-sameAs {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

body.variant-v3e .author-rail .author-sameAs a {
  font-size: 0.8125rem;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* ============================================================================
   Archive grid magazine layout (rule p273 F10)
   ============================================================================ */
body.variant-v3e .archive-grid,
body.variant-v3e .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2.5rem 1.75rem;
  padding: 2.5rem 0;
}

body.variant-v3e .archive-card,
body.variant-v3e .blog-grid article {
  background: var(--color-card-bg);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.75rem;
}

body.variant-v3e .archive-card img,
body.variant-v3e .blog-grid article .featured-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  margin-bottom: 1.25rem;
}

body.variant-v3e .archive-card .category,
body.variant-v3e .blog-grid article .category {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

body.variant-v3e .archive-card h3,
body.variant-v3e .blog-grid article h2,
body.variant-v3e .blog-grid article h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.625rem;
}

body.variant-v3e .archive-card h3::before,
body.variant-v3e .blog-grid article h2::before {
  display: none;
}

body.variant-v3e .archive-card h3 a,
body.variant-v3e .blog-grid article h2 a {
  color: var(--color-primary);
  text-decoration: none;
}

body.variant-v3e .archive-card h3 a:hover,
body.variant-v3e .blog-grid article h2 a:hover {
  color: var(--color-accent);
}

body.variant-v3e .archive-card .excerpt,
body.variant-v3e .blog-grid article .excerpt {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-muted);
}

/* ============================================================================
   Footer dark 4 cols (rule p273 F12)
   ============================================================================ */
body.variant-v3e .site-footer {
  background: var(--color-dark);
  color: rgba(250,250,247,0.75);
  padding: 3.5rem 0 2rem;
  margin-top: 4rem;
}

body.variant-v3e .site-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (max-width: 768px) {
  body.variant-v3e .site-footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

body.variant-v3e .site-footer h4 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 1rem;
}

body.variant-v3e .site-footer h4::before {
  display: none;
}

body.variant-v3e .site-footer .footer-brand {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.625rem;
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
}

body.variant-v3e .site-footer .footer-tagline {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.9375rem;
  color: rgba(250,250,247,0.55);
  margin-bottom: 1.25rem;
  max-width: 320px;
}

body.variant-v3e .site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.variant-v3e .site-footer li {
  margin-bottom: 0.5rem;
}

body.variant-v3e .site-footer a {
  color: rgba(250,250,247,0.75);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s;
}

body.variant-v3e .site-footer a:hover {
  color: var(--color-accent);
}

body.variant-v3e .site-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 0.8125rem;
  color: rgba(250,250,247,0.45);
}

/* ============================================================================
   Trust badge V3-E specific (overide affiliate base)
   ============================================================================ */
body.variant-v3e .trust-badge {
  background: var(--color-surface-2);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
}

body.variant-v3e .trust-badge::before {
  background: var(--color-accent);
}

/* ============================================================================
   Stats block (numbers + label)
   ============================================================================ */
body.variant-v3e .stats-block {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 3rem 0;
}

body.variant-v3e .stats-block .stat {
  text-align: left;
}

body.variant-v3e .stats-block .stat-value {
  font-family: var(--font-heading);
  font-weight: 900;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.03em;
}

body.variant-v3e .stats-block .stat-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

/* ============================================================================
   Responsive tweaks
   ============================================================================ */
@media (max-width: 640px) {
  body.variant-v3e .article-content > p:first-of-type::first-letter,
  body.variant-v3e .single-post-content > p:first-of-type::first-letter,
  body.variant-v3e .entry-content > p:first-of-type::first-letter {
    font-size: 3.5em;
  }

  body.variant-v3e .author-rail,
  body.variant-v3e .author-bio-block {
    grid-template-columns: 1fr;
    text-align: center;
  }

  body.variant-v3e .author-rail img,
  body.variant-v3e .author-bio-block .author-photo {
    margin: 0 auto;
  }

  body.variant-v3e .newsletter-form {
    flex-direction: column;
  }
}

/* ============================================================================
   Print styles
   ============================================================================ */
@media print {
  body.variant-v3e .newsletter,
  body.variant-v3e .site-footer,
  body.variant-v3e .hero-cta {
    display: none;
  }

  body.variant-v3e .article-content {
    max-width: 100%;
    font-size: 11pt;
  }
}

/* ============================================================================
   S105 v0.2.0 — Variant DARK mode adaptive
   Activable via body class `variant-v3e-dark` (ajoutée par mu-plugin selon
   empire_site_config.css_variant_mode = "dark"). Préserve l'identité dark des
   themes natifs (ai-tools-edge, audiophile-lab, crypto-frontline, b2b-edge,
   smb-advisor-fr) tout en bénéficiant des features V3-E (Fraunces serif,
   drop-cap, datavis containers, pull-quote, newsletter dark, author rail).
   ============================================================================ */
body.variant-v3e.variant-v3e-dark {
  --color-primary: #FAFAF7;          /* text light pour bg dark */
  --color-text: #FAFAF7;
  --color-text-light: #FAFAF7;
  --color-surface: transparent;       /* laisse le theme natif définir le bg */
  --color-surface-2: rgba(250,250,247,0.04);
  --color-muted: #9B9BAA;
  --color-border: rgba(250,250,247,0.12);
  --color-card-bg: rgba(250,250,247,0.04);
  --color-quote-bg: rgba(250,250,247,0.04);
  --datavis-primary: #FAFAF7;
  --datavis-grid: rgba(250,250,247,0.08);
  --datavis-axis: rgba(250,250,247,0.25);
  /* Coral preserved : --color-accent E94560 visible sur light ET dark */
}

/* Drop-cap coral preserved en dark (excellent contraste) */
body.variant-v3e.variant-v3e-dark .article-content > p:first-of-type::first-letter,
body.variant-v3e.variant-v3e-dark .single-post-content > p:first-of-type::first-letter,
body.variant-v3e.variant-v3e-dark .entry-content > p:first-of-type::first-letter {
  color: var(--color-accent);
}

/* Datavis container dark : carte dark subtile vs bg theme */
body.variant-v3e.variant-v3e-dark .datavis {
  background: rgba(250,250,247,0.03);
  border: 1px solid rgba(250,250,247,0.08);
}

/* Pull-quote dark : barre coral preserved + bg subtil */
body.variant-v3e.variant-v3e-dark .pullquote {
  background: rgba(233,69,96,0.06);
  border-left-color: var(--color-accent);
  color: var(--color-text-light);
}

/* Author rail dark : adapte border + bg */
body.variant-v3e.variant-v3e-dark .author-rail {
  background: rgba(250,250,247,0.04);
  border-color: rgba(250,250,247,0.08);
}

/* Media mentions dark : logos grayscale inversé visible */
body.variant-v3e.variant-v3e-dark .media-mentions img {
  filter: grayscale(100%) brightness(2.5) opacity(0.6);
}