:root{--navy:#0B0B45;--orange:#F59E0B;--text:#111827;--muted:#6B7280;--bg:#ffffff;--bg-alt:#F8FAFC}
.dark{--navy:#0B0B45;--orange:#F59E0B;--text:#e5e7eb;--muted:#9ca3af;--bg:#0b0b16;--bg-alt:#121224}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Inter,Arial,sans-serif;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
/* Header (white to showcase logo) */
.site-header{position:sticky;top:0;z-index:60;background:#fff;color:var(--navy);box-shadow:0 2px 12px rgba(0,0,0,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{height:55px}
nav a{color:var(--navy);text-decoration:none;margin-left:18px;opacity:.9}nav a:hover{opacity:1;color:var(--orange)}
.theme-btn{margin-left:12px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:8px 10px;cursor:pointer}
/* Burger */
.burger{display:none;background:transparent;border:0} .burger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0}
@media(max-width:760px){nav{display:none}.burger{display:block} .nav.open nav{display:block;position:absolute;right:16px;top:72px;background:#fff;padding:12px 16px;border-radius:12px;border:1px solid #eef2f7} .nav.open nav a{display:block;margin:8px 0;color:var(--navy)}}
/* Hero (orange gradient) */
.hero{background:linear-gradient(90deg,var(--orange),#fbbf24);color:var(--navy);padding:86px 0;text-align:center}
.hero h1{font-size:clamp(28px,5vw,44px);margin:0 0 12px;font-weight:800}
.hero p{max-width:760px;margin:0 auto 24px;line-height:1.6}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:12px 22px;border-radius:12px;text-decoration:none;border:0;cursor:pointer;font-weight:600;transition:transform .2s ease, box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,11,69,.25)}
.btn.alt{background:#fff;color:var(--navy);border:2px solid var(--navy)}
/* Sections */
.section{padding:72px 0}
.section h2{text-align:center;font-size:32px;margin:0 0 28px}
.section.alt{background:var(--bg-alt)}
/* Cards grid */
.cards-portfolio{display:grid;grid-template-columns:repeat(1,1fr);gap:16px}
@media(min-width:640px){.cards-portfolio{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.cards-portfolio{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.06);border:1px solid #eef2f7;transition:transform .2s ease}
.card:hover{transform:translateY(-4px)} .card-img{width:100%;height:180px;object-fit:cover} .card-body{padding:16px} .card-body p{color:var(--muted)}
/* Contact */
.contact{display:grid;grid-template-columns:1fr;gap:24px}
.contact .row{display:grid;grid-template-columns:1fr;gap:12px}
.contact input,.contact textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;outline:none;background:#fff;color:var(--text)}
.contact input:focus,.contact textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.status{margin-top:10px;color:var(--muted)}
@media(min-width:768px){.contact{grid-template-columns:1fr 1fr} .contact .row{grid-template-columns:1fr 1fr}}
/* Service page */
.service-hero{background-size:cover;background-position:center;color:#fff;position:relative}
.service-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(0deg, rgba(11,11,69,.7), rgba(11,11,69,.2))}
.service-hero .container{position:relative;padding:100px 16px;text-align:left}
.two-col{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:900px){.two-col{grid-template-columns:1fr 1fr}}
.features{list-style:none;padding:0;margin:0 0 18px} .features li{margin:8px 0;padding-left:22px;position:relative}
.features li:before{content:'✓';position:absolute;left:0;color:var(--orange)}
.carousel{position:relative;border:1px solid #eef2f7;border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.06)}
.carousel .slides{display:flex;transition:transform .4s ease}
.carousel img{width:100%;height:340px;object-fit:cover;flex:0 0 100%}
.arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(11,11,69,.85);color:#fff;border:0;padding:8px 12px;border-radius:10px;cursor:pointer}
.arrow.prev{left:10px}.arrow.next{right:10px}
/* Footer */
.site-footer{background:var(--navy);color:#fff;padding:18px 0;text-align:center}
/* Animations */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0} .reveal.is-visible{opacity:1;animation:fadeUp .6s ease both}
/* Dark theme adjustments */
.dark body{background:var(--bg);color:var(--text)}
.dark .site-header{background:#0f1020;color:#fff}
.dark nav a{color:#e5e7eb}
.dark .theme-btn{background:#0f1020;color:#e5e7eb;border-color:#26273f}
.dark .cards-portfolio .card{background:#121224;border-color:#1e2140}
.dark .section.alt{background:#0f1020}
.dark .contact input,.dark .contact textarea{background:#0f1020;color:#e5e7eb;border-color:#26273f}
.dark .status{color:#9ca3af}

/* --- New split hero layout --- */
.hero.split{background:#fff;color:var(--navy);padding:60px 0}
.two-col.middle{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.hero-copy h1{line-height:1.1}
.hero-media img{width:100%;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
@media(min-width:950px){.two-col.middle{grid-template-columns:1.05fr .95fr}}

/* --- Modal styles (devis) --- */
#modal-root{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:100}
#modal-root.open{display:flex}
.modal{background:#fff;color:var(--text);border-radius:16px;max-width:560px;width:92%;padding:20px;border:1px solid #eef2f7;box-shadow:0 12px 32px rgba(0,0,0,.18)}
.modal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.modal h3{margin:0;font-size:20px}
.modal .close{background:transparent;border:0;font-size:22px;cursor:pointer;color:#6b7280}
.modal form .row{display:grid;grid-template-columns:1fr;gap:12px}
.modal input,.modal textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;color:var(--text)}
.modal .actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

/* Dark overrides for modal */
.dark #modal-root .modal{background:#0f1020;color:#e5e7eb;border-color:#26273f}
.dark #modal-root .close{color:#9ca3af}
.dark #modal-root input,.dark #modal-root textarea{background:#0f1020;color:#e5e7eb;border-color:#26273f}

/* ===== v6 visual overhaul ===== */
.hero-dark{background:radial-gradient(1000px 600px at 10% 10%, rgba(245,158,11,.25), transparent), #0B0B45; color:#fff; position:relative; padding:42px 0 0}
.hero-inner{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.hero-text h1{font-size:clamp(30px,5vw,46px);line-height:1.1;margin:0 0 8px}
.hero-text p{max-width:720px;line-height:1.6}
.hero-art img{width:100%;border-radius:20px;box-shadow:0 16px 40px rgba(0,0,0,.3)}
.wave{line-height:0;margin-top:28px}
.wave svg{display:block;width:100%;height:80px}
@media(min-width:980px){.hero-inner{grid-template-columns:1.05fr .95fr}}

.section-tight{padding-top:48px;padding-bottom:64px}
.svc-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:16px}
@media(min-width:680px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.svc-grid{grid-template-columns:repeat(3,1fr)}}
.svc-card{position:relative;display:block;height:260px;border-radius:18px;overflow:hidden;border:1px solid #e8edf5;box-shadow:0 10px 24px rgba(0,0,0,.06);background-size:cover;background-position:center;transform:translateZ(0)}
.svc-card .svc-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.55) 100%);transition:opacity .25s ease}
.svc-card:hover .svc-overlay{opacity:.75}
.svc-card .svc-content{position:absolute;left:14px;right:14px;bottom:14px;color:#fff}
.svc-card h3{margin:0 0 6px;font-size:20px}
.svc-card p{margin:0 0 10px;opacity:.9}
.svc-link{font-weight:600}
.svc-tag{position:absolute;top:12px;left:12px;background:#fff;color:#0B0B45;font-weight:700;border-radius:999px;padding:6px 10px;font-size:12px;box-shadow:0 6px 16px rgba(0,0,0,.12)}

.about-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{background:#fff;border:1px solid #eef2f7;border-radius:14px;padding:16px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.04)}
.stat strong{display:block;font-size:22px}
@media(min-width:900px){.about-grid{grid-template-columns:1.2fr .8fr}}

#wa-float{position:fixed;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#25D366;color:#fff;text-decoration:none;font-size:24px;box-shadow:0 10px 26px rgba(0,0,0,.2);z-index:70}

.dark .hero-dark{background:#0b0b16;color:#e5e7eb}
.dark .svc-card{border-color:#26273f;box-shadow:none}
.dark .svc-tag{background:#0f1020;color:#e5e7eb;border:1px solid #26273f}
.dark .stat{background:#0f1020;border-color:#26273f;color:#e5e7eb}