/* Filtre, boîte et boîte complète en 3D, à l'échelle (version 2, 2026-10-24) : la scène donne la perspective, chaque bloc
   porte six faces ; l'éclairage de chaque face (le calque « s.l ») est calculé par f3d.js selon la rotation. */
:root{--f-carton:#fbfbf9;--f-carton-2:#ece9e3;--f-carton-3:#dcd7ce;--f-media-1:#ffffff;--f-media-2:#e3e9ef;--f-media-3:#b9c5d1;
 --f-encre:#24313f;--f-kraft:#cfa771;--f-kraft-2:#bb9058;--f-kraft-3:#a67c47;--f-rouge:#e3191f}
.f3d-scene{position:relative;perspective:1500px;perspective-origin:50% 38%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.f3d-scene[data-tirer]{cursor:grab}.f3d-scene.tire{cursor:grabbing}
.f3d{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.f3d-b{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.f3d>i,.f3d-b>i{position:absolute;left:0;top:0;display:block;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;font-style:normal;
 transition:width .75s cubic-bezier(.2,.8,.2,1),height .75s cubic-bezier(.2,.8,.2,1),transform .75s cubic-bezier(.2,.8,.2,1)}
.f3d-b>i{transition:none}
.f3d .av{width:var(--W);height:var(--H);transform:translate(-50%,-50%) translateZ(calc(var(--D) / 2))}
.f3d .ar{width:var(--W);height:var(--H);transform:translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--D) / 2))}
.f3d .dr{width:var(--D);height:var(--H);transform:translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--W) / 2))}
.f3d .ga{width:var(--D);height:var(--H);transform:translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--W) / 2))}
.f3d .ha{width:var(--W);height:var(--D);transform:translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--H) / 2))}
.f3d .ba{width:var(--W);height:var(--D);transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--H) / 2))}
.f3d s.l{position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none;text-decoration:none}
.f3d-ombre{position:absolute;left:14%;right:14%;bottom:5%;height:10%;border-radius:50%;pointer-events:none;
 background:radial-gradient(closest-side,rgba(5,10,18,.42),rgba(5,10,18,.16) 55%,rgba(5,10,18,0));filter:blur(5px)}

/* ── Le filtre : média plissé, grille de métal, treillis de carton découpé ── */
.f3d-filtre .av,.f3d-filtre .ar,.f3d-pile .av,.f3d-pile .ar{background:#e9eef3}
.f3d .m{position:absolute;inset:0;
 box-shadow:inset 0 0 calc(var(--t) * 1.1) calc(var(--t) * .9) rgba(8,18,30,.42);
 background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .55 0 0 0 0 .62 0 0 0 .38 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(100deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%,rgba(10,24,40,.08) 100%),
  repeating-linear-gradient(180deg,#76828f 0,#d6dde5 calc(var(--p) * .06),#fbfcfd calc(var(--p) * .16),#ffffff calc(var(--p) * .42),#f6f8fa calc(var(--p) * .58),#e6ebf0 calc(var(--p) * .72),#cdd5de calc(var(--p) * .86),#9eaab7 calc(var(--p) * .95),#76828f var(--p))}
.f3d .g{position:absolute;inset:0;opacity:.11;
 background:repeating-linear-gradient(45deg,transparent 0 calc(var(--m) - 1px),rgba(60,70,84,.7) calc(var(--m) - 1px) var(--m)),
  repeating-linear-gradient(-45deg,transparent 0 calc(var(--m) - 1px),rgba(60,70,84,.7) calc(var(--m) - 1px) var(--m))}
.f3d .g-dos{opacity:.55}
.f3d .ar .m{filter:brightness(.93) saturate(.9)}
.f3d .lat{position:absolute;inset:0;width:100%;height:100%;display:block}
/* le carton du cadre (côtés, dessus, dessous), avec ses deux plis */
.f3d-filtre .dr,.f3d-filtre .ga,.f3d-pile .dr,.f3d-pile .ga{background:linear-gradient(90deg,#e9e6df,#fbfaf7 22%,#f6f4ef 78%,#e4e0d8)}
.f3d-filtre .ha,.f3d-filtre .ba,.f3d-pile .ha,.f3d-pile .ba{background:linear-gradient(180deg,#e9e6df,#fbfaf7 22%,#f6f4ef 78%,#e4e0d8)}
.f3d .pli{position:absolute;inset:0;background:linear-gradient(90deg,rgba(70,58,40,.22) 0 1px,transparent 1px 12%,rgba(70,58,40,.18) 12% calc(12% + 1px),transparent calc(12% + 1px) calc(88% - 1px),rgba(70,58,40,.18) calc(88% - 1px) 88%,transparent 88% calc(100% - 1px),rgba(70,58,40,.22) calc(100% - 1px))}
.f3d .pli-h{background:linear-gradient(180deg,rgba(70,58,40,.22) 0 1px,transparent 1px 12%,rgba(70,58,40,.18) 12% calc(12% + 1px),transparent calc(12% + 1px) calc(88% - 1px),rgba(70,58,40,.18) calc(88% - 1px) 88%,transparent 88% calc(100% - 1px),rgba(70,58,40,.22) calc(100% - 1px))}
/* l'étiquette imprimée sur le côté, et la grandeur (avec la mesure réelle) sur le dessus */
.f3d .lb{position:absolute;inset:7% 0;display:flex;align-items:center;justify-content:space-between;writing-mode:vertical-rl;
 font:600 var(--fs,11px)/1.1 var(--f3d-police,'IBM Plex Mono',ui-monospace,monospace);color:var(--f-encre);letter-spacing:.04em;white-space:nowrap}
.f3d .lb-c{display:flex;flex-direction:column;align-items:center;gap:.3em}
.f3d .lb b{font-weight:800;font-size:1.3em;letter-spacing:.02em}.f3d .lb em{font-style:normal;font-weight:700;color:#556273}
.f3d .lb u{display:flex;align-items:center;gap:.35em;text-decoration:none;color:var(--f-rouge);font-weight:800;letter-spacing:.14em}
.f3d .lb-fl{flex:none}
/* la flèche de l'air traverse la bande de carton (donc le filtre) : horizontale sur un côté vertical, verticale sur le dessus/dessous */
.f3d .lb-fl-h{width:2em;height:1em}.f3d .lb-fl-v{width:1em;height:2em}
.f3d .lb-x{inset:0 6%;writing-mode:horizontal-tb}
.f3d .lb-r{transform:rotate(180deg)}
.f3d .lb-ca{display:flex;align-items:center;gap:.35em;font-size:.72em;font-weight:800;letter-spacing:.1em;color:#7a1b16}
.f3d .lb-ca svg{width:1.5em;height:1.5em;flex:none}
.f3d .lb-h{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1.4em;font:700 var(--fh,10px)/1 var(--f3d-police,'IBM Plex Mono',ui-monospace,monospace);color:var(--f-encre);white-space:nowrap;letter-spacing:.06em}
.f3d .lb-h b{font-weight:800;opacity:.78}.f3d .lb-h i{font-style:normal;font-weight:600;font-size:.82em;color:#6b7684}

/* ── La boîte de carton (kraft) ── */
.f3d-carton>i{background:var(--f-kraft);box-shadow:inset 0 0 0 1px rgba(60,35,10,.12),inset 0 0 calc(var(--W) * .08) rgba(60,35,10,.12)}
.f3d-carton .dr,.f3d-carton .ga{background:linear-gradient(90deg,var(--f-kraft-2),var(--f-kraft-3))}
.f3d-carton .ha{background:linear-gradient(90deg,var(--f-kraft),#d8b582 50%,var(--f-kraft))}
.f3d-carton .ba{background:var(--f-kraft-3)}
.f3d-carton .c-av{position:absolute;inset:8%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;text-align:center;
 border:max(1px,calc(var(--W) * .012)) solid rgba(40,20,5,.55);font:700 calc(var(--W) * .075)/1.05 'IBM Plex Mono',ui-monospace,monospace;color:#2a1a0c}
.f3d-carton .c-av img{width:72%;height:auto;mix-blend-mode:multiply;filter:contrast(1.1)}
.f3d-carton .c-av em{font-style:normal;font-weight:500;font-size:.62em;letter-spacing:.12em;text-transform:uppercase}
.f3d-carton .c-cote{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;color:#2a1a0c;text-align:center;
 font:700 calc(var(--H) * .14)/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:-.02em}
.f3d-carton .c-cote em{font-style:normal;font-weight:600;font-size:.34em;letter-spacing:.16em}
.f3d-carton .c-ruban{position:absolute;left:0;right:0;top:50%;height:22%;transform:translateY(-50%);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.05));border-block:1px solid rgba(60,35,10,.15)}
.f3d-carton .c-ca{display:flex;align-items:center;gap:.3em;font-size:.42em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2a1a0c;margin-top:2%}
.f3d-carton .c-ca svg{width:1.5em;height:1.5em;flex:none}

/* Un filtre ENCRASSÉ (anciennes maquettes) : poussière grise par-dessus le média */
.face-filtre{position:relative;--p:20px;--t:12px;--H:240px;
 background:repeating-linear-gradient(90deg,var(--f-media-1) 0,var(--f-media-2) calc(var(--p) * .40),var(--f-media-3) calc(var(--p) * .5),var(--f-media-2) calc(var(--p) * .62),var(--f-media-1) var(--p));
 border:var(--t) solid var(--f-carton)}
.sale::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--sale,1);mix-blend-mode:multiply;
 background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .29 0 0 0 1.25 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(120% 90% at 50% 45%,rgba(120,104,86,.55),rgba(92,80,66,.82))}

/* ── Les filtres de 5 po (2026-10-25) ──
   1056 : le même filtre à treillis, média JAUNE (MERV 11). Cartouche (Honeywell, White Rodgers) : des plis tenus à gauche et à
   droite par deux embouts de carton imprimés du numéro de pièce, rouge Honeywell ou marine White Rodgers. */
.f3d-t-1056 .m{
 background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .42 0 0 0 0 .05 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(100deg,rgba(255,255,255,.2),rgba(255,255,255,0) 40%,rgba(60,40,0,.1) 100%),
  repeating-linear-gradient(180deg,#8a6406 0,#c9930f calc(var(--p) * .07),#f2bf25 calc(var(--p) * .18),#ffe170 calc(var(--p) * .42),#fbd24a calc(var(--p) * .6),#eab21b calc(var(--p) * .76),#bf8a0c calc(var(--p) * .9),#8a6406 var(--p))}
.f3d-t-1056 .ar .m{filter:brightness(.9)}
.f3d-t-1056 .lb em{color:#8a6406}
.f3d-t-cartouche{--acc:#c8202a}
.f3d-t-cartouche.f3d-m-wr{--acc:#1f3d78}
.f3d-t-cartouche .m{left:9%;right:9%;
 background:linear-gradient(100deg,rgba(255,255,255,.16),rgba(255,255,255,0) 40%,rgba(10,24,40,.1) 100%),
  repeating-linear-gradient(180deg,#6f7c8a 0,#c9d2dc calc(var(--p) * .05),#f6f8fa calc(var(--p) * .13),#ffffff calc(var(--p) * .2),#e9eef3 calc(var(--p) * .3),#a9b5c2 calc(var(--p) * .4),#6f7c8a calc(var(--p) * .45))}
.f3d-t-cartouche .av,.f3d-t-cartouche .ar{background:#dfe5ec}
.f3d .cap{position:absolute;top:0;bottom:0;width:9%;z-index:2;background:linear-gradient(90deg,#e6e2da,#fbfaf7 35%,#f3f1ec 70%,#dcd7ce);
 box-shadow:inset 0 0 0 1px rgba(70,58,40,.12)}
.f3d .cap-g{left:0;border-right:2px solid var(--acc)}.f3d .cap-d{right:0;border-left:2px solid var(--acc)}
.f3d-t-cartouche .ha .cap,.f3d-t-cartouche .ba .cap{width:9%}
.f3d-t-cartouche .ha,.f3d-t-cartouche .ba{background:#d4dbe3}
.f3d-t-cartouche .dr,.f3d-t-cartouche .ga{background:linear-gradient(90deg,#e9e6df,#fbfaf7 22%,#f6f4ef 78%,#e4e0d8)}
.f3d .lb5{inset:5% 0}
.f3d .lb5-m{position:absolute;left:0;top:0;bottom:0;width:16%;background:var(--acc)}
.f3d .lb5 .lb-c b{font-size:1.25em}
.f3d .lb5 u{color:var(--acc)}

/* ── Le tampon d'humidificateur (m1_articles, 2026-10-25) : aluminium déployé enduit, en couches ── */
.f3d-t-tampon{--tp-1:#d9cba8;--tp-2:#a8946a;--tp-3:#5a4a33;--tp-4:#efe5cc}
.f3d-t-tampon.f3d-m-hw{--tp-1:#d5b98a;--tp-2:#a5844f;--tp-3:#55412a;--tp-4:#ecdab6}
.f3d-t-tampon>i,.f3d-t-tampon .f3d-b>i{background:var(--tp-3)}
.f3d .tp-m{position:absolute;inset:0;background:
  linear-gradient(125deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%,rgba(0,0,0,.18)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpath d='M0 0L12 7L24 0M0 14L12 7L24 14' fill='none' stroke='%2366543a' stroke-width='4.2' stroke-linejoin='round'/%3E%3Cpath d='M0 0L12 7L24 0M0 14L12 7L24 14' fill='none' stroke='%23f4ead2' stroke-opacity='0.95' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0/calc(var(--m) * 1.5) calc(var(--m) * .88),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpath d='M0 0L12 7L24 0M0 14L12 7L24 14' fill='none' stroke='%23382c1c' stroke-width='3.6' stroke-linejoin='round'/%3E%3Cpath d='M0 0L12 7L24 0M0 14L12 7L24 14' fill='none' stroke='%23a8916a' stroke-opacity='0.7' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") calc(var(--m) * .75) calc(var(--m) * .2)/calc(var(--m) * 1.5) calc(var(--m) * .88),
  radial-gradient(120% 90% at 35% 25%,#5b4930,#3a2e1d 60%,#2a2014)}
.f3d .tp-m::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 55%,rgba(40,28,10,.35));pointer-events:none}
.f3d .tp-v{position:absolute;inset:0;box-shadow:inset 0 0 0 calc(var(--t) * .5) rgba(60,45,20,.55),inset 0 0 calc(var(--t) * 2) rgba(20,12,0,.35)}
.f3d .ar .tp-m{filter:brightness(.9)}
.f3d .tp-c{position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,var(--tp-3) 0 1px,var(--tp-1) 1px calc(var(--t) * .55),var(--tp-2) calc(var(--t) * .55) calc(var(--t) * .9)),
  linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.18))}
.f3d .tp-c-h{background:repeating-linear-gradient(180deg,var(--tp-3) 0 1px,var(--tp-1) 1px calc(var(--t) * .55),var(--tp-2) calc(var(--t) * .55) calc(var(--t) * .9)),
  linear-gradient(90deg,rgba(255,255,255,.18),rgba(0,0,0,.18))}
.f3d-t-tampon.f3d-m-hw .tp-m{filter:sepia(.3) saturate(1.25) brightness(1.04)}