/*
=========================================================================
   ECO3MIN, STYLE ÉDITORIAL v4.1.2 (réécriture à plat)
   -------------------------------------------------------------------------
   v4.0 = v3.5 consolidé (tokens unifiés, terracotta natif, Q&A migrée,
   fuites globales supprimées) + LAYOUT LONGFORM : rail droit sticky,
   TOC, cards de circulation, module fin d'article, progress bar,
   kickers numérotés, pull quotes.
   v4.1 (23/09/2026) = soulignement de menu unique (or), bandeau blanc
   collé au header, titre aligné sur la grille, TOC du rail sans
   soulignement, survol de contenu en terracotta, focus clavier visible,
   header mobile recentré, quicknav mobile morte retirée (section 48).
   v4.1.1 (10/10/2026) = sous-menus au navy de la barre, sans séparateurs,
   soulignés en or au survol ; soulignement du menu 4 px, remonté à 6 px.
   v4.1.2 (13/10/2026) = un seul item de menu souligné : la page courante
   l'emporte sur sa page parente (Simulateurs contre Apprendre).
   Le rail est injecté par le snippet PHP « Eco3min Article Rail »
   (Code Snippets) qui pose la classe body .eco3-has-rail.
   Sans le snippet, ce CSS dégrade proprement vers la mise en page v3.5.
   -------------------------------------------------------------------------
   ZONES TRANSPLANTÉES TELLES QUELLES (ne pas « optimiser ») :
   sections 24–38 (header/menus/quicknav), 45 (baromètre), 46 (hub cards).
   ========================================================================= */


/* =========================================================================
   0. IMPORT FONTS
   ========================================================================= */




/* =========================================================================
   1. VARIABLES, DESIGN SYSTEM v3.4
   ========================================================================= */

/* Palette Blocksy du customizer, restée aux défauts bleu et gris-bleu du thème : elle colore
   pre/code, bordures de tableaux et de champs, texte de base, liens, boutons, sélection, fond du body.
   Ramenée sur les rôles ; :root:root bat le :root du thème quel que soit l'ordre de chargement. */
:root:root {
  --theme-palette-color-1: var(--ui-action);
  --theme-palette-color-2: var(--ui-action-hover);
  --theme-palette-color-3: var(--ui-text);
  --theme-palette-color-4: var(--ui-text);
  --theme-palette-color-5: var(--ui-border);
  --theme-palette-color-6: var(--ui-surface-alt);
  --theme-palette-color-7: var(--ui-surface);
  --theme-palette-color-8: var(--ui-surface-raised);
}

:root {

  /* ---------- Palette gris (inchangée) ---------- */
  --eco-black:     var(--ui-text);
  --eco-gray-900:  var(--ui-text);
  --eco-gray-800:  var(--ui-text);
  --eco-gray-700:  var(--ui-text);
  --eco-gray-600:  var(--ui-text-muted);
  --eco-gray-500:  var(--ui-text-muted);
  --eco-gray-400:  var(--ui-text-muted);
  --eco-gray-300:  var(--ui-border);
  --eco-gray-200:  var(--ui-border);
  --eco-gray-100:  var(--ui-surface-alt);
  --eco-gray-50:   var(--ui-surface);

  /* ---------- NAVY) 2 valeurs canoniques + aliases rétrocompat ---------- */
  --eco-navy:        var(--ui-surface-inverse);
  --eco-link:        var(--ui-link);

  --eco-navy-alt:    var(--ui-surface-inverse);
  --eco-navy-hover:  var(--ui-surface-inverse);
  --eco-navy-deep:   var(--ui-link-hover);
  --eco-link-hover:  var(--eco-navy-deep);
  --eco-header-bg:   var(--eco-navy);

  /* ---------- Couleurs éditoriales secondaires ---------- */
  --eco-terra:         var(--ui-brand-text);   /* ACCENT ÉDITORIAL UNIQUE (contenu) */
  --eco-terra-dark:    var(--ui-brand-text);
  --eco-accent:        var(--ui-alert);   /* rouge réservé aux WARNINGS */
  --eco-accent-soft:   var(--ui-alert);
  --eco-gold:          var(--ui-brand-inverse);   /* or réservé au CHROME de navigation */
  --eco-gold-light:    var(--ui-brand-inverse);
  --eco-success:       var(--ui-positive);
  --eco-blue-soft:     var(--ui-surface-alt);
  --eco-hairline:      color-mix(in srgb,var(--ui-text) 14%,transparent);
  --eco-hairline-soft: color-mix(in srgb,var(--ui-text) 8%,transparent);

  /* ---------- Fonds ---------- */
  --eco-bg-page:     var(--ui-surface);
  --eco-bg-article:  var(--ui-surface);
  --eco-bg-soft:     var(--ui-surface-alt);
  --eco-bg-hero:     var(--ui-surface-alt);
  --eco-bg-warm:     var(--ui-surface-alt);
  --eco-border:      var(--ui-border);
  --eco-border-hero: var(--ui-border);
  --eco-border-dark: color-mix(in srgb,var(--ui-text-inverse) 12%,transparent);

  /* ---------- Typographie ---------- */
  --font-display:  var(--ui-font-serif);
  --font-serif:    var(--ui-font-serif);
  --font-sans:     var(--ui-font-sans);
  --font-mono:     var(--ui-font-mono);

  /* ---------- Mesures ---------- */
  --eco-article-width: 664px; /* Presse 13/10/2026 : 600 px de texte (padding 2 x 2rem) */
  --eco-line-height:   1.7;

  /* ---------- Layout longform (rail) ---------- */
  --eco-rail-width:    300px;
  --eco-rail-gutter:   56px;
  --eco-band-width:    1180px;
  --eco-grid-width:    calc(var(--eco-article-width) + var(--eco-rail-gutter) + var(--eco-rail-width));

  /* ---------- BORDER-RADIUS (FT-strict ---------- */
  --radius-sm:  2px;
  --radius-md:  2px;
  --radius-lg:  2px;

  /* ---------- Aliases legacy ---------- */
  --theme-link-initial-color:  var(--eco-link);

  /* NAMESPACE --eco3-* (LEGACY), alias vers --eco-* */
  --eco3-navy:        var(--eco-navy);
  --eco3-navy-light:  var(--eco-navy-alt);
  --eco3-gold:        var(--eco-gold);
  --eco3-gold-light:  var(--eco-gold-light);
  --eco3-bg-soft:     var(--eco-bg-soft);
  --eco3-bg-cream:    var(--eco-bg-warm);
  --eco3-border:      var(--eco-border);
  --eco3-text-muted:  var(--eco-gray-600);
  --eco3-text:        var(--eco-gray-800);
  --eco3-success:     var(--eco-success);
  --eco3-blue-soft:   var(--eco-blue-soft);

}


/* =========================================================================
   2. BASE GLOBALE
   ========================================================================= */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  line-height: var(--eco-line-height);
  color: var(--eco-gray-800);
  background-color: var(--eco-bg-page) !important;
}

html,
body,
#main,
.site,
.site-content,
.ct-container {
  background-color: var(--eco-bg-page) !important;
}

hr,
.wp-block-separator {
  display: none !important;
}


/* =========================================================================
   3. CONTENEUR ARTICLE
   ========================================================================= */

.site-main {
  background-color: var(--eco-bg-page) !important;
}

article.post,
.entry-content,
.ct-container-narrow,
.single .site-main > article {
  background-color: var(--eco-bg-article) !important;
}

article.post {
  background: var(--eco-bg-article) !important;
  margin: 1.5rem auto;
  max-width: 800px;
  border-radius: 0;
}

@media (min-width: 768px) {
  article.post {
    margin: 2rem auto;
  }
}

.entry-content {
  max-width: var(--eco-article-width);
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  background: var(--eco-bg-article) !important;
}

@media (min-width: 768px) {
  .entry-content {
    padding: 2.75rem 2rem 4rem;
  }
}


/* =========================================================================
   4. TYPOGRAPHIE, TITRES
   ========================================================================= */

.entry-content h1,
.entry-title,
h1.page-title,
.entry-header .page-title,
h1.wp-block-heading {
  font-family: var(--font-display);
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 48;
  color: var(--eco-black);
  margin-top: 0;
  margin-bottom: 1rem;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .entry-content h1,
  .entry-title,
  h1.page-title,
  .entry-header .page-title,
  h1.wp-block-heading {
    font-size: 2.625rem;
    line-height: 1.1;
  }
}

.entry-content h1 em,
.entry-title em,
.entry-content h2 em,
.entry-content h3 em {
  font-style: italic;
  font-weight: 600;
  color: var(--eco-link);
}

.entry-content h2,
h2.wp-block-heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 48;
  color: var(--eco-gray-900);
  max-width: var(--eco-article-width);
  margin-top: 2.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: none;
}

@media (min-width: 768px) {
  .entry-content h2,
  h2.wp-block-heading {
    font-size: 1.75rem;
    margin-top: 3.25rem;
  }
}

.entry-content h3,
h3.wp-block-heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--eco-gray-900);
  max-width: var(--eco-article-width);
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 48;
}

@media (min-width: 768px) {
  .entry-content h3,
  h3.wp-block-heading {
    font-size: 1.375rem;
  }
}

.entry-content h4,
h4.wp-block-heading {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--eco-gray-700);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.entry-content h5,
h5.wp-block-heading {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--eco-gray-700);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}


/* =========================================================================
   5. TYPOGRAPHIE, CORPS DE TEXTE
   ========================================================================= */

.entry-content p {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-variation-settings: 'opsz' 16;
  font-variant-numeric: normal;
  color: var(--eco-gray-800);
  max-width: var(--eco-article-width);
  margin-bottom: 1.4rem;
  text-align: left;
}

@media (min-width: 768px) {
  .entry-content p {
    font-size: 1.25rem;
    line-height: 1.6;
  }
}

.entry-content > p:first-of-type,
.eco3-colwrap > p:first-of-type {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--eco-gray-700);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--eco-border);
  position: relative;
}

@media (min-width: 768px) {
  .entry-content > p:first-of-type,
  .eco3-colwrap > p:first-of-type {
    font-size: 1.3125rem;
    line-height: 1.5;
  }
}

.eco3min-chapeau,
.entry-content p.eco3min-chapeau {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.55;
  font-weight: 400;
  font-style: italic;
  color: var(--eco-gray-900);
  max-width: var(--eco-article-width);
  margin-top: 0.5rem;
  margin-bottom: 1.75rem;
}

.eco3min-intro {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--eco-gray-700);
  max-width: var(--eco-article-width);
  margin-bottom: 1.5rem;
}

.subtitle {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  margin: 0.75rem 0 1.5rem;
  color: var(--eco-gray-700);
}

.eco3min-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--eco-terra);
  margin: 0 0 1rem;
  display: block;
}


/* =========================================================================
   6. LIENS ÉDITORIAUX
   ========================================================================= */

.entry-content a {
  color: var(--eco-link);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.15s ease;
}

.entry-content a:visited {
  color: var(--eco-link);
}

.entry-content a:hover,
.entry-content a:focus {
  color: var(--eco-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--eco-terra);
}

.entry-content p a,
.entry-content li a {
  text-decoration-line: underline !important;
  text-decoration-thickness: 1.25px !important;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--ui-link-underline) 35%, transparent) !important;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.entry-content p a:hover,
.entry-content li a:hover {
  text-decoration-color: var(--eco-terra) !important;
}

.entry-content h1 a,
.entry-content h2 a,
.entry-content h3 a,
.entry-content h4 a,
.entry-content h5 a,
.entry-content h6 a,
.mailpoet_form a,
button a {
  text-decoration: none !important;
}

.eco3min-callout a {
  color: var(--eco-link);
  font-weight: 500;
}

.eco3min-callout a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wp-block-post-title a,
.wp-block-post-title a:visited,
.wp-block-query a,
.wp-block-query a:visited,
h2.wp-block-post-title a {
  color: var(--eco-link) !important;
  text-decoration: none !important;
  font-family: var(--font-display) !important;
}

.wp-block-post-title a:hover,
.wp-block-query a:hover,
h2.wp-block-post-title a:hover {
  color: var(--eco-link-hover) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}


/* =========================================================================
   7. LISTES
   ========================================================================= */

.entry-content ul,
.entry-content ol {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-variation-settings: 'opsz' 16;
  font-variant-numeric: normal;
  color: var(--eco-gray-800);
  max-width: var(--eco-article-width);
  margin-bottom: 1.4rem;
  padding-left: 1.75rem;
  text-align: left;
}

@media (min-width: 768px) {
  .entry-content ul,
  .entry-content ol {
    font-size: 1.25rem;
  }
}

.entry-content li {
  margin-bottom: 0.5rem;
}

.entry-content li::marker {
  color: var(--eco-gray-500);
}


/* =========================================================================
   8. CITATIONS
   ========================================================================= */

.entry-content blockquote {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--eco-gray-700);
  max-width: var(--eco-article-width);
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--eco-terra);
  background: transparent;
}

.entry-content blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  margin-bottom: 0;
  text-align: left;
}

.entry-content blockquote cite {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--eco-gray-600);
  margin-top: 0.75rem;
}


/* =========================================================================
   9. ENCARTS ÉDITORIAUX
   ========================================================================= */

.eco3min-callout {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--eco-gray-700);
  background: var(--eco-bg-soft);
  border-radius: 0;
  max-width: var(--eco-article-width);
}

.eco3min-callout p {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--eco-gray-800);
  margin-bottom: 0.75rem;
  text-align: left;
}

.eco3min-callout p:last-child {
  margin-bottom: 0;
}

.eco3min-callout strong:first-child {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--eco-gray-700);
  margin-bottom: 0.5rem;
}

.eco3min-callout p strong:first-child {
  display: inline;
}

.eco3min-keypoints {
  border-left-color: var(--eco-success);
  background: var(--ui-positive-surface);
}

.eco3min-warning {
  border-left-color: var(--eco-accent);
  background: var(--ui-surface-alt);
}

.eco3min-context {
  border-left-color: var(--eco-gray-700);
  background: var(--eco-bg-soft);
}

.eco3min-method {
  border-left-color: var(--eco-link);
  background: var(--ui-surface-alt);
}

.eco3min-encart {
  position: relative;
  margin: 2.25rem 0;
  padding: 1.5rem 1.75rem;
  background-color: var(--eco-bg-soft);
  border-left: 3px solid var(--eco-gold);
  border-radius: 0;
  font-size: 0.95em;
  line-height: 1.7;
  color: var(--eco-gray-800);
  max-width: var(--eco-article-width);
}

.eco3min-encart > *:first-child { margin-top: 0; }
.eco3min-encart > *:last-child { margin-bottom: 0; }

.eco3min-encart p {
  margin: 0.75rem 0;
  font-size: inherit;
  line-height: inherit;
}

.eco3min-encart a {
  color: var(--eco-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ui-link-underline) 40%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.2s ease;
}

.eco3min-encart a:hover {
  text-decoration-color: var(--eco-link);
}


/* =========================================================================
   10. NAVIGATION SOUS-PILIERS
   ========================================================================= */

.eco3min-subpillar-nav {
  display: block !important;
  margin: 2.5rem auto !important;
  padding: 1.25rem 0 !important;
  max-width: var(--eco-article-width);
  border-top: 1px solid var(--eco-border) !important;
  border-bottom: 1px solid var(--eco-border) !important;
}

.eco3min-subpillar-nav__title {
  display: block !important;
  margin: 0 0 0.75rem 0 !important;
  font-family: var(--font-mono);
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--eco-gray-500) !important;
}

.eco3min-subpillar-nav__buttons {
  display: block !important;
  font-size: 0 !important;
}

.entry-content a.eco3min-subpillar-nav__btn,
.entry-content a.eco3min-subpillar-nav__btn:visited {
  display: inline !important;
  padding: 6px 12px !important;
  margin: 0 6px 8px 0 !important;
  border: 1px solid var(--eco-gray-300) !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: var(--eco-gray-700) !important;
  text-decoration: none !important;
  font-family: var(--font-sans);
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 2.4 !important;
  white-space: nowrap !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

.entry-content a.eco3min-subpillar-nav__btn:hover {
  border-color: var(--eco-gray-800) !important;
  color: var(--eco-black) !important;
}


/* =========================================================================
   11. NAVIGATION PILIERS
   ========================================================================= */

.eco3min-pillar-nav-premium {
  margin: 2rem auto;
  max-width: var(--eco-article-width);
}

.eco3min-pillar-nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.eco3min-pillar-nav-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--eco-bg-soft);
  color: var(--eco-gray-900) !important;
  text-decoration: none !important;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
  border: 1px solid var(--eco-border);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.eco3min-pillar-nav-buttons a:hover {
  background: var(--eco-gray-100);
  border-color: var(--eco-gray-400);
  color: var(--eco-black) !important;
}

@media (max-width: 768px) {
  .eco3min-pillar-nav-buttons {
    gap: 8px;
  }
  .eco3min-pillar-nav-buttons a {
    width: 100%;
    justify-content: flex-start;
  }
}


/* =========================================================================
   12. IMAGES & FIGURES
   ========================================================================= */

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

.entry-content figure,
.wp-block-image {
  max-width: var(--eco-article-width);
  margin: 2rem auto;
}

.entry-content figcaption,
.wp-element-caption {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--eco-gray-500);
  margin-top: 0.6rem;
  text-align: center;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  max-width: var(--eco-article-width);
  line-height: 1.5;
}

.eco3min-img-small {
  text-align: center;
}

.eco3min-img-small img {
  width: 520px !important;
  max-width: 520px !important;
  height: auto !important;
}


/* =========================================================================
   13. TABLEAUX
   ========================================================================= */

.entry-content table {
  width: 100%;
  max-width: var(--eco-article-width);
  border-collapse: collapse;
  margin: 2rem auto;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}

.entry-content th,
.entry-content td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--eco-border);
}

.entry-content th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--eco-gray-700);
  background: var(--eco-bg-soft);
  border-bottom: 1px solid var(--eco-gray-300);
}

.entry-content tr:hover {
  background: var(--eco-bg-soft);
}


/* =========================================================================
   14. FAQ
   ========================================================================= */

.entry-content section.sc_fs_faq.sc_card {
  border-left: 3px solid var(--eco-gray-400);
  background: var(--eco-bg-soft);
  padding: 1.25rem 1.5rem;
  margin: 0;
  border-radius: 0;
  border-top: none !important;
  border-bottom: none !important;
  max-width: var(--eco-article-width);
}

.entry-content section.sc_fs_faq.sc_card > h2 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--eco-gray-900);
  margin-bottom: 0.5rem;
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 0;
}

.entry-content .sc_fs_faq__content p {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--eco-gray-700);
  margin: 0;
  text-align: left;
}

.entry-content .sc_fs_faq * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.entry-content .sc_fs_faq__question {
  margin-bottom: 0.375rem !important;
}

.entry-content .sc_fs_faq__content p {
  margin-bottom: 0.625rem !important;
}


/* =========================================================================
   15. TAGS & META
   ========================================================================= */

.entry-tags-items a {
  font-family: var(--font-mono);
  background-color: var(--eco-bg-soft);
  color: var(--eco-gray-800);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--eco-border) !important;
  box-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.entry-tags-items a::before {
  content: none !important;
}

.entry-tags-items a > span:first-child {
  display: none;
}

.entry-tags-items a:hover {
  background-color: var(--eco-gray-100);
  color: var(--eco-black);
}

.ct-meta-author,
.ct-meta-author-name,
.ct-meta-author-avatar,
.ct-meta-divider,
.author-name,
.author-meta,
.byline,
.post-meta .author,
.post-meta .byline,
.entry-meta .author,
.entry-meta .byline,
a[rel="author"] {
  display: none !important;
}

.entry-meta,
.ct-entry-meta,
.post-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--eco-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}

.entry-meta > :first-child,
.ct-entry-meta > :first-child,
.post-meta > :first-child {
  display: none !important;
}

.entry-meta *::before,
.ct-entry-meta *::before {
  content: none !important;
}


/* =========================================================================
   16. BOUTONS
   ========================================================================= */

.eco3min-bulletin a,
.eco3min-bulletin a:visited {
  color: var(--ui-action-text) !important;
  background-color: var(--eco-link);
  opacity: 1 !important;
  text-decoration: none !important;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.eco3min-bulletin a:hover,
.eco3min-bulletin a:focus {
  color: var(--ui-action-text) !important;
  background-color: var(--eco-link-hover);
  text-decoration: none !important;
}

.eco3min-download-btn {
  display: inline-block;
  background: var(--eco-link);
  color: var(--ui-action-text);
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  margin: 1rem 0 1.5rem 0;
  transition: background 0.15s ease;
}

.eco3min-download-btn:hover {
  background: var(--eco-link-hover);
  color: var(--ui-action-text);
  text-decoration: none;
}

.eco3min-dataset p[style*="64748b"] {
  color: var(--eco-gray-500) !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#mailpoet_form_10.mailpoet_form,
#mailpoet_form_11.mailpoet_form {
  padding: 1rem 1.25rem !important;
  max-width: 550px !important;
  margin: 1.25rem auto 1.75rem !important;
  background: var(--eco-bg-soft) !important;
  border: 1px solid var(--eco-border) !important;
  border-radius: var(--radius-sm) !important;
}

#mailpoet_form_10 .mailpoet_paragraph,
#mailpoet_form_11 .mailpoet_paragraph {
  margin-bottom: 0.625rem !important;
  line-height: 1.4 !important;
}

#mailpoet_form_10 .mailpoet_paragraph:nth-child(1),
#mailpoet_form_10 .mailpoet_paragraph:nth-child(2),
#mailpoet_form_11 .mailpoet_paragraph:nth-child(1),
#mailpoet_form_11 .mailpoet_paragraph:nth-child(2) {
  font-family: var(--font-sans);
  font-size: 0.9375rem !important;
  color: var(--eco-gray-800);
}

#mailpoet_form_10 input.mailpoet_text,
#mailpoet_form_11 input.mailpoet_text {
  height: 40px !important;
  padding: 8px 12px !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  border: 1px solid var(--eco-border) !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--ui-surface-raised) !important;
  color: var(--eco-gray-900) !important;
}

#mailpoet_form_10 input.mailpoet_submit,
#mailpoet_form_11 input.mailpoet_submit,
#mailpoet_form_14 input.mailpoet_submit,
#mailpoet_form_15 input.mailpoet_submit {
  height: 40px !important;
  padding: 0 20px !important;
  background-color: var(--ui-brand) !important;
  color: var(--ui-action-text) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  transition: background 0.15s ease !important;
  margin-top: 0 !important;
}

#mailpoet_form_10 input.mailpoet_submit:hover,
#mailpoet_form_11 input.mailpoet_submit:hover,
#mailpoet_form_14 input.mailpoet_submit:hover,
#mailpoet_form_15 input.mailpoet_submit:hover {
  background-color: var(--ui-brand-text) !important;
  cursor: pointer;
}

/* Tous les formulaires MailPoet : les couleurs saisies dans les réglages de chaque formulaire sortent en
   style="" en ligne (paragraphe noir, champ et bouton navy) ; ramenées sur les rôles. :where() garde la
   spécificité basse : les règles par id ci-dessus et le bloc navy de l'accueil (snippet 85) priment. */
:where(.mailpoet_form) .mailpoet_form_paragraph[style*="color"] {
  color: var(--ui-text) !important;
}

:where(.mailpoet_form) input.mailpoet_text {
  background-color: var(--ui-surface-raised) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

:where(.mailpoet_form) input.mailpoet_submit {
  background-color: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  color: var(--ui-action-text) !important;
}

:where(.mailpoet_form) input.mailpoet_submit:hover {
  background-color: var(--ui-brand-text) !important;
  border-color: var(--ui-brand-text) !important;
}

/* Même chose pour la police : chaque formulaire sort font-family Montserrat en ligne (jamais chargée,
   le navigateur retombe sur sa police par défaut). Champ en sans, bouton en mono comme les formulaires
   10, 11, 14 et 15 ; [style*=font-family] ne vise que ce qui porte la police en ligne. */
:where(.mailpoet_form) input.mailpoet_text[style*="font-family"] {
  font-family: var(--ui-font-sans) !important;
}

:where(.mailpoet_form) input.mailpoet_submit[style*="font-family"] {
  font-family: var(--ui-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* LuckyWP TOC (« Plan de lecture ») : thème light du plugin et fond saisi dans ses options -> rôles. */
.lwptoc .lwptoc_i {
  background-color: var(--ui-surface-alt) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

.lwptoc .lwptoc_i a,
.lwptoc .lwptoc_items a:visited {
  color: var(--ui-link) !important;
}

.lwptoc .lwptoc_i a:hover,
.lwptoc .lwptoc_i a:focus,
.lwptoc .lwptoc_i a:active {
  color: var(--ui-action-hover) !important;
}


/* =========================================================================
   17. ICÔNES OUTILS
   ========================================================================= */

.eco3min-tool-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 8px;
  fill: currentColor;
  display: inline-block;
}

h3 .eco3min-tool-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.eco3min-callout.eco3min-method .eco3min-tool-icon {
  width: 26px;
  height: 26px;
  margin-right: 10px;
}

/* v4.1 : le flex ne s'applique qu'aux titres qui portent une icône.
   Sur un h3 ordinaire il écrasait les espaces autour des <a> / <em>. */
.eco3min-callout.eco3min-method p:first-child:has(.eco3min-tool-icon),
h3.wp-block-heading:has(.eco3min-tool-icon) {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .eco3min-tool-icon {
    width: 20px;
    height: 20px;
  }
  .eco3min-callout.eco3min-method .eco3min-tool-icon {
    width: 22px;
    height: 22px;
  }
}


/* =========================================================================
   18. HERO PILIER
   ========================================================================= */

.eco3min-pillar-hero {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1rem;
}

.eco3min-pillar-hero__subtitle {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--eco-gray-700);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.eco3min-pillar-hero__tagline {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--eco-gray-700);
  margin-bottom: 1.5rem;
}


/* =========================================================================
   19. BREADCRUMB
   ========================================================================= */

.rank-math-breadcrumb {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--eco-gray-500) !important;
  margin-top: 0.25rem !important;
  margin-bottom: 1rem !important;
}

.rank-math-breadcrumb a,
.rank-math-breadcrumb p a {
  font-family: var(--font-mono) !important;
  color: var(--eco-gray-500) !important;
  text-decoration: none !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rank-math-breadcrumb a:hover {
  color: var(--eco-link) !important;
}

.rank-math-breadcrumb p {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  color: var(--eco-gray-500) !important;
  margin: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* =========================================================================
   20. FOOTER, NAVY FONCÉ
   ========================================================================= */

.eco3min-footer-block {
  padding: 3rem 1.5rem;
  background: var(--eco-navy);
  border-top: 1px solid var(--eco-border-dark);
  color: color-mix(in srgb,var(--ui-text-inverse) 80%,transparent);
}

.eco3min-footer-nav {
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.7;
  color: color-mix(in srgb,var(--ui-text-inverse) 80%,transparent);
}

.eco3min-footer-title,
.eco3min-footer-section {
  display: block;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ui-text-inverse);
}

.eco3min-footer-links,
.eco3min-footer-link {
  display: block;
  margin-bottom: 0.375rem;
}

.eco3min-footer-nav a,
.eco3min-footer-nav a:visited {
  color: var(--eco-gold-light);
  text-decoration: none;
  font-weight: 500;
}

.eco3min-footer-nav a:hover {
  color: var(--ui-text-inverse);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.eco3min-footer-disclaimer {
  max-width: 1100px;
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--eco-border-dark);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--ui-text-inverse-muted);
  line-height: 1.6;
}

.ct-footer,
.ct-footer [data-row],
.ct-footer .ct-container,
footer.site-footer,
footer.site-footer [data-row] {
  background-color: var(--eco-navy) !important;
  border-top: 1px solid var(--eco-border-dark);
}

.ct-footer {
  color: color-mix(in srgb,var(--ui-text-inverse) 80%,transparent);
}

.ct-footer a,
.ct-footer a:visited {
  color: var(--eco-gold-light);
}

.ct-footer a:hover {
  color: var(--ui-text-inverse);
}

.site-footer {
  background: var(--eco-navy);
  color: color-mix(in srgb,var(--ui-text-inverse) 80%,transparent);
  padding: 1.25rem 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

.footer-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: color-mix(in srgb,var(--ui-text-inverse) 80%,transparent);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.footer-links li {
  display: inline-block;
  margin: 0 10px;
}

.footer-links a,
.footer-links a:visited {
  text-decoration: none;
  color: var(--eco-gold-light);
}

.footer-links a:hover {
  color: var(--ui-text-inverse);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* =========================================================================
   21. MASQUAGES PAGE D'ACCUEIL
   ========================================================================= */

.home .lwptoc {
  display: none !important;
}

.home .post-modified-info,
.home .eco3min-qa-bridge {
  display: none !important;
}

.wp-block-embed,
.wp-block-group,
.wp-block-columns,
iframe {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

iframe {
  min-height: auto !important;
}


/* =========================================================================
   22. RESPONSIVE, MOBILE
   ========================================================================= */

@media (max-width: 768px) {
  .entry-content {
    padding: 1.5rem 1rem 2rem;
  }

  .entry-content h1,
  .entry-title,
  h1.page-title,
  .entry-header .page-title {
    font-size: 1.75rem;
    line-height: 1.15;
  }

  .entry-content h2 {
    font-size: 1.3125rem;
    margin-top: 2rem;
  }

  .entry-content h3 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
  }

  .entry-content p {
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .entry-content > p:first-of-type {
    font-size: 1.125rem;
    line-height: 1.5;
  }

  .eco3min-callout,
  .eco3min-encart {
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
  }

  .entry-content blockquote {
    font-size: 1.0625rem;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
  }

  article.post {
    margin: 0.75rem auto;
  }
}


/* =========================================================================
   23. PRINT
   ========================================================================= */

@media print {
  body {
    background: var(--ui-surface-raised);
    color: var(--ui-text);
  }

  .ct-header,
  .eco3min-footer-block,
  .eco3min-pillar-nav-premium,
  .eco3min-subpillar-nav {
    display: none !important;
  }

  .entry-content a {
    color: var(--ui-text);
    text-decoration: underline;
  }

  .entry-content a::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
  }

  body.eco3min-pdf .eco3min-callout,
  body.eco3min-pdf table,
  body.eco3min-pdf figure {
    break-inside: avoid;
  }
}


/* =========================================================================
   ZONE MENU, COULEUR UNIFIÉE (--eco-menu-accent)
   ========================================================================= */


/* =====================================================
   24. HEADER, BLOCKSY
   ===================================================== */

.ct-header {
  z-index: 9999;
  background-color: var(--eco-navy);
  border-bottom: 1px solid color-mix(in srgb,var(--ui-text-inverse) 8%,transparent);
  box-shadow: 0 2px 8px color-mix(in srgb,var(--ui-surface-inverse) 12%,transparent);
}

.ct-header[data-sticky="true"] {
  background-color: var(--eco-navy);
  box-shadow: 0 2px 12px color-mix(in srgb,var(--ui-surface-inverse) 20%,transparent);
}

.ct-header,
.ct-header [data-row],
.ct-header .ct-container {
  background-color: var(--eco-navy) !important;
}


/* =====================================================
   25. HEADER STICKY
   ===================================================== */

.ct-sticky-container {
  height: auto !important;
  min-height: 0 !important;
}

[data-sticky="yes:slide"],
[data-sticky*="yes"] {
  height: 55px !important;
  min-height: 55px !important;
}

[data-sticky*="yes"] [data-row="middle"] {
  height: 55px !important;
  min-height: 55px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

[data-sticky*="yes"] .ct-container {
  height: 55px !important;
  min-height: 55px !important;
  align-items: center;
}

[data-sticky*="yes"] [data-column] {
  height: 55px !important;
  display: flex;
  align-items: center;
}

[data-sticky*="yes"] .ct-menu-link {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

@media (min-width: 1025px) {
  [data-sticky="yes:slide"],
  [data-sticky*="yes"],
  [data-sticky*="yes"] [data-row="middle"],
  [data-sticky*="yes"] .ct-container,
  [data-sticky*="yes"] [data-column] {
    height: 40px !important;
    min-height: 40px !important;
  }

  [data-sticky*="yes"] .ct-menu-link {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
}


/* =====================================================
   26. MENU DESKTOP
   ===================================================== */

.ct-header .menu > li > a {
  color: var(--ui-text-inverse) !important;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 10px 14px;
  text-decoration: none !important;
}

.ct-header .menu > li > a:hover {
  background-color: color-mix(in srgb,var(--ui-text-inverse) 10%,transparent);
  border-radius: var(--radius-sm);
}

.ct-header .menu > li.current-menu-item > a {
  background-color: color-mix(in srgb,var(--ui-text-inverse) 15%,transparent);
  border-radius: var(--radius-sm);
}

@media (min-width: 1024px) {
  .ct-header .menu-item > a {
    text-transform: none !important;
  }
}

.ct-header a,
.ct-header a:visited {
  color: var(--ui-text-inverse) !important;
  text-decoration: none !important;
}

.ct-header .current-menu-item > a,
.ct-header .current-menu-ancestor > a {
  color: var(--eco-gold) !important;
  font-weight: 600;
}


/* =====================================================
   27. SOUS-MENUS
   ===================================================== */

.ct-header .sub-menu,
.ct-header .ct-mega-menu {
  background-color: var(--eco-navy);
  border: 1px solid color-mix(in srgb,var(--ui-text-inverse) 8%,transparent);
  box-shadow: 0 12px 32px color-mix(in srgb,var(--ui-surface-inverse) 40%,transparent);
  border-radius: var(--radius-sm);
}

.ct-header .sub-menu a,
.ct-header .ct-mega-menu a {
  color: color-mix(in srgb,var(--ui-text-inverse) 85%,transparent) !important;
  padding: 10px 16px;
  font-weight: 500;
  font-size: 0.9rem;
}

.ct-header .sub-menu a:hover,
.ct-header .ct-mega-menu a:hover {
  background-color: transparent;
  color: var(--ui-text-inverse) !important;
}

/* Séparateurs pointillés du réglage Blocksy (--dropdown-divider) retirés. */
.ct-header .sub-menu .menu-item {
  border-top: 0;
}

.ct-header .menu-item-has-children > a::after {
  color: color-mix(in srgb,var(--ui-text-inverse) 75%,transparent);
}


/* =====================================================
   28. MENU MOBILE
   ===================================================== */

@media (max-width: 1024px) {
  .ct-menu-mobile,
  .ct-menu-mobile .sub-menu,
  .ct-panel,
  .ct-panel-inner,
  .ct-panel[data-behaviour*="menu"],
  [data-panel="mobile-menu"],
  .ct-mobile-menu,
  .ct-offcanvas-menu,
  .ct-header-text,
  .ct-header-text[data-id="text"],
  div[data-id="text"],
  .ct-header [data-id="text"] {
    background: var(--eco-navy) !important;
  }

  .ct-header .sub-menu,
  .ct-header .ct-mega-menu,
  .ct-menu-mobile .sub-menu,
  .ct-menu-mobile .ct-mega-menu,
  [class*="ct-menu"] .sub-menu {
    background: var(--eco-navy) !important;
    border: none !important;
    box-shadow: none !important;
  }

  .ct-menu-mobile > ul > li > a,
  .ct-panel a,
  .ct-mobile-menu a {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ui-text-inverse) !important;
    padding: 16px 20px;
    background: transparent !important;
  }

  .ct-menu-mobile .sub-menu > li > a,
  .ct-panel .sub-menu a {
    font-size: 0.95rem;
    color: color-mix(in srgb,var(--ui-text-inverse) 75%,transparent) !important;
    padding: 12px 24px;
    background: transparent !important;
  }

  .ct-menu-mobile a:hover,
  .ct-panel a:hover {
    background: color-mix(in srgb,var(--ui-text-inverse) 8%,transparent) !important;
    color: var(--ui-text-inverse) !important;
  }

  .ct-toggle-dropdown,
  .ct-menu-mobile .ct-toggle-dropdown {
    color: var(--ui-text-inverse-muted) !important;
  }

  .ct-panel-backdrop {
    background: color-mix(in srgb,var(--ui-surface-inverse) 60%,transparent) !important;
  }

  .ct-header *,
  .ct-header div,
  .ct-header-text *,
  [data-device="mobile"] *,
  [data-device="mobile"] .entry-content {
    background-color: transparent !important;
  }

  .ct-header,
  .ct-header [data-row],
  .ct-header .ct-container {
    background-color: var(--eco-navy) !important;
  }
}

.ct-header-text,
.ct-header .ct-header-text,
.ct-header [data-id="text"],
.ct-header div[class*="header-text"],
.ct-header-text .entry-content,
.ct-header-text .entry-content.is-layout-flow,
.ct-header .entry-content,
.ct-header [data-id="text"] .entry-content,
div.ct-header-text > div {
  background: transparent !important;
}


/* =====================================================
   30. MENU "TOUS LES THÈMES", FOND BLANC
   ===================================================== */

#menu-menu-desktop-fulll .sub-menu {
  background-color: var(--ui-surface-raised) !important;
  border: 1px solid var(--ui-border);
  box-shadow: 0 10px 30px color-mix(in srgb,var(--ui-surface-inverse) 8%,transparent);
}

#menu-menu-desktop-fulll .sub-menu a {
  color: var(--ui-text) !important;
  font-weight: 500;
  line-height: 1.45;
}

#menu-menu-desktop-fulll .sub-menu a:hover {
  background-color: var(--ui-surface);
  color: var(--ui-text) !important;
}

#menu-menu-desktop-fulll .sub-menu li {
  padding: 6px 0;
}

#menu-menu-desktop-fulll .menu-item-has-children > a {
  font-weight: 600;
}


.ct-header-search {
  background: var(--eco-navy);
  padding: 6px 10px;
  border-radius: var(--radius-md);
}

button.ct-header-search {
  background: var(--eco-navy) !important;
  border-radius: var(--radius-md);
  padding: 6px;
}



/* =====================================================
   32. FORCE COMPACTAGE TOTAL
   ===================================================== */

@media (max-width: 768px) {

  #header [data-row],
  #header [data-row] .ct-container,
  #header [data-row] .ct-row-inner,
  #header [data-column] {
    height: 48px !important;
    min-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  #header .ct-header-text,
  #header .ct-header-text > div,
  #header .ct-header-text p,
  #header .ct-header-text .entry-content,
  #header .ct-header-text .entry-content p {
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }

  .site-logo-container img {
    max-height: 26px !important;
    width: auto !important;
  }
}


/* =====================================================
   33. HEADER DESKTOP, LISERÉ + COMPACT
   ===================================================== */

@media (min-width: 1025px) {

  #header [data-row="middle"] {
    border-top: 1px solid color-mix(in srgb,var(--ui-text-inverse) 8%,transparent);
  }

  #header [data-row="middle"],
  #header [data-row="middle"] .ct-container {
    height: 44px !important;
    min-height: 44px !important;
  }

  #header [data-row="middle"] [data-column] {
    display: flex;
    align-items: center;
  }

  .ct-header .menu > li > a {
    padding: 6px 12px !important;
    font-size: 14px;
  }
}


/* =====================================================
   34. RESPIRATION LOGO HEADER
   ===================================================== */

@media (min-width: 1025px) {

  .ct-header .site-logo-container {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .ct-header .site-logo-container img {
    max-height: 34px;
  }
}


/* =====================================================
   35. SOULIGNEMENT MENU, UNIQUE SOURCE DE VÉRITÉ
   ===================================================== */

:root {
  --eco-menu-accent: var(--eco-gold);
  --eco-menu-thickness: 4px;
  --eco-menu-offset: 6px;
}

[data-menu] > ul > li > a::after,
.ct-header .menu > li > a::after {
  display: none !important;
  content: none !important;
}

.ct-header .menu > li > a {
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration-skip-ink: auto !important;
  text-decoration: underline !important;
  text-decoration-line: underline !important;
  text-underline-offset: var(--eco-menu-offset) !important;
  text-decoration-thickness: var(--eco-menu-thickness) !important;
  text-decoration-color: transparent !important;
  transition: text-decoration-color 0.2s ease, color 0.2s ease !important;
}

.ct-header .menu > li.current-menu-item > a,
.ct-header .menu > li.current-menu-ancestor > a,
.ct-header .menu > li.current-post-ancestor > a,
.ct-header .menu > li[class*="current"] > a,
.ct-header .menu > li > a:hover {
  border-bottom: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.ct-header .menu > li > a:hover,
.ct-header .menu > li > a:focus-visible,
.ct-header .menu > li > a.eco3-menu-current,
.ct-header .menu > li.current-menu-item > a,
.ct-header .menu > li.current-menu-ancestor > a,
.ct-header .menu > li.current-post-ancestor > a,
.ct-header .menu > li[class*="current"] > a,
.ct-header [data-menu] > ul > li.current-menu-item > a,
.ct-header [data-menu] > ul > li.current-menu-ancestor > a,
.ct-header [data-menu] > ul > li.current-post-ancestor > a,
.ct-header [data-menu] > ul > li[class*="current"] > a,
.category-macro-geopolitique .menu-macro > a,
.category-politique-monetaire-taux .menu-polmon > a,
.category-matieres-premieres .menu-matieres > a,
.category-marches .menu-marches > a,
.category-investissement-strategies .menu-strategie > a,
.category-actions-et-etf .menu-actions > a,
.category-immobilier .menu-immo > a,
.category-crypto-actifs .menu-crypto > a,
.category-education-financiere .menu-edu > a {
  text-decoration-color: var(--eco-menu-accent) !important;
  color: var(--ui-text-inverse) !important;
}

/* Un seul item souligné : si un item de premier niveau est la page courante,
   ses frères ancêtres (current-page-ancestor, ex. Apprendre sur Simulateurs)
   ne le sont pas. Survol et focus clavier conservés. */
.ct-header .menu:has(> li.current-menu-item) > li:not(.current-menu-item) > a:not(:hover):not(:focus-visible) {
  text-decoration-color: transparent !important;
}

/* Sous-menus : même soulignement que le menu, au survol et sur la page courante. */
.ct-header .sub-menu a,
.ct-header .ct-mega-menu a {
  text-decoration: underline !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: var(--eco-menu-thickness) !important;
  text-underline-offset: var(--eco-menu-offset) !important;
  text-decoration-skip-ink: auto !important;
  transition: text-decoration-color 0.2s ease, color 0.2s ease !important;
}

.ct-header .sub-menu a:hover,
.ct-header .sub-menu a:focus-visible,
.ct-header .sub-menu .current-menu-item > a,
.ct-header .ct-mega-menu a:hover,
.ct-header .ct-mega-menu a:focus-visible {
  text-decoration-color: var(--eco-menu-accent) !important;
  color: var(--ui-text-inverse) !important;
}


/* =====================================================
   37. QUICKNAV VISIBILITÉ FR / EN
   ===================================================== */

.quicknav-en {
  display: none !important;
}

.quicknav-fr {
  display: flex;
}

body[class*="/en/"] .quicknav-en,
body.lang-en .quicknav-en,
body.english .quicknav-en {
  display: flex !important;
}

body[class*="/en/"] .quicknav-fr,
body.lang-en .quicknav-fr,
body.english .quicknav-fr {
  display: none !important;
}


/* =========================================================================
   44. ECO3MIN Q&A PAGES, v4.0 (terracotta, flat, hairlines)
   -------------------------------------------------------------------------
   Migration doctrine v3.5→native : or → chrome uniquement, accent contenu
   = terracotta, zéro gradient, zéro ombre, radius 2px.
   Les fuites globales de l'ancienne section (p / p strong non scopés)
   sont supprimées.
   ========================================================================= */

.eco3-qa-tldr {
    background: var(--eco-bg-warm);
    border: 1px solid var(--eco-border);
    border-left: 3px solid var(--eco-terra);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    margin: 28px 0 36px 0;
    position: relative;
    box-shadow: none;
}

.eco3-qa-tldr::before {
    content: "TL;DR";
    position: absolute;
    top: -10px;
    left: 24px;
    background: var(--eco-gray-900);
    color: var(--ui-text-inverse);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.eco3-qa-tldr p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.55;
    color: var(--eco-gray-800);
}

.eco3-qa-tldr p strong {
    font-weight: 700;
    color: var(--eco-gray-900);
}

@media (max-width: 768px) {
    .eco3-qa-tldr { padding: 22px 18px; margin: 24px 0 32px 0; }
    .eco3-qa-tldr p { font-size: 16px; }
}

.eco3-qa-toc {
    background: var(--eco-bg-soft);
    border: 1px solid var(--eco-border);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin: 28px 0 36px 0;
}

.eco3-qa-toc > p:first-child {
    margin: 0 0 12px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--eco-gray-700);
}

.eco3-qa-toc > p:first-child strong {
    color: inherit;
    font-weight: 500;
}

.eco3-qa-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 24px;
}

.eco3-qa-toc li { margin: 0; padding: 0; line-height: 1.4; }

.eco3-qa-toc a {
    color: var(--eco-gray-800);
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: 14px;
    border-bottom: 1px dotted transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
    display: inline-block;
    padding: 4px 0;
}

.eco3-qa-toc a:hover {
    color: var(--eco-terra);
    border-bottom-color: var(--eco-terra);
}

.eco3-qa-toc a::before {
    content: "\2192\00A0\00A0";
    color: var(--eco-terra);
    font-weight: bold;
}

@media (max-width: 768px) {
    .eco3-qa-toc ul { grid-template-columns: 1fr; }
}

.eco3-qa-signature {
    margin: 36px 0;
    padding: 28px 32px;
    text-align: center;
    border-top: 1px solid var(--eco-terra);
    border-bottom: 1px solid var(--eco-terra);
    position: relative;
    background: transparent;
}

.eco3-qa-signature em {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
    color: var(--eco-gray-900);
    font-weight: 400;
    letter-spacing: 0.2px;
    quotes: "\201C" "\201D";
}

.eco3-qa-signature em::before {
    content: open-quote;
    color: var(--eco-terra);
    font-size: 32px;
    line-height: 0;
    margin-right: 4px;
    vertical-align: -10px;
}

.eco3-qa-signature em::after {
    content: close-quote;
    color: var(--eco-terra);
    font-size: 32px;
    line-height: 0;
    margin-left: 4px;
    vertical-align: -10px;
}

@media (max-width: 768px) {
    .eco3-qa-signature { padding: 24px 16px; margin: 28px 0; }
    .eco3-qa-signature em { font-size: 17px; }
}

.eco3-qa-action {
    background: var(--eco-bg-soft);
    border: 1px solid var(--eco-border);
    border-left: 3px solid var(--eco-gray-700);
    border-radius: var(--radius-md);
    padding: 24px 28px;
    margin: 28px 0;
    box-shadow: none;
}

.eco3-qa-action > p:first-child {
    margin: 0 0 16px 0;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--eco-gray-700);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.eco3-qa-action ul { margin: 0 0 16px 0; padding: 0; list-style: none; }

.eco3-qa-action ul li {
    margin: 0 0 14px 0;
    padding: 14px 16px;
    background: var(--ui-surface-raised);
    border-radius: var(--radius-md);
    border: 1px solid var(--eco-border);
    border-left: 3px solid var(--eco-terra);
    line-height: 1.5;
    font-family: var(--font-sans);
    font-size: 14px;
    box-shadow: none;
}

.eco3-qa-action ul li strong {
    display: block;
    font-family: var(--font-mono);
    color: var(--eco-gray-700);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
    font-weight: 500;
}

.eco3-qa-action > p:last-child {
    margin: 0;
    padding: 12px 0 0 0;
    border-top: 1px dashed var(--eco-border);
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--eco-gray-600);
    line-height: 1.5;
}

.eco3-qa-action > p:last-child em { font-style: italic; }

@media (max-width: 768px) {
    .eco3-qa-action { padding: 20px 16px; }
    .eco3-qa-action ul li { padding: 12px 14px; }
}

.eco3-qa-deeper {
    background: var(--eco-bg-soft);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin: 28px 0;
    border: 1px solid var(--eco-border);
}

.eco3-qa-deeper p {
    margin: 0 0 10px 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
}

.eco3-qa-deeper p:last-child { margin-bottom: 0; }

.eco3-qa-deeper p strong {
    color: var(--eco-gray-900);
    font-weight: 600;
    margin-right: 4px;
}

.eco3-qa-deeper a {
    color: var(--eco-link);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-brand) 55%, transparent);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.eco3-qa-deeper a:hover { color: var(--eco-terra); border-bottom-color: var(--eco-terra); }

@media (max-width: 768px) {
    .eco3-qa-deeper { padding: 18px 16px; }
    .eco3-qa-deeper p { font-size: 14px; }
}

.eco3-qa-related {
    list-style: none;
    padding: 0;
    margin: 24px 0 36px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.eco3-qa-related li { margin: 0; }

.eco3-qa-related li a {
    display: block;
    padding: 16px 20px;
    background: var(--ui-surface-raised);
    border: 1px solid var(--eco-border);
    border-radius: var(--radius-lg);
    color: var(--eco-gray-900);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 15px;
    line-height: 1.4;
    font-weight: 700;
    transition: border-color 0.2s ease, background 0.2s ease;
    position: relative;
    padding-right: 32px;
}

.eco3-qa-related li a::after {
    content: "\2192";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--eco-terra);
    font-size: 16px;
    transition: transform 0.2s ease;
}

.eco3-qa-related li a:hover {
    border-color: var(--eco-terra);
    background: var(--eco-bg-warm);
    box-shadow: none;
}

.eco3-qa-related li a:hover::after {
    transform: translateY(-50%) translateX(4px);
}

@media (max-width: 768px) {
    .eco3-qa-related { grid-template-columns: 1fr; gap: 10px; }
    .eco3-qa-related li a { padding: 14px 18px; padding-right: 36px; font-size: 14px; }
}

.eco3-qa-footer {
    margin: 48px 0 24px 0;
    padding: 24px 0 0 0;
    border-top: 1px solid var(--eco-border);
    text-align: center;
}

.eco3-qa-footer p {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.7;
    color: var(--eco-gray-600);
}

.eco3-qa-footer em { font-style: italic; }

.eco3-qa-footer a {
    color: var(--eco-link);
    text-decoration: none;
    border-bottom: 1px solid var(--eco-border);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.eco3-qa-footer a:hover {
    border-bottom-color: var(--eco-terra);
    color: var(--eco-terra);
}

/* Titres ancrés des Q&A, alignés sur la hiérarchie éditoriale globale */
.entry-content h2[id] {
    margin-top: 56px;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--eco-border);
    font-family: var(--font-display);
    color: var(--eco-gray-900);
    font-weight: 700;
    scroll-margin-top: 90px;
}

.entry-content h3 {
    scroll-margin-top: 90px;
}

.entry-content h2 span[id] {
    scroll-margin-top: 90px;
}

@media print {
    .eco3-qa-toc,
    .eco3-qa-related,
    .eco3-qa-deeper,
    .eco3-qa-action {
        page-break-inside: avoid;
    }
    .eco3-qa-signature {
        font-style: italic;
        border: 1px solid color-mix(in srgb, var(--ui-text) 45%, transparent);
    }
}


/* =========================================================================
   45. BAROMÈTRE MACRO MENSUEL (v6.4)
   ========================================================================= */

.eco3-barometer {
  background: var(--eco-link) !important;
  color: var(--eco-bg-page) !important;
  padding: 80px 24px !important;
  position: relative !important;
}

.eco3-barometer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 60px !important;
  height: 3px !important;
  background: var(--eco-gold-light) !important;
}

.eco3-barometer__inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.eco3-barometer__layout {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr !important;
  gap: 56px !important;
  align-items: center !important;
  margin-top: 32px !important;
}

.eco3-barometer__title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.85rem, 3.4vw, 2.6rem) !important;
  line-height: 1.15 !important;
  margin: 0 0 18px !important;
  color: var(--eco-bg-page) !important;
  letter-spacing: -0.01em !important;
}

.eco3-barometer__lead {
  font-family: var(--font-sans) !important;
  font-size: 1.075rem !important;
  line-height: 1.65 !important;
  color: color-mix(in srgb, var(--ui-text-inverse) 88%, transparent) !important;
  margin: 0 0 24px !important;
}

.eco3-barometer__lead strong {
  color: var(--eco-gold-light) !important;
  font-weight: 600 !important;
}

.eco3-barometer__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
}

.eco3-barometer__list li {
  padding: 12px 0 12px 26px !important;
  position: relative !important;
  color: color-mix(in srgb, var(--ui-text-inverse) 82%, transparent) !important;
  font-size: 0.94rem !important;
  line-height: 1.45 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-text-inverse) 10%, transparent) !important;
}

.eco3-barometer__list li::before {
  content: "→" !important;
  position: absolute !important;
  left: 0 !important;
  top: 12px !important;
  color: var(--eco-gold-light) !important;
  font-weight: 600 !important;
}

.eco3-barometer__list li strong {
  color: var(--eco-bg-page) !important;
  font-weight: 600 !important;
  display: block !important;
  margin-bottom: 2px !important;
}

.eco3-barometer__cta {
  text-align: center !important;
  padding: 36px 28px !important;
  background: color-mix(in srgb, var(--ui-text-inverse) 4%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--ui-brand-inverse) 28%, transparent) !important;
  border-radius: var(--radius-sm) !important;
}

.eco3-barometer__cta-eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--eco-gold-light) !important;
  margin: 0 0 8px !important;
}

.eco3-barometer__cta-title {
  font-family: var(--font-display) !important;
  font-size: 1.45rem !important;
  color: var(--eco-bg-page) !important;
  margin: 0 0 22px !important;
  line-height: 1.25 !important;
}

.eco3-barometer__btn {
  display: inline-block !important;
  background: var(--eco-gold-light) !important;
  color: var(--eco-link) !important;
  padding: 14px 28px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
  border: 1px solid var(--eco-gold-light) !important;
  transition: all 0.2s ease !important;
  margin-bottom: 14px !important;
}

.eco3-barometer__btn:hover {
  background: var(--eco-bg-page) !important;
  border-color: var(--eco-bg-page) !important;
  color: var(--eco-link) !important;
  transform: translateY(-1px) !important;
}

.eco3-barometer__note {
  font-size: 0.78rem !important;
  color: color-mix(in srgb, var(--ui-text-inverse) 55%, transparent) !important;
  margin: 0 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.04em !important;
}

@media (max-width: 900px) {
  .eco3-barometer {
    padding: 56px 20px !important;
  }
  .eco3-barometer__layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .eco3-barometer__list {
    grid-template-columns: 1fr !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   BLOC 2 · Lecture du régime en cours (Observatoire / Macro Watch)
   ───────────────────────────────────────────────────────────────────────── */

.eco3-regime-link {
  background: linear-gradient(135deg, var(--eco-link) 0%, var(--ui-action-hover) 100%) !important;
  color: var(--eco-bg-page) !important;
  padding: 36px 32px !important;
  margin: 32px 0 48px !important;
  border-radius: var(--radius-md) !important;
  border-left: 4px solid var(--eco-gold-light) !important;
}

.eco3-regime-link__inner {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 32px !important;
  align-items: center !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.eco3-regime-link__text {
  flex: 1 !important;
}

.eco3-regime-link__eyebrow {
  font-family: var(--font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--eco-gold-light) !important;
  margin: 0 0 6px !important;
}

.eco3-regime-link__title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important;
  margin: 0 0 10px !important;
  color: var(--eco-bg-page) !important;
  line-height: 1.25 !important;
}

.eco3-regime-link__desc {
  font-size: 0.96rem !important;
  line-height: 1.55 !important;
  color: color-mix(in srgb, var(--ui-text-inverse) 85%, transparent) !important;
  margin: 0 !important;
}

.eco3-regime-link__desc strong {
  color: var(--eco-gold-light) !important;
  font-weight: 600 !important;
}

.eco3-regime-link__btn {
  display: inline-block !important;
  background: var(--eco-gold-light) !important;
  color: var(--eco-link) !important;
  padding: 13px 24px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.94rem !important;
  text-decoration: none !important;
  border: 1px solid var(--eco-gold-light) !important;
  border-radius: var(--radius-sm) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.eco3-regime-link__btn:hover {
  background: var(--eco-bg-page) !important;
  border-color: var(--eco-bg-page) !important;
  color: var(--eco-link) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 768px) {
  .eco3-regime-link {
    padding: 28px 22px !important;
    margin: 24px 0 36px !important;
  }
  .eco3-regime-link__inner {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .eco3-regime-link__btn {
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* =========================================================================
   46. CARD MEDIA, Featured image on hub cards
   ========================================================================= */

.eco3-card--study {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.eco3-card__media {
  display: block;
  position: relative;
  width: calc(100% + 3rem);
  margin: -1.5rem -1.5rem 1.25rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--eco-bg-hero);
  border-bottom: 1px solid var(--eco-hairline-soft);
  text-decoration: none;
}

.eco3-card__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.eco3-card--study:hover .eco3-card__media-img {
  transform: scale(1.04);
}

@media (max-width: 600px) {
  .eco3-card__media {
    aspect-ratio: 2 / 1;
  }
}

.eco3-card__media:empty {
  display: none;
}


/* =========================================================================
   FIN v3.4, blocs hubnav + header-text
   ========================================================================= */

.eco3-hubnav{margin:0 0 1.25rem;}
.eco3-hubnav__label{display:block;font-family:var(--ui-font-sans);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ui-brand-text);font-weight:700;margin-bottom:.6rem;}
.eco3-hubnav__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.6rem;}
.eco3-hubnav__grid br{display:none!important;}
.eco3-hubnav__card{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;background:var(--ui-surface-raised);border:1px solid var(--ui-border);border-left:3px solid transparent;border-radius:4px;text-decoration:none!important;box-shadow:none!important;transition:border-color .15s,background .15s,transform .15s;}
.eco3-hubnav__card:hover{border-left-color:var(--ui-nav-accent);background:var(--ui-surface-alt);transform:translateY(-1px);}
.eco3-hubnav__flag{font-size:1.35rem;line-height:1;flex-shrink:0;}
.eco3-hubnav__body{display:flex;flex-direction:column;flex:1;min-width:0;}
.eco3-hubnav__name{font-family:var(--ui-font-serif);font-size:.95rem;color:var(--ui-text)!important;font-weight:700;line-height:1.15;word-break:normal!important;overflow-wrap:break-word;}
.eco3-hubnav__count{font-family:var(--ui-font-mono);font-size:.72rem;color:var(--ui-text-muted);margin-top:.18rem;letter-spacing:.02em;}
.eco3-hubnav__arrow{color:var(--ui-nav-accent);font-size:1.1rem;font-weight:700;margin-left:auto;flex-shrink:0;}

.ct-header-text .entry-content,
.ct-header-text .entry-content.is-layout-flow {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}



/* =========================================================================
   (v3.5 → v4.0) L'ancien bloc « HARMONISATION CLAUDE DESIGN » a été
   absorbé nativement : terracotta = --eco-terra dans les tokens,
   radius 2px partout, zéro ombre contenu, Q&A réécrite en section 44.
   ========================================================================= */

/* Coins 2px sur les hubnav cards (valeur littérale historique) */
.eco3-hubnav__card { border-radius: 2px; }

/* ---- TL;DR Eco3min) bloc unifié, insensible au tag (div OU p) ---- */
.eco3-tldr {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: color-mix(in srgb, var(--ui-brand) 5%, transparent);
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--eco-terra);
  border-radius: var(--radius-md);
}

/* Reset : tue les marges/typo héritées du thème.
   Sélecteurs à 2 classes → priment sur .entry-content p / li */
.eco3-tldr .eco3-tldr__label,
.eco3-tldr .eco3-tldr__lead,
.eco3-tldr .eco3-tldr__list {
  margin: 0;
  padding: 0;
}
.eco3-tldr .eco3-tldr__lead,
.eco3-tldr .eco3-tldr__list { margin-top: 0.75rem; }

.eco3-tldr .eco3-tldr__label {
  display: block;                  /* rendu identique que ce soit div ou p */
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-brand-text);
  line-height: 1.2;
}

.eco3-tldr .eco3-tldr__lead {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  color: inherit;
}

.eco3-tldr .eco3-tldr__list { list-style: none; }
.eco3-tldr .eco3-tldr__list li {
  margin: 0;
  position: relative;
  padding-left: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: inherit;
}
.eco3-tldr .eco3-tldr__list li + li { margin-top: 0.5rem; }
.eco3-tldr .eco3-tldr__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--ui-brand);
  border-radius: 50%;
}


/* =========================================================================
   47. LAYOUT LONGFORM, RAIL DROIT, TOC, CIRCULATION, PROGRESSION (v4.0)
   -------------------------------------------------------------------------
   Tout ce bloc est scopé sur body.eco3-has-rail, posée par le snippet PHP
   « Eco3min Article Rail » sur les articles (posts) et les pages Q&A
   (/qr/ et /en/qa/). Piliers, sous-piliers, hubs, home : jamais concernés.
   DOM injecté par le snippet dans .entry-content :
     .eco3-colwrap  (tout le contenu existant, inchangé)
     aside.eco3-rail (TOC + À lire ensuite + dataset + newsletter)
     section.eco3-next (fin d'article, posts uniquement)
   ========================================================================= */

/* ---------- Barre de progression de lecture (fixe, hairline) ---------- */
.eco3-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 10000;
  background: transparent;
  pointer-events: none;
}

body.admin-bar .eco3-progress { top: 32px; }

.eco3-progress__bar {
  height: 2px;
  width: 0%;
  background: var(--ui-border);
  transition: width 0.08s linear;
}

/* Desktop : le sommaire du rail montre déjà la section en cours (14/10/2026) */
@media (min-width: 1101px) {
  .eco3-progress { display: none; }
}

/* Mobile : le JS du snippet 207 pose la barre au bas du header collant (14/10/2026).
   Les règles du header (grille, min-height, fonds transparents en !important) ne doivent pas l'atteindre. */
@media (max-width: 1100px) {
  /* (1,2,0) : bat « #header [data-row] > div » (1,1,1) de Blocksy. */
  #header [data-row] > .eco3-progress {
    position: absolute;
    top: auto;
    bottom: 0;
    display: block;
    min-height: 0;
    height: 2px;
    border: 0;
  }

  #header .eco3-progress__bar {
    background-image: linear-gradient(var(--ui-border), var(--ui-border));
  }
}

/* ---------- « Temps de lecture » : rétrogradé en méta discrète ---------- */
.eco3-has-rail .eco-reading-time {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eco-gray-500) !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--eco-border);
}

/* ---------- Immunité du header : aucun layout longform ne doit jamais
     toucher un .entry-content du chrome (header-text / quicknav). ---------- */
.ct-header .entry-content,
.ct-header-text .entry-content {
  display: block !important;
  grid-template-columns: none !important;
}

/* ---------- Grille : colonne de lecture + rail (desktop large) ---------- */
@media (min-width: 1101px) {

  .eco3-has-rail .site-main [data-content] > article {
    max-width: var(--eco-band-width) !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .eco3-has-rail .site-main [data-content] > article {
    background: var(--eco-bg-article) !important;
  }

  .eco3-has-rail .site-main .hero-section.is-width-constrained,
  .eco3-has-rail .site-main .entry-header {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }

  .eco3-has-rail .site-main .entry-content {
    display: grid;
    grid-template-columns: minmax(0, var(--eco-article-width)) var(--eco-rail-width);
    gap: 0 var(--eco-rail-gutter);
    justify-content: center;
    /* PAS de align-items:start : le rail doit s'étirer sur toute la
       hauteur de la rangée pour que la TOC sticky puisse y voyager. */
    max-width: none;
  }

  .eco3-colwrap {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: var(--eco-article-width);
  }

  /* Neutralise la contrainte de layout Gutenberg (is-layout-constrained
     plafonne et re-centre chaque enfant direct avec !important) sur les
     trois blocs injectés par le snippet. */
  .eco3-has-rail .site-main .entry-content.is-layout-constrained > .eco3-colwrap {
    max-width: var(--eco-article-width) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .eco3-has-rail .site-main .entry-content.is-layout-constrained > .eco3-rail {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .eco3-has-rail .site-main .entry-content.is-layout-constrained > .eco3-next {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .eco3-rail {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 8px;
    /* Le rail s'étire sur toute la hauteur de l'article : la TOC,
       dernier bloc, y voyage en sticky pendant toute la lecture. */
  }

  .eco3-rail .eco3-toc {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--eco-gray-300) transparent;
  }

  .eco3-rail .eco3-toc::-webkit-scrollbar { width: 6px; }
  .eco3-rail .eco3-toc::-webkit-scrollbar-thumb {
    background: var(--eco-gray-300);
    border-radius: 3px;
  }

  /* Un seul « À lire ensuite » à la fois : sur desktop le rail fait le
     travail, le module de fin d'article est réservé au < 1101px
     (mobile/tablette, où le rail n'existe pas). */
  .eco3-next {
    display: none;
  }

  /* La TOC inline (lwptoc / Q&A) cède la place à la TOC du rail */
  .eco3-has-rail .eco3-colwrap .lwptoc,
  .eco3-has-rail .eco3-colwrap .eco3-qa-toc {
    display: none !important;
  }

  /* Un seul CTA newsletter par contexte : sur desktop le rail l'affiche,
     les formulaires MailPoet inline du contenu sont masqués. Sous 1101px
     (pas de rail), l'inline reprend seul la main. */
  .eco3-has-rail .eco3-colwrap .mailpoet_form {
    display: none !important;
  }
}

/* En dessous de 1101px : le rail disparaît, la TOC inline reprend la main */
@media (max-width: 1100px) {
  .eco3-rail { display: none; }
}

/* ---------- Rail : labels, TOC, cards ---------- */
/* (0,2,0) : .eco3-rail__label seul perd contre .entry-content p (13/10/2026) */
.eco3-rail .eco3-rail__label {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eco-gray-900);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--eco-border);
}

.eco3-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.eco3-toc__list li { margin: 0; }

.eco3-toc__list a {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--eco-gray-700);
  text-decoration: none !important;
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--eco-hairline-soft);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.eco3-toc__list a:hover {
  color: var(--eco-terra);
}

.eco3-toc__list a.eco3-toc__active {
  color: var(--eco-gray-900);
  font-weight: 700;
  border-left-color: var(--eco-terra);
}

.eco3-toc__pos {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eco-terra);
  margin: 12px 0 0;
}

/* Cards de circulation compactes (rail) */
.eco3-railcard {
  padding: 13px 0;
  border-bottom: 1px solid var(--eco-hairline-soft);
}

.eco3-rail__group .eco3-railcard:last-child { border-bottom: none; padding-bottom: 0; }

.eco3-railcard__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eco-terra);
  margin-bottom: 6px;
}

a.eco3-railcard__title,
a.eco3-railcard__title:visited {
  display: block;
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.45;
  font-weight: 700;
  color: var(--eco-gray-900);
  text-decoration: none !important;
  transition: color 0.15s ease;
}

a.eco3-railcard__title:hover { color: var(--eco-terra); }

/* Card dataset (rail) */
.eco3-raildataset {
  border: 1px solid var(--eco-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  background: var(--eco-bg-page);
}

.eco3-raildataset__ticker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--eco-gray-900);
  color: var(--ui-text-inverse);
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}

.eco3-raildataset p {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--eco-gray-700);
  margin: 8px 0 0;
}

/* Newsletter (rail), compacte le formulaire MailPoet existant */
.eco3-rail__news { border-top: 2px solid var(--eco-gray-900); padding-top: 14px; }

.eco3-rail__news .eco3-rail__label { border-bottom: none; padding-bottom: 0; margin-bottom: 6px; color: var(--eco-gray-900); }

.eco3-rail__news > p {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--eco-gray-700);
  margin: 0 0 10px;
}

.eco3-rail__news .mailpoet_form {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  max-width: none !important;
}

/* ---------- Fin d'article : « À lire ensuite » (posts) ---------- */
.eco3-next {
  margin-top: 56px;
  padding-top: 0;
}

.eco3-next__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 2px solid var(--eco-gray-900);
  padding-bottom: 12px;
}

.eco3-next__head h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 !important;
  border: none !important;
  padding: 0 !important;
  color: var(--eco-gray-900);
}

.eco3-next__head a,
.eco3-next__head a:visited {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--eco-link);
  white-space: nowrap;
}

.eco3-next__head a:hover { color: var(--eco-terra); }

.eco3-next__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
}

.eco3-nextcard {
  padding: 22px 0 26px;
  border-top: 1px solid var(--eco-hairline);
}

.eco3-nextcard__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eco-terra);
  margin-bottom: 10px;
}

.eco3-nextcard h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.eco3-nextcard h3 a,
.eco3-nextcard h3 a:visited {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--eco-gray-900);
  text-decoration: none !important;
  transition: color 0.15s ease;
}

.eco3-nextcard h3 a:hover { color: var(--eco-terra); }

.eco3-nextcard p {
  font-family: var(--font-sans) !important;
  font-size: 0.84rem !important;
  line-height: 1.6 !important;
  color: var(--eco-gray-700) !important;
  margin: 0 !important;
}

@media (max-width: 1100px) {
  .eco3-next__grid { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Rythme longform : kickers numérotés + hairlines (posts) ----- */
.single-post .eco3-colwrap { counter-reset: eco3sec; }

.single-post .eco3-colwrap > h2 {
  counter-increment: eco3sec;
  border-top: 1px solid var(--eco-hairline);
  padding-top: 2.4rem;
  margin-top: 3.25rem;
}

.single-post .eco3-colwrap > h2::before {
  content: counter(eco3sec, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--eco-terra);
  margin-bottom: 12px;
}

/* ---------- Pull quote, respiration forte (usage éditorial) ---------- */
.eco3-pull {
  margin: 3rem 0;
  padding: 2rem 0;
  border-top: 1px solid var(--eco-terra);
  border-bottom: 1px solid var(--eco-terra);
  text-align: center;
  max-width: var(--eco-article-width);
}

.eco3-pull p {
  font-family: var(--font-display) !important;
  font-size: 1.35rem !important;
  line-height: 1.5 !important;
  font-style: normal;
  color: var(--eco-gray-900) !important;
  margin: 0 !important;
  text-wrap: balance;
}

/* ---------- Print & divers ---------- */
@media print {
  .eco3-rail,
  .eco3-progress,
  .eco3-next {
    display: none !important;
  }
}

/* =========================================================================
   48. FINITIONS v4.1, CHROME, ALIGNEMENT, ACCESSIBILITÉ (23/09/2026)
   -------------------------------------------------------------------------
   Doctrine inchangée : or = chrome de navigation, terracotta = accent
   éditorial du contenu. Une seule couleur de soulignement par zone.
   ========================================================================= */

/* ---------- Bandeau blanc collé au header ----------
   Blocksy pose 60px de padding-top sur .ct-container-full
   (data-vertical-spacing="top:bottom") : c'était l'espace crème entre le
   menu et la feuille blanche. Le souffle passe DANS la feuille. */
body.wp-singular:not(.home) .site-main > .ct-container-full[data-vertical-spacing*="top"] {
  padding-top: 0 !important;
}

body.wp-singular:not(.home) .site-main > .ct-container-full > article {
  margin-top: 0 !important;
}

/* Accueil : la hero-section est vide (titre masqué) mais sa marge basse
   de 40px fusionnait vers le haut → bande blanche au-dessus du ticker. */
body.home .site-main article > .hero-section {
  margin: 0 !important;
}

body.wp-singular:not(.home) .site-main article > .hero-section {
  padding-top: 2.75rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  body.wp-singular:not(.home) .site-main article > .hero-section {
    padding-top: 1.75rem;
    margin-bottom: 0.5rem;
  }
}

/* ---------- Fil d'Ariane au-dessus du titre (rôle de kicker) ---------- */
.site-main .entry-header {
  display: flex;
  flex-direction: column;
}

.site-main .entry-header > .ct-breadcrumbs {
  order: -1;
  margin-bottom: 0.9rem;
}

.site-main .entry-header .rank-math-breadcrumb,
.site-main .entry-header .rank-math-breadcrumb p {
  margin: 0 !important;
  line-height: 1.6;
}

.site-main .entry-header .rank-math-breadcrumb a:hover {
  color: var(--eco-terra) !important;
}

/* ---------- Titre aligné sur la colonne de lecture (pages à rail) ----------
   v4.0 centrait l'en-tête sur 820px alors que la grille fait 1076px :
   le H1 flottait 128px à droite du texte. */
@media (min-width: 1101px) {
  .eco3-has-rail .site-main .hero-section.is-width-constrained,
  .eco3-has-rail .site-main .entry-header {
    max-width: var(--eco-grid-width);
    width: 100%;
  }

  .eco3-has-rail .site-main .entry-header .page-title,
  .eco3-has-rail .site-main .entry-header > .ct-breadcrumbs {
    max-width: 820px;
  }

  .eco3-has-rail .site-main .entry-content {
    padding-top: 1.5rem;
  }
}

/* ---------- Légendes de figure lisibles ----------
   Capitales mono espacées = illisible au-delà d'une ligne (légendes
   d'études de 4-6 lignes). La mono reste pour les labels courts. */
.entry-content figcaption,
.wp-element-caption {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: var(--eco-gray-600);
  text-wrap: pretty;
}

/* ---------- Rail et Q&A : pas de soulignement hérité de .entry-content li a ---------- */
.entry-content .eco3-toc__list li a,
.entry-content .eco3-qa-toc li a,
.entry-content .eco3-qa-related li a {
  text-decoration: none !important;
}

/* ---------- Focus clavier visible (aucun jusqu'ici) ---------- */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--eco-terra);
  outline-offset: 2px;
}

.ct-header :where(a, button):focus-visible {
  outline-color: var(--eco-gold);
}

.ct-header .menu > li > a:focus-visible {
  outline: none;
}

/* ---------- Détails de lecture ---------- */
::selection {
  background: color-mix(in srgb, var(--ui-brand) 18%, transparent);
  color: inherit;
}

.entry-content p,
.entry-content li {
  text-wrap: pretty;
}

.entry-content table {
  font-variant-numeric: tabular-nums;
}

.entry-content .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  .eco3-progress__bar,
  .eco3-card__media-img,
  .ct-header .menu > li > a {
    transition: none !important;
  }
}

/* ---------- Header mobile recentré ----------
   La section 32 posait margin:0 !important sur .ct-container : le conteneur
   Blocksy perdait son centrage, logo collé au bord gauche. */
@media (max-width: 1024px) {
  #header [data-row] .ct-container {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* =========================================================================
   49. SURFACES DE CONTENU EN CRÈME (13/10/2026)
   Les blocs blancs des piliers (kit 113 : chiffre clé, rangée de chiffres, forces, onglets, nav de
   cluster), du widget régime (119) et des hubs (.eco3-hub : Q&A 110, datasets 87) prenaient le rôle
   --ui-surface-raised (blanc pur, généré dans 350). Sur la feuille crème, ce blanc faisait tache : dans ce
   seul périmètre, raised vaut la surface de la page ; les bordures --ui-border tiennent la découpe.
   Les variables dérivées (--eco3-paper, --e3r-*) suivent, déclarées sur le même élément ou dessous.
   Hors périmètre : Every X, Time Machine, COTW, Hindsight (aucune de ces classes, vérifié).
   ========================================================================= */
:where(.eco3-hub, .eco3-stat, .eco3-statrow, .eco3-force, .eco3-switch, .eco3-cluster-nav,
       .e3r, .e3r-since, .e3r-tl, .eco3-regime-card) {
  --ui-surface-raised: var(--ui-surface);
}

/* =========================================================================
   FIN, STYLE ÉDITORIAL v4.1
   ========================================================================= */