/* ============================================================
   IMPORT POLICE
   ============================================================ */
/*@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');*/

/* ============================================================
   RESET
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

@property --theme-toggle-spot-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 26%;
}

@property --theme-toggle-spot-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 24%;
}

/* ============================================================
   BASE - HTML / BODY
   ============================================================ */
html, body {
  height: 100%;
  font-family: 'Orbitron', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow-x: hidden;
  transition: background 0.5s, color 0.5s, border-color 0.5s;
}

body {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-size: 220% 220%;
  animation: ambientGradient 22s ease-in-out infinite;
}

body::before {
  content: "";
  position: fixed;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 140, 0, 0.42) 0%, rgba(255, 170, 55, 0.2) 22%, transparent 48%),
    radial-gradient(circle at 82% 70%, rgba(255, 94, 0, 0.36) 0%, rgba(255, 140, 0, 0.18) 26%, transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(255, 180, 90, 0.16) 0%, transparent 60%);
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: 0.56;
  animation: ambientLightDriftLarge 14s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 56%, rgba(235, 245, 255, 0.18) 82%, rgba(255, 255, 255, 0.3) 100%),
    radial-gradient(circle at 12% 14%, rgba(255, 168, 74, 0.34) 0%, transparent 24%),
    radial-gradient(circle at 34% 76%, rgba(255, 120, 24, 0.26) 0%, transparent 20%),
    radial-gradient(circle at 56% 34%, rgba(255, 196, 120, 0.3) 0%, transparent 22%),
    radial-gradient(circle at 72% 62%, rgba(255, 130, 36, 0.24) 0%, transparent 21%),
    radial-gradient(circle at 90% 20%, rgba(255, 176, 92, 0.28) 0%, transparent 23%);
  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: 0.44;
  animation: ambientLightDriftSmall 10s ease-in-out infinite alternate;
}

body > * {
  position: relative;
  z-index: 1;
}

#theme-toggle {
  --theme-toggle-hold-progress: 0;
  --theme-toggle-fill-rgb: 115, 224, 255;
  --theme-toggle-spot-x: 26%;
  --theme-toggle-spot-y: 24%;
  position: fixed;
  top: 34px;
  right: 16px;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  z-index: 3000;
  background-color: rgba(120, 98, 170, 0.28);
  background-image:
    radial-gradient(circle at var(--theme-toggle-spot-x) var(--theme-toggle-spot-y), rgba(255, 255, 255, 0.62) 0 14%, transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(0, 255, 247, 0.38) 0 24%, transparent 27%),
    radial-gradient(circle at 50% 50%, rgba(209, 0, 255, 0.28) 0 36%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(18, 12, 42, 0.52) 0 20%, rgba(18, 12, 42, 0.22) 32%, transparent 34%),
    linear-gradient(145deg, rgba(170, 148, 228, 0.26) 0%, rgba(90, 66, 150, 0.3) 58%, rgba(50, 35, 90, 0.34) 100%);
  animation: themeToggleWhiteSpotDrift 6.4s ease-in-out infinite;
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  opacity: 0.72;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 10px 14px rgba(255, 255, 255, 0.12),
    inset 0 -10px 16px rgba(10, 8, 24, 0.3),
    0 8px 20px rgba(8, 6, 20, 0.26);
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease,
    box-shadow 0.2s ease,
    filter 0.24s ease;
  will-change: transform, filter, opacity;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

#theme-toggle::before {
  content: "";
  position: absolute;
  top: -34%;
  left: -34%;
  width: 168%;
  height: 168%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.34) 20%,
    rgba(255, 255, 255, 0.08) 46%,
    rgba(255, 255, 255, 0) 72%
  );
  transform: rotate(0deg) scale(1);
  opacity: 0.4;
  animation: themeTogglePlanetSpin 8.8s linear infinite;
  pointer-events: none;
}

#theme-toggle[data-theme="neon"]::before {
  top: -36%;
  left: -36%;
  width: 172%;
  height: 172%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 255, 247, 0) 0%,
    rgba(0, 255, 247, 0.42) 26%,
    rgba(209, 0, 255, 0.42) 52%,
    rgba(0, 255, 247, 0) 78%
  );
  filter: blur(4px);
  transform: scale(1) rotate(0deg);
  opacity: 0.54;
  animation: themeTogglePlanetSpin 6.6s linear infinite;
}

#theme-toggle[data-theme="autumn"]::before {
  background: conic-gradient(
    from 0deg,
    rgba(255, 175, 88, 0) 0%,
    rgba(255, 214, 153, 0.42) 24%,
    rgba(255, 153, 58, 0.22) 50%,
    rgba(255, 175, 88, 0) 78%
  );
  filter: blur(3.4px);
  opacity: 0.5;
  animation: themeTogglePlanetSpin 8.4s linear infinite;
}

#theme-toggle[data-theme="autumn"] {
  --theme-toggle-fill-rgb: 255, 166, 86;
  background-color: rgba(255, 146, 35, 0.34);
  background-image:
    radial-gradient(circle at var(--theme-toggle-spot-x) var(--theme-toggle-spot-y), rgba(255, 255, 255, 0.62) 0 14%, transparent 16%),
    radial-gradient(circle at 50% 52%, rgba(255, 237, 199, 0.94) 0 15%, transparent 16%),
    radial-gradient(circle at 50% 52%, rgba(255, 205, 132, 0.36) 0 16.5%, transparent 17.5%),
    radial-gradient(circle at 45% 48%, rgba(190, 115, 40, 0.32) 0 3.2%, transparent 3.8%),
    radial-gradient(circle at 57% 56%, rgba(190, 115, 40, 0.28) 0 2.8%, transparent 3.4%),
    radial-gradient(circle at 53% 44%, rgba(255, 248, 228, 0.42) 0 2.6%, transparent 3.2%),
    linear-gradient(145deg, rgba(255, 214, 160, 0.3) 0%, rgba(255, 148, 36, 0.34) 58%, rgba(198, 96, 0, 0.36) 100%);
  animation: themeToggleWhiteSpotDrift 6.8s ease-in-out infinite;
  border-color: rgba(255, 238, 213, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 230, 0.62),
    inset 0 10px 14px rgba(255, 226, 186, 0.16),
    inset 0 -10px 16px rgba(120, 52, 0, 0.28),
    0 8px 20px rgba(34, 16, 2, 0.24);
}

#theme-toggle[data-theme="rainbow"] {
  --theme-toggle-fill-rgb: 174, 205, 255;
  background-color: rgba(255, 255, 255, 0.44);
  background-image:
    radial-gradient(circle at var(--theme-toggle-spot-x) var(--theme-toggle-spot-y), rgba(255, 255, 255, 0.62) 0 14%, transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(255, 176, 201, 0.76) 0 24%, transparent 27%),
    radial-gradient(circle at 50% 50%, rgba(140, 235, 220, 0.72) 0 36%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(171, 200, 255, 0.8) 0 20%, rgba(240, 248, 255, 0.44) 32%, transparent 34%),
    linear-gradient(145deg, rgba(255, 208, 182, 0.38) 0%, rgba(193, 218, 255, 0.34) 54%, rgba(219, 197, 255, 0.36) 100%);
  animation: themeToggleWhiteSpotDrift 6.6s ease-in-out infinite;
  border-color: rgba(255, 255, 255, 0.6);
  opacity: 0.88;
  filter: saturate(1.42) brightness(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 14px 18px rgba(255, 255, 255, 0.38),
    inset 0 -14px 20px rgba(118, 132, 180, 0.4),
    0 14px 34px rgba(74, 92, 142, 0.56),
    0 0 34px rgba(174, 202, 255, 0.34);
}

#theme-toggle[data-theme="rainbow"]::before {
  background: conic-gradient(
    from 0deg,
    rgba(255, 157, 177, 0) 0%,
    rgba(255, 157, 177, 0.34) 18%,
    rgba(255, 209, 157, 0.3) 34%,
    rgba(157, 233, 217, 0.34) 50%,
    rgba(156, 200, 255, 0.34) 66%,
    rgba(215, 176, 255, 0.34) 82%,
    rgba(255, 157, 177, 0) 100%
  );
  filter: blur(3.4px);
  opacity: 0.54;
  animation: themeTogglePlanetSpin 7.2s linear infinite;
}

#theme-toggle:hover {
  transform: none;
  opacity: 0.9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 10px 14px rgba(255, 255, 255, 0.16),
    inset 0 -10px 16px rgba(10, 8, 24, 0.34),
    0 11px 24px rgba(8, 6, 20, 0.32);
  filter: saturate(1.08) brightness(1.04);
}

#theme-toggle[data-theme="autumn"]:hover::before {
  opacity: 0.88;
  top: -24%;
  left: -42%;
  width: 44%;
  height: 148%;
  border-radius: 999px;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.72) 45%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: none;
  animation: themeButtonShine 0.95s ease-out;
}

#theme-toggle[data-theme="neon"]:hover::before {
  opacity: 0.86;
  animation: themeButtonNeonSpin 1.6s linear infinite;
}

#theme-toggle[data-theme="autumn"]:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 247, 230, 0.7),
    inset 0 10px 14px rgba(255, 226, 186, 0.22),
    inset 0 -10px 16px rgba(120, 52, 0, 0.34),
    0 11px 24px rgba(34, 16, 2, 0.3);
}

#theme-toggle:active {
  cursor: grabbing;
  transform: translateY(6px) scaleX(1.1) scaleY(0.78);
  opacity: 0.95;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 8px 12px rgba(255, 255, 255, 0.1),
    inset 0 -8px 12px rgba(10, 8, 24, 0.28),
    0 4px 10px rgba(8, 6, 20, 0.22);
}

#theme-toggle.theme-toggle-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scaleX(1.16) scaleY(0.18);
  filter: saturate(0.82) blur(0.8px);
}

#theme-toggle.theme-toggle-force-reset {
  transform: none !important;
}

#theme-toggle.theme-toggle-holding {
  cursor: grabbing;
  transition: transform 55ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 60ms linear, filter 60ms linear, opacity 60ms linear;
  transform:
    translateY(calc(1px + (7px * var(--theme-toggle-hold-progress))))
    scaleX(calc(1.02 + (0.2 * var(--theme-toggle-hold-progress))))
    scaleY(calc(0.96 - (0.28 * var(--theme-toggle-hold-progress))));
  opacity: calc(0.86 + (0.1 * var(--theme-toggle-hold-progress)));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 10px 14px rgba(255, 255, 255, calc(0.12 + (0.08 * var(--theme-toggle-hold-progress)))),
    inset 0 -12px 18px rgba(10, 8, 24, calc(0.26 + (0.24 * var(--theme-toggle-hold-progress)))),
    0 4px 12px rgba(8, 6, 20, 0.2);
  filter: saturate(calc(1 + (0.3 * var(--theme-toggle-hold-progress)))) brightness(calc(1 + (0.15 * var(--theme-toggle-hold-progress))));
}

#theme-toggle.theme-toggle-holding::before {
  inset: -18%;
  width: auto;
  height: auto;
  border-radius: 50%;
  opacity: calc(0.2 + (0.8 * var(--theme-toggle-hold-progress)));
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18) 0 38%, rgba(255, 255, 255, 0) 64%),
    conic-gradient(
      from -90deg,
      rgba(255, 255, 255, 0.08) 0deg,
      rgba(255, 255, 255, 0.08) calc(360deg * var(--theme-toggle-hold-progress)),
      rgba(255, 255, 255, 0) calc(360deg * var(--theme-toggle-hold-progress)),
      rgba(255, 255, 255, 0) 360deg
    );
  transform: rotate(calc(100deg * var(--theme-toggle-hold-progress)));
  filter: blur(calc(2px - (1px * var(--theme-toggle-hold-progress))));
}

#theme-toggle.theme-toggle-holding::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, calc(0.1 + (0.1 * var(--theme-toggle-hold-progress)))) 0%,
      rgba(255, 255, 255, 0) 44%
    ),
    linear-gradient(
      0deg,
      rgba(var(--theme-toggle-fill-rgb), calc(0.14 + (0.54 * var(--theme-toggle-hold-progress)))) 0%,
      rgba(var(--theme-toggle-fill-rgb), calc(0.06 + (0.3 * var(--theme-toggle-hold-progress)))) calc(40% + (42% * var(--theme-toggle-hold-progress))),
      rgba(var(--theme-toggle-fill-rgb), 0) calc(68% + (22% * var(--theme-toggle-hold-progress)))
    );
  transform-origin: 50% 100%;
  transform: scaleY(calc(0.24 + (0.76 * var(--theme-toggle-hold-progress))));
  opacity: calc(0.34 + (0.66 * var(--theme-toggle-hold-progress)));
  mix-blend-mode: screen;
}

#theme-toggle.theme-toggle-burst {
  animation: themeToggleBurst 560ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

#theme-toggle.theme-toggle-burst::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 210, 145, 0.42) 0%,
    rgba(255, 138, 38, 0.22) 36%,
    rgba(255, 138, 38, 0) 72%
  );
  animation: themeToggleBurstRing 560ms ease-out;
}

#theme-toggle-hint {
  position: fixed;
  top: 36px;
  right: 66px;
  z-index: 3100;
  width: max-content;
  max-width: min(60vw, 260px);
  contain: layout;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(16, 12, 28, 0.54);
  color: rgba(255, 246, 232, 0.95);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow-wrap: break-word;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

#theme-toggle-hint::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: rgba(16, 12, 28, 0.54);
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  border-right: 1px solid rgba(255, 255, 255, 0.26);
}

body.theme-hint-visible #theme-toggle-hint {
  opacity: 1;
  transform: translateX(0);
}

body.theme-hint-visible #theme-toggle {
  animation: themeTogglePulse 1.8s ease-in-out infinite, themeToggleWhiteSpotDrift 6.4s ease-in-out infinite;
}

@keyframes themeTogglePulse {
  0% {
    filter: saturate(1) brightness(1);
  }
  50% {
    filter: saturate(1.18) brightness(1.12);
  }
  100% {
    filter: saturate(1) brightness(1);
  }
}

@keyframes themeButtonShine {
  0% {
    transform: translateX(-165%) rotate(10deg);
  }
  100% {
    transform: translateX(320%) rotate(10deg);
  }
}

@keyframes themeButtonNeonSpin {
  0% {
    transform: scale(1) rotate(0deg);
    filter: blur(4px);
  }
  100% {
    transform: scale(1) rotate(360deg);
    filter: blur(3px);
  }
}

@keyframes themeTogglePlanetSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes themeToggleWhiteSpotDrift {
  0% {
    --theme-toggle-spot-x: 26%;
    --theme-toggle-spot-y: 24%;
  }
  25% {
    --theme-toggle-spot-x: 27%;
    --theme-toggle-spot-y: 24.5%;
  }
  50% {
    --theme-toggle-spot-x: 27.5%;
    --theme-toggle-spot-y: 25.6%;
  }
  75% {
    --theme-toggle-spot-x: 25.2%;
    --theme-toggle-spot-y: 25.1%;
  }
  100% {
    --theme-toggle-spot-x: 26%;
    --theme-toggle-spot-y: 24%;
  }
}

@keyframes themeToggleBurst {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  28% {
    transform: scale(0.86);
    filter: brightness(1.05);
  }
  56% {
    transform: scale(1.18);
    filter: brightness(1.22);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes themeToggleBurstRing {
  0% {
    opacity: 0.7;
    transform: scale(0.62);
  }
  70% {
    opacity: 0.34;
    transform: scale(1.18);
  }
  100% {
    opacity: 0;
    transform: scale(1.36);
  }
}


/* ============================================================
   MAIN - Zone de contenu centrale
   ============================================================ */
main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 1rem;
  gap: 1rem;
}

/* ============================================================
   TITRE H1
   ============================================================ */
h1 {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
  user-select: none;
  padding: 0 1rem;
  z-index: 1;
  margin-top: 2rem;
}


.hero-title .title-line {
  display: block;
  white-space: nowrap;
  line-height: 1.1;
}

.hero-title.is-drilling-hide {
  pointer-events: none;
  animation: heroTitleHide 220ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards !important;
}

body[data-theme="rainbow"] h1 {
  color: transparent !important;
  background: linear-gradient(90deg, #ff9db1, #ffd09d, #fff1a6, #9de9d9, #9cc8ff, #d7b0ff, #ff9db1);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0 transparent;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.24), 0 0 14px rgba(188, 210, 255, 0.16);
  text-rendering: geometricPrecision;
  animation: footerLiseretFlow 5s linear infinite;
}

/* ============================================================
   SCROLL ARROW - Flèche animée
   ============================================================ */
.scroll-arrow {
  --arrow-color: rgba(232, 232, 232, 0.34);
  background: transparent;
  position: relative;
  width: 136px;
  height: 112px;
  margin: 44px auto 0;
  cursor: pointer;
  display: block;
  animation: arrowPulse 1.5s infinite alternate, arrowGlow 2s infinite alternate;
  user-select: none;
}

body[data-theme="autumn"] .scroll-arrow {
  --arrow-color: #ffd36b;
}

body[data-theme="rainbow"] .scroll-arrow-shape path {
  stroke: url(#arrow-rainbow-gradient);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.34));
  animation: rainbowArrowStrokeGlow 2.8s ease-in-out infinite;
}

body[data-theme="rainbow"] .scroll-arrow {
  animation: arrowPulseRainbow 1.9s ease-in-out infinite, arrowGlowRainbow 2.8s linear infinite;
}

.scroll-arrow-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.scroll-arrow-shape path {
  fill: none;
  stroke: var(--arrow-color);
  stroke-width: 10;
  stroke-linecap: butt;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.24));
}

.scroll-arrow.is-drilling {
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: arrowDrillDown 520ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  user-select: none;
  font-weight: 600;
  letter-spacing: 0.1em;
  transition: background 0.5s, border-color 0.5s, font-size 0.22s ease;
  padding: 30px 50px;
  position: relative;
  z-index: 1;
  white-space: nowrap; /* empêche le texte de revenir à la ligne */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Liseré coloré en haut du footer (couleur appliquée par le thème JS) */
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 2px 2px 0 0;
  background-size: 220% 100%;
  animation: footerLiseretFlow 4s linear infinite;
}

/* Lien dans le footer (ex: Politique de confidentialité) */
footer a {
  color: inherit;
  opacity: 1;
  text-decoration: none;
  transition: none;
}

footer a:hover {
  color: var(--footer-link-hover-color, #ffc14d);
  text-shadow: var(--footer-link-hover-shadow, 0 0 10px rgba(255, 193, 77, 0.95));
}

/* ============================================================
   ANIMATIONS GLITCH - Appliquées par le thème JS sur le H1
   ============================================================ */

/* Thème neon - mode sombre */
@keyframes glitch-dark {
  0%   { text-shadow: 2px 0 #00fff7, -2px 0 #d100ff, 0 0 10px #00fff7; transform: translate(0,0); }
  20%  { text-shadow: 2px 2px #00fff7, -2px -2px #d100ff, 0 0 20px #00fff7; transform: translate(-1px,1); }
  40%  { text-shadow: 2px -2px #00fff7, -2px 2px #d100ff, 0 0 30px #00fff7; transform: translate(1px,-1); }
  60%  { text-shadow: 2px 0 #00fff7, -2px 0 #d100ff, 0 0 10px #00fff7; transform: translate(0,0); }
  80%  { text-shadow: 2px 2px #00fff7, -2px -2px #d100ff, 0 0 20px #00fff7; transform: translate(-1px,1); }
  100% { text-shadow: 2px -2px #00fff7, -2px 2px #d100ff, 0 0 30px #00fff7; transform: translate(1px,-1); }
}

/* Thème neon - mode clair */
@keyframes glitch-light {
  0%   { text-shadow: 2px 0 #4a90e2, -2px 0 #50e3c2, 0 0 10px #4a90e2; transform: translate(0,0); }
  20%  { text-shadow: 2px 2px #4a90e2, -2px -2px #50e3c2, 0 0 20px #4a90e2; transform: translate(-1px,1); }
  40%  { text-shadow: 2px -2px #4a90e2, -2px 2px #50e3c2, 0 0 30px #4a90e2; transform: translate(1px,-1); }
  60%  { text-shadow: 2px 0 #4a90e2, -2px 0 #50e3c2, 0 0 10px #4a90e2; transform: translate(0,0); }
  80%  { text-shadow: 2px 2px #4a90e2, -2px -2px #50e3c2, 0 0 20px #4a90e2; transform: translate(-1px,1); }
  100% { text-shadow: 2px -2px #4a90e2, -2px 2px #50e3c2, 0 0 30px #4a90e2; transform: translate(1px,-1); }
}

/* Thème automne */
@keyframes glitch-automne {
  0%   { text-shadow: 2px 0 #ff8c00, -2px 0 #d2691e, 0 0 10px #ffd700; transform: translate(0,0); }
  20%  { text-shadow: 2px 2px #ff8c00, -2px -2px #d2691e, 0 0 20px #ffd700; transform: translate(-1px,1); }
  40%  { text-shadow: 2px -2px #ff8c00, -2px 2px #d2691e, 0 0 30px #ffd700; transform: translate(1px,-1); }
  60%  { text-shadow: 2px 0 #ff8c00, -2px 0 #d2691e, 0 0 10px #ffd700; transform: translate(0,0); }
  80%  { text-shadow: 2px 2px #ff8c00, -2px -2px #d2691e, 0 0 20px #ffd700; transform: translate(-1px,1); }
  100% { text-shadow: 2px -2px #ff8c00, -2px 2px #d2691e, 0 0 30px #ffd700; transform: translate(1px,-1); }
}

/* Légère montée/descente de la flèche */
@keyframes arrowPulse {
  0%   { transform: translateY(0); opacity: 0.42; }
  50%  { transform: translateY(-5px); opacity: 0.56; }
  100% { transform: translateY(0); opacity: 0.42; }
}

/* Glow qui clignote doucement */
@keyframes arrowGlow {
  0%   { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.16)); }
  50%  { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.34)); }
  100% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.16)); }
}

@keyframes arrowPulseRainbow {
  0%   { transform: translateY(0); opacity: 0.62; }
  50%  { transform: translateY(-5px); opacity: 0.82; }
  100% { transform: translateY(0); opacity: 0.62; }
}

@keyframes arrowGlowRainbow {
  0%   { filter: drop-shadow(0 0 6px rgba(255, 190, 210, 0.24)); }
  25%  { filter: drop-shadow(0 0 10px rgba(255, 225, 170, 0.28)); }
  50%  { filter: drop-shadow(0 0 12px rgba(157, 233, 217, 0.3)); }
  75%  { filter: drop-shadow(0 0 10px rgba(156, 200, 255, 0.28)); }
  100% { filter: drop-shadow(0 0 6px rgba(215, 176, 255, 0.24)); }
}

@keyframes rainbowArrowStrokeGlow {
  0%   { filter: drop-shadow(0 0 8px rgba(255, 190, 210, 0.24)); }
  25%  { filter: drop-shadow(0 0 10px rgba(255, 225, 170, 0.28)); }
  50%  { filter: drop-shadow(0 0 12px rgba(157, 233, 217, 0.3)); }
  75%  { filter: drop-shadow(0 0 10px rgba(156, 200, 255, 0.28)); }
  100% { filter: drop-shadow(0 0 8px rgba(215, 176, 255, 0.24)); }
}

@keyframes arrowDrillDown {
  0% {
    transform: translateY(var(--arrow-start-y, 0px)) scale(1);
    opacity: 0.7;
  }
  60% {
    transform: translateY(calc(var(--arrow-start-y, 0px) + 10px)) scale(1);
    opacity: 0;
  }
  100% {
    transform: translateY(calc(var(--arrow-start-y, 0px) + 14px)) scale(1);
    opacity: 0;
  }
}

@keyframes heroTitleHide {
  0% {
    opacity: 1;
    text-shadow: inherit;
  }
  69.9% {
    opacity: 1;
    text-shadow: inherit;
  }
  70% {
    opacity: 1;
    text-shadow: inherit;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: none;
  }
  100% {
    opacity: 0;
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: none;
  }
}

@keyframes footerLiseretFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes ambientGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ambientLightDriftLarge {
  0%   { transform: translate3d(-18vw, -10vh, 0) scale(0.9); }
  50%  { transform: translate3d(10vw, 8vh, 0) scale(1.1); }
  100% { transform: translate3d(22vw, -6vh, 0) scale(0.95); }
}

@keyframes ambientLightDriftSmall {
  0%   { transform: translate3d(10vw, -8vh, 0) scale(0.96); }
  50%  { transform: translate3d(-12vw, 9vh, 0) scale(1.06); }
  100% { transform: translate3d(8vw, -5vh, 0) scale(0.98); }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }

  body::before {
    animation: none;
  }

  body::after {
    animation: none;
  }

  footer::before {
    animation: none;
  }

  #theme-toggle {
    transition: none;
  }

  #theme-toggle.theme-toggle-holding {
    transform: translateY(4px) scaleX(1.08) scaleY(0.82);
    filter: saturate(1.12) brightness(1.08);
  }

  #theme-toggle.theme-toggle-holding::before {
    opacity: 0.9;
    transform: none;
    filter: none;
  }

  #theme-toggle.theme-toggle-holding::after {
    transform: none;
    opacity: 0.9;
  }

  #theme-toggle.theme-toggle-burst {
    animation: none;
  }

  #theme-toggle.theme-toggle-burst::after {
    animation: none;
    opacity: 0;
  }

  body.theme-hint-visible #theme-toggle {
    animation: none;
  }

  #theme-toggle-hint {
    transition: none;
  }

  body[data-theme="rainbow"] h1 {
    animation: none;
  }

  .scroll-arrow.is-drilling {
    animation: none;
    opacity: 0;
  }
}