/* ══ Simulateur dépoli photo — /assets/js/sim-depoli.js ══ */
.sd{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:0; max-width:1120px; margin:0 auto;
  border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 24px 60px rgba(12,27,46,.14); border:1px solid rgba(12,27,46,.06); }
/* La photo garde son cadrage 16:9, centrée sur un « mur » de la même teinte :
   quand le panneau est plus haut que la photo, on voit un mur, pas un vide. */
.sd-stage{ position:relative; min-width:0; overflow:hidden; background:#ececE8; display:flex; align-items:center; }
.sd-frame{ position:relative; width:100%; aspect-ratio:16/9; }
@media (min-width:901px){ .sd-frame img{ -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); } }
.sd-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; }
.sd-layer{ opacity:0; transition:opacity .45s ease; }
.sd-layer.on{ opacity:1; }
.sd.is-bare .sd-layer{ opacity:0 !important; transition-duration:.15s; }
.sd-badge{ position:absolute; left:14px; top:14px; z-index:2; padding:.42rem .8rem; border-radius:999px; font-size:.74rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:#0C1B2E; background:#C9A84C; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:opacity .2s; }
.sd.is-bare .sd-badge{ opacity:0; }
.sd-hold{ position:absolute; right:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .9rem;
  border-radius:999px; border:0; cursor:pointer; font:inherit; font-size:.8rem; font-weight:700; color:#fff;
  background:rgba(12,27,46,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); touch-action:none; user-select:none; -webkit-user-select:none; }
.sd-hold svg{ width:16px; height:16px; }
.sd-hold[aria-pressed="true"]{ background:#C9A84C; color:#0C1B2E; }
.sd-hold:focus-visible{ outline:2px solid #C9A84C; outline-offset:2px; }

.sd-panel{ min-width:0; padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:1rem; border-left:1px solid rgba(12,27,46,.07); }
.sd-tabs{ display:grid; grid-template-columns:repeat(4,auto); gap:.25rem; padding:.3rem; border-radius:14px; background:#f3f1ec; }
.sd-tab{ font:inherit; font-size:.84rem; font-weight:700; padding:.55rem .7rem; border:0; border-radius:10px; cursor:pointer; color:var(--navy,#0C1B2E); background:transparent; white-space:nowrap; }
.sd-tab.on{ background:#fff; box-shadow:0 2px 8px rgba(12,27,46,.12); }
.sd-tab--mesure{ color:#9a7a24; }
.sd-tab--mesure.on{ background:#C9A84C; color:#0C1B2E; }
.sd-tab:focus-visible, .sd-chip:focus-visible{ outline:2px solid var(--navy,#0C1B2E); outline-offset:2px; }
.sd-chips{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
.sd-chip{ display:flex; align-items:center; gap:.55rem; padding:.35rem; border-radius:12px; cursor:pointer; text-align:left; font:inherit;
  font-size:.8rem; font-weight:600; line-height:1.25; color:var(--navy,#0C1B2E); background:#fff; border:1.5px solid rgba(12,27,46,.12); transition:border-color .15s, box-shadow .15s; }
.sd-chip img{ width:54px; height:40px; object-fit:cover; object-position:30% 50%; border-radius:8px; flex:none; background:#eceae4; }
.sd-chip:hover{ border-color:#C9A84C; }
.sd-chip.on{ border-color:#C9A84C; box-shadow:0 0 0 3px rgba(201,168,76,.22); }
.sd-chip--mesure{ grid-column:1 / -1; }

.sd-info{ border-top:1px solid rgba(12,27,46,.08); padding-top:1rem; }
.sd-name{ margin:0 0 .35rem; font-size:1.2rem; color:var(--navy,#0C1B2E); }
.sd .sd-desc{ margin:0 0 .8rem; font-size:.9rem !important; line-height:1.55; color:var(--text-muted); }
.sd-meters{ list-style:none; margin:0 0 .7rem; padding:0; display:grid; gap:.4rem; }
.sd-meters li{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.84rem !important; color:var(--navy,#0C1B2E); }
.sd-meters b{ display:inline-flex; gap:4px; }
.sd-meters i{ width:22px; height:7px; border-radius:4px; background:#e6e2d8; }
.sd-meters i.on{ background:#C9A84C; }
.sd .sd-night{ margin:0 0 1rem; font-size:.8rem !important; line-height:1.45; padding:.5rem .7rem; border-radius:10px; }
.sd-night.ok{ background:rgba(63,154,138,.1); color:#1f6b5e; }
.sd-night.warn{ background:rgba(208,138,0,.1); color:#8a5a00; }
.sd-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; }
.sd-cta .btn{ white-space:normal; text-align:left; }
.sd-more{ font-size:.86rem; color:var(--navy,#0C1B2E); text-underline-offset:3px; }

@media (max-width:900px){
  .sd{ grid-template-columns:1fr; border-radius:16px; }
  .sd-panel{ border-left:0; padding:1.1rem 1rem 1.3rem; }
  .sd-tab{ font-size:.76rem; padding:.55rem .3rem; }
  .sd-stage{ display:block; }
  .sd-chips{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -1rem; padding:0 1rem .2rem; scrollbar-width:none; }
  .sd-chips::-webkit-scrollbar{ display:none; }
  .sd-chip{ flex:0 0 auto; scroll-snap-align:start; flex-direction:column; align-items:stretch; width:112px; font-size:.74rem; text-align:center; }
  .sd-chip img{ width:100%; height:58px; }
  .sd-chip--mesure{ width:100%; flex-direction:row; text-align:left; }
  .sd-chip--mesure img{ width:72px; }
}
@media (prefers-reduced-motion: reduce){ .sd-layer{ transition:none; } }

/* ══ Variante miroir sans tain (sim-miroir.js) ══ */
.sm .sm-frame{ aspect-ratio:4/3; }
.sm .sd-stage{ background:#dfe6ee; }
.sm .sd-frame img{ -webkit-mask-image:none; mask-image:none; }
.sm .sm-k{ margin:0; font-size:.72rem !important; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#9a7a24; }
.sm-steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem; }
.sm-step{ display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.35rem .35rem .55rem; border-radius:12px; cursor:pointer;
  font:inherit; font-size:.82rem; font-weight:700; color:var(--navy,#0C1B2E); background:#fff; border:1.5px solid rgba(12,27,46,.12); transition:border-color .15s, box-shadow .15s; }
.sm-step img{ width:100%; aspect-ratio:240/167; object-fit:cover; border-radius:8px; display:block; }
.sm-step:hover{ border-color:#C9A84C; }
.sm-step.on{ border-color:#C9A84C; box-shadow:0 0 0 3px rgba(201,168,76,.22); }
.sm-step:focus-visible{ outline:2px solid var(--navy,#0C1B2E); outline-offset:2px; }
.sm-dots{ display:inline-flex; gap:3px; }
.sm-dots i{ width:7px; height:7px; border-radius:50%; background:#C9A84C; }
.sm-data{ list-style:none; margin:0 0 .8rem; padding:0; display:grid; gap:.6rem; }
.sm-row{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; font-size:.82rem; color:var(--navy,#0C1B2E); }
.sm-row strong{ font-family:var(--font-head); font-size:1rem; font-weight:800; white-space:nowrap; }
.sm-bar{ height:6px; border-radius:4px; background:#ece8de; margin-top:.25rem; overflow:hidden; }
.sm-bar i{ display:block; height:100%; border-radius:4px; background:#C9A84C; transition:width .45s ease; }
.sm-data small{ display:block; margin-top:.2rem; font-size:.72rem; color:var(--text-muted); }
.sm-step{ min-width:0; }
.sm-steps5{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:.35rem; }
.sm-steps5 .sm-step{ font-size:.72rem; padding:.3rem .25rem .45rem; }
@media (max-width:480px){ .sm-steps5 .sm-step{ font-size:.66rem; } .sm-steps5 .sm-step-p{ font-size:.6rem; } }
.sm-step-n{ line-height:1.15; text-align:center; }
.sm-step-p{ margin-top:-.2rem; font-size:.66rem; font-weight:600; color:var(--text-muted); }
.sm-fiche{ display:inline-flex; align-items:center; gap:.4rem; margin:.1rem 0 .55rem; font-size:.84rem; font-weight:700; color:var(--navy,#0C1B2E); text-decoration:underline; text-underline-offset:3px; text-decoration-color:#C9A84C; }
.sm-fiche svg{ width:17px; height:17px; flex:none; color:#9a7a24; }
.sm-fiche:hover{ color:#9a7a24; }
.sd .sm-src{ margin:0; font-size:.72rem !important; color:var(--text-muted); }
@media (max-width:900px){ .sm .sd-stage{ display:block; } }
@media (min-width:901px){
  .sm .sd-stage{ display:block; align-self:stretch; min-height:520px; }
  .sm .sm-frame{ position:absolute; inset:0; aspect-ratio:auto; }
}

/* ══ Variante anti-chaleur (sim-solaire.js) : 5 teintes, image carrée ══ */
.ss .sd-stage{ background:#1d3f7a; }
.ss-steps{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:.35rem; }
.ss .sm-step{ font-size:.7rem; line-height:1.2; padding:.3rem .25rem .45rem; text-align:center; }
.ss .sm-step img{ aspect-ratio:200/190; }
@media (min-width:901px){ .ss .sm-frame img{ object-position:50% 40%; } }
@media (max-width:900px){
  .ss .sm-frame{ aspect-ratio:1/1; }
  .ss-steps{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -1rem; padding:0 1rem .2rem; scrollbar-width:none; }
  .ss-steps::-webkit-scrollbar{ display:none; }
  .ss .sm-step{ flex:0 0 92px; scroll-snap-align:start; }
}