/*
Theme Name:   Coprolab Child
Theme URI:    https://coprolab.fr
Description:  Child theme de GeneratePress pour Coprolab — média éditorial syndic + IA. Charte v1 (cf BRAND.md). Fonts IBM Plex auto-hébergées (RGPD + perf). Slate + Sky (cf tokens.css).
Author:       Coprolab
Author URI:   https://coprolab.fr
Template:     generatepress
Version:      1.0.16
Requires at least: 6.0
Tested up to: 6.9
License:      Proprietary
Text Domain:  coprolab-child
*/

/* ============================================================
   1. FONTS — IBM Plex auto-hébergées (latin subset, woff2)
   Source : @fontsource via jsdelivr. font-display:swap = pas de FOIT.
   ============================================================ */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexSans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexSans-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexSans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexSans-500i.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/IBMPlexSans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/IBMPlexSans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexSerif-400i.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/IBMPlexMono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/IBMPlexMono-500.woff2') format('woff2');
}

/* ============================================================
   2. DESIGN TOKENS
   Importés depuis tokens.css (source de vérité unique : niches/syndic-fr/brand/v1/tokens.css)
   ============================================================ */

@import url('tokens.css');

/* ============================================================
   3. BASE — RESET + TYPOGRAPHIE COPROLAB
   Surcharge GeneratePress avec les tokens Coprolab.
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — IBM Plex Sans, weights et tracking selon BRAND.md §4 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  margin-top: 0;
}

h1, .h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
  font-weight: var(--font-weight-bold);
}
h2, .h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  font-weight: var(--font-weight-bold);
}
h3, .h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-semibold);
}
h4, .h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-semibold);
}

/* Lede / body large (intro article) */
.lede,
.entry-content > p:first-of-type {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--color-text-primary);
}

/* Caption — Plex Mono uppercase tracking +0.08em (catégorie, label) */
.caption,
.coprolab-category {
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  text-transform: uppercase;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* Mono — références légales, code inline */
code, kbd, samp, pre,
.mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono);
  line-height: var(--line-height-mono, 1.5);
  letter-spacing: var(--letter-spacing-mono);
}
code {
  background: var(--color-bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

/* Liens inline (BRAND.md §5) — Sky-600 sans soulignement permanent */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   4. LAYOUT — READING WIDTH (corps article 720px)
   ============================================================ */

.coprolab-prose {
  max-width: var(--max-width-prose);
  margin-left: auto;
  margin-right: auto;
}
.coprolab-narrow {
  max-width: var(--max-width-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   5. PULL-QUOTE (BRAND.md §5)
   Filet gauche 3px Sky-500 + Plex Serif italic + filet à gauche
   ============================================================ */

blockquote.pullquote,
.wp-block-quote.is-style-coprolab-pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-pullquote);
  line-height: var(--line-height-pullquote);
  color: var(--color-text-primary);
  margin: var(--space-component) 0;
  padding-left: var(--space-lg);
  border-left: var(--border-width-accent) solid var(--color-accent);
  border-radius: 0;
  background: transparent;
}
blockquote.pullquote cite,
.wp-block-quote.is-style-coprolab-pullquote cite {
  display: block;
  margin-top: var(--space-tight);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}
blockquote.pullquote cite::before,
.wp-block-quote.is-style-coprolab-pullquote cite::before {
  content: "— ";
}

/* ============================================================
   6. BOUTONS (BRAND.md §5) — 3 niveaux
   ============================================================ */

.coprolab-btn,
.button.coprolab-btn,
.wp-block-button__link.coprolab-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-body);
  line-height: 1.2;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  border: var(--border-width-thin) solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* Primary — sky background */
.coprolab-btn--primary,
.coprolab-btn.is-style-primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}
.coprolab-btn--primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}

/* Secondary — outline slate */
.coprolab-btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.coprolab-btn--secondary:hover {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}

/* Ghost — texte seul */
.coprolab-btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  padding: 12px 0;
}
.coprolab-btn--ghost:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   7. PILLS / TAGS (BRAND.md §5)
   ============================================================ */

.coprolab-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-slate-100);
  color: var(--color-slate-700);
  text-decoration: none;
}
.coprolab-pill--accent {
  background: var(--color-accent-soft);
  color: var(--color-sky-700);
}

/* ============================================================
   8. CARD ARTICLE (BRAND.md §5)
   ============================================================ */

.coprolab-card-article {
  display: flex;
  flex-direction: column;
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-primary);
  transition: border-color var(--transition-fast);
}
.coprolab-card-article:hover {
  border-color: var(--color-border-strong);
}
.coprolab-card-article__cover {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  display: block;
}
.coprolab-card-article__body {
  padding: var(--space-lg);
}
.coprolab-card-article__category {
  color: var(--color-link);
}
.coprolab-card-article__title {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-tight);
}
.coprolab-card-article__excerpt {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-md) 0;
}
.coprolab-card-article__meta {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

/* ============================================================
   9. ACCESSIBILITÉ — Skip link, focus visible (BRAND.md §9)
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  padding: var(--space-sm) var(--space-md);
  z-index: var(--z-toast);
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   10. WORDPRESS / GENERATEPRESS OVERRIDES
   ============================================================ */

/* Surcharge GP body font */
body,
button,
input,
select,
optgroup,
textarea {
  font-family: var(--font-sans);
}

/* Site title (header) */
.main-title a {
  color: var(--color-text-primary);
}

/* Entry content readable width */
.inside-article .entry-content {
  max-width: var(--max-width-prose);
  margin-left: auto;
  margin-right: auto;
}

/* WP block quote default → on Coprolab style */
.wp-block-quote:not(.is-style-large):not(.is-style-coprolab-pullquote) {
  border-left: var(--border-width-accent) solid var(--color-accent);
  padding-left: var(--space-lg);
  font-style: normal;
}

/* ============================================================
   11. FIGURES ÉDITORIALES (visuels inline article)
   <figure class="coprolab-figure"> avec <img> + <figcaption>
   ============================================================ */

.coprolab-figure {
  margin: var(--space-xl) auto;
  padding: 0;
  max-width: 100%;
  text-align: center;
}

.coprolab-figure img,
.coprolab-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
}

.coprolab-figure figcaption {
  margin-top: var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--font-size-small);
  line-height: 1.5;
  color: var(--color-text-secondary);
  font-style: normal;
  text-align: center;
  padding: 0 var(--space-sm);
}

/* ============================================================
   12. SINGLE POST — RENDU ÉDITORIAL PRO (v1.0.3)
   Catégorie pill + byline + H1/H2 hiérarchie + En bref card +
   tables Coprolab + CTA blockquote v2.
   Charte: Stratechery du syndic — sobre, dense, lisible.
   ============================================================ */

/* --- 12.1 Hide GP default sidebar trigger if some context forces it --- */
body.single-post .sidebar.widget-area {
  display: none;
}

/* --- 12.1b Contraint TOUS les blocs single-post (header + content + meta) à
   720px et les centre. Évite que le H1 (.entry-header) déborde et chevauche
   la TOC sticky à gauche (fix v1.0.5). --- */
body.single-post .entry-header,
body.single-post .entry-content,
body.single-post .entry-summary,
body.single-post .entry-meta-footer,
body.single-post .post-navigation,
body.single-post footer.entry-meta {
  max-width: var(--max-width-prose);
  margin-left: auto;
  margin-right: auto;
}

/* La TOC injectée par PHP est PREFIXÉE au content. On la sort du flow prose
   pour éviter qu'elle hérite du max-width 720px (mobile : elle reste là où elle
   est, dans le flow ; desktop ≥1280px : position fixed override). */
body.single-post .entry-content > .coprolab-toc {
  max-width: var(--max-width-prose);
  margin-left: auto;
  margin-right: auto;
}

/* --- 12.2 Hide GP default .entry-meta (date + author) on singles ---
   On la remplace par .coprolab-byline injectée via PHP. */
body.single-post .entry-header .entry-meta,
body.single-post .entry-meta {
  display: none;
}

/* --- 12.3 Catégorie pill (au-dessus du H1) --- */
.coprolab-category-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sky-700);
  text-decoration: none;
  margin: 0 0 16px;
  transition: color var(--transition-fast);
}
.coprolab-category-pill:hover {
  color: var(--color-sky-800);
  text-decoration: none;
}

/* --- 12.4 H1 du single post --- */
body.single-post .entry-header .entry-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--color-text-primary);
}

/* --- 12.5 Byline (date · reading time · author) --- */
.coprolab-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 40px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text-secondary);
}
.coprolab-byline__sep {
  color: var(--color-slate-300);
}

/* --- 12.6 H2 / H3 hiérarchie typo + filet top discret sur H2 --- */
body.single-post .entry-content h2 {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-top: 64px;
  margin-bottom: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--color-slate-200);
}
body.single-post .entry-content h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 32px;
}
body.single-post .entry-content h3 {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 36px;
  margin-bottom: 14px;
  color: var(--color-text-primary);
}
body.single-post .entry-content h4 {
  font-size: 17px;
  font-weight: 600;
  margin-top: 28px;
  margin-bottom: 10px;
}

/* --- 12.7 Body & espacement vertical --- */
body.single-post .entry-content p,
body.single-post .entry-content ul,
body.single-post .entry-content ol {
  margin-bottom: 20px;
  line-height: 1.7;
}
body.single-post .entry-content li {
  margin-bottom: 6px;
}
body.single-post .entry-content hr {
  border: none;
  border-top: 1px solid var(--color-slate-200);
  margin: 48px auto;
  width: 80px;
}

/* --- 12.8 "En bref" card (injectée via filter PHP) --- */
.coprolab-en-bref {
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  border-radius: 12px;
  padding: 28px 32px;
  margin: 32px 0 56px;
}
.coprolab-en-bref__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sky-700);
  margin-bottom: 8px;
}
.coprolab-en-bref h2 {
  margin: 0 0 16px !important;
  font-size: 22px !important;
  border-top: none !important;
  padding-top: 0 !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.coprolab-en-bref ul {
  margin: 0 0 0 4px;
  padding-left: 18px;
}
.coprolab-en-bref ul li {
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
}
.coprolab-en-bref ul li:last-child {
  margin-bottom: 0;
}
.coprolab-en-bref blockquote {
  margin: 20px 0 0;
  padding: 0;
  border-left: none;
  background: transparent;
  font-style: normal;
  font-family: var(--font-sans);
}
.coprolab-en-bref blockquote p {
  margin: 0;
}
.coprolab-en-bref blockquote a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 10px 18px;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.coprolab-en-bref blockquote a:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}

/* --- 12.9 Tableaux comparatifs pro (Coprolab) --- */
.coprolab-table-wrapper {
  margin: 32px 0;
  border: 1px solid var(--color-slate-200);
  border-radius: 8px;
  overflow-x: auto;
  background: var(--color-bg-primary);
}
.coprolab-table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}
.coprolab-table-wrapper thead {
  background: var(--color-slate-50);
}
.coprolab-table-wrapper th {
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-slate-200);
  white-space: nowrap;
}
.coprolab-table-wrapper td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-slate-100);
  color: var(--color-text-primary);
  vertical-align: top;
}
.coprolab-table-wrapper tbody tr:last-child td {
  border-bottom: none;
}
.coprolab-table-wrapper tbody tr:hover {
  background: var(--color-sky-50);
}
.coprolab-table-wrapper td:first-child {
  font-weight: 600;
  color: var(--color-text-primary);
}

/* --- 12.10 CTA blockquote v2 — détection via :has() ---
   Si le blockquote contient un lien externe, on le transforme en card
   avec bouton Sky-600 visible + flèche ↗.
   Browser support: Safari 16+, Chrome 105+, FF 121+ (suffisant en 2026). */
body.single-post .entry-content blockquote:has(a[href^="http"]) {
  background: var(--color-sky-50);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  margin: 32px 0;
  font-style: normal;
  font-family: var(--font-sans);
}
body.single-post .entry-content blockquote:has(a[href^="http"]) p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-primary);
}
body.single-post .entry-content blockquote:has(a[href^="http"]) p + p {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
}
body.single-post .entry-content blockquote:has(a[href^="http"]) a[href^="http"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-sky-700);
  text-decoration: none;
  transition: color var(--transition-fast);
}
body.single-post .entry-content blockquote:has(a[href^="http"]) a[href^="http"]:hover {
  color: var(--color-sky-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.single-post .entry-content blockquote:has(a[href^="http"]) a[href^="http"]::after {
  content: "↗";
  font-weight: 400;
  margin-left: 2px;
}

/* CTA d'ancre interne (lead magnet) — pas de flèche externe */
body.single-post .entry-content blockquote:has(a[href^="#"]) {
  background: var(--color-sky-50);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 20px 24px;
  margin: 32px 0;
  font-style: normal;
}
body.single-post .entry-content blockquote:has(a[href^="#"]) p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}
body.single-post .entry-content blockquote:has(a[href^="#"]) a {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 20px;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast);
}
body.single-post .entry-content blockquote:has(a[href^="#"]) a:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-inverse);
  text-decoration: none;
}

/* --- 12.11 Footer post (catégorie + tags) --- */
body.single-post .entry-meta-footer,
body.single-post footer.entry-meta {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--color-slate-200);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text-secondary);
  display: block !important;
}
body.single-post .entry-meta-footer a,
body.single-post footer.entry-meta a {
  color: var(--color-link);
}

/* --- 12.12 Responsive : mobile reduce vertical rhythm --- */
@media (max-width: 768px) {
  body.single-post .entry-header .entry-title {
    font-size: 28px;
  }
  body.single-post .entry-content h2 {
    margin-top: 48px;
    padding-top: 24px;
  }
  .coprolab-en-bref {
    padding: 24px 22px;
  }
  .coprolab-table-wrapper th,
  .coprolab-table-wrapper td {
    padding: 12px 12px;
    font-size: 14px;
  }
}

/* ============================================================
   13. HEADER PRO ÉDITORIAL (v1.0.4)
   Logo à gauche / nav à droite, filet bottom Slate-200, hover
   menu items underline Sky animé, breadcrumb mobile burger sobre.
   ============================================================ */

.site-header {
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
}

.inside-header {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.inside-header .site-branding {
  flex: 0 0 auto;
}

.inside-header .site-logo img {
  max-height: 44px;
  width: auto;
  display: block;
}

/* (v1.0.14 + ajusté v1.0.15) Force aspect-ratio préservé sur le logo SVG.
   GP Customizer inline injecte `.site-header .header-image{width:370px;}` qui
   override notre width:auto. Le `!important` gagne la cascade et force
   aspect-ratio natif (200×60 → ~147×44).
   Height ajustée à 44px (v1.0.15) — 36px paraissait trop discret face au
   menu nav, 44px donne un weight visuel équilibré type Stratechery / NYT. */
.site-header img.header-image,
.site-header .site-logo img.header-image {
  width: auto !important;
  max-width: 240px !important;
  height: 44px !important;
  max-height: 44px !important;
  display: block;
}

/* Nav float right (force le layout GP) */
.main-navigation {
  flex: 0 1 auto;
  margin-left: auto;
  background: transparent;
}

.main-navigation .inside-navigation {
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.main-navigation .menu {
  display: flex;
  gap: 4px;
  align-items: center;
}

.main-navigation .menu > .menu-item > a {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  padding: 10px 16px;
  position: relative;
  background: transparent;
  line-height: 1.2;
  transition: color var(--transition-fast);
}

/* Underline animé sous le menu item au hover et current */
.main-navigation .menu > .menu-item > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-fast);
}

.main-navigation .menu > .menu-item > a:hover,
.main-navigation .menu > .current-menu-item > a,
.main-navigation .menu > .current-menu-parent > a {
  color: var(--color-text-primary);
  background: transparent;
}

.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .current-menu-item > a::after,
.main-navigation .menu > .current-menu-parent > a::after {
  transform: scaleX(1);
}

/* Mobile : burger menu sobre (GP gère le toggle, on style juste) */
@media (max-width: 768px) {
  .main-navigation {
    margin-left: 0;
    width: 100%;
  }
  .menu-toggle {
    padding: 8px 12px;
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
  }
  .main-navigation .menu > .menu-item > a {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
  }
  .main-navigation .menu > .menu-item > a::after {
    display: none;
  }
}

/* ============================================================
   14. FOOTER 3 COLONNES (v1.0.4, refacto propre v1.0.12)
   GP rend nativement <div class="site-footer"> > <div class="footer-widgets">
     > <div class="footer-widgets-container"> > <div class="inside-footer-widgets">
       > <div class="footer-widget-N"> > <aside class="widget">
   Les widgets sont des block widgets (id_base=block) : titres en h4.wp-block-heading,
   liens en ul.wp-block-list, paragraphs en <p>. Pas de .widget-title.
   ============================================================ */

/* Container : fond Slate-50, filet top, padding vertical */
.site-footer .footer-widgets {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: 56px 0 40px;
}

/* Grid 3-col 1.4fr 1fr 1fr (À propos plus large pour baseline + lien) */
.site-footer .footer-widgets-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.site-footer .inside-footer-widgets {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.site-footer .footer-widget-1,
.site-footer .footer-widget-2,
.site-footer .footer-widget-3 {
  padding: 0;
  margin: 0;
}

/* Titres : ciblent .widget-title (legacy WP) + h2/h3/h4/h5.wp-block-heading (block widgets) */
.site-footer .footer-widgets .widget-title,
.site-footer .footer-widgets h2.wp-block-heading,
.site-footer .footer-widgets h3.wp-block-heading,
.site-footer .footer-widgets h4.wp-block-heading,
.site-footer .footer-widgets h5.wp-block-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sky-700);
  margin: 0 0 18px;
  padding: 0;
  line-height: 1.2;
}

/* Widget container (aside) */
.site-footer .footer-widgets .widget {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* Paragraphs */
.site-footer .footer-widgets .widget p {
  margin: 0 0 12px;
  color: var(--color-text-secondary);
}

/* Listes (wp-block-list + classic ul/menu) */
.site-footer .footer-widgets .widget ul,
.site-footer .footer-widgets .widget .menu,
.site-footer .footer-widgets .wp-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .footer-widgets .widget li,
.site-footer .footer-widgets .widget .menu-item,
.site-footer .footer-widgets .wp-block-list li {
  margin: 0 0 10px;
  padding: 0;
}

/* Liens */
.site-footer .footer-widgets .widget a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.site-footer .footer-widgets .widget a:hover {
  color: var(--color-link);
  text-decoration: none;
}

/* Footer bottom (copyright) — fond sombre Slate-900 */
.site-info {
  background: var(--color-slate-900);
  color: var(--color-slate-300);
  padding: 18px 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  border-top: none;
}

.site-info .copyright-bar {
  color: var(--color-slate-300);
}

.site-info a {
  color: var(--color-slate-200);
}

@media (max-width: 768px) {
  .site-footer-widgets, .site-footer .footer-widgets-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .site-footer-widgets, .site-footer .footer-widgets {
    padding: 40px 0 28px;
  }
}

/* ============================================================
   15. TOC STICKY (v1.0.4)
   Auto-générée depuis H2/H3 par filter PHP. Desktop ≥1280px :
   sticky à gauche du content. Mobile : accordion en haut.
   ============================================================ */

.coprolab-toc {
  background: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 0 0 40px;
  font-family: var(--font-sans);
  font-size: 14px;
}

.coprolab-toc__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sky-700);
  background: transparent;
  border: none;
  padding: 0 0 12px;
  cursor: default;
}

.coprolab-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc-h2;
}

.coprolab-toc__item {
  margin: 0;
  line-height: 1.5;
}

.coprolab-toc__item a {
  display: block;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 5px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.coprolab-toc__item a:hover {
  color: var(--color-link);
  background: var(--color-bg-primary);
  border-left-color: var(--color-accent);
  text-decoration: none;
}

.coprolab-toc__item.is-active > a {
  color: var(--color-text-primary);
  font-weight: 600;
  background: var(--color-bg-primary);
  border-left-color: var(--color-accent);
}

.coprolab-toc__item--h3 {
  padding-left: 18px;
  font-size: 13px;
}

.coprolab-toc__item--h3 a {
  color: var(--color-text-secondary);
}

/* Desktop ≥ 1280px : fixed à gauche, hors-flow (fix v1.0.5 — left:24px fixe
   plus collé au bord, bottom: 32px pour éviter overlap visuel avec le footer,
   hide automatique quand le footer entre dans la viewport via JS). */
@media (min-width: 1280px) {
  .coprolab-toc {
    position: fixed;
    top: 96px;
    bottom: 32px;
    left: 24px;
    width: 220px;
    max-height: none;
    overflow-y: auto;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 10;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .coprolab-toc.is-hidden-by-footer {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-12px);
  }

  .coprolab-toc__label {
    cursor: default;
    padding-bottom: 14px;
    pointer-events: none;
    margin: 0;
  }

  /* Force la list à prendre tout l'espace dispo verticalement (scroll interne
     si l'article est très long) */
  .coprolab-toc__list {
    overflow-y: auto;
    max-height: 100%;
  }

  /* Custom scrollbar sobre */
  .coprolab-toc::-webkit-scrollbar,
  .coprolab-toc__list::-webkit-scrollbar {
    width: 4px;
  }
  .coprolab-toc::-webkit-scrollbar-thumb,
  .coprolab-toc__list::-webkit-scrollbar-thumb {
    background: var(--color-slate-200);
    border-radius: 2px;
  }
  .coprolab-toc::-webkit-scrollbar-track,
  .coprolab-toc__list::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* Desktop large ≥ 1600px : TOC un peu plus à gauche pour mieux respirer */
@media (min-width: 1600px) {
  .coprolab-toc {
    left: max(24px, calc((100vw - 720px) / 2 - 320px));
  }
}

/* Mobile : accordion behavior (toggle via JS) */
@media (max-width: 1279px) {
  .coprolab-toc.is-collapsible .coprolab-toc__label {
    cursor: pointer;
    width: 100%;
    text-align: left;
    justify-content: space-between;
  }
  .coprolab-toc.is-collapsible .coprolab-toc__label::after {
    content: "−";
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    margin-left: auto;
    transition: transform var(--transition-fast);
  }
  .coprolab-toc.is-collapsible.is-collapsed .coprolab-toc__label::after {
    content: "+";
  }
  .coprolab-toc.is-collapsible.is-collapsed .coprolab-toc__list {
    display: none;
  }
}

/* Print : TOC cachée */
@media print {
  .coprolab-toc {
    display: none;
  }
}

/* ============================================================
   16. HOMEPAGE ÉDITORIALE — front-page.php (v1.0.13)
   Hero + Featured + Recent grid + Newsletter + About teaser.
   Charte v1 : sobre, éditorial, dense.
   ============================================================ */

/* Container reset pour la front page (full-width sections) */
body.home.page-template-front-page .site-content {
  padding: 0;
}

.coprolab-home {
  width: 100%;
}

/* Section label réutilisable (mono uppercase Sky) */
.coprolab-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sky-700);
  margin: 0 0 16px;
  line-height: 1.2;
}

.coprolab-section-label--h2 {
  font-size: 11px;
  margin: 0 0 24px;
}

/* ─── 16.1 Hero éditorial ────────────────────────────── */
.coprolab-hero {
  padding: 80px 24px 64px;
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
}

.coprolab-hero__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}

.coprolab-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sky-700);
  margin: 0 0 24px;
}

.coprolab-hero__title {
  font-family: var(--font-sans);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-text-primary);
  margin: 0 0 24px;
}

.coprolab-hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--color-sky-700);
}

.coprolab-hero__lede {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 32px;
  max-width: 680px;
}

.coprolab-hero__cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* ─── 16.2 Dernier dossier (featured) ────────────────── */
.coprolab-featured {
  padding: 72px 24px;
  background: var(--color-bg-secondary);
}

.coprolab-featured__inner {
  max-width: 880px;
  margin: 0 auto;
}

.coprolab-featured__card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 40px 44px;
}

.coprolab-featured__card .coprolab-category-pill {
  margin-bottom: 14px;
}

.coprolab-featured__title {
  font-family: var(--font-sans);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--color-text-primary);
}

.coprolab-featured__title a {
  color: inherit;
  text-decoration: none;
}

.coprolab-featured__title a:hover {
  color: var(--color-link);
  text-decoration: none;
}

.coprolab-featured__excerpt {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 16px;
}

.coprolab-featured__byline {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--color-text-tertiary, var(--color-slate-500));
}

.coprolab-featured__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-sky-700);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.coprolab-featured__more:hover {
  color: var(--color-sky-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── 16.3 Grille articles récents ───────────────────── */
.coprolab-recent {
  padding: 72px 24px;
  background: var(--color-bg-primary);
}

.coprolab-recent__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.coprolab-recent__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.coprolab-recent .coprolab-card-article {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.coprolab-recent .coprolab-card-article__body {
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.coprolab-recent .coprolab-card-article__title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 4px 0 0;
}

.coprolab-recent .coprolab-card-article__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.coprolab-recent .coprolab-card-article__title a:hover {
  color: var(--color-link);
}

.coprolab-recent .coprolab-card-article__excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
  flex-grow: 1;
}

.coprolab-recent .coprolab-card-article__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 8px 0 0;
}

.coprolab-recent--empty {
  text-align: center;
  padding: 56px 24px;
}

.coprolab-recent__empty-text {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ─── 16.4 Newsletter inline ─────────────────────────── */
.coprolab-newsletter {
  padding: 72px 24px;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.coprolab-newsletter__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.coprolab-newsletter__inner .coprolab-section-label {
  margin-bottom: 12px;
}

.coprolab-newsletter__title {
  font-family: var(--font-sans);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 14px;
  color: var(--color-text-primary);
}

.coprolab-newsletter__lede {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 28px;
}

.coprolab-newsletter__form {
  display: flex;
  gap: 8px;
  max-width: 500px;
  margin: 0 auto 16px;
}

.coprolab-newsletter__form input[type="email"] {
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-size: 15px;
  padding: 12px 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--transition-fast);
}

.coprolab-newsletter__form input[type="email"]:focus {
  border-color: var(--color-accent);
}

.coprolab-newsletter__legal {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ─── 16.5 About teaser ──────────────────────────────── */
.coprolab-about-teaser {
  padding: 80px 24px;
  background: var(--color-bg-primary);
}

.coprolab-about-teaser__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.coprolab-about-teaser .pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--color-text-primary);
  border: none;
  padding: 0;
  margin: 0 0 24px;
  text-align: center;
}

.coprolab-about-teaser__cta {
  margin: 0;
}

.coprolab-about-teaser__cta a {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-sky-700);
  text-decoration: none;
}

.coprolab-about-teaser__cta a:hover {
  color: var(--color-sky-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── 16.6 Responsive ────────────────────────────────── */
@media (max-width: 768px) {
  .coprolab-hero {
    padding: 48px 20px 40px;
  }
  .coprolab-featured,
  .coprolab-recent,
  .coprolab-newsletter,
  .coprolab-about-teaser {
    padding: 48px 20px;
  }
  .coprolab-recent__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .coprolab-featured__card {
    padding: 28px 24px;
  }
  .coprolab-newsletter__form {
    flex-direction: column;
  }
  .coprolab-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }
  .coprolab-hero__cta .coprolab-btn {
    text-align: center;
  }
}

/* ============================================================
   17. BREADCRUMBS RANK MATH (v1.0.16)
   Affichés au-dessus du content via hook generate_before_content.
   Sobre, mono caption, séparateurs subtils.
   ============================================================ */

.coprolab-breadcrumbs {
  max-width: var(--max-width-prose);
  margin: 24px auto 0;
  padding: 0 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.coprolab-breadcrumbs a,
.coprolab-breadcrumbs .rank-math-breadcrumb a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.coprolab-breadcrumbs a:hover,
.coprolab-breadcrumbs .rank-math-breadcrumb a:hover {
  color: var(--color-link);
  text-decoration: none;
}

/* Séparateur "›" — Rank Math l'injecte par défaut, on le styliser sobre */
.coprolab-breadcrumbs .separator,
.coprolab-breadcrumbs .rank-math-breadcrumb-sep {
  color: var(--color-slate-300);
  margin: 0 6px;
  font-weight: 400;
}

.coprolab-breadcrumbs .last,
.coprolab-breadcrumbs .rank-math-breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Sur mobile : breadcrumb visible mais discret */
@media (max-width: 768px) {
  .coprolab-breadcrumbs {
    padding: 0 20px;
    font-size: 11px;
    margin-top: 16px;
  }
}

/* Print : breadcrumbs cachés */
@media print {
  .coprolab-breadcrumbs {
    display: none;
  }
}