#al-filtration-sc{--teal:#0F766E;--mint:#D6F5EC;--verde:#97C9B7;--ink:#0F172A;--muted:#475569;--line:#E5E7EB;--radius:16px;--shadow:0 10px 25px rgba(15,23,42,.08);--shadow-sm:0 6px 16px rgba(15,23,42,.06);--maxw:1100px;color:var(--ink);font-family:Lato,system-ui,Arial,sans-serif;line-height:1.6}
#al-filtration-sc *{box-sizing:border-box}
#al-filtration-sc .wrap{max-width:var(--maxw);margin:0 auto;padding:clamp(20px,4vw,40px)}
#al-filtration-sc h1,#al-filtration-sc h2,#al-filtration-sc h3{font-family:Poppins,system-ui,Arial,sans-serif;color:var(--teal);line-height:1.25;margin:0 0 .5em}
#al-filtration-sc h1{font-size:clamp(28px,4.8vw,44px)}
#al-filtration-sc h2{font-size:clamp(22px,3.2vw,28px)}
#al-filtration-sc h3{font-size:clamp(18px,2.4vw,22px)}
#al-filtration-sc .hero{background:linear-gradient(180deg,#f7fffc 0%, #fff 70%);border:1px solid var(--line);border-radius:var(--radius)}
#al-filtration-sc .pill{display:inline-flex;gap:8px;background:var(--mint);color:var(--teal);padding:6px 12px;border-radius:999px;font:700 13px Poppins,system-ui}
#al-filtration-sc .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
#al-filtration-sc .btn{display:inline-block;padding:12px 18px;border-radius:var(--radius);font-weight:700}
#al-filtration-sc .btn.primary{background:var(--verde);color:#fff;box-shadow:var(--shadow)}
#al-filtration-sc .btn.secondary{background:#fff;color:var(--teal);border:2px solid var(--teal)}
#al-filtration-sc .grid{display:grid;gap:clamp(12px,2vw,18px)}
#al-filtration-sc .grid.cols-3{grid-template-columns:1fr}
#al-filtration-sc .grid.cols-2{grid-template-columns:1fr}
@media(min-width:768px){#al-filtration-sc .grid.cols-3{grid-template-columns:repeat(3,1fr)}#al-filtration-sc .grid.cols-2{grid-template-columns:repeat(2,1fr)}}
#al-filtration-sc .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,2.6vw,22px);box-shadow:var(--shadow-sm)}
#al-filtration-sc label{font-weight:700}
#al-filtration-sc input[type=number],#al-filtration-sc select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
#al-filtration-sc .result{padding:12px 14px;border-radius:12px;background:var(--mint);border:1px solid #cfece3}
#al-filtration-sc .chart-card{height:clamp(240px,40vw,420px);position:relative}
#al-filtration-sc canvas{position:absolute;inset:10px}
#al-filtration-sc .muted{color:var(--muted)}
#al-filtration-sc .ul-pad{margin-left:18px}

/* Restaure les spinners natifs, si masqués par le thème */
#al-filtration-sc input[type=number]{appearance:auto !important;-moz-appearance:number-input !important;}
#al-filtration-sc input[type=number]::-webkit-inner-spin-button,
#al-filtration-sc input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:auto !important; margin:0 !important; opacity:1 !important; }

/* Stepper inline (+/−) à droite de l'input */
#al-filtration-sc .input-row .num-with-stepper{ position:relative; display:flex; align-items:center;}
#al-filtration-sc .input-row .num-with-stepper input{ padding-right:56px; }
#al-filtration-sc .input-row .num-with-stepper .step{ position:absolute; right:6px; width:24px; height:24px; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer; font-size:12px; line-height:1; display:grid; place-items:center; }
#al-filtration-sc .input-row .num-with-stepper .step.up{ top:6px; }
#al-filtration-sc .input-row .num-with-stepper .step.down{ top:34px; }
#al-filtration-sc .input-row .num-with-stepper .step:active{ transform:translateY(1px); }