/* Composants communs. Chaque maquette fournit : --c-bg --c-fg --c-mute --c-line --c-accent --c-accent-fg --c-card --radius --font-ui */

/* Avant / après */
.ba{margin:0}
.ba__frame{position:relative;overflow:hidden;border-radius:var(--radius);touch-action:pan-y;isolation:isolate;background:var(--c-card)}
.ba__img{display:block;width:100%;height:auto}
.ba__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__before .ba__img{height:100%;object-fit:cover}
.ba__frame input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba__frame:has(input:focus-visible){outline:3px solid var(--c-accent);outline-offset:3px}
.ba__handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.ba__handle svg{position:absolute;top:50%;left:50%;width:46px;height:46px;max-width:none;padding:12px;box-sizing:border-box;margin:-23px 0 0 -23px;border-radius:50%;background:var(--c-accent);color:var(--c-accent-fg);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.ba__tag{position:absolute;top:14px;padding:.3em .7em;border-radius:99px;background:rgba(10,18,12,.72);color:#fff;font:600 .78rem/1.2 var(--font-ui);letter-spacing:.02em;pointer-events:none;backdrop-filter:blur(4px)}
.ba__tag--l{left:14px}.ba__tag--r{right:14px}

/* Haubanage */
.hb{display:grid;gap:18px}
.hb__ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hb__mode,.hb__run{font:600 .95rem/1 var(--font-ui);min-height:44px;padding:0 18px;border-radius:99px;border:1.5px solid var(--c-line);background:transparent;color:var(--c-fg);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hb__mode[aria-pressed=true]{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg)}
.hb__run{margin-left:auto;background:var(--c-accent);color:var(--c-accent-fg);border-color:var(--c-accent)}
.hb__run:hover,.hb__mode:hover{filter:brightness(1.08)}
.hb svg{display:block;width:100%;height:auto;background:var(--c-card);border-radius:var(--radius)}
.hb__ground{stroke:currentColor;stroke-width:2;opacity:.35}
.hb__house path:not(.hb__crack){fill:var(--hb-house,#cdbfa6)}
.hb__win{fill:var(--c-bg);opacity:.75}
.hb__crack{fill:none;stroke:#d8321a;stroke-width:3;stroke-linejoin:round;opacity:0;transition:opacity .15s .25s}
.hb svg[data-broken="1"][data-hauban="0"] .hb__crack{opacity:1}
.hb__tree>path,.hb__branch>path{fill:var(--hb-wood,#5a3a26)}
.hb__leaf circle{fill:var(--hb-leaf,#4f7d3a)}
.hb__branch .hb__leaf circle{fill:var(--hb-leaf-2,#5f9046)}
.hb__rope{stroke:var(--c-accent);stroke-width:3.5;stroke-linecap:round}
.hb__knot{fill:var(--c-accent)}
.hb svg[data-hauban="0"] .hb__rope,.hb svg[data-hauban="0"] .hb__knot,.hb svg[data-hauban="0"] .hb__label--rope{display:none}
.hb__break{fill:none;stroke:#d8321a;stroke-width:3;opacity:0}
.hb svg[data-broken="1"] .hb__break{opacity:1}
.hb__label{font:600 14px var(--font-ui);fill:currentColor}
.hb__label--rope{fill:var(--c-accent)}
.hb__label--house{opacity:.7;font-weight:500}
.hb__msg{margin:0;min-height:3em;font-size:1.05rem}
.hb{color:var(--c-fg)}

/* Diagnostic */
.dg{padding:clamp(20px,4vw,40px);border-radius:var(--radius);background:var(--c-card);color:var(--c-fg)}
.dg__count{margin:0 0 .6em;font:600 .8rem/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--c-mute)}
.dg h3{margin:0 0 .8em;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.1}
.dg__opts{display:grid;gap:10px}
.dg__opts button{min-height:56px;padding:12px 18px;text-align:left;font:500 1.02rem/1.25 var(--font-ui);color:inherit;background:transparent;border:1.5px solid var(--c-line);border-radius:12px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}
.dg__opts button:hover,.dg__opts button:focus-visible{background:var(--c-fg);color:var(--c-bg);border-color:var(--c-fg);transform:translateX(4px)}
.dg__pre{margin:0 0 .3em;color:var(--c-mute)}
.dg__note{padding-left:12px;border-left:3px solid var(--c-accent)}
.dg__warn{font-size:.9rem;color:var(--c-mute)}
.dg__act{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* Formulaire */
.fm{display:grid;gap:16px}
.fm__row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fm label{display:grid;gap:6px;font:600 .9rem/1.2 var(--font-ui);color:var(--c-fg)}
.fm input,.fm select,.fm textarea{width:100%;min-height:50px;padding:12px 14px;font:400 1rem/1.3 var(--font-ui);color:var(--c-fg);background:transparent;border:1.5px solid var(--c-line);border-radius:10px;box-sizing:border-box}
.fm select option{color:#111}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent) 28%,transparent)}
.fm__help,.fm__done{margin:0;font-size:.88rem;color:var(--c-mute)}
.fm__done{color:var(--c-fg);padding:12px;border-left:3px solid var(--c-accent)}
.fm .btn{justify-self:start}