:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-synthesis:none;color-scheme:dark;--bg:#080b10;--panel:#101722;--text:#f5f7fc;--muted:#a6b2c3;--line:#ffffff1a;--blue:#90b0ff;--gold:#f8c448;scroll-behavior:smooth;scroll-padding-top:110px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.6;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.skip-link{position:fixed;top:12px;left:24px;z-index:1200;transform:translateY(-160%);padding:12px 18px;border-radius:10px;background:white;color:#080b10}
.skip-link:focus{transform:none}
.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:1100;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#3979ff 0%,#3979ff 30%,#f5f8ff 43%,#f5f8ff 57%,#ed5a66 70%,#ed5a66 100%);box-shadow:0 1px 8px #86b0ff35;pointer-events:none}
.site-header{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:min(1220px,calc(100% - 32px));z-index:100;border:1px solid var(--line);border-radius:18px;background:#0b1019ed;box-shadow:0 12px 40px #0003}
@supports(backdrop-filter:blur(16px)){.site-header{background:#0b1019ce;backdrop-filter:blur(16px)}}
.header-inner{min-height:72px;padding:10px 13px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand-link{display:inline-flex;align-items:center;flex-shrink:0;border-radius:10px;background:#fff;padding:7px 10px}
.logo{width:150px;height:50px;object-fit:contain}
.nav{display:flex;align-items:center;gap:26px;font-size:.88rem;font-weight:550;color:#b5c0d0}
.nav a{padding:10px 0;transition:color .2s}
.nav a:hover,.footer a:hover{color:#fff}
.header-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid #fff;background:#f8faff;color:#0b111c;font-weight:750;border-radius:11px;transition:transform .22s ease,background-color .22s ease;line-height:1.3}
.header-cta{padding:12px 17px;white-space:nowrap;font-size:.88rem}
.btn{padding:15px 21px;font-size:.95rem}
.btn-secondary{background:#ffffff05;border-color:#ffffff26;color:#e6ecf6}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(850px,94svh);display:flex;align-items:center;padding:174px 0 116px;background:linear-gradient(128deg,#06080d 15%,#0c1422 65%,#0a0e16)}
.hero-grid{position:absolute;inset:0;z-index:-1;opacity:.28;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(transparent,#000 28%,#000 70%,transparent);pointer-events:none}
.hero-glow{position:absolute;z-index:-1;width:min(850px,85vw);aspect-ratio:1;top:-20%;right:-15%;border-radius:50%;background:radial-gradient(ellipse,#437be42e 0%,#294d8612 42%,transparent 70%);animation:ambient-drift 16s ease-in-out infinite alternate;pointer-events:none}
.hero-orbits{position:absolute;right:-110px;top:22%;width:min(540px,49vw);aspect-ratio:1;border:1px solid #ffffff0c;border-radius:50%;box-shadow:0 0 0 56px #ffffff03,0 0 0 112px #ffffff02;z-index:-1;animation:orbit-drift 12s ease-in-out infinite alternate;pointer-events:none}
.hero-orbits::before{content:"";position:absolute;inset:14%;border:1px solid #7ea4f510;border-radius:50%}
.hero-copy{max-width:810px}
h1{margin:0;font-size:clamp(3.5rem,6.7vw,5.9rem);font-weight:730;letter-spacing:-.058em;line-height:1.04;max-width:870px}
h1 span{color:#b7c4d9}
.lead{margin:27px 0 0;max-width:600px;color:var(--muted);font-size:1.16rem;line-height:1.7}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-benefits{display:flex;gap:24px;flex-wrap:wrap;padding:0;margin:29px 0 0;list-style:none;color:#a6b2c3;font-size:.81rem}
.hero-benefits li{display:flex;align-items:center;gap:8px}
.hero-benefits svg{width:15px;height:15px;flex:none;color:#b9cef9}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;color:#97a6bc;font-size:.63rem;text-transform:uppercase;letter-spacing:.18em}
.scroll-hint::after{content:"";width:1px;height:28px;background:linear-gradient(#bbceed,transparent);animation:scroll-pulse 2.2s ease-in-out infinite}
.section{padding:84px 0;scroll-margin-top:100px}
.catalogue{background:linear-gradient(#0b1018,var(--bg))}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.section-label{display:block;color:var(--blue);font-size:.68rem;font-weight:650;text-transform:uppercase;letter-spacing:.19em;margin-bottom:12px}
h2{font-size:clamp(2rem,4vw,3.35rem);line-height:1.12;letter-spacing:-.045em;margin:0 0 15px;font-weight:680}
.section-head p{color:var(--muted);margin:0;font-size:1.02rem}
.product-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.product-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:linear-gradient(150deg,#141c29,#0c121c 75%);transition:border-color .25s ease,box-shadow .25s ease}
.product-card:focus-within{border-color:#7696d387;box-shadow:0 20px 44px #0004}
.card-art{display:flex;align-items:center;justify-content:center;aspect-ratio:1.22;position:relative;overflow:hidden;background:#fff;border-bottom:1px solid var(--line);padding:18px}
.card-art img{width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.card-art.vcds{background:#f5f8fc}
.card-art .tag,.art-caption{display:none}
.card-body{padding:25px 23px 23px;display:flex;flex-direction:column;flex:1}
.product-type{display:block;color:#a4b8d7;font-size:.65rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:9px}
.meta{order:1;color:#a9b7cb;font-size:.74rem;margin:0 0 16px;line-height:1.8;white-space:nowrap}
.stars{color:var(--gold);letter-spacing:.04em}
.card-body h3{font-size:1.37rem;line-height:1.24;letter-spacing:-.028em;margin:0 0 12px;font-weight:700}
.card-body>p{color:var(--muted);font-size:.91rem;line-height:1.6;margin:0 0 20px}
.card-footer{order:2;display:flex;flex-direction:column;gap:18px;padding-top:19px;margin-top:auto;border-top:1px solid var(--line)}
.prices{display:flex;align-items:baseline;gap:12px}
.prices strong{font-size:1.85rem;letter-spacing:-.04em;line-height:1.2;color:#f8faff}
.prices del{font-size:.85rem;color:#98a7bc}
.card-footer .btn{width:100%;font-size:.9rem;padding:13px 12px}
.detail-link{order:3;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:15px;padding:4px;color:#afbdd1;font-size:.81rem;font-weight:550}
.detail-link span{transition:transform .2s}
.how{border-top:1px solid var(--line);background:#0a0f17}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:38px}
.step{border-top:1px solid #ffffff26;padding:24px 4px 0}
.step b{font-size:.74rem;font-weight:550;letter-spacing:.1em;color:var(--blue)}
.step h3{margin:18px 0 10px;font-size:1.12rem;letter-spacing:-.02em}
.step p{color:var(--muted);font-size:.93rem;margin:0;max-width:320px}
.help{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);border-radius:24px;padding:54px;display:flex;align-items:center;justify-content:space-between;gap:42px;background:radial-gradient(ellipse at 90% 180%,#335eb64f,transparent 68%),#101721}
.help h2{font-size:clamp(1.9rem,3vw,2.7rem);margin-bottom:15px}
.help p{max-width:540px;margin:0;color:#afbccf}
.help-actions{display:flex;flex-direction:column;align-items:flex-start;gap:15px;flex:none}
.help-mail{font-size:.78rem;color:#adbed8}
.help-mail:hover{text-decoration:underline}
.footer{background:#070a10;border-top:1px solid var(--line);padding:50px 0 28px;color:#a2aec1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px}
.footer-logo{width:162px;height:54px;object-fit:contain;background:white;border-radius:8px;padding:6px 9px}
.footer-grid p{max-width:320px;font-size:.85rem;margin-top:21px}
.footer nav{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:.85rem}
.footer strong{color:#e8edf6;margin-bottom:8px;font-weight:650}
.legal{border-top:1px solid var(--line);margin-top:38px;padding:23px 75px 0 0;color:#8b9aaf;font-size:.74rem}
.reveal-pending{opacity:0;transform:translateY(22px)}
[data-reveal]{transition:opacity .62s ease,transform .62s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
html.page-hidden .hero *, .hero.motion-paused *{animation-play-state:paused!important}
@keyframes ambient-drift{to{transform:translate(-45px,40px) scale(1.08)}}
@keyframes orbit-drift{to{transform:translateY(24px)}}
@keyframes scroll-pulse{0%,100%{opacity:.35;transform:scaleY(.65)}50%{opacity:.85;transform:scaleY(1)}}
@media(hover:hover) and (pointer:fine){.btn:hover,.header-cta:hover{transform:translateY(-2px);background:#e2eafa}.btn-secondary:hover{background:#ffffff0e}.product-card:hover{border-color:#ffffff40;box-shadow:0 24px 50px #0004}.product-card:hover .card-art img{transform:scale(1.035) translateY(-2px)}.detail-link:hover{color:#fff}.detail-link:hover span{transform:translateX(4px)}}
@media(min-width:980px){.product-card> .card-body>p{min-height:4.8em}}
@media(max-width:979px){.nav{gap:18px;font-size:.8rem}.logo{width:125px;height:41px}.hero{min-height:740px;padding-top:160px}.hero-copy{max-width:720px}.hero-orbits{opacity:.65;right:-160px}.product-list{grid-template-columns:repeat(2,minmax(0,1fr))}.help{padding:38px;gap:26px;align-items:flex-start;flex-direction:column}.steps{gap:22px}.footer-grid{gap:28px}}
@media(max-width:740px){.nav{display:none}.site-header{top:12px}.header-inner{min-height:65px;gap:12px}.hero{min-height:620px;min-height:min(740px,92svh);padding-top:148px;padding-bottom:108px}.hero-copy{max-width:590px}h1{font-size:clamp(2.65rem,8.2vw,3.8rem)}.lead{font-size:1.05rem;max-width:470px}.hero-orbits{width:340px;right:-230px;top:36%;opacity:.45}.hero-benefits{gap:12px 22px;font-size:.77rem}.section{padding:58px 0}.steps{grid-template-columns:1fr;gap:28px}.step{padding-top:19px}.step h3{margin-top:9px}.step p{max-width:100%}.card-body{padding:22px 18px}.card-body h3{font-size:1.24rem}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div{grid-column:1/-1}}
@media(max-width:599px){:root{scroll-padding-top:100px}.wrap{width:calc(100% - 36px)}.site-header{width:calc(100% - 24px);border-radius:15px}.header-inner{padding:9px 10px}.brand-link{padding:6px 8px;border-radius:8px}.logo{width:118px;height:39px}.header-cta{font-size:.82rem;padding:11px 13px;gap:8px}.hero{min-height:0;padding:149px 0 86px}.hero-copy h1{font-size:clamp(2.45rem,9.4vw,3.35rem)}.lead{font-size:.97rem;margin-top:23px;max-width:355px}.hero-actions{gap:10px;margin-top:26px}.hero-actions .btn{padding:13px 15px;font-size:.86rem}.hero-benefits{display:grid;gap:9px;margin-top:23px}.scroll-hint{bottom:15px;gap:7px}.scroll-hint::after{height:20px}.hero-glow{width:620px;right:-350px;top:0}.product-list{grid-template-columns:1fr;gap:24px}.card-art{aspect-ratio:1.18;padding:18px 23px}.card-body{padding:25px}.card-body h3{font-size:1.55rem}.card-body>p{font-size:.94rem}.section-head{margin-bottom:28px}.section-head p{font-size:.94rem}.section-label{font-size:.63rem}.meta{font-size:.79rem}.help{padding:30px 23px;gap:25px;border-radius:19px}.help p{font-size:.92rem}.help-actions{width:100%}.help-actions .btn{width:100%}.footer{padding-top:36px}.footer-grid{gap:30px 20px}.footer nav{font-size:.8rem}.legal{font-size:.69rem;padding-right:55px}}
/* Signature lumineuse discrète et accès au catalogue, sans ressources lourdes. */
.header-inner{gap:30px;padding:10px 18px}
.brand-link{position:relative;overflow:hidden;padding:9px 15px 11px;border-radius:12px;box-shadow:0 0 0 1px #fff3,0 5px 25px #0002}
.brand-link::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#326be8 0 33%,#fff 33% 66%,#e55b66 66%)}
.logo{width:177px;height:59px}
.nav{flex:1;justify-content:center;gap:clamp(20px,3vw,46px);font-size:.94rem}
.nav a{position:relative;padding:15px 0;color:#c9d3e3}
.nav a::after{content:"";position:absolute;bottom:8px;left:0;right:0;height:1px;background:#97b8ff;transform:scaleX(0);transform-origin:left;transition:transform .22s}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.hero-copy h1{font-size:clamp(3.35rem,5.7vw,5.1rem);max-width:900px}

.hero-actions .btn-catalogue{position:relative;overflow:hidden;isolation:isolate;gap:27px;padding:12px 12px 12px 22px;min-height:54px;background:#f0f5ff;box-shadow:0 8px 30px #497ffe26;animation:catalogue-beacon 6s ease-in-out infinite}
.btn-catalogue::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 25%,#fff 49%,transparent 73%);transform:translateX(-130%);animation:catalogue-sheen 6s ease-in-out infinite;pointer-events:none}
.catalogue-arrow{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:#dbe7ff;color:#285eaa;flex:none}
.catalogue-arrow svg{width:21px;height:21px;animation:catalogue-nudge 6s ease-in-out infinite}
.btn-catalogue:hover,.btn-catalogue:focus-visible{box-shadow:0 12px 36px #497ffe40}
html.page-hidden .hero *,html.page-hidden .hero *::before,.hero.motion-paused *,.hero.motion-paused *::before{animation-play-state:paused!important}
@keyframes catalogue-beacon{0%,60%,100%{box-shadow:0 8px 30px #497ffe26}76%{box-shadow:0 9px 35px #6b96ff40}}
@keyframes catalogue-sheen{0%,55%{transform:translateX(-130%)}80%,100%{transform:translateX(130%)}}
@keyframes catalogue-nudge{0%,60%,100%{transform:translateX(0)}72%{transform:translateX(3px)}84%{transform:translateX(0)}}

@media(max-width:1100px) and (min-width:741px){.header-inner{gap:20px;padding:10px 13px}.logo{width:145px;height:48px}.nav{gap:24px;font-size:.85rem}.brand-link{padding:8px 12px 10px}}
@media(max-width:740px){.header-inner{gap:14px}.logo{width:151px;height:50px}.hero-copy h1{font-size:clamp(2.6rem,7.5vw,3.8rem)}}
@media(max-width:599px){.header-inner{padding:9px 10px;gap:12px}.brand-link{padding:7px 10px 9px;border-radius:9px}.logo{width:135px;height:45px}.hero-copy h1{font-size:clamp(2.3rem,8.5vw,3.2rem)}.hero-actions .btn-catalogue{padding:10px 10px 10px 16px;gap:18px;min-height:51px}}
/* Fond bleu nuit à rubans lumineux ; le texte conserve sa zone de contraste. */
.hero{background:#080d17;min-height:760px;padding-top:185px;padding-bottom:110px}
.hero-atmosphere{position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 83% 28%,#21497866,transparent 48%),radial-gradient(ellipse at 65% 95%,#3458ac35,transparent 52%),radial-gradient(ellipse at 13% 15%,#26324e24,transparent 50%),linear-gradient(128deg,#080c14 20%,#101e32 75%,#080c15)}
.hero-ribbons{position:absolute;inset:-5%;width:110%;height:110%;z-index:-1;pointer-events:none;animation:ribbon-drift 18s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#080c14bb 0%,#080c1466 42%,transparent 76%),linear-gradient(0deg,#0b1018,transparent 23%)}
.hero-copy{max-width:850px;position:relative;z-index:1}
.hero-copy h1{font-size:clamp(3.2rem,5.5vw,5rem);line-height:1.08;max-width:870px}
.hero-copy h1 span{color:#c4d2e8}
.hero-actions{margin-top:34px;gap:18px}
.hero-actions .btn-catalogue{min-height:62px;min-width:240px;padding:12px 14px 12px 25px;color:white;background:linear-gradient(135deg,#3c83f4,#2560d4);border-color:#97bdff70;border-radius:13px;font-size:1.02rem;box-shadow:0 9px 36px #266ee340;animation:none}
.btn-catalogue::before{background:linear-gradient(105deg,transparent 25%,#ffffff28 49%,transparent 73%)}
.btn-catalogue::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid #bad8ff;opacity:0;pointer-events:none;animation:catalogue-outline 5s ease-in-out infinite}
.catalogue-arrow{width:36px;height:36px;background:#ffffff1c;color:#fff;border:1px solid #ffffff22}
.hero-actions .btn-catalogue:hover,.hero-actions .btn-catalogue:focus-visible{background:linear-gradient(135deg,#5094ff,#316be0);box-shadow:0 12px 38px #266ee366}
.catalogue{scroll-margin-top:0}
.help-actions{max-width:100%}
.btn-whatsapp{background:#d2f8de;border-color:#bceccf;color:#103b25;font-size:.9rem;white-space:normal;text-align:center}
.btn-whatsapp:hover{background:#bdeecf}
.help-availability{display:flex;align-items:center;gap:8px;color:#b2c9bb;font-size:.75rem;flex-wrap:wrap}
.help-availability>span{width:7px;height:7px;border-radius:50%;background:#67d994;box-shadow:0 0 12px #67d99444;flex:none}
@keyframes ribbon-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-12px,12px) scale(1.035)}}
@keyframes catalogue-outline{0%,55%,100%{opacity:0}70%{opacity:.5}85%{opacity:0}}
html.page-hidden .hero *::after,.hero.motion-paused *::after{animation-play-state:paused!important}
@media(max-width:979px){.hero{min-height:700px}.hero-copy{max-width:710px}.hero-ribbons{inset:0 0 0 -15%;width:120%;height:100%;opacity:.85}}
@media(max-width:740px){.hero{min-height:660px;padding:158px 0 100px}.hero-copy h1{font-size:clamp(2.65rem,7.8vw,3.8rem)}.hero-atmosphere{background:radial-gradient(ellipse at 100% 70%,#294f874d,transparent 65%),linear-gradient(140deg,#080d17,#10213a)}.hero::after{background:linear-gradient(0deg,#0b1018,transparent 25%),linear-gradient(90deg,#080d1780,transparent 80%)}.hero-ribbons{inset:0 0 0 -75%;width:200%;opacity:.72}}
@media(max-width:599px){.hero{min-height:0;padding:152px 0 80px}.hero-copy h1{font-size:clamp(2.3rem,8.5vw,3.2rem)}.hero-actions{display:grid;grid-template-columns:1fr;width:min(100%,340px);gap:11px;margin-top:27px}.hero-actions .btn-catalogue{min-width:0;min-height:59px;justify-content:space-between;font-size:1rem;padding:11px 15px 11px 23px}.hero-actions .btn-secondary{min-height:46px;border-color:#ffffff20;background:#ffffff04;font-size:.88rem}.hero-benefits{font-size:.76rem;margin-top:24px}.hero-ribbons{inset:0 0 0 -130%;width:240%;opacity:.75}.help-actions{width:100%}.help-availability{font-size:.72rem}}
/* Header équilibré : logo, navigation et achat sur un même axe. */
.header-inner{display:grid;grid-template-columns:185px minmax(0,1fr) 126px;align-items:center;gap:24px;min-height:80px;padding:10px 16px}
.brand-link{justify-self:start;padding:5px 11px 7px;border-radius:10px}
.logo{width:151px;height:50px}
.nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,570px);justify-self:center;font-size:.88rem}
.nav a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 12px;white-space:nowrap;text-align:center;border-radius:9px;background:#ffffff03;transition:background-color .2s,color .2s}
.nav a:hover,.nav a:focus-visible{background:#ffffff08;color:#fff}
.nav a::after{left:16px;right:16px;bottom:5px}
.header-cta{width:100%;min-height:46px;padding:11px 15px;gap:10px;font-size:.88rem;border-radius:9px;box-shadow:0 4px 15px #0002}
@media(max-width:1100px) and (min-width:821px){.header-inner{grid-template-columns:160px minmax(0,1fr) 115px;gap:14px;padding:10px 13px}.logo{width:139px;height:46px}.brand-link{padding:5px 9px 7px}.nav{gap:5px;font-size:.81rem}.nav a{padding:10px 8px}.header-cta{font-size:.84rem}}
@media(max-width:820px){.header-inner{grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:10px 13px;min-height:74px}.nav{display:none}.header-cta{width:auto;min-width:113px}.logo{width:145px;height:48px}.brand-link{padding:5px 10px 7px}}
@media(max-width:599px){.header-inner{min-height:66px;padding:8px 10px;gap:12px}.logo{width:126px;height:42px}.brand-link{padding:4px 8px 6px;border-radius:8px}.header-cta{min-width:102px;min-height:44px;padding:10px 13px;font-size:.83rem}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal-pending{opacity:1;transform:none}.btn:hover,.header-cta:hover,.product-card:hover .card-art img{transform:none!important}}