/* ===========================
   Clinique El Kindy – UI/UX v2
   Focus: performance, accessibilité, responsive, dark-mode, polish
   =========================== */

/* 0) Design tokens */
:root{
  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --card: #ffffff;
  --text: #0b1220;
  --muted: #6b7280;
  --muted-2:#9ca3af;
  --border: #e5e7eb;
  --accent: #00c4cc;
  --accent-2:#009ea4;
  --brand-dark:#000000;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --shadow-md:0 10px 25px rgba(0,0,0,.10);
  --shadow-lg:0 20px 40px rgba(0,0,0,.12);
  --radius: 14px;
  --radius-sm:10px;
  --section-pad: clamp(3rem, 5vw, 5rem);
}

/* Dark mode auto (si le système est sombre) */
/*@media (prefers-color-scheme: dark){
  /*:root{
  /*  --bg:#0f1216;
  /*  --bg-soft:#121821;
   /* --card:#141922;
  /*  --text:#ffffff; /* fully white for maximum contrast */
  /*  --muted:#b4bdca;
  /*  --muted-2:#9fb0c7;
  /*  --border:#1e2633;
  /*  --shadow-sm:0 1px 3px rgba(0,0,0,.6);
  /*  --shadow-md:0 10px 25px rgba(0,0,0,.55);
  /*  --shadow-lg:0 20px 40px rgba(0,0,0,.5);
 /* }

  body, p, h1, h2, h3, h4, h5, h6, span, a {
    color: var(--text) !important;
  }
}*/

/* 1) Reset & base */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;text-size-adjust:100%}
body{
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
img,svg,video,canvas{max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{font:inherit}
:focus{outline:none}
:focus-visible{outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px}
/* Effet machine à écrire */
#typewriter {
  display:inline-block; white-space:nowrap; overflow:hidden;
  border-right:0.12em solid currentColor; animation: twBlink .8s steps(1) infinite;
}
@keyframes twBlink { 50% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce){ #typewriter{ animation:none; border-right:none; } }


/* Fluid type */
h1{font-weight:800;line-height:1.1;font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem)}
h2{font-weight:800;line-height:1.15;font-size: clamp(1.5rem, 1.2vw + 1rem, 2.25rem)}
h3{font-weight:700;line-height:1.2;font-size: clamp(1.125rem, .6vw + 1rem, 1.5rem)}
p{margin-bottom:1rem}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(1rem, 2.5vw, 2rem)}

/* 2) Header */
.header{
  position: sticky; top:0; inset-inline:0; z-index:1000;
  background-color: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
  transition: background .25s ease, box-shadow .25s ease;
}
.header.scrolled{box-shadow: var(--shadow-sm)}
.header-content{display:flex;justify-content:space-between;align-items:center;height:4rem}
.logo h1{font-size:1.25rem;margin:0}
.logo-accent{color: var(--muted)}
.nav{display:flex;gap:1.5rem}
.nav-link{
  background:none;border:none;color:var(--muted);font-weight:600;cursor:pointer;
  position:relative;padding:.25rem 0;transition:color .2s ease;
}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent);
  transition:width .25s ease;
}
.nav-link:hover{color:var(--text)}
.nav-link:hover::after{width:100%}
.header-actions{display:flex;align-items:center;gap:.75rem}
.phone-link{display:flex;align-items:center;gap:.5rem;color:var(--muted)}
.phone-link:hover{color:var(--text)}
.mobile-menu-btn{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer}

/* 3) Buttons */
.btn-primary,.btn-secondary,.btn-accent,.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.2rem;border-radius: var(--radius-sm);
  border:1px solid transparent;cursor:pointer;transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
}
.btn-primary{background: var(--brand-dark); color:#fff; box-shadow: var(--shadow-sm)}
.btn-primary:hover{transform: translateY(-1px); box-shadow: var(--shadow-md); background:#111}
.btn-secondary{background: transparent; color: var(--muted); border-color: var(--border)}
.btn-secondary:hover{color: var(--text); border-color: var(--text)}
.btn-accent{background: var(--accent); color:#fff}
.btn-accent:hover{background: var(--accent-2); transform: translateY(-1px)}
.btn-ghost{background: transparent; color: var(--muted); border-color: color-mix(in srgb, var(--text) 12%, transparent)}
.btn-ghost:hover{background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text)}

/* 4) Mobile nav */
.mobile-menu{display:none;background: var(--card); border-top:1px solid var(--border)}
.mobile-menu-content{padding: 1rem 0}
.mobile-nav-link{
  display:block;background:none;border:none;color:var(--muted);font-weight:600;cursor:pointer;
  padding:.9rem 0;text-align:left;width:100%;
}
.mobile-nav-link:hover{color:var(--text)}
.mobile-actions{padding-top:1rem;border-top:1px solid var(--border);margin-top:1rem}
.mobile-phone{display:flex;align-items:center;gap:.5rem;color:var(--muted);text-decoration:none;margin-bottom:.75rem}
.mobile-cta{width:100%;justify-content:center}

/* 5) Hero */
.hero{
  padding: calc(4rem + var(--section-pad)) 0 var(--section-pad);
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--bg) 100%);
  min-height: 88vh; display:flex; align-items:center;
}
.hero-content{display:grid;grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 3vw, 3rem); align-items:center}
.hero-accent{color: var(--muted)}
.hero-subtitle,.hero-description,.hero-location{color: var(--muted)}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin: 1rem 0 1.25rem}
.hero-btn{padding:1rem 1.4rem}
.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding-top:1.25rem;border-top:1px solid var(--border)
}
.stat{text-align:center}
.stat-number{font-size:clamp(1.2rem, .8vw + .9rem, 1.75rem);font-weight:800}
.stat-label{font-size:.9rem;color:var(--muted)}
.hero-visual{position:relative}
.hero-image{aspect-ratio: 1; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-md)}
.hero-image img{width:100%;height:100%;object-fit:cover;transition: transform .5s ease}
.hero-image:hover img{transform: scale(1.04)}
.hero-badge{
  position:absolute;bottom:-1.2rem;left:-1.2rem;background: var(--card);padding:1rem;border-radius:12px;
  box-shadow: var(--shadow-md); border:1px solid var(--border); display:flex;align-items:center;gap:.6rem
}
.status-indicator{width:.7rem;height:.7rem;background: var(--success);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* 6) Sections génériques */
section{padding: var(--section-pad) 0}
.section-header{margin-bottom: clamp(1.5rem, 2.5vw, 3rem)}
.section-header.centered{text-align:center}
.section-description{font-size:clamp(1rem, .6vw + .9rem, 1.125rem);color:var(--muted);max-width:48rem;margin:0 auto}
.text-accent{color: var(--muted)}
.text-accent-light{color: var(--muted-2)}

/* 7) About */
.about{background: var(--bg)}
.about-content{display:grid;grid-template-columns:1fr 1fr;gap: clamp(1.5rem, 3vw, 3rem);align-items:center}
.features{display:flex;flex-direction:column;gap:1.25rem}
.feature{display:flex;gap:1rem}
.feature-icon{
  flex-shrink:0;width:3rem;height:3rem;background: var(--bg-soft);border-radius: .9rem;
  display:flex;align-items:center;justify-content:center;color: var(--muted)
}
.feature-content h3{font-weight:700;margin-bottom:.35rem}
.feature-content p{color: var(--muted);margin:0}
.location-info{background: var(--bg-soft);border-radius: var(--radius);padding:2rem;border:1px solid var(--border)}
.location-details{display:flex;flex-direction:column;gap:1rem}
.location-address{display:flex;gap:.75rem}
.location-address i{color: var(--muted);margin-top:.25rem}
.address-line{font-weight:700}
.address-city{color: var(--muted)}
.facilities{background: var(--card);border:1px solid var(--border);border-radius:.9rem;padding:1rem}
.facilities h4{font-weight:700;margin-bottom:.6rem}
.facilities ul{list-style:none}
.facilities li{color: var(--muted);font-size:.95rem;margin-bottom:.45rem}
.location-btn{width:100%;justify-content:center}

/* 8) Services */
.services{background: var(--bg-soft)}
.services-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: clamp(1rem, 2.5vw, 2rem)}
.service-card{
  background: var(--card);border-radius: var(--radius);padding: clamp(1.25rem, 2vw, 2rem);
  box-shadow: var(--shadow-sm);border:1px solid var(--border);transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--border))}
.service-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem}
.service-icon{
  width:3.5rem;height:3.5rem;background: var(--bg-soft);border-radius:.9rem;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color: var(--muted);transition: all .25s ease
}
.service-card:hover .service-icon{background: var(--brand-dark); color:#fff}
.service-description{color: var(--muted);margin-bottom:1.1rem}
.service-items h4{font-weight:700;font-size:.95rem;margin-bottom:.6rem}
.service-items ul{list-style:none}
.service-items li{
  color: var(--muted);font-size:.95rem;margin-bottom:.3rem;display:flex;align-items:center;
}
.service-items li::before{
  content:"";width:.4rem;height:.4rem;background: var(--muted-2);border-radius:50%;margin-right:.6rem;flex-shrink:0;
}

/* 9) Values */
.values{background: var(--brand-dark); color:#fff}
.values .text-accent-light{color:#c9d2df}
.values-quote{
  font-size:clamp(1.05rem, .6vw + 1rem, 1.25rem);font-style:italic;color:#d1d7e0;
  max-width:64rem;margin:0 auto 2.2rem;line-height:1.6
}
.objectives-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1.5rem; margin-bottom: clamp(2rem, 4vw, 4rem)}
.objective{text-align:center}
.objective-icon{width:4rem;height:4rem;background:#222;border-radius:1rem;display:flex;align-items:center;justify-content:center;margin:0 auto .9rem}
.objective h3{font-weight:700;margin-bottom:.6rem}
.objective p{color:#aab3bf;font-size:.95rem;margin:0}
.engagement{background:#0c0f14;border:1px solid #1d2531;border-radius: var(--radius);padding: clamp(1.5rem, 3vw, 3rem); text-align:center; max-width:64rem;margin:0 auto}
.engagement h3{margin-bottom:.6rem}
.engagement p{color:#d0d6e0}

/* 10) Patient Journey */
.patient-journey{background: var(--bg)}
.journey-steps{display:flex;flex-direction:column;gap: clamp(2rem, 4vw, 4rem)}
.journey-step{display:grid;grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 3rem); align-items:center}
.journey-step.reverse{direction: rtl}
.journey-step.reverse>*{direction:ltr}
.step-content{display:flex;flex-direction:column;gap:1rem}
.step-header{display:flex;align-items:center;gap:1rem}
.step-icon{width:4rem;height:4rem;background: var(--brand-dark);color:#fff;border-radius:1rem;display:flex;align-items:center;justify-content:center;font-size:2rem}
.step-number{font-size: clamp(2.2rem, 3vw, 3.4rem);font-weight:800;color: color-mix(in srgb, var(--text) 8%, var(--border))}
.step-content p{color: var(--muted)}
.learn-more{background:none;border:none;color: var(--text);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:.4rem}
.learn-more:hover{color: var(--muted)}
.learn-more .arrow{transition: transform .2s ease}
.learn-more:hover .arrow{transform: translateX(4px)}
.step-image{aspect-ratio:16/9;border-radius: var(--radius);overflow:hidden;box-shadow: var(--shadow-sm)}
.step-image img{width:100%;height:100%;object-fit:cover;transition: transform .5s ease}
.step-image:hover img{transform: scale(1.04)}

/* 11) Testimonials */
.testimonials{background: var(--bg-soft)}
.testimonials-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); margin-bottom:2rem}
.testimonial-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.25rem, 2vw, 2rem); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .25s ease
}
.testimonial-card:hover{transform: translateY(-2px); box-shadow: var(--shadow-md)}
.quote-icon{position:absolute;top:1.2rem;right:1.2rem;font-size:2rem;color: color-mix(in srgb, var(--text) 8%, transparent)}
.rating{display:flex;gap:.25rem;margin-bottom:.7rem}
.rating i{color:#fbbf24}
.testimonial-text{color: var(--muted);margin-bottom:1rem}
.testimonial-footer{display:flex;justify-content:space-between;align-items:flex-start;padding-top:1rem;border-top:1px solid var(--border)}
.patient-info h4{font-weight:700}
.patient-info p{color: var(--muted);font-size:.92rem}
.service-tag span{background: var(--bg-soft);color: var(--muted);padding:.25rem .5rem;border-radius:.35rem;font-size:.8rem}
.testimonials-summary{text-align:center}
.testimonials-summary p{color: var(--muted);margin-bottom:1rem}
.rating-summary{display:flex;justify-content:center;align-items:center;gap:.75rem}
.stars{display:flex;align-items:center;gap:.25rem}
.stars i{color:#fbbf24}
.rating-score{margin-left:.5rem;font-weight:700;color: var(--muted)}
.rating-count{color: var(--muted-2)}

/* 12) Gallery */
.gallery{background: var(--bg)}
.gallery-grid{display:grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-bottom:2rem}
.gallery-item{
  position:relative; aspect-ratio:16/9; background: var(--bg-soft); border:1px solid var(--border);
  border-radius: var(--radius); overflow:hidden; cursor:pointer; transition: transform .2s ease, box-shadow .25s ease
}
.gallery-item:hover{transform: translateY(-2px); box-shadow: var(--shadow-md)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition: transform .45s ease}
.gallery-item:hover img{transform: scale(1.06)}
.gallery-overlay{
  position:absolute; inset:0; background: rgba(0,0,0,0); display:flex; align-items:center; justify-content:center;
  transition: all .25s ease; opacity:0
}
.gallery-item:hover .gallery-overlay{background: rgba(0,0,0,.42); opacity:1}
.gallery-overlay i{font-size:2rem;color:#fff}
.gallery-info{
  position:absolute; left:0; right:0; bottom:0; padding:1rem;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
}
.gallery-info h3{color:#fff}
.gallery-info p{color: rgba(255,255,255,.85); font-size:.92rem}
/* Highlighted 360 hero row */
.gallery-hero-360{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}
.gallery-360-card{
  position:relative; border:1px solid var(--border); background:var(--card);
  border-radius: var(--radius); overflow:hidden; cursor:pointer; padding:0; width:100%;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.gallery-360-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.gallery-360-media{ position:relative; aspect-ratio: 16/9; }
.gallery-360-media img{ width:100%; height:100%; object-fit:cover; filter: saturate(1.02) contrast(1.02); }
.gallery-360-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.45));
  color:#fff; font-weight:700; letter-spacing:.2px;
}
.gallery-360-overlay i{ font-size:1.6rem }
.gallery-360-copy{
  background: var(--bg-soft); border:1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.gallery-360-copy h3{ margin-bottom:.35rem }
.gallery-360-copy p{ color: var(--muted); margin-bottom: .9rem }
.gallery-360-actions{ display:flex; gap:.6rem; flex-wrap:wrap }
/* Center the 360° CTA perfectly */
.gallery-cta {
  display: flex;
  flex-direction: column;
  align-items: center;      /* centers the note too */
  gap: 8px;
  text-align: center;
}

.gallery .gallery-cta .tour360-btn {
  display: block;           /* was inline-flex */
  margin-inline: auto;      /* centers horizontally */
}


/* Grid enhancements */
.gallery-grid.pro{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.gallery-item{ position:relative; background:var(--bg-soft); border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; cursor:pointer; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease }
.gallery-item:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 25%, var(--border)) }
.gallery-item.wide{ grid-column: span 2 }
.gallery-item.tall img{ aspect-ratio: 3/4; object-fit:cover }
.gallery-item img{ width:100%; height:auto; display:block }
.gallery-info{ position:absolute; left:0; right:0; bottom:0; padding: .9rem; background: linear-gradient(to top, rgba(0,0,0,.55), transparent) }
.gallery-info h3{ color:#fff; margin:0 0 .2rem }
.gallery-info p{ color: rgba(255,255,255,.85); margin:0; font-size:.92rem }
.gallery-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0); opacity:0; transition: all .25s ease }
.gallery-item:hover .gallery-overlay{ background: rgba(0,0,0,.4); opacity:1 }
.gallery-overlay i{ color:#fff; font-size: 1.6rem }

/* 360 modal iframe sizing */
.modal-360{ max-width: 1100px; width: 100% }
.iframe-wrap{ position:relative; width:100%; aspect-ratio: 16/9; background: #000; border-radius: .6rem; overflow:hidden }
#tour360{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.modal-360-hint{ color: var(--muted); text-align:center; margin-top:.6rem; font-size:.92rem }

/* Responsive */
@media (max-width: 980px){
  .gallery-hero-360{ grid-template-columns: 1fr; }
  .gallery-item.wide{ grid-column: auto; }
}

/* 13) Reservation */
.reservation{background: var(--bg-soft)}
.reservation-form-container{
  max-width:64rem; margin:0 auto; background: var(--card); border:1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 3vw, 3rem)
}
.reservation-form{display:flex;flex-direction:column;gap:1.25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-group{display:flex;flex-direction:column}
.form-group label{font-weight:700;margin-bottom:.4rem;font-size:.95rem}
.input-wrapper{position:relative}
.input-wrapper i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color: var(--muted-2)}
.input-wrapper input,.input-wrapper textarea,.form-group select{
  width:100%; padding:.8rem .8rem .8rem 2.5rem; border:1px solid var(--border); border-radius:.65rem; background: var(--bg);
  font-size:1rem; transition:border-color .2s ease, box-shadow .2s ease
}
.form-group select{padding-left:.75rem}
.input-wrapper input:focus,.input-wrapper textarea:focus,.form-group select:focus{
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)
}
.input-wrapper textarea{resize:none;padding-top:.8rem}
.checkbox-group{flex-direction:row;align-items:flex-start;gap:.75rem}
.checkbox-group input[type="checkbox"]{margin-top:.25rem;width:1.1rem;height:1.1rem}
.checkbox-label{font-size:.92rem;color: var(--muted)}
.form-submit{width:100%;padding:1rem;font-weight:700;justify-content:center}
.success-message{
  text-align:center;background: var(--card);border:1px solid var(--border);border-radius: var(--radius);padding: clamp(1.5rem, 3vw, 3rem); box-shadow: var(--shadow-sm)
}
.success-content i{font-size:3rem;color: var(--success);margin-bottom:1rem}
.success-content h3{font-weight:800}
.success-content p{color: var(--muted)}

/* 14) Contact */
.contact{background: var(--bg)}
.contact-content{display:grid;grid-template-columns:1fr 1fr; gap: clamp(1.25rem, 3vw, 3rem)}
.contact-info h3{font-weight:800;margin-bottom:1rem}
.contact-items{display:flex;flex-direction:column;gap:1.25rem;margin-bottom:1.5rem}
.contact-item{display:flex;gap:1rem}
.contact-icon{flex-shrink:0;width:3rem;height:3rem;background: var(--bg-soft);border-radius:.75rem;display:flex;align-items:center;justify-content:center;color: var(--muted)}
.contact-details h4{font-weight:700;margin-bottom:.15rem}
.contact-details a{color: var(--muted)}
.contact-details a:hover{color: var(--text)}
.social-media{padding-top:1.5rem;border-top:1px solid var(--border)}
.social-media h4{font-weight:700;margin-bottom:1rem}
.social-links{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.social-link{
  display:flex;align-items:center;gap:.75rem;padding:1rem;background: var(--bg-soft);border:1px solid var(--border);
  border-radius:.65rem;transition:transform .15s ease, box-shadow .2s ease
}
.social-link:hover{transform: translateY(-1px); box-shadow: var(--shadow-sm)}
.social-link i{color: var(--muted)}
.social-link:hover i{color: var(--text)}
.social-name{font-weight:700}
.social-handle{font-size:.92rem;color: var(--muted)}
.location-section h3{font-weight:800;margin-bottom:1rem}
.map-container{position:relative;aspect-ratio:16/9;border-radius: var(--radius);overflow:hidden;margin-bottom:1rem;border:1px solid var(--border)}
.map-overlay{position:absolute;inset:0;background: rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}
.access-info{background: var(--bg-soft);border:1px solid var(--border);border-radius:.75rem;padding:1.25rem}
.access-info h4{font-weight:700;margin-bottom:.5rem}
.access-info ul{list-style:none}
.access-info li{color: var(--muted);display:flex;align-items:center}
.access-info li::before{content:"";width:.4rem;height:.4rem;background: var(--muted-2);border-radius:50%;margin-right:.6rem}

/* 15) FAQ */
.faq{background: var(--bg-soft)}
.faq-list{max-width:64rem;margin:0 auto 2rem}
.faq-item{
  background: var(--card); border:1px solid var(--border); border-radius:.9rem;
  margin-bottom:.9rem; box-shadow: var(--shadow-sm); overflow:hidden
}
.faq-question{
  width:100%; padding:1.25rem; background:none; border:none; text-align:left; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-question:hover{background: color-mix(in srgb, var(--text) 5%, transparent)}
.faq-question h3{font-weight:700;margin:0;padding-right:1rem}
.faq-question i{color: var(--muted); transition: transform .2s ease}
.faq-item.active .faq-question i{transform: rotate(180deg)}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .25s ease; background: var(--bg-soft); border-top:1px solid var(--border)}
.faq-item.active .faq-answer{max-height:220px}
.faq-answer p{padding:1rem 1.25rem;color: var(--muted)}
.faq-cta{
  background: var(--card); border:1px solid var(--border); border-radius:.9rem; padding:1.5rem; text-align:center; box-shadow: var(--shadow-sm)
}

/* 16) Footer */
.footer{background: var(--brand-dark);color:#fff;padding: var(--section-pad) 0}
.footer-content{display:grid;grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom:2rem}
.footer-main{display:flex;flex-direction:column;gap:1rem}
.footer-brand h3{font-weight:800;margin:0}
.footer-accent{color:#cbd5e1}
.footer-description{color:#cbd5e1}
.footer-social{display:flex;gap:.7rem}
.footer-social a{
  width:2.6rem;height:2.6rem;background:#1f2937;border-radius:.6rem;display:flex;align-items:center;justify-content:center;
  color:#fff;transition: background .2s ease, transform .2s ease
}
.footer-social a:hover{background:#374151; transform: translateY(-1px)}
.footer-links h4,.footer-contact h4{font-weight:700;margin-bottom:1rem}
.footer-links button{background:none;border:none;color:#cbd5e1;cursor:pointer;text-align:left}
.footer-links button:hover{color:#fff}
.footer-contact-items{display:flex;flex-direction:column;gap:.9rem}
.footer-contact-item{display:flex;gap:.7rem}
.footer-contact-item i{color:#9ca3af;margin-top:.25rem}
.footer-contact-item a{color:#cbd5e1}
.footer-contact-item a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:2rem;border-top:1px solid #1f2937}
.footer-copyright{display:flex;align-items:center;gap:.5rem;color:#9ca3af}
.footer-copyright i{color:#ef4444}
.footer-legal{display:flex;gap:1.2rem}
.footer-legal button{background:none;border:none;color:#9ca3af;cursor:pointer;font-size:.9rem}
.footer-legal button:hover{color:#fff}

/* 17) Lightbox Images */
.modal{display:none;position:fixed;inset:0;background: rgba(0,0,0,.9);z-index:2000;align-items:center;justify-content:center;padding:1rem}
.modal.active{display:flex}
.modal-content{position:relative;max-width:64rem;width:100%}
.modal-content img{width:100%;height:auto;max-height:90vh;object-fit:contain;border-radius:.6rem}
.modal-close{
  position:absolute;top:1rem;right:1rem;width:2.6rem;height:2.6rem;background: var(--card);
  border:none;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.modal-close:hover{filter:brightness(.95)}

/* 18) OFFRE & TEASER (déplacé depuis <style>) */
.offer-modal{position:fixed;inset:0;display:none;z-index:9999}
.offer-modal.active{display:block}
.offer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.offer-dialog{
  position:relative;z-index:1;width:min(920px,92vw);margin:4vh auto;background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding:18px; border:1px solid var(--border)
}
.offer-title{margin:6px 40px 14px 4px}
.offer-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:999px;cursor:pointer;font-size:22px;color: var(--text);background: color-mix(in srgb, var(--text) 10%, transparent)}
.offer-close:hover{background: color-mix(in srgb, var(--text) 18%, transparent)}
.offer-form{display:flex;flex-direction:column;gap:12px}
.grid-two{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:700px){.grid-two{grid-template-columns:1fr 1fr}}
.fg{display:flex;flex-direction:column;gap:6px}
.fg label{color: var(--muted)}
.fg input,.fg select{
  border:1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius:10px; padding:12px 12px
}
.fg input::placeholder{color: var(--muted-2)}
.offer-note{color: var(--muted);font-size:.9rem;text-align:center;margin-top:6px}
.offer-feedback{margin-top:10px;border-radius:10px;padding:12px;font-size:.95rem;display:none}
.offer-feedback.success{display:block;background: #12381d;color:#b7f7c2;border:1px solid #1f7a2f}
.offer-feedback.error{display:block;background:#3a1114;color:#ffc1c6;border:1px solid #a52b2b}

.teaser-modal{position:fixed;inset:0;display:none;z-index:10000}
.teaser-modal.active{display:block}
.teaser-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.teaser-dialog{
  position:relative;z-index:1;width:min(520px,92vw);margin:10vh auto;background: var(--card);
  border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding:22px; color: var(--text); text-align:center
}
.teaser-close{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:999px;cursor:pointer;font-size:20px;color: var(--text);background: color-mix(in srgb, var(--text) 10%, transparent)}
.teaser-close:hover{background: color-mix(in srgb, var(--text) 18%, transparent)}
.teaser-badge{display:inline-block;background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding:6px 10px; border-radius:999px; font-size:.82rem; margin-bottom:10px}
.teaser-sub{color: var(--muted); margin-bottom:14px}
.teaser-actions{display:flex;gap:10px;justify-content:center}

/* 19) Responsive breakpoints */
@media (max-width: 1024px){
  .container{padding:0 clamp(1rem, 2vw, 1.5rem)}
  .hero-content,.about-content,.contact-content{grid-template-columns:1fr;gap:2rem}
  .journey-step{grid-template-columns:1fr}
  .journey-step.reverse{direction:ltr}
  .footer-content{grid-template-columns:1fr;gap:2rem}
}
@media (max-width: 860px){
  .desktop-nav,.desktop-actions{display:none}
  .mobile-menu-btn{display:block}
  .mobile-menu.active{display:block}
  .hero{min-height:auto;padding: calc(3.5rem + 2rem) 0 2.25rem}
}
@media (max-width: 768px){
  .hero-actions{flex-direction:column}
  .hero-btn{width:100%;justify-content:center}
  .form-row{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .objectives-grid{grid-template-columns:1fr 1fr}
  .testimonials-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .social-links{grid-template-columns:1fr}
  .faq-actions{flex-direction:column}
  .footer-bottom{flex-direction:column;gap:1rem;text-align:center}
  .footer-legal{justify-content:center}
}
@media (max-width: 520px){
  .objectives-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr;gap:.9rem}
  .reservation-form-container{padding:1.25rem}
  .engagement{padding:1.5rem}
  .faq-cta{padding:1.25rem}
}

/* 20) Motion & print */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  .header,.footer,.mobile-menu,.modal,.offer-modal,.teaser-modal{display:none!important}
  a[href]::after{content:" (" attr(href) ")"; font-size:.85em}
}

/* 21) Three.js indicator (unchanged) */
#threejs-scroll-indicator{
  position:fixed; bottom:40px; left:50%; transform: translateX(-50%);
  width:60px;height:90px; z-index:1000; pointer-events:none; opacity:.85;
}
canvas{display:block}
/* --- Fancy CTA 360 button --- */
.tour360-btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:800; letter-spacing:.2px;
  padding:1rem 1.3rem; border-radius:14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.18);
  border:0; color:#fff;
}
.tour360-btn i{font-size:1.1rem}
.tour360-btn:hover{transform:translateY(-1px); box-shadow: var(--shadow-md)}
.tour360-btn:active{transform:translateY(0)}
.tour360-btn .glow{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120px 60px at var(--x,50%) var(--y,50%), rgba(255,255,255,.25), transparent 60%);
  opacity:.0; transition: opacity .25s ease;
}
.tour360-btn:hover .glow{opacity:.7}
.tour360-note{margin-top:.5rem;color:var(--muted);font-size:.92rem}

/* --- Fullscreen 360 modal --- */
.tour360-modal{position:fixed; inset:0; display:none; z-index:10050}
.tour360-modal.active{display:block}
.tour360-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter: blur(2px)}
.tour360-dialog{
  position:relative; z-index:1; width:min(1400px, 96vw); height:min(92vh, 900px);
  margin:3vh auto; background: var(--card); border:1px solid var(--border);
  border-radius:16px; box-shadow: var(--shadow-lg); display:flex; flex-direction:column;
}
.tour360-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1rem; border-bottom:1px solid var(--border);
}
.tour360-header h3{margin:0; font-weight:800}
.tour360-close{
  width:40px;height:40px;border:0;border-radius:999px;cursor:pointer;
  background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font-size:22px;
}
.tour360-close:hover{background: color-mix(in srgb, var(--text) 18%, transparent)}
.tour360-frame-wrap{position:relative; flex:1; background:#000; border-radius:0 0 16px 16px; overflow:hidden}
#tour360-iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; background:#000;
}
/* Loader */
.tour360-loader{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8rem; color:#e5e7eb; background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.3));
}
.tour360-loader .spinner{
  width:34px;height:34px;border-radius:999px;border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Mobile fullscreen feel */
@media (max-width: 768px){
  .tour360-dialog{width:96vw;height:92vh;margin:2vh auto;border-radius:12px}
  .tour360-header{padding:.6rem .75rem}
}
/* Button style */
.dark-mode-btn {
  background: #333;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}
.dark-mode-btn:hover {
  background: #555;
}

/* Default light theme */
body {
  background-color: #fff;
  color: #000;
}

/* Dark theme */
body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
}

/* Example adjustments for gallery items in dark mode */
body.dark-mode .gallery-item {
  background-color: #1e1e1e;
}
body.dark-mode .section-header h2 {
  color: #fff;
}
/* ===== Améliorations UX Mobile ===== */
.offer-dialog{
  width:min(560px, 96vw);
  max-height:100svh; /* évite le débordement sous les barres système */
  overflow:auto;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.offer-form input,
.offer-form select,
.offer-form textarea,
.reservation-form input,
.reservation-form select,
.reservation-form textarea{
  font-size:16px; /* évite le zoom auto sur iOS */
}
.fg .hint, .reservation-form .hint{ color:#9fb0c7; font-size:.82rem }

/* Toast/feedback en haut du modal */
.offer-toast{
  position:sticky; top:-8px; z-index:5;
  background:#12381d; color:#b7f7c2; border:1px solid #1f7a2f;
  border-radius:10px; padding:10px 12px; margin-bottom:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.offer-toast.error{ background:#3a1114; color:#ffc1c6; border-color:#a52b2b }
.counter{ font-size:.82rem; color:#9fb0c7; margin-top:4px; text-align:right }

/* Reservation form: meilleure grille sur mobile */
@media (max-width: 600px){
  .reservation-form .form-row{ grid-template-columns:1fr !important }
}

/* Petits écrans : paddings et titres */
@media (max-width:420px){
  .offer-dialog{ padding:14px }
  .offer-title{ font-size:1.05rem }
}