/* =============================================================================
pillar.css (Core, agnostique) — habillage du contrat HTML du template PILLAR
-----------------------------------------------------------------------------
RÈGLES : 100 % Design Tokens (--nt-*) · mobile-first · container unique ·
0 style inline · 0 valeur magique · 0 duplication · host-agnostic (cible .nk-*).
N'ALTÈRE JAMAIS : sémantique, data-nk-*, rôles, maillage, attributs MOS.
Les défenses hôte (Kadence/Astra a:hover…) = couche ADAPTER, en fin de fichier.
============================================================================= */
/* -------- Addendum TOKENS (à fusionner dans 00-tokens.css) : échelle typo fluide + filet or --------
a11y WCAG 1.4.4 : min/max en rem, partie fluide rem+vw (jamais vw pur). */
:root{
--nt-fs-hero: clamp(1.75rem, 1.15rem + 2.9vw, 2.75rem); /* H1 hero ~28→44 */
--nt-fs-h2: clamp(1.25rem, 1.08rem + 0.9vw, 1.625rem); /* titres section ~20→26 */
--nt-fs-h3: 1.1875rem; /* titres carte 19 */
--nt-fs-quote: clamp(1.375rem, 1.0rem + 1.9vw, 2rem); /* principe/citation ~22→32 */
--nt-lead: var(--nt-text-lg); /* 17 */
--nt-hairline: var(--nt-gold-a25); /* filet or subtil (.25) */
--nt-container: 72rem; /* 1152px — largeur de lecture hub */
}
/* -------- CONTAINER UNIQUE + rythme vertical (mobile-first) -------- */
.nk-hub{
max-width:var(--nt-container); margin-inline:auto;
padding-inline:var(--nt-space-md);
color:var(--nt-text); font-family:var(--nt-font-ui); line-height:1.5;
}
/* rythme entre blocs = marge de tête homogène (0 duplication : un seul sélecteur) */
.nk-hub > * + *{ margin-block-start:var(--nt-space-xl); }
/* wpautop insère des
parasites (entre composants ET dans les grilles ) → tous neutralisés (aucun composant n'utilise
). Sinon ils deviennent des items de grille et cassent la mise en colonnes. */
.nk-hub br{ display:none; }
.nk-hub > br:first-child + *{ margin-block-start:0; }
/* FIX SYSTÉMIQUE : l'hôte (Kadence `.entry-content ul`, posts) réinjecte padding-inline-start:~30px sur nos listes composants → cartes/vignettes/puces décalées à DROITE vs les titres (alignés au conteneur). On restaure padding-inline:0 (spécificité (0,2,0) > hôte (0,1,1)). Aligne le contenu sur les titres pour TOUTES les instances .nk-hub (home + hubs + decision + futurs templates). */
.nk-hub .nk-summary__list,.nk-hub .nk-topics__list,.nk-hub .nk-objections__list,.nk-hub .nk-problems__grid,.nk-hub .nk-guides__list{ padding-inline:0; }
/* (masquage CSS de l'image à la une SUPPRIMÉ — réglé À LA SOURCE : meta Kadence `_kad_post_feature='hide'` posé par post. Zéro rustine CSS.) */
@media (min-width:48em){ .nk-hub{ padding-inline:var(--nt-space-lg); } }
/* -------- PRIMITIVES PARTAGÉES -------- */
/* eyebrow or à filet */
.nk-hero__eyebrow,.nk-baro__eyebrow,.nk-topics__eyebrow,.nk-objections__eyebrow,
.nk-problems__eyebrow,.nk-guides__eyebrow,.nk-principle__label,.nk-newsletter__label{
font-family:var(--nt-font-ui); font-size:var(--nt-text-xs); font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color:var(--nt-text-muted);
margin:0 0 var(--nt-space-sm); display:inline-flex; align-items:center; gap:.6em;
} /* KILL OR : eyebrow/kicker = gris, jamais or (fondateur). 25/07 : nuance de gris
passée de --nt-text-faint (2.42:1, sous le seuil WCAG AA) à --nt-text-muted
(4.66:1) — même famille neutre, contraste réel. Le filet ::before reste sur
text-faint (décoratif, pas soumis au contraste texte). */
.nk-hero__eyebrow::before,.nk-topics__eyebrow::before,.nk-objections__eyebrow::before,
.nk-problems__eyebrow::before,.nk-guides__eyebrow::before{
content:""; inline-size:1.5rem; block-size:1px;
background:linear-gradient(90deg,var(--nt-text-faint),transparent); /* filet neutre (or tué) sur les kickers de section */
}
.nk-hero__eyebrow::before{ background:linear-gradient(90deg,var(--nt-gold),transparent); } /* sauf le breadcrumb (hero eyebrow) → filet OR */
/* titres */
.nk-hub h2{ font-family:var(--nt-font-heading); font-weight:500; color:var(--nt-text-strong);
font-size:var(--nt-fs-h2); line-height:1.1; letter-spacing:-.008em; margin:0; text-wrap:balance; }
.nk-hub h3{ font-family:var(--nt-font-heading); font-weight:500; color:var(--nt-text-strong);
font-size:var(--nt-fs-h3); line-height:1.14; margin:0; }
.nk-card__d{ font-family:var(--nt-font-body); color:var(--nt-text-muted);
font-size:var(--nt-text-sm); line-height:1.5; margin:var(--nt-space-xs) 0 0; max-width:44ch; }
/* Newsletter submit = bouton plein (élément de formulaire) */
.nk-newsletter__form button{
font-family:var(--nt-font-ui); font-weight:600; font-size:var(--nt-text-base);
color:var(--nt-text-strong); text-decoration:none; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center; gap:.6em; block-size:2.875rem; padding-inline:1.375rem;
border-radius:var(--nt-radius-sm); border:1px solid var(--nt-text-faint);
background:transparent; transition:background .2s, border-color .2s, transform .2s;
}
.nk-newsletter__form button:hover{ border-color:var(--nt-text-muted); background:rgba(255,255,255,.04); }
/* CTA hero = LIEN éditorial (0 boîte : filet bas discret + flèche or qui glisse) */
.nk-hero__cta{
font-family:var(--nt-font-ui); font-weight:600; font-size:var(--nt-text-base);
color:var(--nt-text-strong); text-decoration:none; cursor:pointer;
display:inline-flex; align-items:center; justify-content:flex-start; gap:.5em;
border:0; background:none; border-radius:0; padding:0; block-size:auto;
} /* plus de « bouton legacy » : aucune barre soulignée, aucun or. Affordance = SEULE mini flèche subtile au survol/clic (fondateur). */
/* état normal lisible (24/07) : --nt-text-faint (2.42:1) + opacity .55 cumulés rendaient la flèche
quasi invisible au repos ("Explorer le guide"/"Choisir mon univers" signalés par capture utilisateur)
→ --nt-text-muted (4.66:1, AA) à pleine opacité ; reste plus discret que le gold du survol */
.nk-hero__cta::after{ content:"\2192"; font-size:.85em; color:var(--nt-text-muted); transition:transform .3s, color .3s; }
.nk-hero__cta:hover::after,.nk-hero__cta:active::after{ opacity:1; color:var(--nt-gold); transform:translateX(.3em) scale(1.22); } /* survol/clic = mini flèche OR + grossit légèrement (seul or hors breadcrumb, réservé au survol — jamais le focus clavier, cf. outline global .nk-hub a:focus-visible) */
.nk-hero__cta:hover{ background:none; color:var(--nt-text-strong); }
/* lien or discret (cartes, freins, guides, principe) */
.nk-card__t,.nk-objection__go{ transition:color .2s; }
.nk-objection__go{ font-family:var(--nt-font-ui); font-weight:600; font-size:var(--nt-text-sm);
color:var(--nt-text-strong); text-decoration:none; margin-block-start:var(--nt-space-xs); display:inline-block; } /* lien nav = blanc cassé (plus l'or), affordance via hairline/hover */
/* focus visible global (a11y) */
.nk-hub a:focus-visible,.nk-hub summary:focus-visible,.nk-hub button:focus-visible,.nk-hub input:focus-visible{
outline:2px solid var(--nt-text-strong); outline-offset:3px; border-radius:2px; /* focus a11y = NEUTRE (plus d'encadré OR « legacy » au clic) */
}
/* ══════════ HERO — LA RÈGLE UNIQUE (magazine, tous breakpoints, ZÉRO !important) ══════════
⭐ PROPRIÉTAIRE UNIQUE de la STRUCTURE du hero (layout, espacements, responsive) — consolidé 17/07.
nt-guide.css / nt-guide-diagnostic.css / nk-decision-golden.css NE gèrent PLUS le hero.
Seule variante autorisée ailleurs = CONTENU (ex. object-position par post dans 06-cluster.css), jamais la structure.
Photo pleine largeur EN HAUT → texte DESSOUS (eyebrow/H1/chapô/CTA). Coins NETS, 0 scrim, 0 texte-sur-image.
Couvre les 3 systèmes : .nk-hero (pilier/FOU/article) + .g-hero (Diagnostic) + .nt-pillar-hero (money).
(24/07 nuit : 4e système .nt-mag/.m-hero retiré — CSS mort, jamais de shortcode/rendu, cf. audit rails.)
Média = dernier enfant DOM → order:-1 le remonte. Piège Kadence 0×0 : hauteur EXPLICITE (jamais absolute). Tokens-only (brand-neutral). */
.nk-hero, .nt-guide .g-hero, .nt-pillar-hero{
position:static; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;
inline-size:100vw; max-inline-size:100vw; margin-inline:calc(50% - 50vw); padding:0; overflow:visible;
aspect-ratio:auto; min-block-size:0; border-radius:0; row-gap:var(--nt-space-sm); background:transparent; }
/* ⭐ CONTENEUR média (figure .nk-hero__media / .nt-pillar-hero__media) = 16:9 GARANTI sur TOUS les systèmes, INDÉPENDANT de l'ancêtre.
PARASITE CORRIGÉ : le ratio était scopé `.nk-hub`/`.nk-decision` → tout hero HORS de ces wrappers (pilier/guide/money isolé)
perdait l'aspect-ratio → la s'effondrait au ratio NATUREL de l'image (portrait/carré), car Kadence (figure/.wp-block-image, img{height:auto})
reprenait la main avec le ratio intrinsèque. Sélecteur élargi = LA règle unique, une seule pour les 4 systèmes.
aspect-ratio en !important = doctrine hero (seul moyen de battre le forçage figure/img de l'hôte Kadence sur le cadre). */
.nk-hero__media, .nt-pillar-hero__media{
position:relative; inset:auto; order:-1; inline-size:100%; margin:0;
block-size:auto; aspect-ratio:var(--nt-hero-ratio) !important; border-radius:0; overflow:hidden; }
.nk-hero__media img, .nk-hero__img, .nt-pillar-hero__media img{ inline-size:100%; block-size:100%; aspect-ratio:var(--nt-hero-ratio) !important; object-fit:cover !important; object-position:center; display:block; border-radius:0; }
.nt-guide .g-hero__img{ order:-1; position:static; inset:auto; inline-size:100%; block-size:auto; aspect-ratio:var(--nt-hero-ratio) !important; object-fit:cover !important; margin:0; border-radius:0; }
.nk-hero::after, .nt-guide .g-hero::after, .nt-pillar-hero__overlay{ content:none; display:block; background:none; } /* scrim supprimé */
.nk-hero > :not(.nk-hero__media){ position:static; z-index:auto; padding-inline:clamp(18px,6vw,28px); }
.nt-guide .g-hero__in, .nt-pillar-hero__overlay{ position:static; order:0; inset:auto; inline-size:100%; padding-inline:clamp(18px,6vw,28px); }
.nk-hero__eyebrow, .nt-guide .g-hero__cat, .nt-pillar-hero__crumb{ text-shadow:none; }
.nt-guide .g-hero__cat{ color:var(--nt-text-faint); }
.nk-hero__eyebrow, .nt-pillar-hero__crumb{ color:var(--nt-gold); } /* hero eyebrow = LE breadcrumb (où l'on est) → OR, le SEUL or gardé */
/* letter-spacing : source unique --nt-tracking-heading (24/07 nuit) — cette valeur était codée
en dur ici, hors du token, avant même le passage Fraunces->Literata (dette pré-existante,
trouvée en comparant les Computed styles entre gabarits). */
.nk-hero__title, .nk-hero h1, .nt-guide .g-hero h1, .nt-pillar-hero h1{ font-family:var(--nt-font-heading); font-weight:400; color:var(--nt-text-strong);
font-size:var(--nt-h1); line-height:var(--nt-lh-h1); letter-spacing:var(--nt-tracking-heading); margin:var(--nt-space-sm) 0 0;
max-width:22ch; text-wrap:balance; text-shadow:none; }
/* sous-titre du hero (span dans le H1) = ligne séparée, subordonnée (récupéré de nk-decision-golden mort) */
.nk-hero__title-sub{ display:block; font-style:normal; font-weight:400; font-size:.56em; line-height:1.32; letter-spacing:normal; color:var(--nt-text-muted); margin-block-start:.7em; max-width:34ch; text-wrap:balance; }
.nk-hero__intro, .nk-hero__lead, .nt-guide .g-hero__stand, .nt-pillar-hero .nt-intro__answer{ font-family:var(--nt-font-body); color:var(--nt-text); font-size:var(--nt-lead);
line-height:1.5; max-width:46ch; margin:var(--nt-space-sm) 0 0; text-shadow:none; } /* lede ATTÉNUÉ #dbdce0 + colonne bridée 46ch (verdict DA designer 19/07) : blanc fort RARE = réservé H1+CTA ; le lede recule d'un cran (lisibilité AA ~13:1) et la colonne courte signe la mise en page de revue. */
.nk-hero__cta{ margin-block-start:var(--nt-space-md); align-self:flex-start; }
/* Décision/guide : H1 + breadcrumb RESSERRÉS à la source (fondateur 17/07). H1 clamp 28→45px → 24→38px ; breadcrumb 12px/.14em → 10px/.1em (plus discret, tient mieux sur une ligne). Scopé .nk-decision : n'affecte pas home/hub/pilier. */
.nk-decision .nk-hero__title{ font-size:clamp(1.45rem,3.9vw,2.55rem); max-width:36ch; line-height:1.2; } /* H1 « le plus gros tenant sur 2 lignes » : plafond calculé ~1.45rem @412px (colonne ~362px, titre ~62 car, avance moy ~0.5em → ~31 car/ligne = 2 lignes). Reste > H2 (--nt-h2 max 1.55rem) à tous les breakpoints. Vérif visuelle 2 lignes recommandée ; fallback 1.4rem si débord. Fondateur 17/07. */
.nk-decision .nk-hero__eyebrow{ font-size:.69rem; letter-spacing:.1em; } /* breadcrumb +10%. Fondateur 17/07. */
/* H1 unifié : le clamp Diagnostic gère déjà tous les breakpoints (32→53px), plus d'override mobile */
/* TABLETTE + DESKTOP (≥48em) : le HERO reste 16:9 à TOUTES les largeurs (règle unique = base l.105-109, aspect-ratio:16/9).
⚠️ PARASITE RETIRÉ (fondateur 18/07) : `max-block-size:var(--nt-hero-h)` (46rem = 736px) plafonnait la HAUTEUR sur desktop,
ce qui CASSAIT le 16:9 dès ~1308px de large (le cadre 100vw gardait sa largeur mais était rogné en hauteur → letterbox :
mesuré 1440px→1.957:1, 1680px→2.283:1) alors que mobile — sans cap — restait 16:9. « 16:9 comme mobile » = ne plus plafonner.
Le cadre média N'A PLUS aucune règle ici : seul l'aspect-ratio de base gouverne le desktop. Reste ici : la colonne de lecture texte. */
@media (min-width:48em){
.nk-hero > :is(.nk-hero__eyebrow,.nk-hero__title,.nk-hero__intro,.nk-hero__cta),
.nt-pillar-hero__overlay{ inline-size:100%; max-inline-size:58rem; margin-inline:auto; padding-inline:clamp(20px,4vw,32px); }
/* .nt-guide extrait du groupe 58rem ci-dessus (24/07 nuit, Phase 1 rails) : seul gabarit de la famille
Reading qui n'était PAS déjà sur --nt-rail-reading (52rem) — .nt-pillar-hero reste sur 58rem (tier
Money/Article, 1 seule page live, cf. audit rails), non touché. Padding conservé identique
(clamp(20px,4vw,32px)) : on ne supprime pas un padding utile juste pour tomber mathématiquement
sur 832px, cf. décision fondateur. (.nt-mag retiré du groupe 24/07 nuit — CSS mort, jamais de
shortcode/rendu, cf. audit rails.) */
.nt-guide .g-hero__in{ inline-size:100%; max-inline-size:var(--nt-rail-reading); margin-inline:auto; padding-inline:clamp(20px,4vw,32px); }
/* LEDE = colonne courte 46ch (verdict designer 19/07), MAIS bord gauche aligné sur la colonne hero (58rem centrée) :
on remplace le max 58rem par 46ch et on reproduit l'offset de l'auto-centrage via calc → left identique au H1, le lede recule en largeur (fin du lede pleine largeur = tell « SaaS »). Spéc (0,2,0) = groupe ci-dessus mais PLUS TARD → gagne. */
.nk-hero > .nk-hero__intro{ max-inline-size:46ch; margin-inline:max(0px, calc((100% - 58rem) / 2)) auto; }
/* FIX SOURCE — hero aligné sur la colonne du CORPS (.nk-hub 72rem) → UNE seule colonne, fin du décalage hero↔contenu (fondateur 19/07).
Scope = TOUTES les pages en colonne 72rem (.nk-hub:not(.nk-decision) = home + hub). La famille .nk-decision (décision/pilier/cluster)
est full-bleed + --rail (autre système, déjà cohérente) → exclue. Padding = MÊME token que .nk-hub (--nt-space-lg) → bord gauche identique, 0 magic number.
Le lede garde sa colonne courte 46ch, aligné au même bord gauche via le calc en 72rem.
24/07 nuit : 72rem -> --nt-rail-discovery (tokenisé, même valeur, Phase 1 rails). */
.nk-hub:not(.nk-decision) .nk-hero > :is(.nk-hero__eyebrow,.nk-hero__title,.nk-hero__cta){ max-inline-size:var(--nt-rail-discovery); padding-inline:var(--nt-space-lg); }
.nk-hub:not(.nk-decision) .nk-hero > .nk-hero__intro{ max-inline-size:56ch; margin-inline:max(0px, calc((100% - 72rem) / 2)) auto; padding-inline:var(--nt-space-lg); font-size:19px; line-height:1.7; font-weight:380; } /* lede home V4 (verdict web designer 19/07) : reproduit l'AIR du lede pilier (ce qui plaît réellement = respiration, pas la couleur/police) en gardant NEWSREADER (cohérence corps home) — 19px / interligne 1.7 / graisse 380, colonne 56ch. Couleur inchangée (--nt-text, écart avec #c6c7cc invisible). */
/* B) Famille DÉCISION (décision/pilier/cluster/guide) : le corps est full-bleed inséré par --rail = colonne 52rem centrée.
Le hero s'y aligne → bord gauche = --rail, identique au corps. (Le média hero reste full-bleed, non ciblé ici.)
24/07 nuit : 52rem -> --nt-rail-reading (tokenisé, même valeur, Phase 1 rails). Hub/Cluster reste ici (famille
.nk-decision), volontairement NON déplacé vers Discovery sans validation explicite du fondateur. */
.nk-decision .nk-hero > :is(.nk-hero__eyebrow,.nk-hero__title,.nk-hero__cta){ max-inline-size:var(--nt-rail-reading); padding-inline:0; }
.nk-decision .nk-hero > .nk-hero__intro{ max-inline-size:46ch; margin-inline:max(0px, calc((100% - 52rem) / 2)) auto; padding-inline:0; }
}
/* Respiration hero — déclinaison Guide (Diagnostic) : ouverture plus aérée / épurée (spacing = propriété pillar) */
.nt-guide .g-hero__in{ padding-block-end:clamp(1.2rem,5vw,2rem) }
.nt-guide .g-hero__stand{ margin-block-start:clamp(1rem,3.6vw,1.5rem) }
/* -------- 2 · BAROMÈTRE (aside, subordonné) -------- */
.nk-baro{ position:relative; overflow:hidden; border-radius:var(--nt-radius-md);
background:linear-gradient(180deg,var(--nt-surface-1),var(--nt-bg));
border:1px solid var(--nt-hairline); padding:var(--nt-space-lg) var(--nt-space-md); }
.nk-baro__mark{ display:block; inline-size:2.375rem; block-size:auto; margin-block-end:var(--nt-space-sm); }
.nk-baro__mark-track{ stroke:var(--nt-gold-dark); opacity:.30; stroke-width:1.5; stroke-linecap:round; }
.nk-baro__mark-fill{ stroke:var(--nt-gold); stroke-width:1.5; stroke-linecap:round; }
.nk-baro__mark-needle{ stroke:var(--nt-text-strong); stroke-width:1.3; stroke-linecap:round; }
.nk-baro__mark-hub{ fill:var(--nt-bg); stroke:var(--nt-gold); stroke-width:1.3; }
.nk-baro__title{ font-size:var(--nt-fs-h2); margin:var(--nt-space-sm) 0 0; }
.nk-baro__lead{ font-family:var(--nt-font-body); color:var(--nt-text); font-size:var(--nt-text-sm);
max-width:52ch; margin:var(--nt-space-sm) 0 0; }
.nk-baro__cta{ font-family:var(--nt-font-ui); font-weight:600; font-size:var(--nt-text-sm);
color:var(--nt-text-muted); text-decoration:none; margin-block-start:var(--nt-space-sm);
display:inline-flex; align-items:center; gap:.5em; }
.nk-baro__meta{ font-size:var(--nt-text-xs); color:var(--nt-text-faint); margin:var(--nt-space-sm) 0 0; }
/* -------- 3 · SUMMARY (À retenir) -------- */
/* Séparateur pleine largeur = filet NEUTRE discret (or tué : le hairline doré .25 en full-bleed
se lisait comme une « barre dorée » entre le résumé et « Par où commencer »). L'or reste RARE. */
.nk-summary{ border-block:1px solid var(--nt-white-a08); padding-block:var(--nt-space-lg); }
.nk-summary__title{ font-size:var(--nt-fs-h2); margin-block-end:var(--nt-space-md); }
.nk-summary__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--nt-space-sm); max-width:45rem; }
.nk-summary__list li{ font-family:var(--nt-font-heading); font-weight:400; color:var(--nt-text-strong);
font-size:var(--nt-lead); line-height:1.35; padding-inline-start:0; position:relative; }
.nk-summary__list li::before{ content:none; } /* PUCE FILET RETIRÉE SITE-WIDE (fondateur 19/07) : 3 filets/tirets clonés en début de ligne = tell « CHECKLIST LLM » (anti-IA). Statements nus + air ; ouverture = 1 filet doré sur le BLOC, jamais un marqueur par item. */
/* ====================================================================
V4 HOME — « La promesse Nooktails » : traitement ÉDITORIAL PREMIUM (fondateur 19/07).
Scopé .nk-home UNIQUEMENT → 0 impact sur les pages décision (.nk-decision .nk-summary = --deep).
EN PLACE (pas de décalage), BIEN AÉRÉ. Hiérarchie corrigée : le titre n'est plus un
2e H1 (même 26px/#f1f1f3 collé aux items) mais un LABEL discret (Inter, capitales,
ton atténué) ; les 3 promesses deviennent la vraie emphase (Fraunces, plus grandes).
==================================================================== */
.nk-home .nk-summary{
border-block:0;
border-top:1px solid var(--nt-white-a08); /* séparateur neutre discret (or gardé rare) */
padding-block:clamp(2.4rem, 6vw, 4rem);
margin-block-start:clamp(1rem, 3vw, 2rem);
}
.nk-home .nk-summary__title{
font-family:var(--nt-font-ui); /* Inter = registre LABEL, distinct du serif hero */
font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
color:var(--nt-text-muted); /* ton atténué → subordonné au H1 (fini « 2e titre principal ») */
margin-block-end:0;
font-size:.75rem; /* 12px — unifié avec l'eyebrow topics (était 11.52, verdict designer 19/07 : 2 tailles quasi = pour le même rôle = incohérence) */
}
.nk-home .nk-summary__title::after{ content:""; display:block; inline-size:44px; block-size:1px; background:var(--nt-gold); margin-block:.9rem 0; } /* UN seul filet doré d'OUVERTURE du bloc (or rare) — remplace les 3 puces tirets (verdict designer 19/07). L'or signe le bloc, il ne se démultiplie pas par item. */
.nk-home .nk-summary__list{ gap:clamp(1.4rem, 3.2vw, 2.1rem); max-width:50rem; margin-block-start:clamp(1.5rem, 3.5vw, 2.3rem); } /* AIR généreux = le rythme (verdict designer : l'espacement fait le tempo, pas un glyphe) */
.nk-home .nk-summary__list li{
font-family:var(--nt-font-heading); font-size:clamp(1.05rem, 1.6vw, 1.25rem); /* 20px cap (verdict designer 19/07 : 24px rivalisait avec les titres section 26 → hiérarchie plate). Reste Fraunces présent mais clairement SOUS les titres. */
font-weight:400; line-height:1.5; color:var(--nt-text-strong); padding-inline-start:0; /* lh 30px */
}
.nk-home .nk-summary__list li::before{ content:none; } /* PUCE TIRET RETIRÉE (verdict designer 19/07) : 3 tirets clonés en colonne = « checklist LLM ». On met de l'air + 1 filet doré d'ouverture, jamais un autre marqueur par item. */
.nk-home .nk-topics__lead{ font-size:15.5px; line-height:1.68; } /* lead remonté 13.5→15.5 (verdict designer 19/07) : à 13.5 il tombait trop bas sous l'intro 19px (« note de bas de page ») ; 15.5 le rattache à la famille corps. */
/* -------- 4 & 8 · GRILLES DE CARTES (topics + problems) — même primitive -------- */
.nk-topics__lead{ font-family:var(--nt-font-body); color:var(--nt-text-muted); font-size:var(--nt-text-sm);
max-width:60ch; margin:var(--nt-space-xs) 0 var(--nt-space-md); }
.nk-topics__list,.nk-problems__grid{ list-style:none; margin:var(--nt-space-md) 0 0; padding:0;
display:grid; grid-template-columns:1fr; gap:0; }
.nk-topics__title,.nk-problems__title{ font-size:var(--nt-fs-h2); }
.nk-item{ display:block; }
.nk-item > a{ display:block; text-decoration:none; padding:var(--nt-space-md) 0;
border-block-start:1px solid var(--nt-hairline); }
.nk-item > a:hover .nk-card__t{ color:var(--nt-text-strong); } /* hover carte = titre blanc (plus l'or « cheap »), l'affordance vient du zoom/filet thumb */
/* vignette optionnelle des cartes (générique — bénéficie à tous les templates) */
.nk-card__thumb-wrap{ display:block; overflow:hidden; border:1px solid var(--nt-line);
border-radius:var(--nt-radius-sm); margin-block-end:var(--nt-space-sm); }
.nk-card__thumb{ inline-size:100%; block-size:auto; aspect-ratio:16/9; object-fit:cover; display:block;
transition:transform .4s ease, filter .4s ease; }
.nk-item--thumb > a{ border-block-start:0; padding-block-start:0; } /* la vignette remplace le filet de tête */
/* micro-interactions (subtiles) : zoom 2 % + éclaircissement + filet accentué (le titre passe en or via .nk-item > a:hover) */
@media (prefers-reduced-motion:no-preference){ .nk-item--thumb > a:hover .nk-card__thumb{ transform:scale(1.02); filter:brightness(1.05); } }
.nk-item--thumb > a:hover .nk-card__thumb-wrap{ border-color:var(--nt-line-strong); }
@media (min-width:37.5em){ .nk-topics__list{ grid-template-columns:1fr 1fr; column-gap:var(--nt-space-lg); } }
@media (min-width:48em){ .nk-problems__grid{ grid-template-columns:1fr 1fr 1fr; column-gap:var(--nt-space-lg); }
.nk-problems__title{ font-size:var(--nt-fs-hero); } } /* variante « chapitre » desktop */
/* carte VEDETTE (guides/topics) = ADN Baromètre */
.nk-item--feature{ display:block; text-decoration:none; position:relative; overflow:hidden;
padding:var(--nt-space-md); border-radius:var(--nt-radius-md);
background:linear-gradient(180deg,var(--nt-surface-1),var(--nt-bg)); border:1px solid var(--nt-hairline);
margin-block-end:var(--nt-space-md); }
.nk-item--feature .nk-card__t{ font-family:var(--nt-font-heading); font-size:var(--nt-fs-h2); }
/* -------- 5 · OBJECTIONS (freins) — liste éditoriale, citation italique -------- */
.nk-objections__list{ list-style:none; margin:var(--nt-space-md) 0 0; padding:0; }
.nk-objections__list li{ padding-block:var(--nt-space-md); border-block-start:1px solid var(--nt-hairline); }
.nk-objections__list li:last-child{ border-block-end:1px solid var(--nt-hairline); }
.nk-objection__q{ font-family:var(--nt-font-heading); font-style:italic; font-weight:500;
color:var(--nt-text-strong); font-size:var(--nt-fs-h3); line-height:1.2; margin:0 0 var(--nt-space-xs); }
.nk-objection__a{ font-family:var(--nt-font-body); color:var(--nt-text-muted); font-size:var(--nt-text-sm);
line-height:1.55; margin:0; max-width:64ch; }
.nk-objection__a a{ color:var(--nt-text-strong); text-decoration:none; border-block-end:1px solid var(--nt-hairline); } /* lien = blanc + filet hairline (affordance conservée, or retiré) */
/* (section « 5ter HERO DECISION » SUPPRIMÉE — c'étaient des overrides de l'ANCIEN hero 16/9 texte-sur-image
qui clippait les titres longs. Le HERO magazine unifié met l'image EN HAUT, texte dessous : aucun clipping,
aucun override décision nécessaire. La règle unique (plus haut) suffit pour tous les templates.) */
/* -------- 5bis · TRIEUR — SUPPRIMÉ (16/07) : c'était les objections en CARTES de décision (border + dégradé + grille 3-col + hover-lift) = tell IA.
Le trieur .nk-decision est gouverné par la LITANIE (06-cluster.css « TRIEUR / litanie » : rangs au filet or, typo serif, flèche or au survol, 0 carte).
On ne remet AUCUNE carte ici. -------- */
/* -------- 6 · IMAGE ÉDITORIALE -------- */
.nk-editorial-image{ margin:0; }
.nk-editorial-image img{ inline-size:100%; block-size:auto; display:block;
border:1px solid var(--nt-line-strong); } /* filet or fin — cadre premium sobre */
.nk-editorial-image--mono img{ filter:saturate(.3) contrast(1.03) brightness(.99); } /* « souvenir/reportage » : couleur désaturée (garde l'identité chaude), plus de N&B */
.nk-editorial-image figcaption{ font-family:var(--nt-font-body); font-size:var(--nt-text-sm);
line-height:1.5; color:var(--nt-text-muted); margin:var(--nt-space-sm) 0 0; max-width:56ch; }
.nk-editorial-image figcaption b{ display:block; font-family:var(--nt-font-heading); font-style:italic; font-weight:500;
font-size:var(--nt-fs-h3); color:var(--nt-text-strong); margin-block-end:.25em; } /* légende-force = message de marque (bloc + plus grand), pas une légende de photo */
/* -------- 7 · PRINCIPE (signature) -------- */
.nk-principle{ padding-block:var(--nt-space-lg); text-align:center; }
.nk-principle__label{ justify-content:center; }
.nk-principle__quote{ margin:0; }
.nk-hub .nk-principle__quote{ border:0; padding:0; } /* FIX host : le thème injecte border-left or + padding-left sur → filet orphelin à gauche + citation décentrée. On neutralise (design = citation centrée sans filet). */
.nk-principle__quote p{ font-family:var(--nt-font-heading); font-style:italic; font-weight:400;
color:var(--nt-text-strong); font-size:var(--nt-fs-quote); line-height:1.2; margin:0 auto; max-width:22ch; text-wrap:balance; }
/* VERDICT CINÉMA (backlit) — climax, 1×/article : pleine page, halo chaud « lumière derrière », texte qui rayonne */
.nk-decision .nk-principle{ position:relative; inline-size:100vw; max-inline-size:100vw; margin-inline:calc(50% - 50vw);
padding-inline:clamp(20px,6vw,28px); overflow:hidden; } /* padding-block + text-align RETIRÉS (morts) : source unique = 06-cluster .nk-principle (padding-block clamp 2.6-4rem, text-align:left), qui gagne l'égalité 0,2,0 en chargeant APRÈS pillar. Ici on garde SEULEMENT le bleed structurel + padding-inline + overflow. 17/07. */
.nk-decision .nk-principle::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(58% 52% at 50% 44%, rgba(124,96,56,.18), rgba(124,96,56,.05) 44%, transparent 72%); }
.nk-decision .nk-principle > *{ position:relative; z-index:1; }
.nk-decision .nk-principle__label{ color:var(--nt-text-muted); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; font-style:normal; margin:0 0 clamp(1.1rem,3.2vw,1.7rem); } /* SUR-TITRE du verdict (réf 2328, OR RARE) : muted = whisper qui introduit sans voler le climax ; PAS de gold ici — gold label + halo doré = verdict redevient « trop Claude ». Gold réservé aux eyebrows de navigation (.nk-pitfalls__eyebrow etc.), pas au climax mono premium. */
/* Rythme CINÉMA (17/07) : plancher mobile abaissé (fin du « pavé » plein écran sur 412px) + 1re ligne AGRANDIE en relief via ::first-line — contraste grand/petit SANS toucher au markup (quote = 1 string) → 0 régression sur les 8 pages en prod. */
/* VERDICT + CODA = MÊME COULEUR/TYPO (réf 2328, doctrine OR RARE) : 1re ligne ENCRE FORTE (var(--nt-text-strong)), corps MUTED. Aucun gold (le gold reste sur l'eyebrow uniquement — trop de gold = « trop Claude »).
24/07 v2 : était #F5F3F4 (blanc cassé, hérité du fond noir V8) → texte quasi invisible depuis le passage fond clair (repéré via capture utilisateur, page « chat en appartement »). */
.nk-decision .nk-principle__quote p{ font-style:normal; font-size:clamp(1.22rem,3.3vw,2rem); line-height:1.5; letter-spacing:-.01em; max-width:18ch; margin-inline:auto; text-wrap:balance; color:var(--nt-text-muted); }
.nk-decision .nk-principle__quote p::first-line{ font-size:clamp(1.72rem,5.4vw,2.95rem); line-height:1.3; letter-spacing:-.016em; color:var(--nt-text-strong); }
/* -------- 9 · GUIDES -------- */
.nk-guides__lead{ font-family:var(--nt-font-body); color:var(--nt-text-muted); font-size:var(--nt-text-sm);
max-width:60ch; margin:var(--nt-space-xs) 0 var(--nt-space-md); }
.nk-guides__lead a{ color:var(--nt-text-strong); text-decoration:none; border-block-end:1px solid var(--nt-hairline); } /* lien = blanc + filet hairline (affordance conservée, or retiré) */
.nk-guides__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; }
@media (min-width:37.5em){ .nk-guides__list{ grid-template-columns:1fr 1fr; column-gap:var(--nt-space-lg); } }
/* -------- 10 · CROSSLINKS (maillage latéral) -------- */
.nk-crosslinks__title{ font-size:var(--nt-fs-h2); }
.nk-crosslinks__lead{ font-family:var(--nt-font-body); color:var(--nt-text-muted); font-size:var(--nt-text-sm);
max-width:62ch; margin:var(--nt-space-xs) 0 var(--nt-space-md); }
.nk-crosslinks__nav{ font-family:var(--nt-font-body); font-size:var(--nt-text-base); color:var(--nt-text-muted);
line-height:1.9; display:flex; flex-wrap:wrap; gap:0 .8em; }
.nk-crosslinks__nav a{ color:var(--nt-text-strong); text-decoration:none; transition:color .3s; }
.nk-crosslinks__nav a:hover{ color:var(--nt-text-strong); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; text-decoration-color:var(--nt-text-faint); } /* hover nav = blanc + soulignement gris (plus l'or) */
.nk-crosslinks__nav a:not(:last-child)::after{ content:"·"; color:var(--nt-text-faint); margin-inline-start:.8em; border:0; }
/* -------- 11 · FAQ -------- */
.nk-faq__title{ font-size:var(--nt-fs-h2); margin-block-end:var(--nt-space-md); }
.nk-faq__item{ border-block-start:1px solid var(--nt-hairline); padding-block:var(--nt-space-sm); }
.nk-faq__item:last-child{ border-block-end:1px solid var(--nt-hairline); }
.nk-faq__item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--nt-space-md); }
.nk-faq__item summary::-webkit-details-marker{ display:none; }
/* marqueur = --nt-text-muted (24/07) : --nt-text-faint (2.42:1) rendait le "+" quasi invisible au repos,
pas seulement au survol — grammaire d'interaction unique */
.nk-faq__item summary::after{ content:"+"; color:var(--nt-text-muted); font-family:var(--nt-font-ui); font-size:1.25rem; transition:color var(--nt-transition); }
.nk-faq__item[open] summary::after{ content:"\2013"; }
.nk-faq__item summary:hover::after{ color:var(--nt-text-strong); }
.nk-faq__item summary:focus-visible{ outline:2px solid var(--nt-text-strong); outline-offset:3px; }
.nk-faq__q{ font-size:clamp(1.05rem,2.5vw,1.3rem); } /* FAQ taille unique -15% tous articles */
.nk-faq__a{ font-family:var(--nt-font-body); color:var(--nt-text-muted); font-size:var(--nt-text-sm);
line-height:1.6; margin:var(--nt-space-sm) 0 0; max-width:64ch; }
/* -------- 12 · NEWSLETTER (aside, colophon) -------- */
.nk-newsletter{ text-align:center; border-block-start:1px solid var(--nt-text-faint); padding-block:var(--nt-space-lg); } /* séparateur = neutre (or tué) */
.nk-newsletter__label{ justify-content:center; }
.nk-hub .nk-newsletter__title{ font-size:var(--nt-fs-h2); margin:var(--nt-space-sm) auto 0; max-width:22ch; } /* (0,2,0) > .nk-hub h2 (0,1,1) : re-centre le titre */
.nk-newsletter__lead{ font-family:var(--nt-font-body); color:var(--nt-text-muted); font-size:var(--nt-text-sm);
margin:var(--nt-space-sm) auto 0; max-width:48ch; }
.nk-newsletter__label-field{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } /* label a11y visually-hidden (jamais display:none) */
.nk-newsletter__form{ display:flex; justify-content:center; margin:var(--nt-space-md) auto 0; max-width:26rem;
border-block-end:1px solid var(--nt-text-faint); }
.nk-newsletter__form input{ flex:1; min-inline-size:0; background:none; border:0; color:var(--nt-text-strong);
font-family:var(--nt-font-body); font-size:var(--nt-text-base); padding:.6em .25em; }
.nk-newsletter__form input::placeholder{ color:var(--nt-text-faint); }
.nk-newsletter__form button{ block-size:auto; border:0; background:none; color:var(--nt-text-strong);
padding:.6em .4em; font-size:var(--nt-text-sm); }
.nk-newsletter__meta{ font-size:var(--nt-text-xs); color:var(--nt-text-faint); margin:var(--nt-space-sm) 0 0; }
/* -------- MOTION a11y -------- */
@media (prefers-reduced-motion:reduce){
.nk-hub *,.nk-hub *::before,.nk-hub *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
/* =============================================================================
COUCHE ADAPTER (host-defense) — neutralise les styles de lien de l'hôte
Kadence/Astra appliquent a:hover/:focus/:active{color:highlight} → repeindrait
les libellés de CTA. Le composant impose sa couleur dans tous les états.
(À terme : fichier adapter séparé par hôte. Ici scopé .nk-hub.)
============================================================================= */
.nk-hub a.nk-hero__cta,.nk-hub a.nk-hero__cta:link,.nk-hub a.nk-hero__cta:visited,
.nk-hub a.nk-hero__cta:hover,.nk-hub a.nk-hero__cta:focus,.nk-hub a.nk-hero__cta:active{ color:var(--nt-text-strong); }
/* ══════════ SIGNOFF — CLÔTURE PLEIN ÉCRAN (touche designer, 17/07) ══════════
Climax de fin de guide : grande IMAGE N&B full-bleed + VERDICT serif posé EN OVERLAY (bas),
« éclairage » = image sombre/contrastée qui rétroéclaire le texte blanc (réf. g-chapter N&B de 2322/440).
Composant UNIVERSEL (0 scope .nk-decision / .nt-guide) → décline sur les 2 systèmes :
· pages shortcode .nk-decision : [nooktails_signoff] · pages g-hero (HTML brut) : .
Palette tokens (anthracite #16161A + or mat). Anti-IA : filet doré + typo, zéro picto/emoji. */
.nk-signoff{ position:relative; inline-size:100vw; max-inline-size:100vw; margin-inline:calc(50% - 50vw);
min-block-size:clamp(72svh,88svh,94svh); display:flex; align-items:flex-end; overflow:hidden;
background:var(--nt-bg); isolation:isolate; }
.nk-signoff__img{ position:absolute; inset:0; z-index:0; inline-size:100%; block-size:100%;
object-fit:cover; object-position:50% 50%; filter:grayscale(1) contrast(1.06) brightness(.86); display:block; border:0; border-radius:0; }
.nk-signoff::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(0deg,rgba(17,17,21,.92) 0%,rgba(17,17,21,.55) 30%,rgba(17,17,21,0) 62%); }
.nk-signoff__in{ position:relative; z-index:2; inline-size:100%; max-inline-size:70rem; margin-inline:auto;
padding:clamp(2.2rem,7vw,4.4rem) clamp(1.4rem,6vw,2.6rem); }
.nk-signoff__label{ display:inline-flex; align-items:center; gap:.6em; margin:0 0 clamp(1rem,3vw,1.5rem);
font-family:var(--nt-font-ui); font-size:var(--nt-text-xs); font-weight:600; letter-spacing:.16em;
text-transform:uppercase; color:var(--nt-text-faint); } /* kicker signoff = gris (or tué) */
.nk-signoff__label::before{ content:""; inline-size:2rem; block-size:1px; background:linear-gradient(90deg,var(--nt-text-faint),transparent); }
.nk-signoff__line{ margin:0; font-family:var(--nt-font-heading); font-weight:400; letter-spacing:-.018em; text-wrap:balance; }
/* Rythme CINÉMA : alternance grand/petit (générique de film) + plancher mobile bas. Lignes impaires = ligne-clé qui ressort ; paires = respiration plus discrète/petite. (spans posés par ligne → contraste via :nth-child). */
.nk-signoff__line span{ display:block; line-height:1.24; color:var(--nt-text-strong); font-size:clamp(1.5rem,4.8vw,2.7rem); }
.nk-signoff__line span:nth-child(even){ font-size:clamp(1.12rem,3.3vw,1.7rem); color:var(--nt-text-muted); }
.nk-signoff__line span.dim{ color:var(--nt-text-muted); }
/* CODA PUNCHLINE 2 COULEURS (réf 2328) : coda découpée sur « | » → spans, 1re phrase ENCRE FORTE,
suivantes MUTED — enrichissement commun aux 2 variantes (empilées, stack cinéma). Les tailles
par variante (punchline = climax / statement = contenu) vivent dans 06-cluster.css, 24/07 v2. */
.nk-decision .nk-coda__line span{ display:block; }
.nk-decision .nk-coda__line span:first-child{ color:var(--nt-text-strong); font-weight:600; }
.nk-decision .nk-coda__line span:not(:first-child){ color:var(--nt-text-muted); font-weight:400; }
/* V7 · VERDICT splitable sur « | » = MÊME pattern 2 couleurs que la coda (réf 2322). 1re phrase blanc-gras + grande (climax), reste muted plus discret. Si pas de « | » → ::first-line (rétro-compat, plus haut). */
.nk-decision .nk-principle__quote p span{ display:block; }
.nk-decision .nk-principle__quote p span:first-child{ color:var(--nt-text-strong); font-weight:600; font-size:clamp(1.72rem,5.4vw,2.95rem); line-height:1.3; letter-spacing:-.016em; }
.nk-decision .nk-principle__quote p span:not(:first-child){ color:var(--nt-text-muted); font-weight:400; }
/* ANTI-IA : le ✗ des pitfalls est un picto → retiré (doctrine : 0 picto/emoji). La faute reste portée par la typo (nk-pitfall__wrong). */
.nk-pitfall__mark{ display:none; }
/* ═══════════════ V6 · SORTIE DE PAGE — HIÉRARCHIE DE L'EXIT (une seule règle, TOUTES les pages) ═══════════════
PROBLÈME (constaté cluster 2446, mobile 412px) : le bas éditorial empile FAQ + « À explorer aussi » +
newsletter « LA REVUE » à POIDS ÉGAL → bruit, aucun palier, l'exit ne conclut pas.
PARTI-PRIS : on ne SUPPRIME rien (SEO / maillage / schema intacts, 0 lien masqué) — on HIÉRARCHISE.
Le bloc de RÉTENTION final (newsletter) recule en registre « colophon » : plus d'air, un filet OR net qui
SÉPARE, titre muted au registre label, corps discret, champ de saisie apaisé. Par contraste, « À explorer
aussi » (.nk-topics / .nk-crosslinks) + la FAQ redeviennent la vraie SORTIE utile (le maillage latéral).
Scope .nk-hub → cluster + montage .nk-decision + tout futur template. Tokens-only, mobile-first.
Ne touche JAMAIS le footer du site (#colophon / .site-footer). Anti-IA : filet doré + typo, 0 picto. */
/* ══════════ LARGEUR DE CONTENU — PAGES OUTIL & INFO (UNE règle source, tous breakpoints) ══════════
PARASITE (constaté 1440/800/412 sur /politique-de-confidentialite/, /a-propos/, /plante-toxique.../, etc.) :
la règle prose GLOBALE `.entry-content,.wp-block-post-content{ max-width:var(--nt-prose) [= 65ch ≈ 589px] }`
(00-tokens.css) cape TOUT contenu de page à une colonne de lecture ~589px CENTRÉE. Pour les pages dont le
contenu est un COMPOSANT PLEINE-PAGE autonome — `.nk-info` (légales/à-propos/contact), `.nook-plantes` (outil
1461), `.nook-barometre` (outil 1469) — ce cap écrase leur largeur PROPRE (72ch / 920px / 840px) → rendu en
« colonne étroite comme mobile » sur desktop. NB : le cap est INDÉPENDANT du réglage Kadence — la panne touche
AUSSI les pages déjà `content-width-fullwidth` (ex. /a-propos/ mesurée à 589px), donc la cause n'est PAS la
largeur de conteneur Kadence (1290px, jamais atteinte) mais bien ce cap prose. Les GUIDES échappent déjà par le
même mécanisme : `.entry-content:has(.nk-decision){max-width:none}` (06-cluster.css:910).
FIX SOURCE — on libère le conteneur de contenu pour ces 3 familles ; chaque composant REPREND alors sa propre
largeur (centrée par son `margin:0 auto` interne). Le texte légal `.nk-info` conserve sa colonne de lecture
confortable via son propre `max-width:72ch` (~683px ≤ 820px). Le cap prose n'a AUCUNE media-query → le retirer
couvre mobile + tablette + desktop d'un coup. 0 !important : spécificité (0,2,0) > cap (0,1,0). */
.entry-content:has(.nk-info),
.entry-content:has(.nook-plantes),
.entry-content:has(.nook-barometre),
.wp-block-post-content:has(.nk-info),
.wp-block-post-content:has(.nook-plantes),
.wp-block-post-content:has(.nook-barometre){
max-width:none;
}
/* 1 · Respiration + séparation : le colophon se DÉTACHE de l'exit éditorial (un vrai palier au-dessus du rythme courant). */
.nk-hub .nk-newsletter{
margin-block-start:calc(var(--nt-space-xl) + var(--nt-space-md));
padding-block:var(--nt-space-md); /* moins imposant que --nt-space-lg */
border-block-start:0; /* on retire le filet plein sur toute la largeur… */
position:relative;
}
/* …remplacé par un filet OR CENTRÉ qui fond (séparateur premium, pas une barre pleine qui pèse autant qu'un titre). */
.nk-hub .nk-newsletter::before{
content:""; position:absolute; inset-block-start:0; inset-inline:0; margin-inline:auto;
inline-size:8rem; block-size:1px;
background:linear-gradient(90deg,transparent,var(--nt-gold-a25),transparent);
}
/* 2 · Démotion du titre : registre « colophon » (label discret) — plus un H2 qui concurrence la sortie. */
.nk-hub .nk-newsletter__title{ font-size:var(--nt-text-lg); font-weight:400; color:var(--nt-text-muted); }
/* 3 · Corps en retrait (le lead ne rivalise plus avec les libellés « À explorer aussi »). */
/* 25/07 : text-faint (2.42:1, sous WCAG AA) → text-muted (4.66:1) ; la démotion visuelle
reste (taille/poids déjà réduits ligne 456), seul le contraste texte est corrigé. */
.nk-hub .nk-newsletter__lead{ color:var(--nt-text-muted); }
/* 4 · Champ de saisie apaisé : filet or subtil au lieu du trait fort → le formulaire ne « crie » plus. */
.nk-hub .nk-newsletter__form{ border-block-end-color:var(--nt-text-faint); } /* filet form = neutre (or tué) */