/* Calculateur de tores HB9V · hb9v.ch (design netVD). Tout est préfixé .ht : rien ne déborde sur la page. */
.ht{--ht-noir:var(--h9-noir,#0d0d0e);--ht-encre:var(--h9-encre,#1b1b1d);--ht-gris:var(--h9-gris,#6f6f74);--ht-ligne:var(--h9-ligne,#e4e2de);--ht-blanc:var(--h9-blanc,#fbfaf8);--ht-pierre:var(--h9-pierre,#eeedea);--ht-signal:var(--h9-signal,#ff5b1f);
  --ht-mono:"IBM Plex Mono",ui-monospace,monospace;--ht-titre:var(--h9-titre,system-ui);--ht-texte:var(--h9-texte,system-ui);
  position:relative;left:50%;width:min(1240px,calc(100vw - 32px));transform:translateX(-50%);margin:10px 0 60px;font:400 15.5px/1.55 var(--ht-texte);color:var(--ht-encre)}
.ht *,.ht *::before,.ht *::after{box-sizing:border-box}
.ht :where(h2,h3,p,dl,dd,table,figure){margin:0}
.ht button{font:inherit;cursor:pointer}
.ht svg{display:block;max-width:none!important;height:auto}

/* sections */
.ht-sec{padding:clamp(22px,3.4vw,40px);border:1px solid var(--ht-ligne);border-top:0;background:var(--ht-blanc)}
.ht-sec:first-child{border-top:1px solid var(--ht-ligne)}
.ht-sombre{background:radial-gradient(110% 90% at 100% 0,#1d1d21 0,var(--ht-noir) 62%);color:#f4f2ee;border-color:var(--ht-noir)}
.ht-t{display:flex;align-items:center;gap:12px;font:500 13px/1.3 var(--ht-titre);letter-spacing:.24em;text-transform:uppercase;margin-bottom:22px}
.ht-t i{font:400 11px/1 var(--ht-mono);font-style:normal;color:var(--ht-signal);display:flex;align-items:center;gap:10px;letter-spacing:0}
.ht-t i::after{content:"";width:24px;height:1px;background:currentColor;opacity:.5}
.ht-et{display:block;font:500 10.5px/1.3 var(--ht-texte);letter-spacing:.2em;text-transform:uppercase;color:var(--ht-gris);margin:18px 0 8px}
.ht-sombre .ht-et{color:#a9a9ae}
.ht-saisie > .ht-et:first-child{margin-top:0}
.ht-aide{color:#a9a9ae;font-size:14px;margin:14px 0 10px}
.ht-para{font-size:15px;line-height:1.6;margin-top:14px}
.ht-sous{font-size:13px;color:var(--ht-gris);margin-top:4px}
.ht-note{font-size:13px;color:var(--ht-gris);margin-top:16px;max-width:900px}

/* champs */
.ht-ch{display:flex;flex-direction:column;gap:6px;min-width:0;margin-top:16px}
.ht-ch > span:first-child{font:500 10.5px/1.3 var(--ht-texte);letter-spacing:.2em;text-transform:uppercase;color:var(--ht-gris)}
.ht-in{display:flex;align-items:stretch;border-bottom:1px solid var(--ht-ligne);transition:border-color .2s}
.ht-in:focus-within{border-color:var(--ht-signal)}
.ht-in input{flex:1;min-width:0;width:100%;background:none;border:0;outline:0;color:inherit;font:500 24px/1.2 var(--ht-mono);padding:6px 0;margin:0;box-shadow:none;border-radius:0}
.ht-in i{font:400 13px/1 var(--ht-mono);font-style:normal;color:var(--ht-gris);align-self:center;padding-left:8px}
.ht-deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:end}
.ht-deux > div{min-width:0}

/* puces */
.ht-puces{display:flex;flex-wrap:wrap;gap:6px}
.ht-puces button{background:var(--ht-blanc);border:1px solid var(--ht-ligne);color:var(--ht-encre);font:500 12.5px/1 var(--ht-mono);padding:8px 10px;transition:all .15s}
.ht-puces button:hover{border-color:var(--ht-encre)}
.ht-puces button.ht-on{background:var(--ht-encre);border-color:var(--ht-encre);color:var(--ht-blanc)}
.ht-petites{margin-top:10px}
.ht-petites button{font-size:12px;padding:7px 9px}
.ht-grandes button{background:none;border-color:#3a3a3f;color:#f4f2ee;font:600 13.5px/1 var(--ht-texte);padding:10px 14px}
.ht-grandes button.ht-on{background:var(--ht-signal);border-color:var(--ht-signal);color:var(--ht-noir)}
.ht-mixes{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ht-mixes button{display:flex;align-items:center;gap:7px;background:var(--ht-blanc);border:1px solid var(--ht-ligne);padding:5px 10px 5px 6px;font:500 13px/1 var(--ht-mono);color:var(--ht-encre)}
.ht-mixes button:hover{border-color:var(--ht-encre)}
.ht-mixes button.ht-on{background:var(--ht-encre);border-color:var(--ht-encre);color:var(--ht-blanc)}
.ht-mixes button.ht-on svg{filter:drop-shadow(0 0 1.5px rgba(255,255,255,.7))}

/* 01 · identifier */
.ht-ident{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:start}
.ht-nuancier{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
.ht-nuancier button{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:1px solid transparent;padding:8px 2px;color:#f4f2ee;transition:transform .2s,border-color .2s}
.ht-nuancier button:hover{transform:translateY(-3px)}
.ht-nuancier button.ht-on{border-color:var(--ht-signal)}
.ht-nuancier b{font:500 13px/1 var(--ht-mono)}
.ht-nuancier button.ht-on b{color:var(--ht-signal)}
.ht-fiche{border-left:1px solid #2a2a2e;padding-left:clamp(20px,3vw,40px)}
.ht-fiche-tete{display:flex;align-items:center;gap:24px}
.ht-fiche-tete svg{animation:ht-tourne 1s cubic-bezier(.2,.8,.2,1)}
@keyframes ht-tourne{from{transform:rotate(-90deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ht-fiche-tete svg{animation:none}}
.ht-fiche h3{font:500 clamp(30px,3.6vw,44px)/1.05 var(--ht-titre);color:#fff}
.ht-fiche-tete p{color:#a9a9ae;margin-top:4px}
.ht-fiche-tete b{display:block;font:500 22px/1 var(--ht-mono);color:var(--ht-signal);margin-top:12px}
.ht-fiche-usage{font-size:17px;line-height:1.6;margin-top:20px}
.ht-dl{display:grid;grid-template-columns:1fr 1fr;margin-top:20px;border-top:1px solid #2a2a2e}
.ht-dl div{padding:12px 0;border-bottom:1px solid #2a2a2e}
.ht-dl div:nth-child(even){padding-left:14px;border-left:1px solid #2a2a2e}
.ht-dl dt{font-size:12px;color:#a9a9ae}
.ht-dl dd{font:500 17px/1.3 var(--ht-mono);color:#fff;margin-top:4px}
.ht-dl dd.ht-txt{font:500 15px/1.35 var(--ht-texte)}

/* colonnes saisie / résultat */
.ht-deuxcol{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.ht-res{border-top:2px solid var(--ht-encre);padding-top:16px;position:sticky;top:90px}
.ht-nom{font:500 26px/1.2 var(--ht-titre);margin-top:16px}
.ht-nom small{display:block;font:400 13px/1.4 var(--ht-texte);color:var(--ht-gris);margin-top:4px}
.ht-res > .ht-nom:first-child{margin-top:0}
.ht-grand{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ht-grand b{display:block;font:500 clamp(64px,8vw,104px)/1 var(--ht-mono);letter-spacing:-.04em}
.ht-grand small{display:block;font-size:13px;color:var(--ht-gris);margin-top:6px}
.ht-grand .ht-et{margin-top:0}
.ht-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-top:1px solid var(--ht-ligne);border-left:1px solid var(--ht-ligne);margin-top:18px}
.ht-case{padding:14px;border-right:1px solid var(--ht-ligne);border-bottom:1px solid var(--ht-ligne);min-width:0}
.ht-case > span{display:block;font:500 10px/1.3 var(--ht-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--ht-gris)}
.ht-case b{display:block;font:500 22px/1.2 var(--ht-mono);margin-top:8px}
.ht-case small{display:block;font-size:12.5px;line-height:1.4;color:var(--ht-gris);margin-top:4px}
.ht-alerte{margin-top:10px;padding:10px 14px 10px 36px;background:var(--ht-pierre);position:relative;font-size:14px;line-height:1.5}
.ht-alerte::before{content:"!";position:absolute;left:12px;top:12px;width:16px;height:16px;border-radius:50%;color:#fff;font:600 11px/16px var(--ht-mono);text-align:center;background:var(--ht-gris)}
.ht-a-o::before{background:var(--ht-signal)}
.ht-a-r::before{background:#c0392b}
.ht-rapport{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:6px}
.ht-rapport b{font:500 clamp(56px,7vw,92px)/1 var(--ht-mono);letter-spacing:-.04em}
.ht-rapport em{font:500 48px/1 var(--ht-mono);font-style:normal;color:var(--ht-signal)}
.ht-rapport small{font:400 22px/1 var(--ht-mono);color:var(--ht-gris)}
.ht-niv{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--ht-texte);font-style:normal;border:1px solid;border-radius:99px;padding:4px 9px;margin-top:8px}
.ht-niv::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ht-v{color:#1f8a4c}.ht-o{color:#c98a00}.ht-r{color:#c0392b}

/* conseils */
.ht-conseil{display:flex;gap:16px;align-items:flex-start;padding:14px;border:1px solid var(--ht-ligne);margin-top:8px}
.ht-conseil h3{font:600 16px/1.3 var(--ht-texte)}
.ht-conseil h3 em{font-style:normal;color:var(--ht-signal);margin-left:6px}
.ht-conseil p{font-size:14px;line-height:1.5;margin-top:4px}
.ht-premier{border-color:var(--ht-signal)}
.ht-lien{background:none;border:0;padding:0;margin-top:8px;font:600 11px/1.3 var(--ht-texte)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--ht-signal)}
.ht-lien:hover{text-decoration:underline}
.ht-tailles{font:500 20px/1.3 var(--ht-mono);display:flex;flex-wrap:wrap;gap:12px}
.ht-tailles i{font-style:normal;color:var(--ht-gris)}
.ht-mu{font:500 clamp(48px,6vw,72px)/1 var(--ht-mono);letter-spacing:-.03em}

/* tableau */
.ht-tab-wrap{overflow-x:auto}
.ht-tab{width:100%;border-collapse:collapse;font-size:14px}
.ht-tab th{text-align:left;font:500 10px/1.3 var(--ht-texte);letter-spacing:.18em;text-transform:uppercase;color:var(--ht-gris);padding:10px;border-bottom:2px solid var(--ht-encre)}
.ht-tab td{padding:10px;border-bottom:1px solid var(--ht-ligne);vertical-align:middle}
.ht-tab td b{font:500 15px/1 var(--ht-mono)}
.ht-tab-c{display:flex;align-items:center;gap:10px;font-weight:600;min-width:150px}
.ht-nw{white-space:nowrap;font-family:var(--ht-mono);font-size:13px}

/* bon à savoir */
.ht-savoir{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--ht-ligne);border:1px solid var(--ht-ligne)}
.ht-savoir > div{background:var(--ht-blanc);padding:20px}
.ht-savoir h3{font:600 16px/1.3 var(--ht-texte);margin-bottom:8px}
.ht-savoir h3::before{content:"";display:block;width:22px;height:2px;background:var(--ht-signal);margin-bottom:12px}
.ht-savoir p{font-size:14.5px;line-height:1.6}

@media (max-width:860px){
  .ht-ident,.ht-deuxcol{grid-template-columns:1fr}
  .ht-fiche{border-left:0;padding-left:0;border-top:1px solid #2a2a2e;padding-top:22px}
  .ht-res{position:static}
  .ht-grand figure svg{width:150px;height:150px}
}
@media (max-width:520px){
  .ht{width:calc(100vw - 20px)}
  .ht-deux{gap:12px}
  .ht-ch > span:first-child,.ht-et{letter-spacing:.12em}
  .ht-in input{font-size:20px}
  .ht-fiche-tete svg{width:110px;height:110px}
  .ht-tab th:nth-child(5),.ht-tab td:nth-child(5){display:none}
}