/*! Natural Fawaid · Brand 2026 · shell.css (header, fil d'Ariane, footer)
    Fichier généré par build.sh le 2026-09-28. Ne pas modifier directement.
    Sources : tokens/*.css (portée limitée au shell) puis components/shell.css */

/* ---- source : tokens/colors.css (portée : shell) ---- */
/* ==========================================================================
   Natural Fawaid · Brand 2026 · Couleurs
   Source : landing Stimielant (campagnes/stimielant/assets/css/landing.css)
   Deux niveaux : primitives (valeurs brutes) puis tokens sémantiques (rôles).
   Dans les pages, utilisez TOUJOURS les tokens sémantiques --nf-color-*.
   ========================================================================== */

.nf-header, .nf-breadcrumb, .nf-notice, .nf-footer, .nf-skip-link {
  /* ---------- Primitives : noirs et bruns (fonds) ---------- */
  --nf-noir-950:   #0D0A07;  /* Noir Ébène     · fond principal */
  --nf-noir-900:   #15100B;  /* Noir Torréfié  · fond secondaire */
  --nf-brun-800:   #1E1710;  /* Brun Datte     · surfaces, cartes */
  --nf-brun-700:   #2A2016;  /* Brun Ajwa      · surface surélevée (normalisé : défini, non utilisé dans la landing) */

  /* ---------- Primitives : ors (marque) ---------- */
  --nf-or-300:     #E4C893;  /* Or Miel Clair  · reflets, prix, hover, focus */
  --nf-or-500:     #C9A063;  /* Or Sidr        · couleur principale de marque */
  --nf-or-600:     #A87A42;  /* Or Ambré       · fin du dégradé or */
  --nf-or-700:     #9A6B35;  /* Or Bronze      · éléments graphiques sur fond clair (pas de petit texte) */
  --nf-or-800:     #7A5427;  /* Bronze Profond · texte or sur fond clair (normalisé : correction de contraste) */

  /* ---------- Primitives : crèmes (fonds clairs, texte sur sombre) ---------- */
  --nf-creme-50:   #FBF6EE;  /* Blanc Papier   · cartes sur fond clair */
  --nf-creme-100:  #F5ECDF;  /* Crème Cire     · texte principal sur sombre, fond des sections claires */
  --nf-creme-200:  #EADDC8;  /* Crème Lin      · fond clair alternatif (normalisé : défini, non utilisé) */

  /* ---------- Primitives : neutres chauds (textes) ---------- */
  --nf-sable-400:  #C2B5A2;  /* Sable          · texte secondaire sur sombre */
  --nf-pierre-500: #8F8372;  /* Pierre         · texte discret, mentions légales (sur sombre uniquement) */
  --nf-encre-700:  #5B4A37;  /* Encre Brune    · texte secondaire sur clair */
  --nf-encre-950:  #1C150E;  /* Encre          · texte principal sur clair */

  /* ---------- Primitive : accent ---------- */
  --nf-sceau-700:  #8E1C1F;  /* Rouge Sceau    · accent rare, issu du sceau du logo */

  /* ---------- Primitives : statuts (normalisés, absents de la landing) ---------- */
  --nf-vert-300:   #9DBB7A;  /* succès sur sombre  (9.2:1 sur noir-950) */
  --nf-vert-700:   #4E6B32;  /* succès sur clair   (5.2:1 sur creme-100) */
  --nf-rouge-300:  #E08A7E;  /* erreur sur sombre  (7.6:1 sur noir-950) */

  /* ---------- Dégradés et lumières (valeurs exactes de la landing) ---------- */
  --nf-gradient-gold: linear-gradient(135deg, #E4C893 0%, #C9A063 45%, #A87A42 100%);
  --nf-gradient-edge: linear-gradient(90deg, transparent, rgba(201, 160, 99, 0.7), transparent);
  --nf-gradient-card: linear-gradient(180deg, var(--nf-brun-800) 0%, var(--nf-noir-900) 100%);
  --nf-glow-hero:     radial-gradient(ellipse 80% 55% at 50% 18%, rgba(201, 160, 99, 0.14), transparent 70%);
  --nf-glow-center:   radial-gradient(ellipse 70% 60% at 50% 40%, rgba(201, 160, 99, 0.16), transparent 70%);
  --nf-glow-product:  radial-gradient(circle, rgba(201, 160, 99, 0.28), transparent 65%);

}

/* ==========================================================================
   Tokens sémantiques · thème sombre (thème par défaut de la marque)
   .nf-theme-dark permet de revenir au sombre dans une zone claire.
   Les cartes sombres et la carte produit forcent toujours ce thème.
   ========================================================================== */
.nf-header, .nf-breadcrumb, .nf-notice, .nf-footer, .nf-skip-link,
.nf-theme-dark,
.nf-card,
.nf-product-card {

  /* Fonds */
  --nf-color-bg:                 var(--nf-noir-950);
  --nf-color-bg-alt:             var(--nf-noir-900);
  --nf-color-surface:            var(--nf-brun-800);
  --nf-color-surface-raised:     var(--nf-brun-700);
  --nf-color-surface-soft:       rgba(30, 23, 16, 0.6);   /* encarts translucides (bloc « rituel ») */
  --nf-color-surface-glass:      rgba(13, 10, 7, 0.72);   /* header au repos */
  --nf-color-surface-glass-strong: rgba(13, 10, 7, 0.9);  /* header après défilement */
  --nf-color-surface-float:      rgba(21, 16, 11, 0.82);  /* barre CTA flottante */

  /* Textes */
  --nf-color-text:               var(--nf-creme-100);
  --nf-color-heading:            var(--nf-creme-100);
  --nf-color-text-muted:         var(--nf-sable-400);
  --nf-color-text-subtle:        var(--nf-pierre-500);

  /* Marque */
  --nf-color-brand:              var(--nf-or-500);   /* or de référence */
  --nf-color-brand-text:         var(--nf-or-500);   /* or utilisé en texte (labels, numéros) */
  --nf-color-brand-strong:       var(--nf-or-300);   /* prix, citations, hover des liens */
  --nf-color-accent:             var(--nf-sceau-700);
  --nf-color-on-brand:           var(--nf-noir-950); /* texte posé sur l'or */
  --nf-color-tint:               rgba(201, 160, 99, 0.07); /* fond des tags */

  /* Lignes */
  --nf-color-border:             rgba(201, 160, 99, 0.22);
  --nf-color-border-strong:      rgba(201, 160, 99, 0.45);
  --nf-color-divider:            rgba(201, 160, 99, 0.22);

  /* Interaction */
  --nf-color-link:               var(--nf-color-text-muted);
  --nf-color-link-hover:         var(--nf-or-300);
  --nf-color-focus:              var(--nf-or-300);

  /* Statuts */
  --nf-color-success:            var(--nf-vert-300);
  --nf-color-warning:            var(--nf-or-300);
  --nf-color-error:              var(--nf-rouge-300);
}

/* ==========================================================================
   Thème clair · à poser sur une section (.nf-section--light) ou un bloc.
   Les composants lisent les mêmes tokens : ils s'adaptent automatiquement.
   ========================================================================== */
.nf-theme-light,
.nf-section--light {
  --nf-color-bg:            var(--nf-creme-100);
  --nf-color-bg-alt:        var(--nf-creme-200);
  --nf-color-surface:       var(--nf-creme-50);
  --nf-color-surface-raised: var(--nf-creme-50);
  --nf-color-surface-soft:  var(--nf-creme-50);

  --nf-color-text:          var(--nf-encre-950);
  --nf-color-heading:       var(--nf-encre-950);
  --nf-color-text-muted:    var(--nf-encre-700);
  --nf-color-text-subtle:   var(--nf-encre-700);

  --nf-color-brand-text:    var(--nf-or-800);
  --nf-color-brand-strong:  var(--nf-or-800);
  --nf-color-accent:        var(--nf-sceau-700);
  --nf-color-tint:          rgba(154, 107, 53, 0.08);

  --nf-color-border:        rgba(28, 21, 14, 0.14);
  --nf-color-border-strong: rgba(28, 21, 14, 0.28);
  --nf-color-divider:       rgba(28, 21, 14, 0.14);

  --nf-color-link:          var(--nf-encre-700);
  --nf-color-link-hover:    var(--nf-or-800);
  --nf-color-focus:         var(--nf-or-800);

  --nf-color-success:       var(--nf-vert-700);
  --nf-color-warning:       var(--nf-or-800);
  --nf-color-error:         var(--nf-sceau-700);
}

/* ---- source : tokens/typography.css (portée : shell) ---- */
/* ==========================================================================
   Natural Fawaid · Brand 2026 · Typographie
   Valeurs exactes de la landing Stimielant. Les niveaux marqués « normalisé »
   n'existaient pas tels quels et ont été déduits de l'échelle existante.
   ========================================================================== */

.nf-header, .nf-breadcrumb, .nf-notice, .nf-footer, .nf-skip-link {
  /* ---------- Familles ---------- */
  /* Titres : police de marque du thème WordPress, puis repli élégant. */
  --nf-font-display: "EFCO Brookshire", "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  /* Texte : Nunito Sans, auto-hébergée dans assets/fonts (400, 600, 700). */
  --nf-font-body:    "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Graisses ---------- */
  --nf-weight-regular:  400;  /* titres (police display) et texte courant */
  --nf-weight-semibold: 600;  /* sous-titres, tags, liens de navigation */
  --nf-weight-bold:     700;  /* boutons, labels, questions FAQ, mots clés */

  /* ---------- Échelle ---------- */
  /*                         mobile 390px     desktop     */
  --nf-text-display:  clamp(3.1rem, 15vw, 5.75rem);   /* 58px → 92px  · nom de produit, hero */
  --nf-text-h1:       clamp(2.5rem, 9vw, 4rem);       /* 40px → 64px  · normalisé : H1 hors hero */
  --nf-text-h2:       clamp(2rem, 7vw, 3.25rem);      /* 32px → 52px  · titres de section */
  --nf-text-h3:       1.5rem;                         /* 24px         · titres de carte */
  --nf-text-h4:       1.3rem;                         /* 21px         · titres de carte claire, petits blocs */
  --nf-text-quote:    clamp(1.45rem, 5vw, 1.9rem);    /* 23px → 30px  · citation */
  --nf-text-price:    2rem;                           /* 32px         · prix */
  --nf-text-lead:     clamp(1.1rem, 4vw, 1.3rem);     /* 18px → 21px  · texte d'accroche */
  --nf-text-subtitle: clamp(1.02rem, 3.8vw, 1.25rem); /* 16px → 20px  · sous-titre du hero */
  --nf-text-body:     1.0625rem;                      /* 17px         · texte courant */
  --nf-text-sm:       0.95rem;                        /* 15px         · texte de carte, footer */
  --nf-text-caption:  0.875rem;                       /* 14px         · normalisé depuis 0.85 / 0.88rem : notes, tags */
  --nf-text-micro:    0.8rem;                         /* 13px         · mentions légales */
  --nf-text-label:    0.78rem;                        /* 12.5px       · eyebrow, labels majuscules */
  --nf-text-button:   1rem;                           /* 16px         · bouton standard */
  --nf-text-button-lg: 1.05rem;                       /* 17px         · bouton large */
  --nf-text-button-sm: 0.9rem;                        /* 14.5px       · bouton compact (header) */
  --nf-text-brand:    1.15rem;                        /* 18px         · nom « Natural Fawaid » à côté du sceau */

  /* ---------- Interlignages ---------- */
  --nf-leading-display: 0.95;
  --nf-leading-h1:      1.05;  /* normalisé */
  --nf-leading-heading: 1.1;
  --nf-leading-h3:      1.2;   /* normalisé */
  --nf-leading-quote:   1.25;
  --nf-leading-tight:   1.4;   /* sous-titres */
  --nf-leading-body:    1.65;

  /* ---------- Espacements de lettres ---------- */
  --nf-tracking-display: 0.02em;
  --nf-tracking-heading: 0.005em;
  --nf-tracking-brand:   0.04em;
  --nf-tracking-number:  0.08em;  /* numéros de carte « 01 » */
  --nf-tracking-button:  0.02em;
  --nf-tracking-data:    0.16em;  /* labels de fiche (Couleur, Texture…) */
  --nf-tracking-label:   0.18em;  /* eyebrow */
}

/* ---- source : tokens/spacing.css (portée : shell) ---- */
/* ==========================================================================
   Natural Fawaid · Brand 2026 · Espacements, mise en page, rayons
   Base 4px. Les paliers correspondent aux valeurs réellement employées
   dans la landing (0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 6, 7.5rem).
   ========================================================================== */

.nf-header, .nf-breadcrumb, .nf-notice, .nf-footer, .nf-skip-link {
  /* ---------- Échelle d'espacement ---------- */
  --nf-space-1:  0.25rem;  /*   4px · micro écart (footer nav vertical) */
  --nf-space-2:  0.5rem;   /*   8px · entre tags, petit gap */
  --nf-space-3:  0.75rem;  /*  12px · entre boutons empilés, items FAQ */
  --nf-space-4:  1rem;     /*  16px · gap de grille de cartes, eyebrow → titre */
  --nf-space-5:  1.25rem;  /*  20px · gouttière mobile, gap cartes tablette */
  --nf-space-6:  1.5rem;   /*  24px · padding de carte, encart */
  --nf-space-8:  2rem;     /*  32px · gouttière tablette+, titre → contenu */
  --nf-space-10: 2.5rem;   /*  40px · gap entre colonnes (mobile) */
  --nf-space-12: 3rem;     /*  48px · gap hero desktop, padding footer */
  --nf-space-14: 3.5rem;   /*  56px · titre de section → grille (desktop) */
  --nf-space-16: 4rem;     /*  64px · padding vertical de section (mobile) */
  --nf-space-18: 4.5rem;   /*  72px · gap entre colonnes (desktop) */
  --nf-space-24: 6rem;     /*  96px · bas du hero (desktop) */
  --nf-space-30: 7.5rem;   /* 120px · padding vertical de section (desktop) */

  /* ---------- Mise en page ---------- */
  --nf-container-max: 1180px;                     /* largeur max du contenu */
  --nf-content-max:   760px;                      /* colonne de lecture, FAQ, texte centré */
  --nf-head-max:      640px;                      /* bloc titre de section */
  --nf-cta-max:       560px;                      /* bloc CTA final */
  --nf-text-max:      34rem;                      /* paragraphe d'accroche (≈ 60 caractères) */
  --nf-btn-max:       380px;                      /* bouton pleine largeur plafonné */
  --nf-gutter:        1.25rem;                    /* 20px mobile, 32px ≥ 640px */
  --nf-section-y:     clamp(4rem, 10vw, 7.5rem);  /* 64px → 120px */
  --nf-section-head-gap: clamp(2.25rem, 6vw, 3.5rem);
  --nf-header-h:      64px;                       /* 76px ≥ 960px */

  /* ---------- Rayons ---------- */
  --nf-radius-xs:     4px;     /* anneau de focus */
  --nf-radius-sm:     10px;    /* FAQ, champs de formulaire, petits blocs */
  --nf-radius-md:     18px;    /* cartes, images, encarts */
  --nf-radius-lg:     24px;    /* normalisé : grands conteneurs (non utilisé dans la landing) */
  --nf-radius-full:   100px;   /* boutons, tags, barre flottante */
  --nf-radius-circle: 50%;     /* pastilles d'icônes, puces */

  /* ---------- Points de rupture (référence, non utilisables dans @media) ---------- */
  --nf-bp-tablet:  640px;
  --nf-bp-desktop: 960px;
}

@media (min-width: 640px) {
  .nf-header, .nf-breadcrumb, .nf-notice, .nf-footer, .nf-skip-link { --nf-gutter: 2rem; }
}

@media (min-width: 960px) {
  .nf-header, .nf-breadcrumb, .nf-notice, .nf-footer, .nf-skip-link { --nf-header-h: 76px; }
}

/* ---- source : tokens/effects.css (portée : shell) ---- */
/* ==========================================================================
   Natural Fawaid · Brand 2026 · Ombres, flous, mouvement
   Règle : sur fond sombre, l'élévation passe par la bordure or et le
   dégradé de surface, pas par l'ombre. Les ombres sont réservées aux CTA,
   aux éléments flottants, aux survols sur fond clair et aux packshots.
   ========================================================================== */

.nf-header, .nf-breadcrumb, .nf-notice, .nf-footer, .nf-skip-link {
  /* ---------- Ombres (valeurs exactes de la landing) ---------- */
  --nf-shadow-sm: 0 8px 22px -14px rgba(28, 21, 14, 0.35);    /* survol d'un bloc sur fond clair (FAQ) */
  --nf-shadow-md: 0 6px 20px -8px rgba(201, 160, 99, 0.55);   /* bouton or au repos */
  --nf-shadow-lg: 0 10px 26px -8px rgba(201, 160, 99, 0.65);  /* bouton or au survol */
  --nf-shadow-xl: 0 14px 34px -12px rgba(0, 0, 0, 0.7);       /* élément flottant (barre CTA mobile) */

  /* Ombres portées de packshot détouré (à utiliser dans filter:) */
  --nf-shadow-product:    drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
  --nf-shadow-product-sm: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.6));

  /* ---------- Verre dépoli ---------- */
  --nf-blur-glass: blur(14px) saturate(140%);  /* header */
  --nf-blur-float: blur(16px) saturate(140%);  /* barre CTA flottante */

  /* ---------- Textures ---------- */
  --nf-texture-opacity-hero:  0.16;
  --nf-texture-opacity-final: 0.12;
  --nf-texture-opacity-soft:  0.10;

  /* ---------- Mouvement ---------- */
  --nf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);  /* unique courbe de la marque */

  --nf-duration-fast:     200ms;   /* couleur des liens */
  --nf-duration-base:     250ms;   /* boutons, icône flèche, survol FAQ */
  --nf-duration-moderate: 300ms;   /* header, chevron FAQ */
  --nf-duration-medium:   350ms;   /* cartes, barre dorée FAQ */
  --nf-duration-slow:     400ms;   /* barre CTA flottante */
  --nf-duration-reveal:   800ms;   /* apparition des sections, zoom image */
  --nf-duration-entrance: 900ms;   /* entrée des textes du hero */
  --nf-duration-product:  1100ms;  /* entrée du packshot du hero */
  --nf-duration-pulse:    2800ms;  /* halo du CTA final */
  --nf-stagger:           80ms;    /* décalage entre éléments d'une même série */

  --nf-transition-fast: var(--nf-duration-fast) var(--nf-ease);
  --nf-transition-base: var(--nf-duration-base) var(--nf-ease);
  --nf-transition-slow: var(--nf-duration-slow) var(--nf-ease);

  /* ---------- Superposition ---------- */
  --nf-z-header: 50;
  --nf-z-float:  60;
  --nf-z-skip:   100;
}

/* ---- source : components/shell.css ---- */
/* ==========================================================================
   Natural Fawaid · Brand 2026 · Shell (composants communs du site)
   NF Header · NF Breadcrumb · NF Footer · lien d'évitement
   --------------------------------------------------------------------------
   Utilisé par TOUTES les pages hors WordPress (landings, campagnes, guides,
   outils) via /natural-fawaid-brand/shell.css, généré par build.sh.
   Les tokens de la marque sont déclarés SUR les composants (et non sur :root)
   pour ne jamais entrer en conflit avec les variables historiques d'une page
   (ex. --nf-radius-md à 10px dans les anciennes landings).
   Toutes les propriétés visibles sont posées explicitement : une page peut
   avoir ses propres règles « a », « ul », « nav »… sans casser le shell.
   Ajout 2026.2 (28/09/2026).
   ========================================================================== */

/* ---------- Polices (auto-hébergées, woff2) ---------- */
@font-face {
  font-family: "EFCO Brookshire";
  src: url("./assets/fonts/efco-brookshire.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("./assets/fonts/nunito-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("./assets/fonts/nunito-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("./assets/fonts/nunito-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Isolation minimale ---------- */
.nf-header, .nf-header *, .nf-header *::before, .nf-header *::after,
.nf-notice, .nf-notice *,
.nf-breadcrumb, .nf-breadcrumb *, .nf-breadcrumb *::before, .nf-breadcrumb *::after,
.nf-footer, .nf-footer *, .nf-footer *::before, .nf-footer *::after,
.nf-skip-link { box-sizing: border-box; }

.nf-header, .nf-breadcrumb, .nf-footer {
  font-family: var(--nf-font-body);
  font-weight: var(--nf-weight-regular);
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.nf-header ul, .nf-breadcrumb ol, .nf-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nf-header li, .nf-breadcrumb li, .nf-footer li { margin: 0; padding: 0; }
.nf-header p, .nf-footer p { margin: 0; }
.nf-header img, .nf-footer img { display: block; max-width: 100%; height: auto; border: 0; box-shadow: none; filter: none; }

.nf-shell-container {
  width: 100%;
  max-width: var(--nf-container-max);
  margin: 0 auto;
  padding: 0 var(--nf-gutter);
}

/* ---------- Lien d'évitement ---------- */
.nf-skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: var(--nf-z-skip);
  padding: 0.75rem 1rem;
  background: var(--nf-or-500);
  color: var(--nf-noir-950);
  font-family: var(--nf-font-body);
  font-weight: var(--nf-weight-bold);
  border-radius: var(--nf-radius-sm);
  text-decoration: none;
}
.nf-skip-link:focus { top: 1rem; }

/* ==========================================================================
   NF HEADER
   Sticky (dans le flux) : fonctionne sur toutes les pages, sans décalage à
   prévoir. Verre sombre + bordure or. Pas de menu burger (règle de marque) :
   sous 960px, seuls le sceau et le bouton restent ; la navigation complète
   est dans le footer et le fil d'Ariane.
   ========================================================================== */
.nf-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--nf-z-header);
  height: var(--nf-header-h);
  background: var(--nf-color-surface-glass-strong);
  -webkit-backdrop-filter: var(--nf-blur-glass);
  backdrop-filter: var(--nf-blur-glass);
  border-bottom: 1px solid var(--nf-color-border);
  color: var(--nf-color-text);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nf-header { background: rgba(13, 10, 7, 0.97); }
}
.nf-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nf-space-4);
  height: 100%;
}
.nf-header .nf-brand { display: inline-flex; align-items: center; gap: 0.7rem; min-width: 0; text-decoration: none; color: var(--nf-color-text); }
.nf-brand__seal { width: 40px; height: auto; flex: 0 0 auto; }
.nf-brand__name {
  font-family: var(--nf-font-display);
  font-weight: var(--nf-weight-regular);
  font-size: var(--nf-text-brand);
  letter-spacing: var(--nf-tracking-brand);
  color: var(--nf-color-text);
  white-space: nowrap;
}
.nf-header__nav { display: flex; align-items: center; gap: var(--nf-space-6); min-width: 0; }
.nf-header__menu { display: none; }
.nf-header__link {
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--nf-color-text-muted);
  font-size: 0.92rem;
  font-weight: var(--nf-weight-semibold);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--nf-transition-fast), border-color var(--nf-transition-fast);
}
.nf-header__link:hover { color: var(--nf-color-link-hover); }
.nf-header__link[aria-current="page"],
.nf-header__link[aria-current="true"] { color: var(--nf-color-text); border-bottom-color: var(--nf-or-500); }
.nf-header__link:focus-visible,
.nf-header .nf-brand:focus-visible,
.nf-breadcrumb a:focus-visible,
.nf-footer a:focus-visible {
  outline: 2px solid var(--nf-color-focus);
  outline-offset: 3px;
  border-radius: var(--nf-radius-xs);
}

/* Bouton du header : Primary compact de la marque (scopé au shell) */
.nf-header .nf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: auto;
  min-height: 44px;
  margin: 0;
  padding: 0.55rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--nf-radius-full);
  background: var(--nf-gradient-gold);
  color: var(--nf-color-on-brand);
  font-family: var(--nf-font-body);
  font-size: var(--nf-text-button-sm);
  font-weight: var(--nf-weight-bold);
  line-height: 1.2;
  letter-spacing: var(--nf-tracking-button);
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--nf-shadow-md);
  cursor: pointer;
  transition: transform var(--nf-transition-base), box-shadow var(--nf-transition-base);
}
.nf-header .nf-btn:hover { transform: translateY(-2px); box-shadow: var(--nf-shadow-lg); color: var(--nf-color-on-brand); }
.nf-header .nf-btn:active { transform: translateY(0); box-shadow: var(--nf-shadow-md); }
.nf-header .nf-btn:focus-visible { outline: 2px solid var(--nf-color-focus); outline-offset: 3px; }
.nf-header .nf-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Très petits écrans (320–380px) : le header reste sur une ligne */
@media (max-width: 380px) {
  .nf-header__inner { gap: var(--nf-space-3); }
  .nf-brand__name { font-size: 1rem; }
  .nf-header .nf-btn { padding: 0.5rem 0.95rem; }
  .nf-header .nf-btn svg { display: none; }
}
@media (max-width: 359px) {
  .nf-header .nf-brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (min-width: 960px) {
  .nf-brand__seal { width: 46px; }
  .nf-header__menu { display: flex; align-items: center; gap: var(--nf-space-5); }
}

/* ==========================================================================
   NF BREADCRUMB (fil d'Ariane)
   Bande fine sous le header. Reprend exactement le BreadcrumbList JSON-LD.
   ========================================================================== */
.nf-breadcrumb {
  background: var(--nf-noir-900);
  border-bottom: 1px solid var(--nf-color-border);
  color: var(--nf-color-text-muted);
  font-size: var(--nf-text-caption);
}
.nf-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.nf-breadcrumb__item { display: inline-flex; align-items: center; min-width: 0; }
.nf-breadcrumb__item + .nf-breadcrumb__item::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.7rem 0 0.55rem;
  border-top: 1.5px solid var(--nf-or-500);
  border-right: 1.5px solid var(--nf-or-500);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.nf-breadcrumb a {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--nf-color-text-muted);
  text-decoration: none;
  transition: color var(--nf-transition-fast);
}
.nf-breadcrumb a:hover { color: var(--nf-color-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.nf-breadcrumb [aria-current="page"] { color: var(--nf-color-text); font-weight: var(--nf-weight-semibold); }

/* ==========================================================================
   NF FOOTER
   Navigation secondaire : Produits · Guides · Aide, puis réseaux, légal,
   mention YMYL et crédit. Mobile : colonnes empilées ; 640px : 2 colonnes ;
   960px : marque + 3 colonnes.
   ========================================================================== */
.nf-footer {
  background: var(--nf-color-bg);
  border-top: 1px solid var(--nf-color-border);
  color: var(--nf-color-text-muted);
  font-size: var(--nf-text-sm);
  padding: var(--nf-space-12) 0 var(--nf-space-10);
}
.nf-footer__grid { display: grid; gap: var(--nf-space-8); }
.nf-footer .nf-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--nf-color-text); }
.nf-footer .nf-brand__seal { width: 48px; }
.nf-footer__tagline { margin-top: var(--nf-space-3); max-width: 22rem; color: var(--nf-color-text-muted); font-size: var(--nf-text-sm); line-height: 1.6; }
.nf-footer__social { display: flex; flex-wrap: wrap; gap: var(--nf-space-2) var(--nf-space-5); margin-top: var(--nf-space-5); }
.nf-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nf-space-8) var(--nf-space-5); }
.nf-footer__cols > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.nf-footer__title {
  margin: 0 0 var(--nf-space-3);
  color: var(--nf-or-500);
  font-family: var(--nf-font-body);
  font-size: var(--nf-text-label);
  font-weight: var(--nf-weight-bold);
  letter-spacing: var(--nf-tracking-label);
  text-transform: uppercase;
}
.nf-footer__col ul { display: grid; gap: 0.1rem; }
.nf-footer a {
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--nf-color-text);
  font-size: var(--nf-text-sm);
  font-weight: var(--nf-weight-regular);
  text-decoration: none;
  transition: color var(--nf-transition-fast);
}
.nf-footer a:hover { color: var(--nf-color-link-hover); }
.nf-footer__social a { color: var(--nf-color-text-muted); font-weight: var(--nf-weight-semibold); }
.nf-footer__bottom {
  display: grid;
  gap: var(--nf-space-3);
  margin-top: var(--nf-space-10);
  padding-top: var(--nf-space-6);
  border-top: 1px solid var(--nf-color-divider);
  color: var(--nf-color-text-subtle);
  font-size: var(--nf-text-micro);
}
.nf-footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--nf-space-5); }
.nf-footer__legal a { color: var(--nf-color-text-muted); font-size: var(--nf-text-micro); }
.nf-footer__note { color: var(--nf-sable-400); font-size: var(--nf-text-micro); line-height: 1.6; }
.nf-footer__credit a { display: inline; padding: 0; color: var(--nf-or-500); font-size: var(--nf-text-micro); font-weight: var(--nf-weight-semibold); }
/* Espace sous le footer pour une barre CTA mobile flottante éventuelle */
.nf-footer--float-space { padding-bottom: 104px; }

@media (min-width: 640px) {
  .nf-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nf-space-6); }
  .nf-footer__cols > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 960px) {
  .nf-footer__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: var(--nf-space-12); }
  .nf-footer--float-space { padding-bottom: var(--nf-space-10); }
  .nf-footer__bottom { grid-template-columns: 1fr auto; align-items: end; }
  .nf-footer__bottom .nf-footer__legal { grid-column: 1 / -1; }
}


/* ==========================================================================
   NF NOTICE (bandeau d'information sous le fil d'Ariane)
   Usage : offre terminée, information de service. Pas de rouge : l'or suffit.
   ========================================================================== */
.nf-notice {
  background: var(--nf-brun-800);
  border-bottom: 1px solid var(--nf-color-border);
  color: var(--nf-color-text);
  font-family: var(--nf-font-body);
  font-size: var(--nf-text-sm);
  line-height: 1.55;
}
.nf-notice__inner {
  display: flex;
  gap: var(--nf-space-3);
  align-items: flex-start;
  padding-top: var(--nf-space-3);
  padding-bottom: var(--nf-space-3);
  border-left: 3px solid var(--nf-or-500);
  padding-left: var(--nf-space-4);
}
.nf-notice p { margin: 0; }
.nf-notice a { color: var(--nf-or-300); font-weight: var(--nf-weight-semibold); text-decoration: underline; text-underline-offset: 3px; }
.nf-notice a:hover { color: var(--nf-creme-100); }

/* ---------- Écrans tactiles, mouvement réduit, PDF ---------- */
@media (hover: none) {
  .nf-header .nf-btn:hover { transform: none; box-shadow: var(--nf-shadow-md); }
}
@media (prefers-reduced-motion: reduce) {
  .nf-header .nf-btn, .nf-header__link, .nf-breadcrumb a, .nf-footer a { transition: none; }
  .nf-header .nf-btn:hover { transform: none; }
}
.pdf-mode .nf-header { position: relative; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--nf-noir-950); }
.pdf-mode .nf-header .nf-btn { box-shadow: none; }