body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  margin: 0;
  color: #333;
  background-color: #fff;
}
.sticky-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #4BA3E3;
  z-index: 1000;
  padding: 10px 0;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: auto;
}
.logo {
  height: 60px;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}
nav a {
  text-decoration: none;
  color: white;
  font-weight: 600;
}
.hero {
  background: url('HundredRobot Préparation des Doses à Administrer100_01.png') center/cover no-repeat;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}
.hero-text {
  background: rgba(0, 0, 0, 0.4);
  padding: 20px;
  border-radius: 10px;
}
.content-section {
  padding: 100px 10%;
  text-align: center;
}
.content-section.light {
  background-color: #f9f9f9;
}
.robot-img, .pda-img {
  max-width: 100%;
  height: auto;
  margin-top: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.contact-section {
  background-color: #4BA3E3;
  color: white;
  text-align: center;
  padding: 80px 10%;
}
.contact-section form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
  margin: auto;
}
.contact-section input, .contact-section textarea {
  padding: 12px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
}
.contact-section button {
  background-color: white;
  color: #0078B7;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  transition: 0.3s;
}
.contact-section button:hover {
  background-color: #0078B7;
  color: white;
}
footer {
  background-color: #4BA3E3;
  color: white;
  padding: 30px 10%;
}
.footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-logo {
  height: 50px;
}
.footer-text p, .footer-text a {
  margin: 5px 0;
  color: white;
  text-decoration: none;
}



/* === Mobile navigation fix (added) === */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto;
}
.menu-toggle .bar {
  display: block;
  width: 100%;
  height: 3px;
  margin: 4px 0;
  background: white;
  border-radius: 2px;
}
/* Keep nav horizontal on desktop (defensive override) */
#main-nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  padding-left: 0;
  margin: 0;
}
#main-nav a { text-decoration: none; color: white; font-weight: 600; }
/* Mobile layout */
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  #main-nav { position: relative; }
  #main-nav ul {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: #4BA3E3;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    flex-direction: column;
    gap: 10px;
    min-width: 220px;
    z-index: 1200;
  }
  #main-nav.open ul { display: flex; }
  .header-content { display: flex; align-items: center; gap: 12px; }
  .logo { max-height: 40px; height: auto; }
}
@media (max-width: 360px) {
  #main-nav ul { min-width: 180px; }
}
html, body { overflow-x: hidden; }

/* === Mobile navigation reliability patch (minimal) === */
.menu-toggle{
  display:none;
  background:transparent;
  border:none;
  width:36px;
  height:28px;
  padding:0;
  margin-left:auto;
  cursor:pointer;
}
.menu-toggle .bar{
  display:block;
  width:100%;
  height:3px;
  margin:4px 0;
  background:#fff;
  border-radius:2px;
}
/* Keep desktop layout intact */
#main-nav ul{
  list-style:none;
  display:flex;
  gap:20px;
  padding-left:0;
  margin:0;
}
#main-nav a{ text-decoration:none; color:#fff; font-weight:600; }

@media (max-width: 900px){
  .menu-toggle{ display:inline-flex; }
  #main-nav{ position:relative; z-index: 99998; } /* sit above hero */
  #main-nav ul{
    display:none;
    position:absolute;
    right:0;
    top:100%;
    background:#4BA3E3;
    padding:12px 16px;
    border-radius:8px;
    box-shadow:0 10px 24px rgba(0,0,0,0.18);
    flex-direction:column;
    gap:10px;
    min-width:220px;
    z-index:99999; /* ensure on top of images/overlays */
  }
  #main-nav.open ul{ display:flex; }
}

html, body{ overflow-x:hidden; } /* defensive: avoid horizontal overflow */


/* === Simple CSS-only mobile menu (no JS) === */
/* Base (desktop) keeps existing layout */
#main-nav ul{
  list-style:none;
  display:flex;
  gap:20px;
  padding-left:0;
  margin:0;
}
#main-nav a{ text-decoration:none; color:#fff; font-weight:600; }

/* Hamburger label styling */
.menu-toggle-label{
  display:none;
  background:transparent;
  border:none;
  width:36px;
  height:28px;
  padding:0;
  margin-left:auto;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}
.menu-toggle-label .bar{
  display:block;
  width:100%;
  height:3px;
  margin:4px 0;
  background:#fff;
  border-radius:2px;
}

@media (max-width: 900px){
  /* show the hamburger label on mobile */
  .menu-toggle-label{ display:inline-flex; }
  /* If there is an older JS button, hide it on mobile to avoid duplicates */
  button.menu-toggle{ display:none !important; }

  #main-nav{ position:relative; z-index:1000; }
  #main-nav ul{
    display:none;
    position:absolute;
    right:0;
    top:100%;
    background:#4BA3E3;
    padding:12px 16px;
    border-radius:8px;
    box-shadow:0 10px 24px rgba(0,0,0,0.18);
    flex-direction:column;
    gap:10px;
    min-width:220px;
    z-index:1001;
  }
  /* Checkbox controls visibility of the list */
  #nav-toggle:checked + label.menu-toggle-label + #main-nav ul{
    display:flex;
  }
}

html, body{ overflow-x:hidden; }