/* CECL · Centre Européen du Cerveau de Lyon */
:root{
  --dark:#003047;
  --green:#AAFFA6;
  --white:#ffffff;
  --line:rgba(255,255,255,.18);
  --pad:32px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Familjen Grotesk",system-ui,Arial,sans-serif;
  background:var(--dark);
  color:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- Header / Nav ---------- */
.nav{
  display:flex;align-items:stretch;
  background:var(--dark);
  min-height:64px;
  position:sticky;top:0;z-index:50;
}
.nav__brand{
  display:flex;align-items:center;gap:12px;
  padding:0 var(--pad);
  text-decoration:none;color:var(--white);
  font-weight:700;font-size:24px;letter-spacing:.5px;
}
.nav__brand img{width:46px;height:auto}
.nav__spacer{flex:1}
.nav__menu{display:contents}
.nav__links{
  display:flex;align-items:center;gap:34px;
  list-style:none;padding:0 24px;
}
.nav__links a{
  text-decoration:none;color:var(--white);
  font-size:13px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;white-space:nowrap;
  padding:4px 0;border-bottom:2px solid transparent;
}
.nav__links a:hover{border-bottom-color:var(--green)}
.nav__links a.is-active{border-bottom-color:var(--white)}
.nav__contact{
  display:flex;align-items:center;
  background:var(--green);color:var(--dark);
  text-decoration:none;font-weight:700;font-size:14px;
  letter-spacing:.6px;text-transform:uppercase;
  padding:0 44px;
}
.nav__burger{display:none;background:none;border:0;cursor:pointer;
  padding:0 var(--pad);color:var(--white);font-size:26px}

/* ---------- Layout helpers ---------- */
.section{padding:44px var(--pad)}
.section--tight{padding:24px var(--pad)}
main{min-height:40vh}

.page-title{
  color:var(--green);font-weight:700;text-transform:uppercase;
  font-size:clamp(44px,8vw,92px);line-height:1.02;letter-spacing:-1px;
  padding:40px var(--pad) 24px;
}
.h-section{
  color:var(--green);font-weight:700;text-transform:uppercase;
  font-size:clamp(34px,5.5vw,60px);line-height:1.05;
  padding:24px var(--pad) 18px;letter-spacing:-.5px;
}

/* ---------- Home hero ---------- */
.hero{
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
}
.hero__left{padding:56px var(--pad)}
.hero__wordmark{font-weight:700;line-height:.92;color:var(--white)}
.hero__wordmark .big{font-size:clamp(64px,11vw,150px);letter-spacing:-2px}
.hero__wordmark .sub{font-size:clamp(22px,3.4vw,46px);letter-spacing:0;margin-top:6px}
.hero__img{width:100%;height:100%;object-fit:cover;min-height:320px}
.hero__tagline{
  font-size:clamp(18px,2.2vw,26px);color:#dff5de;
  padding:26px var(--pad) 8px;grid-column:1 / -1;
}

/* ---------- Full-bleed image ---------- */
.fullimg{width:100%;height:auto;display:block}

/* ---------- About columns ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.cols2 p,.cols3 p{color:#eaf6ea;font-size:16px}
.cols2 p+p,.cols3 p+p{margin-top:18px}

/* ---------- Green grid (research topics) ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr)}
.gcell{
  background:var(--green);color:var(--dark);
  border:1px solid var(--dark);
  padding:34px 30px;min-height:120px;
}
.gcell h3{
  font-size:clamp(18px,1.6vw,22px);font-weight:600;
  text-transform:uppercase;letter-spacing:.2px;line-height:1.15;
}
.gcell p{margin-top:16px;font-size:15px;line-height:1.45}

/* ---------- Dark grid (missions) ---------- */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr)}
.dcell{
  border:1px solid var(--line);padding:34px 30px;min-height:150px;
}
.dcell h3{
  font-size:clamp(17px,1.5vw,21px);font-weight:600;color:var(--white);
  text-transform:uppercase;letter-spacing:.2px;line-height:1.2;
}
.dcell p{margin-top:22px;font-size:15px;color:#dfeaf0;line-height:1.45}

/* ---------- Stats grid (chiffres clés) ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{
  background:var(--green);color:var(--dark);
  border:1px solid var(--dark);
  padding:30px 26px;font-size:clamp(20px,1.9vw,26px);font-weight:500;
  min-height:96px;line-height:1.15;
}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;background:var(--dark);padding:14px 0;white-space:nowrap}
.marquee__track{
  display:inline-block;color:var(--green);
  font-size:clamp(30px,4.4vw,58px);font-weight:600;
  animation:scroll 26s linear infinite;
}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Profile page ---------- */
.profile{padding:8px var(--pad) 60px;max-width:900px}
.badge{
  display:inline-block;border:1px solid var(--white);
  padding:12px 18px;font-weight:700;font-size:19px;margin-bottom:22px;
}
.profile__photo{width:196px;height:auto;border:0;margin-bottom:18px}
.role{
  display:inline-block;border:1px solid var(--white);
  padding:8px 16px;font-size:16px;margin-bottom:26px;
}
.pfield{margin:3px 0;font-size:16px;color:#eaf6ea}
.pfield b{color:var(--white)}
.pblock{margin-top:22px}
.pblock .lbl{font-weight:700;margin-bottom:4px}
.profile a{color:var(--white)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding:8px var(--pad) 56px}
.contact-grid p{margin-bottom:18px;font-size:17px;color:#eaf6ea}
.contact-grid a{color:var(--white)}

/* ---------- Formations ---------- */
.formations{padding:8px var(--pad) 60px;max-width:1000px}
.prog-title{color:var(--white);font-size:clamp(20px,2.2vw,26px);font-weight:500;margin:34px 0 18px}
.course{margin:14px 0}
.course b{display:block;font-size:19px;font-weight:600;color:var(--white)}
.course span{font-size:14px;color:#cfe6cf}

/* ---------- Annuaire embed ---------- */
.annuaire-wrap{padding:8px var(--pad) 60px}

/* ---------- Crypted access ---------- */
.crypted{background:#f3f4f5;color:#0a1b26;padding:34px var(--pad) 60px}
.crow{
  display:flex;align-items:center;gap:26px;
  padding:24px 4px;border-bottom:1px solid #cfd3d6;
}
.crow .num{font-size:14px;color:#0a1b26;width:26px}
.crow .ctitle{flex:1;font-size:clamp(20px,2vw,28px);font-weight:700}
.crow .dl{
  background:var(--dark);color:var(--white);text-decoration:none;
  padding:12px 22px;font-weight:700;font-size:15px;white-space:nowrap;
}
.crow .dl:hover{background:#01415f}

/* ---------- Gate (orcid) ---------- */
.gate-wrap{min-height:46vh;display:flex;justify-content:center;align-items:center;padding:40px var(--pad) 70px}

/* ---------- Footer ---------- */
.footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:26px var(--pad);background:var(--dark);border-top:1px solid rgba(255,255,255,.06);
}
.footer img.wordmark{width:min(360px,60vw);height:auto}
.footer img.brain{width:56px;height:auto}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav__spacer{display:none}
  .nav__menu{display:none}
  .nav__burger{display:block;margin-left:auto}
  .nav.is-open .nav__menu{
    display:flex;flex-direction:column;align-items:flex-start;gap:18px;
    position:absolute;top:64px;left:0;right:0;background:var(--dark);
    padding:20px var(--pad);border-top:1px solid var(--line);
  }
  .nav.is-open .nav__links{
    display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:0;margin:0;
  }
  .nav__contact{
    background:none;color:var(--white);
    font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
    padding:0;justify-content:flex-start;
  }
  .hero{grid-template-columns:1fr}
  .hero__left{order:1}
  .hero__tagline{order:2}
  .hero__img{order:3;min-height:240px}
  .cols2,.cols3,.contact-grid{grid-template-columns:1fr;gap:26px}
  .grid3,.dgrid,.stats{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--pad:20px}
  .crow{flex-wrap:wrap;gap:14px}
}