/* ==========================================================
   L'Hunic — maquette « Acier & lumière » (2026-11-01, Maël)
   S'ajoute à style.css (module Teymen v2 2.0.16, inchangé).
   Animations : transform et opacity (plus le tracé de fines lignes SVG, comme le module).
   Sans JavaScript ou en mouvement réduit, tout reste visible et lisible.
   ========================================================== */

/* ---------- en-tête, pied de page, transition ---------- */
.brand img{height:58px;width:auto}
.footer-brand img{width:auto;height:110px}
.pt-logo{width:min(46vw,300px)}
@media (max-width:899px){.brand img{height:48px}}

/* lumière qui suit la souris : un disque déplacé par transform (aucune repeinte de l'écran) */
.spot{background:none}
.spot i{position:absolute;left:0;top:0;width:840px;height:840px;margin:-420px 0 0 -420px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.075),transparent);will-change:transform;transform:translate3d(50vw,50vh,0)}

/* ---------- 1. ouverture ---------- */
.lh-hero .hero-media{background:var(--noir)}
.lh-frame{position:absolute;top:0;bottom:0;right:0;left:30%;overflow:hidden;background:#0b0c0d;clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}
.lh-move{position:absolute;inset:-3%;will-change:transform}
.lh-zoom{position:absolute;inset:0;will-change:transform}
.lh-zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:85% 50%}
.lh-half{position:absolute;inset:0;display:none;will-change:transform,opacity}
.lh-half--a{clip-path:polygon(0 0,58% 0,42% 100%,0 100%)}
.lh-half--b{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}
.lh-split .lh-half{display:block}
.lh-split .lh-hero-img{opacity:0}
.lh-cut{position:absolute;left:50%;top:-15%;width:2px;height:130%;opacity:0;pointer-events:none;background:linear-gradient(180deg,transparent,#fff 18%,#fff 82%,transparent);box-shadow:0 0 22px 4px rgba(255,255,255,.55)}
.lh-sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:overlay;display:none}
html.lh-anim .lh-sheen{display:block}
.lh-sheen i{position:absolute;top:-25%;bottom:-25%;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 50%,transparent)}
.lh-hero .hero-veil{background:linear-gradient(90deg,var(--noir) 0,var(--noir) 26%,rgba(5,5,5,.5) 37%,rgba(5,5,5,0) 50%),linear-gradient(0deg,var(--noir) 0,rgba(5,5,5,0) 30%),linear-gradient(180deg,rgba(5,5,5,.55),rgba(5,5,5,0) 20%)}
.lh-hero .hero-copy{z-index:1}
.lh-hero .eyebrow{display:inline-flex;align-items:center;gap:.9rem;color:#d6dade}
.lh-hero .eyebrow::before{content:"";width:2.4rem;height:1px;background:linear-gradient(90deg,transparent,#fff)}
.lh-hero .tagline{max-width:21ch}
@media (max-width:899px){
  .lh-frame{left:0;top:calc(var(--top-h) - 20px);bottom:auto;height:min(121vw,60svh);clip-path:polygon(0 0,100% 0,100% 86%,0 100%)}
  .lh-move{inset:0}
  .lh-zoom img{object-position:92% 50%}
  .lh-hero .hero-veil{background:linear-gradient(0deg,var(--noir) 0,var(--noir) 34%,rgba(5,5,5,.82) 48%,rgba(5,5,5,.55) 56%,rgba(5,5,5,0) 66%)}
  .lh-hero .eyebrow{text-shadow:0 1px 10px rgba(0,0,0,.75)}
  .lh-hero .bl-edge{display:none}
  .lh-hero .tagline{font-size:clamp(1.3rem,5.4vw,1.7rem);margin-bottom:1.6rem}
}

/* ---------- 3. la lame et le manche (scène 3D épinglée) ---------- */
.lh-anat{position:relative;background:var(--noir);overflow:clip}
.lh-anat-pin{position:relative;background:radial-gradient(70% 55% at 50% 56%,#1a1b1f,var(--noir) 72%);min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(1.8rem,5vh,3.4rem);padding:calc(var(--top-h) + 1rem) 0 clamp(2rem,6vh,4rem)}
.lh-anat-head{text-align:center}
.lh-anat-head .eyebrow{margin-bottom:.9rem}
.lh-anat-head h2{font-size:clamp(2.4rem,6vw,5.4rem);margin:0}
.lh-stage{position:relative;width:min(88vw,1180px);margin:0 auto;perspective:1700px;perspective-origin:50% 40%}
.lh-glow{position:absolute;left:50%;top:50%;width:130%;aspect-ratio:3/1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(226,232,240,.10),transparent);pointer-events:none}
.lh-knife{position:relative;width:100%;aspect-ratio:1449/259;transform-style:preserve-3d;will-change:transform}
.lh-part{position:absolute;inset:0;will-change:transform}
.lh-part img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.lh-part--blade{clip-path:inset(0 51.69% 0 0)}
.lh-part--handle{clip-path:inset(0 0 0 48.31%)}
.lh-part .lh-dark{opacity:0;filter:brightness(.12)}
.lh-glint{position:absolute;inset:0;overflow:hidden;pointer-events:none;display:none;clip-path:polygon(1.17% 40.5%,1.31% 38.8%,1.59% 37.1%,2.00% 36.1%,2.69% 35.5%,4.76% 34.6%,8.21% 33.4%,10.97% 32.2%,13.73% 30.9%,17.18% 29.3%,23.40% 25.9%,28.57% 23.7%,29.95% 23.0%,31.12% 22.0%,33.06% 21.4%,39.27% 21.0%,46.86% 20.7%,48.38% 20.5%,48.38% 85.9%,47.55% 84.9%,46.86% 84.2%,46.17% 83.0%,44.10% 80.6%,41.34% 78.0%,38.58% 75.3%,35.82% 73.4%,33.06% 71.8%,31.68% 71.8%,29.95% 71.4%,28.92% 70.7%,28.23% 70.1%,25.47% 67.6%,22.71% 65.1%,21.33% 62.9%,19.25% 60.8%,17.18% 59.1%,14.29% 58.1%,10.84% 56.8%,7.38% 54.8%,3.93% 51.4%,2.69% 49.8%,2.00% 48.6%,1.52% 47.1%,1.24% 44.6%,1.14% 42.5%)}
html.lh-anim .lh-glint{display:block}
.lh-glint i{position:absolute;top:-10%;bottom:-10%;left:0;width:11%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.92) 50%,transparent)}
.lh-labels{display:grid;grid-template-columns:1fr 1fr;gap:2rem 4rem;width:min(88vw,1180px)}
.lh-label{position:relative;margin:0;padding-top:1.1rem;max-width:30rem}
.lh-label--handle{justify-self:end;text-align:right}
.lh-label strong{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.05;margin-bottom:.35rem}
.lh-label span{display:block;color:var(--gris);font-size:.95rem}
.lh-ln{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.08));transform-origin:0 50%}
.lh-label--handle .lh-ln{background:linear-gradient(270deg,#fff,rgba(255,255,255,.08));transform-origin:100% 50%}
@media (max-width:899px){
  .lh-stage{width:94vw}
  .lh-labels{grid-template-columns:1fr;gap:1.2rem}
  .lh-label--handle{justify-self:start;text-align:left}
  .lh-label--handle .lh-ln{background:linear-gradient(90deg,#fff,rgba(255,255,255,.08));transform-origin:0 50%}
}

/* ---------- 4. qualités ---------- */
.lh-qual .craft-copy h2{max-width:12ch}
.lh-shutter{position:absolute;inset:-45%;z-index:4;background:var(--noir);pointer-events:none;display:none}
html.lh-anim .lh-shutter{display:block}

/* ---------- 6. composition : la photo se fragmente puis se recompose ---------- */
.lh-compo{padding:clamp(5rem,10vw,9rem) 0;background:linear-gradient(180deg,var(--noir),var(--charbon) 50%,var(--noir));overflow:hidden}
.lh-compo-inner{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
.lh-compo h2{max-width:12ch}
.lh-frag{position:relative;aspect-ratio:3/2;overflow:hidden;background:#0a0a0a;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
.lh-frag img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lh-shard{position:absolute;inset:0;will-change:transform,opacity}
.lh-blades{list-style:none;margin:2rem 0 0;padding:0}
.lh-blades li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--ligne)}
.lh-blades .num{font-family:var(--serif);font-style:italic;color:var(--acier-sombre);font-size:1.2rem;line-height:1.5}
.lh-blades p{margin:0;font-size:clamp(1.1rem,1.6vw,1.35rem);color:#dfe2e5}
@media (min-width:900px){.lh-compo-inner{grid-template-columns:.85fr 1.15fr;gap:6vw}}

/* ---------- 7. le saviez-vous ---------- */
.lh-know{position:relative;padding:clamp(6rem,14vw,11rem) 0;text-align:center;overflow:hidden;background:radial-gradient(60% 70% at 50% 50%,#1a1b1e,var(--noir) 75%);isolation:isolate}
.lh-know .eyebrow{font-family:var(--sans);font-weight:400;line-height:1.4}
.lh-know-big{font-family:var(--serif);margin:0;line-height:.9}
.lh-know-pre{display:block;font-style:italic;font-size:clamp(1.6rem,3vw,2.4rem);color:#cfd3d7;margin-bottom:.4rem}
.lh-count{display:block;font-weight:500;font-size:clamp(5.4rem,21vw,16rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.lh-count-vis{background:linear-gradient(100deg,#5b626a,#fff 25%,#9aa1a9 50%,#fff 75%,#b8bec5);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lh-know-text{margin:1.6rem auto 0;max-width:38ch}
.lh-know-blade{position:absolute;left:50%;top:50%;z-index:-1;width:min(125vw,1500px);height:auto;transform:translate(-50%,-50%) rotate(-9deg);opacity:.32;pointer-events:none}
.lh-know-blade path{fill:none;stroke:#d9dde2;stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke;stroke-linejoin:round}

/* ---------- 8. galerie épinglée (lames en biais, transform uniquement) ---------- */
.lh-gal .gal-dim{position:absolute;inset:0;z-index:1;background:var(--noir);opacity:0;pointer-events:none}
/* la diapositive entre inclinée (bord en biais), la photo est contre-inclinée et agrandie pour couvrir le biais */
html.lh-anim .lh-gal .gal-slide{will-change:transform}

/* ---------- 9. le manche ---------- */
.lh-manche .duo-copy h2{font-size:clamp(2.6rem,6.6vw,6rem);max-width:11ch}
.lh-manche .duo-media{display:block}
.lh-manche .duo-img--wide{aspect-ratio:1600/512;margin-top:0}
.lh-manche .duo-img--b{width:72%;margin:1.2rem 0 0 auto;aspect-ratio:3/2}
.lh-swatches{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:2rem}
.lh-swatches a{display:inline-flex;align-items:center;gap:.65rem;min-height:44px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#dfe2e5}
.lh-swatches i,.lh-dots i,.lh-vpill i{display:inline-block;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.4),inset 0 2px 4px rgba(255,255,255,.28)}
.lh-swatches i{width:22px;height:22px;transition:transform .5s var(--ease)}
.lh-swatches a:hover i,.lh-swatches a:focus-visible i{transform:scale(1.25)}

/* ---------- 10. médaille ---------- */
.lh-medal h2{font-size:clamp(3.2rem,11vw,9.5rem)}
.lh-medal .lead{margin-top:.6rem}

/* ---------- 11. boutique ---------- */
.lh-shop{padding:clamp(5rem,10vw,9rem) 0;background:linear-gradient(180deg,var(--noir),var(--charbon) 45%,var(--noir))}
.lh-shop-inner{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
.lh-shop-card{list-style:none;margin:0;padding:0;width:100%;max-width:540px}
.lh-shop .pc-title{font-size:clamp(1.8rem,2.6vw,2.3rem)}
.lh-dots{display:flex;gap:.45rem;margin:.35rem 0 0}
.lh-dots i{width:12px;height:12px}
.lh-shop .btn-row{margin-top:2rem}
@media (min-width:900px){.lh-shop-inner{grid-template-columns:1fr 1fr;gap:6vw}.lh-shop-card{justify-self:end}}

/* ---------- 12. contact ---------- */
.lh-contact{padding:clamp(5rem,11vw,9rem) 0;border-top:1px solid var(--ligne);background:radial-gradient(60% 80% at 50% 100%,#1b1c1f,var(--noir) 70%)}
.lh-contact h2{font-size:clamp(3rem,9vw,7.5rem)}
.lh-lines{margin-top:clamp(1.5rem,4vw,3rem)}
.lh-lines li{position:relative;display:grid;grid-template-columns:1fr;gap:.25rem;padding:1.3rem 0}
.lh-lines .lh-k{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.lh-lines a,.lh-lines address{font-family:var(--serif);font-size:clamp(1.45rem,3.4vw,2.6rem);line-height:1.15;overflow-wrap:anywhere}
.lh-lines a:hover{color:#fff;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.lh-lines .lh-ln{top:auto;bottom:0}
@media (min-width:900px){.lh-lines li{grid-template-columns:14rem 1fr;align-items:baseline}}

/* ---------- fiche produit ---------- */
.pdp-main.lh-moving img{transition:none}
.pdp-main .lh-shutter{inset:-60%}
.lh-pin{position:absolute;left:var(--px,50%);top:var(--py,50%);z-index:3;width:0;height:0;pointer-events:none;transition:opacity .4s}
.lh-pin[hidden]{display:none}
.lh-pin i{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 18px rgba(255,255,255,.45)}
.lh-pin i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid rgba(255,255,255,.75);animation:lhPulse 2.4s var(--ease) infinite}
/* étiquette sous le repère, sur le même couteau (jamais posée sur le manche voisin) */
.lh-pin b{position:absolute;left:0;top:26px;transform:translateX(-50%);white-space:nowrap;font-weight:500;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;line-height:1;background:rgba(5,5,5,.8);padding:.6rem .75rem;border:1px solid rgba(255,255,255,.35)}
.pdp-main.is-zoom .lh-pin{opacity:0}
@keyframes lhPulse{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.5);opacity:0}}
.pdp-info .eyebrow{display:inline-flex;align-items:center;gap:.8rem}
.pdp-info .eyebrow::before{content:"";width:1.8rem;height:1px;background:currentColor}
.pdp-summary p{margin-bottom:.6em}
.variants legend b{font-weight:500;color:var(--blanc);letter-spacing:.12em}
.lh-vpill span{gap:.6rem}
.lh-vpill i{width:14px;height:14px}
.qty input{width:2.8rem;min-height:3.2rem;padding:0;background:none;border:0;color:inherit;font:inherit;text-align:center;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lh-add{flex:1 1 13rem}
.reassure--compact{list-style:none;padding-left:0}
.lh-two-sec{padding:clamp(4rem,9vw,7rem) 0;border-top:1px solid var(--ligne);background:radial-gradient(70% 60% at 70% 50%,#1a1b1f,var(--noir) 72%);overflow:clip}
.lh-two{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
.lh-two h2{font-size:clamp(2.2rem,4.6vw,4rem);max-width:12ch}
.lh-stage--mini{width:100%;margin:0}
@media (min-width:900px){.lh-two{grid-template-columns:.8fr 1.2fr;gap:5vw}}
.hn-about .eyebrow{text-align:center;color:#55585d}
.buybar .lh-bb{display:flex;flex-direction:column;line-height:1.2}
.buybar .lh-bb span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}

/* ---------- compléments ---------- */
/* titre acier : dégradé fixe (le reflet du module animait background-position, hors transform/opacity) */
.steel,.steel.is-split .wi{animation:none;background-position:28% 0}
h2.eyebrow{font-family:var(--sans);font-weight:400;line-height:1.4}
.lh-manif-lead{margin:0 0 clamp(2.5rem,5vw,4rem)}
.lh-vpill span{text-transform:none}
.thumbs[hidden]{display:none}
/* sceau de la médaille : l'enveloppe tourne au défilement (GSAP), le sceau garde sa rotation lente */
.lh-seal{position:absolute;inset:0;pointer-events:none;will-change:transform}
.lh-seal .seal{max-width:none}
/* avant le premier affichage animé (au plus 1,2 s, minuteur de secours) : la photo d'ouverture et le bloc d'achat
   restent cachés, pour ne pas apparaître, disparaître puis revenir quand l'animation démarre */
html.js:not(.is-ready) .lh-hero .lh-zoom,html.js:not(.is-ready) .pdp-info{opacity:0}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .lh-half,.lh-cut,.lh-sheen,.lh-shutter,.lh-glint,.lh-shard{display:none!important}
  .lh-split .lh-hero-img{opacity:1}
  .spot{display:none}
  .lh-pin i::after{animation:none}
}

/* ==========================================================
   VERSION BLANCHE (2026-11-01, Maël). Demande du patron : « beaucoup plus blanc que le site de Teymen,
   une cassure d'une partie sur deux ». Une section sur deux sur blanc pur (#fff, jamais crème ni gris chaud),
   l'autre reste sombre ; l'accueil et la fiche commencent en blanc ; cassure nette en biais entre deux sections.
   Rien n'est retiré : mêmes textes, photos, prix et animations ; seules les couleurs suivent le fond.
   ========================================================== */
:root{--cut-h:clamp(28px,6vw,96px);--ink:#111214;--ink-2:#33353a;--ink-3:#4a4d52;--ink-4:#55585d}
body{background:#fff}
.lh-sec{position:relative}
.lh-sec--blanc{background:#fff;color:var(--ink)}
.lh-sec--sombre{background-color:var(--noir);color:var(--blanc)}

/* cassure en biais « / » : un triangle de la couleur de la section du dessus mord sur le haut de la suivante */
.lh-sec--blanc + .lh-sec--sombre::before,
.lh-sec--sombre + .lh-sec--blanc::before,
.site-footer.lh-sec--blanc::before{content:"";position:absolute;left:0;right:0;top:-1px;height:var(--cut-h);z-index:7;pointer-events:none;clip-path:polygon(0 0,100% 0,0 100%)}
.lh-sec--blanc + .lh-sec--sombre::before{background:#fff}
.lh-sec--sombre + .lh-sec--blanc::before,.site-footer.lh-sec--blanc::before{background:var(--noir)}
/* après la galerie plein écran, c'est la photo elle-même qui est coupée en biais par le blanc */
.lh-sec--photo + .lh-sec--blanc::before{display:none}
.lh-sec--photo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--cut-h);z-index:7;pointer-events:none;background:#fff;clip-path:polygon(100% 0,100% 100%,0 100%)}
.lh-gal .gal-ui{bottom:calc(var(--cut-h) + clamp(1.2rem,4vh,2.4rem))}
/* les filets de séparation du module laissent la place à la cassure */
.duo.lh-sec,.lh-contact.lh-sec,.lh-two-sec.lh-sec,.pdp-details.lh-sec,.site-footer.lh-sec{border-top:0}
.pdp-details.lh-sec{padding-top:calc(var(--cut-h) + 3rem)}
/* contact : la lumière passe en haut, le bas reste noir pur comme le triangle du pied de page */
.lh-contact.lh-sec{background:radial-gradient(60% 80% at 50% 0%,#1b1c1f,var(--noir) 70%) var(--noir)}
.manifeste .facts{background:#fff}

/* textes et filets sur blanc : noir ou graphite (contraste AA) */
.lh-sec--blanc .eyebrow{color:var(--ink-4)}
.lh-sec--blanc .lead{color:var(--ink-2)}
.lh-sec--blanc :focus-visible{outline-color:var(--ink)}
.lh-sec--blanc ::selection{background:var(--ink);color:#fff}
.skip-link{background:var(--ink);color:#fff}
/* titres acier : sur le blanc, l'acier foncé (reflets graphite) remplace l'acier clair */
.lh-sec--blanc .steel:not(.is-split),.lh-sec--blanc .steel.is-split .wi,.lh-sec--blanc .steel.is-split .hero-name .wi{background-image:linear-gradient(100deg,#1d2024 0%,#5d646d 13%,#23262b 26%,#7b828b 41%,#121417 58%,#6b727b 73%,#2a2e33 88%,#4f565e 100%)}
.lh-sec--blanc .steel.is-split .hero-kicker .wi{background:none}
/* boutons sur blanc : lame graphite, reflet clair ; bouton fantôme au trait graphite */
.lh-sec--blanc .btn{background:var(--ink);color:#fff}
.lh-sec--blanc .btn::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%)}
.lh-sec--blanc .btn--ghost{background:transparent;color:var(--ink);border-color:rgba(17,18,20,.55)}
.lh-sec--blanc .btn--ghost::after{background:linear-gradient(110deg,transparent 35%,rgba(17,18,20,.12) 50%,transparent 65%)}
.lh-sec--blanc .btn--ghost:hover{background:var(--ink);color:#fff}

/* ---------- 1. ouverture sur blanc ---------- */
.lh-hero.lh-sec--blanc .hero-media{background:#fff}
.lh-hero .hero-veil{display:none}
.lh-hero.lh-sec--blanc .eyebrow{color:var(--ink-3);text-shadow:none}
.lh-hero.lh-sec--blanc .eyebrow::before{background:linear-gradient(90deg,transparent,var(--ink))}
.lh-sec--blanc .hero-title .hero-kicker,.lh-sec--blanc .steel.is-split .hero-kicker .wi{color:var(--ink-2)}
/* relief serré sous les lettres d'acier : un flou large faisait un nuage gris autour du nom sur le blanc */
.lh-sec--blanc .hero-name{filter:drop-shadow(0 4px 6px rgba(17,18,20,.09))}
.lh-sec--blanc .tagline{color:var(--ink-2)}
/* les trois lignes d'acier passent en différence : foncées sur le blanc, claires sur la photo */
.lh-hero .hero-blades{mix-blend-mode:difference}
/* le fil de la coupe suit le bord en biais de la photo (même cadre que la photo) */
.lh-edge{position:absolute;pointer-events:none;overflow:visible}
.lh-edge .bl{stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
@media (min-width:900px){
  /* la photo commence sous l'en-tête et à droite du texte : le texte ne passe jamais sur la photo */
  .lh-hero{--fl:calc(max(var(--gutter),(100% - var(--wrap))/2) + max(29rem,3.35*clamp(3.4rem,9.2vw,10rem)) + 2rem)}
  .lh-hero .lh-frame,.lh-edge{top:var(--top-h);left:var(--fl)}
  .lh-edge{width:calc(100% - var(--fl));height:calc(100% - var(--top-h))}
  /* le bas de la photo se fond dans la section noire qui suit */
  .lh-frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;pointer-events:none;background:linear-gradient(0deg,var(--noir),rgba(5,5,5,0))}
}
@media (max-width:899px){
  .lh-hero .lh-frame{left:0;top:var(--top-h);bottom:auto;height:min(96vw,44svh)}
  .lh-hero .hero-copy{padding-top:calc(var(--top-h) + min(96vw,44svh) + 1.4rem);padding-bottom:3rem}
  .lh-edge{display:none}
  /* sur téléphone, les lignes d'acier traversent tout le texte : allégées, pas supprimées */
  .lh-hero .hero-blades{opacity:.5}
}

/* ---------- 3. la lame et le manche sur blanc : ombre portée douce à la place du halo ---------- */
.lh-sec--blanc .lh-anat-pin{background:#fff}
.lh-sec--blanc .lh-glow{top:auto;bottom:-20%;width:80%;aspect-ratio:10/1;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(20,22,26,.2),rgba(20,22,26,.06) 60%,transparent)}
.lh-sec--blanc .lh-label span{color:var(--ink-3)}
.lh-sec--blanc .lh-ln{background:linear-gradient(90deg,var(--ink),rgba(17,18,20,.08))}
.lh-sec--blanc .lh-label--handle .lh-ln{background:linear-gradient(270deg,var(--ink),rgba(17,18,20,.08))}
@media (max-width:899px){.lh-sec--blanc .lh-label--handle .lh-ln{background:linear-gradient(90deg,var(--ink),rgba(17,18,20,.08))}}

/* ---------- 6. composition sur blanc : les éclats se recomposent sur le blanc ---------- */
.lh-sec--blanc .lh-blades li{border-top-color:rgba(17,18,20,.14)}
.lh-sec--blanc .lh-blades .num{color:var(--ink-4)}
.lh-sec--blanc .lh-blades p{color:var(--ink-2)}
.lh-sec--blanc .lh-frag{background:transparent}

/* ---------- 9. le manche sur blanc ---------- */
.lh-sec--blanc .lh-swatches a{color:var(--ink-2)}
.lh-sec--blanc .lh-swatches i,.lh-sec--blanc .lh-dots i,.lh-sec--blanc .lh-vpill i{box-shadow:0 0 0 1px rgba(17,18,20,.22),0 3px 8px rgba(17,18,20,.14),inset 0 2px 4px rgba(255,255,255,.35)}

/* ---------- 11. boutique sur blanc : carte blanche, ombre douce posée sous la carte ---------- */
.lh-sec--blanc .pcard-item{position:relative}
.lh-sec--blanc .pcard-item::before{content:"";position:absolute;left:7%;right:7%;bottom:-22px;height:56px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(17,18,20,.2),transparent)}
.lh-sec--blanc .pcard{--pl:rgba(17,18,20,.12);background:#fff;border-color:var(--pl)}
.lh-sec--blanc .pcard:hover{--pl:rgba(17,18,20,.45)}
/* coin coupé : blanc sur blanc, le biais n'a pas de bord ; un filet de 1 px le trace, dans la couleur du bord */
.lh-sec--blanc .pcard::before{content:"";position:absolute;right:-1px;bottom:-1px;width:26px;height:26px;z-index:4;pointer-events:none;background:linear-gradient(to top left,transparent 50%,var(--pl) 50%,var(--pl) calc(50% + 1px),transparent calc(50% + 1px))}
.lh-sec--blanc .pc-tag{color:var(--ink-4)}
.lh-sec--blanc .pc-price{color:var(--ink)}
.lh-sec--blanc .pc-badge{background:#fff;color:var(--ink)}

/* ---------- pied de page blanc ---------- */
.site-footer.lh-sec--blanc{color:var(--ink-3);padding-top:calc(var(--cut-h) + 3.5rem)}
.site-footer.lh-sec--blanc h2{color:var(--ink)}
.site-footer.lh-sec--blanc a:hover{color:var(--ink)}
.site-footer.lh-sec--blanc .footer-bottom{border-top-color:rgba(17,18,20,.12)}

/* ---------- fiche produit sur blanc (le fond du cadre photo passe au blanc, voir plus bas) ---------- */
.lh-sec--blanc .breadcrumb ol{color:var(--ink-4)}
.lh-sec--blanc .breadcrumb a:hover,.lh-sec--blanc .breadcrumb [aria-current]{color:var(--ink)}
.lh-sec--blanc .thumb{border-color:rgba(17,18,20,.14);background:#fff}
.lh-sec--blanc .thumb:hover,.lh-sec--blanc .thumb[aria-current=true]{border-color:var(--ink)}
.lh-sec--blanc .pdp-summary{color:var(--ink-2)}
.lh-sec--blanc .variants legend{color:var(--ink-4)}
.lh-sec--blanc .variants legend b{color:var(--ink)}
.lh-sec--blanc .vpill span{--pl:rgba(17,18,20,.2);border-color:var(--pl)}
.lh-sec--blanc .vpill:hover span{--pl:rgba(17,18,20,.6)}
.lh-sec--blanc .vpill input:checked+span{--pl:var(--ink);background:var(--ink);color:#fff}
/* bord droit en biais de la pastille : même filet que la carte */
.lh-sec--blanc .vpill span::after{content:"";position:absolute;top:0;right:0;bottom:0;width:9px;pointer-events:none;background:linear-gradient(to top left,transparent 50%,var(--pl) 50%,var(--pl) calc(50% + 1px),transparent calc(50% + 1px))}
.lh-sec--blanc .vpill input:focus-visible+span{outline-color:var(--ink)}
.lh-sec--blanc .qty{border-color:rgba(17,18,20,.35)}
.lh-sec--blanc .qty button:hover{background:rgba(17,18,20,.06)}
.lh-sec--blanc .form-msg{color:var(--ink-4)}
.lh-sec--blanc .form-msg.error{color:#b3261e}
.lh-sec--blanc .form-msg.ok{color:#1e6b34}
.lh-sec--blanc .reassure--compact{border-top-color:rgba(17,18,20,.12)}
.lh-sec--blanc .reassure-item svg{color:var(--ink-2)}
.lh-sec--blanc .reassure-item p{color:var(--ink-4)}
/* photo posée en « contain » : le fond sombre du cadre laissait un liseré noir en haut et en bas de la photo sur le blanc */
.lh-sec--blanc .pdp-main{background:#fff}
/* au changement de couleur, le volet qui balaie la photo devient une lame blanche, bord marqué par une ombre douce */
.lh-sec--blanc .pdp-main .lh-shutter{background:#fff;box-shadow:12px 0 30px rgba(17,18,20,.18)}
/* barre cachée assez bas pour que son ombre douce ne dépasse pas en bas de l'écran (is-on la remonte, règle de style.css) */
.buybar{background:rgba(255,255,255,.96);border-top-color:rgba(17,18,20,.12);box-shadow:0 -10px 30px rgba(0,0,0,.08);color:var(--ink);transform:translateY(calc(100% + 44px))}
.buybar .lh-bb span{color:var(--ink-4)}
.buybar .btn{background:var(--ink);color:#fff}
.buybar .btn::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%)}
.buybar :focus-visible{outline-color:var(--ink)}
/* message vide : 160 % de sa hauteur ne suffisait pas, un liseré graphite dépassait en bas de l'écran sur fond blanc */
.toast{background:rgba(17,18,20,.96);color:#fff;transform:translate(-50%,calc(100% + 2rem))}

/* ---------- en-tête : il prend le ton de la section qu'il recouvre (classe is-light posée par main.js) ---------- */
.lh-brand{position:relative}
.lh-brand img{transition:opacity .4s var(--ease)}
.lh-brand .brand-dark{position:absolute;left:0;top:0;opacity:0}
.site-header.is-light:not(.menu-open) .brand-dark{opacity:1}
.site-header.is-light:not(.menu-open) .brand-light{opacity:0}
.site-header.is-light:not(.menu-open) .main-nav a,.site-header.is-light:not(.menu-open) .cart-link{color:var(--ink)}
.site-header.is-light:not(.menu-open) .burger span{background:var(--ink)}
.site-header.is-light:not(.menu-open) .cart-count{background:var(--ink);color:#fff}
.site-header.is-light:not(.menu-open) .progress{background:rgba(17,18,20,.08)}
.site-header.is-light:not(.menu-open) .progress i{background:linear-gradient(90deg,transparent,var(--ink))}
.site-header.is-light:not(.menu-open) :focus-visible{outline-color:var(--ink)}
.site-header.is-light.is-solid:not(.menu-open){background:rgba(255,255,255,.86)}
html:not(.js) .site-header{background:rgba(255,255,255,.94)}

/* ---------- rideau entre les pages : lame blanche, lame d'acier clair derrière, reflet graphite ---------- */
.pt-slab{background:#fff}
.pt-slab--b{background:linear-gradient(90deg,#b4bac1,#eef1f4 38%,#fff 50%,#d5dade 64%,#9aa1a9)}
.pt-slab--c{background:linear-gradient(90deg,transparent 40%,rgba(17,18,20,.06) 80%,rgba(17,18,20,.3) 99%,var(--ink) 100%)}
.pt-slab::before,.pt-slab::after{background:linear-gradient(180deg,transparent,rgba(17,18,20,.85) 15%,rgba(17,18,20,.85) 85%,transparent)}
.pt-logo{filter:drop-shadow(0 10px 30px rgba(0,0,0,.12))}
html.pt-enter body::before{background:#fff}

@media (prefers-reduced-motion:reduce){
  .lh-brand img{transition:none}
}