/* Expérience « La panne devant chez vous » — tout est préfixé .gar, aucune règle globale */
.gar{position:relative;height:780vh;background:#0F1A20;color:#fff}
.gar__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#0F1A20}
.gar__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;background:#0F1A20}
.gar__scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(6,11,14,.62),rgba(6,11,14,0) 42%)}

.gar__hint{position:absolute;left:50%;top:calc(var(--header-h,74px) + 1rem);transform:translateX(-50%);margin:0;z-index:2;
  background:rgba(15,26,32,.55);padding:.4rem .9rem;border-radius:999px;font-size:.88rem;color:#fff;white-space:nowrap;
  transition:opacity .4s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.gar__chapter{position:absolute;left:clamp(1rem,4vw,3rem);bottom:calc(env(safe-area-inset-bottom,0px) + clamp(1.25rem,6vh,3.5rem));
  max-width:31rem;padding:1.2rem 1.4rem 1.3rem;background:rgba(15,26,32,.62);color:#fff;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:4px;opacity:0;visibility:hidden;
  will-change:opacity,transform;z-index:2}
.gar__chapter.is-first{opacity:1;visibility:visible}
.gar__title{margin:0;font-family:inherit;font-weight:600;font-size:clamp(1.55rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.01em}

.gar__chapter--sign{text-align:center;max-width:27rem}
.gar__brand{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:.9rem}
.gar__brand-mark{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.4))}
.gar__brand-name{font-size:1.15rem;font-weight:700;color:var(--signal,#E2702F)}
.gar__ctas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem;justify-content:center}
.gar__btn{display:inline-block;text-decoration:none;font-weight:600;padding:.7rem 1.15rem;border-radius:3px;
  background:var(--signal,#E2702F);color:#0F1A20;border:2px solid var(--signal,#E2702F)}
.gar__btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}

.gar__steps{position:absolute;right:clamp(.75rem,2.5vw,2rem);top:50%;transform:translateY(-50%);z-index:2;
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.gar__steps button{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:flex-end;gap:.6rem;
  font-size:.82rem;color:#fff;padding:.25rem .35rem;border-radius:6px}
.gar__steps span{opacity:0;transition:opacity .25s;background:rgba(15,26,32,.65);padding:.15rem .5rem;border-radius:4px}
.gar__steps i{width:9px;height:9px;border-radius:50%;border:2px solid #fff;background:transparent;transition:transform .25s,background .25s}
.gar__steps button.is-on i{background:var(--signal,#E2702F);border-color:var(--signal,#E2702F);transform:scale(1.25)}
.gar__steps button.is-on span,.gar__steps button:hover span,.gar__steps button:focus-visible span{opacity:1}
.gar__steps button:focus-visible,.gar__btn:focus-visible{outline:2px solid var(--signal,#E2702F);outline-offset:3px}

@media (max-width:640px){.gar__chapter{right:1rem;padding:1.05rem 1.1rem 1.15rem}.gar__steps{top:calc(var(--header-h,70px) + 4.5rem);transform:none}.gar__steps span{display:none}}
@media (prefers-reduced-motion:reduce){.gar__chapter{transition:none}}

.gar__veil{position:absolute;inset:0;z-index:3;background:var(--ink,#0F1A20);opacity:0;pointer-events:none}