/* Icônes drapeaux boutons langue */
.flag-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 7px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.flag-de svg, .flag-fr svg {
  display: block;
}
/* Boutons de langue modernes */
.lang-switcher {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1200;
  display: flex;
  gap: 12px;
}
@media (max-width: 600px) {
  .container {
    padding: 8px;
  }
  .site-header > .container {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    justify-content: flex-start;
  }
  .brand {
    flex-direction: row;
    gap: 8px;
    width: 100%;
  }
  .logo {
    width: 56px;
    height: 56px;
    font-size: 1rem;
  }
  .brand-text {
    font-size: 0.95rem;
  }
  .lang-switcher {
    position: absolute;
    top: 8px;
    right: 8px;
    gap: 6px;
  }
  .lang-btn {
    padding: 4px 10px 4px 7px;
    font-size: 0.92rem;
    min-width: unset;
    border-width: 1px;
  }
  .flag-icon {
    margin-right: 4px;
    width: 16px;
    height: 12px;
  }
  .site-title {
    font-size: 1.1rem;
  }
  .site-tagline {
    font-size: 0.85rem;
  }
  .owner {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  .profile-image {
    max-width: 120px;
  }
  .profile-image img, .owner-photo {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
  }
  .nav-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }
  .btn, .btn-primary {
    padding: 8px 12px;
    font-size: 0.98rem;
    border-radius: 8px;
  }
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.92rem;
  border: 1px solid var(--accent);
  box-shadow: 0 1px 6px rgba(140,197,252,0.08);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.18s;
  position: relative;
  overflow: hidden;
}
.lang-btn:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 18px rgba(140,197,252,0.18);
  transform: translateY(-2px) scale(1.07);
}
/* Loader animé */
#loader-bg {
  position: fixed;
  z-index: 2000;
  inset: 0;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s;
}
.loader {
  border: 6px solid #e0c3fc;
  border-top: 6px solid #8ec5fc;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Effets hover modernes */
.btn, .carousel-btn, .date-btn, .slot {
  transition: transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.18s cubic-bezier(.4,0,.2,1), background 0.18s;
}
.btn:hover, .carousel-btn:hover, .date-btn:hover, .slot:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 4px 18px rgba(140, 197, 252, 0.18);
  background: var(--accent);
  color: #fff;
}

.gallery-grid img, .owner-photo, .profile-image img {
  transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s cubic-bezier(.4,0,.2,1);
}
.gallery-grid img:hover, .owner-photo:hover, .profile-image img:hover {
  transform: scale(1.04) rotate(-1deg);
  box-shadow: 0 8px 32px rgba(179, 95, 59, 0.18);
  z-index: 2;
}
/* Fade-in/slide-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(.4,0,.2,1), transform 0.8s cubic-bezier(.4,0,.2,1);
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}
@media (max-width: 600px) {
  .owner-photo {
    width: 220px;
    height: 220px;
    object-fit: contain;
    object-position: center center;
    display: block;
    margin-bottom: 10px;
  }
}
/* Styles simples et responsives */
:root{--accent:#b35f3b;--dark:#222;--muted:#666}
*{box-sizing:border-box}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  line-height:1.5;
  color:var(--dark);
  margin:0;
  min-height:100vh;
  background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
  background-attachment: fixed;
}

@keyframes gradientBG {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}
.container{max-width:1000px;margin:0 auto;padding:20px}
.site-header{background:#fafafa;border-bottom:1px solid #eee}
.site-header{background:#fff;border-bottom:1px solid #eee}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:88px;height:88px;border-radius:10px;background:#fff;color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.25rem;border:1px solid #f0f0f0;box-shadow:0 4px 12px rgba(0,0,0,0.06);transition:transform 0.25s cubic-bezier(.4,0,.2,1);}
.logo:hover {
  animation: logo-bounce 0.7s cubic-bezier(.4,0,.2,1);
}
@keyframes logo-bounce {
  0% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.12) rotate(-6deg); }
  40% { transform: scale(0.96) rotate(4deg); }
  60% { transform: scale(1.06) rotate(-2deg); }
  80% { transform: scale(0.98) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.brand-text{display:flex;flex-direction:column;background:rgba(255,255,255,0.0);}
.site-title{margin:0;font-size:1.6rem;font-weight:800;letter-spacing:0.4px;color:var(--dark)}
.site-tagline{margin:4px 0 0;font-size:0.95rem;color:var(--muted)}

/* Si un logo image est présent, l'adapter à la zone */
.logo img{width:100%;height:100%;object-fit:contain;border-radius:6px;display:block;background:#fff}

/* Carousel styles for client gallery */
.carousel{position:relative;display:flex;align-items:center;gap:8px}
.carousel .gallery-grid{display:flex;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:8px 4px;gap:10px}
.carousel .gallery-grid::-webkit-scrollbar{display:none}
.carousel .gallery-grid img{width:320px;height:220px;object-fit:cover;flex:0 0 auto;border-radius:6px;scroll-snap-align:center}
.carousel-btn{background:#fff;border:1px solid #eee;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent);font-size:20px;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.carousel-btn:disabled{opacity:0.45;cursor:not-allowed}

@media(max-width:720px){
  .carousel .gallery-grid img{width:260px;height:180px}
}

/* lightbox */
.gallery-grid img{cursor:pointer}
.lightbox{display:none;position:fixed;inset:0;z-index:1200;align-items:center;justify-content:center}
.lightbox[aria-hidden="false"]{display:flex}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6)}
.lightbox-inner{position:relative;max-width:92vw;max-height:92vh;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px}
.lightbox-img{max-width:100%;max-height:80vh;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.4)}
.lightbox-close{position:absolute;top:8px;right:8px;background:#fff;border:0;border-radius:6px;padding:6px 8px;cursor:pointer;font-size:18px}
.lightbox-opennew{display:inline-block;padding:6px 10px;background:#fff;border-radius:6px;border:1px solid #eee;color:var(--accent);text-decoration:none}

@media(max-width:720px){
  .lightbox-img{max-height:70vh}
}
/* Aligne le bouton de réservation à droite */
.nav-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  justify-content: flex-end;
  align-items: center;
}

/* Place the booking button directly to the right of the site title in the header */
.site-header > .container{display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{flex:0 1 auto}
/* Supprimé pour éviter de casser l'alignement à droite */

/* Larger booking button next to title */
.nav-actions .btn{padding:10px 18px;font-size:1rem;border-radius:10px;min-width:unset}
.nav-actions .btn-primary{padding:10px 18px;font-size:1rem;border-radius:10px}
.nav-actions #bookBtn{font-weight:700}

@media(max-width:720px){
  .site-header > .container{flex-direction:column;align-items:flex-start;gap:8px;justify-content:flex-start}
}
.btn{background:transparent;border:1px solid var(--accent);padding:8px 12px;border-radius:6px;color:var(--accent);text-decoration:none;cursor:pointer}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.owner{display:flex;gap:20px;align-items:center;margin:20px 0}
.profile-image {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  margin: 0 auto;
}
.profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  background: #f5f5f5;
}

@media (max-width: 768px) {
  .profile-image {
    aspect-ratio: auto;
    max-width: 200px;
  }
  .profile-image img {
    height: auto;
    object-fit: contain;
    object-position: center center;
  }
}
.owner-bio h2{margin:0 0 8px}
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gallery-grid img{width:100%;height:300px;object-fit:cover;border-radius:6px}
.map-wrapper iframe{width:100%;height:300px;border:0;border-radius:6px}
.contact .booking{display:flex;gap:10px;margin:10px 0}
.contact-form{display:grid;gap:8px}
.contact-form label{display:block}
.contact-form input,.contact-form textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:6px}
.site-footer{padding:16px;text-align:center;border-top:1px solid #eee;margin-top:30px;color:var(--muted)}

/* Booking slots styles */
.slots-section{margin-top:18px;border-top:1px dashed #eee;padding-top:16px}
.date-selector{display:flex;gap:8px;margin:10px 0}
.date-btn{padding:8px 10px;border-radius:6px;border:1px solid #ddd;background:#fff;cursor:pointer}
.date-btn.active{border-color:var(--accent);background:linear-gradient(180deg, #fff, #fff);box-shadow:0 1px 0 rgba(0,0,0,0.03)}
.slots-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:8px}
.slot{padding:10px;border-radius:6px;border:1px solid #ddd;text-align:center;cursor:pointer;background:#fafafa}
.slot.booked{background:#eee;color:#888;cursor:not-allowed}
.slot.selected{border-color:var(--accent);background:var(--accent);color:#fff}
.slots-note{font-size:0.9rem;color:var(--muted);margin-top:8px}
/* Horaires */
.hours{margin:12px 0;padding:10px;background:#fbfbfb;border:1px solid #f0f0f0;border-radius:6px}
.hours h4{margin:0 0 6px}
.hours-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.hours-list li{padding:6px 8px;border-radius:4px;background:#fff;border:1px solid #f2f2f2;font-size:0.95rem}
@media(max-width:720px){
  .brand{gap:8px}
  .logo{width:56px;height:56px}
  .site-title{font-size:1.2rem}
  .owner{flex-direction:column;align-items:flex-start}
  .owner-photo{width:100%;height:220px}
  .gallery-grid{grid-template-columns:1fr}
  .hours-list{grid-template-columns:1fr}
}

/* --- Modale personnalisée réservation --- */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  inset: 0;
  align-items: center;
  justify-content: center;
}
.modal[aria-hidden="false"] {
  display: flex;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}
.modal-content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 28px 24px 20px 24px;
  min-width: 320px;
  max-width: 95vw;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.7rem;
  color: #b35f3b;
  cursor: pointer;
}
.modal-field {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.modal-field input {
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
}
.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.modal-summary {
  font-size: 1.05rem;
  color: #222;
  margin-bottom: 6px;
}
.modal-error {
  font-size: 0.98rem;
  margin-bottom: 6px;
}