/* Couleurs, police et carte repris de quiz.html. */
:root{--bg:#f6f8fb;--card:#fff;--text:#1f2937;--muted:#6b7280;--primary:#2563eb;--border:#e5e7eb;--shadow:0 10px 24px rgba(2,8,23,.06)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;touch-action:manipulation}button,a{-webkit-tap-highlight-color:transparent}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
.site-header{background:#fff;border-bottom:1px solid var(--border)}.site-header-inner{height:68px;max-width:1200px;margin:auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:21px;font-weight:800;letter-spacing:-.5px;color:#111827}.brand span{color:#2563eb}.brand:hover{text-decoration:none}.test-label{font-size:13px;color:var(--muted)}
.wrap{max-width:1200px;margin:32px auto;padding:0 20px}.backlink{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;color:#2563eb;min-height:44px}
.qcard{max-width:900px;margin:24px auto;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}.qhead{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}.counter{font-size:16px;font-weight:700;line-height:1.6;margin:0}.pill{font-size:12px;border-radius:999px;padding:4px 8px;background:#f3f4f6;color:#111827}.qbody{padding:20px}.question-title{font-size:16px;font-weight:600;margin:0 0 8px}.instruction{font-size:16px;margin:0 0 24px}.exercise-group+.exercise-group{border-top:1px solid var(--border);margin-top:28px;padding-top:24px}.grouphead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}.grouphead h2{font-size:15px;font-weight:600;line-height:1.4;margin:0}.grouphead small{color:var(--muted);font-size:12px;white-space:nowrap}.group-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}.figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;min-width:0}.figures.single{display:block;width:100%;max-width:440px;margin:auto}.drawing{position:relative;width:100%;background:#fff}.drawing svg{display:block;width:100%;height:100%;overflow:visible}svg text{font-family:inherit}figure{margin:0;min-width:0}figcaption{font-size:12px;color:var(--muted);text-align:center;line-height:1.4;margin:8px 0}
.hotspot{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;padding:7px;border:0;background:transparent;display:flex;align-items:center;justify-content:center}.hotspot span{width:29px;height:29px;border:1.5px solid #2563eb;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#2563eb;font-weight:500;font-size:13px}.hotspot.assigned span{background:#eff6ff;border-width:2px}.hotspot.good span{background:#ecfdf5;border-color:#10b981;color:#065f46}.hotspot.bad span{background:#fff5f5;border-color:#ef4444;color:#7f1d1d}.hotspot.dragover span{background:#dbeafe}
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;min-width:0}.answer-wrap{min-width:0}.answer{width:100%;min-height:44px;display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;font-size:15px;font-weight:500;color:#1f2937;line-height:1.35}.answer .num{color:#6b7280;min-width:18px;text-align:center;flex-shrink:0;font-size:14px;font-weight:400}.answer .label{flex:1;overflow-wrap:anywhere}.answer .chevron{color:#6b7280;font-size:16px}.answer.good{background:#ecfdf5;border-color:#10b981}.answer.bad{background:#fff5f5;border-color:#ef4444}.feedback{font-size:14px;line-height:1.5;margin:8px 4px 14px;color:#4b5563}.feedback:empty{display:none}.goodtext{color:#065f46;font-weight:600}.badtext{color:#7f1d1d;font-weight:600}.aliases{display:block;color:#6b7280;font-size:12px;line-height:1.45;margin-top:4px}.bank{display:none;flex-wrap:wrap;gap:6px;margin-top:14px}.chip{font-size:12px;font-weight:400;border:1px solid #e5e7eb;padding:6px 9px;background:#fff;color:#4b5563;border-radius:6px;cursor:grab}.chip.used{opacity:.5}.chip[aria-pressed=true]{background:#eff6ff;color:#1d4ed8;border-color:#2563eb;opacity:1}
.toolbar{padding:20px 0 0}.toolbar-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.progress{display:block;color:#6b7280;font-size:13px;margin:0 0 12px}.button{appearance:none;border:0;cursor:pointer;font-size:14px;font-weight:600;padding:10px 18px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:#f3f4f6;color:#111827}.button.primary{background:#2563eb;color:#fff}.button.primary:hover{background:#1d4ed8}.button:hover{text-decoration:none}.textbutton{border:0;background:transparent;color:#6b7280;padding:10px 0;min-height:44px;font-size:13px;text-decoration:underline}.result{font-size:14px;line-height:1.5;margin:0 0 12px;font-weight:600}.result:empty{display:none}.page-nav{max-width:900px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:16px auto}.page-nav a{font-size:14px;min-height:44px;display:inline-flex;align-items:center}.page-nav a:last-child{margin-left:auto}.footer{max-width:900px;margin:16px auto 32px;font-size:12px;color:#6b7280}.footer summary{cursor:pointer;display:list-item;width:fit-content;min-height:32px}.footer p{margin:8px 0}
dialog{font-family:inherit;padding:0;border:1px solid #e5e7eb;border-radius:16px;width:min(440px,calc(100% - 24px));max-height:86dvh;box-shadow:0 10px 24px rgba(2,8,23,.12);color:#1f2937}dialog::backdrop{background:rgba(17,24,39,.45)}dialog header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #e5e7eb;position:sticky;top:0;background:#fff;z-index:2}dialog h2{font-size:16px;font-weight:600;margin:0}.close{border:0;background:transparent;width:44px;height:44px;color:#6b7280;font-size:24px}.choice-list{padding:12px;display:grid;gap:6px}.choice{background:#fff;border:1px solid #e5e7eb;border-radius:10px;text-align:left;padding:10px 12px;min-height:44px;color:#1f2937;font-size:15px;font-weight:500;line-height:1.35}.choice[aria-pressed=true]{border-color:#2563eb;background:#eff6ff}.usedhint{font-size:12px;color:#6b7280;margin-top:5px;display:block}.dialog-bottom{padding:0 12px 12px}.dialog-bottom button{width:100%}.catalog{display:grid;gap:8px}.catalog>a{border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px;display:flex;justify-content:space-between;gap:16px;align-items:center;color:#1f2937}.catalog>a:hover{background:#f9fafb;text-decoration:none}.catalog strong{font-size:15px;font-weight:500}.catalog small{display:block;color:#6b7280;font-size:13px;margin-top:3px}.catalog .open{color:#2563eb;font-size:14px}.catalog-title{font-size:16px;font-weight:400;margin:0 0 16px}
@media(hover:hover) and (pointer:fine){.bank{display:flex}.choice:hover,.answer:hover{background:#f9fafb}.hotspot:hover span{background:#eff6ff}}
@media(max-width:759px){.group-layout{grid-template-columns:1fr;gap:12px}.figures{gap:16px}.figures.single{max-width:400px}.answers{grid-template-columns:1fr}.bank{display:none!important}}
@media(max-width:620px){.site-header-inner{height:60px;padding:0 14px}.brand{font-size:20px}.wrap{margin:12px auto;padding:0 10px}.qcard{margin:12px auto 20px}.qhead{padding:14px 12px}.qbody{padding:16px 12px}.counter{font-size:15px}.instruction,.question-title{font-size:15px}.instruction{margin-bottom:20px}.grouphead{gap:8px;margin-bottom:12px}.grouphead h2{font-size:14px}.grouphead small{font-size:11px}.figures{grid-template-columns:1fr;gap:20px}.figures.single{max-width:400px}.answer{padding:10px;font-size:15px}.toolbar-line{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toolbar-line .textbutton{grid-column:1/-1;justify-self:start}.button{width:100%;padding:10px 12px}.page-nav{gap:8px;margin:8px 2px}.page-nav a{font-size:13px}.footer{margin:12px 2px 24px}dialog{margin:auto auto max(8px,env(safe-area-inset-bottom));max-height:82dvh}.catalog>a{padding:12px}.catalog .open{font-size:13px}}
@media print{.site-header,.bank,.page-nav,.backlink,.footer,.toolbar{display:none}.wrap{padding:0}.qcard{box-shadow:none;border:0}.exercise-group{break-inside:avoid}body{background:#fff}}

[hidden]{display:none!important}.access-status{padding:20px;max-width:900px;margin:24px auto;background:white;border:1px solid #e5e7eb;border-radius:16px}.access-status h2{font-size:16px;margin:0 0 8px}.access-status p{font-size:15px}.button:disabled{opacity:.6;cursor:default}.hotspot:disabled{cursor:default}

@media(min-width:760px){.figures.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
button:disabled{cursor:default}.button:disabled{opacity:.55}

/* Deux exercices Murs : proportions de l’aperçu validé. */
@media(min-width:760px){[data-exercise^="murs_"] .figures.single{max-width:500px}}

/* Trois exercices Baies : proportions de l’aperçu validé. */
@media(min-width:760px){[data-exercise^="baies_"] .figures.single{max-width:500px}}

/* Encadrement des baies : une fenêtre complète par page, jusqu’à neuf repères. */

[data-exercise^="embrasures_"] .figures.single{max-width:680px}

/* Planchers : bâtiment entier, quatorze repères sur une seule page. */

[data-exercise="planchers_designations"] .figures.single{max-width:680px}

/* Hourdis : reprise des deux pages validées, avec agrandissement du plancher complet. */

[data-exercise="hourdis_assemblage"] .figures.single{max-width:980px}
[data-exercise="hourdis_assemblage"] .zoom-tools{display:flex;justify-content:flex-end;margin:0 0 10px}
[data-exercise="hourdis_assemblage"] .zoom-toggle{font:inherit;font-size:13px;color:#2563eb;background:white;border:1px solid #dce3eb;border-radius:8px;min-height:44px;padding:8px 13px;cursor:pointer}
[data-exercise="hourdis_assemblage"] .diagram-viewport{max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:12px 0}
[data-exercise="hourdis_assemblage"] .zoomed .drawing{min-width:900px}
[data-exercise="hourdis_assemblage"] .zoom-hint{font-size:12px;color:#6b7280;margin:0 0 8px}
[data-exercise="hourdis_types"] .figures.three{grid-template-columns:repeat(2,minmax(0,1fr))}
[data-exercise="hourdis_types"] .figures.three>figure:last-child{grid-column:1/-1;width:calc((100% - 24px)/2);justify-self:center}

@media(max-width:620px){[data-exercise="hourdis_types"] .figures.three{grid-template-columns:1fr}[data-exercise="hourdis_types"] .figures.three>figure:last-child{width:100%}}

/* Six systèmes de planchers : trois pages validées le 15 octobre 2026. */
.floor-systems .wrap{max-width:1000px}

.floor-systems .figures{gap:32px}
.floor-systems .zoom-tools{display:flex;justify-content:flex-end;margin:0 0 10px}
.floor-systems .zoom-toggle{font:inherit;font-size:13px;color:#2563eb;background:white;border:1px solid #dce3eb;border-radius:8px;min-height:44px;padding:8px 13px;cursor:pointer}
.floor-systems .diagram-viewport{max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:12px 0}
.floor-systems .zoomed .drawing{min-width:650px}
.floor-systems .zoom-hint{font-size:12px;color:#6b7280;margin:0 0 8px}

@media(max-width:620px){.floor-systems .figures{grid-template-columns:1fr;gap:24px}}

/* Plancher en bois : une vue complète validée le 15 octobre 2026. */
.floor-timber .wrap{max-width:1000px}

.floor-timber .figures.single{max-width:980px}

.floor-timber .zoom-tools{display:flex;justify-content:flex-end;margin:0 0 10px}
.floor-timber .zoom-toggle{font:inherit;font-size:13px;color:#2563eb;background:white;border:1px solid #dce3eb;border-radius:8px;min-height:44px;padding:8px 13px;cursor:pointer}
.floor-timber .diagram-viewport{max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:12px 0}
.floor-timber .zoomed .drawing{min-width:1000px}
.floor-timber .zoom-hint{font-size:12px;color:#6b7280;margin:0 0 8px}