/* Native SVG demonstration of the ASDI hybrid type 4 totem. */
#totem-incendie { overflow: clip; }
#totem-incendie .prestation-card-body { grid-template-areas: "media content" "simulation simulation" "details details"; }
.ttm-simulation-drawer { grid-area: simulation; min-width: 0; overflow: clip; scroll-margin-top: 150px; }
.ttm-demo [hidden] { display: none !important; }
.ttm-demo { min-width: 0; padding: 24px; background: #f8fafc; color: #25374b; }
.ttm-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.ttm-demo .ttm-eyebrow { margin: 0 0 8px; color: #b35b16; font-size: .7rem; font-weight: 700; letter-spacing: .14em; }
.ttm-heading h3 { margin: 0 0 8px; font-size: clamp(1.3rem, 2.3vw, 1.8rem); line-height: 1.25; }
.ttm-heading p:last-child { max-width: 650px; margin: 0; color: #627185; font-size: .92rem; line-height: 1.6; }
.ttm-tag { flex-shrink: 0; padding: 8px 12px; border: 1px solid #dbe4ec; border-radius: 30px; background: #fff; color: #637487; font-size: .72rem; }
.ttm-workspace { display: grid; align-items: start; gap: 20px; }
.ttm-visual, .ttm-information { min-width: 0; }
.ttm-stage { overflow: hidden; border-radius: 12px; background: #142639; }
.ttm-stage-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 55px; padding: 12px 14px; box-sizing: border-box; border-bottom: 1px solid #6e8aa130; background: #102638; }
.ttm-power-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 20px; padding: 9px 14px; border-bottom: 1px solid #6e8aa130; color: #bfd0de; background: #1b3242; font-size: .68rem; line-height: 1.5; }
.ttm-power-summary span { display: inline-flex; align-items: center; gap: 5px; }
.ttm-power-summary i { margin-right: 3px; color: #e4bf82; }
.ttm-power-summary strong { color: #e3ebf1; }
.ttm-settings { margin-bottom: 12px; overflow: hidden; border: 1px solid #dbe4ec; border-radius: 10px; background: #fff; }
.ttm-transmitter-option { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 14px; }
.ttm-transmitter-option > div { min-width: 0; }
.ttm-transmitter-option strong { display: block; color: #344e62; font-size: .78rem; line-height: 1.4; }
.ttm-transmitter-option strong span { color: #637487; font-weight: 400; }
.ttm-transmitter-option p { margin: 3px 0 0; color: #637487; font-size: .7rem; line-height: 1.5; }
.ttm-transmitter-toggle { display: inline-flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: 8px; min-height: 44px; padding: 4px 0 4px 6px; border: 0; border-radius: 5px; background: transparent; color: #637487; font: 700 .7rem/1.3 Lato, sans-serif; cursor: pointer; }
.ttm-transmitter-toggle > [data-ttm-transmitter-state] { min-width: 54px; text-align: left; }
.ttm-switch-track { position: relative; width: 36px; height: 21px; border: 1px solid #7793a5; border-radius: 20px; background: #344f61; box-sizing: border-box; transition: background .2s; }
.ttm-switch-track::before { content: ""; position: absolute; left: 3px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: #d7e2e9; box-shadow: 0 1px 3px #0005; transition: transform .2s; }
.ttm-transmitter-toggle[aria-checked="true"] { color: #24715e; }
.ttm-transmitter-toggle[aria-checked="true"] .ttm-switch-track { border-color: #65baa2; background: #318774; }
.ttm-transmitter-toggle[aria-checked="true"] .ttm-switch-track::before { transform: translateX(15px); background: #effff8; }
.ttm-transmitter-toggle:hover .ttm-switch-track { border-color: #328774; }
.ttm-contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 14px 12px; }
.ttm-contact { min-width: 0; padding: 9px 10px; border: 1px solid #dfe6ec; border-radius: 7px; background: #f6f8fa; color: #6b7a89; }
.ttm-contact > span { display: flex; align-items: center; gap: 6px; font-size: .66rem; line-height: 1.4; }
.ttm-contact > span i { color: #91a0ad; font-size: .6rem; }
.ttm-contact strong { display: block; min-height: 2.8em; margin-top: 4px; font-size: .73rem; font-weight: 700; line-height: 1.4; overflow-wrap: break-word; }
.ttm-contact[data-state="calling"] { border-color: #73b7ce; background: #edf8fc; color: #246d89; }
.ttm-contact[data-state="calling"] > span i { color: #337e9a; }
.ttm-contact[data-state="answered"] { border-color: #85bda8; background: #eef8f1; color: #2b7356; }
.ttm-contact[data-state="answered"] > span i { color: #408d6c; }
.ttm-contact[data-state="unanswered"] { border-color: #d6bfa4; background: #fbf5ed; color: #946936; }
.ttm-contact[data-state="unanswered"] > span i { color: #a28157; }
.ttm-contact:is([data-state="skipped"], [data-state="disabled"]) { background: #f4f5f6; color: #82909b; }
.ttm-phone-notice { display: flex; align-items: center; min-height: calc(4.5em + 21px); box-sizing: border-box; margin: 0; padding: 10px 14px; border-top: 1px solid #c4e0d6; background: #edf7f2; color: #2c6c56; font-size: .72rem; line-height: 1.5; }
.ttm-phase { padding: 6px 10px; border: 1px solid #8197ac60; border-radius: 30px; color: #c5d6e6; background: #25394a; font-size: .68rem; line-height: 1.4; }
.ttm-stage-caption { margin-left: auto; color: #94abbe; font-size: .62rem; line-height: 1.4; text-align: right; }
.ttm-view-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; max-width: 190px; min-height: 40px; padding: 7px 10px; border: 1px solid #77abc466; border-radius: 8px; background: #193b4b; color: #d2edf6; font: 700 .68rem/1.35 Lato, sans-serif; cursor: pointer; }
.ttm-view-toggle:hover { border-color: #a4d9ea; background: #234c60; }
.ttm-view-toggle[aria-pressed="true"] { border-color: #a4d9ea; background: #285269; }
.ttm-plan-heading { position: relative; }
.ttm-plan-heading:has(> .ttm-plan-call-banner:not([hidden])) .ttm-plan-toolbar { visibility: hidden; }
.ttm-plan-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; box-sizing: border-box; padding: 9px 12px; border-bottom: 1px solid #d6d8d2; background: #f2f1eb; color: #65716d; font-size: .65rem; line-height: 1.4; }
.ttm-plan-call-banner { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; padding: 8px 12px; border-bottom: 1px solid #72adbb; background: #183f52; color: #e3f5fb; }
.ttm-plan-call-banner p { display: flex; align-items: center; gap: 9px; min-width: 0; margin: 0; font-size: .71rem; line-height: 1.4; }
.ttm-plan-call-banner p > i { flex-shrink: 0; color: #8cddbc; }
.ttm-demo .ttm-plan-call-banner p, .ttm-demo .ttm-plan-call-banner strong { color: #e3f5fb; }
.ttm-plan-call-banner strong { font-weight: 700; }
.ttm-plan-call-banner button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 7px 10px; border: 1px solid #93c8d8; border-radius: 7px; background: #e4f3f7; color: #16475d; font: 700 .69rem/1.3 Lato, sans-serif; cursor: pointer; }
.ttm-plan-call-banner button:hover { border-color: #ccecf4; background: #fff; }
.ttm-plan-zoom { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; min-height: 36px; padding: 6px 10px; border: 1px solid #a5b2aa; border-radius: 5px; background: #fffefa; color: #344e43; font: 700 .68rem/1.3 Lato, sans-serif; cursor: pointer; }
.ttm-plan-zoom[aria-pressed="true"] { border-color: #327b88; background: #e8f3f2; }
.ttm-plan-viewport { max-height: min(460px, 65vh); overflow: auto; overscroll-behavior: contain; background: #f7f6f0; }
.ttm-plan-viewport:focus-visible { outline: 2px solid #d69b48; outline-offset: -2px; }
.ttm-plan-canvas { position: relative; width: 100%; aspect-ratio: 9 / 5; background: #f7f6f0; }
.ttm-demo[data-plan-zoomed="true"] .ttm-plan-canvas { width: 200%; }
.ttm-plan-scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ttm-plan-markers { position: absolute; inset-inline: 0; top: 50%; aspect-ratio: 9 / 5; transform: translateY(-50%); pointer-events: none; }
.ttm-plan-markers button { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 44px; min-height: 44px; padding: 5px 6px; transform: translate(-50%, -50%); cursor: pointer; pointer-events: auto; font: 700 .65rem/1.1 Lato, sans-serif; }
.ttm-plan-markers .ttm-plan-dm { width: 52px; padding: 0; border: 0; border-radius: 4px; background: transparent; }
.ttm-plan-markers .ttm-plan-dm-left { transform: translate(-20%, -50%); }
.ttm-plan-markers .ttm-plan-dm-right { transform: translate(-80%, -50%); }
.ttm-plan-dm:hover:not(:disabled) { background: #de904020; box-shadow: inset 0 0 0 1px #ba7a3866; }
.ttm-plan-dm-halo { opacity: var(--ttm-dm-active, 0); stroke: #137799; stroke-width: 2; }
[data-ttm-wall-dm] text { fill: var(--ttm-dm-label, #a82c37); }
.ttm-demo[data-source="radio"][data-radio-device="dm1"] [data-ttm-wall-dm="dm1"],
.ttm-demo[data-source="radio"][data-radio-device="dm2"] [data-ttm-wall-dm="dm2"],
.ttm-demo[data-source="radio"][data-radio-device="dm3"] [data-ttm-wall-dm="dm3"] { --ttm-dm-active: 1; --ttm-dm-label: #126b87; }
.ttm-demo[data-source="radio"][data-radio-device="dm1"] [data-ttm-wall-dm="dm1"] .ttm-plan-dm-case,
.ttm-demo[data-source="radio"][data-radio-device="dm2"] [data-ttm-wall-dm="dm2"] .ttm-plan-dm-case,
.ttm-demo[data-source="radio"][data-radio-device="dm3"] [data-ttm-wall-dm="dm3"] .ttm-plan-dm-case { stroke: #137799; stroke-width: 2.5; filter: drop-shadow(0 0 3px #53b7d5); }
.ttm-plan-markers button:disabled { cursor: default; }
.ttm-plan-totem { border: 0; border-radius: 4px; background: transparent; }
.ttm-plan-markers .ttm-plan-totem { width: 48px; transform: translate(-10%, -50%); }
.ttm-plan-totem:hover:not(:disabled) { background: #de904020; box-shadow: inset 0 0 0 1px #ba7a3866; }
.ttm-plan-legend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; min-height: 32px; box-sizing: border-box; padding: 8px 12px 10px; border-top: 1px solid #d6d8d2; background: #eeeee7; color: #506062; font-size: .65rem; line-height: 1.4; }
.ttm-plan-legend b { color: #a62230; }
.ttm-plan-legend-hint { color: #626e6e; }
.ttm-plan-exit-key { display: inline-flex; align-items: center; gap: 5px; }
.ttm-plan-exit-key i { padding: 0 3px; border: 1px solid #397956; background: #e9f2e8; color: #397956; font-style: normal; font-weight: 700; line-height: 1.2; }
.ttm-plan-radio-path { opacity: .15; }
.ttm-demo[data-source="radio"][data-radio-device="dm1"] [data-ttm-plan-link="dm1"],
.ttm-demo[data-source="radio"][data-radio-device="dm2"] [data-ttm-plan-link="dm2"],
.ttm-demo[data-source="radio"][data-radio-device="dm3"] [data-ttm-plan-link="dm3"] { opacity: 1; stroke: #2381a9; stroke-width: 4; }
.ttm-demo[data-phase="transmitting"][data-radio-device="dm1"] [data-ttm-plan-link="dm1"],
.ttm-demo[data-phase="transmitting"][data-radio-device="dm2"] [data-ttm-plan-link="dm2"],
.ttm-demo[data-phase="transmitting"][data-radio-device="dm3"] [data-ttm-plan-link="dm3"] { animation: ttm-transmission 1.6s linear infinite; }
.ttm-demo[data-phase="transmitting"] .ttm-phase { border-color: #78c7ea70; background: #193e55; color: #bfeeff; }
.ttm-demo[data-phase="processing"] .ttm-phase { border-color: #e6ae6170; background: #473721; color: #ffe0aa; }
.ttm-demo[data-phase="alarm"] .ttm-phase { border-color: #ff8b8d80; background: #522c36; color: #ffcbca; }
.ttm-scene { display: block; width: 100%; height: auto; aspect-ratio: 9 / 5; }
/* Always reserve the phone's clearance so incoming calls cannot move the scene or hide the wall-mounted DM. */
.ttm-equipment-canvas { position: relative; padding-bottom: max(0px, calc(246px - 33.333333%)); background: #273a43; }
.ttm-equipment-drawing { position: relative; }
.ttm-equipment-markers { position: absolute; inset: 0; pointer-events: none; }
.ttm-equipment-dm { position: absolute; z-index: 1; width: 44px; height: 44px; padding: 0; transform: translate(-50%, -50%); border: 1px solid transparent; border-radius: 5px; background: transparent; pointer-events: auto; cursor: pointer; }
.ttm-equipment-radio { left: 43.611111%; top: 40%; }
.ttm-equipment-local-full { left: 74.21%; top: 70.826%; }
.ttm-equipment-dm:hover:not(:disabled) { border-color: #f9c586a6; background: #ed9b391a; box-shadow: 0 0 12px #f9c58640; }
.ttm-equipment-dm:disabled { cursor: default; }
.ttm-demo .ttm-equipment-dm:focus-visible { outline-offset: 0; background: #ed9b3926; }
.ttm-scene text { font-family: Lato, sans-serif; }
.ttm-scene-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 8px 12px 12px; color: #b6c9d9; font-size: .65rem; }
.ttm-scene-key span { display: inline-flex; align-items: center; gap: 6px; }
.ttm-scene-key i { width: 7px; height: 7px; border-radius: 50%; background: #ee927f; }
.ttm-scene-key .ttm-radio-key { background: #78c7ea; }
.ttm-scene-key .ttm-equipment-hint { flex-basis: 100%; justify-content: center; color: #8da8ba; font-size: .62rem; line-height: 1.4; text-align: center; }
.ttm-phone-dock { position: absolute; z-index: 2; left: 8px; bottom: 8px; }
.ttm-phone-dock:focus-visible { border-radius: 20px; outline: 2px solid #a0ddc3; outline-offset: 3px; }
.ttm-phone-device { position: relative; width: 112px; height: 208px; box-sizing: border-box; padding: 4px; border: 1px solid #a6b0b5; border-radius: 24px; background: linear-gradient(95deg, #25323a 0%, #8a979e 3%, #303b42 6%, #0a1118 48%, #515e66 94%, #c0c9cd 97%, #35434c 100%); box-shadow: inset 0 0 0 1px #eef4f52e, inset 0 -2px 2px #0008, 0 12px 20px #0005, 0 2px 3px #0008; }
.ttm-phone-device::before, .ttm-phone-device::after { content: ""; position: absolute; width: 2px; border-radius: 2px; background: linear-gradient(90deg, #a8b3b9, #44545f); }
.ttm-phone-device::before { left: -2px; top: 44px; height: 18px; box-shadow: 0 24px 0 #73828c; }
.ttm-phone-device::after { right: -2px; top: 57px; height: 29px; }
.ttm-phone-screen { position: relative; isolation: isolate; height: 100%; box-sizing: border-box; overflow: hidden; padding: 4px 5px 12px; border: 1px solid #03090f; border-radius: 19px; background: radial-gradient(ellipse at 50% 29%, #365457 0%, #1c343d 42%, #0b1826 100%); box-shadow: inset 0 0 12px #020a1473; text-align: center; color: #e9f3f7; }
.ttm-phone-screen > * { position: relative; z-index: 1; }
.ttm-phone-screen::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 5px; width: 33px; height: 8px; transform: translateX(-50%); border: 1px solid #24333c; border-radius: 9px; background: linear-gradient(#22323c, #22323c) 6px center / 14px 1px no-repeat, radial-gradient(circle at 25px 3px, #2b4353 0 1px, #050a0e 1.5px), #03070c; box-shadow: 0 1px 1px #ffffff0d; }
.ttm-phone-screen::after { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: linear-gradient(122deg, #e9faff12 0%, #e9faff05 33%, transparent 34%, transparent 68%, #a6dcf206 100%); pointer-events: none; }
.ttm-phone-statusbar { display: flex; align-items: center; justify-content: space-between; height: 12px; padding-inline: 1px; color: #d5e5ec; font: 700 6px/1 Lato, sans-serif; }
.ttm-phone-system { display: inline-flex; align-items: center; gap: 3px; }
.ttm-phone-signal { width: 6px; height: 5px; background: currentColor; clip-path: polygon(0 100%, 0 75%, 25% 75%, 25% 50%, 50% 50%, 50% 25%, 75% 25%, 75% 0, 100% 0, 100% 100%); }
.ttm-phone-wifi { position: relative; width: 6px; height: 5px; border-top: 1px solid; border-radius: 50%; }
.ttm-phone-wifi::after { content: ""; position: absolute; left: 2px; top: 2px; width: 2px; height: 2px; border-radius: 50%; background: currentColor; }
.ttm-phone-battery { position: relative; width: 8px; height: 4px; border: 1px solid; border-radius: 1px; background: linear-gradient(90deg, currentColor 75%, transparent 75%); }
.ttm-phone-battery::after { content: ""; position: absolute; right: -2px; top: 0; width: 1px; height: 2px; background: currentColor; }
.ttm-phone-top { display: flex; align-items: center; justify-content: center; min-height: 11px; margin: 5px 0 4px; color: #d6e6ec; font: 700 8px/1.35 Lato, sans-serif; letter-spacing: .15px; }
.ttm-phone-avatar { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 3px auto 4px; border: 1px solid #edc0ae52; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #895c58, #493b43); box-shadow: inset 0 1px 1px #ffd9bf26, 0 3px 8px #0003; color: #f8c7b5; font-size: 14px; }
.ttm-phone-status { margin: 4px 0 2px; color: #b8d2da; font-size: 9px; line-height: 1.3; }
.ttm-phone-caller { display: block; color: #f2f8fb; font-size: 11px; line-height: 1.35; letter-spacing: -.1px; }
.ttm-phone-countdown { min-height: 1.4em; margin: 3px 0 0; color: #c8dfe7; font-size: 8.5px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.ttm-phone-ringing, .ttm-phone-connected, .ttm-phone-complete { margin-top: 8px; }
.ttm-phone-answer { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 90px; min-height: 44px; box-sizing: border-box; padding: 7px 4px; border: 1px solid #80d7bb; border-radius: 25px; background: linear-gradient(#3d9c80, #24765f); box-shadow: inset 0 1px 0 #c6ffe52e, 0 3px 8px #021a1752; color: #fff; font: 700 .72rem/1.3 Lato, sans-serif; cursor: pointer; }
.ttm-phone-answer:hover { background: linear-gradient(#4caf90, #308c70); }
.ttm-phone-answer > i { font-size: 12px; }
.ttm-phone-key { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; box-sizing: border-box; padding: 0; border: 1px solid #b2d1db66; border-radius: 50%; background: linear-gradient(#486574, #2b4555); box-shadow: inset 0 1px 0 #e4ffff12, 0 2px 6px #0003; color: #f4faff; font: 400 1.5rem/1 Lato, sans-serif; cursor: pointer; }
.ttm-phone-key:hover { border-color: #c7e5e6; background: #526d83; }
.ttm-phone-answer:disabled, .ttm-phone-key:disabled { opacity: .5; cursor: default; }
.ttm-demo .ttm-phone-answer:focus-visible, .ttm-demo .ttm-phone-key:focus-visible { outline-offset: -3px; }
.ttm-phone-connected p, .ttm-phone-complete p { margin: 3px 0 0; color: #d5e7ee; font-size: 8.5px; line-height: 1.4; }
.ttm-phone-complete > i { margin-top: 3px; color: #a4e7c5; font-size: 25px; filter: drop-shadow(0 0 6px #8dd7b52e); }
.ttm-phone-complete:focus-visible { border-radius: 5px; outline: 2px solid #a0ddc3; outline-offset: 2px; }
.ttm-phone-home { position: absolute; z-index: 2; bottom: 9px; left: 50%; width: 35px; height: 3px; transform: translateX(-50%); border-radius: 4px; background: #d9e8eea6; }
.ttm-demo[data-phone-recipient="2"] .ttm-phone-device { border-color: #94c1df; border-radius: 14px; background: linear-gradient(90deg, #4c83a6 0%, #a6d3ee 3%, #467b9f 5%, #254d6e 95%, #7fb8dc 98%, #365f7e 100%); box-shadow: inset 0 0 0 1px #c6e8ff4d, 0 12px 20px #0005, 0 2px 3px #0008; }
.ttm-demo[data-phone-recipient="2"] .ttm-phone-device::before, .ttm-demo[data-phone-recipient="2"] .ttm-phone-device::after { background: #8db8d3; }
.ttm-demo[data-phone-recipient="2"] .ttm-phone-device::before { top: 39px; height: 29px; box-shadow: none; }
.ttm-demo[data-phone-recipient="2"] .ttm-phone-screen { border-radius: 9px; background: radial-gradient(ellipse at 45% 30%, #304d71 0%, #1a3555 45%, #0b192e 100%); }
.ttm-demo[data-phone-recipient="2"] .ttm-phone-screen::before { top: 6px; width: 5px; height: 5px; border: 1px solid #668ba5; border-radius: 50%; background: radial-gradient(circle at 2px 2px, #26445d 0 1px, #030a12 1.5px); box-shadow: 0 0 0 1px #020914; }
.ttm-demo[data-phone-recipient="2"] .ttm-phone-avatar { border-radius: 9px; }
.ttm-demo[data-phone-recipient="2"] .ttm-phone-status { color: #c4dbf0; }
.ttm-demo[data-phone-recipient="2"] .ttm-phone-answer { border-radius: 11px; }
.ttm-demo[data-phone-recipient="2"] .ttm-phone-key { border-radius: 11px; background: linear-gradient(#436e96, #294e72); }
.ttm-demo[data-phone-recipient="2"] .ttm-phone-home { width: 27px; height: 2px; bottom: 8px; }
.ttm-demo[data-phone-state="rearmed"] .ttm-phone-avatar { border-color: #94d6b769; background: #254b45; color: #b0e8ce; }
.ttm-demo[data-phone-state="ringing"] .ttm-phone-device { animation: ttm-phone-vibrate 1.8s ease-in-out infinite; transform-origin: 50% 70%; }
.ttm-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ttm-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #d3dee8; border-radius: 8px; color: #3c536b; background: #fff; font: 700 .8rem/1.4 Lato, sans-serif; cursor: pointer; }
.ttm-controls .ttm-trigger-button, .ttm-controls .ttm-radio-button { grid-column: 1 / -1; }
.ttm-controls .ttm-trigger-button { border-color: #b64b37; background: #c55b42; color: #fff; }
.ttm-controls .ttm-radio-button { border-color: #277b8b; background: #277b8b; color: #fff; }
.ttm-controls button:hover:not(:disabled) { filter: brightness(.95); }
.ttm-controls button:disabled { opacity: .5; cursor: default; }
.ttm-controls :is([data-ttm-local], [data-ttm-radio])[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 2px #ffffff80; }
.ttm-controls [data-ttm-pause][aria-pressed="true"] { border-color: #d7ac68; background: #fff0d6; color: #895821; }
.ttm-demo button:focus-visible { outline: 3px solid #ee9a36; outline-offset: 4px; }
.ttm-sound-on { display: none; }
.ttm-sound[aria-pressed="true"] .ttm-sound-on { display: inline-block; }
.ttm-sound[aria-pressed="true"] .ttm-sound-off { display: none; }
.ttm-demo .ttm-status { min-height: 4.5em; margin: 0 0 12px; color: #42586e; font-size: .82rem; line-height: 1.5; }
.ttm-readings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ttm-reading { min-width: 0; padding: 13px; border: 1px solid #dbe4ec; border-radius: 10px; background: #fff; }
.ttm-reading h4 { margin: 0 0 8px; color: #627185; font-size: .75rem; font-weight: 700; line-height: 1.4; }
.ttm-reading strong { display: block; color: #344e62; font-size: .97rem; line-height: 1.35; }
.ttm-reading p { margin: 7px 0 0; color: #7a8898; font-size: .69rem; line-height: 1.5; }
.ttm-demo[data-phase="transmitting"] .ttm-radio-reading { border-color: #79b5ce; background: #f1f9fc; }
.ttm-demo[data-phase="alarm"] :is(.ttm-siren-reading, .ttm-beacon-reading) { border-color: #e3aca5; background: #fff4f1; }
.ttm-demo[data-phase="alarm"] :is(.ttm-siren-reading, .ttm-beacon-reading) strong { color: #b94635; }
.ttm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 10px; padding: 0; list-style: none; }
.ttm-steps li { min-width: 0; padding: 9px 3px 0; border-top: 2px solid #dbe4ec; color: #7a8999; font-size: .7rem; line-height: 1.4; }
.ttm-steps li span { display: block; margin-bottom: 4px; font-size: .62rem; letter-spacing: .1em; }
.ttm-steps [data-state="active"] { border-color: #d89743; color: #996526; }
.ttm-steps [data-state="complete"] { border-color: #42918d; color: #367c79; }
.ttm-sequence-note { margin: 10px 0 14px; color: #627185; font-size: .77rem; line-height: 1.6; }
.ttm-response-note { padding: 12px 14px; border-left: 3px solid #d2a56a; border-radius: 0 8px 8px 0; background: #f5efe5; color: #6b5940; font-size: .77rem; line-height: 1.55; }
.ttm-response-note > strong { color: #735321; }
.ttm-response-note p { margin: 5px 0 0; }
.ttm-remote-feature { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.ttm-remote-feature > i { flex: 0 0 16px; margin-top: 4px; color: #92713d; text-align: center; }
.ttm-remote-feature p { margin: 0; }
.ttm-remote-feature strong { display: block; margin-bottom: 3px; color: #735321; font-size: .74rem; }
.ttm-note { margin: 18px 0 0; padding-top: 12px; border-top: 1px solid #dbe4ec; color: #7a8898; font-size: .73rem; line-height: 1.65; }
.ttm-beacon-glow, .ttm-siren-waves { opacity: 0; }
.ttm-radio-path { opacity: .2; }
.ttm-radio-waves { opacity: 0; }
.ttm-demo[data-source="local"] .ttm-local-trigger, .ttm-demo[data-source="radio"] .ttm-remote-trigger { filter: drop-shadow(0 0 6px #faad7c); }
.ttm-demo[data-source="radio"] .ttm-radio-path { opacity: .85; }
.ttm-demo[data-phase="transmitting"] .ttm-radio-path { stroke-dashoffset: 0; animation: ttm-transmission 1.6s linear infinite; }
.ttm-demo[data-phase="transmitting"] .ttm-radio-waves { opacity: .8; animation: ttm-waves 1.6s ease-in-out infinite; }
.ttm-demo[data-phase="processing"] .ttm-command-led, .ttm-demo[data-phase="alarm"] .ttm-command-led { fill: #a9efd5; filter: drop-shadow(0 0 3px #86ddb7); }
.ttm-demo[data-source="radio"]:is([data-phase="processing"], [data-phase="alarm"]) .ttm-receiver-led { fill: #8edcf6; filter: drop-shadow(0 0 3px #79d9f8); }
.ttm-demo[data-phase="alarm"] .ttm-beacon-lamp { fill: #ff514c; }
.ttm-demo[data-phase="alarm"] .ttm-beacon-glow { opacity: .65; animation: ttm-beacon 1.8s ease-in-out infinite; }
.ttm-demo[data-phase="alarm"] .ttm-siren-waves { opacity: .8; animation: ttm-waves 1.8s ease-in-out infinite; }
.ttm-demo[data-running="false"] *, .ttm-demo[data-running="false"] *::before { animation-play-state: paused !important; }
@keyframes ttm-transmission { to { stroke-dashoffset: -48; } }
@keyframes ttm-beacon { 0%, 100% { opacity: .18; } 45%, 65% { opacity: .85; } }
@keyframes ttm-waves { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes ttm-phone-vibrate { 0%, 24%, 100% { transform: translateX(0) rotate(0); } 4%, 12%, 20% { transform: translateX(-1.5px) rotate(-1deg); } 8%, 16% { transform: translateX(1.5px) rotate(1deg); } }
@media (min-width: 900px) {
  .ttm-workspace { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); }
  .ttm-visual { position: sticky; top: 150px; }
  .ttm-controls { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ttm-controls .ttm-trigger-button, .ttm-controls .ttm-radio-button { grid-column: span 3; }
  .ttm-controls > button:nth-child(n+3) { grid-column: span 2; }
}
@media (max-width: 900px) { .ttm-heading { flex-direction: column; gap: 12px; } .ttm-tag { font-size: .66rem; } }
@media (max-width: 760px) { #totem-incendie .prestation-card-body { grid-template-areas: "media" "content" "simulation" "details"; } }
@media (max-width: 560px) {
  .ttm-demo { padding: 14px; }
  .ttm-stage-heading { align-items: flex-start; gap: 6px; padding: 10px; }
  .ttm-stage-caption { display: none; }
  .ttm-stage-heading > .ttm-phase { flex: 1 1 auto; min-width: 0; }
  .ttm-transmitter-option { gap: 8px; padding: 9px 10px; }
  .ttm-transmitter-option { flex-wrap: wrap; }
  .ttm-transmitter-option strong { font-size: .8rem; }
  .ttm-transmitter-option p { font-size: .75rem; }
  .ttm-transmitter-toggle { margin-left: auto; gap: 5px; font-size: .75rem; }
  .ttm-transmitter-toggle > [data-ttm-transmitter-state] { min-width: 48px; }
  .ttm-contacts { gap: 6px; padding: 0 10px 10px; }
  .ttm-contact { padding: 8px; }
  .ttm-contact > span { font-size: .75rem; }
  .ttm-contact strong { font-size: .8rem; }
  .ttm-power-summary, .ttm-phase, .ttm-scene-key { font-size: .75rem; }
  .ttm-scene-key .ttm-equipment-hint { font-size: .75rem; }
  .ttm-equipment-canvas { padding-bottom: max(0px, calc(246px - 46.153846%)); }
  /* The mobile SVG uses a centred 650 × 500 crop of the 900 × 500 drawing. */
  .ttm-equipment-radio { left: 41.153846%; }
  .ttm-equipment-local-full { left: 83.521538%; }
  .ttm-view-toggle { max-width: 148px; min-height: 48px; font-size: .75rem; padding: 6px 7px; }
  .ttm-plan-toolbar { min-height: 76px; padding: 7px 9px; gap: 8px; font-size: .75rem; }
  .ttm-plan-call-banner { gap: 8px; padding: 8px 9px; }
  .ttm-plan-call-banner p { gap: 6px; font-size: .75rem; }
  .ttm-plan-call-banner button { gap: 5px; padding: 7px; font-size: .72rem; }
  .ttm-plan-zoom { min-height: 48px; padding: 6px 8px; font-size: .75rem; }
  .ttm-plan-legend { gap: 5px 10px; font-size: .75rem; }
  .ttm-scene { min-height: 0; aspect-ratio: 13 / 10; }
  .ttm-scene-callout { display: none; }
  .ttm-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ttm-controls button { min-height: 48px; padding: 9px; font-size: .82rem; gap: 6px; }
  .ttm-controls [data-ttm-reset] { grid-column: 1 / -1; }
  .ttm-demo button { touch-action: manipulation; }
  .ttm-readings { gap: 8px; }
  .ttm-reading { padding: 10px; }
  .ttm-reading h4 { font-size: .8rem; }
  .ttm-reading strong { font-size: .9rem; }
  .ttm-reading p { font-size: .78rem; }
  .ttm-steps { gap: 5px; }
  .ttm-steps li { font-size: .75rem; }
  .ttm-phone-notice, .ttm-response-note, .ttm-remote-feature strong, .ttm-note { font-size: .8rem; }
}
@media (max-width: 380px) {
  .ttm-stage-heading { flex-wrap: wrap; }
  .ttm-stage-heading > .ttm-phase { flex-basis: 100%; }
  .ttm-transmitter-option { align-items: flex-start; flex-wrap: wrap; }
  .ttm-transmitter-option > div { flex: 1 1 150px; }
  .ttm-transmitter-toggle { margin-left: auto; }
  .ttm-view-toggle { max-width: none; width: 100%; }
  .ttm-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ttm-demo *, .ttm-demo *::before { animation: none !important; transition: none !important; } }