/* ============================================================
   BLÉ & LEVAIN — OS  ·  Couche de mouvement
   Tout le mouvement vit ici. Respecte prefers-reduced-motion.
   ============================================================ */

/* — Keyframes — */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn    { 0% { opacity: 0; transform: scale(.94); } 60% { transform: scale(1.015); } 100% { opacity: 1; transform: none; } }
@keyframes slideInL { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes viewIn   { from { opacity: 0; transform: translateY(16px) scale(.995); } to { opacity: 1; transform: none; } }
@keyframes draw     { to { stroke-dashoffset: 0; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes pulseRing{ 0%,100% { box-shadow: 0 0 0 0 rgba(178,59,59,.5); } 50% { box-shadow: 0 0 0 7px rgba(178,59,59,0); } }
@keyframes shimmer  { 0% { background-position: -180% 0; } 100% { background-position: 180% 0; } }
@keyframes floatY   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sway     { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes glow     { 0%,100% { opacity: .55; } 50% { opacity: .85; } }


/* — Splash — */
#splash .s-logo .stroke {
  stroke-dasharray: 240; stroke-dashoffset: 240;
  animation: draw 1.05s cubic-bezier(.6,.1,.2,1) forwards;
}
#splash .s-logo .grain { opacity: 0; animation: popIn .5s ease .7s forwards; }
#splash .s-name { opacity: 0; animation: fadeUp .6s ease .55s forwards; }
#splash .s-sub  { opacity: 0; animation: fadeUp .6s ease .72s forwards; }
#splash .s-bar > i { animation: splashLoad 1.15s ease .2s forwards; }
@keyframes splashLoad { to { width: 100%; } }

/* — Révélation des vues & cartes — */
.view-in { animation: viewIn .42s cubic-bezier(.34,1.1,.34,1) both; }
.reveal  { animation: fadeUp .5s cubic-bezier(.34,1.1,.34,1) both; animation-delay: calc(var(--i, 0) * 65ms); }
.reveal-pop { animation: popIn .5s cubic-bezier(.34,1.1,.34,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.nav a { animation: slideInL .4s ease both; animation-delay: calc(var(--n, 0) * 35ms); }

/* — Éléments animés — */
.hero h1.title { animation: fadeUp .7s cubic-bezier(.34,1.1,.34,1) both .08s; }
.hero .eyebrow { animation: fadeIn .8s ease both; }
.hero .addr { animation: fadeUp .7s ease both .16s; }
.hero .chip { animation: popIn .5s cubic-bezier(.34,1.2,.34,1) both; animation-delay: calc(.24s + var(--c,0)*70ms); }
.ring .prog { transition: stroke-dashoffset 1.3s cubic-bezier(.34,1,.3,1); }

.brand .logo { animation: popIn .6s cubic-bezier(.34,1.3,.34,1) both; }
.brand .logo:hover svg { animation: sway 1.1s ease-in-out infinite; }
.hic svg, .kpi .label svg { transition: transform var(--t-moyen); }
.card:hover .hic svg { transform: rotate(-8deg) scale(1.08); }

/* badge d'alerte qui respire */
.nav a .badge.live { animation: pulseRing 2s ease-in-out infinite; }
.tag.bad .dot-pulse, .timeline li.urgent .dot { animation: pulseRing 2s ease-in-out infinite; }
.spark-wheat { animation: floatY 5s ease-in-out infinite; }

/* effet de brillance sur boutons primaires */
.btn.primaire { position: relative; overflow: hidden; }
.btn.primaire::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 200% 100%; animation: shimmer 4.5s ease-in-out infinite; pointer-events: none;
}

/* ondulation au clic */
.ripple { position: relative; overflow: hidden; }
.ripple > .rp {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(212,169,58,.45); pointer-events: none; animation: rp .6s ease-out;
}
@keyframes rp { to { transform: scale(3.2); opacity: 0; } }

/* compteur (count-up) : le JS pose le nombre, ici juste un léger relief */
[data-countup] { display: inline-block; }

/* squelette de chargement (réutilisable) */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--ligne) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; }

/* — Préférence : moins de mouvement — */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  #splash .s-logo .stroke { stroke-dashoffset: 0; }
  #splash .s-bar > i { width: 100%; }
  .ring .prog { transition: none; }
}