/* Animation du parcours sur la page d'accueil (app/views/pages/_hero_anim.html.erb). Généré depuis script/video_presentation/hero_anim. */
/* ---------- Conteneur (transparent, la page hôte donne le fond) ---------- */
.hero-anim{
  --ha-green:#047857; --ha-green-dark:#065f46; --ha-green-2:#10b981; --ha-green-3:#d1fae5;
  --ha-text:#1c1917; --ha-muted:#57534e; --ha-border:#e7e5e4; --ha-border-2:#d6d3d1; --ha-field:#f5f5f4; --ha-bg:#fafaf9;
  --ha-shadow:0 25px 50px -12px rgba(28,25,23,.15);
  --ha-pad:clamp(14px, 4.67cqw, 28px);
  --ha-head:clamp(36px, 7.33cqw, 44px);
  --ha-gap:clamp(10px, 2.67cqw, 16px);
  --ha-fs-title:clamp(15px, 3cqw, 18px);
  --ha-fs-body:clamp(12px, 2.5cqw, 15px);
  --ha-fs-small:clamp(11px, 2.17cqw, 13px);
  --ha-fs-price:clamp(16px, 3.33cqw, 20px);
  --ha-fs-unit:clamp(10px, 2cqw, 12px);
  --ha-control:clamp(42px, 8.67cqw, 52px);
  container-type:inline-size;
  position:relative; width:100%; aspect-ratio:5 / 4; background:transparent;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--ha-text); line-height:1.3; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
}
.hero-anim *{box-sizing:border-box; margin:0; padding:0}
.hero-anim svg{display:block}

/* ---------- Fenêtre : carte blanche pure ---------- */
.ha-window{
  position:absolute; inset:0; background:#fff; border:1px solid var(--ha-border); border-radius:20px;
  box-shadow:var(--ha-shadow); overflow:hidden;
}

/* ---------- Grille commune aux scènes ---------- */
.ha-scene{
  position:absolute; inset:0; padding:var(--ha-pad); display:flex; flex-direction:column;
  opacity:0; transform:translateY(10px); visibility:hidden;
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.ha-scene.is-active{opacity:1; transform:none; visibility:visible; transition-delay:0s, 0s, 0s}
.ha-head{
  flex:none; height:var(--ha-head); display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:var(--ha-gap);
}
.ha-title{font-size:var(--ha-fs-title); font-weight:600; letter-spacing:-.015em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ha-body{flex:1; min-height:0; display:flex; flex-direction:column}
.ha-body--center{justify-content:center; align-items:center; text-align:center}
.ha-body--middle{justify-content:center; padding-bottom:clamp(0px, 6cqw, 36px)}
.ha-sub{font-size:var(--ha-fs-body); color:var(--ha-muted); margin-bottom:var(--ha-gap)}

/* Badges et pastilles */
.ha-badge{
  flex:none; display:inline-flex; align-items:center; gap:.4em; white-space:nowrap;
  background:var(--ha-green-3); color:var(--ha-green); font-weight:600; font-size:var(--ha-fs-small);
  height:clamp(24px, 4.67cqw, 28px); padding:0 .85em; border-radius:999px;
}
.ha-badge svg{width:1.05em; height:1.05em}
.ha-badge .ha-dot{width:.55em; height:.55em; border-radius:50%; background:var(--ha-green-2)}

/* Boutons */
/* .hero-anim devant : le reset Tailwind [type="button"]{background-color:initial} a la même spécificité qu'une classe et arrive après */
.hero-anim .ha-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  background:var(--ha-green); color:#fff; border:0; border-radius:12px;
  font:inherit; font-size:var(--ha-fs-body); font-weight:600; letter-spacing:-.005em;
  padding:0 1.2em; height:var(--ha-control); white-space:nowrap; cursor:default;
  transition:background .2s, color .2s;
}
.hero-anim .ha-btn.is-hover{background:var(--ha-green-dark)}
.hero-anim .ha-btn.is-pressed{background:#064e3b}
.ha-btn svg{width:1.05em; height:1.05em}

/* ---------- Scène 1 : adresse ---------- */
.ha-form{position:relative}
.ha-field{
  display:flex; align-items:center; gap:.65em; height:var(--ha-control);
  border:1px solid var(--ha-border); border-radius:12px; padding:0 1em; background:var(--ha-field);
  font-size:var(--ha-fs-body); transition:border-color .2s, box-shadow .2s, background .2s;
  overflow:hidden; white-space:nowrap;
}
.ha-field.is-focus{background:#fff; border-color:var(--ha-green-2); box-shadow:0 0 0 3px rgba(16,185,129,.18)}
.ha-field > svg{width:1.2em; height:1.2em; color:var(--ha-green); flex:none}
.ha-typed{flex:none}
.ha-placeholder{position:absolute; left:calc(1em + 1.85em); top:50%; transform:translateY(-50%); color:#a8a29e; transition:opacity .15s; pointer-events:none}
.ha-field.is-typing .ha-placeholder{opacity:0}
.ha-caret{width:1.5px; height:1.15em; background:var(--ha-text); flex:none; margin-left:1px; opacity:0}
.ha-field.is-focus .ha-caret{opacity:1; animation:ha-blink 1s steps(2, start) infinite}
@keyframes ha-blink{to{visibility:hidden}}
.ha-suggest{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:2;
  display:flex; align-items:center; gap:.65em; padding:.7em 1em;
  background:#fff; border:1px solid var(--ha-border); border-radius:12px;
  box-shadow:0 12px 24px -8px rgba(28,25,23,.18); font-size:var(--ha-fs-body);
  opacity:0; transform:translateY(-4px); transition:opacity .2s, transform .2s, background .15s, border-color .15s;
}
.ha-suggest.is-visible{opacity:1; transform:none}
.ha-suggest.is-selected{background:var(--ha-green-3); border-color:var(--ha-green-2)}
.ha-suggest > svg{width:1.15em; height:1.15em; color:var(--ha-muted); flex:none}
.ha-suggest b{font-weight:600; display:block; line-height:1.2}
.ha-suggest small{display:block; font-size:var(--ha-fs-small); color:var(--ha-muted)}
.ha-search{margin-top:var(--ha-gap); width:100%}
.ha-reassure{display:flex; flex-wrap:wrap; gap:.5em clamp(10px, 3cqw, 18px); margin-top:var(--ha-gap); font-size:var(--ha-fs-small); color:var(--ha-muted)}
.ha-reassure span{display:inline-flex; align-items:center; gap:.4em; white-space:nowrap}
.ha-reassure svg{width:1.1em; height:1.1em; color:var(--ha-green)}

/* ---------- Scène 2 : immeuble ---------- */
.ha-photo{
  position:relative; width:100%; aspect-ratio:16 / 10; flex:0 1 auto; min-height:0;
  border-radius:14px; overflow:hidden; border:1px solid var(--ha-border);
}
.ha-photo img{width:100%; height:100%; -o-object-fit:cover; object-fit:cover; display:block}
.ha-lots{
  position:absolute; right:clamp(8px, 2cqw, 12px); top:clamp(8px, 2cqw, 12px);
  background:#fff; color:var(--ha-text); font-weight:600; font-size:var(--ha-fs-small);
  height:clamp(24px, 4.67cqw, 28px); display:inline-flex; align-items:center; padding:0 .85em; border-radius:999px;
  box-shadow:0 4px 12px rgba(28,25,23,.18);
}
.ha-building-row{flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:var(--ha-gap)}
.ha-building-name{font-size:var(--ha-fs-body); font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.25}
.ha-building-sub{font-size:var(--ha-fs-small); color:var(--ha-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ha-quotes{opacity:0}
.ha-quotes.is-visible{animation:ha-pop .55s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes ha-pop{0%{opacity:0; transform:translateY(8px)} 60%{opacity:1; transform:translateY(-3px)} 100%{opacity:1; transform:translateY(0)}}

/* ---------- Scène 3 : équipements ---------- */
.ha-equips{display:flex; flex-direction:column; gap:clamp(6px, 1.67cqw, 10px)}
.ha-equip{
  display:flex; align-items:center; gap:.8em; height:clamp(44px, 9.33cqw, 56px); padding:0 .9em 0 .7em;
  border:1px solid var(--ha-border); border-radius:12px; font-size:var(--ha-fs-body); font-weight:500; background:#fff;
  transition:border-color .25s, background .25s;
}
.ha-equip.is-on{border-color:var(--ha-green-2); background:#f0fdf4}
.ha-equip-ico{
  width:2.2em; height:2.2em; border-radius:10px; background:var(--ha-field); color:var(--ha-muted);
  display:flex; align-items:center; justify-content:center; flex:none; transition:background .25s, color .25s;
}
.ha-equip.is-on .ha-equip-ico{background:var(--ha-green-3); color:var(--ha-green)}
.ha-equip-ico svg{width:1.25em; height:1.25em}
.ha-equip-label{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ha-toggle{position:relative; flex:none; width:2.9em; height:1.65em; border-radius:999px; background:var(--ha-border-2); transition:background .25s}
.ha-toggle::after{
  content:""; position:absolute; top:.15em; left:.15em; width:1.35em; height:1.35em; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(28,25,23,.3); transition:transform .25s cubic-bezier(.34,1.3,.64,1);
}
.ha-toggle svg{position:absolute; left:.45em; top:50%; width:.85em; height:.85em; margin-top:-.425em; color:#fff; opacity:0; transition:opacity .2s}
.ha-equip.is-on .ha-toggle{background:var(--ha-green-2)}
.ha-equip.is-on .ha-toggle::after{transform:translateX(1.25em)}
.ha-equip.is-on .ha-toggle svg{opacity:1}

/* ---------- Scène 4 : résultats ---------- */
.ha-list{
  --ha-card:clamp(42px, 12cqw, 72px); --ha-card-gap:clamp(6px, 1.67cqw, 10px);
  position:relative; flex:none; height:calc(4 * var(--ha-card) + 3 * var(--ha-card-gap)); overflow:hidden;
}
.ha-list::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:24px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}
.ha-cards{display:flex; flex-direction:column; gap:var(--ha-card-gap); transition:transform 1.8s cubic-bezier(.45,0,.25,1)}
.ha-cards.is-scrolled{transform:translateY(calc(-4 * (var(--ha-card) + var(--ha-card-gap))))}
.ha-card{
  display:flex; align-items:center; gap:clamp(8px, 1.67cqw, 10px); height:var(--ha-card); flex:none;
  padding:0 clamp(5px, 1.67cqw, 10px);
  border:1px solid var(--ha-border); border-radius:14px; background:#fff;
  opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .35s ease;
}
.ha-card.is-visible{opacity:1; transform:none}
.ha-logo{
  flex:none; width:clamp(30px, 8cqw, 48px); height:clamp(30px, 8cqw, 48px); border-radius:10px; padding:3px;
  border:1px solid var(--ha-border); background:#fff; overflow:hidden;
}
.ha-logo img{width:100%; height:100%; -o-object-fit:contain; object-fit:contain; display:block}
.ha-card-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:.2em; overflow:hidden}
.ha-card-name{font-size:var(--ha-fs-body); font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2}
.ha-tag{flex:none; display:inline-flex; align-items:center; margin-left:.1em; font-size:clamp(9px, 1.67cqw, 10px); font-weight:600; letter-spacing:0; padding:.25em .55em; border-radius:999px; line-height:1.3}
.ha-tag--green{background:var(--ha-green-3); color:var(--ha-green)}
.ha-tag--amber{background:#fef3c7; color:#b45309}
.ha-rating{display:flex; align-items:center; gap:.4em; font-size:var(--ha-fs-small); color:var(--ha-muted); white-space:nowrap; overflow:hidden; line-height:1.2}
.ha-stars{position:relative; display:inline-flex; color:var(--ha-border); line-height:0}
.ha-stars svg{width:1em; height:1em; flex:none}
.ha-stars-fill{position:absolute; inset:0; display:inline-flex; overflow:hidden; color:#f59e0b; white-space:nowrap}
.ha-rating b{color:var(--ha-text); font-weight:600}
.ha-price{flex:none; text-align:right; white-space:nowrap; line-height:1.1; max-width:5.6em; font-size:var(--ha-fs-unit)}
.ha-price b{display:block; font-size:var(--ha-fs-price); font-weight:600; letter-spacing:-.02em}
.ha-price small{display:block; font-size:var(--ha-fs-unit); color:var(--ha-muted); margin-top:.15em; white-space:normal; line-height:1.15}
.ha-card .ha-btn{width:clamp(104px, 28.3cqw, 170px); height:clamp(32px, 7.33cqw, 44px); padding:0; font-size:clamp(11px, 2.33cqw, 14px); border-radius:10px}
.ha-btn-done{display:none}
.hero-anim .ha-btn.is-done{background:var(--ha-green-3); color:var(--ha-green)}
.ha-btn.is-done .ha-btn-label{display:none}
.ha-btn.is-done .ha-btn-done{display:inline-flex; align-items:center; gap:.4em}
.ha-more{flex:none; margin-top:clamp(6px, 1.67cqw, 10px); text-align:center; font-size:var(--ha-fs-small); color:var(--ha-muted)}
.ha-short{display:none}
@container (max-width: 470px){
  .ha-long{display:none}
  .ha-short{display:inline}
  .ha-stars{font-size:.9em}
  .ha-tag{display:none}
}

/* ---------- Scène 5 : envoyé ---------- */
.ha-envelope{width:clamp(130px, 33cqw, 200px); height:auto; overflow:visible; margin-bottom:var(--ha-gap)}
.ha-env-paper{transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ha-envelope.is-in .ha-env-paper{transform:translateY(36px)}
.ha-env-flap{transform-origin:100px 30px; transform:scaleY(-1); transition:transform .55s cubic-bezier(.4,0,.2,1)}
.ha-envelope.is-closed .ha-env-flap{transform:scaleY(1)}
.ha-stamp{opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.3,1)}
.ha-stamp.is-visible{opacity:1; transform:none}
.ha-sent-title, .ha-sent-sub{opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s}
.ha-sent-title.is-visible, .ha-sent-sub.is-visible{opacity:1; transform:none}
.ha-sent-title{font-size:var(--ha-fs-title); font-weight:600; letter-spacing:-.015em}
.ha-sent-sub{font-size:var(--ha-fs-body); color:var(--ha-muted); margin-top:.35em}

/* ---------- Curseur ---------- */
.ha-cursor{
  position:absolute; left:calc(100% - 16px); top:calc(100% - 16px); width:14px; height:14px; margin:-7px 0 0 -7px; z-index:20;
  border-radius:50%; background:#fff; border:2px solid var(--ha-green); box-shadow:0 2px 6px rgba(28,25,23,.35);
  transition:left .4s ease, top .4s ease; pointer-events:none;
}
.ha-cursor::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  border:2px solid var(--ha-green); opacity:0;
}
.ha-cursor.is-click::after{animation:ha-ring .4s ease-out}
@keyframes ha-ring{0%{opacity:.7; transform:scale(1)} 100%{opacity:0; transform:scale(2.6)}}

/* ---------- Mouvement réduit : scène 4 figée ---------- */
.hero-anim.ha-static .ha-cursor{display:none}
.hero-anim.ha-static .ha-scene{transition:none}
.hero-anim.ha-static .ha-card{opacity:1; transform:none; transition:none}
.hero-anim.ha-static .ha-cards{transition:none}
@media (prefers-reduced-motion: reduce){
  .hero-anim *, .hero-anim *::before, .hero-anim *::after{animation:none !important; transition:none !important}
}