/* =============================================================================
06-cluster.css — COMPOSANTS CLUSTER
=============================================================================
Règle absolue : NE PAS redéfinir .nt-section ici — source de vérité = 03-layout.css
Override cluster uniquement via .nt-cluster .nt-section
============================================================================= */
/* ---------------------------------------------------------------------------
LAYOUT CLUSTER — override .nt-section pour les clusters uniquement
--------------------------------------------------------------------------- */
.nt-cluster {
max-width: var(--nt-container);
margin-inline: auto;
padding-inline: var(--nt-container-pad);
}
body .nt-cluster .nt-section {
padding-top: var(--nt-section-gap); /* premium 2026-07-14 : rythme vertical tokenise */
padding-bottom: var(--nt-section-gap);
border-bottom: 1px solid var(--nt-line);
}
body .nt-cluster .nt-section:last-child {
border-bottom: none;
}
/* Intro AEO — bloc d'entrée */
[data-component="cluster-intro"] {
padding-top: 40px;
padding-bottom: 44px;
}
/* Phrase d'intro sous l'eyebrow de section */
.nt-section__intro {
margin-top: 10px;
margin-bottom: 36px;
font-size: var(--nt-text-sm);
color: var(--nt-text-muted);
line-height: var(--nt-leading-relaxed);
max-width: 700px;
}
.nt-section__inner {
max-width: 1160px;
margin-inline: auto;
padding-inline: var(--nt-container-pad);
}
/* ---------------------------------------------------------------------------
HERO CLUSTER
--------------------------------------------------------------------------- */
[data-component="cluster-hero"] {
padding-block: clamp(52px, 9vw, 110px);
border-bottom: 1px solid var(--nt-line);
position: relative;
overflow: hidden;
}
[data-component="cluster-hero"]::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 70% at 80% 50%, var(--nt-gold-dark-a08) 0%, transparent 70%);
pointer-events: none;
}
.nt-hero__title {
font-family: var(--nt-font-heading);
font-size: var(--nt-h1);
font-weight: 400;
line-height: 1.12;
letter-spacing: var(--nt-tracking-heading);
color: var(--nt-text-strong);
max-width: 16ch;
margin-bottom: var(--nt-space-md);
}
.nt-hero__mission {
font-size: var(--nt-text-lg);
color: var(--nt-text-muted);
line-height: var(--nt-leading-relaxed);
max-width: 50ch;
}
/* ---------------------------------------------------------------------------
BREADCRUMB
--------------------------------------------------------------------------- */
.nt-breadcrumb {
display: flex;
align-items: center;
gap: var(--nt-space-xs);
flex-wrap: wrap;
font-size: var(--nt-text-xs);
color: var(--nt-text-faint);
padding-block: var(--nt-space-sm);
border-bottom: 1px solid var(--nt-line);
list-style: none;
}
/* --nt-text-faint (2.42:1) rendait le fil d'Ariane quasi invisible au repos, sur PRESQUE
toutes les pages du site (24/07) → --nt-text-muted (4.66:1, AA) — grammaire d'interaction unique */
.nt-breadcrumb a { color: var(--nt-text-muted); transition: color var(--nt-transition); }
.nt-breadcrumb a:hover { color: var(--nt-gold); }
.nt-breadcrumb a:active { color: var(--nt-gold-dark); }
.nt-breadcrumb a:focus-visible { outline: 2px solid var(--nt-text-strong); outline-offset: 2px; }
.nt-breadcrumb__sep { opacity: .35; }
.nt-breadcrumb__current { color: var(--nt-text-muted); }
/* ---------------------------------------------------------------------------
INTENT ROUTER
--------------------------------------------------------------------------- */
/* Bloc intro AEO */
.nt-intro__body {
max-width: 780px;
}
.nt-intro__answer {
font-size: var(--nt-text-base);
color: var(--nt-text-muted);
line-height: var(--nt-leading-relaxed);
margin: 12px 0 20px;
max-width: 700px;
}
.nt-intro__causes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin-top: 4px;
}
.nt-intro__cause {
font-size: var(--nt-text-xs);
font-weight: var(--nt-weight-semibold);
color: var(--nt-text-faint);
text-transform: uppercase;
letter-spacing: .12em;
}
.nt-intro__sep {
color: var(--nt-text-faint);
font-size: 11px;
}
.nt-router__intro {
max-width: 720px;
margin: 0 auto 32px;
text-align: center;
}
.nt-router__intro .nt-eyebrow,
.nt-router__intro .nk-eyebrow {
display: block;
text-align: center;
}
.nt-router__lead {
margin: 12px 0 0;
font-size: var(--nt-text-lg);
color: var(--nt-text-muted);
}
.nt-router__grid {
display: flex;
flex-direction: column;
gap: 0;
max-width: 52rem;
margin: 0 auto;
}
/* Cartes secondaires — ligne compacte sous les 3 rich */
.nt-router__secondary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--nt-gap-sm);
margin-top: var(--nt-space-sm);
max-width: var(--nt-container);
}
.nt-router__secondary .nt-sit {
padding: .875rem 1.125rem;
font-size: var(--nt-text-sm);
}
/* ---------------------------------------------------------------------------
CARTE SITUATION
--------------------------------------------------------------------------- */
.nt-sit {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--nt-space-sm);
padding: clamp(1.4rem, 3vw, 2rem) 0;
border: 0;
border-top: 1px solid var(--nt-line);
border-radius: 0;
background: none;
position: relative;
transition: transform .45s cubic-bezier(.2, .7, .2, 1);
text-decoration: none;
}
.nt-sit::before { content: none; }
.nt-sit:last-child { border-bottom: 1px solid var(--nt-line); }
.nt-sit:hover, .nt-sit:focus-within { transform: translateX(.5rem); background: none; box-shadow: none; }
.nt-sit:active { transform: translateX(.3rem); }
.nt-sit--primary { border-top-color: var(--nt-line-strong); background: none; box-shadow: none; }
.nt-sit--primary::after { content: none; }
.nt-sit--primary:hover { border-color: transparent; box-shadow: none; }
.nt-sit__text {
font-family: var(--nt-font-heading);
font-size: clamp(1.3rem, 2.8vw, 1.75rem);
font-weight: 400;
color: var(--nt-text-strong);
line-height: 1.15;
letter-spacing: var(--nt-tracking-heading);
transition: color .3s;
position: relative;
}
.nt-sit--primary .nt-sit__text { color: var(--nt-text-strong); }
.nt-sit:hover .nt-sit__text, .nt-sit:focus-within .nt-sit__text { color: #fff; }
.nt-sit__arrow {
flex-shrink: 0;
width: auto;
height: auto;
border: 0;
border-radius: 0;
background: none;
font-size: 1.05em;
line-height: 1;
color: var(--nt-text-faint);
opacity: .55;
transition: opacity .3s, transform .3s, color .3s;
}
.nt-sit:hover .nt-sit__arrow, .nt-sit:focus-within .nt-sit__arrow { opacity: 1; transform: translateX(.35rem); }
.nt-sit--primary .nt-sit__arrow { opacity: .7; }
/* Carte situation rich — avec contexte + micro-copy */
.nt-sit--rich {
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 1.375rem 1.5rem 1.25rem;
}
.nt-sit--rich .nt-sit__arrow { margin-top: 0; align-self: auto; }
.nt-sit__context {
display: block;
font-size: 10px;
font-weight: var(--nt-weight-semibold);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--nt-text-faint);
margin-bottom: 6px;
}
.nt-sit__micro {
display: block;
font-size: var(--nt-text-xs);
color: var(--nt-text-muted);
line-height: 1.5;
margin-top: 5px;
font-weight: var(--nt-weight-regular);
}
.nt-sit--primary .nt-sit__micro { color: var(--nt-text-muted); }
/* ---------------------------------------------------------------------------
SPACING DIFFÉRENCIÉ PAR COMPOSANT
--------------------------------------------------------------------------- */
/* Litière / Chien / Solutions — plus d'air en haut */
[data-component="cause-grid"],
[data-component="solution-grid"] {
padding-top: 60px;
padding-bottom: 48px;
}
/* BOFU — encore plus d'emphase */
[data-component="selection-grid"] {
padding-top: 60px;
padding-bottom: 60px;
}
/* FAQ — confort de lecture */
[data-component="cluster-faq"] {
padding-top: 56px;
padding-bottom: 56px;
}
/* ---------------------------------------------------------------------------
CAUSE GRID
--------------------------------------------------------------------------- */
.nt-cause__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--nt-gap-sm);
max-width: 1080px;
margin: 0 auto;
}
.nt-cause {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--nt-space-xs);
padding: 1rem 1.125rem;
background: var(--nt-surface);
border: 1px solid var(--nt-line);
border-radius: var(--nt-radius-sm);
position: relative;
overflow: hidden;
transition: border-color var(--nt-transition), background var(--nt-transition), transform var(--nt-transition), box-shadow var(--nt-transition);
will-change: transform;
text-decoration: none;
}
.nt-cause::before {
content: "";
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--nt-gold-dark), transparent);
opacity: 0;
transition: opacity var(--nt-transition);
}
.nt-cause:hover { border-color: var(--nt-gold-dark); background: var(--nt-surface-2); }
.nt-cause:hover::before { opacity: 1; }
.nt-cause__header {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
.nt-cause__icon { display: none; } /* premium 2026-07-14 anti-IA : plus de picto, repere = typo + filet dore */
.nt-cause__label { font-size: var(--nt-text-sm); font-weight: var(--nt-weight-semibold); color: var(--nt-text); }
.nt-cause__desc { font-size: var(--nt-text-xs); color: var(--nt-text-muted); line-height: 1.55; margin-top: 2px; }
.nt-cause__link {
margin-top: auto;
padding-top: var(--nt-space-xs);
font-size: var(--nt-text-xs);
font-weight: var(--nt-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--nt-eyebrow-spacing);
color: var(--nt-text-strong);
text-decoration: none;
}
/* ---------------------------------------------------------------------------
SOLUTION GRID
--------------------------------------------------------------------------- */
.nt-sol__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--nt-gap-sm);
max-width: 1080px;
margin: 0 auto;
}
.nt-sol {
display: flex;
gap: var(--nt-space-sm);
align-items: flex-start;
padding: 1.125rem 1.25rem;
background: var(--nt-surface);
border: 1px solid var(--nt-line);
border-radius: var(--nt-radius-sm);
position: relative;
overflow: hidden;
transition: border-color var(--nt-transition), background var(--nt-transition), transform var(--nt-transition), box-shadow var(--nt-transition);
will-change: transform;
text-decoration: none;
}
.nt-sol:hover { border-color: var(--nt-gold-dark); background: var(--nt-surface-2); }
.nt-sol__icon { flex-shrink: 0; margin-top: 2px; font-size: 17px; color: var(--nt-text-faint); transition: color var(--nt-transition); }
.nt-sol:hover .nt-sol__icon { color: var(--nt-gold); }
.nt-sol__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.nt-sol__title { display: block; margin-bottom: 4px; font-size: var(--nt-text-sm); font-weight: var(--nt-weight-semibold); color: var(--nt-text); line-height: 1.3; }
.nt-sol__sub { display: block; font-size: var(--nt-text-xs); line-height: 1.55; color: var(--nt-text-muted); }
/* ---------------------------------------------------------------------------
SÉLECTIONS BOFU
--------------------------------------------------------------------------- */
.nt-bofu__grid { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 820px; gap: var(--nt-gap-lg); }
.nt-bofu {
display: flex;
flex-direction: column;
gap: var(--nt-space-sm);
padding: 1.625rem 1.75rem;
background: linear-gradient(160deg, var(--nt-surface-1) 0%, var(--nt-bg) 100%);
border: 1px solid var(--nt-line-strong);
border-radius: var(--nt-radius-lg);
box-shadow: var(--nt-shadow-card);
position: relative;
overflow: hidden;
transition: transform var(--nt-transition), box-shadow var(--nt-transition), border-color var(--nt-transition);
will-change: transform;
}
.nt-bofu::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--nt-gold-dark) 30%, var(--nt-gold) 50%, var(--nt-gold-dark) 70%, transparent 100%);
}
.nt-bofu::after {
content: "";
position: absolute;
top: -40px; right: -40px;
width: 140px; height: 140px;
background: radial-gradient(circle, var(--nt-gold-a09) 0%, transparent 70%);
pointer-events: none;
}
.nt-bofu:hover { border-color: var(--nt-gold-dark); }
.nt-bofu__title {
display: block;
font-family: var(--nt-font-heading);
font-size: clamp(17px, 1.8vw, 20px);
font-weight: var(--nt-weight-regular);
color: var(--nt-text);
line-height: 1.3;
letter-spacing: var(--nt-tracking-heading);
}
.nt-bofu__meta { display: block; font-size: var(--nt-text-xs); color: var(--nt-text-faint); font-style: italic; }
.nt-bofu__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: var(--nt-space-sm);
border-top: 1px solid var(--nt-line);
font-size: var(--nt-text-sm);
font-weight: var(--nt-weight-semibold);
color: var(--nt-gold);
text-decoration: none;
transition: color var(--nt-transition), gap var(--nt-transition);
}
.nt-bofu:hover .nt-bofu__cta { color: var(--nt-gold-2); gap: 12px; }
/* ---------------------------------------------------------------------------
FAQ CLUSTER
--------------------------------------------------------------------------- */
.nt-faq__list { margin-top: var(--nt-space-sm); }
.nt-faq__item { border-bottom: 1px solid var(--nt-line); }
.nt-faq__item:last-child { border-bottom: none; }
.nt-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--nt-space-md);
padding: 1.125rem 0;
cursor: pointer;
list-style: none;
font-size: var(--nt-text-base);
font-weight: var(--nt-weight-semibold);
color: var(--nt-text);
line-height: 1.4;
transition: color var(--nt-transition);
}
.nt-faq__q::-webkit-details-marker { display: none; }
.nt-faq__item[open] .nt-faq__q { color: var(--nt-gold); }
.nt-faq__chevron {
flex-shrink: 0;
width: 24px; height: 24px;
border-radius: 50%;
border: 1px solid var(--nt-line);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--nt-text-faint);
transition: transform var(--nt-transition), border-color var(--nt-transition), color var(--nt-transition);
}
.nt-faq__item[open] .nt-faq__chevron { transform: rotate(180deg); border-color: var(--nt-gold-dark); color: var(--nt-gold); }
.nt-faq__a {
font-size: var(--nt-text-sm);
color: var(--nt-text-muted);
line-height: var(--nt-leading-relaxed);
padding-bottom: 1.25rem;
max-width: 72ch;
}
.nt-faq__a p { margin: 0; }
/* ---------------------------------------------------------------------------
RELATED CONTENT
--------------------------------------------------------------------------- */
.nt-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--nt-gap-sm); }
.nt-related__card {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--nt-space-sm);
padding: 1rem 1.125rem;
background: var(--nt-surface);
border: 1px solid var(--nt-line);
border-radius: var(--nt-radius-sm);
position: relative;
overflow: hidden;
transition: border-color var(--nt-transition), background var(--nt-transition), transform var(--nt-transition), box-shadow var(--nt-transition);
will-change: transform;
text-decoration: none;
}
.nt-related__card:hover { border-color: var(--nt-gold-dark); background: var(--nt-surface-2); }
.nt-related__card::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--nt-gold-dark);
opacity: 0;
transition: opacity var(--nt-transition);
}
.nt-related__card:hover::before { opacity: 1; }
.nt-related__body { display: flex; flex-direction: column; gap: 4px; }
.nt-related__label { display: block; font-size: var(--nt-text-xs); color: var(--nt-text-faint); text-transform: uppercase; letter-spacing: .12em; font-weight: var(--nt-weight-semibold); }
.nt-related__title { display: block; font-size: var(--nt-text-sm); font-weight: var(--nt-weight-medium); color: var(--nt-text); line-height: 1.35; }
.nt-related__arrow { flex-shrink: 0; font-size: 13px; color: var(--nt-text-faint); transition: color var(--nt-transition), transform var(--nt-transition); }
.nt-related__card:hover .nt-related__arrow { color: var(--nt-text-strong); transform: translateX(2px); }
/* ---------------------------------------------------------------------------
EXPLORER
--------------------------------------------------------------------------- */
.nt-explorer__pills { display: flex; flex-wrap: wrap; gap: var(--nt-space-xs); margin-top: var(--nt-space-md); }
.nt-explorer__pill {
font-size: var(--nt-text-sm);
font-weight: var(--nt-weight-medium);
color: var(--nt-text-muted);
background: var(--nt-surface);
border: 1px solid var(--nt-line);
padding: 7px 16px;
border-radius: var(--nt-radius-sm);
text-decoration: none;
transition: border-color var(--nt-transition), color var(--nt-transition), background var(--nt-transition);
}
/* 0 pilule (radius-sm, doctrine) + 0 hover-lift (24/07) : le retour tient au fond/bordure, pas au déplacement */
.nt-explorer__pill:hover { border-color: var(--nt-line-strong); color: var(--nt-text-strong); background: var(--nt-gold-soft); }
.nt-explorer__pill:active { border-color: var(--nt-gold-dark); color: var(--nt-gold-dark); background: var(--nt-gold-tint); }
.nt-explorer__pill:focus-visible { outline: 2px solid var(--nt-text-strong); outline-offset: 2px; }
/* ---------------------------------------------------------------------------
SUPPRIMER SOULIGNEMENTS
--------------------------------------------------------------------------- */
.nt-sit, .nt-cause, .nt-sol, .nt-related__card, .nt-explorer__pill, .nt-bofu__cta { text-decoration: none; }
/* ---------------------------------------------------------------------------
RESPONSIVE
--------------------------------------------------------------------------- */
@media (max-width: 900px) {
.nt-router__grid { grid-template-columns: 1fr; }
.nt-cause__grid,
.nt-sol__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
.nt-cause__grid,
.nt-sol__grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
/* Cluster — padding réduit */
.nt-cluster { padding-inline: 16px; }
body .nt-cluster .nt-section { padding-top: 28px; padding-bottom: 28px; }
.nt-router__secondary { grid-template-columns: 1fr; }
/* Bofu et Related — 1 colonne */
.nt-bofu__grid,
.nt-related__grid { grid-template-columns: 1fr; }
/* Cause — horizontal compact, desc et lien masqués */
.nt-cause { flex-direction: row; align-items: center; padding: .75rem 1rem; gap: 12px; }
.nt-cause__header { flex: 1; }
.nt-cause__desc { display: none; }
.nt-cause__link { display: none; }
/* Sol — sous-titre masqué */
.nt-sol { padding: .75rem 1rem; }
.nt-sol__sub { display: none; }
/* Cartes rich compactes */
.nt-sit--rich { padding: .875rem 1rem .75rem; }
.nt-sit__micro { font-size: 11px; }
/* Related compact */
.nt-related__card { padding: .75rem 1rem; }
/* Explorer pills serrées */
.nt-explorer__pills { gap: 6px; }
.nt-explorer__pill { padding: 5px 12px; font-size: var(--nt-text-xs); }
}
/* ---- Premium 2026-07-14 : largeur de lecture maitrisee (leads/prose cluster) ---- */
.nt-cluster .nt-router__lead,
.nt-cluster .nt-intro__body,
.nt-cluster .nt-section__intro > p { max-width: var(--nt-reading-width); }
/* ===== .nt-guide (langage éditorial Framework) — ajouté ===== */
/* ============================================================
.nt-guide — LANGAGE ÉDITORIAL (Framework) · couche scellée
Grammaire commune + montage par espèce. Zéro inline.
Mappé sur les tokens du thème (00-tokens.css).
============================================================ */
.nt-guide{
--g-serif: var(--nt-font-heading, Georgia, serif);
--g-ink: var(--nt-text-strong, #211E1A);
--g-soft: var(--nt-text, #2A2723);
--g-mut: var(--nt-text-muted, #726B5F);
--g-faint: var(--nt-text-faint, #A39C8C);
--g-gold: var(--nt-gold, #8C6E3F);
--g-line: var(--nt-line, rgba(124,96,56,.20));
--g-line-soft: rgba(124,96,56,.10);
font-size: 18px; line-height: 1.78; color: var(--g-soft); font-weight: 340;
}
.nt-guide :where(p){margin:1.15rem 0 0;color:var(--g-soft)}
.nt-guide :where(strong){color:var(--g-ink);font-weight:600}
.nt-guide :where(a){color:inherit;border-bottom:1px solid rgba(42,39,35,.22);text-decoration:none;transition:border-color var(--nt-transition)}
.nt-guide :where(a):hover{border-color:var(--g-ink)}
.nt-guide :where(a):focus-visible{outline:2px solid var(--g-ink);outline-offset:2px}
.nt-guide ::selection{background:rgba(124,96,56,.20)}
/* colonnes de lecture (asymétrie douce : colonne étroite + large).
.g-col (33rem) = mesure de prose interne, non tokenisée (même logique que citations/callouts).
.g-wide (52rem) = rail structurel du corps de page -> --nt-rail-reading (24/07 nuit, Phase 1 rails),
même valeur numérique, padding conservé à l'identique. */
.nt-guide .g-col{max-width:33rem;margin-inline:auto;padding-inline:clamp(1.4rem,6vw,2rem)}
.nt-guide .g-wide{max-width:var(--nt-rail-reading);margin-inline:auto;padding-inline:clamp(1.4rem,6vw,2rem)}
.nt-guide .g-serif{font-family:var(--g-serif);font-weight:400}
/* espaces NARRATIFS */
.nt-guide .g-move{padding-block:clamp(2.6rem,7vw,4.4rem)}
.nt-guide .g-move--tight{padding-block:clamp(2rem,5vw,3.2rem)}
/* HERO g-hero cinéma SUPPRIMÉ → géré par le HERO UNIVERSEL (une seule règle). */
/* VERDICT / RÈGLE en grand serif sur le vide */
.nt-guide .g-verdict{font-family:var(--g-serif);font-weight:400;font-size:clamp(1.55rem,4.2vw,2.1rem);
line-height:1.34;letter-spacing: var(--nt-tracking-heading);color:var(--g-ink);margin:0}
.nt-guide .g-after{font-size:1.04rem;color:var(--g-soft);margin-top:1.5rem}
.nt-guide h2.g-title{font-family:var(--g-serif);font-weight:400;font-size:var(--nt-h2);
line-height:1.16;color:var(--g-ink);margin:0;letter-spacing: var(--nt-tracking-heading)}
.nt-guide .g-sub{color:var(--g-mut);max-width:31rem;margin-top:.9rem;font-size:1.02rem}
/* SCHÉMA (diagram.spatial) — le rôle « observation » du genre Pratique */
.nt-guide .g-plan{padding-block:clamp(1rem,3vw,2rem)}
.nt-guide .g-plan svg{width:100%;height:auto;display:block}
.nt-guide .g-plan figcaption{color:var(--g-mut);font-style:italic;font-size:.95rem;margin-top:1.1rem;text-align:center}
.nt-guide .pl-room{fill:none;stroke:var(--g-line);stroke-width:1}
.nt-guide .pl-part{stroke:rgba(42,39,35,.08);stroke-width:1}
.nt-guide .pl-lbl{fill:var(--g-mut);font:600 10px var(--nt-font-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase}
.nt-guide .pl-sub{fill:var(--g-faint);font:italic 11px var(--g-serif)}
.nt-guide .pl-good{fill:none;stroke:var(--g-gold);stroke-width:1.4}
.nt-guide .pl-good-t{fill:var(--g-gold);font:600 11px var(--nt-font-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase}
.nt-guide .pl-dot{fill:rgba(42,39,35,.34)}
.nt-guide .pl-dist{stroke:rgba(124,96,56,.32);stroke-width:1;stroke-dasharray:2 4}
.nt-guide .pl-bad{fill:var(--g-faint);font:11px var(--nt-font-ui,sans-serif)}
/* ERREURS — liste éditoriale sobre (pas des cards) */
.nt-guide .g-errs div{padding:1rem 0;border-top:1px solid var(--g-line-soft);color:var(--g-soft)}
.nt-guide .g-errs div b{color:var(--g-ink);font-weight:600}
.nt-guide .g-errs div:last-child{border-bottom:1px solid var(--g-line-soft)}
/* MÉTHODE — checklist */
.nt-guide .g-steps{margin-top:1.5rem;list-style:none;padding:0}
.nt-guide .g-steps li{position:relative;padding:.55rem 0 .55rem 1.6rem;color:var(--g-soft)}
.nt-guide .g-steps li::before{content:"";position:absolute;left:0;top:1.05rem;width:.5rem;height:.5rem;
border-right:1.5px solid var(--g-gold);border-bottom:1.5px solid var(--g-gold);transform:rotate(45deg)}
/* RÈGLE compacte (climax=rule) — PAS de chambre plein écran en Pratique */
.nt-guide--pratique .g-rule{padding-block:clamp(3rem,8vw,5rem)}
.nt-guide--pratique .g-rule p{font-family:var(--g-serif);font-weight:400;font-size:clamp(1.5rem,4vw,2.1rem);
line-height:1.3;color:#F1F0F2;max-width:22ch;margin:0;letter-spacing: var(--nt-tracking-heading)}
/* NEXT-STEP featured */
.nt-guide .g-onward .g-step{font-family:var(--g-serif);font-size:1.5rem;color:var(--g-ink);letter-spacing: var(--nt-tracking-heading)}
.nt-guide .g-onward .g-why{color:var(--g-mut);font-size:1rem;margin-top:.4rem;max-width:30rem}
.nt-guide .g-onward .g-go{display:inline-block;margin-top:1rem;color:var(--g-ink);
border-bottom:1px solid rgba(124,96,56,.4);font-size:1rem}
.nt-guide .g-onward .g-alt{margin-top:1.6rem;color:var(--g-soft);font-size:1rem}
.nt-guide .g-lead{font-size:1.16rem;color:var(--g-ink)}
.nt-guide .g-care{color:var(--g-mut);font-size:1rem;margin-top:1.1rem;font-style:italic}
.nt-guide .g-boundary{color:var(--g-soft);max-width:31rem}
.nt-guide .g-qa details{border-top:1px solid var(--g-line-soft)}
.nt-guide .g-qa details:last-child{border-bottom:1px solid var(--g-line-soft)}
.nt-guide .g-qa summary{cursor:pointer;padding:1.05rem 0;color:var(--g-ink);list-style:none;position:relative;padding-right:1.6rem;font-size:1.06rem}
.nt-guide .g-qa summary::-webkit-details-marker{display:none}
.nt-guide .g-qa summary::after{content:"";position:absolute;right:.1rem;top:1.4rem;width:.6rem;height:.6rem;border-right:1px solid var(--g-mut);border-bottom:1px solid var(--g-mut);transform:rotate(45deg);transition:transform .2s}
.nt-guide .g-qa details[open] summary::after{transform:rotate(-135deg);top:1.6rem}
.nt-guide .g-qa p{color:var(--g-mut);font-size:1rem;margin:0 0 1.1rem}
/* ============================================================
MONTAGE DIAGNOSTIC (cinématographique) — focales variables
============================================================ */
/* g-hero min-height cinéma supprimé (hero universel) */
.nt-guide .g-answer p.s{font-family:var(--g-serif);font-weight:400;font-size:clamp(1.5rem,4.1vw,2.05rem);line-height:1.28!important;letter-spacing: var(--nt-tracking-heading);color:var(--g-ink);margin:0}
.nt-guide .g-answer p.a{font-size:1.05rem;color:var(--g-soft);margin-top:clamp(1.5rem,5vw,1.9rem)}
/* ── Respiration d'ouverture (épuration) — DÉTACHER la réponse du hero pour casser le "gros bloc" sombre ── */
.nt-guide .g-answer{margin-block-start:clamp(2.6rem,9vw,4rem)}
/* chapitre plein écran (N&B = preuve) */
.nt-guide .g-chapter{position:relative;min-height:0;aspect-ratio:16/9;max-block-size:clamp(42svh,53svh,60svh);display:flex;align-items:flex-end;overflow:hidden}
.nt-guide .g-chapter__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:grayscale(1) contrast(1.07)}
.nt-guide .g-chapter::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(17,17,21,.9),rgba(17,17,21,0) 46%)}
.nt-guide .g-chapter__cap{position:relative;z-index:2;width:100%;padding-block:clamp(1.4rem,4vw,2.4rem)}
.nt-guide .g-chapter__cap span{display:block;font-family:var(--g-serif);font-weight:400;font-size:clamp(1.15rem,3vw,1.6rem);line-height:1.28;color:#EDECEE;letter-spacing: var(--nt-tracking-heading)}
.nt-guide .g-chapter__cap span:first-child{color:var(--g-mut)}
/* deux territoires */
.nt-guide .g-terr{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,4.5rem);align-items:start;margin-top:clamp(2rem,5vw,3rem)}
.nt-guide .g-world__name{font-family:var(--g-serif);font-weight:400;font-size:clamp(1.9rem,4.6vw,2.9rem);color:var(--g-ink);letter-spacing: var(--nt-tracking-heading);margin:0 0 1.4rem;line-height:1}
.nt-guide .g-world:nth-child(2){margin-top:clamp(1.6rem,5vw,3.4rem)}
.nt-guide .g-world dl{margin:0}
.nt-guide .g-world dt{display:block;font-size:1.06rem;font-weight:600;color:var(--g-ink);letter-spacing: var(--nt-tracking-heading);margin-top:1.6rem} /* STANDARD B : Diagnostic « deux territoires » = même registre que .nk-cmp — amorce serif casse normale, plus de label petites-caps (tell fiche-produit banni) */
.nt-guide .g-world dd{margin:.25rem 0 0;color:var(--g-soft);font-size:1.04rem;line-height:1.45}
.nt-guide .g-terr-note{margin:clamp(2rem,5vw,3rem) auto 0;color:var(--g-mut);font-style:italic;text-align:center;max-width:31rem}
/* comprendre (mythe/réalité) */
.nt-guide .g-believe .c{color:var(--g-mut);font-size:1.04rem}
.nt-guide .g-believe .r{font-family:var(--g-serif);font-weight:400;font-size:clamp(1.3rem,3.4vw,1.7rem);line-height:1.36;color:var(--g-ink);margin-top:1.1rem;letter-spacing: var(--nt-tracking-heading)}
/* respiration plein cadre (chaud) */
.nt-guide .g-breath{position:relative;min-height:0;aspect-ratio:16/9;max-block-size:clamp(53svh,66svh,75svh);display:flex;align-items:flex-end;overflow:hidden}
.nt-guide .g-breath__img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.1);transform-origin:center}
.nt-guide .g-breath::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(17,17,21,.82),rgba(17,17,21,0) 44%)}
.nt-guide .g-breath__cap{position:relative;z-index:2;width:100%;padding-block:clamp(1.4rem,4vw,2.4rem);text-align:center;color:var(--g-soft);font-style:italic;font-size:clamp(0.82rem,1.87vw,1.05rem)}
@media(max-width:640px){
.nt-guide{font-size:17px}
.nt-guide .g-terr{grid-template-columns:1fr;gap:2.8rem}
.nt-guide .g-world:nth-child(2){margin-top:0}
}
/* ===== PLEINE LARGEUR — dé-box Kadence + full-bleed cinématographique (15/07) ===== */
/* Kadence boxe .entry-content a ~656px meme en layout fullwidth ; on le libere UNIQUEMENT quand il porte un guide, et on casse les scenes plein cadre en 100vw (bord a bord, 0 scroll horizontal). */
.entry-content.single-content:has(.nt-guide){max-width:none!important;padding-left:0!important;padding-right:0!important}
.nt-guide{width:100%}
/* .g-hero full-bleed
PROPRIÉTAIRE UNIQUE : pillar.css (hero universel).
06-cluster.css ne gère que le full-bleed des scènes non-hero (chapitre, respiration) du template nt-guide.
Ne pas redéfinir les règles du hero ici — source unique, pas de doublon de cascade. */
.nt-guide .g-chapter,.nt-guide .g-breath{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* ===== CADRAGE full-bleed — reglage par ROLE (defaut template) + surcharge par image (body.postid-N) ===== */
/* hero : CONTRAT DE CADRAGE (image composee visage ~60% h / mi-hauteur, ciel au-dessus) -> object-position FIXE, zero override ; chapitre N&B central ; respiration centree (defaut, aligne sur la valeur live nt-guide fusionnee 17/07) */
.nt-guide .g-hero__img{object-position:62% 45%}
.nt-guide .g-chapter__img{object-position:50% 50%}
.nt-guide .g-breath__img{object-position:50% 50%}
/* surcharges par image (detail hors norme) */
body.postid-441 .nt-guide .g-chapter__img{object-position:50% 0%} /* chat-miaule : voir le nez (haut de l'image) */
body.postid-441 .nt-guide .g-breath__img{object-position:50% 68%} /* chat-miaule : remonter le chat love */
/* heros/N&B ou l'animal regarde a GAUCHE (miroir du contrat) -> favoriser la gauche en mobile (le desktop full-largeur n'est pas concerne) */
body.postid-2323 .nt-guide .g-hero__img{object-position:45% 45%} /* chien-detruit : labrador de profil, museau a gauche */
body.postid-2322 .nt-guide .g-hero__img{object-position:34% 45%} /* chien-aboie : teckel aboie a gauche */
body.postid-2322 .nt-guide .g-chapter__img{object-position:32% 50%} /* chien-aboie : N&B gueule a gauche */
/* --- lot Diagnostic 15/07 (chat ne boit / lapins / chien proprete) --- */
body.postid-405 .nt-guide .g-hero__img{object-position:50% 45%} /* chat ne boit pas : loaf centre */
body.postid-2328 .nt-guide .g-hero__img{object-position:50% 45%} /* lapin ne mange plus : loaf centre */
body.postid-2326 .nt-guide .g-hero__img{object-position:50% 45%} /* lapin ronge : loaf centre */
body.postid-2326 .nt-guide .g-chapter__img{object-position:48% 50%} /* lapin ronge : garder le bout de cable ronge (gauche) */
body.postid-2327 .nt-guide .g-hero__img{object-position:48% 45%} /* lapin tape-pied : lapin couche, tete centrale */
body.postid-2327 .nt-guide .g-chapter__img{object-position:38% 50%} /* lapin tape-pied : patte arriere levee a gauche */
body.postid-2324 .nt-guide .g-hero__img{object-position:34% 45%} /* chien proprete : teckel love, tete a gauche */
body.postid-2324 .nt-guide .g-chapter__img{object-position:33% 50%} /* chien proprete : patte + tache, garder la patte (gauche) */
body.postid-465 .nt-guide .g-chapter__img{object-position:30% 50%} /* chat surpoids : profil N&B museau a gauche */
/* --- lot Diagnostic oublies 15/07 (griffe / seul / stresse / lapin cache) --- */
body.postid-440 .nt-guide .g-hero__img{object-position:44% 45%} /* chat griffe : chat entre canape et griffoir */
body.postid-440 .nt-guide .g-chapter__img{object-position:48% 50%} /* chat griffe : patte+griffes centrees */
body.postid-1959 .nt-guide .g-hero__img{object-position:58% 45%} /* chat stresse : chat tapi a droite */
body.postid-1959 .nt-guide .g-chapter__img{object-position:50% 50%} /* chat stresse : panneau N&B visage centre */
body.postid-2539 .nt-guide .g-hero__img{object-position:42% 45%} /* lapin cache : lapin sous meuble a gauche */
body.postid-2539 .nt-guide .g-chapter__img{object-position:50% 50%} /* lapin cache : oeil/museau centre */
/* --- lot Diagnostic migré 17/07 (verticalite / sorties-chien / lapin-adapte) : cadrage desktop large --- */
body.postid-480 .nt-guide .g-hero__img{object-position:50% 45%} /* verticalite : salon equilibre, centrer (62% coupait la gauche) */
body.postid-678 .nt-guide .g-hero__img{object-position:52% 45%} /* combien-de-sorties : teckel centre-droit */
body.postid-691 .nt-guide .g-hero__img{object-position:45% 50%} /* lapin-adapte : lapin centre-gauche */
/* ===== MOBILE — GARDE le rendu MAGAZINE (bandes hautes svh + grands textes intacts). On corrige SEULEMENT : crop lateral des photos (X), colonnes empilees, plancher des 2 lignes serif longues (anti-wrap). 15/07 ===== */
@media(max-width:640px){
.nt-guide .g-terr{grid-template-columns:1fr;gap:2.6rem}
.nt-guide .g-world:nth-child(2){margin-top:0}
/* mobile = hero suit le CONTRAT (62% 45%) ; N&B + respiration centres (50% 50%, valeur live nt-guide fusionnee 17/07) ; surcharges par image via body.postid-N (specificite) */
.nt-guide .g-hero__img{object-position:62% 45%}
.nt-guide .g-chapter__img{object-position:50% 50%}
.nt-guide .g-breath__img{object-position:50% 50%}
/* IMAGES plein cadre en mobile : ratio PORTRAIT MAITRISE 4/5 — full-bleed largeur (magazine) SANS sur-zoomer/"etirer" la photo paysage comme le fait un svh geant. Le sujet respire. */
/* g-hero mobile 4/5 cinéma supprimé (hero universel) */
.nt-guide .g-chapter{min-height:0;aspect-ratio:16/9}
/* respiration : 16:9 aussi (parité .nk-decision, plus de portrait 3/2) */
.nt-guide .g-breath{min-height:0;aspect-ratio:16/9}
/* (scrim g-hero mobile supprimé — hero magazine unifié via pillar.css, zéro scrim) */
.nt-guide .g-qa summary{padding-top:1.2rem;padding-bottom:1.2rem}
}
/* (bloc .nt-fou SUPPRIMÉ 16/07 — espèce FOU abandonnée, 0 page l'utilise. Le FOU tourne sur .nk-decision.) */
/* ============================================================================
FOU / DECISION — .nk-decision · RECONSTRUCTION FIDÈLE DE L'ARTEFACT (15/07)
Port 1:1 du golden validé (fou-golden-render.html) mappé sur les classes du
shortcode [nooktails_decision]. Tokens NEUFS et propres (valeurs Artefact ;
serif = --nt-font-heading/Fraunces choisi). UN SEUL rail : 50vw-26rem (52rem
centré) pour hero + toutes les sections. Aucun conflit padding/max-width.
Montage : SEUIL → RÉPONSE(30s) → TRIEUR(litanie) → RESPIRATION → TRIEUR →
PREUVE(N&B) → POURQUOI → SORTIE(topics) → FAQ.
============================================================================ */
.entry-content:has(.nk-decision){max-width:none!important} /* primer sur le layout hôte */
/* GARDE ANTI-DÉBORDEMENT (comme .nt-mag des hubs) : le full-bleed width:100vw peut déborder horizontalement sur mobile → dézoom « responsive inerte » + images hors écran. overflow-x:clip empêche ça sans casser le sticky. (Doctrine responsive — obligatoire pour tout full-bleed.) */
html:has(.nk-decision),body:has(.nk-decision){ overflow-x:clip; max-width:100%; }
/* FOND UNIFORME — supprime tout fond/dégradé/ombre « boxed » Kadence autour du FOU plein-cadre. Fond = TOKEN (source unique --nt-bg, fondateur 19/07) — plus de littéral #121216. */
body:has(.nk-decision),
.content-area:has(.nk-decision),.content-container:has(.nk-decision),.site-main:has(.nk-decision),
.content-wrap:has(.nk-decision),article.content-bg:has(.nk-decision),
.entry-content-wrap:has(.nk-decision),.entry-content:has(.nk-decision){
background:var(--nt-bg)!important; background-image:none!important; box-shadow:none!important; border:0!important;
padding-inline:0!important /* pas de padding latéral → le plein-cadre du FOU tombe pile sur les bords viewport */
}
/* -------- TOKENS NEUFS + BASE (= :root + body de l'Artefact) -------- */
.nk-decision{
/* POLICE = serif système de l'Artefact (PAS Fraunces/Kadence, qui compresse la casse + les accents) */
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
/* 24/07 révision 2 : --ink/--soft/--mut/--faint/--rule étaient hardcodés clair-sur-sombre
(#ECEBEE etc, pensés pour --bg sombre). Bug critique trouvé en recette : sur --bg
désormais clair (plâtre), ce texte devenait quasi invisible sur TOUTES les pages de
genre gelé sauf le pilote data-nk-panel="light" (seule page où un override existait déjà).
Source unique désormais : les tokens --nt-*. --deep passe de noir pur #0e0e12 à
--nt-surface-1 (Pierre) : le rythme d'alternance des sections reste, sans jamais revenir
au noir (doctrine "profondeur par la matière, jamais par un noir franc"). */
--ink:var(--nt-text-strong); --soft:var(--nt-text); --mut:var(--nt-text-muted); --faint:var(--nt-text-faint);
--gold:var(--nt-gold);
--nt-h2:clamp(1.1rem,2.8vw,1.55rem); /* H2 de section RÉDUIT sous le H1 hero (2 lignes) : rétablit la hiérarchie H1>H2 (le H1 court tenant sur 2 lignes est ~1.25rem, les titres de section doivent rester en dessous). Fondateur 17/07 */
--bg:var(--nt-bg); --deep:var(--nt-surface-1);
--rule:rgba(42,39,35,.08);
--rail:max(clamp(1.5rem,6vw,2.4rem), calc(50vw - 26rem)); /* bord gauche commun = 52rem centré */
--bleed:calc(50% - 50vw);
background:var(--bg); color:var(--soft); font-family:var(--serif)!important;
font-size:18px; line-height:1.8; font-weight:340; -webkit-font-smoothing:antialiased;
font-stretch:normal; font-variation-settings:normal; letter-spacing:normal; /* annule la compression Kadence (largeur/axes variables) */
}
/* 24/07 nuit — scindé en 2 règles (fondateur : « une seule police de titres sur tout Nooktails,
pas d'exception historique pour .nk-decision »). Avant : h1/h2/h3 forcés sur --serif (Iowan)
au même titre que le corps, contournant --nt-font-heading silencieusement. Le !important reste
nécessaire des deux côtés : Kadence impose sa propre police sur les titres (comportement
d'origine, cf. commentaire historique), il faut le battre quelle que soit la valeur ciblée. */
.nk-decision h1,.nk-decision h2,.nk-decision h3{
font-family:var(--nt-font-heading)!important; font-stretch:normal!important; font-variation-settings:"WONK" 0!important; /* même valeur que body{font-variation-settings} sitewide — homogénéisé 24/07 nuit, sans effet sur Literata (axe absent) mais élimine une incohérence latente Computed */
}
.nk-decision p,.nk-decision a,.nk-decision span,.nk-decision li,.nk-decision summary,.nk-decision figcaption{
font-family:var(--serif)!important; font-stretch:normal!important; font-variation-settings:normal!important; /* corps de texte des genres gelés : choix éditorial Iowan conservé */
}
/* PLEIN-CADRE : bat .nk-hub{max-width:72rem} de pillar (sinon le FOU reste boxé à 1152px → tout le texte décalé à droite). Spécificité .nk-hub.nk-decision + !important. */
.nk-hub.nk-decision{ width:100vw!important; max-width:100vw!important; margin-inline:var(--bleed)!important; padding-inline:0!important; border-radius:0!important }
/* VESTIGE COIN ARRONDI : l'article « boxed » Kadence (.content-bg) a des coins arrondis → le hero plein-cadre en héritait (coin arrondi visible, casse le rendu). On force 0 sur le FOU + wrappers. */
.nk-hub.nk-decision,.nk-hub.nk-decision *,article.content-bg:has(.nk-decision),.content-bg:has(.nk-decision),.entry-content-wrap:has(.nk-decision),.content-container:has(.nk-decision),.content-area:has(.nk-decision){ border-radius:0!important }
.nk-decision .nk-editorial-image,.nk-decision .nk-editorial-image img{ border-radius:0; overflow:hidden } /* hero géré par pillar.css (zéro !important) */
/* SECTIONS CONTIGUËS : Kadence injecte margin-top:72px entre blocs → ce gap laissait voir le fond de base #121216 = bande claire entre 2 sections. On colle les sections (l'espacement vient de leur padding-block). C'ÉTAIT ça les bandes « ici et là ». */
.nk-hub.nk-decision > *{ margin-block:0!important }
/* RYTHME ÉDITORIAL (24/07, composant Core .nt-chapter, cf. 02-components.css) : le point
ci-dessus tuait TOUT espacement, y compris entre vrais chapitres — coupure franche
trouvée en recette (aucune respiration entre "La réponse en 30 secondes", "La
surveillance", "Ce qu'il faut retenir", etc.). On réintroduit un espacement CONTRÔLÉ
uniquement aux frontières de chapitre (pas à chaque sous-titre), via les mêmes tokens
que .nt-chapter — repère neutre par défaut, or réservé aux 2 transitions "argent"
(verdict, matrice) pour ne pas diluer sa rareté. */
.nk-hub.nk-decision > .nk-summary,
.nk-hub.nk-decision > .nk-topics,
.nk-hub.nk-decision > .nk-guides,
.nk-hub.nk-decision > .nk-crit,
.nk-hub.nk-decision > .nk-method,
.nk-hub.nk-decision > .nk-schema,
.nk-hub.nk-decision > .nk-coda{
margin-top: var(--nt-chapter-gap, clamp(2.5rem, 6vw, 4.5rem)) !important;
position: relative;
}
.nk-hub.nk-decision > .nk-summary::before,
.nk-hub.nk-decision > .nk-topics::before,
.nk-hub.nk-decision > .nk-guides::before,
.nk-hub.nk-decision > .nk-crit::before,
.nk-hub.nk-decision > .nk-method::before,
.nk-hub.nk-decision > .nk-schema::before,
.nk-hub.nk-decision > .nk-coda::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));
}
/* transitions "argent" (verdict, matrice) : repère en accent, rare et signifiant */
.nk-hub.nk-decision > .nk-verdict,
.nk-hub.nk-decision > .nk-matrix{
margin-top: var(--nt-chapter-gap, clamp(2.5rem, 6vw, 4.5rem)) !important;
position: relative;
}
.nk-hub.nk-decision > .nk-verdict::before,
.nk-hub.nk-decision > .nk-matrix::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-gold);
}
.nk-decision *{box-sizing:border-box}
.nk-decision img{max-width:100%; display:block}
.nk-decision figure{margin:0}
.nk-decision h1,.nk-decision h2,.nk-decision h3{font-weight:400; letter-spacing: var(--nt-tracking-heading); color:var(--ink); margin:0}
.nk-decision p{margin:0}
.nk-decision br{display:none} /* tue les
parasites wpautop (26) qui ajoutent de l'espace fantôme entre sections/listes */
.nk-decision p:empty{display:none} /* idem vides wpautop */
.nk-decision a{text-decoration:none; color:inherit}
/* Liens du CORPS = registre DA (blanc cassé + filet discret), JAMAIS l'or hôte/Kadence/legacy. Scopé aux blocs de LECTURE (prose/method/pitfalls/coda/criterion/faq), n'affecte pas nav/CTA/topics. Spécif (0,3,1) bat .entry-content a hôte. Fondateur 18/07. */
.nk-hub.nk-decision :is(.nk-prose,.nk-method,.nk-pitfalls,.nk-coda,.nk-crit,.nk-faq__a,.nk-summary__list) a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; text-decoration-thickness:1px; transition:text-decoration-color var(--nt-transition) }
.nk-hub.nk-decision :is(.nk-prose,.nk-method,.nk-pitfalls,.nk-coda,.nk-crit,.nk-faq__a,.nk-summary__list) a:hover{ text-decoration-color:var(--soft) }
.nk-decision a:focus-visible,.nk-decision button:focus-visible,.nk-decision summary:focus-visible,.nk-decision [href]:focus-visible,.nk-decision input:focus-visible,.nk-decision [tabindex="0"]:focus-visible{ outline:2px solid var(--ink); outline-offset:4px } /* focus a11y = NEUTRE blanc cassé (plus d'encadré OR « legacy » au clic ; or = breadcrumb only) */
/* Pas de contour/box OR « legacy » sur le titre-ancre au saut d'ancre (:target) ni au focus de titre — le saut ne doit PAS encadrer le titre. Scopé décision. Fondateur 18/07. */
.nk-hub :target,.nk-hub :is(h1,h2,h3,h4):target,.nk-hub :is(h1,h2,h3,h4):focus,.nk-hub :is(h1,h2,h3,h4):focus-visible{ outline:0; border:0; box-shadow:none; background:transparent } /* élargi .nk-decision → .nk-hub (home incluse) : kill le box OR résiduel au saut d'ancre sur la home aussi. 18/07 */
/* ÉCHELLE TYPO ARTEFACT — tailles de section. !important RETIRÉ (vérifié live 17/07 via curl) : .nk-decision X (0,2,0) bat déjà Kadence (.entry-content h2 = 0,1,1, aucun !important côté Kadence) ET pillar (chargé AVANT → 06-cluster gagne les égalités 0,2,0). summary__title : plus de règle ici, source unique = le bloc kicker gris plus bas. */
.nk-decision .nk-objection__q{ font-size:var(--nt-fs-feature)}
.nk-decision .nk-objections__title,.nk-decision .nk-topics__title,.nk-decision .nk-faq__title{ font-size:var(--nt-h2)}
.nk-decision .nk-topics__list .nk-card__t{ font-size:var(--nt-fs-item) }
.nk-decision .nk-principle__label{ font-size:clamp(1.6rem,4vw,2.2rem)}
.nk-decision .nk-faq__q{ font-size:clamp(1.05rem,2.5vw,1.3rem)}
/* rail commun : gauche = --rail, droite = auto, largeur cappée par max-width propre */
.nk-decision .nk-summary__title,.nk-decision .nk-summary__list,
.nk-decision .nk-objections__title,.nk-decision .nk-objections__list,
.nk-decision .nk-topics__title,.nk-decision .nk-topics__list,
.nk-decision .nk-principle__label,.nk-decision .nk-principle__quote,
.nk-decision .nk-faq__title,.nk-decision .nk-faq__list{ margin-inline:var(--rail) }
/* intro hero = MÊME gris de lecture que la prose (--soft) : plus de bloc « blanc pur » qui crève l'harmonie (était #F1F0F2, plus clair que le H1). Fondateur 17/07. */
.nk-decision .nk-hero__intro{ font-size:var(--nt-fs-lead); color:var(--soft) }
/* crosslinks « À explorer aussi » au rail (sortie du hub) — étaient collés à gauche */
.nk-decision .nk-crosslinks__title,.nk-decision .nk-crosslinks__lead,.nk-decision .nk-crosslinks__nav{ margin-inline:var(--rail) }
/* HERO : plus AUCUNE règle ici → LA règle unique vit dans components/pillar.css (déployé nooktails-pillar.css). Zéro doublon, zéro !important. */
/* -------- RÉPONSE / SUMMARY (= .rep) -------- */
.nk-decision .nk-summary{ background:var(--deep); padding-block:clamp(2.6rem,5.5vw,4rem); border:0 } /* rythme vertical UNIFORME (fondateur 17/07) : même padding que toutes les sections, plus d'asymétrie legacy */ /* TOP resserré (ouverture serrée après le hero, plus de trou anthracite 80-136px) ; BOTTOM garde la respiration cinéma avant la section suivante. Fondateur 17/07. */
.nk-decision .nk-summary__title{ color:var(--faint); font-style:normal; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-block:0 2.2rem } /* kicker de section UNIFORME : gris (plus d'OR) + tracking aligné sur .nk-pitfalls__eyebrow / .nk-principle__label. OR banni des labels de contenu — réservé au SEUL breadcrumb nav (or rare/whisper). Fondateur 17/07 : l'or petites-caps sur « EN 30 SECONDES » = tell « trop Claude ». */
.nk-decision .nk-summary__list{ list-style:none; padding:0; max-width:40rem; display:flex; flex-direction:column; gap:clamp(1.6rem,3.4vw,2.4rem) }
.nk-decision .nk-summary__list li{ font-size:var(--nt-fs-summary); line-height:1.42; color:var(--soft); margin:0; padding:0; border:0 } /* points = gris de lecture (--soft), plus le blanc --ink « trop Claude ». Bright réservé titres/verdict. Fondateur 17/07 */
.nk-decision .nk-summary__list li::before{ content:none }
/* -------- SECTIONS TRIEUR/SORTIE (= .sec) -------- */
.nk-decision .nk-objections,.nk-decision .nk-topics{ padding-block:clamp(2.6rem,5.5vw,4rem) }
.nk-decision .nk-objections{ background:var(--bg) }
.nk-decision .nk-topics{ background:var(--deep) }
.nk-decision .nk-objections__title,.nk-decision .nk-topics__title{ font-size:var(--nt-h2); line-height:1.1 }
.nk-decision .nk-objections__eyebrow,.nk-decision .nk-topics__eyebrow{ display:none } /* pas de label caps (doctrine) */
/* -------- TRIEUR / litanie (= .litany + .case) -------- */
.nk-decision .nk-objections__list{ list-style:none; padding:0; max-width:none; margin-top:clamp(2.4rem,5vw,3.4rem);
display:flex; flex-direction:column; gap:clamp(2.2rem,4.5vw,3.2rem) }
.nk-decision .nk-objections__list li{ position:relative; margin:0; padding:0; border:0;
transition:transform .45s cubic-bezier(.2,.7,.2,1) }
.nk-decision .nk-objections__list li:last-child{ border-block-end:0 } /* tue le filet DORÉ du dernier item (pillar:190 :last-child border-block-end or, même spécif → gagnait selon l'ordre de charge). Spécif (0,3,1) > pillar (0,2,1) : gagne toujours. Fix master 17/07 : la litanie objections = 0 filet (DA minimale). */
.nk-decision .nk-objection__q{ display:block; font-size:var(--nt-fs-feature); line-height:1.06; color:var(--ink); font-style:normal; margin:0; transition:color .35s }
.nk-decision .nk-objection__q::after{ content:"→"; margin-left:.45em; font-size:.6em; color:var(--faint); opacity:0;
transform:translateX(-.3em); display:inline-block; transition:opacity .35s,transform .35s; vertical-align:middle } /* flèche OR au survol (restaurée — accent doré exceptionnel, hover only) */
.nk-decision .nk-objection__a{ display:block; color:var(--mut); font-size:1.08rem; line-height:1.5; max-width:48ch; margin-top:.65rem }
.nk-decision .nk-objection__a a{ color:inherit; border:0 }
.nk-decision .nk-objection__go{ position:absolute; inset:0; z-index:1; font-size:0; color:transparent; overflow:hidden; white-space:nowrap } /* lien couvre-carte : texte masqué SANS débordement. Était text-indent:-200vw (unité vw = scroll horizontal). Fix master 17/07 : font-size:0 (a11y : texte reste dans le DOM). */
.nk-decision .nk-objections__list li:hover,.nk-decision .nk-objections__list li:focus-within{ transform:translateX(.5rem) }
/* Bug signalé fondateur (28/07, capture réelle "écriture invisible en blanc") : color:#fff codé
en dur au survol/focus, sans fond sombre associé -> texte blanc sur fond clair --bg = invisible.
Aucun fond sombre n'apparaît nulle part dans ce composant (vérifié) donc pas un fond manquant
à restaurer, mais une couleur de hover mal choisie à la source. Remplacé par --gold (déjà la
couleur de la flèche juste en dessous au survol) : titre + flèche deviennent or ensemble,
cohérent avec le survol du reste du site. Partagé par toutes les pages "decision" (.nk-decision)
— corrige le bug partout d'un coup, pas juste sur la page chat qui l'a révélé. */
.nk-decision .nk-objections__list li:hover .nk-objection__q,.nk-decision .nk-objections__list li:focus-within .nk-objection__q{ color:var(--gold) }
.nk-decision .nk-objections__list li:hover .nk-objection__q::after,.nk-decision .nk-objections__list li:focus-within .nk-objection__q::after{ opacity:1; color:var(--gold); transform:translateX(0) scale(1.22) } /* survol = flèche OR + grossit légèrement */
/* ═══════════ 🖼️ IMAGE 3 = RESPIRATION couleur (editorial_image variant=default) — repère git ═══════════
Ratio 16:9 · centrée (50% 50%) · légende incrustée. Cadrage géré ICI, à la source (17/07). */
.nk-decision .nk-editorial-image{ width:100vw; max-width:100vw; margin-inline:var(--bleed) }
.nk-decision .nk-editorial-image:not(.nk-editorial-image--mono){ position:relative; margin-block:0; overflow:hidden } /* clip le zoom de l'image */
.nk-decision .nk-editorial-image:not(.nk-editorial-image--mono)::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(0deg,var(--bg) 0%,transparent 12%,transparent 88%,var(--bg) 100%) } /* fondu haut+bas vers --bg (voisins = objections #121216) → 0 bande */
.nk-decision .nk-editorial-image:not(.nk-editorial-image--mono) img{ width:100%; aspect-ratio:16/9; block-size:auto; max-block-size:clamp(53svh,66svh,75svh); object-fit:cover; object-position:50% 50%; transform:scale(1.1); transform-origin:center; border:0; filter:none } /* IMAGE 3 : 16:9 centrée + zoom 10% */
.nk-decision .nk-editorial-image:not(.nk-editorial-image--mono)::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:linear-gradient(0deg,rgba(14,14,18,.82),rgba(14,14,18,.05) 55%,transparent) } /* voile légende Artefact exact */
/* Légende IMAGE 3 (default) = robuste : ancrée au rail gauche, largeur BORNÉE (right:auto + max-width) → NE PEUT JAMAIS s'effondrer en colonne verticale.
Fix cause racine (17/07) : l'ancien `left:0;right:0; padding-inline:var(--rail)` liait le padding au viewport (--rail jusqu'à 544px @1920) sur une boîte à 2 côtés → si le bloc conteneur retombait sur la colonne de contenu (832px) au lieu du 100vw plein-bord (interaction full-bleed + overflow:hidden sur grand écran/retina), le contenu passait à 224px @1440 puis -256px @1920 → 1 caractère par ligne. Ici la largeur est pilotée par le contenu, plafonnée, donc collapse impossible. `writing-mode` verrouillé horizontal. Cohérent avec la légende --mono (alignée sur var(--rail)). */
.nk-decision .nk-editorial-image:not(.nk-editorial-image--mono) figcaption{ position:absolute; left:var(--rail); right:auto; bottom:clamp(2.4rem,6vw,4.4rem); z-index:2;
max-inline-size:min(90%, 34rem); padding:0; writing-mode:horizontal-tb; text-align:start;
font-family:var(--serif); font-style:normal; font-size:clamp(0.85rem,2vw,1.2rem); line-height:1.25; color:#F4F3F5 }
/* légende 2e photo : caption_strong = MÊME police que la suite (0 mélange) + retour à la ligne */
.nk-decision .nk-editorial-image figcaption b{ display:block; font-family:inherit; font-style:normal; font-weight:600; letter-spacing:normal; margin-block-end:.18em }
/* MOBILE ≤640px : légende MINIMALE — petite, discrète, collée bas-gauche, insets fixes sûrs (jamais var(--rail)) ; le corps s'estompe (80%), le caption_strong reste net → n'écrase pas le sujet de la photo. */
@media (max-width:640px){
.nk-decision .nk-editorial-image:not(.nk-editorial-image--mono) figcaption{ left:clamp(1rem,4.5vw,1.6rem); right:clamp(1rem,4.5vw,1.6rem);
max-inline-size:none; bottom:clamp(1rem,4vw,1.8rem); font-size:.8rem; line-height:1.32; color:rgba(244,243,245,.8) }
.nk-decision .nk-editorial-image:not(.nk-editorial-image--mono) figcaption b{ color:#F4F3F5; margin-block-end:.1em }
}
/* ═══════════ 🖼️ IMAGE 2 = N&B / PREUVE (editorial_image variant=mono) — repère git ═══════════
Registre analyse (grayscale) · hauteur svh · object-position 50% 40%. (IMAGE 1 = HERO → components/pillar.css) */
.nk-decision .nk-editorial-image--mono{ background:var(--deep); position:relative; overflow:hidden } /* Artefact .preuve = --deep ; overflow clip le dézoom */
.nk-decision .nk-editorial-image--mono::after{ content:""; position:absolute; left:0; right:0; top:0; height:53vh; height:clamp(42svh,53svh,60svh); z-index:1; pointer-events:none;
background:linear-gradient(0deg,var(--deep) 0%,transparent 14%,transparent 88%,var(--bg) 100%) } /* bas → --deep (sa section), haut → --bg (objections au-dessus) → 0 bande */
.nk-decision .nk-editorial-image--mono img{ width:100%; aspect-ratio:16/9; block-size:auto; max-block-size:clamp(42svh,53svh,60svh); object-fit:cover; object-position:50% 50%; border:0; filter:grayscale(1) contrast(1.07) } /* IMAGE 2 : 16:9 centrée (comme photo 3) — plus coupée */
.nk-decision .nk-editorial-image--mono figcaption{ font-style:italic; color:var(--soft); font-size:clamp(0.82rem,1.87vw,1.05rem); line-height:1.45; max-width:30rem; margin-block:clamp(2.2rem,4vw,3rem) 0; margin-inline:var(--rail); padding-inline:0 } /* typo légende −15% (17/07) */
/* -------- POURQUOI / principle (= .why) -------- */
.nk-decision .nk-principle{ background:var(--bg); padding-block:clamp(2.6rem,5.5vw,4rem); text-align:left; border:0; box-shadow:none }
.nk-decision .nk-principle__label{ max-width:none; font-size:clamp(1.6rem,4vw,2.2rem); line-height:1.1; color:var(--ink); font-style:normal; text-transform:none; letter-spacing:0 }
.nk-decision .nk-principle__quote{ border:0; padding:0; max-width:40rem; color:var(--soft); font-size:1.18rem; line-height:1.6; margin-block:1.3rem 0 }
.nk-decision .nk-principle__quote p{ margin:0; font-style:normal; color:inherit; font-size:inherit; max-width:none!important } /* le
interne était bridé à 231px par pillar/thème → pleine largeur 40rem (Artefact .why p) */
/* -------- SORTIE / topics (= .sortie .litany/.case) -------- */
.nk-decision .nk-topics__list{ list-style:none; padding:0; max-width:none; margin-top:clamp(3.6rem,7vw,5.4rem);
display:flex; flex-direction:column; gap:clamp(1.8rem,3.5vw,2.6rem) } /* rythme resserré (25/07) : était 2.2-3.2rem, jugé trop aéré entre items */
.nk-decision .nk-topics__list>li{ position:relative; margin:0; padding:0; border:0; transition:transform .45s cubic-bezier(.2,.7,.2,1) }
.nk-decision .nk-topics__list>li:hover{ transform:translateX(.5rem) }
.nk-decision .nk-topics__list>li>a{ display:block; border:0; border-radius:0; background:none; padding:0 } /* tue le filet .nk-item>a de pillar (SORTIE = litanie sans séparateur, comme l'Artefact) */
.nk-decision .nk-topics__list .nk-item,.nk-decision .nk-topics__list .nk-item--feature{ border:0; border-radius:0; background:none; padding:0 }
.nk-decision .nk-topics__list .nk-card__thumb-wrap{ display:none }
.nk-decision .nk-topics__list .nk-card__t{ display:block; font-size:var(--nt-fs-item); line-height:1.06; color:var(--ink); text-decoration-line:none; transition:color .35s } /* casse le soulignement hérité de .entry-content a (25/07) : le titre reste le lien principal, sans filet permanent — seule la flèche accentue au survol. Le descriptif garde le soulignement fin/clair déjà défini à la source (01-base.css) */
.nk-decision .nk-topics__list .nk-card__t::after{ content:"→"; margin-left:.45em; font-size:.62em; color:var(--ink); opacity:.55; display:inline-block; transition:opacity .35s,transform .35s,color .35s; vertical-align:middle } /* flèche plus présente au repos (25/07) : était var(--faint) + opacity .72 = double atténuation, quasi invisible */
/* Couleur du titre au survol : voir règle groupée ligne ~1025 (var(--ink), pas de fond sur aucune de ces variantes → jamais de texte blanc). */
.nk-decision .nk-topics__list>li:hover .nk-card__t::after{ opacity:1; color:var(--gold); transform:translateX(.25em) scale(1.22) } /* survol = flèche OR + grossit légèrement */
.nk-decision .nk-topics__list .nk-card__d{ display:block; color:var(--soft); font-size:var(--nt-fs-desc); line-height:1.5; max-width:64ch; margin-top:.65rem } /* contraste + colonne élargis (25/07) : var(--mut) trop pâle (limite désactivé), 48ch laissait un vide visible dans une colonne de ~52rem */
/* -------- FAQ (= .faq) -------- */
.nk-decision .nk-faq{ background:var(--bg); padding-block:clamp(2.6rem,5.5vw,4rem) }
.nk-decision .nk-faq__title{ font-size:var(--nt-h2); line-height:1.1; margin-block:0 clamp(1.6rem,3vw,2.4rem) }
.nk-decision .nk-faq__list{ max-width:none }
.nk-decision .nk-faq__item{ border-top:1px solid var(--rule); padding:clamp(1.3rem,2.6vw,1.7rem) 0; background:none }
.nk-decision .nk-faq__item:last-child{ border-bottom:1px solid var(--rule) }
.nk-decision .nk-faq__item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:baseline; gap:1rem }
.nk-decision .nk-faq__item summary::-webkit-details-marker{ display:none }
/* marqueur = --mut (24/07) : --faint (--nt-text-faint, 2.42:1) rendait le "+" quasi invisible au repos
sur les 7 genres gelés — grammaire d'interaction unique */
.nk-decision .nk-faq__item summary::after{ content:"+"; color:var(--mut); font-size:1.4em; line-height:1; transition:color var(--nt-transition) }
.nk-decision .nk-faq__item[open] summary::after{ content:"–" }
.nk-decision .nk-faq__item summary:hover::after{ color:var(--ink) }
.nk-decision .nk-faq__item summary:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.nk-decision .nk-faq__q{ display:inline; font-size:clamp(1.05rem,2.5vw,1.3rem); color:var(--ink); margin:0 }
.nk-decision .nk-faq__a{ color:var(--mut); font-size:1.01rem; line-height:1.6; max-width:46ch; margin-top:.9rem }
.nk-decision .nk-faq__a p{ margin:0 }
/* ==== FOU-HUB — sections riches (problems / guides / newsletter) au standard golden. Certaines pages FOU (ex. 673 quel-animal) sont des hubs de décision : ces sections prenaient le style pillar (grilles de cartes) → ici on les ramène à la grammaire golden (rail, litanie, Iowan, typo, form sobre). ==== */
.nk-decision .nk-problems,.nk-decision .nk-guides,.nk-decision .nk-newsletter{ padding-block:clamp(2.6rem,5.5vw,4rem) }
.nk-decision .nk-problems{ background:var(--bg) }
.nk-decision .nk-guides{ background:var(--deep) }
.nk-decision .nk-newsletter{ display:none } /* newsletter RETIRÉE du template de base FOU (user 15/07) */
.nk-decision .nkt-faq{ display:none } /* FAQ legacy .nkt-faq (pleine largeur, hors rail) RETIRÉE (user 16/07) — le schéma SEO reste dans le DOM */
.nk-decision .nk-problems__eyebrow,.nk-decision .nk-guides__eyebrow,.nk-decision .nk-newsletter__label{ display:none }
.nk-decision .nk-problems__title,.nk-decision .nk-guides__title,.nk-decision .nk-newsletter__title{ margin-inline:var(--rail); font-size:var(--nt-h2); line-height:1.1 }
.nk-decision .nk-newsletter__title,.nk-decision .nk-newsletter__lead,.nk-decision .nk-newsletter__meta{ margin-inline:var(--rail)!important; max-width:40rem!important; text-align:left } /* bat le margin:auto centré de pillar */
.nk-decision .nk-guides__lead,.nk-decision .nk-newsletter__lead,.nk-decision .nk-topics__sub,.nk-decision .nk-topics__lead,.nk-decision .nk-problems__sub,.nk-decision .nk-problems__lead{ margin-inline:var(--rail)!important; margin-top:1rem; max-width:40rem; color:var(--mut); font-size:1.08rem; font-style:italic } /* sous-titres/leads de section au rail (étaient collés à gauche sur les FOU-hub) */
.nk-decision .nk-problems__grid,.nk-decision .nk-guides__list{ list-style:none!important; padding:0!important; margin:clamp(2.4rem,5vw,3.4rem) 0 0!important; margin-inline:var(--rail)!important; display:flex!important; flex-direction:column!important; gap:clamp(2rem,4vw,2.8rem)!important; grid-template-columns:none!important; max-width:none!important }
.nk-decision .nk-problems__grid>*,.nk-decision .nk-guides__list>li{ margin:0!important; padding:0!important; border:0!important; background:none!important; border-radius:0!important; transition:transform .45s cubic-bezier(.2,.7,.2,1) }
/* le feature guide est un élément de 1er niveau (pas un item de liste) → il DOIT être au rail. margin-inline:var(--rail)!important (sinon écrasé par le margin:0 des items) */
.nk-decision .nk-guides__feature{ display:block; margin-inline:var(--rail)!important; margin-block:clamp(2.4rem,5vw,3.4rem) 0; padding:0!important; border:0!important; background:none!important; border-radius:0!important; transition:transform .45s cubic-bezier(.2,.7,.2,1) }
.nk-decision .nk-problems__grid>*:hover,.nk-decision .nk-guides__list>li:hover,.nk-decision .nk-guides__feature:hover{ transform:translateX(.5rem) }
.nk-decision .nk-problems a,.nk-decision .nk-guides a{ display:block!important; border:0!important; background:none!important; padding:0!important }
.nk-decision .nk-problems .nk-card__thumb-wrap,.nk-decision .nk-guides .nk-card__thumb-wrap{ display:none!important }
.nk-decision .nk-problems .nk-card__t,.nk-decision .nk-guides .nk-card__t{ display:block; font-size:var(--nt-fs-item); line-height:1.06; color:var(--ink); text-decoration-line:none; font-family:var(--serif)!important }
.nk-decision .nk-guides__feature .nk-card__t{ font-size:var(--nt-fs-feature) }
.nk-decision .nk-problems .nk-card__t::after,.nk-decision .nk-guides .nk-card__t::after{ content:"→"; margin-left:.45em; font-size:.62em; color:var(--ink); opacity:.55; display:inline-block; vertical-align:middle; transition:opacity .35s,transform .35s,color .35s }
.nk-decision .nk-problems__grid>*:hover .nk-card__t::after,.nk-decision .nk-guides>*:hover .nk-card__t::after,.nk-decision .nk-guides__list>li:hover .nk-card__t::after{ opacity:1; color:var(--soft); transform:translateX(.25em) }
/* SURVOL : seule la FLÈCHE est or (trieur). Le TITRE reste en ENCRE — jamais de texte or (pillar le passait or = « cheap IA »).
Corrigé 25/07 (bug résiduel) : ces 5 variantes de carte sont toutes background:none!important (lignes 976-977, 1014, 1016) —
le texte était passé en #fff sans aucun fond pour le porter, donc invisible sur le fond clair au survol. */
.nk-decision .nk-item>a:hover .nk-card__t,.nk-decision a.nk-item:hover .nk-card__t,.nk-decision .nk-guides__feature:hover .nk-card__t,.nk-decision .nk-problems__grid>*:hover .nk-card__t,.nk-decision .nk-guides__list>li:hover .nk-card__t,.nk-decision .nk-topics__list>li:hover .nk-card__t{ color:var(--ink)!important }
.nk-decision .nk-problems .nk-card__d,.nk-decision .nk-guides .nk-card__d{ display:block; color:var(--soft); font-size:var(--nt-fs-desc); line-height:1.5; max-width:64ch; margin-top:.6rem; font-family:var(--serif)!important }
.nk-decision .nk-newsletter__form{ margin-inline:var(--rail); margin-top:clamp(1.6rem,3vw,2.2rem); max-width:34rem; display:flex; gap:.6rem; flex-wrap:wrap }
.nk-decision .nk-newsletter__label-field{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.nk-decision .nk-newsletter__form input{ flex:1 1 15rem; background:transparent; border:1px solid var(--rule); color:var(--ink); font-family:var(--serif); font-size:1.05rem; padding:.9rem 1rem; border-radius:0 }
.nk-decision .nk-newsletter__form input:focus{ outline:none; border-color:var(--soft) }
.nk-decision .nk-newsletter__form button{ background:transparent; border:1px solid var(--soft); color:var(--ink); font-family:var(--serif); font-size:1.05rem; padding:.9rem 1.4rem; cursor:pointer; border-radius:0; transition:background .25s,color .25s } /* bouton = bordure grise neutre (or tué), affordance = fill au survol */
.nk-decision .nk-newsletter__form button:hover{ background:var(--soft); color:var(--bg) }
.nk-decision .nk-newsletter__meta{ margin-inline:var(--rail); margin-top:.9rem; color:var(--faint); font-size:.95rem; font-style:italic }
/* -------- reduced-motion -------- */
@media (prefers-reduced-motion:reduce){ .nk-decision *{ transition:none !important } }
/* (vestiges hero mobile SEUIL supprimés — gérés par le hero canonique unifié) */
/* ============================================================================
nk-decision · GENRE CHOIX (espèce 04) — extension du golden FOU (16/07/2026)
« Un FOU peut employer le genre Choix » : MÊME DA gelée, montage comparatif.
Réutilise hero/summary/topics/faq gelés. Ajoute 2 sections propres :
.nk-cmp — comparaison en territoires (le cœur du Choix)
.nk-crit — le critère qui décide (filets éditoriaux, ZÉRO panneau/UI)
Sortie = .nk-topics gelé (« Pour aller plus loin »). Verdict 100% éditorial.
Golden sample : croquettes-ou-patee-chat (463). Duplicable arbre/griffoir.
============================================================================ */
/* [3] COMPARAISON EN TERRITOIRES — !important sur titres = bat var(--nt-h*) Kadence */
.nk-decision .nk-cmp{ background:var(--bg); padding-block:clamp(2.6rem,5.5vw,4rem) }
.nk-decision .nk-cmp__title{ margin-inline:var(--rail); font-size:var(--nt-h2); line-height:1.1; color:var(--ink) }
.nk-decision .nk-cmp__sub{ margin-inline:var(--rail); margin-top:1rem; max-width:40rem; color:var(--mut); font-style:italic; font-size:1.08rem }
.nk-decision .nk-cmp__cols{ margin-inline:var(--rail); margin-top:clamp(2.6rem,5vw,3.6rem); display:grid; grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr)); gap:clamp(1.3rem,2.2vw,2.4rem); align-items:start }
.nk-decision .nk-cmp__opt dl{ margin:0 }
.nk-decision .nk-cmp__opt dt{ display:block; font-size:1.06rem; font-weight:600; color:var(--ink); letter-spacing: var(--nt-tracking-heading); margin-top:1.5rem } /* STANDARD B (verdict typo) : label de champ = amorce éditoriale serif casse normale (calquée sur .nk-method__list li strong), PLUS d'étiquette petites-caps type COÛT/MISE EN PLACE (tell fiche-produit banni) */
.nk-decision .nk-cmp__opt dd{ margin:.25rem 0 0; color:var(--soft); font-size:1.04rem; line-height:1.45 }
.nk-decision .nk-cmp__opt-name{ font-size:clamp(1.5rem,3.4vw,2rem); color:var(--ink); letter-spacing: var(--nt-tracking-heading); line-height:1; margin:0 0 1.1rem }
.nk-decision .nk-cmp__opt--pick .nk-cmp__opt-name{ font-size:clamp(1.6rem,3.8vw,2.2rem)} /* verdict = typo seule, pas de panneau */
.nk-decision .nk-cmp__flag{ display:block; font-size:1.02rem; font-style:italic; color:var(--mut); margin:0 0 .55rem } /* STANDARD B : flag au-dessus du nom = aparté éditorial italique muted (casse normale), distinct du nom (grand ink) et des amorces (serif 600) — plus de tag petites-caps */
/* [4] LE CRITÈRE QUI DÉCIDE — filets éditoriaux (dispositif autorisé : typo/filets/espaces) */
.nk-decision .nk-crit{ background:var(--deep); padding-block:clamp(2.6rem,5.5vw,4rem) }
.nk-decision .nk-crit__label{ margin-inline:var(--rail); font-size:clamp(1.6rem,4vw,2.2rem); line-height:1.1; color:var(--ink); max-width:32rem; letter-spacing: var(--nt-tracking-heading) }
.nk-decision .nk-crit__cards{ margin-inline:var(--rail); margin-top:clamp(2.4rem,4.5vw,3.2rem); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.4rem,3vw,2.2rem) clamp(2rem,4vw,3.2rem); max-width:none }
.nk-decision .nk-crit__card{ border-top:1px solid var(--rule); padding-top:1.1rem }
.nk-decision .nk-crit__card-p{ font-size:clamp(1.15rem,2.4vw,1.42rem); color:var(--ink); line-height:1.18; margin:0 }
.nk-decision .nk-crit__card-a{ display:block; color:var(--soft); font-size:1.06rem; line-height:1.4; margin-top:.55rem }
.nk-decision .nk-crit__card-a::before{ content:"\2192 "; color:var(--faint) }
/* dl/dt/dd héritent le serif du conteneur ; on le fige quand même (Kadence peut cibler dl) */
.nk-decision .nk-cmp__opt dt,.nk-decision .nk-cmp__opt dd,.nk-decision .nk-cmp__flag{ font-family:var(--serif)!important }
@media (max-width:640px){
.nk-decision .nk-cmp__cols{ grid-template-columns:1fr; gap:2.6rem }
.nk-decision .nk-crit__cards{ grid-template-columns:1fr }
}
/* ============================================================================
nk-decision · SKIN LONG-FORM « .nk-prose » v3 · DA DIAGNOSTIC (sobre, éditorial)
Le design s'efface derrière l'information. Aéré, analytique, tendu mais non
spectaculaire. PAS de cartes, PAS de badges, PAS de barres verticales déco,
PAS de flèches systématiques, PAS de codes UI SaaS. 100% CSS, 0 contenu touché.
============================================================================ */
.nk-decision .nk-prose{ padding-block:clamp(3rem,7vw,4.8rem) }
.nk-decision .nk-prose > *{ margin-inline:var(--rail); max-width:38rem }
.nk-decision .nk-prose > .wp-block-table,
.nk-decision .nk-prose > .wp-block-rank-math-toc-block,
.nk-decision .nk-prose > .wp-block-gallery{ max-width:46rem }
/* CHAPITRES : air au-dessus des h2 */
.nk-decision .nk-prose h2{ font-family:var(--serif)!important; font-size:var(--nt-h2); line-height:1.12; color:var(--ink); letter-spacing: var(--nt-tracking-heading); margin-block:clamp(4rem,11vw,6.5rem) 1.2rem }
.nk-decision .nk-prose > h2:first-child{ margin-top:clamp(1rem,3vw,2rem) }
.nk-decision .nk-prose h3{ font-family:var(--serif)!important; font-size:clamp(0.97rem,2.2vw,1.23rem); line-height:1.2; color:var(--ink); margin-block:clamp(3rem,6vw,3.9rem) .95rem }
/* FIX hiérarchie H3 (18/07) : la règle Kadence globale `body.single .entry-content h3{color:var(--nt-text-muted)}` (spéc. 0,0,2,2) écrasait le `color:var(--ink)` du template → H3 rendus PLUS TERNES que le corps (hiérarchie inversée, loi 6). On re-scope via la classe conteneur `.nk-hub` (spéc. 0,0,3,1) pour repasser au-dessus SANS !important. Placé AVANT les règles d'alerte : celles-ci (0,0,3,1, plus bas dans le fichier) gardent la priorité sur les titres id*="alerte-*". */
.nk-hub.nk-decision .nk-prose h3{ color:var(--ink) }
/* niveaux d'alerte = petite couleur typographique sur le titre (aucune barre) */
.nk-decision .nk-prose h2[id*="alerte-jaune"],.nk-decision .nk-prose h3[id*="alerte-jaune"]{ color:#c6ab4c }
.nk-decision .nk-prose h2[id*="alerte-orange"],.nk-decision .nk-prose h3[id*="alerte-orange"]{ color:#d18b3d }
.nk-decision .nk-prose h2[id*="alerte-rouge"],.nk-decision .nk-prose h3[id*="alerte-rouge"]{ color:#d15c48 }
/* PARAGRAPHES : interligne généreux */
.nk-decision .nk-prose p{ color:var(--soft); font-size:1.15rem; line-height:2.02; margin-block:0 1.95rem }
.nk-decision .nk-prose strong{ color:var(--ink); font-weight:600 }
/* Règle lien .nk-decision .nk-prose a supprimée (25/07, Famille 1) : duplicata mort,
spécificité (0,2,1) toujours battue par .nk-hub.nk-decision :is(...) a (0,3,1, ligne
~880) qui couvre déjà .nk-prose — jamais gagnante, risque de dérive silencieuse. */
/* LISTES : simples, aérées (puces discrètes, pas de cartes ni flèches) */
.nk-decision .nk-prose ul,.nk-decision .nk-prose ol{ color:var(--soft); font-size:1.15rem; line-height:1.9; padding-left:1.35rem; margin-block:.7rem 2.15rem }
.nk-decision .nk-prose li{ margin-block:.8rem }
.nk-decision .nk-prose ul li::marker{ color:var(--faint) }
.nk-decision .nk-prose ol li::marker{ color:var(--mut) }
.nk-decision .nk-prose li strong{ color:var(--ink) }
/* CALLOUT (30s + encadrés) : filet gauche fin, sobre */
.nk-decision .nk-prose .nk-callout{ border-left:1px solid var(--rule)!important; padding:.2rem 0 .2rem 1.4rem!important; background:none!important; border-radius:0!important; box-shadow:none!important; margin-block:2.9rem!important; max-width:40rem }
.nk-decision .nk-prose .nk-callout-label{ color:var(--mut); font-style:italic; font-size:.92rem; margin:0 0 .55rem }
.nk-decision .nk-prose .nk-callout-body{ color:var(--ink); font-size:1.16rem; line-height:1.6; margin:0 }
.nk-decision .nk-prose .nk-callout-body strong{ color:var(--ink); font-weight:400 } /* était #fff (blanc pur intrus) → --ink, cohérent avec le corps prose */
/* ---- TABLEAU RÉCAP : vrai tableau ÉDITORIAL (revue vétérinaire) ---- */
.nk-decision .nk-prose .wp-block-table{ overflow-x:auto; margin-block:clamp(2.6rem,5vw,3.6rem)!important; max-width:44rem }
.nk-decision .nk-prose table{ width:100%; border-collapse:collapse; background:none; border:0; table-layout:auto; font-size:1.04rem }
/* en-tête discret + FILET OR fin dessous */
.nk-decision .nk-prose thead th{ text-align:left; color:var(--mut); font-weight:400; font-style:italic; font-size:.92rem; text-transform:none; letter-spacing:0; padding:0 1.4rem .65rem 0; border:0; border-bottom:1px solid rgba(124,96,56,.55) }
/* séparateurs horizontaux très légers, lignes aérées */
.nk-decision .nk-prose tbody td{ border:0; border-bottom:1px solid rgba(42,39,35,.06); padding:1.05rem 1.4rem 1.05rem 0; vertical-align:baseline; line-height:1.45 }
.nk-decision .nk-prose tbody tr:last-child td{ border-bottom:0 }
.nk-decision .nk-prose tbody td:first-child{ color:var(--ink); font-size:1.1rem; width:46% } /* Signe dominant */
.nk-decision .nk-prose tbody td:last-child{ color:var(--soft) } /* Action, sans flèche */
/* niveau = petite couleur typographique SEULE (pas de badge/dot/barre) */
.nk-decision .nk-prose tbody td:nth-child(2){ font-size:.96rem; white-space:nowrap }
.nk-decision .nk-prose tbody tr[data-niveau="jaune"] td:nth-child(2){ color:#c6ab4c }
.nk-decision .nk-prose tbody tr[data-niveau="orange"] td:nth-child(2){ color:#d18b3d }
.nk-decision .nk-prose tbody tr[data-niveau="rouge"] td:nth-child(2){ color:#d15c48 }
/* SOMMAIRE (TOC) allégé */
.nk-decision .nk-prose .wp-block-rank-math-toc-block{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding-block:1.6rem; margin-block:2.6rem!important }
.nk-decision .nk-prose .wp-block-rank-math-toc-block a{ text-decoration:none; color:var(--mut) }
.nk-decision .nk-prose .wp-block-rank-math-toc-block a:hover{ color:var(--ink) }
.nk-decision .nk-prose .wp-block-rank-math-toc-block ul{ font-size:.98rem }
/* SÉPARATEURS + air autour des images */
.nk-decision .nk-prose hr,.nk-decision .nk-prose .wp-block-separator{ border:0; border-top:1px solid var(--rule); margin-block:clamp(2.6rem,6vw,3.8rem); max-width:38rem }
.nk-decision .nk-editorial-image{ margin-block:clamp(1rem,3vw,2.2rem) }
.nk-decision .nk-prose figure.wp-block-image img{ border-radius:0 }
.nk-decision .nk-prose .wp-block-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.6rem }
.nk-decision .nk-prose .wp-block-gallery img{ width:100%; height:100%; object-fit:cover; border-radius:0 }
/* ---- MOBILE < 640 : hero + rythme + tableau reste TABULAIRE (pas de cartes) ---- */
@media (max-width:640px){
/* (hero mobile SEUIL supprimé — hero canonique unifié) */
.nk-decision .nk-prose{ padding-block:clamp(2.4rem,7vw,3.4rem) }
.nk-decision .nk-prose > *{ max-width:none }
.nk-decision .nk-prose:first-of-type{ padding-top:clamp(3rem,10vw,4.4rem) }
.nk-decision .nk-prose p,.nk-decision .nk-prose ul,.nk-decision .nk-prose ol{ font-size:1.06rem; line-height:1.85 }
.nk-decision .nk-prose h2{ font-size:var(--nt-h2); margin-block:clamp(3.2rem,12vw,4.6rem) 1rem }
.nk-decision .nk-prose h3{ font-size:clamp(1.24rem,5.6vw,1.5rem)}
.nk-decision .nk-prose .nk-callout-body{ font-size:1.1rem }
/* tableau : reste tabulaire, 1re colonne large, 2 lignes ok, 0 débordement, plus d'air */
.nk-decision .nk-prose .wp-block-table{ overflow-x:hidden }
.nk-decision .nk-prose table{ font-size:.95rem; table-layout:fixed }
.nk-decision .nk-prose thead th{ font-size:.8rem; padding-right:.55rem }
.nk-decision .nk-prose tbody td{ padding:1rem .55rem 1rem 0; word-wrap:break-word; overflow-wrap:break-word; white-space:normal }
.nk-decision .nk-prose tbody td:first-child{ width:48%; font-size:1rem }
.nk-decision .nk-prose tbody td:nth-child(2){ width:20%; font-size:.82rem }
.nk-decision .nk-prose tbody td:last-child{ width:32%; font-size:.9rem }
}
/* ============================================================================
nk-decision · GENRE PRATIQUE (espèce 02) v2 — golden validé (16/07/2026)
Chaque bloc a son identité. Schéma = planche d'architecte (traits fins, coins-
repères, +13%). Erreurs = fiche d'inspection. Filet or rare avant fiche/méthode/
sorties (scopé data-nk-genre="pratique"). Payoff = editorial_image gelé.
============================================================================ */
/* filet or rare (accent avant les gros blocs — seul or fixe hors survol) */
.nk-decision .nk-pitfalls__eyebrow::before,.nk-decision .nk-method__title::before,
.nk-decision[data-nk-genre="pratique"] .nk-topics__title::before{ content:""; display:block; width:2.2rem; height:1px; background:var(--faint); margin:0 0 1.2rem }
/* règle 30s resserrée (scopé pratique) */
.nk-decision[data-nk-genre="pratique"] .nk-summary__list{ gap:clamp(1.2rem,2.6vw,1.8rem) }
/* -------- SCHÉMA (planche d'architecte, +13%, coins-repères) -------- */
.nk-decision .nk-schema{ background:var(--deep); padding-block:clamp(2.4rem,6vw,3.6rem) clamp(4.5rem,10vw,7rem); --line:rgba(42,39,35,.24); --line-soft:rgba(42,39,35,.085) }
.nk-decision .nk-schema__fig{ margin:0; margin-inline:var(--rail); max-width:57rem }
.nk-decision .nk-schema__plate{ position:relative; padding:clamp(2.2rem,5vw,4rem) clamp(1.8rem,4vw,3.4rem); border:1px solid rgba(42,39,35,.11) }
.nk-decision .nk-schema__plate::before,.nk-decision .nk-schema__plate::after{ content:""; position:absolute; width:16px; height:16px; border:0 solid var(--faint); opacity:.55 }
.nk-decision .nk-schema__plate::before{ top:0; left:0; border-top-width:1px; border-left-width:1px }
.nk-decision .nk-schema__plate::after{ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px }
.nk-decision .nk-schema__svg{ display:block; width:100%; height:auto; background:transparent; overflow:visible }
.nk-decision .nk-schema figcaption{ margin-inline:0; max-width:38rem; margin-top:clamp(1.4rem,3vw,2rem); color:var(--faint); font-style:italic; font-size:.98rem; line-height:1.55 }
.nk-decision .nk-schema__svg text{ font-family:var(--serif); fill:var(--faint) }
.nk-decision .nk-schema .s-wall{ fill:none; stroke:var(--line); stroke-width:1; stroke-linejoin:miter }
.nk-decision .nk-schema .s-part{ fill:none; stroke:var(--line-soft); stroke-width:.7 }
.nk-decision .nk-schema .s-door{ fill:none; stroke:var(--line-soft); stroke-width:.7 }
.nk-decision .nk-schema .s-room-label{ font-size:14px; font-style:italic; fill:var(--faint); letter-spacing:.04em }
.nk-decision .nk-schema .s-good{ fill:none; stroke:var(--gold); stroke-width:1.1 }
.nk-decision .nk-schema .s-good-label{ font-size:14px; font-style:italic; fill:var(--mut); letter-spacing:.03em }
.nk-decision .nk-schema .s-mark{ fill:none; stroke:var(--line-soft); stroke-width:.9 }
.nk-decision .nk-schema .s-avoid{ fill:none; stroke:var(--faint); stroke-width:.85; stroke-dasharray:2 4 }
.nk-decision .nk-schema .s-avoid-label{ font-size:13px; font-style:italic; fill:var(--faint) }
.nk-decision .nk-schema .s-dim{ fill:none; stroke:var(--mut); stroke-width:.7 }
.nk-decision .nk-schema .s-dim-label{ font-size:13px; font-style:italic; fill:var(--mut); letter-spacing:.02em }
.nk-decision .nk-schema .s-dim-bg{ fill:var(--deep) }
/* -------- ERREURS = FICHE D'INSPECTION -------- */
.nk-decision .nk-pitfalls{ background:var(--bg); padding-block:clamp(2.6rem,5.5vw,4rem) }
.nk-decision .nk-pitfalls__eyebrow{ margin-inline:var(--rail); color:var(--faint); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem }
.nk-decision .nk-pitfalls__title{ margin-inline:var(--rail); font-size:var(--nt-h2); line-height:1.1; color:var(--ink) }
.nk-decision .nk-pitfalls__sheet{ margin-inline:var(--rail); max-width:43rem; margin-top:clamp(2.8rem,5.5vw,3.8rem); border:1px solid var(--rule); padding:clamp(.4rem,1.5vw,1rem) clamp(1.4rem,3.5vw,2.4rem) }
.nk-decision .nk-pitfalls__list{ list-style:none; padding:0; margin:0 }
.nk-decision .nk-pitfall{ display:grid; grid-template-columns:1fr; padding-block:clamp(1.1rem,2.4vw,1.5rem) } /* ✗ retiré (anti-IA) → 1 seule colonne, plus de col repère 1.7rem qui écrasait le texte */
.nk-decision .nk-pitfall+.nk-pitfall{ border-top:1px solid var(--rule) }
.nk-decision .nk-pitfall__mark{ grid-row:1/3; font-family:var(--serif); font-size:1.05rem; color:var(--faint); line-height:1.5 }
.nk-decision .nk-pitfall__wrong{ font-family:var(--serif)!important; font-size:clamp(1.14rem,2.5vw,1.38rem); line-height:1.25; color:var(--ink) }
.nk-decision .nk-pitfall__fix{ color:var(--mut); font-style:italic; font-size:1.02rem; line-height:1.5; margin-top:.45rem }
.nk-decision .nk-pitfall__fix::before{ content:"corriger — "; color:var(--faint); font-style:normal; font-size:.82em; letter-spacing:.05em; text-transform:uppercase }
/* -------- MÉTHODE / CHECKLIST -------- */
.nk-decision .nk-method{ background:var(--deep); padding-block:clamp(2.6rem,5.5vw,4rem) }
/* ANTI-COLLAGE (fondateur 17/07) : 2 sections de MÊME fond qui se suivent fusionnaient (aucune coupure). Quand ça arrive, la 2e bascule sur le fond opposé → alternance garantie, 0 ligne ajoutée. Se déclenche UNIQUEMENT sur l'adjacence réelle. */
.nk-decision .nk-crit + .nk-method{ background:var(--bg) }
.nk-decision .nk-method + .nk-pitfalls{ background:var(--deep) }
.nk-decision .nk-method__title{ margin-inline:var(--rail); font-size:var(--nt-h2); line-height:1.1; color:var(--ink) }
.nk-decision .nk-method__list{ counter-reset:step; list-style:none; padding:0; margin:clamp(3rem,6vw,4rem) 0 0; margin-inline:var(--rail); max-width:40rem }
.nk-decision .nk-method__list li{ position:relative; padding-left:0; margin-block:clamp(1.4rem,3vw,2.1rem); color:var(--soft); font-size:1.08rem; line-height:1.62 }
.nk-decision .nk-method__list li strong{ display:block; color:var(--ink); font-weight:600; letter-spacing: var(--nt-tracking-heading); margin-block-end:.4em }
/* NUMÉROTATION RETIRÉE (fondateur 19/07, anti-IA) : le compteur 1·2·3 sur .nk-method__list = tell « numérotation » — surtout ici où le composant sert des SOLUTIONS ALTERNATIVES (pas de vraies étapes séquentielles). Les étapes se lisent au titre gras + l'air. ⚠️ Affecte aussi le golden Pratique (si une vraie séquence a besoin de numéros, réactiver ciblé). */
.nk-decision .nk-method__list li::before{ content:none }
/* -------- CODA -------- */
/* CODA = CHAMBRE CINÉMA (statement climax) — DA unifiée sur TOUS les genres .nk-decision (fondateur 16/07 : « cette DA pour tous les templates »).
Étendu à .nt-guide--diagnostic (24/07 : remplace les doublons g-affiche/g-keep — même composant, à la source, plus de markup dupliqué).
--deep/--serif sont des tokens LOCAUX à .nk-decision : fallback --nt-surface-1 / stack Iowan pour que le composant fonctionne nativement
hors de ce scope, sans dupliquer les règles ni redéfinir les tokens ailleurs. */
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda{ position:relative; overflow:hidden; min-height:clamp(62svh,80svh,88svh); display:flex; align-items:center; justify-content:center; margin:0; padding-block:clamp(3rem,8vw,5rem); background:var(--deep, var(--nt-surface-1)) }
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(58% 56% at 50% 46%, rgba(124,96,56,.14), transparent 66%) }
/* 24/07 v2 — DEUX VARIANTES OFFICIELLES, choisies par un contrat EXPLICITE au shortcode
([nooktails_coda variant="punchline|statement"]), jamais déduites de la longueur du texte
ni de la présence de "|" (qui reste un enrichissement typographique interne, pas un sélecteur
de variante). Rendu porté par l'attribut data-nk-variant émis par shortcodes/pillar-shortcodes.php.
• punchline — déclaration courte, fort impact, colonne étroite (usage historique).
• statement — pensée développée, registre éditorial (italique), colonne large ; c'est la
variante PAR DÉFAUT (aucune migration éditoriale requise pour le contenu existant) et un
rendu premium à part entière, jamais un mode dégradé du punchline. */
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda__line{ position:relative; z-index:1; margin-inline:auto; padding:0 clamp(1.4rem,6vw,2rem); text-align:center; font-family:var(--serif, "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif)!important; letter-spacing: var(--nt-tracking-heading); text-wrap:balance }
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda__line::before{ display:none }
/* BUG COLLAGE (24/07) : les segments "|" sont des adjacents SANS espace dans le markup
(shortcodes/pillar-shortcodes.php explode('|')) — en display:inline (défaut), 2 segments qui se
suivent se collent visuellement ("chatque" au lieu de "chat / que"). Règle unique à la source :
chaque segment occupe sa propre ligne, pour les DEUX variantes, sans dépendre d'espaces implicites. */
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda__line span{ display:block }
/* max-width en "ch" doit être ancré sur LA MÊME taille que le texte qu'elle contraint (sinon "ch"
se calcule sur une taille héritée minuscule → colonne écrasée, mots coupés en plein milieu,
constaté en direct 24/07) — chaque variante porte donc son propre font-size sur .nk-coda__line. */
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda[data-nk-variant="punchline"] .nk-coda__line{ max-width:22ch; font-weight:400; font-style:normal; font-size:clamp(1.9rem,5.6vw,3.1rem); line-height:1.24; color:var(--nt-text-strong) }
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda[data-nk-variant="statement"] .nk-coda__line,
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda:not([data-nk-variant]) .nk-coda__line{ max-width:36ch; font-style:italic; font-weight:400; font-size:clamp(1.4rem,3.2vw,1.95rem); line-height:1.55; color:var(--nt-text) }
/* le "|" (spans) enrichit la variante EN COURS, il ne la choisit pas. */
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda[data-nk-variant="punchline"] .nk-coda__line span:not(:first-child){ font-size:clamp(1.3rem,3.2vw,1.8rem); line-height:1.4; margin-top:.5em }
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda[data-nk-variant="statement"] .nk-coda__line span:first-child,
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda:not([data-nk-variant]) .nk-coda__line span:first-child{ font-style:normal }
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda[data-nk-variant="statement"] .nk-coda__line span:not(:first-child),
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda:not([data-nk-variant]) .nk-coda__line span:not(:first-child){ margin-top:.4em }
@media (max-width:640px){
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda{ min-height:clamp(56svh,70svh,76svh); padding-block:clamp(2.4rem,8vw,4rem) }
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda::before{ background:radial-gradient(90% 44% at 50% 46%, rgba(124,96,56,.17), transparent 70%) }
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda[data-nk-variant="statement"] .nk-coda__line,
:is(.nk-decision, .nt-guide--diagnostic) .nk-coda:not([data-nk-variant]) .nk-coda__line{ font-size:clamp(1.3rem,5vw,1.6rem); line-height:1.5 }
}
/* === HERO — garde-fou bord-à-bord (le SEUL reste de l'ancien bloc scopé) ===
Le hero canonique unifié vit plus haut (.nk-decision .nk-hero,.nk-hub:not(.nk-home) .nk-hero). Ici : uniquement
permettre au 100vw de s'échapper du conteneur d'article (sinon la photo est rognée). ZÉRO !important, zéro override hero. */
:is(.entry-content,.entry-content-wrap,.content-container,.content-wrap,.single-content):has(.nk-decision .nk-hero,.nk-hub:not(.nk-home) .nk-hero){ overflow:visible }
.nk-decision,.nk-hub{ overflow-x:clip }
/* anti-verticalité (scopé genre=pratique, ne touche pas les genres gelés) : principe centré + sorties 3 cartes */
.nk-decision[data-nk-genre="pratique"] .nk-principle{ padding-block:clamp(5.5rem,12vw,8.5rem); text-align:center }
.nk-decision[data-nk-genre="pratique"] .nk-principle__label{ margin-inline:auto; max-width:26rem; font-size:var(--nt-h2); line-height:1.14; color:var(--ink); font-style:italic }
.nk-decision[data-nk-genre="pratique"] .nk-principle__quote{ margin-inline:auto!important; max-width:33rem!important; color:var(--mut); font-size:1.12rem; line-height:1.6; margin-top:1.5rem; text-align:center }
.nk-decision[data-nk-genre="pratique"] .nk-topics__list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:clamp(1.8rem,3.5vw,2.8rem); flex-direction:row }
.nk-decision[data-nk-genre="pratique"] .nk-topics__list>li{ border-top:1px solid var(--rule); padding-top:1.4rem; transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s }
.nk-decision[data-nk-genre="pratique"] .nk-topics__list>li:hover{ border-top-color:var(--soft) } /* séparateur hover = neutre (or tué) */
.nk-decision[data-nk-genre="pratique"] .nk-topics__list .nk-card__t{ font-size:clamp(1.3rem,2.6vw,1.6rem)!important; line-height:1.16 }
.nk-decision[data-nk-genre="pratique"] .nk-topics__list .nk-card__d{ font-size:1.02rem; margin-top:.6rem; max-width:none; color:var(--soft) } /* descriptions plus contrastées */
/* -------- FAQ « Nooktails » (scopé pratique) : filet or + chevron fin + reveal doux -------- */
.nk-decision[data-nk-genre="pratique"] .nk-faq__title::before{ content:""; display:block; width:2.2rem; height:1px; background:var(--faint); margin:0 0 1.2rem }
.nk-decision[data-nk-genre="pratique"] .nk-faq__title{ margin-block:0 clamp(2rem,3.6vw,2.9rem) }
.nk-decision[data-nk-genre="pratique"] .nk-faq__item{ padding-block:clamp(1.6rem,3.4vw,2.2rem) }
/* marqueur = --mut au repos (24/07) : --faint (2.42:1) quasi invisible ; courbe dupliquée → var(--nt-ease) */
.nk-decision[data-nk-genre="pratique"] .nk-faq__item summary::after{ content:"\203A"; font-weight:200; font-size:1.55em; line-height:1; color:var(--mut); transform:rotate(90deg); transition:transform .45s var(--nt-ease),color var(--nt-transition) }
.nk-decision[data-nk-genre="pratique"] .nk-faq__item[open] summary::after{ content:"\203A"; transform:rotate(-90deg); color:var(--mut) }
.nk-decision[data-nk-genre="pratique"] .nk-faq__item summary:hover::after{ color:var(--ink) }
.nk-decision[data-nk-genre="pratique"] .nk-faq__item summary:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.nk-decision[data-nk-genre="pratique"] .nk-faq__item[open] .nk-faq__a{ animation:nkFaqReveal .42s var(--nt-ease) both }
@keyframes nkFaqReveal{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
.nk-decision[data-nk-genre="pratique"] .nk-faq__item summary::after{ transition:none }
.nk-decision[data-nk-genre="pratique"] .nk-faq__item[open] .nk-faq__a{ animation:none }
.nk-decision[data-nk-genre="pratique"] .nk-topics__list>li{ transition:none }
}
@media (max-width:640px){
/* schéma : planche plein-cadre resserrée + centrée (moins de vide, plus de présence) */
.nk-decision .nk-schema{ padding-block:clamp(2rem,6vw,3rem) clamp(2.4rem,7vw,3.4rem) }
.nk-decision .nk-schema__fig{ width:100vw; max-width:100vw; margin-inline:var(--bleed) }
.nk-decision .nk-schema__plate{ padding:clamp(1.3rem,4.5vw,2rem) clamp(.7rem,3.5vw,1.2rem) }
.nk-decision .nk-schema figcaption{ margin-inline:var(--rail); margin-top:clamp(1.1rem,3vw,1.6rem) }
.nk-decision .nk-schema .s-room-label{ font-size:20px }
.nk-decision .nk-schema .s-good-label,.nk-decision .nk-schema .s-dim-label{ font-size:19px }
.nk-decision .nk-schema .s-avoid-label{ font-size:18px }
/* mesure éditoriale resserrée (~30-32 caractères) */
.nk-decision[data-nk-genre="pratique"] .nk-method__list li{ max-width:32ch }
.nk-decision[data-nk-genre="pratique"] .nk-pitfall__wrong,
.nk-decision[data-nk-genre="pratique"] .nk-pitfall__fix{ max-width:30ch }
}
/* ============================================================================
REGISTRE ÉDITORIAL (pattern Diagnostic/Pratique) — remplace les tableaux « triage »
Le tableau DISPARAÎT : regroupé par gravité, prose serif, 0 grille, 0 badge, 0 colonne.
La couleur ne fait que confirmer (accent typo sur la rubrique ; le MOT porte le sens).
Doctrine : NOOKTAILS_EDITORIAL_READING_PATTERNS.md
============================================================================ */
.nk-decision .nk-registre{ margin-inline:var(--rail); max-width:40rem; margin-block:clamp(2.4rem,5vw,3.6rem) }
.nk-decision .nk-registre__grav{ margin-top:2.8rem }
.nk-decision .nk-registre__grav:first-child{ margin-top:0 }
.nk-decision .nk-registre__rubric{ font-family:var(--serif); font-style:italic; font-size:1.02rem; letter-spacing:.01em; color:var(--mut); margin:0 0 .5rem; display:flex; align-items:baseline; gap:.7rem }
.nk-decision .nk-registre__rubric::before{ content:""; flex:0 0 auto; width:1.6rem; height:1px; background:currentColor; opacity:.5; transform:translateY(-.35em) }
.nk-decision .nk-registre__grav[data-level="surveiller"] .nk-registre__rubric{ color:#c6ab4c }
.nk-decision .nk-registre__grav[data-level="alerte"] .nk-registre__rubric{ color:#d18b3d }
.nk-decision .nk-registre__grav[data-level="urgence"] .nk-registre__rubric{ color:#d15c48 }
.nk-decision .nk-registre__signs{ font-family:var(--serif); font-size:clamp(1.18rem,2.6vw,1.34rem); line-height:1.34; color:var(--ink); margin:0 0 .35rem; font-weight:400; letter-spacing: var(--nt-tracking-heading) }
.nk-decision .nk-registre__do{ color:var(--soft); margin:0; font-size:1.06rem; line-height:1.62 }
.nk-decision .nk-registre__do em{ color:var(--ink); font-style:italic }
.nk-decision .nk-registre__grav[data-level="urgence"] .nk-registre__signs{ font-size:clamp(1.3rem,3vw,1.5rem) }
.nk-decision .nk-registre__grav[data-level="urgence"] .nk-registre__do{ color:var(--ink) }
/* === « À lire aussi » (nkt-rel = related auto du thème) — restylé propre, 0 vestige (liens gardés, design refait) === */
.nkt-rel{ max-width:52rem; margin:clamp(3rem,7vw,5rem) auto 0; padding:0 clamp(1.4rem,5vw,3rem) }
.nkt-rel__t{ font-family:"Iowan Old Style",Palatino,Georgia,serif; font-style:italic; font-size:1rem; letter-spacing:.01em; color:var(--nt-text-muted); margin:0 0 1.2rem; padding-top:clamp(2rem,4vw,2.6rem); border-top:1px solid rgba(42,39,35,.1); text-transform:none }
.nkt-rel__grid{ display:block; max-width:40rem } /* épuré : litanie 1 colonne, plus de grille (virage anti-IA) */
.nkt-rel__col{ display:flex; flex-direction:column }
.nkt-rel__k{ display:block; font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:1.08rem; line-height:1.32; color:var(--nt-text-strong); text-decoration:none; padding:.95rem 0; border-top:1px solid rgba(42,39,35,.07); transition:color .3s }
.nkt-rel__k:hover{ color:var(--nt-text-strong) }
/* === SORTIE DE PAGE UNIQUE sur les pages Design System (.nk-decision) ===
Le master a DÉJÀ sa sortie (bloc topics « Pour aller plus loin »). Le bloc
auto-related du thème (.nkt-rel, injecté après .nk-decision dans .single-content)
sort des liens hors-sujet (ex. lapin sur page chat) + 1er lien en or : on le
masque, scopé aux pages DS seulement (:has(.nk-decision)). Les pages legacy
NON migrées gardent leur bloc related. 2026-07-18 */
.single-content:has(.nk-decision) .nkt-rel,
.entry-content:has(.nk-decision) .nkt-rel{ display:none !important }
/* === DIAGNOSTIC CINÉMA (nt-guide--diagnostic) — hero mobile lisible, template CONSERVÉ ===
Fondateur : « je veux pas supprimer Diagnostic cinéma ». On garde le drame full-bleed,
on retire seulement ce qui NOYAIT l'image sur mobile (boîte 4/5 courte + dégradé .95).
Spécificité (0,3,x) via .nt-guide.nt-guide--diagnostic → gagne sans !important. */
@media (max-width:640px){
/* g-hero desktop cinéma + scrim supprimés (hero universel, zéro scrim) */
}
/* === Bridge legacy « Lire le guide → » (g-onward) → INTÉGRÉ à la new DA ===
Garde le lien + tout le maillage. Avant : colonne étroite 33rem qui « pend » dans le noir.
Après : au rail (52rem) + filet de clôture (comme .nk-further) → le bloc se ferme, plus de vide flottant.
Spécificité (0,3,0) via .g-onward.g-col → gagne sur .nt-guide .g-col (0,2,0). */
.nt-guide .g-onward.g-col{ max-width:52rem; padding-block:clamp(2.4rem,5vw,3.2rem) clamp(1.6rem,4vw,2.4rem); border-top:1px solid rgba(42,39,35,.1); margin-top:clamp(1.2rem,3vw,2rem) }
.nt-guide .g-onward .g-step{ font-family:"Iowan Old Style",Palatino,Georgia,serif; font-weight:400; color:var(--nt-text-strong) }
/* ============================================================================
GENRE COMPRÉHENSION (03) — article de revue : le design DISPARAÎT.
Rythme = typo + blancs + images + citation. Seule signature = nk-pullquote.
0 nouveau bloc, 0 callout 30s, 0 grille topics. Doctrine : NOOKTAILS_EDITORIAL_READING_PATTERNS.md § Compréhension.
============================================================================ */
.nk-decision .nk-pullquote{ background:var(--bg); margin:0; padding-block:clamp(4.5rem,12vw,8rem) }
/* lueur chaude derrière la citation — même halo que la « chambre » Diagnostic (climax) */
.nk-decision[data-nk-genre="comprehension"] .nk-pullquote{ background:radial-gradient(48% 66% at 40% 50%,rgba(124,96,56,.09),transparent 62%),var(--deep) }
.nk-decision .nk-pullquote__q{ margin-inline:var(--rail); max-width:44rem; font-family:var(--serif)!important; font-size:clamp(1.9rem,4.9vw,3rem); line-height:1.22; letter-spacing: var(--nt-tracking-heading); color:var(--ink); font-weight:400; text-wrap:balance;
/* reset du blockquote hérité (base + Kadence : border-left gold + fond gold-soft) → « enleve ça » (la barre verticale) */
border:0!important; border-inline-start:0!important; background:none!important; border-radius:0!important; padding:0!important }
/* filet OR horizontal — la SEULE signature (« l'autre filet fallait laisser ») */
.nk-decision .nk-pullquote__q::before{ content:""; display:block; width:2.4rem; height:1px; background:var(--faint); margin:0 0 clamp(1.8rem,4vw,2.6rem) }
.nk-decision .nk-pullquote__q p{ margin:0; font:inherit; color:inherit; max-width:none!important }
.nk-decision .nk-pullquote__by{ margin-inline:var(--rail); max-width:44rem; margin-top:clamp(1.6rem,3.4vw,2.2rem); color:var(--mut); font-style:italic; font-size:1.02rem }
.nk-decision[data-nk-genre="comprehension"] .nk-lede{ font-family:var(--serif)!important; font-size:var(--nt-h2)!important; line-height:1.3; color:var(--ink); font-style:italic; margin-block:0 clamp(1.6rem,3vw,2.2rem)!important; max-width:38rem }
.nk-decision[data-nk-genre="comprehension"] .nk-lede + p::first-letter{ font-family:var(--serif); float:left; font-size:3.4em; line-height:.82; padding:.04em .12em 0 0; color:var(--ink) }
.nk-decision[data-nk-genre="comprehension"] .nk-prose h2{ font-size:var(--nt-h2); margin-block:clamp(3.4rem,9vw,5.2rem) 1rem }
.nk-decision[data-nk-genre="comprehension"] .nk-further{ color:var(--mut)!important; font-size:1.06rem!important; line-height:1.9!important; border-top:1px solid var(--rule); padding-top:clamp(1.8rem,4vw,2.6rem); margin-top:clamp(2.4rem,5vw,3.4rem)!important }
.nk-decision[data-nk-genre="comprehension"] .nk-further a{ color:var(--soft); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; transition:text-decoration-color var(--nt-transition) }
.nk-decision[data-nk-genre="comprehension"] .nk-further a:hover{ text-decoration-color:var(--soft) }
@media (max-width:640px){
.nk-decision .nk-pullquote{ padding-block:clamp(3.4rem,12vw,5rem) }
.nk-decision .nk-pullquote__q{ font-size:clamp(1.55rem,7vw,2.1rem); line-height:1.2 }
.nk-decision[data-nk-genre="comprehension"] .nk-lede{ font-size:clamp(1.3rem,6vw,1.7rem)!important }
}
/* Compréhension : photos PLEINE LARGEUR — même rendu que Diagnostic / Prévention / Pratiques
(on retire le confinement : les images utilisent la DA standard .nk-editorial-image, plein-cadre) */
/* ============================================================================
GENRE BOFU / MONEY (08) — landing d'achat déguisée. Extension du golden FOU.
MÊME DA gelée (.nk-decision : anthracite, serif, rail, kickers gris). Réutilise
hero / summary / criterion / topics / faq. Ajoute 2 briques money propres :
.nk-money — comparatif de produits affiliés (cartes empilées, PAS un brut)
.nk-verdict — verdict d'achat FEUTRÉ + 1 seule sortie (CTA discret)
Or = whisper assumé sur le SEUL CTA money (doctrine « money feutré »), jamais ailleurs.
SCOPE STRICT [data-nk-genre="bofu"] → n'affecte AUCUN autre genre tant qu'aucun
post n'a data-nk-genre="bofu". Additif pur. Golden cible : 1612 (cache-litière).
============================================================================ */
.nk-decision[data-nk-genre="bofu"]{
/* alias money feutré = or mat (#c9a878) en registre discret — littéraux (0 dépendance color-mix) */
--gold-line:rgba(124,96,56,.42); --gold-fill:rgba(124,96,56,.10); --gold-bright:#B8955F;
}
/* -------- COMPARATIF PRODUITS (= .nk-money) -------- */
.nk-decision[data-nk-genre="bofu"] .nk-money{ background:var(--bg); padding-block:clamp(2.6rem,5.5vw,4rem) }
.nk-decision[data-nk-genre="bofu"] .nk-money__title{ margin-inline:var(--rail); font-size:var(--nt-h2); line-height:1.1; color:var(--ink) }
.nk-decision[data-nk-genre="bofu"] .nk-money__sub{ margin-inline:var(--rail); margin-top:1rem; max-width:40rem; color:var(--mut); font-style:italic; font-size:1.08rem }
.nk-decision[data-nk-genre="bofu"] .nk-money__list{ list-style:none; padding:0; margin-inline:var(--rail); margin-top:clamp(2.4rem,5vw,3.4rem);
display:flex; flex-direction:column; gap:0; max-width:44rem }
/* une ligne produit = carte éditoriale sobre : filet haut, 2 colonnes (corps | CTA), pas de panneau/ombre */
.nk-decision[data-nk-genre="bofu"] .nk-product{ position:relative; margin:0; padding:clamp(1.6rem,3.4vw,2.4rem) 0;
border-top:1px solid var(--rule); display:grid; grid-template-columns:1fr auto; gap:clamp(1rem,2.5vw,2.2rem); align-items:center }
.nk-decision[data-nk-genre="bofu"] .nk-product:last-child{ border-bottom:1px solid var(--rule) }
.nk-decision[data-nk-genre="bofu"] .nk-product__body{ min-width:0 }
/* flag = aparté éditorial italique muted (comme .nk-cmp__flag) — PAS d'étiquette petites-caps */
.nk-decision[data-nk-genre="bofu"] .nk-product__flag{ font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--mut); margin:0 0 .5rem }
.nk-decision[data-nk-genre="bofu"] .nk-product__name{ font-size:clamp(1.3rem,3vw,1.7rem); color:var(--ink); letter-spacing: var(--nt-tracking-heading); line-height:1.08; margin:0 }
/* meta = fiche clé/valeur ALIGNÉE (colonne label fixe → les valeurs s'alignent, 0 césure de label) */
.nk-decision[data-nk-genre="bofu"] .nk-product__meta{ margin:1.05rem 0 0; display:flex; flex-direction:column; gap:.5rem }
.nk-decision[data-nk-genre="bofu"] .nk-product__meta div{ display:grid; grid-template-columns:6rem 1fr; gap:.1rem .9rem; align-items:baseline }
.nk-decision[data-nk-genre="bofu"] .nk-product__meta dt{ color:var(--faint); font-style:italic; font-size:.9rem; margin:0; white-space:nowrap }
.nk-decision[data-nk-genre="bofu"] .nk-product__meta dd{ min-width:0; color:var(--soft); font-size:1rem; line-height:1.45; margin:0 }
.nk-decision[data-nk-genre="bofu"] .nk-product__blurb{ color:var(--mut); font-size:1.04rem; line-height:1.55; max-width:44ch; margin:.9rem 0 0 }
.nk-decision[data-nk-genre="bofu"] .nk-product__act{ flex:none }
/* lauréat = whisper or FEUTRÉ : flag doré + fin liseré gauche, aucun panneau tape-à-l'œil */
.nk-decision[data-nk-genre="bofu"] .nk-product--pick{ padding-inline-start:clamp(1.1rem,2.6vw,1.7rem); box-shadow:inset 3px 0 0 var(--gold);
background:linear-gradient(90deg, var(--gold-fill) 0%, transparent 42%) }
.nk-decision[data-nk-genre="bofu"] .nk-product--pick .nk-product__flag{ color:var(--gold); font-style:italic }
/* CTA affilié = bouton FEUTRÉ (liseré or discret, remplissage au survol seulement).
Ancêtre .nk-product__act → spécificité (0,4,0) qui BAT le reset global des liens affiliés
.entry-content a[href*=nooktails-21] (0,3,2) qui écrasait padding/display/soulignement.
0 !important (doctrine) : on gagne à la spécificité, pas à la rustine. */
.nk-decision[data-nk-genre="bofu"] .nk-product__act .nk-product__cta{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; white-space:nowrap;
min-height:44px; box-sizing:border-box; padding:.72rem 1.4rem; line-height:1.15;
font-family:var(--serif); font-stretch:normal; font-variation-settings:normal; font-size:1.02rem; font-weight:500; letter-spacing:.01em; color:var(--gold);
background:transparent; border:1px solid var(--gold-line); border-radius:0; text-decoration:none;
transition:background .3s,border-color .3s,color .3s }
.nk-decision[data-nk-genre="bofu"] .nk-product__act .nk-product__cta::after{ content:"→"; font-size:.9em; color:inherit; transition:transform .3s }
.nk-decision[data-nk-genre="bofu"] .nk-product__act .nk-product__cta:hover{ background:var(--gold-fill); border-color:var(--gold); color:var(--gold-bright) }
.nk-decision[data-nk-genre="bofu"] .nk-product__act .nk-product__cta:hover::after{ transform:translateX(.2em) }
.nk-decision[data-nk-genre="bofu"] .nk-money__note{ margin-inline:var(--rail); margin-top:clamp(1.4rem,3vw,2rem); max-width:40rem; color:var(--faint); font-style:italic; font-size:.92rem; line-height:1.55 }
.nk-decision[data-nk-genre="bofu"] .nk-money__note a{ color:var(--soft); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px }
/* -------- VERDICT MONEY FEUTRÉ (= .nk-verdict) -------- */
.nk-decision[data-nk-genre="bofu"] .nk-verdict{ background:var(--deep); padding-block:clamp(2.6rem,5.5vw,4rem) }
.nk-decision[data-nk-genre="bofu"] .nk-verdict__label{ margin-inline:var(--rail); color:var(--faint); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-block:0 1.4rem }
.nk-decision[data-nk-genre="bofu"] .nk-verdict__body{ margin-inline:var(--rail); max-width:40rem; color:var(--soft); font-size:1.18rem; line-height:1.6 }
.nk-decision[data-nk-genre="bofu"] .nk-verdict__body p{ margin:0 0 1rem }
.nk-decision[data-nk-genre="bofu"] .nk-verdict__body p:last-child{ margin-bottom:0 }
.nk-decision[data-nk-genre="bofu"] .nk-verdict__body strong{ color:var(--ink); font-weight:600 }
.nk-decision[data-nk-genre="bofu"] .nk-verdict__act{ margin-inline:var(--rail); margin-top:clamp(1.8rem,3.6vw,2.6rem) }
/* verdict CTA = sortie money UNIQUE, un peu plus présente (48px) mais toujours feutrée.
Même parade de spécificité via .nk-verdict__act pour battre le reset affilié. */
.nk-decision[data-nk-genre="bofu"] .nk-verdict__act .nk-verdict__cta{ display:inline-flex; align-items:center; justify-content:center; gap:.55em; white-space:nowrap;
min-height:48px; box-sizing:border-box; padding:.9rem 1.75rem; line-height:1.15;
font-family:var(--serif); font-stretch:normal; font-variation-settings:normal; font-size:1.08rem; font-weight:500; letter-spacing:.01em; color:var(--gold);
background:transparent; border:1px solid var(--gold-line); border-radius:0; text-decoration:none;
transition:background .3s,border-color .3s,color .3s }
.nk-decision[data-nk-genre="bofu"] .nk-verdict__act .nk-verdict__cta::after{ content:"→"; font-size:.9em; transition:transform .3s }
.nk-decision[data-nk-genre="bofu"] .nk-verdict__act .nk-verdict__cta:hover{ background:var(--gold-fill); border-color:var(--gold); color:var(--gold-bright) }
.nk-decision[data-nk-genre="bofu"] .nk-verdict__act .nk-verdict__cta:hover::after{ transform:translateX(.2em) }
/* ── CTA affilié inline (guides + bofu hors CTA dédiés) = CTA money PREMIUM, parité verdict ──
Le jaune/or legacy (02-components/03-layout) est scopé HORS .nk-decision à la source.
Élévation premium (18/07) : bouton compact largeur=contenu, une ligne, remplissage or
FEUTRÉ progressif au survol, liseré qui s'affine, et surtout la MÊME flèche TRAILING qui
glisse que le CTA verdict. Convention de contenu : le libellé est authoré « → Voir … sur
Amazon » (flèche EN TÊTE) ; on neutralise cette flèche baked-in via ::first-letter{font-size:0}
et on la re-pose en ::after animée → cohérence totale avec .nk-verdict__cta. Audit live 18/07 :
100 % des occurrences (4, page 570) commencent par « → » → neutralisation sûre. 0 !important. */
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta){
display:inline-flex; align-items:center; justify-content:flex-start; vertical-align:middle;
margin:.5rem 0; min-height:44px; box-sizing:border-box; max-width:100%;
padding:.46rem 1.1rem; line-height:1.15;
color:var(--gold); font-family:var(--serif); font-stretch:normal; font-variation-settings:normal;
font-weight:500; font-size:1.02rem; letter-spacing:.012em;
text-transform:none; text-decoration:none; white-space:normal;
background:rgba(124,96,56,.04); border:1px solid var(--gold-line, rgba(124,96,56,.42)); border-radius:0;
-webkit-tap-highlight-color:transparent;
transition:background .35s ease, border-color .35s ease, color .35s ease; }
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta) strong{ color:inherit; font-weight:500 }
/* flèche baked-in en tête de libellé neutralisée (l'espace résiduel se collapse : strong = flex-item/block) */
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta) strong::first-letter{ font-size:0 }
/* flèche re-posée EN LIGNE juste après le libellé (inline-block → suit le dernier mot même en wrap
mobile, pas de flèche « flottée » à droite = plus de bloc-barre) + glissement au survol (parité verdict) */
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta) strong::after{ content:"→"; display:inline-block; margin-left:.5em; font-size:.92em; color:inherit; transition:transform .35s cubic-bezier(.2,.7,.2,1) }
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta):hover{ background:var(--gold-fill, rgba(124,96,56,.10)); border-color:var(--gold); color:var(--gold-bright, #B8955F) }
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta):hover strong::after{ transform:translateX(.28em) }
/* -------- responsive : la ligne produit s'empile (CTA sous le corps), 0 scroll horizontal -------- */
@media (max-width:640px){
.nk-decision[data-nk-genre="bofu"] .nk-product{ grid-template-columns:1fr; gap:1.3rem }
.nk-decision[data-nk-genre="bofu"] .nk-product__act{ justify-self:start }
.nk-decision[data-nk-genre="bofu"] .nk-product__cta,
.nk-decision[data-nk-genre="bofu"] .nk-verdict__cta{ min-height:44px } /* cible tactile ≥44px (doctrine conversion) */
}
@media (prefers-reduced-motion:reduce){ .nk-decision[data-nk-genre="bofu"] *{ transition:none!important } }
/* ============================================================================
BOFU ENRICHISSEMENT (2026-07-18) — composants additifs money. Scope strict
[data-nk-genre="bofu"] (0 régression autres genres). Or feutré (whisper), 0 emoji,
0 numérotation. Repères = filet doré + typo. Additif pur.
.nk-updated — strip fraîcheur en tête
.nk-matrix — matrice comparative ultra-synthétique (table scannable, scroll mobile)
.nk-score — Score Nooktails (5 axes /10, barres au filet doré) dans chaque produit
.nk-verdict__note — micro-conseil (garde-fou d'achat) avant le CTA verdict
============================================================================ */
/* -------- NOTE DE MISE À JOUR (strip discret) -------- */
.nk-decision[data-nk-genre="bofu"] .nk-updated{
margin-inline:var(--rail); margin-block:0 clamp(1.5rem,3.4vw,2.3rem);
display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
font-size:.88rem; line-height:1.5; color:var(--faint); font-style:italic }
.nk-decision[data-nk-genre="bofu"] .nk-updated__label{
font-style:normal; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
color:var(--gold); padding:.3em .72em; border:1px solid var(--gold-line); border-radius:0; white-space:nowrap }
.nk-decision[data-nk-genre="bofu"] .nk-updated__text{ color:var(--faint) }
/* -------- MATRICE COMPARATIVE ULTRA-SYNTHÉTIQUE (.nk-matrix) -------- */
.nk-decision[data-nk-genre="bofu"] .nk-matrix{ background:var(--deep); padding-block:clamp(2.2rem,4.6vw,3.4rem) }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__title{ margin-inline:var(--rail); font-size:var(--nt-h2); line-height:1.1; color:var(--ink) }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__sub{ margin-inline:var(--rail); margin-top:.85rem; max-width:40rem; color:var(--mut); font-style:italic; font-size:1.02rem }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__scroll{ margin-inline:var(--rail); margin-top:clamp(1.6rem,3.5vw,2.4rem); max-width:52rem; overflow-x:auto; -webkit-overflow-scrolling:touch }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__scroll:focus-visible{ outline:2px solid var(--ink); outline-offset:3px }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table{ width:100%; border-collapse:collapse; min-width:33rem; font-size:.98rem }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table th,
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table td{ text-align:left; padding:.85rem 1.1rem .85rem 0; border-bottom:1px solid var(--rule); vertical-align:baseline }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table thead th{ font-weight:600; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); white-space:nowrap; padding-bottom:.75rem }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table thead th:first-child{ min-width:10.5rem }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__prod{ font-family:var(--serif); font-weight:400; color:var(--ink) }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__prod a{ color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; -webkit-tap-highlight-color:transparent; transition:border-color .3s,color .3s }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__prod a:hover,
.nk-decision[data-nk-genre="bofu"] .nk-matrix__prod a:active,
.nk-decision[data-nk-genre="bofu"] .nk-matrix__prod a:focus{ color:var(--gold-bright); border-bottom-color:var(--gold-line); outline:none }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__prod a:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-bottom-color:transparent }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__cell{ color:var(--soft) }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__flag{ display:block; margin-top:.28rem; font-family:var(--serif); font-style:italic; font-size:.82rem; color:var(--gold) }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__row--pick th,
.nk-decision[data-nk-genre="bofu"] .nk-matrix__row--pick td{ background:linear-gradient(90deg,var(--gold-fill) 0%, transparent 62%) }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__row--pick .nk-matrix__prod{ box-shadow:inset 3px 0 0 var(--gold); padding-left:.9rem }
/* -------- SCORE NOOKTAILS (.nk-score) — dans chaque produit -------- */
.nk-decision[data-nk-genre="bofu"] .nk-score{ margin-top:1.35rem; padding-top:1.2rem; border-top:1px solid var(--rule); max-width:25rem }
.nk-decision[data-nk-genre="bofu"] .nk-score__head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.95rem }
.nk-decision[data-nk-genre="bofu"] .nk-score__label{ margin:0; font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600; color:var(--faint) }
.nk-decision[data-nk-genre="bofu"] .nk-score__total{ margin:0; font-family:var(--serif); line-height:1; white-space:nowrap; display:flex; align-items:baseline; gap:.15em }
.nk-decision[data-nk-genre="bofu"] .nk-score__total-val{ font-size:1.7rem; color:var(--gold) }
.nk-decision[data-nk-genre="bofu"] .nk-score__total-max{ font-size:.9rem; color:var(--faint) }
.nk-decision[data-nk-genre="bofu"] .nk-score__axes{ margin:0; display:flex; flex-direction:column; gap:.62rem }
.nk-decision[data-nk-genre="bofu"] .nk-score__axis{ display:grid; grid-template-columns:minmax(6.5rem,auto) 1fr; align-items:center; gap:.9rem }
.nk-decision[data-nk-genre="bofu"] .nk-score__axis-label{ margin:0; font-size:.88rem; color:var(--soft); line-height:1.3 }
.nk-decision[data-nk-genre="bofu"] .nk-score__axis-val{ margin:0; display:flex; align-items:center; gap:.75rem }
.nk-decision[data-nk-genre="bofu"] .nk-score__bar{ position:relative; flex:1; height:3px; background:var(--rule); overflow:hidden }
.nk-decision[data-nk-genre="bofu"] .nk-score__fill{ position:absolute; inset:0 auto 0 0; height:100%; background:linear-gradient(90deg,var(--gold-line),var(--gold)) }
.nk-decision[data-nk-genre="bofu"] .nk-score__num{ font-family:var(--serif); font-size:.96rem; color:var(--ink); min-width:1.7ch; text-align:right }
/* -------- MICRO-CONSEIL AVANT CTA VERDICT (.nk-verdict__note) -------- */
.nk-decision[data-nk-genre="bofu"] .nk-verdict__note{ margin-inline:var(--rail); margin-top:clamp(1.5rem,3vw,2.1rem); margin-bottom:0; max-width:40rem;
padding:.9rem 1.15rem; border:1px solid var(--gold-line); border-left-width:3px; color:var(--soft); font-size:1rem; line-height:1.55; font-style:italic }
/* -------- responsive composants BOFU (mobile/tablette : 0 débordement, cibles ≥44px) -------- */
@media (max-width:640px){
.nk-decision[data-nk-genre="bofu"] .nk-score{ max-width:none }
.nk-decision[data-nk-genre="bofu"] .nk-score__axis{ grid-template-columns:minmax(5.5rem,42%) 1fr; gap:.7rem }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table{ font-size:.94rem }
}
/* ============================================================================
FIX ÉTATS CLIC/FOCUS + RESPONSIVE des CTA affiliés inline feutrés (2026-07-18).
Scope .nk-decision GLOBAL (guides comme 570 + bofu) — additif, même sélecteur que
le CTA feutré posé en f1ad9d7. Au tap/clic : plus de boîte claire native (tell legacy),
on réutilise le look :hover feutré. A11y clavier : :focus-visible = liseré or discret.
0 !important : on gagne à la spécificité + ordre (règle plus tardive, spécificité égale).
============================================================================ */
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta){
-webkit-tap-highlight-color:transparent; white-space:normal }
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta):active,
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta):focus{
background:var(--gold-fill, rgba(124,96,56,.10)); border-color:var(--gold); color:var(--gold-bright, #B8955F); outline:none }
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta):focus strong::after,
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta):active strong::after{ transform:translateX(.28em) }
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta):focus-visible{
outline:2px solid var(--gold); outline-offset:3px }
/* a11y mouvement : coupe le glissement de flèche + transitions sur ces CTA inline (scope global guides+bofu) */
@media (prefers-reduced-motion:reduce){
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta),
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta) strong::after{ transition:none }
}
/* même hygiène focus/active on-brand pour les 2 CTA money dédiés (produit + verdict) */
.nk-decision[data-nk-genre="bofu"] .nk-product__act .nk-product__cta,
.nk-decision[data-nk-genre="bofu"] .nk-verdict__act .nk-verdict__cta{ -webkit-tap-highlight-color:transparent }
.nk-decision[data-nk-genre="bofu"] .nk-product__act .nk-product__cta:active,
.nk-decision[data-nk-genre="bofu"] .nk-product__act .nk-product__cta:focus,
.nk-decision[data-nk-genre="bofu"] .nk-verdict__act .nk-verdict__cta:active,
.nk-decision[data-nk-genre="bofu"] .nk-verdict__act .nk-verdict__cta:focus{
background:var(--gold-fill); border-color:var(--gold); color:var(--gold-bright); outline:none }
.nk-decision[data-nk-genre="bofu"] .nk-product__act .nk-product__cta:focus-visible,
.nk-decision[data-nk-genre="bofu"] .nk-verdict__act .nk-verdict__cta:focus-visible{
outline:2px solid var(--gold); outline-offset:2px }
@media (max-width:640px){
/* CTA affiliés inline : compacts (largeur = contenu), alignés au fil du texte, wrap gracieux du libellé long, 0 débordement */
.nk-decision a[href*="tag=nooktails-21"]:has(strong):not(.nk-product__cta):not(.nk-verdict__cta){
display:inline-flex; width:auto; max-width:100%; box-sizing:border-box; text-align:left; white-space:normal }
/* CTA money dédiés : compacts, largeur = contenu, alignés sur le rail (plus de bloc pleine largeur), wrap gracieux, cible ≥44px (posée plus haut) */
.nk-decision[data-nk-genre="bofu"] .nk-product__act .nk-product__cta,
.nk-decision[data-nk-genre="bofu"] .nk-verdict__act .nk-verdict__cta{ width:auto; max-width:100%; box-sizing:border-box; white-space:normal }
}
/* ============================================================================
BOFU · TABLEAUX PREMIUM + RESPONSIVE (2026-07-18, webdesigner/CRO)
Raffinement des 2 « tableaux » money : matrice comparative (.nk-matrix__table)
& comparatif produits (.nk-product/.nk-money) + le Score. Scope STRICT
[data-nk-genre="bofu"] (0 régression autre genre). 0 !important (on gagne à la
spécificité + à l'ordre), 0 emoji, or feutré.
Défauts MESURÉS live 18/07 (887 griffoirs · 882 fontaines · 1612 litière) :
1. chiffres non tabulaires (font-variant-numeric:normal) → notes « 4,7 ★ » &
prix « ~48 € » à chasse variable, colonnes qui « dansent ».
2. matrice = grille « Excel » : le thème (Kadence) pose border:1px sur TOUS les
côtés des cellules → filets verticaux parasites (tell SaaS). Le design voulu
n'a que le filet BAS.
3. matrice mobile : scroll-x propre DANS le conteneur (jamais la page) MAIS la
colonne Produit part au défilement → on perd l'identité de la ligne ; la
colonne décision (Note) est hors-champ.
4. lauréat : dégradé or répété PAR cellule = effet « stores vénitiens ».
============================================================================ */
/* 1 · Chiffres tabulaires : notes / prix / scores s'alignent (glyphes à chasse fixe). */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__cell,
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table td,
.nk-decision[data-nk-genre="bofu"] .nk-product__meta dd,
.nk-decision[data-nk-genre="bofu"] .nk-score__total,
.nk-decision[data-nk-genre="bofu"] .nk-score__num{ font-variant-numeric:tabular-nums }
/* 2 · Matrice = grille ÉDITORIALE : on neutralise les filets verticaux + haut hérités
du thème (on ne garde que le filet BAS déjà défini plus haut = rythme de lignes propre).
border-collapse:separate + border-spacing:0 est REQUIS : un en collapse casse
position:sticky sur th/td (Chrome). overflow:visible : le ne devient pas son
propre conteneur de scroll (sinon la 1re colonne sticky ne s'accroche pas au wrapper). */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table{ border-collapse:separate; border-spacing:0; overflow:visible }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table th,
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table td{ border-top:0; border-inline:0 }
/* 3 · 1re colonne (Produit) STICKY → la ligne reste identifiable pendant le scroll-x
mobile ; cellule opaque (var(--deep)) pour que les colonnes glissent DESSOUS + fin
filet vertical droit pour la détacher. Le scroll reste dans .nk-matrix__scroll (jamais
la page) ; la colonne partiellement coupée à droite sert d'affordance de défilement. */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table thead th:first-child,
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table tbody tr > :first-child{
position:sticky; left:0; z-index:2; background:var(--deep); box-shadow:inset -1px 0 0 var(--rule) }
/* 4 · Lauréat : bandeau or FEUTRÉ UNIFORME (fin de l'effet « stores vénitiens » par
cellule) ; la cellule Produit sticky reste opaque (règle 3) + reçoit le liseré or.
Sélecteur volontairement plus spécifique (0,5,1) pour battre le sticky (0,4,2). */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__row--pick th,
.nk-decision[data-nk-genre="bofu"] .nk-matrix__row--pick td{ background:var(--gold-fill) }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table tbody .nk-matrix__row--pick > :first-child{
box-shadow:inset 3px 0 0 var(--gold), inset -1px 0 0 var(--rule) }
/* 5 · Desktop (pointeur fin) : survol de ligne = repère de lecture discret sur table large. */
@media (hover:hover){
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table tbody tr:hover > :not(:first-child){ background:var(--gold-fill) }
}
/* ============================================================================
BOFU · MATRICE V3 — REFLOW MOBILE EN CARTES (2026-07-18, webdesigner/CRO)
PROBLÈME CONVERSION mesuré @412px (live 888/882/887) : la matrice comparative
est plus large que l'écran (table min-width 528px), donc .nk-matrix__scroll
déborde (scrollW ~574 > clientW ~363) et la DERNIÈRE colonne — la colonne
décision (Note/avis) — part HORS-CHAMP à droite : il faut scroller à droite pour
la lire. Piège « scroll pour décider » inacceptable sur une money page.
V3 : sous 700px la matrice ABANDONNE la table large et se réagence, en CSS pur
(même HTML), en PILE DE CARTES verticales → 0 scroll horizontal, tout visible en
lecture naturelle. Chaque carte = une entrée de shortlist « en un coup d'œil » :
nom = ancre tappable (≥44px) qui saute à la fiche complète + CTA (.nk-product),
critères en liste éditoriale filetée, lauréat au filet or feutré (fond plat, pas
d'aplat criard). Les fiches .nk-product (déjà empilées, CTA visible) restent la
revue détaillée. Scope STRICT [data-nk-genre="bofu"]. 0 !important, 100% tokens.
Desktop (≥701px) inchangé : la table raffinée V2 tient sans scroll (matrice sans
CTA), on ne la touche pas.
NOTE (à valider hors ce run — markup shortcode) : pour un libellé explicite devant
chaque valeur (« Odeurs : Excellentes »), ajouter data-label="" sur chaque
| dans nooktails-pillar-shortcodes.php (source `cols`
déjà parsée) ; la carte lirait alors .nk-matrix__cell::before{content:attr(data-label)…}.
Sans lui, les valeurs restent auto-descriptives (les cols sont authorées ainsi) et
la carte reste lisible ; le libellé serait un raffinement, pas un prérequis.
============================================================================ */
@media (max-width:700px){
/* le conteneur ne scrolle plus : fin du piège « scroll pour voir la décision » */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__scroll{ overflow:visible; -webkit-overflow-scrolling:auto; margin-top:clamp(1.5rem,4vw,2.2rem) }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__scroll:focus-visible{ outline:none }
/* la table se dé-tableise en blocs (mêmes éléments, réagencés) */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table{ display:block; min-width:0; width:100% }
/* en-têtes de colonnes retirés du flux visuel (restent dans l'ordre DOM = lisibles AT/clavier) */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table thead{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0; white-space:nowrap }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__table tbody{ display:flex; flex-direction:column; gap:clamp(.85rem,2.6vw,1.2rem) }
/* une ligne = une carte autonome */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__row{ display:block; border:1px solid var(--rule);
padding:clamp(1.15rem,3.6vw,1.5rem) clamp(1.05rem,3.4vw,1.35rem) }
/* neutralise l'héritage desktop (sticky opaque, filets de cellule, ombres, fonds par cellule) */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__row > th,
.nk-decision[data-nk-genre="bofu"] .nk-matrix__row > td{ display:block; position:static; left:auto; z-index:auto;
background:transparent; box-shadow:none; border:0; padding:0; vertical-align:baseline }
/* nom produit = titre de carte + ancre tappable vers la fiche (cible ≥44px) ; ↓ = saute plus bas */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__prod{ font-size:1.24rem; line-height:1.14; color:var(--ink); margin-bottom:.55rem }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__prod a{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink); border-bottom:1px solid var(--gold-line) }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__prod a::after{ content:"\2193"; margin-left:.5em; font-size:.72em; color:var(--gold); transition:transform .3s }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__prod a:hover::after,
.nk-decision[data-nk-genre="bofu"] .nk-matrix__prod a:focus::after{ transform:translateY(.15em) }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__flag{ display:block; margin:.1rem 0 0; font-size:.92rem }
/* critères = liste éditoriale verticale, filet fin entre chaque (rythme, pas de grille Excel) */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__cell{ display:block; margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--rule);
color:var(--soft); font-size:1rem; line-height:1.4 }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__cell:first-of-type{ margin-top:.85rem }
/* libellé de colonne explicite au-dessus de chaque valeur (carte mobile) — ex. « Odeurs : Excellentes » */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__cell[data-label]::before{ content:attr(data-label); display:block; font-family:var(--nt-font-ui); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:.2rem }
/* lauréat : whisper or (filet gauche + fond feutré UNIFORME, aligné sur le desktop V2), 0 aplat criard */
.nk-decision[data-nk-genre="bofu"] .nk-matrix__row--pick{ border-color:var(--gold-line); box-shadow:inset 3px 0 0 var(--gold); background:var(--gold-fill) }
.nk-decision[data-nk-genre="bofu"] .nk-matrix__row--pick .nk-matrix__prod{ color:var(--ink) }
}
/* ============================================================================
BOFU — PANNEAU CLAIR TRANSACTIONNEL (pilote 23/07) — additif pur, toggle DATA
--------------------------------------------------------------------------
Hypothèse testée : le noir premium reste le socle de marque (hero/summary/
topics/faq inchangés, 0 rupture), mais les 3 blocs où se joue l'achat
(comparateur .nk-money, matrice .nk-matrix, verdict .nk-verdict) passent
sur une surface claire — repère e-commerce localisé, PAS un blanc plein
écran. CTA en aplat or (vs filet feutré ailleurs) car le job de ces blocs
= faire cliquer. Recommandation web-designer (23/07) : « blanchir la ZONE,
pas la page ». Activation = attribut data-nk-panel="light" posé par le
CONTENU (shortcode nooktails_decision panel="light"), jamais par un
sélecteur d'ID de page (zéro hardcode). Pilote : post 896 (litière
autonettoyante). Ne touche AUCUNE autre page tant que l'attribut n'est
pas posé. Couleur = blanc cassé neutre, 0 crème/beige (palette bannie).
============================================================================ */
.nk-decision[data-nk-panel="light"][data-nk-genre="bofu"] .nk-money,
.nk-decision[data-nk-panel="light"][data-nk-genre="bofu"] .nk-matrix,
.nk-decision[data-nk-panel="light"][data-nk-genre="bofu"] .nk-verdict{
--ink:#16161A; --soft:#3A3A3F; --mut:#5C5C62; --faint:#7A7A80;
--bg:#FAFAF8; --deep:#FAFAF8; --rule:rgba(22,22,26,.12);
/* --gold-fill NON redéfini ici à dessein : sur fond blanc, l'or à 10-18% d'opacité
rend un APLAT BEIGE/CRÈME plein (proche du #F2E8D5 banni) au lieu du "glow"
discret qu'il produit sur fond noir. Le lauréat reste marqué par le SEUL filet
or (box-shadow inset, déjà en place) + le label — jamais par un remplissage. */
--gold-bright:#8a6d3f;
/* couture noir→clair (23/07, retour visuel user : coupure trop nette) : filet or fin
en tête + respiration supplémentaire, MÊME langage que le reste du site (filet, pas
ombre/radius/gradient déco). border-top plutôt que box-shadow : reste net à 100% zoom
et n'ajoute aucune couche de peinture supplémentaire. */
border-top:1px solid var(--gold-line, rgba(124,96,56,.42));
padding-top:clamp(2.4rem,5vw,3.6rem);
}
/* ── Override "panneau clair" retiré 24/07 (révision 2) ──
Le raisonnement d'origine (23/07) : "sur fond blanc l'or délavé, donc le CTA
doit passer en aplat anthracite pour rester décisif" — posé quand le panneau
clair était une ÎLE exceptionnelle dans un site sombre. Avec la révision 2,
TOUT le site est clair : le bouton en aplat #16161A (obsolète : ancienne
valeur pré-unification) ne contraste plus rien de spécial, il contredit
simplement le contrat filet-laiton appliqué partout ailleurs sur la même
page (budget de contraste : l'accent reste rare, jamais un aplat CTA).
Le panneau clair retombe donc sur le CTA de base (.nk-product__cta /
.nk-verdict__cta, filet transparent) — plus de règle à écraser ici. */
/* Lauréat : filet or SEUL (déjà en place), le LABEL texte passe en anthracite (or-sur-blanc
illisible ~2:1 contraste). Écrase aussi les 3 fonds de remplissage du golden BOFU (desktop
+ 2 breakpoints matrice) qui consomment var(--gold-fill), non redéfini dans ce scope. */
.nk-decision[data-nk-panel="light"][data-nk-genre="bofu"] .nk-product--pick,
.nk-decision[data-nk-panel="light"][data-nk-genre="bofu"] .nk-matrix__row--pick,
.nk-decision[data-nk-panel="light"][data-nk-genre="bofu"] .nk-matrix__row--pick th,
.nk-decision[data-nk-panel="light"][data-nk-genre="bofu"] .nk-matrix__row--pick td{
background:none;
}
.nk-decision[data-nk-panel="light"][data-nk-genre="bofu"] .nk-product--pick .nk-product__flag,
.nk-decision[data-nk-panel="light"][data-nk-genre="bofu"] .nk-matrix__flag{
color:var(--ink);
}
/* Score Nooktails : 0 dégradé (anti-IA strict) + remplissage plat anthracite (pas or washed-out) */
.nk-decision[data-nk-panel="light"][data-nk-genre="bofu"] .nk-score__fill{
background:var(--ink);
}
.nk-decision[data-nk-panel="light"][data-nk-genre="bofu"] .nk-score__total-val{
color:var(--ink);
}
|