/* =====================================================================
PIK.Peptides — Boutique (storefront) · thème SOMBRE premium + animations
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800;900&display=swap');
:root{
--bg:#08080B; --bg-2:#0E0E13; --surface:#141419; --surface-2:#1B1B23;
--line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
--text:#ECEAF4; --muted:#9E9CB2; --muted-2:#6C6A7E;
--violet:#7C4DFF; --violet-2:#9B72FF; --violet-deep:#5A29C9; --violet-050:rgba(124,77,255,.12);
--glow:rgba(124,77,255,.45);
--acc-05:rgba(124,77,255,.05); --acc-18:rgba(124,77,255,.18); --acc-25:rgba(124,77,255,.25);
--acc-28:rgba(124,77,255,.28); --acc-30:rgba(124,77,255,.30); --acc-40:rgba(124,77,255,.40);
--acc-42:rgba(124,77,255,.42); --acc-50:rgba(124,77,255,.50); --acc2-32:rgba(155,114,255,.32);
--hero-tint:#1a1030; --spot-1:#2a1a52; --spot-2:#120c22;
--green:#3ddc91; --green-bg:rgba(61,220,145,.14); --amber:#ffcb6b; --red:#ff5d6c; --red-bg:rgba(255,93,108,.14);
--radius:18px; --radius-sm:12px;
--shadow:0 10px 40px rgba(0,0,0,.5);
--font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);color:var(--text);background:var(--bg);font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;color:#fff;}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px;}
::selection{background:var(--violet);color:#fff;}
/* Logo (blanc sur fond sombre via currentColor) */
.pik-logo{display:inline-flex;align-items:center;gap:11px;color:#fff;}
.pik-tube{height:1.7em;width:auto;}
.pik-word{font-weight:900;font-size:1.25rem;letter-spacing:-.03em;display:inline-flex;gap:.26em;}
.pik-liquid{fill:var(--violet,currentColor);}
.pik-bubble{transform-box:fill-box;transform-origin:center;animation:pikBubble 3.2s ease-in-out infinite;}
.pik-bubble--2{animation-duration:2.6s;animation-delay:-1s;}
@keyframes pikBubble{0%,100%{transform:translateY(2.5px) scale(.8);opacity:.4;}50%{transform:translateY(-2px) scale(1);opacity:1;}}
@media(prefers-reduced-motion:reduce){.pik-bubble{animation:none;}}
/* -------------------------------------------------- Bandeau défilant (marquee) */
.ann{background:linear-gradient(90deg,var(--violet-deep),var(--violet));color:#fff;overflow:hidden;white-space:nowrap;padding:8px 0;position:relative;}
/* Pas de flex-gap : l'espacement est porté par le séparateur (marge du dot),
sinon le gap entre les 2 copies décale la boucle -> saut périodique (saccade). */
.ann__track{display:flex;align-items:center;width:max-content;animation:annscroll 28s linear infinite;will-change:transform;backface-visibility:hidden;transform:translateZ(0);}
.ann__grp{display:flex;align-items:center;flex:0 0 auto;}
.ann__item{font-size:.82rem;font-weight:700;letter-spacing:.01em;}
.ann__dot{opacity:.55;font-size:.7rem;margin:0 13px;}
@keyframes annscroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ann:hover .ann__track{animation-play-state:paused;}
/* -------------------------------------------------- Header */
.hd{position:sticky;top:0;z-index:40;background:rgba(10,10,14,.94);border-bottom:1px solid var(--line);}
.hd__in{display:flex;align-items:center;gap:20px;padding:15px 22px;}
.hd__nav{display:flex;gap:24px;margin-left:16px;flex:1;}
.hd__nav a{font-weight:600;font-size:.94rem;color:var(--muted);position:relative;transition:color .2s;}
.hd__nav a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--violet);transition:width .25s;}
.hd__nav a:hover{color:#fff;}
.hd__nav a:hover::after{width:100%;}
.hd__cart{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--violet),var(--violet-deep));color:#fff;padding:10px 17px;border-radius:999px;font-weight:700;font-size:.9rem;position:relative;box-shadow:0 6px 22px var(--glow);transition:transform .15s,box-shadow .2s;}
.hd__cart:hover{transform:translateY(-2px);box-shadow:0 10px 30px var(--glow);}
.hd__cart svg{width:18px;height:18px;}
.hd__badge{background:#fff;color:var(--violet-deep);border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;font-size:.74rem;font-weight:800;padding:0 5px;}
/* -------------------------------------------------- Boutons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:12px;font-family:var(--font);font-weight:700;font-size:.94rem;border:1px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn svg{width:18px;height:18px;}
.btn--primary{background:linear-gradient(135deg,var(--violet),var(--violet-deep));color:#fff;box-shadow:0 8px 26px var(--glow);}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px var(--glow);}
.btn--glass{background:rgba(255,255,255,.06);border-color:var(--line-2);color:#fff;backdrop-filter:blur(8px);}
.btn--glass:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);}
.btn--dark{background:#fff;color:#0b0b0f;}
.btn--dark:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,255,255,.15);}
.btn--ghost{background:transparent;color:#fff;border-color:var(--line-2);}
.btn--ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);}
.btn--lg{padding:15px 28px;font-size:1rem;}
.btn--block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}
/* -------------------------------------------------- Hero */
.hero{position:relative;overflow:hidden;padding:92px 0 86px;background:radial-gradient(120% 120% at 50% -10%,var(--hero-tint) 0%,var(--bg) 60%);}
.hero__glow{position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:820px;height:620px;background:radial-gradient(circle,var(--acc-42),transparent 62%);filter:blur(28px);pointer-events:none;}
.hero__grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);opacity:.5;pointer-events:none;}
/* Fond fluide (swirls violets) + fiole illustrée façon réf */
/* Fond fluide : motif 2x plus grand, répétition horizontale uniquement */
.hero__fluid{position:absolute;inset:0;overflow:hidden;opacity:.5;pointer-events:none;mix-blend-mode:screen;}
/* Tuile MIROIR (motif + son reflet) recadrée sur le dessin : les bords se
correspondent par symétrie -> répétition horizontale sans aucune jointure.
Hauteur 100% : le motif remplit tout le hero (le SVG est en preserveAspectRatio="none"). */
.hero__fluid{--tile:1500px;}
.hero__fluid i{position:absolute;top:0;left:0;height:100%;width:calc(100% + var(--tile));display:block;
background:url('bg-fluid.svg') repeat-x left top/var(--tile) 100%;}
/* Dérive lente et continue (transform seul = 0 repaint) */
.hero__fluid.is-animated i{animation:fluidDrift 60s linear infinite;will-change:transform;}
@keyframes fluidDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--tile) * -1),0,0)}}
@media(prefers-reduced-motion:reduce){.hero__fluid.is-animated i{animation:none;}.hero__fluid{transition:none;}}
/* Fiole : sans fond, grande, basse opacité, ancrée bas et coupée à moitié par le hero */
.hero__vial{--vial-h:clamp(380px,72vh,700px);position:absolute;left:3%;bottom:calc(var(--vial-h) * -.5);width:auto;height:var(--vial-h);color:#fff;opacity:.5;z-index:0;pointer-events:none;filter:drop-shadow(0 20px 50px rgba(0,0,0,.5));}
.hero__vial svg{height:100%;width:auto;display:block;}
/* Décorative : masquée sur les écrans étroits */
@media(max-width:1100px){.hero__vial{display:none;}}
/* Le logo n'est plus encadré : le liseré et le fond sombre dessinaient un
rectangle autour de « PIK » sans rien apporter — le dessin se suffit. On
garde une zone de clic confortable via un padding vertical. */
.hd__brand{display:inline-flex;align-items:center;padding:8px 0;flex:0 0 auto;}
/* Cible de défilement : le header est collant, une ancre nue se retrouverait
cachée dessous. La marge de défilement la décale d'une hauteur d'en-tête. */
.anchor{display:block;height:0;scroll-margin-top:84px;}
/* Barre de recherche du header */
.hd__search{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;min-width:230px;max-width:380px;flex:1;transition:border-color .18s,background .18s;}
.hd__search:focus-within{border-color:var(--violet);background:rgba(255,255,255,.09);}
.hd__search svg{width:17px;height:17px;color:var(--muted);flex:0 0 17px;}
.hd__search input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-family:var(--font);font-size:.92rem;}
.hd__search input::placeholder{color:var(--muted-2);}
.hd__search input::-webkit-search-cancel-button{filter:invert(1);opacity:.5;}
@media(max-width:900px){.hd__search{display:none;}}
.hero__in{position:relative;text-align:center;}
.hero__eyebrow{display:inline-block;padding:7px 16px;border-radius:999px;background:var(--violet-050);border:1px solid var(--acc-30);color:var(--violet-2);font-weight:700;font-size:.82rem;margin-bottom:22px;}
.hero__title{font-size:3.4rem;line-height:1.04;font-weight:900;letter-spacing:-.035em;max-width:840px;margin:0 auto;background:linear-gradient(180deg,#fff 40%,#c9bdff);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero__sub{font-size:1.15rem;color:var(--muted);max-width:600px;margin:20px auto 0;font-weight:500;}
.hero__cta{margin-top:30px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
@keyframes floatblob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-46%) translateY(26px)}}
/* -------------------------------------------------- Promo */
.promo{background:linear-gradient(90deg,var(--acc-18),var(--acc-05));border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.promo__in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;flex-wrap:wrap;}
.promo__title{font-weight:800;font-size:1.15rem;color:#fff;}
.promo__sub{color:var(--muted);font-size:.9rem;margin-top:2px;}
/* -------------------------------------------------- Sections */
.section{padding:56px 0;}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px;gap:16px;flex-wrap:wrap;}
.section__head h1,.section__head h2{font-size:1.9rem;}
.chips{display:flex;gap:9px;flex-wrap:wrap;}
.chip{padding:9px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:.85rem;color:var(--muted);transition:color .2s,border-color .2s,background .2s;}
.chip:hover{color:#fff;border-color:var(--line-2);}
.chip.on{background:#fff;color:#0b0b0f;border-color:#fff;}
/* -------------------------------------------------- Grille produits */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px;}
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .25s;}
.pcard:hover{transform:translateY(-5px);border-color:var(--acc-50);box-shadow:0 20px 50px rgba(0,0,0,.55),0 0 0 1px var(--acc-25);}
.pcard__badge{position:absolute;top:12px;left:12px;background:linear-gradient(135deg,var(--red),#c8324a);color:#fff;font-weight:800;font-size:.74rem;padding:3px 11px;border-radius:999px;z-index:2;box-shadow:0 4px 14px rgba(255,93,108,.4);}
.pcard__thumb{aspect-ratio:1/1;background:radial-gradient(120% 120% at 50% 0%,#20202b,#101015);display:grid;place-items:center;overflow:hidden;}
.pcard__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.pcard:hover .pcard__thumb img{transform:scale(1.06);}
.pcard__thumb .ph svg{width:54px;height:54px;color:#3a3a48;transition:transform .4s;}
.pcard:hover .pcard__thumb .ph svg{transform:scale(1.1) rotate(4deg);}
.pcard__b{padding:16px;display:flex;flex-direction:column;gap:7px;flex:1;}
.pcard__cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--violet-2);font-weight:800;}
.pcard__name{font-weight:800;font-size:1.02rem;line-height:1.25;color:#fff;}
.pcard__meta{display:flex;gap:6px;flex-wrap:wrap;}
.tag{display:inline-block;padding:2px 9px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--muted);font-size:.74rem;font-weight:700;border:1px solid var(--line);}
.pcard__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;}
.price{font-weight:900;font-size:1.2rem;color:#fff;}
.price small{display:block;font-size:.72rem;color:var(--muted);font-weight:600;}
.price .old{text-decoration:line-through;color:var(--muted-2);font-weight:700;font-size:.8rem;margin-right:5px;}
.addb{background:linear-gradient(135deg,var(--violet),var(--violet-deep));color:#fff;border:0;border-radius:11px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px var(--glow);transition:transform .15s;}
.addb:hover{transform:translateY(-2px) scale(1.05);}
.addb svg{width:18px;height:18px;}
.stockmini{font-size:.76rem;font-weight:700;color:var(--green);}
.stockmini.out{color:var(--red);}
/* -------------------------------------------------- Produit détail */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:44px 0;align-items:start;}
.pd__img{background:radial-gradient(120% 120% at 50% 0%,#20202b,#0e0e13);border:1px solid var(--line);border-radius:var(--radius);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;position:sticky;top:96px;}
.pd__img img{width:100%;height:100%;object-fit:cover;}
.pd__img .ph svg{width:92px;height:92px;color:#3a3a48;}
.pd h1{font-size:2.2rem;margin-bottom:8px;}
.pd__price{font-size:2rem;font-weight:900;color:#fff;margin:14px 0;}
.pd__price .old{font-size:1.1rem;text-decoration:line-through;color:var(--muted-2);margin-right:10px;}
.pd__price .usd{font-size:.95rem;color:var(--muted);font-weight:600;margin-left:8px;}
.pd__desc{color:var(--muted);white-space:pre-line;margin:16px 0;}
.qtyrow{display:flex;align-items:center;gap:14px;margin:24px 0;}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--surface);}
.qty button{width:44px;height:46px;border:0;background:transparent;font-size:1.3rem;cursor:pointer;color:#fff;transition:background .15s;}
.qty button:hover{background:rgba(255,255,255,.08);}
.qty input{width:54px;height:46px;border:0;text-align:center;font-family:var(--font);font-weight:800;font-size:1rem;background:transparent;color:#fff;}
/* Encarts helper / disclaimer */
.note-box{border-radius:var(--radius-sm);padding:15px 17px;font-size:.9rem;margin:14px 0;display:flex;gap:11px;border:1px solid var(--line);}
.note-box svg{flex:0 0 20px;width:20px;height:20px;margin-top:2px;}
.note-box.helper{background:var(--violet-050);border-color:var(--acc-28);color:var(--violet-2);}
.note-box.helper svg{stroke:var(--violet-2);}
.note-box.warn{background:rgba(255,203,107,.1);border-color:rgba(255,203,107,.28);color:#f3d9a3;}
.note-box.warn svg{stroke:var(--amber);}
.note-box strong{color:#fff;font-weight:800;}
.specs{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;margin:16px 0;background:var(--surface);}
.specs div{display:flex;justify-content:space-between;padding:12px 16px;font-size:.9rem;border-bottom:1px solid var(--line);}
.specs div:last-child{border-bottom:none;}
.specs .k{color:var(--muted);font-weight:600;}
.specs .v{font-weight:700;color:#fff;}
/* -------------------------------------------------- Panier / checkout */
.layout2{display:grid;grid-template-columns:1.6fr 1fr;gap:26px;align-items:start;padding:40px 0;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);}
.card__h{padding:18px 22px;border-bottom:1px solid var(--line);font-size:1.15rem;font-weight:800;color:#fff;}
.card__b{padding:22px;}
.citem{display:flex;gap:15px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center;}
.citem:last-child{border-bottom:none;}
.citem__img{width:74px;height:74px;border-radius:12px;background:#101015;flex:0 0 74px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);}
.citem__img img{width:100%;height:100%;object-fit:cover;}
.citem__img .ph svg{width:26px;height:26px;color:#3a3a48;}
.citem__info{flex:1;min-width:0;}
.citem__name{font-weight:800;color:#fff;}
.citem__price{font-weight:800;white-space:nowrap;color:#fff;}
.sumline{display:flex;justify-content:space-between;padding:9px 0;font-size:.96rem;color:var(--muted);}
.sumline span:last-child{color:#fff;font-weight:600;}
.sumline.total{border-top:1px solid var(--line-2);margin-top:8px;padding-top:14px;font-weight:900;font-size:1.4rem;color:#fff;}
.sumline.total span{color:#fff;}
.sumline .usd{color:var(--muted);font-size:.82rem;font-weight:600;}
.sumline.disc,.sumline.disc span:last-child{color:var(--green)!important;font-weight:700;}
.field{margin-bottom:15px;}
.field label{display:block;font-weight:700;font-size:.86rem;margin-bottom:6px;color:var(--text);}
.input,.select,.textarea{width:100%;padding:12px 14px;font-family:var(--font);font-size:.97rem;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.04);color:#fff;transition:border-color .15s,box-shadow .15s,background .15s;}
.input::placeholder,.textarea::placeholder{color:var(--muted-2);}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-050);background:rgba(255,255,255,.06);}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
.select option{background:#15151c;color:#fff;}
.textarea{min-height:90px;resize:vertical;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.coupon{display:flex;gap:9px;}
.coupon .input{flex:1;text-transform:uppercase;}
.badge-code{display:inline-flex;align-items:center;gap:8px;background:var(--green-bg);color:var(--green);font-weight:800;padding:8px 14px;border-radius:999px;font-size:.85rem;}
.badge-code svg{width:15px;height:15px;}
.err{background:var(--red-bg);color:#ffb3bb;border:1px solid rgba(255,93,108,.3);border-radius:12px;padding:11px 14px;font-weight:600;font-size:.87rem;margin-bottom:12px;}
/* Divers */
.empty{text-align:center;padding:70px 20px;color:var(--muted);}
.empty svg{width:54px;height:54px;opacity:.4;margin-bottom:14px;color:#fff;}
.empty h3{margin-bottom:6px;color:#fff;}
.crumb{padding:22px 0 0;font-size:.86rem;color:var(--muted);font-weight:600;}
.crumb a:hover{color:var(--violet-2);}
.pcard__cat.big{font-size:.75rem;}
/* -------------------------------------------------- Footer */
.ft{background:#050507;border-top:1px solid var(--line);margin-top:20px;}
.ft__in{display:grid;grid-template-columns:280px 1fr;gap:44px;padding:48px 22px 30px;}
.ft__brand p{margin:12px 0 0;color:var(--muted-2);font-size:.88rem;}
.ft__disc{font-size:.86rem;line-height:1.65;color:var(--muted);}
.ft__disc strong{color:#fff;}
.ft__bottom{border-top:1px solid var(--line);padding:18px 22px;font-size:.8rem;color:var(--muted-2);text-align:center;}
/* -------------------------------------------------- Animations reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1;transform:none;transition:none;}
.ann__track,.hero__glow{animation:none;}
html{scroll-behavior:auto;}
}
/* -------------------------------------------------- Hero : canvas + halos */
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none;}
/* ===== Fond hero animé — CSS pur, composité sur le GPU (léger, remplace le canvas) ===== */
.hero__fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.hero__fx i{position:absolute;display:block;will-change:transform;}
/* Aurore : halos colorés qui dérivent doucement (transform + scale, flou mis en cache) */
.hero__fx--aurora i{border-radius:50%;filter:blur(64px);opacity:.5;width:min(48vw,600px);height:min(48vw,600px);}
.hero__fx--aurora i:nth-child(1){left:-8%;top:-34%;background:radial-gradient(circle,var(--acc-42),transparent 68%);animation:heroDrift1 19s ease-in-out infinite;}
.hero__fx--aurora i:nth-child(2){right:-10%;top:-16%;background:radial-gradient(circle,var(--acc2-32),transparent 68%);animation:heroDrift2 23s ease-in-out infinite;}
.hero__fx--aurora i:nth-child(3){left:34%;bottom:-42%;background:radial-gradient(circle,var(--acc-30),transparent 70%);animation:heroDrift3 27s ease-in-out infinite;}
.hero__fx--aurora i:nth-child(4){display:none;}
@keyframes heroDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9%,11%,0) scale(1.14)}}
@keyframes heroDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-11%,7%,0) scale(.95)}}
@keyframes heroDrift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7%,-9%,0) scale(1.1)}}
/* Néon : faisceaux lumineux diagonaux qui traversent (transform + opacity) */
.hero__fx--neon i{top:-30%;height:160%;width:2px;border-radius:2px;filter:blur(1px);opacity:0;background:linear-gradient(var(--violet-2),transparent);}
.hero__fx--neon i:nth-child(1){left:16%;animation:heroBeam 8s linear infinite;}
.hero__fx--neon i:nth-child(2){left:40%;animation:heroBeam 8s linear infinite 2s;}
.hero__fx--neon i:nth-child(3){left:63%;animation:heroBeam 8s linear infinite 4s;background:linear-gradient(var(--violet),transparent);}
.hero__fx--neon i:nth-child(4){left:83%;animation:heroBeam 8s linear infinite 6s;}
@keyframes heroBeam{0%{transform:translate3d(-40px,0,0) rotate(20deg);opacity:0}15%{opacity:.5}85%{opacity:.5}100%{transform:translate3d(200px,0,0) rotate(20deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__fx i{animation:none!important;}}
.hero__glow--2{top:auto;bottom:-170px;left:22%;width:520px;height:420px;background:radial-gradient(circle,var(--acc2-32),transparent 62%);transform:none;}
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;}
.hero__eyebrow svg{width:16px;height:16px;stroke:var(--violet-2);}
/* -------------------------------------------------- Mega-menu catégories */
.mega{position:relative;display:flex;align-items:center;}
.mega__btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;color:var(--muted);font-family:var(--font);font-weight:600;font-size:.94rem;cursor:pointer;padding:0;}
.mega__btn svg{width:15px;height:15px;transition:transform .2s;}
.mega:hover .mega__btn{color:#fff;}
.mega:hover .mega__btn svg{transform:rotate(180deg);color:var(--violet-2);}
.mega__panel{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(8px);background:#101015;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px;display:grid;grid-template-columns:repeat(3,minmax(155px,1fr));gap:6px 22px;min-width:580px;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s;z-index:60;}
.mega__panel::before{content:"";position:absolute;top:-18px;left:0;right:0;height:18px;}
.mega:hover .mega__panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.mega__col{display:flex;flex-direction:column;gap:1px;margin-bottom:6px;}
.mega__title{display:flex;align-items:center;gap:7px;font-weight:800;color:#fff;font-size:.9rem;padding:7px 8px;border-radius:8px;}
.mega__title svg{width:15px;height:15px;stroke:var(--violet-2);}
.mega__link{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 22px;border-radius:8px;color:var(--muted);font-size:.85rem;font-weight:600;transition:background .15s,color .15s;}
.mega__link:hover{background:rgba(255,255,255,.05);color:#fff;}
.mega__n{font-size:.72rem;color:var(--muted-2);background:rgba(255,255,255,.05);border-radius:999px;padding:1px 7px;}
/* -------------------------------------------------- Barre de réassurance */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:26px 22px;}
.trust__i{display:flex;align-items:center;gap:12px;}
.trust__ic{width:44px;height:44px;border-radius:12px;background:var(--violet-050);border:1px solid var(--acc-25);display:grid;place-items:center;color:var(--violet-2);flex:0 0 44px;}
.trust__ic svg{width:20px;height:20px;}
.trust__t{font-weight:800;color:#fff;font-size:.92rem;}
.trust__s{color:var(--muted);font-size:.8rem;}
/* -------------------------------------------------- Tuiles catégories */
.cat-tiles{display:grid;grid-template-columns:repeat(var(--tiles-per-row,4),minmax(0,1fr));gap:16px;}
@media(max-width:1100px){.cat-tiles{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}}
.cat-tile{display:flex;align-items:center;gap:14px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:transform .2s,border-color .2s,box-shadow .25s;}
.cat-tile:hover{transform:translateY(-3px);border-color:var(--acc-50);box-shadow:0 16px 40px rgba(0,0,0,.5);}
.cat-tile__ic{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--violet),var(--violet-deep));display:grid;place-items:center;color:#fff;flex:0 0 46px;box-shadow:0 6px 18px var(--glow);}
.cat-tile__ic svg{width:22px;height:22px;}
.cat-tile__body{flex:1;min-width:0;}
.cat-tile__name{display:block;font-weight:800;color:#fff;font-size:1.02rem;}
.cat-tile__n{display:block;color:var(--muted);font-size:.82rem;}
.cat-tile__arrow{color:var(--muted-2);transition:transform .2s,color .2s;}
.cat-tile:hover .cat-tile__arrow{color:var(--violet-2);transform:translateX(3px);}
.cat-tile__arrow svg{width:18px;height:18px;}
/* -------------------------------------------------- Titres de section + sous-nav */
.section__head h1,.section__head h2{display:flex;align-items:center;gap:11px;}
.sec-ic{width:38px;height:38px;border-radius:11px;background:var(--violet-050);border:1px solid var(--acc-25);display:grid;place-items:center;color:var(--violet-2);}
.sec-ic svg{width:20px;height:20px;}
.subnav{display:flex;gap:7px;flex-wrap:wrap;}
.subnav a{padding:8px 15px;border-radius:10px;font-weight:700;font-size:.85rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);transition:color .15s,border-color .15s,background .15s;}
.subnav a:hover{color:#fff;border-color:var(--line-2);}
.subnav a.on{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 6px 18px var(--glow);}
/* Badges + fil d'ariane avec icônes */
.pcard__badge{display:inline-flex;align-items:center;gap:4px;}
.pcard__badge svg{width:12px;height:12px;}
.pcard__badge--star{background:linear-gradient(135deg,#ffb020,#ff8a00);box-shadow:0 4px 12px rgba(255,160,32,.35);}
.crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.crumb svg{width:14px;height:14px;opacity:.45;}
.btn svg{flex:0 0 auto;}
/* -------------------------------------------------- Responsive */
@media(max-width:860px){
.pd{grid-template-columns:1fr;}.pd__img{position:static;}
.layout2{grid-template-columns:1fr;}
.hero{padding:64px 0 58px;}
.hero__title{font-size:2.3rem;}
.ft__in{grid-template-columns:1fr;gap:24px;}
.hd__nav{display:none;}
.section{padding:40px 0;}
.trust__in{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:520px){
.trust__in{grid-template-columns:1fr;}
.section__head{flex-direction:column;align-items:flex-start;}
}
/* ============ Cartes produit enrichies ============ */
.btn--sm{padding:9px 14px;font-size:.85rem;border-radius:10px;}
.pcard__meta{display:flex;gap:6px;flex-wrap:wrap;}
.tag--low{background:rgba(255,203,107,.14);color:#ffcb6b;border-color:rgba(255,203,107,.3);}
.pcard__price-row{margin-top:auto;display:flex;align-items:baseline;gap:8px;}
.price-usd{color:var(--muted);font-size:.78rem;font-weight:600;}
.pcard__add{margin-top:10px;}
.pcard__b > button[disabled]{margin-top:10px;opacity:.5;}
/* ============ Mentions défilantes ============ */
.social{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;padding:12px 0;}
.social__track{display:inline-flex;gap:36px;align-items:center;animation:annscroll 34s linear infinite;will-change:transform;backface-visibility:hidden;transform:translateZ(0);}
.social:hover .social__track{animation-play-state:paused;}
.social__i{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted);}
.social__i svg{width:15px;height:15px;color:#ffb020;fill:rgba(255,176,32,.25);}
.social__i strong{color:#fff;font-weight:700;}
.social__n{background:var(--violet-050);color:var(--violet2);border-radius:999px;padding:1px 9px;font-size:.72rem;font-weight:800;}
/* ============ Spotlight produit ============ */
.spot{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surface);}
.spot__info{padding:40px 42px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.spot__badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#ffb020,#ff8a00);color:#231400;font-weight:800;font-size:.76rem;padding:5px 12px;border-radius:999px;}
.spot__badge svg{width:13px;height:13px;stroke:#231400;}
.spot__name{font-size:2rem;font-weight:900;letter-spacing:-.03em;color:#fff;}
.spot__desc{color:var(--muted);margin:0;}
.spot__chips{display:flex;gap:8px;flex-wrap:wrap;}
.spot__chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:.82rem;font-weight:700;color:#fff;}
.spot__chip svg{width:14px;height:14px;stroke:var(--green);}
.spot__price{font-size:1.9rem;font-weight:900;color:#fff;}
.spot__price .old{font-size:1rem;text-decoration:line-through;color:var(--muted-2);margin-right:8px;}
.spot__usd{font-size:.9rem;color:var(--muted);font-weight:600;margin-left:8px;}
.spot__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.spot__media{position:relative;background:radial-gradient(120% 120% at 70% 30%,var(--spot-1),var(--spot-2));display:grid;place-items:center;min-height:320px;overflow:hidden;}
.spot__glow{position:absolute;width:320px;height:320px;background:radial-gradient(circle,var(--acc-50),transparent 62%);filter:blur(30px);}
.spot__media img{position:relative;max-width:70%;max-height:80%;object-fit:contain;}
.spot__ph{position:relative;color:rgba(255,255,255,.9);}
.spot__ph svg{width:120px;height:154px;}
/* ============ Comment commander ============ */
.how{padding:58px 0;background:linear-gradient(180deg,var(--bg-2),var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.how__head{text-align:center;margin-bottom:32px;}
.how__head h2{font-size:1.9rem;justify-content:center;}
.eyebrow-pill{display:inline-block;padding:6px 15px;border-radius:999px;background:var(--violet-050);border:1px solid var(--acc-30);color:var(--violet2);font-weight:700;font-size:.8rem;margin-bottom:12px;}
.how__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.how__card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 20px;text-align:center;transition:transform .2s,border-color .2s;}
.how__card:hover{transform:translateY(-3px);border-color:var(--acc-40);}
.how__num{position:absolute;top:12px;right:16px;font-weight:900;font-size:1.5rem;color:rgba(255,255,255,.07);}
.how__ic{width:54px;height:54px;border-radius:15px;background:var(--violet-050);border:1px solid var(--acc-25);display:grid;place-items:center;color:var(--violet2);margin:0 auto 14px;}
.how__ic svg{width:25px;height:25px;}
.how__t{font-weight:800;color:#fff;margin-bottom:5px;}
.how__d{color:var(--muted);font-size:.86rem;}
/* ============ Avis clients ============ */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.rev{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;}
.rev__stars{display:flex;gap:2px;margin-bottom:12px;}
.rev__stars svg{width:16px;height:16px;color:#ffb020;fill:#ffb020;}
.rev__txt{color:var(--text);margin:0 0 16px;font-size:.94rem;line-height:1.55;}
.rev__who{display:flex;align-items:center;gap:11px;}
.rev__av{width:38px;height:38px;border-radius:999px;background:linear-gradient(135deg,var(--violet),var(--violet-deep));display:grid;place-items:center;font-weight:800;color:#fff;flex:0 0 38px;}
.rev__name{font-weight:800;color:#fff;display:flex;flex-direction:column;line-height:1.25;}
.rev__tag{font-size:.72rem;color:var(--green);font-weight:700;}
/* ============ Footer en colonnes ============ */
.ft__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding:50px 22px 30px;}
.ft__brand p{margin:12px 0 0;color:var(--muted-2);font-size:.88rem;max-width:280px;}
.ft__col h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px;}
.ft__col a,.ft__col span{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.9rem;padding:5px 0;transition:color .15s;}
.ft__col a:hover{color:#fff;}
.ft__col span svg{width:15px;height:15px;stroke:var(--violet2);flex:0 0 15px;}
.ft__disc{padding:6px 22px 20px;font-size:.82rem;color:var(--muted-2);line-height:1.6;}
.ft__disc strong{color:var(--muted);}
@media(max-width:860px){
.spot{grid-template-columns:1fr;}.spot__media{min-height:240px;order:-1;}
.how__grid{grid-template-columns:repeat(2,1fr);}
.rev-grid{grid-template-columns:1fr;}
.ft__grid{grid-template-columns:1fr 1fr;gap:26px;}
}
@media(max-width:520px){
.how__grid{grid-template-columns:1fr;}
.ft__grid{grid-template-columns:1fr;}
}
/* ============ Carrousel ============ */
.carousel{position:relative;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--line);}
.carousel__track{display:flex;transition:transform .55s cubic-bezier(.2,.7,.2,1);}
.carousel__slide{position:relative;flex:0 0 100%;min-height:440px;background:#0f0f16 center/cover no-repeat;display:flex;align-items:center;text-decoration:none;}
.carousel__slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,11,.85),rgba(8,8,11,.25) 55%,rgba(8,8,11,0));}
.carousel__content{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 40px;width:100%;}
.carousel__content h2{font-size:2.6rem;font-weight:900;letter-spacing:-.03em;color:#fff;max-width:560px;line-height:1.05;}
.carousel__content p{color:rgba(255,255,255,.85);max-width:460px;margin:14px 0 22px;font-size:1.05rem;}
.carousel__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid var(--line-2);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);}
.carousel__nav:hover{background:rgba(0,0,0,.65);}
.carousel__nav svg{width:22px;height:22px;}
.carousel__nav--prev{left:18px;}.carousel__nav--prev svg{transform:rotate(90deg);}
.carousel__nav--next{right:18px;}.carousel__nav--next svg{transform:rotate(-90deg);}
.carousel__dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:8px;}
.carousel__dot{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.35);border:0;cursor:pointer;padding:0;transition:width .2s,background .2s;}
.carousel__dot.on{width:26px;background:#fff;}
@media(max-width:760px){
.carousel__slide{min-height:300px;}
.carousel__content h2{font-size:1.7rem;}
.carousel__content{padding:0 22px;}
}
/* ============ Bloc support paiement (WhatsApp / Telegram) ============ */
.support{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;margin-top:18px;text-align:center;}
.support__h{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:#fff;font-size:1.08rem;justify-content:center;}
.support__h svg{width:19px;height:19px;stroke:var(--amber);}
.support__p{color:var(--muted);margin:8px auto 16px;font-size:.92rem;max-width:460px;}
.support__p strong{color:#fff;}
.support__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.support__btn{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:12px;font-weight:700;font-size:.94rem;color:#fff;transition:transform .12s,filter .15s;}
.support__btn:hover{transform:translateY(-2px);filter:brightness(1.07);}
.support__btn svg{width:21px;height:21px;}
.support__btn.wa{background:#25D366;box-shadow:0 8px 22px rgba(37,211,102,.3);}
.support__btn.tg{background:#229ED9;box-shadow:0 8px 22px rgba(34,158,217,.3);}
.support--mini{margin-top:14px;padding:14px 16px;text-align:left;display:flex;flex-direction:column;gap:10px;}
.support--mini .support__mini-txt{display:flex;align-items:center;gap:7px;font-weight:700;color:#fff;font-size:.9rem;}
.support--mini .support__mini-txt svg{width:17px;height:17px;stroke:var(--amber);flex:0 0 17px;}
.support--mini .support__btns{justify-content:flex-start;}
.support--mini .support__btn{padding:10px 16px;font-size:.88rem;}
/* ============ Barre d'infos : items cliquables ============ */
.trust__i--link{cursor:pointer;border-radius:12px;padding:8px;margin:-8px;transition:background .15s;text-decoration:none;}
.trust__i--link:hover{background:rgba(255,255,255,.05);}
.trust__arrow{margin-left:auto;color:var(--muted-2);display:inline-flex;}
.trust__arrow svg{width:16px;height:16px;}
.trust__i--link:hover .trust__arrow{color:var(--violet2);}
/* ============ Bandeau cookie de confort ============ */
.cookie-consent{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:120;
width:min(660px,calc(100vw - 28px));display:flex;gap:16px;align-items:flex-start;
padding:18px 20px;border-radius:18px;background:var(--card,#141019);
border:1px solid var(--line,rgba(255,255,255,.09));
box-shadow:0 22px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02) inset;
opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s;}
.cookie-consent--in{transform:translate(-50%,0);opacity:1;}
.cookie-consent--out{transform:translate(-50%,140%);opacity:0;}
.cookie-consent__ic{flex:0 0 44px;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
background:var(--acc-15,rgba(124,77,255,.16));color:var(--violet,#7c4dff);}
.cookie-consent__ic svg{width:24px;height:24px;}
.cookie-consent__body{flex:1;min-width:0;}
.cookie-consent__body strong{display:block;color:#fff;font-size:.98rem;margin-bottom:3px;}
.cookie-consent__body p{margin:0;color:var(--muted,#9a94a8);font-size:.85rem;line-height:1.5;}
.cookie-consent__body b{color:var(--violet-2,var(--violet,#a98bff));}
.cookie-consent__body a{color:#fff;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;}
.cookie-consent__act{display:flex;flex-direction:column;gap:8px;flex:0 0 auto;}
.cc-btn{border:0;cursor:pointer;font-weight:700;font-size:.85rem;padding:10px 16px;border-radius:11px;white-space:nowrap;transition:transform .12s,filter .15s;font-family:inherit;}
.cc-btn:hover{transform:translateY(-1px);}
.cc-btn--yes{background:var(--violet,#7c4dff);color:#fff;box-shadow:0 8px 22px var(--acc-30,rgba(124,77,255,.32));}
.cc-btn--yes:hover{filter:brightness(1.08);}
.cc-btn--ghost{background:transparent;color:var(--muted,#9a94a8);border:1px solid var(--line,rgba(255,255,255,.12));}
.cc-btn--ghost:hover{color:#fff;}
@media(max-width:560px){
.cookie-consent{flex-wrap:wrap;bottom:10px;padding:16px;gap:12px;}
.cookie-consent__act{flex-direction:row;width:100%;}
.cc-btn{flex:1;}
}
/* Galerie fiche produit */
.pd__media{display:flex;flex-direction:column;gap:12px;}
.pd__thumbs{display:flex;gap:9px;flex-wrap:wrap;}
.pd__thumb{width:66px;height:66px;border-radius:12px;overflow:hidden;border:2px solid var(--line);background:#0b0b0f;cursor:pointer;padding:0;transition:border-color .15s,transform .12s;}
.pd__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pd__thumb:hover{transform:translateY(-2px);}
.pd__thumb.on{border-color:var(--violet);}
/* Pages légales */
.legal-body h3{font-size:1.05rem;margin:22px 0 8px;color:#fff;}
.legal-body h3:first-child{margin-top:0;}
.legal-body p{color:var(--muted);margin:0 0 12px;line-height:1.7;}
.legal-body ul{color:var(--muted);margin:0 0 12px;padding-left:20px;line-height:1.7;}
.legal-body strong{color:#fff;}
/* -------------------------------------------------- Header : logo agrandi + menu mobile */
.pik-tube{height:2.15em;} /* logo plus visible */
.pik-word{font-size:1.4rem;}
.hd__in{padding:18px 22px;}
.hd__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 10px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);cursor:pointer;}
.hd__burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .22s,opacity .18s;}
.hd__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hd__burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hd__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* Sous-menu compact (Contact) : 1 colonne, ancré à droite, jamais hors écran.
Il faut annuler la grille 3 colonnes ET le min-width du grand méga-menu,
sinon il garde ~580px de large et déborde. */
.mega--sm .mega__panel--sm{
display:block;grid-template-columns:none;
min-width:0;width:max-content;max-width:min(280px,calc(100vw - 32px));
left:auto;right:0;transform:translateY(8px);padding:10px;
}
.mega--sm:hover .mega__panel--sm{transform:translateY(0);}
.mega--sm .mega__link{display:flex;padding:10px 12px;border-radius:10px;}
.mega--sm .mega__link span{display:inline-flex;align-items:center;gap:9px;}
.mega--sm .mega__link svg{width:17px;height:17px;color:var(--violet-2);}
.mega--sm .mega__link:hover{background:rgba(255,255,255,.06);}
@media(max-width:900px){
.hd__burger{display:flex;}
.hd__in{gap:10px;padding:12px 16px;flex-wrap:wrap;}
.hd__brand{padding:6px 0;flex:1;}
.pik-tube{height:1.9em;} .pik-word{font-size:1.15rem;}
/* panier tout à droite, recherche juste à sa gauche */
.hd__search{display:flex;order:3;flex:1 1 100%;min-width:0;max-width:none;margin-top:4px;}
.hd__cart{order:2;margin-left:auto;}
.hd__nav{order:4;flex:1 1 100%;display:none;flex-direction:column;gap:2px;margin:8px 0 2px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;}
.hd.is-open .hd__nav{display:flex;}
.hd__nav > a,.hd__nav .mega__btn{padding:12px 14px;border-radius:10px;width:100%;text-align:left;}
.hd__nav > a:hover{background:rgba(255,255,255,.06);}
.mega__panel,.mega--sm .mega__panel--sm{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;box-shadow:none;background:transparent;border:0;padding:0 0 0 10px;min-width:0;max-width:none;width:auto;grid-template-columns:1fr;display:none;}
.mega.is-open .mega__panel,.mega--sm.is-open .mega__panel--sm{display:block;}
.mega.is-open .mega__panel{display:block;}
}
/* Bloc communauté (Telegram) */
.community__card{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:26px 30px;border-radius:var(--radius);
background:linear-gradient(120deg,var(--acc-18),var(--acc-05));border:1px solid var(--line-2);}
.community__ic{flex:0 0 54px;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:#229ED9;color:#fff;}
.community__ic svg{width:28px;height:28px;}
.community__txt{flex:1;min-width:220px;}
.community__txt h3{font-size:1.25rem;margin:0 0 4px;}
.community__txt p{margin:0;color:var(--muted);font-size:.94rem;}
@media(max-width:640px){.community__card{padding:20px;gap:16px;}.community__card .btn{width:100%;}}
/* -------------------------------------------------- Fiche produit : stock, kit, alerte */
.stock-banner{display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:14px;margin:4px 0 18px;font-size:1.02rem;}
.stock-banner svg{width:26px;height:26px;flex:0 0 26px;}
.stock-banner strong{display:block;font-size:1.15rem;font-weight:900;letter-spacing:-.01em;}
.stock-banner span{color:var(--muted);font-size:.88rem;}
.stock-banner.out{background:var(--red-bg);border:1px solid rgba(255,93,108,.35);color:var(--red);}
.stock-banner.soon{background:var(--violet-050);border:1px solid var(--acc-30);color:var(--violet-2);}
.stock-banner.soon strong,.stock-banner.out strong{color:#fff;}
.kitbox{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px;padding:14px 16px;
border-radius:14px;background:var(--acc-05);border:1px dashed var(--acc-30);}
.kitbox__t{display:block;font-weight:800;color:#fff;}
.kitbox__price{color:var(--violet-2);margin-left:6px;}
.kitbox__save{display:block;color:var(--green);font-weight:800;font-size:.85rem;margin-top:2px;}
.kitbox__old{color:var(--muted-2);font-weight:600;text-decoration:line-through;}
.alertbox{margin:4px 0 18px;padding:16px 18px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-2);}
.alertbox__t{display:flex;align-items:center;gap:8px;font-weight:800;color:#fff;margin-bottom:10px;}
.alertbox__t svg{width:18px;height:18px;color:var(--violet-2);}
.alertbox__row{display:flex;gap:8px;flex-wrap:wrap;}
.alertbox__row .input{flex:1;min-width:190px;}
.alertbox__hint{color:var(--muted-2);font-size:.8rem;margin:9px 0 0;}
/* Carrousel horizontal générique (produits liés + mobile) */
.crsl{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-width:thin;}
.crsl::-webkit-scrollbar{height:6px;}
.crsl::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;}
.crsl__item{flex:0 0 clamp(230px,26vw,290px);scroll-snap-align:start;}
.crsl__nav{display:flex;gap:7px;}
.crsl__btn{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .15s;}
.crsl__btn:hover{background:rgba(255,255,255,.13);}
.crsl__btn svg{width:17px;height:17px;}
.crsl__btn[data-crsl="prev"] svg{transform:rotate(180deg);}
/* -------------------------------------------------- Mobile : défilement horizontal des grilles */
@media(max-width:760px){
.pgrid,.cat-tiles,.rev-grid,.pd-packs__grid{
display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
padding:4px 22px 14px;margin-left:-22px;margin-right:-22px; /* déborde jusqu'aux bords */
scrollbar-width:none;
}
.pgrid::-webkit-scrollbar,.cat-tiles::-webkit-scrollbar,.rev-grid::-webkit-scrollbar,.pd-packs__grid::-webkit-scrollbar{display:none;}
.pgrid > *,.rev-grid > *,.pd-packs__grid > *{flex:0 0 78%;max-width:300px;scroll-snap-align:start;}
.cat-tiles > *{flex:0 0 46%;scroll-snap-align:start;}
.crsl__item{flex:0 0 78%;}
/* indice visuel : on voit le début de la carte suivante */
.section__head{padding-right:4px;}
}
.pcard__badge--soon{background:var(--violet-050);color:var(--violet-2);border:1px solid var(--acc-30);}
/* Notification d'ajout au panier */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);z-index:130;
display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;
background:var(--surface);border:1px solid var(--line-2);box-shadow:0 18px 50px rgba(0,0,0,.5);
opacity:0;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .28s;max-width:calc(100vw - 28px);}
.toast.is-on{transform:translate(-50%,0);opacity:1;}
.toast__ic{width:26px;height:26px;flex:0 0 26px;border-radius:50%;display:grid;place-items:center;
background:var(--green-bg);color:var(--green);font-weight:900;font-size:.9rem;}
.toast__msg{font-weight:700;color:#fff;white-space:nowrap;}
.toast__cta{color:var(--violet-2);font-weight:800;font-size:.88rem;white-space:nowrap;border-left:1px solid var(--line);padding-left:12px;}
.toast__cta:hover{color:#fff;}
/* petit rebond du panier à l'ajout */
.hd__cart.is-bump{animation:cartBump .42s ease;}
@keyframes cartBump{0%,100%{transform:scale(1)}35%{transform:scale(1.12)}}
/* Bandeau : mode statique (centré) ou défilant */
.ann--static{white-space:normal;}
.ann--static .ann__item{font-size:.72rem;}
.ann--static .ann__dot{font-size:.6rem;margin:0 7px;}
.ann--static .ann__track{animation:none;display:flex;flex-wrap:wrap;justify-content:center;
width:100%;padding:0 22px;transform:none;will-change:auto;}
.ann--static .ann__item{text-align:center;}
@media(max-width:640px){
.ann--static .ann__dot{margin:0 9px;}
.ann--static .ann__item{font-size:.78rem;}
}
/* -------------------------------------------------- Modes de livraison & point relais */
.shipopt{display:flex;align-items:center;gap:13px;padding:14px;border:1.5px solid var(--line);border-radius:14px;
cursor:pointer;margin-bottom:9px;transition:border-color .15s,background .15s;}
.shipopt:hover{border-color:var(--line-2);}
.shipopt.is-on{border-color:var(--violet);background:var(--acc-05);}
.shipopt input{width:18px;height:18px;accent-color:var(--violet);flex:0 0 18px;}
.shipopt__b{flex:1;min-width:0;}
.shipopt__n{display:block;font-weight:800;color:#fff;}
.shipopt__s{display:block;color:var(--muted);font-size:.85rem;margin-top:1px;}
.shipopt__p{font-weight:900;color:#fff;white-space:nowrap;}
.relaybox{margin-top:12px;padding:15px 16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-2);}
.relaybox__t{display:flex;align-items:center;gap:8px;font-weight:800;color:#fff;margin-bottom:11px;}
.relaybox__t svg{width:18px;height:18px;color:var(--violet-2);}
.relaybox__row{display:flex;gap:8px;flex-wrap:wrap;}
.relaylist{margin-top:10px;max-height:270px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;}
.relaylist__wait{color:var(--muted);font-size:.88rem;margin:8px 0 0;}
.relayitem{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:11px;cursor:pointer;
background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);font-family:var(--font);transition:border-color .15s,background .15s;}
.relayitem:hover{border-color:var(--violet);background:var(--acc-05);}
.relayitem strong{display:block;color:#fff;font-size:.92rem;}
.relayitem span{display:block;color:var(--muted);font-size:.82rem;}
.relayitem em{display:block;color:var(--violet-2);font-size:.78rem;font-style:normal;font-weight:800;margin-top:2px;}
.relaypick{display:flex;align-items:flex-start;gap:10px;margin-top:11px;padding:11px 13px;border-radius:11px;
background:var(--green-bg);border:1px solid rgba(61,220,145,.3);}
.relaypick span:first-child,.relaypick svg{color:var(--green);flex:0 0 auto;font-weight:900;}
.relaypick svg{width:18px;height:18px;}
.relaypick strong{color:#fff;}
.relaypick div span{color:var(--muted);font-size:.85rem;}
/* ===== Bandeau d'annonce : lisible et compact sur téléphone ===== */
@media(max-width:760px){
.ann{padding:6px 0;}
.ann--scroll{white-space:nowrap;}
.ann--scroll .ann__track{width:max-content;}
.ann__item{font-size:.72rem;font-weight:600;}
.ann__dot{margin:0 9px;font-size:.58rem;}
}
@media(max-width:420px){
.ann__item{font-size:.68rem;}
.ann__dot{margin:0 7px;}
}
/* ============================================================
Téléphone : verrou de défilement, échelle réduite, section
« Parcourir par catégorie » masquée.
============================================================ */
/* --- Menu ouvert : la page ne bouge plus, seul le menu défile --- */
body.nav-lock{overflow:hidden;}
@media(max-width:900px){
.hd.is-open .hd__nav{
max-height:calc(100vh - 68px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain; /* le défilement ne se propage pas à la page */
}
}
@media(max-width:760px){
/* --- Section catégories : uniquement sur ordinateur --- */
.section--cats{display:none;}
/* --- Cartes produits : on en voit une et demie au lieu d'une seule --- */
.pgrid > *,.rev-grid > *,.pd-packs__grid > *{flex:0 0 60%;max-width:232px;}
.crsl__item{flex:0 0 60%;max-width:232px;}
.cat-tiles > *{flex:0 0 42%;}
.pcard__b{padding:11px;gap:5px;}
.pcard__cat{font-size:.62rem;letter-spacing:.06em;}
.pcard__name{font-size:.88rem;line-height:1.22;}
.pcard__foot{padding-top:6px;}
.price{font-size:1rem;}
.price small{font-size:.64rem;}
.price .old{font-size:.72rem;}
.tag{font-size:.66rem;padding:1px 7px;}
.addb{width:34px;height:34px;border-radius:9px;}
.addb svg{width:17px;height:17px;}
.pcard__badge{font-size:.66rem;padding:2px 8px;top:9px;left:9px;}
/* --- Respiration générale : titres et espacements --- */
.section{padding:34px 0;}
.section__head h1,.section__head h2{font-size:1.32rem;gap:8px;}
.section__head .btn{padding:8px 13px;font-size:.82rem;}
.sec-ic svg{width:19px;height:19px;}
}
@media(max-width:420px){
.pgrid > *,.rev-grid > *,.pd-packs__grid > *,.crsl__item{flex:0 0 64%;max-width:210px;}
.section{padding:28px 0;}
.section__head h1,.section__head h2{font-size:1.2rem;}
}
/* --- Fiole du hero : plus grande, à moitié sortie du cadre, fondue vers le bas --- */
.hero__vial{
--vial-h:clamp(440px,86vh,860px);
left:-2%;bottom:calc(var(--vial-h) * -.46);
height:var(--vial-h);opacity:.4;color:#fff;
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.35) 78%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.35) 78%,transparent 100%);
filter:drop-shadow(0 24px 60px rgba(0,0,0,.45));
}
@media(max-width:760px){.hero__vial{--vial-h:clamp(320px,58vh,520px);left:-14%;opacity:.28;}}
/* --- Intérieur de la fiole : violet réservé aux vignettes produits --- */
.pik-liquid{fill:currentColor;}
.pcard__thumb .pik-liquid,.ph .pik-liquid,.spot__ph .pik-liquid,.packcard__img .pik-liquid{fill:var(--violet);}
/* ============================================================
Logo — calqué sur les fichiers officiels : éprouvette à gauche,
« PIK. » et le suffixe empilés à droite, serrés et de même corps.
============================================================ */
.pik-logo{display:inline-flex;align-items:center;gap:9px;color:#fff;line-height:1;}
.pik-word{display:inline-flex;flex-direction:row;align-items:baseline;gap:.06em;
font-weight:900;letter-spacing:-.035em;line-height:1;white-space:nowrap;}
.pik-name,.pik-suffix{display:block;}
.pik-name{font-size:1.02em;}
.pik-suffix{font-size:1.02em;}
.pik-logo--mark .pik-word{display:none;}
/* En-tête : la hauteur du tube cale sur les deux lignes du mot */
.hd .pik-logo{gap:10px;}
.hd .pik-tube{height:2.5em;}
.hd .pik-word{font-size:1.02rem;}
/* Pied de page : même verrouillage, légèrement plus grand */
.ft .pik-logo,.ft__brand .pik-logo{gap:11px;}
.ft .pik-tube{height:2.7em;}
.ft .pik-word{font-size:1.1rem;}
@media(max-width:760px){
.hd .pik-tube{height:2.2em;}
.hd .pik-word{font-size:.9rem;}
}
/* ============================================================
Catalogue — les filtres restaient collés au titre, donc leur
position bougeait dès que le titre s'allongeait. On les passe
sur leur propre ligne : ils ne bougent plus jamais.
============================================================ */
.section__head--cat{display:block;margin-bottom:22px;}
.section__head--cat h2{margin:0 0 14px;}
.section__head--cat .subnav{width:100%;}
@media(max-width:760px){
.section__head--cat .subnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
margin:0 -22px;padding:0 22px 4px;}
.section__head--cat .subnav::-webkit-scrollbar{display:none;}
.section__head--cat .subnav a{flex:0 0 auto;}
}
/* ============================================================
Carrousel « Plus de produits » : barre de défilement masquée,
une flèche de chaque côté au lieu des deux groupées en haut.
============================================================ */
.crsl__nav--hidden{display:none;}
.crsl__wrap{position:relative;}
.crsl{scrollbar-width:none;-ms-overflow-style:none;}
.crsl::-webkit-scrollbar{display:none;height:0;}
.crsl__side{position:absolute;top:calc(50% - 28px);transform:translateY(-50%);z-index:3;
width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
background:rgba(16,16,21,.86);backdrop-filter:blur(6px);color:#fff;cursor:pointer;
display:grid;place-items:center;transition:background .15s,transform .15s;}
.crsl__side:hover{background:var(--violet);border-color:var(--violet);transform:translateY(-50%) scale(1.06);}
.crsl__side svg{width:18px;height:18px;}
.crsl__side--prev{left:-14px;}
.crsl__side--prev svg{transform:rotate(180deg);}
.crsl__side--next{right:-14px;}
@media(max-width:900px){.crsl__side--prev{left:2px;}.crsl__side--next{right:2px;}}
@media(max-width:640px){.crsl__side{display:none;}} /* au doigt, les flèches ne servent plus */
/* ============================================================
Encart « prix en crypto » — visible, coloré, sans être criard.
============================================================ */
.cryptobox{margin-top:16px;display:grid;gap:2px;padding:13px 15px;border-radius:14px;
background:linear-gradient(135deg,rgba(10,138,74,.16),rgba(10,138,74,.06));
border:1px solid rgba(10,138,74,.42);}
.cryptobox__tag{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:#39D98A;}
.cryptobox__price{font-size:1.35rem;font-weight:900;letter-spacing:-.02em;color:#fff;line-height:1.1;}
.cryptobox__sub{font-size:.78rem;color:var(--muted);}
.cryptobox--sm{margin:14px 0 0;padding:11px 13px;}
.cryptobox--sm .cryptobox__price{font-size:1.15rem;}
/* Boutons de paiement sur deux lignes */
.btn .paybtn__main{display:block;font-weight:900;line-height:1.15;}
.btn .paybtn__sub{display:block;font-weight:600;font-size:.74rem;opacity:.78;margin-top:2px;letter-spacing:.01em;}
.btn--block .paybtn__main,.btn--block .paybtn__sub{text-align:center;}
.paybtn--alt{background:rgba(255,255,255,.07);border:1px solid var(--line-2);}
.paybtn--alt:hover{background:rgba(255,255,255,.13);}
/* ===== Formulaires de candidature (partenaire, revendeur) ===== */
.applyform__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.applyform .field{margin-bottom:14px;}
.applyform label{display:block;font-weight:700;font-size:.86rem;margin-bottom:6px;color:#fff;}
.applyform textarea.input{resize:vertical;min-height:80px;line-height:1.5;font-family:inherit;}
.applyform .hint{font-size:.78rem;color:var(--muted);margin-top:5px;}
.okbox{display:grid;gap:4px;padding:16px 18px;border-radius:14px;
background:rgba(10,138,74,.14);border:1px solid rgba(10,138,74,.44);}
.okbox strong{color:#39D98A;font-size:1rem;}
.okbox span{color:var(--muted);font-size:.9rem;}
@media(max-width:640px){.applyform__row{grid-template-columns:1fr;gap:0;}}
/* ============================================================
Menus déroulants de l'en-tête.
Tout ce qui suit ne concerne QUE l'affichage bureau : sur
téléphone les panneaux restent gérés par les règles mobiles
(fermés tant qu'on ne les ouvre pas).
============================================================ */
@media(min-width:901px){
/* Catégories : colonnes typographiques, les blocs se collent sans trou */
.mega:not(.mega--sm) .mega__panel{
display:block;
column-count:3;
column-gap:22px;
min-width:660px; /* les libelles longs tiennent sur une ligne */
}
.mega:not(.mega--sm) .mega__link{gap:10px;}
.mega:not(.mega--sm) .mega__link > span:first-child{white-space:nowrap;}
.mega:not(.mega--sm) .mega__col{
break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
display:block;margin:0 0 14px;
}
.mega:not(.mega--sm) .mega__title,
.mega:not(.mega--sm) .mega__link{display:flex;}
/* Contact : panneau étroit, une seule colonne, aligné à droite */
.mega--sm .mega__panel--sm{
display:block;
column-count:1;
min-width:0;
width:max-content;
max-width:min(280px,calc(100vw - 32px));
}
.mega--sm .mega__col{display:flex;flex-direction:column;gap:2px;margin:0;}
.mega--sm .mega__link{white-space:nowrap;justify-content:flex-start;}
}
/* Ecrans intermediaires : le panneau a 3 colonnes depassait a gauche.
On repasse a 2 colonnes et on borne la largeur a celle de la fenetre. */
@media(min-width:901px){
.mega:not(.mega--sm) .mega__panel{max-width:calc(100vw - 40px);}
}
@media(min-width:901px) and (max-width:1180px){
.mega:not(.mega--sm) .mega__panel{column-count:2;min-width:0;width:min(470px,calc(100vw - 40px));}
}
/* ============================================================
Téléphone : les dérouleurs de l en-tête doivent s ouvrir SOUS
leur bouton, sur toute la largeur.
Le conteneur .mega restait en display:flex, donc le panneau
devenait un voisin du bouton : il se retrouvait a droite,
coince sur 118px de large, avec les libelles coupes.
============================================================ */
@media(max-width:900px){
.mega,.mega--sm{display:block;width:100%;position:static;}
.hd__nav .mega__btn{
display:flex;align-items:center;justify-content:space-between;
width:100%;text-align:left;
}
.mega__panel,.mega--sm .mega__panel--sm{
width:100%;max-width:none;min-width:0;
padding:2px 0 6px 8px;
column-count:1;
margin-top:2px;
}
.mega__col{display:block;margin:0 0 6px;}
.mega__title{
display:flex;align-items:center;gap:8px;
padding:9px 10px;border-radius:9px;font-size:.92rem;
}
.mega__link{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:8px 10px 8px 26px;border-radius:9px;
}
.mega__link span{min-width:0;}
.mega__n{flex:0 0 auto;}
/* le chevron du bouton pivote quand le dérouleur est ouvert */
.mega.is-open .mega__btn svg{transform:rotate(180deg);}
}
/* ============================================================
Hero — motif fluide d'origine, à taille constante et animé.
La tuile était fixée en pixels : sur un grand écran le motif
paraissait plus petit que sur un petit. Elle est maintenant
exprimée en pourcentage de la fenêtre, donc le motif occupe
toujours la même fraction de l'écran.
Deux couches qui dérivent à des vitesses différentes, plus une
respiration lente : la matière semble bouger sans jamais boucler
visiblement. Uniquement des transformations, donc aucun
ralentissement.
============================================================ */
.hero__grid{display:none;} /* quadrillage retiré, comme demandé */
.hero__fluid{
position:absolute;inset:0;overflow:hidden;
opacity:.30;pointer-events:none;mix-blend-mode:screen;
--tile:78vw; /* proportion identique partout */
}
.hero__fluid i{
position:absolute;top:0;left:0;display:block;
height:100%;width:calc(100% + var(--tile));
background:url('bg-fluid.svg') repeat-x left top/var(--tile) 100%;
will-change:transform;backface-visibility:hidden;
}
/* Couche du dessous : plus grande, plus lente, plus discrète */
--tile:112vw;
opacity:.55;
transform:translate3d(0,0,0) scaleY(-1); /* miroir vertical : le motif ne se répète pas à l'identique */
}
.hero__fluid.is-animated i{animation:fluidDrift 62s linear infinite;}
/* Respiration : très lent va-et-vient d'échelle, ce qui donne l'effet liquide */
.hero__fluid.is-animated{animation:fluidBreathe 34s ease-in-out infinite alternate;}
@keyframes fluidDrift{
from{transform:translate3d(0,0,0);}
to {transform:translate3d(calc(var(--tile) * -1),0,0);}
}
to {transform:translate3d(calc(var(--tile) * -1),0,0) scaleY(-1);}
}
@keyframes fluidBreathe{
from{transform:scale(1) translate3d(0,0,0);}
to {transform:scale(1.09) translate3d(0,-1.5%,0);}
}
@media(prefers-reduced-motion:reduce){
.hero__fluid.is-animated,
.hero__fluid.is-animated i{animation:none;}
}
/* ============================================================
Hero mobile : le motif etait ecrase en rayures verticales.
Le dessin est tres allonge (4,2 pour 1) et il est etire sur
toute la hauteur du hero. En calant la tuile sur la LARGEUR
d ecran, un telephone lui donnait 301px pour ~590px de haut,
soit une compression de 8 fois. On elargit donc la tuile a
mesure que l ecran retrecit, pour garder partout le meme
rendu que sur ordinateur.
============================================================ */
@media(max-width:760px){
/* le motif doit rester un fond, pas concurrencer le texte */
.hero__fluid{opacity:.20;}
/* le hero occupait tout l ecran : titre et marges resserres */
.hero{padding:46px 0 42px;}
.hero h1{font-size:clamp(1.6rem,7.4vw,2.1rem);line-height:1.12;letter-spacing:-.03em;}
.hero p{font-size:.94rem;line-height:1.55;}
.hero .btn{padding:12px 18px;font-size:.92rem;}
}
@media(max-width:420px){
.hero{padding:38px 0 34px;}
.hero h1{font-size:clamp(1.45rem,7.2vw,1.85rem);}
.hero p{font-size:.88rem;}
}
/* Paliers de largeur de tuile.
Le dessin fait 4,2 pour 1 et il est etire sur toute la hauteur du hero.
Une tuile calee sur la largeur d ecran donnait 301px pour 420px de haut sur
telephone, soit une compression de 6 fois : d ou les rayures verticales.
On elargit donc la tuile a mesure que l ecran retrecit. */
@media(max-width:1200px){ .hero__fluid{--tile:105vw;} }
@media(max-width:900px){ .hero__fluid{--tile:150vw;} }
@media(max-width:600px){ .hero__fluid{--tile:290vw;} }
@media(max-width:400px){ .hero__fluid{--tile:330vw;} }
/* ============================================================
Appareils tactiles : un appui declenche l etat :hover, et la
regle de survol du bureau reapplique translateX(-50%) — ce qui
decale tout le panneau vers la gauche, hors de l ecran.
Sur un navigateur d ordinateur redimensionne le probleme ne se
voit pas, car le survol n y existe pas. On neutralise donc le
survol la ou il n a pas de sens : les deroulants ne repondent
qu au clic, via la classe is-open posee par le script.
============================================================ */
@media (hover:none), (pointer:coarse), (max-width:900px){
.mega:hover .mega__panel,
.mega--sm:hover .mega__panel--sm{
transform:none;
}
/* le survol ne doit pas non plus ouvrir le panneau tout seul */
.mega:hover .mega__panel:not(.is-shown),
.mega--sm:hover .mega__panel--sm:not(.is-shown){
opacity:inherit;
visibility:inherit;
}
.mega:not(.is-open):hover .mega__panel,
.mega--sm:not(.is-open):hover .mega__panel--sm{
opacity:0;visibility:hidden;
}
.mega.is-open .mega__panel,
.mega--sm.is-open .mega__panel--sm{
opacity:1;visibility:visible;transform:none;
}
/* le chevron ne pivote qu une fois ouvert, pas au simple effleurement */
.mega:hover .mega__btn svg{transform:none;}
.mega.is-open .mega__btn svg{transform:rotate(180deg);}
}
/* Repli si le script ne s execute pas : dvh suit la barre d adresse des mobiles */
@media(max-width:900px){
.hd.is-open .hd__nav{max-height:calc(100dvh - 180px);}
}
/* ============================================================
Hero — cale sur l'image de reference.
Le motif fluide occupe deux blocs, a gauche et a droite, et
s'efface au centre pour laisser respirer le texte. Chaque bloc
se deforme lentement sur place : aucune translation horizontale,
donc plus d'effet de defilement.
============================================================ */
/* --- Logo : une seule ligne, comme sur la reference --- */
.pik-word{display:inline-flex !important;flex-direction:row !important;align-items:baseline;
gap:.06em;line-height:1;white-space:nowrap;}
.pik-name,.pik-suffix{display:inline;font-size:1em;}
.hd .pik-tube{height:1.9em;}
.hd .pik-word{font-size:1.22rem;}
.ft .pik-tube{height:2em;}
.ft .pik-word{font-size:1.24rem;}
@media(max-width:760px){
.hd .pik-tube{height:1.7em;}
.hd .pik-word{font-size:1rem;}
}
/* --- Les deux blocs de motif --- */
.hero__fluid{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:1;mix-blend-mode:normal;}
.hero__fluid i{
position:absolute;top:-14%;height:128%;width:66%;display:block;
background:url('bg-fluid.svg') no-repeat center center/cover;
opacity:.42;
transform-origin:50% 50%;will-change:transform;
}
/* On qualifie par « .hero__fluid i » : la regle generique porte le meme
selecteur et l emportait sur une simple classe, quel que soit l ordre. */
.hero__fluid i.hero__fluid-l{left:-6%;right:auto;}
.hero__fluid i.hero__fluid-r{left:auto;right:-6%;transform:scaleX(-1);} /* miroir : les deux cotes ne sont pas identiques */
/* Voile central : le texte se detache sur du sombre, comme sur la reference */
.hero__veil{
position:absolute;inset:0;display:block;pointer-events:none;
/* Fondu central renforce : le motif s efface franchement derriere le texte */
background:
radial-gradient(ellipse 46% 84% at 50% 46%, var(--bg) 38%, rgba(8,8,11,.82) 64%, transparent 84%),
linear-gradient(90deg, transparent 0%, rgba(8,8,11,.62) 24%, rgba(8,8,11,.62) 76%, transparent 100%);
}
/* Deformation lente sur place, desynchronisee entre les deux cotes */
.hero__fluid.is-animated i.hero__fluid-l{animation:fluidMorphL 26s ease-in-out infinite alternate;}
.hero__fluid.is-animated i.hero__fluid-r{animation:fluidMorphR 33s ease-in-out infinite alternate;}
/* Amplitude nettement plus marquee, avec des etapes intermediaires : la matiere
se deforme au lieu d aller tout droit d une pose a l autre.
L echelle ne descend jamais sous 1.08, sinon les bords du bloc apparaissent. */
@keyframes fluidMorphL{
0% {transform:scale(1.08) rotate(0deg) translate3d(0,0,0);}
30% {transform:scale(1.30) rotate(7deg) translate3d(5%,-4%,0);}
62% {transform:scale(1.14) rotate(-6deg) translate3d(-4%,3%,0);}
100% {transform:scale(1.36) rotate(11deg) translate3d(6%,-5%,0);}
}
@keyframes fluidMorphR{
0% {transform:scaleX(-1) scale(1.10) rotate(0deg) translate3d(0,0,0);}
28% {transform:scaleX(-1) scale(1.34) rotate(-8deg) translate3d(4%,4%,0);}
66% {transform:scaleX(-1) scale(1.12) rotate(6deg) translate3d(-5%,-3%,0);}
100% {transform:scaleX(-1) scale(1.30) rotate(-12deg) translate3d(6%,5%,0);}
}
@media(prefers-reduced-motion:reduce){
.hero__fluid.is-animated .hero__fluid-l,
.hero__fluid.is-animated .hero__fluid-r{animation:none;}
}
/* --- Texte du hero : blanc au centre --- */
.hero__title{
background:none;-webkit-background-clip:border-box;background-clip:border-box;
color:#fff;
}
.hero__title em,.hero__title .accent{color:#c9bdff;font-style:normal;}
.hero__sub{color:rgba(255,255,255,.72);}
/* --- Fiole : plus haute, calee sur la colonne de contenu, effacee vers le bas ---
Elle etait positionnee en % de la fenetre : sur un tres grand ecran elle
filait a l'extreme gauche, loin du contenu. On l'ancre desormais au bord
de la colonne centrale, avec une marge minimale. */
.hero__vial{
--vial-h:clamp(420px,64vh,720px);
left:max(18px, calc(50% - 660px));
bottom:auto;
top:33%;
height:var(--vial-h);
/* Pas d opacite globale : elle attenuait aussi le haut de la fiole.
Le fondu vient uniquement du degrade, plein en haut, efface en bas. */
opacity:1;color:#fff;
-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.72) 55%,rgba(0,0,0,.34) 74%,rgba(0,0,0,.10) 88%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0%,#000 34%,rgba(0,0,0,.72) 55%,rgba(0,0,0,.34) 74%,rgba(0,0,0,.10) 88%,transparent 100%);
filter:drop-shadow(0 24px 60px rgba(0,0,0,.45));
}
@media(max-width:1100px){.hero__vial{display:none;}}
/* ============================================================
Hero — nappes SVG vivantes.
Le SVG est dans la page : chaque vague (path) ondule avec sa
propre cadence. Les deux nappes reagissent aussi a la souris.
Garantie de non-croisement : largeur 46%, echelle max 1.12,
translation max 2% -> le bord interieur ne depasse jamais 47%
de la largeur, il reste donc toujours un couloir central.
============================================================ */
.hero__wave{position:absolute;top:-12%;height:124%;width:46%;display:block;overflow:hidden;
opacity:.5;will-change:transform;
/* Le bord interieur fond en opacite : on ne voit plus la coupure du SVG.
Le masque suit le repere local de l element : la nappe droite etant en
miroir, le meme masque s efface automatiquement vers le centre aussi. */
-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 52%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.12) 92%,transparent 100%);
mask-image:linear-gradient(90deg,#000 0%,#000 52%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.12) 92%,transparent 100%);}
/* Couche souris : pilotee par JS avec inertie. Isolee des animations CSS :
la deplacer ne force aucun recalcul des vagues. */
.wave-mouse{display:block;width:100%;height:100%;}
.wave-mouse svg{width:100%;height:100%;display:block;}
.hero__wave--l{left:-4%;}
.hero__wave--r{right:-4%;left:auto;transform:scaleX(-1);}
.hero__wave svg{width:100%;height:100%;display:block;}
/* Respiration d'ensemble, contenue (jamais de croisement au centre) */
.hero__fluid.is-animated .hero__wave--l{animation:waveBreatheL 24s ease-in-out infinite alternate;}
.hero__fluid.is-animated .hero__wave--r{animation:waveBreatheR 31s ease-in-out infinite alternate;}
@keyframes waveBreatheL{
0% {transform:scale(1);}
100%{transform:translate3d(1.6%,-1.4%,0) scale(1.10) rotate(1.2deg);}
}
@keyframes waveBreatheR{
0% {transform:scaleX(-1) scale(1.04);}
100%{transform:translate3d(1.4%,1.6%,0) scaleX(-1) scale(1.12) rotate(-1.4deg);}
}
/* --- Chaque vague ondule : cadences et amplitudes reparties --- */
.hero__wave svg path,.hero__wave svg polygon{transform-box:fill-box;transform-origin:center;}
.hero__fluid.is-animated .hero__wave svg path,
.hero__fluid.is-animated .hero__wave svg polygon{animation:waveFlowB 9s ease-in-out infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(2 of path){animation:waveFlowB 9s ease-in-out -1s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(3 of path){animation:waveFlowC 10.5s ease-in-out -3s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(4 of path){animation:waveFlowA 12s ease-in-out -5s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(5 of path){animation:waveFlowB 8.2s ease-in-out -6s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(6 of path){animation:waveFlowC 11.3s ease-in-out -8s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(7 of path){animation:waveFlowA 7.5s ease-in-out -10s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(8 of path){animation:waveFlowB 9s ease-in-out -11s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(9 of path){animation:waveFlowC 10.5s ease-in-out -1s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(10 of path){animation:waveFlowA 12s ease-in-out -3s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(11 of path){animation:waveFlowB 8.2s ease-in-out -5s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(12 of path){animation:waveFlowC 11.3s ease-in-out -6s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(13 of path){animation:waveFlowA 7.5s ease-in-out -8s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(14 of path){animation:waveFlowB 9s ease-in-out -10s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(15 of path){animation:waveFlowC 10.5s ease-in-out -11s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(16 of path){animation:waveFlowA 12s ease-in-out -1s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(17 of path){animation:waveFlowB 8.2s ease-in-out -3s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(18 of path){animation:waveFlowC 11.3s ease-in-out -4s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(19 of path){animation:waveFlowA 7.5s ease-in-out -6s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(20 of path){animation:waveFlowB 9s ease-in-out -8s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(21 of path){animation:waveFlowC 10.5s ease-in-out -10s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(22 of path){animation:waveFlowA 12s ease-in-out -11s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(23 of path){animation:waveFlowB 8.2s ease-in-out -1s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(24 of path){animation:waveFlowC 11.3s ease-in-out -3s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(25 of path){animation:waveFlowA 7.5s ease-in-out -4s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(26 of path){animation:waveFlowB 9s ease-in-out -6s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(27 of path){animation:waveFlowC 10.5s ease-in-out -8s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(28 of path){animation:waveFlowA 12s ease-in-out -9s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(29 of path){animation:waveFlowB 8.2s ease-in-out -11s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(30 of path){animation:waveFlowC 11.3s ease-in-out -1s infinite alternate;}
.hero__fluid.is-animated .hero__wave svg :nth-child(31 of path){animation:waveFlowA 7.5s ease-in-out -3s infinite alternate;}
@keyframes waveFlowA{
0% {transform:translate(0,0) scale(1);}
100%{transform:translate(10px,-8px) scale(1.06) rotate(1.6deg);}
}
@keyframes waveFlowB{
0% {transform:translate(0,0) scale(1.04);}
100%{transform:translate(-9px,7px) scale(.97) rotate(-1.8deg);}
}
@keyframes waveFlowC{
0% {transform:translate(0,0) rotate(0);}
100%{transform:translate(7px,9px) scale(1.05) rotate(1.2deg);}
}
@media(prefers-reduced-motion:reduce){
.hero__wave,.hero__wave svg path,.hero__wave svg polygon{animation:none !important;transition:none;}
}
/* --- Fiole : le fondu part en diagonale, comme sur la reference ---
135deg = plein en haut-gauche, efface vers le bas-droite. */
.hero__vial{
/* Reference : haut-droite plein, la fiole s efface franchement vers la
tranche gauche et le bas (225° = vers le bas-gauche). */
-webkit-mask-image:linear-gradient(225deg,#000 0%,#000 20%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.16) 66%,transparent 86%);
mask-image:linear-gradient(225deg,#000 0%,#000 20%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.16) 66%,transparent 86%);
}
/* Performance : une vague sur deux reste immobile. Le mouvement des autres
suffit a faire vivre le motif, et le cout de repeint est divise par deux. */
.hero__fluid.is-animated .hero__wave svg :nth-child(even of path){animation:none;}
/* Nappe droite : animation DIFFERENTE de la gauche, pour casser l effet miroir.
- la partition est inversee : les vagues figees a gauche sont celles qui
bougent a droite (cout de rendu inchange)
- mouvement, cadence et sens distincts */
.hero__fluid.is-animated .hero__wave--r svg :nth-child(even of path){animation:waveFlowC 11s cubic-bezier(.45,.05,.55,.95) -4s infinite alternate;}
.hero__fluid.is-animated .hero__wave--r svg :nth-child(odd of path){animation:none;}
.hero__fluid.is-animated .hero__wave--r svg polygon{animation:waveFlowA 14s ease-in-out -6s infinite alternate-reverse;}
/* respiration droite : tempo plus court et courbe differente de la gauche (24s) */
.hero__fluid.is-animated .hero__wave--r{animation-duration:17s;animation-timing-function:cubic-bezier(.45,.05,.55,.95);}
/* ============================================================
Hero — fond en UNE SEULE couche.
L animation des vagues une a une forcait le navigateur a
repeindre les nappes a chaque image : c etait la cause du lag.
Ici, une seule derive lente du conteneur (transform, GPU),
aucun repeint. La separation centrale reste assuree par le voile.
============================================================ */
.hero__flow{
position:absolute;inset:-12% -7%;display:block;overflow:hidden;
opacity:.5;will-change:transform;transform:translateZ(0);
}
.hero__flow svg{width:100%;height:100%;display:block;}
/* Une seule couche rigide : aucun chevauchement possible. La deformation
vient d un cisaillement et d etirements non uniformes du conteneur :
le motif entier se tord lentement, comme une matiere souple. */
.hero__flow{opacity:.5;}
.hero__fluid.is-animated .hero__flow{animation:flowWarp 26s ease-in-out infinite alternate;}
@keyframes flowWarp{
0% {transform:skewX(0deg) scale(1.05,1.05) rotate(0deg);}
25% {transform:skewX(2.4deg) scale(1.10,1.04) rotate(.5deg);}
50% {transform:skewX(-1.8deg) scale(1.04,1.09) rotate(-.6deg);}
75% {transform:skewX(2.8deg) scale(1.11,1.06) rotate(.8deg);}
100%{transform:skewX(-2.4deg) scale(1.06,1.11) rotate(-.4deg);}
}
@media(prefers-reduced-motion:reduce){.hero__fluid.is-animated .hero__flow{animation:none;}}
/* Couleur des vagues du hero, ciblee (le style embarque du SVG debordait sur toute la page) */
.hero__flow svg path,.hero__flow svg polygon{fill:var(--violet,#7C4DFF);}
/* Balancement aquatique : deux axes emboites, cadences differentes (26s / 37s).
La composition des deux ne repasse jamais par la meme pose -> la matiere
semble flotter dans l eau. Toujours UNE piece rigide : zero chevauchement,
zero repeint, deux transformations composited. */
.hero__flow-inner{display:block;width:100%;height:100%;will-change:transform;}
.hero__fluid.is-animated .hero__flow-inner{animation:flowSway 37s cubic-bezier(.45,.05,.55,.95) -14s infinite alternate;}
@keyframes flowSway{
0% {transform:skewY(-1.4deg) translate3d(0,-.8%,0) rotate(.4deg) scaleY(1.03);}
50% {transform:skewY(1.6deg) translate3d(0,1%,0) rotate(-.5deg) scaleY(1.06);}
100%{transform:skewY(-1.2deg) translate3d(0,-.6%,0) rotate(.3deg) scaleY(1.04);}
}
@media(prefers-reduced-motion:reduce){.hero__fluid.is-animated .hero__flow-inner{animation:none;}}
/* Carte de repli quand le widget Trustpilot est bloque cote visiteur */
.tp-fallback{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
padding:22px 26px;border-radius:16px;background:var(--surface);border:1px solid var(--line);}
.tp-fallback__stars{color:#00b67a;font-size:1.35rem;letter-spacing:3px;}
.tp-fallback__txt{color:var(--muted);font-size:.95rem;}
/* Fond du hero dessine en canvas (voir shop.js) : chaque vague respire et derive
individuellement. Les anciennes regles .hero__flow / .hero__wave ci-dessus sont
sans effet — ces elements n existent plus dans le balisage. */
.hero__flowcanvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.5;pointer-events:none;}
/* ------------------------------------------------------------------
Fiche produit : la photo entière, des flèches, une loupe.
L'image était rognée au carré (object-fit:cover) : on ne voyait que
son centre. En « contain » elle est visible en entier, avec un fond
qui la porte plutôt que de la couper.
------------------------------------------------------------------ */
.pd__img{position:relative;}
.pd__img img{width:100%;height:100%;object-fit:contain;padding:18px;cursor:zoom-in;}
/* Flèches : posées sur l'image, assez grandes pour le tactile */
.pd__nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:2;
width:42px;height:42px;display:grid;place-items:center;
background:rgba(10,10,14,.55);border:1px solid var(--line-2);border-radius:999px;
color:#fff;cursor:pointer;transition:background .15s,transform .15s;
}
.pd__nav:hover{background:rgba(10,10,14,.8);}
.pd__nav svg{width:20px;height:20px;}
.pd__nav--prev{left:12px;transform:translateY(-50%) rotate(90deg);}
.pd__nav--next{right:12px;transform:translateY(-50%) rotate(-90deg);}
.pd__nav--prev:hover{transform:translateY(-50%) rotate(90deg) scale(1.06);}
.pd__nav--next:hover{transform:translateY(-50%) rotate(-90deg) scale(1.06);}
.pd__count{
position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:2;
background:rgba(10,10,14,.6);border:1px solid var(--line-2);border-radius:999px;
padding:3px 12px;font-size:.76rem;color:#fff;font-weight:600;
}
.pd__zoom{
position:absolute;right:12px;top:12px;z-index:2;
width:38px;height:38px;display:grid;place-items:center;
background:rgba(10,10,14,.55);border:1px solid var(--line-2);border-radius:999px;
color:#fff;cursor:pointer;transition:background .15s;
}
.pd__zoom:hover{background:rgba(10,10,14,.8);}
.pd__zoom svg{width:18px;height:18px;}
/* Vignettes : la photo entière aussi, sinon la vignette ment sur son contenu */
.pd__thumb img{object-fit:contain;padding:4px;background:#0b0b0f;}
/* ---- Agrandissement plein écran ---- */
.lb{
position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
background:rgba(6,6,9,.94);padding:40px 64px;cursor:zoom-out;
}
.lb[hidden]{display:none;}
.lb img{max-width:100%;max-height:100%;object-fit:contain;cursor:default;}
.lb__close{
position:absolute;top:18px;right:18px;width:44px;height:44px;
display:grid;place-items:center;background:rgba(255,255,255,.10);
border:1px solid var(--line-2);border-radius:999px;color:#fff;cursor:pointer;
}
.lb__close svg{width:20px;height:20px;}
.lb__nav{
position:absolute;top:50%;transform:translateY(-50%);
width:50px;height:50px;display:grid;place-items:center;
background:rgba(255,255,255,.10);border:1px solid var(--line-2);border-radius:999px;
color:#fff;cursor:pointer;
}
.lb__nav svg{width:22px;height:22px;}
.lb__nav--prev{left:16px;transform:translateY(-50%) rotate(90deg);}
.lb__nav--next{right:16px;transform:translateY(-50%) rotate(-90deg);}
@media(max-width:700px){
.lb{padding:20px 12px;}
.lb__nav{width:42px;height:42px;}
.lb__nav--prev{left:6px;}
.lb__nav--next{right:6px;}
}
/* ------------------------------------------------------------------
Fiole du hero : retour au blanc d'origine.
Le verre suit déjà currentColor ; c'est le liquide qui portait un
dégradé violet en dur dans le SVG. On le repeint en blanc, avec une
opacité un peu plus faible pour que le niveau reste lisible — sinon
liquide et verre se confondent en une seule tache blanche.
------------------------------------------------------------------ */
.hero__vial svg [fill^="url("]{fill:#fff;opacity:.62;}
/* ------------------------------------------------------------------
Les deux moyens de paiement, page de commande.
Le second bouton était gris sur fond sombre : illisible. Il passe en
violet atténué avec texte blanc — présent, mais clairement second.
------------------------------------------------------------------ */
.paybtn{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.25;}
.paybtn__main{display:inline-flex;align-items:center;gap:8px;font-weight:800;}
.paybtn__main svg{width:17px;height:17px;}
.paybtn__sub{font-size:.74rem;font-weight:600;opacity:.75;letter-spacing:.02em;text-transform:none;}
.paybtn--alt{
background:color-mix(in srgb, var(--violet) 42%, transparent);
border:1px solid color-mix(in srgb, var(--violet) 62%, transparent);
color:#fff;box-shadow:none;
}
.paybtn--alt:hover{background:color-mix(in srgb, var(--violet) 58%, transparent);}
/* Repli pour les navigateurs sans color-mix : la couleur reste lisible. */
@supports not (background: color-mix(in srgb, red 50%, transparent)){
.paybtn--alt{background:rgba(109,59,228,.45);border-color:rgba(109,59,228,.66);}
.paybtn--alt:hover{background:rgba(109,59,228,.6);}
}
/* ------------------------------------------------------------------
Défilement horizontal : blocage de l'axe vertical.
En ne déclarant que `overflow-x:auto`, la spécification CSS force
l'autre axe à `auto` également : le conteneur devenait scrollable de
quelques pixels en hauteur, ce qui donnait cette sensation de slider
« flottant » au doigt. On fige donc l'axe vertical.
`overscroll-behavior-x:contain` empêche en prime le geste de fin de
course de déclencher le « retour arrière » du navigateur.
------------------------------------------------------------------ */
.crsl,
.pgrid,.cat-tiles,.rev-grid,.pd-packs__grid,
.section__head--cat .subnav{
overflow-y:hidden;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
}
/* ------------------------------------------------------------------
Produit phare : l'image occupe TOUT le bloc.
Elle était bridée à 70 % de large et 80 % de haut et flottait au
milieu d'un grand vide. En couvrant la zone, le bloc devient une
vraie vitrine — c'est le seul endroit du site où l'on accepte que la
photo soit recadrée, parce qu'elle joue un rôle d'image d'ambiance.
------------------------------------------------------------------ */
.spot__media img{
position:absolute;inset:0;
width:100%;height:100%;
max-width:none;max-height:none;
object-fit:cover;
}
/* le halo décoratif reste sous la photo */
.spot__glow{z-index:0;}
/* Fiche produit : l'inverse — la photo entière, jamais recadrée.
Règle répétée ici pour passer après toute surcharge antérieure. */
.pd__img img:not(.pd__bg){object-fit:contain !important;}
/* ------------------------------------------------------------------
Nouveau logo « PIK. » : le mot-clé est désormais dessiné (SVG), plus
composé en texte. Sa hauteur pilote tout le bloc ; le suffixe
« Peptides » s'aligne à côté, sur la même ligne de base optique.
------------------------------------------------------------------ */
.pik-mark{height:2.4em;width:auto;display:block;flex:0 0 auto;}
.pik-logo{display:inline-flex;align-items:center;gap:10px;}
.pik-logo--mark .pik-suffix{display:none;}
/* Logo reduit au dessin : le nom reste lisible par les lecteurs d ecran
et les moteurs, hors de l ecran — un lien sans nom n en est pas un. */
.pik-nom-cache{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.ft__brand .pik-mark{height:2.8em;}
@media(max-width:760px){ .pik-mark{height:1.9em;} }
/* ------------------------------------------------------------------
Fiche produit : contrainte RÉELLE de l'image.
`object-fit:contain` ne suffisait pas : dans une grille centrée, la
hauteur de l'image n'était pas contrainte, elle se dimensionnait sur
sa largeur. Un certificat d'analyse (1600×2360) s'affichait donc en
366×523 dans un cadre de 368×368 — et le bas était rogné.
En laissant les dimensions libres et en plafonnant les DEUX côtés,
l'image se cale sur celui qui déborde en premier : une image haute est
limitée par la hauteur et laisse des marges sur les côtés.
------------------------------------------------------------------ */
/* Positionnement absolu dans un cadre de hauteur CONNUE (aspect-ratio 1/1) :
c est la seule facon que max-height se resolve vraiment. Avec margin:auto
sur les quatre cotes, l image se centre d elle-meme. */
/* Les photos produit sont carrees, comme le cadre : elles doivent donc le
remplir EXACTEMENT. La marge de 36px laissee pour les certificats d analyse
creait deux bandes sombres sur chaque photo carree — le defaut signale.
Les documents hauts, eux, gardent leurs marges : c est inevitable si l on
veut les voir en entier. Le fond flou les rend simplement discretes. */
.pd__img img:not(.pd__bg){
position:absolute;inset:0;margin:auto;z-index:1;
width:auto !important;height:auto !important;
max-width:100%;max-height:100%;
padding:0;
}
/* Selecteur volontairement plus specifique que « .pd__img img » : sans cela
la regle generale du cadre l emporte et le fond revient en contain. */
.pd__img img.pd__bg{
position:absolute;inset:0;z-index:0;
width:100% !important;height:100% !important;
object-fit:cover !important;
filter:blur(26px) saturate(1.25);
transform:scale(1.25);
opacity:.5;pointer-events:none;
}
/* Les commandes de la galerie restent au-dessus de la photo. */
.pd__nav,.pd__count,.pd__zoom{z-index:2;}
/* Le titre principal de ces pages est un h1 : meme apparence que les h2
de section, mais le bon niveau pour les moteurs. */
.section__head h1{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.15;}
/* ------------------------------------------------------------------
Vente liée : l'eau bactériostatique proposée sur la fiche produit.
Un bloc discret mais lisible — le client doit voir l'économie sans
que l'offre prenne le pas sur le produit lui-même.
------------------------------------------------------------------ */
.addwater{border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin:0 0 16px;
background:linear-gradient(180deg,rgba(124,77,255,.07),transparent);}
.addwater__h{display:flex;align-items:center;gap:8px;font-size:.92rem;margin-bottom:10px;}
.addwater__h svg{width:18px;height:18px;color:var(--violet);flex:0 0 auto;}
.addwater__h strong{color:var(--violet);}
.addwater__opts{display:flex;gap:8px;flex-wrap:wrap;}
.addwater__opt{flex:1 1 130px;display:flex;align-items:center;gap:8px;cursor:pointer;
border:1px solid var(--line);border-radius:10px;padding:9px 11px;transition:border-color .15s,background .15s;}
.addwater__opt:hover{border-color:var(--violet);}
.addwater__opt:has(input:checked){border-color:var(--violet);background:rgba(124,77,255,.10);}
.addwater__opt:has(input:disabled){opacity:.45;cursor:not-allowed;}
.addwater__opt input{accent-color:var(--violet);flex:0 0 auto;}
.addwater__lbl{display:flex;flex-direction:column;gap:1px;font-size:.86rem;line-height:1.25;}
.addwater__px{font-weight:700;color:var(--violet);font-size:.82rem;}
.addwater__px s{color:var(--muted);font-weight:500;margin-left:4px;}
.addwater__note{margin:9px 0 0;font-size:.76rem;color:var(--muted);}
@media(max-width:520px){ .addwater__opt{flex:1 1 100%;} }
/* ------------------------------------------------------------------
Rappel « n'oublie pas tes seringues » à l'ajout d'un peptide.
------------------------------------------------------------------ */
/* La boîte ne doit JAMAIS dépasser l'écran : depuis qu'elle propose trois
groupes (kits, seringues, tampons), elle débordait sans pouvoir défiler —
les dernières options étaient inatteignables, et le bouton de fermeture
avec. L'en-tête et le bouton du bas restent fixes, seule la liste défile.
« dvh » tient compte de la barre d'adresse mobile, qui fausse « vh ». */
.modal{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:16px;}
.modal__voile{position:absolute;inset:0;background:rgba(6,6,12,.72);backdrop-filter:blur(4px);}
.modal__boite{position:relative;width:100%;max-width:430px;background:var(--surface,#15151d);
border:1px solid var(--line);border-radius:18px;padding:26px 24px 22px;text-align:center;
box-shadow:0 30px 70px rgba(0,0,0,.5);animation:modalIn .22s ease-out;
max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
display:flex;flex-direction:column;}
/* min-height:0 : sans lui, un enfant flex refuse de rétrécir sous son contenu
et le défilement ne se déclenche jamais. */
.modal__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;margin:0 -24px;padding:0 24px;}
.modal__boite > .btn{flex:0 0 auto;}
@media(max-width:560px){
.modal{padding:10px;}
.modal__boite{padding:22px 18px 16px;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);}
.modal__scroll{margin:0 -18px;padding:0 18px;}
.modal__boite h3{font-size:1.05rem;}
.modal__boite p{font-size:.84rem;margin-bottom:14px;}
}
/* Écran très bas (téléphone en paysage, clavier ouvert) : l'en-tête mangeait
la moitié de la hauteur. On garde le titre, on retire le reste — ce sont
les options qui comptent, pas l'explication. */
@media(max-height:560px){
.modal__ic{display:none;}
.modal__boite{padding-top:18px;}
.modal__boite > p{display:none;}
.modal__boite h3{font-size:1rem;margin-bottom:12px;}
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.modal__boite{animation:none;}}
.modal__x{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--muted);cursor:pointer;
padding:6px;line-height:0;border-radius:8px;}
.modal__x:hover{color:var(--text,#fff);background:rgba(255,255,255,.07);}
.modal__x svg{width:18px;height:18px;}
.modal__ic{width:46px;height:46px;margin:0 auto 12px;border-radius:14px;display:grid;place-items:center;
background:rgba(124,77,255,.16);color:var(--violet);}
.modal__ic svg{width:24px;height:24px;}
.modal__boite h3{margin:0 0 7px;font-size:1.15rem;}
.modal__boite p{margin:0 0 18px;color:var(--muted);font-size:.88rem;line-height:1.5;}
.modal__opts{display:flex;flex-direction:column;gap:8px;}
.modal__opt button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:transparent;
color:inherit;font:inherit;cursor:pointer;transition:border-color .15s,background .15s;}
.modal__opt button:hover:not(:disabled){border-color:var(--violet);background:rgba(124,77,255,.10);}
.modal__opt button:disabled{opacity:.42;cursor:not-allowed;}
.modal__nom{font-weight:600;font-size:.9rem;}
.modal__px{font-weight:800;color:var(--violet);white-space:nowrap;}
/* ------------------------------------------------------------------
Point relais : de quoi choisir en connaissance de cause — distance,
transporteur et surtout horaires, le jour courant mis en avant.
------------------------------------------------------------------ */
.relaylist__n{margin:0 0 8px;font-size:.78rem;color:var(--muted);}
.relayitem{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;}
.relayitem__hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.relayitem__hd em{font-style:normal;font-weight:700;color:var(--violet);font-size:.8rem;white-space:nowrap;}
.relayitem__ad{color:var(--muted);font-size:.82rem;}
.relayitem__tr{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.relayitem__h{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:2px 10px;
margin-top:6px;padding-top:6px;border-top:1px solid var(--line);font-size:.72rem;color:var(--muted);}
.relayitem__h span{display:flex;gap:5px;}
.relayitem__h b{font-weight:600;color:var(--text,inherit);opacity:.85;}
.relayitem__h span.on{color:var(--violet);}
.relayitem__h span.on b{color:var(--violet);font-weight:800;opacity:1;}
@media(max-width:520px){ .relayitem__h{grid-template-columns:repeat(2,1fr);} }
/* Point relais proposé d'office (le plus proche de l'adresse), « Changer » pour
ouvrir la liste ou chercher ailleurs. Sans les règles [hidden], le display
des blocs l'emporterait sur l'attribut et rien ne se masquerait. */
.relaypick[hidden],.relaymore[hidden],.relaylist__wait[hidden]{display:none;}
.relaypick{align-items:center;}
.relaypick__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.relaypick .relaypick__tag{color:var(--green);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;}
.relaypick__tag em{font-style:normal;text-transform:none;letter-spacing:0;margin-left:5px;font-size:.78rem;}
.relaypick .relaypick__h{font-size:.78rem;}
.relaypick__chg{flex:0 0 auto;padding:7px 12px;border-radius:9px;border:1px solid var(--line-2);background:rgba(255,255,255,.06);
color:#fff;font-family:var(--font);font-size:.82rem;font-weight:700;cursor:pointer;transition:border-color .15s;}
.relaypick__chg:hover,.relaypick__chg:focus-visible{border-color:var(--violet);}
.relaymore{margin-top:10px;}
.relaymore__t{margin:12px 0 7px;font-size:.82rem;color:var(--muted);}
.relayitem.is-on{border-color:var(--green);background:var(--green-bg);}
/* Téléphone : le bouton passe sous le texte, aligné dessus, au lieu de
l'écraser sur trois lignes. */
@media(max-width:520px){
.relaypick{flex-wrap:wrap;}
.relaypick__b{flex:1 1 calc(100% - 28px);}
.relaypick__chg{margin-left:28px;}
}
/* Paliers d'offre au panier : ce qui manque, ou ce qui est acquis. */
.palier{display:flex;align-items:center;gap:8px;padding:9px 11px;margin-bottom:8px;border-radius:10px;
font-size:.83rem;line-height:1.35;border:1px solid var(--line);}
.palier svg{width:16px;height:16px;flex:0 0 auto;}
.palier--reste{background:rgba(124,77,255,.09);border-color:rgba(124,77,255,.28);color:var(--violet);}
.palier--ok{background:rgba(62,207,142,.10);border-color:rgba(62,207,142,.30);color:var(--green,#3ecf8e);font-weight:600;}
/* ------------------------------------------------------------------
Suggestions d'adresse au moment de la commande.
------------------------------------------------------------------ */
.adr{position:relative;}
.adr__liste{position:absolute;top:100%;left:0;right:0;z-index:60;margin-top:4px;
background:var(--surface,#15151d);border:1px solid var(--line);border-radius:12px;
box-shadow:0 18px 40px rgba(0,0,0,.4);overflow:hidden;max-height:280px;overflow-y:auto;}
.adr__item{display:block;width:100%;text-align:left;padding:11px 14px;border:0;background:none;
color:inherit;font:inherit;font-size:.88rem;cursor:pointer;line-height:1.35;
border-bottom:1px solid var(--line);}
.adr__item:last-child{border-bottom:0;}
.adr__item:hover,.adr__item.on{background:rgba(124,77,255,.14);color:var(--violet);}
/* Mode de livraison que le transporteur ne dessert pas pour cette adresse. */
.shipopt.is-off{opacity:.45;pointer-events:none;}
.shipopt__off{margin-top:6px;font-size:.76rem;color:var(--amber,#e0a800);font-weight:600;}
/* ------------------------------------------------------------------
Bandeau « paiement confirmé ».
Le client qui paie en crypto termine chez la passerelle et ne revient
pas sur notre page de suivi : ce bandeau le lui annonce dès qu'il
rouvre la boutique, une fois, puis disparaît.
------------------------------------------------------------------ */
.paid-flash{background:linear-gradient(90deg,rgba(26,127,55,.22),rgba(26,127,55,.08));
border-bottom:1px solid rgba(26,127,55,.38);}
.paid-flash__in{display:flex;align-items:center;gap:14px;padding:13px 22px;flex-wrap:wrap;}
.paid-flash__ic{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;
background:rgba(26,127,55,.9);color:#fff;flex:0 0 32px;}
.paid-flash__ic svg{width:18px;height:18px;}
.paid-flash strong{display:block;font-size:.96rem;}
/* Scopé au bloc de texte : sans cela la règle repeindrait aussi la pastille. */
.paid-flash__in > div span{color:var(--muted);font-size:.86rem;}
.paid-flash .btn{margin-left:auto;}
@media(max-width:600px){
.paid-flash__in{padding:11px 16px;gap:10px;}
.paid-flash .btn{margin-left:0;width:100%;justify-content:center;}
}
/* Variante « ta commande t'attend » : couleur de la marque, pas le vert du
succès — rien n'est encore payé. */
.paid-flash--reprise{background:linear-gradient(90deg,var(--acc-18),var(--acc-05));border-bottom-color:var(--acc-30);}
.paid-flash--reprise .paid-flash__ic{background:var(--violet);}
/* ------------------------------------------------------------------
Récapitulatif de commande (page de retour de paiement).
Le client qui commande seul ne voyait qu'un numéro et un total : il
relit désormais ce qu'il a acheté, avant de payer comme après.
------------------------------------------------------------------ */
.orecap{text-align:left;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:22px 0;}
.orecap__head{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid var(--line);
font-weight:800;font-size:.94rem;}
.orecap__head > span:first-child{display:inline-flex;align-items:center;gap:8px;}
.orecap__head svg{width:17px;height:17px;}
.orecap__num{font-family:ui-monospace,monospace;font-size:.82rem;color:var(--muted);font-weight:700;}
.orecap__items{list-style:none;margin:0;padding:6px 0;}
.orecap__items li{display:flex;align-items:baseline;gap:10px;padding:8px 16px;font-size:.9rem;}
.orecap__items li + li{border-top:1px dashed var(--line);}
.orecap__q{flex:0 0 auto;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:700;}
.orecap__n{flex:1;min-width:0;}
.orecap__n em{color:var(--muted);font-style:normal;font-size:.85em;}
.orecap__p{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;}
.orecap__sums{padding:12px 16px;border-top:1px solid var(--line);font-size:.9rem;}
.orecap__sums > div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;}
.orecap__sums > div span:last-child{font-variant-numeric:tabular-nums;}
.orecap__sums .is-off span:last-child{color:var(--green);}
.orecap__total{margin-top:8px;padding-top:10px!important;border-top:1px solid var(--line);
font-weight:900;font-size:1.06rem;}
.orecap__addr{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;
padding:14px 16px;border-top:1px solid var(--line);background:rgba(255,255,255,.02);
font-size:.84rem;line-height:1.5;}
.orecap__addr strong{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);margin-bottom:4px;}
@media(max-width:560px){
.orecap__items li{flex-wrap:wrap;}
.orecap__p{margin-left:auto;}
}
/* Pop-up matériel : titres de groupe (kits / seringues / tampons).
Sélecteur volontairement qualifié par « .modal__boite » : ces titres sont
des
, et la règle « .modal__boite p » (margin:0 0 18px, font-size:.88rem)
l'emportait sur une classe seule. Résultat, le titre se collait au produit
du dessus — marge haute calculée à 0 — et sortait trop gros. */
.modal__boite .modal__grp{display:flex;align-items:center;gap:7px;
margin:26px 0 9px;
font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;color:var(--muted);}
/* Un titre appartient à la liste qu'il annonce : il doit respirer largement
au-dessus, et rester serré en dessous. Le premier n'a rien avant lui. */
.modal__boite .modal__grp:first-of-type{margin-top:12px;}
.modal__boite .modal__grp svg{width:15px;height:15px;color:var(--violet);flex:0 0 auto;}
.modal__boite .modal__grp span{text-transform:none;letter-spacing:0;font-weight:600;opacity:.75;}
/* ------------------------------------------------------------------
Sélecteur de dosage sur la fiche produit.
Chaque dosage reste une page à part : ce sont de vrais liens, donc
partageables et indexables. On ne masque pas les ruptures — savoir
qu'un dosage existe vaut mieux que le croire absent.
------------------------------------------------------------------ */
.pd__variants{margin:0 0 18px;}
.pd__variants-k{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
font-weight:800;color:var(--muted);margin-bottom:8px;}
.pd__variants-list{display:flex;flex-wrap:wrap;gap:8px;}
.pd__variant{display:inline-flex;align-items:center;justify-content:center;
min-width:58px;padding:9px 14px;border-radius:11px;
border:1px solid var(--line-2);background:rgba(255,255,255,.04);
color:#fff;font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap;
transition:border-color .16s,background .16s,transform .16s;}
a.pd__variant:hover{border-color:var(--violet);background:rgba(255,255,255,.09);transform:translateY(-1px);}
.pd__variant.is-on{border-color:var(--violet);background:var(--violet);color:#fff;cursor:default;}
.pd__variant.is-out{opacity:.42;text-decoration:line-through;}
.pd__variant.is-out.is-on{opacity:.75;}
@media(max-width:560px){ .pd__variant{padding:8px 12px;font-size:.85rem;min-width:52px;} }
/* Page « tout le catalogue » : intertitres de catégorie + compteurs. */
.cat-sep{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
margin:34px 0 16px;font-size:1.22rem;font-weight:900;letter-spacing:-.02em;}
.cat-sep:first-of-type{margin-top:6px;}
.cat-sep a{display:inline-flex;align-items:center;gap:3px;font-size:.8rem;font-weight:700;
color:var(--violet);text-decoration:none;}
.cat-sep a:hover{text-decoration:underline;}
.cat-sep a svg{width:14px;height:14px;}
.subnav__n{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
background:rgba(255,255,255,.10);font-size:.7rem;font-weight:800;line-height:1.5;}
.subnav a.on .subnav__n{background:rgba(0,0,0,.22);}
/* Selecteur de langue FR / EN, a droite du panier. Pastille discrete : il
sert une fois par visite, il ne doit pas concurrencer le bouton Panier. */
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.04);flex:0 0 auto;}
.lang__o{display:inline-block;min-width:32px;text-align:center;padding:5px 8px;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.06em;color:var(--muted);transition:color .15s,background .15s;}
.lang__o:hover{color:#fff;}
.lang__o.on{background:var(--violet);color:#fff;}
@media(max-width:900px){.lang{order:2;}}
/* Trois langues : sur téléphone, pastilles plus serrées pour rester sur la
ligne du panier au lieu de passer à la ligne. */
@media(max-width:900px){
.lang{padding:2px;gap:0;}
.lang__o{min-width:0;padding:5px 6px;font-size:.68rem;letter-spacing:.03em;}
}
@media(max-width:380px){ .hd__cart > span:not(.hd__badge){display:none;} }