/* ------------------------------
   🌴 Villa Tozeur - Styles
--------------------------------*/
:root{
  --brand:#a85d1b;
  --brand-dark:#8b4513;
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#fffdf9;
  --paper:#fff7ef;
  --accent:#003580; /* Booking blue */
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --radius:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;border-radius:10px}
.container{width:min(1100px,92%);margin-inline:auto}

/* Header */
.site-header{ position: sticky; top:0; z-index:30; background: rgba(255,255,255,.8); backdrop-filter: saturate(1.2) blur(8px); border-bottom:1px solid #f0e6da }
.header-flex{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.7rem 0 }
.logo-link{ display:flex; align-items:center; gap:.5rem }
.site-logo{ width:110px; height:auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.2)); transition:transform .25s ease }
.site-logo:hover{ transform:scale(1.05) }
.main-nav{ display:flex; gap:1rem; align-items:center }
.site-header nav a{ color:var(--text); text-decoration:none; padding:.35rem .6rem; border-radius:10px; border:1px solid transparent }
.site-header nav a:hover{ border-color:#eee }

/* Hero */
.hero{ background: url("images/hero.webp") center/cover no-repeat; color: white; min-height: 58vh; position:relative; display:flex; align-items:center; border-bottom: 6px solid #c99853 }
.hero::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.45) }
.hero .hero-text{ position:relative; z-index:2; padding: 52px 0; max-width: 760px; text-align:center; margin:0 auto }
.hero h2{ font-size:clamp(2.0rem,3.8vw,2.9rem); margin:0 0 16px; text-shadow: 0 2px 10px rgba(0,0,0,.45) }
.hero p{ font-size:1.06rem; color:#f5f7fa; margin:0 0 18px; text-shadow: 0 1px 8px rgba(0,0,0,.35) }
.btn,.btn-outline{ display:inline-block; font-weight:700; text-decoration:none; border-radius:10px; padding:.75rem 1.05rem; transition:filter .2s ease, background .2s ease, color .2s ease; box-shadow: var(--shadow) }
.btn{ background: var(--brand); color:#fff; border:1px solid rgba(0,0,0,.05) }
.btn:hover{ filter:brightness(1.05) }
.btn-outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.6) }
.btn-outline:hover{ background:rgba(255,255,255,.1) }
.btn.booking{ background: var(--accent); color:#fff }
.btn.whatsapp{ background:#25D366; color:#041 }
.cta{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center }
.hint{ color:#fff; background: rgba(0,0,0,.38); padding:.25rem .6rem; border-radius:999px; display:inline-flex; align-items:center; gap:.35rem; text-shadow: 0 1px 2px rgba(0,0,0,.5) }
.hint a{ color:#fff; font-weight:700; text-decoration: underline; text-underline-offset: 2px }
.hint .star{ filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)) }

/* Gallery (8 photos, 2 lignes sur desktop) */
#gallery{ background: var(--paper); padding: 56px 0; text-align:center }
#gallery h2{ color: var(--brand-dark); margin:0 0 18px }
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonnes -> 2 lignes pour 8 photos */
  gap:14px;
  justify-content:center;
  align-items:start;
}
@media (max-width: 920px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px){
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
.gallery-item{ position:relative; overflow:hidden; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.1); cursor:pointer; background:#fff }
.gallery-item img{ width:100%; aspect-ratio:4 / 3; object-fit:cover; transition: transform .3s ease; display:block }
.gallery-item:hover img{ transform: scale(1.04) }
/* Overlays */
.gallery-item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.35rem .55rem;
  background: linear-gradient( to top, rgba(0,0,0,.55), rgba(0,0,0,0) );
  color:#fff; font-weight:700; letter-spacing:.2px;
  opacity:0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  border-radius:0 0 10px 10px; pointer-events:none;
}
.gallery-item::after{
  content: attr(data-label);
  position:absolute; top:10px; left:10px;
  background: rgba(0,0,0,.55);
  color:#fff; font-size:.8rem; font-weight:700;
  padding:.25rem .5rem; border-radius:999px;
  opacity:0; transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.gallery-item:hover figcaption, .gallery-item:hover::after{ opacity:1; transform: translateY(0) }
@media (hover:none){
  .gallery-item figcaption, .gallery-item::after{ opacity:1; transform:none }
}

/* Details */
#details{ background:#fdf6ef; border-top:6px solid #c99853; border-bottom:6px solid #c99853 }
#details .container{ padding: 56px 0 }
#details h2{ color:var(--brand-dark); margin:0 0 14px }
.amenities{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:12px; margin-top:14px }
.amenity{ display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid #f0e6da; border-radius:12px; padding:.55rem .75rem; box-shadow: 0 4px 12px rgba(0,0,0,.05); font-weight:600 }
.amenity .emoji{ font-size:1.25rem }
.detail-icon{ width:22px; height:22px; color:var(--brand) }
.amenity:hover .detail-icon{ color:#00b7ff }

/* Sections riches */
#about, #amenities-extended, #nearby, #faq { padding: 48px 0; background:#fff }
#location.soft, #house-rules.soft, #booking-info.soft, #why-tozeur { padding:48px 0; background: var(--paper) }
#about h2, #amenities-extended h2, #nearby h2, #faq h2, #location h2, #house-rules h2, #booking-info h2, #why-tozeur h2{ color: var(--brand-dark); margin: 0 0 12px; text-align: left }
#about p, #amenities-extended p, #nearby p, #location p, #house-rules p, #booking-info p { margin: 0 0 10px }
.ticks{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:.35rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.ticks li{ position:relative; padding-left:26px }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:#1a8f2b; font-weight:800 }

/* Pourquoi Tozeur */
.tozeur-gallery{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin-top: 20px }
.tozeur-gallery img{ width: 100%; height: 220px; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); transition: transform .3s ease, box-shadow .3s ease }
.tozeur-gallery img:hover{ transform: scale(1.03); box-shadow: 0 6px 14px rgba(0,0,0,0.25) }

/* Pricing */
#pricing{ background: var(--paper); padding: 56px 0; text-align:center; border-top:6px solid #c99853; border-bottom:6px solid #c99853 }
#pricing h2{ color: var(--brand-dark); margin:0 0 16px }
#pricing p{ max-width:760px; margin:0 auto 24px; color:var(--muted) }
.pricing-table{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px }
.season{ background:#fff; border-radius:12px; padding:22px; width:300px; box-shadow: var(--shadow); border:1px solid #f0e6da; transition:transform .25s ease, box-shadow .25s ease }
.season:hover{ transform:translateY(-3px) }
.season h3{ color:var(--brand-dark); margin:0 0 8px }
.season .period{ font-style:italic; color:#6b5c4b; margin:0 0 12px }
.season table{ width:100%; border-collapse:collapse; font-size:.98rem }
.season table th{ background: var(--brand); color:#fff; padding:8px; border-radius:6px 6px 0 0 }
.season table td{ padding:8px; border-bottom:1px solid #f0e6da }
.season table tr:last-child td{ border-bottom:none }
.season.high{ background:#fde9d5; border:2px solid #c99853 }
.center-btn{ margin-top: 16px }

/* Reviews */
#reviews{ background:#fff; padding: 56px 0; text-align:center }
#reviews h2{ color:var(--brand-dark); margin:0 0 12px }

/* Contact */
#contact{ background:#f5e8d8; padding:56px 0; text-align:center }
#contact h2{ color:var(--brand-dark); margin:0 0 14px }
#contact form{ max-width:620px; margin:0 auto; text-align:left }
#contact label{ display:block; margin-top:14px; color:#333; font-weight:700 }
#contact input,#contact textarea{ width:100%; padding:10px 12px; margin-top:6px; border:1px solid #e0d4c4; border-radius:10px; font-family:inherit; background:#fff }
#contact .hp{ display:none !important }
#contact button.btn{ margin-top:16px }
.form-hint{ color:var(--muted); font-size:.92rem; margin-top:6px }
.contact-info{ margin-top:26px }
.contact-info a{ color: var(--brand); text-decoration:none }
.contact-info a:hover{ text-decoration:underline }

/* Map */
#map{ background: var(--paper); padding: 56px 0; text-align:center }
.map-wrap iframe{ width:100%; height:450px; border:0; border-radius:10px }

/* Footer */
footer{ background: var(--brand); color:#fff }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 18px 0 }
footer a{ color:#fff; opacity:.9; text-decoration:none; margin-left:10px }
footer a:hover{ opacity:1 }

/* Lightbox */
.lightbox{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.9); justify-content:center; align-items:center; z-index:1000; overflow:hidden }
.lightbox.open{ display:flex }
.lightbox img{ max-width:94vw; max-height:90vh; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.5) }
.lightbox .close-btn{ position:absolute; top:16px; right:20px; font-size:36px; color:#fff; cursor:pointer; opacity:.9 }
.lightbox .arrow{ position:absolute; top:50%; transform:translateY(-50%); font-size:44px; color:#fff; cursor:pointer; user-select:none; padding:.2rem .6rem; background:rgba(0,0,0,.25); border-radius:10px }
.lightbox .arrow.left{ left:16px }
.lightbox .arrow.right{ right:16px }
.lightbox .counter{ position: absolute; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.45); color: #fff; padding: .3rem .8rem; border-radius: 10px; font-weight: 600; font-size: .95rem; white-space: nowrap; pointer-events: none }
.lightbox .fs-btn{ position:absolute; top:16px; left:20px; font-size:18px; color:#fff; cursor:pointer; background: rgba(0,0,0,.35); padding:.35rem .6rem; border-radius:8px }
body.lb-open{ overflow:hidden }

/* WhatsApp bouton flottant */
.whatsapp-float{ position:fixed; width:56px; height:56px; right:22px; bottom:22px; z-index:50; background:#25D366; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow: 0 6px 22px rgba(0,0,0,.25); transition: transform .2s ease, filter .2s ease }
.whatsapp-float:hover{ transform:scale(1.07); filter:brightness(1.05) }

/* Responsive */
@media (max-width: 860px){
  .main-nav{ gap:.5rem }
  .footer-inner{ flex-direction:column }
}

/* === Correctifs galerie et lightbox (inchangés) ... (contenu original conservé) === */

/* Hauteur réelle du header (logo + padding) */
:root { --header-h: 96px; }  /* ajuste à 100–120 si besoin */
section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }
html { scroll-behavior: smooth; }
section h2:first-of-type { margin-top: 0.2em; }
@media (max-width: 860px){
  :root { --header-h: 84px; }
}

/* ===== NAV MOBILE d'origine (conservée) ===== */
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem .5rem; border-radius:10px }
.nav-toggle .bar{ display:block; width:24px; height:2px; background:#333; margin:5px 0; transition:transform .2s ease, opacity .2s ease }
.site-header{ position: sticky; top:0; z-index:1000; }
:root { --header-h: 96px; }
section[id]{ scroll-margin-top: calc(var(--header-h) + 8px); }
html{ scroll-behavior:smooth; }

@media (max-width: 860px){
  :root { --header-h: 84px; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .main-nav{ display:flex; gap:1rem; }
  .main-nav{
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    background: #ffffff;
    border-bottom: 1px solid #eee;
    padding: 12px 16px;
    gap: .6rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
    z-index: 999;
  }
  body.nav-open .main-nav{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open{ overflow:hidden; }
  body.nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle .bar:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* ===== NAV MOBILE duplicated block (conservé) ===== */
.site-header{ position: sticky; top:0; z-index:1000; }
.nav-toggle{ display:none; background:transparent; border:0; cursor:pointer; padding:.4rem .5rem; border-radius:10px }
.nav-toggle .bar{ display:block; width:24px; height:2px; background:#333; margin:5px 0; transition:transform .2s ease, opacity .2s ease }
.main-nav{ display:flex; gap:1rem; align-items:center; }
:root { --header-h: 96px; }
section[id]{ scroll-margin-top: calc(var(--header-h) + 8px); }
html{ scroll-behavior:smooth; }

@media (max-width: 860px){
  :root { --header-h: 84px; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .main-nav{
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    background: #ffffff;
    border-bottom: 1px solid #eee;
    padding: 12px 16px;
    gap: .6rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
    z-index: 999;
  }
  body.nav-open .main-nav{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  body.nav-open{ overflow:hidden; }
  body.nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle .bar:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}


/* ===== OVERRIDES FINAUX (prioritaires) ===== */

/* Desktop (>=861px) : menu visible, bouton caché */
@media (min-width:861px){
  .nav-toggle{ display:none !important; }
  .main-nav{
    display:flex !important;
    align-items:center !important;
    gap:1rem !important;
    position:static !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:0 !important;
    border:0 !important;
    z-index:auto !important;
  }
}

/* Mobile (<=860px) : bouton visible, nav en panneau */
@media (max-width:860px){
  .nav-toggle{ display:inline-flex !important; align-items:center !important; gap:.45rem !important; padding:.5rem .6rem !important; border:0 !important; background:transparent !important; border-radius:10px !important; cursor:pointer !important; }
  .nav-toggle .burger{ display:inline-flex !important; flex-direction:column !important; line-height:0 !important; }
  .nav-toggle .bar{ width:24px !important; height:2px !important; background:#333 !important; margin:5px 0 !important; transition:transform .2s ease, opacity .2s ease !important; }
  .main-nav{
    position:fixed !important; top:var(--header-h,84px) !important; left:0 !important; right:0 !important;
    flex-direction:column !important; background:#fff !important; border-bottom:1px solid #eee !important;
    padding:12px 16px !important; gap:.6rem !important; box-shadow:0 12px 30px rgba(0,0,0,.08) !important;
    opacity:0 !important; transform:translateY(-10px) !important; pointer-events:none !important; z-index:1001 !important;
    transition:transform .2s ease, opacity .2s ease !important;
  }
  body.nav-open .main-nav{ opacity:1 !important; transform:translateY(0) !important; pointer-events:auto !important; }
  body.nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(7px) rotate(45deg) !important; }
  body.nav-open .nav-toggle .bar:nth-child(2){ opacity:0 !important; }
  body.nav-open .nav-toggle .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg) !important; }
}/* --- Correction format images galerie 4:3 --- */
.gallery-item img {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  height: auto !important;
  border-radius: 10px;
  display: block;
}
@media (max-width: 680px) {
  .gallery-grid {
    grid-template-columns: repeat(1, 1fr) !important; /* 1 image par ligne */
  }
}

/* Conditions de séjour */
#conditions h2{ margin:24px 0 8px; }
.rules-table{ width:100%; border:1px solid var(--border); border-radius:12px; border-collapse:collapse; overflow:hidden; box-shadow:var(--shadow); background:#fff; }
.rules-table th, .rules-table td{ padding:12px; text-align:left; vertical-align:top; }
.rules-table th{  width: 130px;; background:var(--sec); }
.rules-table tr:nth-child(odd) td{ background:#fafafa; }
.rules-list{ margin:14px 0; padding-left:18px; }
.rules-list li{ margin:6px 0; }