/* ============================================================
   MG Massage — Mobile v2 (prototype isolé)
   ------------------------------------------------------------
   Toutes les règles sont gatées par :
     1. body.has-mobile-v2          (flag activé par mobile-v2.js)
     2. @media (max-width: 900px)   (jamais sur desktop)
   Le desktop est physiquement protégé : les règles ne peuvent
   pas s'appliquer sans la combinaison des deux.
   ============================================================ */

@media (max-width: 900px) {

  /* Scroll-snap doux (proximity, pas mandatory) sur le body */
  body.has-mobile-v2 {
    scroll-snap-type: y proximity;
    scroll-padding-top: 0;
  }

  /* Snap-align discret (proximity) — pas de forçage 100vh sur les sections */
  body.has-mobile-v2 #accueil,
  body.has-mobile-v2 #apropos,
  body.has-mobile-v2 #services,
  body.has-mobile-v2 #zones {
    scroll-snap-align: start;
  }

  /* Hero : 85vh (laisse voir un teaser de la section suivante) */
  body.has-mobile-v2 #accueil {
    min-height: 85vh;
    min-height: 85dvh;
    display: flex;
    align-items: center;
  }
  body.has-mobile-v2 #accueil .hero-inner {
    padding: 4vh 1.5rem 8vh;
  }
  body.has-mobile-v2 #accueil .hero-title {
    font-size: clamp(2rem, 7vw, 2.6rem);
    line-height: 1.15;
  }
  body.has-mobile-v2 #accueil .scroll-indicator {
    display: none; /* on a notre propre indicateur */
  }

  /* À propos : photo compacte, texte mis en avant */
  body.has-mobile-v2 #apropos {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  body.has-mobile-v2 #apropos .grid-2 {
    gap: 1.5rem;
  }
  body.has-mobile-v2 #apropos .about-visual {
    max-height: 28vh;
    overflow: hidden;
    border-radius: 12px;
  }
  body.has-mobile-v2 #apropos .about-photo,
  body.has-mobile-v2 #apropos .about-photo-2 {
    background-position: center;
    background-size: cover;
  }

  /* Services / Zones : padding réduit */
  body.has-mobile-v2 #services,
  body.has-mobile-v2 #zones {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  body.has-mobile-v2 #services .section-head,
  body.has-mobile-v2 #zones .section-head {
    margin-bottom: 1.2rem;
  }

  /* Cartes services : image plus compacte */
  body.has-mobile-v2 #services .card .card-image {
    height: 140px;
  }
  body.has-mobile-v2 #services .card {
    padding: 1.5rem 1.4rem 1.6rem;
  }
  body.has-mobile-v2 #services .card h3 {
    font-size: 1.25rem;
    margin-top: 0.4rem;
  }

  /* Cartes zones : image plus compacte */
  body.has-mobile-v2 #zones .zone-card-image {
    height: 120px;
  }
  body.has-mobile-v2 #zones .zone-card-body {
    padding: 1rem 1.2rem 1.3rem;
  }

  /* Services : swiper horizontal natif (scroll-snap CSS only) */
  body.has-mobile-v2 #services .cards {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    padding: 1rem;
    margin: 0 -1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.has-mobile-v2 #services .cards::-webkit-scrollbar {
    display: none;
  }
  body.has-mobile-v2 #services .cards > .card {
    flex: 0 0 82%;
    scroll-snap-align: center;
    margin: 0;
  }

  /* Zones : swiper horizontal aussi */
  body.has-mobile-v2 #zones .zones-grid {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    padding: 1rem;
    margin: 0 -1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.has-mobile-v2 #zones .zones-grid::-webkit-scrollbar {
    display: none;
  }
  body.has-mobile-v2 #zones .zones-grid > .zone-card {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }

  /* Indicateur de section vertical, à droite */
  body.has-mobile-v2 .v2-dots {
    position: fixed;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    z-index: 45;
    pointer-events: none;
  }
  body.has-mobile-v2 .v2-dots .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(120, 110, 95, 0.4);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.has-mobile-v2 .v2-dots .dot.active {
    background: rgba(60, 50, 35, 0.95);
    transform: scale(1.8);
  }

  /* CTA Réserver sticky en bas */
  body.has-mobile-v2 .v2-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: linear-gradient(to top,
      rgba(248, 244, 236, 0.97) 0%,
      rgba(248, 244, 236, 0.92) 60%,
      rgba(248, 244, 236, 0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 44;
    transform: translateY(110%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  body.has-mobile-v2.v2-scrolled .v2-sticky-cta {
    transform: translateY(0);
    pointer-events: auto;
  }
  body.has-mobile-v2 .v2-sticky-cta .btn {
    width: 100%;
    padding: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: 0 8px 24px -8px rgba(60, 50, 35, 0.4);
  }

  /* Tap-to-call discret dans le header */
  body.has-mobile-v2 .v2-quick-actions {
    display: inline-flex;
    gap: 0.5rem;
    margin-right: 0.4rem;
  }
  body.has-mobile-v2 .v2-quick-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(120, 110, 95, 0.08);
    color: inherit;
    transition: background 0.2s;
  }
  body.has-mobile-v2 .v2-quick-actions a:hover,
  body.has-mobile-v2 .v2-quick-actions a:active {
    background: rgba(120, 110, 95, 0.18);
  }
  body.has-mobile-v2 .v2-quick-actions svg {
    width: 18px;
    height: 18px;
  }

  /* Reveal cinematic léger : opacity + translateY à l'entrée */
  body.has-mobile-v2 .v2-section-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.has-mobile-v2 .v2-section-reveal.v2-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Banner debug discret pour quitter le mode v2 */
  body.has-mobile-v2 .v2-debug-pill {
    position: fixed;
    top: calc(0.6rem + env(safe-area-inset-top));
    left: 0.6rem;
    z-index: 100;
    background: rgba(20, 20, 20, 0.72);
    color: #f8f0e0;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: 1px solid rgba(248, 240, 224, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  body.has-mobile-v2 .v2-debug-pill::before {
    content: "● ";
    color: #ffd34d;
  }

  /* WhatsApp FAB déplacé pour ne pas chevaucher le sticky CTA */
  body.has-mobile-v2.v2-scrolled .whatsapp-fab {
    bottom: 4.5rem;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* Indicateur subtil de swipe horizontal pour les cards (premier rendu) */
  body.has-mobile-v2 #services .cards::after,
  body.has-mobile-v2 #zones .zones-grid::after {
    content: "";
    flex: 0 0 1px;
  }
}