/* ASSILIA CEBE - brand-lock from leads-kits/energie-assilia-cebe-rabat/KIT.md
   Fond #F8F7F2 | Surface #E5E7EB | Vert #006233 | Rouge #C1272D | Bleu #0F4C81
   Display + nav: Space Grotesk | Body: Inter */

:root{
  --fond:#F8F7F2;
  --surface:#E5E7EB;
  --vert:#006233;
  --vert-fonce:#004A27;
  --rouge:#C1272D;
  --bleu:#0F4C81;
  --encre:#16201C;
  --encre-doux:#4A5652;
  --creme:#FFFFFF;
  --rule:rgba(22,32,28,.14);
  --display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --nav-h:84px;
  --gut:clamp(20px,5vw,64px);
  --max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu)}

h1,h2,h3,.h{font-family:var(--display);font-weight:700;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(34px,5.4vw,48px);line-height:1.14}
h2{font-size:clamp(26px,3.6vw,32px);line-height:1.25;font-weight:600}
h3{font-size:clamp(19px,2.2vw,24px);line-height:1.33;font-weight:500}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sect{padding:clamp(56px,8vw,96px) 0}
.sect--surface{background:var(--surface)}
.lead{font-size:clamp(17px,1.9vw,19px);color:var(--encre-doux);max-width:62ch}

/* red hairline used as the kit's single accent */
.rule{width:56px;height:3px;background:var(--rouge);border:0;margin:0 0 22px}
.sect-head{max-width:70ch;margin-bottom:clamp(30px,4vw,44px)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.01em;
  padding:14px 26px;border:1.5px solid transparent;border-radius:2px;
  background:transparent;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:background .2s,color .2s,border-color .2s;
}
.btn--plein{background:var(--vert);color:var(--creme);border-color:var(--vert)}
.btn--plein:hover{background:var(--vert-fonce);border-color:var(--vert-fonce)}
.btn--ligne{border-color:var(--vert);color:var(--vert)}
.btn--ligne:hover{background:var(--vert);color:var(--creme)}
.btn--clair{border-color:rgba(255,255,255,.75);color:var(--creme)}
.btn--clair:hover{background:var(--creme);color:var(--vert);border-color:var(--creme)}
.btn--blanc{background:var(--creme);color:var(--vert);border-color:var(--creme)}
.btn--blanc:hover{background:transparent;color:var(--creme);border-color:var(--creme)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--gut);transition:background .25s,box-shadow .25s;
}
.nav--over{background:transparent}
.nav.scrolled,.nav--solide{background:var(--fond);box-shadow:0 1px 0 var(--rule)}
body.nav-open .nav{z-index:110}

.nav__brand{position:relative;z-index:120;display:flex;align-items:center;justify-self:start}
.nav__brand img{height:44px;width:auto}
.nav__brand .lg-clair{display:none}
.nav--over .lg-couleur{display:none}
.nav--over .lg-clair{display:block}
.nav.scrolled .lg-couleur,.nav.menu-open .lg-couleur{display:block}
.nav.scrolled .lg-clair,.nav.menu-open .lg-clair{display:none}

.nav__links{display:flex;align-items:center;gap:clamp(18px,2.6vw,34px);justify-self:center}
.nav__links a{
  font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--encre);
  padding:6px 0;border-bottom:2px solid transparent;
}
.nav--over .nav__links a{color:var(--creme)}
.nav.scrolled .nav__links a{color:var(--encre)}
.nav__links a:hover{border-bottom-color:var(--rouge)}
.nav__links a.active{border-bottom-color:var(--vert)}
.nav--over .nav__links a.active{border-bottom-color:var(--creme)}

.nav__end{position:relative;z-index:120;justify-self:end;display:flex;align-items:center}
.nav__end .btn{padding:11px 20px;font-size:14px}
.nav--over .nav__end .btn{border-color:rgba(255,255,255,.75);color:var(--creme)}
.nav--over .nav__end .btn:hover{background:var(--creme);color:var(--vert)}

.nav__burger{
  display:none;position:relative;z-index:120;
  width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;
}
.nav__burger span{display:block;width:24px;height:2px;background:var(--encre);margin:5px auto;transition:transform .25s,opacity .2s}
.nav--over .nav__burger span{background:var(--creme)}
.nav.scrolled .nav__burger span,.nav.menu-open .nav__burger span{background:var(--encre)}
.nav.menu-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.menu-open .nav__burger span:nth-child(2){opacity:0}
.nav.menu-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* the duplicated CTA only exists inside the mobile menu */
.nav__links .nav__cta--menu{display:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88vh;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__bg{position:absolute;inset:0;overflow:hidden}
.hero__bg picture{position:absolute;inset:0;display:block}
.hero__bg img{width:100%;height:100%;object-fit:cover;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero__voile{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,20,15,.52) 0%,rgba(9,20,15,.22) 38%,rgba(6,34,20,.80) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(56px,8vw,88px);max-width:var(--max);margin:0 auto}
.hero__inner h1{color:var(--creme);max-width:18ch}
.hero__sous{color:rgba(255,255,255,.92);font-size:clamp(17px,2vw,20px);max-width:52ch;margin-top:18px}

/* ---------- page banner ---------- */
.banniere{position:relative;min-height:clamp(320px,44vw,440px);display:flex;align-items:flex-end;overflow:hidden}
.banniere__bg{position:absolute;inset:0}
.banniere__bg img{width:100%;height:100%;object-fit:cover}
.banniere__voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,20,15,.50) 0%,rgba(6,34,20,.76) 100%)}
.banniere__inner{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut) clamp(34px,5vw,52px)}
.banniere h1{color:var(--creme)}
.banniere p{color:rgba(255,255,255,.9);margin-top:14px;max-width:54ch}

/* ---------- grids / cards ---------- */
.grille-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,34px)}
.grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,54px);align-items:center}
/* two text columns must align on their first rule, not float to their own centre */
.grille-2--haut{align-items:start}

.carte{background:var(--fond);border:1px solid var(--rule);border-radius:2px;padding:clamp(24px,3vw,32px)}
.sect--surface .carte{background:var(--fond)}
.carte__ico{width:54px;height:54px;color:var(--vert);margin-bottom:18px}
.carte__ico svg{width:100%;height:100%;display:block}
.carte h3{margin-bottom:10px}
.carte p{color:var(--encre-doux);font-size:15px}

/* ---------- bande nationale ---------- */
.nation{background:var(--vert);color:var(--creme)}
.nation h2{color:var(--creme)}
.nation .rule{background:var(--creme)}
.nation__grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,30px)}
.nation__item figure{margin:0}
.nation__item img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.nation__item figcaption{
  font-family:var(--display);font-weight:500;font-size:clamp(16px,1.7vw,19px);
  color:var(--creme);margin-top:16px;
}

/* ---------- bande photo (renvoi) ---------- */
.bande{position:relative;min-height:clamp(340px,40vw,420px);display:flex;align-items:center;overflow:hidden}
.bande__bg{position:absolute;inset:0}
.bande__bg img{width:100%;height:100%;object-fit:cover}
.bande__voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,14,26,.86) 0%,rgba(4,14,26,.52) 100%)}
.bande__inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:clamp(40px,6vw,60px) var(--gut);width:100%}
.bande h2{color:var(--creme);max-width:20ch}
.bande p{color:rgba(255,255,255,.88);margin-top:14px;max-width:50ch}

/* ---------- CTA band ---------- */
.cta{background:var(--vert);color:var(--creme);text-align:center}
.cta h2{color:var(--creme)}
.cta p{color:rgba(255,255,255,.88);margin:14px auto 0;max-width:46ch}
.cta .btns{justify-content:center}
.cta__tel{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(26px,3.6vw,34px);color:var(--creme);text-decoration:none;margin-top:22px;
}
.cta__tel:hover{text-decoration:underline}

/* ---------- contact ---------- */
.coord{display:grid;gap:2px;background:var(--rule);border:1px solid var(--rule);border-radius:2px;overflow:hidden}
.coord__l{background:var(--fond);padding:clamp(22px,3vw,30px)}
.coord__k{font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-doux)}
.coord__v{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,26px);margin-top:8px;color:var(--encre)}
.coord__v a{color:var(--vert);text-decoration:none}
.coord__v a:hover{text-decoration:underline}
.coord__n{font-size:14px;color:var(--encre-doux);margin-top:8px}

/* ---------- footer ---------- */
.pied{background:var(--vert-fonce);color:rgba(255,255,255,.82);padding:clamp(48px,6vw,68px) 0 30px}
.pied__haut{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,54px)}
.pied__logo img{height:62px;width:auto}
.pied__blurb{margin-top:18px;font-size:14px;max-width:36ch;color:rgba(255,255,255,.72)}
.pied h4{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--creme);margin:0 0 14px}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pied a{color:rgba(255,255,255,.82);text-decoration:none;font-size:15px}
.pied a:hover{color:var(--creme);text-decoration:underline}
.pied__bas{
  margin-top:clamp(34px,4vw,48px);padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  font-size:13px;color:rgba(255,255,255,.6);
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .pied__haut{grid-template-columns:1fr 1fr}
  .pied__logo{grid-column:1 / -1}
}
@media (max-width:860px){
  :root{--nav-h:72px}
  .nav{grid-template-columns:auto 1fr}
  .nav__end .btn{display:none}
  .nav__burger{display:block;justify-self:end}
  .nav__end{justify-self:end}

  .nav__links{
    position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;
    background:var(--fond);flex-direction:column;justify-content:center;gap:26px;
    transform:translateX(100%);transition:transform .3s ease;z-index:100;
  }
  .nav__links.nav-open{transform:translateX(0)}
  .nav__links a,.nav--over .nav__links a{color:var(--encre);font-size:19px}
  .nav__links .nav__cta--menu{display:inline-flex;margin-top:6px}
  .nav.menu-open .nav__links a.nav__cta--menu{background:var(--vert);color:var(--creme);border-color:var(--vert)}

  .grille-3,.nation__grille{grid-template-columns:1fr}
  .grille-2{grid-template-columns:1fr}
  .nation__item img{aspect-ratio:3/2}
  .bande__voile{background:linear-gradient(180deg,rgba(4,14,26,.62) 0%,rgba(4,14,26,.86) 100%)}
  .hero{min-height:86vh;min-height:86svh}
}
@media (max-width:560px){
  .pied__haut{grid-template-columns:1fr}
  .btns .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  .hero__bg img{animation:none}
  *{transition-duration:.01ms !important}
}