/* ===== Base ===== */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  background:#070707;
  color:#f2f2f2
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 18px}
.small{font-size:13px;opacity:.85}

/* ===== Top Banner ===== */
.top-banner{
  position:relative;
  width:100%;
  overflow:hidden;
}
.top-banner .banner-bg{
  width:100%;
  height: clamp(140px, 22vw, 280px);
  object-fit:cover;
  .top-banner .banner-bg{
  object-position: center;
}
.top-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.10));
}
.top-banner .banner-logo{
  position:absolute;
  left:18px;
  bottom:14px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.10);
}
.top-banner .banner-logo img{
  width:56px;
  height:56px;
  border-radius:12px;
  object-fit:cover;
}

/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{
  display:flex;
  align-items:center;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end
}
.nav a{opacity:.9}
.nav a:hover{opacity:1}
.btn{
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px
}
.btn:hover{border-color:rgba(255,255,255,.45)}
.btn.primary{background:#ffffff;color:#050505;border-color:#ffffff}

/* ===== Hero (version unique, alignée HTML) ===== */
.hero{
  position:relative;
  width:100%;
  height:min(80vh,700px);
  overflow:hidden;
}
.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55); /* overlay sombre */
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(18px, 4vw, 56px);
}
.hero-content{
  text-align:center;
  color:#ffffff;
  max-width:800px;
  padding:0 20px;
}
.hero-content h1{
  margin:0 0 12px;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height:1.05;
  letter-spacing:.5px;
}
.hero-content p{
  margin:0;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  line-height:1.6;
  opacity:.95;
  max-width:60ch;
}

/* ===== Sections / Cards ===== */
.section{padding:34px 0}
.section h2{margin:0 0 14px;font-size:clamp(20px,2.4vw,28px)}
.grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  background: rgba(255,255,255,.03);
}
.card .pad{padding:14px}
.card h3{margin:0 0 6px;font-size:18px}
.card p{margin:0;opacity:.85}
.card img{aspect-ratio: 3/2; object-fit:cover}

/* ===== Gallery ===== */
.gallery-grid{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.gallery-grid img{
  border-radius:14px;
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.08)
}

/* ===== Footer ===== */
.site-footer{
  padding:22px 0;
  color:#a9a9a9;
  border-top:1px solid rgba(255,255,255,.08)
}
/* ===== MANIFESTE ===== */
.manifesto{
  background: radial-gradient(
    circle at top,
    rgba(255,255,255,.04),
    transparent 70%
  );
}

.manifesto-text{
  max-width: 820px;
  margin: 0 auto 36px;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.75;
  text-align: center;
  opacity: .95;
}

/* ===== PILIERS ===== */
.pillars{
  display:grid;
  gap:22px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
}

.pillar{
  padding:22px;
  border-radius:18px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  text-align:center;
}

.pillar h3{
  margin:0 0 8px;
  font-size:1.2rem;
  letter-spacing:.2px;
}

.pillar p{
  margin:0;
  opacity:.88;
  font-size:.95rem;
  line-height:1.6;
}

.nav a.active{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 6px;
}