/* =========================================================
   DECORATIVE ANIMATIONS
   Purely visual polish: scroll reveals, floating shapes, hover
   micro-interactions and the "hand-drawn" illustration effect.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- scroll reveal ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
  transition-delay:var(--reveal-delay, 0s);
  will-change:opacity, transform;
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal-pop{
  opacity:0;
  transform:scale(.92) translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.9,.3,1.2), transform .7s cubic-bezier(.2,.9,.3,1.2);
  transition-delay:var(--reveal-delay, 0s);
}
.reveal-pop.in-view{
  opacity:1;
  transform:scale(1) translateY(0);
}
.reveal-left{
  opacity:0;
  transform:translateX(-32px);
  transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);
  transition-delay:var(--reveal-delay, 0s);
}
.reveal-left.in-view{opacity:1; transform:translateX(0);}

/* ---------- hero ---------- */
header{background-size:200% 200%; animation:gradientDrift 16s ease-in-out infinite;}
@keyframes gradientDrift{
  0%{background-position:0% 30%;}
  50%{background-position:100% 70%;}
  100%{background-position:0% 30%;}
}
.hero-glow{animation:glowPulse 7s ease-in-out infinite;}
@keyframes glowPulse{
  0%,100%{opacity:.85; transform:scale(1);}
  50%{opacity:1; transform:scale(1.06);}
}
.hero-illus{transition:transform .25s ease-out;}

.eyebrow, h1.hero-title, .hero-sub1, .hero-sub2, .hero-p, .hero-ctas, .hero-tags{
  opacity:0;
  animation:heroIn .9s cubic-bezier(.16,.8,.3,1) forwards;
}
.eyebrow{animation-delay:.05s;}
h1.hero-title{animation-delay:.15s;}
.hero-sub1{animation-delay:.30s;}
.hero-sub2{animation-delay:.40s;}
.hero-p{animation-delay:.50s;}
.hero-ctas{animation-delay:.62s;}
.hero-tags{animation-delay:.74s;}
@keyframes heroIn{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}

/* ---------- floating RDV button ---------- */
.rdv-float{animation:floatBob 3.6s ease-in-out infinite;}
.rdv-float:hover{animation-play-state:paused;}
@keyframes floatBob{
  0%,100%{transform:translateY(0); box-shadow:0 8px 22px rgba(46,43,38,.35);}
  50%{transform:translateY(-6px); box-shadow:0 16px 30px rgba(46,43,38,.28);}
}
.rdv-float svg{transition:transform .3s ease;}
.rdv-float:hover svg{transform:rotate(-8deg) scale(1.1);}

/* ---------- buttons: sheen sweep on hover ---------- */
.btn-solid, .btn-outline, .nav-cta, .mobile-cta{
  position:relative;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.3,1.3), filter .2s ease, box-shadow .25s ease;
}
.btn-solid::after, .btn-outline::after, .nav-cta::after{
  content:'';
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  transition:left .65s ease;
  pointer-events:none;
}
.btn-solid:hover, .nav-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(46,43,38,.22);
}
.btn-outline:hover{transform:translateY(-3px);}
.btn-solid:hover::after, .btn-outline:hover::after, .nav-cta:hover::after{left:120%;}

/* ---------- nav links underline ---------- */
.nav-links a{position:relative;}
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--terre);
  border-radius:2px;
  transition:width .25s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}

/* ---------- brand mark ---------- */
.brand-name{display:inline-block;}
.brand:hover .brand-name{animation:nameWiggle .45s ease-in-out;}
@keyframes nameWiggle{
  0%,100%{transform:rotate(0) translateX(0);}
  25%{transform:rotate(-3deg) translateX(-1px);}
  50%{transform:rotate(0) translateX(0);}
  75%{transform:rotate(3deg) translateX(1px);}
}

/* ---------- popover ---------- */
#popover{
  opacity:0;
  transform:translateY(6px) scale(.98);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
#popover.is-open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}

/* ---------- mobile menu ---------- */
#mobile-menu{
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .28s ease, transform .28s ease;
}
#mobile-menu.is-open{opacity:1; transform:translateY(0);}
#mobile-menu li{
  opacity:0;
  transform:translateX(14px);
  transition:opacity .35s ease, transform .35s ease;
  transition-delay:calc(var(--i, 0) * 0.05s);
}
#mobile-menu.is-open li{opacity:1; transform:translateX(0);}

/* ---------- cards & grids ---------- */
.card3, .prog-card, .formation-card, .modal-card, .check-item, .zone-col, .path-step{
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.card3:hover{transform:translateY(-8px) rotate(-0.3deg); box-shadow:0 18px 34px rgba(46,43,38,.2);}
.prog-card:hover, .formation-card:hover, .modal-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 30px rgba(46,43,38,.12);
}
.check-item:hover{transform:translateY(-4px) scale(1.02); box-shadow:0 10px 20px rgba(46,43,38,.12);}
.check-mark{transition:transform .3s ease;}
.check-item:hover .check-mark{transform:scale(1.15) rotate(8deg);}

.zone-col{position:relative;}
.zone-col:hover{transform:translateY(-6px);}
.zone-col .zone-title{transition:letter-spacing .3s ease;}
.zone-col:hover .zone-title{letter-spacing:.5px;}

/* ---------- steps (approche) ---------- */
.step-num{transition:transform .3s cubic-bezier(.3,1.6,.4,1), box-shadow .3s ease;}
.step:hover .step-num{transform:scale(1.15) rotate(-6deg); box-shadow:0 6px 14px rgba(46,43,38,.3);}

/* ---------- parcours path icons ---------- */
.path-icon{transition:transform .35s cubic-bezier(.3,1.4,.4,1);}
.path-step:hover .path-icon{transform:scale(1.12) translateY(-4px);}
.path-line line{animation:dashFlow 1.8s linear infinite;}
@keyframes dashFlow{to{stroke-dashoffset:-24;}}

/* ---------- jargon pills ---------- */
.jargon-pill{transition:transform .25s ease, background .25s ease, color .25s ease;}
.jargon-pill:hover{transform:translateY(-2px) scale(1.04); background:var(--sauge); color:#fff;}
.jargon{transition:color .2s ease;}

/* ---------- tags ---------- */
.tag-strong, .tag-soft{transition:transform .25s ease;}
.tag-strong:hover, .tag-soft:hover{transform:translateY(-3px) scale(1.04);}

/* ---------- contact box ---------- */
.contact-box{transition:transform .3s ease, box-shadow .3s ease;}
.contact-box:hover{transform:translateY(-4px); box-shadow:0 20px 40px rgba(46,43,38,.18);}

/* =========================================================
   LINE-DRAW ILLUSTRATIONS
   Single-stroke drawings that "trace" themselves into view.
   ========================================================= */
.line-draw{display:block;}
.line-draw svg.line-illus{
  width:100%;
  height:auto;
  display:block;
}
/* transition is applied inline by js/animations.js right when the draw
   starts (after forcing a reflow) — no default here, or the very first
   dasharray/dashoffset assignment on load would itself animate. */

/* ---------- the "wool ball" scribble keeps gently drifting, like a
   loose thread swaying, even once it has finished drawing itself in ---------- */
.hero-illus svg.line-illus,
.contact-img svg.line-illus{
  animation:threadDrift 7s ease-in-out infinite;
  transform-origin:50% 50%;
}
@keyframes threadDrift{
  0%,100%{transform:translateY(0) rotate(0deg);}
  25%{transform:translateY(-5px) rotate(.6deg);}
  50%{transform:translateY(2px) rotate(-.4deg);}
  75%{transform:translateY(-3px) rotate(.3deg);}
}