:root {
  --header-bg: rgba(173, 216, 230, 0.3);
  --text: #434F60;
  --accent: #74D4FF;
  --max-width: 1200px;
  font-family: Arial, Helvetica, sans-serif;
}

/* Reset */
* {box-sizing:border-box; margin:0; padding:0;}
body {color:var(--text); background:#fff; line-height:1.5;}

/* Header */
header {
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 22px;
  background:var(--header-bg);
  backdrop-filter: blur(6px);
  z-index:100;
}
.brand {font-weight:bold; font-size:1.2rem;}
nav ul {list-style:none; display:flex; gap:15px;}
nav a, nav label {
  text-decoration:none;
  color:var(--text);
  padding:8px 10px;
  border-radius:6px;
  font-weight:600;
}
nav a:hover, nav label:hover {background:rgba(255,255,255,0.4);}

/* Dropdown */
.dropdown {position:relative;}
.submenu {
  position:absolute;
  left:0; top:120%;
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,0.15);
  display:none;
  flex-direction:column;
  min-width:160px;
}
.submenu a {padding:10px; display:block;}
.submenu a:hover {background:#e0f4ff;}
.dropdown:hover .submenu,
.dropdown input:checked ~ .submenu {display:flex;}

/* Hamburger */
.hamburger {display:none; cursor:pointer; width:40px; height:40px; justify-content:center; align-items:center;}
.hamburger span {width:24px; height:2px; background:var(--text); position:relative; display:block;}
.hamburger span::before, .hamburger span::after {
  content:""; position:absolute; width:24px; height:2px; background:var(--text);
}
.hamburger span::before {top:-7px;}
.hamburger span::after {bottom:-7px;}
#nav-toggle {display:none;}

/* ------ Responsive menu ------ */
@media (max-width:768px) {
  nav {
    position:absolute;
    top:60px;
    left:0;
    right:0;
    background:#fff;
    display:none;
    flex-direction:column;
    text-align:center;
    padding:20px;
    box-shadow:0 4px 20px rgba(0,0,0,0.15);
  }
  nav ul {flex-direction:column; gap:10px;}
  
  /* Quand on coche le hamburger → affiche le menu */
  #nav-toggle:checked + header nav {
    display:flex;
  }

  .hamburger {display:flex;}
}

/* Section contact */
.contact-box {
  max-width: 700px;
  margin: 150px auto 60px auto;
  background: #ccf7d4; /* vert pâle */
  padding: 25px 30px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
}
.contact-box .icon-mail {width: 60px; height: 60px;}
.contact-box .box p {font-size: 1rem; font-weight: 500; color: #2d4a2d;}
.contact-box a {color: #006600; font-weight: bold; text-decoration: none;}
.contact-box a:hover {text-decoration: underline;}

@media (max-width:600px) {
  .contact-box {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  .contact-box .icon-mail {
    width: 50px;
    height: 50px;
  }
}

/* Footer */
footer {
  background: #e0e0e0;
  text-align:center;
  padding:20px;
}
.footer-top, .footer-middle, .footer-bottom {margin:10px 0;}
footer a {color:var(--text); font-weight:bold;}