:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111; background: #f6f7f8; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { width: min(1060px, calc(100% - 32px)); margin: 48px auto 80px; }
.hero { max-width: 860px; margin-bottom: 28px; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; opacity: .6; }
h1 { font-size: clamp(36px, 6vw, 64px); line-height: .98; letter-spacing: -.048em; margin: 12px 0 18px; }
h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
p { line-height: 1.55; }
.card { background: #fff; border: 1px solid #e4e6e8; border-radius: 20px; padding: 25px; margin-top: 18px; box-shadow: 0 10px 30px rgba(0,0,0,.035); }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.section-head > div:first-child { display:flex; gap:10px; align-items:center; }
.step { width:30px; height:30px; border-radius:50%; background:#111; color:white; display:grid; place-items:center; font-size:13px; font-weight:800; flex:none; }
.tag { font-size:12px; padding:6px 9px; border:1px solid #dfe2e5; border-radius:999px; opacity:.7; white-space:nowrap; }
.hint, .legal { font-size:13px; opacity:.66; }
.photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:16px; }
.photo-card { border:1px dashed #cfd3d6; border-radius:16px; padding:16px; min-height:155px; display:flex; flex-direction:column; gap:8px; font-weight:750; cursor:pointer; overflow:hidden; }
.photo-copy { font-size:12px; line-height:1.45; font-weight:450; opacity:.65; }
.photo-card input { position:absolute; opacity:0; pointer-events:none; }
.preview-slot { margin-top:auto; min-height:68px; border-radius:11px; background:#f4f5f6; display:grid; place-items:center; font-size:12px; font-weight:650; opacity:.72; overflow:hidden; }
.preview-slot img { width:100%; height:110px; object-fit:cover; display:block; }
.question-list { display:grid; gap:14px; margin-top:18px; }
.question { border:1px solid #e5e7e9; border-radius:16px; padding:18px; margin:0; }
.question legend { font-size:16px; font-weight:760; padding:0 5px; }
.question-help { font-size:12px; opacity:.66; margin:4px 0 12px; }
.choices { display:flex; flex-wrap:wrap; gap:9px; }
.choices label { cursor:pointer; }
.choices input { position:absolute; opacity:0; pointer-events:none; }
.choices span { display:block; border:1px solid #dfe2e4; border-radius:999px; padding:9px 12px; font-size:13px; font-weight:650; background:#fff; }
.choices input:checked + span { border-color:#111; box-shadow:inset 0 0 0 1px #111; }
.help { margin-top:10px; font-size:12px; }
.help summary, .guide-grid summary { cursor:pointer; font-weight:700; }
.help p { margin:8px 0 0; opacity:.72; }
button.primary { margin-top:20px; border:0; border-radius:999px; padding:14px 20px; font:inherit; font-weight:800; cursor:pointer; background:#111; color:#fff; }
.results-head { display:flex; gap:18px; justify-content:space-between; align-items:flex-start; }
.legend { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; opacity:.65; justify-content:flex-end; }
.results { display:grid; gap:10px; margin-top:16px; }
.result { border:1px solid #e3e5e7; border-radius:15px; padding:16px; display:grid; grid-template-columns:200px 1fr auto; gap:14px; align-items:start; }
.result h3 { margin:0; font-size:16px; }
.result p { margin:4px 0 0; font-size:12px; opacity:.68; }
.badge { white-space:nowrap; font-size:13px; font-weight:800; }
.reason-list { margin:0; padding-left:18px; font-size:13px; line-height:1.5; }
.measure-list { display:grid; gap:12px; margin-top:16px; }
.measure-item { border:1px solid #e4e6e8; border-radius:15px; padding:16px; display:grid; grid-template-columns:1fr 180px; gap:16px; align-items:end; }
.measure-item h3 { margin:0 0 5px; font-size:15px; }
.measure-item p { margin:0; font-size:12px; opacity:.68; }
.measure-item input { width:100%; padding:11px 12px; border:1px solid #d7dadd; border-radius:10px; font:inherit; }
.guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.guide-grid details { border:1px solid #e5e7e9; border-radius:14px; padding:14px; }
.guide-grid p { font-size:13px; opacity:.75; margin-bottom:0; }
.mini-diagram { position:relative; height:86px; background:#f5f6f7; border-radius:10px; margin-top:10px; overflow:hidden; }
.mini-diagram .door { position:absolute; left:22%; top:10px; width:46%; height:66px; border:3px solid #555; border-right:0; }
.mini-diagram .frame { position:absolute; right:14%; top:4px; width:7px; height:78px; background:#777; }
.mini-diagram .keyhole { position:absolute; left:50%; top:33px; font-size:18px; }
.mini-diagram .measure-line { position:absolute; left:53%; right:16%; top:45px; border-top:2px dashed #888; text-align:center; font-size:11px; padding-top:3px; }
.handle-diagram .keyhole { left:24%; }
.handle-diagram .handle { position:absolute; right:20%; top:31px; font-size:28px; }
.handle-diagram .measure-line { left:30%; right:30%; }
.backset-diagram .edge { position:absolute; left:22%; top:8px; width:5px; height:70px; background:#777; }
.backset-diagram .keyhole { left:62%; }
.backset-diagram .measure-line { left:24%; right:36%; }
.footer-note { margin:18px 3px 0; }
@media (max-width:760px) {
  .shell { width:min(100% - 20px,1060px); margin-top:28px; }
  .photo-grid,.guide-grid { grid-template-columns:1fr; }
  .result,.measure-item { grid-template-columns:1fr; }
  .results-head,.section-head { align-items:flex-start; flex-direction:column; }
  .legend { justify-content:flex-start; }
  .choices { display:grid; grid-template-columns:1fr; }
  .choices span { border-radius:12px; }
}
.orientation-guide { display:grid; gap:7px; margin:14px 0 16px; padding:14px 16px; border:1px solid #e4e6e8; border-radius:14px; background:#f7f8f9; font-size:13px; line-height:1.45; }
.orientation-guide > strong { margin-bottom:2px; }
.orientation-guide span { display:block; }

.distinction { background:#f6f7f8; border-radius:10px; padding:9px 10px; opacity:1 !important; }
.measure-item::before { content:'Mesure demandée seulement si elle change une compatibilité'; grid-column:1 / -1; font-size:11px; font-weight:750; opacity:.45; text-transform:uppercase; letter-spacing:.04em; }

.anchor{display:block;position:relative;top:-90px;visibility:hidden}
.topbar{width:min(1060px,calc(100% - 32px));margin:20px auto 0;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px}
.topbar a{color:inherit;text-decoration:none}.topbar>div{display:flex;gap:18px}.brand{font-weight:900;font-size:17px;letter-spacing:-.02em}.brand span{font-size:10px;font-weight:650;opacity:.45;margin-left:5px}
.hero-cta{display:inline-block;margin-top:6px;padding:13px 18px;border-radius:999px;background:#111;color:#fff;text-decoration:none;font-weight:800;font-size:14px}
.proof-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.proof-row span{border:1px solid #e1e4e6;background:#fff;border-radius:999px;padding:8px 11px;font-size:12px}.proof-row b{font-weight:850}
.result{position:relative}.result-actions{display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:150px}.buy-link{display:inline-block;text-decoration:none;background:#111;color:#fff;padding:9px 12px;border-radius:999px;font-size:12px;font-weight:800;text-align:center}.source-link{font-size:11px;color:inherit;opacity:.58}.affiliate-ready{font-size:10px;font-weight:750;opacity:.56}.result.best-fit{border-color:#bfc4c8;box-shadow:0 7px 20px rgba(0,0,0,.045)}
.method-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}.method-grid>div{border:1px solid #e5e7e9;border-radius:14px;padding:14px}.method-grid p{font-size:12px;opacity:.68;margin:6px 0 0}.method-card a,.footer-note a{color:inherit}
.guide-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.guide-links a{display:flex;flex-direction:column;gap:5px;border:1px solid #e5e7e9;border-radius:14px;padding:15px;color:inherit;text-decoration:none}.guide-links span{font-size:12px;opacity:.65}
.outbound-note{font-size:11px;opacity:.58;margin-top:8px}
@media(max-width:760px){.topbar{width:min(100% - 20px,1060px)}.topbar>div{display:none}.method-grid,.guide-links{grid-template-columns:1fr}.result-actions{align-items:flex-start}.proof-row span{border-radius:12px}.shell{margin-top:28px}}