: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;}

/* Section double-box */
.double-box {
  max-width: 1200px;
  margin: 120px auto 60px auto;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 0 20px;
}
.box {
  flex: 1 1 500px;
  max-width: 550px;
  background: #DDD6FF; /* violet clair */
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  text-align: center;
}
.box img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 2px solid #74D4FF;
}
.box h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
  color: #A35700; /* orange pour titres */
}
.box p {
  font-size: 0.95rem;
  margin-bottom: 20px;
}

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

/* Responsive */
@media (max-width:768px) {
  nav ul {
    position:fixed;
    top:60px; left:-100%;
    flex-direction:column;
    background:#fff;
    width:200px;
    height:100%;
    padding:20px;
    gap:20px;
    transition:0.3s;
  }
  #nav-toggle:checked ~ header nav ul {left:0;}
  .hamburger {display:flex;}
  .double-box {flex-direction: column; gap: 30px;}
}