/* E&M — Engineering and More : surcouche de la DA (crème #F3F4F1, vert #18344B) */
.em{--g:#18344B;--g2:#22476a;--g-soft:#e6eef0;--sage:#729D75;--cream:#F3F4F1;--cream2:#e7ebec;--card:#ffffff;--line:#dde3e6;--tan:#5f8a62;--tag:#C5CED3;--ink:#0F1E2B;--mut:#56636e;background:var(--cream)}
.em .hdr{background:rgba(244,236,225,.96)}
.em .logo img{height:62px}
.em .ftr-brand img{height:110px}
.circ{width:38px;height:38px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;flex:none;opacity:.8;transition:.25s}
.flip{transform:rotate(180deg)}
.tag-live{display:inline-flex;align-items:center;gap:8px;background:var(--g);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border-radius:30px}
.tag-live i{width:7px;height:7px;border-radius:50%;background:#9fd0a2;box-shadow:0 0 0 3px rgba(159,208,162,.25);animation:pulse 2s infinite}
.sub.light{color:rgba(255,255,255,.75)}

/* Hero */
.em-hero{position:relative;min-height:680px;display:flex;align-items:center;overflow:hidden}
.em-hero-slides{position:absolute;inset:0 0 0 30%}
.em-hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.em-hero-slides img.on{opacity:1}
.em-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cream) 30%,rgba(244,236,225,.85) 42%,rgba(244,236,225,0) 65%);z-index:1}
.em-hero-in{position:relative;z-index:2;width:100%;padding-top:40px;padding-bottom:60px}
.em-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5.4vw,76px);line-height:1.04;max-width:9.5em;color:#1d211d}
.em-hero p{max-width:40ch;margin-top:22px;font-size:17px;color:#3e403a}
.em-dots{display:flex;align-items:center;gap:14px;margin-top:48px}
.em-dots button{background:none;border:0;font:inherit;font-size:13px;color:#8a8478;cursor:pointer;padding:4px 0}
.em-dots button.on{color:var(--g);font-weight:600}
.em-dots i{width:44px;height:1px;background:#bfb3a0}
.em-hero-pin{position:absolute;right:40px;bottom:36px;z-index:2;display:flex;align-items:center;gap:12px;color:#fff;max-width:220px;font-size:14px;text-shadow:0 1px 8px rgba(0,0,0,.4)}

/* Vision */
.em-vision{display:grid;grid-template-columns:1fr 1.15fr .55fr;gap:48px;align-items:start}
.em-vision-img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.4}
.em-vision-img img{width:100%;height:100%;object-fit:cover}
.em-vision-img:after{content:"";position:absolute;right:0;top:0;bottom:0;width:22%;background:var(--g)}
.em-vision-tag{position:absolute;right:6%;bottom:8%;z-index:1;display:flex;align-items:center;gap:18px;background:rgba(24,52,75,.92);color:#fff;padding:16px 18px 16px 22px;border-radius:4px;font-size:14.5px;max-width:280px}
.em-stat{border-left:1px solid var(--line);padding-left:28px}
.em-stat b{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1;color:var(--g)}
.em-stat p{color:var(--mut);font-size:14px;margin:8px 0 20px}
.em-stat img{border-radius:6px;aspect-ratio:3/4;object-fit:cover;width:100%}

/* Services cartes */
.em-serv{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.em-serv-card{background:var(--cream2);border-radius:6px;padding:30px 26px 26px;display:flex;flex-direction:column;min-height:280px;transition:background .3s,color .3s}
.em-serv-card h3{font-weight:600;font-size:17px;margin-top:22px}
.em-serv-card p{color:var(--mut);font-size:14.5px;margin-top:8px;flex:1}
.em-serv-card .circ{margin-top:20px;align-self:flex-end}
.em-serv-card:hover{background:var(--g);color:#fff}
.em-serv-card:hover p{color:rgba(255,255,255,.75)}
.em-serv-card:hover .em-ic{color:#9fc2a2}
.em-ic{color:var(--g);display:inline-flex}

/* Section sombre + cartes réalisations */
.em-dark{background:var(--g);color:#fff;padding:96px 0}
.rcard{display:block;background:var(--card);border-radius:6px;overflow:hidden;color:var(--ink)}
.em-dark .rcard{background:rgba(255,255,255,.07);color:#fff}
.rcard-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.rcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.rcard:hover .rcard-img img{transform:scale(1.06)}
.rcard-img .tag-live{position:absolute;left:14px;top:14px}
.rcard-bd{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:20px 22px}
.rcard h3{font-family:var(--serif);font-weight:400;font-size:23px}
.rcard p{font-size:13.5px;opacity:.7;margin-top:2px}
.rcard:hover .circ{background:currentColor}
.rcard:hover .circ .ic{color:var(--card)}
.em-dark .rcard:hover .circ .ic{color:var(--g)}
.rcard.hide{display:none}

/* Projet phare */
.em-phare{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
.em-phare-img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.6}
.em-phare-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.em-phare-img .tag-live{position:absolute;left:20px;top:20px}
.em-kv{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.em-kv li{padding:16px 0}.em-kv li+li{padding-left:18px;border-left:1px solid var(--line)}
.em-kv small{display:block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tan)}
.em-kv b{font-weight:500}

/* CTA */
.em-cta{border-radius:12px;padding:60px;color:#fff;display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:center;background:linear-gradient(90deg,rgba(24,52,75,.96) 50%,rgba(24,52,75,.7)),var(--img) center/cover;max-width:1176px}
.em-cta p{color:rgba(255,255,255,.8);margin-top:12px;max-width:52ch}

/* En-tête de page */
.em-head{padding:72px 0 40px;background:linear-gradient(180deg,var(--cream2),var(--cream))}
.em-head .sub{max-width:60ch}
.em-anchors{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.em-anchors a{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--card);padding:10px 18px;border-radius:30px;font-size:14.5px;font-weight:500;transition:.2s}
.em-anchors a span{color:var(--tan);font-family:var(--serif)}
.em-anchors a:hover{border-color:var(--g);background:var(--g);color:#fff}

/* Réalisations */
.em-filters{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.em-filters small{opacity:.6;margin-left:4px}
.em-count{color:var(--mut)}
.em-feature{position:relative;display:block;border-radius:12px;overflow:hidden;height:460px;margin-bottom:24px;color:#fff}
.em-feature img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .8s}
.em-feature:hover img{transform:scale(1.04)}
.em-feature:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,30,43,.9),rgba(15,30,43,.3) 55%,transparent);z-index:1}
.em-feature>div{position:absolute;left:48px;bottom:44px;z-index:2;max-width:460px}
.em-feature h2{font-family:var(--serif);font-weight:400;font-size:48px;margin:16px 0 8px}
.em-feature p{color:rgba(255,255,255,.85);margin-bottom:22px}
.em-feature.hide{display:none}
.em-numbers .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.em-numbers{padding:64px 0}
.em-num{padding:0 26px;border-left:1px solid rgba(255,255,255,.15)}
.em-num:first-child{border:0;padding-left:0}
.em-num b{display:block;font-family:var(--serif);font-weight:400;font-size:52px;line-height:1;color:#9fc2a2}
.em-num span{color:rgba(255,255,255,.75);font-size:14.5px;margin-top:8px;display:block}

/* Détail */
.back{display:inline-flex;gap:8px;align-items:center;font-size:14px;color:var(--mut);margin-bottom:18px}
.em-detail{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
.chips-s{display:flex;gap:8px;margin:18px 0 6px;flex-wrap:wrap}
.chips-s span{background:var(--cream2);padding:6px 14px;border-radius:4px;font-size:13.5px}
.chips-s .tag-live{background:var(--g)}
.em-dl{display:grid;grid-template-columns:1fr 1fr;margin-top:26px;border-top:1px solid var(--line)}
.em-dl div{padding:16px 0;border-bottom:1px solid var(--line)}
.em-dl dt{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tan)}
.em-dl dd{font-weight:500;margin-top:4px}
.em-gal{aspect-ratio:4/3.3}
.gal-thumbs{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}

/* Services détaillés */
.em-svc-in{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.em-svc.rev .em-svc-img{order:2}
.em-svc:nth-of-type(even){background:var(--card)}
.em-svc-img{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.em-svc-img img{width:100%;height:100%;object-fit:cover}
.em-svc-img span{position:absolute;left:22px;bottom:16px;font-family:var(--serif);font-size:56px;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.4)}
.em-check{list-style:none;margin-top:22px}
.em-check li{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.em-check .ic{color:var(--g)}
.em-steps:before{background:rgba(255,255,255,.2)}
.em-steps span{background:#9fc2a2;color:var(--g)}
.em-steps p{color:rgba(255,255,255,.7)}
.em-domains{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.em-domains div{position:relative;min-height:300px;border-radius:var(--r);overflow:hidden;color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,rgba(15,30,43,.88),rgba(15,30,43,.1) 70%),var(--img) center/cover}
.em-domains h3{font-family:var(--serif);font-weight:400;font-size:30px}
.em-domains p{color:rgba(255,255,255,.8)}

/* À propos */
.em-mv{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.em-mv>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px}
.em-mv h3{font-family:var(--serif);font-weight:400;font-size:28px;margin-top:16px}
.em-mv p{color:var(--mut);margin-top:8px}

/* Contact */
.em-chero{min-height:340px;display:flex;align-items:center;color:#fff;background:linear-gradient(90deg,rgba(20,16,12,.8),rgba(20,16,12,.35)),var(--img) center/cover}
.em-chero h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,5vw,64px)}
.em-chero p{font-family:var(--serif);font-size:24px;margin-top:6px;opacity:.9}
.em-contact{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;align-items:start}
.em-infos{list-style:none;margin:28px 0}
.em-infos li{display:flex;gap:16px;align-items:flex-start;padding:14px 0}
.em-infos .ic{color:var(--g);margin-top:2px}
.em-infos b{display:block;font-weight:600}
.em-infos span,.em-infos a{color:var(--mut);font-size:14.5px}
.em .contact-box{position:static}

@media (max-width:1100px){.em-serv{grid-template-columns:1fr 1fr}.em-vision{grid-template-columns:1fr 1fr}.em-stat{display:none}}
@media (max-width:900px){
  .em .logo img{height:50px}
  .em-hero{min-height:0;flex-direction:column;align-items:stretch}
  .em-hero-slides{position:relative;inset:auto;height:300px;order:-1}
  .em-hero:before{display:none}
  .em-hero-in{padding:36px 20px 44px}
  .em-hero-pin{display:none}
  .em-vision,.em-phare,.em-detail,.em-svc-in,.em-contact,.em-cta{grid-template-columns:1fr;gap:28px}
  .em-svc.rev .em-svc-img{order:0}
  .em-serv,.em-domains,.em-mv{grid-template-columns:1fr}
  .em-serv-card{min-height:0}
  .em-dark{padding:64px 0}
  .em-feature{height:420px}.em-feature>div{left:22px;right:22px;bottom:26px}.em-feature h2{font-size:36px}
  .em-numbers .wrap{grid-template-columns:1fr 1fr;gap:28px 0}.em-num{border:0;padding:0 10px 0 0}
  .em-cta{padding:34px 24px;max-width:calc(100% - 40px)}
  .em-kv{grid-template-columns:1fr}.em-kv li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
}

/* ---------- Réalisations clients ---------- */
.rcard-client{position:absolute;left:14px;bottom:14px;background:rgba(251,247,240,.94);color:var(--ink);font-size:12.5px;padding:6px 12px;border-radius:30px}
.rcard-client b{font-weight:600;color:var(--g)}
.rcard-n{position:absolute;right:14px;top:14px;display:flex;align-items:center;gap:5px;background:rgba(20,35,29,.6);color:#fff;font-size:12px;padding:5px 9px;border-radius:20px;backdrop-filter:blur(4px)}
.rcard-img img{filter:saturate(1.02)}
.em-dark .rcard-client{color:var(--ink)}
.em-ouv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.em-ouv-card{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--g);color:#fff;display:block}
.em-ouv-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
a.em-ouv-card:hover img{transform:scale(1.05)}
.em-ouv-card>div{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;display:flex;align-items:center;gap:12px;background:linear-gradient(0deg,rgba(15,30,43,.9),transparent)}
.em-ouv-card h3{font-family:var(--serif);font-weight:400;font-size:22px;flex:1}
.em-ouv-n{font-family:var(--serif);color:#9fc2a2;font-size:18px}
.em-ouv-card.noimg{background:linear-gradient(135deg,#18344B,#22476a)}
.em-ouv-card.noimg:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px}
.em-ouv-ic{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);color:#9fc2a2;opacity:.9}
.em-ouv-card.noimg>div{background:none}
.em-videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,320px));gap:20px;margin-top:28px}
.em-videos figure{margin:0}
.em-videos video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:var(--r);background:#111}
.em-videos figcaption{margin-top:8px;font-weight:500}
.em-clients{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0}
.em-clients-in{display:grid;grid-template-columns:1fr 1.8fr;gap:48px;align-items:center}
.em-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.em-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:150px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:.25s;padding:20px}
.em-logo:hover{border-color:var(--g);box-shadow:0 12px 30px rgba(24,52,75,.1)}
.em-logo img{max-height:70px;max-width:80%;object-fit:contain;filter:grayscale(1);opacity:.8;transition:.25s}
.em-logo:hover img{filter:none;opacity:1}
.em-logo-txt{font-family:var(--serif);font-size:26px;white-space:nowrap;color:var(--g);letter-spacing:.02em}
.em-logo small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tan)}
.em-domains a{position:relative;min-height:300px;border-radius:var(--r);overflow:hidden;color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(0deg,rgba(15,30,43,.88),rgba(15,30,43,.1) 70%),var(--img) center/cover}
.em-domains a h3{font-family:var(--serif);font-weight:400;font-size:30px}
.em-domains a p{color:rgba(255,255,255,.8)}
@media (max-width:900px){.em-ouv{grid-template-columns:1fr}.em-ouv-card{aspect-ratio:16/9}.em-ouv-card h3{font-size:20px}.em-clients-in{grid-template-columns:1fr;gap:24px}.em-videos{grid-template-columns:1fr 1fr}}


/* =========================================================
   Charte graphique E&M — typographie mono en capitales, aplats sans dégradé
   ========================================================= */
.em .h1,.em .h2,.em .h3,.em h1,.em h2,.em h3,.em h4,.em .rcard h3,.em .em-serv-card h3,.em .em-ouv-card h3,.em .em-num b,.em .em-stat b,.em .ab-facts b,.em .values h3,.em .em-mv h3,.em .em-kv b,.em .em-dl dd{font-family:var(--serif);font-weight:400;letter-spacing:.01em}
.em h1,.em .h1,.em .h2,.em h2{text-transform:uppercase;letter-spacing:.02em;line-height:1.12}
.em .h1{font-size:clamp(32px,4vw,52px)}
.em .h2{font-size:clamp(24px,2.7vw,36px)}
.em .em-hero h1{font-size:clamp(34px,4.4vw,60px);max-width:13em;color:var(--g)}
.em .em-hero h1 .acc,.em .em-hero h1 .acc *{color:var(--sage);font-style:normal}
.em .ab-hero h1,.em .em-chero h1{font-size:clamp(32px,4.2vw,56px)}
.em .rcard h3,.em .em-ouv-card h3{font-size:18px;text-transform:uppercase;letter-spacing:.02em}
.em .em-feature h2{font-size:clamp(28px,3.4vw,44px)}
.em .em-serv-card h3,.em .values h3,.em .em-mv h3{font-size:17px;text-transform:uppercase;letter-spacing:.03em}
.em .em-mv h3{font-size:20px}
.em .em-svc-img span,.em .ab-m-img span,.em .em-ouv-n{font-family:var(--serif)}
.em .eyebrow{font-family:var(--serif);color:var(--sage);letter-spacing:.18em;font-size:12px;font-weight:400}
.em .eyebrow.light{color:#9fc2a2}
.em .btn{border-radius:3px;font-weight:500}
.em .btn:hover{background:#0F1E2B;border-color:#0F1E2B}
.em .btn-w:hover{background:var(--tag);border-color:var(--tag);color:var(--g)}
.em .btn-o{color:var(--g);border-color:#b8c3c9}
.em .annonce{background:var(--sage);color:#fff}
.em .annonce b{color:#fff}
.em .annonce:hover{background:#5f8a62}
.em .hdr{background:rgba(243,244,241,.96);border-bottom-color:var(--line)}
.em .logo img{height:50px}
.em .ftr{background:#0F1E2B}
.em .ftr-brand img{height:64px}
.em .ftr h4{font-family:var(--serif);font-weight:400;color:#9fc2a2}
.em-dark,.em .ab-facts,.em .ab-em,.em .em-cta{background-color:var(--g)}
.em .em-dark .rcard{background:rgba(255,255,255,.06)}
.em .em-serv-card{background:#fff;border:1px solid var(--line)}
.em .em-serv-card:hover{background:var(--g);border-color:var(--g)}
.em .em-serv-card:hover .em-ic{color:#9fc2a2}
.em .em-ic,.em .values .ic,.em .em-check .ic,.em .em-infos .ic{color:var(--g)}
.em .em-ic{width:54px;height:54px;border-radius:4px;background:var(--g-soft);display:inline-grid;place-items:center}
.em .em-serv-card .em-ic{background:var(--g-soft)}
.em .em-serv-card:hover .em-ic{background:rgba(255,255,255,.1)}
.em .tag-live{background:var(--sage)}
.em .tag-live i{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.em .chips-s .tag-live{background:var(--sage)}
.em .em-num b{color:#9fc2a2;font-size:46px}
.em .em-stat b{color:var(--g)}
.em .em-vision-img:after{background:var(--sage)}
.em .em-vision-tag{background:rgba(24,52,75,.94)}
.em .em-logo-txt{font-family:var(--serif);text-transform:uppercase;font-size:20px;letter-spacing:.04em}
.em .em-logo small{color:var(--sage)}
.em .em-ouv-card.noimg{background:var(--g)}
.em .em-ouv-ic{color:#9fc2a2}
.em .ab-steps span,.em .em-steps span{border-radius:4px;font-family:var(--serif)}
.em .em-steps span{background:var(--sage);color:#fff}
.em .scroll-bar{background:var(--sage)}
.em .cur-dot{background:var(--sage)}
.em .cur-ring:before{border-color:rgba(114,157,117,.9)}
.em .cur-ring[data-state=link]:before{background:rgba(114,157,117,.16);border-color:var(--sage)}
.em .click-ripple{border-color:var(--sage)}
.em .em-promesse{font-family:var(--serif);font-size:15px;color:var(--sage);letter-spacing:.06em;margin-top:22px}
.em .ab-badge{background:var(--g);color:#fff}
.em .em-domains a h3{font-size:22px;text-transform:uppercase}
.em .em-head{background:linear-gradient(180deg,#e7ebec,var(--cream))}
.em .em-chero{background:linear-gradient(90deg,rgba(15,30,43,.88),rgba(24,52,75,.55)),var(--img) center/cover}

.em .values4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.em .values4>div{background:#fff;border:1px solid var(--line);border-top:3px solid var(--sage);padding:26px 22px;border-radius:4px}
.em .values4 svg{color:var(--g)}
.em .em-mission{font-family:var(--serif);font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--g);max-width:52em;margin:-6px 0 34px;padding-left:18px;border-left:3px solid var(--sage)}
.em .ftr-brand .em-promesse{font-size:12px;color:#9fc2a2;margin-top:8px}
@media(max-width:900px){.em .values4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.em .values4{grid-template-columns:1fr}}
.em .ftr-in>*{min-width:0}
.em .ftr-brand img{max-width:100%;object-fit:contain;object-position:left}
.em .ftr a{overflow-wrap:anywhere}
.em .em-hero{overflow:hidden}
html,body.em{overflow-x:clip}
@media (max-width:760px){.em-serv{grid-template-columns:1fr}}