/* =====================================================================
   Vulcan' Affûtage — Design System 2.0  (« Forge & acier volcanique »)
   Chargé UNIQUEMENT sur /newhomepage. N'affecte aucune page existante.
   Vert de marque = accent. Dominante = neutres basalte/acier. Ember = rare.
   ===================================================================== */

:root {
    /* --- Neutres sombres (forge) --- */
    --v2-forge:      #15130F;  /* basalte quasi-noir, chaud — hero / footer */
    --v2-basalt:     #201D18;  /* surface sombre secondaire */
    --v2-iron:       #35312B;  /* bordures / séparateurs sur fond sombre */
    --v2-smoke:      #A7A296;  /* texte atténué sur fond sombre */
    --v2-paper:      #EDEBE5;  /* texte clair sur fond sombre */

    /* --- Neutres clairs (acier poli) --- */
    --v2-steel-050:  #EBEDEA;  /* fond de section clair (ash froid) */
    --v2-steel-100:  #F6F7F5;  /* cartes / surfaces claires */
    --v2-steel-200:  #DFE1DC;  /* bordures claires */
    --v2-ink:        #191713;  /* texte principal sur clair */
    --v2-ink-soft:   #565248;  /* texte atténué sur clair */

    /* --- Accent marque (vert), ponctuel --- */
    --v2-green:      #2D9446;
    --v2-green-deep: #1C6E34;
    --v2-green-glow: #37B457;

    /* --- Accent tertiaire (braise), très rare --- */
    --v2-ember:      #D9622B;
    --v2-ember-glow: #F2803E;

    /* --- Typographies --- */
    --v2-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --v2-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --v2-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

    /* --- Échelle typographique fluide --- */
    --v2-fs-hero:  clamp(1.9rem, 3vw, 2.6rem);   /* ~30px mobile → ~42px PC */
    --v2-fs-h2:    clamp(1.9rem, 3.6vw, 3.1rem);
    --v2-fs-h3:    clamp(1.35rem, 2.2vw, 1.85rem);
    --v2-fs-lead:  clamp(1.05rem, 1.5vw, 1.3rem);
    --v2-fs-body:  1.02rem;
    --v2-fs-sm:    0.86rem;
    --v2-fs-eyebrow: 0.74rem;

    /* --- Espacements --- */
    --v2-s1: 4px;  --v2-s2: 8px;  --v2-s3: 12px; --v2-s4: 16px;
    --v2-s5: 24px; --v2-s6: 32px; --v2-s7: 48px; --v2-s8: 64px;
    --v2-s9: 96px; --v2-s10: 128px;

    /* --- Rayons --- */
    --v2-r-sm:  4px;
    --v2-r:     10px;
    --v2-r-lg:  18px;
    --v2-r-pill: 999px;

    /* --- Ombres --- */
    --v2-sh-1: 0 1px 2px rgba(21,19,15,0.06), 0 2px 8px rgba(21,19,15,0.05);
    --v2-sh-2: 0 8px 24px rgba(21,19,15,0.10), 0 2px 6px rgba(21,19,15,0.06);
    --v2-sh-lift: 0 18px 44px rgba(21,19,15,0.16), 0 4px 12px rgba(21,19,15,0.08);

    /* --- Largeur de contenu --- */
    --v2-maxw: 1240px;

    /* --- Motion --- */
    --v2-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =====================================================================
   1. Portée de page — tout est scopé sous body.nhp pour l'isolation
   ===================================================================== */
/* body ne porte QUE le fond + garde-fou overflow : ne jamais restyler le
   header/footer partagés (ils vivent hors de .nhp-main). */
body.nhp { background: var(--v2-steel-050); overflow-x: hidden; }

/* Toute la typo / reset est confinée au contenu de la page (.nhp-main). */
.nhp-main {
    display: block;
    color: var(--v2-ink);
    font-family: var(--v2-font-sans);
    font-size: var(--v2-fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* :where() => spécificité nulle : chaque composant (titre hero, duo, forge…)
   peut surcharger couleur/taille sans lutte de spécificité. */
:where(.nhp-main h1, .nhp-main h2, .nhp-main h3) {
    font-family: var(--v2-font-display);
    color: var(--v2-ink);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.01em;
    margin: 0;
    font-optical-sizing: auto;
}
:where(.nhp-main p) { margin: 0; }
:where(.nhp-main a) { color: inherit; text-decoration: none; }
:where(.nhp-main img) { display: block; max-width: 100%; }

/* Conteneur */
.nhp-wrap {
    width: 100%;
    max-width: var(--v2-maxw);
    margin-inline: auto;
    padding-inline: clamp(20px, 5vw, 56px);
    box-sizing: border-box;
}

/* =====================================================================
   2. Composants réutilisables
   ===================================================================== */

/* Eyebrow : label mono, tracké, avec petit trait vert (spec de forge) */
.nhp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--v2-font-mono);
    font-size: var(--v2-fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--v2-ink-soft);
}
.nhp-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--v2-green);
    display: inline-block;
}
.nhp-eyebrow.is-light { color: var(--v2-smoke); }

/* Titres de section */
.nhp-h2 { font-size: var(--v2-fs-h2); }
.nhp-lead {
    font-size: var(--v2-fs-lead);
    color: var(--v2-ink-soft);
    line-height: 1.55;
    max-width: 60ch;
}

/* Boutons */
.nhp-btn {
    --_bg: var(--v2-ink);
    --_fg: var(--v2-paper);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--v2-font-sans);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: var(--v2-r-pill);
    background: var(--_bg);
    color: var(--_fg);
    cursor: pointer;
    transition: transform 0.25s var(--v2-ease), background 0.25s var(--v2-ease),
                box-shadow 0.25s var(--v2-ease), border-color 0.25s var(--v2-ease);
    will-change: transform;
}
.nhp-btn:hover { transform: translateY(-2px); box-shadow: var(--v2-sh-2); }
.nhp-btn:active { transform: translateY(0); }
.nhp-btn:focus-visible { outline: 2px solid var(--v2-green); outline-offset: 3px; }
.nhp-btn .nhp-btn-arrow { transition: transform 0.25s var(--v2-ease); }
.nhp-btn:hover .nhp-btn-arrow { transform: translateX(4px); }

.nhp-btn--primary { --_bg: var(--v2-green); --_fg: #fff; }
.nhp-btn--primary:hover { --_bg: var(--v2-green-deep); }
.nhp-btn--ghost {
    --_bg: transparent; --_fg: var(--v2-ink);
    border-color: var(--v2-steel-200);
}
.nhp-btn--ghost:hover { border-color: var(--v2-ink); background: transparent; }
.nhp-btn--on-dark { --_bg: var(--v2-paper); --_fg: var(--v2-forge); }
.nhp-btn--ghost-dark {
    --_bg: transparent; --_fg: var(--v2-paper);
    border-color: rgba(237,235,229,0.28);
}
.nhp-btn--ghost-dark:hover { border-color: var(--v2-paper); }

/* Chip de statut boutique */
.nhp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--v2-font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--v2-r-pill);
    border: 1px solid currentColor;
}
.nhp-chip::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}
.nhp-chip--dispo { color: var(--v2-green-deep); }
.nhp-chip--vendu { color: var(--v2-ink-soft); }
.nhp-chip--expo  { color: var(--v2-ember); }

/* =====================================================================
   3. Carte produit réutilisable (_product_card_v2)
   ===================================================================== */
.pcard {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;                 /* cartes de hauteur égale dans le carrousel */
    background: var(--v2-steel-100);
    border: 1px solid var(--v2-steel-200);
    border-radius: var(--v2-r-lg);
    overflow: hidden;
    box-sizing: border-box;
    transition: transform 0.35s var(--v2-ease), box-shadow 0.35s var(--v2-ease),
                border-color 0.35s var(--v2-ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--v2-sh-lift); border-color: #cfd2cc; }
/* Le « fil de lame » : trait qui s'affûte au survol */
.pcard::after {
    content: "";
    position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--v2-green), var(--v2-green-glow));
    transition: width 0.45s var(--v2-ease);
}
.pcard:hover::after { width: 100%; }

/* Le cadre suit le format réel des photos : 79 des 80 visuels du catalogue sont
   en 4/3 exactement. Cadre au même ratio et AUCUN padding, sinon le `contain`
   recale l'image à l'intérieur et laisse un jour sur les bords — c'est ce que
   faisaient les 22px d'origine, puis les 6px qui les ont remplacés. */
.pcard-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: radial-gradient(120% 90% at 50% 0%, #fff 0%, #eef0ec 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.pcard-media img {
    display: block;
    width: 100%; height: 100%; object-fit: contain;
    transition: transform 0.5s var(--v2-ease);
}
.pcard:hover .pcard-media img { transform: scale(1.05); }
.pcard-chip-slot { position: absolute; top: 10px; left: 10px; z-index: 2; }

.pcard-body {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px 14px;
    flex: 1;
}
.pcard-model {
    font-family: var(--v2-font-mono);
    font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--v2-ink-soft);
}
.pcard-title {
    font-family: var(--v2-font-display);
    font-size: 1.12rem; font-weight: 600; line-height: 1.2;
    color: var(--v2-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;            /* réserve 2 lignes : aligne prix/bouton entre cartes */
}
.pcard-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: auto; padding-top: 6px;
}
/* Sans prix (pièce d'exposition), la pastille reste alignée à droite comme
   le bouton d'ajout des autres cartes — la grille garde son rythme. */
.pcard-foot > :only-child { margin-left: auto; }
.pcard-price {
    font-family: var(--v2-font-mono);
    font-size: 1.15rem; font-weight: 600; color: var(--v2-ink);
    letter-spacing: -0.01em;
}
.pcard-price .cur { color: var(--v2-green); font-size: 0.9em; margin-left: 1px; }
/* Même règle que .pdet-price.is-sold : le « € » en inline-block laisse le trait
   être tracé une seule fois par le parent, d'un bout à l'autre. */
.pcard-price.is-sold { color: var(--v2-ink-soft); text-decoration: line-through; opacity: 0.65; }
.pcard-price.is-sold .cur { display: inline-block; color: inherit; }

.pcard-add {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    border-radius: var(--v2-r-pill);
    background: var(--v2-ink); color: #fff;
    border: none; cursor: pointer;
    transition: transform 0.2s var(--v2-ease), background 0.2s var(--v2-ease);
}
.pcard-add:hover { background: var(--v2-green); transform: scale(1.08); }
.pcard-add:focus-visible { outline: 2px solid var(--v2-green); outline-offset: 2px; }
.pcard-add svg { width: 20px; height: 20px; }

/* =====================================================================
   4. Header au-dessus du hero (translucide sombre, réversible au scroll)
   ===================================================================== */
body.nhp-at-hero .header-big {
    background: rgba(21,19,15,0.30) !important;
    border-color: rgba(237,235,229,0.16) !important;
    box-shadow: none !important;
    backdrop-filter: blur(9px) saturate(1.1);
    -webkit-backdrop-filter: blur(9px) saturate(1.1);
}
body.nhp-at-hero .header-big a,
body.nhp-at-hero .header-big li a,
body.nhp-at-hero .header-big li div,
body.nhp-at-hero .header-big .hsm-link,
body.nhp-at-hero .header-big .hsm-title,
body.nhp-at-hero .header-big h2,
body.nhp-at-hero .header-big svg,
body.nhp-at-hero .header-big .cart-badge-count { color: var(--v2-paper) !important; }
body.nhp-at-hero .header-big svg { fill: currentColor; }

/* Filets verticaux du mega-menu : le vert sombre est invisible sur le
   panneau translucide sombre → filet papier translucide à la place */
body.nhp-at-hero .header-big .hsm-branch-inner::before {
    background: linear-gradient(to bottom, transparent, rgba(237, 235, 229, 0.30) 18%, rgba(237, 235, 229, 0.30) 82%, transparent);
}

/* --- Header mobile (pill) — retravaillé, scopé newhomepage ---
   Padding cohérent (l'original 30px est plus épais qu'en desktop), coins
   arrondis, bouton burger encadré/arrondi, bordures calées sur le grand format. */
body.nhp .header-top {
    padding: 12px 16px;
    border-radius: 16px;
    gap: 12px;
}
/* Marque en police display (Fraunces) — header PC, pill mobile */
body.nhp .header-big h2,
body.nhp .header-small-h1 { font-family: var(--v2-font-display); font-weight: 600; }

/* Burger et menu mobile (« tiroir de forge ») : ds-v2-nav.css, chargé sur
   toutes les pages — le style ne dépend plus de l'opt-in DA 2.0. */

/* .header-small porte la pilule mobile : on la remonte au-dessus du panneau
   cookies (z-index 900 dans ds-v2-cookies.css). */
body.nhp .header-small { z-index: 1000; }

/* Bouton « retour en haut » : recentrage technique (icône décentrée sur iPhone).
   iOS Safari applique mal flex sur un <button> → on repasse en grid place-items
   + reset d'apparence natif ; même design, contenu réellement centré partout. */
body.nhp #scroll-to-top {
    -webkit-appearance: none; appearance: none;
    padding: 0; line-height: 0;
    display: grid; place-items: center;
}
body.nhp #scroll-to-top svg { display: block; margin: 0; }

/* état au-dessus du hero : se calque sur le grand format en mode sombre */
body.nhp-at-hero .header-top {
    background: rgba(21,19,15,0.30) !important;
    border-color: rgba(237,235,229,0.16) !important;
    box-shadow: none !important;
    backdrop-filter: blur(9px) saturate(1.1);
    -webkit-backdrop-filter: blur(9px) saturate(1.1);
}
body.nhp-at-hero .header-top .header-small-h1,
body.nhp-at-hero .header-top svg,
body.nhp-at-hero .header-top a { color: var(--v2-paper) !important; fill: var(--v2-paper) !important; }
body.nhp-at-hero .burger-btn { color: var(--v2-paper) !important; }

/* =====================================================================
   5. HERO — bloc prêt-vidéo + signature (logo migre + ligne fil de lame)
   ===================================================================== */
.nhp-hero {
    position: relative;
    min-height: 100svh;
    width: 100%;
    overflow: hidden;
    background: var(--v2-forge);
    display: flex;
}
.nhp-hero-media { position: absolute; inset: 0; z-index: 0; }
.nhp-hero-media img, .nhp-hero-media video {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(0.25) contrast(1.02);
}
/* Voile sombre du hero */
.nhp-hero-veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(21,19,15,0.62) 0%, rgba(21,19,15,0.48) 42%, rgba(21,19,15,0.86) 100%);
}
/* Grain subtil */
.nhp-hero-grain {
    position: absolute; inset: 0; z-index: 2; opacity: 0.05; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.nhp-hero-inner {
    position: relative; z-index: 3;
    width: 100%; max-width: none;   /* pleine largeur : la copie se colle au bord droit */
    margin-inline: auto;
    padding: clamp(90px, 12vh, 150px) clamp(24px, 3vw, 52px) clamp(40px, 7vh, 72px);
    display: flex; flex-direction: column; justify-content: flex-end;
    box-sizing: border-box;
}

/* Logo : le CSS ne décrit QUE la position de repos (bas-gauche).
   L'entrée « centré -> bas-gauche » est jouée en JS par une technique FLIP
   (transform uniquement) : left/top/width ne sont jamais animés.
   Raison : `top: 50% -> auto` n'est pas interpolable, le navigateur bascule la
   valeur d'un coup au milieu de l'animation -> saut vertical visible. */
.nhp-hero-logo {
    position: absolute;
    left: clamp(24px, 3vw, 52px);
    bottom: clamp(40px, 7vh, 72px);
    width: clamp(58px, 6.5vw, 88px);
    /* opacité pleine : l'adoucissement vient du blanc cassé (#E4DED0)
       appliqué directement dans le SVG, pas d'un voile d'opacité. Le vert
       reste le vert de marque plein (--v2-green / --v2-green-deep). */
    opacity: 1;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)) brightness(1) saturate(1);
    transform-origin: 0 100%;   /* ancre = coin bas-gauche, celui qui ne bouge pas */
    z-index: 4;
}
/* Position finale immédiate — reduced-motion / pas de JS (état déjà par défaut) */
.nhp-hero-logo.is-static { transform: none; }

/* Ligne « fil de lame » — se trace G->D à droite du logo, fond vers transparent */
.nhp-hero-edge {
    position: absolute;
    left: calc(clamp(24px, 3vw, 52px) + clamp(58px, 6.5vw, 88px) + 16px);
    bottom: calc(clamp(40px, 7vh, 72px) + clamp(28px, 3.25vw, 43px));
    height: 3px;
    width: 0;
    /* garde-fou double, marge LARGE : la ligne s'arrête bien à gauche du
       « Défiler » CENTRÉ (~120px d'écart) ET de la copie à droite. Défiler est
       en position:absolute → il ne bouge jamais ; on éloigne juste la queue
       lumineuse pour qu'elle ne le frôle plus. */
    max-width: min(calc(50vw - 285px), calc(100vw - 745px));
    z-index: 4;
    border-radius: 3px;   /* bord gauche arrondi (le droit se fond en transparent) */
    background: linear-gradient(90deg, var(--v2-green-glow) 0%, var(--v2-green) 55%, rgba(45,148,70,0) 100%);
    /* drop-shadow (et non box-shadow) : la lueur suit l'alpha réel du dégradé →
       elle s'éteint avec la ligne au lieu de « baver » sur la partie transparente. */
    filter: drop-shadow(0 0 4px rgba(55,180,87,0.35));
    animation: nhpEdgeDraw 1000ms var(--v2-ease) 1800ms forwards;
}
@keyframes nhpEdgeDraw {
    from { width: 0; }
    to { width: min(66vw, 760px); }   /* longue ; bornée par le max-width ci-dessus */
}

/* Bloc texte du hero (apparaît après la migration) */
.nhp-hero-copy {
    width: 100%;
    max-width: 500px;
    margin-left: auto;   /* poussé franchement à droite, le logo occupe la gauche */
    text-align: right;
    color: var(--v2-paper);
    opacity: 0;
    transform: translateY(16px);
    animation: nhpFadeUp 900ms var(--v2-ease) 1300ms forwards;
}
.nhp-hero-copy .nhp-eyebrow { justify-content: flex-end; color: var(--v2-smoke); }
.nhp-hero-copy .nhp-eyebrow::before { background: var(--v2-ember); }
.nhp-hero-title {
    font-size: var(--v2-fs-hero);
    color: var(--v2-paper);
    font-weight: 600;
    margin: 12px 0 0;
}
.nhp-hero-title em { font-style: italic; color: var(--v2-green-glow); }
.nhp-hero-sub {
    margin-top: 14px; font-size: 0.88rem;
    color: var(--v2-smoke); line-height: 1.5; margin-left: auto; max-width: 42ch;
}
.nhp-hero-cta { margin-top: 28px; display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }

/* Indicateur de scroll — recentré en bas. La ligne verte vit plus haut
   (~115px du bas) que « Défiler » (~22-80px) : pas de collision même centré. */
.nhp-hero-scroll {
    position: absolute; left: 50%; right: auto; bottom: 22px; transform: translateX(-50%);
    z-index: 4; color: var(--v2-smoke);
    font-family: var(--v2-font-mono); font-size: 0.62rem; letter-spacing: 0.2em;
    text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px;
    animation: nhpFadeUp 800ms var(--v2-ease) 2200ms both;
}
.nhp-hero-scroll span { width: 1px; height: 34px; background: linear-gradient(var(--v2-smoke), transparent); animation: nhpScrollPulse 1.8s ease-in-out infinite; }

@keyframes nhpFadeUp { to { opacity: 1; transform: translateY(0); } }
@keyframes nhpScrollPulse { 0%,100%{opacity:0.3;transform:scaleY(0.7)} 50%{opacity:1;transform:scaleY(1)} }

/* =====================================================================
   6. Sections génériques
   ===================================================================== */
/* overflow: clip (et non hidden) : hidden créerait un scroll container et
   tuerait le position:sticky des descendants (récap panier, galerie produit). */
.nhp-section { padding-block: clamp(44px, 6vw, 92px); position: relative; overflow: hidden; overflow: clip; }
.nhp-section > .nhp-wrap { position: relative; z-index: 1; }
.nhp-section--light { background: var(--v2-steel-050); }
.nhp-section--paper { background: var(--v2-steel-100); }

/* Habillage doux des sections claires : washes vert/braise + grain de métal fin
   (donne de la profondeur sans « tableau blanc », reste discret). */
.nhp-section--light::before,
.nhp-section--paper::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(75% 55% at 8% 0%, rgba(45,148,70,0.05) 0%, transparent 58%),
        radial-gradient(65% 50% at 100% 100%, rgba(217,98,43,0.035) 0%, transparent 55%),
        repeating-linear-gradient(135deg, rgba(21,19,15,0.014) 0 1px, transparent 1px 7px);
}

/* « Pièces disponibles » : nappe verte LÉGÈRE (pas de « pustule »), une seule
   diffusion douce depuis le haut-droite. Sobre et élégant. */
.nhp-section--paper:not(.nhp-section--affutage)::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(210deg, rgba(45,148,70,0.09) 0%, rgba(45,148,70,0.02) 28%, transparent 50%);
}

/* Section affûtage : simple trait vert diagonal « fil de la lame » qui traverse
   le COIN SUPÉRIEUR GAUCHE seulement (masque radial ancré en haut-gauche → le
   trait se fond avant d'atteindre le reste de la section). Simple et efficace. */
.nhp-section--affutage { background: linear-gradient(165deg, var(--v2-steel-100) 0%, #e6e9e4 100%); }
.nhp-section--affutage::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(147deg,
        transparent calc(22% - 2px),
        var(--v2-green-glow) calc(22% - 1px),
        var(--v2-green) calc(22% + 1px),
        transparent calc(22% + 2px));
    -webkit-mask-image: radial-gradient(95% 90% at 0% 0%, #000 0%, #000 24%, transparent 50%);
            mask-image: radial-gradient(95% 90% at 0% 0%, #000 0%, #000 24%, transparent 50%);
}
.nhp-section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.nhp-section-head.is-center { align-items: center; text-align: center; }
.nhp-section-head.is-split {
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}

/* --- Dual savoir-faire : Vente / Affûtage --- */
.nhp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.nhp-duo-card {
    position: relative; overflow: hidden;
    border-radius: var(--v2-r-lg);
    min-height: clamp(340px, 42vw, 480px);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: clamp(24px, 3vw, 40px);
    color: var(--v2-paper);
    isolation: isolate;
}
.nhp-duo-card img {
    position: absolute; inset: 0; z-index: -2;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s var(--v2-ease); filter: grayscale(0.2);
}
.nhp-duo-card::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(21,19,15,0.15) 0%, rgba(21,19,15,0.78) 100%);
}
.nhp-duo-card:hover img { transform: scale(1.06); }
.nhp-duo-card .nhp-eyebrow { color: var(--v2-paper); }
.nhp-duo-card .nhp-eyebrow::before { background: var(--v2-green-glow); }
.nhp-duo-title { font-size: var(--v2-fs-h3); color: var(--v2-paper); margin: 12px 0 8px; }
.nhp-duo-desc { color: rgba(237,235,229,0.82); font-size: 0.98rem; max-width: 40ch; margin-bottom: 18px; }
.nhp-duo-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 0.95rem; color: var(--v2-paper);
    border-bottom: 1px solid rgba(237,235,229,0.4); padding-bottom: 3px; align-self: flex-start;
    transition: gap 0.25s var(--v2-ease), border-color 0.25s var(--v2-ease);
}
.nhp-duo-card:hover .nhp-duo-link { gap: 14px; border-color: var(--v2-green-glow); }

/* Carte pleine largeur (atelier) : même traitement, format bandeau — large et bas.
   Le texte passe en ligne (bloc à gauche, lien à droite) pour tenir la hauteur réduite. */
.nhp-duo-card--wide {
    grid-column: 1 / -1;
    min-height: clamp(230px, 24vw, 300px);
    flex-direction: row; align-items: flex-end; justify-content: space-between;
    gap: clamp(20px, 3vw, 48px);
}
.nhp-duo-card--wide img { object-position: 50% 34%; }
.nhp-duo-card--wide .nhp-duo-body { display: flex; flex-direction: column; }
.nhp-duo-card--wide .nhp-duo-desc { max-width: 52ch; margin-bottom: 0; }
.nhp-duo-card--wide .nhp-duo-link { align-self: flex-end; flex-shrink: 0; }

/* --- Grille / carrousel produits --- */
.nhp-prod-carousel { position: relative; }
/* overflow hidden = Swiper clippe les slides ; le peek vient de slidesPerView.
   (overflow visible provoquait un débordement horizontal de la page.) */
.nhp-prod-carousel .swiper { overflow: hidden; }
.nhp-prod-carousel .swiper-slide { height: auto; }
.nhp-prod-nav { display: flex; gap: 10px; }
.nhp-prod-nav button {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--v2-steel-200); background: var(--v2-steel-100);
    color: var(--v2-ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s var(--v2-ease), color 0.2s var(--v2-ease), border-color 0.2s var(--v2-ease);
}
.nhp-prod-nav button:hover { background: var(--v2-ink); color: #fff; border-color: var(--v2-ink); }
.nhp-prod-nav button svg { width: 18px; height: 18px; fill: currentColor; }
.nhp-prod-empty {
    border: 1px dashed var(--v2-steel-200); border-radius: var(--v2-r-lg);
    padding: 48px; text-align: center; color: var(--v2-ink-soft);
}

/* --- Bande forge (récit condensé) — fond sombre + chaleur ember --- */
.nhp-forge {
    position: relative; overflow: hidden;
    background: var(--v2-forge); color: var(--v2-paper);
}
.nhp-forge::before {
    content: ""; position: absolute; z-index: 0;
    width: 60vw; height: 60vw; right: -18vw; top: -18vw; border-radius: 50%;
    background: radial-gradient(circle, rgba(217,98,43,0.18) 0%, rgba(217,98,43,0) 62%);
    pointer-events: none;
}
.nhp-forge-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.nhp-forge h2 { color: var(--v2-paper); font-size: var(--v2-fs-h2); }
.nhp-forge h2 em { font-style: italic; color: var(--v2-green-glow); }
.nhp-forge .nhp-eyebrow { color: var(--v2-smoke); }
.nhp-forge .nhp-eyebrow::before { background: var(--v2-ember); }
.nhp-forge-lead { color: rgba(237,235,229,0.82); font-size: var(--v2-fs-lead); margin-top: 18px; line-height: 1.6; }
/* Compteurs / specs en mono */
.nhp-stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); margin-top: 34px; }
.nhp-stat-num {
    font-family: var(--v2-font-display); font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 600; color: var(--v2-paper); line-height: 1;
}
.nhp-stat-num .u { color: var(--v2-green-glow); }
.nhp-stat-lbl {
    font-family: var(--v2-font-mono); font-size: 0.68rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--v2-smoke); margin-top: 8px;
}
.nhp-forge-media { position: relative; border-radius: var(--v2-r-lg); overflow: hidden; box-shadow: var(--v2-sh-2); }
.nhp-forge-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; }
.nhp-forge-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(21,19,15,0.35) 100%);
}

/* --- Reconnaissance Collège Culinaire de France (sous le bloc forge) --- */
.nhp-ccf {
    margin-top: clamp(44px, 6vw, 72px);
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}
/* Drapeau français : bleu / blanc / rouge, bords fondus vers le transparent */
.nhp-ccf-flag {
    width: min(640px, 90%); height: 3px; border-radius: 2px;
    background: linear-gradient(90deg,
        #35529E 0 33.4%,
        var(--v2-paper) 33.4% 66.6%,
        #C8382B 66.6% 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.nhp-ccf-logo {
    width: clamp(150px, 17vw, 220px); height: auto;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35));
}

/* --- Avis clients (carrousel + badge Google) --- */
.nhp-rating-stars { display: inline-flex; gap: 3px; }
.nhp-rating-stars svg { width: 18px; height: 18px; fill: #E8A400; }

.nhp-gbadge {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 12px 18px; border: 1px solid var(--v2-steel-200);
    border-radius: var(--v2-r); background: var(--v2-steel-100);
    transition: border-color 0.25s var(--v2-ease), box-shadow 0.25s var(--v2-ease);
}
.nhp-gbadge:hover { border-color: #cfd2cc; box-shadow: var(--v2-sh-1); }
.nhp-gbadge-score { font-family: var(--v2-font-display); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--v2-ink); }
.nhp-gbadge-col { display: flex; flex-direction: column; gap: 4px; }
.nhp-gbadge-lbl { font-family: var(--v2-font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-ink-soft); }

.nhp-reviews { position: relative; }
.nhp-reviews .swiper { overflow: hidden; }
.nhp-reviews .swiper-slide { height: auto; }
.nhp-review {
    display: flex; flex-direction: column; gap: 14px;
    background: var(--v2-steel-100); border: 1px solid var(--v2-steel-200);
    border-radius: var(--v2-r-lg); padding: 26px 24px; height: 100%; box-sizing: border-box;
}
.nhp-review-text { font-family: var(--v2-font-display); font-size: 1.06rem; line-height: 1.45; color: var(--v2-ink); font-style: italic; }
.nhp-review-author { font-family: var(--v2-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v2-ink-soft); margin-top: auto; }
.nhp-reviews-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.nhp-reviews-nav button {
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--v2-steel-200); background: var(--v2-steel-100);
    color: var(--v2-ink); cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s var(--v2-ease), color 0.2s var(--v2-ease), border-color 0.2s var(--v2-ease);
}
.nhp-reviews-nav button:hover { background: var(--v2-ink); color: #fff; border-color: var(--v2-ink); }
.nhp-reviews-nav button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; }

/* --- Affûtage teaser (bandeau CTA) --- */
.nhp-cta-band {
    display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(24px, 4vw, 56px); align-items: center;
    background: var(--v2-steel-100); border: 1px solid var(--v2-steel-200);
    border-radius: var(--v2-r-lg); overflow: hidden;
}
.nhp-cta-band-body { padding: clamp(28px, 4vw, 56px); }
.nhp-cta-band-media { position: relative; min-height: 260px; height: 100%; }
.nhp-cta-band-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- Contact / carte --- */
.nhp-contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 48px); align-items: stretch; }
.nhp-contact-map { display: flex; flex-direction: column; gap: 16px; }
.nhp-contact-map .nhp-map-frame, .nhp-contact-map .nhp-map-placeholder { flex: 1; }
/* Slot d'injection JS de la carte (consentement cookies sans rechargement) */
.nhp-contact-map .nhp-map-slot { flex: 1; display: flex; flex-direction: column; }
.nhp-contact-cta { align-self: flex-start; }
.nhp-map-frame { width: 100%; height: 100%; min-height: 320px; border: 0; border-radius: var(--v2-r-lg); }
.nhp-map-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    min-height: 320px; text-align: center; padding: 32px;
    border: 1px dashed var(--v2-steel-200); border-radius: var(--v2-r-lg); background: var(--v2-steel-100);
    color: var(--v2-ink-soft);
}
.nhp-contact-info { display: flex; flex-direction: column; gap: 18px; }
.nhp-contact-row { display: flex; gap: 14px; align-items: flex-start; }
.nhp-contact-row svg { width: 22px; height: 22px; color: var(--v2-green); fill: var(--v2-green); flex: none; margin-top: 2px; }
/* icônes en trait (horloge…) : contour vert, pas de remplissage */
.nhp-contact-row svg.nhp-ico-stroke { fill: none; stroke: var(--v2-green); }
.nhp-contact-row b { display: block; font-weight: 600; color: var(--v2-ink); }
.nhp-contact-row span { color: var(--v2-ink-soft); font-size: 0.95rem; line-height: 1.6; }
/* Lignes cliquables (adresse → itinéraire, téléphone) : survol vert primaire
   sur la valeur uniquement — le titre (Boutique & Atelier, Téléphone) reste sombre. */
a.nhp-contact-link { transition: color 0.2s var(--v2-ease); }
a.nhp-contact-link:hover span { color: var(--v2-green); }
a.nhp-contact-link:hover b { color: var(--v2-ink); }
/* Tabulation légère devant les horaires */
.nhp-contact-row .nhp-hr { display: inline-block; padding-left: 16px; }
/* Fermeture exceptionnelle annoncée sous les horaires */
.nhp-contact-row .nhp-hr-exc { display: inline-block; margin-top: 6px; color: var(--v2-ember); font-weight: 600; font-size: 0.86em; }

/* =====================================================================
   7. Reveal au scroll
   ===================================================================== */
.nhp-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--v2-ease), transform 0.7s var(--v2-ease); }
.nhp-reveal.is-in { opacity: 1; transform: none; }
.nhp-reveal.d1 { transition-delay: 0.08s; }
.nhp-reveal.d2 { transition-delay: 0.16s; }
.nhp-reveal.d3 { transition-delay: 0.24s; }

/* =====================================================================
   8. Responsive
   ===================================================================== */
@media (max-width: 960px) {
    .nhp-forge-grid { grid-template-columns: 1fr; }
    .nhp-forge-media { order: -1; max-height: 380px; }
    .nhp-cta-band { grid-template-columns: 1fr; }
    .nhp-cta-band-media { min-height: 220px; }
    .nhp-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .nhp-duo { grid-template-columns: 1fr; }
    /* Bandeau atelier : le format ligne devient trop serré, on repasse en colonne. */
    .nhp-duo-card--wide { flex-direction: column; align-items: stretch; gap: 0; }
    .nhp-duo-card--wide .nhp-duo-desc { margin-bottom: 18px; }
    .nhp-duo-card--wide .nhp-duo-link { align-self: flex-start; }
    .nhp-hero-inner { padding-bottom: 25px; }
    .nhp-hero-copy { text-align: left; margin-left: 0; max-width: none; }
    .nhp-hero-copy .nhp-eyebrow { justify-content: flex-start; font-size: 0.625rem; }
    .nhp-hero-sub { margin-left: 0; font-size: 0.80rem; }
    .nhp-hero-cta { justify-content: flex-start; }
    /* Sur mobile le logo est déjà dans le header : on masque le logo/ligne du
       hero (signature desktop) pour éviter le chevauchement avec le CTA.
       L'indicateur « Défiler » est aussi masqué (il chevauchait les boutons). */
    .nhp-hero-logo { display: none; }
    .nhp-hero-edge { display: none; }
    .nhp-hero-scroll { display: none; }
    .nhp-section-head.is-split { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    /* .nhp-hero-logo est masqué sous 720px (voir plus haut) */
    .nhp-hero-logo { left: 20px; bottom: 34px; width: 92px; }
}

/* =====================================================================
   9. Accessibilité — motion réduit
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .nhp-main *, .nhp-main *::before, .nhp-main *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
    }
    .nhp-hero-logo { transform: none; }
    .nhp-hero-copy, .nhp-hero-scroll { opacity: 1; transform: none; }
    .nhp-reveal { opacity: 1; transform: none; }
}