/* =========================================================
   Animations « vie » du site — légères (transform/opacity),
   coupées si le visiteur a demandé moins d'animations
   ========================================================= */

/* 1. Menu : trait de route en pointillés sous le lien */
.nav a { position: relative; padding: 6px 0; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 10px, transparent 10px 16px);
  background-size: 32px 3px; transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.nav a:hover::after, .nav a.is-active::after, .nav a[aria-current="page"]::after { transform: scaleX(1); animation: navDash .8s linear infinite; }
.nav a.is-active { color: var(--white); }
@keyframes navDash { to { background-position: -32px 0; } }

/* Logo : la flèche « avance » au survol */
.logo__icon { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.logo:hover .logo__icon { transform: translateX(4px); }

/* 2. Barre de progression de lecture sous l'en-tête */
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--amber);
  transform: scaleX(var(--read, 0)); transform-origin: left center; will-change: transform;
}
.header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7); }

/* 3. Fond vivant : flèches du logo et pointillés qui défilent lentement */
body { position: relative; }
body::before {
  content: ""; position: fixed; z-index: -1; top: 0; left: 0; width: calc(100% + 240px); height: 100%; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%230F1A2A' stroke-opacity='.06' stroke-linecap='round'%3E%3Cpath d='M30 52l12 12-12 12' stroke-width='5'/%3E%3Cpath d='M10 58h14M6 64h20M10 70h14' stroke-width='3.5'/%3E%3Cpath d='M0 128h28M48 128h28M96 128h28M144 128h28M192 128h28' stroke-width='3' stroke-opacity='.05'/%3E%3Cpath d='M150 20l9 9-9 9' stroke-width='4' stroke-opacity='.045'/%3E%3Cpath d='M135 25h10M132 29h14M135 33h10' stroke-width='2.6' stroke-opacity='.045'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 160px; animation: bgDrift 28s linear infinite; will-change: transform;
}
@keyframes bgDrift { to { transform: translateX(-240px); } }

/* 4. Apparitions au défilement */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.rv.is-in { opacity: 1; transform: none; }
.eyebrow::before { transition: width .6s cubic-bezier(.2, .7, .2, 1) .15s; }
.eyebrow.rv:not(.is-in)::before { width: 0; }

/* Titre d'accueil : entrée mot par mot */
.hero__title .w { display: inline-block; opacity: 0; transform: translateY(.35em); animation: wordIn .8s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0ms); }
@keyframes wordIn { to { opacity: 1; transform: none; } }

/* 5. Reflet sur les boutons ambre */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--amber::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); transition: left .6s ease;
}
.btn--amber:hover::after { left: 120%; }
/* le bouton téléphone de l'en-tête « sonne » discrètement de temps en temps */
.header__cta { animation: ring 9s ease-in-out 3s infinite; }
@keyframes ring { 0%, 92%, 100% { transform: none; } 93% { transform: rotate(-3deg); } 95% { transform: rotate(3deg); } 97% { transform: rotate(-2deg); } 99% { transform: rotate(1deg); } }

@media (prefers-reduced-motion: reduce) {
  body::before, .header__cta, .nav a::after { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none; }
  .hero__title .w { opacity: 1; transform: none; animation: none; }
}
@media (max-width: 860px) {
  .nav a { padding: 14px 0; }
  .nav a::after { bottom: 8px; width: 60px; right: auto; }
}