/* ============================================================================= 01-base.css — ÉLÉMENTS DE BASE ----------------------------------------------------------------------------- Styles des éléments HTML nus, CONSOMMANT les tokens (jamais de valeur en dur). ============================================================================= */ /* ============================================================================= BASE SITE-WIDE — TYPOGRAPHIE & COULEUR pilotées par les TOKENS DA ----------------------------------------------------------------------------- SOURCE UNIQUE. Corrige la divergence là où les scopes composant (.nt-scope / .entry-content / .nk-* / .nt-*) N'ATTEIGNENT PAS : home, pages légales, contenu générique, chrome WooCommerce. · corps : Inter → Newsreader (var --nt-font-body) · titres : Cormorant Garamond → Fraunces (var --nt-font-heading) · nav : Geist (conservé) · contrôles : police UI (conservés) Kadence applique SITE-WIDE : body,input,select,textarea { font-family:var(--global-body-font-family) } h1..h6 { font-family:var(--global-heading-font-family) } → il suffit d'ALIGNER ces variables globales sur les tokens DA (bloc chargé APRÈS le :root inline Kadence) pour que TOUTE la base hérite de la DA. Les couleurs Kadence sont DÉJÀ conformes (palette == tokens) : on verrouille. 00-tokens.css reste PURE : ici on ALIGNE les globals, on n'ajoute aucun token. [[nooktails-tokens-file-purity]] ============================================================================= */ /* 1 — Aligner les variables globales Kadence sur les tokens DA (LA correction). Sélecteur `:root:root` = spécificité (0,2,0) > le `:root` (0,1,0) de l'inline Kadence : l'alignement gagne par SPÉCIFICITÉ, indépendamment de l'ordre de chargement (robuste à l'agrégation Autoptimize qui peut déplacer ce bundle avant l'inline Kadence). Ne cible que , aucun effet de bord. */ :root:root { --global-heading-font-family: var(--nt-font-heading); /* Fraunces (était 'Cormorant Garamond') */ --global-body-font-family: var(--nt-font-body); /* Newsreader (était Inter) */ --global-primary-nav-font-family: var(--nt-font-ui); /* Inter (était Geist, fourni UNIQUEMENT par Google Fonts — coupé pour la perf mobile). UI auto-hébergée, 0 fallback système. */ /* Couleurs : déjà identiques aux tokens → verrouillage single-source. ⚠️ NE PAS toucher palette1/2/5/6/10 (OR) = source de --nt-gold (circulaire). */ --global-palette3: var(--nt-text-strong); /* #F1F1F3 */ --global-palette4: var(--nt-text); /* #DBDCE0 */ --global-palette7: var(--nt-bg); /* #16161A */ --global-palette8: var(--nt-surface-1); /* #212228 */ } /* 2 — Filet élément (indépendant de l'ordre des :root). Sélecteurs NUS (spécificité minimale) : tout composant scopé garde la main. */ body { font-family: var(--nt-font-body); } /* Fix historique Fraunces (23-24/07, cf. nooktails-fix-j-deformation-css.md) : cette police variable avait un axe WONK (formes alternatives excentriques, boucle/spirale sur J/f) actif par défaut. Depuis le passage des titres à Literata (24/07 nuit), cette règle est un NO-OP inoffensif — Literata/Newsreader/Inter n'ont pas cet axe, ignoré silencieusement par le moteur de rendu. Conservée en garde-fou (coût nul) si Fraunces revient un jour sur un scope isolé du site — ne pas la supprimer sans vérifier qu'aucun usage résiduel n'en dépend. */ body { font-variation-settings: "WONK" 0; } /* 2bis — FOND DU SITE : SOURCE UNIQUE (fondateur 19/07 « ce noir, une seule règle »). Kadence peint body + #wrapper + #masthead via des littéraux inline du Customizer (#16161A) → ils divergeaient du token. On les branche TOUS sur var(--nt-bg)=#121216 : · `html body` (0,0,2) bat l'inline `body` (0,0,1). · `html body #wrapper.site` / `#masthead.site-header` (0,1,2) battent les #id Kadence (0,1,0). SANS !important. Fond de TOUT le site (home, légales, archives, décision, header, footer) = une seule source. 0 hardcode, 0 îlot plus clair. */ html body, html body #wrapper.site, html body #masthead.site-header, html body .content-bg { background: var(--nt-bg); } /* .content-bg = boîte de contenu BOXED Kadence (pages légales/défaut) : le Customizer y garde #16161A → on la cale sur le token #121216 pour qu'elle soit SEAMLESS avec le body (fin du rectangle plus clair). Décision/guides = unboxed, déjà OK. */ h1, h2, h3, h4, h5, h6 { font-family: var(--nt-font-heading); } /* 3 — Contrôles & chrome interactif gardés en police UI : évite le serif sur boutons/champs quand le corps passe en Newsreader (état inchangé vs avant). Reste surchargeable par les composants (.nt-input, textarea barème, etc.). */ button, .button, input, select, optgroup, textarea, .wp-block-button__link, .kb-button { font-family: var(--nt-font-ui); } /* 4 — ÉCHELLE DE POIDS cohérente site-wide (kill le « gras » parasite). Kadence pose h1..h6{font-weight:600/700} : ça FUIT sur tout titre non scopé (home générique, légales, contenu brut) → titres plus gras que la référence. On pose le poids DA sur les sélecteurs NUS (spéc. minimale) : les composants (.nk-*/.nt-*, spécificité supérieure) gardent leur poids. */ h1 { font-weight: var(--nt-weight-regular); } /* 400 (était 600 Kadence) */ h2, h3, h4, h5, h6 { font-weight: var(--nt-weight-medium); } /* 500 (était 600/700 Kadence) */ /* 5 — ÉCHELLE DE TAILLES du CONTENU GÉNÉRIQUE (prose non-componentisée : pages légales, articles bruts WYSIWYG = titres SANS classe). Aligne H2/H3 sur l'échelle DA FONDATRICE (pillar.css §125 : « H2 max 1.55rem ») = MÊME échelle que le guide de référence (H2 24.8px, H3 20.8px @desktop). Historique : un widget legacy (Custom HTML `custom_html-4`) FORÇAIT en !important tout titre non-décision à clamp(22px,5vw,32px)/clamp(19px,4vw,24px). Ce widget a été TUÉ À LA SOURCE (footer rendu depuis le thème, 2026-07-18 ; vérifié live : 0 occurrence du 32px!important dans le HTML). Le contre-!important qui le battait n'a donc plus lieu d'être : ces règles redeviennent la simple ÉCHELLE DA des titres de prose SANS classe, gouvernée par la seule spécificité (`:not([class])` → (0,2,1) > Kadence h2/h3 (0,0,1)/`.nk-info h2` (0,1,1)) — 0 !important. Exclusion .nk-decision conservée → 0 impact composants nk-*/nt-*. */ .entry-content h2:not([class]):not(:where(.nk-decision *)), .single-content h2:not([class]):not(:where(.nk-decision *)), .wp-block-post-content h2:not([class]):not(:where(.nk-decision *)) { font-size: clamp(1.3rem, 2.6vw, 1.55rem); /* ≤ 24.8px (= guide) — spéc. (0,2,1) > Kadence (0,1,1), 0 !important */ font-weight: var(--nt-weight-medium); /* 500 */ line-height: var(--nt-leading-snug); } .entry-content h3:not([class]):not(:where(.nk-decision *)), .single-content h3:not([class]):not(:where(.nk-decision *)), .wp-block-post-content h3:not([class]):not(:where(.nk-decision *)) { font-size: clamp(1.12rem, 1.9vw, 1.3rem); /* ≤ 20.8px (= guide) — spéc. (0,2,1) > Kadence (0,0,1), 0 !important */ font-weight: var(--nt-weight-medium); /* 500 (kill le 600 Kadence/token) */ line-height: var(--nt-leading-snug); } .nt-scope { color: var(--nt-text); font-family: var(--nt-font-body); font-size: var(--nt-text-base); line-height: var(--nt-leading-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .nt-scope * { box-sizing: border-box; } /* Titres */ .nt-scope h1, .nt-scope h2, .nt-scope h3, .nt-scope .nt-serif { font-family: var(--nt-font-heading); font-weight: var(--nt-weight-medium); letter-spacing: var(--nt-tracking-heading); color: var(--nt-text); } .nt-scope h1 { font-family: var(--nt-font-heading); font-weight: 400; font-size: var(--nt-h1); line-height: 1.12; letter-spacing: var(--nt-tracking-heading); margin: 0 0 var(--nt-space-md); } .nt-scope h2 { font-size: var(--nt-h2); line-height: var(--nt-leading-tight); margin: 0 0 var(--nt-space-sm); } .nt-scope h3 { font-size: var(--nt-h3); line-height: var(--nt-leading-snug); margin: 0 0 var(--nt-space-xs); } /* Paragraphes */ .nt-scope p { color: var(--nt-text-muted); line-height: var(--nt-leading-normal); margin: 0 0 var(--nt-space-sm); } /* Liens */ .nt-scope a { color: var(--nt-gold); text-decoration: none; transition: color var(--nt-transition); } .nt-scope a:hover { color: var(--nt-gold-2); } /* Liens de prose éditoriale (25/07, Famille 1 — grammaire d'interaction unifiée). Consolidé depuis 00-tokens.css : 2 règles contradictoires s'y annulaient (une posait un hover doré via text-decoration-color, l'autre — plus spécifique via :not() — remettait text-decoration:none au repos ET au hover, tuant tout feedback). Contrat retenu : encre neutre + soulignement au repos, or réservé au hover (jamais au focus, cf règle :focus-visible ci-dessous) — même logique que le lien CGV checkout déjà corrigé. Les templates avec un contrat propre déjà validé (.nt-guide, .nk-decision, .nk-info) gardent leur convention, non touchés ici. 25/07 (audit P0 pré-lancement) : `:not(.wc-block-components-button)` ajouté à la liste d'exclusion, même principe que `.button`/`.wp-block-button__link` déjà exclus. Bug trouvé : le bouton "Valider la commande" (WooCommerce Blocks, un rendu à l'intérieur de `.entry-content` sur /panier/ et /commander/) n'a NI classe `.button` NI `.wp-block-button__link` — cette règle (4 classes de spécificité via :not()) battait silencieusement le contrat filet-or dédié du bouton (css/08-shop.css, 3 classes+1 élément) au survol : le bouton passait en fond or ET texte or (`--nt-gold` posé par cette règle), texte totalement invisible. Vérifié en direct (hover réel + capture) avant et après le fix — aucun `!important` nécessaire, la liste d'exclusion existante avait simplement manqué la convention de classe WooCommerce Blocks. */ .entry-content a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button), .wp-block-post-content a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button) { color: var(--nt-text-strong); text-decoration: underline; text-decoration-color: var(--nt-line); text-underline-offset: 3px; transition: color var(--nt-transition), text-decoration-color var(--nt-transition); } .entry-content a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button):hover, .wp-block-post-content a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button):hover { color: var(--nt-gold); text-decoration-color: var(--nt-gold); } .entry-content a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button):focus-visible, .wp-block-post-content a:not(.button):not(.wp-block-button__link):not(.wc-block-components-button):focus-visible { outline: 2px solid var(--nt-text-strong); outline-offset: 2px; } /* Accessibilité — RÈGLE GLOBALE UNIQUE (23/07, révisée 25/07 — grammaire d'interaction Famille 1). Anneau de focus natif du navigateur au clic souris signalé de façon répétée sur plusieurs composants indépendants (loupe recherche, bouton panier, bandeau de confirmation, homepage) — Kadence gère ça via sa classe body `hide-focus-outline` + détection JS clavier/souris, peu fiable sur certains devices/navigateurs. Remplace les patchs composant-par-composant par UNE règle à la source, appliquée à tout le document. 25/07 : couleur repassée d'or à encre neutre — la grammaire d'interaction unifiée réserve l'or au hover uniquement (jamais au focus clavier, doctrine "or RARE" + convention déjà actée sur .nt-guide/.nk-decision). Les overrides locaux gold-focus déjà neutralisés composant par composant (.nk-decision, .nk-info, CGV checkout) restent inchangés — cette règle globale était la seule source encore dorée, elle couvrait tous les liens de prose sans override propre (articles génériques, .nt-guide). */ :focus:not(:focus-visible) { outline: 0; } :focus-visible { outline: 2px solid var(--nt-text-strong); outline-offset: 2px; border-radius: 2px; } /* Images */ .nt-scope img { max-width: 100%; height: auto; display: block; } /* Mouvement réduit */ @media (prefers-reduced-motion: reduce) { .nt-scope *, .nt-scope *::before, .nt-scope *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* ============================================================ MIGRATION 2026-06-23 — Design système Nooktails ============================================================ */ /* Reset balise code */ code { font-family: inherit; background: transparent; padding: 0; font-size: inherit; color: inherit; border: 0; border-radius: 0; } /* ============================================================ TYPOGRAPHIE GLOBALE — Newsreader (contenu) · Inter (UI) ============================================================ */ /* Contenu éditorial → Newsreader */ .entry-content p, .entry-content li, .entry-content td, .entry-content th, .entry-content blockquote, .entry-content .nk-callout-body, .entry-content .nkt-faq__a { font-family: var(--nt-font-body); font-size: 17px; line-height: 1.82; font-weight: 350; letter-spacing: 0.005em; } /* Premier paragraphe — entrée éditoriale renforcée */ .entry-content > p:first-of-type { font-size: 19px; line-height: 1.78; font-weight: 400; } /* Italique éditorial */ .entry-content em, .entry-content blockquote p { font-style: italic; font-weight: 300; } /* H2 — respiration premium */ .entry-content h2, .wp-block-post-content h2 { margin-top: 4rem; } /* H3 — respiration */ .entry-content h3, .wp-block-post-content h3 { margin-top: 2.5rem; } /* Mobile */ @media (max-width: 768px) { .entry-content p, .entry-content li, .entry-content td { font-size: 16px; line-height: 1.78; font-weight: 400; } .entry-content > p:first-of-type { font-size: 17px; } .entry-content h2, .wp-block-post-content h2 { margin-top: 3rem; } } /* Interface → Inter */ .nk-callout-label, .nkt-faq__item summary, .nkt-next-step__title, .nkt-next-step__desc, .nkt-next-step__label, .nkt-rel__t, .nkt-rel__k, .nkt-rel__col a, .nk-hub-nav__title, .nk-hub-nav__desc, .nk-eyebrow, .entry-meta, .posted-on, .byline, .breadcrumb, [class*="breadcrumb"] { font-family: var(--nt-font-ui); } /* ============================================================ CALLOUT PREMIUM — sans fond, bordure or seule ============================================================ */ .nk-callout { background: var(--nt-surface-1); border-left: 3px solid var(--nt-gold); padding: var(--nt-space-md) var(--nt-space-lg); margin: var(--nt-space-xl) 0; border-radius: var(--nt-radius-sm); } .nk-callout-body { font-size: 18px; line-height: 1.78; font-weight: 350; font-style: italic; color: var(--nt-text); } .nk-callout-body strong { font-style: normal; font-weight: 500; color: var(--nt-text); } /* ============================================================ BLOCKQUOTE ÉDITORIAL ============================================================ */ .entry-content blockquote { border-left: 2px solid var(--nt-gold); padding-left: var(--nt-space-lg); margin: var(--nt-space-xl) 0; font-family: var(--nt-font-heading); font-size: clamp(18px, 2vw, 22px); font-weight: var(--nt-weight-regular); font-style: italic; color: var(--nt-text-muted); line-height: var(--nt-leading-snug); } /* ============================================================ SÉLECTION DE TEXTE — surlignage on-brand (fix marque bleue) 2026-07-07 Sans cette règle, le navigateur applique un surlignage bleu par défaut. ============================================================ */ ::selection { background: var(--nt-gold-tint); color: var(--nt-text); } ::-moz-selection { background: var(--nt-gold-tint); color: var(--nt-text); } /* ============================================================ COMPLIANZ — bouton flottant "Gérer le consentement" (fix RGPD) 2026-07-27 Le plugin génère --cmplz-manage-consent-offset: -35px (bug côté plugin, pas un réglage admin), ce qui pousse le bouton persistant sous le viewport (bottom: -35px sur un bouton de 50px de haut). La RGPD promet ce bouton visible sur chaque page (politique de cookies). banner-2-optin.css charge après notre agrégat Autoptimize donc son :root gagne malgré une simple surcharge de variable : on cible le sélecteur exact avec une spécificité supérieure (pas de !important), sans toucher au CSS généré du plugin. ============================================================ */ html #cmplz-manage-consent .cmplz-manage-consent { bottom: var(--nt-space-sm); }