/* =====================================================================
   main.css — UI du site 3D (glassmorphism, formes organiques)
   ===================================================================== */
:root {
  --glass: rgba(255, 255, 255, 0.10);
  --glass-strong: rgba(255, 255, 255, 0.16);
  --stroke: rgba(255, 255, 255, 0.28);
  --text: #fff;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #160d22; color: var(--text); }
/* Le doigt ne doit JAMAIS déclencher le pinch-zoom ni le scroll natifs du
   navigateur : sinon ils volent le geste à la navigation 3D (zoom qui se
   « bloque », surtout au lancement quand le pincement démarre sur le loader
   ou le HUD, pas sur le canvas). OrbitControls ne pose touch-action:none que
   sur le canvas — on l'étend ici à TOUTE la page. */
html, body, #app { touch-action: none; overscroll-behavior: none; }
#app { position: fixed; inset: 0; }
/* Exception : le contenu des modales doit pouvoir défiler au doigt. */
#modal-content, .nl-panel { touch-action: pan-y; }
.hidden { display: none !important; }

/* ---------- Écran de chargement ---------- */
#loader {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  background: #ffffff;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
#loader.hidden { display: flex !important; opacity: 0; pointer-events: none;
  animation: loaderFade 0.7s ease forwards; }

.loader-core {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding: 0 24px;
  animation: coreRise 0.9s cubic-bezier(.2,.8,.2,1) both;
}

.loader-kicker {
  font-size: clamp(10px, 1.4vw, 13px); font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: #b3a3da;                                  /* lavande claire */
}

/* Wordmark : Bodoni Moda (Didone couture), lavande claire, dégradé discret */
.loader-wordmark {
  margin: 0;
  font-family: "Bodoni Moda", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-size: clamp(34px, 8.5vw, 82px); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.05;
  background: linear-gradient(100deg, #8a6fc9, #b29ce6);  /* deux lavandes proches */
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.loader-meter { width: min(340px, 76vw); display: flex; flex-direction: column; gap: 12px; }
#loader-track {
  width: 100%; height: 4px; border-radius: 99px;
  background: rgba(138, 111, 201, 0.14);           /* lavande très diluée */
  overflow: hidden;
}
#loader-bar {
  width: 0%; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #8a6fc9, #b29ce6);
  /* Pas de transition CSS : la largeur est animée frame par frame en JS,
     en phase exacte avec le pourcentage affiché (cf. scene.js). */
}
.loader-readout {
  display: flex; align-items: baseline; justify-content: space-between;
  font-weight: 600;
}
.loader-status {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #bcaee0;                                  /* glycine claire */
}
.loader-pct {
  font-size: 15px; letter-spacing: 0.04em;
  color: #8a6fc9; font-variant-numeric: tabular-nums; /* lavande */
}
.loader-pct small { font-size: 0.62em; opacity: 0.55; margin-left: 1px; }

.loader-foot {
  position: absolute; bottom: 28px; z-index: 2;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #cdc2ec;                                  /* lilas très clair */
  animation: footPulse 3s ease-in-out infinite;
}

@keyframes coreRise   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes footPulse  { 0%,100% { opacity: 0.55; } 50% { opacity: 0.9; } }
@keyframes loaderFade { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .loader-foot, .loader-core { animation: none !important; }
}

/* ---------- Intro / invitation à entrer ---------- */
#intro {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; cursor: pointer; text-align: center;
  background: rgba(22, 13, 34, 0.35);
  backdrop-filter: blur(4px);
}
#intro .card {
  padding: 30px 38px;
  border-radius: 26px 30px 24px 32px;            /* coins organiques */
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
#intro h2 { margin: 0 0 8px; font-weight: 600; }
#intro p { margin: 4px 0; opacity: 0.85; font-size: 14px; }
#intro kbd {
  background: rgba(255, 255, 255, 0.16); border: 1px solid var(--stroke);
  border-radius: 6px; padding: 1px 7px; font-size: 12px;
}

/* ---------- Réticule (point de visée) ---------- */
#reticle {
  position: fixed; top: 50%; left: 50%; z-index: 20;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  pointer-events: none;
}
#reticle.active {
  transform: scale(2.2);
  background: rgba(255, 255, 255, 0.9);
  border-color: #ff5fae;
}
#tooltip {
  position: fixed; top: 50%; left: 50%; z-index: 20;
  transform: translate(-50%, 26px);
  padding: 6px 14px; border-radius: 99px;
  background: var(--glass-strong); border: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
  font-size: 13px; white-space: nowrap;
  opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
#tooltip.show { opacity: 1; }

/* ---------- Aide navigation (coin bas) ---------- */
#help {
  position: fixed; left: 18px; bottom: 16px; z-index: 20;
  font-size: 12px; opacity: 0.65; line-height: 1.6; pointer-events: none;
}
#help b { font-weight: 600; }

/* ---------- Modale de contenu ---------- */
#modal {
  position: fixed; inset: 0; z-index: 60;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(12, 7, 20, 0.45);
  backdrop-filter: blur(6px);
}
#modal.open { display: flex; }
/* @property permet d'ANIMER un angle CSS (sinon impossible) */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes borderspin { to { --angle: 360deg; } }

#modal .panel {
  position: relative;
  width: min(720px, 100%); max-height: 86vh;
  display: flex; flex-direction: column;
  border-radius: 30px 34px 26px 36px;           /* coins organiques */
  /* double couche : un voile lumineux par-dessus le verre -> effet glassy */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)),
    var(--glass);
  backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 70px rgba(70, 180, 255, 0.20);
  overflow: hidden;                              /* clippe l'anneau aux coins */
}
/* Anneau dégradé animé : on dessine un dégradé conique, puis un masque
   ne garde que le contour (2px) -> bordure colorée qui tourne. */
#modal .panel::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--angle),
    #ff5fae, #7b5cff, #2bd1ff, #00d6c2, #ffd23f, #ff5fae);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: borderspin 8s linear infinite;
}
#modal-content {
  padding: 34px 34px 28px; overflow: auto;       /* le contenu défile, pas l'anneau */
}
#modal h2 {
  margin: 0 0 14px; font-size: 26px; font-weight: 600;
  border-left: 4px solid var(--accent, #ff5fae);
  padding-left: 12px;
}
#modal .note { margin: 0 0 20px; line-height: 1.65; opacity: 0.9; font-size: 15px; }
#modal .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
#modal .gallery img,
#modal .gallery video,
#modal .gallery iframe {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: none; border-radius: 16px; background: rgba(255, 255, 255, 0.06);
}
#modal .soon {
  grid-column: 1 / -1; text-align: center; padding: 30px;
  opacity: 0.7; border: 1px dashed var(--stroke); border-radius: 18px;
}
#modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--stroke); background: var(--glass-strong);
  color: #fff; font-size: 18px; cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform 0.15s ease, background 0.15s ease;
}
#modal-close:hover { transform: rotate(90deg); background: rgba(255, 255, 255, 0.28); }

/* ---------- Header / Footer (typo cool, texte noir) ---------- */
#site-header, #site-footer {
  position: fixed; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 26px;
  font-family: "Syne", sans-serif;
  color: #000;                                   /* texte en noir */
  /* léger voile clair pour que le noir reste lisible sur la 3D */
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;                          /* on ne bloque pas la 3D... */
}
#site-footer {
  bottom: 0; top: auto; justify-content: center;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
}
#site-header { top: 0; justify-content: space-between; }
#site-header .brand {
  font-weight: 800; font-size: 22px; letter-spacing: 1px;
}
#site-header nav { display: flex; gap: 8px; }

#site-header button, #site-footer button {
  pointer-events: auto;                          /* ...mais les boutons restent cliquables */
  font-family: "Syne", sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: 0.3px;
  color: #000; background: transparent;
  border: 1.5px solid rgba(0, 0, 0, 0.7);
  border-radius: 99px; padding: 8px 18px; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
#site-header button:hover, #site-footer button:hover {
  background: #000; color: #fff; transform: translateY(-1px);
}

/* ---------- Bouton de bascule de mode ---------- */
#mode-btn {
  position: fixed; top: 70px; right: 26px; z-index: 30;
  font-family: "Syne", sans-serif; font-weight: 700; font-size: 13px;
  color: #fff; cursor: pointer;
  padding: 9px 16px; border-radius: 99px;
  background: var(--glass-strong); border: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
  transition: background 0.18s ease, transform 0.18s ease;
}
#mode-btn:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-1px); }

/* ---------- Aide pavé numérique (mode Orbite) ---------- */
#numpad-help {
  position: fixed; left: 18px; bottom: 16px; z-index: 20;
  max-width: 360px; padding: 14px 16px;
  border-radius: 18px 20px 16px 22px;
  background: var(--glass); border: 1px solid var(--stroke);
  backdrop-filter: blur(16px) saturate(1.2);
  font-size: 12px; line-height: 1.4;
}
#numpad-help > b { display: block; margin-bottom: 8px; font-size: 13px; }
#numpad-help .grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px;
}
#numpad-help .grid > span:last-child { grid-column: 1 / -1; }
#numpad-help .dim { opacity: 0.6; }
#numpad-help kbd {
  background: rgba(255, 255, 255, 0.18); border: 1px solid var(--stroke);
  border-radius: 5px; padding: 0 6px; font-size: 11px;
}

/* petite ligne d'intro complémentaire */
#intro .alt { margin-top: 10px; opacity: 0.75; font-size: 13px; }

/* =====================================================================
   NEWSLETTER — modale "Purple Show" (lilas clair, accents violets, verre)
   ===================================================================== */
#newsletter-modal {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(20, 10, 34, 0.45);
  backdrop-filter: blur(6px);
}
#newsletter-modal.open { display: flex; animation: nl-fade 0.25s ease; }
@keyframes nl-fade { from { opacity: 0; } to { opacity: 1; } }

.nl-panel {
  position: relative;
  width: min(440px, 100%);
  padding: 38px 34px 26px;
  text-align: center;
  color: #2a1a3e;                                  /* aubergine profond, lisible */
  border-radius: 30px 34px 26px 36px;              /* coins organiques */
  /* verre teinté lilas, du blanc au violet doux */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(243, 236, 255, 0.9) 55%, rgba(229, 217, 255, 0.86)),
    var(--glass-strong);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 30px 80px rgba(60, 30, 110, 0.4), 0 0 70px rgba(168, 85, 247, 0.22);
  animation: nl-pop 0.3s cubic-bezier(0.2, 1.2, 0.3, 1);
}
@keyframes nl-pop { from { transform: translateY(14px) scale(0.97); } to { transform: none; } }

.nl-panel h2 {
  margin: 0 0 8px; font-family: "Syne", sans-serif; font-weight: 800;
  font-size: 28px; letter-spacing: 0.4px;
  /* camaïeu de violets, raccord avec le wordmark du loader */
  background: linear-gradient(105deg, #6d28d9, #8b5cf6 42%, #a855f7 70%, #c084fc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nl-sub { margin: 0 auto 22px; max-width: 34ch; font-size: 14px; line-height: 1.6; opacity: 0.82; }

#nl-form { display: flex; flex-direction: column; gap: 12px; }
#nl-email {
  width: 100%; padding: 13px 16px; font-size: 15px;
  color: #2a1a3e;
  border: 1.5px solid rgba(124, 58, 237, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
#nl-email::placeholder { color: rgba(80, 60, 110, 0.45); }
#nl-email:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.22);
}

/* Champ piège anti-robot : invisible, hors flux, hors lecteur d'écran */
.nl-hp {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

/* Bouton "Subscribe" : dégradé violet profond -> lilas, coins organiques */
#nl-form button[type=submit] {
  font-family: "Syne", sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 0.3px; color: #fff; cursor: pointer;
  padding: 13px 18px; border: none;
  border-radius: 18px 22px 16px 24px;            /* coins organiques, raccord au panneau */
  background: linear-gradient(100deg, #7c3aed, #a855f7 55%, #c084fc);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.4);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
#nl-form button[type=submit]:hover:not(:disabled) {
  transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.5);
}
#nl-form button[type=submit]:disabled { opacity: 0.7; cursor: progress; }

/* Centre le widget ALTCHA et l'accorde à la palette lilas */
#nl-altcha {
  --altcha-color-base: rgba(255, 255, 255, 0.6);
  --altcha-color-border: rgba(124, 58, 237, 0.3);
  --altcha-color-text: #2a1a3e;
  --altcha-border-radius: 14px;
  --altcha-max-width: 100%;
  display: block;
}

#nl-status { margin: 4px 0 0; min-height: 18px; font-size: 13.5px; font-weight: 600; }
#nl-status.ok  { color: #7c3aed; }
#nl-status.err { color: #c4456b; }

.nl-fine { margin: 16px 0 0; font-size: 11.5px; opacity: 0.6; }

#nl-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(124, 58, 237, 0.28);
  background: rgba(255, 255, 255, 0.6);
  color: #2a1a3e; font-size: 16px; cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}
#nl-close:hover { transform: rotate(90deg); background: rgba(255, 255, 255, 0.9); }

/* =====================================================================
   RESPONSIVE — iPhone & petits écrans tactiles
   - On respecte le notch / la barre home via env(safe-area-inset-*)
   - Cibles tactiles ≥ 44px, paddings réduits, marque raccourcie
   - Aides clavier masquées (inutiles au doigt)
   ===================================================================== */
@media (max-width: 600px) {
  /* ---- Header : on garde une seule ligne grâce à la marque courte ---- */
  #site-header {
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
    gap: 8px;
  }
  #site-header .brand { font-size: 17px; letter-spacing: 0.5px; }
  .brand-rest { display: none; }                 /* « - The Purple Show » caché sur mobile */
  #site-header nav { gap: 6px; }

  #site-header button, #site-footer button {
    font-size: 12px; padding: 8px 13px;           /* hauteur tactile ~36px */
  }
  /* on coupe le :hover noir collant au tactile, on garde un retour au tap */
  #site-header button:active, #site-footer button:active {
    background: #000; color: #fff;
  }

  /* ---- Footer : les 2 boutons peuvent passer à la ligne + safe-area ---- */
  #site-footer {
    flex-wrap: wrap; gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }

  /* ---- Bouton de mode : sous le header, à droite, bien tappable ---- */
  #mode-btn {
    top: calc(60px + env(safe-area-inset-top)); right: 16px;
    font-size: 12px; padding: 9px 15px;
  }

  /* ---- Aides clavier inutiles sur tactile ---- */
  #help, #numpad-help { display: none !important; }

  /* ---- Modale de contenu : plus de respiration, moins de padding ---- */
  #modal { padding: 14px; }
  #modal .panel { max-height: 90vh; border-radius: 24px 26px 22px 28px; }
  #modal-content { padding: 26px 20px 22px; }
  #modal h2 { font-size: 21px; }
  #modal .note { font-size: 14px; }
  #modal .gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  #modal-close { top: 12px; right: 12px; width: 44px; height: 44px; font-size: 20px; }

  /* ---- Modale Newsletter ---- */
  #newsletter-modal { padding: 14px; }
  .nl-panel { padding: 30px 22px 22px; border-radius: 24px 26px 22px 28px; }
  .nl-panel h2 { font-size: 24px; }
  .nl-sub { font-size: 13.5px; }
  #nl-email { font-size: 16px; }                  /* ≥16px : empêche le zoom auto d'iOS au focus */
  #nl-close { width: 30px; height: 30px; font-size: 13px; }

  /* ---- Intro / carte d'accueil ---- */
  #intro { padding: 18px; }
  #intro .card { padding: 24px 22px; border-radius: 22px; }
}

/* Très petits iPhones (SE / mini) : on resserre encore un peu */
@media (max-width: 360px) {
  #site-header .brand { font-size: 15px; }
  #site-header button, #site-footer button { font-size: 11px; padding: 7px 11px; }
}