/* Écran 4 — plan de quartier vivant : blanc, gris #F3F4F6, menthe #2BB39A + corail #FF6B57 */
.slide[data-screen="04"] { --mint: #2BB39A; --coral: #FF6B57; --ink: #14213d; --card: #F3F4F6; --muted: #C9D6D2; color: var(--ink); }
.slide[data-screen="04"] .wrap { gap: .95rem; padding-bottom: .5rem; }

/* Progression par étapes : segments qui se remplissent */
.slide[data-screen="04"] .steps { padding: .55rem 0 0 2.8rem; }
.slide[data-screen="04"] .steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.slide[data-screen="04"] .steps li { display: flex; flex-direction: column; gap: .35rem; font-size: .66rem; color: #9CA3AF; letter-spacing: .01em; }
.slide[data-screen="04"] .steps i { display: block; height: 4px; border-radius: 4px; background: #E5E7EB; overflow: hidden; }
.slide[data-screen="04"] .steps b { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--mint), #5FD3BC); transition: width .9s cubic-bezier(.22,1,.36,1); }
.slide[data-screen="04"] .steps.go .done b { width: 100%; }
.slide[data-screen="04"] .steps.go .now b { width: 22%; transition-delay: .35s; }
.slide[data-screen="04"] .steps.go .now.ok b { width: 100%; transition-delay: 0s; background: linear-gradient(90deg, var(--mint), var(--coral)); }
.slide[data-screen="04"] .steps .done { color: var(--ink); }
.slide[data-screen="04"] .steps .now { color: var(--mint); font-weight: 600; }

/* Carte du quartier */
.slide[data-screen="04"] .map {
  position: relative; border-radius: 1.5rem; overflow: hidden; background: #FBFDFC;
  box-shadow: 0 0 0 1px #EEF2F1, 0 18px 36px -26px rgb(20 33 61 / .45);
  animation: s04-in .7s cubic-bezier(.22,1,.36,1) both;
}
.slide[data-screen="04"] .map svg { width: 100%; height: auto; }
.slide[data-screen="04"] .cap {
  position: absolute; left: .55rem; top: .55rem; margin: 0; display: flex; align-items: center; gap: .4rem;
  padding: .28rem .65rem .28rem .45rem; border-radius: 2rem; background: rgb(255 255 255 / .92);
  font-size: .72rem; font-weight: 600; box-shadow: 0 4px 14px -6px rgb(20 33 61 / .35);
}
.slide[data-screen="04"] .cap i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); transition: background .3s; }
.slide[data-screen="04"] .map.lit .cap i { background: var(--mint); animation: s04-blink 1.8s ease-in-out infinite; }

.slide[data-screen="04"] .map .win { fill: #DCE8E4; transition: fill .45s; }
.slide[data-screen="04"] .map .roof { fill: var(--muted); stroke: var(--muted); transition: fill .45s, stroke .45s; }
.slide[data-screen="04"] .map .awn { fill: var(--muted); transition: fill .45s; }

/* Épingles : tombent et rebondissent, onde au sol */
.slide[data-screen="04"] .pin-i { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; transform: translateY(-20px) scale(.5); transition: opacity .2s, transform .25s ease-in; }
.slide[data-screen="04"] .on .pin-i { opacity: 1; transform: none; transition: opacity .15s, transform .6s cubic-bezier(.34,1.9,.64,1); }
.slide[data-screen="04"] .hv:not(.on) .pin-i { opacity: .35; transform: translateY(-5px) scale(.85); }
.slide[data-screen="04"] .ring { transform-box: fill-box; transform-origin: center; opacity: 0; }
.slide[data-screen="04"] .on .ring { animation: s04-ring 2s .4s ease-out infinite; }

/* Salon : l'auvent passe au corail */
.slide[data-screen="04"] .l-salon.on .awn { fill: var(--coral); }
.slide[data-screen="04"] .l-salon.on .win { fill: #C7F0E6; }

/* Domicile : trajet pointillé qui se dessine, puis la maison cliente s'allume */
.slide[data-screen="04"] .route-m { stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset .5s cubic-bezier(.65,0,.35,1); }
.slide[data-screen="04"] .l-dom.on .route-m { stroke-dashoffset: 0; transition-duration: 1s; }
.slide[data-screen="04"] .l-dom.hv:not(.on) .route-m { stroke-dashoffset: 72; }
.slide[data-screen="04"] .l-dom.on .dots { animation: s04-march 1s linear infinite; }
.slide[data-screen="04"] .l-dom.on .roof { fill: var(--mint); stroke: var(--mint); transition-delay: .8s; }
.slide[data-screen="04"] .l-dom.on .client .win { fill: #C7F0E6; transition-delay: .8s; }
.slide[data-screen="04"] .l-dom.on .pin-i { transition-delay: .85s; }

/* Chez moi : la maison s'allume, halo chaud et fumée */
.slide[data-screen="04"] .glow { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.4); transition: opacity .5s, transform .7s cubic-bezier(.34,1.56,.64,1); }
.slide[data-screen="04"] .l-home.on .glow { opacity: 1; transform: none; }
.slide[data-screen="04"] .l-home.hv:not(.on) .glow { opacity: .4; transform: scale(.7); }
.slide[data-screen="04"] .l-home.on .roof { fill: var(--coral); stroke: var(--coral); }
.slide[data-screen="04"] .l-home.on .win { fill: #FFC857; }
.slide[data-screen="04"] .l-home.on .door { fill: #FFB23F; }
.slide[data-screen="04"] .smoke circle { fill: #DCE6E3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.slide[data-screen="04"] .l-home.on .smoke circle { animation: s04-smoke 2.6s ease-out infinite; }
.slide[data-screen="04"] .l-home.on .smoke circle + circle { animation-delay: 1.3s; }

/* À distance : l'écran passe au menthe, ondes wifi en cascade */
.slide[data-screen="04"] .scr { fill: #DCE8E4; transition: fill .4s; }
.slide[data-screen="04"] .l-remote.on .scr { fill: var(--mint); }
.slide[data-screen="04"] .waves path { opacity: 0; transition: opacity .3s; }
.slide[data-screen="04"] .l-remote.hv:not(.on) .waves path { opacity: .3; }
.slide[data-screen="04"] .l-remote.on .waves path { animation: s04-wave 1.8s ease-in-out infinite; }
.slide[data-screen="04"] .l-remote.on .w2 { animation-delay: .2s; }
.slide[data-screen="04"] .l-remote.on .w3 { animation-delay: .4s; }

/* Titre */
.slide[data-screen="04"] .q { margin: .1rem 0 0; font-size: clamp(1.1rem, 7vw, 2.1rem); line-height: 1.2; font-weight: 600; letter-spacing: -.02em; text-align: center; text-wrap: balance; }
.slide[data-screen="04"] .q em { font-style: normal; color: var(--mint); position: relative; }
.slide[data-screen="04"] .q em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .18em; background: var(--coral); opacity: .35; border-radius: 1em; transform: scaleX(0); transform-origin: left; animation: s04-under .6s .5s cubic-bezier(.22,1,.36,1) forwards; }
.slide[data-screen="04"] .hint { margin: -.55rem 0 0; color: #6B7280; font-size: .92rem; text-align: center; }

/* Cartes cochables */
.slide[data-screen="04"] .list { display: grid; gap: .6rem; }
.slide[data-screen="04"] .card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
  padding: .85rem 1rem; border: 2px solid transparent; border-radius: 1.25rem; background: var(--card);
  animation: s04-in .55s cubic-bezier(.22,1,.36,1) backwards;
  transition: background .25s, border-color .25s, box-shadow .25s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.slide[data-screen="04"] .list > :nth-child(1) { animation-delay: .12s; }
.slide[data-screen="04"] .list > :nth-child(2) { animation-delay: .19s; }
.slide[data-screen="04"] .list > :nth-child(3) { animation-delay: .26s; }
.slide[data-screen="04"] .list > :nth-child(4) { animation-delay: .33s; }
.slide[data-screen="04"] .list > :nth-child(5) { animation-delay: .40s; }
.slide[data-screen="04"] .list.ready > .card { animation: none; }
.slide[data-screen="04"] .card:hover { background: #ECEEF1; }
.slide[data-screen="04"] .card[aria-pressed="true"] { background: #E9F8F4; border-color: var(--mint); box-shadow: 0 8px 20px -12px rgb(43 179 154 / .6); }
.slide[data-screen="04"] .rip {
  position: absolute; left: 0; top: 0; z-index: -1; width: 30rem; height: 30rem; margin: -15rem 0 0 -15rem; border-radius: 50%;
  background: radial-gradient(circle, rgb(43 179 154 / .38), rgb(43 179 154 / .12) 45%, rgb(43 179 154 / 0) 70%); pointer-events: none;
}

.slide[data-screen="04"] .ico { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); transition: background .25s, color .25s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.slide[data-screen="04"] .ico svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.slide[data-screen="04"] [aria-pressed="true"] > .ico,
.slide[data-screen="04"] .other[aria-pressed="true"] .ico { background: var(--mint); color: #fff; transform: rotate(-8deg); }
.slide[data-screen="04"] .txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.slide[data-screen="04"] .txt strong { font-weight: 600; font-size: 1rem; }
.slide[data-screen="04"] .txt small { color: #6B7280; font-size: .8rem; }

.slide[data-screen="04"] .box { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid #D1D5DB; background: #fff; display: grid; place-items: center; transition: background .25s, border-color .25s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.slide[data-screen="04"] .ck { width: 1rem; height: 1rem; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .35s cubic-bezier(.65,0,.35,1) .08s; }
.slide[data-screen="04"] [aria-pressed="true"] > .box,
.slide[data-screen="04"] .other[aria-pressed="true"] .box { background: var(--coral); border-color: var(--coral); transform: scale(1.08); }
.slide[data-screen="04"] [aria-pressed="true"] > .box .ck,
.slide[data-screen="04"] .other[aria-pressed="true"] .ck { stroke-dashoffset: 0; }

.slide[data-screen="04"] .other { flex-direction: column; align-items: stretch; gap: 0; }
.slide[data-screen="04"] .other-t { display: flex; align-items: center; gap: .85rem; padding: 0; border: 0; background: none; text-align: left; width: 100%; }
.slide[data-screen="04"] .other input { max-height: 0; opacity: 0; margin-top: 0; padding: 0 .9rem; border: 0; border-radius: .9rem; background: #fff; outline-offset: 1px; transition: max-height .3s, opacity .25s, margin .3s, padding .3s; }
.slide[data-screen="04"] .other[aria-pressed="true"] input,
.slide[data-screen="04"] .other input:focus { max-height: 3.2rem; opacity: 1; margin-top: .7rem; padding: .75rem .9rem; }

.slide[data-screen="04"] .next {
  position: sticky; bottom: 0; margin-top: .4rem; min-height: 3.4rem; border: 0; border-radius: 1rem;
  background: var(--mint); color: #fff; font-weight: 600; font-size: 1.05rem;
  box-shadow: 0 10px 24px -12px rgb(43 179 154 / .9), 0 -14px 16px 4px #fff; transition: opacity .25s, background .25s, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.slide[data-screen="04"] .next:hover:not(:disabled) { background: #24A08A; }
.slide[data-screen="04"] .next:disabled { opacity: .4; cursor: not-allowed; box-shadow: 0 -14px 16px 4px #fff; }

@media (min-width: 768px) {
  .slide[data-screen="04"] .wrap { max-width: 36rem; }
  .slide[data-screen="04"] .steps li { font-size: .74rem; }

  .slide[data-screen="04"] .list { grid-template-columns: 1fr 1fr; }
  .slide[data-screen="04"] .other { grid-column: 1 / -1; }
  .slide[data-screen="04"] .next { position: static; box-shadow: 0 10px 24px -12px rgb(43 179 154 / .9); }
}

@keyframes s04-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes s04-under { to { transform: scaleX(1); } }
@keyframes s04-ring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes s04-march { to { stroke-dashoffset: -14; } }
@keyframes s04-smoke { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(5px, -16px) scale(1.5); } }
@keyframes s04-wave { 0%, 100% { opacity: .15; } 40% { opacity: 1; } }
@keyframes s04-blink { 0%, 100% { box-shadow: 0 0 0 0 rgb(43 179 154 / .5); } 50% { box-shadow: 0 0 0 5px rgb(43 179 154 / 0); } }

@media (prefers-reduced-motion: reduce) {
  .slide[data-screen="04"] .ring, .slide[data-screen="04"] .dots, .slide[data-screen="04"] .smoke circle,
  .slide[data-screen="04"] .cap i { animation: none !important; }
  .slide[data-screen="04"] .l-remote.on .waves path { animation: none !important; opacity: 1; }
}

/* Barre d'avancement : trajet pointillé du plan, tracé menthe et repère corail en tête */
.slide[data-screen="04"] .q-progress {
  top: max(.5rem, env(safe-area-inset-top));
  width: 100%; max-width: 36rem; height: 8px;
  margin: calc(max(.5rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-top))) auto .5rem;
  background: repeating-linear-gradient(90deg, #BCCAC6 0 6px, transparent 6px 11px) 0 50% / 100% 2px no-repeat;
}
.slide[data-screen="04"] .q-progress i {
  position: relative; height: 4px; margin-top: 2px; border-radius: 4px;
  background: linear-gradient(90deg, #1E9A83, var(--mint));
}
.slide[data-screen="04"] .q-progress i::after {
  content: ""; position: absolute; right: -4px; top: -2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--coral);
}