/* Domus Service — animations & micro-interactions (auto-hébergé, CSP-safe) */

/* --- Scroll reveal (appliqué par site.js uniquement aux éléments hors écran → 0 flash / 0 CLS) --- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:none}

/* --- Micro-interactions : transitions douces + légère élévation des cartes & CTA --- */
a,button{transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .15s ease}
a[class*="rounded-2xl"]:hover,
a[class*="rounded-xl"]:hover{transform:translateY(-3px)}

/* --- Barre d'appel sticky : apparition douce --- */
@keyframes ds-cta-up{from{transform:translateY(110%)}to{transform:translateY(0)}}
.ds-cta-in{animation:ds-cta-up .45s cubic-bezier(.22,1,.36,1) both}

/* --- Carte de couverture (SVG) --- */
.ds-map{width:100%;height:auto;display:block}
.ds-map text{font-family:Inter,system-ui,sans-serif}
.ds-pin{transition:transform .25s ease,opacity .25s ease}
.ds-map:hover .ds-pin{opacity:1}

/* --- Avis : défilé horizontal continu (marquee), boucle sans à-coup --- */
.ds-marquee{overflow:hidden}
.ds-marquee__track{display:flex;gap:1.25rem;width:max-content;align-items:stretch;animation:ds-marquee var(--ds-marquee-dur,45s) linear infinite}
.ds-marquee:hover .ds-marquee__track,
.ds-marquee:focus-within .ds-marquee__track,
.ds-marquee.is-paused .ds-marquee__track{animation-play-state:paused}
@keyframes ds-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --- Modale « Devis gratuit » (wizard 2 étapes, injectée par site.js) --- */
.ds-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem}
.ds-modal[hidden]{display:none}
.ds-modal__backdrop{position:absolute;inset:0;background:rgba(8,23,46,.6);opacity:0;transition:opacity .3s ease}
.ds-modal__panel{position:relative;width:100%;max-width:30rem;max-height:90vh;overflow-y:auto;background:#fff;border-radius:1.25rem;box-shadow:0 25px 60px -15px rgba(0,0,0,.45);padding:1.5rem;transform:translateY(16px);opacity:0;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease;-webkit-overflow-scrolling:touch}
.ds-modal.is-open .ds-modal__backdrop{opacity:1}
.ds-modal.is-open .ds-modal__panel{transform:none;opacity:1}
.ds-modal__x{position:absolute;top:.75rem;right:.75rem;width:2.25rem;height:2.25rem;border-radius:9999px;display:grid;place-items:center;font-size:1.6rem;line-height:1;color:#64748b;background:#f1f5f9;border:0;cursor:pointer}
.ds-modal__x:hover,.ds-modal__x:focus-visible{background:#e2e8f0;color:#0c2c54;outline:none}
.ds-modal__dots{display:flex;gap:.4rem;margin:.25rem 0 1rem}
.ds-modal__dot{width:.5rem;height:.5rem;border-radius:9999px;background:#e2e8f0;transition:background .2s ease}
.ds-modal__dot.is-active{background:#f97316}
.ds-need{display:block;width:100%;text-align:left;border:1px solid #e2e8f0;border-radius:.75rem;padding:.85rem 1rem;font-weight:600;color:#0c2c54;background:#fff;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.ds-need:hover,.ds-need:focus-visible{border-color:#f97316;background:#fff7ed;outline:none}
.ds-field{width:100%;border:1px solid #cbd5e1;border-radius:.75rem;padding:.75rem 1rem;font:inherit;color:#0f172a}
.ds-field:focus{outline:none;box-shadow:0 0 0 2px #2563eb55;border-color:#2563eb}
/* Mobile : feuille plein écran qui monte du bas */
@media (max-width:640px){
  .ds-modal{padding:0;align-items:flex-end}
  .ds-modal__panel{max-width:none;max-height:92vh;border-radius:1.25rem 1.25rem 0 0;transform:translateY(100%);padding:1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px))}
}

/* --- Accessibilité : couper toute animation si l'utilisateur le demande --- */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  a[class*="rounded-2xl"]:hover,a[class*="rounded-xl"]:hover{transform:none}
  .ds-cta-in{animation:none}
  .ds-marquee{overflow-x:auto}
  .ds-marquee__track{animation:none;width:auto}
  .ds-modal__backdrop,.ds-modal__panel{transition:none!important}
  .ds-modal__panel{transform:none!important}
  *{scroll-behavior:auto!important}
}