/* ==========================================================
MOBILE
========================================================== */

/* Le bloc texte mobile existe dans le HTML mais reste caché sur desktop */
.mtext{ display: none; }

/* --- Accueil : tous les projets ensemble, petits, SANS scroll --- */
html.is-mobile .desktop{
  overflow: hidden !important;
  overscroll-behavior: none;
}
html.is-mobile .icon{
  touch-action: none;               /* permet de déplacer l'icône au doigt */
  -webkit-user-select: none;
  user-select: none;
  padding: 3px 2px;
  gap: 4px;
}
html.is-mobile .icon.is-dragging{ z-index: 9999; opacity: .85; }
html.is-mobile .icon .thumb{
  width: var(--ts, 52px);
  height: var(--ts, 52px);
}
html.is-mobile .icon[data-kind="file"] .label{
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: .02em;
}

/* --- Fenêtre projet : la hauteur s'adapte au contenu (texte + médias) ---
   Courte s'il y a peu de médias, plafonnée à l'écran sinon (et là on scrolle dedans). */
html.is-mobile .window.projectWin.show{
  display: flex !important;
  flex-direction: column;
  height: auto !important;
  max-height: calc(100vh - var(--menuH) - var(--safeTop) - var(--safeBot) - 30px) !important;
  max-height: calc(100dvh - var(--menuH) - var(--safeTop) - var(--safeBot) - 30px) !important;
}
html.is-mobile .window.projectWin .titlebar{ flex: 0 0 auto; }

html.is-mobile .projectWin .win-body{
  position: static !important;
  flex: 0 1 auto;
  min-height: 0;
  margin: 0 8px 8px;
  height: auto !important;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  container-type: normal !important;     /* sinon la hauteur ne peut pas suivre le contenu */

  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: none;
}
html.is-mobile .projectWin .win-body::-webkit-scrollbar{ display: none; }

/* --- Texte : plus de bulle, un bloc arrondi au-dessus des médias --- */
html.is-mobile .projectWin .bzone,
html.is-mobile .projectWin .pshield,
html.is-mobile .projectWin .pdots{ display: none !important; }

html.is-mobile .projectWin .mtext{
  display: block;
  flex: 0 0 auto;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: rgba(246,246,246,.97);
}
html.is-mobile .projectWin .mtext .b-meta{
  font-size: 11.5px;
  line-height: 1.25;
  color: rgba(0,0,0,.45);
  margin-bottom: 12px;
}
html.is-mobile .projectWin .mtext .b-desc{
  font-size: 14.5px;
  line-height: 1.32;
  color: #000;
}
html.is-mobile .projectWin .mtext .desc-links{ margin-top: 12px; }

/* --- Médias : empilés, en entier, sans recadrage --- */
html.is-mobile .projectWin .pmedia{
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
  overflow: visible !important;
  container-type: normal !important;
  scroll-snap-type: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html.is-mobile .projectWin .pmedia .slide{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  scroll-snap-align: none;
  background: #000;
}
html.is-mobile .projectWin .pmedia .slide.light{ background: #fff; }

html.is-mobile .projectWin .pmedia .slide img{
  position: static !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* images « fill » (celles sans bords noirs sur desktop) : le cadre est rempli, recadrage au centre */
html.is-mobile .projectWin .pmedia .slide.fill:has(> img){
  position: relative !important;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
html.is-mobile .projectWin .pmedia .slide.fill > img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* vidéos : au bon format (--ar est mesuré par le lecteur Vimeo) */
html.is-mobile .projectWin .pmedia .video{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--ar, 1.7778) !important;
}
html.is-mobile .projectWin .pmedia .video.vimeo iframe{
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}
html.is-mobile .projectWin .pmedia .yt-facade{
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
}
html.is-mobile .projectWin .pmedia video.v{
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
}

/* barre de contrôle vidéo plus compacte sur petit écran */
html.is-mobile .projectWin .vbar{ width: calc(100% - 20px); bottom: 8px; gap: 5px; padding: 0 8px; }
html.is-mobile .projectWin .vvol{ display: none; }

/* le slide DJ garde une hauteur fixe (c'est un jeu, pas une vidéo) */
html.is-mobile .projectWin .pmedia .slide.dj-slide{
  height: min(70dvh, 520px) !important;
  display: block !important;
}

/* DJ CD : fond blanc (et non noir) */
html.is-mobile .projectWin .pmedia .slide.dj-slide{ background: #fff !important; }

/* Dock : l'icône « reset » (triangle) était trop zoomée dans son carré → on la montre en entier, avec un peu d'air */
html.is-mobile .dock-item[data-action="reset"] .dock-img{
  box-sizing: border-box;
  padding: 7px;
  object-fit: contain !important;
}