/* IMENU-OUTILS-20261103: alleen op /outils en de twee tools. Bouwt voort op site.css; logische eigenschappen voor RTL. */

/* De tool is het eerste wat telt: op de telefoon geen grote foto ertussen. */
@media (max-width:899px){.o-outil .hs-img{display:none}.o-outil .hs-t{padding-bottom:40px}}

/* overzicht */
.o-hub{display:grid}
.o-hub article{display:grid;gap:22px;padding-block:clamp(28px,4vw,48px);border-top:1px solid var(--fil)}
.o-hub article:last-child{border-bottom:1px solid var(--fil)}
.o-hub h2{font-size:clamp(1.8rem,3.6vw,2.8rem);max-width:none}
.o-hub p{margin-top:10px;color:var(--doux);max-width:58ch}
.o-hub .btn{justify-self:start}

/* adresveld in de kop */
.o-url{margin-top:28px;max-width:560px;gap:14px}
.o-att{margin:0}

/* wat we controleren */
.o-chapo{margin-top:16px;color:var(--doux);max-width:56ch;font-size:1.08rem}
.o-quoi-l{margin-top:clamp(24px,4vw,40px);max-width:none}
.o-quoi-l b{display:block;font-weight:500}
.o-quoi-l p{color:var(--doux);font-size:1rem;margin-top:2px}

/* rapport */
.o-rap h2:focus{outline:0}
.o-adr{margin-top:10px;color:var(--doux);overflow-wrap:anywhere}
.o-score{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:clamp(20px,3vw,32px)}
.o-score strong{font:300 clamp(3.2rem,9vw,5.4rem)/1 var(--titre);font-variant-numeric:tabular-nums;color:var(--maj);letter-spacing:-.02em}
html[dir=rtl] .o-score strong{font-family:"Readex Pro",system-ui,sans-serif}
.o-score span{font-size:1.12rem}
.o-balk{display:flex;gap:4px;margin-top:18px;max-width:560px}
.o-balk i{flex:1;height:8px;border-radius:2px;background:#d8d2c3}
.o-balk i.j{background:var(--vert)}
.o-gr{margin-top:clamp(32px,5vw,52px);font-size:clamp(1.4rem,2.6vw,1.8rem)}
.o-pts{margin-top:14px;max-width:860px}
.o-pts li{grid-template-columns:28px minmax(0,1fr)}
.o-pts .ko svg{color:var(--terra)}
.o-pts .ok svg{color:var(--vert)}
.o-rg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.o-rg b{font-weight:500}
.o-rg .o-w{color:var(--doux);font-size:.96rem;font-variant-numeric:tabular-nums;unicode-bidi:plaintext}
.o-e{margin-inline-start:auto;padding:2px 10px;border-radius:var(--r);font-size:.86rem;font-weight:500;white-space:nowrap}
.ok>div>.o-rg .o-e{background:#e4f4ee;color:#07483a}
.ko>div>.o-rg .o-e{background:#fbeae3;color:#7c2f12}
.o-pts p{color:var(--doux);font-size:1rem;margin-top:4px}
.o-note{margin-top:clamp(28px,4vw,40px);max-width:70ch;padding-block-start:16px;border-top:1px solid var(--fil);color:var(--doux);font-size:.96rem}
.o-note+.o-note{margin-top:12px;padding:0;border:0}
.o-leeg h2{max-width:24ch}
.o-leeg p{margin-top:14px;max-width:60ch;color:var(--doux);font-size:1.08rem}

/* QR */
.o-qr{gap:22px;box-shadow:none;border:1px solid var(--fil);padding:clamp(18px,3vw,36px)}
.o-qr textarea{min-height:104px}
.o-qr-opt{display:grid;gap:18px}
.o-fs{border:0;margin:0;padding:0;min-width:0}
.o-fs legend{padding:0}
.form .opts label small{color:inherit;font-size:.86em}
.form .opts label{min-height:48px}
.o-col{display:flex;align-items:center;gap:12px}
.o-qr input[type=color]{appearance:none;-webkit-appearance:none;width:72px;height:56px;padding:4px;border:1.5px solid #c8c3b5;border-radius:var(--r);background:var(--ivoire);cursor:pointer;flex:none}
.o-qr input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.o-qr input[type=color]::-webkit-color-swatch{border:0;border-radius:3px}
.o-qr input[type=color]::-moz-color-swatch{border:0;border-radius:3px}
.o-col output{font-variant-numeric:tabular-nums;font-weight:500}
.o-h{margin-top:6px}
.o-vue{display:grid;place-items:center;aspect-ratio:1;width:min(100%,380px);margin-inline:auto;background:#fff;border:1.5px dashed #c8c3b5;border-radius:var(--r);overflow:hidden}
.o-vue.vol{border:1.5px solid var(--fil);aspect-ratio:auto}
.o-vue svg{width:100%;height:auto}
.o-vue p{padding:20px;text-align:center;color:var(--doux)}
.o-qr-vue{display:grid;gap:14px;min-width:0;align-content:start}
.o-dl{display:grid;gap:10px}
.o-qr .ret{font-size:.98rem}
.o-qr .ret.mid{background:#fbf1d6;color:#5c4503}
.form .o-dl .btn{min-height:56px}
.o-dl .b-tr{background:transparent}
.o-qr .b-tr:disabled:hover{color:inherit}
.o-qr .btn:disabled::after{display:none}

@media (min-width:600px){
  .o-dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .o-hub article{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:60px}
  .o-quoi-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px}
  .o-qr{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"lien vue" "opt vue";grid-template-rows:auto 1fr;gap:26px clamp(36px,5vw,72px)}
  .o-qr-lien{grid-area:lien}.o-qr-vue{grid-area:vue}.o-qr-opt{grid-area:opt;align-content:start}
}