@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Montserrat:wght@400;600;700;800&display=swap');

/* =========
   VARIABLES
========== */
:root {
  --bg-dark: #121214;
  /* Slightly lighter than pure black */
  --bg-card: rgba(255, 255, 255, 0.03);
  /* Glassy feel */
  --bg-overlay: rgba(0, 0, 0, 0.6);
  --text-main: #e8e9ed;
  --text-muted: #b0b3b8;
  --accent-wood: #d4c5a9;
  /* More desaturated fancy wood */
  --accent-gold: #c5a065;
  --border-light: rgba(255, 255, 255, 0.08);

  --font-heading: 'Montserrat', sans-serif;
  /* CHANGED per feedback */
  --font-body: 'Lato', sans-serif;
  --font-alt: 'Montserrat', sans-serif;

  --container-width: 1200px;
  --section-spacing: 120px;
}

/* =========
   RESET & BASE
========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-dark);
  /* Textured background to avoid "empty" feel */
  background-image:
    radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.03), transparent 25%),
    radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.02), transparent 25%);
  color: var(--text-main);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: #fff;
  /* Titles white for better contrast, less "wood everywhere" */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =========
   HELPER CLASSES
========== */
.container {
  width: 90%;
  max-width: var(--container-width);
  margin: 0 auto;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  /* Bolder industrial look */
}

.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background-color: var(--accent-wood);
  margin: 20px auto 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 34px;
  border: 1px solid var(--accent-wood);
  color: var(--accent-wood);
  font-family: var(--font-alt);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
}

.btn:hover {
  background: var(--accent-wood);
  background: var(--accent-wood);
  color: #000;
}

.btn:hover .btn-icon {
  filter: brightness(0);
  /* Make icon black on hover to match text */
}

.btn-icon {
  height: 24px;
  width: auto;
  filter: brightness(0) sepia(1) hue-rotate(5deg) saturate(2) brightness(0.9);
  /* Try to match gold/wood color? Or just white? */
  /* Actually default logo is likely colored. */
  /* Let's start with filter: brightness(0) invert(1) for white icon on dark bg */
  filter: brightness(0) invert(1) opacity(0.9);
  transition: all 0.3s ease;
}

/* =========
   NAVBAR
========== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 30px 50px;
  display: flex;
  justify-content: center;
  /* Center the menu since logo is gone */
  align-items: center;
  z-index: 1000;

  /* Glassmorphism / Blur Background */
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  /* Sticky Transition */
  transition: transform 0.3s ease, background 0.3s ease, padding 0.3s ease;
}

.no-transition {
  transition: none !important;
}

.site-header.is-pinned {
  position: fixed;
  background: rgba(10, 10, 12, 0.95);
  /* Darker solid background when pinned */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 15px 50px;
  /* Compress slightly */
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.logo-container {
  display: none;
}

/* Base Burger Menu Styles (Hidden on Desktop) */
.burger-menu {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2000;
}

.burger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--text-main);
  margin: 6px 0;
  transition: all 0.3s ease;
}

.navbar ul {
  display: flex;
  gap: 40px;
}

.navbar a {
  font-family: var(--font-alt);
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.navbar a:hover,
.navbar a.active {
  color: var(--accent-wood);
}

.bouton-contact {
  padding: 12px 28px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  /* Sharper edges */
}

.bouton-contact:hover {
  border-color: var(--accent-wood);
  background: rgba(212, 197, 169, 0.1);
}

/* =========
   HERO SECTION
========== */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  background: var(--bg-dark);
  /* Fallback */
  /* padding-top removed to let header overlay content */
}

/* LEFT SIDE - TEXT */
.hero-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Center horizontally in the left block */
  padding: 60px;
  background: radial-gradient(circle at top left, #1a1a1c, #0b0c0e);
  z-index: 2;
  position: relative;
}

.hero-content {
  max-width: 500px;
  text-align: left;
  /* Align text left */
}

.hero-subtitle {
  font-family: var(--font-alt);
  font-size: 0.9rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent-wood);
  margin-bottom: 20px;
  display: block;
  font-weight: 600;
}

.hero h1 {
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 30px;
  line-height: 1.1;
}

.hero-description {
  color: var(--text-muted);
  font-size: 1.3rem;
  margin-bottom: 40px;
  line-height: 1.6;
  max-width: 400px;
}

/* RIGHT SIDE - IMAGE */
.hero-right {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.hero-right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.5s ease-in-out, transform 8s linear;
}

.hero-right img.active {
  opacity: 1;
  transform: scale(1.1);
  z-index: 1;
}



/* RESPONSIVE HERO */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .hero-left {
    padding: 60px 20px;
    align-items: center;
    text-align: center;
  }

  .hero-content {
    text-align: center;
  }

  .hero-right {
    height: 50vh;
    width: 100%;
  }
}

/* =========
   PRESENTATION SECTION
========== */
.presentation-section {
  padding: var(--section-spacing) 0;
  background-color: var(--bg-dark);
}

.presentation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.presentation-text h2 {
  font-size: 2.8rem;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.presentation-text p {
  color: var(--text-muted);
  font-size: 1.15rem;
  text-align: justify;
  margin-bottom: 25px;
  font-weight: 300;
}

.presentation-image {
  position: relative;
}

.presentation-image img {
  filter: brightness(0.9) contrast(1.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.presentation-image::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  right: -20px;
  bottom: -20px;
  border: 1px solid var(--accent-wood);
  z-index: 2;
  /* Increased z-index to be ON TOP of map? No, map needs interaction. */
  /* Wait, if z-index is positive, it blocks. If -1, it is behind. */
  /* Logic check: Currently z-index is -1. 
     If it is -1, it might be behind the map if map is default z-index.
     But the request is "keep the design". 
     The overlay is a border. If it's behind the map, can we see it?
     The map is opaque. So if overlay is behind, it's invisible.
     The image was opaque too.
     So the overlay must have been visible because 'img' had no z-index?
     Actually line 351 .presentation-image { position: relative; }
     line 358 .presentation-image::after { ... z-index: -1; ... }
     If line 354 .presentation-image img { ... } (no z-index context, default auto/0)
     Then child (img, z=0) is stacked on top of child (::after, z=-1).
     So the overlay border was BEHIND the image?
     "top: 20px; left: 20px; right: -20px; bottom: -20px;"
     It sticks OUT from behind the image. Yes.
     So: we need the map to be like the image.
  */
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
  /* Just in case */
}

.presentation-image iframe {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  filter: brightness(0.9) contrast(1.1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
}

/* =========
   CAROUSEL SECTION
========== */
.carousel-section {
  padding: var(--section-spacing) 0;
  /* Darker background for contrast */
  background: #0b0c0e;
  position: relative;
  overflow: hidden;
}

.carousel-wrap {
  position: relative;
  width: 100%;
  /* No horizontal bars here */
  border: none !important;
  outline: none !important;
}

.carousel {
  position: relative;
  display: flex;
  gap: 20px;
  overflow-x: hidden;
  padding: 40px 0;
  /* Disable CSS scroll snap if JS handles it smoothly */
  scroll-behavior: auto;
  -webkit-overflow-scrolling: auto;
}

.carousel img {
  height: 450px;
  width: auto;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s ease;
  filter: brightness(0.8);
  /* Dim images slightly */
}

/* Highlight center image via JS or hover */
.carousel img:hover {
  transform: scale(1.05);
  filter: brightness(1);
  z-index: 10;
}

/* Navigation */
.carousel-nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-top: 20px;
  border: none;
  /* Ensure no artifacts */
}

.carousel-btn {
  width: 60px !important;
  height: 60px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
  border-radius: 0 !important;
  /* Square technical look or rounded? Let's go circle but clean */
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--text-main) !important;
  transition: all 0.3s ease;
  cursor: pointer;
}

.carousel-btn:hover {
  border-color: var(--accent-wood) !important;
  color: var(--accent-wood) !important;
  transform: scale(1.1);
}

.carousel-dots {
  display: flex;
  gap: 10px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-dot[aria-selected="true"] {
  background: var(--accent-wood);
  transform: scale(1.2);
}

/* =========
   REVIEWS SECTION
========== */
.reviews-section {
  padding: var(--section-spacing) 0;
  background-color: var(--bg-dark);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  margin-top: 80px;
}

.review-card {
  background: var(--bg-card);
  /* Glassy dark */
  padding: 50px 40px;
  border: 1px solid var(--border-light);
  transition: all 0.4s ease;
  position: relative;
  /* Add a "Corner" accent */
}

.review-card::before {
  content: "“";
  position: absolute;
  top: 20px;
  left: 30px;
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--accent-wood);
  opacity: 0.2;
  line-height: 1;
}

.review-card:hover {
  transform: translateY(-10px);
  border-color: var(--accent-wood);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.stars {
  color: var(--accent-gold);
  margin-bottom: 25px;
  font-size: 1rem;
  letter-spacing: 2px;
}

.review-text {
  font-style: normal;
  /* Cleaner */
  color: var(--text-main);
  margin-bottom: 30px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.review-author {
  font-family: var(--font-alt);
  font-weight: 700;
  color: var(--accent-wood);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 2px;
}

/* =========
   FOOTER (REDESIGN)
========== */
.site-footer {
  background: var(--bg-dark);
  border-top: 1px solid var(--border-light);
  padding: 80px 0;
  margin-top: 100px;
  font-family: var(--font-body);
}

.footer-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 60px;
}

/* Column 1: Brand */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  margin-bottom: 30px;
}

.footer-logo img {
  height: 50px;
  width: auto;
  filter: brightness(0.9);
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.footer-address,
.footer-hours {
  font-style: normal;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}

.footer-address strong,
.footer-hours strong {
  color: var(--text-main);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 5px;
}

/* Column 2: Nav */
.footer-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--accent-wood);
  text-transform: uppercase;
  margin-bottom: 30px;
  letter-spacing: 2px;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  text-decoration: none;
  color: var(--text-muted);
  transition: all 0.3s ease;
  font-size: 0.95rem;
  display: inline-block;
}

.footer-links a:hover {
  color: var(--accent-wood);
  transform: translateX(5px);
}

/* Column 3: Social */
.footer-socials {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.footer-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  color: var(--text-main);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  width: fit-content;
  color: #e8e9ed !important;
  /* Force visibility */
  font-weight: 500;
}

.footer-social-btn span {
  font-weight: 500;
  display: inline-block;
}

.footer-social-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--text-muted);
  transition: fill 0.3s ease;
}

.footer-social-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--accent-wood);
  transform: translateY(-2px);
}

.footer-social-btn:hover svg {
  fill: var(--accent-wood);
}

.footer-mail {
  display: inline-block;
  color: var(--accent-wood);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
  margin-bottom: 30px;
}

.footer-mail:hover {
  border-color: var(--accent-wood);
}

.footer-copy {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.2);
}

/* Responsive Footer */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 50px;
    text-align: center;
  }

  .footer-logo,
  .footer-socials {
    justify-content: center;
    align-items: center;
  }
}

/* =========
   RESPONSIVE
========== */
@media (max-width: 900px) {
  .site-header {
    padding: 20px;
  }

  .navbar {
    display: none;
  }

  .presentation-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .presentation-image {
    order: -1;
    margin-bottom: 20px;
  }

  .hero h1 {
    font-size: 3rem;
  }

  .carousel img {
    height: 300px;
  }

  .section-title {
    font-size: 2rem;
  }

  .presentation-text h2 {
    display: none !important;
  }
}

/* =========
   REALISATIONS / GALLERY PAGE
========== */

.page-hero {
  padding: 180px 0 80px;
  background: radial-gradient(circle at top, #1a1a1c, var(--bg-dark));
  text-align: center;
}

.page-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 20px;
  color: #fff;
}

.page-hero .subtitle {
  color: var(--accent-wood);
  font-family: var(--font-alt);
  font-size: 1.1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.gallery-section {
  padding-bottom: 120px;
  background-color: var(--bg-dark);
}

.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
  /* Enforce a consistency aspect ratio */
  flex: 0 1 350px;
  /* Base width */
  min-width: 300px;
  max-width: 100%;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: brightness(0.85);
}

.gallery-item:hover img {
  transform: scale(1.1);
  filter: brightness(1);
}

.gallery-item .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  /* Ensure overlay (click target) overlaps caption */
}

.gallery-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 5px 10px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-main);
  font-size: 0.9rem;
  z-index: 5;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.gallery-counter svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 15px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
  /* Gradient instead of flat color for better blend */
  color: #fff;
  font-family: var(--font-alt);
  font-size: 0.95rem;
  text-align: center;
  z-index: 1;
  pointer-events: none;
  /* Let clicks pass through to the item */
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gallery-item:hover .overlay {
  opacity: 1;
}

.zoom-icon {
  color: #fff;
  font-size: 2rem;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

/* LIGHTBOX */
.lightbox {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  /* Hidden by default but overridden by .active */
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.lightbox:not(.active) {
  display: none;
}

.lightbox.active {
  animation: fadeIn 0.3s;
}

/* Lightbox Track & Images */
.lightbox-track {
  position: relative;
  width: 100%;
  height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  margin-top: 20px;
}

.lightbox-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  max-width: 80%;
  object-fit: contain;
  transition: all 0.4s ease;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--border-light);
  pointer-events: auto;
  cursor: pointer;
}

.lightbox-img.no-transition {
  transition: none !important;
}

.lightbox-img.current {
  z-index: 10;
  opacity: 1;
  /* Transform handled by JS */
}

.lightbox-img.prev {
  z-index: 5;
  opacity: 0.3;
  filter: brightness(0.4);
  /* Transform handled by JS */
}

.lightbox-img.next {
  z-index: 5;
  opacity: 0.3;
  filter: brightness(0.4);
  /* Transform handled by JS */
}

/* Controls Container */
.lightbox-controls {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  z-index: 2005;
  pointer-events: auto;
}

.lightbox-nav-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

/* Navigation Buttons (Redesigned) */
.lightbox-nav {
  position: static;
  /* Reset absolute */
  transform: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
  padding: 0;
}

.lightbox-nav svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
}

.lightbox-nav:hover {
  background: var(--accent-wood);
  border-color: var(--accent-wood);
  transform: scale(1.1);
}

/* Dots */
.lightbox-dots {
  display: flex;
  gap: 10px;
}

.lightbox-dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  padding: 0;
}

.lightbox-dot.active,
.lightbox-dot:hover {
  background: var(--accent-wood);
  transform: scale(1.2);
}

/* Caption */
#caption {
  position: static;
  /* Reset absolute */
  text-align: center;
  color: #fff;
  /* Keep white */
  font-family: var(--font-alt);
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin: 0;
  max-width: 80%;
  text-shadow: none;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 2010;
}

.lightbox-close:hover {
  color: var(--accent-wood);
}

@media (max-width: 768px) {
  .lightbox-track {
    height: 60vh;
  }

  .lightbox-img {
    max-width: 95%;
  }
}




/* Mobile Adjustments (768px break) */
@media (max-width: 768px) {
  .burger-menu {
    display: block;
  }

  .site-header {
    justify-content: space-between;
    padding: 15px 20px;
  }

  /* Full Screen Mobile Menu */
  .navbar {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(10, 10, 12, 0.98);
    backdrop-filter: blur(10px);
    display: flex;
    /* Override previous display:none if set */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1500;
  }

  .navbar.is-active {
    transform: translateX(0);
    display: flex;
  }

  .navbar ul {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }

  .navbar a {
    font-size: 1.5rem;
  }

  /* Burger Animation */
  .burger-menu.is-active .burger-line:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
  }

  .burger-menu.is-active .burger-line:nth-child(2) {
    opacity: 0;
  }

  .burger-menu.is-active .burger-line:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
  }

  body.no-scroll {
    overflow: hidden;
  }

  /* Hero Stacking */
  .hero {
    flex-direction: column;
    padding-top: 100px;
    height: auto;
    min-height: 100vh;
    justify-content: center;
  }

  /* Hide Carousel on Mobile */
  .hero-right {
    display: none;
  }

  .hero-left {
    width: 100%;
    padding: 30px 20px;
    text-align: center;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  /* Map Below Text (Reordering) */
  .presentation-grid {
    display: flex;
    flex-direction: column;
  }

  /* Assuming map is .presentation-image or similar. 
     Let's check index.html again. 
     Ah, I need to know the class of the map container.
     Wait, looking at previous style.css read, there was .presentation-image ref at line 779.
     "order: -1" implies it was put on top. 
     To put it below, we can just use default order or order: 2.
     Let's set .presentation-image { order: 2; }
  */
  .presentation-image {
    order: 2;
    margin-bottom: 0;
    margin-top: 30px;
  }

  .presentation-text {
    order: 1;
  }

  /* Center Titles */
  .section-title,
  .footer-title,
  .gallery-section h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =========
   CONTACT PAGE
========== */
.contact-section {
  padding: 80px 0;
  background-color: var(--bg-dark);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

/* Info Column */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-intro {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.info-item i {
  color: var(--accent-wood);
  font-size: 1.5rem;
  margin-top: 5px;
}

.info-item h3 {
  font-family: var(--font-alt);
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-item p {
  color: var(--text-muted);
  font-size: 1rem;
}

/* Form Column */
.contact-form-wrapper {
  background: var(--bg-card);
  padding: 40px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  color: var(--accent-wood);
  font-family: var(--font-alt);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.form-group input,
.form-group textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 12px 15px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-wood);
  background: rgba(255, 255, 255, 0.08);
}

.btn-submit {
  width: 100%;
  margin-top: 10px;
  cursor: pointer;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mobile Responsiveness for Contact */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact-form-wrapper {
    padding: 30px 20px;
  }
}

/* Fix Atelier Title Alignment */
.atelier-info .section-title {
  left: auto;
  transform: none;
  display: block;
}

/* =========
   BEFORE / AFTER COMPARISON
========== */
.comparison-section {
  padding: 80px 0;
  background-color: var(--bg-dark);
  text-align: center;
}

.comparison-row {
  display: flex;
  gap: 70px;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  height: 500px;
  /* Fixed height for equality */
}

.comparison-row+.comparison-row {
  margin-top: 100px;
}

.comparison-col-1 {
  flex: 1;
  /* 1/3 width */
  min-width: 0;
  /* Prevent flex overflow */
}

.comparison-col-2 {
  flex: 2;
  /* 2/3 width */
  min-width: 0;
  /* Prevent flex overflow */
}

.comparison-col-full {
  width: 100%;
  flex: 1 1 100%;
}

.comparison-col-two-thirds {
  width: 66.66%;
  flex: 0 0 auto;
}

.comparison-row-centered {
  justify-content: center;
}

.comparison-caption {
  margin-top: 15px;
  font-family: var(--font-alt);
  font-size: 1.1rem;
  color: #fff;
}

/* Added caption style */

.comparison-container {
  position: relative;
  width: 100%;
  height: 100%;
  /* Fill column height */
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-light);
}

.comparison-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.slider-img {
  /* Default styles */
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

/* Background image defines the container size override */
.img-background {
  position: absolute;
  /* Changed from relative to absolute to fill fixed height */
  top: 0;
  left: 0;
}

/* Foreground image stays absolute */
.img-foreground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100% !important;
}

/* The "After" image wrapper (resizable) */
.slider-img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  border-right: 2px solid var(--accent-wood);
}

.slider-img-wrapper .slider-img {
  /* This css is somewhat redundant with JS logic but safe to keep reset */
  max-width: none;
}



/* BETTER APPROACH for Responsive: */
/* Both images absolute. Wrapper clips one. */
/* Image inside wrapper needs to be same size as container. */
.comparison-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider-img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}



/* Let's use a simpler verified technique: comparison-slider width is X. wrapper width is %. img inside wrapper must be width X. */
/* So img inside wrapper: width: 100% of container? */
/* We can use: width: (100 / current_percentage) * 100 % ? No */
/* We will handle the overlay image sizing in JS or simple CSS if we assume fixed aspect ratio. */
/* Let's force the images to be identical geometry. */

.slider-img-wrapper .slider-img {
  /* This is the tricky part for responsive overlay */
  /* A robust way is to use specific lengths or viewports. */
  /* However, for a simple implementation: */
  width: 100%;
  /* This is wrong if wrapper is 50%. */
}

/* Let's switch to a styling that works 100%: */

.comparison-slider .img-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparison-slider .img-foreground-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  z-index: 2;
}

.comparison-slider .img-foreground {
  height: 100%;
  object-fit: cover;
  /* Key to responsive overlay: */
  /* width must match the parent container width */
  /* We can set this in JS, or use a very large width and max-width 100%? No. */
  /* We will set the width of this image to match the container width via JS or simply use `width: auto; min-width: 100%;`? */
  /* Actually, simply `width: 100%` relative to `.comparison-slider` is indistinguishable if we didn't have the wrapper. */
  /* But the wrapper cuts it. */
  /* We can use `width: 200%` if wrapper is 50%? No. */

  /* We will rely on a trick: the inner image width is set to the container width in pixels by JS on load/resize? */
  /* Or slightly easier: Use background-images. */
  /* User provided PNGs. */
}

/* Re-evaluating: standard "before/after" css often uses background-image for the overlay to avoid this. */
/* But let's try to make it work with IDs and a tiny bit of JS to fix width if needed. */
/* Actually, there is a CSS trick: */
/* .img-foreground-wrapper { width: 50%; } */
/* .img-foreground { width: 100vw; max-width: 900px; } (assuming container max-width) */
/* This is "okay" but not perfect if container is smaller than max-width. */

/* Let's use the JS we wrote to also set the width of the foreground image to the slider width? */
/* No, simplest is: */
/* .slider-img-wrapper { ... } */
/* .slider-img-wrapper img { width: 100vw; max-width: 900px; ... } - this assumes full width container mostly. */

/* Wait/Refine: */
/* HTML structure:
   <div class="comparison-slider">
      <img src="before.jpg" alt="Before">
      <div class="slider-img-wrapper">
         <img src="after.jpg" alt="After">
      </div>
      <div class="slider-handle"></div>
   </div>
*/

/* CSS */
.comparison-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.comparison-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider-img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

/* FIX: The inner image needs to be the size of the PARENT container. */
.slider-img-wrapper img {
  width: auto;
  height: 100%;
  max-width: none;
  /* We will set specific dimension in JS or ensure the image is large enough? */
  /* Actually, defining a specific pixel width on the container allows strictly matching child img width. */
  /* If container is fluid, child img width must trigger layout. */
  /* Let's use a class logic: */
}

/* Let's just use a JS instruction to set the width of the foreground image to match the container width. */

.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 100%;
  margin-left: -20px;
  /* Center handle */
  z-index: 3;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-handle::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 100%;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.handle-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-wood);
  border: 2px solid #fff;
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  /* Animations */
  animation: pulseHandle 2s infinite;
}

@keyframes pulseHandle {
  0% {
    box-shadow: 0 0 0 0 rgba(199, 169, 117, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(199, 169, 117, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(199, 169, 117, 0);
  }
}


.handle-circle i {
  color: #fff;
}

.comparison-caption {
  margin-top: 20px;
  color: var(--text-muted);
  font-family: var(--font-alt);
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Mobile responsive fix */
@media (max-width: 768px) {
  .comparison-container {
    aspect-ratio: 4/5;
    /* Taller on mobile if needed, or keep 16/9 */
    aspect-ratio: 1/1;
  }
}