/* ============================================================
   ESCAPE ROOM OUIDAH — responsive.css v5
   Mobile-first premium — App-like experience
   ============================================================ */

/* ── ≤1100px ── */
@media (max-width:1100px) {
  .exp-two-col       { grid-template-columns: 1fr !important; gap: 48px !important }
  .tarifs-exp-grid   { grid-template-columns: repeat(2,1fr) !important }
  .luxury-cards-grid { grid-template-columns: 1fr 1fr !important }
  .stats-grid        { grid-template-columns: repeat(2,1fr) !important }
  .stats-grid      { grid-template-columns:repeat(2,1fr) }
  .groups-grid     { grid-template-columns:1fr }
  .profiles-grid   { grid-template-columns:1fr }
  .gallery-masonry { columns:2 }
  .kpi-grid        { grid-template-columns:repeat(2,1fr) }
  .footer-top      { grid-template-columns:1fr 1fr; gap:36px }
  .footer-brand    { grid-column:1/-1 }
  .contact-grid    { grid-template-columns:1fr; gap:48px }
}

/* ── ≤768px : mobile ── */
@media (max-width:768px) {
  /* ── Page expérience ── */
  .exp-two-col       { grid-template-columns: 1fr !important; gap: 32px !important }
  .tarifs-exp-grid   { grid-template-columns: 1fr !important; max-width: 100% !important }
  .luxury-cards-grid { grid-template-columns: 1fr !important }
  .profiles-grid     { grid-template-columns: 1fr !important }
  .stats-grid        { grid-template-columns: repeat(2,1fr) !important }

  :root { --nav-h:62px; --sp-16:72px; --sp-12:56px }

  .nav-links,.nav-cta { display:none !important }
  .hamburger          { display:flex !important }

  /* Sections */
  .section    { padding:72px 5% }
  .section-sm { padding:52px 5% }
  .section-xs { padding:40px 5% }
  .section-with-bg { padding:72px 5% !important }
  .page-hero  { padding:calc(var(--nav-h)+48px) 5% 52px; min-height:46vh }

  /* Typo */
  .title-display { font-size:clamp(30px,10vw,48px); letter-spacing:-1px }
  .title-xl  { font-size:clamp(26px,9vw,44px); letter-spacing:-1px }
  .title-lg  { font-size:clamp(20px,7vw,34px); letter-spacing:-.5px }
  .title-md  { font-size:clamp(16px,5vw,24px) }
  .body-lg   { font-size:15px }
  .body-md   { font-size:14px }
  .eyebrow   { font-size:10px; letter-spacing:2px }
  .label     { font-size:10px; padding:4px 12px }

  /* Hero */
  .hero-slide-content { padding:0 5% !important; padding-top:calc(var(--nav-h)+16px) !important }
  .hero-slide-inner   { max-width:100% !important }
  .hero-word-1  { font-size:clamp(40px,13vw,68px); letter-spacing:-1.5px }
  .hero-word-2  { font-size:clamp(28px,10vw,50px) }
  .hero-pre     { font-size:clamp(11px,3.5vw,15px) }
  .hero-badge   { font-size:10px; padding:5px 14px; margin-bottom:20px }
  .hero-sub     { font-size:9px; letter-spacing:2px; margin:16px 0 24px; gap:10px }
  .hero-sub-line{ flex:0 0 24px }
  .hero-actions { flex-direction:column; gap:10px; align-items:flex-start }
  .hero-actions .btn { width:100%; max-width:320px }
  .hero-slider-controls { bottom:84px; gap:10px }
  .hero-scroll  { bottom:48px }
  .slider-arrow { width:32px; height:32px }

  /* Grilles */
  .stats-grid   { grid-template-columns:repeat(2,1fr) }
  .groups-grid  { grid-template-columns:1fr !important }
  .profiles-grid{ grid-template-columns:1fr }
  .gallery-masonry { columns:1 }
  [class*="grid-cols-4"],
  .features-grid,.pour-qui-grid { grid-template-columns:repeat(2,1fr) !important }
  .preview-grid { grid-template-columns:repeat(2,1fr) }

  /* Forms */
  .form-row { grid-template-columns:1fr !important; gap:14px }

  /* Stats */
  .stat-item { padding:36px 16px }
  .stat-num  { font-size:42px }
  .stat-item:nth-child(even) { border-right:none }

  /* Testi */
  .testi-card     { min-width:calc(100vw - 10% - 20px) }
  .testi-form-wrap{ padding:32px 20px !important }

  /* Groups */
  .group-card { padding:36px 26px !important }

  /* Calendar */
  .slots-grid { grid-template-columns:repeat(2,1fr) }

  /* FOOTER — 1 colonne garantie */
  .footer-top {
    display:flex !important;
    flex-direction:column !important;
    gap:28px !important;
  }
  .footer-brand  { grid-column:unset !important }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center }
  .footer-legal  { justify-content:center; flex-wrap:wrap }

  /* Admin */
  .admin-layout { grid-template-columns:1fr }
  .admin-sidebar{ position:static; height:auto; border-right:none; border-bottom:1px solid var(--border) }
  .admin-nav    { flex-direction:row; flex-wrap:wrap; gap:4px }
  .admin-main   { padding:20px 14px }
  .kpi-grid     { grid-template-columns:repeat(2,1fr) !important }

  /* Mockups */
  .mockup-phone { width:180px }

  /* WA float */
  .wa-float { bottom:16px; right:16px; width:48px; height:48px; font-size:20px }

  /* Overflow */
  html,body,.section-inner,.page-hero-content,.footer-inner { overflow-x:hidden }
}

/* ── ≤480px : petit mobile ── */
@media (max-width:480px) {
  :root { --nav-h:58px; --sp-16:56px }

  .section  { padding:56px 4% }
  .page-hero{ padding:calc(var(--nav-h)+32px) 4% 44px }

  .logo-name{ font-size:11px }
  .logo-sub { font-size:8px }
  .logo-img-wrap { width:38px; height:38px }

  .title-xl { font-size:clamp(24px,10vw,36px); letter-spacing:-.5px }
  .title-lg { font-size:clamp(19px,8vw,28px) }
  .hero-word-1 { font-size:clamp(34px,14vw,54px) }
  .hero-word-2 { font-size:clamp(24px,11vw,40px) }
  .hero-actions { align-items:stretch }
  .hero-actions .btn { max-width:100% }

  /* Tout en 1 col sur petit écran */
  .stats-grid     { grid-template-columns:1fr !important }
  .features-grid,
  .pour-qui-grid  { grid-template-columns:1fr !important }
  .preview-grid   { grid-template-columns:1fr !important }
  .kpi-grid       { grid-template-columns:1fr !important }

  .stat-item { border-right:none !important; border-bottom:1px solid var(--border); padding:28px 14px }
  .stat-item:last-child { border-bottom:none }
  .stat-num  { font-size:38px }

  .testi-card      { min-width:calc(100vw - 8% - 20px) }
  .testi-form-wrap { padding:24px 14px !important }

  .group-card { padding:28px 20px !important }
  .group-num  { font-size:56px }
  .group-title{ font-size:16px }

  .card { padding:24px 20px }

  .footer-col-title { font-size:9px }
  .footer-socials   { gap:6px }

  .btn-xl { padding:14px 28px; font-size:13px }
  .btn-lg { padding:12px 22px; font-size:12px }

  .resa-infos-bar { grid-template-columns:1fr !important }
  .mockup-phone   { display:none }
}

/* ── Print ── */
@media print {
  #navbar,.wa-float,#loader,#cursor,#cursor-ring,
  #particles-canvas,.hero-slider-controls { display:none }
  body { background:white; color:black; cursor:auto }
  .section { padding:16px 0 }
}

/* ── Sections premium responsive ── */
@media(max-width:1024px) {
    .luxury-cards-grid { grid-template-columns:1fr !important }
    .guarantee-grid    { grid-template-columns:1fr !important; gap:40px !important }
    .guarantee-grid > div:nth-child(2) { display:none !important }
    .guarantee-grid > div:last-child { padding:0 !important }
}
@media(max-width:768px) {
    .section-fullbg-content { padding:56px 5% !important }
    .section-fullbg-content h2 { font-size:clamp(24px,9vw,40px) !important }
    .section-fullbg-content blockquote { font-size:clamp(20px,6vw,32px) !important }
    .luxury-stats { flex-direction:column !important }
    .luxury-stat-item { border-right:none !important; border-bottom:1px solid rgba(201,168,76,.1) }
    .luxury-stat-item:last-child { border-bottom:none }
    .guarantee-grid > div:first-child { padding:0 !important }
    .luxury-cards-grid > div { padding:24px 18px !important }
}