:root{--basalt:#151719;--basalt2:#22282a;--lava:#ef5b35;--ember:#ff9a3d;--lagoon:#14b8b6;--lagoon-light:#83e4dc;--ash:#f3f0e9;--white:#fff;--muted:#6b7373;--line:rgba(20,26,27,.13);--shadow:0 24px 70px rgba(13,24,25,.17)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;color:#172326;background:#f6f4ef;font-family:Manrope,system-ui,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}.section{padding:96px 0}.skip-link{position:fixed;left:12px;top:-60px;z-index:9999;background:#fff;padding:10px 16px}.skip-link:focus{top:12px}
.site-header{position:sticky;top:0;z-index:1000;color:#fff;background:rgba(20,23,24,.91);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.09)}.nav-wrap{height:82px;display:flex;align-items:center;gap:26px}.brand{display:flex;align-items:center;gap:12px;margin-right:auto}.brand-mark{width:45px;height:45px;display:grid;place-items:center;clip-path:polygon(50% 0,94% 27%,87% 81%,50% 100%,9% 78%,4% 29%);background:linear-gradient(145deg,var(--lava),var(--ember));color:#fff;font-style:normal;filter:drop-shadow(0 8px 12px rgba(239,91,53,.25))}.brand-mark b,.brand-mark i{font-style:normal}.brand-mark i{color:#182224}.brand>span:last-child{display:grid;line-height:1.05}.brand strong{letter-spacing:.08em}.brand small{font-size:10px;letter-spacing:.14em;color:#abb6b8;text-transform:uppercase;margin-top:5px}.main-nav{display:flex;gap:20px;align-items:center}.main-nav a{font-size:14px;font-weight:700;position:relative}.main-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:2px;background:linear-gradient(90deg,var(--lava),var(--lagoon));transition:.25s}.main-nav a:hover:after{right:0}.menu-toggle{display:none;border:0;background:none}.menu-toggle span{display:block;width:25px;height:2px;background:#fff;margin:5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 23px;border-radius:8px;font-weight:800;font-size:14px;transition:transform .2s,box-shadow .2s}.btn:hover{transform:translateY(-2px)}.btn-gold{color:#fff;background:linear-gradient(135deg,var(--lava),var(--ember));box-shadow:0 12px 28px rgba(239,91,53,.27)}.btn-light{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.23);color:#fff}.btn-full{width:100%}.btn-large{min-height:58px;padding-inline:28px}.announcement{color:#d7f7f2;background:#097d7d;text-align:center;font-size:13px;padding:10px}.announcement span{color:#fff}
.hero{position:relative;overflow:hidden;padding:90px 0 104px;color:#fff;background:linear-gradient(118deg,rgba(15,18,19,.98) 0%,rgba(27,32,33,.95) 54%,rgba(9,74,76,.9) 100%)}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 76% 72%,rgba(20,184,182,.25),transparent 28%),radial-gradient(circle at 22% 90%,rgba(239,91,53,.28),transparent 27%),linear-gradient(165deg,transparent 0 70%,rgba(255,255,255,.04) 70% 72%,transparent 72%)}.hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:44px;background:#f6f4ef;clip-path:polygon(0 100%,0 62%,13% 30%,28% 72%,42% 18%,60% 75%,78% 42%,100% 78%,100% 100%)}.hero-glow{position:absolute;border-radius:50%;filter:blur(18px)}.hero-glow-one{width:400px;height:400px;right:-170px;top:-170px;background:rgba(20,184,182,.17)}.hero-glow-two{width:280px;height:280px;left:32%;bottom:-220px;background:rgba(239,91,53,.22)}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;align-items:center;gap:64px;position:relative;z-index:1}.eyebrow,.kicker{color:var(--lagoon-light);font-size:13px;text-transform:uppercase;letter-spacing:.14em;font-weight:800}.hero h1{font-size:clamp(44px,5.3vw,76px);line-height:1.03;letter-spacing:-.055em;margin:19px 0 22px}.hero h1 span{color:var(--ember)}.hero-lead{font-size:19px;font-weight:700;color:#d9ecea}.hero-text{color:#b5c2c3;font-size:16px;max-width:640px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.trust-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:30px;font-size:12px;font-weight:700;color:#bdcacb}.hero-media{position:relative;min-height:500px;border-radius:5px 70px 5px 70px;border:1px solid rgba(255,255,255,.19);box-shadow:0 32px 85px rgba(0,0,0,.36);overflow:hidden}.hero-media:after{content:"VOLCAN • LAGON • SAVOIR-FAIRE";position:absolute;left:20px;right:20px;bottom:20px;padding:13px 15px;background:rgba(17,22,23,.72);backdrop-filter:blur(12px);border-left:3px solid var(--lava);font-size:10px;font-weight:800;letter-spacing:.16em}.hero-media img{filter:saturate(.93) contrast(1.07)}
.section-heading{max-width:780px;margin:0 auto 50px;text-align:center}.section-heading h2,.cta-band h2,.contact-copy h2{font-size:clamp(32px,4vw,48px);line-height:1.12;letter-spacing:-.035em;margin:10px 0 16px}.section-heading>.kicker,.contact-copy>.kicker,.cta-band .kicker{color:#0b8787}.section-intro{color:var(--muted);font-size:17px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-card,.portfolio-item{position:relative;background:#fff;border:1px solid var(--line);border-radius:4px 26px 4px 26px;padding:28px;box-shadow:0 15px 45px rgba(15,29,30,.07);transition:.25s}.feature-card:before{content:"";position:absolute;left:0;top:0;width:48px;height:3px;background:linear-gradient(90deg,var(--lava),var(--lagoon))}.feature-card:hover,.portfolio-item:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.feature-number{position:absolute;right:20px;top:17px;color:rgba(239,91,53,.17);font-size:25px;font-weight:800}.feature-card .icon,.service-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:4px 15px 4px 15px;background:#e0f4f2;color:#087f80;font-size:21px}.feature-card h3{margin:19px 0 8px}.feature-card p,.portfolio-item p{color:var(--muted);font-size:14px;margin:0}
.services-section,.process-section{background:linear-gradient(135deg,#191c1d,#242b2c);color:#fff;position:relative}.services-section:before,.process-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(20,184,182,.15),transparent 30%),radial-gradient(circle at 5% 90%,rgba(239,91,53,.12),transparent 26%)}.section-heading.light{position:relative}.section-heading.light .kicker{color:var(--ember)}.section-heading.light .section-intro{color:#b8c4c5}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;position:relative}.service-card{overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:4px 30px 4px 30px;background:rgba(255,255,255,.055);display:grid;grid-template-columns:50% 50%;min-height:330px}.service-art{min-height:100%;position:relative}.service-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(25,28,29,.68))}.service-body{padding:28px}.service-body h3{font-size:22px;margin:16px 0 10px}.service-body ul{padding-left:18px;color:#cfdbdc;font-size:14px}.service-body li::marker{color:var(--lava)}.service-body a{color:var(--lagoon-light);font-weight:800;font-size:13px}.service-icon{background:rgba(20,184,182,.13);color:var(--lagoon-light)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.portfolio-item{padding:14px 14px 24px}.portfolio-visual{height:230px;border-radius:2px 19px 2px 19px;overflow:hidden}.portfolio-item h3{margin:19px 10px 6px}.portfolio-item p{margin:0 10px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}.process-card{position:relative;padding:28px;border-radius:3px 22px 3px 22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11)}.process-card>span{color:var(--ember);font-size:12px;font-weight:800}.process-icon{font-size:25px;margin:16px 0}.process-card p{font-size:14px;color:#c3d0d1}.clients{background:#edeae3}.logo-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.logo-row>div{padding:25px;text-align:center;border-radius:3px 18px 3px 18px;background:#fff;border:1px solid var(--line)}.logo-row span{display:block;font-size:12px;color:var(--muted)}
.cta-band{padding:66px 0;color:#fff;background:linear-gradient(110deg,#d84929,#f27b35 56%,#0b8585)}.cta-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:45px}.cta-band .kicker{color:#ffe0ca}.cta-band h2{margin:5px 0}.cta-band p{margin:0;color:#fff2e9}.cta-band .btn-gold{color:#142021;background:#fff;box-shadow:0 12px 28px rgba(44,18,8,.18)}.contact-section{background:#faf9f5}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}.contact-copy>p{color:var(--muted)}.contact-list{display:grid;gap:10px;margin-top:28px}.contact-list>a,.contact-list>div{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:3px 15px 3px 15px;background:#fff}.contact-list>*>span{width:38px;height:38px;border-radius:3px 12px 3px 12px;display:grid;place-items:center;background:#ddf3f1;color:#087f80}.contact-list small,.contact-list strong{display:block}.contact-list small{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.payment-note{display:grid;margin-top:20px;padding:17px;border-radius:3px 15px 3px 15px;background:#fff0e8;border:1px solid #f0c5b8}.payment-note span{font-size:12px;color:var(--muted)}.contact-form{padding:34px;border-radius:4px 30px 4px 30px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-top:4px solid var(--lagoon)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form label{display:grid;gap:7px;font-weight:700;font-size:13px;margin-bottom:16px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #cbd1d1;border-radius:5px;background:#fafafa;padding:13px 14px;color:#172326;font:inherit;outline:none}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--lagoon);box-shadow:0 0 0 4px rgba(20,184,182,.1)}.consent{display:flex!important;align-items:flex-start}.consent input{width:auto;margin-top:4px}
.site-footer{padding:65px 0 22px;color:#d3dcdd;background:#111516;border-top:4px solid;background-image:linear-gradient(#111516,#111516),linear-gradient(90deg,var(--lava),var(--lagoon));background-origin:border-box;background-clip:padding-box,border-box}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}.site-footer h3{color:#fff;font-size:14px}.site-footer a,.site-footer span{display:block;color:#abb7b8;font-size:13px;margin:8px 0}.site-footer .brand strong{color:#fff}.footer-brand p{color:#9fadae;font-size:13px;max-width:330px}.footer-bottom{margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}.whatsapp-float{position:fixed;left:18px;right:auto;bottom:18px;z-index:999;width:58px;height:58px;border-radius:5px 19px 5px 19px;display:grid;place-items:center;color:#fff;background:#20c66a;font-size:28px;box-shadow:0 13px 30px rgba(20,143,76,.35)}
@media(max-width:1020px){.main-nav,.nav-cta{display:none}.menu-toggle{display:block}.main-nav.is-open{display:flex;position:absolute;left:20px;right:20px;top:76px;flex-direction:column;align-items:stretch;padding:20px;border-radius:4px 20px 4px 20px;background:#1b2021;box-shadow:var(--shadow)}.hero-grid,.contact-grid{grid-template-columns:1fr}.hero-media{min-height:0}.feature-grid,.process-grid{grid-template-columns:repeat(2,1fr)}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.container{width:min(100% - 24px,1180px)}.section{padding:70px 0}.hero{padding:58px 0 78px}.hero h1{font-size:42px}.hero-actions .btn{width:100%}.trust-row{display:grid;gap:8px}.feature-grid,.service-grid,.portfolio-grid,.process-grid,.logo-row,.footer-grid{grid-template-columns:1fr}.service-card{grid-template-columns:1fr}.service-art{min-height:210px}.cta-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.contact-form{padding:22px}.nav-wrap{height:70px}.brand small{display:none}}

/* Fond volcanique fixe — roche basaltique et veines de lave */
body{
  color:#f4f1eb;
  background-color:#080a0b;
  background-image:linear-gradient(rgba(5,7,8,.30),rgba(5,7,8,.44)),url("assets/fond-roche-lave.png");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.hero{background:linear-gradient(118deg,rgba(11,14,15,.88),rgba(24,29,30,.76) 54%,rgba(7,73,74,.64))}
.hero:after{background:rgba(18,21,22,.94)}
.why,.clients,.contact-section,#realisations{background:rgba(14,17,18,.84);backdrop-filter:blur(2px)}
.why,#realisations{border-block:1px solid rgba(255,255,255,.05)}
.services-section,.process-section{background:rgba(18,21,22,.90);backdrop-filter:blur(3px)}
.clients{background:rgba(21,25,26,.82)}
.cta-band{background:linear-gradient(110deg,rgba(192,54,28,.91),rgba(224,102,42,.88) 56%,rgba(7,117,118,.88));backdrop-filter:blur(3px)}
.contact-section{background:rgba(12,15,16,.86)}
.section-heading h2,.contact-copy h2{color:#fff}.section-intro,.contact-copy>p{color:#c4cdcd}
.feature-card,.portfolio-item,.logo-row>div{color:#172326;background:rgba(255,255,255,.94)}
.contact-list>a,.contact-list>div{color:#172326;background:rgba(255,255,255,.94)}
.contact-form{color:#172326;background:rgba(255,255,255,.96)}
.site-footer{background:rgba(9,11,12,.94);backdrop-filter:blur(4px)}
@media(max-width:900px){body{background-attachment:scroll;background-size:auto 100vh;background-repeat:repeat-y}}
.brand-logo {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
}
.footer-bottom {
    text-align: center;
}

.footer-bottom > span,
.footer-bottom > span span {
    display: inline;
    margin: 0;
}
@media (max-width: 680px) {

    .service-card {
        display: block;
        width: 100%;
        overflow: hidden;
    }

    .service-art.service-image {
        display: block !important;
        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;
        overflow: hidden !important;
    }

    .service-image picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: auto !important;
    }

    .service-image img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .service-body {
        width: 100%;
    }
}