/* =============================================================================
   02-components.css — BIBLIOTHÈQUE DE COMPOSANTS
   -----------------------------------------------------------------------------
   Composants réutilisables UI uniquement. Préfixe .nt-
   Éditoriaux (.nkt-*) → 07-editorial.css
   Cluster (.nt-cluster, .nt-sit, etc.) → 06-cluster.css
   Templates (body.postid-*, body.page-id-*) → 04-templates.css
   ============================================================================= */

/* ---------------------------------------------------------------------------
   CHAPITRE ÉDITORIAL — rythme vertical (24/07, Core générique)
   -----------------------------------------------------------------------------
   Sépare deux sections majeures par une respiration + un repère de lecture,
   plutôt qu'un empilement collé ("bug friction" trouvé en recette révision 2 :
   les sections .nk-decision étaient collées à margin-block:0, coupure franche
   entre deux surfaces). Opt-in : ajouter .nt-chapter au wrapper d'une section
   qui ouvre un nouveau "chapitre" de la page — jamais à chaque sous-titre.
   Aucune valeur de marque : espace + couleur du repère viennent des tokens
   --nt-* déjà déclarés par la couche Project (aucune nouvelle couleur créée).
   Le repère par défaut est NEUTRE (--nt-line-strong) : l'accent (--nt-gold)
   reste réservé aux transitions réellement décisives (variante --accent),
   pour ne pas diluer sa rareté en le posant sur CHAQUE rupture de section.
   --------------------------------------------------------------------------- */
.nt-chapter {
  margin-top: var(--nt-chapter-gap, clamp(2.5rem, 6vw, 4.5rem));
  position: relative;
}
.nt-chapter::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--nt-chapter-mark-offset, clamp(1.25rem, 3vw, 2.25rem)));
  left: 50%;
  transform: translateX(-50%);
  width: var(--nt-chapter-mark-width, 32px);
  height: 1px;
  background: var(--nt-chapter-mark-color, var(--nt-line-strong));
}
/* variante accent : transitions réellement décisives (verdict, sortie money) — rare par construction */
.nt-chapter--accent::before { background: var(--nt-gold); }
/* variante silencieuse : respiration sans repère visuel (transitions mineures) */
.nt-chapter--quiet::before { content: none; }

/* ---------------------------------------------------------------------------
   EYEBROW / SURTITRE
   --------------------------------------------------------------------------- */
.nt-eyebrow {
  font-size: var(--nt-eyebrow-size);
  letter-spacing: var(--nt-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--nt-gold);
  font-weight: var(--nt-weight-semibold);
  margin: 0 0 18px;
}

/* ---------------------------------------------------------------------------
   BOUTON
   --------------------------------------------------------------------------- */
.nt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--nt-control-h);
  padding: 0 26px;
  border-radius: var(--nt-radius-sm);
  font-family: var(--nt-font-body);
  font-size: 14px;
  font-weight: var(--nt-weight-medium);
  line-height: 1;
  letter-spacing: .03em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--nt-transition), box-shadow var(--nt-transition),
    background var(--nt-transition), border-color var(--nt-transition), color var(--nt-transition);
}
.nt-btn--primary { background: var(--nt-gold); color: var(--nt-bg); }
/* 0 hover-lift (doctrine, 24/07) : le retour tient au fond/bordure, jamais au déplacement */
.nt-btn--primary:hover { background: var(--nt-gold-2); color: var(--nt-bg); }
.nt-btn--primary:active { background: var(--nt-gold-dark); color: var(--nt-bg); }
.nt-btn--ghost { background: transparent; color: var(--nt-text); border-color: var(--nt-line); }
.nt-btn--ghost:hover { border-color: var(--nt-gold); color: var(--nt-gold); }
.nt-btn--ghost:active { border-color: var(--nt-gold-dark); color: var(--nt-gold-dark); background: var(--nt-gold-soft); }
.nt-btn--lg { height: var(--nt-control-h-lg); }

/* ---------------------------------------------------------------------------
   BADGE / TAG / PILL
   --------------------------------------------------------------------------- */
.nt-badge { display: inline-flex; align-items: center; font-size: var(--nt-text-xs); color: var(--nt-text-strong); background: var(--nt-veil); border: 1px solid var(--nt-line); border-radius: var(--nt-radius-sm); padding: 5px 11px; text-decoration: none; transition: background var(--nt-transition), color var(--nt-transition), border-color var(--nt-transition); }
a.nt-badge:hover { background: var(--nt-gold); color: var(--nt-bg); border-color: var(--nt-gold); }
.nt-badge--gold { color: var(--nt-gold); border-color: var(--nt-line-strong); }

/* ---------------------------------------------------------------------------
   CARTE
   --------------------------------------------------------------------------- */
/* carte immobile (doctrine 0 hover-lift, 24/07) : le retour tient au liseré, jamais au déplacement/ombre */
.nt-card { display: flex; flex-direction: column; background: var(--nt-card); border: 1px solid var(--nt-line); border-radius: var(--nt-radius-md); overflow: hidden; transition: border-color var(--nt-transition); }
.nt-card:hover { border-color: var(--nt-line-strong); }
.nt-card__img { display: block; aspect-ratio: 4/3; overflow: hidden; }
.nt-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--nt-transition-slow); }
/* zoom image ≤1.03, seul mouvement toléré sur une carte, gardé par prefers-reduced-motion (grammaire d'interaction unique, 24/07) */
@media (prefers-reduced-motion: no-preference) {
  .nt-card:hover .nt-card__img img { transform: scale(1.03); }
}
.nt-card__body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.nt-card__title { font-family: var(--nt-font-heading); font-size: var(--nt-h3); line-height: 1.2; margin: 0 0 var(--nt-space-xs); color: var(--nt-text); }
.nt-card__title a { color: inherit; text-decoration: none; transition: color var(--nt-transition); }
.nt-card__title a:hover { color: var(--nt-gold); }
.nt-card__title a:focus-visible { outline: 2px solid var(--nt-text-strong); outline-offset: 2px; }
.nt-card__excerpt { font-size: var(--nt-text-sm); line-height: 1.5; color: var(--nt-text-muted); margin: 0 0 var(--nt-space-sm); }
.nt-card__links { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; flex: 1; align-content: flex-start; }
.nt-card__more { font-size: var(--nt-text-xs); font-weight: var(--nt-weight-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--nt-gold); text-decoration: none; margin-top: auto; }
.nt-card__more span { display: inline-block; transition: margin var(--nt-transition); }
.nt-card:hover .nt-card__more span { margin-left: 6px; }
.nt-card--row { display: grid; grid-template-columns: 148px 1fr; text-decoration: none; }
.nt-card--row .nt-card__img { aspect-ratio: auto; height: 100%; }
.nt-card--row .nt-card__body { justify-content: center; padding: 18px 20px; }
.nt-card--link { padding: 22px 22px 20px; text-decoration: none; }

/* ---------------------------------------------------------------------------
   CALLOUT
   --------------------------------------------------------------------------- */
.nt-callout { border-left: 3px solid var(--nt-gold); background: var(--nt-gold-soft); padding: 20px 24px; border-radius: 0 var(--nt-radius-sm) var(--nt-radius-sm) 0; margin: 32px 0; }
.nt-callout > :last-child { margin-bottom: 0; }
.nt-callout__label { display: block; margin: 0 0 var(--nt-space-xs); font-family: var(--nt-font-mono); font-size: var(--nt-eyebrow-size); letter-spacing: 1.5px; text-transform: uppercase; color: var(--nt-gold); }

/* ---------------------------------------------------------------------------
   TABLEAU
   --------------------------------------------------------------------------- */
.nt-table { width: 100%; border-collapse: collapse; font-size: var(--nt-text-sm); color: var(--nt-text); }
.nt-table th, .nt-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--nt-line); }
.nt-table thead th { font-family: var(--nt-font-mono); font-size: var(--nt-text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--nt-gold); background: var(--nt-veil); }
.nt-table tbody tr:hover { background: var(--nt-veil); }
.nt-table--compare td:first-child { font-weight: var(--nt-weight-semibold); color: var(--nt-text-strong); }
/* Tableaux éditoriaux .nk-table : wrapper scrollable MOBILE-SAFE (2026-07-08).
   .nk-table / .nk-table-wrap étaient posées dans le contenu (882, 1406) mais
   jamais stylées (sélecteur latent) → aucun scroll horizontal sur mobile.
   On active le wrap : le tableau garde une largeur mini et scrolle dans son
   conteneur au lieu de déborder la page. Sans effet desktop (colonne > min-width). */
.nk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nk-table-wrap > .nk-table { min-width: 34rem; }
/* Bordures de cellules + finition pour TOUS les tableaux éditoriaux (2026-07-08).
   .nk-table était latent (0 bordure, padding 1px) → « sans cadre de case ». On borde
   uniformément nk-table + wp-block-table + tables plates. Exclut nt-cmp-table (déjà stylé).
   28/07 (Lot 3B, fondateur) : exclut aussi .wc-block-cart-items (Cart Block WooCommerce) —
   ce composant n'a jamais été pensé pour un tableau STRUCTUREL React, seulement pour les
   tableaux éditoriaux de contenu (nk-table/wp-block-table/tables plates dans un article).
   Audit d'usage réel (REST API, 121 articles + 31 pages + 2 produits) : 21 pages utilisent
   ce composant via nk-matrix__table/nk-decision-table/nk-table/nk-info__table — aucune via
   wc-block-cart-items. L'exclusion est donc inerte pour les 21 usages existants, elle ferme
   uniquement un trou de scope jamais voulu à l'origine. th/td/thead héritent de cette
   exclusion via le combinateur descendant (table:not(...) th/td) : si <table> ne matche
   pas, aucun descendant ne matche non plus, quelle que soit sa profondeur (thead/tbody/tr). */
.entry-content table:not(.nt-cmp-table):not(.wc-block-cart-items) { border-collapse: collapse; }
.entry-content .nk-table { width: 100%; }
.entry-content table:not(.nt-cmp-table):not(.wc-block-cart-items) th,
.entry-content table:not(.nt-cmp-table):not(.wc-block-cart-items) td { border: 1px solid var(--nt-line); padding: 12px 16px; text-align: left; vertical-align: top; }
.entry-content table:not(.nt-cmp-table):not(.wc-block-cart-items) thead th { background: var(--nt-surface-1); font-weight: var(--nt-weight-semibold); color: var(--nt-text); }
/* SAFETY-NET mobile UNIVERSEL des tableaux de contenu (2026-07-08).
   Sous 680px, TOUT tableau d'article scrolle horizontalement au lieu de déborder la page,
   quel que soit son wrapper (wp-block-table nu, nk-decision-table, nk-table non wrappé, table nue).
   Zéro impact desktop (règle sous media-query). Complète .nk-table-wrap (voie canonique HTML).
   Couvre les 10 tableaux non protégés détectés site-wide (38, 309, 404, 502, 570, 725, 684, 685, 888, 532).
   673 (nt-cmp-table-wrap) déjà OK — inchangé.
   28/07 (Lot 3B) : exclut aussi .wc-block-cart-items — WooCommerce Blocks gère déjà son
   propre comportement mobile natif (table -> grid par ligne, cf. Lot 3B audit), pas besoin
   du fallback overflow-x générique, qui casserait cette mise en page native. */
@media (max-width: 680px) {
  .entry-content table:not(.wc-block-cart-items) { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
}

/* ---------------------------------------------------------------------------
   FORMULAIRE
   --------------------------------------------------------------------------- */
.nt-field { display: flex; flex-direction: column; gap: var(--nt-space-2xs); margin: 0 0 var(--nt-space-sm); }
.nt-label { font-size: var(--nt-text-sm); color: var(--nt-text-muted); }
.nt-input, .nt-textarea { width: 100%; height: var(--nt-control-h-lg); border-radius: var(--nt-radius-sm); border: 1px solid var(--nt-line); background: var(--nt-cream-a04); color: var(--nt-text); padding: 0 18px; font-family: var(--nt-font-body); font-size: 15px; outline: none; transition: border-color var(--nt-transition); }
.nt-textarea { height: auto; min-height: 140px; padding: 14px 18px; resize: vertical; }
.nt-input::placeholder, .nt-textarea::placeholder { color: var(--nt-text-faint); }
.nt-input:focus, .nt-textarea:focus { border-color: var(--nt-gold); }

/* .nt-newsletter retiré 24/07 : 0 référence PHP, dégradé+radius-lg+pilule (tell générique
   identifié par l'audit anti-générique). Le vrai bloc newsletter live = .nook-p2/.nook-end
   ci-dessous, alignés sur le contrat bouton filet-or. */

/* ---------------------------------------------------------------------------
   CARTE-PROBLÈME
   --------------------------------------------------------------------------- */
.nt-prob { display: flex; flex-direction: column; gap: var(--nt-space-sm); padding: 22px 20px 20px; min-height: 100%; background: var(--nt-card); border: 1px solid var(--nt-line); border-radius: var(--nt-radius-md); text-decoration: none; color: var(--nt-text); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.nt-prob:hover, .nt-prob:focus-visible { border-color: var(--nt-line-strong); }
.nt-prob__ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--nt-radius-sm); background: var(--nt-gold-tint); color: var(--nt-gold); flex: 0 0 auto; }
.nt-prob__ic svg { width: 22px; height: 22px; }
.nt-prob__voice { font-family: var(--nt-font-heading); font-weight: var(--nt-weight-medium); font-size: 17px; line-height: 1.32; color: var(--nt-text); flex: 1 1 auto; }
.nt-prob__dest { display: inline-flex; align-items: center; gap: .4em; font-size: 11.5px; font-weight: var(--nt-weight-semibold); letter-spacing: .05em; text-transform: uppercase; color: var(--nt-gold); margin-top: 2px; }

/* ---------------------------------------------------------------------------
   TRUST BAR
   --------------------------------------------------------------------------- */
.nt-trust-item { display: flex; align-items: center; gap: 14px; padding: 6px 14px; }
.nt-trust-item__ic { flex: 0 0 auto; width: 30px; height: 30px; color: var(--nt-gold); }
.nt-trust-item__ic svg { width: 30px; height: 30px; display: block; }
.nt-trust-item__t { font-size: 15px; font-weight: var(--nt-weight-semibold); color: var(--nt-text); line-height: 1.25; display: block; }
.nt-trust-item__s { font-size: 12.5px; color: var(--nt-text-muted); margin-top: 2px; display: block; }

/* ---------------------------------------------------------------------------
   TAGS TAXONOMIE
   --------------------------------------------------------------------------- */
.entry-taxonomies .category-links a,
.entry-taxonomies .term-links a,
.entry-taxonomies .category-links a:visited,
.entry-taxonomies .term-links a:visited { background: transparent; color: var(--nt-gold); padding: 0; border: 0; border-radius: 0; box-shadow: none; }

/* ---------------------------------------------------------------------------
   MANIFESTO
   --------------------------------------------------------------------------- */
.nook-manifesto, .nook-manifesto .wp-block-group__inner-container { text-align: center; }

/* ---------------------------------------------------------------------------
   TITRES ARTICLES & ARCHIVES
   --------------------------------------------------------------------------- */
.entry-title, .entry-hero h1 { font-family: var(--nt-font-heading); font-weight: 400; font-size: clamp(2rem, 5.4vw, 3.3rem); line-height: 1.12; letter-spacing: 0; text-wrap: balance; color: var(--nt-text-strong); }
.entry-header.post-archive-title, .post-archive-title { align-items: flex-start; text-align: left; }
body.archive .entry-hero h1, body.archive h1.archive-title, body.search .entry-hero h1, body.archive .archive-header, body.archive .page-header { text-align: left; }
.archive-title { font-family: var(--nt-font-heading); font-weight: 400; font-size: clamp(2rem, 5.4vw, 3.3rem); line-height: 1.12; letter-spacing: 0; }
.archive .entry-title, .blog .entry-title, .search .entry-title { font-size: 28px; line-height: 1.25; }

/* ---------------------------------------------------------------------------
   HUB CARD
   --------------------------------------------------------------------------- */
.nook-hub-card { display: block; padding: 22px; border: 1px solid var(--nt-line); border-radius: 6px; background: var(--nt-cream-a04); text-decoration: none; transition: border-color .25s var(--nt-ease), transform .25s var(--nt-ease), background .25s var(--nt-ease); }
.nook-hub-card:hover { border-color: var(--nt-gold); background: var(--nt-gold-a06); }
.nook-hub-card__title { display: block; font-family: var(--nt-font-heading); font-size: 20px; font-weight: 500; color: var(--nt-text); line-height: 1.25; margin: 0 0 8px; transition: color .25s var(--nt-ease); }
.nook-hub-card:hover .nook-hub-card__title { color: #fff; }
.nook-hub-card__desc { display: block; font-size: 15px; line-height: 1.55; color: var(--nt-text-muted); }

/* ---------------------------------------------------------------------------
   MENU MOBILE
   --------------------------------------------------------------------------- */
.kadence-mobile-nav a, .kadence-mobile-nav .menu-item a, .mobile-navigation a, .mobile-navigation .menu-item a, #mobile-drawer a, #mobile-drawer .menu-item a, .kadence-mobile-header-nav a, [class*="mobile-menu"] a, [class*="mobile-nav"] a { color: var(--nt-text); }
.kadence-mobile-nav a:hover, .mobile-navigation a:hover, #mobile-drawer a:hover, [class*="mobile-menu"] a:hover, [class*="mobile-nav"] a:hover { color: var(--nt-gold); }

/* ---------------------------------------------------------------------------
   CTA AFFILIATION
   --------------------------------------------------------------------------- */
.entry-content a[href*='tag=nooktails-21']:not(:has(strong)):not(.nk-btn-outline):not(:where(.nk-decision *)),
.entry-content li a[href*='tag=nooktails-21']:not(.nk-btn-outline):not(:where(.nk-decision *)),
.entry-content p a[href*='tag=nooktails-21']:not(:only-child):not(.nk-btn-outline):not(:where(.nk-decision *)) { display: inline; padding: 0; margin: 0; background: none; box-shadow: none; border-radius: 0; color: var(--nt-gold); text-decoration: underline; font-weight: 600; transform: none; }
.entry-content .nk-btn-outline, .single-content .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); border-radius: 0; transition: background var(--nt-transition), border-color var(--nt-transition), color var(--nt-transition); white-space: nowrap; box-sizing: border-box; }
.entry-content .nk-btn-outline:hover, .single-content .nk-btn-outline:hover { background: var(--nt-gold-soft); border-color: var(--nt-gold); color: var(--nt-gold); text-decoration: none; }
/* CTA affilié dans la PROSE (money pages) : le bouton était inline-flex → collé en fin de paragraphe, sur la même ligne (mal positionné). Enfant direct de li/p → BLOC sur SA PROPRE ligne, espacé. (fondateur 19/07). Les cellules de tableau utilisent .nk-accent-bold, non touchées. */
.entry-content li > .nk-btn-outline, .entry-content p > .nk-btn-outline,
.single-content li > .nk-btn-outline, .single-content p > .nk-btn-outline,
.nk-prose li > .nk-btn-outline, .nk-prose p > .nk-btn-outline { display: flex; width: fit-content; max-width: 100%; margin-block: 1.2rem .2rem; }
/* CTA affilié (hors .nk-decision) = FILET OR golden : transparent + liseré or 1px + texte or, radius 0.
   Calque .nk-product__cta (06-cluster). Le "jaune Amazon" #FFD814 et l'aplat sont éliminés à la source. 2026-07-18 */
.entry-content a[href*='amazon']:has(strong):not(:where(.nk-decision *)), .entry-content a[href*='tag=nooktails-21']:has(strong):not(:where(.nk-decision *)) { display: inline-flex; align-items: center; gap: .5em; background: transparent; color: var(--nt-gold); border: 1px solid var(--nt-line-strong); padding: 12px 24px; border-radius: 0; font-size: 14px; font-weight: 600; letter-spacing: .01em; text-transform: none; text-decoration: none; line-height: 1.15; box-shadow: none; transition: background .3s var(--nt-ease), border-color .3s var(--nt-ease), color .3s var(--nt-ease); margin: 4px 12px 14px 0; white-space: nowrap; }
.entry-content a[href*='amazon']:has(strong):not(:where(.nk-decision *)) strong, .entry-content a[href*='tag=nooktails-21']:has(strong):not(:where(.nk-decision *)) strong { color: inherit; font-weight: 600; }
.entry-content a[href*='amazon']:has(strong):not(:where(.nk-decision *)):hover, .entry-content a[href*='tag=nooktails-21']:has(strong):not(:where(.nk-decision *)):hover { background: var(--nt-gold-soft); border-color: var(--nt-gold); color: var(--nt-gold); box-shadow: none; transform: none; }
.entry-content table td a[href*='amazon'] { display: inline-flex; align-items: center; gap: .4em; background: transparent; color: var(--nt-gold); border: 1px solid var(--nt-line-strong); padding: 7px 16px; border-radius: 0; font-size: 13px; font-weight: 600; text-transform: none; text-decoration: none; box-shadow: none; transition: background .3s var(--nt-ease), border-color .3s var(--nt-ease), color .3s var(--nt-ease); white-space: nowrap; }
.entry-content table td a[href*='amazon']:hover { background: var(--nt-gold-soft); border-color: var(--nt-gold); color: var(--nt-gold); transform: none; }
.entry-content a[href][style*='text-transform:uppercase'] { display: inline-flex; align-items: center; gap: .5em; background: transparent; color: var(--nt-gold); border: 1px solid var(--nt-line-strong); padding: 12px 24px; border-radius: 0; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: none; transition: background .3s var(--nt-ease), border-color .3s var(--nt-ease), color .3s var(--nt-ease); white-space: nowrap; }
.entry-content a[href][style*='text-transform:uppercase']:hover { background: var(--nt-gold-soft); border-color: var(--nt-gold); color: var(--nt-gold); transform: none; }
@media (max-width: 600px) { .entry-content a[href][style*='text-transform:uppercase'] { display: block; text-align: center; }}
.entry-content div[style*='border-left:3px solid #C97B3C'], .entry-content div[style*='border-left:3px solid #c9a878'] { border-left-color: var(--nt-gold) !important; background: var(--nt-gold-soft) !important; }
.entry-content p[style*='color:#C97B3C'], .entry-content p[style*='color:#c9a878'], .entry-content span[style*='color:#C97B3C'], .entry-content span[style*='color:#c9a878'] { color: var(--nt-gold) !important; }

/* ---------------------------------------------------------------------------
   BOUTON SYSTEM GLOBAL
   --------------------------------------------------------------------------- */
/* CTA éditoriaux "primary" (nook/compare/guide, boutons Gutenberg) = FILET OR golden.
   Fini l'aplat or plein (doctrine anti-IA : 0 aplat or/beige sur CTA primary). 2026-07-18 */
.nt-btn--primary, .nook-btn, .nook-btn--primary, .nook-btn--compare, .nook-btn--guide, .entry-content .wp-block-button__link { background: transparent; color: var(--nt-gold); border: 1px solid var(--nt-line-strong); border-radius: 0; box-shadow: none; text-transform: none; transition: background .3s var(--nt-ease), border-color .3s var(--nt-ease), color .3s var(--nt-ease); }
.nt-btn--primary:hover, .nook-btn:hover, .nook-btn--primary:hover, .nook-btn--compare:hover, .nook-btn--guide:hover, .entry-content .wp-block-button__link:hover { background: var(--nt-gold-soft); border-color: var(--nt-gold); color: var(--nt-gold); }
/* Boutons TRANSACTIONNELS commerce/formulaire (panier, commande, checkout, mailpoet) : le PLEIN
   reste correct (UX transactionnelle, hors scope CTA affilié/éditorial). Or mat, texte sombre. */
.mailpoet_submit, .mailpoet-form .mailpoet_submit, .single_add_to_cart_button, .button.add_to_cart_button, #place_order, .woocommerce-checkout .button { background-color: var(--nt-gold); color: var(--nt-bg); }
.mailpoet_submit:hover, .mailpoet-form .mailpoet_submit:hover, .single_add_to_cart_button:hover, .button.add_to_cart_button:hover, #place_order:hover, .woocommerce-checkout .button:hover { background-color: var(--nt-gold-2); color: var(--nt-bg); }
.cmplz-btn { border-radius: var(--nt-radius-sm); }
.nook-btn--primary, .nt-btn--primary { color: var(--nt-bg); }
.nook-btn--ghost:hover { background: transparent !important; color: var(--nt-gold) !important; border-color: var(--nt-gold) !important; }
.nook-hero .nook-btn--ghost { background: transparent; border-color: var(--nt-line); color: var(--nt-text); }

/* ---------------------------------------------------------------------------
   CIBLE TACTILE PANIER
   --------------------------------------------------------------------------- */
.cart-contents, .kadence-woocommerce-header-cart a, [class*="header-cart"] a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* "×" retirer un article — mini-panier déroulant (widget WooCommerce classique .remove.
   remove_from_cart_button) : rouge pur #FF0000 natif + pilule pleine ronde au survol,
   0 token, 0 lien avec V8 (signalé "moche" 23/07). Recoloré en rouge d'alerte de marque,
   glyphe seul (0 pilule pleine — cohérent avec la doctrine anti-pilule du site). */
a.remove.remove_from_cart_button {
  color: var(--nt-alert) !important;
  background: transparent !important;
  border-radius: 0 !important;
  opacity: .7;
  transition: opacity var(--nt-transition), color var(--nt-transition);
}
a.remove.remove_from_cart_button:hover,
a.remove.remove_from_cart_button:focus {
  background: transparent !important;
  color: var(--nt-alert) !important;
  opacity: 1;
}

/* "Commander" du mini-panier déroulant — `a.button.checkout.wc-forward` natif WooCommerce,
   jamais repris : aplat or plein + radius 3px, l'exact inverse du contrat CTA du site
   (filet or transparent, 0 radius, aplat réservé au survol — cf. .single_add_to_cart_button
   et .wc-block-components-checkout-place-order-button plus haut). Signalé "pas premium" 23/07. */
a.button.checkout.wc-forward {
  background: transparent !important;
  color: var(--nt-gold) !important;
  border: 1px solid var(--nt-gold) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 44px;
  padding: 12px 26px;
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  font-weight: 500;
  transition: background var(--nt-transition), color var(--nt-transition), border-color var(--nt-transition);
}
a.button.checkout.wc-forward:hover,
a.button.checkout.wc-forward:focus {
  background: var(--nt-gold) !important;
  color: var(--nt-bg) !important;
  border-color: var(--nt-gold) !important;
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nook-hub-card, .nook-hub-card__title, .entry-content a[href*='amazon']:has(strong), .entry-content a[href*='tag=nooktails-21']:has(strong), .entry-content table td a[href*='amazon'] { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
   NEWSLETTER INLINE
   --------------------------------------------------------------------------- */
/* Bouton newsletter aligné 24/07 sur le contrat filet-or du site (était aplat plein +
   pilule — seul bouton du thème à déroger au contrat, tell générique "SaaS signup card"
   identifié par l'audit anti-générique). Newsletter = éditorial, pas transactionnel :
   le plein reste réservé au panier/checkout (cf 02-components.css "BOUTON SYSTEM GLOBAL"). */
.nook-p2__row button, .nook-end__row button { display: inline-flex; align-items: center; justify-content: center; height: var(--nt-control-h-lg); padding: 0 28px; background: transparent; color: var(--nt-gold); border: 1px solid var(--nt-line-strong); border-radius: 0; font-size: var(--nt-text-base); font-weight: var(--nt-weight-semibold); letter-spacing: 0; cursor: pointer; white-space: nowrap; transition: background var(--nt-transition), border-color var(--nt-transition), color var(--nt-transition); }
.nook-p2__row button:hover, .nook-end__row button:hover { background: var(--nt-gold-soft); border-color: var(--nt-gold); color: var(--nt-gold); }
@media (max-width: 560px) {
  .nook-p2__row, .nook-end__row { flex-direction: column; align-items: stretch; }
  .nook-p2__row button, .nook-end__row button { width: 100%; justify-content: center; }
  .nook-p2 input[type=email], .nook-end input[type=email] { width: 100%; flex: 0 0 auto; }
  .nook-side button, .nook-footer__nl button { width: 100%; justify-content: center; }}
@media (max-width: 600px) {
  .nk-news__form { flex-direction: column; width: 100%; }
  .nk-news__form input[type=email], .nk-news__form button, .nk-news__form .nk-btn { width: 100%; }}

/* ---------------------------------------------------------------------------
   NK-DECISION-TABLE
   --------------------------------------------------------------------------- */
.nk-decision-table { width:100%; border-collapse:collapse; margin-top:var(--nt-space-md); font-size:var(--nt-text-sm); }
.nk-decision-table thead tr { background:var(--nt-gold); }
.nk-decision-table thead th { padding:.75rem 1rem; text-align:left; font-weight:var(--nt-weight-semibold); color:var(--nt-white); font-size:var(--nt-text-sm); }
.nk-decision-table thead th:first-child { border-radius:var(--nt-radius-sm) 0 0 0; }
.nk-decision-table thead th:last-child { border-radius:0 var(--nt-radius-sm) 0 0; }
.nk-decision-table tbody tr { border-bottom:1px solid var(--nt-line); transition:background var(--nt-transition); }
.nk-decision-table tbody tr:hover { background:var(--nt-gold-soft); }
.nk-decision-table tbody td { padding:.75rem 1rem; color:var(--nt-text); vertical-align:top; line-height:1.5; }
.nk-decision-table tbody td:first-child { font-weight:var(--nt-weight-semibold); white-space:nowrap; }
.nk-decision-table .nk-dt-good { color:var(--nt-green); font-weight:var(--nt-weight-semibold); }
.nk-decision-table .nk-dt-mid { color:var(--nt-rating); }
.nk-decision-table .nk-dt-bad { color:var(--nt-alert-text); }
@media (max-width:600px) { .nk-decision-table thead th, .nk-decision-table tbody td { padding:.6rem .75rem; font-size:var(--nt-text-xs); }}

/* ---------------------------------------------------------------------------
   NK-PROFILE-GRID
   --------------------------------------------------------------------------- */
.nk-profile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--nt-gap-md); margin-top:var(--nt-space-md); }
.nk-profile-grid__item { display:flex; flex-direction:column; gap:.375rem; padding:1.1rem 1.25rem; border:1px solid var(--nt-line); border-radius:var(--nt-radius-sm); transition:border-color var(--nt-transition),background var(--nt-transition),transform var(--nt-transition); }
.nk-profile-grid__item:hover { border-color:var(--nt-gold); background:var(--nt-gold-soft); }
.nk-profile-grid__situation { font-size:var(--nt-text-sm); font-weight:var(--nt-weight-semibold); color:var(--nt-text); line-height:1.35; }
.nk-profile-grid__answer { font-size:var(--nt-text-sm); color:var(--nt-text-muted); line-height:1.5; }
.nk-profile-grid__link { font-size:var(--nt-text-xs); color:var(--nt-gold); text-decoration:none; font-weight:var(--nt-weight-semibold); margin-top:auto; padding-top:.25rem; }
.nk-profile-grid__link:hover { text-decoration:none; }
@media (max-width:600px) { .nk-profile-grid { grid-template-columns:1fr; }}

/* ---------------------------------------------------------------------------
   NK-SPECIES-CARDS
   --------------------------------------------------------------------------- */
.nk-species-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--nt-gap-md); margin-top:var(--nt-space-md); }
.nk-species-card { display:flex; flex-direction:column; gap:.4rem; padding:1.25rem 1.25rem 1.5rem; border:2px solid var(--nt-line); border-radius:var(--nt-radius-sm); position:relative; transition:border-color var(--nt-transition),background var(--nt-transition),transform var(--nt-transition),box-shadow var(--nt-transition); }
.nk-species-card:hover { border-color:var(--nt-gold); background:var(--nt-gold-soft); }
.nk-species-card--featured { border-color:var(--nt-gold); background:var(--nt-gold-soft); }
.nk-species-card__badge { display:inline-block; font-size:10px; font-weight:var(--nt-weight-semibold); letter-spacing:.1em; text-transform:uppercase; color:var(--nt-gold); background:var(--nt-gold-tint); border:1px solid var(--nt-line-strong); border-radius:var(--nt-radius-sm); padding:3px 10px; margin-bottom:.75rem; align-self:flex-start; }
.nk-species-card__name { font-size:var(--nt-text-lg); font-weight:var(--nt-weight-semibold); color:var(--nt-text); text-align:left; }
.nk-species-card__desc { font-size:var(--nt-text-sm); color:var(--nt-text-muted); line-height:1.55; flex:1; text-align:left; }
.nk-species-card__cta { display:block; margin-top:1rem; padding:.6rem 1rem; background:var(--nt-gold-cta); color:var(--nt-bg); border-radius:var(--nt-radius-sm); font-size:var(--nt-text-sm); font-weight:var(--nt-weight-semibold); text-decoration:none; text-align:center; white-space:nowrap; transition:background var(--nt-transition); }
/* 0 hover-lift (doctrine, 24/07) */
.nk-species-card__cta:hover { background:var(--nt-gold); color:var(--nt-bg); }
.nk-species-card__cta:active { background:var(--nt-gold-dark); color:var(--nt-bg); }
.nk-species-card__cta:focus-visible { outline:2px solid var(--nt-text-strong); outline-offset:2px; }
@media (max-width:600px) { .nk-species-cards { grid-template-columns:1fr; }}
.nk-species-cards:has(> .nk-species-card:nth-child(2):last-child) { display: flex; justify-content: center; flex-wrap: wrap; }
.nk-species-cards:has(> .nk-species-card:nth-child(2):last-child) .nk-species-card { flex: 1 1 280px; max-width: 420px; }
.nk-species-cards + hr.nk-divider { margin-top: 48px; }

/* ---------------------------------------------------------------------------
   NK-PROSE-INTRO / NK-NOTE-INLINE
   --------------------------------------------------------------------------- */
.nk-prose-intro { margin-top: 32px; margin-bottom: 0; }
.nk-prose-intro p { font-size: var(--nt-text-lg); line-height: var(--nt-leading-relaxed); color: var(--nt-text); margin-bottom: 12px; }
.nk-note-inline { font-size: var(--nt-text-sm); color: var(--nt-text-faint); font-style: italic; margin-top: 12px; margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   NK-THRESHOLD-GRID
   --------------------------------------------------------------------------- */
.nk-threshold-grid { display: flex; flex-direction: column; gap: var(--nt-gap-sm); margin: 28px 0 16px; max-width: none; width: 100%; }
.nk-threshold-card { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--nt-radius-sm); border: 1px solid var(--nt-line); background: var(--nt-card); width: 100%; box-sizing: border-box; }
.nk-threshold-card__badge { font-size: var(--nt-eyebrow-size); font-weight: var(--nt-weight-semibold); letter-spacing: var(--nt-eyebrow-spacing); text-transform: uppercase; padding: 4px 12px; border-radius: var(--nt-radius-sm); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex-shrink: 0; overflow: hidden; }
.nk-threshold-card__label { font-size: var(--nt-text-xs); color: var(--nt-text-muted); font-weight: var(--nt-weight-medium); flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nk-threshold-card__value { font-size: var(--nt-text-base); font-weight: var(--nt-weight-semibold); white-space: nowrap; flex-shrink: 0; }
.nk-threshold-card__note { font-size: var(--nt-text-xs); color: var(--nt-text-muted); white-space: nowrap; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.nk-threshold--ok { border-color: var(--nt-success); }
.nk-threshold--ok .nk-threshold-card__badge { background: var(--nt-success-a15); color: var(--nt-green-bright); border: 1px solid var(--nt-success-a40); }
.nk-threshold--ok .nk-threshold-card__value { color: var(--nt-green-bright); }
.nk-threshold--watch { border-color: var(--nt-warning); }
.nk-threshold--watch .nk-threshold-card__badge { background: var(--nt-gold-tint); color: var(--nt-warning); border: 1px solid var(--nt-line-strong); }
.nk-threshold--watch .nk-threshold-card__value { color: var(--nt-warning); }
.nk-threshold--alert { border-color: var(--nt-alert); }
.nk-threshold--alert .nk-threshold-card__badge { background: var(--nt-alert-a12); color: var(--nt-alert-text); border: 1px solid var(--nt-alert-a40); }
.nk-threshold--alert .nk-threshold-card__value { color: var(--nt-alert-text); }
@media (max-width: 640px) {
  .nk-threshold-card { flex-direction: column; align-items: flex-start; gap: var(--nt-space-xs); }
  .nk-threshold-card__badge, .nk-threshold-card__value { flex: 0 0 auto; width: auto; text-align: left; }
  .nk-threshold-card__label { white-space: normal; overflow: visible; text-overflow: clip; flex: 0 0 auto; }
  .nk-threshold-card__note { flex: 0 0 auto; text-align: left; white-space: normal; }}

/* ---------------------------------------------------------------------------
   NK-CONTRAST-BLOCK
   --------------------------------------------------------------------------- */
.nk-contrast-block { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--nt-radius-sm); overflow: hidden; margin: 28px 0 24px; border: 1px solid var(--nt-line); }
.nk-contrast-block__col { padding: 24px 22px; background: var(--nt-card); }
.nk-contrast-block__col--myth { border-right: 1px solid var(--nt-line); }
.nk-contrast-block__col--reality { background: var(--nt-surface-2); }
.nk-contrast-block__label { font-size: var(--nt-eyebrow-size); font-weight: var(--nt-weight-semibold); letter-spacing: var(--nt-eyebrow-spacing); text-transform: uppercase; margin-bottom: 10px; display: block; }
.nk-contrast-block__col--myth .nk-contrast-block__label { color: var(--nt-text-faint); }
.nk-contrast-block__col--reality .nk-contrast-block__label { color: var(--nt-gold); }
.nk-contrast-block__col p { font-size: var(--nt-text-base); line-height: var(--nt-leading-relaxed); margin: 0; color: var(--nt-text-muted); }
.nk-contrast-block__col--reality p { color: var(--nt-text); }
@media (max-width: 600px) { .nk-contrast-block { grid-template-columns: 1fr; } .nk-contrast-block__col--myth { border-right: none; border-bottom: 1px solid var(--nt-line); }}

/* ---------------------------------------------------------------------------
   NK-SIGNAL-GRID
   --------------------------------------------------------------------------- */
.nk-signal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nt-gap-md); margin: 24px 0 16px; align-items: start; }
.nk-signal-group { border-radius: var(--nt-radius-sm); border: 1px solid var(--nt-line); overflow: hidden; background: var(--nt-card); }
.nk-signal-group__header { background: var(--nt-surface-2); padding: 10px 16px; font-size: var(--nt-eyebrow-size); font-weight: var(--nt-weight-semibold); letter-spacing: var(--nt-eyebrow-spacing); text-transform: uppercase; color: var(--nt-text-faint); border-bottom: 1px solid var(--nt-line); }
.nk-signal-list { list-style: none; margin: 0; padding: 0; }
.nk-signal-list__item { padding: 14px 16px; border-bottom: 1px solid var(--nt-line); display: flex; flex-direction: column; gap: 3px; }
.nk-signal-list__item:last-child { border-bottom: none; }
.nk-signal-list__name { font-size: var(--nt-text-sm); font-weight: var(--nt-weight-semibold); color: var(--nt-text); }
.nk-signal-list__desc { font-size: var(--nt-text-xs); color: var(--nt-text-muted); line-height: var(--nt-leading-normal); }
@media (max-width: 640px) { .nk-signal-grid { grid-template-columns: 1fr; }}
/* 2026-07-09 — Mobile CRO / tables / affiliate buttons safety net (v3) */
@media (max-width: 782px) {
  .entry-content .nk-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .entry-content table.nk-table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Neutraliser les <br> parasites dans les cellules du tableau comparatif sur mobile */
  .entry-content table.nk-table td br,
  .entry-content table.nk-table th br { display: none; }
}
@media (max-width: 600px) {
  /* Boutons affiliés STANDALONE (fiches/CTA) : pleine largeur, tap >=48px, texte qui peut passer à la ligne */
  .entry-content .nk-accent-bold,
  .entry-content .nk-btn-outline,
  .entry-content .nk-btn {
    display: flex; width: 100%; box-sizing: border-box; min-height: 48px;
    align-items: center; justify-content: center; text-align: center;
    white-space: normal; line-height: 1.25;
  }
  /* Protéger les mini-boutons "Voir" DANS les cellules du tableau (ne pas les étirer) */
  .entry-content td .nk-accent-bold,
  .entry-content td .nk-btn-outline,
  .entry-content td .nk-btn,
  .entry-content th .nk-accent-bold,
  .entry-content th .nk-btn-outline,
  .entry-content th .nk-btn {
    display: inline-flex; width: auto; min-height: 0; white-space: nowrap;
  }}

/* 2026-07-09 — Tableau money : bordure épaisse or sous l'en-tête (même template que les check-lists) */
.entry-content table.nk-table thead { border-bottom: 3px solid var(--nt-gold); }

/* 2026-07-09 — Tableau money MOBILE : cartes empilées (le CTA « Voir » ne doit JAMAIS être caché par le scroll horizontal → conversion) */
@media (max-width: 600px) {
  .entry-content .nk-table-wrap { overflow: visible; width: 100%; max-width: 100%; }
  .entry-content table.nk-table { display: block; overflow: visible; width: 100%; max-width: 100%; min-width: 0; }
  .entry-content table.nk-table thead { display: none; }
  .entry-content table.nk-table tbody,
  .entry-content table.nk-table tr,
  .entry-content table.nk-table td { display: block; width: 100%; max-width: 100%; }
  .entry-content table.nk-table tr { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--nt-line); border-radius: 8px; background: var(--nt-surface-1); box-sizing: border-box; }
  .entry-content table.nk-table td { border: 0; padding: 3px 0; text-align: left; box-sizing: border-box; }
  .entry-content table.nk-table td:last-child { padding-top: 10px; }
  .entry-content table.nk-table td:last-child .nk-accent-bold { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; box-sizing: border-box; }
}

/* 2026-07-09 — Polish carte mobile : badge de rôle sur sa propre ligne (pas collé à la catégorie) */
@media (max-width: 600px) {
  .entry-content table.nk-table td .nk-accent { display: block; margin-top: 2px; }
}

/* 2026-07-09 — Barometre : champ email newsletter ecrase (16px) -> hauteur/tap corrects mobile+tablette.
   Classe partagee par les 3 barometres. Specificite +1 (.nb-email__form) => gagne sans !important. 16px = anti-zoom iOS. */
.nook-barometre .nb-email__form .nb-email__input {
  min-height: 48px;
  height: auto;
  font-size: 16px;
  padding: 12px 16px;
  line-height: 1.3;
  box-sizing: border-box;
}

/* 2026-07-09 — Boutons affiliés standalone (a[href*=amazon]:has(strong)) : anti-débordement mobile/tablette.
   Le libellé long en majuscules + nowrap dépassait à droite (jusqu'à +73px @360). */
@media (max-width: 782px) {
  .entry-content a[href*='amazon']:has(strong),
  .entry-content a[href*='tag=nooktails-21']:has(strong) { max-width: 100%; white-space: normal; box-sizing: border-box; }
}
@media (max-width: 600px) {
  .entry-content a[href*='amazon']:has(strong),
  .entry-content a[href*='tag=nooktails-21']:has(strong) {
    display: flex; width: 100%; justify-content: center; align-items: center;
    text-align: center; padding: 14px 20px; margin: 14px 0; line-height: 1.25;
  }}

/* 2026-07-18 — Contour Amazon = OR mat (plus de jaune #FFD814). Le token --nt-cta-aff est
   aliasé sur --nt-gold, on pointe direct dessus pour la lisibilité. Zero !important. */
.entry-content a.nk-btn-outline[href*="tag=nooktails-21"],
.entry-content a.nk-btn-outline[href*="amazon"] { --nk-ol: var(--nt-gold); }

/* ── Hero money .nt-pillar-hero supprimé → règle unique (nooktails-pillar.css). Zéro masquage CSS. Le doublon d'image à la une du thème se supprime À LA SOURCE (réglage thème / PHP), pas en CSS. ── */

/* FIX cross-link espèces (.nkt-rel) : sortait pleine largeur bord-à-bord (frère de .entry-content sans contrainte) -> aligné sur les sections (1100). 2026-07-11 */
.nkt-rel { max-width: 1100px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 24px); box-sizing: border-box; }
/* ═══════════════════════════════════════════════════════════════════════
   .nk-info — Pages Informations & Légales (composant uniforme)
   2026-07-18 — Migré depuis <style> inline (fragile, fallbacks crème BANNIS).
   DA anthracite : fond var(--nt-bg), or var(--nt-gold), filets var(--nt-line).
   AUCUN fallback crème/beige/brun — tokens 00-tokens.css uniquement.
   ═══════════════════════════════════════════════════════════════════════ */
.nk-info{
  --nki-title:   var(--nt-text);
  --nki-text:    var(--nt-text-muted);
  --nki-strong:  var(--nt-text-strong);
  --nki-gold:    var(--nt-gold);
  --nki-line:    var(--nt-line);
  --nki-card:    var(--nt-veil);
  --nki-heading: var(--nt-font-heading);
  --nki-body:    var(--nt-font-body);
  --nki-mono:    var(--nt-font-mono);
  max-width: 760px; /* 2026-07-24 — largeur de lecture système pages légales (750-800px), était 72ch (~620px) */
  margin: 0 auto;
  padding: 56px 24px 88px;
  color: var(--nki-text);
  font-family: var(--nki-body);
  font-size: 17px;
  line-height: 1.75;
}
.nk-info__eyebrow{
  display: inline-block;
  font-family: var(--nki-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nki-gold);
  font-weight: 600;
  margin: 0 0 18px;
}
.nk-info h1{
  font-family: var(--nki-heading);
  font-size: clamp(30px, 5.5vw, 44px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: var(--nt-tracking-heading);
  color: var(--nki-title);
  margin: 0 0 20px;
}
.nk-info__rule{
  width: 56px;
  height: 2px;
  background: var(--nki-gold);
  border: 0;
  margin: 0 0 24px;
}
.nk-info__lead{
  font-size: 18px;
  line-height: 1.6;
  color: var(--nki-text);
  margin: 0 0 12px;
  max-width: 60ch;
}
.nk-info__updated{
  display: block;
  font-family: var(--nki-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--nki-text);
  opacity: .6;
  margin: 12px 0 0;
}
.nk-info h2{
  font-family: var(--nki-heading);
  font-size: clamp(21px, 3.2vw, 25px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--nt-tracking-heading);
  color: var(--nki-title);
  margin: 48px 0 16px;
}
.nk-info h3{
  font-family: var(--nki-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--nki-title);
  margin: 28px 0 10px;
}
.nk-info p{ margin: 0 0 16px; color: var(--nki-text); }
.nk-info p strong{ color: var(--nki-strong); font-weight: 600; }
.nk-info a{
  color: var(--nki-strong);
  text-decoration: underline;
  text-decoration-color: var(--nki-gold);
  text-underline-offset: 3px;
  transition: color var(--nt-transition);
}
.nk-info a:hover{ color: var(--nki-gold); }
.nk-info ul{ margin: 0 0 20px; padding: 0; list-style: none; }
.nk-info ul li{ position: relative; padding-left: 0; margin-bottom: 14px; color: var(--nki-text); line-height: 1.6; }
.nk-info ul li::before{ content: none; }   /* EM-DASH '—' RETIRÉ (fondateur 19/07, anti-IA) : le tiret doré cloné avant chaque item = tell « checklist LLM ». Items nus + air (margin 14px). Pages légales. */
/* Encadrés (identité, hébergeur, CNIL, contact) */
.nk-info__card{
  margin: 20px 0 24px;
  padding: 24px 28px;
  background: var(--nki-card);
  border: 1px solid var(--nki-line);
  border-radius: 6px;
}
.nk-info__card--accent{ border: 0; border-left: 3px solid var(--nki-gold); border-radius: 0 6px 6px 0; }
.nk-info__card dl{ margin: 0; display: grid; grid-template-columns: 170px 1fr; gap: 10px 20px; }
.nk-info__card dt{ font-family: var(--nki-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--nki-gold); font-weight: 600; padding-top: 3px; }
.nk-info__card dd{ margin: 0; color: var(--nki-strong); }
.nk-info__card dd a{ color: var(--nki-strong); }
.nk-info__card p{ margin: 0 0 6px; line-height: 1.55; }
.nk-info__card p:last-child{ margin: 0; }
.nk-info__card-name{ font-family: var(--nki-heading); font-size: 19px; color: var(--nki-title); font-weight: 500; margin: 0 0 12px; }
.nk-info__note{ font-style: italic; font-size: 15px; color: var(--nki-text); margin: 0 0 18px; }
/* Rangées label / valeur (durées de conservation) */
.nk-info__rows{ margin: 20px 0 24px; padding: 20px 24px; background: var(--nki-card); border: 1px solid var(--nki-line); border-radius: 6px; }
.nk-info__row{ display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--nki-line); align-items: baseline; }
.nk-info__row:first-child{ padding-top: 0; }
.nk-info__row:last-child{ border-bottom: 0; padding-bottom: 0; }
.nk-info__row-label{ color: var(--nki-strong); font-size: 15px; }
.nk-info__row-value{ font-family: var(--nki-mono); font-size: 12px; letter-spacing: 1px; color: var(--nki-gold); text-transform: uppercase; font-weight: 600; text-align: right; white-space: nowrap; }
/* Tableau (cookies) — scroll horizontal mobile */
.nk-info__table-wrap{ margin: 20px 0 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nk-info__table{ width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.nk-info__table th{ text-align: left; font-family: var(--nki-mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--nki-gold); font-weight: 600; padding: 0 16px 12px 0; border-bottom: 1px solid var(--nki-line); white-space: nowrap; }
.nk-info__table td{ padding: 13px 16px 13px 0; border-bottom: 1px solid var(--nki-line); color: var(--nki-text); vertical-align: top; }
.nk-info__table code{ font-family: var(--nki-mono); font-size: 13px; color: var(--nki-strong); }
/* Bloc CTA (liens) — cibles tactiles ≥44px, a11y focus visible */
.nk-info__cta{ margin: 40px 0 0; display: flex; flex-wrap: wrap; gap: 14px; }
.nk-info__cta a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 22px;
  text-decoration: none;
  font-family: var(--nki-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--nki-strong);
  border: 1px solid var(--nki-line);
  border-radius: 6px;
  transition: border-color var(--nt-transition), color var(--nt-transition), background var(--nt-transition);
}
.nk-info__cta a:hover{ color: var(--nki-gold); border-color: var(--nt-line-strong); background: var(--nt-gold-soft); }
.nk-info__cta a:active{ color: var(--nt-gold-dark); border-color: var(--nt-gold-dark); background: var(--nt-gold-tint); }
/* focus = encre neutre, distinct du hover (grammaire d'interaction unique, 24/07) : l'or reste réservé au hover/breadcrumb */
.nk-info a:focus-visible,
.nk-info__cta a:focus-visible{ outline: 2px solid var(--nki-strong); outline-offset: 2px; }
/* Citations (article de loi cité, extrait tiers) */
.nk-info blockquote{
  margin: 28px 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--nki-gold);
  font-style: italic;
  font-size: 16px;
  color: var(--nki-strong);
}
.nk-info blockquote p{ margin: 0 0 8px; }
.nk-info blockquote p:last-child{ margin: 0; }
/* Sommaire auto (2026-07-24) — injecté par nooktails_legal_toc() au rendu, jamais dans le contenu stocké */
.nk-info__toc{
  margin: 8px 0 40px;
  padding: 22px 26px;
  background: var(--nki-card);
  border: 1px solid var(--nki-line);
  border-radius: 6px;
}
.nk-info__toc-label{
  display: block;
  font-family: var(--nki-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--nki-gold);
  font-weight: 600;
  margin: 0 0 14px;
}
.nk-info__toc ul{ margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.nk-info__toc a{
  color: var(--nki-text);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.5;
  transition: color var(--nt-transition);
}
.nk-info__toc a:hover{ color: var(--nki-gold); text-decoration: underline; text-decoration-color: var(--nki-gold); text-underline-offset: 3px; }
.nk-info__toc a:active{ color: var(--nt-gold-dark); text-decoration: underline; text-decoration-color: var(--nt-gold-dark); text-underline-offset: 3px; }
/* focus = distinct du hover (outline, pas juste une couleur) — grammaire d'interaction unique, 24/07 */
.nk-info__toc a:focus-visible{ outline: 2px solid var(--nki-strong); outline-offset: 2px; }
@media (max-width: 600px){
  .nk-info{ padding: 40px 20px 64px; font-size: 16px; }
  .nk-info__card{ padding: 20px 22px; }
  .nk-info__card dl{ grid-template-columns: 1fr; gap: 4px; }
  .nk-info__card dt{ padding-top: 12px; }
  .nk-info__card dt:first-of-type{ padding-top: 0; }
  .nk-info__row{ grid-template-columns: 1fr; gap: 4px; }
  .nk-info__row-value{ text-align: left; }
  .nk-info__toc{ padding: 18px 20px; }
}

/* D031 (audit 27/07) — formulaire de contact natif (0 plugin), en complément du mailto
   existant sur /contact/. Mêmes tokens --nki-* que le reste de la page (héritage depuis
   .nk-info), même grammaire de champ/bouton que le login WooCommerce (44px, filet or,
   0 border-radius, 0 !important) — une seule charte d'interaction dans tout le site. */
.nt-contact-form{ margin: 8px 0 40px; }
.nt-contact-form__hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nt-contact-form .form-row{ margin: 0 0 18px; }
.nt-contact-form label{
  display: block;
  font-family: var(--nki-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nki-text);
  margin: 0 0 6px;
}
.nt-contact-form .input-text{
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 15px;
  font-family: var(--nki-body);
  color: var(--nki-strong);
  background: var(--nki-card);
  border: 1px solid var(--nki-line);
  border-radius: 0;
  box-sizing: border-box;
}
.nt-contact-form textarea.input-text{ min-height: 140px; resize: vertical; }
.nt-contact-form .input-text:focus{ border-color: var(--nki-gold); outline: none; }
.nt-contact-form__consent{ font-size: 13px; color: var(--nki-text); margin: 0 0 18px; }
.nt-contact-form__consent a{ color: var(--nki-gold); }
.nt-contact-form__submit{
  min-height: 44px;
  padding: 12px 26px;
  background: transparent;
  color: var(--nki-gold);
  border: 1px solid var(--nki-gold);
  border-radius: 0;
  font-family: var(--nki-mono);
  font-size: 13px;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--nt-transition), color var(--nt-transition);
}
/* Bug corrigé (signalé fondateur, capture bouton "vide") : --nki-card = var(--nt-veil), une teinte
   translucide à 4% d'opacité pensée pour un fond de carte discret, pas un texte plein — sur un
   remplissage or opaque au survol, elle rendait le libellé quasi invisible. Le pattern sitewide
   pour "texte sur fond or plein" est --nt-bg (cf. woocommerce-form-login__submit:hover, même bouton
   de référence) : repris ici pour rester sur LA règle CTA au lieu d'en réinventer une. */
.nt-contact-form__submit:hover{ background: var(--nki-gold); color: var(--nt-bg); }
.nt-contact-form__submit:focus-visible{ outline: 2px solid var(--nki-strong); outline-offset: 2px; }
.nt-contact-form__notice{
  padding: 14px 18px;
  margin: 0 0 24px;
  border: 1px solid var(--nki-line);
  font-size: 14.5px;
  color: var(--nki-strong);
}
.nt-contact-form__notice--success{ border-color: var(--nt-success); }
.nt-contact-form__notice--error{ border-color: var(--nt-alert); }

/* Fin .nk-info */