/* D2A — page « Démo interactive » : scène du salon + écran tactile façon Crestron, en version claire comme le site */

.demo-page { max-width: 1200px; position: relative; }

/* Bouton de fermeture : retour à la section Solutions de l'accueil */
.demo-close {
  position: absolute; top: 36px; right: 30px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px; border: 1px solid var(--red); border-radius: 999px;
  font: 700 11px/34px Montserrat, sans-serif; letter-spacing: 1px; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.demo-close span { font-size: 13px; }
.demo-close:hover, .demo-close:focus-visible { background: var(--red); color: #fff; }
@media (max-width: 1250px) {
  .demo-close { position: static; display: flex; width: max-content; margin: 0 0 18px auto; }
}
.demo-intro { max-width: 760px; margin: 0 auto 24px; text-align: center; }

/* Choix de la démo : maison ou salle de réunion */
.demo-switch {
  display: flex; width: max-content; max-width: 100%; margin: -6px auto 18px; padding: 4px;
  background: #eceef1; border-radius: 999px;
}
.demo-switch a {
  padding: 0 22px; border-radius: 999px; color: #6b717b;
  font: 700 12px/36px Montserrat, sans-serif; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
  transition: background .25s, color .25s;
}
.demo-switch a:hover { color: var(--red); }
.demo-switch a[aria-current="true"] { background: var(--red); color: #fff; }

/* Salle de réunion : micros au plafond actifs pendant la visio */
.mring { opacity: 0; transform-origin: 320px 14px; transform-box: view-box; }
.mics-live .mring { animation: ring 2s ease-out infinite; }
.mics-live .mring:nth-child(2) { animation-delay: 1s; }
.segs.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.segs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vol-row { margin-top: 12px; }
.call-btn {
  width: 100%; padding: 14px; border-radius: 12px; border: 0; background: #1f9d55; color: #fff !important;
  font: 700 13px/1 Montserrat, sans-serif; letter-spacing: .5px; text-transform: uppercase;
  transition: background .25s;
}
.call-btn.live { background: var(--red); }
.toggles { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.toggles li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--k-surface); font-weight: 600; }

/* Mise en page : scène à gauche (collante), écran tactile à droite */
.domo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: start; }
.scene {
  position: sticky; top: 30px;
  aspect-ratio: 16 / 10; overflow: hidden;
  background: #ece9e4; box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}
.scene svg { display: block; width: 100%; height: 100%; }
.scene .fade { transition: opacity .8s; }
.scene .sky { transition: fill .8s; }
.scene .blind { transition: transform .9s cubic-bezier(.6, 0, .2, 1); }
.scene-label, .scene-now span {
  font: 700 11px/1 Montserrat, sans-serif; letter-spacing: 1px;
  color: #fff; background: rgba(0, 0, 0, .55); padding: 7px 10px;
}
.scene-label { position: absolute; top: 14px; left: 14px; text-transform: uppercase; }
.scene-now { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.scene-now span { font-weight: 600; letter-spacing: .3px; }

/* Climatisation : flux d'air animé, couleur selon le mode */
#airflow.auto { stroke: #9aa0aa; }
#airflow.cool { stroke: #7cc4ff; }
#airflow.heat { stroke: #ff9f5a; }
.air { stroke-dasharray: 6 6; animation: air 1.2s linear infinite; }
@keyframes air { to { stroke-dashoffset: -24; } }

/* Musique au salon : ondes autour de l'enceinte */
.ring { opacity: 0; transform-origin: 322px 225px; transform-box: view-box; }
.playing .ring { animation: ring 2.4s ease-out infinite; }
.playing .ring:nth-child(2) { animation-delay: .8s; }
.playing .ring:nth-child(3) { animation-delay: 1.6s; }
@keyframes ring { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }

/* Écran tactile */
.keypad {
  --k-bg: #fff; --k-surface: #f4f5f7; --k-line: #dcdfe4; --k-fg: #222; --k-muted: #6b717b; --k-track: #eceef1;
  background: var(--k-bg); color: var(--k-fg);
  padding: 18px; border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .10), inset 0 0 0 1px #e3e5e9;
  font-size: 13px; line-height: 1.4;
}
.keypad button { font-family: Montserrat, sans-serif; color: inherit; cursor: pointer; }
.ktabs { display: flex; gap: 2px; padding: 4px; background: var(--k-track); border-radius: 12px; }
.ktab {
  flex: 1 1 auto; white-space: nowrap; padding: 11px 6px; border: 0; border-radius: 9px; background: transparent;
  color: var(--k-muted) !important; font: 700 11px/1.1 Montserrat, sans-serif; letter-spacing: .3px; text-transform: uppercase;
}
.ktab[aria-selected="true"] { background: var(--red); color: #fff !important; }
.kpanel { margin-top: 14px; }
.kp-note { color: var(--k-muted); margin-bottom: 14px; }
.kp-title { margin: 18px 0 10px; font: 700 11px/1 Montserrat, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--k-muted); }
.kpanel > .kp-title:first-child { margin-top: 0; }

.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.key {
  text-align: left; padding: 14px; border-radius: 12px;
  border: 1px solid var(--k-line); background: var(--k-surface);
  font: 700 14px/1.2 Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .5px;
  transition: border-color .2s, background .2s;
}
.key small { display: block; margin-top: 6px; font: 400 11px/1.35 Montserrat, sans-serif; text-transform: none; letter-spacing: 0; color: var(--k-muted); }
.key:hover { border-color: #b5bac2; }
.key[aria-pressed="true"] { border-color: var(--red); background: rgba(221, 51, 51, .08); }

.readout { margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.readout div { padding: 10px; border-radius: 10px; background: var(--k-track); min-width: 0; }
.readout dt { font: 700 9px/1 Montserrat, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--k-muted); }
.readout dd { margin: 8px 0 0; font: 600 15px/1.1 Montserrat, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

input[type="range"] { width: 100%; margin: 0; accent-color: var(--red); }
.dimmers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dimmer { display: grid; grid-template-columns: 110px minmax(0, 1fr) 46px; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; background: var(--k-surface); }
.dimmer label { font-weight: 600; }
.dimmer output, .zone .vol { text-align: right; font-variant-numeric: tabular-nums; color: var(--k-muted); }

.wide {
  margin-top: 10px; width: 100%; padding: 12px; border-radius: 10px;
  border: 1px dashed var(--k-line); background: transparent;
  font: 700 12px/1 Montserrat, sans-serif; letter-spacing: .3px; text-transform: uppercase;
}
.wide:hover { border-color: var(--red); }

.seg {
  padding: 10px 6px; border-radius: 10px; border: 1px solid var(--k-line); background: transparent;
  color: var(--k-muted) !important; font: 700 11px/1.1 Montserrat, sans-serif; letter-spacing: .3px; text-transform: uppercase;
}
.seg[aria-pressed="true"] { border-color: var(--red); background: rgba(221, 51, 51, .08); color: var(--k-fg) !important; }
.seg:hover { border-color: #b5bac2; }
.segs { display: grid; gap: 6px; margin-top: 12px; }
.segs.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.blind-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.thermo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 12px; background: var(--k-surface); }
.thermo-val { text-align: center; }
.thermo-val b { display: block; font: 600 30px/1.1 Montserrat, sans-serif; font-variant-numeric: tabular-nums; color: var(--k-fg); }
.thermo-val small { color: var(--k-muted); }
.round { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--k-line); background: var(--k-track); font: 400 22px/1 Montserrat, sans-serif; }
.round:hover { border-color: var(--red); }

.np { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--k-surface); }
.disc {
  width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle, var(--red) 0 17%, #111 18% 21%, transparent 22%), repeating-radial-gradient(circle, #16181c 0 2px, #22252b 2px 3px);
  box-shadow: inset 0 0 0 1px #2c3038;
}
.disc.spin { animation: spin 1.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.np-meta { display: grid; gap: 3px; min-width: 0; }
.np-meta b { font: 600 17px/1.2 Montserrat, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-meta span { color: var(--k-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-meta .np-src { font: 700 10px/1.2 Montserrat, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--red); }
.play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--red); color: #fff !important; display: grid; place-items: center; }
.play svg { width: 18px; height: 18px; }

.zones { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.zone { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(70px, 1fr) 42px; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--k-surface); }
.zone .nm { display: grid; gap: 2px; min-width: 0; }
.zone .nm b { font-weight: 600; }
.zone .nm small { font-size: 11px; color: var(--k-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone.off .vol, .zone.off input { opacity: .35; }
.sw { width: 36px; height: 22px; border-radius: 999px; border: 0; background: var(--k-line); position: relative; padding: 0; flex: none; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .2s; }
.sw[aria-checked="true"] { background: var(--red); }
.sw[aria-checked="true"]::after { transform: translateX(14px); background: #fff; }

.keypad button:focus-visible, .keypad input:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.platforms { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 11px; line-height: 1.5; color: var(--muted); }

.demo-end { margin-top: 50px; text-align: center; }
.demo-end p { max-width: 640px; margin: 0 auto 26px; }
.contact-link {
  display: inline-block; padding: 0 34px; border: 1px solid var(--red);
  font: 700 14px/56px Montserrat, sans-serif; letter-spacing: 1px; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.contact-link:hover, .contact-link:focus-visible { background: var(--red); color: #fff; }

@media (max-width: 1250px) {
  .domo { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin: 0 auto; }
  .scene { position: relative; top: 0; }
}
@media (max-width: 560px) {
  .keypad { padding: 14px; border-radius: 14px; }
  .ktab { font-size: 9px; letter-spacing: 0; padding: 10px 3px; }
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segs.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segs.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demo-switch a { padding: 0 14px; font-size: 11px; letter-spacing: .5px; }
  .dimmer { grid-template-columns: minmax(0, 1fr) 46px; }
  .dimmer input { grid-column: 1 / -1; grid-row: 2; }
  .zone { grid-template-columns: auto minmax(0, 1fr) 42px; }
  .zone input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
  .scene-label, .scene-now span { font-size: 10px; padding: 5px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .air, .disc.spin, .playing .ring, .mics-live .mring { animation: none; }
  .scene .fade, .scene .sky, .scene .blind { transition: none; }
}