/* AlphaX - styles composants (extraits BRUTS de la maquette Anima). Couleurs/auras via tokens.css. */ /* ============================================================ ALPHA X — CBD SHOP · Refonte 2026 dark cosmic / néon premium ============================================================ */ /* ---------- Fonts ---------- */ @font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/anton-400.woff2") format('woff2')} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url("../fonts/space-grotesk-variable.woff2") format('woff2')} @font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/space-mono-400.woff2") format('woff2')} @font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/space-mono-700.woff2") format('woff2')} /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} img{max-width:100%;display:block} button{font:inherit;color:inherit;cursor:pointer;background:none;border:none} a{color:inherit;text-decoration:none} ul{list-style:none} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ============================================================ THEME TOKENS (default = COSMIC) ============================================================ */ /* ============================================================ BASE ============================================================ */ body{ font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.55; overflow-x:hidden; position:relative; -webkit-font-smoothing:antialiased; transition:background .5s var(--ease),color .5s var(--ease); } /* aurora + grain backdrop */ .backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .backdrop .aura{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--glow-strength); mix-blend-mode:var(--aura-blend)} .aura.a1{width:60vw;height:60vw;left:-15vw;top:-20vw;background:radial-gradient(circle,var(--glow-a),transparent 60%);animation:drift1 22s var(--ease) infinite alternate} .aura.a2{width:55vw;height:55vw;right:-12vw;top:8vh;background:radial-gradient(circle,var(--glow-b),transparent 60%);animation:drift2 26s var(--ease) infinite alternate} .aura.a3{width:50vw;height:50vw;left:20vw;bottom:-25vw;background:radial-gradient(circle,var(--accent),transparent 62%);opacity:calc(var(--glow-strength) * .6);animation:drift1 30s var(--ease) infinite alternate-reverse} @keyframes drift1{to{transform:translate(8vw,6vh) scale(1.15)}} @keyframes drift2{to{transform:translate(-7vw,5vh) scale(1.1)}} .backdrop .grain{position:absolute;inset:-50%;opacity:var(--grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainShift 8s steps(6) infinite} @keyframes grainShift{to{transform:translate(-8%,5%)}} @media (prefers-reduced-motion:reduce){ .aura,.grain,.marquee__track{animation:none!important} *{scroll-behavior:auto} } .wrap{width:min(100% - 40px,var(--maxw));margin-inline:auto;position:relative;z-index:1} /* ============================================================ TYPOGRAPHY HELPERS ============================================================ */ .eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .display{font-family:var(--font-display);text-transform:uppercase;line-height:.9;letter-spacing:.01em;font-weight:400} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap} .section-head h2,.section-head h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2rem,5vw,3.6rem);line-height:.92;font-weight:400} .section-head p{color:var(--muted);max-width:46ch;font-size:.98rem} .x{color:var(--x)} /* mot rouge dans un titre = texte de contenu -> rouge encre (contraste AA) ; le #ff2545 reste pour le logo/marque */ h1 .x,h2 .x,h3 .x{color:var(--x-ink)} .grad-text{background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent} /* ============================================================ BUTTONS ============================================================ */ .btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem; padding:14px 26px;border-radius:999px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s; white-space:nowrap;letter-spacing:.01em} .btn svg{width:18px;height:18px} .btn--primary{background:var(--x-ink);color:#fff;box-shadow:0 8px 30px -8px var(--x)} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px var(--x)} .btn--glow{background:linear-gradient(100deg,var(--accent),var(--accent-2));color:var(--on-accent);box-shadow:0 10px 34px -10px var(--accent-2)} .btn--glow:hover{transform:translateY(-2px);box-shadow:0 16px 46px -10px var(--accent-2)} .btn--ghost{border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--text);backdrop-filter:blur(8px)} .btn--ghost:hover{border-color:var(--accent);transform:translateY(-2px)} /* chips */ .chip{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; display:inline-flex;align-items:center; padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--surface)} .chip--dot::before{content:"";display:block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;box-shadow:0 0 8px var(--accent)} /* ============================================================ TOP MARQUEE ============================================================ */ .topbar{position:relative;z-index:30;background:var(--x-ink);color:#fff;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.12)} .marquee{display:flex;overflow:hidden;white-space:nowrap;padding:8px 0} .marquee__track{display:flex;flex-shrink:0;animation:scrollx 28s linear infinite} .marquee__track span{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:0 28px;display:inline-flex;align-items:center;gap:28px} .marquee__track span::after{content:"✕";opacity:.6} @keyframes scrollx{to{transform:translateX(-100%)}} /* ============================================================ NAV ============================================================ */ .nav{position:sticky;top:0;z-index:40;transition:padding .35s var(--ease),background .35s,border-color .35s} .nav__inner{display:flex;align-items:center;gap:28px;padding:18px 0;transition:padding .35s var(--ease)} .nav.scrolled{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(18px) saturate(1.4); border-bottom:1px solid var(--line-2)} .nav.scrolled .nav__inner{padding:11px 0} .logo{font-family:var(--font-display);text-transform:uppercase;font-size:1.55rem;letter-spacing:.02em;line-height:1;display:flex;align-items:baseline;gap:.12em} .logo .x{font-size:1.15em;line-height:.5} .logo small{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.16em;color:var(--muted);align-self:center;margin-left:6px;border:1px solid var(--line);padding:3px 6px;border-radius:5px} .nav__links{display:flex;gap:6px;margin-left:8px} .nav__links a{font-size:.9rem;font-weight:500;color:var(--muted);padding:9px 14px;border-radius:999px;transition:color .2s,background .2s;position:relative} .nav__links a:hover{color:var(--text);background:var(--surface)} .nav__links a.active{color:var(--text)} .nav__links a.nav__promo{color:var(--x);font-weight:700} .nav__links a.nav__promo::after{content:"";position:absolute;top:7px;right:7px;width:5px;height:5px;border-radius:50%; background:var(--x);box-shadow:0 0 0 0 color-mix(in srgb,var(--x) 70%,transparent);animation:promoPing 1.8s ease-out infinite} .nav__links a.nav__promo:hover{background:color-mix(in srgb,var(--x) 14%,transparent)} @keyframes promoPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--x) 65%,transparent)}70%,100%{box-shadow:0 0 0 7px transparent}} .nav__spacer{flex:1} .nav__actions{display:flex;align-items:center;gap:6px} .icon-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:var(--text);transition:background .2s,transform .2s;position:relative} .icon-btn:hover{background:var(--surface);transform:translateY(-1px)} .icon-btn svg{width:20px;height:20px} .cart-count{position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--x-ink);color:#fff;font-size:.66rem;font-weight:700;display:grid;place-items:center;font-family:var(--font-mono);transform:scale(0);transition:transform .3s var(--ease)} .cart-count.show{transform:scale(1)} .cart-count.pop{animation:pop .4s var(--ease)} @keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}} .burger{display:none} /* ============================================================ HERO ============================================================ */ /* Bandeau promo (haut de home) */ .topbar{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent) 8%,var(--surface))} .topbar__inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:9px 0;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;color:var(--text)} .topbar__sep{color:var(--faint)} @media (max-width:560px){.topbar__inner{font-size:.64rem;gap:7px}} .hero{position:relative;z-index:1;padding:64px 0 40px} .hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px} .hero__eyebrow .line{height:1px;width:54px;background:linear-gradient(90deg,var(--accent),transparent)} .hero h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.7rem,7vw,5.6rem);line-height:.9;letter-spacing:.015em;margin-bottom:22px} .hero h1.hero__h{font-size:clamp(2.4rem,5.2vw,4.4rem)} .hero h1 .ln{display:block;white-space:nowrap} .hero h1 .stroke{color:transparent;-webkit-text-stroke:2px var(--text)} .hero__sub{color:var(--muted);font-size:1.06rem;max-width:42ch;margin-bottom:32px} .hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px} .hero__trust{display:flex;gap:10px;flex-wrap:wrap} /* wolf visual placeholder */ .wolf{position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden; border:1px solid var(--line); background: radial-gradient(120% 90% at 50% 18%,color-mix(in srgb,var(--glow-b) 55%,transparent),transparent 60%), radial-gradient(90% 70% at 50% 90%,color-mix(in srgb,var(--glow-a) 50%,transparent),transparent 65%), repeating-linear-gradient(135deg,var(--surface),var(--surface) 11px,var(--surface-2) 11px,var(--surface-2) 22px); box-shadow:0 40px 90px -40px var(--glow-b), inset 0 0 0 1px var(--line-2)} .wolf::before{content:none} .wolf::after{content:none} /* blason loup géométrique */ .wolf__mark{position:absolute;inset:0;margin:auto;width:62%;height:auto;z-index:1;color:var(--text);pointer-events:none; filter:drop-shadow(0 6px 24px color-mix(in srgb,var(--glow-b) 55%,transparent))} .wolf__mark .fL{fill:color-mix(in srgb,currentColor 17%,transparent)} .wolf__mark .fM{fill:color-mix(in srgb,currentColor 8%,transparent)} .wolf__mark .fD{fill:color-mix(in srgb,currentColor 3%,transparent)} .wolf__mark .fA{fill:color-mix(in srgb,var(--accent) 24%,transparent)} .wolf__mark .facets path{stroke:color-mix(in srgb,currentColor 45%,transparent);stroke-width:1;stroke-linejoin:round} .wolf__mark .outline{stroke:currentColor;stroke-width:2.6;fill:none;stroke-linejoin:round;stroke-linecap:round} .wolf__mark .feat{stroke:color-mix(in srgb,currentColor 80%,transparent);stroke-width:1.8;fill:none;stroke-linejoin:round;stroke-linecap:round} .wolf__mark .eye{fill:var(--x);stroke:none;filter:drop-shadow(0 0 6px var(--x))} .wolf__mark .nose{fill:color-mix(in srgb,currentColor 30%,transparent);stroke:color-mix(in srgb,currentColor 55%,transparent);stroke-width:1.2} .wolf__mark .halo{stroke:color-mix(in srgb,var(--accent) 60%,transparent);stroke-width:2;fill:none;opacity:.45} .wolf__mark .stars path{fill:var(--accent)} /* ---- variante packaging (photo produit plein cadre) ---- */ .wolf--pack{background:#0a0710;border-color:color-mix(in srgb,var(--x) 35%,var(--line))} .wolf--pack .wolf__img{ position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover;object-position:50% 42%; filter:none; -webkit-mask-image:radial-gradient(125% 115% at 50% 42%,#000 62%,transparent 100%); mask-image:radial-gradient(125% 115% at 50% 42%,#000 62%,transparent 100%)} .wolf--pack .wolf__halo{opacity:.7;filter:blur(46px);width:88%;top:42%} .wolf--pack::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; box-shadow:inset 0 0 120px 24px rgba(8,5,14,.85); background:linear-gradient(180deg,transparent 60%,rgba(8,5,14,.55) 100%)} .wolf--pack .hero__badge{z-index:3;top:auto;bottom:18px;left:18px;right:auto;align-items:flex-start;flex-direction:row;flex-wrap:wrap} .wolf--pack .hero__badge .b{background:color-mix(in srgb,#0a0710 60%,transparent);border-color:color-mix(in srgb,var(--x) 40%,var(--line))} /* portrait loup (image de marque) */ .wolf__img{position:absolute;inset:0;margin:auto;width:70%;height:auto;z-index:1;pointer-events:none; filter:drop-shadow(0 22px 48px color-mix(in srgb,var(--glow-b) 70%,transparent)) drop-shadow(0 0 26px color-mix(in srgb,var(--accent-2) 28%,transparent))} .wolf__halo{position:absolute;left:50%;top:46%;width:74%;aspect-ratio:1;transform:translate(-50%,-50%); border-radius:50%;z-index:0;pointer-events:none;opacity:.5;filter:blur(30px); background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 40%,transparent),transparent 68%)} .wolf__tag{position:absolute;left:18px;bottom:18px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;color:var(--text);background:color-mix(in srgb,var(--bg) 55%,transparent); border:1px solid var(--line);padding:7px 11px;border-radius:8px;backdrop-filter:blur(6px)} .wolf__watermark{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display); text-transform:uppercase;font-size:clamp(3rem,9vw,6rem);color:color-mix(in srgb,var(--text) 8%,transparent); letter-spacing:.04em;pointer-events:none;line-height:.85;text-align:center} .hero__badge{position:absolute;right:18px;top:18px;display:flex;flex-direction:column;align-items:flex-end;gap:6px} .hero__badge .b{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase; background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--line);padding:6px 10px;border-radius:7px;backdrop-filter:blur(6px)} /* hero variant: centered (background wolf) */ [data-hero="center"] .hero__grid{grid-template-columns:1fr;text-align:center;min-height:64vh;place-items:center} [data-hero="center"] .hero__eyebrow{justify-content:center} [data-hero="center"] .hero__sub{margin-inline:auto} [data-hero="center"] .hero__cta,[data-hero="center"] .hero__trust{justify-content:center} [data-hero="center"] .hero__visual{position:absolute;inset:0;z-index:-1;opacity:.5;filter:saturate(1.1)} [data-hero="center"] .hero__visual .wolf{aspect-ratio:auto;height:100%;border:none;border-radius:0; mask:radial-gradient(120% 80% at 50% 40%,#000 30%,transparent 75%)} [data-hero="center"] .hero__visual .wolf__tag,[data-hero="center"] .hero__badge{display:none} [data-hero="center"] .hero h1{font-size:clamp(3.4rem,11vw,8rem)} /* hero variant: editorial (overlap) */ [data-hero="editorial"] .hero__grid{grid-template-columns:1fr;gap:0} [data-hero="editorial"] .hero__copy{position:relative;z-index:2;max-width:none} [data-hero="editorial"] .hero h1{font-size:clamp(3.6rem,15vw,11rem);mix-blend-mode:difference} [data-hero="editorial"] .hero__visual{position:absolute;right:0;top:50%;transform:translateY(-50%); width:min(40vw,460px);z-index:1} [data-hero="editorial"] .hero__lower{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:18px} /* ============================================================ REASSURANCE ============================================================ */ .reassure{border-block:1px solid var(--line-2);margin-top:30px} .reassure__grid{display:grid;grid-template-columns:repeat(4,1fr)} .reassure__item{display:flex;align-items:center;gap:14px;padding:26px 22px;border-left:1px solid var(--line-2)} .reassure__item:first-child{border-left:none} .reassure__item .ic{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center; background:var(--surface);border:1px solid var(--line);color:var(--accent)} .reassure__item .ic svg{width:20px;height:20px} .reassure__item b{display:block;font-size:.92rem;font-weight:600} .reassure__item span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} /* ============================================================ SECTIONS shell ============================================================ */ .section{padding:96px 0;position:relative;z-index:1} /* ============================================================ CATEGORIES BENTO ============================================================ */ .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:18px} .cat{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line); background:var(--surface);padding:26px;display:flex;flex-direction:column;justify-content:flex-end; transition:transform .4s var(--ease),border-color .4s;isolation:isolate} .cat::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.0;transition:opacity .4s; background:radial-gradient(90% 80% at 70% 10%,color-mix(in srgb,var(--glow-b) 60%,transparent),transparent 60%)} .cat:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))} .cat:hover::before{opacity:.8} .cat .stripe{position:absolute;inset:0;z-index:-2;opacity:.5; background:repeating-linear-gradient(135deg,transparent,transparent 16px,var(--surface-2) 16px,var(--surface-2) 17px)} .cat__count{position:absolute;top:22px;left:26px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--muted)} .cat__arrow{position:absolute;top:20px;right:22px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line); display:grid;place-items:center;transition:background .3s,transform .3s,color .3s} .cat:hover .cat__arrow{background:var(--x-ink);color:#fff;transform:rotate(-45deg)} .cat h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.7rem;line-height:.95;font-weight:400} .cat p{color:var(--muted);font-size:.85rem;margin-top:6px;max-width:30ch} .cat--xl{grid-column:span 2;grid-row:span 2} .cat--xl h3{font-size:clamp(2.2rem,4vw,3.4rem)} .cat--tall{grid-row:span 2} .cat--feat{background:linear-gradient(140deg,color-mix(in srgb,var(--glow-a) 30%,var(--surface)),var(--surface))} /* Tuile Intense : signalée par une bordure rouge (décoratif, hors contrainte de contraste texte) ; le label garde la couleur --muted (WCAG-safe en Holo+Cosmic). */ .cat--intense{border-color:color-mix(in srgb,var(--x) 48%,var(--line))} .cat--intense:hover{border-color:var(--x)} /* ============================================================ PRODUCTS ============================================================ */ .prod-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .card{position:relative;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface); overflow:hidden;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;display:flex;flex-direction:column} .card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:0 30px 60px -34px var(--glow-b)} .card__media{position:relative;aspect-ratio:1;overflow:hidden; background: radial-gradient(80% 80% at 50% 30%,color-mix(in srgb,var(--glow-b) 30%,transparent),transparent 60%), repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 9px,var(--surface) 9px,var(--surface) 18px)} .card__media .ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-mono);font-size:.7rem; letter-spacing:.14em;text-transform:uppercase;color:var(--faint)} /* product visuals — macro abstraits par catégorie */ .card__shot{position:absolute;inset:0;z-index:0;overflow:hidden} .card__shot::before{content:"";position:absolute;inset:0;opacity:.45; background-image:radial-gradient(rgba(255,255,255,.85) .5px,transparent 1.2px);background-size:7px 7px;mix-blend-mode:var(--aura-blend)} .card__shot::after{content:"";position:absolute;inset:0; background:radial-gradient(120% 80% at 50% 32%,transparent 52%,rgba(0,0,0,.5))} .tex-bud{background: radial-gradient(circle at 32% 34%,hsl(var(--h1) 58% 62%/.95),transparent 24%), radial-gradient(circle at 64% 30%,hsl(var(--h2) 52% 56%/.9),transparent 22%), radial-gradient(circle at 50% 56%,hsl(var(--h1) 50% 54%/.95),transparent 28%), radial-gradient(circle at 74% 64%,hsl(var(--h2) 46% 50%/.9),transparent 24%), radial-gradient(circle at 28% 70%,hsl(var(--h1) 46% 48%/.9),transparent 24%), radial-gradient(circle at 50% 46%,hsl(var(--h1) 42% 30%),hsl(var(--h2) 44% 15%))} .tex-sand{background: radial-gradient(circle at 38% 34%,hsl(var(--h1) 72% 62%/.7),transparent 58%), radial-gradient(circle at 66% 70%,hsl(var(--h2) 62% 46%/.6),transparent 52%), linear-gradient(150deg,hsl(var(--h1) 62% 50%),hsl(var(--h2) 56% 32%))} .tex-sand::before{opacity:.7;background-size:5px 5px} .tex-glossy{background: radial-gradient(120% 65% at 30% 10%,rgba(255,255,255,.4),transparent 42%), radial-gradient(80% 50% at 72% 80%,hsl(var(--h1) 50% 38%/.7),transparent 60%), linear-gradient(158deg,hsl(var(--h1) 44% 30%),hsl(var(--h2) 52% 12%))} .tex-glossy::before{opacity:.25} .card__pot{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--font-mono);font-weight:700;font-size:.7rem;letter-spacing:.08em; background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--line);color:var(--text); padding:5px 9px;border-radius:6px;backdrop-filter:blur(6px)} .card__off{position:absolute;top:12px;right:12px;z-index:2;font-family:var(--font-mono);font-weight:700;font-size:.7rem;letter-spacing:.04em; background:var(--x-ink);color:#fff;padding:5px 9px;border-radius:6px;box-shadow:0 6px 18px -6px var(--x)} .card__tag{position:absolute;bottom:12px;left:12px;z-index:2;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em; text-transform:uppercase;padding:5px 9px;border-radius:6px} .card__tag.tag-new{background:var(--accent);color:#fff} .card__tag.tag-dest{background:var(--text);color:var(--bg)} /* Jauge d'intensite (taxonomie maison Intense) : plots /3 — composant reutilise carte / fiche / filtre. Plots allumes = accent rouge Intense ; eteints = trace. */ .gauge{display:inline-flex;align-items:center;gap:5px;line-height:1} .gauge__dot{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--text) 22%,transparent)} .gauge__dot.is-on{background:var(--x-ink)} .gauge__label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase} /* Pastille jauge sur le media de la carte (coin bas-droit, verre comme card__pot) */ .card__media .gauge--chip{position:absolute;bottom:12px;right:12px;z-index:2; background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid var(--line); padding:7px 9px;border-radius:999px;backdrop-filter:blur(6px)} .card__fav{position:absolute;bottom:12px;right:12px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center; background:color-mix(in srgb,var(--bg) 60%,transparent);border:1px solid var(--line);backdrop-filter:blur(6px);opacity:0; transform:translateY(6px);transition:opacity .3s,transform .3s,color .2s} .card:hover .card__fav{opacity:1;transform:translateY(0)} .card__fav:hover{color:var(--x)} .card__fav svg{width:16px;height:16px} .card__body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1} .card__type{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .card__name{font-family:var(--font-body);font-weight:600;font-size:1.05rem;line-height:1.25;letter-spacing:normal;text-transform:none} .card__spec{display:flex;gap:6px;flex-wrap:wrap} .card__spec span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted); border:1px solid var(--line);padding:3px 7px;border-radius:5px} .card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:10px} .card__price{font-weight:700;font-size:1.05rem;display:inline-flex;align-items:baseline;gap:4px;flex-wrap:wrap} .card__price .card__from{color:var(--faint);font-weight:400;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-mono)} .card__price .card__unit{color:var(--faint);font-weight:400;font-size:.72rem} .card__price .card__old{color:var(--muted);font-weight:400;font-size:.78rem;text-decoration:line-through;margin-left:4px} .add{width:40px;height:40px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line); display:grid;place-items:center;transition:background .25s,color .25s,transform .25s} .add svg{width:18px;height:18px} .add:hover{background:var(--x-ink);color:#fff;transform:scale(1.06)} .add.added{background:var(--accent);color:#fff} /* ventes flash banner */ .flash{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; border:1px solid var(--line);border-radius:var(--r-md);padding:18px 24px;margin-bottom:26px;position:relative;overflow:hidden; background:linear-gradient(100deg,color-mix(in srgb,var(--x) 16%,var(--surface)),var(--surface) 60%)} .flash::before{content:"";position:absolute;inset:0;z-index:0;opacity:.7; background:radial-gradient(70% 120% at 0% 50%,color-mix(in srgb,var(--x) 22%,transparent),transparent 60%)} .flash>*{position:relative;z-index:1} .flash__left{display:flex;align-items:center;gap:18px} .flash__pct{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.8rem);line-height:.9;color:var(--x)} .flash__txt b{display:block;font-size:1rem;letter-spacing:.01em} .flash__txt span{color:var(--muted);font-size:.85rem} .flash__right{display:flex;flex-direction:column;align-items:flex-end;gap:7px} .flash__lbl{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)} .flash__cd{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:700} .flash__cd span{background:var(--bg-2);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:1.05rem;min-width:44px;text-align:center;font-variant-numeric:tabular-nums} .flash__cd i{color:var(--x);font-style:normal} @media (max-width:560px){.flash{justify-content:flex-start}.flash__right{align-items:flex-start}} /* ============================================================ PROMO BANNER — mise en avant forte ============================================================ */ .promo{position:relative;display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap; border-radius:var(--r-lg);padding:32px 40px;overflow:hidden;text-decoration:none;color:var(--ink); border:1px solid color-mix(in srgb,var(--x) 45%,var(--line)); background: linear-gradient(110deg,color-mix(in srgb,var(--x) 30%,var(--surface)) 0%,var(--surface) 58%), var(--surface); box-shadow:0 24px 60px -28px color-mix(in srgb,var(--x) 60%,transparent); transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)} .promo:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--x) 70%,var(--line)); box-shadow:0 32px 72px -26px color-mix(in srgb,var(--x) 75%,transparent)} .promo__glow{position:absolute;inset:0;z-index:0;opacity:.9;pointer-events:none; background:radial-gradient(60% 130% at 6% 50%,color-mix(in srgb,var(--x) 32%,transparent),transparent 62%)} .promo>*{position:relative;z-index:1} .promo__main{display:flex;align-items:center;gap:30px;min-width:0} .promo__pct{display:flex;flex-direction:column;align-items:flex-start;line-height:.82;flex-shrink:0} .promo__pct i{font-style:normal;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;color:var(--x);margin-bottom:6px} .promo__pct b{font-family:var(--font-display);font-weight:800;font-size:clamp(3.4rem,7.5vw,6rem); color:var(--x);letter-spacing:-.02em;text-shadow:0 6px 30px color-mix(in srgb,var(--x) 50%,transparent)} .promo__pct u{text-decoration:none;font-size:.5em} .promo__kicker{display:inline-block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;color:var(--muted); background:color-mix(in srgb,var(--x) 16%,transparent);border:1px solid color-mix(in srgb,var(--x) 35%,transparent); border-radius:999px;padding:5px 12px;margin-bottom:12px} .promo__h{font-family:var(--font-display);font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.02;margin:0 0 8px;letter-spacing:-.01em} .promo__txt p{color:var(--muted);font-size:.95rem;margin:0;max-width:46ch} .promo__txt p b{color:var(--ink)} .promo__side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex-shrink:0} .promo__cd span{background:color-mix(in srgb,var(--x) 12%,var(--bg-2));border-color:color-mix(in srgb,var(--x) 40%,var(--line))} .promo__cta{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem; background:var(--x-ink);color:#fff;border-radius:999px;padding:13px 22px; box-shadow:0 12px 30px -10px color-mix(in srgb,var(--x) 80%,transparent);transition:gap .3s var(--ease)} .promo:hover .promo__cta{gap:14px} .promo__cta svg{width:17px;height:17px} @media (max-width:760px){ .promo{padding:26px 24px;gap:22px} .promo__main{gap:20px} .promo__side{align-items:flex-start;width:100%} } /* ============================================================ PACK / BRAND STORY ============================================================ */ .pack{position:relative;z-index:1;padding:0 0 30px} .pack__band{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;background:color-mix(in srgb,var(--surface) 40%,transparent)} .pack__band .marquee__track{animation-duration:34s} .pack__band .marquee__track span{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.2rem,6vw,4.4rem); color:transparent;-webkit-text-stroke:1.4px color-mix(in srgb,var(--text) 35%,transparent);padding:0 30px;letter-spacing:.02em} .pack__band .marquee__track span::after{content:"●";-webkit-text-stroke:0;color:var(--x);font-size:.5em;vertical-align:middle} .pack__inner{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding-top:80px} .pack__copy h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.4rem,5vw,4rem);line-height:.92;margin-bottom:22px} .pack__copy p{color:var(--muted);max-width:48ch;margin-bottom:18px} .pack__stats{display:flex;gap:32px;margin-top:30px;flex-wrap:wrap} .pack__stats .s b{font-family:var(--font-display);font-size:2.6rem;display:block;line-height:1} .pack__stats .s span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} /* pouches showcase */ .pouches{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .pouch{aspect-ratio:3/4;border-radius:18px 18px 14px 14px;position:relative;overflow:hidden;border:1px solid var(--line); display:flex;flex-direction:column;align-items:center;padding:22px 14px;text-align:center; box-shadow:0 30px 60px -30px #000;transition:transform .4s var(--ease)} .pouch:hover{transform:translateY(-6px) rotate(-1deg)} .pouch::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:46%;height:14px; background:var(--surface-2);border-radius:0 0 8px 8px;border:1px solid var(--line);border-top:none} .pouch .run{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.16em;color:rgba(255,255,255,.7);margin-top:8px} .pouch .pn{font-family:var(--font-display);text-transform:uppercase;font-size:1.5rem;line-height:.85;color:#fff;margin-top:auto;letter-spacing:.02em} .pouch .pn .x{color:var(--x)} .pouch .pcbd{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;color:rgba(255,255,255,.85);margin-bottom:8px} .pouch .pq{font-family:var(--font-mono);font-size:.48rem;letter-spacing:.16em;color:rgba(255,255,255,.55);text-transform:uppercase} .pouch .glow{position:absolute;inset:0;z-index:-1;opacity:.9} .pouch.p1{background:#0a0a12} .pouch.p1 .glow{background:radial-gradient(70% 50% at 50% 38%,#2b3bff55,transparent 60%)} .pouch.p2{background:linear-gradient(160deg,#1a1140,#3a1370)} .pouch.p2 .glow{background:radial-gradient(70% 50% at 50% 38%,#7b3bff66,transparent 60%)} .pouch.p3{background:linear-gradient(160deg,#2a0f3a,#7a1030)} .pouch.p3 .glow{background:radial-gradient(70% 50% at 50% 38%,#ff2d6b55,transparent 60%)} .pouch.p4{background:linear-gradient(160deg,#dfe0ff,#efe0ff)} .pouch.p4 .run,.pouch.p4 .pcbd{color:#3a2d6a} .pouch.p4 .pn{color:#241a4a} .pouch.p4 .pq{color:#6a5a9a} .pouch.p4 .glow{background:radial-gradient(70% 50% at 50% 38%,#b9a8ff66,transparent 60%)} /* ============================================================ REVIEWS ============================================================ */ .reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .review{border:1px solid var(--line);border-radius:var(--r-md);padding:26px;background:var(--surface); display:flex;flex-direction:column;gap:16px;transition:transform .35s var(--ease),border-color .35s} .review:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))} .stars{display:flex;gap:3px;color:var(--x)} .stars svg{width:16px;height:16px} .review p{font-size:.96rem;line-height:1.6} .review .who{display:flex;align-items:center;gap:12px;margin-top:auto} .review .av{width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-2)); display:grid;place-items:center;font-family:var(--font-display);color:#fff;font-size:1rem} .review .who b{font-size:.88rem;display:block} .review .who span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--faint);text-transform:uppercase} .rev-summary{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap} .rev-summary .big{font-family:var(--font-display);font-size:2.6rem;line-height:1} .rev-summary .meta{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase} /* ============================================================ STORE / CONTACT ============================================================ */ .store{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--surface)} /* Carte statique self-hostee (cookieless, generee par scripts/build-store-map.py). Image figee -> swap clair/sombre calque sur le cascade colorway des tokens. */ .store__map{position:relative;min-height:440px;overflow:hidden; background-image:url(../img/store-map-light.webp); background-size:cover;background-position:center;background-repeat:no-repeat} [data-colorway="cosmic"] .store__map{background-image:url(../img/store-map-dark.webp)} @media (prefers-color-scheme:dark){:root:not([data-colorway]) .store__map{background-image:url(../img/store-map-dark.webp)}} /* voile de marque : leger fondu des bords vers la surface pour integrer la carte */ .store__map::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(72% 72% at 50% 46%,transparent,color-mix(in srgb,var(--bg-2) 45%,transparent))} /* attribution obligatoire (donnees OSM ODbL + fond CARTO) */ .store__map::after{content:"© OpenStreetMap · CARTO";position:absolute;right:8px;bottom:7px;z-index:2; font-family:var(--font-mono);font-size:.58rem;letter-spacing:.04em;color:var(--muted); background:color-mix(in srgb,var(--bg) 55%,transparent);padding:2px 7px;border-radius:6px;backdrop-filter:blur(4px)} .store__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px} .store__pin .dot{width:18px;height:18px;border-radius:50%;background:var(--x);box-shadow:0 0 0 8px color-mix(in srgb,var(--x) 25%,transparent),0 0 30px var(--x);animation:pulse 2.4s var(--ease) infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 8px color-mix(in srgb,var(--x) 25%,transparent),0 0 30px var(--x)}50%{box-shadow:0 0 0 16px color-mix(in srgb,var(--x) 6%,transparent),0 0 40px var(--x)}} .store__pin .lbl{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; background:color-mix(in srgb,var(--bg) 65%,transparent);border:1px solid var(--line);padding:6px 10px;border-radius:7px;backdrop-filter:blur(6px)} .store__info{padding:48px} .store__info h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:.95;margin-bottom:8px} .store__info .addr{color:var(--muted);margin-bottom:28px} .info-row{display:flex;gap:14px;padding:18px 0;border-top:1px solid var(--line-2)} .info-row .ic{width:40px;height:40px;flex:none;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent)} .info-row .ic svg{width:19px;height:19px} .info-row b{display:block;font-size:.95rem} .info-row span{color:var(--muted);font-size:.88rem} .info-row .mono{font-family:var(--font-mono);font-size:.82rem} .store__info .btn{margin-top:26px} /* ============================================================ PAGES LÉGALES (mentions, CGV, confidentialité, cookies, rétractation) Gabarit page-{slug}.html (titre + contenu). Largeur de lecture + typo lisible : on dé-Antonise les titres d'articles (le global theme.json met les headings en Anton uppercase, illisible pour un texte juridique long). Scopé .section--legal / .alphax-legal : aucun impact sur les autres pages. ============================================================ */ .section--legal .wrap{max-width:880px;margin-inline:auto} .legal__title{margin:0 0 .7em;font-size:clamp(2rem,5vw,3rem);line-height:1.02} .alphax-legal{color:var(--muted)} .alphax-legal h2,.alphax-legal h3{font-family:var(--font-body);text-transform:none;letter-spacing:normal;font-weight:700;color:var(--text);line-height:1.3} .alphax-legal h2{font-size:1.3rem;margin-top:2.2em;margin-bottom:.55em;padding-bottom:.4em;border-bottom:1px solid var(--line)} .alphax-legal h3{font-size:1.08rem;margin-top:1.7em;margin-bottom:.45em} .alphax-legal p,.alphax-legal li{line-height:1.75} .alphax-legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .alphax-legal a:hover{color:var(--accent-2)} .alphax-legal strong{color:var(--text)} .alphax-legal ul,.alphax-legal ol{padding-left:1.35em;margin:.8em 0} .alphax-legal li{margin:.35em 0} .alphax-legal table{width:100%;border-collapse:collapse;font-size:.95em;margin:1.4em 0} .alphax-legal th,.alphax-legal td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top} .alphax-legal th{background:var(--surface);color:var(--text);font-weight:700} .alphax-legal hr{border:0;border-top:1px solid var(--line);width:100%;margin:2.6em 0} /* ============================================================ FOOTER ============================================================ */ .foot{position:relative;z-index:1;background:var(--bg);border-top:1px solid var(--line);margin-top:40px;padding-top:70px} .foot__big{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(4rem,18vw,15rem);line-height:.8; color:transparent;-webkit-text-stroke:1.5px var(--line);text-align:center;margin-bottom:50px;letter-spacing:.01em;pointer-events:none} .foot__big .x{-webkit-text-stroke:1.5px var(--x);color:transparent} .foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px} .foot h4{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:18px} .foot__col a{display:block;color:var(--muted);font-size:.9rem;padding:5px 0;transition:color .2s} .foot__col a:hover{color:var(--text)} .foot__brand .logo{margin-bottom:16px} .foot__brand p{color:var(--muted);font-size:.9rem;max-width:34ch} .foot__18{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);padding:8px 12px;border-radius:8px} .foot__18 .n{width:26px;height:26px;border-radius:50%;background:var(--x-ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.66rem} .foot__bottom{border-top:1px solid var(--line-2);padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap} .foot__bottom p{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:var(--faint)} .foot__pay{display:flex;gap:8px} .foot__pay span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);padding:5px 9px;border-radius:6px} .foot__disc{text-align:center;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--faint); padding:18px 0 40px;text-transform:uppercase;line-height:1.8} /* ============================================================ REVEAL ANIM ============================================================ */ /* Reveal au scroll — caché uniquement quand JS a posé html[data-anim="on"]. Sans JS (ou data-anim absent) : visible par défaut = fail-safe + SEO. Révélé par reveal.js (IntersectionObserver, one-shot). */ .reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)} html[data-anim="on"] .reveal{opacity:0;transform:translateY(28px)} html[data-anim="on"] .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){html[data-anim="on"] .reveal{opacity:1;transform:none;transition:none}} @media print{.reveal{opacity:1 !important;transform:none !important}} html[data-anim="on"] .reveal[data-d="1"]{transition-delay:.08s} html[data-anim="on"] .reveal[data-d="2"]{transition-delay:.16s} html[data-anim="on"] .reveal[data-d="3"]{transition-delay:.24s} /* ============================================================ MOBILE MENU ============================================================ */ .mobile-menu{position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--bg) 96%,transparent); backdrop-filter:blur(20px);display:flex;flex-direction:column;padding:90px 28px 40px;gap:6px; transform:translateX(100%);transition:transform .4s var(--ease)} .mobile-menu.open{transform:none} .mobile-menu a{font-family:var(--font-display);text-transform:uppercase;font-size:2rem;padding:14px 0;border-bottom:1px solid var(--line-2)} .mobile-menu .close{position:absolute;top:24px;right:24px;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%} /* ============================================================ SEARCH OVERLAY ============================================================ */ .search-overlay{position:fixed;inset:0;z-index:70;padding:16vh 24px 24px;display:flex;justify-content:center;align-items:flex-start; background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(20px) saturate(1.2); opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease)} .search-overlay.open{opacity:1;visibility:visible} .search-overlay__inner{width:min(640px,100%);position:relative} .search-form{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:10px 10px 10px 16px;box-shadow:0 24px 60px -28px rgba(0,0,0,.5)} .search-form__ico{width:22px;height:22px;color:var(--muted);flex:none} .search-form input[type="search"]{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text); font-family:var(--font-text,inherit);font-size:1.05rem;padding:8px 4px} .search-form input[type="search"]::placeholder{color:var(--faint)} .search-form .btn{flex:none} .search-overlay__close{position:absolute;top:-52px;right:0;width:42px;height:42px;display:grid;place-items:center; border:1px solid var(--line);border-radius:50%;color:var(--text);background:color-mix(in srgb,var(--bg) 70%,transparent)} .search-overlay__close:hover{border-color:var(--accent)} /* Verrou de défilement (menu mobile / recherche ouverts). */ html.is-locked,html.is-locked body{overflow:hidden} /* ============================================================ 404 ============================================================ */ .section--404{min-height:62vh;display:flex;align-items:center} .err404{max-width:680px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px} .err404__num{font-family:var(--font-display);font-size:clamp(5rem,18vw,11rem);line-height:.9;letter-spacing:-.02em; background:linear-gradient(120deg,var(--accent),var(--x));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.92} .err404__title{font-size:clamp(1.6rem,4.5vw,2.6rem);margin:0} .err404__lead{color:var(--muted);max-width:46ch;margin:0} .err404__search{width:100%;max-width:520px;margin:8px 0} .err404__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .err404__cats{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;margin-top:8px} .err404__cats a{color:var(--muted);font-size:.92rem;border-bottom:1px solid var(--line-2);padding-bottom:2px} .err404__cats a:hover{color:var(--text);border-color:var(--accent)} /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1024px){ .bento{grid-template-columns:repeat(2,1fr)} .cat--xl{grid-column:span 2} .prod-rail{grid-template-columns:repeat(2,1fr)} .reviews__grid{grid-template-columns:1fr 1fr} .pack__inner{grid-template-columns:1fr;gap:40px} } @media (max-width:860px){ .nav__links{display:none} .burger{display:grid} /* compte déjà présent dans le menu burger -> on libère de la place dans la barre d'icônes (anti-débordement mobile) */ .nav__actions a[aria-label="Mon compte"]{display:none} .hero__grid{grid-template-columns:1fr;gap:34px} .hero__visual{order:-1;max-width:420px} .reassure__grid{grid-template-columns:1fr 1fr} .reassure__item:nth-child(3){border-left:none} .store{grid-template-columns:1fr} .store__map{min-height:300px} .foot__grid{grid-template-columns:1fr 1fr} [data-hero="editorial"] .hero__visual{position:relative;transform:none;top:auto;width:min(70vw,360px);margin:20px auto 0} [data-hero="editorial"] .hero h1{mix-blend-mode:normal} } @media (max-width:560px){ .reassure__grid{grid-template-columns:1fr} .reassure__item{border-left:none!important;border-top:1px solid var(--line-2)} .reassure__item:first-child{border-top:none} .prod-rail,.reviews__grid,.pouches{grid-template-columns:1fr 1fr} .foot__grid{grid-template-columns:1fr} .section{padding:64px 0} /* — HERO compact : le visuel ne doit plus pousser le titre hors du fold — loup réduit + centré, espacements resserrés, titre compacté. */ .hero{padding:26px 0 30px} .hero__grid{gap:18px} .hero__visual{width:248px;max-width:100%;justify-self:center} .hero__eyebrow{margin-bottom:14px} .hero h1.hero__h{font-size:clamp(2.05rem,8.5vw,3rem);margin-bottom:14px} .hero__sub{font-size:.97rem;margin-bottom:20px} .hero__cta{margin-bottom:20px} /* — BENTO catégories → liste de cartes pleine largeur (1 colonne) — Label + titre + desc en flux normal (le label absolu chevauchait le titre sur des cartes basses) ; contenu centré, flèche au milieu à droite. */ .bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px} .cat,.cat--xl,.cat--tall{grid-column:auto;grid-row:auto} .cat{min-height:104px;justify-content:center;padding:18px 64px 18px 22px} .cat--xl{min-height:120px} .cat__count{position:static;margin-bottom:7px} .cat__arrow{top:50%;bottom:auto;margin-top:-19px} .cat--xl h3{font-size:clamp(1.9rem,8vw,2.5rem)} .cat h3{font-size:1.45rem;line-height:1} .cat p{font-size:.82rem;max-width:42ch;margin-top:8px} /* Cible tactile : bouton "+" ajouter au panier ≥ 44px (Apple HIG) */ .add{width:44px;height:44px} } /* ============================================================ PERF MOBILE — allègement défensif des effets GPU coûteux. Gain non mesurable sur GPU desktop, mais documenté sur mobiles faibles : un backdrop-filter collé relit le fond À CHAQUE frame de scroll ; blur(90px) sur ~60vw = grosse texture ; grain animé = travail compositeur permanent. Allégé ≤600px, desktop intact, changement visuel négligeable (validé Nicolas 20/06). ============================================================ */ @media (max-width:600px){ /* nav scrollé : fond quasi-opaque, plus de backdrop-filter (= readback GPU/frame) */ .nav.scrolled{background:color-mix(in srgb,var(--bg) 92%,transparent); -webkit-backdrop-filter:none;backdrop-filter:none} /* auras : rayon de flou réduit + 3e aura (la plus accessoire) coupée */ .backdrop .aura{filter:blur(60px)} .aura.a3{display:none} /* grain : texture conservée, animation coupée (travail compositeur permanent) */ .backdrop .grain{animation:none} } /* ============================================================ HERO MOTION — entrée chorégraphiée + vie au repos (coupée si data-anim="off" ou prefers-reduced-motion) ============================================================ */ .hero h1 .w{display:inline-block} .hero h1 .c{display:inline-block} /* Variante MIX : aurora léger qui se résout en blanc. Au repos, lettres BLANCHES (lisible sans JS / reduced-motion, fin rim violet). À l'entrée, chaque lettre monte en cascade, balayée d'un dégradé cosmic léger qui glisse du bas (violet) vers le haut (blanc) → fin = texte blanc. Fond + clip:text portés par chaque .c → le will-change ne casse rien (vs l'ancien aurora). */ .hero__h[data-title-fx="mix"] .c{ color:transparent;-webkit-text-fill-color:transparent; -webkit-text-stroke:.4px color-mix(in srgb,var(--x-ink) 25%,transparent); background:linear-gradient(180deg,var(--text) 0%,var(--text) 30%,color-mix(in srgb,var(--x-ink) 18%,var(--text)) 52%,color-mix(in srgb,var(--x-ink) 50%,#fff) 74%,var(--x-ink) 100%) no-repeat; background-size:100% 300%;background-position:50% 0%; -webkit-background-clip:text;background-clip:text; will-change:background-position,opacity,filter,transform} .hero__visual .wolf{ transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s ease-out;will-change:transform} @media (prefers-reduced-motion: no-preference){ /* — titre, variante MIX : cascade de lettres, dégradé cosmic léger → blanc. Démarre après l'image (~.4s) puis cascade. En fill-mode both, il reste invisible (opacity 0) pendant le délai. — */ html:not([data-anim="off"]) .hero__h[data-title-fx="mix"] .c{ animation:titleMix .8s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(.4s + var(--ci,0)*.04s)} html:not([data-anim="off"]) .hero__eyebrow .line{transform-origin:left center;animation:heroLine .9s .05s var(--ease) both} html:not([data-anim="off"]) .hero__eyebrow .eyebrow{animation:heroFade .7s .3s var(--ease) both} html:not([data-anim="off"]) .hero__sub{animation:heroUp .8s .5s var(--ease) both} html:not([data-anim="off"]) .hero__cta{animation:heroUp .7s .6s var(--ease) both} html:not([data-anim="off"]) .hero__trust .chip{animation:heroUp .7s var(--ease) both} html:not([data-anim="off"]) .hero__trust .chip:nth-child(1){animation-delay:.78s} html:not([data-anim="off"]) .hero__trust .chip:nth-child(2){animation-delay:.86s} html:not([data-anim="off"]) .hero__trust .chip:nth-child(3){animation-delay:.94s} /* — visuel : entrée nette puis repos (plus de flottement perpétuel). Le drift au scroll est géré par hero.js via la propriété `translate`, indépendante de ce `transform` d'entrée → les deux se composent. — */ html:not([data-anim="off"]) .hero__visual .wolf{animation:heroCard .7s .15s var(--ease) both} html:not([data-anim="off"]) .wolf__img{ animation:heroWolfIn .8s .35s cubic-bezier(.16,1,.3,1) both} html:not([data-anim="off"]) .wolf__halo{animation:heroFade 1s .55s ease both} html:not([data-anim="off"]) .hero__badge{animation:heroFade .8s .9s ease both} } @keyframes titleMix{0%{background-position:50% 100%;opacity:0;transform:translateY(.18em);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--x) 60%,transparent))}30%{opacity:1;background-position:50% 82%}100%{background-position:50% 0%;opacity:1;transform:none;filter:drop-shadow(0 0 0 transparent)}} @keyframes heroUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes heroFade{from{opacity:0}to{opacity:1}} @keyframes heroLine{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes heroCard{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes heroWolfIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}} .twk-fab{position:fixed;right:20px;bottom:20px;z-index:2147483640;display:inline-flex;align-items:center;gap:9px; padding:12px 18px 12px 14px;border:1px solid rgba(255,255,255,.16);border-radius:999px;cursor:pointer; background:rgba(20,16,32,.72);color:#fff;font:600 12px/1 'Space Mono',ui-monospace,monospace; letter-spacing:.12em;text-transform:uppercase; -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%); box-shadow:0 12px 34px -12px rgba(124,77,255,.7);transition:transform .2s,background .2s,box-shadow .2s} .twk-fab:hover{background:rgba(34,24,52,.86);transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(124,77,255,.85)} .twk-fab svg{width:17px;height:17px;color:#bf95ff} @media (max-width:560px){.twk-fab span{display:none}.twk-fab{padding:13px;border-radius:50%}} /* (bloc TEMP retiré le 13/06 — animations activées, tâche #3) */ /* ============================================================ WOOCOMMERCE — pont markup classique <-> design tokens (zero couleur en dur ; restyle des classes WC par defaut) ============================================================ */ /* Conteneur boutique : largeur + gouttieres + rythme vertical */ #primary.content-area{padding-block:clamp(40px,6vw,80px)} #primary.content-area > #main.site-main{width:min(100% - 40px,var(--maxw));margin-inline:auto} /* Navigation Intense — bandeau de pastilles UNIFIÉ (archive parent + molécules). Émis par functions.php (hook woocommerce_before_shop_loop) ; la page courante porte aria-current. Rendu identique mobile/desktop (flex-wrap). */ .subnav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 32px} .subnav a{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);border-radius:999px;color:var(--muted);transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)} .subnav a:hover{border-color:var(--accent);color:var(--text)} .subnav a[aria-current="page"]{background:var(--x-ink);border-color:var(--x-ink);color:#fff} /* 2e bandeau (filtre par marque sur l'archive E-liquides) : colle au 1er (nav type) */ .subnav--marque{margin-top:-20px} /* Filtre par intensite (hub Intense) : chips a jauge — la pastille fait legende. Colle au bandeau de sous-cats du dessus, comme le filtre marque. */ .subnav--intensite{margin-top:-20px} .subnav--intensite a{display:inline-flex;align-items:center;gap:8px} .subnav--intensite a[aria-current="page"] .gauge__dot{background:color-mix(in srgb,#fff 45%,transparent)} .subnav--intensite a[aria-current="page"] .gauge__dot.is-on{background:#fff} /* En-tete d'archive facon section-head */ .woocommerce-products-header{margin-bottom:32px} .woocommerce-products-header__title{font-family:var(--font-display);text-transform:uppercase;font-weight:400;line-height:.92;font-size:clamp(2rem,5vw,3.4rem);margin:0} .woocommerce-products-header .term-description,.woocommerce-products-header__title + p,.term-description{color:var(--muted);max-width:60ch;margin-top:12px;font-size:.98rem} /* Fil d'ariane */ .woocommerce-breadcrumb{font-family:var(--font-body);font-size:.8rem;letter-spacing:normal;color:var(--faint);margin-bottom:18px} .woocommerce-breadcrumb a{color:var(--muted);text-decoration:underline} .woocommerce-breadcrumb a:hover{color:var(--accent)} /* Compteur + tri */ .woocommerce-result-count{color:var(--muted);font-size:.85rem;font-family:var(--font-body);letter-spacing:normal;margin:0 0 18px} .woocommerce-ordering{margin:0 0 26px} .woocommerce-ordering select{font-family:var(--font-body);font-size:.88rem;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 32px 9px 14px;cursor:pointer} /* Grille produits (la classe .prod-rail porte deja la grille) */ ul.products{list-style:none;margin:0;padding:0} ul.products.prod-rail > li.product{margin:0;float:none;width:auto;display:flex} ul.products.prod-rail > li.product .card{width:100%} .card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} /* Prix WooCommerce (wc_price) rendu dans la carte */ .card__price .woocommerce-Price-amount{font:inherit;color:inherit} .card__old .woocommerce-Price-amount{color:inherit} /* Pagination */ .woocommerce-pagination{margin-top:44px} .woocommerce-pagination ul{display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-wrap:wrap;justify-content:center} .woocommerce-pagination ul li a,.woocommerce-pagination ul li span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;color:var(--text);font-family:var(--font-mono);font-size:.85rem;text-decoration:none} .woocommerce-pagination ul li span.current{background:var(--accent);color:#fff;border-color:var(--accent)} .woocommerce-pagination ul li a:hover{border-color:var(--accent);color:var(--accent)} /* Notices WooCommerce */ /* --- Notifications WooCommerce (succès / info / erreur) --- 100 % tokens : succès = accent (violet de marque, PAS de vert hors-charte), info = glow bleu, erreur = X rouge. Badge icône en pseudo-élément (WC ne fournit pas d'icône — styles WC dequeués). Succès/info =
(flex row, bouton poussé à droite) ; erreur =