/* Hypervibe créatif - vitrine : base commune */
:root{
  --rouge:#D9432F;
  --bleu-clair:#A0B6D3;
  --bordeaux:#3E0F28;
  --marron:#4A2A1C;
  --rose-clair:#F3D6DB;
  --cobalt:#1F47C7;
  --display:"Archivo","Arial Black",system-ui,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a,button,[role="button"],label,select{cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Navigation entre les pages */
.site-nav{position:fixed;z-index:50;top:16px;right:16px;display:flex;gap:8px;font:600 14px/1 var(--sans);letter-spacing:.02em}
.site-nav a{color:inherit;text-decoration:none;padding:11px 18px;border:1.5px solid currentColor;border-radius:999px;opacity:1;
  box-shadow:0 4px 16px rgba(0,0,0,.18);transition:transform .2s,background .2s,color .2s;white-space:nowrap}
.site-nav a:hover{transform:translateY(-2px)}
.site-nav a[aria-current="page"]{opacity:1}
.site-nav a.retour{margin-right:6px}
.site-nav a.retour .court{display:none;font-weight:inherit}
@media (max-width:640px){
  .site-nav{top:12px;right:12px;gap:4px}
  .site-nav a{padding:9px 12px;font-size:13px}
  .site-nav a span{display:none}
  /* Sur mobile, le retour est écrit en toutes lettres */
  .site-nav a.retour .court{display:inline}
}

/* Apparition au défilement */
[data-vu]{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
[data-vu].vu{opacity:1;transform:none}
[data-vu="2"]{transition-delay:.12s}
[data-vu="3"]{transition-delay:.24s}
[data-vu="4"]{transition-delay:.36s}

/* Lien vers la créa suivante */
.suivante{display:block;text-decoration:none;color:inherit;padding:72px 20px 88px;text-align:center}
.suivante small{display:block;font:500 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:.75;margin-bottom:14px}
.suivante strong{display:inline-block;font-size:clamp(40px,9vw,120px);line-height:.9;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.suivante:hover strong{transform:translateX(18px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  [data-vu]{opacity:1;transform:none}
}