/* ============================================================
   CCB — Couche d'animation (fichier séparé, additif uniquement)
   Ne modifie AUCUNE règle existante du site : n'ajoute que des
   classes/comportements nouveaux (.motion-ready, .is-visible,
   header.nav.scrolled). Chargé APRÈS le <style> principal.

   Sécurité :
   - [data-animate] est visible par défaut (opacity:1). L'état
     "caché avant apparition" ne s'active que si le JS a pu
     s'exécuter et a ajouté .motion-ready sur <html> — donc si le
     script est bloqué, lent, ou JS désactivé : contenu visible.
   - prefers-reduced-motion: reduce -> tout reste visible, aucune
     transition, sécurité redondante avec le JS.
   ============================================================ */

[data-animate]{
  opacity:1;
}

.motion-ready [data-animate]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}

.motion-ready [data-animate].is-visible{
  opacity:1;
  transform:translateY(0);
}

.motion-ready [data-animate="fade"]{
  transform:none;
}

.motion-ready [data-animate="fade-up-sm"]{
  transform:translateY(24px);
}

@media (prefers-reduced-motion: reduce){
  .motion-ready [data-animate]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ============================================================
   Header : plus compact et davantage ombré pendant le scroll
   ============================================================ */
header.nav{
  transition:box-shadow .25s ease, padding .25s ease;
}
header.nav.scrolled{
  box-shadow:0 4px 16px rgba(19,35,64,.22);
}
header.nav.scrolled .nav-inner{
  padding-top:9px;
  padding-bottom:9px;
}
.nav-inner{
  transition:padding .25s ease;
}

/* Logo : léger fondu/descente à l'arrivée sur la page (pur CSS) */
@media (prefers-reduced-motion: no-preference){
  .brand-logo-wrap{
    animation:ccbLogoIn .6s cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes ccbLogoIn{
    from{opacity:0; transform:translateY(-6px);}
    to{opacity:1; transform:translateY(0);}
  }
}

/* ============================================================
   Menu mobile : transition douce au lieu de l'apparition instantanée.
   ============================================================ */
.mobile-menu{
  display:flex;
  flex-direction:column;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
  max-height:0;
  overflow:hidden;
}
.mobile-menu.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  max-height:600px;
}
@media (prefers-reduced-motion: reduce){
  .mobile-menu{transition:none;}
}

/* ============================================================
   Boutons : micro-interaction discrète au survol / clic (sur
   l'ensemble du site, en plus du style propre au CTA du hero).
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .btn{
    transition:background-color .15s ease, border-color .15s ease, transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s ease;
  }
  .btn:not(.hero-cta-main):hover{
    transform:translateY(-1px);
  }
  .btn:active{
    transform:translateY(0) scale(.98);
  }
}

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

/* ============================================================
   Sécurité hero : l'image ne doit jamais rester invisible.
   ============================================================ */
.hero-v2-media.is-visible,
.hero-v2-media .hero-photo-fallback,
.hero-v2-media img{
  opacity:1;
  visibility:visible;
}
/* Une <video> sans source réelle ne doit jamais s'afficher par-dessus
   l'image de secours (elle resterait sinon visible via son poster). */
.hero-video:not([src]),
.hero-video[src=""]{
  display:none;
}
/* Tant que la vidéo n'est pas prête (.video-ready ajouté au canplay),
   l'image de secours reste affichée normalement. */
.hero-v2-media:not(.video-ready) .hero-photo-fallback{
  display:block;
  opacity:1;
}
