:root {
  --header-bg: rgba(173, 216, 230, 0.3); /* bleu clair transparent */
  --text: #434F60;
  --max-width: 1200px;
  font-family: Arial, Helvetica, sans-serif;
}
/* CSS Immobilier */
/* 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 immo */
.double-box {
  max-width: 1200px;
  margin: 120px auto 60px auto; /* espace avec le header et footer */
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 0 20px;
}

.box {
  flex: 1 1 500px;
  max-width: 550px;
  background: #e0f7ff; /* bleu 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; /* contour bleu */
}

.box h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: #003366;
}

.box p {
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.box video {
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  border: 2px solid #74D4FF;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .double-box {
    flex-direction: column;
    gap: 30px;
  }
}


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

/* Responsive */
@media (max-width:600px) {
  nav {display:none;}
  .hamburger {display:flex;}
  #nav-toggle:checked ~ header nav {display:block; position:absolute; top:60px; left:0; right:0; background:#fff; padding:20px;}
  header nav ul {flex-direction:column; gap:10px;}
  .gallery {grid-template-columns:1fr;}
}