/* Mini-calculateurs (js/h2o-mini.js) */
.mn { margin: 2.2rem 0; padding: 1.4rem; background: #fff; border: 1px solid #e7e1d3; border-radius: 18px; box-shadow: 0 12px 30px rgba(15,42,46,.1); }
.mn-tag { display: inline-block; margin: 0 0 .5rem; background: #f4c430; color: #1a1a1a; font: 800 .7rem/1 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; padding: .38rem .55rem; border-radius: 5px; }
.mn-titre { margin: 0 0 1.1rem; font: 800 1.35rem/1.2 var(--font-sans); color: #0f2a2e; }
.mn-grille { display: grid; gap: 1.4rem; }
@media (min-width: 760px) { .mn-grille { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.mn-champ { display: block; margin: 0 0 1rem; }
.mn-l { display: block; font-weight: 700; font-size: .93rem; color: #33403d; margin-bottom: .35rem; }
.mn-ligne { display: flex; align-items: center; gap: .8rem; }
.mn-ligne output { min-width: 7.5ch; text-align: right; font: 800 1.02rem/1 var(--font-sans); color: #0f2a2e; font-variant-numeric: tabular-nums; }
.mn input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 4px; cursor: pointer;
  background: linear-gradient(90deg, #2f6f74 var(--p, 50%), #e6e0d2 var(--p, 50%)); }
.mn input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 4px solid #2f6f74; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.mn input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid #2f6f74; }
.mn input[type=range]:focus-visible { outline: 3px solid #f4c430; outline-offset: 4px; }
.mn-res { background: #0f2a2e; color: #fff; border-radius: 14px; padding: 1.2rem 1.25rem; }
.mn-res-l { margin: 0; color: rgba(255,255,255,.75); font-size: .88rem; font-weight: 600; }
.mn-gros { margin: .15rem 0 .6rem; font: 800 clamp(2rem, 5vw, 2.6rem)/1 var(--font-sans); color: #f4c430; font-variant-numeric: tabular-nums; }
.mn-moyen { margin: .15rem 0 .6rem; font: 800 1.5rem/1 var(--font-sans); color: #fff; }
.mn-pile { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; background: rgba(255,255,255,.1); }
.mn-seg { transition: flex-grow .5s ease; min-width: 2px; }
.mn-s0 { background: #f4c430; } .mn-s1 { background: #5fb3b8; } .mn-s2 { background: #e8896f; }
.mn-leg { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .55rem 0 0; font-size: .82rem; color: rgba(255,255,255,.85); }
.mn-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.mn-jauge { height: 16px; border-radius: 8px; background: rgba(255,255,255,.15); overflow: hidden; }
.mn-jauge i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5fb3b8, #f4c430); border-radius: 8px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.mn-vide i { background: linear-gradient(90deg, #e8896f, #f4c430); }
.mn-jauge-l { margin: .4rem 0 0; font-size: .85rem; color: rgba(255,255,255,.8); }
.mn-phrase { margin: .9rem 0 1rem; font-size: .93rem; line-height: 1.45; color: rgba(255,255,255,.9); }
.mn-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.mn-actions .btn { margin: 0; }
.mn-res .btn-secondary { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.8); box-shadow: none; }
.mn-note { margin: .9rem 0 0; font-size: .8rem; color: #6b736f; }
@media (max-width: 640px) { .mn { padding: 1.1rem; } .mn-actions .btn { flex: 1 1 100%; text-align: center; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .mn-seg, .mn-jauge i { transition: none; } }