:root{
--blue:#0b5ed7;
--red:#dc3545;
--light:#f4f6fb;
--dark:#1e293b;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Arial}

body{color:#333}

/* NAVBAR */
.navbar{
position:fixed;
top:0;width:100%;
z-index:999;
transition:.3s;
}
.navbar.scrolled{
background:#fff;
box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.nav-container{
max-width:1200px;
margin:auto;
padding:15px 8%;
display:flex;
justify-content:space-between;
align-items:center;
}
.navbar img{width:90px}
.navbar nav a{
margin-left:25px;
text-decoration:none;
color:#1e293b;
position:relative;
}
.navbar nav a::after{
content:"";
position:absolute;
width:0;height:2px;
background:var(--red);
left:0;bottom:-6px;
transition:.3s;
}
.navbar nav a:hover::after{width:100%}

/* HERO */
.hero{
background:url("../images/bg-etudiants2.png") center/cover no-repeat;
min-height:90vh;
padding-top:100px;
}
.hero-overlay{
background:rgba(255,255,255,.85);
height:100%;
padding:100px 8%;
}
.hero-logo{width:140px;margin-bottom:20px}

/* SECTIONS */
section{padding:80px 8%}
section.light{background:var(--light)}
h2{text-align:center;color:var(--blue);font-size:2.2rem;margin-bottom:50px}
.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:35px;
}
.card{
background:#fff;
padding:35px;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
}
.card:hover{
transform:translateY(-10px);
box-shadow:0 20px 50px rgba(0,0,0,.15);
}
.card h3{color:var(--red);margin-bottom:15px}
ul{padding-left:20px}
ul li{margin-bottom:10px}

/* CONTACT */
.contact{background:var(--blue);color:#fff}
.contact form{
max-width:800px;
margin:auto;
display:grid;
gap:15px;
}
.contact input,.contact select,.contact textarea{
padding:14px;
border:none;
border-radius:10px;
}
.contact button{
background:var(--red);
border:none;
padding:16px;
border-radius:10px;
color:#fff;
font-size:1.1rem;
cursor:pointer;
}
.robot{font-size:.9rem}

/* FOOTER */
footer{
background:#0f172a;
color:#cbd5e1;
padding:60px 8%;
}
.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
}
footer h4{color:#fff;margin-bottom:15px}
.copy{text-align:center;margin-top:40px;font-size:.85rem;opacity:.7}

/* REVEAL */
.reveal{
opacity:0;
transform:translateY(40px);
transition:.8s;
}
.reveal.active{
opacity:1;
transform:none;
}