/* ═══════════════════════════════════════════════════════ NOURYA — Styles principaux ═══════════════════════════════════════════════════════ */ :root{ --g:#C4A45C;--gl:#D6BC78;--gp:#EBD9A2; /* --g sur fond sombre (--n1..n4) : 8.52:1, très lisible — ne pas toucher. --g sur fond clair (--c) : 2.22:1, sous le seuil WCAG AA (4.5:1). --g-oncream : même teinte assombrie (HSL, teinte/saturation conservées), 4.94:1 sur --c — réservé aux quelques textes dorés qui reposent directement sur le fond crème (hero gauche, section Histoire, FAQ). */ --g-oncream:#81682F; --n1:#0A0500;--n2:#130700;--n3:#1D0C00;--n4:#261100; --c:#FBF6EE;--c2:#F2E8D8;--c3:#E4D0B8; --rose:#DEB8B3;--rose2:#EAC9C4;--rose3:#F5E4E1;--rosed:#BE7B74; /* Même constat que --g-oncream ci-dessus, pour --rosed cette fois : 6.06:1 sur fond sombre (inchangé, très lisible) mais 3.11:1 sur --c (sous 4.5:1). --rosed-oncream : teinte/saturation conservées, assombrie jusqu'à 4.62:1 — réservé à .rosee dans les mêmes 3 sections à fond clair (Histoire, Rituels, FAQ). */ --rosed-oncream:#AA5850; --sage:#8A9B7E;--terra:#B26A45;--txt:#1A0C00; --ff:'Cormorant Garamond',Georgia,serif; --fb:'Jost',sans-serif; --fa:'Noto Naskh Arabic',serif; --ease:cubic-bezier(.25,.46,.45,.94); --ease2:cubic-bezier(.34,1.56,.64,1); --ease-spring:cubic-bezier(.18,1.25,.4,1.1); /* Z-index scale centralisé */ --z-bg:0;--z-petals:1;--z-sections:2;--z-nav:900; /* Hauteur cumulée des bandeaux au-dessus du header (annonce admin + livraison gratuite) — mise à jour en JS (updateTopBarsOffset() dans main.js) dès qu'un bandeau apparaît/disparaît. nav est fixed, donc sans ça un bandeau se contente de pousser du contenu qui n'existe plus visuellement sous un header qui, lui, reste toujours planté à top:0. */ --top-bars-h:0px; --z-cart:4000;--z-overlay:3000;--z-toast:8000; --z-cursor-ring:9998;--z-cursor:9999;--z-loader:99999; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:var(--c);color:var(--txt);font-family:var(--fb);overflow-x:hidden;} /* Accessibilité : focus clavier visible sur tous les éléments interactifs (WCAG 2.4.7) */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--g);outline-offset:2px;border-radius:2px;} .hero-h1,.sec-h,.pc-name,.pc-price,.hs-name,.stat-n,.hstat-n{ font-feature-settings:"kern" 1,"liga" 1,"calt" 1,"dlig" 1; text-rendering:optimizeLegibility; } ::-webkit-scrollbar{width:3px;} ::-webkit-scrollbar-track{background:var(--n2);} ::-webkit-scrollbar-thumb{background:linear-gradient(var(--g),var(--rosed));} /* ─── CURSEUR SYSTÈME (flèche native) ─── */ *,*::before,*::after{cursor:default!important;} a,button, [role="button"],[onclick], .fbtn,.btn-g,.btn-o, .pc-add,.pc-fav,.pc-detail-link, .cof-btn,.diy-btn, .qbtn,.ci-del, .nico,.nbtn, .hamburger, .mcls,.mcls *, .faq-q, .fmt-btn,.pd-fmt-btn, .track-btn,.nl-btn, .submit-btn, .cart-drw-close, .soc{cursor:pointer!important;} /* ─── SCROLL PROGRESS ─── */ #scroll-progress{ position:fixed;top:0;left:0;height:2px;width:0%; background:linear-gradient(90deg,var(--g),var(--rosed),var(--g)); z-index:var(--z-loader);pointer-events:none; transition:width .08s linear; will-change:width; } /* ─── CURSOR (éléments cachés) ─── */ #cur,#cur-r{display:none;} /* ─── BUBBLES BG ─── */ /* Confinée au hero (absolute dans .hero, plutôt que fixed sur tout le site, voir Partie 2/7) : un geste d'ambiance sur le premier écran, pas une animation permanente qui continue de tourner (et de coûter du travail de composition) sur toutes les pages, indéfiniment, même hors du champ de vision de la visiteuse. */ .bubbles{position:absolute;inset:0;pointer-events:none;z-index:var(--z-bg);overflow:hidden;} .bubble{position:absolute;border-radius:50%;animation:riseUp linear infinite;will-change:transform,opacity;} @keyframes riseUp{ 0%{transform:translateY(100vh) scale(0);opacity:0;} 10%{opacity:.7;} 90%{opacity:.3;} 100%{transform:translateY(-20vh) scale(1);opacity:0;} } /* ─── LOADER ─── */ #loader{ position:fixed;inset:0;background:var(--n1);z-index:var(--z-loader); display:flex;align-items:center;justify-content:center; flex-direction:column;gap:16px;transition:opacity .8s,visibility .8s; animation:autoHideLoader 0s 3.5s forwards; } @keyframes autoHideLoader{to{opacity:0;visibility:hidden;pointer-events:none;}} #loader.gone{opacity:0;visibility:hidden;pointer-events:none;} .loader-logo{ font-family:var(--ff);font-size:48px;font-weight:600; letter-spacing:.25em;color:var(--g);text-transform:uppercase; animation:pulse3 1.4s ease-in-out infinite; } .loader-ar{font-family:var(--fa);font-size:16px;color:var(--rosed);opacity:.6;margin-top:-8px;} .loader-bar{width:120px;height:2px;background:rgba(196,164,92,.15);position:relative;overflow:hidden;} .loader-bar-fill{height:100%;background:linear-gradient(90deg,var(--g),var(--rosed));animation:loadBar 1.8s var(--ease) forwards;} @keyframes pulse3{0%,100%{opacity:.6;}50%{opacity:1;}} @keyframes loadBar{from{width:0;}to{width:100%;}} /* ─── PETAL FIELD ─── */ /* Même logique que .bubbles ci-dessus : confinée au hero. */ .petal-field{position:absolute;inset:0;pointer-events:none;z-index:var(--z-petals);overflow:hidden;} .petal{position:absolute;opacity:0;animation:petalFall linear infinite;will-change:transform,opacity;} @keyframes petalFall{ 0%{opacity:0;transform:translateY(-10vh) rotate(0deg) translateX(0) scale(.8);} 8%{opacity:.65;} 40%{transform:translateY(40vh) rotate(140deg) translateX(28px) scale(1);} 80%{opacity:.3;transform:translateY(80vh) rotate(300deg) translateX(-22px) scale(.9);} 100%{opacity:0;transform:translateY(112vh) rotate(400deg) translateX(10px) scale(.7);} } /* ─── NAV ─── */ nav{ position:fixed;top:var(--top-bars-h);left:0;right:0;z-index:var(--z-nav);height:70px; display:flex;align-items:center;padding:0 6vw; justify-content:space-between; transition:background .5s,border-color .5s,box-shadow .5s,top .25s var(--ease); border-bottom:1px solid transparent; } nav.solid{ /* blur(10px) au lieu de 24px : ce nav fixe est flouté quasiment 100% du temps de scroll (dès 40px) — le coût de calcul d'un backdrop-filter croît fortement avec le rayon de flou, recalculé à chaque frame pendant tout le défilement. Rendu quasi identique à l'oeil sur une barre translucide de 70px de haut, coût de compositing nettement réduit. */ background:rgba(251,246,238,.94);-webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3); border-color:rgba(196,164,92,.14);box-shadow:0 4px 32px rgba(26,12,0,.05); } nav.solid .nlinks a{color:var(--txt);} nav.solid .nico{color:var(--txt);} nav.solid .nbtn{border-color:rgba(196,164,92,.5);color:var(--txt);} nav.solid .hamburger span{background:var(--txt);} .nlogo{display:flex;align-items:center;gap:10px;text-decoration:none;} .nlogo-img{height:64px;width:auto;display:block;object-fit:contain;} .nlogo-w{ font-family:var(--ff);font-size:22px;font-weight:600; letter-spacing:.28em;color:var(--g);text-transform:uppercase; transition:letter-spacing .3s; } .nlogo:hover .nlogo-w{letter-spacing:.35em;} .nlogo-a{font-family:var(--fa);font-size:13px;color:var(--rosed);opacity:.8;} .nlinks{display:flex;gap:24px;} .nlinks a{ font-family:var(--fb);font-size:11px;font-weight:400; letter-spacing:.2em;text-transform:uppercase;color:var(--c); opacity:.75;text-decoration:none; transition:opacity .25s,color .25s; position:relative; } .nlinks a::after{ content:'';position:absolute;bottom:-4px;left:0; width:0;height:1px;background:var(--g);transition:width .3s; } .nlinks a:hover,.nlinks a.active{opacity:1;color:var(--g);} .nlinks a:hover::after,.nlinks a.active::after{width:100%;} .nact{display:flex;gap:14px;align-items:center;} .nico{ position:relative;background:none;border:none;color:var(--c); font-size:17px;opacity:.75; transition:opacity .2s,color .2s,transform .2s; min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center;cursor:pointer; } .nico:hover{opacity:1;color:var(--g);transform:scale(1.15);} .nbadge{ position:absolute;top:-5px;right:-5px;width:16px;height:16px; background:var(--g);border-radius:50%;font-size:8px;font-weight:700; display:flex;align-items:center;justify-content:center; color:var(--n1);font-family:var(--fb); animation:badgePop .3s var(--ease2); } @keyframes badgePop{from{transform:scale(0);}to{transform:scale(1);}} @keyframes badgeBump{0%{transform:scale(1);}40%{transform:scale(1.6);}100%{transform:scale(1);}} .nbadge.bump{animation:badgeBump .4s var(--ease2);} .nbtn{ background:transparent;border:1px solid rgba(196,164,92,.4); color:var(--c);padding:8px 20px;font-family:var(--fb); font-size:10px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;transition:all .25s; } .nbtn:hover{background:var(--g);border-color:var(--g);color:var(--n1);} .hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;padding:12px;min-width:44px;min-height:44px;align-items:center;justify-content:center;} .hamburger span{ width:20px;height:1px;background:var(--c);display:block; transition:transform .35s var(--ease),opacity .25s; } .hamburger.open span:nth-child(1){transform:translateY(5px) rotate(45deg);} .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);} .hamburger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);} /* ─── MOBILE NAV OVERLAY ─── */ .mobile-nav{ position:fixed;inset:70px 0 0;background:rgba(10,5,0,.97); z-index:850;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:36px; transform:translateY(-100%); transition:transform .45s var(--ease); pointer-events:none; } .mobile-nav.open{transform:translateY(0);pointer-events:all;} .mobile-nav a{ font-family:var(--ff);font-size:clamp(22px,5vw,32px);font-weight:300; color:var(--c);text-decoration:none;letter-spacing:.08em; opacity:0;transform:translateY(16px); transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s; padding:8px 24px;min-height:44px;display:flex;align-items:center; } .mobile-nav.open a{opacity:.85;transform:translateY(0);} .mobile-nav a:hover{color:var(--g);opacity:1;} /* stagger mobile links */ .mobile-nav a:nth-child(1){transition-delay:.05s;} .mobile-nav a:nth-child(2){transition-delay:.1s;} .mobile-nav a:nth-child(3){transition-delay:.15s;} .mobile-nav a:nth-child(4){transition-delay:.2s;} .mobile-nav a:nth-child(5){transition-delay:.25s;} .mobile-nav a:nth-child(6){transition-delay:.3s;} /* ─── BUTTONS ─── */ .btn-g{ display:inline-flex;align-items:center;gap:10px; background:var(--g);color:var(--n1); padding:13px 30px;min-height:44px;font-family:var(--fb);font-size:10px;font-weight:600; letter-spacing:.22em;text-transform:uppercase;text-decoration:none; transition:background .3s,transform .3s var(--ease),box-shadow .3s; position:relative;overflow:hidden;border:none; } .btn-g::before{ content:'';position:absolute;top:50%;left:50%; width:0;height:0;background:rgba(255,255,255,.2);border-radius:50%; transform:translate(-50%,-50%);transition:width .5s,height .5s; } .btn-g:hover::before{width:300px;height:300px;} .btn-g:hover{background:var(--gl);transform:translateY(-2px);box-shadow:0 8px 24px rgba(196,164,92,.3);} .btn-o{ display:inline-flex;align-items:center;gap:10px; background:transparent;color:var(--c); padding:12px 28px;min-height:44px;font-family:var(--fb);font-size:10px;font-weight:400; letter-spacing:.22em;text-transform:uppercase;text-decoration:none; border:1px solid rgba(251,246,238,.22);transition:all .3s; } .btn-o:hover{border-color:var(--rose);color:var(--rose);} /* ─── HERO ─── */ .hero{ min-height:100vh; background:linear-gradient(160deg,#0A0500 0%,#160A02 55%,#0A0500 100%); display:flex;align-items:center;position:relative; overflow:hidden;padding-top:calc(70px + var(--top-bars-h)); } .hero-grain{ position:absolute;inset:0;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E"); background-size:200px; } .hero-glow{ position:absolute;width:700px;height:700px;border-radius:50%; background:radial-gradient(circle,rgba(196,164,92,.12) 0%,transparent 70%); top:44%;left:55%;transform:translate(-50%,-50%); pointer-events:none;animation:glowPulse 6s ease-in-out infinite; will-change:transform,opacity; } .hero-glow-rose{ position:absolute;width:450px;height:450px;border-radius:50%; background:radial-gradient(circle,rgba(222,184,179,.1) 0%,transparent 70%); bottom:4%;left:4%;pointer-events:none; animation:glowPulse 8s ease-in-out 2s infinite; will-change:transform,opacity; } @keyframes glowPulse{ 0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.1);} } .geo-l{display:none!important;} .hero-inner{ position:relative;z-index:3;display:grid; grid-template-columns:1fr 1fr;width:100%; min-height:calc(100vh - 70px); } .hero-left{ display:flex;flex-direction:column;justify-content:center; padding:80px 5vw 80px 6vw; } .hero-right{position:relative;overflow:hidden;} .htag{ display:flex;align-items:center;gap:10px;margin-bottom:28px; opacity:0;animation:fadeUp .9s var(--ease) .3s forwards; } .htag-line{width:28px;height:1px;background:linear-gradient(90deg,var(--g),var(--rosed));} .htag-t{font-family:var(--fb);font-size:10px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--g);} .hero-h1{ font-family:var(--ff);font-size:clamp(44px,5vw,76px);font-weight:300; line-height:1;color:var(--c);letter-spacing:-.01em;margin-bottom:8px; opacity:0;animation:fadeUp .9s var(--ease) .45s forwards; text-shadow:0 2px 40px rgba(10,5,0,.6); } .hero-h1 span{display:block;} .rosee{font-style:italic;color:var(--rosed);} /* .rosee est réutilisé dans toutes les sections (hero, problèmes, boutique, coffrets, rituel, ingrédients, livraison, avis, contact — toutes à fond sombre, 6.06:1, inchangées) ; seules .story-sec et .faq-sec ont un fond clair (var(--c)), exactement les mêmes sections que .sec-tag-t. .ritual-sec est passée à fond sombre (voir Partie 3 — double diagonale avec .ingr-sec) : retirée de ce groupe, --rosed standard suffit. */ .story-sec .rosee,.faq-sec .rosee{color:var(--rosed-oncream);} .golds{font-style:italic;color:var(--g);} .hero-ar{ font-family:var(--fa);font-size:clamp(15px,1.8vw,20px); color:var(--rosed);opacity:0;margin-bottom:28px; direction:rtl;text-align:left; animation:fadeUp .9s var(--ease) .6s forwards; } .hero-p{ font-family:var(--ff);font-size:clamp(16px,1.3vw,19px);font-weight:300; font-style:italic;line-height:1.75;color:var(--c); opacity:0;animation:fadeUp .9s var(--ease) .75s forwards; max-width:450px;margin-bottom:38px; } .hero-p strong{font-style:normal;font-weight:500;color:var(--g);} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp .9s var(--ease) .9s forwards;} .hero-trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;opacity:0;animation:fadeUp .9s var(--ease) 1s forwards;} .htrust{display:flex;align-items:center;font-family:var(--fb);font-size:11.5px;font-weight:300;letter-spacing:.04em;color:var(--c);opacity:.84;} .htrust::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--g);opacity:.7;margin-right:8px;flex-shrink:0;} .hero-stats{display:flex;gap:28px;margin-top:36px;opacity:0;animation:fadeUp .9s var(--ease) 1.05s forwards;} @media(max-width:640px){.hero-trust{gap:7px 14px;margin-top:18px;}.htrust{font-size:10.5px;}} .hstat-n{ font-family:var(--ff);font-size:28px;font-weight:300;color:var(--g);line-height:1; text-shadow:0 0 28px rgba(196,164,92,.4),0 0 60px rgba(196,164,92,.15); } .hstat-l{font-family:var(--fb);font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--c);opacity:.45;margin-top:3px;} .hero-visual{position:absolute;inset:0;} .hero-bg-panel{position:absolute;inset:0;background:linear-gradient(145deg,#150900,#1f0d02 55%,#0a0500);} .hero-big-n{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); font-family:var(--ff);font-size:clamp(200px,22vw,320px); font-weight:600;color:rgba(196,164,92,.04); line-height:1;pointer-events:none;user-select:none; will-change:transform; } .hlm{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); text-align:center;z-index:2;pointer-events:none; animation:logoSpin 20s linear infinite; will-change:transform; } @keyframes logoSpin{ from{transform:translate(-50%,-50%) rotate(0deg);} to{transform:translate(-50%,-50%) rotate(360deg);} } .hlm-inner{animation:logoSpin 20s linear infinite reverse;} .hlm-lbl{ font-family:var(--ff);font-size:15px;font-weight:600; letter-spacing:.3em;color:rgba(196,164,92,.6);text-transform:uppercase; margin-top:10px;animation:logoSpin 20s linear infinite; } .hlm-ar{ font-family:var(--fa);font-size:12px;color:rgba(222,184,179,.5); margin-top:3px;animation:logoSpin 20s linear infinite; } /* ─── FLOATING CARDS ─── */ .fcard{ position:absolute; background:rgba(18,7,0,.86);border:1px solid rgba(196,164,92,.22); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:14px 18px;width:174px; opacity:0; transition:box-shadow .35s var(--ease); will-change:transform,opacity; } .fcard:hover{box-shadow:0 16px 42px rgba(0,0,0,.35)!important;} .fcard.f1{top:13%;left:5%;animation:floatIn .8s var(--ease) 1.2s forwards,bob 5s ease-in-out 2s infinite;} .fcard.f2{top:17%;right:4%;animation:floatIn .8s var(--ease) 1.4s forwards,bob2 6.5s ease-in-out 2.4s infinite;} .fcard.f3{bottom:20%;left:7%;animation:floatIn .8s var(--ease) 1.6s forwards,bob3 7.2s ease-in-out 2.8s infinite;} .fcard.f4{bottom:24%;right:5%;animation:floatIn .8s var(--ease) 1.8s forwards,bob 5.8s ease-in-out 3.2s infinite;} @keyframes floatIn{to{opacity:1;}} @keyframes bob{ 0%,100%{transform:translateY(0) rotate(-.4deg);} 33%{transform:translateY(-5px) rotate(.3deg);} 66%{transform:translateY(-9px) rotate(-.2deg);} } @keyframes bob2{ 0%,100%{transform:translateY(0) rotate(.4deg);} 40%{transform:translateY(-8px) rotate(-.4deg);} 70%{transform:translateY(-4px) rotate(.2deg);} } @keyframes bob3{ 0%,100%{transform:translateY(0) rotate(-.3deg);} 50%{transform:translateY(-10px) rotate(.3deg);} } .fcard-top{display:flex;align-items:center;gap:10px;margin-bottom:9px;} .fcard-svg{width:38px;height:38px;flex-shrink:0;} .fcard-name{font-family:var(--ff);font-size:13px;font-weight:500;color:var(--c);line-height:1.2;} .fcard-sub{font-family:var(--fb);font-size:9px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--g);opacity:.7;margin-top:2px;} .fcard-bar{height:2px;background:rgba(196,164,92,.12);margin-bottom:6px;overflow:hidden;} .fcard-bar-fill{ height:100%;background:linear-gradient(90deg,var(--g),var(--rosed)); width:var(--w,70%);animation:barGrow 1.5s var(--ease) 2s both; } @keyframes barGrow{from{width:0;}to{width:var(--w,70%);}} .fcard-origin{font-family:var(--fb);font-size:9px;color:var(--c);opacity:.55;letter-spacing:.1em;text-transform:uppercase;} /* ─── HERO SHOWCASE ─── */ .hero-showcase{position:relative;width:100%;height:100%;overflow:hidden;background:#080400;} .hs-slides{position:absolute;inset:0;} .hs-slide{ position:absolute;inset:0;opacity:0; transition:opacity .9s cubic-bezier(.4,0,.2,1); } .hs-slide.hs-active{opacity:1;} .hs-slide img{ width:100%;height:100%;object-fit:cover; transform:scale(1.06); transition:transform 3.8s cubic-bezier(.4,0,.2,1); will-change:transform; } .hs-slide.hs-active img{transform:scale(1);} .hs-overlay{ position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient( to bottom, rgba(8,4,0,.05) 0%, rgba(8,4,0,.15) 35%, rgba(8,4,0,.82) 72%, rgba(8,4,0,.97) 100% ); } .hs-overlay::before{ content:'';position:absolute;inset:0; background:linear-gradient(to right,rgba(8,4,0,.65) 0%,transparent 55%); } .hs-content{ position:absolute;bottom:0;left:0;right:0; padding:26px 30px 56px;z-index:2; } .hs-badge{ display:inline-block; font-family:var(--fb);font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--g);border:1px solid rgba(196,164,92,.38);padding:3px 10px;border-radius:2px; margin-bottom:11px; opacity:0;transform:translateY(10px); transition:opacity .45s .12s,transform .45s .12s; } .hs-name{ font-family:var(--ff);font-size:clamp(1.25rem,2.6vw,1.85rem);font-weight:400; color:var(--c);line-height:1.2;margin-bottom:7px; opacity:0;transform:translateY(13px); transition:opacity .45s .2s,transform .45s .2s; } .hs-desc{ font-family:var(--fb);font-size:11.5px;color:rgba(245,235,218,.45);line-height:1.6; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; margin-bottom:18px; opacity:0;transform:translateY(13px); transition:opacity .45s .28s,transform .45s .28s; } .hs-row{ display:flex;align-items:center;gap:14px; opacity:0;transform:translateY(13px); transition:opacity .45s .36s,transform .45s .36s; } .hs-price{ font-family:var(--ff);font-size:1.1rem;color:var(--g);font-weight:500;letter-spacing:.02em; } .hs-add{ font-family:var(--fb);font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase; color:var(--c);background:rgba(196,164,92,.16);border:1px solid rgba(196,164,92,.38); padding:8px 20px;border-radius:2px; transition:background .25s,border-color .25s,transform .2s; } .hs-add:hover{background:rgba(196,164,92,.3);border-color:rgba(196,164,92,.65);transform:translateY(-1px);} .hs-content.hs-in .hs-badge, .hs-content.hs-in .hs-name, .hs-content.hs-in .hs-desc, .hs-content.hs-in .hs-row{opacity:1;transform:translateY(0);} .hs-dots{ position:absolute;right:22px;top:50%;transform:translateY(-50%); display:flex;flex-direction:column;gap:7px;z-index:3; } .hs-dot{ width:4px;height:4px;border-radius:50%; background:rgba(196,164,92,.28); transition:background .3s,transform .3s,height .3s; } .hs-dot.hs-dot-active{ background:var(--g);transform:scaleY(1.0); width:4px;height:20px;border-radius:2px; } .hs-timer{ position:absolute;bottom:0;left:0;right:0; height:2px;background:rgba(196,164,92,.1);z-index:3; } .hs-timer-fill{ height:100%;width:0%; background:linear-gradient(90deg,var(--g),var(--rosed)); } .hs-timer-fill.hs-run{ transition:width 3s linear;width:100%; } .hero-scroll{ position:absolute;bottom:28px;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:6px; opacity:0;animation:fadeUp .9s var(--ease) 1.6s forwards;z-index:3; } .hero-scroll-bar{ width:1px;height:44px; background:linear-gradient(to bottom,var(--c),transparent); animation:scrollAnim 2.2s ease-in-out infinite; } @keyframes scrollAnim{ 0%{transform:scaleY(.4);transform-origin:top;opacity:.3;} 50%{transform:scaleY(1);opacity:1;} 100%{transform:scaleY(.4);opacity:.3;} } .hero-scroll-lbl{font-family:var(--fb);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--c);opacity:.35;} @keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}} /* ─── BAND ─── */ .band{ background:#080400; border-top:1px solid rgba(196,164,92,.12); border-bottom:1px solid rgba(196,164,92,.12); padding:14px 0;overflow:hidden;position:relative;z-index:var(--z-sections); } .band-track{ display:flex;animation:scroll-l 28s linear infinite; white-space:nowrap;will-change:transform; } .band:hover .band-track{animation-play-state:paused;} .band-item{ display:inline-flex;align-items:center;gap:20px;padding:0 32px; font-family:var(--fb);font-size:10px;font-weight:500; letter-spacing:.3em;text-transform:uppercase; color:var(--g); opacity:.75; transition:opacity .3s; } .band:hover .band-item{opacity:1;} .band-dot{width:3px;height:3px;border-radius:50%;background:var(--g);opacity:.35;} @keyframes scroll-l{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* ─── SECTIONS ─── */ .sec{padding:110px 6vw;position:relative;z-index:var(--z-sections);} .sec-tag{display:flex;align-items:center;gap:10px;margin-bottom:18px;} .sec-tag-l{width:22px;height:1px;background:var(--g);} .sec-tag-t{font-family:var(--fb);font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--g);} /* .sec-tag-t est réutilisé dans toutes les sections (la plupart sur fond sombre, où --g est très lisible, 8.52:1 — ne pas y toucher) ; seules .story-sec et .faq-sec ont un fond clair (var(--c)). */ .story-sec .sec-tag-t,.faq-sec .sec-tag-t{color:var(--g-oncream);} .sec-h{font-family:var(--ff);font-size:clamp(34px,4.2vw,58px);font-weight:300;line-height:1.08;letter-spacing:-.005em;} /* glow sur les titres dans les sections sombres */ .prod-sec .sec-h,.cof-sec .sec-h,.diy-sec .sec-h, .prob-sec .sec-h,.del-sec .sec-h,.contact-sec .sec-h, .ingr-sec .sec-h,.test-sec .sec-h,.ritual-sec .sec-h,.sec-h.light{ text-shadow:0 2px 48px rgba(10,5,0,.55); } .sec-h.light{color:var(--c);} .sec-p{font-family:var(--ff);font-size:clamp(16px,1.25vw,18px);font-weight:300;font-style:italic;line-height:1.8;opacity:.86;max-width:540px;margin-top:18px;} .sec-p.light{color:var(--c);} .flower-div{display:flex;align-items:center;justify-content:center;gap:18px;padding:8px 0;} .fdl{height:1px;width:60px;background:linear-gradient(90deg,transparent,var(--rosed));} .fdl.r{background:linear-gradient(90deg,var(--rosed),transparent);} /* ─── STORY ─── */ .story-sec{ background:linear-gradient(180deg,var(--c),var(--rose3) 130%); display:grid;grid-template-columns:1fr 1fr; position:relative;z-index:var(--z-sections); } /* diagonal top: dark band → light story */ .story-sec::before{ content:'';position:absolute;top:0;left:0;right:0; height:72px;background:#080400; clip-path:polygon(0 0,100% 0,0 100%); z-index:3;pointer-events:none; } .story-left{padding:110px 6vw;display:flex;flex-direction:column;justify-content:center;} .story-right{background:#0A0400;position:relative;overflow:hidden;min-height:600px;} .story-img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:1;transition:opacity .6s var(--ease);} .story-img:hover{opacity:1;} .story-img-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,4,0,.7) 0%,rgba(10,4,0,.1) 50%,transparent 100%);pointer-events:none;} /* Bandeau "merchandising vivant" (section La marque) : remplace l'ancien .story-stat-row (chiffres dupliqués du hero) puis les fragments éditoriaux statiques (jugés insatisfaisants) — 3 cartes reconstruites à chaque chargement depuis PRODUCTS/_stockCache/_reviewStats réels, voir renderMerchStrip() dans main.js. Jamais de texte figé à cet endroit. */ .story-pillars{display:flex;flex-wrap:wrap;row-gap:24px;gap:0;margin-top:48px;border-top:1px solid rgba(196,164,92,.2);padding-top:36px;min-height:1px;} .story-pillar{flex:1;min-width:180px;padding-right:28px;} .story-pillar+.story-pillar{padding-left:28px;border-left:1px solid rgba(196,164,92,.13);} .merch-card{cursor:pointer;transition:opacity .2s;} .merch-card:hover{opacity:.75;} .merch-tag{font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g-oncream);margin-bottom:8px;} .merch-name{font-family:var(--ff);font-size:16px;font-style:italic;font-weight:400;line-height:1.4;color:var(--txt);opacity:.9;} @media(max-width:640px){ .story-pillars{flex-direction:column;} .story-pillar+.story-pillar{padding-left:0;border-left:none;border-top:1px solid rgba(196,164,92,.13);padding-top:20px;} } .story-quote{ font-family:var(--ff);font-size:clamp(17px,1.6vw,21px);font-style:italic; font-weight:300;line-height:1.65;color:var(--txt);opacity:.82; border-left:2px solid var(--rosed);padding-left:20px;margin-top:32px; } /* ─── PROBLEMS ─── */ .prob-sec{background:var(--n1);padding:110px 6vw;position:relative;z-index:var(--z-sections);overflow:hidden;} /* diagonal top: light story → dark prob */ .prob-sec::before{ content:'';position:absolute;top:0;left:0;right:0; height:72px;background:#F5E4E1; clip-path:polygon(100% 0,100% 100%,0 0); z-index:3;pointer-events:none; } .prob-intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:72px;} .prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(196,164,92,.08);} .pcard{ background:var(--n2);padding:38px 30px 32px;position:relative;overflow:hidden; transition:background .3s,transform .5s var(--ease),box-shadow .5s; cursor:pointer; } .pcard:active{transform:translateY(-2px) scale(.99);} .pcard::before{ content:'';position:absolute;bottom:0;left:0;width:100%;height:2px; background:linear-gradient(90deg,var(--g),var(--rosed)); transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease); } .pcard:hover{background:var(--n3);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.25);} .pcard:hover::before{transform:scaleX(1);} .pcard:hover .pcard-arrow{transform:translateX(6px);} .pcard-num{font-family:var(--ff);font-size:11px;letter-spacing:.2em;color:var(--g);opacity:.35;margin-bottom:20px;} .pcard-ico{margin-bottom:16px;} .pcard-h{font-family:var(--ff);font-size:20px;font-weight:500;color:var(--c);margin-bottom:10px;line-height:1.25;} .pcard-p{font-family:var(--fb);font-size:13px;font-weight:300;line-height:1.7;color:var(--c);opacity:.88;margin-bottom:20px;} .pcard-sol{font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--g);display:flex;align-items:center;gap:8px;} .pcard-arrow{display:inline-block;transition:transform .3s var(--ease);} /* ─── PRODUCTS ─── */ .prod-sec{ background:linear-gradient(180deg,#0C0600 0%,#150900 50%,#0C0600 100%); } .prod-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;flex-wrap:wrap;gap:20px;} .prod-sec .sec-h{color:var(--c);} .prod-sec .sec-p{color:var(--c);} .prod-head-tools{display:flex;gap:14px;flex-wrap:wrap;align-items:center;} .filters{display:flex;gap:6px;flex-wrap:wrap;} .sort-sel{ background:#150900;border:1px solid rgba(196,164,92,.2); padding:7px 14px;font-family:var(--fb);font-size:10px; font-weight:500;letter-spacing:.1em;text-transform:uppercase; color:rgba(251,246,238,.75);cursor:pointer;transition:border-color .25s; } .sort-sel:hover,.sort-sel:focus{border-color:var(--g);outline:none;} .fbtn{ background:none;border:1px solid rgba(196,164,92,.2); padding:7px 16px;font-family:var(--fb);font-size:10px; font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:rgba(251,246,238,.55);transition:all .25s;position:relative;overflow:hidden; } .fbtn::before{ content:'';position:absolute;inset:0;background:var(--g); transform:scaleX(0);transform-origin:left;transition:transform .25s;z-index:-1; } .fbtn.on,.fbtn:hover{color:var(--n1);} .fbtn.on::before,.fbtn:hover::before{transform:scaleX(1);} .fbtn.on{border-color:var(--g);} .fbtn:hover{border-color:var(--g);} .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px;} .pc{ background:#130800;position:relative;overflow:hidden; display:flex;flex-direction:column; border:1px solid rgba(196,164,92,.06); transition:box-shadow .4s var(--ease),border-color .4s; transform-style:preserve-3d; } .pc:hover{ border-color:rgba(196,164,92,.18); box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(196,164,92,.1); } .pc:hover .pc-img-inner{transform:scale(1.06);} .pc:hover .pc-img-overlay{background:linear-gradient(to top,rgba(10,5,0,.95) 0%,rgba(10,5,0,.35) 45%,rgba(196,164,92,.04) 100%);} .pc-img{aspect-ratio:3/4;background:var(--c);overflow:hidden;position:relative;} .pc-img-inner{ position:absolute;inset:0; transition:transform .7s var(--ease); will-change:transform; } .pc-img-inner img{width:100%;height:100%;object-fit:contain;opacity:1;} .pc-img-overlay{ position:absolute;inset:0; background:transparent; transition:background .6s var(--ease); pointer-events:none; } .pc-badge{ position:absolute;top:14px;left:14px;background:var(--g);color:var(--n1); font-family:var(--fb);font-size:8px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;padding:5px 11px;z-index:3;border-radius:1px; } .pc-badge.rose{background:var(--rosed);color:#fff;} .pc-badge.stock-low{background:#d4721a;color:#fff;} .pc-fav{ position:absolute;top:14px;right:14px; background:rgba(10,5,0,.6);border:1px solid rgba(196,164,92,.22); color:rgba(222,184,179,.7);width:34px;height:34px; display:flex;align-items:center;justify-content:center; font-size:14px;z-index:3; transition:all .25s var(--ease2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .pc-fav:hover,.pc-fav.on{background:var(--rosed);color:#fff;border-color:var(--rosed);} .pc-hover{ position:absolute;bottom:0;left:0;right:0; background:rgba(8,4,0,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); padding:15px;display:flex;gap:8px; opacity:0;transform:translateY(100%); transition:opacity .35s var(--ease),transform .35s var(--ease); z-index:4;border-top:1px solid rgba(196,164,92,.14); } .pc:hover .pc-hover{opacity:1;transform:translateY(0);} .pc-body{padding:20px 24px 24px;flex:1;display:flex;flex-direction:column;} .pc-cat{font-family:var(--fb);font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--rosed);margin-bottom:6px;} .pc-name{font-family:var(--ff);font-size:22px;font-weight:500;color:var(--c);line-height:1.2;margin-bottom:4px;} .pc-ar{font-family:var(--fa);font-size:12px;color:var(--g);opacity:.65;margin-bottom:6px;} .pc-sub{font-size:9.5px;color:rgba(196,164,92,.6);letter-spacing:.1em;text-transform:uppercase;margin-top:2px;margin-bottom:4px;font-family:var(--fb);} .pc-rating{display:flex;align-items:center;gap:5px;min-height:16px;margin-bottom:8px;} .pc-rating-stars{color:var(--g);font-size:11px;letter-spacing:1px;} .pc-rating-score{font-size:11px;font-weight:700;color:var(--g);} .pc-rating-count{font-size:10px;opacity:.5;color:var(--c);} .pc-formats{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;} .fmt-btn{ background:none;border:1px solid rgba(196,164,92,.18); padding:5px 12px;font-family:var(--fb);font-size:10px;font-weight:500; color:rgba(251,246,238,.55);letter-spacing:.06em;transition:all .2s; } .fmt-btn.sel{background:var(--g);border-color:var(--g);color:var(--n1);} .fmt-btn:hover:not(.sel){border-color:var(--g);color:var(--c);} .fmt-qty{font-family:var(--fb);font-size:9px;color:var(--c);opacity:.35;margin-bottom:12px;display:flex;align-items:center;gap:5px;} .fmt-qty-icon{font-size:11px;} .pc-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px;} .pc-tag{ background:rgba(190,123,116,.1);border:1px solid rgba(190,123,116,.22); padding:3px 8px;font-family:var(--fb);font-size:9px;font-weight:500; letter-spacing:.08em;text-transform:uppercase;color:var(--rosed); } .pc-desc{font-family:var(--ff);font-size:14px;font-weight:300;font-style:italic;line-height:1.6;color:var(--c);opacity:.86;margin-bottom:auto;padding-bottom:12px;} .pc-detail-link{ font-family:var(--fb);font-size:9px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--g); background:none;border:none;padding:0;margin-bottom:13px; text-align:left;display:flex;align-items:center;gap:6px; transition:gap .25s var(--ease); } .pc-detail-link:hover{gap:11px;} .pc-foot{ display:flex;justify-content:space-between;align-items:center; padding-top:13px;border-top:1px solid rgba(196,164,92,.1); } .pc-price{font-family:var(--ff);font-size:24px;font-weight:400;color:var(--c);} .pc-price small{font-family:var(--fb);font-size:11px;font-weight:500;color:var(--g);margin-left:3px;} .pc-add{ background:rgba(196,164,92,.1);color:var(--g); border:1px solid rgba(196,164,92,.25); width:42px;height:42px;font-size:20px; display:flex;align-items:center;justify-content:center; transition:background .25s,border-color .25s,transform .35s var(--ease2);flex-shrink:0; } .pc-add:hover{background:var(--g);color:var(--n1);border-color:var(--g);transform:rotate(90deg);} /* ─── COFFRETS ─── */ .cof-sec{ background:linear-gradient(180deg,#0E0700 0%,#160900 50%,#0E0700 100%); position:relative;z-index:var(--z-sections); } .cof-sec .sec-h{color:var(--c);} .cof-sec .sec-p{color:var(--c);} /* diagonal: prod-sec(dark) → cof-sec(dark) — même ton, divider subtil */ .cof-sec::before{ content:'';position:absolute;top:0;left:0;right:0; height:1px;background:linear-gradient(90deg,transparent,rgba(196,164,92,.2),transparent); z-index:3;pointer-events:none; } .cof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1px;margin-top:44px;} .cof-grid .cof-card:nth-child(1){transition-delay:.05s;} .cof-grid .cof-card:nth-child(2){transition-delay:.12s;} .cof-grid .cof-card:nth-child(3){transition-delay:.19s;} .cof-grid .cof-card:nth-child(4){transition-delay:.26s;} .cof-card{ background:#150900; border:1px solid rgba(196,164,92,.07); position:relative;overflow:hidden; display:flex;flex-direction:column; transition:box-shadow .4s var(--ease),border-color .4s; } .cof-card:hover{ border-color:rgba(196,164,92,.2); box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(196,164,92,.08); } .cof-card:hover .cof-img{transform:scale(1.06);opacity:.9;} .cof-visual{height:220px;background:var(--n2);position:relative;overflow:hidden;cursor:pointer;} /* object-fit:contain (pas cover) : une photo de coffret rognée en vitrine donnait l'impression que le produit était incomplet/mal cadré — la photo entière reste visible, quitte à laisser un léger bandeau sombre autour (cohérent avec le fond déjà sombre de la carte). */ .cof-img{width:100%;height:100%;object-fit:contain;opacity:.78;transition:transform .7s var(--ease),opacity .5s;will-change:transform;} /* Coffrets avec 2 vraies photos (boîte + produits) : côte à côte, toujours visibles toutes les deux (pas de survol requis — invisible au tactile) */ .cof-img-split{position:absolute;inset:0;display:flex;} .cof-img-half{flex:1 1 50%;width:50%;height:100%;object-fit:contain;opacity:.96;transition:transform .7s var(--ease);} .cof-img-half:first-child{border-right:1px solid rgba(196,164,92,.3);} .cof-card:hover .cof-img-half{transform:scale(1.04);} .cof-img-ov{ position:absolute;inset:0; background:linear-gradient(to top,rgba(10,5,0,.92) 0%,rgba(10,5,0,.25) 50%,transparent 100%); pointer-events:none; } .cof-ribbon{ position:absolute;top:14px;left:14px; background:linear-gradient(90deg,var(--rosed),var(--terra)); color:#fff;font-family:var(--fb);font-size:8px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;z-index:2; } /* Bandeau promotionnel libre (ex. "Édition limitée"), distinct du badge "Économie X%" ci-dessus — positionné à droite pour ne jamais se superposer, affiché uniquement si le coffret en définit un. */ .cof-promo-tag{ position:absolute;top:14px;right:14px; background:var(--n1);border:1px solid var(--g); color:var(--g);font-family:var(--fb);font-size:8px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;padding:5px 12px;z-index:2; } .cof-body{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column;} .cof-need{font-family:var(--fb);font-size:9px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--rosed);margin-bottom:8px;} .cof-name{font-family:var(--ff);font-size:24px;font-weight:500;color:var(--c);line-height:1.15;margin-bottom:5px;} .cof-ar{font-family:var(--fa);font-size:12px;color:var(--g);opacity:.65;margin-bottom:12px;} .cof-desc{font-family:var(--ff);font-size:14px;font-weight:300;font-style:italic;line-height:1.65;color:var(--c);opacity:.86;margin-bottom:14px;} .cof-incl{list-style:none;margin-bottom:14px;} .cof-incl li{ font-family:var(--fb);font-size:12px;font-weight:300;color:var(--c); opacity:.65;padding:6px 0;display:flex;align-items:flex-start;gap:8px; border-bottom:1px solid rgba(196,164,92,.07); } .cof-incl li:last-child{border-bottom:none;} .cof-incl-ico{color:var(--g);opacity:.7;flex-shrink:0;} .cof-foot{ display:flex;justify-content:space-between;align-items:flex-end; padding-top:14px;border-top:1px solid rgba(196,164,92,.1); } .cof-save{font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--g);opacity:.55;margin-bottom:2px;} .cof-old{font-family:var(--fb);font-size:12px;color:var(--c);opacity:.4;text-decoration:line-through;margin-bottom:2px;} .cof-price{font-family:var(--ff);font-size:28px;font-weight:400;color:var(--c);} .cof-price small{font-family:var(--fb);font-size:12px;font-weight:500;color:var(--g);} .cof-btn{ background:rgba(196,164,92,.12);color:var(--g); border:1px solid rgba(196,164,92,.28); padding:12px 20px;font-family:var(--fb);font-size:9px; font-weight:600;letter-spacing:.18em;text-transform:uppercase; transition:background .25s,border-color .25s,transform .25s var(--ease);white-space:nowrap; } .cof-btn:hover{background:var(--g);color:var(--n1);border-color:var(--g);transform:translateY(-1px);} /* hover coffret : révélation des inclus depuis le bas */ .cof-hover-panel{ position:absolute;bottom:0;left:0;right:0; background:rgba(8,4,0,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-top:1px solid rgba(196,164,92,.18); padding:18px 20px; opacity:0;transform:translateY(100%); transition:opacity .38s var(--ease),transform .38s var(--ease); z-index:5; } .cof-card:hover .cof-hover-panel{opacity:1;transform:translateY(0);} .cof-hover-title{ font-family:var(--fb);font-size:9px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--g);opacity:.65;margin-bottom:10px; } .cof-hover-items{display:flex;flex-direction:column;gap:5px;} .cof-hover-item{ font-family:var(--fb);font-size:11px;color:var(--c);opacity:.6; display:flex;align-items:center;gap:7px; } .cof-hover-item::before{content:'✦';color:var(--g);opacity:.5;font-size:7px;} /* ─── DIY ─── */ .diy-sec{background:var(--n1);padding:110px 6vw;position:relative;z-index:var(--z-sections);} .diy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:48px;} .diy-card{ background:var(--n2);padding:34px 28px; transition:background .3s,border-top-color .3s,transform .4s var(--ease); border-top:2px solid transparent;position:relative;overflow:hidden; } .diy-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(222,184,179,.04),transparent);pointer-events:none;} .diy-card:hover{background:var(--n3);border-top-color:var(--rosed);transform:translateY(-3px);} .diy-num{font-family:var(--ff);font-size:13px;color:var(--rosed);letter-spacing:.2em;margin-bottom:16px;} .diy-name{font-family:var(--ff);font-size:22px;font-weight:500;color:var(--c);margin-bottom:5px;} .diy-goal{font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin-bottom:16px;} .diy-img{width:100%;height:160px;object-fit:cover;opacity:.6;margin-bottom:18px;border:1px solid rgba(196,164,92,.15);} .diy-recipe-t{font-family:var(--fb);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rosed);opacity:.8;margin-bottom:10px;} .diy-ing{display:flex;align-items:baseline;gap:10px;font-family:var(--fb);font-size:12px;font-weight:300;color:var(--c);opacity:.85;padding:5px 0;border-bottom:1px solid rgba(196,164,92,.06);} .diy-ing-dose{color:var(--g);font-weight:500;min-width:40px;} .diy-method{font-family:var(--ff);font-size:13.5px;font-weight:300;font-style:italic;line-height:1.7;color:var(--c);opacity:.8;border-left:1px solid rgba(222,184,179,.28);padding-left:14px;margin-top:16px;} .diy-acc{margin-top:18px;background:rgba(222,184,179,.07);border:1px solid rgba(222,184,179,.18);padding:14px;} .diy-acc-t{font-family:var(--fb);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rosed);margin-bottom:10px;} .diy-acc-opt{display:flex;align-items:center;gap:8px;padding:5px 0;} .diy-acc-opt input[type=checkbox]{accent-color:var(--rosed);width:13px;height:13px;} .diy-acc-opt label{font-family:var(--fb);font-size:11px;font-weight:300;color:var(--c);opacity:.88;flex:1;} .diy-acc-opt span{font-family:var(--ff);font-size:13px;color:var(--rosed);} .diy-btn{ display:inline-flex;align-items:center;gap:8px;margin-top:16px; background:rgba(196,164,92,.12);border:1px solid rgba(196,164,92,.28); padding:9px 16px;font-family:var(--fb);font-size:9px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--g); transition:background .2s,transform .2s var(--ease); } .diy-btn:hover{background:var(--g);color:var(--n1);} /* ─── RITUAL ─── */ /* Fond sombre (au lieu d'un fond clair auparavant) : Partie 3 — corrige le double zigzag diagonal. .ritual-sec est une section courte (intro + 4 étapes compactes, ~900-1000px) coincée entre .cof-sec et .ingr-sec, toutes deux déjà sombres — l'ancienne version, seule section claire de ce groupe, imposait DEUX découpes diagonales à quelques centaines de pixels d'intervalle (une en entrée, une en sortie) pour un si petit espace de contenu, créant l'effet de zigzag rapproché. En alignant sa teinte sur ses deux voisines, plus aucune diagonale n'est nécessaire ici : la zone cof→ritual→ingr redevient un seul passage sombre continu, cohérent avec le principe "une seule transition par changement réel de section". .rosee/.sec-tag-t retrouvent leurs couleurs standard (dark-bg, non assombries) puisque ce n'est plus un fond clair. */ .ritual-sec{ background:linear-gradient(180deg,#0E0700 0%,#160900 50%,#0E0700 100%); padding:110px 6vw;position:relative;z-index:var(--z-sections); } .ritual-sec .sec-h{color:var(--c);} .ritual-sec .sec-p{color:var(--c);} /* Divider subtil au lieu d'une diagonale — cof-sec(dark) → ritual-sec(dark), même ton */ .ritual-sec::before{ content:'';position:absolute;top:0;left:0;right:0; height:1px;background:linear-gradient(90deg,transparent,rgba(196,164,92,.2),transparent); z-index:3;pointer-events:none; } .rsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:72px;position:relative;} .rsteps::before{content:'';position:absolute;top:30px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(190,123,116,.4) 20%,rgba(196,164,92,.5) 80%,transparent);opacity:.6;} .rstep{padding:0 20px;text-align:center;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease);} .rstep.vis{opacity:1;transform:translateY(0);} .rstep:nth-child(1){transition-delay:.0s;} .rstep:nth-child(2){transition-delay:.12s;} .rstep:nth-child(3){transition-delay:.24s;} .rstep:nth-child(4){transition-delay:.36s;} .rstep-circle{ width:60px;height:60px;border-radius:50%; background:var(--n1); border:1px solid rgba(196,164,92,.28); box-shadow:0 0 0 6px rgba(196,164,92,.04); display:flex;align-items:center;justify-content:center; margin:0 auto 22px;position:relative;z-index:1; transition:all .45s var(--ease2); } .rstep:hover .rstep-circle{ background:rgba(196,164,92,.12); border-color:var(--g); transform:translateY(-6px) scale(1.12); box-shadow:0 12px 32px rgba(196,164,92,.18),0 0 0 8px rgba(196,164,92,.06); } .rstep-num{font-family:var(--ff);font-size:17px;font-weight:500;color:var(--g);} .rstep-h{font-family:var(--ff);font-size:19px;font-weight:500;color:var(--c);margin-bottom:10px;} .rstep-p{font-family:var(--fb);font-size:13px;font-weight:300;line-height:1.65;color:var(--c);opacity:.85;} .rstep-prod{margin-top:14px;display:inline-block;font-family:var(--fb);font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);background:rgba(222,184,179,.2);border:1px solid rgba(190,123,116,.3);padding:4px 10px;} /* ─── INGREDIENTS ─── */ .ingr-sec{ background:linear-gradient(180deg,#0C0600,#140800 60%,#0C0600); padding:110px 6vw;position:relative;z-index:var(--z-sections); } /* Plus de diagonale ici (ritual-sec est désormais sombre elle aussi, voir Partie 3) — divider subtil au lieu d'une découpe, même ton */ .ingr-sec::before{ content:'';position:absolute;top:0;left:0;right:0; height:1px;background:linear-gradient(90deg,transparent,rgba(196,164,92,.2),transparent); z-index:3;pointer-events:none; } .ingr-sec .sec-h{color:var(--c);} .ingr-sec .sec-p{color:var(--c);} .ingr-sec .sec-tag-t{color:var(--g);} .ingr-sticky .sec-h{color:var(--c);} .ingr-layout{display:grid;grid-template-columns:2fr 3fr;gap:80px;align-items:start;} .ingr-sticky{position:sticky;top:100px;} .ingr-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;} .icard{ background:var(--n1);overflow:hidden;position:relative; transition:transform .4s var(--ease),box-shadow .4s; } .icard:hover{transform:scale(1.025);box-shadow:0 20px 48px rgba(0,0,0,.3);} .icard-img{width:100%;height:120px;object-fit:cover;opacity:.5;transition:opacity .4s;} .icard:hover .icard-img{opacity:.7;} .icard-body{padding:20px 22px;} .icard::after{content:'';position:absolute;top:0;right:0;width:64px;height:64px;background:radial-gradient(circle at top right,rgba(222,184,179,.07),transparent 70%);} .icard-emoji{font-size:24px;margin-bottom:12px;} .icard-name{font-family:var(--ff);font-size:17px;font-weight:500;color:var(--c);margin-bottom:4px;} .icard-ar{font-family:var(--fa);font-size:12px;color:var(--rosed);opacity:.6;margin-bottom:9px;} .icard-txt{font-family:var(--fb);font-size:12px;font-weight:300;line-height:1.6;color:var(--c);opacity:.78;margin-bottom:11px;} .icard-origin{font-family:var(--fb);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--g);opacity:.55;} /* ─── DELIVERY ─── */ .del-sec{background:var(--n2);padding:110px 6vw;position:relative;z-index:var(--z-sections);} .del-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:64px;} .dcard{ background:var(--n3);padding:36px 28px; border-bottom:2px solid transparent; transition:background .35s var(--ease),border-bottom-color .35s,transform .4s var(--ease); } .dcard:hover{background:var(--n4);border-bottom-color:var(--g);transform:translateY(-4px);} .dcard-ico{font-size:26px;margin-bottom:20px;} .dcard-h{font-family:var(--ff);font-size:22px;font-weight:500;color:var(--c);margin-bottom:10px;} .dcard-p{font-family:var(--fb);font-size:13px;font-weight:300;line-height:1.7;color:var(--c);opacity:.78;margin-bottom:18px;} .dcard-tag{display:inline-block;background:rgba(222,184,179,.1);border:1px solid rgba(190,123,116,.28);color:var(--rose2);font-family:var(--fb);font-size:9px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;padding:5px 11px;} .pay-row{display:flex;gap:2px;margin-top:2px;flex-wrap:wrap;} .pmethod{flex:1;min-width:200px;background:var(--n3);padding:20px 22px;display:flex;align-items:center;gap:14px;transition:background .3s;} .pmethod:hover{background:var(--n4);} .pmethod-ico{font-size:22px;flex-shrink:0;} .pmethod-name{font-family:var(--fb);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c);} .pmethod-sub{font-family:var(--fb);font-size:10px;color:var(--c);opacity:.32;margin-top:2px;} .track-box{background:var(--n3);padding:26px 30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px;} .track-label{font-family:var(--ff);font-size:18px;font-weight:400;color:var(--c);flex:0 0 auto;} .track-in{flex:1;min-width:180px;background:rgba(251,246,238,.04);border:1px solid rgba(196,164,92,.18);border-right:none;padding:12px 16px;font-family:var(--fb);font-size:13px;color:var(--c);outline:none;transition:border-color .2s;} .track-in::placeholder{color:rgba(251,246,238,.22);} .track-in:focus{border-color:var(--g);} .track-btn{background:var(--g);color:var(--n1);border:none;padding:12px 22px;font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;transition:background .2s;white-space:nowrap;} .track-btn:hover{background:var(--gl);} /* ─── TESTIMONIALS ─── */ .test-sec{ background:linear-gradient(180deg,#100700,#0A0500); padding:110px 6vw;position:relative;z-index:var(--z-sections); } .test-sec .sec-h{color:var(--c);} .test-sec .sec-p{color:var(--c);} .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:64px;} @media(max-width:900px){.tgrid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.tgrid{grid-template-columns:1fr;}} .tcard{ background:var(--n1);padding:34px 28px;position:relative; transition:background .3s,transform .4s var(--ease),box-shadow .4s; } .tcard:hover{background:var(--n2);transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.2);} .tcard-q{position:absolute;top:16px;right:20px;font-family:var(--ff);font-size:72px;font-weight:600;color:var(--rosed);opacity:.08;line-height:1;pointer-events:none;} .tcard-stars{display:flex;gap:3px;margin-bottom:16px;color:var(--g);font-size:13px;} .tcard-txt{font-family:var(--ff);font-size:16px;font-style:italic;font-weight:300;line-height:1.75;color:var(--c);margin-bottom:24px;} .tcard-foot{display:flex;align-items:center;gap:12px;} .tcard-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--rosed));display:flex;align-items:center;justify-content:center;font-family:var(--ff);font-size:15px;font-weight:600;color:#fff;flex-shrink:0;} .tcard-name{font-family:var(--fb);font-size:13px;font-weight:600;color:var(--c);} .tcard-loc{font-family:var(--fb);font-size:10px;color:var(--c);opacity:.32;margin-top:2px;} .tcard-prod{font-family:var(--fb);font-size:10px;color:var(--g);opacity:.6;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;} /* ─── FAQ ─── */ .faq-sec{background:var(--c);padding:110px 6vw;position:relative;z-index:var(--z-sections);} /* diagonal: test(dark) → faq(light) */ .faq-sec::before{ content:'';position:absolute;top:0;left:0;right:0; height:72px;background:#0A0500; clip-path:polygon(100% 0,100% 100%,0 0); z-index:3;pointer-events:none; } .faq-wrap{display:grid;grid-template-columns:5fr 7fr;gap:80px;margin-top:64px;} .faq-side{position:sticky;top:100px;} .faq-contact-box{background:linear-gradient(160deg,var(--n1),var(--n2));padding:28px 24px;margin-top:28px;border:1px solid rgba(196,164,92,.12);} .faq-contact-lbl{font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--g);margin-bottom:10px;} .faq-contact-txt{font-family:var(--ff);font-size:15px;font-style:italic;font-weight:300;line-height:1.65;color:var(--c);opacity:.88;margin-bottom:18px;} .faq-list{display:flex;flex-direction:column;} .faq-item{border-bottom:1px solid rgba(26,12,0,.1);} .faq-q{width:100%;background:none;border:none;text-align:left;padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;} .faq-qt{font-family:var(--fb);font-size:14px;font-weight:500;color:var(--txt);line-height:1.4;} /* .faq-ch est directement sur le fond clair de .faq-sec (var(--c)), sans boîte sombre intermédiaire (contrairement à .faq-contact-lbl, qui est dans .faq-contact-box à fond sombre et n'a pas besoin de ce correctif). */ .faq-ch{color:var(--g-oncream);font-size:18px;flex-shrink:0;transition:transform .35s var(--ease2);font-family:var(--fb);font-weight:300;line-height:1;} .faq-ch.open{transform:rotate(45deg);} .faq-a{font-family:var(--ff);font-size:15px;font-style:italic;font-weight:300;line-height:1.8;color:var(--txt);opacity:.82;max-height:0;overflow:hidden;transition:max-height .5s var(--ease),padding .35s var(--ease);} .faq-a.open{max-height:500px;padding-bottom:20px;} /* ─── CONTACT ─── */ .contact-sec{background:linear-gradient(160deg,var(--n1),var(--n2));padding:110px 6vw;position:relative;z-index:var(--z-sections);} /* diagonal: faq(light) → contact(dark) */ .contact-sec::before{ content:'';position:absolute;top:0;left:0;right:0; height:72px;background:var(--c); clip-path:polygon(0 0,100% 0,0 100%); z-index:3;pointer-events:none; } .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;} .nl-form{display:flex;margin-top:28px;} .nl-in{flex:1;background:rgba(251,246,238,.04);border:1px solid rgba(196,164,92,.18);border-right:none;padding:14px 18px;font-family:var(--fb);font-size:13px;color:var(--c);outline:none;transition:border-color .2s;} .nl-in::placeholder{color:rgba(251,246,238,.22);} .nl-in:focus{border-color:var(--g);} .nl-btn{background:var(--g);color:var(--n1);border:none;padding:14px 22px;font-family:var(--fb);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;transition:background .2s;white-space:nowrap;} .nl-btn:hover{background:var(--gl);} .privacy-box{display:flex;gap:9px;align-items:flex-start;margin-top:14px;padding:12px 14px;background:rgba(222,184,179,.05);border:1px solid rgba(190,123,116,.14);} .priv-ico{color:var(--rose);font-size:12px;flex-shrink:0;margin-top:2px;} .priv-txt{font-family:var(--fb);font-size:10px;font-weight:300;line-height:1.65;color:var(--c);opacity:.8;} .socials{display:flex;gap:10px;margin-top:28px;} .soc{width:42px;height:42px;border:1px solid rgba(190,123,116,.28);display:flex;align-items:center;justify-content:center;color:var(--c);opacity:.55;text-decoration:none;font-size:15px;transition:all .35s var(--ease2);} .soc:hover{border-color:var(--rose);color:var(--rose);opacity:1;transform:translateY(-5px) scale(1.1);} .qbox{background:rgba(251,246,238,.03);border:1px solid rgba(196,164,92,.13);padding:32px;} .qbox-h{font-family:var(--ff);font-size:22px;font-weight:400;color:var(--c);margin-bottom:6px;} .qbox-sub{font-family:var(--fb);font-size:12px;font-weight:300;color:var(--c);opacity:.85;margin-bottom:22px;} .fi{width:100%;background:rgba(251,246,238,.04);border:1px solid rgba(196,164,92,.15);padding:11px 14px;font-family:var(--fb);font-size:13px;color:var(--c);outline:none;transition:border-color .2s;margin-bottom:12px;} .fi::placeholder{color:rgba(251,246,238,.2);} .fi:focus{border-color:var(--g);} textarea.fi{resize:vertical;} /* select.fi hérite `color:var(--c)` (quasi-blanc) mais le popup natif du