.abr-outil {
--abr-outil-accent: var(--abr-orange, #ff9f25);
--abr-outil-ink: var(--abr-ink, #2b2b2b);
--abr-outil-muted: var(--abr-muted, #65615b);
--abr-outil-paper: var(--abr-beige, #fff7eb);
--abr-outil-border: var(--abr-border, #e7d8c5);
box-sizing: border-box; color: var(--abr-outil-ink); background: #fff;
border: 1px solid var(--abr-outil-border); border-radius: var(--abr-radius, 10px);
padding: clamp(16px, 3vw, 32px); margin: 24px auto; max-width: 940px; min-width: 0;
font-family: inherit; font-size: 16px; line-height: 1.5; text-align: left; overflow-wrap: anywhere;
scroll-margin-top: 32px;
}
.abr-outil *, .abr-outil *::before, .abr-outil *::after { box-sizing: border-box; }
.abr-outil [hidden], .abr-outil .abr-outil__print-only { display: none !important; }
.abr-outil h2 { margin: 0 0 12px; color: inherit; font-size: clamp(23px, 3vw, 30px); font-weight: 700; line-height: 1.25; }
.abr-outil h3 { margin: 16px 0 8px; font-size: 18px; font-weight: 650; line-height: 1.35; color: inherit; }
.abr-outil p { margin: 0 0 12px; }
.abr-outil a { color: var(--abr-link, #1565c0); text-decoration: underline; text-underline-offset: 3px; }
.abr-outil .abr-outil__intro { font-size: 17px; }
.abr-outil .abr-outil__small, .abr-outil .abr-outil__help, .abr-outil .abr-outil__privacy, .abr-outil .abr-outil__caption { color: var(--abr-outil-muted); font-size: 14px; line-height: 1.5; }
.abr-outil .abr-outil__privacy { margin: 16px 0 0; }
.abr-outil fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.abr-outil legend { display: block; float: none; padding: 0; font-size: 17px; font-weight: 650; color: inherit; max-width: 100%; }
.abr-outil .abr-outil__measure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0 24px; }
.abr-outil .abr-outil__measure { padding: 12px 14px 16px; border: 1px solid var(--abr-outil-border); border-radius: 8px; }
.abr-outil .abr-outil__measure legend { padding: 0 6px; }
.abr-outil .abr-outil__measure-guide { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 1.1fr); align-items: center; gap: 12px; margin-bottom: 14px; }
.abr-outil .abr-outil__measure-guide img { display: block; width: 100%; height: auto; }
.abr-outil .abr-outil__measure-guide p { margin: 0; font-size: 14px; }
.abr-outil .abr-outil__entry { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.abr-outil input[type=text] { appearance: none; width: 94px; min-width: 0; max-width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid #807467; border-radius: 5px; background: #fff; color: #2b2b2b; font: inherit; box-shadow: none; }
.abr-outil input[type=text]:disabled { background: #f0eee9; color: #5f5a53; }
.abr-outil .abr-outil__unknown, .abr-outil .abr-outil__choices label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 400; cursor: pointer; margin: 0; }
.abr-outil .abr-outil__unknown { margin-left: auto; }
.abr-outil input[type=radio], .abr-outil input[type=checkbox] { appearance: auto; position: static; width: 19px; height: 19px; min-width: 19px; margin: 0; accent-color: #a64f00; opacity: 1; }
.abr-outil .abr-outil__choices { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0; }
.abr-outil .abr-outil__growth { margin: 8px 0 14px; }
.abr-outil .abr-outil__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.abr-outil .abr-outil__button { appearance: none; border: 1px solid #9c4900; border-radius: 7px; padding: 11px 17px; min-height: 46px; max-width: 100%; white-space: normal; background: var(--abr-outil-accent); color: #2b2b2b; font: inherit; font-weight: 650; line-height: 1.4; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; }
.abr-outil .abr-outil__button:hover { background: #ffc06b; color: #2b2b2b; }
.abr-outil .abr-outil__button--secondary { background: #fff; border-color: #807467; }
.abr-outil .abr-outil__button--secondary:hover { background: var(--abr-outil-paper); }
.abr-outil :focus-visible { outline: 3px solid #1565c0; outline-offset: 4px; }
.abr-outil [tabindex="-1"]:focus { outline: 2px solid #1565c0; outline-offset: 5px; }
.abr-outil .abr-outil__error { color: #882020; font-size: 14px; font-weight: 650; margin: 10px 0 0; }
.abr-outil [aria-invalid=true] { border: 2px solid #882020; }
.abr-outil .abr-outil__dimensions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 18px; }
.abr-outil .abr-outil__dimension { padding: 15px; background: var(--abr-outil-paper); border: 1px solid var(--abr-outil-border); border-top: 3px solid #a64f00; border-radius: 6px; min-width: 0; }
.abr-outil .abr-outil__dimension h3 { margin: 0 0 12px; font-size: 16px; min-height: 44px; }
.abr-outil .abr-outil__number { font-size: clamp(26px, 3vw, 36px); font-weight: 750; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
.abr-outil .abr-outil__number--missing { font-size: 22px; }
.abr-outil .abr-outil__dimension .abr-outil__help { margin: 10px 0 0; }
.abr-outil .abr-outil__growth-note { font-size: 14px; color: var(--abr-outil-muted); }
.abr-outil .abr-outil__notice { background: var(--abr-outil-paper); border-left: 3px solid #a64f00; padding: 12px; }
.abr-outil .abr-outil__roof-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 8px; }
.abr-outil .abr-outil__roof-selector label { font-weight: 650; margin: 0; }
.abr-outil .abr-outil__roof-selector select { width: auto; flex: 1 1 220px; max-width: 320px; }
.abr-outil select { color: #2b2b2b; background-color: #fff; border: 1px solid #807467; border-radius: 5px; min-height: 44px; max-width: 100%; font: inherit; padding: 8px 30px 8px 10px; }
.abr-outil .abr-outil__drawings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.abr-outil .abr-outil__drawings figure { margin: 0; min-width: 0; padding: 8px; border: 1px solid var(--abr-outil-border); border-radius: 6px; }
.abr-outil .abr-outil__drawings figcaption { text-align: center; font-size: 14px; font-weight: 600; }
.abr-outil .abr-outil__diagram { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.abr-outil .abr-outil__caption { font-size: 13px; margin: 8px 0 16px; }
.abr-outil .abr-outil__checks { margin: 16px 0; padding: 12px 16px; background: #faf8f4; border-radius: 6px; }
.abr-outil .abr-outil__checks h3 { margin-top: 0; }
.abr-outil .abr-outil__checks p { font-size: 15px; margin-bottom: 8px; }
.abr-outil .abr-outil__checks p:last-child { margin-bottom: 0; }
.abr-outil details { margin-top: 12px; border-top: 1px solid var(--abr-outil-border); padding-top: 8px; }
.abr-outil summary { display: list-item; list-style: disclosure-closed; font-weight: 650; cursor: pointer; padding: 8px 0; color: inherit; }
.abr-outil details[open] > summary { list-style: disclosure-open; margin-bottom: 8px; }
.abr-outil .abr-outil__method-body { font-size: 15px; }
.abr-outil .abr-outil__facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; margin: 8px 0; }
.abr-outil dt, .abr-outil dd { margin: 0; border-bottom: 1px solid var(--abr-outil-border); padding: 6px 0; }
.abr-outil dt { font-weight: 600; }
.abr-outil ul { margin: 10px 0 16px; padding-left: 22px; }
.abr-outil li { margin-bottom: 6px; }
.abr-outil .abr-outil__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 620px) {
.abr-outil .abr-outil__measure-grid, .abr-outil .abr-outil__dimensions, .abr-outil .abr-outil__drawings { grid-template-columns: minmax(0, 1fr); }
.abr-outil .abr-outil__dimension { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; }
.abr-outil .abr-outil__dimension h3 { margin: 0; min-height: 0; }
.abr-outil .abr-outil__dimension .abr-outil__help { grid-column: 1 / -1; }
.abr-outil .abr-outil__number { text-align: right; }
.abr-outil .abr-outil__roof-selector { align-items: stretch; flex-direction: column; }
.abr-outil .abr-outil__roof-selector select { flex: none; width: 100%; }
.abr-outil .abr-outil__actions { flex-direction: column; align-items: stretch; }
.abr-outil .abr-outil__choices { gap: 4px 18px; }
.abr-outil .abr-outil__measure-guide { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.abr-outil .abr-outil__measure-guide img { max-width: 230px; margin: 0 auto; }
.abr-outil .abr-outil__unknown { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
.abr-outil *, .abr-outil *::before, .abr-outil *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
html.abr-outil-print-mode .abr-outil-print-ancestor > :not(.abr-outil-print-ancestor):not(.abr-outil--printing) { display: none !important; }
html.abr-outil-print-mode .abr-outil-print-ancestor { display: block !important; position: static !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; background: #fff !important; }
.abr-outil .abr-outil__actions, .abr-outil .abr-outil__no-print, .abr-outil .abr-outil__sr, .abr-outil .abr-outil__privacy, .abr-outil.abr-outil--result [data-abr-fallback] { display: none !important; }
.abr-outil .abr-outil__print-only { display: block !important; }
.abr-outil { border: 0; padding: 0; margin: 0; max-width: none; font-size: 10pt; line-height: 1.35; color: #000; background: #fff; }
.abr-outil :focus { outline: none !important; }
.abr-outil h2 { font-size: 19pt; }
.abr-outil h3 { font-size: 11pt; break-after: avoid; }
.abr-outil .abr-outil__dimensions { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8pt; margin: 12pt 0; }
.abr-outil .abr-outil__dimension { display: block; padding: 8pt; break-inside: avoid; background: #fff; }
.abr-outil .abr-outil__dimension h3 { font-size: 10pt; min-height: 28pt; margin-bottom: 6pt; }
.abr-outil .abr-outil__number { font-size: 23pt; text-align: left; }
.abr-outil .abr-outil__number--missing { font-size: 14pt; }
.abr-outil .abr-outil__drawings { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10pt; break-inside: avoid; margin-top: 10pt; }
.abr-outil .abr-outil__diagram { max-width: 210px; }
.abr-outil .abr-outil__drawings figcaption, .abr-outil .abr-outil__caption { font-size: 8pt; }
.abr-outil .abr-outil__help, .abr-outil .abr-outil__growth-note, .abr-outil .abr-outil__checks p { font-size: 9pt; }
.abr-outil p { margin-bottom: 6pt; orphans: 3; widows: 3; }
.abr-outil .abr-outil__checks { padding: 6pt 8pt; margin: 8pt 0; background: #fff; border: 1px solid #999; break-inside: avoid; }
.abr-outil .abr-outil__bedding { font-size: 9pt; }
.abr-outil .abr-outil__method { break-before: page; border: 0; margin: 0; padding: 0; }
.abr-outil .abr-outil__method-body { font-size: 10pt; }
.abr-outil summary { list-style: none !important; font-size: 11pt; padding: 4pt 0; margin: 0 0 4pt !important; }
.abr-outil summary::marker { content: ''; }
.abr-outil summary::-webkit-details-marker { display: none; }
.abr-outil .abr-outil__facts { font-size: 9pt; }
.abr-outil .abr-outil__recap { break-inside: avoid; }
.abr-outil .abr-outil__facts dt, .abr-outil .abr-outil__facts dd { padding: 4px 0; }
.abr-outil a { color: #000; text-decoration: underline; }
.abr-outil ul { margin: 6pt 0 10pt; }
.abr-outil li { margin-bottom: 4pt; }
}