/* Styles simples pour sidebar + contenu */
:root{
  --sidebar-width:260px;
  --bg:#f7f8fb;
  --accent:#0b6ef6;
  --muted:#6b7280;
}
*{box-sizing:border-box}
html,body,#mainContent{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#111827;
}
.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--sidebar-width);
  background:linear-gradient(180deg,#ffffff, #f1f5f9);
  border-right:1px solid #e6ecf2;
  padding:24px 18px;
  display:flex;
  flex-direction:column;
}
.sidebar-logo{
  width:150px;
  height:auto;
  margin-bottom:12px;
}
.brand{font-size:1.25rem;margin:0 0 12px 0}
nav ul{list-style:none;padding:0;margin:0}
nav li{margin:8px 0}
.nav-item{
  display:block;padding:10px 12px;border-radius:8px;color:inherit;text-decoration:none;
}
.nav-item:hover, .nav-item:focus{background:#eff6ff;color:var(--accent);outline:none}
.nav-item.active{background:var(--accent);color:#fff}
.sidebar-footer{margin-top:auto;font-size:0.85rem;color:var(--muted)}

.content{
  flex:1;display:flex;align-items:center;justify-content:center;padding:28px;min-height:100vh;
}
.hero{max-width:1200px;width:100%;border-radius:12px;box-shadow:0 8px 30px rgba(16,24,40,0.06);overflow:hidden;/* make hero fill available vertical space (viewport minus content padding) */
  height: calc(100vh - 56px);display:flex;align-items:center;justify-content:center}
.hero img{width:100%;height:100%;object-fit:contain;display:block;background-color:transparent}
.caption{padding:18px}
.caption h2{margin:0 0 6px 0}
.caption p{margin:0;color:var(--muted)}

/* Mobile toggle and backdrop base styles */
.mobile-toggle{display:none;position:fixed;left:14px;top:14px;z-index:60;width:44px;height:44px;border-radius:10px;border:0;background:#fff;box-shadow:0 6px 18px rgba(2,6,23,0.08);align-items:center;justify-content:center;cursor:pointer}
.mobile-toggle:focus{outline:3px solid rgba(11,110,246,0.12)}
.mobile-toggle .hamburger{display:block;position:relative;width:20px;height:2px;background:#111;border-radius:2px}
.mobile-toggle .hamburger::before,.mobile-toggle .hamburger::after{content:"";position:absolute;left:0;right:0;height:2px;background:#111;border-radius:2px}
.mobile-toggle .hamburger::before{top:-6px}
.mobile-toggle .hamburger::after{top:6px}

.backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.32);z-index:50;opacity:0;transition:opacity .2s;pointer-events:none}
.backdrop[hidden]{opacity:0;pointer-events:none}
.backdrop.visible{opacity:1;pointer-events:auto}

/* prevent body scroll while menu open */
body.menu-open{overflow:hidden}

/* Responsive */
@media (max-width:820px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);z-index:55;transition:transform .28s cubic-bezier(.2,.9,.2,1);width:80%;max-width:320px;box-shadow:8px 0 40px rgba(2,6,23,0.12)}
  .sidebar.open{transform:translateX(0)}
  .app{padding-left:0}
  .mobile-toggle{display:flex}
}

/* Mobile full-screen images on small viewports */
@media (max-width:600px){
  .content{padding:0;min-height:100vh} /* remove padding so image fills screen */
  .hero{
    max-width:100%;
    width:100%;
    height:100vh; /* full viewport height */
    border-radius:0; /* no rounded corners on mobile */
    box-shadow:none;
    position:relative;
  }
  .hero img{
    width:100%;
    height:100%;
    object-fit:cover; /* cover ensures image fills entire hero */
  }
  /* Special case: cliniques mobile image should fit without cropping */
  .hero img.fit-contain{
    object-fit:contain;
  }
  .caption{display:none} /* hide caption on mobile for cleaner look */
}

/* small niceties */
.nav-item:focus{box-shadow:0 0 0 3px rgba(11,110,246,0.12)}

/* Phone hotspot overlay (used to make a portion of an image clickable for calling) */
.phone-hotspot{
  position:absolute;z-index:40;display:block;border-radius:8px;transition:opacity .18s;opacity:0;pointer-events:none;
  background:rgba(11,110,246,0.12);backdrop-filter:blur(2px);border:1px solid rgba(11,110,246,0.12);
  color:var(--accent);text-decoration:none;align-items:center;justify-content:center;display:flex;font-weight:600;font-size:0.95rem;
  /* Default placement (bottom-right). Editable via CSS variables or per-page inline styles. */
  top:auto;left:auto;
  right:var(--hotspot-right, 12%);
  bottom:var(--hotspot-bottom, 10%);
  width:62.5%;
  height:10%;
  box-shadow:0 6px 20px rgba(2,6,23,0.12);
  
}
.phone-hotspot.visible{opacity:0.1;pointer-events:auto}
.phone-hotspot:focus{outline:3px solid rgba(11,110,246,0.16)}

/* On small screens make the hotspot slightly larger and easier to tap */
@media (max-width:600px){
  /* On small viewports make the hotspot full-screen so tapping anywhere on the hero starts the call */
  .phone-hotspot{
    top:0;left:0;right:0;bottom:0;
    width:100%;height:100%;
    border-radius:0;
    opacity:0.1; /* force fully visible on mobile */
    pointer-events:auto;
    font-size:1.15rem;
    background:rgba(11,110,246,0.06);
    justify-content:center;
  }
  
  /* For cliniques mobile, position button as a bar at the bottom instead of full-screen overlay */
  .phone-hotspot.bottom-bar{
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:80px; /* fixed height for bottom bar */
    opacity:0.1; /* fully visible */

    color:#fff;
    font-size:1.2rem;
    font-weight:700;
    border-radius:0;
    box-shadow:0 -4px 20px rgba(2,6,23,0.15);
  }
}