/* ═══════════════════════════════════════════════════════════════
   LOUIS AFRICAN HAIR BRAIDING — Global Responsive System
   Breakpoints: 360 · 480 · 640 · 768 · 1024 · 1280
   Mobile-first architecture — overrides inline styles via cascade
   ═══════════════════════════════════════════════════════════════ */

/* ── GLOBAL BOX MODEL & OVERFLOW GUARD ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   360px — VERY SMALL PHONES (Galaxy A series, iPhone SE)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {

  /* Container */
  .container { padding: 0 1rem !important; }

  /* Hero */
  .hero-content { padding: 6rem 1rem 3rem !important; }
  .word-outer { overflow: hidden; }

  /* Typography scale-down */
  .text-display { font-size: clamp(2.2rem, 10vw, 3.5rem) !important; }
  .text-h2 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; }
  .text-h3 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; }

  /* Gallery: single column */
  .gallery-bento {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .gallery-item,
  .gallery-item.row-span-2,
  .gallery-item.col-span-2 {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    height: 220px !important;
  }

  /* Service cards: full-width */
  .service-card { width: calc(100vw - 2.5rem) !important; min-height: 22rem !important; }

  /* Booking CTA */
  .booking-h2 { font-size: clamp(2rem, 10vw, 3rem) !important; }
  .btn-primary { font-size: .875rem !important; padding: .75rem 1.25rem !important; }

  /* Footer */
  .footer-grid { display: none !important; }
  .footer-mobile { display: flex !important; }

  /* Reviews lanes */
  .reviews-lanes { flex-direction: column !important; gap: 1rem; }
  .marquee-outer { display: none !important; }
  .marquee-outer:first-child { display: block !important; }

}

/* ═══════════════════════════════════════════════════════════════
   480px — SMALL PHONES (standard iPhone / Android)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Hero */
  .hero-content { padding: 7rem 1.25rem 4rem !important; }
  .hero-stats {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
  }
  .hero-stats > * { min-width: unset !important; width: 100% !important; }
  .floating-testimonial {
    display: none !important;
  }

  /* Typography */
  .text-display { font-size: clamp(2.6rem, 11vw, 4rem) !important; }
  .text-h2 { font-size: clamp(1.8rem, 7.5vw, 2.4rem) !important; }

  /* Carousel */
  .service-card { width: calc(100vw - 3rem) !important; }
  .carousel-nav { display: none !important; }

  /* Gallery */
  .gallery-bento {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
  }
  .gallery-item.row-span-2,
  .gallery-item.col-span-2 {
    grid-column: span 2 !important;
    grid-row: span 1 !important;
    height: 220px !important;
  }
  .gallery-item { height: 180px !important; }

  /* Lightbox */
  #lightbox-img {
    max-width: 94vw !important;
    max-height: 68vh !important;
    border-radius: 12px !important;
  }
  #lightbox-close { top: 1rem !important; right: 1rem !important; font-size: .75rem !important; }
  #lightbox-label { font-size: .7rem !important; }

  /* Triple CTA */
  .triple-grid { grid-template-columns: 1fr !important; }
  .cta-card { padding: 1.5rem !important; }

  /* Reviews */
  .reviews-lanes {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  .reviews-lanes .marquee-outer:not(:first-child) { display: none !important; }
  .review-card { min-width: 260px !important; }

  /* Booking */
  .booking-h2 { font-size: clamp(2.2rem, 10vw, 3.2rem) !important; }
  #booking { padding: 5rem 0 !important; }

  /* Immersion grid */
  .immersion-grid {
    flex-direction: column !important;
    gap: .75rem !important;
  }
  /* BUG #6 FIX : height explicite (pas min-height) pour que position:absolute fonctionne */
  .immersion-img { height: 260px !important; min-height: unset !important; }

  /* Detail grid */
  .detail-grid { grid-template-columns: 1fr !important; }

  /* BUG #12 FIX : lignes redondantes supprimées (déjà dans 360px) */

  /* Big rating */
  .big-rating { font-size: clamp(5rem, 18vw, 8rem) !important; }

  /* Marquee immersion */
  .immersion-marquee-item { font-size: clamp(3rem, 10vw, 6rem) !important; }

  /* Pillars */
  .pillars-grid { grid-template-columns: 1fr !important; }
  .pillar { border-right: none !important; border-bottom: 1px solid rgba(15,14,11,.08); }
  .pillar:last-child { border-bottom: none !important; }

  /* Manifesto */
  .manifesto-grid { grid-template-columns: 1fr !important; }

  /* BUG #11 FIX : utiliser clamp pour éviter le saut brusque de padding */
  /* Mobile: espacements verticaux resserrés pour éviter les grands vides */
  section:not(#hero):not(#booking) { padding: clamp(1.75rem, 6vw, 3rem) 0 !important; }
  #hero { padding: 0 !important; }

  /* About page */
  .founder-inner { grid-template-columns: 1fr !important; }
  .atelier-grid { grid-template-columns: 1fr !important; }
  .stylists-grid { grid-template-columns: 1fr !important; }
  .cta-grid { grid-template-columns: 1fr !important; }

  /* Contact page */
  .booking-grid { grid-template-columns: 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .info-cards { grid-template-columns: 1fr !important; }

  /* Services page */
  .bento-grid { grid-template-columns: 1fr !important; }
  .service-card.featured { grid-column: span 1 !important; grid-row: span 1 !important; }

  /* Catalogue page */
  .services-grid { grid-template-columns: 1fr !important; }
  .products-grid { grid-template-columns: 1fr !important; }
  .filter-bar { flex-wrap: wrap !important; gap: .5rem !important; }
  .filter-pill, .cat-tab { font-size: .75rem !important; padding: .4rem .8rem !important; }

  /* Service detail pages */
  .desc-grid { grid-template-columns: 1fr !important; }
  .pricing-grid { grid-template-columns: 1fr !important; }

  /* FAQ */
  .faq-item { padding: 1.25rem !important; }

  /* BUG #17 FIX : exclure boutons dans formulaire newsletter */
  .btn-primary:not(.newsletter-form .btn-primary):not(.newsletter-form button),
  .btn-ghost {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Hero CTA flex stacking */
  .hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .75rem !important;
  }

}

/* ═══════════════════════════════════════════════════════════════
   640px — LARGE PHONES / PHABLETS
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 481px) and (max-width: 640px) {

  /* Hero */
  .hero-content { padding: 7rem 1.5rem 4rem !important; }
  .floating-testimonial { transform: scale(.85); transform-origin: bottom right; }

  /* Carousel */
  .service-card { width: calc(100vw - 4rem) !important; }

  /* Gallery */
  .gallery-bento {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gallery-item.row-span-2 {
    grid-row: span 2 !important;
    height: 100% !important;
  }
  .gallery-item.col-span-2 {
    grid-column: span 2 !important;
    height: 220px !important;
  }
  .gallery-item { height: 200px !important; }

  /* Grids */
  .pillars-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .triple-grid { grid-template-columns: 1fr !important; }
  .founder-inner { grid-template-columns: 1fr !important; }
  .atelier-grid { grid-template-columns: 1fr !important; }
  .stylists-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .info-cards { grid-template-columns: repeat(2, 1fr) !important; }
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .bento-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Typography */
  .text-display { font-size: clamp(3rem, 10vw, 5rem) !important; }

  /* Footer */
  .footer-grid { display: none !important; }
  .footer-mobile { display: flex !important; }

  /* Immersion */
  .immersion-grid { flex-direction: column !important; }
  .immersion-img { min-height: 280px !important; }

  /* Buttons: full width when alone */
  .hero-ctas {
    flex-direction: column !important;
    align-items: center !important;
    gap: .75rem !important;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-ghost { width: 100% !important; max-width: 22rem; }

}

/* ═══════════════════════════════════════════════════════════════
   768px — TABLETS (portrait)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 768px) {

  /* Container */
  .container { padding: 0 1.5rem !important; }

  /* Hero */
  .hero-content { padding: 8rem 2rem 5rem !important; }
  .hero-stats { gap: 2rem !important; }
  .floating-testimonial { right: 1.5rem !important; bottom: 4rem !important; }

  /* Gallery: 2-col bento */
  .gallery-bento {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .gallery-item.col-span-2 { grid-column: span 2 !important; }

  /* Grids */
  .pillars-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .triple-grid { grid-template-columns: 1fr !important; }
  .stylists-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .founder-inner { grid-template-columns: 1fr !important; }

  /* Footer */
  .footer-grid { display: none !important; }
  .footer-mobile { display: flex !important; }

  /* Carousel */
  .service-card { width: 18rem !important; }

  /* Services bento */
  .bento-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Catalogue */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Immersion */
  .immersion-grid { flex-direction: row !important; flex-wrap: wrap !important; }
  .immersion-img { flex: 1 1 calc(50% - .5rem) !important; min-height: 280px !important; }

}

/* ═══════════════════════════════════════════════════════════════
   1024px — TABLETS LANDSCAPE / SMALL LAPTOPS
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Container */
  .container { padding: 0 2rem !important; }

  /* Footer desktop grid: 2 columns to save space */
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .footer-mobile { display: none !important; }

  /* Gallery full bento on larger tablets */
  .gallery-bento {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .gallery-item.col-span-2 { grid-column: span 2 !important; }

  /* Services page */
  .bento-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Catalogue */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Founder grid */
  .founder-inner { grid-template-columns: 1fr 1fr !important; }

  /* Stylists */
  .stylists-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Triple CTA */
  .triple-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Detail grid */
  .detail-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Carousel card */
  .service-card { width: 18rem !important; }

}

/* ═══════════════════════════════════════════════════════════════
   1280px+ — STANDARD DESKTOPS (restore defaults + optimise)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  /* Footer: always show desktop grid */
  .footer-grid { display: grid !important; }
  .footer-mobile { display: none !important; }

  /* Gallery: full 4-column bento */
  .gallery-bento { grid-template-columns: repeat(4, 1fr) !important; }
  .gallery-item.row-span-2 { grid-row: span 2 !important; }
  .gallery-item.col-span-2 { grid-column: span 2 !important; }

  /* Catalogue */
  .services-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .products-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Services page */
  .bento-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* Pillars */
  .pillars-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Detail grid */
  .detail-grid { grid-template-columns: repeat(3, 1fr) !important; }

  /* Triple CTA */
  .triple-grid { grid-template-columns: repeat(2, 1fr) !important; }

}

/* ═══════════════════════════════════════════════════════════════
   COMMON FIXES — All breakpoints
   ═══════════════════════════════════════════════════════════════ */

/* ── Lightbox mobile-safe ─── */
#lightbox {
  padding: 1rem;
}
#lightbox-img {
  max-width: min(90vw, 900px);
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── Review card min-width guard ─── */
.review-card {
  min-width: min(20rem, 80vw) !important;
}

/* ── Marquee safe on mobile ─── */
.marquee-outer {
  overflow: hidden;
  width: 100%;
}
/* BUG #16 FIX : pauser les lanes cachées pour ne pas gaspiller le CPU */
.marquee-outer[style*="display: none"],
.marquee-outer[style*="display:none"] {
  animation-play-state: paused !important;
}
.reviews-lanes .marquee-outer:not(:first-child) .marquee-track {
  animation-play-state: paused;
}

/* ── Carousel overflow ─── */
.carousel-wrapper {
  overflow: hidden;
  width: 100%;
}

/* ── Section padding fluid ─── */
section:not(#hero):not(#booking) {
  padding: clamp(3rem, 7vw, 6rem) 0;
}

/* ── Hero min height guard ─── */
#hero {
  min-height: 100svh;
  padding: 0 !important;
}

/* ── Typography: fluid clamp ─── */
.text-display {
  font-size: clamp(2.8rem, 9vw, 9rem);
}

.text-h2 {
  font-size: clamp(1.9rem, 4.5vw, 3.5rem);
}

.text-h3 {
  font-size: clamp(1.35rem, 2.5vw, 2.25rem);
}

.text-h4 {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

.text-body-lg {
  font-size: clamp(.95rem, 1.4vw, 1.25rem);
}

/* ── Booking CTA section ─── */
#booking {
  padding: clamp(5rem, 12vw, 9rem) 0;
  text-align: center;
}

.booking-h2 {
  font-size: clamp(2.5rem, 8vw, 6rem);
  line-height: 1.05;
}

/* ── Immersion marquee text fluid ─── */
.immersion-marquee-item {
  font-size: clamp(3.5rem, 10vw, 12rem);
}

/* ── Big rating fluid ─── */
.big-rating {
  font-size: clamp(6rem, 18vw, 14rem);
}

/* ── Floating testimonial: hide on very small ─── */
@media (max-width: 520px) {
  .floating-testimonial { display: none !important; }
}

/* ── Scroll cue: always visible on small ─── */
@media (max-width: 480px) {
  .scroll-cue { bottom: 1.5rem !important; }
}

/* ── Contact / About form inputs ─── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
  font-size: 1rem;
  padding: .75rem 1rem;
  min-height: 48px;
  width: 100%;
  box-sizing: border-box;
}

/* ── Touch targets: minimum 44×44px ─── */
button,
a.btn-primary,
a.btn-ghost,
.social-btn {
  min-height: 44px;
  min-width: 44px;
}

/* ── Gallery bento: safe heights on mobile ─── */
@media (max-width: 640px) {
  .gallery-item img { height: 100%; object-fit: cover; }
}

/* ── About page hero stats stacking ─── */
@media (max-width: 640px) {
  .hero-stats {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .hero-stats .stat-num {
    font-size: clamp(2.5rem, 10vw, 4rem) !important;
  }
}

/* ── Service detail page desc grid ─── */
@media (min-width: 900px) {
  .desc-grid {
    grid-template-columns: 1fr 380px !important;
    gap: 4rem !important;
    align-items: start !important;
  }
}

/* ── Pricing grid: fluid columns ─── */
@media (min-width: 700px) {
  .pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

/* ── Footer grid responsive ─── */
@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr !important;
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr !important;
  }
}

/* ── Accordion: smooth height on mobile ─── */
.accordion-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s cubic-bezier(.16,1,.3,1);
}
.accordion-item.open .accordion-content {
  max-height: 600px;
}

/* ── Image grid safe aspect ratios ─── */
.immersion-img {
  overflow: hidden;
  border-radius: 1rem;
}
.immersion-img img,
.immersion-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Bento grid gaps ─── */
@media (max-width: 640px) {
  .gallery-bento { gap: .5rem !important; }
}

/* ── Triple CTA section ─── */
@media (max-width: 480px) {
  .triple-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* ── About timeline ─── */
@media (max-width: 640px) {
  .timeline { padding-left: 1.5rem !important; }
  .timeline::before { left: .25rem !important; }
}

/* ── Catalogue filter bar ─── */
@media (max-width: 640px) {
  .filter-bar {
    flex-wrap: wrap !important;
    gap: .4rem !important;
    justify-content: flex-start !important;
  }
  .filter-pill, .cat-tab {
    font-size: .72rem !important;
    padding: .35rem .75rem !important;
  }
}

/* ── Cursor glow: disabled on touch ─── */
@media (hover: none) and (pointer: coarse) {
  div[style*="radial-gradient(circle, rgba(201,169,97,.07)"] {
    display: none !important;
  }
}

/* ── 3D tilt: disabled on touch (avoid sticky states) ─── */
@media (hover: none) and (pointer: coarse) {
  .tilt-card {
    transform: none !important;
    will-change: auto !important;
  }
}

/* ── Animations: respect reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PARALLAX — conteneurs pour effet de clipping
   Règle : overflow:hidden sur le CONTENEUR, pas sur les images
   L'image est légèrement plus grande que son conteneur pour
   absorber le déplacement sans laisser de bords vides.
   ═══════════════════════════════════════════════════════════════ */

/* ── Galerie bento ── */
/* BUG #5 FIX : galerie doit avoir une hauteur explicite pour que
   l'img position:absolute soit visible */
.gallery-item {
  overflow: hidden;
  position: relative;
  /* Hauteur par défaut (desktop) — via grid sinon fallback */
  min-height: 220px;
}
.gallery-item img {
  width: 100%;
  height: 125%;
  object-fit: cover;
  object-position: center top;
  position: absolute;
  top: -7.5%;
  left: 0;
}

/* Hauteurs explicites galerie à chaque breakpoint */
@media (min-width: 641px) and (max-width: 1024px) {
  .gallery-item          { height: 240px; }
  .gallery-item.row-span-2 { height: 500px; }
  .gallery-item.col-span-2 { height: 260px; }
}
@media (min-width: 1025px) {
  .gallery-item          { height: 280px; }
  .gallery-item.row-span-2 { height: 580px; }
  .gallery-item.col-span-2 { height: 300px; }
}

/* ── Immersion images ── */
/* BUG #6 FIX : height explicite (pas min-height) pour position:absolute */
.immersion-img {
  overflow: hidden;
  position: relative;
  height: 340px;        /* height explicite partout */
}
.immersion-img img,
.immersion-img video {
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: -7.5%;
  left: 0;
}
@media (min-width: 769px) {
  .immersion-img { height: 420px; }
}
@media (min-width: 1025px) {
  .immersion-img { height: 500px; }
}

/* ── Hero video ── */
.hero-video,
.hero-bg {
  height: 140%;
  top: -20%;
  left: 0;
  width: 100%;
  object-fit: cover;
}

/* ── Booking bg ── */
/* BUG #7 FIX : #booking doit avoir min-height pour que bg soit visible */
#booking {
  min-height: 500px;
}
.booking-bg {
  height: 140%;
  top: -20%;
  left: 0;
  width: 100%;
  object-fit: cover;
}

/* ── Detail grid : pas d'overflow hidden ── */
.detail-grid > * {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════ */
@media print {
  #navbar, footer, .booking-glow, .scene-orb, .sparkle-dot { display: none !important; }
  body { color: #000 !important; background: #fff !important; }
  section { padding: 1rem 0 !important; }
}