/* ============================================================
   MAUPEU ESPACES VERTS — module « motion »
   Micro-interactions & animations partagées par toutes les pages.
   Chargé en plus des styles de chaque page ; tout est ajouté par
   motion.js : sans JavaScript, rien n'est masqué.
   Palette : vert sapin #1E3A2B · or #C49A48 · crème #F4EFE2
   ============================================================ */

/* ---------- Barre de progression de lecture ---------- */
#mv-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:130;
  background:linear-gradient(90deg,#C49A48,#D9B25A,#1E3A2B);
  box-shadow:0 0 8px rgba(196,154,72,.45);
  pointer-events:none;
}

/* ---------- En-tête escamotable ---------- */
header.mv-header{transition:transform .35s ease}
header.mv-header.mv-hide{transform:translateY(-110%)}

/* ---------- Apparitions au défilement ---------- */
.mv-r{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.mv-r.mv-on{opacity:1;transform:none}
.mv-r[data-mv="left"]{transform:translateX(-38px)}
.mv-r[data-mv="right"]{transform:translateX(38px)}
.mv-r[data-mv="zoom"]{transform:scale(.95)}
.mv-r.mv-on[data-mv]{transform:none}

/* ---------- Titre du hero : révélation mot à mot ---------- */
.mv-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.mv-wi{
  display:inline-block;transform:translateY(115%);
  animation:mvWordUp .8s cubic-bezier(.2,.65,.2,1) forwards;
}
@keyframes mvWordUp{to{transform:translateY(0)}}

/* ---------- Reflet lumineux sur les boutons dorés ---------- */
.mv-gold{position:relative;overflow:hidden}
.mv-gold::after{
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .55s ease;pointer-events:none;
}
.mv-gold:hover::after{left:130%}

/* ---------- Feuilles dorées flottantes (hero) ---------- */
.mv-leaf{
  position:absolute;top:-40px;z-index:1;pointer-events:none;
  background:center/contain no-repeat;
  opacity:0;animation:mvLeaf linear infinite;
  will-change:transform,opacity;
}
@keyframes mvLeaf{
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:0}
  10%{opacity:var(--o,.4)}
  80%{opacity:var(--o,.4)}
  100%{transform:translateY(105vh) translateX(var(--x,40px)) rotate(160deg);opacity:0}
}

/* ---------- Curseur personnalisé (souris uniquement) ---------- */
#mv-dot,#mv-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:300;border-radius:50%;
}
#mv-dot{width:7px;height:7px;background:#1E3A2B}
#mv-ring{
  width:32px;height:32px;border:1.5px solid #C49A48;
  transition:width .25s ease,height .25s ease,border-color .25s ease,opacity .25s ease;
}
#mv-ring.mv-grow{width:54px;height:54px;border-color:#1E3A2B}
body.mv-cursor,body.mv-cursor *{cursor:none!important}
#mv-dot.mv-off,#mv-ring.mv-off{opacity:0}

/* ---------- Bouton retour en haut ---------- */
#mv-top{
  position:fixed;right:20px;bottom:22px;z-index:98;
  width:46px;height:46px;border-radius:50%;
  background:#1E3A2B;color:#F0D48A;
  border:1.5px solid #C49A48;box-shadow:0 8px 22px -8px rgba(21,41,29,.55);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,background .2s ease;
}
#mv-top.mv-show{opacity:1;transform:none;pointer-events:auto}
#mv-top:hover{background:#15291D}
#mv-top svg{width:20px;height:20px}
@media (max-width:640px){#mv-top{bottom:84px;right:14px}}

/* ---------- Focus clavier visible ---------- */
:focus-visible{outline:2px solid #C49A48;outline-offset:3px;border-radius:4px}

/* ---------- Ancres : ne plus se cacher sous l'en-tête collant ---------- */
[id]{scroll-margin-top:84px}

/* ---------- En-tête : ombre discrète une fois la page défilée ---------- */
header.mv-header{transition:transform .35s ease,box-shadow .35s ease}
header.mv-header.mv-scrolled{box-shadow:0 6px 22px -14px rgba(21,41,29,.35)}

/* ---------- Logo : petit salut au survol ---------- */
header a[href="#top"] img{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
header a[href="#top"]:hover img{transform:rotate(-8deg) scale(1.08)}
a.hd-tel{transition:background .25s ease}
a.hd-tel:hover{background:rgba(30,58,43,.07)}

/* ---------- Pastilles de villes : elles répondent à la souris ---------- */
a[href^="/jardinier-"]{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
a[href^="/jardinier-"]:hover{transform:translateY(-2px);box-shadow:0 8px 16px -8px rgba(30,58,43,.3);border-color:#C49A48!important}

/* ---------- Liens fléchés « En savoir plus → » ---------- */
.mv-arrow{transition:transform .25s ease}
a.mv-arrow{display:inline-block}
.mv-arrow:hover{transform:translateX(4px)}

/* ---------- Liens du pied de page ---------- */
footer a{transition:color .2s ease}
footer a:hover{color:#F1EAD8!important}

/* ---------- Carte de la zone : rotation lente + pulsation radar ---------- */
.mv-spin{animation:mvSpin 70s linear infinite}
.mv-spin2{animation:mvSpin 110s linear infinite reverse}
@keyframes mvSpin{to{transform:rotate(360deg)}}
.mv-ping{animation:mvPing 3.4s ease-out infinite}
@keyframes mvPing{
  0%{box-shadow:0 0 0 0 rgba(196,154,72,.35)}
  70%{box-shadow:0 0 0 28px rgba(196,154,72,0)}
  100%{box-shadow:0 0 0 0 rgba(196,154,72,0)}
}

/* ---------- Avant/après : la poignée invite au geste tant qu'on n'a pas glissé ---------- */
.mv-hint .ba-grip{animation:mvNudge 2.2s ease-in-out infinite}
@keyframes mvNudge{
  0%,100%{transform:translate(-50%,-50%)}
  50%{transform:translate(calc(-50% + 8px),-50%)}
}

/* ---------- Reflet automatique périodique (bouton principal du hero) ---------- */
.mv-sheen::after{animation:mvSheen 5.5s ease-in-out infinite}
@keyframes mvSheen{0%,70%{left:-80%}86%,100%{left:130%}}

/* ---------- Mouvement réduit : tout redevient sage ---------- */
@media (prefers-reduced-motion:reduce){
  #mv-progress{display:none}
  .mv-r{opacity:1;transform:none;transition:none}
  .mv-wi{transform:none;animation:none}
  .mv-leaf{display:none}
  #mv-dot,#mv-ring{display:none}
  header.mv-header{transition:none}
  .mv-gold::after{display:none}
  .mv-spin,.mv-spin2,.mv-ping,.mv-hint .ba-grip,.mv-sheen::after{animation:none}
  a[href^="/jardinier-"],.mv-arrow,header a[href="#top"] img{transition:none}
}