/* La Ferme de Diégonéfla — identité visuelle : jaune, vert, bleu, orange */
:root{
  --green:#08a21c; --green-dark:#05700f; --leaf:#2fd13b; --yellow:#f7c41f; --blue:#1f78c8; --orange:#f26b1d;
  --ink:#16261b; --paper:#fbfaf3; --ease:cubic-bezier(.22,.8,.3,1);
}
html{scroll-behavior:smooth}
body{font-family:"Poppins","Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3{font-family:"Baloo 2","Poppins",system-ui,sans-serif;letter-spacing:-.01em}

/* bande 4 couleurs */
.stripe{height:5px;background:linear-gradient(90deg,var(--yellow) 0 25%,var(--green) 25% 50%,var(--blue) 50% 75%,var(--orange) 75% 100%);background-size:200% 100%;animation:stripe 8s linear infinite}
@keyframes stripe{to{background-position:200% 0}}

/* en-tête */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);transition:box-shadow .3s}
.site-header.is-scrolled{box-shadow:0 8px 24px -12px rgba(0,0,0,.25)}
.nav-link{position:relative;padding:.25rem 0}
.nav-link::after{content:"";position:absolute;left:0;bottom:-2px;height:3px;width:100%;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-link:hover::after{transform:scaleX(1)}

/* boutons */
.btn{position:relative;display:inline-block;overflow:hidden;border-radius:999px;padding:.8rem 1.6rem;font-weight:700;transition:transform .25s var(--ease),box-shadow .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 24px -10px rgba(0,0,0,.4)}
.btn:active{transform:translateY(0)}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg)}
.btn:hover::after{animation:shine .8s}
@keyframes shine{to{left:130%}}
.btn-yellow{background:var(--yellow);color:var(--ink)}
.btn-orange{background:var(--orange);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-ghost{border:2px solid #fff;color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.15)}

/* héros */
.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#045c0c 0%,#08a21c 50%,#2fd13b 100%);background-size:160% 160%;animation:heroShift 14s ease-in-out infinite alternate}
@keyframes heroShift{to{background-position:100% 100%}}
.blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.9;pointer-events:none}
.b1{width:260px;height:260px;background:var(--yellow);right:-60px;top:-70px;animation:float 9s ease-in-out infinite}
.b2{width:150px;height:150px;background:var(--orange);left:42%;bottom:-50px;animation:float 7s ease-in-out -2s infinite}
.b3{width:90px;height:90px;background:var(--blue);left:6%;top:20px;opacity:.7;animation:float 8s ease-in-out -4s infinite}
.b4{width:46px;height:46px;background:var(--yellow);left:55%;top:18%;animation:float 6s ease-in-out -1s infinite}
@keyframes float{50%{transform:translateY(-26px) rotate(8deg)}}
.hero-chip{display:flex;align-items:center;gap:.75rem;border-radius:1.1rem;background:rgba(255,255,255,.95);color:var(--ink);padding:.9rem 1.1rem;font-weight:600;box-shadow:0 18px 30px -18px rgba(0,0,0,.5)}
.hero-chip i{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:.8rem;color:#fff;font-style:normal;font-size:1.2rem}
.chip-a{animation:float 7s ease-in-out infinite}
.chip-b{animation:float 8s ease-in-out -3s infinite;margin-left:2.5rem}
.chip-c{animation:float 6.5s ease-in-out -5s infinite}
.rotator{display:inline-block;min-width:7ch;color:var(--yellow);transition:opacity .35s,transform .35s}
.rotator.out{opacity:0;transform:translateY(-12px)}
.pop{animation:pop .9s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.97)}}

/* photos */
.photo-stack{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2rem;border:6px solid #fff;box-shadow:0 30px 50px -25px rgba(0,0,0,.6);transform:rotate(2deg);background:var(--green-dark)}
.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity 1s ease,transform 7s linear}
.ph-on{opacity:1;transform:scale(1)}
.gal-item{position:relative;display:block;overflow:hidden;border-radius:1.2rem;cursor:zoom-in;min-height:9rem;box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .4s}
.gal-item:hover img{transform:scale(1.1);filter:saturate(1.15)}
.gal-item::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:linear-gradient(90deg,var(--yellow),var(--green),var(--blue),var(--orange));transform:scaleX(0);transition:transform .4s var(--ease)}
.gal-item:hover::after{transform:scaleX(1)}

/* bandeau fêtes */
.festive{background:linear-gradient(110deg,var(--yellow) 0%,#ffd84d 45%,var(--orange) 140%)}
.festive-badge{display:inline-block;border-radius:999px;background:var(--ink);color:var(--yellow);padding:.35rem 1rem;font-weight:800;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;animation:pulseBadge 2s ease-in-out infinite}
@keyframes pulseBadge{50%{transform:scale(1.06)}}
.btn-festive{background:var(--ink);color:#fff}
.btn-festive:hover{background:var(--green-dark)}
.festive-photo{overflow:hidden;border-radius:2rem;border:6px solid #fff;box-shadow:0 26px 40px -22px rgba(0,0,0,.55);transform:rotate(-2deg);transition:transform .5s var(--ease)}
.festive-photo:hover{transform:rotate(0) scale(1.03)}
.festive-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.confetti{position:absolute;width:14px;height:14px;border-radius:3px;opacity:.85;pointer-events:none;animation:fall 7s linear infinite}
.c1{left:6%;background:var(--green);animation-delay:0s}.c2{left:28%;background:var(--blue);animation-delay:-2s;border-radius:50%}
.c3{left:52%;background:#fff;animation-delay:-4s}.c4{left:74%;background:var(--green);animation-delay:-1s;border-radius:50%}.c5{left:92%;background:var(--blue);animation-delay:-5s}
@keyframes fall{from{transform:translateY(-30px) rotate(0)}to{transform:translateY(340px) rotate(360deg)}}

/* bandeau défilant */
.marquee{overflow:hidden;background:var(--ink);color:#fff}
.marquee-track{display:flex;width:max-content;gap:2.5rem;padding:.7rem 0;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:flex;align-items:center;gap:2.5rem;white-space:nowrap;font-weight:600}
.marquee-track span::after{content:"";width:.7rem;height:.7rem;border-radius:50%;background:var(--c,var(--yellow))}
@keyframes marquee{to{transform:translateX(-50%)}}

/* apparition au défilement */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* catégories */
.cat-card{--c:var(--green);position:relative;display:block;overflow:hidden;border-radius:1.2rem;background:#fff;border:2px solid transparent;padding:1.4rem 1rem;text-align:center;font-weight:700;box-shadow:0 6px 18px -12px rgba(0,0,0,.35);transition:transform .35s var(--ease),border-color .3s,box-shadow .35s}
.cat-card::before{content:"";position:absolute;inset:auto 0 0 0;height:6px;background:var(--c);transition:height .35s var(--ease)}
.cat-card:hover{transform:translateY(-8px) rotate(-1deg);border-color:var(--c);box-shadow:0 22px 30px -18px var(--c)}
.cat-card:hover::before{height:100%;opacity:.12}
.cat-0{--c:var(--green)}.cat-1{--c:var(--yellow)}.cat-2{--c:var(--blue)}.cat-3{--c:var(--orange)}
.cat-dot{display:block;width:3rem;height:3rem;margin:0 auto .6rem;border-radius:50%;background:var(--c);display:grid;place-items:center;color:#fff;font-size:1.3rem;transition:transform .4s var(--ease)}
.cat-card:hover .cat-dot{transform:scale(1.2) rotate(12deg)}

/* étapes */
.step{position:relative;border-radius:1.2rem;background:#fff;padding:1.5rem;box-shadow:0 6px 18px -12px rgba(0,0,0,.3);transition:transform .35s var(--ease)}
.step:hover{transform:translateY(-6px)}
.step-n{display:grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:50%;color:#fff;font-weight:800;font-size:1.2rem;margin-bottom:.8rem}

/* cartes génériques (formations, blog, témoignages) */
.lift{transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.lift:hover{transform:translateY(-6px);box-shadow:0 20px 28px -18px rgba(0,0,0,.4);border-color:var(--green)}

/* carte produit */
.pcard{transition:transform .35s var(--ease),box-shadow .35s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 22px 30px -18px rgba(0,0,0,.45)}
.pcard img{transition:transform .6s var(--ease)}
.pcard:hover img{transform:scale(1.08)}

/* WhatsApp : pulsation */
.wa-btn{animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* menu mobile */
[x-cloak]{display:none!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-reveal]{opacity:1;transform:none}
}