/* =============================================================================
   00-tokens.css — SOURCE UNIQUE DE VÉRITÉ
   ============================================================================= */

:root {
  --nt-card: var(--nt-surface-1);



  /* THEME-TOKENS:START — généré depuis examples/nooktails/config/config.php
     (filtre nkp_config, clés palette_*) par l'adapter Core
     adapters/wordpress/kadence-palette-sync.php. Ne pas éditer à la main :
     écrasé à la prochaine régénération (barre d'admin → "Régénérer tokens").
     Pour changer une couleur, éditer config.php puis régénérer. */
  --nt-bg:          #F3F1EA;   /* Plâtre — fond principal */
  --nt-surface:     #F3F1EA;
  --nt-surface-1:   #EAE6DB;   /* Pierre — cartes, sections */
  --nt-surface-2:   #DED8C8;   /* Lin — filets, séparateurs */
  --nt-surface-3:   #4A4438;   /* Ombre — footer, seul niveau qui reste sombre (matière, jamais noir franc) */

  --nt-text:        #2A2723;   /* Encre — texte principal, titres */
  --nt-text-strong: #211E1A;   /* Encre renforcée — emphase maximale */
  --nt-text-muted:  #726B5F;   /* Encre atténuée — texte secondaire */
  --nt-text-faint:  #A39C8C;   /* Encre tertiaire — légendes, placeholders */

  --nt-gold:        #7C6038;   /* Laiton — recalibré v2 24/07 (contraste 5.18:1 sur Plâtre, ex-#8C6E3F=4.21:1) */
  --nt-gold-2:      var(--nt-gold);
  --nt-gold-dark:   #6E5530;
  --nt-gold-cta:    var(--nt-gold);
  --nt-cta-aff:     var(--nt-gold);
  --nt-cta-aff-h:   var(--nt-gold);

  --nt-success:  #13612e;
  --nt-info:     #1159af;
  --nt-alert:    #a8351f;
  --nt-warning:  #f7630c;
  --nt-rating:   #f5a524;

  --nt-line:        #DED8C8;   /* = Lin — neutre, jamais teinté or (l'or reste réservé à l'accent, budget de contraste) */
  --nt-line-strong: #C7BEA8;
  /* THEME-TOKENS:END */

  /* Dérivés rgba — hors génération auto (nécessitent une conversion hex→rgba non
     couverte par le générateur simple), à recalculer à la main si --nt-gold ou
     --nt-text changent. Le vert bouteille de la révision 1 a été retiré (test
     d'intemporalité : trop daté DTC 2019-2024, cf. grammaire de la preuve). */
  --nt-gold-soft:   rgba(124, 96, 56, .10);   /* dérivé de --nt-gold */
  --nt-gold-tint:   rgba(124, 96, 56, .16);
  --nt-veil:        rgba(42, 39, 35, .04);     /* dérivé de --nt-text — encre à 4%, était blanc à 5% (sens inversé sur fond clair) */

  /* TYPOGRAPHIE — familles */
  /* DA V9 (24/07 nuit) : titres passés de Fraunces à Literata — Fraunces avait un bug de rendu
     sur son axe variable WONK (boucle/spirale sur "J"/"f", cf. nooktails-fix-j-deformation-css.md)
     et un dessin trop clivant en contexte boutique (fiches produit/prix). Literata testée côte à
     côte sur H1 éditorial ET fiche produit avant validation (auto-hébergée, même pipeline que
     Fraunces). Seul CE token change — aucune règle locale à toucher ailleurs dans le site. */
  --nt-font-heading: "Literata", Georgia, "Times New Roman", serif;
  --nt-font-body:    'Newsreader', Georgia, "Times New Roman", serif;
  --nt-font-ui:     'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nt-font-mono:    ui-monospace, "Geist Mono", "SFMono-Regular", Menlo, monospace;
  /* Tracking des titres : source unique, jamais de valeur locale ad hoc (leçon de l'ancien bug
     Fraunces, cf. historique ci-dessus — la règle reste valable même après le changement de police). */
  --nt-tracking-heading: 0;

  /* TYPOGRAPHIE — ÉCHELLE (⭐ SOURCE UNIQUE : changer une taille ICI = tout le site) */
  --nt-h1:          clamp(1.75rem, 4.6vw, 2.8rem);   /* H1 — titre de page (hero) */
  --nt-h2:          clamp(1.4rem, 3.4vw, 1.95rem);   /* H2 — titre de section */
  --nt-fs-feature:  clamp(1.5rem, 3.7vw, 2.2rem);    /* item vedette (guide feature) */
  --nt-fs-item:     clamp(1.25rem, 2.9vw, 1.68rem);  /* H3 éditorial — titres de liens/items (litanie) */
  --nt-h3:          19px;                             /* H3 contenu régulier (prose article) */
  --nt-fs-lead:     clamp(1.02rem, 2vw, 1.18rem);    /* chapô / intro hero */
  --nt-fs-summary:  clamp(1.12rem, 2.4vw, 1.45rem);  /* messages clés (« L'essentiel ») */
  --nt-text-lg:     17px;                             /* grand corps */
  --nt-text-base:   16px;                             /* corps */
  --nt-fs-desc:     0.98rem;                          /* descriptions d'items */
  --nt-text-sm:     13.5px;
  --nt-text-xs:     12px;

  /* TYPOGRAPHIE — graisses */
  --nt-weight-regular:  400;
  --nt-weight-medium:   500;
  --nt-weight-semibold: 600;

  /* TYPOGRAPHIE — interlignages */
  --nt-lh-h1:           1.05;   /* interligne H1 serré (dense) */
  --nt-leading-tight:   1.14;
  --nt-leading-snug:    1.3;
  --nt-leading-normal:  1.6;
  --nt-leading-relaxed: 1.74;

  /* EYEBROW */
  --nt-eyebrow-size:    11px;
  --nt-eyebrow-spacing: .24em;

  /* ESPACEMENTS */
  --nt-space-2xs: 6px;
  --nt-space-xs:  8px;
  --nt-space-sm:  14px;
  --nt-space-md:  22px;
  --nt-space-lg:  34px;
  --nt-space-xl:  clamp(34px, 5vw, 72px);
  --nt-section-y: clamp(60px, 8vw, 110px);
  --nt-gap-sm:    14px;
  --nt-gap-md:    18px;
  --nt-gap-lg:    22px;

  /* CONTENEURS */
  --nt-container:     1200px;
  --nt-container-xl:  1280px;
  --nt-container-pad: 28px;

  --nt-prose:         65ch;
  --nt-prose-wide:    800px;
  --nt-prose-full:    960px;

  /* RAILS STRUCTURELS (24/07 nuit, Phase 1) — largeur de COLONNE DE PAGE par famille de gabarit,
     à distinguer des largeurs de PROSE internes (citations/callouts/tableaux, non tokenisées ici
     volontairement — responsabilité différente : lisibilité d'un bloc, pas grille de page).
     Discovery = Home (hero large, respiration). Reading = Pillar/Article/Decision/Guide (colonne
     éditoriale resserrée). Commerce = pas encore tokenisé : la valeur Kadence/WooCommerce (1242px
     mesurée) doit d'abord être tracée à sa règle source avant d'être figée en token — cf. audit. */
  --nt-rail-discovery: 72rem;   /* 1152px — Home (pillar.css, déjà en place avant tokenisation) */
  --nt-rail-reading:   52rem;   /*  832px — Pillar/Article/Decision/Guide */

  /* RAYONS */
  --nt-radius-sm:   10px;
  --nt-radius-md:   16px;
  --nt-radius-lg:   22px;
  --nt-radius-pill: 999px;

/* OMBRES — recalculées en encre (étaient noir pur, illisible/trop dur une fois le fond éclairci).
   --nt-shadow-lift et --nt-shadow-gold : 0 usage live après le nettoyage hover-lift (Phase 1,
   24/07) — recalculées par cohérence mais candidates à suppression à l'étape 7 du plan. */
  --nt-shadow-sm:    0 12px 26px rgba(42, 39, 35, .14);
  --nt-shadow-card:  0 22px 44px -24px rgba(42, 39, 35, .22);
  --nt-shadow-media: 0 30px 70px -28px rgba(42, 39, 35, .20);
  --nt-shadow-lift:  0 8px 24px -8px rgba(42, 39, 35, .16), 0 2px 6px -2px rgba(42, 39, 35, .10);
  --nt-shadow-gold:  0 12px 32px -10px rgba(124,96,56, .22);

  /* CONTRÔLES */
  --nt-control-h:    46px;
  --nt-control-h-lg: 52px;

  /* MOUVEMENT */
  --nt-transition:      .25s ease;
  --nt-transition-slow: .55s ease;
  --nt-ease:            cubic-bezier(.2, .7, .2, 1);

  /* ---- ROUGE D'ALERTE CANONIQUE — ajout 2026-07-07 ---- */
  --nt-alert-text: #d94f4f;

  /* ---- PALETTE ÉTENDUE (solides) — ajout 2026-07-07 ---- */
  --nt-gold-bright: #B8955F;   /* recalculé 24/07 : variante claire du LAITON (était variante claire de l'ancien or #c9a878). Utilisé par barometre.css/nook-plantes.css via --g-gold-bright. */
  --nt-cream-2: #E4E5E9;   /* inchangé — 0 usage live, candidat suppression étape 7 (non vérifié à ce stade) */
  --nt-green: #2e7d32;
  --nt-green-bright: #4ade80;
  --nt-leaf: #5a9e6e;
  --nt-sage-2: #8aad6e;
  --nt-sage-3: #8fba8a;
  --nt-surface-cool: #20242a;
  --nt-surface-cool-2: #181b1f;
  --nt-white: #ffffff;
  /* Layout premium — ajout 2026-07-14 (cluster) [[nooktails-tokens-file-purity]] */
  --nt-hero-ratio: 16 / 9;                    /* ratio du HERO = 16:9 (match les images hero générées en --ar 16:9 → image entière, rien coupé). 17/07 */
  --nt-hero-h: 46rem;                        /* ⭐ hauteur max du HERO (dézoom : + = montre plus de la photo, - = plus recadré) */
  --nt-reading-width: 68ch;                 /* largeur de lecture confortable (leads/prose) */
  --nt-section-gap: clamp(3.5rem, 4.5vw, 5rem); /* rythme vertical premium (desktop ~72-80px) */

  /* ---- ALPHAS / VOILES — ajout 2026-07-07 ---- */
  /* Audit 24/07 : sur 30 tokens de cette section, seuls --nt-scrim-a22, --nt-cream-a04 et
     --nt-white-a08 ont un usage live. Ces 3 sont recalculés ci-dessous en encre (le reste
     était calculé contre un fond blanc/noir qui n'existe plus, mais reste 0-usage — laissés
     inchangés ici, candidats à suppression à l'étape 7 plutôt que recalculés à l'aveugle). */
  --nt-alert-a10: rgba(168,53,31,.1);
  --nt-alert-a12: rgba(168,53,31,.12);
  --nt-alert-a15: rgba(168,53,31,.15);
  --nt-alert-a30: rgba(168,53,31,.3);
  --nt-alert-a35: rgba(168,53,31,.35);
  --nt-alert-a40: rgba(168,53,31,.4);
  --nt-alert-a70: rgba(168,53,31,.7);
  --nt-cream-a04: rgba(42,39,35,.04);   /* recalculé, live (fond input/hub-card) : était blanc .04, sens inversé sur fond clair */
  --nt-gold-a06: rgba(124,96,56,.06);
  --nt-gold-a09: rgba(124,96,56,.09);
  --nt-gold-a25: rgba(124,96,56,.25);
  --nt-gold-a32: rgba(124,96,56,.32);
  --nt-gold-dark-a08: rgba(110,85,48,.08);
  --nt-ink-a25: rgba(10,9,8,.25);
  --nt-ink-a72: rgba(10,9,8,.72);
  --nt-ink-a98: rgba(10,9,8,.98);
  --nt-ink-warm-a50: rgba(18,16,14,.5);
  --nt-ink-warm-a85: rgba(18,16,14,.85);
  --nt-olive-a20: rgba(94,107,78,.2);
  --nt-olive-a40: rgba(94,107,78,.4);
  --nt-scrim-a18: rgba(0,0,0,.18);
  --nt-scrim-a22: rgba(42,39,35,.18);   /* recalculé, live (.nt-btn--ghost:hover) : était noir pur .22 */
  --nt-scrim-a30: rgba(0,0,0,.3);
  --nt-scrim-a35: rgba(0,0,0,.35);
  --nt-scrim-a55: rgba(0,0,0,.55);
  --nt-scrim-a60: rgba(0,0,0,.6);
  --nt-scrim-a65: rgba(0,0,0,.65);
  --nt-scrim-a70: rgba(0,0,0,.7);
  --nt-scrim-a75: rgba(0,0,0,.75);
  --nt-success-a12: rgba(19,97,46,.12);
  --nt-success-a15: rgba(19,97,46,.15);
  --nt-success-a30: rgba(19,97,46,.3);
  --nt-success-a40: rgba(19,97,46,.4);
  --nt-success-a60: rgba(19,97,46,.6);
  --nt-warning-a10: rgba(247,99,12,.1);
  --nt-warning-a25: rgba(247,99,12,.25);
  --nt-warning-a50: rgba(247,99,12,.5);
  --nt-white-a03: rgba(255,255,255,.03);
  --nt-white-a04: rgba(255,255,255,.04);
  --nt-white-a08: rgba(42,39,35,.08);   /* recalculé, live (séparateur 08-shop.css) : un filet blanc était invisible sur fond clair */
}

/* =============================================================================
   ALIAS DE COMPATIBILITÉ — retirer à l'étape 4
   ============================================================================= */
:root {
  --gold:      var(--nt-gold);
  --gold-2:    var(--nt-gold-2);
  --ink:       var(--nt-bg);
  --panel:     var(--nt-surface);
  --panel-2:   var(--nt-surface-2);
  --card:      var(--nt-card);
  --cream:     var(--nt-text);
  --cream-2:   var(--nt-text-strong);
  --dim:       var(--nt-text-muted);
  --line:      var(--nt-line);

  --np-accent:       var(--nt-gold);
  --na-accent:       var(--nt-gold);
  --nb-accent:       var(--nt-gold);
  --np-cream:        var(--nt-text);
  --na-text:         var(--nt-text);
  --nb-cream:        var(--nt-text);
  --na-font-heading: var(--nt-font-heading);
  --np-font-heading: var(--nt-font-heading);
  --nd-font-heading: var(--nt-font-heading);
  --nm-font-heading: var(--nt-font-heading);
  --na-font-mono:    var(--nt-font-mono);
  --np-font-mono:    var(--nt-font-mono);
}


/* =============================================================================
   TOKENS ÉDITORIAUX — composants .nkt-*
   ============================================================================= */
:root {
  --nkt-accent:      var(--nt-gold);
  --nkt-accent2:     var(--nt-gold-dark);
  --nkt-accent-soft: var(--nt-gold-tint);
  --nkt-hover:       var(--nt-gold-tint);
  --nkt-gold:        var(--nt-gold);
  --nkt-ink:         var(--nt-bg);
  --nkt-paper:       var(--nt-surface);
  --nkt-card:        var(--nt-card);
  --nkt-soft:        var(--nt-text-muted);
  --nkt-line:        var(--nt-line);
  --nkt-sage: var(--nt-success);
}


/* =============================================================================
   CSS ÉDITORIAL P0
   ============================================================================= */


/* 1. PROSE
   ============================================================ */

.entry-content,
.wp-block-post-content {
  line-height: var(--nt-leading-relaxed);
  max-width: var(--nt-prose);
  margin-inline: auto;
}

.entry-content .alignwide,
.entry-content .alignfull,
.entry-content .nkt-vs,
.entry-content .nk-compare-scroll,
.entry-content figure.wp-block-table,
.wp-block-post-content .alignwide,
.wp-block-post-content .alignfull,
.wp-block-post-content .nkt-vs,
.wp-block-post-content .nk-compare-scroll,
.wp-block-post-content figure.wp-block-table {
  max-width: none;
  width: 100%;
}

.entry-content h2,
.wp-block-post-content h2 {
  font-family: var(--nt-font-heading);
  font-size: var(--nt-h2);
  line-height: var(--nt-leading-snug);
  font-weight: var(--nt-weight-regular);
  letter-spacing: var(--nt-tracking-heading);
  margin-top: 3rem;
  margin-bottom: 0.75rem;
}

body .entry-content h2,
body .wp-block-post-content h2 {
  color: var(--nt-text);
}

.entry-content h3,
.wp-block-post-content h3 {
  font-size: var(--nt-h3);
  font-weight: var(--nt-weight-semibold);
  line-height: var(--nt-leading-snug);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

body.single .entry-content h3,
body.page .entry-content h3,
body .wp-block-post-content h3 {
  color: var(--nt-text-muted);
}

.entry-content > p:first-of-type,
.wp-block-post-content > p:first-of-type {
  font-size: var(--nt-text-lg);
  line-height: var(--nt-leading-relaxed);
}

.entry-content p,
.wp-block-post-content p {
  margin-bottom: 1.4em;
}

/* Règle liens de prose déplacée vers 01-base.css (25/07, Famille 1) — 2 blocs
   contradictoires trouvés ici (celui-ci + un second plus bas dans ce même fichier,
   :not(.button) plus spécifique qui annulait le hover prévu par celui-ci) + 00-tokens.css
   doit rester tokens purs (:root uniquement, doctrine du fichier) : composant jamais
   à sa place ici. Consolidé en une seule règle fonctionnelle, voir 01-base.css. */

/* 2. CALLOUT
   ============================================================ */

.nk-callout {
  border-left: 3px solid var(--nt-gold);
  background: var(--nt-veil);
  padding: var(--nt-space-md) var(--nt-space-lg);
  margin: var(--nt-space-lg) 0;
  border-radius: 0 var(--nt-radius-sm) var(--nt-radius-sm) 0;
}

.nk-callout-label {
  font-size: var(--nt-eyebrow-size);
  text-transform: uppercase;
  letter-spacing: var(--nt-eyebrow-spacing);
  color: var(--nt-gold);
  font-weight: var(--nt-weight-semibold);
  margin: 0 0 var(--nt-space-xs);
}

.nk-callout-body {
  font-size: var(--nt-text-lg);
  line-height: var(--nt-leading-relaxed);
  color: var(--nt-text-muted);
  margin: 0;
}

.nk-callout-body strong {
  color: var(--nt-text);
  font-weight: var(--nt-weight-semibold);
}


/* 3. CTA
   ============================================================ */

.nk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--nt-control-h);
  padding: 0 28px;
  background: var(--nt-gold-cta);
  color: var(--nt-bg);
  text-decoration: none;
  font-weight: var(--nt-weight-semibold);
  font-size: var(--nt-text-sm);
  letter-spacing: 0.03em;
  border-radius: var(--nt-radius-sm);
  transition: background var(--nt-transition), transform var(--nt-transition);
  white-space: nowrap;
}

.nk-cta:hover {
  background: var(--nt-gold-dark);
  transform: translateY(-1px);
}

.nk-cta--ghost {
  background: transparent;
  color: var(--nt-gold);
  border: 1.5px solid var(--nt-gold);
}

.nk-cta--ghost:hover {
  background: var(--nt-gold);
  color: var(--nt-bg);
}

.nk-cta-block {
  border: 1px solid var(--nt-line-strong);
  background: linear-gradient(135deg, rgba(124,96,56,.10) 0%, rgba(124,96,56,.04) 100%);
  border-radius: var(--nt-radius-md);
  padding: var(--nt-space-lg) var(--nt-space-md);
  margin: var(--nt-space-lg) 0;
  text-align: center;
}

.nk-cta-block__title {
  font-family: var(--nt-font-heading);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: var(--nt-weight-regular);
  color: var(--nt-text);
  margin: 0 0 var(--nt-space-xs);
  line-height: 1.25;
}

.nk-cta-block__desc {
  font-size: var(--nt-text-sm);
  color: var(--nt-text-muted);
  line-height: var(--nt-leading-normal);
  margin: 0 0 var(--nt-space-md);
}

.nk-cta-block .nk-cta {
  background: var(--nt-gold-cta);
  color: var(--nt-bg);
  font-size: var(--nt-text-base);
  padding: 0 32px;
  height: var(--nt-control-h-lg);
  border-radius: var(--nt-radius-pill);
  letter-spacing: 0;
}

.nk-cta-block .nk-cta:hover {
  background: var(--nt-gold);
  color: var(--nt-bg);
  transform: translateY(-2px);
}


/* 4. BOUTON OUTLINE — liens Amazon
   ============================================================ */

/* Aligné 1:1 sur .nk-btn--primary (03-layout) = registre golden CTA :
   filet or transparent, border 1px line-strong, radius 0, hover feutré.
   Les deux classes rendent DÉSORMAIS un traitement IDENTIQUE. 0 aplat (y compris hover). */
.nk-btn-outline {
  display: inline-flex;
  align-items: center;
  height: var(--nt-control-h);
  padding: 0 22px;
  border: 1px solid var(--nt-line-strong);
  color: var(--nt-gold);
  background: transparent;
  text-decoration: none;
  font-weight: var(--nt-weight-semibold);
  font-size: var(--nt-text-sm);
  letter-spacing: 0.03em;
  border-radius: 0;
  transition: background var(--nt-transition), border-color var(--nt-transition), color var(--nt-transition);
  white-space: nowrap;
  box-sizing: border-box;
}

.nk-btn-outline:hover {
  background: var(--nt-gold-soft);
  border-color: var(--nt-gold);
  color: var(--nt-gold);
  text-decoration: none;
}


/* 5. UTILITAIRES
   ============================================================ */

.nk-eyebrow {
  font-size: var(--nt-eyebrow-size);
  text-transform: uppercase;
  letter-spacing: var(--nt-eyebrow-spacing);
  color: var(--nt-gold);
  font-weight: var(--nt-weight-semibold);
  display: block;
  margin-bottom: var(--nt-space-xs);
  text-decoration: none;
}

.nk-tag {
  display: inline-block;
  font-size: var(--nt-text-xs);
  font-weight: var(--nt-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nt-gold);
  background: var(--nt-gold-soft);
  padding: 3px 8px;
  border-radius: var(--nt-radius-sm);
}

.nk-meta {
  font-size: var(--nt-text-sm);
  color: var(--nt-text-faint);
  display: flex;
  align-items: center;
  gap: var(--nt-space-sm);
  flex-wrap: wrap;
}

.nk-article-header-meta {
  display: flex;
  flex-direction: column;
  gap: var(--nt-space-xs);
  margin-bottom: var(--nt-space-md);
}

.nk-article-header-meta .nk-eyebrow {
  margin-bottom: 0;
}

.nk-lead {
  font-size: var(--nt-text-lg);
  line-height: var(--nt-leading-relaxed);
  color: var(--nt-text-muted);
  font-style: italic;
  margin: 0 0 var(--nt-space-xl);
  max-width: 56ch;
}

.nk-divider {
  border: none;
  height: 1px;
  background: var(--nt-line);
  margin: var(--nt-space-xl) 0;
}

/* Classes tableau comparatif */
.nk-accent {
  font-size: var(--nt-text-xs);
  color: var(--nt-text-muted);
  font-weight: var(--nt-weight-regular);
}

.nk-accent-bold {
  font-weight: var(--nt-weight-semibold);
  color: var(--nt-gold-cta);
  text-decoration: none;
}

.nk-accent-bold:hover {
  color: var(--nt-gold);
  text-decoration: none;
}

.nk-muted {
  color: var(--nt-text-faint);
  font-size: var(--nt-text-xs);
}


/* 7. ATTRIBUTS [data-*]
   ============================================================ */

[data-surface="primary"] { background: var(--nt-bg); }
[data-surface="raised"]  { background: var(--nt-surface-2); }
[data-surface="card"]    { background: var(--nt-card); }
[data-surface="accent"]  { background: var(--nt-gold-soft); border: 1px solid var(--nt-line); }

[data-editorial="selection"] .entry-content,
[data-editorial="selection"] .wp-block-post-content {
  max-width: var(--nt-prose-wide);
}

[data-editorial="comparatif"] .entry-content,
[data-editorial="comparatif"] .wp-block-post-content {
  max-width: var(--nt-prose-full);
}


/* 8. RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .entry-content,
  .wp-block-post-content {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .entry-content,
  .wp-block-post-content {
    font-size: 15px;
  }

  .entry-content h2,
  .wp-block-post-content h2 {
    margin-top: 2rem;
  }

  .nk-callout {
    padding: var(--nt-space-sm) var(--nt-space-md);
  }
}

@media (max-width: 600px) {
  .nk-hub-nav__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .nk-cta-block {
    padding: var(--nt-space-md) var(--nt-space-sm);
  }

  .nk-cta {
    width: 100%;
  }
}

/* ============================================================
   TPL-FOU — Kadence overrides + hub layout
   ============================================================ */

.tag-tpl-fou .related-posts,
.tag-tpl-fou .kadence-related-posts,
.tag-tpl-fou .entry-related,
.tag-tpl-fou section.related-posts,
.tag-tpl-fou .kb-related-posts { display: none !important; }

.tag-tpl-fou .entry-tags,
.tag-tpl-fou .post-tags,
.tag-tpl-fou .tags-links,
.tag-tpl-fou .wp-block-post-terms { display: none !important; }

.tag-tpl-fou .post-navigation,
.tag-tpl-fou nav.post-navigation,
.tag-tpl-fou .nav-links,
.tag-tpl-fou .navigation.post-navigation { display: none !important; }

/* FIX CRITIQUE — annuler max-width prose sur tpl-fou */
.tag-tpl-fou .entry-content,
.tag-tpl-fou .wp-block-post-content {
  max-width: none !important;
  margin-inline: 0 !important;
}

.tag-tpl-fou .nt-hub-section {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 48px 24px;
  box-sizing: border-box;
}

.tag-tpl-fou .nt-hub-section__eyebrow {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nt-gold);
  margin: 0 0 20px;
}

.tag-tpl-fou .nt-hub-section__intro {
  display: block;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
  font-size: 15px;
  color: var(--nt-text-muted);
  line-height: 1.6;
}

.tag-tpl-fou .nt-hub-hero {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.tag-tpl-fou .nt-hub-hero__sub {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--nt-text-muted);
  line-height: 1.7;
}

/* Hub — grids */
.tag-tpl-fou .nk-hub-nav__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.tag-tpl-fou .nk-hub-nav__grid--split {
  grid-template-columns: repeat(4, 1fr);
}

.tag-tpl-fou .nt-hub-situation__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Hub — cards */
.tag-tpl-fou .nt-hub-situation__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--nt-surface-1);
  border: 1px solid var(--nt-line);
  border-radius: 12px;
  padding: 24px;
}

.tag-tpl-fou .nt-hub-situation__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--nt-gold);
}

.tag-tpl-fou .nt-hub-situation__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--nt-text);
  line-height: 1.3;
}

.tag-tpl-fou .nt-hub-situation__desc {
  font-size: 14px;
  color: var(--nt-text-muted);
  line-height: 1.6;
  flex: 1;
}

.tag-tpl-fou .nt-hub-situation__arrow a {
  font-size: 13px;
  color: var(--nt-gold);
  text-decoration: none;
}

.tag-tpl-fou .nk-hub-nav__item {
  background: var(--nt-surface-1);
  border: 1px solid var(--nt-line);
  border-radius: 12px;
  padding: 20px;
}

.tag-tpl-fou .nk-hub-nav__title a {
  font-size: 15px;
  font-weight: 600;
  color: var(--nt-text);
  text-decoration: none;
}

.tag-tpl-fou .nk-hub-nav__desc {
  font-size: 13px;
  color: var(--nt-text-muted);
  line-height: 1.5;
  margin-top: 6px;
}

/* Router FOU */
.nkt-fou-router {
  display: block;
  background: var(--nt-card);
  border: 1px solid var(--nt-line);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 48px auto;
  max-width: 760px;
  text-align: center;
  text-decoration: none !important;
}

.nkt-fou-router:hover,
.nkt-fou-router:visited { text-decoration: none !important; }

.nkt-fou-router__eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nt-gold);
  margin-bottom: 10px;
}

.nkt-fou-router__title {
  display: block;
  font-family: var(--nt-font-heading);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--nt-text);
  margin-bottom: 8px;
}

.nkt-fou-router__text {
  display: block;
  font-size: 14px;
  color: var(--nt-text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.nkt-fou-router__cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--nt-gold);
}

/* Liens contenu — règle déplacée vers 01-base.css (25/07, Famille 1, cf. note plus haut). */

/* Responsive */
@media (max-width: 900px) {
  .tag-tpl-fou .nk-hub-nav__grid { grid-template-columns: repeat(2, 1fr); }
  .tag-tpl-fou .nk-hub-nav__grid--split { grid-template-columns: repeat(2, 1fr); }
  .tag-tpl-fou .nt-hub-situation__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .tag-tpl-fou .nk-hub-nav__grid { grid-template-columns: 1fr; }
}