/* THESMORA · démos de modules · feuille commune (29/09/2026).
   Charte : ~/Documents/THESMORA/thesmora.png. Polices Michroma (nom du module, grands chiffres),
   Saira (titres, étapes, boutons), Archivo (texte). Couleur du module = var(--mod), posée par demo.js
   depuis le registre des logos. Fond clair par défaut ; ?fond=sombre ou préférence système = fond anthracite. */
@import url("https://fonts.googleapis.com/css2?family=Michroma&family=Saira:wght@400;500;600&family=Archivo:wght@400;500;600&display=swap");

:root {
  --papier: #f6f4ef; --piste: #ece7dd; --encre: #1f2326; --pierre: #d7c9b3; --pierre-p: #b89b76;
  --ligne: #c7c6be; --doux: #565c5c; --ok: #4f6b3a; --avis: #8a5418; --non: #a3321f;
  --bg: var(--papier); --panel: #fffdf8; --ink: var(--encre); --plan-mur: #1f2326; --plan-sol: #fffdf8;
  --mod: #b89b76; --mod-g: #977b57; --mod-sur: #fff;
  --f-nom: Michroma, "Arial Narrow", sans-serif; --f-titre: Saira, Arial, sans-serif; --f-texte: Archivo, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1); --t: 240ms;
  color-scheme: light;
}
:root[data-fond="sombre"] {
  --bg: #1f2326; --panel: #2a2f31; --ink: #f6f4ef; --doux: #b9b8b0; --ligne: #4a5054; --piste: #2f3538;
  --plan-mur: #f6f4ef; --plan-sol: #262b2d; --ok: #a3b88d; --avis: #e0a060; --non: #ef8a74;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--f-texte); overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, video { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--mod-g); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

.demo { max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px; }

/* ——— en-tête : logo, nom, bien */
.tete { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 16px; align-items: center; }
.tete .logo { width: 56px; height: 56px; }
.tete h1 { font: 400 clamp(1.4rem, 3.2vw, 2rem)/1.1 var(--f-nom); letter-spacing: .04em; }
.tete .promesse { grid-column: 2 / -1; color: var(--doux); max-width: 62ch; }
.bien { justify-self: end; display: flex; gap: 6px; flex-wrap: wrap; }
.puce { font: 500 .8rem/1 var(--f-titre); padding: 7px 10px; border: 1px solid var(--ligne); border-radius: 2px; background: var(--panel); white-space: nowrap; }
.exemple { font: 600 .72rem/1 var(--f-titre); letter-spacing: .08em; text-transform: uppercase; color: var(--bg); background: var(--ink); border-left: 4px solid var(--mod); padding: 5px 7px 4px; border-radius: 2px; white-space: nowrap; }
.bascule { display: inline-flex; border: 1px solid var(--ligne); border-radius: 2px; overflow: hidden; }
.bascule button { border: 0; background: var(--panel); padding: 8px 12px; min-height: 36px; cursor: pointer; font: 500 .85rem/1 var(--f-titre); }
.bascule button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ——— la chaîne du module : une vraie séquence, d'où les numéros */
.chaine { display: flex; gap: 0; margin: 22px 0 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.chaine::-webkit-scrollbar { display: none; }
.chaine button { flex: 1 0 auto; scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center;
  text-align: left; border: 0; border-top: 3px solid var(--ligne); background: none; padding: 10px 16px 6px 0; cursor: pointer; min-height: 48px; }
.chaine .n { font: 400 .85rem/1 var(--f-nom); color: var(--doux); }
.chaine .l { font: 500 .95rem/1.2 var(--f-titre); }
.chaine button[aria-selected="true"] { border-top-color: var(--mod); }
.chaine button[aria-selected="true"] .n { color: var(--ink); }
.chaine button.fait { border-top-color: color-mix(in oklab, var(--mod) 45%, var(--ligne)); }

.etape { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
[hidden], .etape[hidden] { display: none !important; }
.etape.large { grid-template-columns: 1fr; }
.vue { background: var(--panel); border: 1px solid var(--ligne); border-radius: 3px; min-height: 360px; position: relative; overflow: hidden; }
.cote { display: flex; flex-direction: column; gap: 14px; }
.cote h2 { font: 600 1.15rem/1.25 var(--f-titre); }
.cote p { color: var(--doux); max-width: 52ch; }
.vue > img, .vue > video { width: 100%; height: 100%; object-fit: cover; }
.vue figcaption, .legende { font: 400 .82rem/1.4 var(--f-texte); color: var(--doux); padding: 8px 12px; }
@media (max-width: 820px) {
  .etape { grid-template-columns: 1fr; }
  .tete { grid-template-columns: auto 1fr; }
  .bien { grid-column: 1 / -1; justify-self: start; }
  .tete .promesse { grid-column: 1 / -1; }
  .tim { flex-wrap: wrap; }
  .tim p { flex-basis: calc(100% - 50px); }
  .tim .btn { width: 100%; justify-content: center; }
  .vue { min-height: 240px; }
}

/* ——— TIM agit : une ligne, pas de discours */
.tim { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--ligne); border-radius: 3px; background: var(--panel); }
.tim svg { flex: none; width: 34px; height: 34px; }
.tim p { flex: 1; font-size: .95rem; min-height: 1.5em; }
.tim b { font: 600 .9rem/1 var(--f-titre); margin-right: 6px; }
.btn { font: 500 .95rem/1 var(--f-titre); border: 1px solid var(--ink); background: var(--ink); color: var(--bg); padding: 11px 16px; min-height: 44px; border-radius: 2px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.btn.clair { background: transparent; color: var(--ink); }
.btn.mod { --fond-mod: color-mix(in oklab, var(--mod-g) 62%, #1f2326); background: var(--fond-mod); border-color: var(--fond-mod); color: #fff; }
:root[data-fond="sombre"] .btn.mod { --fond-mod: var(--mod); color: #1f2326; }
.btn:disabled { opacity: .45; cursor: default; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ——— tableaux de métrés et de chiffres */
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tbl th { font: 600 .78rem/1.2 var(--f-titre); text-align: left; color: var(--doux); padding: 6px 8px; border-bottom: 1px solid var(--ligne); }
.tbl td { padding: 7px 8px; border-bottom: 1px solid color-mix(in oklab, var(--ligne) 55%, transparent); vertical-align: top; }
.tbl td.n, .tbl th.n { text-align: right; white-space: nowrap; }
.tbl tfoot td { font-weight: 600; border-bottom: 0; border-top: 2px solid var(--ink); }
.tbl tr.off td { opacity: .4; text-decoration: line-through; }
.total { font: 600 clamp(1.4rem, 2.6vw, 1.9rem)/1.2 var(--f-titre); font-variant-numeric: tabular-nums; }
.total small { display: block; font: 500 .8rem/1.3 var(--f-titre); color: var(--doux); letter-spacing: 0; margin-bottom: 4px; }
.note { font-size: .82rem; color: var(--doux); border-left: 3px solid var(--mod); padding-left: 10px; }

/* ——— statuts : toujours un mot, jamais la couleur seule */
.st { font: 600 .75rem/1 var(--f-titre); padding: 4px 6px; border-radius: 2px; white-space: nowrap; border: 1px solid currentColor; }
.st.ok { color: var(--ok); } .st.avis { color: var(--avis); } .st.non { color: var(--non); }

/* ——— plans dessinés depuis les JSON */
.plan { width: 100%; height: auto; }
.plan .sol { fill: var(--plan-sol); stroke: none; }
.plan .mur { fill: var(--plan-mur); }
.plan .mur-l { stroke: var(--plan-mur); stroke-linecap: butt; }
.plan .baie { stroke: var(--plan-sol); stroke-width: .14; }
.plan .baie-t { stroke: var(--plan-mur); stroke-width: .03; }
.plan .piece { fill: transparent; stroke: none; cursor: default; transition: fill var(--t) var(--ease); }
.plan .piece.on { fill: color-mix(in oklab, var(--mod) 28%, transparent); }
.plan .piece.clic { cursor: pointer; }
.plan .piece.clic:hover { fill: color-mix(in oklab, var(--mod) 16%, transparent); }
.plan text { fill: var(--ink); font-family: var(--f-titre); paint-order: stroke; stroke: var(--plan-sol); stroke-width: .06; }
.plan .cote-l { stroke: var(--mod-g); stroke-width: .025; }
.plan .cote-t { fill: var(--ink); font-weight: 600; }
.plan .meuble { fill: color-mix(in oklab, var(--ink) 10%, transparent); stroke: var(--doux); stroke-width: .02; }

/* ——— divers */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.rail > * { scroll-snap-align: start; }
.carte { border: 1px solid var(--ligne); border-radius: 3px; background: var(--panel); overflow: hidden; }
.carte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.carte .c { padding: 10px 12px; }
.carte h3 { font: 600 1rem/1.25 var(--f-titre); }
button.carte { text-align: left; padding: 0; cursor: pointer; }
button.carte[aria-pressed="true"] { outline: 3px solid var(--mod); outline-offset: -3px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--ligne); background: var(--panel); border-radius: 2px; padding: 7px 10px; min-height: 36px; cursor: pointer; font: 500 .85rem/1 var(--f-titre); }
.chips button[aria-pressed="true"] { border-color: var(--mod-g); background: color-mix(in oklab, var(--mod) 18%, var(--panel)); }
label.champ { display: grid; gap: 4px; font: 500 .85rem/1.2 var(--f-titre); }
label.champ input, label.champ select, label.champ textarea { border: 1px solid var(--ligne); background: var(--bg); border-radius: 2px; padding: 9px 10px; font: 400 .95rem/1.4 var(--f-texte); min-height: 42px; }
.lien { color: var(--ink); text-underline-offset: 4px; font-weight: 500; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.liste li { padding: 7px 0; border-bottom: 1px solid color-mix(in oklab, var(--ligne) 55%, transparent); display: flex; gap: 10px; justify-content: space-between; align-items: baseline; }
.ap { display: grid; } .ap > * { grid-area: 1 / 1; }