/* Defilement doux */
/* Les ancres glissent au lieu de sauter (natif, sans JS). La molette est adoucie
   separement par smooth-scroll.js, uniquement a la souris. */
html{scroll-behavior:smooth}
/* Pendant le lissage JS de la molette, le navigateur ne doit pas animer en plus. */
html.hop-scroll-anime{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Curseur Hopela : feuille de bambou */
/* Le curseur systeme n est masque que si le JS a pose la classe : sans lui, on garde
   le pointeur natif plutot que de laisser l utilisateur sans reperes. */
html.hop-curseur-actif,
html.hop-curseur-actif *{cursor:none}
/* dans un champ de saisie, le curseur texte reprend la main */
html.hop-curseur-texte,
html.hop-curseur-texte *{cursor:auto}
html.hop-curseur-texte input,
html.hop-curseur-texte textarea,
html.hop-curseur-texte [contenteditable="true"]{cursor:text}

.hop-feuille,.hop-halo{position:fixed;top:0;left:0;pointer-events:none;opacity:0;will-change:transform}
.hop-feuille{z-index:2147483001;transition:opacity .25s ease}
.hop-halo{z-index:2147483000;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(169,207,91,.20),rgba(169,207,91,0) 70%);
  transition:opacity .25s ease,width .28s cubic-bezier(.2,.8,.3,1),height .28s cubic-bezier(.2,.8,.3,1),background .25s ease}
.hop-feuille.is-visible,.hop-halo.is-visible{opacity:1}

.hop-feuille svg{display:block;filter:drop-shadow(0 3px 6px rgba(20,40,10,.42))}
.hop-feuille .hop-lame,.hop-feuille .hop-nervure{transition:opacity .25s ease}

/* survol d un element cliquable : le halo s ouvre, la feuille grandit un peu */
.hop-feuille.is-lien{transform-origin:20% 40%}
.hop-feuille.is-lien svg{transform:scale(1.18);transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.hop-halo.is-lien{width:56px;height:56px;
  background:radial-gradient(circle at 50% 50%,rgba(169,207,91,.28),rgba(169,207,91,0) 68%)}

/* bouton d achat : la feuille murit vers l orange des CTA */
.hop-feuille.is-achat svg{transform:scale(1.3);transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.hop-feuille.is-achat .hop-lame{fill:#ff8a2b}
.hop-feuille.is-achat .hop-nervure{stroke:rgba(255,255,255,.7)}
.hop-halo.is-achat{width:64px;height:64px;
  background:radial-gradient(circle at 50% 50%,rgba(255,122,26,.26),rgba(255,122,26,0) 68%)}

/* champ de saisie : la feuille s efface */
.hop-feuille.is-texte{opacity:0}
.hop-halo.is-texte{width:0;height:0;background:none}

/* clic : la feuille se replie */
.hop-feuille.is-presse svg{transform:scale(.82);transition:transform .12s ease}
.hop-halo.is-presse{width:30px;height:30px}

/* Jamais au tactile ni si l utilisateur veut moins d animations. */
@media(hover:none),(pointer:coarse){
  .hop-feuille,.hop-halo{display:none}
  html.hop-curseur-actif,html.hop-curseur-actif *{cursor:auto}
}
@media(prefers-reduced-motion:reduce){
  .hop-feuille,.hop-halo{display:none}
  html.hop-curseur-actif,html.hop-curseur-actif *{cursor:auto}
}


.security-icon-list .hop-secure-badge,.hop-secure-badge{display:inline-block;padding:9px 13px!important;background:#fff;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .18s ease,box-shadow .18s ease}
.hop-secure-badge:hover,.hop-secure-badge:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.24)}
.hop-secure-badge img{display:block;width:230px;max-width:100%;height:auto}
@media(max-width:991px){.hop-secure-badge img{width:200px}}
@media(max-width:575px){.security-icon-list .hop-secure-badge,.hop-secure-badge{padding:8px 11px!important}.hop-secure-badge img{width:170px}}
@media(prefers-reduced-motion:reduce){.hop-secure-badge{transition:none}.hop-secure-badge:hover{transform:none}}


.footer-section .footer-top{background:linear-gradient(90deg,#5e7e39,#789450);padding:64px 0 40px}.footer-section .footer-nav-wrap h2{font-size:18px;font-weight:700;color:#fff;margin-bottom:18px}.footer-section .footer-nav-wrap a{color:#fff}.footer-section .footer-bottom{background:#f6f9f1}.footer-section .payment-method img{object-fit:contain}.footer-section .security-icon-list img{max-width:100%;height:auto}

.hopela-consent__actions button.primary{background:#486d29!important;color:#fff!important}