/* =========================================================
   LES ATELIERS CREA
   Charte : bleu #2685B4 (primaire) + vert #62B93F (accent unique)
   Photographie noir & blanc + blocs de couleur (écho brochure)
   Rayons : cartes 18px, champs/puces 10px, boutons pilule 999px
   ========================================================= */
:root {
  --bg:#ffffff; --bg-alt:#f1f4f6; --surface:#ffffff;
  --ink:#15191c; --ink-2:#46535b;
  --blue:#2685b4; --blue-deep:#1c6f97;
  --green:#5fb23c; --green-deep:#4d9730;
  --on-brand:#ffffff; --on-green:#11210a;
  --line:rgba(21,25,28,.12); --line-strong:rgba(21,25,28,.22);
  --shadow:0 18px 50px -28px rgba(21,40,52,.55); --shadow-sm:0 8px 24px -16px rgba(21,40,52,.5);
  --r-card:18px; --r-sm:10px; --r-pill:999px;
  --maxw:1240px; --nav-h:70px;
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-hand:"Caveat","Archivo",cursive;
}
[data-theme="dark"]{
  --bg:#0e1114; --bg-alt:#151b1f; --surface:#161d21;
  --ink:#eef2f3; --ink-2:#a6b5bb;
  --blue:#3aa6d6; --blue-deep:#6fc4e6;
  --green:#7cc850; --green-deep:#8fd266;
  --on-brand:#ffffff; --on-green:#0c1607;
  --line:rgba(238,242,243,.14); --line-strong:rgba(238,242,243,.26);
  --shadow:0 24px 60px -30px rgba(0,0,0,.8); --shadow-sm:0 10px 30px -20px rgba(0,0,0,.7);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1114; --bg-alt:#151b1f; --surface:#161d21;
    --ink:#eef2f3; --ink-2:#a6b5bb;
    --blue:#3aa6d6; --blue-deep:#6fc4e6;
    --green:#7cc850; --green-deep:#8fd266;
    --on-brand:#ffffff; --on-green:#0c1607;
    --line:rgba(238,242,243,.14); --line-strong:rgba(238,242,243,.26);
    --shadow:0 24px 60px -30px rgba(0,0,0,.8); --shadow-sm:0 10px 30px -20px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 12px);}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; line-height:1.02; letter-spacing:-.02em; margin:0; color:var(--ink);}
p{margin:0;} a{color:inherit; text-decoration:none;} img{display:block; max-width:100%;}
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,56px);}
.section{padding-block:clamp(72px,10vw,140px);}
.alt{background:var(--bg-alt);}

.skip{position:absolute; left:16px; top:-60px; z-index:200; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:var(--r-sm); font-weight:600; transition:top .2s ease;}
.skip:focus{top:16px;}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:4px;}

.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--blue-deep);}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--green); border-radius:2px;}
.eyebrow.on-dark{color:#fff;}
.h-sec{font-size:clamp(2rem,4.6vw,3.4rem); max-width:20ch;}
.lead{color:var(--ink-2); font-size:clamp(1.02rem,1.4vw,1.18rem); max-width:60ch;}
.hand{font-family:var(--font-hand); font-weight:700; letter-spacing:0; color:var(--green); line-height:.9;}

/* boutons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:15px; padding:14px 24px; border-radius:var(--r-pill); border:1.6px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;}
.btn i{font-size:18px;}
.btn-primary{background:var(--green); color:var(--on-green);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px color-mix(in srgb,var(--green) 70%,transparent);}
.btn-primary:active{transform:translateY(0);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-ghost:hover{transform:translateY(-2px); border-color:var(--ink);}
.btn-blue{background:var(--blue); color:#fff;}
.btn-blue:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px color-mix(in srgb,var(--blue) 70%,transparent);}
.btn-light{background:#fff; color:#11210a;}
.btn-light:hover{transform:translateY(-2px);}
.btn-onlight-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55);}
.btn-onlight-ghost:hover{transform:translateY(-2px); border-color:#fff;}

/* header (fixe, transparent au-dessus du hero) */
.header{position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h); display:flex; align-items:center; transition:border-color .25s ease, box-shadow .25s ease; border-bottom:1px solid transparent; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px);}
.header.scrolled{border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(21,40,52,.6);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%;}
.brand{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.brand img{height:34px; width:auto;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink-2); position:relative; padding:6px 0; transition:color .18s ease;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--green); transition:width .22s cubic-bezier(.16,1,.3,1);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
.nav-right{display:flex; align-items:center; gap:12px;}
.icon-btn{width:42px; height:42px; border-radius:var(--r-pill); display:inline-grid; place-items:center; background:var(--bg-alt); color:var(--ink); border:1px solid var(--line); cursor:pointer; transition:transform .18s ease;}
.icon-btn:hover{transform:translateY(-2px);}
.icon-btn i{font-size:20px;}
.theme-toggle .ph-moon{display:none;}
[data-theme="dark"] .theme-toggle .ph-sun{display:none;} [data-theme="dark"] .theme-toggle .ph-moon{display:inline;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .ph-sun{display:none;} :root:not([data-theme="light"]) .theme-toggle .ph-moon{display:inline;}}
.burger{display:none;}
.mobile-menu{position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99; background:var(--bg); border-bottom:1px solid var(--line); display:grid; gap:4px; padding:16px clamp(20px,5vw,56px) 24px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;}
.mobile-menu.open{opacity:1; transform:none; pointer-events:auto;}
.mobile-menu a{font-family:var(--font-display); font-weight:700; font-size:20px; padding:12px 0; border-bottom:1px solid var(--line);}
.mobile-menu .btn{margin-top:14px;}

/* hero (fond animé MorphingLight) */
.hero{position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; overflow:hidden; isolation:isolate;}
#hero-bg{position:absolute; inset:0; z-index:-2; background:radial-gradient(120% 130% at 78% 18%, #2f9bc8 0%, #1a5f82 32%, #0c1f2b 62%, #080d11 100%);}
#hero-bg canvas{width:100%!important; height:100%!important; display:block;}
.hero-scrim{position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg, rgba(7,11,14,.93) 0%, rgba(7,11,14,.78) 38%, rgba(7,11,14,.42) 66%, rgba(7,11,14,.25) 100%);}
.hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(28px,4vw,64px); align-items:center; width:100%; padding-top:calc(var(--nav-h) + 24px); padding-bottom:48px;}
.hero-text{color:#fff;}
.hero h1{font-size:clamp(2.7rem,7vw,5.6rem); letter-spacing:-.035em; color:#fff;}
.hero h1 .hand{font-size:clamp(3.4rem,9vw,7.2rem); display:inline-block; margin-top:-.12em;}
.hero .kicker{font-family:var(--font-display); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.16em; color:#fff; display:inline-flex; align-items:center; gap:10px; opacity:.92;}
.hero .kicker::before{content:""; width:26px; height:2px; background:var(--green); border-radius:2px;}
.hero .lead{color:rgba(255,255,255,.9); margin-top:22px; max-width:48ch;}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px;}
.hero-visual{position:relative;}
.hero-photo{position:relative; z-index:2; border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 70px -30px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.12);}
.hero-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06);}
.hero-block-green{position:absolute; z-index:3; left:-18px; bottom:34px; width:92px; height:92px; background:var(--green); border-radius:16px; display:grid; place-items:center; color:var(--on-green); box-shadow:var(--shadow-sm);}
.hero-block-green i{font-size:40px;}

/* marquee matières */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-alt); overflow:hidden; padding-block:18px;}
.marquee-track{display:flex; white-space:nowrap; width:max-content; animation:scroll-x 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee span{font-family:var(--font-display); font-weight:700; font-size:clamp(1.1rem,2vw,1.5rem); text-transform:uppercase; letter-spacing:.04em; color:var(--ink); padding-inline:28px; display:inline-flex; align-items:center; gap:28px;}
.marquee span::after{content:"/"; color:var(--green); font-weight:700;}
@keyframes scroll-x{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none; flex-wrap:wrap; white-space:normal; width:100%; justify-content:center;}}

/* bento savoir-faire */
.bento{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:52px;}
.cell{position:relative; border-radius:var(--r-card); overflow:hidden; padding:30px; min-height:300px; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm); transition:transform .22s cubic-bezier(.16,1,.3,1);}
.cell:hover{transform:translateY(-4px);}
.cell .ic{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin-bottom:auto;}
.cell .ic i{font-size:27px;}
.cell h3{font-size:1.55rem; margin-top:20px;}
.cell p{margin-top:10px; font-size:15px;}
.cell.photo{color:#fff; border:none; min-height:360px;}
.cell.photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04); z-index:0; transition:transform .5s ease;}
.cell.photo:hover img{transform:scale(1.05);}
.cell.photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,16,20,.05) 30%,rgba(10,16,20,.82) 100%); z-index:1;}
.cell.photo>*{position:relative; z-index:2;}
.cell.photo .ic{background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px);}
.cell.photo p{color:rgba(255,255,255,.86);}
.cell.blue{background:var(--blue); color:var(--on-brand); border:none;}
.cell.blue .ic{background:rgba(255,255,255,.18); color:#fff;}
.cell.blue p{color:rgba(255,255,255,.9);}
.cell.green{background:var(--green); color:var(--on-green); border:none;}
.cell.green .ic{background:rgba(0,0,0,.12); color:var(--on-green);}
.cell.green p{color:color-mix(in srgb,var(--on-green) 82%,transparent);}

/* parc machines + prestations */
.split2{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:start;}
.machines{display:grid; margin-top:30px;}
.machine{display:grid; grid-template-columns:46px 1fr; gap:18px; align-items:center; padding:20px 0; border-top:1px solid var(--line);}
.machine:last-child{border-bottom:1px solid var(--line);}
.machine .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--blue);}
.machine .ic i{font-size:24px;}
.machine h4{font-size:1.12rem;}
.machine p{color:var(--ink-2); font-size:14.5px; margin-top:2px;}
.presta-group{margin-top:26px;} .presta-group:first-child{margin-top:30px;}
.presta-group h4{font-family:var(--font-display); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2); margin-bottom:14px;}
.chips{display:flex; flex-wrap:wrap; gap:10px;}
.chip{font-family:var(--font-display); font-weight:600; font-size:14px; padding:9px 16px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); color:var(--ink); transition:transform .16s ease, border-color .16s ease, color .16s ease;}
.chip:hover{transform:translateY(-2px); border-color:var(--green); color:var(--green-deep);}

/* solutions / pour qui */
.solutions-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px;}
.sol{position:relative; border-radius:var(--r-card); padding:28px; border:1px solid var(--line); background:var(--surface); transition:transform .2s ease, border-color .2s ease;}
.sol:hover{transform:translateY(-4px); border-color:var(--green);}
.sol .ic{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb,var(--blue) 12%,transparent); color:var(--blue-deep); margin-bottom:18px;}
.sol .ic i{font-size:25px;}
.sol h3{font-size:1.3rem;}
.sol p{color:var(--ink-2); font-size:14.5px; margin-top:8px;}
.sol.feature{grid-column:span 1; background:var(--blue); color:#fff; border:none;}
.sol.feature .ic{background:rgba(255,255,255,.18); color:#fff;}
.sol.feature p{color:rgba(255,255,255,.9);}
.sol.feature .tag{display:inline-block; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-green); background:var(--green); padding:5px 11px; border-radius:var(--r-pill); margin-bottom:16px;}

/* bande citation */
.quote-band{background:var(--blue); color:#fff; text-align:center;}
.quote-band .wrap{padding-block:clamp(70px,9vw,120px);}
.quote-band blockquote{margin:0;}
.quote-band .qmark{font-family:var(--font-hand); font-size:clamp(3rem,8vw,6rem); color:var(--green); line-height:.4; display:block;}
.quote-band .q{font-family:var(--font-hand); font-weight:700; color:#fff; font-size:clamp(2.4rem,7vw,5rem); line-height:.98; max-width:16ch; margin-inline:auto;}
.quote-band cite{display:block; font-style:normal; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.18em; font-size:13px; color:rgba(255,255,255,.8); margin-top:28px;}

/* nos univers */
.universe{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;}
.universe + .universe{margin-top:clamp(48px,7vw,100px);}
.universe.reverse .u-text{order:2;}
.u-photo{border-radius:var(--r-card); overflow:hidden; aspect-ratio:5/4; box-shadow:var(--shadow); position:relative;}
.u-photo img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;} /* univers produits : couleur */
.u-photo:hover img{transform:scale(1.05);}
.u-tag{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--green-deep);}
.u-tag i{font-size:18px;}
.u-text h3{font-size:clamp(1.8rem,3.4vw,2.8rem); margin-top:14px;}
.u-text p{color:var(--ink-2); margin-top:16px; font-size:1.05rem; max-width:46ch;}
.u-list{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:10px;}
.u-list li{display:flex; align-items:center; gap:11px; font-weight:500;}
.u-list i{color:var(--green-deep); font-size:19px; flex-shrink:0;}
.u-text .btn{margin-top:26px;}

/* process / étapes */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:24px; margin-top:56px; position:relative;}
.step{position:relative;}
.step .num{font-family:var(--font-display); font-weight:800; font-size:2.4rem; color:var(--green); line-height:1;}
.step .bar{height:3px; background:var(--line); border-radius:3px; margin:18px 0; position:relative; overflow:hidden;}
.step .bar::after{content:""; position:absolute; inset:0; width:38%; background:var(--blue); border-radius:3px;}
.step h4{font-size:1.18rem;}
.step p{color:var(--ink-2); font-size:14.5px; margin-top:8px;}

/* éthique */
.ethic{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,6vw,80px); align-items:center;}
.ethic-photo{border-radius:var(--r-card); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow);}
.ethic-photo img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05);}
.ethic-points{list-style:none; padding:0; margin:30px 0 0;}
.ethic-points li{display:grid; grid-template-columns:54px 1fr; gap:20px; padding:24px 0; border-top:1px solid var(--line); align-items:start;}
.ethic-points li:last-child{border-bottom:1px solid var(--line);}
.ethic-points .ic{width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:color-mix(in srgb,var(--green) 16%,transparent); color:var(--green-deep);}
.ethic-points .ic i{font-size:27px;}
.ethic-points h4{font-size:1.2rem;}
.ethic-points p{color:var(--ink-2); margin-top:5px; font-size:15px;}

/* avis clients */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px;}
.review{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:30px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;}
.review .stars{color:var(--green); font-size:18px; letter-spacing:2px; margin-bottom:14px;}
.review p{font-size:1.05rem; line-height:1.5;}
.review .who{margin-top:auto; padding-top:22px; display:flex; align-items:center; gap:12px;}
.review .av{width:42px; height:42px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700;}
.review .who b{display:block; font-size:14.5px;} .review .who span{font-size:13px; color:var(--ink-2);}

/* galerie */
.gallery{columns:3; column-gap:16px; margin-top:48px;}
.gallery figure{margin:0 0 16px; break-inside:avoid; border-radius:var(--r-card); overflow:hidden; position:relative; box-shadow:var(--shadow-sm);}
.gallery img{width:100%; height:auto; transition:transform .5s ease;} /* réalisations : couleur (preuve du rendu) */
.gallery figure:hover img{transform:scale(1.03);}
.gallery figcaption{position:absolute; left:0; right:0; bottom:0; padding:16px; color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; background:linear-gradient(180deg,transparent,rgba(10,16,20,.78)); opacity:0; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease;}
.gallery figure:hover figcaption{opacity:1; transform:none;}

/* contact */
.contact-band{background:var(--blue); color:#fff;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:start;}
.contact-intro h2{color:#fff; font-size:clamp(2.1rem,4.5vw,3.4rem);}
.contact-intro .lead{color:rgba(255,255,255,.88); margin-top:18px; max-width:42ch;}
.contact-info{list-style:none; padding:0; margin:34px 0 0; display:grid; gap:18px;}
.contact-info li{display:flex; align-items:center; gap:16px;}
.contact-info .ic{width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.16); display:grid; place-items:center; flex-shrink:0;}
.contact-info .ic i{font-size:22px;}
.contact-info a,.contact-info span{color:#fff; font-weight:500;}
.contact-info small{display:block; color:rgba(255,255,255,.7); font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-display); font-weight:700;}
.form-card{background:var(--surface); color:var(--ink); border-radius:var(--r-card); padding:clamp(26px,3vw,38px); box-shadow:var(--shadow);}
.form-card h3{font-size:1.4rem;}
.form-card p.sub{color:var(--ink-2); font-size:14.5px; margin-top:6px; margin-bottom:22px;}
.field{display:grid; gap:7px; margin-bottom:16px;}
.field label{font-family:var(--font-display); font-weight:600; font-size:13.5px; color:var(--ink);}
.field input,.field textarea{font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--bg-alt); border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; width:100%; transition:border-color .18s ease, box-shadow .18s ease;}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--ink-2) 80%,transparent);}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent);}
.field textarea{resize:vertical; min-height:110px;}
.form-card .btn{width:100%; margin-top:4px;}
.form-card .btn[disabled]{opacity:.6; cursor:progress;}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden;}
.form-status{font-size:14px; font-weight:600; margin-top:14px; padding:12px 14px; border-radius:var(--r-sm); text-align:center;}
.form-status.ok{background:color-mix(in srgb,var(--green) 16%,transparent); color:var(--green-deep);}
.form-status.err{background:color-mix(in srgb,#d6453c 16%,transparent); color:#c43a31;}
.form-note{font-size:12.5px; color:var(--ink-2); margin-top:14px; text-align:center;}
.form-note a{color:var(--blue-deep); text-decoration:underline;}

/* footer */
.footer{background:#0c0f12; color:#cdd6db; padding-block:clamp(56px,7vw,84px) 32px;}
.footer .logo-w{height:40px; width:auto; filter:brightness(0) invert(1); opacity:.96; margin-bottom:18px;}
.footer p.about{color:#93a1a8; font-size:14.5px; max-width:34ch;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
.footer h5{font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; color:#fff; margin:0 0 16px;}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:11px;}
.footer a{color:#aeb9bf; font-size:14.5px; transition:color .16s ease;}
.footer a:hover{color:var(--green);}
.footer .accent-line{width:44px; height:3px; background:var(--green); border-radius:3px; margin-bottom:26px;}
.socials{display:flex; gap:12px; margin-top:20px;}
.socials a{width:42px; height:42px; border-radius:var(--r-pill); display:grid; place-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#cdd6db; transition:transform .18s ease, background .18s ease, color .18s ease;}
.socials a:hover{transform:translateY(-2px); background:var(--green); color:var(--on-green); border-color:transparent;}
.socials a i{font-size:20px;}
.footer-bottom{margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:#7f8c92; font-size:13px;}

/* révélations */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1; transform:none;}
.reveal[data-delay="1"]{transition-delay:.08s;} .reveal[data-delay="2"]{transition-delay:.16s;} .reveal[data-delay="3"]{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1!important; transform:none!important; transition:none!important;} .cell,.u-photo img,.gallery img,.btn,.chip,.sol{transition:none!important;}}

/* responsive */
@media (max-width:1024px){
  .nav-links{display:none;} .burger{display:inline-grid;}
  .hero{min-height:0;} .hero-grid{grid-template-columns:1fr; gap:44px; padding-top:calc(var(--nav-h) + 48px); padding-bottom:64px;}
  .hero-visual{max-width:460px;}
  .split2,.universe,.ethic,.contact-grid{grid-template-columns:1fr;}
  .universe.reverse .u-text{order:0;}
  .solutions-grid{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:repeat(2,1fr); gap:28px;}
  .reviews{grid-template-columns:1fr;}
  .gallery{columns:2;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  :root{--nav-h:64px;}
  .bento,.solutions-grid,.steps{grid-template-columns:1fr;}
  .cell,.cell.photo{min-height:260px;}
  .gallery{columns:1;}
  .footer-top{grid-template-columns:1fr;}
  .hero h1{font-size:clamp(2.5rem,12vw,3.6rem);}
  .hero-block-green{width:72px; height:72px;} .hero-block-green i{font-size:32px;}
  .btn{width:100%;} .hero-cta .btn{width:auto; flex:1 1 auto;}
  .nav-right .btn-primary{display:none;} /* CTA dispo dans le menu burger */
}