/* Base et animations communes aux sites de démonstration */
:root { --ease: cubic-bezier(.2, .8, .2, 1); }
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }

.media { position: relative; overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* En-tête qui se fige au défilement */
.top { position: sticky; top: 0; z-index: 20; padding: 22px 0; transition: padding .4s var(--ease), background .4s, box-shadow .4s; }
.top.scrolled { padding: 12px 0; background: var(--hbg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--hline); }
.head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.head nav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.head nav a:not(.btn) { position: relative; }
.head nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.head nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left; }

/* Titres : chaque ligne monte à l'ouverture de la page */
.js .l { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.js .l > span { display: block; transform: translateY(110%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 130ms + 150ms); }
.js.loaded .l > span { transform: none; }
.js [data-hero] { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 500ms); }
.js.loaded [data-hero] { opacity: 1; transform: none; }

/* Apparition au défilement */
.js [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js [data-reveal="img"] { opacity: 1; transform: none; }
.js [data-reveal="img"] img { clip-path: inset(0 0 100% 0); transform: scale(1.25); transition: clip-path 1.4s var(--ease), transform 1.8s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.js [data-reveal="img"].in img { clip-path: inset(0); transform: scale(1); }

/* Photo qui glisse légèrement pendant le défilement */
[data-parallax] img { height: 118%; translate: 0 var(--py, -8%); will-change: translate; }

/* Zoom lent sur la photo d'accueil */
.kb img { animation: kb 16s ease-out both; }
@keyframes kb { from { transform: scale(1.18); } to { transform: scale(1); } }

/* Bandeau défilant */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__t { display: inline-flex; animation: mq var(--speed, 32s) linear infinite; }
.marquee__t span { display: inline-flex; align-items: center; }
@keyframes mq { to { transform: translateX(-50%); } }

@keyframes floaty { 50% { transform: translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mention de démonstration */
.demo { position: fixed; left: 50%; bottom: 16px; z-index: 30; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; white-space: nowrap; background: rgba(20, 20, 15, .92); color: #fff; padding: 9px 9px 9px 18px; border-radius: 999px; font: 500 13px/1.2 system-ui, sans-serif; box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .7); backdrop-filter: blur(8px); }
.demo a { background: #fff; color: #14140f; padding: 7px 14px; border-radius: 999px; font-weight: 700; }

@media (max-width: 820px) {
  .wrap { width: calc(100% - 40px); }
  .head { gap: 12px; }
  .head nav a:not(.btn) { display: none; }
  .head nav .btn { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
  .demo span { display: none; }
  .demo { padding-left: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .l > span, .js [data-hero], .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js [data-reveal="img"] img, [data-parallax] img { clip-path: none; transform: none; translate: none; height: 100%; transition: none; }
  .kb img, .marquee__t, .float, .spin { animation: none !important; }
}