/* Version: v4.0 - new layout */
/* Global reset-ish */
html, body { margin: 0; padding: 0; background: #000; color: #000; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; height: 100%; }
body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; }
/* Site wrapper to center all content */
.site-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; }
.sub-header { width: 100%; }
.content-area { width: 100%; }
/* Logo header simple on black background */
.logo-header-simple {
  background: #000;
  text-align: center;
  padding: 20px 0;
  width: 100%;
}
.logo-header-simple img {
  max-width: 280px;
  width: 70%;
  height: auto;
}
@media (max-width: 768px) {
  .logo-header-simple img {
    max-width: 220px;
    width: 60%;
  }
}
@media (max-width: 480px) {
  .logo-header-simple img {
    max-width: 180px;
    width: 50%;
  }
}
.footer-inner { width: 100%; background:#fff; color:#000; text-align:center; display: block; padding-left: 50px; padding-right: 50px; box-sizing: border-box; }
.footer-link { color:#000; text-decoration:none; display:block; width:100%; padding:1rem 0; text-align:center; font-size: 0.85rem; }
@media (min-width: 1024px) { .footer-link { font-size: 0.8rem; } }
/* Logo header on black */
.logo-header { background: #000; padding: 32px 0; text-align: center; }
.logo-header .logo-zone img { max-width: 300px; width: 100%; height: auto; display: block; margin: 0 auto; filter: none; }
/* White content zone, centered, max width 1200px */
.white-zone { background: #fff; color: #000; max-width: 1200px; margin-left: auto; margin-right: auto; box-sizing: border-box; padding: 0 80px 2rem 80px; text-align: center; }
.white-zone h1 { margin-top: 0; padding-top: 0rem; }
@media (max-width: 1200px) { .white-zone { padding-left: 60px; padding-right: 60px; } .footer-inner { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 1024px) { .white-zone { padding-left: 40px; padding-right: 40px; } .footer-inner { padding-left: 30px; padding-right: 30px; } }
@media (max-width: 768px) { .white-zone { padding-left: 30px; padding-right: 30px; } .footer-inner { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 480px) { .white-zone { padding-left: 20px; padding-right: 20px; } .footer-inner { padding-left: 10px; padding-right: 10px; } }
.text-zone { text-align: center; padding: 2rem 2rem; background-image: url("media/image-fond.webp"), url("media/image-fond.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; }
/* Global side margins for the main content to keep a black gutter on wide screens */
@media (min-width: 1200px) {
  .container-1200 { padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 1200px) {
  .container-1200 { padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 768px) {
  .container-1200 { padding-left: 10px; padding-right: 10px; }
}
/* Hero section with full image displayed */
.section-hero {
  background: #fff;
  padding: 0;
  width: 100%;
  line-height: 0;
}
.hero-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.hero-image {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 1280px) {
  .hero-container {
    overflow: hidden;
  }
  .hero-image {
    margin-top: -10%;
    display: block;
  }
}

.hero-logo {
  position: absolute;
  top: 13%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 420px;
  width: 85%;
  height: auto;
  z-index: 10;
}
@media (min-width: 850px) {
  .hero-logo {
    max-width: 462px;
    width: 93.5%;
  }
}
@media (min-width: 900px) {
  .hero-logo {
    max-width: 504px;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .hero-logo {
    max-width: 330px;
    width: 75%;
  }
}
@media (max-width: 480px) {
  .hero-logo {
    max-width: 270px;
    width: 65%;
  }
}
.placement { margin: 0 0 1rem; }
.download-buttons { display:flex; justify-content:center; gap: 1rem; margin: 1rem 0 1rem; padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 480px) {
  .download-buttons { flex-direction: column; align-items: center; padding-left: 0; padding-right: 0; }
}
.btn { background: #333; color: #fff; border:1px solid #ddd; padding:0.6rem 1rem; border-radius:6px; text-decoration:none; display:inline-flex; align-items:center; gap:0.5rem; position: relative; overflow: hidden; }
.btn:hover { background:#555; }
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.5s ease;
}
.btn:hover::before {
  left: 100%;
}
/* Footer white with consistent side margins and max width */
.footer-white { background:#fff; color:#000; text-align:center; padding:1rem 0; }
@media (min-width: 768px) { .text-zone { padding: 2rem 2rem; } }
@media (min-width: 1024px) { .text-zone { padding: 3rem 3rem; } }
@media (min-width: 1280px) { .text-zone { padding: 3rem 4rem; } }
@media (min-width: 1536px) { .text-zone { padding: 4rem 6rem; } }

/* Global content container for consistent width and margins */
.container-1200 { max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 50px; padding-right: 50px; }
.wrap-1200 { width: min(1200px, calc(100% - 100px)); margin-left: auto; margin-right: auto; padding-left: 50px; padding-right: 50px; box-sizing: border-box; }
@media (max-width: 1200px) { .container-1200 { padding-left: 30px; padding-right: 30px; } }
@media (max-width: 768px) { .container-1200 { padding-left: 10px; padding-right: 10px; } }

/* Progressive gutters: shrink side padding at smaller viewports */
@media (max-width: 1200px) { .container-1200 { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 1024px) { .container-1200 { padding-left: 30px; padding-right: 30px; } }
@media (max-width: 768px) { .container-1200 { padding-left: 20px; padding-right: 20px; } }
@media (max-width: 480px) { .container-1200 { padding-left: 10px; padding-right: 10px; } }