/* ==========================================================
   EC@RT — HOME REMASTER
   About central + champ vivant de noms / sons
   ========================================================== */

body.home {
  background: #050505;
  color: #f4f0e2;
}

body.home .page {
  background: #050505;
}

/* On neutralise les anciennes traces de map si elles existent encore */
body.home .map-wrap,
body.home .map-image,
body.home .plan-overlay,
body.home .locator,
body.home .zone-glow,
body.home .plan-caption {
  display: none !important;
}

/* ===============================
   LAYOUT CENTRAL
   =============================== */

.about-viewer {
  position: relative;
  /* [5] min-height: 100dvh pour tous les devices et formats */
  min-height: 100dvh;
  width: 100%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.035), transparent 34%),
    linear-gradient(180deg, #050505 0%, #020202 100%);
  color: #f4f0e2;
  /* [5] Centrage flex conservé sur tous les formats */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(34px, 6vw, 90px);
  overflow: hidden;
  isolation: isolate;
}

/* Canvas vivant */
#homeArchiveCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.78;
  pointer-events: auto;
}

/* Voile pour lisibilité */
.about-viewer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.58) 36%,
      rgba(0, 0, 0, 0.22) 67%,
      rgba(0, 0, 0, 0.42) 100%
    );
}

.about-viewer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 78%);
}

/* ===============================
   BLOC ABOUT
   =============================== */

.about-home {
  position: relative;
  z-index: 2;
  width: min(640px, 100%);
  margin: auto;
  padding: clamp(22px, 5vw, 52px);
  /* [5] Toujours centré */
  text-align: center;
  pointer-events: none;
  background:
    radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0.78),
      rgba(0, 0, 0, 0.48) 58%,
      rgba(0, 0, 0, 0.02) 100%
    );
  backdrop-filter: blur(2px);
}

.about-kicker {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.68;
  margin-bottom: 22px;
}

.about-home h1 {
  font-size: clamp(1.7rem, 4vw, 4.35rem);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.052em;
  margin: 0 0 28px;
  text-transform: none;
}

.about-home h2 {
  font-size: clamp(1rem, 1.55vw, 1.45rem);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0.015em;
  margin: 0 0 46px;
  opacity: 0.86;
}

.about-text {
  max-width: 500px;
  margin: 0 auto;
  /* [5] Centré mais lisible — texte justifié */
  text-align: left;
  font-size: clamp(0.88rem, 1.05vw, 1.02rem);
  line-height: 1.68;
  letter-spacing: 0.004em;
  color: rgba(244, 240, 226, 0.82);
}

.about-text p {
  margin: 0 0 1.35em;
}

.about-text p:last-child {
  margin-bottom: 0;
}

.about-text strong,
.about-text em {
  color: rgba(255,255,255,0.96);
}

.about-text strong {
  font-weight: 500;
}
.about-signature{
  text-align: center;
  width: 100%;
  margin-top: 24px;

  font-size: 0.9rem;
  letter-spacing: 0.08em;

  color: rgba(255,255,255,0.82);
}
/* ===============================
   SCROLL ZONE TEXTE
   [7] Scroll fonctionnel sur tous devices, sans barre visible
   =============================== */

.about-scroll {
  position: relative;
  /* [7] Max-height cohérent sur tous les formats */
  max-height: clamp(180px, 36vh, 340px);
  overflow-y: auto;
  pointer-events: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* [7] Pas de barre de scroll visible */
  scrollbar-width: none;
  padding-right: 0;
  margin-top: 4px;
}

/* [7] Masquer la scrollbar webkit sur tous les devices */
.about-scroll::-webkit-scrollbar { display: none; }

/* Fondu bas pour indiquer le scroll */
.about-scroll-outer {
  position: relative;
  /* [6] Pointer-events auto pour que le scroll fonctionne,
         mais le document-level click handler gère la navigation */
  pointer-events: auto;
}
.about-scroll-outer::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  pointer-events: none;
  z-index: 1;
}

/* ===============================
   BOUTON NOISE — bas gauche fixe
   [3][4] Visible sur tous les devices et formats
   =============================== */

/* ==========================================================
   HOME — NOISE BUTTON
   aligné avec 491 + Zone 13
   ========================================================== */

#homeNoiseToggle {
  position: fixed;

  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));

  z-index: 100430;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;

  padding: 12px 17px;

  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;

  color: rgb(244, 240, 226);

  border: 1px solid rgba(244, 240, 226, 0);

  background: rgb(160, 0, 0);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  cursor: pointer;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;

  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.14s ease;
}

#homeNoiseToggle:hover {
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.44);
}

#homeNoiseToggle:active {
  transform: scale(0.96);
}

#homeNoiseToggle.is-on {
  color: #000000;
  border-color: rgb(255, 255, 255);
  background: rgb(255, 255, 255);
}

/* Statut discret — au-dessus du bouton NOISE */
.home-noise-status {
  position: fixed;
  left:   calc(18px + env(safe-area-inset-left,   0px));
  bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  z-index: 100070;
  font-family: "Courier New", Courier, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: rgba(244,240,226,0.26);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* ===============================
   ADAPTATIONS — TÉLÉPHONE PORTRAIT
   [5] Centrage conservé, scroll activé
   =============================== */

@media (max-width: 760px) {

  .about-viewer {
    /* [5] Garde align-items/justify-content: center du style de base */
    /* Padding : espace pour les boutons haut (eye/light ~70px)
       et bas (cluster ~70px + noise btn) */
    padding:
      clamp(80px, 13vh, 110px)
      18px
      clamp(100px, 16vh, 140px)
      18px;
    /* [7] Pas de scroll sur le viewer lui-même */
    overflow: hidden;
  }

  .about-home {
    width: 100%;
    padding: clamp(16px, 4vw, 28px);
    /* [5] Centrage conservé — PAS de text-align: left ici */
    text-align: center;
    background:
      radial-gradient(
        circle at center,
        rgba(0,0,0,0.74),
        rgba(0,0,0,0.40) 65%,
        rgba(0,0,0,0) 100%
      );
    backdrop-filter: blur(1.5px);
  }

  .about-kicker {
    font-size: 0.66rem;
    margin-bottom: 16px;
  }

  .about-home h1 {
    font-size: clamp(1.6rem, 8vw, 2.8rem);
    line-height: 0.96;
    margin-bottom: 20px;
  }

  .about-home h2 {
    font-size: clamp(0.88rem, 3.5vw, 1.05rem);
    margin-bottom: 22px;
  }

  .about-text {
    font-size: 0.90rem;
    line-height: 1.62;
    text-align: left;
  }

  /* [7] Scroll interne activé sur mobile (PAS désactivé comme avant) */
  .about-scroll {
    max-height: clamp(140px, 28vh, 260px);
    overflow-y: auto;
  }

  /* Statut masqué sur mobile (trop petit et encombrant) */
  .home-noise-status {
    display: none;
  }
}

/* Très petits écrans */
@media (max-width: 420px) {
  .about-viewer {
    padding-left:  14px;
    padding-right: 14px;
  }
  .about-home h1 {
    font-size: clamp(1.4rem, 7vw, 2.2rem);
  }
  .about-scroll {
    max-height: clamp(120px, 24vh, 220px);
  }
}

/* ===============================
   TÉLÉPHONE PAYSAGE
   [5] Compact, centré, scroll réduit
   =============================== */

@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {

  .about-viewer {
    /* Espace pour la colonne de boutons à droite (pannel-ui.css) */
    padding:
      clamp(20px, 4vh, 40px)
      calc(clamp(40px, 11vmin, 52px) + 28px)  /* droite = taille bouton + marge */
      clamp(20px, 4vh, 40px)
      18px;
    overflow: hidden;
  }

  .about-home {
    width: min(92vw, 480px);
    padding: 14px 18px;
  }

  .about-home h1 {
    font-size: clamp(1.1rem, 4.5vw, 1.8rem);
    margin-bottom: 12px;
  }

  .about-home h2 {
    font-size: clamp(0.78rem, 2.5vw, 0.95rem);
    margin-bottom: 16px;
  }

  .about-kicker {
    font-size: 0.58rem;
    margin-bottom: 10px;
  }

  .about-text {
    font-size: clamp(0.78rem, 2vw, 0.88rem);
    line-height: 1.52;
  }

  /* [7] Scroll très compact en paysage */
  .about-scroll {
    max-height: clamp(80px, 22vh, 160px);
  }

  /* Masquer le statut en paysage aussi */
  .home-noise-status {
    display: none;
  }
}

/* ===============================
   TABLETTE — écarter le texte du cluster UI
   =============================== */

@media (pointer: coarse) and (min-width: 481px) and (orientation: portrait) {
  .about-viewer {
    /* Espace droite pour le cluster de boutons */
    padding-right: calc(22px + 80px);
  }
  .about-scroll {
    max-height: clamp(200px, 34vh, 360px);
  }
}

/* Préférence réduction animations */
@media (prefers-reduced-motion: reduce) {
  #homeArchiveCanvas {
    opacity: 0.26;
  }
}

/* ===============================
   FORCE HOME NOISE VISIBLE
   Canvas toujours rendu, z-index cohérent
   =============================== */

body.home,
body.home html {
  background: #050505;
}

body.home .page {
  min-height: 100dvh;
  background: #050505;
}

body.home .about-viewer {
  position: relative !important;
  min-height: 100dvh !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #050505 !important;
}

/* [1] Canvas fixe plein-écran — visible sur mobile/tablette/desktop */
body.home #homeArchiveCanvas {
  display:        block !important;
  position:       fixed !important;
  inset:          0 !important;
  width:          100vw !important;
  height:         100vh !important;
  z-index:        5 !important;
  opacity:        1 !important;
  /* [6] pointer-events: auto → le canvas reçoit les events directs.
         Le document-level handler dans home-archive-noise.js
         capture AUSSI les clicks sur .about-home pour la navigation. */
  pointer-events: auto !important;
  background:     transparent !important;
}

body.home .about-viewer::before,
body.home .about-viewer::after {
  pointer-events: none !important;
  z-index: 6 !important;
}

body.home .about-home {
  position: relative !important;
  z-index:  8 !important;
}

/* Sidebar et boutons UI au-dessus de tout */
body.home .sidebar,
body.home #homeNoiseToggle,
body.home #soundToggle,
body.home #infoToggle,
body.home .mobile-map-toggle {
  z-index: 100070 !important;
}
/* ==========================================================
   HOME — FIX ROTATION / MOBILE CENTER / TOUCH
   ========================================================== */

html,
body,
body.home,
body.home .page,
body.home .about-viewer {
  width: 100vw !important;
  min-height: 100dvh !important;
  height: var(--app-height, 100dvh) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

/* Empêche le canvas de provoquer des zooms/gestes bizarres */
body.home #homeArchiveCanvas {
  touch-action: none !important;
}

/* Mais le texte scrollable reste scrollable */
body.home .about-scroll,
body.home .about-scroll * {
  touch-action: pan-y !important;
}

/* UI téléphone : texte centré, pas collé aux marges */
@media (pointer: coarse) and (max-width: 767px) and (orientation: portrait) {
  body.home .about-viewer {
    padding-left: max(26px, env(safe-area-inset-left)) !important;
    padding-right: max(26px, env(safe-area-inset-right)) !important;
  }

  body.home .about-home {
    width: min(92vw, 520px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.home .about-text {
    text-align: left !important;
    max-width: 100% !important;
  }
}

/* Téléphone paysage : centre aussi, avec espace pour boutons */
@media (pointer: coarse) and (max-width: 767px) and (orientation: landscape) {
  body.home .about-viewer {
    padding-left: 42px !important;
    padding-right: 84px !important;
  }

  body.home .about-home {
    width: min(76vw, 480px) !important;
    margin: auto !important;
  }
}

/* Tablette portrait */
@media (pointer: coarse) and (min-width: 768px) and (orientation: portrait) {
  body.home .about-viewer {
    padding-left: 72px !important;
    padding-right: 72px !important;
  }

  body.home .about-home {
    width: min(680px, 88vw) !important;
  }
}

/* Tablette paysage */
@media (pointer: coarse) and (min-width: 768px) and (orientation: landscape) {
  body.home .about-viewer {
    padding-left: 88px !important;
    padding-right: 110px !important;
  }

  body.home .about-home {
    width: min(680px, 74vw) !important;
  }
}

/* ----------------------------------------------------------
   DESKTOP
   bloque les interactions derrière le bloc texte
   ---------------------------------------------------------- */

@media (pointer: fine) {

  body.home .about-home {
    position: relative !important;
    pointer-events: auto !important;
  }

  body.home .about-scroll,
  body.home .about-scroll-outer,
  body.home .about-text {
    pointer-events: auto !important;
  }

  body.home .about-home::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;

    pointer-events: auto !important;
  }
}