/* ============================================================
   APRICUS — Mobile experience (≤ 768px)
   ------------------------------------------------------------
   Vraie différenciation mobile/desktop :
   - Header minimaliste (logo + burger)
   - Menu plein écran éditorial
   - Sticky CTA Réserver en bas
   - Animations séquencées
   ============================================================ */

/* ---------- 1. Tablette (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  div[style*="maxWidth: 1200"],
  div[style*="max-width: 1200"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* ============================================================
   2. MOBILE PRINCIPAL (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Type scale réduit */
  :root {
    --text-xs:    12px;
    --text-sm:    14px;
    --text-base:  16px;
    --text-md:    17px;
    --text-lg:    19px;
    --text-xl:    22px;
    --text-2xl:   26px;
    --text-3xl:   32px;
    --text-4xl:   42px;
    --text-5xl:   54px;
    --text-6xl:   68px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 56px;
    --space-10: 72px;
    --space-11: 96px;
  }

  html, body { overflow-x: hidden !important; }
  #root { overflow-x: hidden !important; }

  /* Réserve de l'espace en bas pour le CTA sticky */
  body { padding-bottom: 72px !important; }

  div[style*="maxWidth: 1200"],
  div[style*="max-width: 1200"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Grilles multi-colonnes → 1 colonne */
  div[style*="gridTemplateColumns: '1.05fr 0.95fr'"],
  div[style*="gridTemplateColumns: '1fr 1fr'"],
  div[style*="gridTemplateColumns: 'repeat(2"],
  div[style*="gridTemplateColumns: 'repeat(3"],
  div[style*="gridTemplateColumns: 'repeat(4"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  section, section[id] { scroll-margin-top: 64px !important; }

  div[style*="padding: '40px 40px"],
  div[style*="padding:'40px 40px"] {
    padding: 32px 18px 56px !important;
  }
  div[style*="padding: '92px 40px"] {
    padding: 48px 18px 80px !important;
  }

  h1[style*="clamp(46px"] {
    font-size: clamp(36px, 9vw, 56px) !important;
  }

  div[style*="gap: 72"] { gap: 36px !important; }
  div[style*="gap: 60"] { gap: 32px !important; }
  div[style*="gap: 48"] { gap: 28px !important; }
  div[style*="gap: 40"] { gap: 24px !important; }
  div[style*="gap: 32"] { gap: 20px !important; }

  img[src*="lemons-branch"] { max-width: 260px !important; }

  p[style*="fontSize: 18"], p[style*="font-size: 18"] {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  div[style*="padding: 32px"] { padding: 22px !important; }
  div[style*="padding: 40px"] { padding: 24px !important; }
  div[style*="padding: 48px"] { padding: 28px !important; }

  /* ---------- HEADER MOBILE : minimaliste ---------- */
  .apr-nav-desktop { display: none !important; }
  .apr-nav-burger { display: inline-flex !important; }

  header > div[style*="height: 78"] {
    height: 60px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  img[src*="apricus-lemon"] { height: 28px !important; }
  header span[style*="fontSize: 28"] {
    font-size: 20px !important;
    letter-spacing: 0.4px !important;
  }

  footer div[style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  /* ---------- STICKY CTA RÉSERVER en bas ---------- */
  .apr-mobile-cta {
    display: flex !important;
  }
}

/* ---------- 3. Très petits mobiles (≤ 380px) ---------- */
@media (max-width: 380px) {
  div[style*="maxWidth: 1200"],
  div[style*="max-width: 1200"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  h1[style*="clamp(46px"] {
    font-size: clamp(30px, 9.5vw, 44px) !important;
  }
  img[src*="lemons-branch"] { max-width: 220px !important; }
}

/* ============================================================
   4. MENU MOBILE PLEIN ÉCRAN — éditorial dolce vita
   ============================================================ */

/* Bouton burger dans le header */
.apr-nav-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin: -10px;
  color: var(--apr-ink);
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 102;
}

.apr-nav-burger svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Overlay plein écran */
.apr-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--apr-cream);
  background-image: url(assets/textures/paper-cream.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease-out);
  display: flex;
  flex-direction: column;
  padding: 80px 28px 40px;
  overflow-y: auto;
}

.apr-mobile-menu.open {
  opacity: 1;
  pointer-events: auto;
}

/* Voile coloré pour ambiance dolce vita */
.apr-mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 90% 0%, rgba(249, 216, 98, 0.32), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(192, 106, 71, 0.22), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* Bouton fermer */
.apr-mobile-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  color: var(--apr-ink);
  z-index: 103;
}

.apr-mobile-close svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* Liens éditoriaux XXL */
.apr-mobile-link {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  color: var(--apr-ink);
  text-decoration: none;
  padding: 16px 0;
  line-height: 1.05;
  letter-spacing: -0.02em;
  display: block;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out), color .15s;
  position: relative;
}

.apr-mobile-menu.open .apr-mobile-link {
  opacity: 1;
  transform: translateX(0);
}

/* Cascade : chaque lien apparaît avec un décalage */
.apr-mobile-menu.open .apr-mobile-link:nth-child(1) { transition-delay: 0.08s; }
.apr-mobile-menu.open .apr-mobile-link:nth-child(2) { transition-delay: 0.13s; }
.apr-mobile-menu.open .apr-mobile-link:nth-child(3) { transition-delay: 0.18s; }
.apr-mobile-menu.open .apr-mobile-link:nth-child(4) { transition-delay: 0.23s; }
.apr-mobile-menu.open .apr-mobile-link:nth-child(5) { transition-delay: 0.28s; }
.apr-mobile-menu.open .apr-mobile-link:nth-child(6) { transition-delay: 0.33s; }

/* Touche éditoriale : un italique en accent pour 2 liens (déclaratif) */
.apr-mobile-link em {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--apr-terracotta);
  font-weight: 400;
  font-size: 1.08em;
}

.apr-mobile-link:active {
  color: var(--apr-honey);
}

/* Tag "soleil" sous chaque lien (numérotation éditoriale) */
.apr-mobile-link .apr-mobile-link-num {
  position: absolute;
  left: -2px;
  top: 18px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--apr-ink-faint);
  opacity: 0.5;
  pointer-events: none;
}

.apr-mobile-links-wrapper {
  margin-top: 20px;
  flex: 1;
}

/* Pied du menu : Instagram, Lang, mentions */
.apr-mobile-foot {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--apr-line);
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out);
  transition-delay: 0.42s;
}

.apr-mobile-menu.open .apr-mobile-foot {
  opacity: 1;
  transform: translateY(0);
}

.apr-mobile-instagram {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--apr-ink);
  text-decoration: none;
  transition: color .15s var(--ease-out);
}

.apr-mobile-instagram:active {
  color: var(--apr-terracotta);
}

.apr-mobile-instagram svg {
  width: 22px;
  height: 22px;
}

.apr-mobile-lang {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--apr-ink-soft);
  display: flex;
  gap: 6px;
  align-items: center;
}

.apr-mobile-lang button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  padding: 4px 0;
}

/* Soleil décoratif en fond du menu */
.apr-mobile-menu-sun {
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--apr-citron-soft), var(--apr-zest) 70%);
  opacity: 0.18;
  pointer-events: none;
  z-index: -1;
  filter: blur(8px);
}

/* ============================================================
   5. STICKY CTA RÉSERVER en bas (mobile only)
   ============================================================ */
.apr-mobile-cta {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 80;
  background: var(--apr-ink);
  color: var(--apr-cream);
  text-decoration: none;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(50, 45, 30, 0.32), 0 0 0 1px rgba(251, 244, 230, 0.1);
  align-items: center;
  justify-content: center;
  gap: 10px;
  backdrop-filter: blur(6px);
  transition: transform .25s var(--ease-out), opacity .25s var(--ease-out);
}

.apr-mobile-cta:active {
  transform: scale(0.97);
}

.apr-mobile-cta-icon {
  width: 18px;
  height: 18px;
}

/* Cacher le CTA quand le menu plein écran est ouvert (évite le double bouton) */
body.apr-menu-open .apr-mobile-cta {
  opacity: 0;
  pointer-events: none;
}

/* Cacher le CTA dans la section Booking elle-même (anti-redondance) */
@media (max-width: 768px) {
  body.apr-in-booking .apr-mobile-cta {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
  }
}