/* ═══════════════════════════════════════════════════════════════
   CAISSERIE DES CADUELS — anim.css
   Couche d'animation globale, partagée par les 9 pages.
   Chargée APRÈS le CSS de page pour pouvoir surcharger.

   Principe de sécurité :
   - tout état "caché" est conditionné par .js-ready (ajouté par JS)
     → si le JS échoue, le contenu reste visible et lisible
   - prefers-reduced-motion : tout est neutralisé
═══════════════════════════════════════════════════════════════ */

:root {
  --anim-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --anim-dur:       0.85s;
}

/* ───────────────────────────────────────────────────────────────
   2. NAV — compactage au scroll + logo qui rétrécit
─────────────────────────────────────────────────────────────── */
.nav {
  transition: height 0.45s var(--anim-ease),
              background 0.45s ease,
              box-shadow 0.45s ease;
}
.nav .nav-logo-img {
  transition: height 0.45s var(--anim-ease), opacity 0.2s;
}
@media (min-width: 981px) {
  .nav.scrolled               { height: 78px; box-shadow: 0 6px 28px rgba(27,50,38,0.10); }
  .nav.scrolled .nav-logo-img { height: 50px; }
}

/* Entrée de la nav au chargement */
.js-ready .nav {
  animation: nav-drop 0.9s var(--anim-ease) both;
}
@keyframes nav-drop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ───────────────────────────────────────────────────────────────
   3. REVEALS AU SCROLL — variantes
─────────────────────────────────────────────────────────────── */

/* Base commune */
.js-ready [data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity var(--anim-dur) var(--anim-ease),
              transform var(--anim-dur) var(--anim-ease),
              clip-path var(--anim-dur) var(--anim-ease),
              filter var(--anim-dur) var(--anim-ease);
}
.js-ready [data-anim].in { opacity: 1; transform: none; filter: none; }

/* Variantes d'entrée */
.js-ready [data-anim="up"]     { transform: translate3d(0, 46px, 0); }
.js-ready [data-anim="down"]   { transform: translate3d(0, -36px, 0); }
.js-ready [data-anim="left"]   { transform: translate3d(-56px, 0, 0); }
.js-ready [data-anim="right"]  { transform: translate3d(56px, 0, 0); }
.js-ready [data-anim="zoom"]   { transform: scale(0.90); }
.js-ready [data-anim="blur"]   { filter: blur(14px); transform: translate3d(0, 24px, 0); }
.js-ready [data-anim="pop"]    { transform: scale(0.72) translate3d(0, 14px, 0); }
.js-ready [data-anim="pop"].in { transition-timing-function: cubic-bezier(0.34, 1.62, 0.5, 1); }

/* Reveal image : volet qui s'ouvre + léger zoom arrière */
.js-ready [data-anim="clip"] {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.10);
}
.js-ready [data-anim="clip"].in {
  clip-path: inset(0 0 0% 0);
  transform: scale(1);
}

/* Reveal image latéral (volet qui balaie de la gauche) */
.js-ready [data-anim="wipe"] {
  clip-path: inset(0 100% 0 0);
}
.js-ready [data-anim="wipe"].in {
  clip-path: inset(0 0 0 0);
}

/* Titres : révélés ligne par ligne, masque par le bas */
.js-ready .a-line-mask { overflow: hidden; display: block; }
.js-ready .a-line {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1s var(--anim-ease);
}
.js-ready .a-line-mask.in .a-line { transform: translate3d(0, 0, 0); }

/* ───────────────────────────────────────────────────────────────
   4. STAGGER — délais en cascade (posés par le JS via --i)
─────────────────────────────────────────────────────────────── */
.js-ready [data-anim] { transition-delay: calc(var(--i, 0) * 90ms); }
.js-ready .a-line     { transition-delay: calc(var(--i, 0) * 110ms); }

/* ───────────────────────────────────────────────────────────────
   5. HERO — entrée séquencée + Ken Burns + parallaxe
─────────────────────────────────────────────────────────────── */
.js-ready .hero-eyebrow,
.js-ready .hero-title,
.js-ready .hero-desc,
.js-ready .hero-actions,
.js-ready .hero-stats-bar,
.js-ready .hero-scroll {
  opacity: 0;
  animation: hero-in 1.15s var(--anim-ease) both;
}
.js-ready .hero-eyebrow   { animation-delay: 0.20s; }
.js-ready .hero-title     { animation-delay: 0.32s; }
.js-ready .hero-desc      { animation-delay: 0.48s; }
.js-ready .hero-actions   { animation-delay: 0.60s; }
.js-ready .hero-stats-bar { animation-delay: 0.74s; }
.js-ready .hero-scroll    { animation-delay: 1.00s; }

@keyframes hero-in {
  from { opacity: 0; transform: translate3d(0, 34px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);    filter: blur(0); }
}

/* Point de l'eyebrow : pulsation */
.js-ready .hero-eyebrow-dot {
  animation: hero-in 1.15s var(--anim-ease) 0.2s both,
             dot-pulse 2.4s ease-in-out 1.4s infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196,129,58,0.55); }
  55%      { box-shadow: 0 0 0 9px rgba(196,129,58,0); }
}

/* ───────────────────────────────────────────────────────────────
   6. COMPTEURS DE CHIFFRES
─────────────────────────────────────────────────────────────── */
.a-count { font-variant-numeric: tabular-nums; }

/* ───────────────────────────────────────────────────────────────
   7. TRAIT D'EYEBROW QUI SE DESSINE
─────────────────────────────────────────────────────────────── */
.js-ready .section-eyebrow-line {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--anim-ease) 0.15s;
}
.js-ready .section-eyebrow.in .section-eyebrow-line,
.js-ready .section-eyebrow-line.in { transform: scaleX(1); }

/* ───────────────────────────────────────────────────────────────
   8. CARTES — survol : soulèvement, ombre, zoom image
─────────────────────────────────────────────────────────────── */
.product-card,
.stat-card,
.expertise-item,
.certif-item,
.gamme-card,
.cr-card {
  transition: transform 0.5s var(--anim-ease),
              box-shadow 0.5s var(--anim-ease),
              border-color 0.4s ease;
}

@media (hover: hover) and (min-width: 981px) {
  .product-card:hover,
  .gamme-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 26px 60px -22px rgba(27, 50, 38, 0.38);
  }
  .expertise-item:hover,
  .stat-card:hover,
  .certif-item:hover {
    transform: translateY(-5px);
  }

  /* Zoom doux de l'image contenue dans une carte */
  .product-card img,
  .gamme-card img,
  .product-visual img,
  .product-img-main {
    transition: transform 0.9s var(--anim-ease);
    will-change: transform;
  }
  .product-card:hover img,
  .gamme-card:hover img,
  .product-visual:hover img,
  .product-visual:hover .product-img-main {
    transform: scale(1.06);
  }

  /* Le conteneur doit masquer le débord du zoom */
  .product-card,
  .gamme-card,
  .product-visual { overflow: hidden; }
}

/* Inclinaison 3D subtile (activée par JS sur desktop) */
.a-tilt {
  transform-style: preserve-3d;
  transition: transform 0.4s var(--anim-ease);
}

/* ───────────────────────────────────────────────────────────────
   9. BOUTONS — reflet qui balaie + flèche qui glisse
─────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.nav-cta,
.mob-cta {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--anim-ease),
              box-shadow 0.35s var(--anim-ease),
              background 0.3s ease,
              color 0.3s ease;
}

.btn-primary::before,
.nav-cta::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg,
              transparent,
              rgba(255,255,255,0.32),
              transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
@media (hover: hover) {
  .btn-primary:hover::before,
  .nav-cta:hover::before { animation: btn-shine 0.85s var(--anim-ease); }

  .btn-primary:hover,
  .nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(27, 50, 38, 0.55);
  }
  .btn-secondary:hover { transform: translateY(-2px); }

  /* La flèche du bouton avance */
  .btn-primary svg,
  .mob-cta svg { transition: transform 0.4s var(--anim-ease); }
  .btn-primary:hover svg { transform: translateX(5px); }
}
@keyframes btn-shine {
  from { left: -120%; }
  to   { left: 130%; }
}

.btn-primary:active,
.btn-secondary:active,
.nav-cta:active { transform: translateY(0) scale(0.98); }

/* ───────────────────────────────────────────────────────────────
   10. PUCES / CHIPS — apparition en cascade
─────────────────────────────────────────────────────────────── */
.chip { transition: transform 0.35s var(--anim-ease), background 0.3s ease, color 0.3s ease; }
@media (hover: hover) {
  .chip:hover { transform: translateY(-3px); }
}

/* ───────────────────────────────────────────────────────────────
   11. LIGNES DE SPÉCIFICATIONS — glissement + point qui s'allume
─────────────────────────────────────────────────────────────── */
.js-ready .spec-dot {
  transform: scale(0);
  transition: transform 0.55s cubic-bezier(0.34, 1.62, 0.5, 1) calc(var(--i, 0) * 90ms + 180ms);
}
.js-ready .spec-item.in .spec-dot { transform: scale(1); }

/* ───────────────────────────────────────────────────────────────
   12. BOUTON RETOUR EN HAUT
─────────────────────────────────────────────────────────────── */
.to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 150;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--sand, #F4EDDF);
  background: var(--green-deep, #1B3226);
  box-shadow: 0 10px 28px -10px rgba(27, 50, 38, 0.6);
  opacity: 0;
  transform: translateY(18px) scale(0.85);
  pointer-events: none;
  transition: opacity 0.4s var(--anim-ease),
              transform 0.4s var(--anim-ease),
              background 0.3s ease;
}
.to-top.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.to-top:hover { background: var(--amber, #C4813A); transform: translateY(-3px); }
.to-top svg   { width: 19px; height: 19px; }

/* ───────────────────────────────────────────────────────────────
   13. IMAGES — fondu à la fin du chargement
─────────────────────────────────────────────────────────────── */
.js-ready img.a-fade {
  opacity: 0;
  transition: opacity 0.7s ease;
}
.js-ready img.a-fade.loaded { opacity: 1; }

/* ───────────────────────────────────────────────────────────────
   14. LIENS DE FOOTER — décalage au survol
─────────────────────────────────────────────────────────────── */
.footer-links a {
  display: inline-block;
  transition: transform 0.3s var(--anim-ease), color 0.25s ease;
}
@media (hover: hover) {
  .footer-links a:hover { transform: translateX(5px); }
}

/* ───────────────────────────────────────────────────────────────
   15. MENU MOBILE — liens qui entrent en cascade
─────────────────────────────────────────────────────────────── */
.nav-mobile.open .nav-mobile-list li {
  animation: mob-link-in 0.5s var(--anim-ease) both;
}
.nav-mobile.open .nav-mobile-list li:nth-child(1) { animation-delay: 0.10s; }
.nav-mobile.open .nav-mobile-list li:nth-child(2) { animation-delay: 0.16s; }
.nav-mobile.open .nav-mobile-list li:nth-child(3) { animation-delay: 0.22s; }
.nav-mobile.open .nav-mobile-list li:nth-child(4) { animation-delay: 0.28s; }
.nav-mobile.open .nav-mobile-list li:nth-child(5) { animation-delay: 0.34s; }
.nav-mobile.open .nav-mobile-list li:nth-child(6) { animation-delay: 0.40s; }
.nav-mobile.open .nav-mobile-list li:nth-child(7) { animation-delay: 0.46s; }
.nav-mobile.open .nav-mobile-footer {
  animation: mob-link-in 0.5s var(--anim-ease) 0.54s both;
}
@keyframes mob-link-in {
  from { opacity: 0; transform: translateX(-26px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ───────────────────────────────────────────────────────────────
   16. SOULIGNÉ ANIMÉ SUR LES MOTS MIS EN AVANT
─────────────────────────────────────────────────────────────── */
.js-ready .a-underline {
  background-image: linear-gradient(var(--amber, #C4813A), var(--amber, #C4813A));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 1.1s var(--anim-ease) 0.35s;
}
.js-ready .a-underline.in { background-size: 100% 2px; }

/* ───────────────────────────────────────────────────────────────
   17. COMPATIBILITÉ avec l'ancien système .reveal
─────────────────────────────────────────────────────────────── */
.js-ready .reveal {
  transition: opacity var(--anim-dur) var(--anim-ease),
              transform var(--anim-dur) var(--anim-ease);
}

/* ───────────────────────────────────────────────────────────────
   18. ACCESSIBILITÉ — respect de "réduire les animations"
─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .js-ready [data-anim],
  .js-ready .reveal,
  .js-ready .hero-eyebrow,
  .js-ready .hero-title,
  .js-ready .hero-desc,
  .js-ready .hero-actions,
  .js-ready .hero-stats-bar,
  .js-ready .hero-scroll,
  .js-ready .a-line,
  .js-ready .spec-dot,
  .js-ready .section-eyebrow-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
  .js-ready .hero-glow,
  .js-ready .nav { animation: none !important; }
  .js-ready .a-underline { background-size: 100% 2px !important; }
}

/* v6.11 — Masque retiré une fois le rideau ouvert (posé par anim.js) :
   les éléments qui débordent du bloc (badges, étiquettes) redeviennent visibles. */
.js-ready [data-anim].in.anim-done { clip-path: none; }