:root {
  --rouge: #dd1634;
  --rouge-sombre: #b30f29;
  --blanc: #ffffff;
  /* amplitude de la parallaxe (en px) */
  --amp-fond: 18;
  --amp-logo: 34;
  --amp-tilt: 6;
  /* taille de l'image de fond (vmin = % du plus petit côté de l'écran) */
  --taille-fond: 108vmin;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--rouge);
  color: var(--blanc);
  font-family: "Roboto", Arial, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--blanc);
  text-decoration: underline;
}
a:hover {
  color: var(--blanc);
  text-decoration: underline;
}

/* ---------- Scène ---------- */
.scene {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  perspective: 1200px;
  background: radial-gradient(ellipse at 50% 45%, #ea2140 0%, var(--rouge) 45%, #c41230 100%);
}

/* ---------- Fond ---------- */
.fond {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  will-change: transform;
  transform: translate3d(var(--fx, 0px), var(--fy, 0px), 0);
  transition: transform .18s ease-out;
}
.fond > img {
  width: var(--taille-fond); height: var(--taille-fond);
  display: block;
  mix-blend-mode: multiply;
  animation: respire 14s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}
@keyframes respire {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.03) translateY(-8px); }
}

/* ---------- Logo ---------- */
.logo-wrap {
  position: relative;
  width: min(46vmin, 320px);
  aspect-ratio: 1;
  will-change: transform;
  transform: translate3d(var(--lx, 0px), var(--ly, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .14s ease-out;
  animation: entree 1.2s cubic-bezier(.2,.9,.3,1.2) both;
}
.logo {
  width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 18px 30px rgba(120, 0, 20, .35));
}
@keyframes entree {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.85); }
  to { opacity: 1; transform: translate3d(0, 0, 0)  scale(1); }
}

/* anneau animé autour du logo */
.anneau {
  position: absolute; inset: -9%;
  width: 118%; height: 118%;
  fill: none;
  stroke: var(--blanc);
  stroke-width: .6;
  stroke-linecap: round;
  opacity: .55;
  animation: tourne 30s linear infinite;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.anneau .trait { stroke-dasharray: 2 6; }
.anneau .arc {
  stroke-width: 1.2;
  stroke-dasharray: 60 260;
  animation: file 4s ease-in-out infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes file {
  0% { stroke-dashoffset: 0; opacity: .9; }
  50% { opacity: .3; }
  100% { stroke-dashoffset: -320; opacity: .9; }
}

/* halo pulsé derrière le logo */
.halo {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  animation: pulse 3.2s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes pulse {
  0% { transform: scale(.9); opacity: .55; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Zone de texte ---------- */
.contenu {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  text-align: center;
  padding: 0 24px;
}
.texte {
  max-width: 38rem;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.3;
  letter-spacing: .05em;
  animation: fondu 1s ease .7s both;
}
.texte h1 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.texte h1, .texte p {
  margin: 1rem 0;
}
.texte p span {
  white-space: nowrap;
}
@keyframes fondu { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* indicateur "chargement" — à retirer si inutile */
.points { display: inline-flex; gap: 7px; margin-top: 1rem; }
.points i {
  width: 10px; height: 10px; border-radius: 50%; background: var(--blanc);
  animation: saute 1.2s ease-in-out infinite;
}
.points i:nth-child(2) { animation-delay: .15s; }
.points i:nth-child(3) { animation-delay: .3s;}
@keyframes saute { 0%,100% { transform: translateY(0); opacity: .5 } 50% { transform: translateY(-6px); opacity: 1 } }

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}