/*! Natural Fawaid · Brand 2026 · brand.css
    Fichier généré par build.sh le 2026-09-28. Ne pas modifier directement.
    Sources : tokens/*.css puis components/*.css */


/* ---- source : tokens/colors.css ---- */
/* ==========================================================================
   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-*.
   ========================================================================== */

:root {
  /* ---------- 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.
   ========================================================================== */
:root,
.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 ---- */
/* ==========================================================================
   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.
   ========================================================================== */

:root {
  /* ---------- 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 ---- */
/* ==========================================================================
   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).
   ========================================================================== */

:root {
  /* ---------- É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) {
  :root { --nf-gutter: 2rem; }
}

@media (min-width: 960px) {
  :root { --nf-header-h: 76px; }
}

/* ---- source : tokens/effects.css ---- */
/* ==========================================================================
   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.
   ========================================================================== */

:root {
  /* ---------- 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/base.css ---- */
/* ==========================================================================
   Natural Fawaid · Brand 2026 · Base
   Attention : les chemins url() ci-dessous sont relatifs à brand.css
   (ce fichier est concaténé dans brand.css par build.sh).
   ========================================================================== */

/* ---------- Polices ---------- */
@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;
}

/* EFCO Brookshire : police de marque (titres), fichier woff2 fourni dans
   assets/fonts depuis la version 2026.2. */
@font-face {
  font-family: "EFCO Brookshire";
  src: url("./assets/fonts/efco-brookshire.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset minimal ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nf-header-h) + 12px);
}

body {
  margin: 0;
  background: var(--nf-color-bg);
  color: var(--nf-color-text);
  font-family: var(--nf-font-body);
  font-size: var(--nf-text-body);
  line-height: var(--nf-leading-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--nf-weight-regular); }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--nf-color-focus);
  outline-offset: 3px;
  border-radius: var(--nf-radius-xs);
}

.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-weight: var(--nf-weight-bold);
  border-radius: var(--nf-radius-sm);
  text-decoration: none;
}
.nf-skip-link:focus { top: 1rem; }

.nf-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- source : components/components.css ---- */
/* ==========================================================================
   Natural Fawaid · Brand 2026 · Composants
   Tous les composants sont préfixés .nf- et ne lisent que des tokens.
   Les classes .is-hover / .is-active / .is-focus servent uniquement à
   figer un état dans la documentation.
   ========================================================================== */

/* ==========================================================================
   1. MISE EN PAGE
   ========================================================================== */
.nf-container {
  width: 100%;
  max-width: var(--nf-container-max);
  margin-inline: auto;
  padding-inline: var(--nf-gutter);
}
.nf-container--narrow { max-width: var(--nf-content-max); }

.nf-section {
  position: relative;
  padding-block: var(--nf-section-y);
  background: var(--nf-color-bg);
  color: var(--nf-color-text);
}
.nf-section--alt   { background: var(--nf-color-bg-alt); }
.nf-section--light { background: var(--nf-color-bg); }   /* tokens redéfinis dans colors.css */

/* Section premium : lumière dorée + texture de l'étiquette */
.nf-section--glow {
  background: var(--nf-glow-center), var(--nf-color-bg-alt);
  overflow: hidden;
  isolation: isolate;
}
.nf-section--textured { overflow: hidden; isolation: isolate; }
.nf-section--textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("./assets/img/texture-etiquette-or-noir.webp") center / cover no-repeat;
  opacity: var(--nf-texture-opacity-final);
  pointer-events: none;
}
.nf-section--textured-fade::before {  /* texture qui s'efface vers le bas (hero) */
  background-position: center top;
  opacity: var(--nf-texture-opacity-hero);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.nf-section--textured-side::before {  /* texture latérale (section émotionnelle) */
  background-position: right center;
  opacity: var(--nf-texture-opacity-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}

.nf-section__head { max-width: var(--nf-head-max); margin-bottom: var(--nf-section-head-gap); }
.nf-section__head--center { margin-inline: auto; text-align: center; }
.nf-section__head--center .nf-eyebrow { justify-content: center; }

/* Grilles de la marque (mobile first : 1 colonne) */
.nf-grid { display: grid; gap: var(--nf-space-4); list-style: none; }
.nf-split { display: grid; gap: var(--nf-space-10); }

@media (min-width: 640px) {
  .nf-grid--2,
  .nf-grid--3 { grid-template-columns: repeat(2, 1fr); gap: var(--nf-space-5); }
  .nf-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .nf-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .nf-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .nf-split   { grid-template-columns: 1fr 1fr; gap: var(--nf-space-18); align-items: center; }
}

.nf-center { text-align: center; }

/* ==========================================================================
   2. TYPOGRAPHIE
   ========================================================================== */
.nf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--nf-space-4);
  color: var(--nf-color-brand-text);
  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-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

.nf-display {
  font-family: var(--nf-font-display);
  font-size: var(--nf-text-display);
  line-height: var(--nf-leading-display);
  letter-spacing: var(--nf-tracking-display);
  background: var(--nf-gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nf-h1, .nf-h2, .nf-h3, .nf-h4 {
  font-family: var(--nf-font-display);
  font-weight: var(--nf-weight-regular);
  color: var(--nf-color-heading);
}
.nf-h1 { font-size: var(--nf-text-h1); line-height: var(--nf-leading-h1); letter-spacing: 0.01em; }
.nf-h2 { font-size: var(--nf-text-h2); line-height: var(--nf-leading-heading); letter-spacing: var(--nf-tracking-heading); }
.nf-h3 { font-size: var(--nf-text-h3); line-height: var(--nf-leading-h3); }
.nf-h4 { font-size: var(--nf-text-h4); line-height: var(--nf-leading-h3); }

.nf-subtitle {
  font-family: var(--nf-font-body);
  font-size: var(--nf-text-subtitle);
  font-weight: var(--nf-weight-semibold);
  line-height: var(--nf-leading-tight);
  color: var(--nf-color-heading);
}
.nf-lead { font-size: var(--nf-text-lead); color: var(--nf-color-text-muted); }
.nf-muted { color: var(--nf-color-text-muted); }
.nf-text-sm { font-size: var(--nf-text-sm); }
.nf-caption { font-size: var(--nf-text-caption); color: var(--nf-color-text-muted); }
.nf-micro { font-size: var(--nf-text-micro); color: var(--nf-color-text-subtle); }
.nf-accent-title {       /* phrase de chute en rouge sceau, fond clair uniquement */
  font-family: var(--nf-font-display);
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  color: var(--nf-color-accent);
}
.nf-stack > * + * { margin-top: var(--nf-space-4); }

/* Lien texte (lien secondaire sous un CTA, liens de contenu) */
.nf-link {
  display: inline-block;
  color: var(--nf-color-link);
  font-size: var(--nf-text-sm);
  text-decoration: underline;
  text-decoration-color: var(--nf-color-border);
  text-underline-offset: 4px;
  transition: color var(--nf-transition-fast), text-decoration-color var(--nf-transition-fast);
}
.nf-link:hover,
.nf-link.is-hover { color: var(--nf-color-link-hover); text-decoration-color: currentColor; }

/* ==========================================================================
   3. BOUTONS
   ========================================================================== */
.nf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--nf-radius-full);
  font-family: var(--nf-font-body);
  font-size: var(--nf-text-button);
  font-weight: var(--nf-weight-bold);
  letter-spacing: var(--nf-tracking-button);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: none;
  transition:
    transform var(--nf-transition-base),
    box-shadow var(--nf-transition-base),
    background-color var(--nf-transition-base),
    color var(--nf-transition-base),
    border-color var(--nf-transition-base);
  -webkit-tap-highlight-color: transparent;
}

/* Primary : l'or de l'étiquette */
.nf-btn--primary {
  background: var(--nf-gradient-gold);
  color: var(--nf-color-on-brand);
  box-shadow: var(--nf-shadow-md);
}
.nf-btn--primary:hover,
.nf-btn--primary.is-hover { transform: translateY(-2px); box-shadow: var(--nf-shadow-lg); }
.nf-btn--primary:active,
.nf-btn--primary.is-active { transform: translateY(0); box-shadow: var(--nf-shadow-md); }

/* Secondary : contour or discret */
.nf-btn--secondary {
  border-color: var(--nf-color-border);
  color: var(--nf-color-text);
  background: transparent;
}
.nf-btn--secondary:hover,
.nf-btn--secondary.is-hover { border-color: var(--nf-color-brand); color: var(--nf-color-brand-strong); }
.nf-btn--secondary:active,
.nf-btn--secondary.is-active { background: var(--nf-color-tint); }

/* Focus clavier (tous les boutons) */
.nf-btn:focus-visible,
.nf-btn.is-focus {
  outline: 2px solid var(--nf-color-focus);
  outline-offset: 3px;
}

/* Désactivé (normalisé) */
.nf-btn:disabled,
.nf-btn[aria-disabled="true"],
.nf-btn.is-disabled {
  opacity: 0.45;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tailles */
.nf-btn--lg { min-height: 58px; padding-inline: 2rem; font-size: var(--nf-text-button-lg); }
.nf-btn--sm { min-height: 44px; padding: 0.55rem 1.15rem; font-size: var(--nf-text-button-sm); }
.nf-btn--block { width: 100%; }
.nf-btn--block-capped { width: 100%; max-width: var(--nf-btn-max); }

/* Icône (flèche à droite du libellé) */
.nf-btn__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--nf-transition-base);
}
.nf-btn:hover .nf-btn__icon,
.nf-btn.is-hover .nf-btn__icon { transform: translateX(4px); }

/* CTA premium : halo pulsé, un seul par page (CTA final) */
.nf-btn--pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(228, 200, 147, 0.55);
  opacity: 0;
  animation: nf-pulse var(--nf-duration-pulse) var(--nf-ease) infinite;
  pointer-events: none;
}
@keyframes nf-pulse {
  0%   { opacity: 0.8; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.08); }
  100% { opacity: 0;   transform: scale(1.08); }
}

/* Groupe de boutons : empilés et pleine largeur sur mobile */
.nf-actions { display: grid; gap: var(--nf-space-3); }
.nf-actions > .nf-btn { width: 100%; }
@media (min-width: 640px) {
  .nf-actions { grid-auto-flow: column; justify-content: start; }
  .nf-actions--center { justify-content: center; }
  .nf-actions > .nf-btn { width: auto; }
}

/* ==========================================================================
   4. TAGS, PRIX, SÉPARATEURS
   ========================================================================== */
.nf-tags { display: flex; flex-wrap: wrap; gap: var(--nf-space-2); list-style: none; }
.nf-tag {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--nf-color-border);
  border-radius: var(--nf-radius-full);
  background: var(--nf-color-tint);
  color: var(--nf-color-brand-strong);
  font-size: 0.85rem;
  font-weight: var(--nf-weight-semibold);
  line-height: 1.4;
}
.nf-tag--accent {  /* normalisé : badge rouge sceau, pour « Nouveau » uniquement */
  border-color: transparent;
  background: var(--nf-sceau-700);
  color: var(--nf-creme-100);
}

.nf-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--nf-space-2); }
.nf-price__value {
  font-family: var(--nf-font-display);
  font-size: var(--nf-text-price);
  line-height: 1;
  color: var(--nf-color-brand-strong);
}
.nf-price__unit { color: var(--nf-color-text-muted); font-size: 0.92rem; }

.nf-divider {
  height: 1px;
  margin-block: var(--nf-space-8);
  border: 0;
  background: var(--nf-color-divider);
}
.nf-divider--gold {   /* liseré or qui s'estompe aux extrémités */
  background: var(--nf-gradient-edge);
}

/* ==========================================================================
   5. CARTES ET BLOCS
   ========================================================================== */
/* Carte caractéristique (fond sombre) */
.nf-card {
  position: relative;
  padding: 1.6rem 1.5rem 1.7rem;
  border: 1px solid var(--nf-color-border);
  border-radius: var(--nf-radius-md);
  background: var(--nf-gradient-card);
  overflow: hidden;
  transition: transform var(--nf-duration-medium) var(--nf-ease), border-color var(--nf-duration-medium) var(--nf-ease);
}
.nf-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--nf-gradient-edge);
  opacity: 0.8;
}
.nf-card:hover,
.nf-card.is-hover { transform: translateY(-4px); border-color: var(--nf-color-border-strong); }
.nf-card__num {
  display: block;
  margin-bottom: 0.9rem;
  font-family: var(--nf-font-display);
  font-size: 1.05rem;
  letter-spacing: var(--nf-tracking-number);
  color: var(--nf-color-brand-text);
}
.nf-card__title {
  margin-bottom: var(--nf-space-2);
  font-family: var(--nf-font-display);
  font-size: var(--nf-text-h3);
  line-height: var(--nf-leading-h3);
  color: var(--nf-color-heading);
}
.nf-card p { color: var(--nf-color-text-muted); font-size: 0.98rem; }

/* Carte d'information (fond clair, avec pastille d'icône) */
.nf-info {
  display: flex;
  gap: var(--nf-space-4);
  align-items: flex-start;
  padding: 1.35rem 1.25rem;
  border: 1px solid var(--nf-color-border);
  border-radius: var(--nf-radius-md);
  background: var(--nf-color-surface);
}
.nf-info__title {
  margin-bottom: var(--nf-space-1);
  font-family: var(--nf-font-display);
  font-size: var(--nf-text-h4);
  line-height: var(--nf-leading-h3);
  color: var(--nf-color-heading);
}
.nf-info p { color: var(--nf-color-text-muted); font-size: 0.97rem; }
@media (min-width: 960px) {
  .nf-grid--4 > .nf-info { flex-direction: column; }
}

/* Encart (bloc translucide : conseils, rituel, mode d'emploi) */
.nf-panel {
  padding: var(--nf-space-6);
  border: 1px solid var(--nf-color-border);
  border-radius: var(--nf-radius-md);
  background: var(--nf-color-surface-soft);
}
.nf-panel__title {
  margin-bottom: 0.9rem;
  font-family: var(--nf-font-display);
  font-size: 1.45rem;
  color: var(--nf-color-heading);
}

/* Carte produit (normalisée depuis le bloc CTA final) */
.nf-product-card {
  display: grid;
  justify-items: center;
  gap: var(--nf-space-4);
  padding: var(--nf-space-8) var(--nf-space-6);
  border: 1px solid var(--nf-color-border);
  border-radius: var(--nf-radius-md);
  background: var(--nf-glow-center), var(--nf-gradient-card);
  text-align: center;
  transition: transform var(--nf-duration-medium) var(--nf-ease), border-color var(--nf-duration-medium) var(--nf-ease);
}
.nf-product-card:hover,
.nf-product-card.is-hover { transform: translateY(-4px); border-color: var(--nf-color-border-strong); }
.nf-product-card__img { width: min(60%, 220px); filter: var(--nf-shadow-product-sm); }
.nf-product-card__name { font-family: var(--nf-font-display); font-size: var(--nf-text-h3); color: var(--nf-color-heading); }
.nf-product-card__desc { font-size: var(--nf-text-sm); color: var(--nf-color-text-muted); }

/* Liste à puces or */
.nf-list { display: grid; gap: var(--nf-space-2); list-style: none; }
.nf-list li { position: relative; padding-left: 1.2rem; color: var(--nf-color-text-muted); }
.nf-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: var(--nf-radius-circle);
  background: var(--nf-color-brand);
}
.nf-list strong { color: var(--nf-color-heading); font-weight: var(--nf-weight-bold); }

/* Fiche descriptive (label majuscule + valeur, séparés par des filets) */
.nf-specs { display: grid; }
.nf-specs__item {
  display: grid;
  gap: 0.2rem;
  padding: var(--nf-space-4) 0;
  border-top: 1px solid var(--nf-color-divider);
}
.nf-specs__item:last-child { border-bottom: 1px solid var(--nf-color-divider); }
.nf-specs dt {
  color: var(--nf-color-brand-text);
  font-size: var(--nf-text-label);
  font-weight: var(--nf-weight-bold);
  letter-spacing: var(--nf-tracking-data);
  text-transform: uppercase;
}
.nf-specs dd { color: var(--nf-color-text); }

/* Citation */
.nf-quote {
  padding-left: var(--nf-space-5);
  border-left: 2px solid var(--nf-color-brand);
}
.nf-quote p {
  font-family: var(--nf-font-display);
  font-size: var(--nf-text-quote);
  line-height: var(--nf-leading-quote);
  color: var(--nf-color-brand-strong);
}

/* FAQ (<details>/<summary>) */
.nf-faq { max-width: var(--nf-content-max); margin-inline: auto; }
.nf-faq__item {
  position: relative;
  margin-bottom: var(--nf-space-3);
  border: 1px solid var(--nf-color-border);
  border-radius: var(--nf-radius-sm);
  background: var(--nf-color-surface);
  overflow: hidden;
  transition: transform var(--nf-transition-base), box-shadow var(--nf-transition-base);
}
.nf-faq__item:hover,
.nf-faq__item.is-hover { transform: translateY(-2px); box-shadow: var(--nf-shadow-sm); }
.nf-faq__item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--nf-gradient-gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--nf-duration-medium) var(--nf-ease);
}
.nf-faq__item[open]::before { transform: scaleY(1); }
.nf-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nf-space-4);
  min-height: 56px;
  padding: 0.9rem 1.25rem;
  font-weight: var(--nf-weight-bold);
  color: var(--nf-color-heading);
  cursor: pointer;
  list-style: none;
}
.nf-faq__item summary::-webkit-details-marker { display: none; }
.nf-faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--nf-or-700);
  border-bottom: 2px solid var(--nf-or-700);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--nf-duration-moderate) var(--nf-ease);
}
.nf-faq__item[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.nf-faq__item > p,
.nf-faq__item > div { padding: 0 1.25rem 1.2rem; color: var(--nf-color-text-muted); }


/* ==========================================================================
   5 bis. HERO ET CTA FINAL (mise en page exacte de la landing)
   ========================================================================== */
.nf-hero {
  position: relative;
  padding-top: calc(var(--nf-header-h) + 1rem);
  padding-bottom: clamp(3.5rem, 9vw, 6rem);
  background: var(--nf-glow-hero), var(--nf-color-bg);
  overflow: hidden;
  isolation: isolate;
}
.nf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("./assets/img/texture-etiquette-or-noir.webp") center top / cover no-repeat;
  opacity: var(--nf-texture-opacity-hero);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
}
.nf-hero__grid { display: grid; gap: var(--nf-space-5); align-items: center; }
.nf-hero__content { text-align: center; }
.nf-hero__content .nf-eyebrow,
.nf-hero__content .nf-tags,
.nf-hero__content .nf-price { justify-content: center; }
.nf-hero__title { display: grid; gap: 0.6rem; margin-bottom: 1.1rem; }
.nf-hero__lead { max-width: var(--nf-text-max); margin: 0 auto 1.1rem; color: var(--nf-color-text-muted); }
.nf-hero__content .nf-tags { margin-bottom: 1.4rem; }
.nf-hero__content .nf-price { margin-bottom: var(--nf-space-5); }
.nf-hero__note { margin-top: var(--nf-space-4); color: var(--nf-color-text-muted); font-size: var(--nf-text-caption); }
@media (min-width: 640px) {
  .nf-hero__content .nf-actions { justify-content: center; }
}
@media (min-width: 960px) {
  .nf-hero { display: flex; align-items: center; min-height: min(100vh, 920px); padding-top: calc(var(--nf-header-h) + 3rem); }
  .nf-hero__grid { grid-template-columns: 1fr 1.05fr; gap: var(--nf-space-12); }
  .nf-hero__media { order: 2; }
  .nf-hero__content { text-align: left; }
  .nf-hero__content .nf-eyebrow,
  .nf-hero__content .nf-tags,
  .nf-hero__content .nf-price,
  .nf-hero__content .nf-actions { justify-content: flex-start; }
  .nf-hero__lead { margin-inline: 0; }
}

.nf-final {
  position: relative;
  padding-block: var(--nf-section-y) calc(var(--nf-section-y) + 1rem);
  background: var(--nf-glow-center), var(--nf-color-bg-alt);
  overflow: hidden;
  isolation: isolate;
}
.nf-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("./assets/img/texture-etiquette-or-noir.webp") center / cover no-repeat;
  opacity: var(--nf-texture-opacity-final);
  pointer-events: none;
}
.nf-final__inner { display: grid; gap: var(--nf-space-6); justify-items: center; text-align: center; }
.nf-final__pot { width: min(55vw, 240px); filter: var(--nf-shadow-product-sm); }
.nf-final__content { display: grid; justify-items: center; max-width: var(--nf-cta-max); }
.nf-final__content .nf-eyebrow,
.nf-final__content .nf-price { justify-content: center; }
.nf-final__content .nf-h2 { margin-bottom: var(--nf-space-4); }
.nf-final__text { margin-bottom: var(--nf-space-6); color: var(--nf-color-text-muted); }
.nf-final__content .nf-price { margin-bottom: var(--nf-space-5); }
.nf-final__content .nf-btn { width: 100%; max-width: var(--nf-btn-max); }
.nf-final__content .nf-link { margin-top: var(--nf-space-5); padding: 0.5rem; }
@media (min-width: 960px) {
  .nf-final__inner { grid-template-columns: auto 1fr; gap: var(--nf-space-14); justify-content: center; max-width: 900px; text-align: left; }
  .nf-final__pot { width: 280px; }
  .nf-final__content { justify-items: start; }
  .nf-final__content .nf-eyebrow,
  .nf-final__content .nf-price { justify-content: flex-start; }
}

/* ==========================================================================
   6. FORMULAIRES (normalisés : absents de la landing, dérivés des tokens)
   ========================================================================== */
.nf-field { display: grid; gap: var(--nf-space-2); }
.nf-label {
  font-size: var(--nf-text-label);
  font-weight: var(--nf-weight-bold);
  letter-spacing: var(--nf-tracking-data);
  text-transform: uppercase;
  color: var(--nf-color-brand-text);
}
.nf-input {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--nf-color-border);
  border-radius: var(--nf-radius-sm);
  background: var(--nf-color-surface);
  color: var(--nf-color-text);
  font-size: 1rem;
  transition: border-color var(--nf-transition-base), box-shadow var(--nf-transition-base);
}
.nf-input::placeholder { color: var(--nf-color-text-subtle); }
.nf-input:hover { border-color: var(--nf-color-border-strong); }
.nf-input:focus-visible,
.nf-input.is-focus {
  outline: none;
  border-color: var(--nf-color-focus);
  box-shadow: 0 0 0 3px rgba(228, 200, 147, 0.2);
}
.nf-input[aria-invalid="true"] { border-color: var(--nf-color-error); }
.nf-hint { font-size: var(--nf-text-caption); color: var(--nf-color-text-muted); }
.nf-hint--error { color: var(--nf-color-error); }
.nf-hint--success { color: var(--nf-color-success); }
.nf-inline-form { display: grid; gap: var(--nf-space-3); }
@media (min-width: 640px) {
  .nf-inline-form { grid-template-columns: 1fr auto; align-items: end; }
}

/* ==========================================================================
   7. IMAGES
   ========================================================================== */
/* Image d'ambiance (lifestyle, ingrédients) */
.nf-media {
  border: 1px solid var(--nf-color-border);
  border-radius: var(--nf-radius-md);
  background: var(--nf-color-surface);
  overflow: hidden;
}
.nf-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--nf-duration-reveal) var(--nf-ease);
}
.nf-media:hover img { transform: scale(1.04); }
.nf-media--portrait { aspect-ratio: 13 / 23; }   /* ≈ 260 × 460 */
.nf-media--square   { aspect-ratio: 394 / 420; }
.nf-media--landscape { aspect-ratio: 3 / 2; }

/* Composition asymétrique de deux images */
.nf-media-pair {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0.9rem;
  align-items: end;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}
.nf-media-pair > :last-child { margin-bottom: var(--nf-space-8); }
.nf-media-pair > .nf-media--landscape { grid-column: 1 / -1; margin-bottom: 0; }
@media (min-width: 640px) { .nf-media-pair { max-width: 520px; } }
@media (min-width: 960px) { .nf-media-pair { max-width: none; } }

/* Packshot détouré sur halo doré */
.nf-product {
  position: relative;
  display: flex;
  justify-content: center;
}
.nf-product::before {
  content: "";
  position: absolute;
  inset: 12% 8% 4%;
  border-radius: var(--nf-radius-circle);
  background: var(--nf-glow-product);
  filter: blur(20px);
}
.nf-product img {
  position: relative;
  width: min(50vw, 210px);
  filter: var(--nf-shadow-product);
}
@media (min-width: 640px) { .nf-product img { width: min(56vw, 300px); } }
@media (min-width: 960px) { .nf-product img { width: min(100%, 440px); } }

/* ==========================================================================
   8. ICÔNES
   ========================================================================== */
.nf-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nf-icon-badge {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--nf-radius-circle);
  background: var(--nf-encre-950);
  fill: none;
  stroke: var(--nf-or-500);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   9. HEADER
   ========================================================================== */
.nf-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--nf-z-header);
  height: var(--nf-header-h);
  background: var(--nf-color-surface-glass);
  -webkit-backdrop-filter: var(--nf-blur-glass);
  backdrop-filter: var(--nf-blur-glass);
  border-bottom: 1px solid transparent;
  transition: border-color var(--nf-duration-moderate) var(--nf-ease), background-color var(--nf-duration-moderate) var(--nf-ease);
}
.nf-header.is-scrolled { border-bottom-color: var(--nf-color-border); background: var(--nf-color-surface-glass-strong); }
.nf-header--static { position: relative; }  /* documentation, aperçus */
.nf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nf-space-4); height: 100%; }
.nf-header__nav { display: flex; align-items: center; gap: var(--nf-space-5); }
.nf-header__link {
  display: none;
  color: var(--nf-color-text-muted);
  font-size: 0.92rem;
  font-weight: var(--nf-weight-semibold);
  text-decoration: none;
  transition: color var(--nf-transition-fast);
}
.nf-header__link:hover { color: var(--nf-color-link-hover); }
@media (min-width: 640px) { .nf-header__link { display: inline-block; } }

.nf-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.nf-brand__seal { width: 40px; height: auto; }
.nf-brand__name {
  font-family: var(--nf-font-display);
  font-size: var(--nf-text-brand);
  letter-spacing: var(--nf-tracking-brand);
  color: var(--nf-creme-100);
}
@media (min-width: 960px) { .nf-brand__seal { width: 46px; } }

/* Décalage du contenu sous le header fixe */
.nf-under-header { padding-top: calc(var(--nf-header-h) + 1rem); }
@media (min-width: 960px) { .nf-under-header { padding-top: calc(var(--nf-header-h) + 3rem); } }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.nf-footer {
  padding: var(--nf-space-12) 0 calc(6.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--nf-color-border);
  background: var(--nf-color-bg);
}
.nf-footer--no-float { padding-bottom: var(--nf-space-12); }
.nf-footer__inner { display: grid; gap: var(--nf-space-5); justify-items: center; text-align: center; }
.nf-footer .nf-brand__seal { width: 56px; }
.nf-footer__tagline { color: var(--nf-color-text-muted); font-size: var(--nf-text-sm); }
.nf-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nf-space-1) var(--nf-space-6); }
.nf-footer__nav a {
  display: inline-block;
  padding: 0.5rem 0.25rem;
  color: var(--nf-color-text);
  font-size: var(--nf-text-sm);
  text-decoration: none;
  transition: color var(--nf-transition-fast);
}
.nf-footer__nav a:hover { color: var(--nf-color-link-hover); }
.nf-footer__legal { color: var(--nf-color-text-subtle); font-size: var(--nf-text-micro); }
@media (min-width: 960px) { .nf-footer { padding-bottom: var(--nf-space-12); } }

/* ==========================================================================
   11. CTA FLOTTANT MOBILE
   ========================================================================== */
.nf-sticky-cta {
  position: fixed;
  left: 0.75rem;
  right: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  z-index: var(--nf-z-float);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nf-space-3);
  padding: 0.6rem 0.6rem 0.6rem 1.1rem;
  border: 1px solid var(--nf-color-border);
  border-radius: var(--nf-radius-full);
  background: var(--nf-color-surface-float);
  -webkit-backdrop-filter: var(--nf-blur-float);
  backdrop-filter: var(--nf-blur-float);
  box-shadow: var(--nf-shadow-xl);
  transform: translateY(140%);
  opacity: 0;
  transition: transform var(--nf-transition-slow), opacity var(--nf-transition-slow);
  pointer-events: none;
}
.nf-sticky-cta.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.nf-sticky-cta--static { position: relative; left: auto; right: auto; bottom: auto; transform: none; opacity: 1; pointer-events: auto; }
.nf-sticky-cta__info { display: grid; min-width: 0; line-height: 1.2; }
.nf-sticky-cta__name { font-family: var(--nf-font-display); font-size: var(--nf-text-brand); color: var(--nf-creme-100); }
.nf-sticky-cta__price { font-size: 0.82rem; color: var(--nf-or-300); white-space: nowrap; }
.nf-sticky-cta .nf-btn { min-height: 48px; padding-inline: 1.4rem; }
@media (min-width: 960px) { .nf-sticky-cta:not(.nf-sticky-cta--static) { display: none; } }

/* ==========================================================================
   12. ANIMATIONS
   Activées seulement si <html> porte la classe .js (voir README).
   ========================================================================== */
.js .nf-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--nf-duration-reveal) var(--nf-ease), transform var(--nf-duration-reveal) var(--nf-ease);
}
.js .nf-reveal.is-visible { opacity: 1; transform: none; }
.js .nf-stagger > .nf-reveal:nth-child(2) { transition-delay: calc(var(--nf-stagger) * 1); }
.js .nf-stagger > .nf-reveal:nth-child(3) { transition-delay: calc(var(--nf-stagger) * 2); }
.js .nf-stagger > .nf-reveal:nth-child(4) { transition-delay: calc(var(--nf-stagger) * 3); }
.js .nf-stagger > .nf-reveal:nth-child(5) { transition-delay: calc(var(--nf-stagger) * 4); }
.js .nf-stagger > .nf-reveal:nth-child(6) { transition-delay: calc(var(--nf-stagger) * 5); }

/* Entrée du hero (au chargement) */
.js .nf-enter-product img { animation: nf-rise var(--nf-duration-product) var(--nf-ease) both; }
.js .nf-enter-text > * { animation: nf-fade var(--nf-duration-entrance) var(--nf-ease) both; }
.js .nf-enter-text > *:nth-child(2) { animation-delay: calc(var(--nf-stagger) * 1); }
.js .nf-enter-text > *:nth-child(3) { animation-delay: calc(var(--nf-stagger) * 2); }
.js .nf-enter-text > *:nth-child(4) { animation-delay: calc(var(--nf-stagger) * 3); }
.js .nf-enter-text > *:nth-child(5) { animation-delay: calc(var(--nf-stagger) * 4); }
@keyframes nf-rise { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes nf-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   13. FALLBACKS ET ACCESSIBILITÉ
   ========================================================================== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nf-header     { background: rgba(13, 10, 7, 0.97); }
  .nf-sticky-cta { background: rgba(21, 16, 11, 0.98); }
}

@media (hover: none) {
  .nf-card:hover,
  .nf-product-card:hover,
  .nf-faq__item:hover { transform: none; box-shadow: none; }
  .nf-media:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .nf-reveal { opacity: 1; transform: none; }
  .nf-btn--pulse::after { display: none; }
}

/* Mode PDF / impression : désactive flous, animations et ombres */
.pdf-mode *,
.pdf-mode *::before,
.pdf-mode *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
}
.pdf-mode .nf-reveal { opacity: 1 !important; transform: none !important; }


/* Correctif rendu des boutons en dégradé : le fond est peint sous la bordure
   transparente de 1px. Sans ces deux lignes, le dégradé se répète dans la bordure
   et laisse des éclats de couleur aux extrémités gauche et droite de la pilule. */
.nf-btn {
  background-origin: border-box !important;
  background-repeat: no-repeat !important;
}