/*
Theme Name: Eco Partner
Theme URI: https://boughaz.ma
Author: Boughaz Digital
Description: Thème sur mesure pour Eco Partner – réalisation TCE, gros œuvre, électricité CFO-CFA, fluides, travaux divers.
Version: 1.0.0
Text Domain: ecopartner
*/
:root{
  --beton:#ECEAE4; --beton-2:#DEDBD2; --ink:#0D0D12; --cobalt:#1A0DAB; --cobalt-deep:#0E0775;
  --volt:#FFD23F; --eau:#1F9BD1; --line:rgba(13,13,18,.2); --mut:#55555f;
  --display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--beton);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1400px;margin:0 auto;padding-inline:var(--pad)}
.mono{font:500 .74rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:.92;letter-spacing:-.005em}
em{font-style:normal;color:var(--cobalt)}

/* bandeau maquette */
.ribbon{background:var(--ink);color:var(--beton);text-align:center;padding:7px 12px}
.ribbon b{color:var(--volt);font-weight:500}

/* header */
header.top{position:sticky;top:0;z-index:50;background:rgba(236,234,228,.92);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--ink)}
.top .wrap{display:flex;align-items:center;gap:28px;height:84px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.mono-ep{width:48px;height:69px;background:#fff url(assets/logo.jpeg) no-repeat;background-size:116.4px;background-position:-37.8px -3.6px;border:1.5px solid var(--ink);flex:none}
.brand-t{font:900 1.65rem/.85 var(--display);text-transform:uppercase;letter-spacing:.01em}
.brand-t small{display:block;font:500 .6rem/1.5 var(--mono);letter-spacing:.16em;color:var(--cobalt);margin-top:6px}
.top nav{margin-left:auto;display:flex;gap:30px}
.top nav a{font:500 .76rem var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;position:relative;padding:6px 0}
.top nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cobalt);transition:width .3s}
.top nav a:hover::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:12px;font:800 1.05rem var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;background:var(--cobalt);color:#fff;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s;cursor:pointer}
.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.alt{background:var(--volt);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn svg{width:18px;height:18px}
.top .btn{padding:11px 20px;font-size:.95rem;box-shadow:4px 4px 0 var(--ink)}

/* hero */
.hero{position:relative;border-bottom:1.5px solid var(--ink);overflow:hidden;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;background-position:-1px -1px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 30% 40%,var(--beton) 30%,transparent 100%);opacity:.9}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;padding-block:clamp(40px,7vw,96px)}
.kicker{display:flex;align-items:center;gap:12px;color:var(--cobalt);margin-bottom:26px}
.kicker::before{content:"";width:44px;height:2px;background:var(--cobalt)}
.hero h1{font-weight:900;font-size:clamp(3.4rem,9.2vw,9rem);letter-spacing:-.01em}
.hero h1 span{display:block}
.hero h1 .out{color:transparent;-webkit-text-stroke:2px var(--ink)}
.hero h1 em{background:var(--cobalt);color:#fff;padding:0 .12em;display:inline-block;transform:rotate(-1.2deg);box-shadow:6px 6px 0 var(--ink)}
.lead{max-width:52ch;margin:34px 0 36px;font-size:1.18rem;color:#2a2a33}
.cta{display:flex;flex-wrap:wrap;gap:18px}
.plaque{position:relative;background:#fff;border:2px solid var(--ink);box-shadow:12px 12px 0 var(--cobalt);padding:14px;transform:rotate(1.6deg)}
.plaque img{width:100%;aspect-ratio:1;object-fit:cover}
.plaque::before,.plaque::after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--ink)}
.plaque::before{top:-12px;left:-12px;border-right:0;border-bottom:0;background:var(--volt)}
.plaque::after{bottom:-12px;right:-12px;border-left:0;border-top:0}
.plaque .tag{position:absolute;left:-18px;bottom:36px;background:var(--volt);border:2px solid var(--ink);padding:8px 14px;font:800 1rem var(--display);text-transform:uppercase;letter-spacing:.06em;transform:rotate(-4deg)}
.dim{position:absolute;bottom:22px;left:var(--pad);right:var(--pad);display:flex;align-items:center;gap:10px;color:var(--mut)}
.dim i{flex:1;height:1px;background:currentColor;position:relative}
.dim i::before,.dim i::after{content:"";position:absolute;top:-6px;width:1px;height:13px;background:currentColor}
.dim i::after{right:0}

/* marquee */
.marq{background:var(--cobalt);color:#fff;border-bottom:1.5px solid var(--ink);overflow:hidden;white-space:nowrap}
.marq div{display:inline-block;padding:16px 0;font:800 1.7rem var(--display);text-transform:uppercase;letter-spacing:.06em;animation:marq 38s linear infinite}
.marq span{margin-inline:26px;color:var(--volt)}
@keyframes marq{to{transform:translateX(-50%)}}

/* lots */
section{padding-block:clamp(64px,9vw,128px)}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:56px}
.sec-h h2{font-weight:900;font-size:clamp(2.6rem,6.4vw,6rem);max-width:14ch}
.sec-h p{max-width:42ch;color:var(--mut)}
.lots-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,5vw,72px);align-items:start}
.lot-list{border-top:1.5px solid var(--ink)}
.lot{display:grid;grid-template-columns:72px 1fr auto;gap:8px 20px;padding:26px 8px;border-bottom:1.5px solid var(--ink);cursor:pointer;transition:background .25s,padding .25s;outline:none}
.lot:hover,.lot:focus-visible,.lot.on{background:var(--ink);color:var(--beton);padding-inline:22px}
.lot .n{font:900 3.3rem/.9 var(--display);color:transparent;-webkit-text-stroke:1.5px currentColor}
.lot.on .n,.lot:hover .n{color:var(--volt);-webkit-text-stroke:0}
.lot h3{font-weight:800;font-size:2.1rem}
.lot p{grid-column:2/3;color:inherit;opacity:.75;font-size:.98rem;margin-top:6px;max-width:46ch}
.lot ul{grid-column:2/4;list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lot li{font:500 .68rem var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;padding:4px 9px;opacity:.85}
.lot .ar{align-self:start;width:28px;height:28px;transition:transform .3s}
.lot:hover .ar,.lot.on .ar{transform:rotate(-45deg);color:var(--volt)}
.coupe{position:sticky;top:110px;background:#fff;border:2px solid var(--ink);box-shadow:12px 12px 0 var(--ink);padding:16px 16px 0;
  background-image:linear-gradient(rgba(26,13,171,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(26,13,171,.09) 1px,transparent 1px);background-size:24px 24px}
.coupe svg{width:100%;height:auto;display:block}
.coupe .cap{display:flex;justify-content:space-between;gap:10px;border-top:1.5px solid var(--ink);margin:6px -16px 0;padding:11px 16px;background:var(--beton);color:var(--mut)}
.layer{transition:opacity .35s}
.coupe[data-lot="1"] .layer:not(.l1),.coupe[data-lot="2"] .layer:not(.l2),.coupe[data-lot="3"] .layer:not(.l3),.coupe[data-lot="4"] .layer:not(.l4){opacity:.1}
.coupe[data-lot="1"] .lbl:not(.l1),.coupe[data-lot="2"] .lbl:not(.l2),.coupe[data-lot="3"] .lbl:not(.l3),.coupe[data-lot="4"] .lbl:not(.l4){opacity:0}
.lbl{transition:opacity .35s;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);animation:draw 2.2s .5s cubic-bezier(.6,.1,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pulse{animation:pulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{50%{transform:scale(1.5);opacity:.5}}
.flow{stroke-dasharray:6 8;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-14}}

/* methode */
.dark{background:var(--ink);color:var(--beton)}
.dark em{color:var(--volt)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(236,234,228,.3)}
.step{padding:34px 26px 40px 0;border-right:1px solid rgba(236,234,228,.3);padding-left:26px;position:relative}
.step:first-child{padding-left:0}
.step:last-child{border-right:0}
.step .big{font:900 7rem/.8 var(--display);color:transparent;-webkit-text-stroke:1.5px var(--volt);display:block;margin-bottom:22px}
.step h3{font-size:1.9rem;font-weight:800;margin-bottom:10px}
.step p{opacity:.72;font-size:.97rem}

/* réalisations */
.proj{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.card{position:relative;border:2px solid var(--ink);background:#fff;overflow:hidden;transition:transform .3s,box-shadow .3s;box-shadow:0 0 0 var(--ink)}
.card:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)}
.card .ph{aspect-ratio:4/3;display:grid;place-items:center;color:var(--cobalt);position:relative;
  background:repeating-linear-gradient(135deg,rgba(26,13,171,.07) 0 12px,transparent 12px 24px),var(--beton-2)}
.card .ph svg{width:46%;opacity:.85}
.card .ph .mono{position:absolute;left:14px;top:14px;background:var(--ink);color:var(--beton);padding:5px 9px}
.card .cb{padding:20px 22px 24px;border-top:2px solid var(--ink)}
.card h3{font-size:1.8rem;font-weight:800;margin:4px 0 6px}
.card .meta{color:var(--mut);font-size:.92rem}
.c1{grid-column:span 7}.c2{grid-column:span 5}.c3{grid-column:span 5}.c4{grid-column:span 7}
.c1 .ph,.c4 .ph{aspect-ratio:16/9}
.note{margin-top:22px;color:var(--mut);display:flex;gap:10px;align-items:center}
.note::before{content:"";width:10px;height:10px;background:var(--volt);border:1.5px solid var(--ink);flex:none}

/* engagements */
.eng{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid var(--ink);background:#fff}
.eng div{padding:34px 26px;border-right:2px solid var(--ink)}
.eng div:last-child{border-right:0}
.eng svg{width:44px;height:44px;color:var(--cobalt);margin-bottom:22px}
.eng h3{font-size:1.7rem;font-weight:800;margin-bottom:8px}
.eng p{color:var(--mut);font-size:.96rem}

/* contact */
.contact{background:var(--cobalt);color:#fff;position:relative;overflow:hidden;border-top:1.5px solid var(--ink)}
.contact::before{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:48px 48px}
.contact .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,90px);align-items:start}
.contact h2{font-weight:900;font-size:clamp(3rem,7.4vw,7rem)}
.contact h2 em{color:var(--volt)}
.contact .lead{color:#dcdcff}
.coords{list-style:none;margin-top:30px;display:grid;gap:14px}
.coords li{display:flex;gap:14px;align-items:baseline;border-top:1px solid rgba(255,255,255,.35);padding-top:14px}
.coords .mono{width:92px;flex:none;color:var(--volt)}
form{background:var(--beton);color:var(--ink);border:2px solid var(--ink);box-shadow:12px 12px 0 var(--ink);padding:30px;display:grid;gap:18px}
form h3{font-size:2rem;font-weight:800}
label{display:grid;gap:6px;font:500 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
input,select,textarea{font:400 1rem var(--body);padding:13px 14px;border:2px solid var(--ink);background:#fff;border-radius:0;width:100%;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--volt);outline-offset:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:block;font:inherit}
.chips input{position:absolute;opacity:0;width:0}
.chips span{display:inline-block;padding:8px 13px;border:2px solid var(--ink);background:#fff;cursor:pointer;font:500 .7rem var(--mono);letter-spacing:.1em;transition:background .2s}
.chips input:checked+span{background:var(--ink);color:var(--volt)}
.chips input:focus-visible+span{outline:3px solid var(--volt)}
form .btn{justify-content:center;width:100%}

/* footer */
footer{background:var(--ink);color:var(--beton);padding-top:64px;overflow:hidden}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:34px;padding-bottom:56px}
.foot h4{font:500 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--volt);margin-bottom:16px}
.foot a{display:block;text-decoration:none;opacity:.8;padding:3px 0}
.foot a:hover{opacity:1;color:var(--volt)}
.foot .ft{display:flex;gap:16px;align-items:center}
.foot .ft .mono-ep{border-color:var(--beton)}
.foot .ft p{font:800 1.25rem/1.05 var(--display);text-transform:uppercase;font-style:italic;letter-spacing:.03em}
.giant{font:900 clamp(4rem,17.5vw,17rem)/.78 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:2px rgba(236,234,228,.35);white-space:nowrap;text-align:center;margin-bottom:-.06em;user-select:none}
.legal{border-top:1px solid rgba(236,234,228,.25);padding-block:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;opacity:.6}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.hero .kicker,.hero h1 span,.hero .lead,.hero .cta,.plaque{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.hero .kicker{animation-delay:.05s}.hero h1 span:nth-child(1){animation-delay:.15s}.hero h1 span:nth-child(2){animation-delay:.27s}.hero h1 span:nth-child(3){animation-delay:.39s}
.hero .lead{animation-delay:.55s}.hero .cta{animation-delay:.68s}.plaque{animation-delay:.5s}
@keyframes up{from{opacity:0;transform:translateY(34px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.draw{stroke-dashoffset:0}}

@media (max-width:1000px){
  .hero .wrap,.lots-grid,.contact .wrap{grid-template-columns:1fr}
  .plaque{max-width:340px;margin:10px auto 0}
  .coupe{position:relative;top:0;order:-1}
  .steps{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(n+3){border-top:1px solid rgba(236,234,228,.3)}.step:nth-child(3){padding-left:0}
  .eng{grid-template-columns:1fr 1fr}.eng div:nth-child(2){border-right:0}.eng div:nth-child(n+3){border-top:2px solid var(--ink)}
  .foot{grid-template-columns:1fr 1fr}
  .c1,.c2,.c3,.c4{grid-column:span 12}
  .top nav{display:none}.top .btn{margin-left:auto}
}
@media (max-width:560px){
  body{font-size:16px}
  .top .wrap{height:72px}.mono-ep{width:38px;height:55px;background-size:92px;background-position:-30px -2.9px}
  .brand-t{font-size:1.35rem}.top .btn span{display:none}
  .lot{grid-template-columns:50px 1fr auto}.lot .n{font-size:2.4rem}.lot h3{font-size:1.6rem}
  .steps,.eng,.foot{grid-template-columns:1fr}.step,.step:nth-child(n){border-right:0;padding-left:0;border-top:1px solid rgba(236,234,228,.3)}
  .eng div{border-right:0!important;border-top:2px solid var(--ink)}.eng div:first-child{border-top:0}
  form{padding:22px}
}
.page-content{padding-block:clamp(48px,7vw,96px)}
.page-content h1{font-size:clamp(2.6rem,6vw,5rem);margin-bottom:32px}
.page-content .entry>*+*{margin-top:1.1em}
.notice{background:var(--volt);border:2px solid var(--ink);padding:14px 18px;font-weight:700}
.notice.err{background:#ffb4b4}