:root {
  --primary-color: #0A2540;
  --secondary-color: #b8b8d0;
  --accent-color: #ff6f61;
  --light-bg: #f9f9fb;
  --dark-bg: #061a2e;
  --text-color: #333;
}

* { box-sizing: border-box; margin:0; padding:0; }
body { 
  font-family: 'Segoe UI', sans-serif; 
  background: var(--light-bg); 
  color: var(--text-color); 
  line-height:1.6; 
  scroll-behavior:smooth; 
}

/* --- Header --- */
header { 
  text-align:center; 
  padding:6rem 1rem 3rem; 
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); 
  position: relative; 
  overflow:hidden; 
}

/* Logo et texte en blanc */
header img { max-width:300px; display:block; margin:0 auto 1rem; opacity:0; transform:translateY(-20px); transition:0.5s; }
header h1, header p { color:#fff; opacity:0; transform:translateY(20px); transition:0.5s; }

/* --- Nav --- */
nav { 
  background: var(--dark-bg); 
  display:flex; 
  justify-content:center; 
  gap:0.8rem; 
  flex-wrap:wrap; 
  padding:1rem; 
  position:sticky; 
  top:0; 
  z-index:1000; 
}
nav a { 
  text-decoration:none; 
  color:#fff; 
  font-weight:bold; 
  position:relative; 
  flex-shrink:0; 
}
nav a::after { 
  content:""; 
  display:block; 
  width:0; 
  height:2px; 
  background: var(--accent-color); 
  position:absolute; 
  bottom:0; 
  left:0; 
  transition:0.3s; 
}
nav a:hover::after { width:100%; }

/* --- Sections --- */
section { padding:4rem 5%; text-align:center; }
h2 { color: var(--primary-color); margin-bottom:2rem; font-size:2rem; display:inline-block; }
h2::after { content:""; width:50px; height:3px; background: var(--accent-color); display:block; margin:0.5rem auto 0 auto; border-radius:2px; }
p { max-width:700px; margin:1rem auto; }

/* --- Columns --- */
.columns { display:flex; flex-wrap:wrap; gap:3rem; justify-content:center; }
.col, .stat, .approach-card { opacity:0; transform:translateY(50px); transition:all 0.5s ease; }

.col { background:#fff; padding:2rem; border-radius:12px; max-width:400px; box-shadow:0 8px 20px rgba(0,0,0,0.1); }
.col:hover { transform:translateY(-5px); box-shadow:0 15px 25px rgba(0,0,0,0.2); }

.stat { background: var(--primary-color); color:#fff; padding:2rem; border-radius:12px; min-width:150px; text-align:center; }
.stat:hover { background: var(--accent-color); }

.approach-card { width:300px; border-radius:12px; overflow:hidden; text-align:center; cursor:pointer; position:relative; }
.approach-card img { width:100%; height:200px; object-fit:cover; margin-bottom:1rem; transition:transform 0.3s; }
.approach-card:hover img { transform:scale(1.05); }
.approach-title { color: var(--primary-color); font-weight:bold; margin-top:0.5rem; }
.approach-desc { margin-top:0.5rem; color:#fff; background:rgba(0,0,0,0.6); padding:0.5rem; border-radius:8px; opacity:0; transition:opacity 0.3s; }
.approach-card:hover .approach-desc { opacity:1; }

/* --- Footer --- */
footer { background: var(--dark-bg); color:#fff; text-align:center; padding:3rem 1rem; font-size:0.9rem; }

/* --- Responsive --- */
@media(max-width:768px){
  header { padding:4rem 1rem 3rem; }
  header img { max-width:250px; }
  section { padding:3rem 2%; }
  nav a { font-size:1rem; }
}

@media(max-width:480px){
  header img { max-width:180px; }
  header h1 { font-size:1.5rem; }
  nav a { font-size:0.9rem; margin:0.4rem; }
  .columns { flex-direction:column; align-items:center; gap:2rem; }
  .col, .approach-card { max-width:100%; height:auto; }
}