@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Muli:wght@400;600;700&display=swap');

:root{
  --pink:#ee3364;
  --teal:#00bec5;
  --yellow:#fdf4b4;
  --navy:#1f0e49;
  --ink:#0b0b0b;
  --body-grey:#5c5c5c;
  --paper:#ffffff;
  --line:#ececec;
  --pf:'Montserrat',Helvetica,Arial,sans-serif;
  --sf:'Muli',Helvetica,Arial,sans-serif;
  --max:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--body-grey);
  font-family:var(--sf);
  font-size:18px;
  font-weight:400;
  letter-spacing:.004em;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

::selection{color:#fff;background:var(--pink);}

h1,h2,h3,h4{
  font-family:var(--pf);
  font-weight:700;
  letter-spacing:.01em;
  color:var(--ink);
  margin:0 0 .5em;
}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.2;}
h2{font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.25;}
h3{font-size:1.55rem;line-height:1.32;}
h4{font-size:1.3rem;line-height:1.45;}

p{margin:0 0 1em;max-width:62ch;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

/* ---------- boutons ---------- */
.btn{
  display:inline-block;padding:16px 32px;
  font-family:var(--pf);font-size:12px;font-weight:600;
  letter-spacing:.075em;line-height:1;text-transform:uppercase;
  border-radius:2px;border:2px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn-primary{background:var(--pink);color:#fff;}
.btn-primary:hover{background:#d21e50;}
.btn-outline{background:transparent;color:#fff;border-color:#fff;}
.btn-outline:hover{background:#fff;color:var(--navy);}
.btn-dark{background:var(--navy);color:#fff;}
.btn-dark:hover{background:var(--pink);}

/* ---------- header ---------- */
header.site{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
.logo-link{display:flex;align-items:center;}
.logo-link img{height:56px;width:auto;}
@media(max-width:600px){.logo-link img{height:46px;}}
nav.primary{display:flex;align-items:center;gap:34px;}
nav.primary a{
  font-family:var(--pf);font-size:13px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);padding:6px 2px;
  border-bottom:2px solid transparent;transition:border-color .15s ease,color .15s ease;
}
nav.primary a:hover,nav.primary a.active{color:var(--pink);border-color:var(--pink);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:2px;padding:8px 10px;font-size:1.1rem;}

@media(max-width:800px){
  nav.primary{
    position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;align-items:flex-start;gap:0;
    border-bottom:1px solid var(--line);
    max-height:0;overflow:hidden;transition:max-height .2s ease;
  }
  nav.primary.open{max-height:280px;}
  nav.primary a{padding:14px 28px;width:100%;border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  background:#0e1420 url('../img/hero-bg.jpg') center center/cover no-repeat;
  padding:64px 0 56px;
  overflow:hidden;
}
.hero .particles{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero .particles img{position:absolute;width:34px;opacity:.85;animation:drift 9s ease-in-out infinite;}
.hero .p1{left:8%;top:70%;width:26px;animation-delay:0s;animation-duration:8s;}
.hero .p2{left:18%;top:20%;width:20px;animation-delay:1.2s;animation-duration:10s;}
.hero .p3{left:82%;top:65%;width:30px;animation-delay:.6s;animation-duration:9s;}
.hero .p4{left:70%;top:15%;width:22px;animation-delay:2s;animation-duration:11s;}
.hero .p5{left:45%;top:80%;width:18px;animation-delay:1.6s;animation-duration:8.5s;}
.hero .p6{left:92%;top:30%;width:24px;animation-delay:.3s;animation-duration:9.5s;}
@keyframes drift{
  0%{transform:translateY(0) rotate(0deg);opacity:.85;}
  50%{transform:translateY(-38px) rotate(180deg);opacity:1;}
  100%{transform:translateY(0) rotate(360deg);opacity:.85;}
}
.hero .wrap{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;}
.hero .eyemark{width:190px;max-width:55%;margin:0 auto 20px;}
.hero-lines{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 auto .4em;color:#fff;text-transform:none;max-width:none;}
.hero-lines span{
  font-family:var(--pf);font-weight:700;color:#fff;
  font-size:clamp(1.3rem,3.2vw,2rem);line-height:1.16;letter-spacing:.01em;
}
.hero-lines span:first-child{text-transform:uppercase;font-size:clamp(1.2rem,2.8vw,1.75rem);}
.hero p.lead{color:#D9D6E8;max-width:52ch;margin:16px auto 0;font-size:1rem;}

.reveal{opacity:0;transform:translateY(22px);animation:reveal-in .7s ease forwards;}
.reveal.r0{animation-delay:.05s;}
.reveal.r1{animation-delay:.35s;}
.reveal.r2{animation-delay:.55s;}
.reveal.r3{animation-delay:.7s;}
.reveal.r4{animation-delay:.85s;}
.reveal.r5{animation-delay:1s;}
.reveal.r6{animation-delay:1.15s;}
.reveal.r7{animation-delay:1.3s;}
.reveal.r8{animation-delay:1.55s;}
@keyframes reveal-in{to{opacity:1;transform:translateY(0);}}

@media(max-width:700px){
  .hero{padding:48px 0 40px;}
  .hero .particles img{width:18px !important;}
}
@media (prefers-reduced-motion: reduce){
  .hero .particles{display:none;}
  .reveal{opacity:1;transform:none;animation:none;}
}

/* ---------- bandeau engagements ---------- */
.engagements{padding:38px 0;border-bottom:1px solid var(--line);}
.engagements .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:36px;}
.engagements img{height:110px;width:auto;filter:grayscale(1);opacity:.65;transition:opacity .2s ease,filter .2s ease;}
.engagements a:hover img{opacity:1;filter:grayscale(0);}
@media(max-width:900px){.engagements img{height:80px;}}
@media(max-width:600px){.engagements img{height:60px;}.engagements .wrap{justify-content:center;gap:28px;}}

/* ---------- section generique ---------- */
section{padding:88px 0;}
.section-head{max-width:640px;margin:0 auto 50px;text-align:center;}
.kicker{
  font-family:var(--pf);font-weight:700;color:var(--pink);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:14px;display:block;
}

/* ---------- intro ---------- */
.intro{background:#fafafa;}
.intro .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;text-align:left;}
.intro .section-head{text-align:left;margin:0;}
.intro-tree{width:100%;max-width:280px;margin-top:24px;}
@media(max-width:800px){.intro .wrap{grid-template-columns:1fr;}.intro-tree{margin:24px auto 0;}}

/* ---------- metiers : tuiles avec image + reveal ---------- */
.metiers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.metier{
  position:relative;overflow:hidden;border-radius:3px;aspect-ratio:4/3;
  background:var(--navy);
}
.metier img{width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .4s ease,opacity .3s ease;}
.metier:hover img{transform:scale(1.08);opacity:.3;}
.metier .metier-info{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;color:#fff;background:linear-gradient(to top,rgba(31,14,73,.92),rgba(31,14,73,.15));
}
.metier .metier-info h3{color:#fff;font-size:1.15rem;margin-bottom:.4em;}
.metier .metier-info p{color:#D9D6E8;font-size:.9rem;margin:0;max-width:34ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease;}
.metier:hover .metier-info p{max-height:140px;opacity:1;margin-top:8px;}
@media(max-width:900px){.metiers-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.metiers-grid{grid-template-columns:1fr;}
  .metier .metier-info p{max-height:140px;opacity:1;margin-top:8px;}
  .metier img{opacity:.35;}
}

/* ---------- portfolio ---------- */
.portfolio-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.portfolio-grid .portfolio-item{position:relative;display:block;overflow:hidden;border-radius:4px;aspect-ratio:1/1;}
.portfolio-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.portfolio-grid .portfolio-item:hover img{transform:scale(1.06);}
.portfolio-grid .cat{
  position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  background:linear-gradient(to top,rgba(31,14,73,.85),transparent);
  color:#fff;font-family:var(--pf);font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  opacity:0;transition:opacity .2s ease;
}
.portfolio-grid .portfolio-item:hover .cat{opacity:1;}
@media(max-width:900px){.portfolio-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.portfolio-grid{grid-template-columns:repeat(2,1fr);}}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px;justify-content:center;}

/* ---------- lightbox ---------- */
.portfolio-item{border:none;padding:0;background:none;cursor:zoom-in;font:inherit;}
.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(11,7,26,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:40px;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.lightbox.open{opacity:1;pointer-events:auto;}
.lightbox figure{margin:0;max-width:min(88vw,880px);max-height:86vh;display:flex;flex-direction:column;align-items:center;}
.lightbox .lb-frame{
  position:relative;border-radius:8px;overflow:hidden;background:#0b0716;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  transform:scale(.97) translateY(10px);opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease;
}
.lightbox.open .lb-frame{transform:scale(1) translateY(0);opacity:1;}
.lightbox img{
  display:block;max-width:88vw;max-height:74vh;width:auto;height:auto;
  opacity:1;transition:opacity .2s ease;
}
.lightbox img.switching{opacity:0;}
.lightbox figcaption{
  color:#fff;font-family:var(--pf);font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-top:20px;display:flex;align-items:center;gap:10px;
}
.lightbox figcaption .lb-count{color:#8B84A6;font-weight:600;letter-spacing:.04em;}
.lightbox button{
  position:absolute;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:50%;width:48px;height:48px;font-size:1.4rem;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.lightbox button:hover{background:var(--pink);border-color:var(--pink);transform:scale(1.06);}
.lb-close{top:24px;right:24px;font-size:1.5rem;}
.lb-prev{left:24px;top:50%;margin-top:-24px;}
.lb-next{right:24px;top:50%;margin-top:-24px;}
@media(max-width:700px){
  .lightbox{padding:16px;}
  .lightbox img{max-height:64vh;}
  .lb-prev{left:6px;width:40px;height:40px;}
  .lb-next{right:6px;width:40px;height:40px;}
  .lb-close{top:10px;right:10px;width:40px;height:40px;}
}
.filters button{
  background:transparent;border:1px solid var(--line);border-radius:20px;
  padding:9px 20px;font-family:var(--pf);font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--body-grey);cursor:pointer;
  transition:all .15s ease;
}
.filters button:hover{border-color:var(--pink);color:var(--pink);}
.filters button.active{background:var(--pink);border-color:var(--pink);color:#fff;}

.teaser-foot{margin-top:36px;text-align:center;}

.portfolio-banner{position:relative;display:block;overflow:hidden;border-radius:3px;}
.portfolio-banner img{width:100%;transition:transform .5s ease;}
.portfolio-banner:hover img{transform:scale(1.02);}
.portfolio-banner-cta{
  position:absolute;left:0;right:0;bottom:0;padding:22px 28px;
  background:linear-gradient(to top,rgba(31,14,73,.92),transparent);
  color:#fff;font-family:var(--pf);font-weight:700;font-size:.95rem;
  letter-spacing:.02em;
}

/* ---------- ressources ---------- */
.ressources-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.ressource{
  border:1px solid var(--line);padding:28px;border-radius:2px;display:block;
  transition:border-color .15s ease,transform .15s ease;
}
.ressource:hover{border-color:var(--pink);transform:translateY(-3px);}
.ressource .tag{color:var(--pink);font-family:var(--pf);font-weight:700;font-size:11px;letter-spacing:.08em;display:block;margin-bottom:10px;}
.ressource h3{font-size:1.05rem;margin-bottom:.3em;}
.ressource p{font-size:.88rem;margin:0;}
@media(max-width:800px){.ressources-grid{grid-template-columns:1fr;}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;}
.contact-card{background:#fafafa;border:1px solid var(--line);padding:36px;border-radius:2px;}
.contact-card img{width:88px;height:88px;border-radius:50%;object-fit:cover;margin-bottom:18px;}
.contact-card h3{margin-bottom:0;}
.contact-card .role{color:var(--pink);font-family:var(--pf);font-weight:600;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:18px;display:block;}
.coord-list{list-style:none;padding:0;margin:22px 0 0;font-size:.95rem;}
.coord-list li{padding:10px 0;border-top:1px solid var(--line);}
.coord-list li:first-child{border-top:none;}
.coord-list a{color:var(--pink);}

form.contact-form{display:grid;gap:20px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}
label{display:block;font-family:var(--pf);font-size:.85rem;font-weight:600;margin-bottom:7px;color:var(--ink);}
input,textarea{
  width:100%;padding:13px 16px;border:1px solid var(--line);border-radius:2px;
  font-family:var(--sf);font-size:16px;background:#fff;color:var(--body-grey);
}
input:focus,textarea:focus{outline:2px solid var(--pink);outline-offset:1px;border-color:var(--pink);}
.consent{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--body-grey);}
.consent input{width:auto;margin-top:3px;}
.form-note{font-size:.8rem;color:#9a9a9a;}
@media(max-width:800px){.contact-grid{grid-template-columns:1fr;}}

/* ---------- footer ---------- */
footer.site{background:var(--navy);color:#C9C3DE;padding:56px 0 30px;}
.footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;}
footer.site h4{color:#fff;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;}
footer.site a:hover{color:var(--pink);}
.footer-bottom{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:#8B84A6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ---------- page header (sous-pages) ---------- */
.page-head{padding:60px 0 10px;text-align:center;}
.page-head .kicker{margin-bottom:8px;}
.breadcrumb{font-size:.85rem;color:#9a9a9a;margin-bottom:18px;}
.breadcrumb a{color:var(--pink);}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;}}