/* Parcours Primaire — styles des effets premium (0 lib, reduced-motion safe) */

/* ---- Hero image + couches parallax ---- */
.hero-art, .hhero-art { will-change: transform; }
.hero-img { position: absolute; inset: -12% 0 0 0; z-index: -2; }
.hero-img img { width: 100%; height: 118%; object-fit: cover; object-position: center 62%; }
.hero-veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(102deg, var(--paper) 4%, color-mix(in srgb, var(--paper) 82%, transparent) 40%, color-mix(in srgb, var(--paper) 20%, transparent) 62%, transparent 78%); }
.hero-veil::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px;
  background: linear-gradient(transparent, var(--paper)); }

/* Nuages dérivants (SVG légers par-dessus l'image) */
.drift { position: absolute; z-index: 0; opacity: .85; animation: drift linear infinite; }
@keyframes drift { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } }
html.paused .drift, html.paused .bird { animation-play-state: paused; }
/* Oiseaux (traits fins, croisent lentement) */
.bird { position: absolute; z-index: 0; animation: bird linear infinite; }
@keyframes bird { from { transform: translate(-8vw, 0) } 50% { transform: translate(50vw, -18px) } to { transform: translate(110vw, 0) } }
@media (prefers-reduced-motion: reduce) { .drift, .bird { animation: none; display: none; } }

/* ---- Entrées : reveal enrichi (blur+scale léger) ---- */
html.js .reveal { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; filter: none; }

/* ---- Tilt 3D cards : éclat qui suit le pointeur ---- */
[data-tilt] { transition: transform .35s var(--ease), box-shadow .35s var(--ease); transform-style: preserve-3d; position: relative; }
[data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.35), transparent 42%); }
[data-tilt]:hover::after { opacity: 1; }
[data-tilt]:hover { box-shadow: var(--shadow-lg); }

/* ---- Boutons : balayage lumineux ---- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before { content: ""; position: absolute; top: 0; bottom: 0; width: 44%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-18deg); transition: left .55s var(--ease); }
.btn-primary:hover::before { left: 120%; }

/* ---- Progress bar de lecture ---- */
#readbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80;
  background: linear-gradient(90deg, var(--terre), var(--terre-bright)); transform-origin: 0 50%; transform: scaleX(0); }

/* ---- Timeline : pulsation du jalon actif + pop du panel ---- */
.tl-node.on .tl-dot { animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--terre) 60%, transparent), 0 0 0 0 color-mix(in srgb, var(--terre) 34%, transparent); }
  50% { box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--terre) 60%, transparent), 0 0 0 12px transparent; } }
.tl-panel.pop { animation: panelpop .45s var(--ease); }
@keyframes panelpop { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tl-node.on .tl-dot { animation: none; } .tl-panel.pop { animation: none; } }

/* ---- Filière cards : icône flottante ---- */
.fil-card .fil-ico { transition: transform .4s var(--ease); }
.fil-card:hover .fil-ico { transform: translateY(-6px) rotate(-6deg) scale(1.12); }
.fil-card.live { position: relative; border-color: color-mix(in srgb, var(--terre) 45%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--terre) 10%, transparent), var(--shadow-lg); }

/* ---- Vague de séparation sous le hero ---- */
.wave-sep { display: block; width: 100%; height: 54px; margin-top: -54px; position: relative; z-index: 1; color: var(--paper); }

/* ---- Stats hero : pop en cascade ---- */
.hero-stats > div { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.hero-stats > div:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Reduced-motion : neutralisation TOTALE des effets */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .btn-primary::before { display: none; }
  [data-tilt], .hero-stats > div, .fil-card, .fil-card .fil-ico { transition: none !important; transform: none !important; }
  .hero-img, [data-px] { transform: none !important; }
  #readbar { display: none; }
}