/* styles/theme/pinboard/platform-decor.css
 * ══════════════════════════════════════════════════════════════════
 * Décor "à quai" — ambiance immersive pour mode-config et lobby.
 * Éléments décoratifs inertes (pointer-events:none) qui s'empilent
 * derrière le contenu interactif, pour donner une impression de
 * profondeur et de présence physique : plafond voûté, néon, carrelage
 * mural plus réaliste, sol en perspective avec bande jaune de
 * sécurité, afficheur "prochain train" en haut à droite.
 *
 * Préfixe exclusif : .plt-*  (platform)
 * S'applique à toute vue qui porte la classe .pinboard-platform
 * (ajoutée via JS/HTML à #view-mode-config et #view-lobby).
 * ══════════════════════════════════════════════════════════════════ */

/* ─── Conteneur global ──────────────────────────────────────────── */
.plt-deck{
  position:absolute; inset:0;
  z-index:0;                 /* en dessous des enfants static du shell */
  pointer-events:none;
  overflow:hidden;
  user-select:none;
}
/* Garantir que head/body/sections sont au-dessus du décor — ces
 * éléments sont en flow normal mais on leur donne un stacking
 * explicite pour qu'ils passent devant le plt-deck (z:0, positioned).
 * On ciblé directement les conteneurs visibles des 2 vues qui
 * embarquent le décor (.plt-deck).
 * Note : .mc-topbar a déjà z:3 (absolute) dans mode-config.css. */
#view-mode-config .mc-head,
#view-mode-config .mc-body,
#view-mode-config .mc-section,
#view-lobby .lv-head,
#view-lobby .lv-body,
#view-lobby .lv-section,
#view-lobby .lv-foot,
#view-lobby .mc-topbar{
  position:relative;
  z-index:2;
}

/* ─── Trace d'humidité basse : dégradé sombre sur bas des murs ── */
.plt-damp{
  position:absolute; left:0; right:0; bottom:0;
  height:25vh;
  background:linear-gradient(0deg,
    rgba(0,0,0,.35) 0%, rgba(0,0,0,.18) 30%, transparent 70%);
  mix-blend-mode:multiply;
}
html[data-theme="light"] .plt-damp{
  background:linear-gradient(0deg,
    rgba(0,0,0,.14) 0%, rgba(0,0,0,.06) 30%, transparent 70%);
}

/* ─── Sol en perspective : bandeau bas, dalles grises 60×30 ────── */
.plt-floor{
  position:absolute; left:-8%; right:-8%; bottom:0;
  height:16vh; min-height:120px;
  /* perspective douce : tilt via transform + gradient atténué en haut */
  background:
    /* fading au raccord avec le mur */
    linear-gradient(0deg, transparent 0%, rgba(0,0,0,0) 85%, rgba(0,0,0,.35) 100%),
    /* dalles 60×30 grises */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.4) 0 1px,
      transparent 1px 60px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.3) 0 1px,
      transparent 1px 30px),
    linear-gradient(180deg, #5a5b5e 0%, #3a3b3e 100%);
  transform:perspective(520px) rotateX(42deg);
  transform-origin:50% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 4px 8px rgba(0,0,0,.35);
}
html[data-theme="light"] .plt-floor{
  background:
    linear-gradient(0deg, transparent 0%, rgba(0,0,0,0) 85%, rgba(0,0,0,.22) 100%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.28) 0 1px,
      transparent 1px 60px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.18) 0 1px,
      transparent 1px 30px),
    linear-gradient(180deg, #c9c6bd 0%, #a5a29a 100%);
}

/* ─── Bande jaune de sécurité + hachures (au-dessus du sol) ───── */
.plt-safety-edge{
  position:absolute; left:0; right:0;
  bottom:calc(16vh - 6px); height:14px;
  background:
    /* hachures noires diagonales type bord de quai RATP */
    repeating-linear-gradient(135deg,
      rgba(0,0,0,.6) 0 6px,
      transparent 6px 14px),
    linear-gradient(180deg, #ffd43a 0%, #f1b700 100%);
  box-shadow:
    0 -1px 0 rgba(0,0,0,.35),
    0 3px 6px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}
/* micro-texte répétée sur la bande, très discrète */
.plt-safety-edge::after{
  content:'ATTENTION À LA MARCHE · ATTENTION À LA MARCHE · ATTENTION À LA MARCHE · ATTENTION À LA MARCHE · ';
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  padding-left:20%;
  font-family:'Archivo Narrow','Archivo',sans-serif;
  font-weight:700; font-size:7px;
  letter-spacing:2px;
  color:rgba(0,0,0,.42);
  mix-blend-mode:multiply;
  overflow:hidden;
}

/* ─── Mur carrelé plus réaliste : surcouche de salissures ──────── */
.plt-wall-grime{
  position:absolute; inset:0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3  0 0 0 0 0.28  0 0 0 0 0.22  0 0 0 0.25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  mix-blend-mode:multiply;
  opacity:.42;
}
html[data-theme="light"] .plt-wall-grime{
  opacity:.22;
}

/* ─── Responsive : adapter les hauteurs ───────────────────────── */
@media (max-width: 720px){
  .plt-floor{ height:12vh; min-height:90px; }
  .plt-safety-edge{ bottom:calc(12vh - 6px); }
}

/* ─── Mur carrelé pour la vue lobby (mêmes tokens que mode-config,
 *     pour que les deux vues partagent la même ambiance). ─────── */
#view-lobby.pinboard-theme{
  --tile-w: 40px;
  --tile-h: 20px;
  --tile-white: #f8f6f0;
  --tile-blue: #003f7a;
  position:absolute; inset:0;
  /* Même règle que mode-config : la bande jaune = limite infranchissable,
   * le layout interne est dimensionné pour tenir en 100vh. */
  overflow:hidden;
  background-color:var(--tile-white);
  /* Imagerie du mur : recette « FAÏENCE » partagée, en fin de fichier. */
}
/* Marge basse sur les conteneurs de contenu, pour laisser respirer
 * le footer (bouton LANCER / hint / PRÊT) au-dessus du sol carrelé
 * et de la bande jaune (~16vh + 14px de bande). */
#view-mode-config.pinboard-theme .mc-shell,
#view-lobby.pinboard-theme .lobby-v2{
  padding-bottom:calc(16vh + 48px) !important;
}
/* Mobile : le quai rétrécit (sol 9vh au lieu de 16vh) pour rendre
 * ~80px de hauteur utile aux posters et au bandeau de service.
 * !important : doit suivre la règle de base ci-dessus qui l'est. */
@media (max-width: 720px){
  .plt-floor{ height:9vh; min-height:64px; }
  .plt-safety-edge{ bottom:calc(9vh - 6px); height:11px; }
  #view-mode-config.pinboard-theme .mc-shell,
  #view-lobby.pinboard-theme .lobby-v2{
    padding-bottom:calc(9vh + 26px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* Écrans courts : le mode-config scrolle (cf. mode-config.css) —
 * un sol "fixe en bas" n'a plus de sens dans un conteneur scrollé,
 * le mur carrelé suffit. */
@media (max-width: 720px) and (max-height: 640px){
  #view-mode-config.pinboard-theme .plt-floor,
  #view-mode-config.pinboard-theme .plt-damp,
  #view-mode-config.pinboard-theme .plt-safety-edge{ display:none; }
}
html[data-theme="dark"] #view-lobby.pinboard-theme{
  --tile-white: #1f2228;
}

/* ─── « FAÏENCE » : mur carrelé, partagé mode-config + lobby ──────
 * Le carrelage lui-même est un SVG GÉNÉRÉ (assets/tile-wall-*.svg,
 * via `node tools/gen-tile-wall.mjs`) : des carreaux BISEAUTÉS
 * 64×32 posés EN QUINCONCE, tous différents — teinte, éclat des
 * facettes du chanfrein, reflet de face, micro-décalage de pose —
 * bloc répété en 512×320, période assez large pour paraître
 * organique (couture invisible, demi-carreaux raccordés).
 * Par-dessus, l'ÉCLAIRAGE NATUREL : UNE source décentrée en haut,
 * et le mur qui plonge dans l'ombre vers le bas et les bords (pas
 * de nappes symétriques « studio »).
 * attachment:fixed : grille alignée au pixel entre vues.
 * Couches (haut → bas) :
 *   1  source principale (large, décentrée haut-gauche)
 *   2  tombée d'ombre verticale (le bas du mur s'éteint)
 *   3  vignette enveloppante (bords et coins)
 *   4  faïence générée (120 carreaux biseautés, joints inclus)     */
#view-mode-config.pinboard-theme,
#view-lobby.pinboard-theme{
  background-image:
    radial-gradient(ellipse 95% 80% at 42% 14%,
      rgba(255,255,255,.42), rgba(255,255,255,.07) 55%, transparent 76%),
    linear-gradient(180deg,
      rgba(255,255,255,.05) 0%, transparent 26%,
      transparent 50%, rgba(30,24,15,.14) 74%, rgba(30,24,15,.36) 100%),
    radial-gradient(ellipse 125% 105% at 44% 26%,
      transparent 50%, rgba(26,21,13,.22) 100%),
    url('assets/tile-wall-light.svg');
  background-size:auto, auto, auto, 512px 320px;
  background-repeat:no-repeat, no-repeat, no-repeat, repeat;
  background-attachment:fixed, fixed, fixed, fixed;
}
/* Dark : même schéma lumineux, tamisé — source faible, ombres
 * profondes, mur sombre généré avec la même graine. */
html[data-theme="dark"] #view-mode-config.pinboard-theme,
html[data-theme="dark"] #view-lobby.pinboard-theme{
  background-image:
    radial-gradient(ellipse 95% 80% at 42% 14%,
      rgba(255,255,255,.12), rgba(255,255,255,.02) 55%, transparent 76%),
    linear-gradient(180deg,
      transparent 36%, rgba(0,0,0,.3) 76%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse 125% 105% at 44% 26%,
      transparent 48%, rgba(0,0,0,.42) 100%),
    url('assets/tile-wall-dark.svg');
}