/* ---------------------------------------------
   La Lumière : la lampe
   The real site sits underneath. Darkness on top.
   The cursor is a soft lamp that reveals it.
---------------------------------------------- */

body.is-dark {
  overflow: hidden;
  cursor: none;
  /* au doigt : pas de rebond élastique ni de zoom pendant qu'on promène la lampe */
  overscroll-behavior: none;
  touch-action: none;
}

body.is-dark * { cursor: none !important; }

/* ---------- The darkness with a hole in it ---------- */

.torch {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  background: radial-gradient(
    circle var(--torch-r, 120px) at var(--torch-x, 50%) var(--torch-y, 46%),
    rgba(0, 0, 0, 0.52) 0%,
    rgba(0, 0, 0, 0.62) 20%,
    rgba(0, 0, 0, 0.84) 46%,
    rgba(0, 0, 0, 0.97) 70%,
    rgba(0, 0, 0, 1) 88%,
    rgba(0, 0, 0, 1) 100%
  );
  transition: opacity 1.2s var(--ease);
}

/* before the visitor moves: the room is simply black.
   the lamp only exists once a hand reaches for it. */
.torch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 1;
  transition: opacity 1.4s var(--ease);
}

body.has-lamp .torch::after { opacity: 0; }

/* a faint tungsten halo so the lamp reads warm, never clinical */
.torch__glow {
  position: fixed;
  inset: 0;
  z-index: 151;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  background: radial-gradient(
    circle calc(var(--torch-r, 120px) * 1.35) at var(--torch-x, 50%) var(--torch-y, 46%),
    rgba(255, 206, 148, 0.07) 0%,
    rgba(255, 206, 148, 0.022) 40%,
    rgba(255, 206, 148, 0) 70%
  );
  transition: opacity 1.4s var(--ease);
}

body.has-lamp .torch__glow:not(.is-out) { opacity: 0.18; }

/* the filament itself : a tiny point of light at the cursor */
.torch__core {
  position: fixed;
  z-index: 152;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 226, 184, 0.42);
  box-shadow: 0 0 8px 2px rgba(255, 206, 148, 0.12);
  transform: translate3d(var(--torch-px, 50vw), var(--torch-py, 46vh), 0);
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}

body.has-lamp .torch__core:not(.is-out) { opacity: 1; }

.torch.is-out,
.torch__glow.is-out,
.torch__core.is-out { opacity: 0; }

/* ---------- Call to action floating in the dark ---------- */

.torch-cta {
  position: fixed;
  z-index: 160;
  left: 50%;
  /* au-dessus de la barre d'adresse et de l'encoche */
  bottom: calc(clamp(2.5rem, 9vh, 5.5rem) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(90vw, 420px);
  text-align: center;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}

.torch-cta.is-ready { opacity: 1; }
.torch-cta.is-out { opacity: 0; pointer-events: none; }

.torch-cta .label {
  color: rgba(244, 243, 240, 0.42);
  margin-bottom: 0.9rem;
}

.enter-dark {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 214, 166, 0.30);
  color: rgba(247, 240, 230, 0.82);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 1rem 2.8rem;
  cursor: pointer;
  animation: emberPulse 4.6s ease-in-out infinite;
  transition: background 0.5s var(--ease), color 0.5s var(--ease),
              border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

@keyframes emberPulse {
  0%, 100% { box-shadow: 0 0 26px -6px rgba(255, 200, 140, 0.30); }
  50%      { box-shadow: 0 0 40px -4px rgba(255, 200, 140, 0.50); }
}

.enter-dark:hover,
.enter-dark:focus-visible {
  background: rgba(247, 240, 230, 0.94);
  border-color: rgba(247, 240, 230, 0.94);
  color: #17171a;
  outline: none;
  animation: none;
  box-shadow: 0 0 42px -4px rgba(255, 200, 140, 0.55);
}

/* ---------- Le choix de la langue, avant d'entrer ---------- */

/* dans le noir, l'en-tête est invisible : il ne doit pas être cliquable */
body.is-dark .header { pointer-events: none; }

.lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.9rem;
  margin-top: 1.6rem;
}

.lang__btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 2px 0;
  position: relative;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 243, 240, 0.34);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.lang__btn:hover { color: rgba(247, 240, 230, 0.78); }

/* FR / EN / IT ne font que 17px de large : on élargit la zone touchable
   sans toucher au dessin, sinon le soulignement décrocherait du mot */
.lang__btn::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.lang__btn.is-active {
  color: rgba(247, 240, 230, 0.86);
  border-bottom-color: rgba(255, 214, 166, 0.42);
}

.lang__btn:focus-visible {
  outline: 1px solid rgba(255, 214, 166, 0.5);
  outline-offset: 4px;
}

/* ---------- Touch devices have no lamp to hold ---------- */

@media (pointer: coarse) {
  body.is-dark, body.is-dark * { cursor: auto !important; }
  .torch { --torch-r: 170px; }
  .torch__core { display: none; }
  /* no cursor to move, so the room is lit from the start */
  .torch::after { opacity: 0; }
  .torch__glow { opacity: 0.18; }
}

@media (prefers-reduced-motion: reduce) {
  .enter-dark { animation: none; }
  .torch, .torch__glow, .torch__core, .torch-cta { transition: none; }
}