/* ATOMAS Ingénierie — atomas-ingenierie.ma — charte 2026 */
:root{--vert:#195A22;--vif:#0AA923;--orange:#F79421;--anthracite:#373435;--fond:#f6f8f6}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Josefin Sans',Arial,sans-serif;color:var(--anthracite);background:#fff;line-height:1.6;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--vert);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ===== Navigation ===== */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:3px solid var(--vif);backdrop-filter:blur(6px)}
.navbar{display:flex;align-items:center;justify-content:space-between;height:76px}
.navbar .brand img{height:46px}
.navbar nav{display:flex;gap:26px;align-items:center}
.navbar nav a{font-weight:600;font-size:15px;color:var(--anthracite);letter-spacing:.3px;padding:6px 2px;border-bottom:2.5px solid transparent}
.navbar nav a:hover,.navbar nav a.on{color:var(--vert);border-bottom-color:var(--vif)}
.navbar .cta{background:var(--vif);color:#fff !important;padding:10px 20px;border-radius:22px;border:none !important}
.navbar .cta:hover{background:var(--vert)}
.burger{display:none;font-size:26px;background:none;border:none;color:var(--vert);cursor:pointer}
.langsw{display:inline-flex;gap:5px;margin-left:10px}
.langsw a{font-size:11.5px;font-weight:700;padding:4px 8px;border:1.4px solid #cfd8cf;border-radius:10px;color:#7a7a7a;letter-spacing:.5px}
.langsw a.on,.langsw a:hover{border-color:var(--vif);color:var(--vert)}
[dir="rtl"] .filet{margin-left:auto;margin-right:0}
[dir="rtl"] .hero p.sub,[dir="rtl"] .phero p{border-left:none;border-right:4px solid var(--vif);padding-left:0;padding-right:16px}
[dir="rtl"] .tile{border-left:none;border-right:6px solid var(--vif)}
[dir="rtl"] .tile.k{border-right-color:var(--orange)}

/* ===== Hero ===== */
.hero{position:relative;min-height:78vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(10deg,rgba(9,28,11,.85) 15%,rgba(9,28,11,.25) 60%,rgba(9,28,11,.05))}
.hero .inner{position:relative;padding:70px 0 60px;width:100%}
.hero h1{font-size:clamp(30px,4.6vw,54px);font-weight:700;line-height:1.15;max-width:820px;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.hero h1 em{font-style:normal;color:#7ce08a}
.hero p.sub{margin-top:16px;font-size:clamp(15px,1.6vw,19px);max-width:640px;color:#e6f3e7;border-left:4px solid var(--vif);padding-left:16px}
.hero .actions{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 28px;border-radius:26px;font-weight:700;font-size:15px;letter-spacing:.4px}
.btn.p{background:var(--vif);color:#fff}
.btn.p:hover{background:#078c1d}
.btn.s{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn.s:hover{background:rgba(255,255,255,.25)}

/* ===== Sections ===== */
section{padding:72px 0}
section.alt{background:var(--fond)}
.stitre{color:var(--vert);font-size:clamp(24px,3vw,34px);font-weight:700}
.filet{width:70px;height:5px;background:var(--vif);border-radius:3px;margin:14px 0 30px}
.lead{font-size:18px;max-width:780px;color:#4a4a4a}
.center{text-align:center}
.center .filet{margin-left:auto;margin-right:auto}

/* ===== Chiffres ===== */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.chiffres .c{background:#fff;border-radius:14px;padding:26px 18px;text-align:center;box-shadow:0 2px 12px rgba(20,60,25,.07);border-top:5px solid var(--vif)}
.chiffres .n{font-size:38px;font-weight:700;color:var(--vert)}
.chiffres .l{font-size:12.5px;text-transform:uppercase;letter-spacing:.8px;color:#777;margin-top:6px}

/* ===== Domaines (bandes) ===== */
.bandes{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;height:380px}
.bande{position:relative;border-radius:12px;overflow:hidden}
.bande img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bande:hover img{transform:scale(1.06)}
.bande .bv{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,28,11,.04) 40%,rgba(9,28,11,.86))}
.bande .bl{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:#fff}
.bande .bic{font-size:22px;font-weight:700;color:#7ce08a}
.bande .bn{font-size:14px;font-weight:600;margin-top:4px;line-height:1.3;padding:0 8px}

/* ===== Cartes projets ===== */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.pcard{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 14px rgba(20,60,25,.08);display:flex;flex-direction:column}
.pcard img{height:210px;object-fit:cover;width:100%}
.pcard .body{padding:20px 22px 24px;flex:1}
.badge{display:inline-block;background:var(--vif);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:12px;letter-spacing:.6px;margin-bottom:10px}
.badge.o{background:var(--orange)}
.pcard h3{color:var(--vert);font-size:19px;margin-bottom:6px}
.pcard .meta{font-size:13px;color:#7a7a7a;margin-bottom:10px}
.pcard .meta b{color:var(--anthracite)}
.pcard p{font-size:14px;color:#4a4a4a}

/* ===== Timeline ===== */
.tline{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:10px}
.tstep{text-align:center;padding:0 6px}
.tstep .yr{font-size:22px;font-weight:700;color:var(--vert)}
.tstep .dot{width:14px;height:14px;border-radius:50%;background:var(--vif);margin:12px auto;border:3px solid #d9ecd9}
.tstep.k .dot{background:var(--orange)}
.tstep .lb{font-size:13px;color:#666;line-height:1.45}
.tstep .lb b{display:block;color:var(--anthracite)}

/* ===== Tuiles bénéfices / expertises ===== */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.tile{background:#fff;border-radius:14px;padding:26px 24px;box-shadow:0 2px 12px rgba(20,60,25,.07);border-top:5px solid var(--vif)}
.tile.k{border-top-color:var(--orange)}
.tile h3{color:var(--vert);font-size:18px;margin-bottom:8px}
.tile .big{font-size:26px;font-weight:700;color:var(--vert)}
.tile .big span{font-size:14px;color:#777;font-weight:400}
.tile p{font-size:13.8px;color:#555}

/* ===== Chips / phases ===== */
.chip{display:inline-block;border:1.6px solid var(--vif);color:var(--vert);border-radius:16px;padding:7px 16px;font-size:14px;font-weight:600;margin:5px 6px 0 0}
.chip.o{border-color:var(--orange);color:#b56a10}
.phases{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;margin-top:16px}
.phase{text-align:center;background:#fff;border-radius:10px;padding:16px 4px;border-bottom:4px solid var(--vif);box-shadow:0 2px 8px rgba(20,60,25,.06)}
.phase b{display:block;color:var(--vert);font-size:17px}
.phase span{font-size:10.5px;color:#777;line-height:1.25;display:block;margin-top:4px}
.phase.k{border-bottom-color:var(--orange)}

/* ===== Pôles ===== */
.poles{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pole{background:#fff;border-radius:14px;padding:28px;border-top:6px solid var(--vif);box-shadow:0 2px 12px rgba(20,60,25,.07)}
.pole.k{border-top-color:var(--orange)}
.pole h3{color:var(--vert);font-size:21px}
.pole .eff{font-size:13.5px;color:#888;margin:4px 0 12px}

/* ===== Bande verte CTA ===== */
.ctaband{background:linear-gradient(135deg,#1f7a2b,var(--vert) 50%,#0c3a13);color:#fff;text-align:center;padding:64px 22px}
.ctaband h2{font-size:clamp(22px,3vw,32px);font-weight:700;max-width:760px;margin:0 auto}
.ctaband .btn{margin-top:26px}

/* ===== Contact ===== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
.contact-card{background:#fff;border-radius:14px;padding:32px;box-shadow:0 2px 14px rgba(20,60,25,.08)}
.contact-card h3{color:var(--vert);font-size:20px;margin-bottom:14px}
.contact-card p{margin-bottom:10px;font-size:15.5px}
.map{border:0;width:100%;height:100%;min-height:360px;border-radius:14px}

/* ===== Footer ===== */
footer{background:#122e16;color:#cfe3d1;padding:44px 0 26px;font-size:14px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;align-items:start}
footer img{height:52px;margin-bottom:14px}
footer h4{color:#fff;font-size:15px;margin-bottom:10px;letter-spacing:.5px}
footer a{color:#9fd4a6;display:block;margin:4px 0}
footer .bas{border-top:1px solid rgba(255,255,255,.15);margin-top:30px;padding-top:16px;text-align:center;font-size:12.5px;color:#8fae93}
footer .soc{margin-top:14px}
footer .soc a{display:inline-flex;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.12);align-items:center;justify-content:center;margin:0 8px 0 0;transition:background .2s}
footer .soc a:hover{background:var(--vif)}
footer .soc svg{width:18px;height:18px;fill:#cfe3d1}

/* ===== Filtres références ===== */
.filtres{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.fbtn{border:1.6px solid var(--vif);background:#fff;color:var(--vert);border-radius:20px;padding:9px 20px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.fbtn:hover{background:#eaf6eb}
.fbtn.on{background:var(--vif);color:#fff}
.pcard.hide{display:none}
.pcard .imgwrap{position:relative}
.pcard .imgwrap .cat{position:absolute;top:12px;left:12px}
.pcard.noimg .head{height:86px;background:linear-gradient(135deg,#1f7a2b,var(--vert));display:flex;align-items:center;padding:0 22px}
.pcard.noimg .head span{color:#7ce08a;font-weight:700;font-size:20px;letter-spacing:1px}

/* ===== Animations reveal ===== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.vis{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* ===== Valeurs ===== */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.val{text-align:center;padding:26px 18px;background:#fff;border-radius:14px;box-shadow:0 2px 12px rgba(20,60,25,.07)}
.val .ic{width:54px;height:54px;border-radius:50%;background:#eaf6eb;color:var(--vert);font-size:24px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.val h3{color:var(--vert);font-size:17px;margin-bottom:6px}
.val p{font-size:13.5px;color:#666}

/* ===== Page hero (interne) ===== */
.phero{position:relative;min-height:44vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.phero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero .veil{position:absolute;inset:0;background:linear-gradient(10deg,rgba(9,28,11,.85) 10%,rgba(9,28,11,.3) 65%)}
.phero .inner{position:relative;padding:60px 0 42px;width:100%}
.phero h1{font-size:clamp(28px,3.6vw,44px);font-weight:700;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.phero p{margin-top:10px;font-size:17px;color:#e6f3e7;border-left:4px solid var(--vif);padding-left:14px;max-width:640px}

/* ===== Responsive ===== */
@media(max-width:960px){
 .chiffres{grid-template-columns:repeat(2,1fr)}
 .bandes{grid-template-columns:repeat(3,1fr);height:auto}
 .bande{height:220px}
 .pgrid{grid-template-columns:1fr 1fr}
 .tiles{grid-template-columns:1fr 1fr}
 .tline{grid-template-columns:repeat(3,1fr);row-gap:26px}
 .phases{grid-template-columns:repeat(5,1fr);row-gap:10px}
 .poles,.contact-grid{grid-template-columns:1fr}
 footer .cols{grid-template-columns:1fr}
}
@media(max-width:680px){
 .navbar nav{position:fixed;inset:76px 0 auto 0;background:#fff;flex-direction:column;padding:18px;box-shadow:0 10px 20px rgba(0,0,0,.12);display:none}
 .navbar nav.open{display:flex}
 .burger{display:block}
 .pgrid,.tiles{grid-template-columns:1fr}
 .bandes{grid-template-columns:1fr 1fr}
 .chiffres{grid-template-columns:1fr 1fr;gap:12px}
}