/* Flairat v3 : boutons animés (CSS pur, sans dépendance) */

/* ---------- 1. Devis : bouton 3D qui s'enfonce ---------- */
.btn.btn-sun.b3d{--edge:#b3502b;position:relative;transform:translateY(0);padding-right:.75em;gap:.7em;
  box-shadow:0 6px 0 var(--edge),0 18px 38px -12px rgba(242,132,71,.8),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(160,60,25,.25);
  transition:transform .16s cubic-bezier(.3,.7,.4,1),box-shadow .16s cubic-bezier(.3,.7,.4,1)}
.b3d-ar{display:inline-grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:#16110d;color:#ffd183;overflow:hidden;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.b3d-ar svg{width:1em;height:1em}
@media (hover:hover){
  .btn.btn-sun.b3d:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--edge),0 10px 26px -12px rgba(242,132,71,.85),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 0 rgba(160,60,25,.25)}
}
.btn.btn-sun.b3d:active{transform:translateY(6px);transition-duration:.06s;box-shadow:0 0 0 var(--edge),0 4px 12px -6px rgba(242,132,71,.7),inset 0 1px 0 rgba(255,255,255,.5),inset 0 2px 6px rgba(160,60,25,.3)}
.btn.b3d:focus-visible{outline:3px solid #fff;outline-offset:5px}
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){.b3d:hover .b3d-ar svg{animation:b3dArrow .62s cubic-bezier(.5,0,.3,1)}}
  .b3d:focus-visible .b3d-ar svg{animation:b3dArrow .62s cubic-bezier(.5,0,.3,1)}
}
@keyframes b3dArrow{0%{transform:none}42%{transform:translate(140%,-70%) rotate(-28deg);opacity:0}43%{transform:translate(-140%,70%) rotate(-28deg);opacity:0}100%{transform:none;opacity:1}}

/* ---------- 2. Voir les tarifs : reflet diagonal + étincelles ---------- */
.bsw{position:relative;overflow:visible;isolation:isolate}
.sw-l{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2}
.sw-l:before{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:36%;background:linear-gradient(100deg,transparent 10%,rgba(255,255,255,.85) 50%,transparent 90%);opacity:.75;transform:translateX(-170%) skewX(-22deg)}
.sp-ic{position:relative;display:inline-grid;place-items:center}
.sparks{position:absolute;left:50%;top:50%;width:0;height:0}
.sparks i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#ff8a3d 65%);box-shadow:0 0 8px 2px rgba(255,138,61,.95),0 0 0 1.5px rgba(26,14,7,.55);z-index:3;opacity:0;transform:rotate(var(--r)) translateY(0)}
.sparks i:nth-child(odd){left:-8px;top:-8px;width:16px;height:16px;border-radius:0;background:linear-gradient(#fff,#ffb35c);box-shadow:none;filter:drop-shadow(0 0 3px #ff7a2f) drop-shadow(0 0 1px #1a0e07);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.bsw:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  .sw-l:before{animation:swIdle 6.5s ease-in-out 1.2s infinite}
  @media (hover:hover){
    .bsw:hover .sw-l:before{animation:swGo .75s ease-out}
    .bsw:hover .sparks i{animation:spark .9s cubic-bezier(.2,.7,.3,1) both}
    .bsw:hover .sp-ic svg{animation:eyePop .5s cubic-bezier(.3,1.6,.5,1)}
  }
  .bsw:focus-visible .sw-l:before,.bsw:active .sw-l:before{animation:swGo .75s ease-out}
  .bsw:focus-visible .sparks i,.bsw:active .sparks i{animation:spark .9s cubic-bezier(.2,.7,.3,1) both}
  .sparks i:nth-child(2n){animation-delay:.05s!important}
}
@keyframes swIdle{0%,80%{transform:translateX(-170%) skewX(-22deg)}94%,100%{transform:translateX(380%) skewX(-22deg)}}
@keyframes swGo{from{transform:translateX(-170%) skewX(-22deg)}to{transform:translateX(380%) skewX(-22deg)}}
@keyframes spark{0%{opacity:0;transform:rotate(var(--r)) translateY(-8px) scale(.4)}20%{opacity:1;transform:rotate(var(--r)) translateY(-22px) scale(1.1)}100%{opacity:0;transform:rotate(var(--r)) translateY(-46px) scale(.5)}}
@keyframes eyePop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-8deg)}100%{transform:scale(1)}}

/* ---------- 3. WhatsApp : bordure lumineuse en dégradé ---------- */
@property --wa-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.wglow{position:relative}
.wglow:before,.wglow:after{content:"";position:absolute;inset:-3px;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--wa-a),#5fc4c4,#4a8db7 18%,#f28447 42%,#ffd183 56%,#25d366 78%,#5fc4c4);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.wglow:after{inset:-10px;padding:9px;filter:blur(7px);opacity:.55}
.fwa.wglow{padding:.32em .85em .32em .6em;border-radius:999px;background:rgba(37,211,102,.08)}
.fwa.wglow:focus-visible{outline:3px solid #fff;outline-offset:5px}
.ico.wa.wglow:before{inset:-3px}
@media (prefers-reduced-motion:no-preference){
  .wglow:after{animation:waPulse 2.8s ease-in-out infinite}
  @media (hover:hover) and (pointer:fine){
    .wglow:before{animation:waSpin 5s linear infinite}
    .wglow:after{animation:waSpin 5s linear infinite,waPulse 2.8s ease-in-out infinite}
    .wglow:hover:after{filter:blur(10px) brightness(1.2)}
  }
}
@keyframes waSpin{to{--wa-a:360deg}}
@keyframes waPulse{0%,100%{opacity:.3}50%{opacity:.85}}

/* ---------- 4. Appeler : effet tiroir ---------- */
.btn.bdr{gap:0;overflow:hidden;padding-left:1.1em;padding-right:1.1em}
.bdr .dr-ic{display:inline-grid;place-items:center;flex:none;width:0;height:1.9em;margin-left:-.5em;border-radius:50%;background:#16110d;color:#ffd183;opacity:0;transform:translateX(-10px) rotate(-25deg);
  transition:width .38s cubic-bezier(.2,.8,.2,1),margin .38s cubic-bezier(.2,.8,.2,1),opacity .25s,transform .38s cubic-bezier(.2,.8,.2,1)}
.bdr .dr-ic svg{width:1em;height:1em}
.bdr .dr-n{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font-weight:800;letter-spacing:.01em;
  transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .3s,margin .45s,padding .45s}
.bdr:focus-visible{outline:3px solid #fff;outline-offset:4px}
.bdr:focus-visible .dr-ic{width:1.9em;margin-right:.55em;opacity:1;transform:none}
.bdr:focus-visible .dr-n{max-width:9em;opacity:1;margin-left:.55em;padding-left:.55em;border-left:1px solid rgba(22,17,13,.3)}
@media (hover:hover){
  .bdr:hover .dr-ic{width:1.9em;margin-right:.55em;opacity:1;transform:none}
  .bdr:hover .dr-n{max-width:9em;opacity:1;margin-left:.55em;padding-left:.55em;border-left:1px solid rgba(22,17,13,.3)}
  @media (prefers-reduced-motion:no-preference){.bdr:hover .dr-ic svg{animation:ring .7s ease-in-out .2s}}
}
@media (hover:none){.bdr .dr-ic{width:1.75em;height:1.75em;margin-right:.45em;opacity:1;transform:none}}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-18deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-10deg)}80%{transform:rotate(6deg)}}
/* en-tête mobile : icône seule, comme avant */
@media (max-width:719px){
  .top .bdr{padding:.6em 1.05em}
  .top .bdr .dr-t,.top .bdr .dr-n{display:none}
  .top .bdr .dr-ic{width:auto;height:auto;margin:0;background:none;color:inherit;opacity:1;transform:none}
}
.mbar .bdr .dr-ic{width:1.6em;height:1.6em}

/* ---------- 5. Clin d'œil : le rat, la truffe, pop ---------- */
.bwink{position:relative;overflow:visible}
.wk{position:absolute;bottom:100%;right:18px;width:176px;height:54px;margin-bottom:-1px;pointer-events:none}
.wk svg{display:block;width:100%;height:100%;overflow:hidden}
.wk-rat{transform:translateY(34px);transform-box:fill-box;transform-origin:30% 60%}
.wk-pop{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2)}
@media (prefers-reduced-motion:no-preference){
  @media (hover:hover){
    .bwink:hover .wk-rat{animation:wkRat 2.4s cubic-bezier(.3,.7,.3,1) forwards}
    .bwink:hover .wk-dog{animation:wkDog 2.4s cubic-bezier(.4,0,.2,1) forwards}
    .bwink:hover .wk-pop{animation:wkPop 2.4s ease-out forwards}
  }
  .bwink:focus-visible .wk-rat,.bwink.wk-play .wk-rat{animation:wkRat 2.4s cubic-bezier(.3,.7,.3,1) forwards}
  .bwink:focus-visible .wk-dog,.bwink.wk-play .wk-dog{animation:wkDog 2.4s cubic-bezier(.4,0,.2,1) forwards}
  .bwink:focus-visible .wk-pop,.bwink.wk-play .wk-pop{animation:wkPop 2.4s ease-out forwards}
}
@keyframes wkRat{0%{transform:translateY(34px)}15%{transform:translateY(0)}22%{transform:translateY(3px)}29%{transform:translateY(0)}38%{transform:translateY(0) rotate(-5deg)}46%{transform:translateY(0) rotate(0)}56%{transform:translateY(0) scale(1);opacity:1}61%{transform:translateY(-2px) scale(1.18);opacity:1}67%,100%{transform:translateY(-2px) scale(0);opacity:0}}
@keyframes wkDog{0%,28%{transform:translateX(0)}56%{transform:translateX(92px)}62%{transform:translateX(87px)}68%{transform:translateX(93px)}74%{transform:translateX(88px)}82%{transform:translateX(91px)}100%{transform:translateX(0)}}
@keyframes wkPop{0%,60%{opacity:0;transform:scale(.2)}66%{opacity:1;transform:scale(.75)}82%,100%{opacity:0;transform:scale(1.45)}}
.bwink:focus-visible{outline:3px solid #fff;outline-offset:4px}

.ctaband .cb-btns{margin-top:clamp(40px,5vw,64px)}

/* ---------- Retour tactile ---------- */
@media (hover:none){
  .btn:active,.wa-float:active{transform:scale(.96);transition-duration:.08s}
  .wglow:active:after{opacity:1}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .btn.btn-sun.b3d,.bdr .dr-ic,.bdr .dr-n{transition:none}
  .wk{display:none}
}

/* ---------- Correctifs audit (live v3) ---------- */
.wa-float.wglow{position:fixed}
.top.open .nav{background:#0e0f12}
@media (min-width:720px) and (max-width:999px){.t-visite,.t-chasse{grid-column:span 6}}
@media (min-width:1000px){
  .mbento{grid-template-areas:"visite visite visite flair flair flair" "chasse chasse chasse flair flair flair" "poison poison reb reb suivi suivi"}
}
/* Badge Netlify (≈192×64, coin bas-droit, non désactivable en offre gratuite) : on remonte la barre et la bulle au-dessus */
.mbar{bottom:calc(72px + env(safe-area-inset-bottom))}
body{padding-bottom:calc(152px + env(safe-area-inset-bottom))}
.wa-float.wglow{bottom:88px}
@media (min-width:1000px){body{padding-bottom:64px}}