/* === Base générale === */
body {
  background-color: #2A2A2A;
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
}

.page-wrapper {
  background-color: #0F0F0F;
  max-width: 920px;
  margin: 40px auto;
  border-radius: 30px;
  overflow: hidden;
}

/* === Section supérieure (beige) === */
.top-section {
  background-color: #FFF3E6;
  padding-top: 2rem;
  padding-bottom: 180px;
  position: relative;
  z-index: 1;
}

.nav-logo img {
  height: 300px;
}

.hero-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: #0F0F0F;
}
.hero-subtitle {
  font-size: 1.2rem;
  font-weight: 400;
  color: #333;
}

/* === Vidéo au centre === */
.video-floating {
  margin-top: -150px;
  background: linear-gradient(to bottom, #FFF3E6 50%, #0F0F0F 50%);
  padding-bottom: 40px;
}
.video-wrapper {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.video-wrapper video {
  width: 100%;
  border-radius: 12px;
  background: black;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.3);
}
.lang-switch{position:absolute;top:14px;left:14px;z-index:20;display:flex;gap:8px;}
.lang-btn{background:#1A1A1A;color:#fff;border:1px solid #2a2a2a;border-radius:999px;padding:6px 12px;font-weight:700;}
.top-section .lang-btn{background:#fff;color:#1a1a1a;border-color:#F4D8BF;}
.lang-btn.active{background:#F37021;border-color:#F37021;color:#0F0F0F;}


/* === Boutons === */
.btn-orange {
  background-color: #F37021;
  color: white;
  font-weight: 600;
  border-radius: 6px;
  padding: 10px 24px;
  border: none;
}
.btn-orange:hover {
  background-color: #d4550c;
}

/* === Sections noires === */
.section-dark {
  background-color: #0F0F0F;
  color: white;
}
.icon-box {
  background: #1A1A1A;
  border-radius: 8px;
  padding: 20px;
}
.icon-box h6 {
  color: #F37021;
  font-weight: 700;
}
.highlight {
  color: #F37021;
  font-weight: 800;
}

/* === Pied de page === */
footer {
  background-color: #000;
  color: #ccc;
  padding: 40px 10px;
  text-align: center;
}

/* === Formulaire === */
form .form-control {
  border-radius: 6px;
  border: 1px solid #ccc;
}
form label {
  font-weight: 500;
}
#form-message {
  font-size: 0.95rem;
}

/* === Image boîtier cliquable === */
#boitierToggle {
  transition: transform 0.3s ease;
  border-radius: 12px;
  max-width: 280px;
}

/* === Responsive === */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }
  .top-section {
    padding-bottom: 140px;
  }
}


/* === Mise en page variée pour réduire la répétition === */
.feature-row .boitier-illu {
  max-width: 320px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.checklist li {
  background: #1A1A1A;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.checklist li span {
  display: inline-block;
  width: 22px;
  text-align: center;
  color: #F37021;
  line-height: 1.2;
}

.band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 16px 0 0 0;
}
.band .band-item {
  background: #121212;
  color: #ddd;
  border: 1px solid #232323;
  border-radius: 999px;
  padding: 10px 14px;
  text-align: center;
  font-size: 0.95rem;
}

.mosaic .card-variant {
  background: #161616;
}
.mosaic .card-large {
  background: #1A1A1A;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.timeline .step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #121212;
  border-radius: 10px;
  padding: 14px;
}
.timeline .bubble {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F37021;
  color: #0F0F0F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
@media (min-width: 992px) {
  .checklist {
    grid-template-columns: 1fr 1fr;
  }
}


/* --- Sous-titres intégrés dans section-dark --- */
.subsection-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 28px 0 8px 0;
}
.subsection-title span {
  color: #F37021;
  font-weight: 800;
  letter-spacing: .2px;
  background: #0F0F0F;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #2a2a2a;
}
/* Section beige comme le bloc contact */
.section-beige{
  background:#FFF3E6;
  color:#1b1b1b;
}
.section-beige .icon-box{
  background:#fff;
  border:1px solid #F4D8BF;
  color:#1b1b1b;
}
.section-beige h3.highlight,
.section-beige h6{ color:#1b1b1b; }
.section-beige .highlight::after{ background:#F37021; opacity:1; }

/* Box blanche neutre + encadré orange (utilisée ci-dessous) */
.icon-box-light.cool-white.encadre-orange{
  background:#F7F7F7;       /* blanc neutre qui va bien avec le thème sombre */
  border:2px solid #F37021;  /* encadré orange */
  color:#1a1a1a;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.icon-box-light.cool-white.encadre-orange h6{ color:#1a1a1a; }
.icon-box-light.cool-white.encadre-orange p{ color:#333; }