@charset "UTF-8";

:root{
  --cta-size: clamp(60px, 6vw, 90px); /* plus petit qu’avant */
}
html, body{ height:100%; margin:0; background:#000; }
body{
  overflow:hidden;  touch-action:none; cursor:none;
  font-family: "ivypresto-display", serif;
}

/* Bandeau titre */
.site-header{
  position: fixed; top: clamp(30px, 5vh, 50px); left: 0; right: 0;
  z-index: 999; padding: 0 clamp(16px, 4vw, 40px);
  background: transparent; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.site-header.ready{ opacity: 1; }
.site-title{
display: inline-block;
text-align: left;
  font-weight: 100; letter-spacing: .12em;
  font-size: clamp(20px, 4vw, 42px); color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  user-select: none; display: flex; justify-content: center;
  transition: transform .2s ease-out; will-change: transform;
}
    
.logo-fixed {
  position: fixed;
  top: clamp(16px, 3vw, 28px);
  left: clamp(20px, 4vw, 40px);
  z-index: 10;
  font-family: var(--font-editorial, serif);
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  letter-spacing: 0.04em;
  pointer-events: auto;
  transition: opacity 0.3s ease;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.logo-fixed .eye {
  color: var(--accent-amber, #FFBF00);
}

/* Fonds */
.bg-container{ position:fixed; inset:0; z-index:0; }
.bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.4s ease;
}
.bg.is-active{ opacity:1; }

/* Bouton */
.round-cta{
  position:fixed; left:50%; top:50%;
  width:var(--cta-size); aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.9);
  border-radius:50%; border:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background:rgba(40,40,40,0.75); /* gris foncé semi-transparent */
  color:#fff; /* texte blanc */
  font-weight:100; letter-spacing:.02em; font-size: 1rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor:pointer; important; opacity:0;
  transition: background .3s ease, transform .45s ease, opacity .6s ease, box-shadow .3s ease;
  isolation:isolate;

  /* Ombre + halo lumineux élargi */
  box-shadow:
    0 4px 10px rgba(0,0,0,0.25),        /* ombre douce */
    0 0 28px rgba(255,255,255,0.55);    /* halo plus large */
}
.round-cta.show{
  opacity:1; transform:translate(-50%,-50%) scale(1);
}
.round-cta:hover{
  background:rgba(40,40,40,0.9);
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.3),
    0 0 38px rgba(255,255,255,0.85); /* halo encore plus large au survol */
}
.round-cta:focus-visible{
  outline:3px solid #ffffff33; outline-offset:4px;
}
    .cta-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
}

.cta-label {
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.04em;
}
    
.cta-counter {
  margin-top: 0.4em;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  font-family: var(--font-ui, sans-serif);
  line-height: 1.2;
}

.arrow {
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
  opacity: 0.85;
}

.round-cta:hover .arrow {
  opacity: 1;
}

/* Texte indicatif : cadre néon bleu (plus large), clignote 3× puis disparaît */
.hint {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(14px, 2.2vw, 22px);

  color: rgba(255,255,255,0.9);
  text-align: center;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  opacity: 0;
  transition: opacity .6s ease;

background: rgba(0, 80, 150, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);

  border-radius: 999px;            /* pastille arrondie */
}

.hint.show{ opacity: 1; }
.hint span{
  position: relative; display: inline-block;
  padding: 8px 16px; border-radius: 999px;
}
/* Cadre néon plus large et visible */
.hint.blink span::before{
  content:""; position:absolute; inset:0; border-radius: inherit;
  border: 2px solid rgba(0,160,255,0.95);
  box-shadow:
    0 0 8px rgba(0,160,255,0.95),
    0 0 18px rgba(0,160,255,0.8),
    0 0 36px rgba(0,200,255,0.6);
  opacity:0; animation: neonFrameBlink .6s ease-in-out 3;
}
    
.vision-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0.4rem 1rem;
  background: rgba(0, 0, 0, 0.25); /* discret, semi-transparent */
  color: rgba(255,255,255,0.65);
  font-size: 0.75rem;
  font-family: var(--font-ui, sans-serif);
  text-align: center;
  pointer-events: none; /* ne bloque pas les clics derrière */
  z-index: 5;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}    
/* Disparition après les blinks + 2s */
.hint.fadeout{ animation: hintVanish .4s ease forwards; }

@keyframes neonFrameBlink{ 0%,100%{opacity:0} 50%{opacity:1} }
@keyframes hintVanish{ to{ opacity:0; visibility:hidden } }
@media (prefers-reduced-motion: reduce){
  .bg{ transition:none }
  .round-cta{ transition:none }
  .hint{ transition:none }
}