/* =============================================================================
   03-layout.css — CONTENEURS ET GRILLES
   =============================================================================
   .nt-section N'EST PAS défini ici.
   Chaque composant gère son propre padding via son sélecteur scoped.
   ============================================================================= */

.nt-wrap {
  max-width: var(--nt-container);
  margin: 0 auto;
  padding: 0 var(--nt-container-pad);
}

.nt-canvas {
  background: var(--nt-bg);
  color: var(--nt-text);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
}

.nt-section--flush-top  { padding-top: 0; }
.nt-section--flush-bottom { padding-bottom: 0; }

.nt-head {
  max-width: 680px;
  margin: 0 0 clamp(32px, 4vw, 50px);
}
.nt-head h2 {
  font-size: var(--nt-h2);
  line-height: var(--nt-leading-tight);
  margin: 0;
  color: var(--nt-text);
}
.nt-head p {
  color: var(--nt-text-muted);
  font-size: var(--nt-text-base);
  line-height: var(--nt-leading-normal);
  margin: 14px 0 0;
}

.nt-grid { display: grid; gap: var(--nt-gap-lg); }
.nt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nt-grid--4 { grid-template-columns: repeat(4, 1fr); }
.nt-grid--sm { gap: var(--nt-gap-sm); }
.nt-grid--md { gap: var(--nt-gap-md); }

.nt-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nt-space-xl);
  align-items: center;
}
.nt-split--media-first .nt-split__media { order: 0; }

.nook-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
  margin: 0 0 40px;
}

.page-id-19 .nook-page-bc,
.page-id-1469 .nook-page-bc {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.page-id-21 .nook-page-bc {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

@media (max-width: 1000px) {
  .nt-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .nt-grid--3 { grid-template-columns: 1fr; }
  .nt-split { grid-template-columns: 1fr; }
  .nt-split--media-first .nt-split__media { order: -1; }
}
@media (max-width: 560px) {
  .nt-wrap { padding: 0 20px; }
  .nt-grid--2,
  .nt-grid--4 { grid-template-columns: 1fr; }
  .nt-card--row { grid-template-columns: 1fr; }
}
/* ============================================================
   FIX HEADER/HERO — chevauchement breadcrumb+H1 sur featured image (2026-07-07)
   Kadence applique une marge négative (~-69px) sous .article-post-thumbnail,
   qui tire l'entry-header (breadcrumb + H1) par-dessus le bas de l'image.
   On la neutralise globalement → le header se pose proprement SOUS l'image.
   (Sans effet sur les pages où le featured image est masqué.)
   ============================================================ */
.article-post-thumbnail { margin-bottom: 0 !important; }

/* ============================================================
   FIX ALIGNEMENT HEADER — H1/breadcrumb sur la colonne de contenu (2026-07-07)
   Le header était plus large que la prose → H1 décalé ~37px à gauche du texte.
   On aligne le header sur la largeur de la colonne (prose), avec variantes.
   Les pages hub gardent leur header pleine largeur (exclusion).
   ============================================================ */
.entry-header { max-width: var(--nt-prose); margin-inline: auto; }
[data-editorial="selection"]  .entry-header { max-width: var(--nt-prose-wide); }
[data-editorial="comparatif"] .entry-header { max-width: var(--nt-prose-full); }
article.tag-tpl-hub .entry-header { max-width: none; margin-inline: 0; }

/* ============================================================
   HEADER CENTRÉ — famille COMPARATIFS / SÉLECTIONS uniquement (2026-07-08)
   Le texte du header (breadcrumb + H1) était text-align:start (collé à gauche)
   dans une colonne centrée sous une image pleine largeur → ressenti de décalage
   (identique sur 882/1406). Décision user : centrer SEULEMENT la famille
   comparatifs / sélections (pas les guides, hubs, pages, home).
   Crochet = classes de catégorie posées par WP sur <article> (post_class),
   ancêtre de .entry-header. Ne touche que .entry-header (pas .entry-content)
   → corps/intro restent alignés à gauche (lisibilité).
   ============================================================ */
.category-nos-selections .entry-header,
.category-comparatifs-et-tests .entry-header { text-align: center; }
/* H1 + breadcrumb centrés sur TOUTE page à hero centré nt-hub-intro (systématique via :has(),
   remplace l'ad-hoc par-postid). Couvre 571/627/683/710/971/1647/2431. Les hubs (nt-hub-hero,
   tag-tpl-hub) ne matchent pas → inchangés. (2026-07-08) */
body:has(.nt-hub-intro) .entry-header { text-align: center; }

/* ============================================================
   FOND NEUTRE UNIFORME — neutralise le brun résiduel Kadence/plugins (2026-07-07)
   Le fond site/header/footer/menus vient de la palette Kadence (Customizer),
   pas des tokens --nt-* → on force le fond neutre partout (cohérent avec la home).
   ============================================================ */
.sub-menu, nav .sub-menu,
.nook-end,
.sib-form input, .sib-input, [class*="sib-"][class*="-area"], .sib-form-block input {
  background-color: var(--nt-surface-1) !important;
}

/* PALETTE : brun/beige neutralisé À LA SOURCE (Kadence Customizer, 2026-07-17).
   Le bloc html:root{--global-palette*!important} a été SUPPRIMÉ (redondant) :
   Kadence génère désormais palette3/4/6/7/8/9/10 + highlight = valeurs neutres/or.
   Ne PAS réintroduire d'override de --global-palette* ici. */
html [class*="nook-"] {
  --pnl: var(--nt-surface-1) !important;
  --bd: var(--nt-line) !important;
  /* --m pilote les libellés de sous-menu (méga-menu Kadence natif) : --nt-text-faint (2.42:1 sur
     Plâtre) est trop pâle pour du texte de nav lisible — était pensé pour de la légende/déco,
     pas pour un lien cliquable. 24/07 v2, repéré via capture utilisateur (drawer mobile 412px,
     "Chats en appartement" quasi invisible) → --nt-text-muted (4.66:1, AA). */
  --m: var(--nt-text-muted) !important;
  --nf-accent-hover: var(--nt-gold) !important;
  --na-accent-hover: var(--nt-gold) !important;
}
/* Footer nook : neutralisation à la source (2026-07-17), sourcée depuis les tokens
   24/07 — était hardcodé en hex clair-sur-sombre, bloquait la révision 2 (bug trouvé
   en prévisualisation : --nf-text restait #DBDCE0 quel que soit --nt-text). Même
   pattern que le bloc html [class*="nook-"] juste au-dessus. */
html .nook-footer-wrap { --nf-title: var(--nt-text-strong) !important; --nf-text: var(--nt-text) !important; }
html .dropdown-nav-special-toggle { border-color: var(--nt-line) !important; }
/* ---- Affiliés Amazon + boutons CTA : FILET OR golden, uniforme (réécrit 2026-07-18) ----
   L'ancien système posait de l'OR PLEIN (primary) et une PILULE JAUNE #FFD814 (cellules tableau)
   avec !important pour battre un snippet WPCode brun #A8824A désormais MORT (0 sur BOFU live).
   Snippet mort → plus rien à battre : on retire les !important et on gagne à la spécificité
   native (0,4,3)/(0,4,5) qui domine Kadence. Cible = .nk-product__cta (transparent + filet
   or 1px + texte or, radius 0, hover feutré). 0 aplat, 0 jaune, 0 pilule. */
/* Liens texte affiliés (inline dans la prose) + CTA blocs nook → texte or (pas un bouton) */
html body .entry-content a[href*="tag=nooktails-21"]:not([class]):not(:where(.nk-decision *)),
html body .single-content a[href*="tag=nooktails-21"]:not([class]):not(:where(.nk-decision *)),
html body [class*="__eb"] { color: var(--nt-gold); }
/* Boutons "primary" partout (réf. « VOIR LES … SUR AMAZON », .nt-bofu__cta.is-primary sur BOFU/a-propos)
   → filet or transparent, texte or, radius 0. Fini l'aplat or plein. */
html body .entry-content a.nk-btn.nk-btn--primary[href],
html body a.nk-btn.nk-btn--primary,
html body .nk-btn.nk-btn--primary,
html body .nt-bofu__cta.is-primary {
  background: transparent;
  border: 1px solid var(--nt-line-strong);
  color: var(--nt-gold);
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  transition: background .3s var(--nt-ease), border-color .3s var(--nt-ease), color .3s var(--nt-ease);
}
html body .entry-content a.nk-btn.nk-btn--primary[href]:hover,
html body a.nk-btn.nk-btn--primary:hover,
html body .nk-btn.nk-btn--primary:hover,
html body .nt-bofu__cta.is-primary:hover {
  background: var(--nt-gold-soft);
  border-color: var(--nt-gold);
  color: var(--nt-gold);
}
/* Boutons affiliés en cellule de tableau comparatif → filet or (plus de pilule jaune pleine).
   Couvre wp-block-table ET les tableaux design-system .nk-table. */
html body .single .entry-content figure.wp-block-table td a[href*="tag=nooktails-21"],
html body .entry-content .nk-table td a[href*="tag=nooktails-21"],
html body .entry-content table.nk-table td a[href*="tag=nooktails-21"] {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: transparent;
  border: 1px solid var(--nt-line-strong);
  color: var(--nt-gold);
  padding: 6px 18px;
  border-radius: 0;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
  transition: background .3s var(--nt-ease), border-color .3s var(--nt-ease), color .3s var(--nt-ease);
  white-space: nowrap;
}
html body .single .entry-content figure.wp-block-table td a[href*="tag=nooktails-21"]:hover,
html body .entry-content .nk-table td a[href*="tag=nooktails-21"]:hover,
html body .entry-content table.nk-table td a[href*="tag=nooktails-21"]:hover {
  background: var(--nt-gold-soft);
  border-color: var(--nt-gold);
  color: var(--nt-gold);
}

/* Underlines footer (survol/courant) supprimés */
.site-footer-wrap a, .site-footer-wrap .ft-ro-lstyle-normal a, .nook-footer a, #colophon a { text-decoration: none !important; }

/* Complianz : neutre + or, source unique. Préfixe body = bat le snippet WPCode inline (#A8824A/#1c1814). 2026-07-08 */
body #cmplz-cookiebanner-container .cmplz-cookiebanner { background: var(--nt-surface-1) !important; border-color: var(--nt-line) !important; color: var(--nt-text) !important; }
body #cmplz-cookiebanner-container .cmplz-title { color: var(--nt-text-strong) !important; }   /* titre neutre (était or) — dé-dorage fondateur 19/07 : or RARE = 1 seul accent = le bouton Accepter */
body #cmplz-cookiebanner-container .cmplz-body,
body #cmplz-cookiebanner-container .cmplz-message,
body #cmplz-cookiebanner-container p,
body #cmplz-cookiebanner-container label { color: var(--nt-text) !important; }
/* Accepter = filet or (transparent + border or + texte or). 0 aplat.
   Hiérarchie vs Deny (l.suivantes) : border plein or vs border --nt-line discret, + hover feutré gold-soft. */
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept,
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept-all,
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept-marketing { background: transparent !important; border-color: var(--nt-gold) !important; color: var(--nt-gold) !important; }
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover,
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-accept-all:hover { background: var(--nt-gold-soft) !important; }
/* Refuser / préférences / gérer = contour discret, texte NEUTRE (était or → dé-dorage 19/07 : secondaires = gris, jamais or) */
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-deny,
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences,
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences,
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-manage-options { background: transparent !important; border-color: var(--nt-line) !important; color: var(--nt-text) !important; }
/* liens = NEUTRES + soulignés (affordance sans or), survol or */
body #cmplz-cookiebanner-container a,
body #cmplz-cookiebanner-container .cmplz-links a { color: var(--nt-text) !important; text-decoration: underline !important; text-underline-offset: 2px !important; }
body #cmplz-cookiebanner-container a:hover,
body #cmplz-cookiebanner-container .cmplz-links a:hover { color: var(--nt-gold) !important; }
body #cmplz-cookiebanner-container .cmplz-close { color: var(--nt-text) !important; }
/* Onglet flottant "Gérer le consentement" = neutre (était or) */
body .cmplz-manage-consent { background: var(--nt-surface-1) !important; color: var(--nt-text) !important; border: 1px solid var(--nt-line) !important; box-shadow: none !important; font-size: 11px !important; padding: 6px 10px !important; letter-spacing: .03em !important; opacity: .85 !important; line-height: 1.2 !important; }   /* onglet « Gérer le consentement » DISCRET (était trop gros) — 80% trafic mobile, il ne doit pas manger l'écran. Ombre portée générique retirée (doctrine plat/filet). */

/* DIMENSIONS BANDEAU COOKIES — verdict designer 19/07 : un avis cookies = MICROCOPIE légale (13px), pas du corps éditorial (16px) → il dominait l'écran. Carte d'angle compacte desktop/tablette (360/400px), bottom-sheet mobile. « Préférences » = lien texte (pas un 3e bouton) pour dégonfler. */
body #cmplz-cookiebanner-container .cmplz-cookiebanner {
  max-width: 360px !important;
  padding: 18px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  border-radius: 0 !important;
  left: auto !important; right: 16px !important; bottom: 16px !important; top: auto !important;
}
body #cmplz-cookiebanner-container .cmplz-title { font-size: 14px !important; font-weight: 500 !important; margin-bottom: .5rem !important; }
body #cmplz-cookiebanner-container .cmplz-body,
body #cmplz-cookiebanner-container .cmplz-message,
body #cmplz-cookiebanner-container p { font-size: 13px !important; line-height: 1.5 !important; }
body #cmplz-cookiebanner-container .cmplz-links a { font-size: 12px !important; }
body #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn { min-height: 40px !important; padding: 8px 16px !important; font-size: 13px !important; }
/* « Voir les préférences » = lien texte, pas un bouton plein (dégonfle le bloc) */
body #cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences { border-color: transparent !important; text-decoration: underline !important; text-underline-offset: 2px !important; padding-inline: 4px !important; min-height: 0 !important; }
/* Tablette : carte un poil plus large */
@media (max-width: 1024px) {
  body #cmplz-cookiebanner-container .cmplz-cookiebanner { max-width: 400px !important; }
}
/* Mobile : bottom-sheet court, boutons empilés pleine largeur */
@media (max-width: 600px) {
  body #cmplz-cookiebanner-container .cmplz-cookiebanner { max-width: none !important; width: auto !important; left: 12px !important; right: 12px !important; bottom: 12px !important; padding: 16px !important; }
  body #cmplz-cookiebanner-container .cmplz-buttons { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  body #cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn { width: 100% !important; min-height: 44px !important; }
  body #cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences { width: auto !important; min-height: 0 !important; align-self: center !important; }
}

/* Colonne prose : centrer sous le header (déjà centré) — inconditionnel. 2026-07-08
   Sûr : n'agit que si .entry-content est capée à --nt-prose (pages doc/légal) ;
   sur les pleines largeurs (single-post, accueil) margin:auto = sans effet.
   Remplace l'ancienne règle body:has(.nook-legal…) qui ne matchait pas ces pages. */
.entry-content.single-content {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 2026-07-09 — Menu : neutralisation palette (beige liens + brun sous-menu desktop) + drawer mobile uniforme (tokens, sans !important) */
/* NAV — verdict designer 19/07 : TOP nav neutre #dbdce0 (l'ivoire fort #f1f1f3 est réservé H1/CTA → l'utiliser sur 5 liens banalise le signal), sous-items #c6c7cc (un cran plus gris), survol → or, transition 150ms. */
html body .main-navigation .primary-menu-container > ul > li.menu-item > a,
html body .header-navigation .header-menu-container > ul > li.menu-item > a { color: var(--nt-text); letter-spacing:.01em; transition:color 150ms ease; }
html body .header-navigation .header-menu-container ul ul li.menu-item > a { color:var(--nt-text-muted); transition:color 150ms ease; }
html body .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
html body .header-navigation .header-menu-container > ul > li.menu-item > a:hover,
html body .header-navigation .header-menu-container ul ul li.menu-item > a:hover { color: var(--nt-gold); }
/* ICÔNES UTILITAIRES header mobile (loupe + burger) : NEUTRE au repos, OR au TAP (verdict designer 19/07).
   L'or reste RARE = réservé au logo/wordmark + filets ; 3 éléments or dans le header banaliserait le signal.
   La loupe était en OR au repos (réglage Kadence) → ramenée à #dbdce0 ; le burger était déjà #dbdce0. Hover/focus → or.
   Spéc `#mobile-header .*-toggle-open` (1,1,0) bat le réglage Kadence. svg (fill) + barres burger suivent currentColor. */
/* LOUPE (DESKTOP + MOBILE, une seule règle à la source) : l'or par défaut vient de Kadence `.search-toggle-open-container .search-toggle-open{color:#c9a878}` (0,2,0), appliqué aux 2 headers. On le bat avec le MÊME conteneur préfixé `html body` (0,2,2) → neutre #dbdce0 au repos, or au survol/tap, PARTOUT. */
html body .search-toggle-open-container .search-toggle-open{ color:var(--nt-text); }
html body .search-toggle-open-container .search-toggle-open:hover,
html body .search-toggle-open-container .search-toggle-open:focus{ color:var(--nt-gold); }
/* OVERLAY DE RECHERCHE (drawer Kadence `#search-drawer`), consolidé 23/07 après plusieurs
   rounds de diagnostic (spécificité Kadence, appearance natif, pseudo-éléments iOS, fond du
   champ jamais appliqué). Design : champ sobre filet `--nt-line` (or au focus) + bouton
   icône seule (loupe, pas de texte — le libellé natif du bouton doublait le placeholder
   "Rechercher..." du champ). Verrou dur box-shadow/outline sur tout le composant = exception
   documentée à la doctrine !important (5 rounds de diagnostic ciblé épuisés avant, cf.
   mémoire [[nooktails-search-drawer-fix]] pour l'historique complet round par round). */
/* 29/07 : la règle ci-dessus (24/07) ne gagnait pas réellement en direct — vérifié sur le
   CSS agrégé live, Kadence pose sa propre valeur codée en dur `rgba(9,12,16,.97)` sur ce
   même sélecteur `#search-drawer .drawer-inner`, injectée après ce fichier dans la cascade
   (CSS dynamique du Customizer). Même spécificité (0,2,0) → l'ordre de source tranche, et
   Kadence charge après nooktails-child → il gagnait, d'où "l'écran noir" resté en prod
   malgré ce commentaire disant l'inverse. Même technique de préfixe `body` déjà appliquée
   3 fois plus bas dans ce fichier pour ce type exact de conflit (champ, largeur du form). */
body #search-drawer .drawer-inner{ background:var(--nt-bg); }
/* 28/07 (finition premium, point 5, capture iPhone réelle fondateur) — vérifié en direct sur le
   CSS agrégé réel : Kadence pose `#search-drawer .drawer-inner .drawer-content{align-items:center;
   position:absolute;top:0;bottom:0}` (1,2,0) — le champ se retrouve centré sur TOUTE la hauteur
   du drawer (mesuré : ~400px du haut sur iPhone), donc très bas ; au clavier ouvert, l'espace
   utile restant est écrasé. Même sélecteur exact (même spécificité, gagne par ordre de source,
   0 !important) : `flex-start` remonte le champ juste sous le header, padding-top calé au-delà
   de la hauteur du header (~53px mesurée) + marge de sécurité demandée. */
#search-drawer .drawer-inner .drawer-content{
  align-items: flex-start;
  padding-top: 3.5rem;   /* Point 4 (revue qualité perçue, 28/07, validé fondateur) : 5rem
    plaquait le champ contre le header (8px seulement avant les résultats) — pas un équilibre,
    juste "le plus haut possible". Réduit pour une respiration réelle sans redescendre vers le
    centrage bas d'origine (cf. note historique juste au-dessus). */
}
#search-drawer,
#search-drawer *{
  box-shadow:none !important;
  outline:none !important;
}
#search-drawer .search-form,
#search-drawer .drawer-content,
#search-drawer .drawer-inner{
  border:0 !important;
  -webkit-tap-highlight-color:transparent;
}
/* Angle mort trouvé par audit indépendant (23/07) : le verrou dur ci-dessus tue aussi
   l'indicateur de focus clavier (règle globale `:focus-visible` de 01-base.css, qui utilise
   `outline` — neutralisé ici par le `outline:none!important` sur tous les descendants).
   Un utilisateur clavier ne voyait plus où est le focus dans le drawer. Restauré via
   box-shadow (pas outline, qui reste tué) — !important nécessaire pour battre le verrou
   ci-dessus, exception dans l'exception, documentée. */
#search-drawer .search-toggle-close:focus-visible,
#search-drawer .search-submit:focus-visible{
  /* encre neutre (grammaire d'interaction unique, 24/07) : l'or reste réservé au hover/breadcrumb, jamais au focus */
  box-shadow: 0 0 0 2px var(--nt-text-strong) !important;
}
#search-drawer .search-field{
  -webkit-appearance:none;
  appearance:none;
  height:46px;   /* 28/07 (finition premium, point 6) : 52px lisait épais, 46px reste au-dessus
    du plancher tactile 44px tout en affinant la silhouette. */
  padding:0 1rem;
  background:var(--nt-surface-1);
  color:var(--nt-text);
  border:1px solid var(--nt-line);
  border-right:0;   /* F8 (28/07, audit UX, validé fondateur) : fusionne visuellement avec le
    bouton juste après — une seule bordure extérieure au lieu de deux filets côte à côte. */
  border-radius:0;
}
/* Kadence force background:transparent sur le champ via un sélecteur plus spécifique
   (`.drawer-inner input.search-field`) → préfixe `body` pour battre proprement. */
body #search-drawer .drawer-inner input.search-field{ background:var(--nt-surface-1); }
/* 25/07 (audit CRO) : même mécanisme, `padding-right` — Kadence réserve 80px pour une
   loupe SUPERPOSÉE dans le champ (pattern qu'on n'utilise pas ici : notre bouton loupe
   est un élément à part, .search-submit, pas overlay). Vérifié en direct : le champ
   applique bien `padding:0 1rem 0 80px`→ droite, réduisant le champ de saisie/placeholder
   à quasi rien à largeur mobile. Repris ici, priorité sur le contrat padding ligne 342. */
body #search-drawer .drawer-inner input.search-field{ padding:0 1rem; }
/* Point 5 (revue qualité perçue, 28/07, validé fondateur) : bug réel trouvé en testant EN
   FRAPPANT dans le champ (invisible sur un champ vide, donc raté par tous les audits visuels
   précédents) — Kadence pose `#search-drawer .drawer-inner input.search-field:focus{color:#fff}`
   (texte blanc, pensé pour un champ à fond sombre). Notre champ a un fond clair (--nt-surface-1)
   -> texte saisi quasi invisible dès qu'on tape, alors que le placeholder et l'icône restent
   dans la palette encre/or du site. Même technique de préfixe `body` que les 2 règles au-dessus
   pour battre le même sélecteur Kadence. */
body #search-drawer .drawer-inner input.search-field:focus{ color:var(--nt-text-strong); }
/* iOS Safari : pseudo-éléments natifs de input[type=search] (bouton clear, décorations)
   gardent leur chrome blanc même avec appearance:none sur l'input — invisibles sur Chrome. */
/* 28/07 (audit P2) : le formulaire de recherche générique affiché sur la page "aucun
   résultat" (get_search_form() natif WP, hors #search-drawer) restait en style navigateur
   par défaut (fond blanc) — seul le champ du drawer header était habillé. Même contrat
   visuel, juste sans le scope #search-drawer. */
.search-form .search-field{
  -webkit-appearance:none;
  appearance:none;
  height:46px;   /* 28/07 : même contrat que #search-drawer ci-dessus (point 6, silhouette affinée) */
  padding:0 1rem;
  background:var(--nt-surface-1);
  color:var(--nt-text);
  border:1px solid var(--nt-line);
  border-radius:0;
  font-family:var(--nt-font-ui);
}
.search-form .search-field:focus{
  border-color:var(--nt-gold);
  outline:none;
}
.search-form .search-submit{
  min-height:44px;
  padding:10px 22px;
  margin-inline-start:8px;
  background:transparent;
  color:var(--nt-gold);
  border:1px solid var(--nt-gold);
  border-radius:0;
  font-family:var(--nt-font-ui);
  cursor:pointer;
  transition:background var(--nt-transition), color var(--nt-transition);
}
.search-form .search-submit:hover{
  background:var(--nt-gold);
  color:var(--nt-bg);
}
#search-drawer .search-field::-webkit-search-decoration,
#search-drawer .search-field::-webkit-search-cancel-button,
#search-drawer .search-field::-webkit-search-results-button,
#search-drawer .search-field::-webkit-search-results-decoration{
  -webkit-appearance:none;
  appearance:none;
  display:none;
}
#search-drawer .search-field:focus{ border-color:var(--nt-gold); }
/* 28/07 (finition premium, point 7) : --nt-text-muted sur --nt-surface-1 mesure 4.43:1 — sous
   le seuil AA texte normal (4.5:1), limite réelle vérifiée par calcul, pas une impression.
   Assombri via color-mix (pas un hex en dur) pour rester raccordé aux tokens : 85% muted / 15%
   text-strong ≈ 5.18:1, le même ratio de contraste déjà validé ailleurs sur le site (bouton or). */
#search-drawer .search-field::placeholder{ color:color-mix(in srgb, var(--nt-text-muted) 85%, var(--nt-text-strong) 15%); opacity:1; }
/* Bouton = icône seule (loupe), pas de texte visible. Structure native Kadence reprise :
   `.kadence-search-icon-wrap` (siblings DOM du bouton) superposée en position:absolute,
   habillée à la marque (or filet, coins nets). Texte natif du bouton invisible (font-size:0,
   reste cliquable/accessible) plutôt qu'affiché — évitait le doublon avec le placeholder.
   F8 (28/07, audit UX, validé fondateur) : le bouton avait son propre filet or + fond
   transparent -> laissait voir le fond sombre du drawer derrière lui, créant une rupture nette
   avec le champ (fond plâtre plein). Fond aligné sur le champ (même token), filet neutre — la
   loupe or reste le SEUL accent de couleur, plus lisible comme "une pièce" que comme un bloc. */
#search-drawer .search-submit{
  -webkit-appearance:none;
  appearance:none;
  background:var(--nt-surface-1);
  border:1px solid var(--nt-line);
  border-radius:0;
  margin-inline-start:0;   /* bat .search-form .search-submit{margin-inline-start:8px} (règle
    générique non scopée drawer) — sans ça, un espace de 8px rouvre la coupure entre champ et
    bouton malgré le fond/filet désormais assortis (F8). */
  width:46px;   /* 28/07 (finition premium, point 6) : aligné sur le champ (46px), silhouette affinée.
    Plancher tactile 44px respecté (F8, validé fondateur). */
  min-width:46px;
  height:46px;
  padding:0;
  font-size:0;
  line-height:0;
  color:transparent;
  cursor:pointer;
  transition:background var(--nt-transition);
}
body #search-drawer .drawer-inner .search-submit[type="submit"]{ width:46px; }
/* Or réservé au survol UNIQUEMENT (grammaire d'interaction, cf. note plus haut sur le focus
   neutre) — retiré `:focus` de cette règle (28/07, F8) : un focus clavier déclenchait à tort le
   même remplissage or que le hover, en plus de l'anneau neutre `:focus-visible` déjà en place
   ci-dessus -> les deux signaux se cumulaient, contraire à la doctrine "or jamais au focus". */
#search-drawer .search-submit:hover{ background:var(--nt-gold); }
/* Kadence fixe déjà width:70px + color sur .kadence-search-icon-wrap (plus spécifique
   que .search-submit seul) → même technique du préfixe body. */
body #search-drawer .drawer-inner .kadence-search-icon-wrap{
  width:46px;
  height:46px;
  color:var(--nt-gold);
  transition:color var(--nt-transition);
}
#search-drawer .search-submit:hover + .kadence-search-icon-wrap{ color:var(--nt-bg); }
#search-drawer .kadence-search-icon-wrap .kadence-search-svg{ width:15px; height:15px; }

/* PANNEAU DE RÉSULTATS LIVE (28/07, js/nk-live-search.js) — injecté en DOM DANS .search-form
   par le JS, jamais dans l'éditeur de page. Même contrat visuel que le champ (fond --nt-bg
   du drawer, filet --nt-line, coins nets, or réservé aux accents/liens). Zones tactiles ≥44px
   (doctrine CTA), scroll interne propre si la liste dépasse l'écran plutôt que de pousser le
   drawer hors viewport.
   2 essais avant celui-ci, tous deux vérifiés en direct et corrigés après échec réel (pas de
   suppositions) : (1) sibling du form dans .drawer-content (flex) → participait à la rangée
   flex, poussait le champ hors de son centrage + fond transparent héritant de l'overlay sombre
   (texte illisible) ; (2) ancré sur .drawer-content (position:relative) → ce conteneur fait
   TOUTE la hauteur du drawer (~700px, le form n'est que centré dedans), donc top:100% tombait
   hors écran, sous la fenêtre visible. Résolu en ancrant sur .search-form lui-même (ne fait que
   la hauteur du champ, ~52px) : le panneau tombe pile sous le champ quelle que soit la hauteur
   du drawer autour, plus de dépendance à la position du form dans son conteneur flex. */
#search-drawer .search-form{
  position:relative; /* ancre le panneau résultats juste sous le champ, cf historique ci-dessus */
}
/* Point 7 (revue qualité perçue, 28/07, validé fondateur) : mesuré en direct sur desktop 1440px
   — le champ restait à 800px malgré la règle ci-dessus. Cause exacte : Kadence pose
   `#search-drawer .drawer-inner form{max-width:800px}` (1,1,1), plus spécifique que
   `#search-drawer .search-form` seul (1,1,0) → gagnait. Même technique de préfixe `body` déjà
   utilisée sur ce fichier pour battre ce type de règle Kadence (cf. background/color du champ
   plus haut) : `body #search-drawer .drawer-inner .search-form` (1,2,1) bat proprement. Aligné
   sur 640px, la même largeur que le panneau de résultats juste en dessous — champ et résultats
   forment une seule colonne cohérente, plus resserré, plus premium. */
body #search-drawer .drawer-inner .search-form{
  max-width:640px;
  margin-inline:auto;
}
#search-drawer .nk-search-results{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:640px;
  margin-top:16px;   /* Point 4 (revue qualité perçue, 28/07) : était 8px, un cran plus serré
    que le padding-top au-dessus du champ, cadence irrégulière. Toujours net, moins collé. */
  max-height:min(60vh, 420px);
  max-height:min(60dvh, 420px); /* 28/07 : vh ne tient pas compte du clavier virtuel sur iOS
    Safari (peut représenter plus que l'espace réellement visible au-dessus du clavier) —
    dvh se recalcule en direct avec le clavier. Repli vh pour les navigateurs sans dvh :
    une déclaration invalide est ignorée, la ligne au-dessus reste active. */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:0 4px;
  background:var(--nt-bg);
  border:1px solid var(--nt-line);
  z-index:1;
}
#search-drawer .nk-search-results__status{
  padding:1rem;
  text-align:center;
  color:var(--nt-text-muted);
  font-family:var(--nt-font-ui);
  font-size:var(--nt-text-sm);
}
#search-drawer .nk-search-results__group + .nk-search-results__group{
  margin-top:var(--nt-space-sm);
  padding-top:var(--nt-space-sm);
  border-top:1px solid var(--nt-line);
}
#search-drawer .nk-search-results__label{
  margin:0 0 6px;
  padding:0 .5rem;
  font-family:var(--nt-font-ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--nt-text-muted);
}
#search-drawer .nk-search-result{
  display:flex;
  align-items:center;
  gap:.75rem;
  min-height:44px;
  padding:.5rem;
  text-decoration:none;
  color:var(--nt-text);
  transition:background var(--nt-transition);
}
#search-drawer .nk-search-result:hover,
#search-drawer .nk-search-result:focus-visible{
  background:var(--nt-surface-1);
}
#search-drawer .nk-search-result:focus-visible{
  box-shadow: 0 0 0 2px var(--nt-text-strong) !important; /* même verrou de focus que le reste du drawer, cf plus haut */
}
#search-drawer .nk-search-result__img{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:0;
  object-fit:cover;
  background:var(--nt-surface-1);
}
#search-drawer .nk-search-result__img--empty{
  border:1px solid var(--nt-line);
}
#search-drawer .nk-search-result__body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0; /* laisse le clamp de titre fonctionner dans un flex item */
}
#search-drawer .nk-search-result__title{
  font-family:var(--nt-font-heading);
  font-size:var(--nt-text-sm);
  line-height:1.3;
  color:var(--nt-text-strong);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#search-drawer .nk-search-result__meta{
  font-family:var(--nt-font-ui);
  font-size:var(--nt-text-xs);
  color:var(--nt-gold);
}
#search-drawer .nk-search-result__cat{
  font-family:var(--nt-font-ui);
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--nt-text-muted);
}
#search-drawer .nk-search-result__excerpt{
  font-family:var(--nt-font-ui);
  font-size:var(--nt-text-xs);
  color:var(--nt-text-muted);
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
#search-drawer .nk-search-result__stock{
  font-family:var(--nt-font-ui);
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--nt-alert-text);
}
#search-drawer .nk-search-results__empty{
  padding:1.5rem 1rem;
  text-align:center;
}
#search-drawer .nk-search-results__empty-title{
  margin:0 0 .35rem;
  font-family:var(--nt-font-heading);
  font-size:var(--nt-text-base);
  color:var(--nt-text-strong);
}
#search-drawer .nk-search-results__empty-hint{
  margin:0;
  font-family:var(--nt-font-ui);
  font-size:var(--nt-text-sm);
  color:var(--nt-text-muted);
}
#search-drawer .nk-search-results__empty-hint a{
  color:var(--nt-gold);
  text-decoration:underline;
  text-underline-offset:2px;
}
#search-drawer .nk-search-results__empty-hint a:hover{ color:var(--nt-gold-dark); }

/* Panneau "avant frappe" (29/07) — .nk-search-quicklink, rendu par renderDefault() dans
   nk-live-search.js au focus sur champ vide. Même famille visuelle que .nk-search-result
   (groupes/labels partagés) mais rangée plus simple (pas d'image/prix) — un lien de
   navigation n'est pas un résultat de recherche, la distinction reste lisible. */
#search-drawer .nk-search-quicklink{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 44px;
  padding: .6rem .5rem;
  text-decoration: none;
  font-family: var(--nt-font-heading);
  font-size: var(--nt-text-base);
  color: var(--nt-text-strong);
  transition: color var(--nt-transition), background var(--nt-transition);
}
#search-drawer .nk-search-quicklink::after{
  content: "→";
  flex: 0 0 auto;
  color: var(--nt-gold);
  transition: transform var(--nt-transition);
}
#search-drawer .nk-search-quicklink:hover,
#search-drawer .nk-search-quicklink:focus-visible{
  background: var(--nt-surface-1);
  color: var(--nt-gold);
}
#search-drawer .nk-search-quicklink:hover::after{ transform: translateX(3px); }
#search-drawer .nk-search-quicklink:focus-visible{
  box-shadow: 0 0 0 2px var(--nt-text-strong) !important;
}
/* Mobile : drawer plein écran, on laisse le panneau respirer sur toute la largeur utile,
   zone tactile des résultats élargie (le doigt vise moins précisément qu'une souris). */
@media (max-width:600px){
  #search-drawer .nk-search-results{
    max-height:min(55vh, 60svh);
    max-height:min(55dvh, 60svh); /* même correctif clavier iOS que la règle de base ci-dessus */
  }
  #search-drawer .nk-search-result{
    padding:.65rem .5rem;
  }
}
/* PAGE RÉSULTATS DE RECHERCHE — H1 compact mobile (28/07, finition premium, point 10).
   Vérifié en direct : `body.search.search-results` (classes WP natives) portent le même H1
   42px/line-height 63px que tout le site — 189px de hauteur totale sur mobile, un quart
   d'écran pour un titre utilitaire. Réduit UNIQUEMENT le rendu visuel sur cette page, via ses
   classes body natives — le texte du H1 ("Résultats de recherche pour : …") reste strictement
   inchangé, donc 0 impact SEO (même contenu sémantique, juste une taille d'affichage différente
   sur ce gabarit précis). Scopé mobile uniquement, le desktop n'a pas le même problème d'espace.
   CORRECTIF (28/07, audit UX F4) : scopé à tort sur `body.search-results`, qui ne couvre QUE
   l'état "résultats trouvés" — WordPress pose `body.search-no-results` (pas `.search-results`)
   quand la recherche ne retourne rien, vérifié en direct. Reciblé sur `body.search` (classe
   commune aux deux états) pour couvrir les deux cas réels. */
@media (max-width: 560px) {
  body.search .entry-title,
  body.search h1.page-title,
  body.search h1 {
    font-size: 1.75rem;
    line-height: 1.25;
  }
}
/* F4 (28/07, audit UX) : la requête utilisateur est injectée brute dans ce H1. Testé en direct
   avec une requête d'un seul mot long ("zzxxqqnothingfound123") — le mot déborde du viewport,
   coupé net par le bord de l'écran, aucun wrap. Toute faute de frappe ou mot concaténé casse la
   mise en page. Pas de dépendance de largeur d'écran (le bug existe aussi en desktop sur requête
   assez longue) — non scopé à un media query. Ciblé sur `body.search` (cf note ci-dessus) pour
   couvrir aussi bien l'état résultats que l'état 0 résultat. */
body.search .entry-title,
body.search h1.page-title,
body.search h1 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* F5 + revue qualité perçue (28/07, audit UX, points 1-3, validé fondateur) : rendu UNIFIÉ des
   résultats de recherche produit ET article — un seul système de classes .nk-search-result__*
   (entry-product.php + entry-post.php, même structure DOM), même vignette/eyebrow/titre pour
   les deux. Avant ce correctif, deux systèmes visuels coexistaient dans la même grille (ligne
   compacte pour les produits, grand format article empilé pour les posts) — cassait le rythme
   (signalé fondateur, point 1). Les modificateurs --product/--post n'ajoutent QUE le contenu
   spécifique (prix vs extrait), jamais la géométrie de base. */
.nk-search-result {
  display: flex;
  align-items: flex-start;
  gap: var(--nt-space-md);
}
.nk-search-result__thumb {
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  display: block;
}
.nk-search-result__thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--nt-surface-1);
  display: block;
}
.nk-search-result__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;   /* bat le padding par défaut de .entry-content-wrap (pensé pour le
    format article empilé, laisse un vide au-dessus incohérent avec l'alignement flex ici) */
}
.nk-search-result__kind {
  font-family: var(--nt-font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 6px;
}
/* Point 3 (revue qualité perçue) : testé en direct, un titre long ("Furoomate PCT110 – Litière
   automatique autonettoyante ouverte pour chat") montait à 7 lignes face à une vignette de 80px
   -> déséquilibre total. line-clamp:2 partout, même traitement que les cartes boutique. */
.nk-search-result__title {
  font-family: var(--nt-font-heading);
  font-size: var(--nt-text-base);
  line-height: var(--nt-leading-snug);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nk-search-result__title a {
  color: var(--nt-text-strong);
  text-decoration: none;
}

/* Point 2 (revue qualité perçue, validé fondateur) : le prix doit être la 2e information la
   plus visible après le titre — vérifié en direct, il lisait avant au même poids que le lien
   "Voir le produit" (13.5px semibold pour les deux). Rapproché du titre (1.05rem, 700, juste
   après), le statut stock et le CTA reculent en retrait visuel. */
.nk-search-result--product .nk-search-result__price {
  font-family: var(--nt-font-ui);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--nt-text-strong);
  margin: 0 0 2px;
  font-variant-numeric: tabular-nums;
}
.nk-search-result--product .nk-search-result__kind {
  color: var(--nt-text-muted);
  font-weight: 600;
  margin: 0 0 6px;
}
.nk-search-result--product .nk-search-result__cta {
  display: inline-block;
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-xs);
  font-weight: var(--nt-weight-medium);
  color: var(--nt-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nk-search-result--product .nk-search-result__cta:hover,
.nk-search-result--product .nk-search-result__cta:focus-visible {
  color: var(--nt-gold-dark);
}

.nk-search-result--post .nk-search-result__kind {
  color: var(--nt-gold);
}
.nk-search-result--post .nk-search-result__excerpt {
  font-family: var(--nt-font-body);
  font-size: var(--nt-text-sm);
  color: var(--nt-text-muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* F6 (28/07, audit UX) : liens de repli dans l'état "0 résultat" (template-parts/content/error.php
   surchargé côté enfant) — boutique + 2 catégories, avant get_search_form().
   Point 6 (revue qualité perçue, 28/07, validé fondateur) : de simples liens soulignés lisaient
   comme du texte HTML brut, pas premium. Reconverti en chips (filet + fond, pas de pilule pleine
   largeur ni de carte — le plus léger des 3 formats proposés, cohérent avec la sobriété du reste
   de la page). border-radius repris de --nt-radius-sm (déjà utilisé ailleurs sur le site pour
   ce type d'élément secondaire, ex. contrat champ de recherche). */
.nk-search-error__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nt-space-sm);
  margin: 0 0 var(--nt-space-md);
}
.nk-search-error__links a {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 var(--nt-space-md);
  font-family: var(--nt-font-ui);
  font-size: var(--nt-text-sm);
  font-weight: var(--nt-weight-medium);
  color: var(--nt-text-strong);
  background: var(--nt-surface-1);
  border: 1px solid var(--nt-line-strong);
  border-radius: var(--nt-radius-sm);
  text-decoration: none;
  transition: background var(--nt-transition), border-color var(--nt-transition), color var(--nt-transition);
}
.nk-search-error__links a:hover,
.nk-search-error__links a:focus-visible {
  color: var(--nt-gold-dark);
  border-color: var(--nt-gold);
  background: var(--nt-bg);
}

/* F7 (28/07, audit UX) : vérifié en direct — déjà corrigé plus tôt le même jour ("28/07, audit
   P2", cf. règles `.search-form .search-field`/`.search-form .search-submit` plus haut dans ce
   fichier). Une tentative d'ajout ici (.error .search-form{display:flex...}) faisait doublon et
   entrait en conflit de flex-basis avec l'existant (le submit se faisait écraser, texte tronqué
   "Recl") — retirée. Rien à ajouter, le contrat existant couvre déjà ce formulaire. */

/* BURGER (mobile seulement) : neutre → or au tap. */
#mobile-header .menu-toggle-open{ color:var(--nt-text); }
#mobile-header .menu-toggle-open:hover, #mobile-header .menu-toggle-open:focus{ color:var(--nt-gold); }
/* HEADER MOBILE = LEFT-FLUSH (verdict designer 19/07 + choix fondateur) : logo « nooktails » à GAUCHE, loupe + burger groupés à DROITE.
   Un wordmark LARGE centré entre 2 icônes est fragile (paraît décalé au moindre déséquilibre + manque d'air à 375px) ; le left-flush = masthead de revue, robuste, plus premium.
   La rangée mobile est en GRID (justify:center) → on la passe en FLEX pour grouper vraiment loupe+burger à droite. `margin-inline-end:auto` sur le logo le colle à gauche et pousse les 2 icônes à droite ; gap 1.1rem entre elles (cibles tap ≥44px). */
#mobile-header .site-main-header-inner-wrap.site-header-row{ display:flex; align-items:center; gap:1.1rem; }
#mobile-header .site-header-main-section-center{ order:0; margin-inline-end:auto; }
#mobile-header .site-header-main-section-left{ order:1; }
/* 24/07 : la zone droite (panier + burger) était sortie du flux par une règle plus bas
   dans ce fichier (position:absolute, héritée de l'ancien système de centrage pré-19/07)
   — corrigé à la source, voir plus bas. order suffit ici à la positionner en dernier. */
#mobile-header .site-header-main-section-right{ order:2; }
/* sous-menu DESKTOP (verdict designer 19/07) : panneau QUASI-NOIR #1a1b1f (le #212228 lisait « carte grise SaaS » sur fond #121216) + FILET OR en HAUT seulement (l'or signe l'ouverture, il n'encadre pas les 5 menus) ; côtés + bas = hairline neutre #2a2a30. */
html body .header-navigation .header-menu-container ul ul.sub-menu { background:var(--nt-surface-1); border:1px solid var(--nt-line); border-top:1px solid var(--nt-gold); }   /* 24/07 : panneau était quasi-noir #1a1b1f codé en dur */
html body .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
html body .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a { background: var(--nt-surface-1); }
/* drawer MOBILE : fond uniforme = bg du thème (fix bleed-through), sous-menu laissé en surface (choix validé) */
html body #mobile-drawer,
html body #mobile-drawer .drawer-overlay,
html body #mobile-drawer .drawer-content,
html body #mobile-drawer .drawer-inner,
html body #mobile-drawer .mobile-navigation,
html body #mobile-drawer .mobile-navigation ul { background-color: var(--nt-bg); }

/* ============================================================================
   HEADER NAV + MÉGA-MENU + DRAWER — harmonisation DA (2026-07-18)
   Couche source-contrôlée, token-driven, qui verrouille le menu sur la DA
   quelle que soit la valeur du Customizer Kadence (anti-dérive du legacy brun
   #2b2520/#1c1814 — déjà neutralisé côté Customizer, ici figé à la SOURCE).
   Scope strict header/nav — 0 régression contenu. Sans !important (spécificité
   via `html body`). Cibles tactiles >= 44px. 0 emoji/picto (labels intacts).
   ============================================================================ */

/* --- Barre de navigation principale (desktop) ------------------------------ */
html body .main-navigation .primary-menu-container > ul > li.menu-item > a{
  color: var(--nt-text-strong);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color .2s ease;
}
html body .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
html body .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
html body .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a,
html body .main-navigation .primary-menu-container > ul > li.menu-item.current-page-parent > a{
  color: var(--nt-gold);
}

/* --- Dropdown / sous-menu / méga (desktop) — Sprint UI V4 (29/07) : retiré le
   filet sombre entre CHAQUE item (spec V4-K "aucune ligne sombre entre chaque
   item"), ombre allégée, rayon 10px conservé (dans la fourchette 8-10px). --- */
html body .header-navigation .header-menu-container ul ul.sub-menu,
html body .header-navigation .header-menu-container ul ul.submenu,
html body .header-menu-container ul.menu > li.kadence-menu-mega-enabled > ul.sub-menu{
  background: var(--nt-surface-1);
  border: 1px solid var(--nt-line);
  box-shadow: 0 8px 24px -12px rgba(42,39,35,.22);
  border-radius: 10px;
  overflow: hidden;
  padding-block: 10px;
}

/* Item de sous-menu : texte neutre -> or au survol, PLUS de filet entre items
   (seul le padding sépare visuellement, cf. spec V4-K). */
html body .header-navigation .header-menu-container ul ul li.menu-item > a{
  color: var(--nt-text);
  border-bottom: 0;
  min-height: 44px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.4;
  transition: color .15s ease-out, background .15s ease-out;
}
html body .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
html body .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a{
  color: var(--nt-gold);
  background: var(--nt-gold-tint);
}
/* Hiérarchie des sous-menus (24/07) : chaque sous-menu se termine par un lien
   catch-all ("Voir tous les X") — distingué des choix thématiques au-dessus par
   un filet + un libellé mono/uppercase (même contrat que .nk-info__cta), sans
   renommer ni déplacer aucun lien existant. */
html body .header-navigation .header-menu-container ul ul li.menu-item:last-child{
  border-top: 1px solid var(--nt-line);
}
html body .header-navigation .header-menu-container ul ul li.menu-item:last-child > a{
  font-family: var(--nt-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nt-text-muted);
  gap: 6px;
}
html body .header-navigation .header-menu-container ul ul li.menu-item:last-child > a::after{
  content: "→";
  font-family: var(--nt-font-ui);
  transition: transform .15s ease-out;
}
html body .header-navigation .header-menu-container ul ul li.menu-item:last-child > a:hover::after{
  transform: translateX(3px);
}
html body .header-navigation .header-menu-container ul ul li.menu-item:last-child > a:hover{
  color: var(--nt-gold);
}

/* Flèche/toggle de dropdown : filet neutre */
html body .dropdown-nav-special-toggle{ border-color: var(--nt-line); color: var(--nt-text-muted); }

/* --- Drawer mobile --------------------------------------------------------- */
html body #mobile-drawer,
html body #mobile-drawer .drawer-overlay,
html body #mobile-drawer .drawer-content,
html body #mobile-drawer .mobile-drawer-content,
html body #mobile-drawer .drawer-inner,
html body #mobile-drawer .drawer-header,
html body #mobile-drawer .mobile-menu-container,
html body #mobile-drawer .drawer-menu-container,
html body #mobile-drawer .mobile-navigation,
html body #mobile-drawer .mobile-navigation ul{
  background-color: var(--nt-bg);
}
html body #mobile-drawer .drawer-overlay{
  background-color: rgba(0,0,0,.55);
}
/* Items mobiles — HIÉRARCHIE (verdict designer 19/07 ; mobile = même niveau que desktop, 80% du trafic).
   Base : cibles ≥44px, transition. Séparateur OR par item RETIRÉ (trop de lignes + or pas rare). */
html body #mobile-drawer .mobile-menu-container li.menu-item > a,
html body #mobile-drawer .drawer-menu-container li.menu-item > a{
  color: var(--nt-text);
  min-height: 48px;
  display: flex;
  align-items: center;
  transition: color var(--nt-transition);
}
/* TOP-level : plus présent (#ececee 15px/500) + hairline NEUTRE entre les 5 groupes seulement */
html body #mobile-drawer .mobile-menu-container > ul > li.menu-item > a,
html body #mobile-drawer .drawer-menu-container > ul > li.menu-item > a{
  color:var(--nt-text-strong); font-size:15px; font-weight:500;
  border-bottom:1px solid rgba(42,39,35,.05);
}
/* SOUS-items : atténués + retrait 16px, pas de filet */
html body #mobile-drawer .mobile-menu-container ul ul li.menu-item > a,
html body #mobile-drawer .drawer-menu-container ul ul li.menu-item > a{
  color:var(--nt-text-muted); font-size:14px; font-weight:400; min-height:44px; padding-inline-start:16px;
}
/* Dernier item de chaque sous-menu = lien "Voir tout X" (catch-all), même distinction
   qu'en desktop : filet au-dessus + libellé mono/uppercase. */
html body #mobile-drawer .mobile-menu-container ul ul li.menu-item:last-child,
html body #mobile-drawer .drawer-menu-container ul ul li.menu-item:last-child{
  border-top: 1px solid rgba(42,39,35,.08);
}
html body #mobile-drawer .mobile-menu-container ul ul li.menu-item:last-child > a,
html body #mobile-drawer .drawer-menu-container ul ul li.menu-item:last-child > a{
  font-family: var(--nt-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:var(--nt-text-muted);
}
/* survol / page courante → or (accent unique) */
html body #mobile-drawer .mobile-menu-container li.menu-item > a:hover,
html body #mobile-drawer .mobile-menu-container li.menu-item.current-menu-item > a,
html body #mobile-drawer .drawer-menu-container li.menu-item > a:hover,
html body #mobile-drawer .drawer-menu-container li.menu-item.current-menu-item > a{
  color: var(--nt-gold);
}
/* Sous-toggle mobile (chevron) : neutre + cible tactile */
html body #mobile-drawer .drawer-sub-toggle{
  color: var(--nt-text-muted);
  min-width: 44px;
  min-height: 44px;
}
/* Bouton hamburger + croix : couleur neutre cohérente */
html body .mobile-toggle-open-container .menu-toggle-open,
html body #mobile-drawer .menu-toggle-close{ color: var(--nt-text-strong); }

/* ============================================================================
   HEADER MOBILE — burger on-brand + logo centré (2026-07-18, retour user)
   1) Burger : retire la dépendance à la palette Kadence (var(--global-palette5),
      hardcode hors-DA). Icône = --nt-text (lisibilité max sur l'anthracite),
      état survol/focus/ouvert = or mat --nt-gold. Tokens, 0 !important
      (spécificité `html body` + scope), 0 inline. Cible tactile >= 44px.
   2) Logo centré sur le header mobile ; burger accessible à droite (absolu).
      Le lien accueil et la TAILLE du logo sont préservés (aucun resize).
   Scope strict header mobile -> 0 impact desktop.
   ============================================================================ */

/* 1) Burger — couleur DA + états (l'icône SVG hérite via fill=currentColor) */
html body .mobile-toggle-open-container .menu-toggle-open{
  color: var(--nt-text);
  min-width: 44px;
  min-height: 44px;
  transition: color .2s ease;
}
html body .mobile-toggle-open-container .menu-toggle-open:hover,
html body .mobile-toggle-open-container .menu-toggle-open:focus,
html body .mobile-toggle-open-container .menu-toggle-open:focus-visible,
html body.showing-popup-drawer-from-right .mobile-toggle-open-container .menu-toggle-open{
  color: var(--nt-gold);
}
/* Croix de fermeture (drawer) : mêmes états on-brand */
html body #mobile-drawer .menu-toggle-close{ color: var(--nt-text); }
html body #mobile-drawer .menu-toggle-close:hover,
html body #mobile-drawer .menu-toggle-close:focus{ color: var(--nt-gold); }
/* focus clavier = distinct du hover (outline, pas juste une couleur) — grammaire d'interaction unique, 24/07 */
html body #mobile-drawer .menu-toggle-close:focus-visible{ color: var(--nt-text-strong); outline: 2px solid var(--nt-text-strong); outline-offset: 2px; }

/* 2) Logo centré sur le header mobile ; burger absolu à droite.
   width:100% ajouté 24/07 : sans largeur explicite, ce conteneur se réduisait à
   la taille de son contenu (logo + recherche, ~100px) au lieu de couvrir tout
   le header — la zone droite (right:0, absolue) s'ancrait alors sur ce bord
   trop étroit et chevauchait le logo dès qu'elle contenait 2 icônes (panier +
   burger) au lieu d'une seule. Régression observée en réel après l'ajout du
   panier au header mobile. */
html body #mobile-header .site-main-header-inner-wrap{
  position: relative;
  justify-content: center;
  width: 100%;
}
html body #mobile-header .site-header-main-section-left{
  margin: 0 auto;
  justify-content: center;
  text-align: center;
}
html body #mobile-header .site-header-main-section-left .site-header-item,
html body #mobile-header .mobile-site-branding{
  margin-left: auto;
  margin-right: auto;
}
/* position:absolute retiré 24/07 : cette règle date du système de centrage du logo
   (avant la refonte left-flush du 19/07, cf plus haut dans ce fichier) — en sortant
   la zone droite du flux flex, elle entrait en conflit avec le système order+gap
   qui gère déjà son placement, et provoquait le chevauchement loupe/panier observé
   en réel. Le order:2 + gap défini plus haut suffit à la positionner correctement. */
html body #mobile-header .site-header-main-section-right{
  margin: 0;
}

/* ============================================================================
   HARMONISATION DRAWER MOBILE <-> MÉGA-MENU DESKTOP + DIMENSIONS LOGO
   (2026-07-18, retour user : « le menu mobile n'est pas le même que le desktop
   + bien placer le logo aux bonnes dimensions »)

   Constats live (curl + computed) :
   - Les ENTRÉES sont déjà une source unique : le même menu WP est rendu 2x par
     Kadence (desktop #primary-menu + mobile #mobile-menu, mêmes menu-item-IDs).
     -> rien à recréer côté liens ; on n'harmonise que la DA (police/couleur/DA).
   - POLICE divergente : desktop = Geist, drawer mobile = Inter. -> 1 seul token
     `--nt-font-nav` appliqué DESKTOP + MOBILE (source unique de la police nav).
   - LIENS PARENTS DU DRAWER non stylés : Kadence les enveloppe dans
     `.drawer-nav-drop-wrap` -> le sélecteur `li.menu-item > a` (feuilles) ne les
     atteignait pas (min-height 0, pas de filet, pas d'état or). On les met à
     PARITÉ avec les feuilles et le top-level desktop.
   - LOGO mobile en `width:440px` (attribut img) -> déborde/écrase sur < 440px.
     -> hauteur bornée par token + largeur auto + garde-fou, desktop ET mobile.

   Tokens, 0 !important (spécificité via `html body`), scope strict header/nav,
   0 emoji/picto, cibles tactiles >= 48px. 0 perte de lien (DA uniquement).
   ============================================================================ */

/* --- Source unique : tokens nav + logo ------------------------------------- */
:root{
  --nt-font-nav:       "Geist", var(--nt-font-ui); /* police du menu (2 côtés) */
  --nt-logo-h:         44px;   /* desktop/tablette : ajusté sur retour direct iPhone 12 Pro (25/07) */
  --nt-logo-h-mobile:  42px;
  --nt-logo-w:         129px;  /* largeur explicite = ratio réel du fichier (599:204) — évite toute dépendance à un ratio intrinsèque potentiellement périmé en cache */
  --nt-logo-w-mobile:  123px;
}

/* Police unifiée sur le méga-menu desktop ET le drawer mobile */
html body .main-navigation .primary-menu-container ul li.menu-item > a,
html body #mobile-drawer .menu li.menu-item > a,
html body #mobile-drawer .drawer-nav-drop-wrap > a{
  font-family: var(--nt-font-nav);
}

/* --- Drawer mobile : liens PARENTS (dans .drawer-nav-drop-wrap) à parité ---- */
html body #mobile-drawer .drawer-nav-drop-wrap{
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--nt-line); /* filet porté par le wrap du parent */
}
html body #mobile-drawer .drawer-nav-drop-wrap > a{
  flex: 1 1 auto;
  color: var(--nt-text-strong);   /* hiérarchie = top-level desktop (fort) */
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 0;               /* le filet est sur le wrap -> pas de doublon */
  transition: color .2s ease;
}
html body #mobile-drawer .drawer-nav-drop-wrap > a:hover,
html body #mobile-drawer .menu-item-has-children.current-menu-item > .drawer-nav-drop-wrap > a,
html body #mobile-drawer .menu-item-has-children.current-menu-ancestor > .drawer-nav-drop-wrap > a{
  color: var(--nt-gold);
}
/* Chevron parent : cible tactile >=48px, neutre -> or quand le sous-menu est ouvert */
html body #mobile-drawer .drawer-sub-toggle{
  flex: 0 0 auto;
  color: var(--nt-text-muted);
  min-width: 48px;
  min-height: 48px;
}
html body #mobile-drawer .drawer-sub-toggle[aria-expanded="true"]{ color: var(--nt-gold); }

/* --- LOGO : dimensions bornées (token), largeur explicite (25/07) -----------
   Largeur passée de `auto` à une valeur explicite : `auto` fait dépendre le
   rendu du ratio intrinsèque résolu par le navigateur, qui peut rester périmé
   tant qu'un ancien fichier logo est encore en cache (vu en direct pendant le
   déploiement du nouveau fichier). Largeur + hauteur explicites = 0 ambiguïté. */
html body .site-branding a.brand img.custom-logo{
  height: var(--nt-logo-h);
  width: var(--nt-logo-w);
  max-width: 100%;
}
html body #mobile-header .site-branding a.brand img.custom-logo{
  height: var(--nt-logo-h-mobile);
  width: var(--nt-logo-w-mobile);
  max-width: 62vw;   /* garde-fou anti-débordement quel que soit le ratio */
}

/* ============================================================================
   MENU MOBILE + BOUTIQUE — finition (2026-07-29)
   ============================================================================ */

/* Sous-menu "Boutique" (desktop) : la largeur de lien Kadence est fixe
   (`.header-navigation ul ul li.menu-item>a{width:200px}`), pensée pour des
   sous-menus à 5-10 items où le texte le plus long impose déjà la largeur du
   panneau. Avec seulement 2 items courts, 200px serre "Litières automatiques"
   et le lien catch-all mono/uppercase. Scope strict à ce sous-menu (id réel de
   l'item "Boutique" créé le 29/07) — 0 impact sur les 5 sous-menus d'origine. */
html body .header-navigation .header-menu-container li.menu-item.menu-item-5356 ul.sub-menu li.menu-item > a{
  width: 290px;
}
/* Sous-menu "Nos sélections" (id natif 831, menu 20) : 4 items + catch-all,
   certains libellés longs ("Meubles pour animaux design") — élargi dans la
   fourchette V4-K (300-340px) pour tenir sur une ligne. */
html body .header-navigation .header-menu-container li.menu-item.menu-item-831 ul.sub-menu li.menu-item > a{
  width: 320px;
}

/* Menu mobile (29/07) : la règle "dernier lien d'un sous-menu = catch-all
   mono/uppercase" (cf. plus haut, 19/07) visait les 5 sous-menus d'origine où
   le dernier lien est toujours un "Voir tout X". Le nouveau menu mobile
   (MON ESPACE / EXPLORER / NOOKTAILS / INFORMATIONS) a des derniers-de-liste
   qui ne sont PAS des catch-all et héritaient ce style à tort :
   - Mes commandes (dernier de MON ESPACE)
   - Le Journal (dernier direct de EXPLORER — un toggle de section, pas un lien)
   - Contact (dernier de NOOKTAILS)
   - Mentions légales (dernier de INFORMATIONS)
   Reset ciblé par ID réel, aligné sur le style de leurs frères. 0 impact sur
   les vrais catch-all (Voir tous les animaux, Voir toute la boutique, etc.). */
html body #mobile-drawer .mobile-menu-container li.menu-item.menu-item-5309 > a,
html body #mobile-drawer .mobile-menu-container li.menu-item.menu-item-5343 > a,
html body #mobile-drawer .mobile-menu-container li.menu-item.menu-item-5348 > a,
html body #mobile-drawer .mobile-menu-container li.menu-item.menu-item-5355 > a,
html body #mobile-drawer .drawer-menu-container li.menu-item.menu-item-5309 > a,
html body #mobile-drawer .drawer-menu-container li.menu-item.menu-item-5343 > a,
html body #mobile-drawer .drawer-menu-container li.menu-item.menu-item-5348 > a,
html body #mobile-drawer .drawer-menu-container li.menu-item.menu-item-5355 > a{
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--nt-text-muted);
}

/* ============================================================================
   DRAWER MOBILE — Sprint UI V4 (2026-07-29)
   Révise directement le Sprint V3 (ci-dessus, historique gardé en commentaires
   pour traçabilité) : le fondateur a explicitement demandé de RETIRER les
   cartes/boîtes/blocs pleins ajoutés en V3 ("aucune carte, aucune boîte, aucun
   énorme bloc brun plein") au profit d'un drawer plat, crème uniforme, avec
   uniquement des filets fins et un accent or en texte — jamais en aplat.
   ============================================================================ */

/* --- Bloc "Accès rapides" (Boutique/Mon compte/Panier), items nk-drawer-cta
   (IDs 5359-5361). Zone compacte, lignes 52px, filets fins, PAS de fond ni de
   bordure de bloc — l'accent Boutique se lit dans le texte, pas dans un aplat. */
html body #mobile-drawer .mobile-menu-container li.menu-item.nk-drawer-cta,
html body #mobile-drawer .drawer-menu-container li.menu-item.nk-drawer-cta{
  border-bottom: 1px solid var(--nt-line);
}
html body #mobile-drawer .mobile-menu-container li.menu-item.nk-drawer-cta > a,
html body #mobile-drawer .drawer-menu-container li.menu-item.nk-drawer-cta > a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 4px;
  font-family: var(--nt-font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--nt-text-strong);
  border-bottom: 0;
}
html body #mobile-drawer .mobile-menu-container li.menu-item.nk-drawer-cta > a::after,
html body #mobile-drawer .drawer-menu-container li.menu-item.nk-drawer-cta > a::after{
  content: "→";
  font-size: 15px;
  color: var(--nt-text-faint);
  transition: transform var(--nt-transition), color var(--nt-transition);
}
html body #mobile-drawer .mobile-menu-container li.menu-item.nk-drawer-cta > a:hover::after,
html body #mobile-drawer .drawer-menu-container li.menu-item.nk-drawer-cta > a:hover::after{
  transform: translateX(3px);
  color: var(--nt-gold);
}
/* Boutique = accent texte + fine ligne or en pied de ligne — jamais un aplat
   (contrainte explicite du fondateur, V4 : "ne pas utiliser un énorme bloc
   brun plein"). L'or reste rare : seule cette ligne le porte dans le bloc. */
html body #mobile-drawer .mobile-menu-container li.menu-item.nk-drawer-cta--primary,
html body #mobile-drawer .drawer-menu-container li.menu-item.nk-drawer-cta--primary{
  border-bottom: 1px solid var(--nt-gold);
}
html body #mobile-drawer .mobile-menu-container li.menu-item.nk-drawer-cta--primary > a,
html body #mobile-drawer .drawer-menu-container li.menu-item.nk-drawer-cta--primary > a{
  color: var(--nt-gold);
  font-weight: 600;
}
html body #mobile-drawer .mobile-menu-container li.menu-item.nk-drawer-cta--primary > a::after,
html body #mobile-drawer .drawer-menu-container li.menu-item.nk-drawer-cta--primary > a::after{
  color: var(--nt-gold);
}

/* --- Titres de section (MON ESPACE / EXPLORER / NOOKTAILS / INFORMATIONS) —
   10-11px, majuscules, tracking .16em, poids 600, couleur secondaire, filet
   fin optionnel en pied (porté par le <li> lui-même, pas une boîte séparée). */
html body #mobile-drawer .mobile-menu-container > ul > li.menu-item:not(.nk-drawer-cta) > .drawer-nav-drop-wrap > a,
html body #mobile-drawer .drawer-menu-container > ul > li.menu-item:not(.nk-drawer-cta) > .drawer-nav-drop-wrap > a{
  padding-block: 4px;
  font-family: var(--nt-font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nt-text-muted);
}
/* Section ouverte : accent or en texte (grammaire d'état actif du site — l'or
   marque l'état, jamais un fond). */
html body #mobile-drawer .mobile-menu-container > ul > li.menu-item:has(> .drawer-nav-drop-wrap > button[aria-expanded="true"]) > .drawer-nav-drop-wrap > a,
html body #mobile-drawer .drawer-menu-container > ul > li.menu-item:has(> .drawer-nav-drop-wrap > button[aria-expanded="true"]) > .drawer-nav-drop-wrap > a{
  color: var(--nt-gold);
}
/* Respiration entre les 4 sections + sous les titres (spec V4 : 32-40px entre
   sections, filet très discret entre chaque). */
html body #mobile-drawer .mobile-menu-container > ul > li.menu-item:not(.nk-drawer-cta),
html body #mobile-drawer .drawer-menu-container > ul > li.menu-item:not(.nk-drawer-cta){
  border-bottom: 1px solid var(--nt-line);
  padding-block: 6px;
}
html body #mobile-drawer .mobile-menu-container > ul > li.menu-item:not(.nk-drawer-cta) > .drawer-nav-drop-wrap,
html body #mobile-drawer .drawer-menu-container > ul > li.menu-item:not(.nk-drawer-cta) > .drawer-nav-drop-wrap{
  padding-block: 8px;
}

/* --- Liens de niveau 2 : uniformisés (16-17px/500/casse normale), déjà
   couvert par la règle générale plus haut dans ce fichier (".mobile-menu-
   container ul ul li.menu-item > a") — ajustée ici au gabarit V4 exact. --- */
html body #mobile-drawer .mobile-menu-container ul ul li.menu-item > a,
html body #mobile-drawer .drawer-menu-container ul ul li.menu-item > a{
  font-size: 16px;
  font-weight: 500;
  min-height: 52px;
  padding-inline-start: 18px;
  color: var(--nt-text);
}

/* --- Chevrons : fins, 15px, aucun carré/contour — la cible tactile 44px reste
   portée par le <button>, invisible, l'icône visuelle est plus petite que sa
   zone de tap (pattern accessible standard). --- */
html body #mobile-drawer .drawer-sub-toggle{
  background: transparent;
  border: 0;
}
html body #mobile-drawer .drawer-sub-toggle .kadence-svg-iconset{
  width: 15px;
  height: 15px;
}
html body #mobile-drawer .drawer-sub-toggle svg{
  width: 15px;
  height: 15px;
  transition: transform var(--nt-transition);
}
html body #mobile-drawer .drawer-sub-toggle[aria-expanded="true"] svg{
  transform: rotate(180deg);
}

/* --- Croix de fermeture : trait fin, cible 44px, aucun carré permanent. --- */
html body #mobile-drawer .menu-toggle-close{
  background: transparent;
  border: 0;
  width: 44px;
  height: 44px;
}
html body #mobile-drawer .menu-toggle-close svg{
  width: 18px;
  height: 18px;
}

/* --- Largeur/fond du drawer (spec V4-E) : plein écran petits mobiles, borné
   420px au-delà, fond crème uniforme (déjà var(--nt-bg), token DA V9). --- */
@media (min-width: 480px){
  html body #mobile-drawer .drawer-content{
    max-width: 420px;
  }
}

/* ============================================================================
   HEADER MOBILE — Sprint UI V4 (2026-07-29)
   Header calme : respiration, icônes sobres alignées, cibles tactiles 44px,
   aucun fond/contour au repos. Les 3 icônes (loupe/panier/burger) normalisées
   à la même taille visuelle (19-21px) pour un poids homogène.
   ============================================================================ */
html body #mobile-header .site-main-header-inner-wrap.site-header-row{
  min-height: 70px;
  padding-inline: 20px;
}
/* Loupe recherche (29/07, arbitrage design) : icône native Kadence masquée
   (opacity, DOM/attributs/clic intacts — 0 modification du HTML généré),
   remplacée visuellement par un tracé fin dessiné sur mesure (trait 1.6px,
   cercle 18px, manche court, style Apple) via mask-image. Couleur pilotée
   par background-color (tokens), pas par un hex figé dans le SVG. */
html body #mobile-header .search-toggle-open .kadence-svg-iconset,
html body #mobile-header .search-toggle-open svg{
  opacity: 0;
  width: 20px;
  height: 20px;
}
html body #mobile-header .search-toggle-open{
  position: relative;
}
html body #mobile-header .search-toggle-open::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  background-color: var(--nt-text);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cline x1='11.6' y1='11.6' x2='15.5' y2='15.5' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cline x1='11.6' y1='11.6' x2='15.5' y2='15.5' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: background-color var(--nt-transition);
}
html body #mobile-header .search-toggle-open:hover::before,
html body #mobile-header .search-toggle-open:focus-visible::before{
  background-color: var(--nt-gold);
}
html body #mobile-header .header-cart-button .kadence-svg-iconset,
html body #mobile-header .header-cart-button svg{
  width: 20px;
  height: 20px;
}
html body #mobile-header .menu-toggle-open .kadence-svg-iconset,
html body #mobile-header .menu-toggle-open svg{
  width: 20px;
  height: 20px;
}
html body #mobile-header .search-toggle-open,
html body #mobile-header .header-cart-button,
html body #mobile-header .menu-toggle-open{
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
}
/* Badge panier : chiffre en badge propre coin haut-droit de l'icône, pas
   flottant à côté (spec V4-C). */
html body #mobile-header .header-cart-button{
  position: relative;
}
html body #mobile-header .header-cart-button .header-cart-total{
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nt-gold);
  color: var(--nt-bg);
  font-family: var(--nt-font-ui);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--nt-radius-pill, 999px);   /* seul badge numérique du site — pas une "carte", un compteur fonctionnel */
}
/* 0 article : compteur natif affiche "0" en permanence — masqué à la source
   via la classe déjà posée par Kadence (header-cart-is-empty-true), sans
   toucher au comportement/logique du panier. */
html body #mobile-header .header-cart-button .header-cart-is-empty-true.header-cart-total{
  display: none;
}

/* ============================================================================
   RECHERCHE MOBILE — Sprint UI V4 (2026-07-29)
   Même mécanisme Kadence natif (ouverture/fermeture/focus-trap/ARIA/clavier
   inchangés) — restylé pour ne plus rien laisser paraître de Kadence : plein
   écran crème, en-tête sobre, champ intégré, plus de bouton loupe séparé.
   ============================================================================ */

/* Overlay/panneau : crème plein écran, plus d'écran noir résiduel possible. */
html body #search-drawer .drawer-content{
  max-width: 640px;
  margin-inline: auto;
  width: 100%;
}

/* Titre "Rechercher" injecté par nk-live-search.js (.nk-search-title) — sobre,
   police éditoriale, au-dessus du champ. */
#search-drawer .nk-search-title{
  margin: 0 0 1.25rem;
  padding: 0 4px;
  font-family: var(--nt-font-heading);
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 400;
  color: var(--nt-text-strong);
}

/* Champ : 56px, rayon discret 10px, bordure fine, PLUS de coupure visuelle
   avec le bouton (icône désormais à gauche, cf. order ci-dessous). */
#search-drawer .search-field{
  height: 56px;
  border-radius: var(--nt-radius-sm);
  border-right: 1px solid var(--nt-line);   /* annule le "border-right:0" (V3, bouton à droite) */
  border-left: 0;
  padding-inline-start: 4px;
}
body #search-drawer .drawer-inner input.search-field{ padding-inline-start: 4px; }

/* Icône intégrée à GAUCHE du champ (spec V4-J) : le <button>.search-submit
   Kadence reste le même élément fonctionnel (submit natif), juste réordonné
   visuellement en tête du form via `order` — 0 reconstruction, 0 doublon. */
body #search-drawer .drawer-inner .search-form{
  display: flex;
  align-items: center;
}
#search-drawer .search-submit{
  order: -1;
  width: 56px;
  min-width: 56px;
  height: 56px;
  background: var(--nt-surface-1);
  border: 1px solid var(--nt-line);
  border-right: 0;
  border-radius: var(--nt-radius-sm) 0 0 var(--nt-radius-sm);
}
body #search-drawer .drawer-inner .search-submit[type="submit"]{ width: 56px; }
body #search-drawer .drawer-inner .kadence-search-icon-wrap{
  width: 56px;
  height: 56px;
}

/* Rayon du champ à droite (le bouton porte le rayon gauche ci-dessus). */
#search-drawer .search-field{
  border-radius: 0 var(--nt-radius-sm) var(--nt-radius-sm) 0;
}