/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY — Système unifié pages internes + contenu Gutenberg
═══════════════════════════════════════════════════════════ */

/* ─── 1. Tokens ─────────────────────────────────────────── */
:root {
  /* Tailles fluides */
  --lr-h1: clamp(1.6rem, 3vw, 2.6rem);
  --lr-h2: clamp(1.35rem, 2.1vw, 1.85rem);
  --lr-h3: clamp(1.1rem, 1.5vw, 1.35rem);
  --lr-h4: 1rem;
  --lr-body: 1rem;
  --lr-lead: clamp(1rem, 1.2vw, 1.15rem);
  --lr-small: 0.85rem;
  --lr-label: 0.72rem;

  /* Couleurs typo */
  --lr-title: #1b3a2a;
  --lr-body-color: #2d4035;
  --lr-muted: #4e6658;
  --lr-eyebrow: #1b4332;

  /* Letter-spacing */
  --lr-track-tight: -0.025em;
  --lr-track-label: 0.12em;

  /* Line-height */
  --lr-lh-tight: 1.15;
  --lr-lh-heading: 1.3;
  --lr-lh-body: 1.7;

  /* Espacement vertical */
  --lr-space-xs: 0.5rem;
  --lr-space-sm: 1rem;
  --lr-space-md: 1.5rem;
  --lr-space-lg: 2.2rem;
  --lr-space-xl: 3.5rem;

  /* Espacement contenu Gutenberg */
  --lr-gap-p: 1rem;
  --lr-gap-h2-top: 2.2rem;
  --lr-gap-h3-top: 1.6rem;
  --lr-gap-h4-top: 1.3rem;
  --lr-gap-h-bottom: 0.8rem;
  --lr-gap-list: 1rem;
  --lr-gap-list-item: 0.4rem;
  --lr-gap-quote: 1.5rem;
  --lr-gap-img: 1.8rem;
}

/* ─── 2. H1 — Hero & titres de page ─────────────────────── */
.lr-post-hero__title,
.lrp-hero__title,
.entry-hero .entry-title,
.archive-title,
.lr-internal-cta__title,
.entry-content h1,
.lrp-prose h1,
.lr-single-content h1,
.lr-typo h1 {
  font-family: var(--lr-font-display) !important;
  font-size: var(--lr-h1) !important;
  font-weight: 700 !important;
  color: var(--lr-title) !important;
  letter-spacing: var(--lr-track-tight) !important;
  line-height: var(--lr-lh-tight) !important;
}

/* H1 sur fond sombre (CTA, hero dark) : texte blanc */
.lr-internal-cta__title,
.entry-hero--dark .entry-title {
  color: #fff !important;
}

/* ─── 3. H2 — Section headers ───────────────────────────── */
.lrp-section-header h2,
.lrp-prose h2,
.entry-content h2,
.lr-single-content h2,
.lr-single-article h2,
.archive-description h2,
.lr-typo h2 {
  font-family: var(--lr-font-heading) !important;
  font-size: var(--lr-h2) !important;
  font-weight: 700 !important;
  color: var(--lr-title) !important;
  letter-spacing: var(--lr-track-tight) !important;
  line-height: var(--lr-lh-heading) !important;
}

.entry-content h2,
.lrp-prose h2,
.lr-single-content h2 {
  margin: var(--lr-gap-h2-top) 0 var(--lr-gap-h-bottom);
}

/* ─── 4. H3 — Sub-sections ──────────────────────────────── */
.lrp-section-header h3,
.lrp-prose h3,
.entry-content h3,
.lr-single-content h3,
.lr-single-article h3,
.lr-typo h3 {
  font-family: var(--lr-font-heading) !important;
  font-size: var(--lr-h3) !important;
  font-weight: 600 !important;
  color: var(--lr-title) !important;
  letter-spacing: var(--lr-track-tight) !important;
  line-height: var(--lr-lh-heading) !important;
}

.entry-content h3,
.lrp-prose h3,
.lr-single-content h3 {
  margin: var(--lr-gap-h3-top) 0 var(--lr-gap-h-bottom);
}

/* ─── 5. H4 ─────────────────────────────────────────────── */
.entry-content h4,
.lrp-prose h4,
.lr-single-content h4,
.lr-typo h4 {
  font-family: var(--lr-font-heading);
  font-size: var(--lr-h4);
  font-weight: 700;
  color: var(--lr-title);
  letter-spacing: 0;
  line-height: var(--lr-lh-heading);
  margin: var(--lr-gap-h4-top) 0 var(--lr-gap-h-bottom);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── 6. Body / paragraphes ─────────────────────────────── */
.entry-content p,
.lrp-prose p,
.lr-single-content p,
.lr-typo p {
  font-family: var(--lr-font-body);
  font-size: var(--lr-body);
  font-weight: 400;
  color: var(--lr-body-color);
  line-height: var(--lr-lh-body);
  margin: 0 0 var(--lr-gap-p);
}

/* Premier paragraphe : couleur titre, légèrement plus visible */
.entry-content > p:first-of-type,
.lrp-prose > p:first-of-type {
  color: var(--lr-title);
  font-weight: 450;
}

/* Premier enfant : pas de marge top */
.entry-content > *:first-child,
.lrp-prose > *:first-child,
.lr-single-content > *:first-child {
  margin-top: 0;
}

/* Lead (intro hero, descriptions) */
.lrp-hero__lead,
.lrp-section-header p,
.archive-description p {
  font-family: var(--lr-font-body);
  font-size: var(--lr-lead);
  color: var(--lr-muted);
  line-height: var(--lr-lh-body);
}

/* ─── 7. Eyebrows / labels uniformes en vert brand ──────── */
.lrp-label,
.lrp-hero__badge,
.lrp-intro-block__label,
.lr-post-hero__cat,
.entry-hero .entry-eyebrow,
.lr-related__label,
.lr-typo .eyebrow {
  font-family: var(--lr-font-heading) !important;
  font-size: var(--lr-label) !important;
  font-weight: 700 !important;
  letter-spacing: var(--lr-track-label) !important;
  text-transform: uppercase !important;
  color: var(--lr-eyebrow) !important;
}

/* Eyebrows sur fond sombre : reste lisible en vert clair ou blanc */
.lr-internal-cta__eyebrow,
.entry-hero--dark .entry-eyebrow {
  color: #c8521a !important;
}

/* ─── 7.bis Section .lrp-intro-block (pages expertise) ──── */
.lrp-intro-block__label {
  font-family: var(--lr-font-heading) !important;
  font-size: var(--lr-label) !important;
  font-weight: 700 !important;
  letter-spacing: var(--lr-track-label) !important;
  text-transform: uppercase !important;
  color: var(--lr-eyebrow) !important;
}
.lrp-intro-block__label::before {
  background: var(--lr-eyebrow) !important;
}
.lrp-intro-block__text {
  font-family: var(--lr-font-body) !important;
  font-size: var(--lr-lead) !important;
  font-weight: 400 !important;
  color: var(--lr-body-color) !important;
  line-height: var(--lr-lh-body) !important;
  letter-spacing: 0 !important;
}

/* ─── 8. Liens inline ───────────────────────────────────── */
.entry-content a,
.lrp-prose a,
.lr-single-content a {
  color: var(--lr-vert);
  text-decoration: underline;
  text-decoration-color: rgba(27, 67, 50, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.entry-content a:hover,
.lrp-prose a:hover,
.lr-single-content a:hover {
  color: var(--lr-orange);
  text-decoration-color: var(--lr-orange);
}

/* ─── 9. Strong / em ────────────────────────────────────── */
.entry-content strong, .entry-content b,
.lrp-prose strong, .lrp-prose b,
.lr-single-content strong, .lr-single-content b {
  font-weight: 700;
  color: var(--lr-title);
}

.entry-content em, .entry-content i,
.lrp-prose em, .lrp-prose i,
.lr-single-content em, .lr-single-content i {
  font-style: italic;
  color: var(--lr-body-color);
}

/* ─── 10. Listes ul / ol ────────────────────────────────── */
.entry-content ul,
.entry-content ol,
.lrp-prose ul,
.lrp-prose ol,
.lr-single-content ul,
.lr-single-content ol {
  margin: var(--lr-gap-list) 0;
  padding-left: 1.5rem;
  color: var(--lr-body-color);
}

.entry-content li,
.lrp-prose li,
.lr-single-content li {
  margin-bottom: var(--lr-gap-list-item);
  line-height: var(--lr-lh-body);
  font-size: var(--lr-body);
}
.entry-content li:last-child,
.lrp-prose li:last-child,
.lr-single-content li:last-child { margin-bottom: 0; }

/* Listes imbriquées */
.entry-content ul ul, .entry-content ol ol,
.entry-content ul ol, .entry-content ol ul,
.lrp-prose ul ul, .lrp-prose ol ol {
  margin: var(--lr-gap-list-item) 0;
}

/* Puces verts brand */
.entry-content ul li::marker,
.lrp-prose ul li::marker,
.lr-single-content ul li::marker {
  color: var(--lr-vert);
}

/* ─── 11. Blockquote ────────────────────────────────────── */
.entry-content blockquote,
.lrp-prose blockquote,
.lr-single-content blockquote,
.wp-block-quote {
  margin: var(--lr-gap-quote) 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid var(--lr-vert);
  background: rgba(27, 67, 50, 0.04);
  border-radius: 0 8px 8px 0;
  font-style: normal;
  color: var(--lr-title);
}
.entry-content blockquote p,
.lrp-prose blockquote p,
.wp-block-quote p {
  font-size: var(--lr-lead);
  font-weight: 500;
  line-height: 1.6;
  color: var(--lr-title);
  margin-bottom: 0.6rem;
}
.entry-content blockquote p:last-child,
.lrp-prose blockquote p:last-child,
.wp-block-quote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite,
.wp-block-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--lr-small);
  color: var(--lr-muted);
  font-style: italic;
  font-weight: 400;
}

/* ─── 12. Images / figures ──────────────────────────────── */
.entry-content figure,
.entry-content > img,
.lrp-prose figure,
.lrp-prose > img,
.wp-block-image {
  margin: var(--lr-gap-img) 0;
}
.entry-content figure img,
.entry-content > img,
.lrp-prose figure img,
.lrp-prose > img,
.wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
.entry-content figcaption,
.lrp-prose figcaption,
.wp-block-image figcaption {
  margin-top: 0.6rem;
  font-size: var(--lr-small);
  color: var(--lr-muted);
  text-align: center;
  font-style: italic;
  line-height: 1.5;
}

/* ─── 13. Tableaux ──────────────────────────────────────── */
.entry-content table,
.lrp-prose table,
.lr-single-content table,
.wp-block-table table {
  margin: var(--lr-gap-list) 0;
  border-collapse: collapse;
  width: 100%;
  font-size: var(--lr-small);
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(27, 67, 50, 0.04);
}
.entry-content th,
.entry-content td,
.lrp-prose th,
.lrp-prose td,
.wp-block-table th,
.wp-block-table td {
  padding: 0.7rem 0.95rem;
  border: 1px solid rgba(27, 67, 50, 0.1);
  text-align: left;
  vertical-align: top;
}
.entry-content th,
.lrp-prose th,
.wp-block-table th {
  background: rgba(27, 67, 50, 0.05);
  font-family: var(--lr-font-heading);
  font-weight: 700;
  color: var(--lr-title);
  letter-spacing: 0.02em;
}

/* ─── 14. Séparateur <hr> ───────────────────────────────── */
.entry-content hr,
.lrp-prose hr,
.lr-single-content hr,
.wp-block-separator {
  margin: var(--lr-space-xl) 0;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(27, 67, 50, 0.2), transparent);
}

/* ─── 15. Code inline et bloc ───────────────────────────── */
.entry-content code,
.lrp-prose code,
.lr-single-content code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(27, 67, 50, 0.07);
  color: var(--lr-title);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  border: 1px solid rgba(27, 67, 50, 0.08);
}

.entry-content pre,
.lrp-prose pre,
.lr-single-content pre,
.wp-block-code {
  margin: var(--lr-gap-list) 0;
  padding: 1.25rem 1.4rem;
  background: #1b3a2a;
  color: #f7f5f0;
  border-radius: 10px;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.65;
}
.entry-content pre code,
.lrp-prose pre code,
.wp-block-code code {
  background: transparent;
  color: inherit;
  padding: 0;
  border: none;
}

/* ─── 16. Galerie Gutenberg ─────────────────────────────── */
.wp-block-gallery {
  margin: var(--lr-gap-img) 0;
}
.wp-block-gallery .wp-block-image img {
  border-radius: 8px;
}

/* ─── 17. Marges blocs Gutenberg natifs ─────────────────── */
.entry-content .wp-block-image,
.entry-content .wp-block-quote,
.entry-content .wp-block-gallery,
.entry-content .wp-block-embed,
.entry-content .wp-block-cover,
.entry-content .wp-block-video,
.entry-content .wp-block-audio {
  margin: var(--lr-gap-img) 0;
}

/* ─── 18. Card titles unifiés ───────────────────────────── */
.lr-archive-card__title,
.loop-entry .entry-title,
.lr-related__title {
  font-family: var(--lr-font-heading) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--lr-title) !important;
  letter-spacing: var(--lr-track-tight) !important;
  line-height: 1.35 !important;
}

/* ─── 19. Responsive ────────────────────────────────────── */
@media (max-width: 640px) {
  :root {
    --lr-gap-h2-top: 1.8rem;
    --lr-gap-h3-top: 1.3rem;
    --lr-gap-quote: 1.2rem;
    --lr-gap-img: 1.3rem;
  }
}