/* Electronic HOUSE — pages statiques (mobile d'abord) */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#f3f6fb;color:#0d2137;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:#0b57c2}
img{max-width:100%;height:auto}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.top{background:#0d2137;color:#fff;position:sticky;top:0;z-index:50}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:56px;flex-wrap:wrap}
.logo{color:#fff;text-decoration:none;font-weight:800;letter-spacing:.04em;font-size:17px;margin-right:auto}
.logo span{color:#5aa2ff}
.top nav{display:flex;gap:6px;align-items:center}
.top nav a{color:#fff;text-decoration:none;font-size:15px;padding:10px 10px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.top nav a:hover,.top nav a:focus{background:#ffffff1f}
.cart-link{background:#1565c0}
.cart-link b{background:#fff;color:#0d2137;border-radius:999px;padding:0 7px;margin-left:6px;font-size:13px}
.contact-strip{background:#e3ecf8;font-size:14px}
.contact-strip .wrap{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 16px}
.contact-strip a{font-weight:700;color:#0d2137}
main{padding:16px 0 40px}
h1{font-size:1.6rem;line-height:1.2;margin:.4em 0 .5em}
h2{font-size:1.2rem;margin:1.4em 0 .5em}
.crumbs{font-size:14px;color:#41566e;margin:4px 0 0}
.crumbs a{color:#41566e}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 18px;border-radius:12px;border:0;font:700 16px system-ui,sans-serif;text-decoration:none;cursor:pointer}
.btn-cart{background:#0d2137;color:#fff}
.btn-wa{background:#1fae54;color:#fff}
.btn-ghost{background:#fff;color:#0d2137;border:2px solid #0d2137}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.btns .btn{flex:1 1 220px}
.price{font-size:1.5rem;font-weight:800;color:#0a6b2e;margin:.2em 0}
.price small{display:block;font-size:.95rem;font-weight:600;color:#41566e}
.badge{display:inline-block;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700;background:#e3ecf8;color:#0d2137}
.badge.used{background:#fff1d6;color:#7a4a00}
.badge.sealed{background:#dcf5e5;color:#0a5a28}
.stock{font-weight:700;color:#0a6b2e}
.prod{display:grid;gap:18px}
@media(min-width:820px){.prod{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.gallery img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:16px}
.gallery figure{margin:0 0 10px}
.gallery figcaption{font-size:13px;color:#41566e;margin-top:4px}
.box{background:#fff;border-radius:14px;padding:14px 16px;margin:12px 0;box-shadow:0 1px 3px #0d213714}
.box h2{margin-top:0}
.note{font-size:14px;color:#41566e}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:960px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{background:#fff;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 1px 3px #0d213714}
.card img{width:100%;aspect-ratio:1/1;object-fit:contain;border-radius:10px;background:#fff}
.card h3{font-size:14px;line-height:1.3;margin:0;font-weight:600}
.card h3 a{color:#0d2137;text-decoration:none}
.card .p{font-weight:800;color:#0a6b2e}
.card .p small{display:block;font-weight:500;color:#41566e;font-size:12px}
.card .btn{min-height:44px;padding:8px 10px;font-size:14px;margin-top:auto}
.filters{display:grid;gap:8px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:10px 0}
.filters label{font-size:13px;font-weight:700;display:flex;flex-direction:column;gap:3px}
.filters input,.filters select{width:100%;min-width:0;min-height:44px;font-size:16px;border:1px solid #b8c6d8;border-radius:10px;padding:8px;background:#fff}
.filters .full{grid-column:1/-1}
@media(min-width:820px){.filters{grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr}.filters .full{grid-column:auto}}
.chips{display:flex;gap:6px;overflow-x:auto;padding:4px 0;-webkit-overflow-scrolling:touch}
.chips button{white-space:nowrap;min-height:40px;border:1px solid #b8c6d8;background:#fff;border-radius:999px;padding:6px 14px;font-size:15px;cursor:pointer}
.chips button[aria-pressed=true]{background:#0d2137;color:#fff;border-color:#0d2137}
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:18px 0}
.pager button{min-width:44px;min-height:44px;border:1px solid #b8c6d8;background:#fff;border-radius:10px;font-size:15px}
.pager button[aria-current=true]{background:#0d2137;color:#fff}
.explain{font-size:14px;background:#fff;border-left:4px solid #1565c0;padding:8px 12px;border-radius:8px;margin:8px 0}
table.cart{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
table.cart td,table.cart th{padding:10px;border-bottom:1px solid #e3ecf8;text-align:left;vertical-align:middle;font-size:15px}
.qty{display:inline-flex;align-items:center;gap:4px}
.qty button{min-width:44px;min-height:44px;border:1px solid #b8c6d8;background:#fff;border-radius:10px;font-size:20px}
.rm{min-height:44px;border:0;background:none;color:#a11;text-decoration:underline;font-size:14px}
form.f{display:grid;gap:10px;max-width:560px}
form.f label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:15px}
form.f input,form.f select{min-height:48px;font-size:16px;border:1px solid #b8c6d8;border-radius:10px;padding:10px;background:#fff}
form.f .row{display:grid;grid-template-columns:120px 1fr;gap:8px}
form.f .check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400}
form.f .check input{min-height:24px;width:24px;height:24px;flex:0 0 24px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.foot{background:#0d2137;color:#dfe8f5;padding:28px 0 110px;font-size:15px}
.foot a{color:#fff}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:14px}
.foot nav a{min-height:44px;display:inline-flex;align-items:center}
.foot .cols{display:grid;gap:16px}
@media(min-width:820px){.foot .cols{grid-template-columns:1fr 1fr 1fr}}
.foot form{display:grid;gap:8px}
.foot input[type=email]{min-height:48px;font-size:16px;border-radius:10px;border:0;padding:10px}
.foot .check{display:flex;gap:8px;align-items:flex-start}
.foot .check input{width:22px;height:22px;flex:0 0 22px}
.foot button{min-height:48px;border-radius:10px;border:0;font-weight:700;font-size:16px;cursor:pointer}
.msg{font-weight:600;min-height:1.2em}
.legal h2{font-size:1.1rem}
.legal li{margin:.35em 0}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:8px}
.steps li{counter-increment:s;background:#fff;border-radius:12px;padding:12px 12px 12px 52px;position:relative}
.steps li:before{content:counter(s);position:absolute;left:12px;top:10px;width:30px;height:30px;border-radius:50%;background:#1565c0;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.review{background:#fff;border-radius:12px;padding:12px;margin:8px 0}
.review p{margin:.2em 0}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:100}
[hidden]{display:none!important}
/* fiche matériel : texte court + points clés (04/10) */
.hw .lead{font-size:17px;line-height:1.5;margin:0 0 12px;color:#0d2137}
.keys{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.keys li{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:9px 12px;background:#f3f7fc;border-radius:10px;font-size:14.5px;line-height:1.4}
.keys li span{font-weight:700;color:#1565c0}
@media(max-width:380px){.keys li{grid-template-columns:1fr;gap:2px}}
.sib-t{font-weight:700;margin:14px 0 6px}
.sibs{display:flex;flex-wrap:wrap;gap:8px}
.sibs a{display:inline-flex;flex-direction:column;padding:8px 12px;border:1px solid #c9d6e6;border-radius:12px;text-decoration:none;color:#0d2137;font-size:13px;min-height:44px;justify-content:center}
.sibs a b{color:#0a6b2e;font-size:13px}
.gallery figure.logo img{padding:15%}
/* toast panier */
#eh-toast{position:fixed;left:12px;right:12px;margin:0 auto;width:fit-content;top:14px;transform:translateY(-160%);z-index:120;background:#0d2137;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 8px 24px #0005;font:600 15px/1.35 system-ui,sans-serif;max-width:min(92vw,420px);transition:transform .3s ease;display:flex;gap:10px;align-items:center}
#eh-toast.on{transform:translateY(0)}
#eh-toast a{color:#7fd6ff;white-space:nowrap}
/* grille dense (MR DOM 04/10) : 3 par ligne sur mobile, 5-6 sur ordinateur */
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(min-width:640px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}}
@media(min-width:960px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:1180px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.card{padding:6px;gap:4px;border-radius:12px;min-width:0}
.card img{border-radius:8px}
.card h3{font-size:12px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.card .badge{font-size:10px;padding:1px 6px;align-self:flex-start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .p{font-size:13px;line-height:1.2}
.card .p small{display:none}
.card .btn{min-height:36px;padding:4px 6px;font-size:12px;border-radius:9px}
@media(min-width:640px){.card h3{font-size:13px}.card .p{font-size:14px}.card .btn{min-height:40px;font-size:13px}}

/* badge « Le plus choisi » (Google One) */
.card .pop{display:inline-block;align-self:flex-start;margin:2px 0 4px;padding:2px 8px;border-radius:999px;background:#ff7a1a;color:#fff;font-size:11px;font-weight:700;line-height:1.5}

/* ===== Thème CLAIR + ciel d'étoiles sombres discret (MR DOM 04/10 11h49) ===== */
:root{color-scheme:light}
body{background:#f3f6fb;color:#0d2137}
/* ciel d'étoiles ACTIF, 100 % CSS (transform/opacity uniquement) : 2 couches × 26 points, 14 par couche sur mobile */
.stars{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;contain:strict}
.stars .l{position:absolute;top:-16%;left:-16%;width:132%;height:132%;will-change:transform;animation:ehroam1 26s ease-in-out infinite alternate}
.stars .l2{animation-name:ehroam2;animation-duration:31s}
.stars .l3{animation-name:ehroam3;animation-duration:23s}
.stars .l4{animation-name:ehroam4;animation-duration:35s}
.stars i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#0d2137;opacity:.6;animation:ehtw var(--d) ease-in-out var(--t) infinite}
.stars i.r{background:#e5322d;box-shadow:0 0 8px 3px #e5322d80}
.stars i.b{background:#2f7bff;box-shadow:0 0 8px 3px #2f7bff80}
.stars i.p{animation-name:ehpulse}
@keyframes ehtw{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes ehpulse{0%,100%{transform:scale(.4);opacity:.35}50%{transform:scale(2.2);opacity:.95}}
@keyframes ehroam1{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(-16vw,10vh,0)}66%{transform:translate3d(8vw,-14vh,0)}100%{transform:translate3d(-12vw,-8vh,0)}}
@keyframes ehroam2{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(15vw,-12vh,0)}66%{transform:translate3d(-10vw,12vh,0)}100%{transform:translate3d(14vw,9vh,0)}}
@keyframes ehroam3{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(10vw,15vh,0)}66%{transform:translate3d(-15vw,-6vh,0)}100%{transform:translate3d(6vw,-15vh,0)}}
@keyframes ehroam4{0%{transform:translate3d(0,0,0)}33%{transform:translate3d(-12vw,-15vh,0)}66%{transform:translate3d(14vw,6vh,0)}100%{transform:translate3d(-6vw,14vh,0)}}
.stars .bu{position:absolute;left:0;top:0;width:0;height:0;animation:ehbpos 70s step-end infinite}
.stars .bu2{animation-name:ehbpos2;animation-duration:85s;animation-delay:-42.2s}
.stars .bu i{left:0;top:0;width:9px;height:9px;margin:-4.5px;opacity:0;animation:ehburst 14s linear infinite}
.stars .bu2 i{animation-duration:17s;animation-delay:-8.2s}
@keyframes ehburst{0%{transform:rotate(var(--a)) translate3d(0,0,0) scale(1.6);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.35,1)}1%{opacity:1}16%{transform:rotate(var(--a)) translate3d(var(--r),0,0) scale(.35);opacity:0}100%{transform:rotate(var(--a)) translate3d(var(--r),0,0) scale(.35);opacity:0}}
@keyframes ehbpos{0%{transform:translate3d(24vw,40vh,0)}20%{transform:translate3d(72vw,62vh,0)}40%{transform:translate3d(38vw,78vh,0)}60%{transform:translate3d(80vw,36vh,0)}80%{transform:translate3d(20vw,64vh,0)}}
@keyframes ehbpos2{0%{transform:translate3d(70vw,48vh,0)}20%{transform:translate3d(30vw,34vh,0)}40%{transform:translate3d(78vw,82vh,0)}60%{transform:translate3d(50vw,58vh,0)}80%{transform:translate3d(26vw,86vh,0)}}
@media(max-width:640px){.stars .l i:nth-child(n+10){display:none}.stars .bu i:nth-child(n+9){display:none}.stars .bu i{--r:var(--rm)!important}}
@media(prefers-reduced-motion:reduce){.stars .l,.stars i{animation:none}.stars .l{will-change:auto}.stars .bu{display:none}}
.box,.card,.steps li,.review,.explain,table.cart{background:#fffffff2}
.card{transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0d213722}
.top{z-index:50}
/* bandeau du catalogue + calque 3D fixe (suit le visiteur) */
.hero3d{position:relative;margin:4px 0 6px;max-width:640px;padding-right:96px}
@media(min-width:900px){.hero3d{padding-right:0}}
.hero3d h1{margin:.2em 0 .3em;font-size:1.55rem;line-height:1.15}
.hero3d .kick{font-size:11px;letter-spacing:.3em;color:#ff7a1a;margin:6px 0 0}
@media(min-width:640px){.hero3d h1{font-size:2.4rem}}
main,.foot,.contact-strip{position:relative;z-index:1}
.top{z-index:50}
.bg3d{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bg3d .mvw{position:absolute;right:-34px;top:190px;width:150px;height:240px;opacity:.8;background:radial-gradient(closest-side,#2f7bff38,transparent);transition:transform .3s ease-out}
.bg3d model-viewer{position:absolute;left:0;top:0;width:100%;height:100%;--poster-color:transparent}
@media(max-width:899px){.bg3d model-viewer{width:66.67%;height:66.67%;transform:scale(1.5);transform-origin:0 0}}
.bg3d .mvw img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:ehsfloat 5s ease-in-out infinite alternate}
@keyframes ehsfloat{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-8px) rotate(5deg)}}
.bg3d .soft3d{position:absolute;left:10px;bottom:150px;width:56px;height:56px;perspective:400px;opacity:.75}
.bg3d .cube{position:relative;width:56px;height:56px;transform-style:preserve-3d;animation:ehcube 14s linear infinite}
.bg3d .cube i{position:absolute;inset:0;border-radius:10px;border:1px solid #2f7bffaa;background:linear-gradient(135deg,#2f7bff40,#8b5cf62e);box-shadow:inset 0 0 18px #2f7bff40}
.bg3d .cube i:nth-child(1){transform:translateZ(28px)}.bg3d .cube i:nth-child(2){transform:rotateY(180deg) translateZ(28px)}
.bg3d .cube i:nth-child(3){transform:rotateY(90deg) translateZ(28px)}.bg3d .cube i:nth-child(4){transform:rotateY(-90deg) translateZ(28px)}
.bg3d .cube i:nth-child(5){transform:rotateX(90deg) translateZ(28px)}.bg3d .cube i:nth-child(6){transform:rotateX(-90deg) translateZ(28px);background:radial-gradient(circle,#ff7a1a99 0 22%,transparent 24%),linear-gradient(135deg,#2f7bff55,#8b5cf633)}
@keyframes ehcube{from{transform:rotateX(-18deg) rotateY(0)}50%{transform:rotateX(18deg) rotateY(180deg) translateY(-6px)}to{transform:rotateX(-18deg) rotateY(360deg)}}
@media(min-width:900px){.bg3d .mvw{right:2vw;top:120px;width:320px;height:440px}.bg3d .soft3d{left:3vw;bottom:120px;width:80px;height:80px}}
@media(prefers-reduced-motion:reduce){.bg3d .mvw img{animation:none}.bg3d .cube{animation:none;transform:rotateX(-18deg) rotateY(35deg)}}