/* IMOVI+ — « À la une » : stories des meilleurs biens, dans le cadre du bloc de tête de l'accueil. Jetons de imovi-theme.css. */
.al-hero{background:var(--encre)}
.al-bars{position:absolute;z-index:4;inset:14px 16px auto;display:flex;gap:6px}
.al-bars[hidden]{display:none}
.al-bars span{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.4);overflow:hidden}
.al-bars i{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.al-bars span.fait i{width:100%}
.al-bars span.actif i{animation:al-remplir 5.5s linear forwards}
.al-hero.pause .al-bars span.actif i{animation-play-state:paused}
@keyframes al-remplir{to{width:100%}}

.al-onglets{position:absolute;z-index:4;left:0;right:0;top:30px;display:flex;gap:8px;overflow-x:auto;padding:4px 16px;scrollbar-width:none}
.al-onglets::-webkit-scrollbar{display:none}
.al-onglet{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;font:600 .75rem/1 var(--sans);letter-spacing:.02em;color:#fff;background:rgba(24,20,15,.38);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,color .2s}
.al-onglet:hover{background:rgba(24,20,15,.58)}
.al-onglet:focus-visible{outline:2px solid #fff;outline-offset:2px}
.al-onglet[aria-selected="true"]{background:#fff;color:var(--encre);border-color:#fff}

.al-slide{position:absolute;inset:0;display:block;color:var(--encre);text-decoration:none;opacity:0;visibility:hidden;transition:opacity .6s var(--ivp-ease),visibility 0s .6s}
.al-slide.on{opacity:1;visibility:visible;transition:opacity .6s var(--ivp-ease),visibility 0s}
.al-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 6.5s linear}
.al-slide.on img{transform:scale(1)}
.al-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(24,20,15,.45) 0%,rgba(24,20,15,0) 24%,rgba(24,20,15,0) 62%,rgba(24,20,15,.45) 100%);pointer-events:none}
.al-carte{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:var(--radius-lg);background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 30px -10px rgba(24,20,15,.45)}
.al-rang{font:700 .6875rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--orange-texte)}
.al-ligne{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.al-txt{min-width:0}
.al-txt strong{display:block;font:400 1.0625rem/1.2 var(--serif);color:var(--encre);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.al-txt small{display:block;margin-top:4px;font:500 .78rem/1.2 var(--sans);color:var(--texte-2)}
.al-prix{flex:0 0 auto;text-align:right;font:700 .9375rem/1.15 var(--sans);color:var(--orange-texte-fonce);white-space:nowrap}
.al-prix em{display:block;font:500 .72rem var(--sans);font-style:normal;color:var(--texte-2)}

.al-nav{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(24,20,15,.4);color:#fff;cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity .2s}
.al-prec{left:10px}.al-suiv{right:10px}
.al-hero:hover .al-nav,.al-nav:focus-visible{opacity:1}
@media (hover:none){.al-nav{display:none}}

/* le cadre d'origine zoomait sur survol : ici, ce sont les diapositives qui bougent */
.hp-hero-visuel.al-hero:hover img{transform:none}
.hp-hero-visuel.al-hero:hover .al-slide.on img{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  .al-slide,.al-slide.on{transition:opacity .2s}
  .al-slide img,.al-slide.on img{transition:none;transform:none}
  .al-bars span.actif i{animation:none;width:100%}
}

/* ── Téléphone et tablette : cadre vertical (la photo se voit), carte et pastilles plus compactes ── */
@media (max-width: 960px) {
  .hp-hero-visuel.al-hero { aspect-ratio: 4 / 5; max-height: min(78vh, 640px); width: 100%; margin-bottom: 22px; }
}
@media (max-width: 480px) {
  .al-bars { inset: 12px 12px auto; }
  .al-onglets { top: 26px; padding: 4px 12px; gap: 6px; }
  .al-onglet { padding: 7px 11px; font-size: .72rem; }
  .al-carte { left: 10px; right: 10px; bottom: 10px; padding: 11px 13px; gap: 6px; }
  .al-ligne { flex-wrap: wrap; gap: 6px 12px; }
  .al-txt { flex: 1 1 150px; }
  .al-txt strong { font-size: 1rem; }
  .al-prix { font-size: .9rem; }
  .al-slide::after { background: linear-gradient(to bottom, rgba(24,20,15,.4) 0%, rgba(24,20,15,0) 20%, rgba(24,20,15,0) 70%, rgba(24,20,15,.35) 100%); }
}