/* ================================================================
   SUBLIME CHAOS — VERSION MOBILE DÉDIÉE
   Chargée uniquement par mobil.html.
   Objectif : lisibilité, médias adaptés, navigation tactile et
   réduction de la charge GPU/réseau sur les petits écrans.
================================================================ */

:root {
  --mobile-gutter: clamp(.9rem, 4vw, 1.25rem);
  --mobile-header-height: 72px;
  --mobile-radius: 24px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mobile-header-height) + env(safe-area-inset-top));
  overflow-x: clip;
}

body.mobile-site {
  width: 100%;
  min-width: 0;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y pinch-zoom;
}

/* Fonds compressés dédiés au téléphone. */
.mobile-site .method-scroll-section {
  background-image: url('../images/bgspace001-mobile.jpg') !important;
}

.mobile-site .vox-bg {
  background-image: url('../images/vox-chroma-bg-mobile.jpg') !important;
}

.mobile-site .about-scroll-section {
  background-image: url('../images/about-bg-nouveau-mobile.jpg') !important;
}

.mobile-site .site-container {
  width: 100%;
  max-width: none;
  padding-inline: var(--mobile-gutter);
  margin-inline: auto;
}

.mobile-site .screen {
  min-height: 100dvh;
  padding-block: clamp(4.75rem, 13vw, 6.2rem);
  overflow: clip;
}

.mobile-site .section-title {
  max-width: 100%;
  font-size: clamp(2rem, 10.4vw, 3.45rem);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.mobile-site .section-lead {
  max-width: 38rem;
  font-size: clamp(1rem, 4.4vw, 1.18rem);
  line-height: 1.55;
}

.mobile-site p,
.mobile-site li,
.mobile-site a,
.mobile-site button,
.mobile-site input,
.mobile-site select,
.mobile-site textarea {
  font-size: max(16px, 1rem);
}

.mobile-site .btn-sc,
.mobile-site button,
.mobile-site .nav-link,
.mobile-site .profile-selector__tab,
.mobile-site .filter-pill {
  min-height: 46px;
}

/* En-tête : safe area iPhone, logo compact et menu tactile. */
.mobile-site .site-header {
  padding-top: env(safe-area-inset-top);
}

.mobile-site .navbar {
  min-height: var(--mobile-header-height);
  padding: .55rem var(--mobile-gutter);
}

.mobile-site .brand-mark {
  height: 44px !important;
  width: auto;
}

.mobile-site .brand-title {
  width: min(42vw, 170px) !important;
  height: auto;
}

.mobile-site .navbar-toggler {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.mobile-site .offcanvas {
  width: min(88vw, 390px) !important;
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-site .offcanvas-body nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-block: .65rem;
}

/* Premier écran : vraie hauteur utile et vidéo mobile légère. */
.mobile-site .hero-video-only,
.mobile-site .hero-full-video {
  height: 100dvh;
  min-height: 100dvh;
}

.mobile-site .hero-full-video {
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Animations plus courtes sur téléphone, sans grands débordements GPU. */
.mobile-site .scroll-in-animation {
  --animation-duration: 720ms !important;
  --animation-distance: 54px !important;
}

.mobile-site .scroll-in-animation[data-animation="slideInLeft"],
.mobile-site .scroll-in-animation[data-animation="slideInRight"] {
  --animation-duration: 880ms !important;
}

/* Méthode : titre, vidéo verticale, puis texte, sans superposition. */
.mobile-site .method-scroll-section {
  --method-track-height: 205svh !important;
}

.mobile-site .method-scroll-sticky {
  height: 100dvh;
  min-height: 100dvh;
}

.mobile-site .method-scroll-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(170px, 35dvh) auto;
  gap: .75rem;
  height: 100%;
  padding-top: calc(var(--mobile-header-height) + env(safe-area-inset-top) + .5rem);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  align-content: center;
}

.mobile-site .method-copy-left,
.mobile-site .method-copy-right,
.mobile-site .method-scroll-video-layer {
  grid-column: 1 !important;
  width: 100%;
  max-width: 100%;
  transform: none !important;
}

.mobile-site .method-copy-left {
  grid-row: 1;
  align-self: end;
}

.mobile-site .method-scroll-video-layer {
  grid-row: 2;
  justify-self: center !important;
  align-self: center !important;
  width: min(42vw, 175px) !important;
  height: min(34dvh, 300px) !important;
  min-height: 0 !important;
}

.mobile-site .method-scroll-video {
  max-height: 34dvh;
  object-position: center;
}

.mobile-site .method-copy-right {
  grid-row: 3;
  align-self: start;
}

.mobile-site .method-copy-right .body-copy,
.mobile-site .method-copy-right .signature-quote {
  margin-top: .45rem;
}

.mobile-site .method-steps-zone {
  padding-block: 2.4rem 4.5rem;
}

.mobile-site .method-flow {
  grid-template-columns: 1fr;
  gap: .65rem;
}

.mobile-site .method-flow li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .8rem;
  min-height: 0;
  padding: .85rem 0;
  text-align: left;
}

/* Sélecteur de profils : onglets horizontaux et panneau vertical. */
.mobile-site .profile-selector {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.mobile-site .profile-selector__nav {
  display: flex;
  gap: .65rem;
  width: calc(100% + var(--mobile-gutter));
  margin-right: calc(0px - var(--mobile-gutter));
  padding: .2rem var(--mobile-gutter) .75rem 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.mobile-site .profile-selector__nav::-webkit-scrollbar { display: none; }

.mobile-site .profile-selector__tab {
  flex: 0 0 min(78vw, 310px);
  scroll-snap-align: start;
  border-radius: 22px;
  padding: .85rem 1rem;
}

.mobile-site .profile-selector__content,
.mobile-site .profile-panel {
  min-width: 0;
  width: 100%;
}

.mobile-site .profile-panel {
  min-height: 70dvh;
  padding: clamp(1.2rem, 5vw, 1.7rem);
  border-radius: 28px;
  background-position: center center;
}

.mobile-site .profile-panel__grid {
  grid-template-columns: 1fr;
  gap: .9rem;
}

.mobile-site .profile-panel__actions {
  display: grid;
  grid-template-columns: 1fr;
}

/* Services : vidéo pleine hauteur + cartes compactes 2 colonnes. */
.mobile-site .services-scroll-section {
  --services-track-height: 285svh !important;
}

.mobile-site .services-scroll-sticky,
.mobile-site .services-scroll-video {
  height: 100dvh;
  min-height: 100dvh;
}

.mobile-site .services-scroll-video {
  object-position: var(--services-video-position-mobile, center center) !important;
}

.mobile-site .services-scroll-content {
  height: 100%;
  padding-top: calc(var(--mobile-header-height) + env(safe-area-inset-top) + .3rem);
  padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .8rem;
}

.mobile-site .services-scroll-heading {
  margin-bottom: .2rem;
}

.mobile-site .services-scroll-heading .section-title {
  font-size: clamp(2rem, 9.5vw, 3rem);
}

.mobile-site .service-list-on-video {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.mobile-site .service-pill {
  min-width: 0;
  min-height: 104px;
  padding: .72rem;
  border-radius: 20px;
  align-items: flex-start;
}

.mobile-site .service-pill > span {
  font-size: .72rem;
}

.mobile-site .service-pill h3 {
  font-size: clamp(.83rem, 3.5vw, 1rem);
  line-height: 1.12;
}

.mobile-site .service-pill p {
  display: none;
}

.mobile-site .service-pill a {
  min-width: 34px;
  min-height: 34px;
}

/* Studios : vidéo plein écran, 3 cartes lisibles en bas. */
.mobile-site .studio-scroll-section {
  --studio-track-height: 220svh !important;
}

.mobile-site .studio-scroll-sticky,
.mobile-site .studio-scroll-video {
  height: 100dvh;
  min-height: 100dvh;
}

.mobile-site .studio-scroll-content {
  height: 100%;
  padding-top: calc(var(--mobile-header-height) + env(safe-area-inset-top) + .5rem);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mobile-site .studio-offers-on-video {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}

.mobile-site .studio-offers-on-video article {
  min-height: 0;
  padding: .7rem .85rem;
  border-radius: 19px;
}

.mobile-site .studio-offers-on-video article p {
  margin-bottom: 0;
  font-size: .86rem;
}

/* Vox et événements : cadrage adapté au portrait. */
.mobile-site .vox-section,
.mobile-site .events-section {
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
}

.mobile-site .vox-bg {
  background-position: 72% center !important;
}

.mobile-site .events-bg {
  background-position: 46% center !important;
}

.mobile-site .vox-copy,
.mobile-site .event-copy {
  width: 100%;
  padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
}

.mobile-site .soft-list {
  display: grid;
  gap: .45rem;
}

/* Galerie : écran utile, gestes tactiles, miniatures horizontales. */
.mobile-site .gallery-section,
.mobile-site .realisation-carousel,
.mobile-site .realisation-stage {
  height: 100dvh;
  min-height: 100dvh;
}

.mobile-site .realisation-carousel {
  touch-action: pan-y pinch-zoom;
}

.mobile-site .realisation-slide img {
  object-fit: cover !important;
}

.mobile-site .realisation-header {
  top: calc(var(--mobile-header-height) + env(safe-area-inset-top));
  left: var(--mobile-gutter);
  right: var(--mobile-gutter);
}

.mobile-site .realisation-caption {
  left: var(--mobile-gutter);
  right: var(--mobile-gutter);
  bottom: calc(8.4rem + env(safe-area-inset-bottom));
}

.mobile-site .realisation-controls {
  left: var(--mobile-gutter);
  right: var(--mobile-gutter);
  bottom: calc(5.1rem + env(safe-area-inset-bottom));
}

.mobile-site .realisation-thumbnails {
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  padding: .55rem var(--mobile-gutter) .75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.mobile-site .realisation-thumbnails::-webkit-scrollbar { display: none; }

.mobile-site .realisation-thumbnail {
  flex: 0 0 74px;
  width: 74px;
  height: 48px;
  scroll-snap-align: center;
}

/* À propos : vidéo et valeurs en grille 2x2. */
.mobile-site .about-scroll-section {
  --about-track-height: 225svh !important;
}

.mobile-site .about-scroll-sticky,
.mobile-site .about-scroll-video {
  height: 100dvh;
  min-height: 100dvh;
}

.mobile-site .about-scroll-content {
  height: 100%;
  padding-top: calc(var(--mobile-header-height) + env(safe-area-inset-top) + .5rem);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
}

.mobile-site .about-cloud-on-video {
  width: 100%;
  padding: 0;
}

.mobile-site .values-flow-on-video {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}

.mobile-site .values-flow-on-video article {
  min-height: 108px;
  padding: .75rem;
  border-radius: 20px;
}

.mobile-site .values-flow-on-video article p {
  display: none;
}

/* Contact et footer. */
.mobile-site .contact-grid,
.mobile-site .footer-grid {
  grid-template-columns: 1fr;
}

.mobile-site .contact-intro,
.mobile-site .contact-form {
  padding: 1.15rem;
  border-radius: 25px;
}

.mobile-site .form-control,
.mobile-site .form-select {
  min-height: 50px;
}

.mobile-site textarea.form-control {
  min-height: 150px;
}

.mobile-site .site-footer {
  padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
}

.mobile-site .footer-bottom {
  align-items: flex-start;
  gap: .65rem;
}

.mobile-site .desktop-version-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: .4rem;
}

/* Téléphones très étroits. */
@media (max-width: 390px) {
  .mobile-site .service-list-on-video {
    gap: .42rem;
  }

  .mobile-site .service-pill {
    min-height: 94px;
    padding: .58rem;
  }

  .mobile-site .method-scroll-video-layer {
    width: min(38vw, 145px) !important;
  }

  .mobile-site .section-title {
    font-size: clamp(1.9rem, 10vw, 2.85rem);
  }
}

/* Paysage mobile : ne pas étirer les sections et réduire la typographie. */
@media (max-height: 520px) and (orientation: landscape) {
  .mobile-site .section-title { font-size: clamp(1.7rem, 6vw, 2.5rem); }
  .mobile-site .section-lead { font-size: .92rem; }
  .mobile-site .service-pill { min-height: 76px; }
  .mobile-site .method-scroll-video-layer { height: 42dvh !important; }
  .mobile-site .realisation-caption { bottom: 5.3rem; }
  .mobile-site .realisation-thumbnails { display: none; }
}

/* Économie de données / mouvement réduit : priorité au poster fixe. */
.mobile-site.is-data-saver [data-scroll-video] {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-site [data-scroll-video] {
    animation: none !important;
  }
}