/* ==========================================================================
   TRAVERSE — jetons et composants communs à tous les écrans de la démo
   (site, appli du métreur, espace client, gestion de l'atelier, page en direct).
   Un dessin technique qui s'anime : papier calque, grille millimétrée, cotes
   jaune mètre-ruban. Une seule couleur d'accent : --metre.
   ========================================================================== */

:root {
  --anthracite: #23272b;
  --anthracite-2: #2d3237;
  --ink: #15181b;
  --ink-2: #3b4147;
  --ink-3: #6a7178;
  --calque: #f3f2ee;
  --paper: #fbfaf7;
  --white: #ffffff;
  --grid: #e3e1d9;
  --grid-2: #d6d3c8;
  --line: #dedbd2;
  --alu: #b9bec3;
  --alu-2: #8d9399;
  --glass: #cfe4e8;
  --metre: #f2c21b;
  --metre-2: #e0ae00;
  --metre-soft: #fbefc0;
  --ok: #2f8f5b;
  --ok-soft: #dcefe3;
  --warn: #d98a1c;
  --warn-soft: #fbead0;
  --red: #c8402e;
  --red-soft: #f6dcd7;

  --display: "Archivo", "Inter Tight", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ui: "Inter Tight", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ar: "IBM Plex Sans Arabic", "Inter Tight", system-ui, sans-serif;
  --ar-display: "Amiri", "IBM Plex Sans Arabic", serif;

  --r: 14px;
  --r-l: 22px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 0 rgba(21, 24, 27, .04), 0 14px 34px -22px rgba(21, 24, 27, .35);
  --mm: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--calque); color: var(--ink); font-family: var(--ui); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg use { pointer-events: none; }
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
.vh-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
:focus-visible { outline: 2.5px solid var(--metre-2); outline-offset: 2px; }

/* Petites capitales de cartouche */
.kicker { font-family: var(--display); font-weight: 600; font-size: 11.5px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- Logo ------------------------------------------------------------ */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.logo-mark { width: 34px; height: 34px; flex: none; color: currentColor; }
.logo-mark__glass { fill: var(--glass); opacity: .75; }
.logo-mark__cote { stroke: var(--metre-2); }
.logo__w { display: flex; flex-direction: column; line-height: 1; }
.logo__w b { font-family: var(--display); font-weight: 680; font-stretch: 112%; font-size: 21px; letter-spacing: .06em; }
.logo__w small { margin-top: 4px; font-family: var(--display); font-weight: 600; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.logo--light { color: #fff; }
.logo--light .logo__w small { color: rgba(255, 255, 255, .6); }
.logo--light .logo-mark__cote { stroke: var(--metre); }

/* ---------- Boutons, segments, champs -------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--white); color: var(--ink); font-family: var(--ui); font-size: 15.5px; font-weight: 650; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--line); transition: transform .25s var(--ease), background-color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.btn:active { transform: scale(.98); }
.btn--metre { background: var(--metre); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.btn--metre:hover { background: #f6cd34; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.btn--ink { background: var(--anthracite); color: #fff; box-shadow: none; }
.btn--ink:hover { background: #31373c; box-shadow: none; }
.btn--ghost { background: transparent; }
.btn--lg { min-height: 54px; padding: 0 24px; font-size: 16.5px; border-radius: 14px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .i { width: 19px; height: 19px; }

.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: rgba(21, 24, 27, .06); gap: 2px; }
.seg button, .seg label { position: relative; display: inline-grid; place-items: center; min-height: 40px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, box-shadow .2s; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg [aria-pressed="true"], .seg [aria-checked="true"], .seg label:has(input:checked) { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(21, 24, 27, .12), 0 0 0 1px rgba(21, 24, 27, .05); }
.seg--dark { background: rgba(255, 255, 255, .1); }
.seg--dark button { color: rgba(255, 255, 255, .7); }
.seg--dark [aria-pressed="true"] { background: var(--metre); color: var(--ink); }

.fld { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.fld > span, .fld > legend { font-size: 13px; font-weight: 650; color: var(--ink-2); padding: 0; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); font-size: 16px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.fld select { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315181b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; text-overflow: ellipsis; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(242, 194, 27, .35); }
.fld--mono input { font-family: var(--mono); font-size: 20px; letter-spacing: .02em; text-align: center; }
.fld input[aria-invalid="true"] { border-color: var(--red); }

/* ---------- Étiquettes ---------------------------------------------------------- */
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border-radius: 999px; background: rgba(21, 24, 27, .06); color: var(--ink-2); font-size: 12px; font-weight: 650; white-space: nowrap; }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.tag--ok { background: var(--ok-soft); color: #1f6b43; }
.tag--warn { background: var(--warn-soft); color: #8a5208; }
.tag--red { background: var(--red-soft); color: #9a2c1e; }
.tag--metre { background: var(--metre-soft); color: #6b5300; }
.tag--plain::before { display: none; }

/* ---------- Toasts : opaques, jamais mêlés au texte dessous ---------------------- */
.toast-stack { position: fixed; z-index: 90; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: 14px; background: var(--anthracite); color: #fff; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); font-size: 14.5px; line-height: 1.4; pointer-events: auto; animation: toast-in .45s var(--ease) both; }
.toast b { display: block; font-weight: 650; }
.toast small { display: block; margin-top: 2px; color: rgba(255, 255, 255, .72); font-size: 13px; }
.toast a { color: var(--metre); font-weight: 650; }
.toast__dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--metre); }
.toast--alert .toast__dot { background: var(--red); }
.toast--warn .toast__dot { background: var(--warn); }
.toast.is-out { animation: toast-out .3s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
/* sortie sans transparence : le toast se replie, il ne se mêle jamais au texte dessous */
@keyframes toast-out { to { clip-path: inset(0 0 100% 0 round 14px); transform: translateY(-4px); } }

/* ---------- Dessins techniques (dessin.js) ------------------------------------------ */
.dw { width: 100%; height: auto; overflow: visible; font-family: var(--mono); }
.dw-reveal { fill: rgba(21, 24, 27, .05); }
.dw-prof { stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dw-mitre { stroke: rgba(21, 24, 27, .45); stroke-width: .8px; vector-effect: non-scaling-stroke; fill: none; }
.dw-sash__bg { fill: rgba(251, 250, 247, .3); }
.dw-glass { fill: var(--glass); fill-opacity: .62; stroke: rgba(21, 24, 27, .35); stroke-width: .7px; vector-effect: non-scaling-stroke; }
.dw-glass--frost { fill: #e4ecee; fill-opacity: .95; }
.dw-refl { stroke: #fff; stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; fill: none; opacity: .9; }
.dw-arrow { stroke: var(--ink); stroke-width: 1.1px; vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.dw-open { stroke: var(--ink); stroke-width: .9px; vector-effect: non-scaling-stroke; fill: none; stroke-dasharray: 5 4; opacity: .55; }
.dw-handle { fill: var(--ink-2); }
.dw-F { font-family: var(--display); font-weight: 600; fill: var(--ink-2); opacity: .55; }
.dw-sash { transition: transform .1s linear; }
.dw-dim { color: var(--ink); }
.dw-line, .dw-tick { stroke: var(--metre-2); stroke-width: 1.2px; vector-effect: non-scaling-stroke; fill: none; }
.dw-tick { stroke-width: 1.5px; }
.dw-ext { stroke: rgba(21, 24, 27, .32); stroke-width: .8px; vector-effect: non-scaling-stroke; fill: none; }
.dw-num { fill: var(--ink); font-family: var(--mono); font-weight: 400; letter-spacing: .02em; }
.dw-dim--sub .dw-line, .dw-dim--sub .dw-tick { stroke: rgba(21, 24, 27, .45); }
.dw-dim--sub .dw-num { fill: var(--ink-3); }
.dw-dim.is-over .dw-line, .dw-dim.is-over .dw-tick { stroke: var(--red); }
.dw-dim.is-over .dw-num { fill: var(--red); font-weight: 700; }
.dw-knob { cursor: grab; touch-action: none; outline: none; }
.dw-knob__hit { fill: transparent; }
.dw-knob__halo { fill: rgba(242, 194, 27, .28); transition: r .2s; }
.dw-knob__dot { fill: var(--metre); stroke: var(--ink); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.dw-knob:focus-visible .dw-knob__halo { fill: rgba(242, 194, 27, .55); }
.dw [data-cote] { cursor: pointer; }
.dw--card .dw-reveal { display: none; }

/* Fiche de débit */
.db { display: block; width: 100%; height: auto; font-family: var(--mono); }
.db-bar { fill: var(--paper); stroke: rgba(21, 24, 27, .25); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.db-pc { fill: var(--alu); stroke: var(--ink); stroke-width: .8px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.db-pc.is-hl { fill: var(--metre); }
.db-pc.is-draft { fill: rgba(242, 194, 27, .28); stroke: var(--metre-2); stroke-dasharray: 4 3; stroke-width: 1.2px; }
.db-lbl { fill: var(--ink); opacity: .82; }
.db-lbl--end { fill: var(--ink-3); }
.db-end--reuse { fill: none; stroke: var(--ink-3); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.db-end--waste { stroke: rgba(21, 24, 27, .25); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.dw-hatch { stroke: var(--alu-2); stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* Coupes de profilés et de vitrages */
.sx, .gx { width: 100%; height: auto; }
.sx-alu-o, .sx-rpt-o, .sx-steel-o { fill: none; stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sx-alu { stroke: none; }
.sx-hatch { stroke: var(--alu-2); stroke-width: .9px; vector-effect: non-scaling-stroke; }
.sx-hatch--b { stroke: var(--ink-2); }
.sx-hatch--c { stroke: var(--ink); stroke-width: .7px; }
.sx-void { fill: var(--paper); stroke: var(--ink); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.sx-pvc { fill: #f6f5f1; stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.sx-glass { fill: var(--glass); stroke: rgba(21, 24, 27, .45); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.sx-dim { font-family: var(--mono); fill: var(--ink-3); }
.gx-pane { fill: var(--glass); stroke: rgba(21, 24, 27, .55); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.gx-pane--frost { fill: #e9eff0; }
.gx-spacer { fill: var(--alu-2); }
.gx-gas { fill: var(--metre-2); }
.gx-pvb { stroke: var(--ink); stroke-width: .8px; vector-effect: non-scaling-stroke; stroke-dasharray: 3 2; }
.gx-coat { stroke: var(--metre-2); stroke-width: 2px; vector-effect: non-scaling-stroke; }

/* Façades */
.fc { width: 100%; height: auto; }
.fc-ground { stroke: var(--ink); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.fc-wall { fill: var(--paper); stroke: var(--ink); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fc-wall--2 { fill: #f7f6f1; }
.fc-roof { stroke: var(--ink); stroke-width: 2.2px; vector-effect: non-scaling-stroke; }
.fc-glass { fill: var(--glass); opacity: .85; }
.fc-frame, .fc-mull { stroke-linejoin: round; }
.fc-refl { stroke: #fff; stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.fc-rail { fill: none; stroke: var(--ink-2); stroke-width: .9px; vector-effect: non-scaling-stroke; }
.fc-hl { fill: none; stroke: var(--metre-2); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.fc-band { fill: var(--anthracite); }
.fc-awn { stroke: var(--metre-2); stroke-width: 3px; vector-effect: non-scaling-stroke; }
.fc-slab { stroke: rgba(21, 24, 27, .2); stroke-width: .8px; vector-effect: non-scaling-stroke; }

/* Camion */
.truck { width: 120px; height: auto; }
.tk-body { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.tk-cab { fill: var(--metre); stroke: var(--ink); stroke-width: 2; }
.tk-win { fill: var(--glass); stroke: var(--ink); stroke-width: 1.4; }
.tk-load { fill: none; stroke: var(--alu-2); stroke-width: 2.4; stroke-linecap: round; }
.tk-wheel { fill: var(--anthracite); stroke: var(--paper); stroke-width: 2.5; }
.tk-road { stroke: var(--grid-2); stroke-width: 2; stroke-dasharray: 8 6; }

/* Cartouche de devis */
.cartouche { display: grid; grid-template-columns: auto repeat(4, auto); border: 1.5px solid var(--ink); font-family: var(--mono); font-size: 11px; line-height: 1.25; background: var(--paper); width: max-content; max-width: 100%; }
.cartouche > span { padding: 6px 8px; border-left: 1px solid var(--ink); white-space: nowrap; }
.cartouche > span:first-child { border-left: 0; }
.cartouche small { display: block; font-family: var(--display); font-weight: 600; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cartouche__brand { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 680; font-stretch: 112%; letter-spacing: .06em; font-size: 12px; }
.cartouche__mark { width: 18px; height: 18px; }

/* ---------- Bandeau « Projet concept » (couche Démesure) ------------------------------- */
.demo-bar { position: relative; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; padding: 7px max(16px, env(safe-area-inset-left)); background: #0b0b0a; color: #ebe8df; font-family: var(--ui); font-size: 12.5px; line-height: 1.35; }
.demo-bar a { color: #ff4a1c; text-decoration: none; font-weight: 600; }
.demo-bar a:hover { text-decoration: underline; }
.demo-bar > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-bar__links { display: flex; gap: 16px; flex: none; white-space: nowrap; }
.demo-bar__short { display: none; }
@media (max-width: 760px) {
  .demo-bar__long { display: none; }
  .demo-bar__short { display: inline; }
  .demo-bar { font-size: 12px; gap: 12px; }
}
.is-embed .demo-bar { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}