:root{
  --bg:#0a0c10;
  --panel:#12151b;
  --panel-2:#171b22;
  --line:rgba(255,255,255,.14);
  --line-orange:rgba(255,90,0,.42);
  --text:#ffffff;
  --muted:#c4c9d2;
  --soft:#9198a3;
  --orange:#ff5a00;
  --orange-2:#ff7a1a;
  --green:#2ff0a0;
  --radius:28px;
  --max:1500px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in-view{opacity:1;transform:translateY(0)}
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--max),calc(100% - 72px));margin-inline:auto}
.orange{color:var(--orange)}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:14px;padding:17px 24px;font-weight:900;border:1px solid var(--line);transition:.25s ease;white-space:nowrap}
.btn.primary{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#fff;border-color:transparent;box-shadow:0 16px 42px rgba(255,90,0,.25)}
.btn.ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.section{padding:78px 0;position:relative}
.section.dark{background:radial-gradient(circle at top right,rgba(255,90,0,.11),transparent 38%)}
.eyebrow{display:flex;align-items:center;gap:16px;color:var(--orange);font-size:14px;font-weight:1000;text-transform:uppercase;letter-spacing:.18em;margin:0 0 22px}.eyebrow:before{content:"";width:46px;height:3px;background:var(--orange);border-radius:20px}
h1,h2,h3,p{margin-top:0}.section-title{font-size:clamp(34px,4vw,64px);line-height:.98;margin-bottom:18px;letter-spacing:-.05em}.section-intro{font-size:clamp(17px,1.4vw,22px);line-height:1.7;color:var(--muted);max-width:840px}
.site-header{position:sticky;top:0;z-index:50;background:transparent;backdrop-filter:none;border-bottom:1px solid transparent;transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease}.site-header.scrolled{background:rgba(3,4,5,.86);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.navbar{height:96px;display:flex;align-items:center;gap:28px;justify-content:space-between}.brand{display:flex;align-items:center;min-width:230px}.brand img{height:58px;width:auto}.navlinks{display:flex;align-items:center;gap:28px;font-weight:900;font-size:16px;white-space:nowrap}.navlinks a{position:relative;color:#f4f4f4}.navlinks a.active:after,.navlinks a:hover:after{content:"";position:absolute;height:4px;width:100%;left:0;bottom:-20px;background:var(--orange);border-radius:12px}
.nav-dropdown{position:relative;padding-bottom:26px;margin-bottom:-26px}.nav-dropdown-toggle{position:relative;display:flex;align-items:center;gap:7px;background:none;border:none;padding:0;margin:0;color:#f4f4f4;font:inherit;font-family:inherit;font-weight:900;font-size:16px;line-height:inherit;letter-spacing:inherit;text-align:inherit;-webkit-appearance:none;appearance:none;cursor:pointer}.nav-dropdown-toggle .chev{width:13px;height:13px;transition:transform .2s ease}.nav-dropdown-toggle.active:after,.nav-dropdown-toggle:hover:after,.nav-dropdown:hover .nav-dropdown-toggle:after{content:"";position:absolute;height:4px;width:100%;left:0;bottom:-20px;background:var(--orange);border-radius:12px}.nav-dropdown:hover .chev,.nav-dropdown-toggle:focus .chev{transform:rotate(180deg)}.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,-8px);min-width:210px;background:rgba(10,12,15,.98);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:2px;box-shadow:0 24px 60px rgba(0,0,0,.55);z-index:60;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}.nav-dropdown-menu a{padding:11px 14px;border-radius:10px;font-size:15px;font-weight:800;color:#f0f0f0;white-space:nowrap;transition:background .18s ease,color .18s ease}.nav-dropdown-menu a:hover,.nav-dropdown-menu a.active{background:rgba(255,90,0,.14);color:var(--orange)}.nav-dropdown-menu a:after{display:none!important}.header-actions{display:flex;align-items:center;gap:12px}.menu-toggle{display:none;background:transparent;color:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;font-weight:900}
.hero{min-height:700px;padding:92px 0 48px;position:relative;overflow:hidden;background:radial-gradient(circle at 76% 32%,rgba(255,90,0,.29),transparent 31%),radial-gradient(circle at 35% 20%,rgba(255,90,0,.09),transparent 28%),linear-gradient(110deg,#050607 0%,#07090c 50%,#170b05 100%)}
.hero:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:34px 34px;opacity:.22}.hero:after{content:"";position:absolute;right:-160px;top:100px;width:520px;height:520px;border:1px solid rgba(255,90,0,.22);border-radius:50%;box-shadow:0 0 130px rgba(255,90,0,.16)}.hero .container{position:relative;z-index:2}.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(460px,1.7fr);gap:56px;align-items:center}.hero h1{font-size:clamp(42px,5.4vw,84px);line-height:.96;letter-spacing:-.07em;margin-bottom:20px}.hero h1 span{display:block;color:var(--orange)}.hero p{font-size:clamp(16px,1.3vw,20px);line-height:1.7;color:#d8dbe2;max-width:640px}.hero-buttons{display:flex;gap:18px;flex-wrap:wrap;margin:26px 0 34px}.slider-dots{display:flex;align-items:center;gap:28px;margin-top:16px}.slider-dots span{font-weight:1000;font-size:23px;color:#6f7682}.slider-dots span:first-child{color:var(--orange)}.slider-dots i{width:90px;height:4px;background:linear-gradient(90deg,var(--orange),transparent);border-radius:20px}.visual-stage{position:relative}.hero-banner{width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}.screen{position:absolute;right:4%;top:0;width:78%;aspect-ratio:16/10;border:5px solid rgba(255,255,255,.55);border-radius:20px;background:linear-gradient(180deg,#0a0c10 0%,#0d0f13 45%,#150c07 100%);box-shadow:0 36px 90px rgba(0,0,0,.65),0 0 70px rgba(255,90,0,.18)}.screen:before{content:"";position:absolute;left:-6%;right:-6%;bottom:-4%;height:60%;background:linear-gradient(180deg,#1a1c22 0%,#101216 55%,#050506 100%);clip-path:polygon(0% 100%,0% 62%,9% 48%,18% 58%,27% 32%,36% 50%,47% 20%,58% 46%,68% 30%,79% 52%,90% 38%,100% 55%,100% 100%);filter:drop-shadow(0 -6px 40px rgba(255,90,0,.35))}.screen:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:radial-gradient(ellipse at 50% 100%,rgba(255,120,20,.65),rgba(255,80,0,.18) 55%,transparent 78%)}.screen-nav{position:absolute;right:26px;top:24px;z-index:3;display:flex;gap:18px;font-size:11px;font-weight:800;color:rgba(255,255,255,.55)}.screen-nav span:first-child{padding:6px 14px;border:1px solid rgba(255,255,255,.25);border-radius:20px;color:#fff}.screen-logo{position:absolute;left:28px;top:22px;height:26px;z-index:3}.screen-title{position:absolute;left:28px;top:70px;font-size:clamp(19px,1.9vw,32px);line-height:1.08;font-weight:1000;letter-spacing:-.04em;width:58%;z-index:3}.mini-btn{position:absolute;left:30px;top:158px;background:var(--orange);padding:9px 14px;border-radius:8px;font-weight:900;font-size:11px;z-index:3}.monitor-neck{position:absolute;left:50%;top:100%;transform:translateX(-50%);width:34px;height:34px;background:linear-gradient(#2c3036,#121417);border-radius:0 0 6px 6px}.monitor-base{position:absolute;left:50%;top:calc(100% + 34px);transform:translateX(-50%);width:140px;height:13px;background:linear-gradient(#33383f,#0e1013);border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.5)}.growth-card,.email-card,.insta-card,.bubble-card,.conversion-card{position:absolute;border:1px solid rgba(255,255,255,.14);background:linear-gradient(145deg,rgba(19,23,28,.95),rgba(8,10,12,.9));box-shadow:0 30px 70px rgba(0,0,0,.5);border-radius:22px;backdrop-filter:blur(10px)}.growth-card{left:0;top:172px;width:210px;padding:18px 18px 14px}.growth-card strong{display:block;color:var(--green);font-size:30px;margin-top:4px}.bars{height:58px;display:flex;align-items:end;gap:6px;margin-top:12px}.bars i{flex:1;min-width:0;border-radius:6px 6px 0 0;background:linear-gradient(var(--orange-2),#863002)}.bars i:nth-child(1){height:28%}.bars i:nth-child(2){height:42%}.bars i:nth-child(3){height:34%}.bars i:nth-child(4){height:58%}.bars i:nth-child(5){height:48%}.bars i:nth-child(6){height:88%}.bar-labels{display:flex;gap:8px;margin-top:6px}.bar-labels span{flex:1;text-align:center;font-size:8px;color:var(--soft);font-weight:700}.insta-card{left:220px;top:200px;width:166px;height:262px;border:5px solid rgba(255,255,255,.6);border-radius:22px;padding:13px 11px;overflow:hidden}.insta-top{display:flex;align-items:center;gap:7px;margin-bottom:9px}.insta-avatar{width:23px;height:23px;border-radius:50%;background:linear-gradient(135deg,var(--orange),#ffb37a);flex:none}.insta-top b{font-size:9px;display:block}.insta-top span{display:block;font-size:7px;color:rgba(255,255,255,.6);font-weight:600;margin-top:2px}.insta-stats{display:flex;justify-content:space-between;text-align:center;padding:8px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}.insta-stats strong{display:block;font-size:10.5px}.insta-stats small{display:block;font-size:6.5px;color:rgba(255,255,255,.6);font-weight:600;margin-top:2px}.insta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:8px}.insta-grid i{display:block;aspect-ratio:1;border-radius:4px;background:linear-gradient(135deg,var(--orange-2),#5c2103)}.insta-grid i:nth-child(2),.insta-grid i:nth-child(5){background:linear-gradient(135deg,#3a3f46,#14161a)}.insta-grid i:nth-child(3),.insta-grid i:nth-child(6){background:linear-gradient(135deg,var(--orange),#8b3305)}.insta-nav{display:flex;justify-content:space-between;margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12)}.insta-nav i{display:block;width:10px;height:10px;border-radius:3px;background:rgba(255,255,255,.45)}.insta-nav i:first-child{background:var(--orange)}.email-card{right:0;top:262px;width:330px;height:200px;padding:26px 26px 20px;background:linear-gradient(140deg,#fff,#d7d7d7);color:#111;overflow:hidden}.email-card>span{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#8a8a8a}.email-card h3{font-size:21px;margin:11px 0 6px;max-width:58%}.email-card p{color:#444;font-size:13px;line-height:1.4;max-width:58%}.email-card .mini-link{display:inline-block;margin-top:11px;color:var(--orange);font-weight:1000;font-size:14px}.email-close{position:absolute;right:13px;top:11px;width:17px;height:17px;border-radius:50%;background:rgba(0,0,0,.08);color:#777;font-size:10px;display:grid;place-items:center;font-weight:900}.bag-a{position:absolute;right:28px;bottom:36px;width:58px;height:70px;background:linear-gradient(160deg,#c98a4b,#8f5a26);border-radius:5px 5px 2px 2px}.bag-a:before{content:"";position:absolute;left:13px;top:-13px;width:16px;height:14px;border:4px solid #8f5a26;border-bottom:none;border-radius:10px 10px 0 0}.bag-b{position:absolute;right:0;bottom:36px;width:45px;height:54px;background:linear-gradient(160deg,#e2a24f,#a8672c);border-radius:5px 5px 2px 2px}.bag-b:before{content:"";position:absolute;left:10px;top:-11px;width:13px;height:13px;border:3px solid #a8672c;border-bottom:none;border-radius:8px 8px 0 0}.bubble-card{right:-13px;top:392px;width:190px;padding:18px;border-radius:24px}.bubble-notch{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:30px;height:4px;border-radius:4px;background:rgba(255,255,255,.2)}.bubble-card{padding-top:26px}.bubble-icon{width:22px;height:22px;border-radius:50%;background:rgba(255,90,0,.16);color:var(--orange);display:grid;place-items:center;margin-bottom:8px;font-size:12px}.bubble-card h4{font-size:15px;margin-bottom:5px}.bubble-card p{font-size:12px;line-height:1.4}.bubble-link{display:block;margin-top:8px;color:var(--orange);font-weight:1000;font-size:13px}.conversion-card{right:0;top:46px;width:168px;height:168px;border-radius:50%;display:grid;place-items:center;border-color:rgba(255,90,0,.45);background:radial-gradient(circle,rgba(255,90,0,.18),rgba(10,12,15,.82))}.conversion-card span{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.conversion-card strong{font-size:29px;color:#fff}.curve{position:absolute;inset:auto 25px 39px 27px;height:44px;border-bottom:7px solid var(--green);border-radius:0 0 80px 90px;transform:rotate(-12deg)}
.metrics{position:relative;z-index:3;margin-top:32px;border:1px solid var(--line-orange);border-radius:22px;display:grid;grid-template-columns:repeat(7,1fr);overflow:hidden;background:rgba(255,255,255,.03)}.metric{transition:background .25s ease}.metric:hover{background:rgba(255,90,0,.08)}.metric{min-height:104px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-right:1px solid var(--line)}.metric:last-child{border-right:0}.metric svg{color:var(--orange);width:20px;height:20px;margin-bottom:5px}.metric b{font-size:clamp(15px,1.3vw,22px)}.metric span{color:#d7d9df;font-size:11.5px;line-height:1.2}
.service-panel{border:1px solid var(--line);border-radius:32px;background:linear-gradient(130deg,rgba(255,255,255,.045),rgba(255,90,0,.035));padding:45px}.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.card{min-height:330px;padding:20px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:linear-gradient(160deg,#191d25,#0d0f14);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);display:flex;flex-direction:column;justify-content:space-between;transition:.25s}.card:hover{transform:translateY(-6px);border-color:rgba(255,90,0,.45);box-shadow:0 24px 50px rgba(255,90,0,.08)}.card-mock{width:100%;height:158px;border-radius:14px;position:relative;overflow:hidden;background:linear-gradient(150deg,#15181d,#0e1014);border:1px solid rgba(255,255,255,.08)}.card-mock img{width:100%;height:100%;object-fit:cover;display:block}.mock-site img{object-position:center}.mock-social img{object-position:center}.mock-mail img,.mock-sms img,.mock-seo img{object-position:center}.icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#ff9d52,var(--orange));box-shadow:0 8px 20px rgba(255,90,0,.4);position:relative;z-index:2;margin:-19px 0 14px 12px}.icon svg{width:17px;height:17px}
.mock-site .mock-tag{position:absolute;left:9px;top:9px;font-size:8px;font-weight:800;color:#fff;background:rgba(255,255,255,.08);padding:4px 7px;border-radius:6px;max-width:52%;line-height:1.25}.mock-site-photo{position:absolute;right:0;top:0;bottom:0;width:42%;background:linear-gradient(160deg,var(--orange-2),#5c2103)}
.mock-social{display:flex;align-items:center;justify-content:center}.mock-phone{width:33px;height:73px;border-radius:9px;border:2.5px solid rgba(255,255,255,.35);background:linear-gradient(var(--orange),#5c2103)}.app-badge{position:absolute;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:900;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.4)}.app-badge.fb{background:#1877f2;left:20%;top:18%}.app-badge.ig{background:radial-gradient(circle at 30% 30%,#ffdb73,#e1306c 45%,#5851db);left:64%;top:14%}.app-badge.li{background:#0a66c2;left:14%;bottom:16%}.app-badge.tk{background:#111;left:68%;bottom:12%}
.mock-mail{display:flex;align-items:center;padding:10px}.mock-mail-panel{width:100%;background:linear-gradient(160deg,#fff,#e6e6e6);border-radius:8px;padding:8px;color:#111}.mock-mail-head{display:flex;justify-content:space-between;align-items:center;font-size:8px;font-weight:900;color:#333}.mock-mail-head i{font-style:normal;color:#999;font-weight:700}.mock-mail-select{display:block;margin-top:6px;background:#f2f2f2;border:1px solid #ddd;border-radius:5px;padding:6px 7px;font-size:7.5px;color:#777}.mock-mail-btns{display:flex;gap:4px;margin-top:6px}.mock-mail-btns i{flex:1;text-align:center;background:#ececec;border-radius:5px;padding:5px;font-size:7px;font-style:normal;font-weight:700;color:#555}.mock-mail-btns b{flex:1;text-align:center;background:var(--orange);color:#fff;border-radius:5px;padding:5px;font-size:7px;font-weight:800}
.mock-sms{display:flex;align-items:center;padding:10px}.mock-sms-bubble{background:linear-gradient(160deg,#1c2026,#0c0d10);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:7px 9px;width:100%}.mock-sms-bubble b{display:block;font-size:8.5px}.mock-sms-bubble span{display:block;font-size:7px;color:var(--muted);margin-top:3px}.mock-sms-bubble em{display:block;font-size:7px;color:var(--orange);font-style:normal;font-weight:800;margin-top:5px}
.mock-seo-head{position:absolute;left:9px;top:8px;font-size:7.5px;font-weight:900;color:rgba(255,255,255,.55);letter-spacing:.05em}.mock-seo-chart{position:absolute;left:9px;bottom:0;width:52%;height:38px;background:linear-gradient(100deg,transparent,rgba(47,240,160,.15));border-bottom:2px solid var(--green);clip-path:polygon(0 80%,20% 60%,40% 70%,60% 30%,80% 45%,100% 10%,100% 100%,0% 100%)}.mock-seo-donut{position:absolute;right:10px;top:26px;width:38px;height:38px;border-radius:50%;background:conic-gradient(var(--green) 87%,rgba(255,255,255,.1) 0)}.mock-seo-donut b{position:absolute;inset:4px;border-radius:50%;background:#0d0f12;display:grid;place-items:center;font-size:9.5px;font-weight:900;color:#fff}.mock-seo-donut b small{font-size:6px;color:var(--muted);font-weight:600;margin-left:1px}.card h3{font-size:clamp(18px,1.3vw,24px);line-height:1.1;letter-spacing:-.03em}.card p{color:#d0d4dd;font-size:14px;line-height:1.5}.card a,.card .card-link{color:var(--orange);font-weight:1000;margin-top:14px;font-size:14px;display:inline-flex;align-items:center;gap:4px;transition:gap .25s ease}.card:hover .card-link{gap:9px}.small-services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}.small-service{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:22px;padding:28px;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:linear-gradient(120deg,rgba(255,255,255,.04),rgba(255,90,0,.05));transition:transform .3s ease,border-color .3s ease}.small-service:hover{transform:translateY(-4px);border-color:rgba(255,90,0,.45)}.small-service:hover .arrow{transform:translateX(4px)}.arrow{transition:transform .25s ease}.thumb{height:92px;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 70% 30%,rgba(255,90,0,.65),transparent 36%),linear-gradient(135deg,#1a1f26,#050607);border:1px solid rgba(255,255,255,.1)}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.small-service h3{margin:0 0 8px;font-size:23px}.small-service p{margin:0;color:var(--muted);font-size:17px;line-height:1.45}.arrow{font-size:32px;color:var(--orange)}
.solutions-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:36px}.solution-card{border:1px solid rgba(255,255,255,.16);border-radius:18px;background:linear-gradient(160deg,#20242c,#12151a);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);padding:28px;transition:.25s}.solution-card:hover{border-color:rgba(255,90,0,.45);transform:translateY(-4px)}.solution-card .icon{width:44px;height:44px;margin:0 0 18px;box-shadow:0 8px 20px rgba(255,90,0,.35)}.solution-card .icon svg{width:20px;height:20px}.solution-card h3{font-size:21px;margin-bottom:10px;letter-spacing:-.02em}.solution-card p{color:#d8dbe2;font-size:15.5px;line-height:1.55}
.audience-grid{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}.audience-item{display:flex;flex-direction:column;align-items:center;gap:12px;width:150px;text-align:center;padding:24px 12px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.06);transition:transform .3s ease,border-color .3s ease,background .3s ease}.audience-item:hover{transform:translateY(-4px);border-color:rgba(255,90,0,.45);background:rgba(255,90,0,.08)}.audience-item .icon{width:38px;height:38px;margin:0}.audience-item .icon svg{width:18px;height:18px}.audience-item span{font-size:13.5px;font-weight:800}
.method-simple{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}.method-simple .num-badge{width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:1000;font-size:18px;margin-bottom:18px;box-shadow:0 8px 22px rgba(255,90,0,.35)}
.sector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}.sector-card{border:1px solid rgba(255,255,255,.16);border-radius:20px;background:linear-gradient(160deg,#1c2029,#0e1116);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);padding:28px;position:relative;overflow:hidden;transition:transform .3s ease,border-color .3s ease}.sector-card:hover{transform:translateY(-4px);border-color:rgba(255,90,0,.5)}.sector-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 0%,rgba(255,90,0,.2),transparent 45%)}.sector-card>*{position:relative}.sector-card .tag{color:var(--orange);font-weight:1000;text-transform:uppercase;letter-spacing:.1em;font-size:13px}.sector-card h3{font-size:24px;margin:10px 0 8px}.sector-card p{color:#d8dbe2;font-size:16px;line-height:1.55}
.method-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:34px}.method-left,.method-steps{border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,#14181f,#0e1014);padding:44px}.method-left h2{font-size:clamp(38px,4vw,70px);line-height:1;letter-spacing:-.06em}.method-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.step{text-align:center}.step .num{width:100px;height:100px;margin:0 auto 22px;border-radius:50%;border:4px solid var(--orange);display:grid;place-items:center;font-size:26px;font-weight:1000;box-shadow:0 0 50px rgba(255,90,0,.16)}.step h3{font-size:27px}.step p{color:var(--muted);line-height:1.6}.showcase-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:36px}.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.showcase-card{aspect-ratio:4/5;min-height:360px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,#181c24,#0d0f14);padding:32px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;transition:transform .35s ease,border-color .35s ease}.showcase-card:hover{transform:translateY(-6px);border-color:rgba(255,90,0,.45)}.showcase-card:hover img{transform:scale(1.06)}.showcase-card img{transition:transform .5s ease}.showcase-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.showcase-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 18%,rgba(255,90,0,.22),transparent 34%),linear-gradient(0deg,rgba(3,4,5,.92) 10%,rgba(3,4,5,.35) 60%,rgba(3,4,5,.15) 100%);z-index:1}.showcase-card>*{position:relative;z-index:2}.showcase-card .tag{color:var(--orange);font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.showcase-card h3{font-size:30px;margin:12px 0}.showcase-card p{color:var(--muted);font-size:18px;line-height:1.55}.cta-band{border:1px solid var(--line-orange);border-radius:28px;background:radial-gradient(circle at left,rgba(255,90,0,.36),transparent 28%),linear-gradient(90deg,#130804,#0e1014);padding:34px 42px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.cta-band h2{font-size:clamp(30px,3vw,48px);margin-bottom:6px}.site-footer{background:#050607;border-top:1px solid var(--line);padding:56px 0 26px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:50px}.footer-logo{height:58px;width:auto;margin-bottom:16px}.footer h3,.site-footer h3{font-size:17px;text-transform:uppercase;letter-spacing:.06em}.site-footer a,.site-footer p{color:#d1d5de;line-height:1.8}.socials{display:flex;gap:12px;margin-top:18px}.socials a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:#fff}.contact-list{display:grid;gap:12px}.contact-item{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}.contact-item svg{color:var(--orange);width:22px}.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--soft);font-size:14px}.page-hero{padding:110px 0 80px;background:radial-gradient(circle at 70% 15%,rgba(255,90,0,.22),transparent 28%),linear-gradient(110deg,#050607,#0c0f13)}.page-hero h1{font-size:clamp(46px,6vw,96px);line-height:.98;letter-spacing:-.06em;max-width:980px}.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.info-card{border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,#181c24,#0d0f14);padding:32px;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.info-card:hover{transform:translateY(-4px);border-color:rgba(255,90,0,.4);box-shadow:0 20px 44px rgba(0,0,0,.35)}.info-card h2,.info-card h3{font-size:32px}.pill-tag{display:inline-block;background:rgba(255,90,0,.14);color:var(--orange);font-weight:1000;font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:7px 14px;border-radius:999px;margin-bottom:16px}
.offer-card{position:relative;overflow:hidden}.offer-card .num-ghost{position:absolute;right:22px;top:10px;font-size:68px;font-weight:1000;color:rgba(255,255,255,.05);line-height:1}
.trust-logos{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:28px;margin-top:36px;padding-top:28px;border-top:1px solid var(--line)}.trust-logos span{font-size:21px;font-weight:900;color:var(--soft);letter-spacing:-.02em}
.cta-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;padding:34px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.03)}.cta-strip h3{font-size:18px;margin-bottom:16px;font-weight:900}.info-card p,.info-card li{color:var(--muted);font-size:18px;line-height:1.7}.info-card ul{padding-left:20px}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.blog-card{border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,#181c24,#0d0f14);padding:26px;min-height:260px;transition:transform .3s ease,border-color .3s ease}.blog-card:hover{transform:translateY(-4px);border-color:rgba(255,90,0,.4)}.blog-card .meta{color:var(--orange);font-size:13px;text-transform:uppercase;font-weight:1000;letter-spacing:.1em}.blog-card h3{font-size:25px;line-height:1.15}.blog-card p{color:var(--muted);line-height:1.6}.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form input,.form textarea,.form select{width:100%;background:#11141a;border:1px solid var(--line);border-radius:14px;padding:15px 18px;color:#fff;font:inherit;transition:border-color .2s ease,background .2s ease}.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:rgba(255,90,0,.55);background:#151922}.form textarea{min-height:140px;resize:vertical}.form .full{grid-column:1/-1}
@media (max-width:560px){.form{grid-template-columns:1fr}}
@media (max-width:1280px){.container{width:min(var(--max),calc(100% - 48px))}.navlinks{gap:16px;font-size:13px}.header-actions .btn{padding:14px 16px}.hero-grid{gap:32px}.small-services{grid-template-columns:1fr}}
@media (max-width:1080px){.cards{grid-template-columns:repeat(3,1fr)}.metrics{grid-template-columns:repeat(3,1fr)}.metric:nth-child(3n){border-right:0}.metric:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:1024px){.navbar{height:auto;min-height:82px;flex-wrap:wrap;padding:14px 0}.brand img{height:48px}.menu-toggle{display:block}.navlinks{display:none;width:100%;flex-direction:column;align-items:flex-start;padding:20px 0;border-top:1px solid var(--line)}.navlinks.open{display:flex}.navlinks a.active:after,.navlinks a:hover:after{bottom:-6px}.nav-dropdown{width:100%}.nav-dropdown-toggle{width:100%;justify-content:space-between;padding:4px 0}.nav-dropdown-toggle:after{display:none!important}.nav-dropdown-menu,.nav-dropdown:hover .nav-dropdown-menu{position:static;display:flex!important;transform:none;background:none;border:none;box-shadow:none;backdrop-filter:none;padding:6px 0 0 14px;min-width:0}.nav-dropdown-menu a{padding:9px 0;font-size:15px}.chev{display:none}.header-actions .btn{display:none}.hero{min-height:auto;padding-top:70px}.hero-grid{grid-template-columns:1fr}.visual-stage{min-height:820px}.screen{right:8%;width:78%}.monitor-neck,.monitor-base{display:none}.growth-card{left:2%;top:200px;width:220px}.insta-card{left:2%;top:230px;width:190px;height:280px}.email-card{right:4%;top:420px;width:360px}.bubble-card{right:1%;top:600px}.cards{grid-template-columns:repeat(2,1fr)}.method-grid,.content-grid{grid-template-columns:1fr}.method-steps{grid-template-columns:repeat(2,1fr)}.showcase-grid,.blog-grid,.footer-grid,.solutions-grid,.sector-grid{grid-template-columns:1fr 1fr}.method-simple{grid-template-columns:1fr 1fr}.cta-band{grid-template-columns:1fr}.cta-strip{grid-template-columns:1fr}.footer-grid{gap:30px}}
@media (max-width:700px){.container{width:min(var(--max),calc(100% - 28px))}.hero h1{font-size:clamp(48px,16vw,80px)}.hero p{font-size:17px}.hero-buttons .btn{width:100%}.visual-stage{min-height:440px;transform:scale(.92);transform-origin:center top;margin-bottom:-70px}.screen{width:92%;right:0}.monitor-neck,.monitor-base{display:none}.screen-nav{display:none}.screen-title{left:24px;top:90px;width:72%;font-size:26px}.mini-btn{left:26px;top:170px}.growth-card{width:200px;padding:18px;top:210px}.growth-card strong{font-size:30px}.insta-card{left:130px;top:180px;width:160px;height:250px}.email-card{width:250px;height:180px;padding:24px;right:0;top:280px}.bag-a,.bag-b{display:none}.bubble-card{display:none}.conversion-card{width:145px;height:145px;top:40px}.metrics{grid-template-columns:1fr 1fr;border-radius:22px}.metric{min-height:125px;border-top:1px solid var(--line)}.metric:nth-child(odd){border-right:1px solid var(--line)}.metric:nth-child(even){border-right:0}.cards,.showcase-grid,.blog-grid,.footer-grid,.solutions-grid,.sector-grid,.method-simple{grid-template-columns:1fr}.showcase-card{aspect-ratio:16/10;min-height:0}.small-service{grid-template-columns:1fr}.method-steps{grid-template-columns:1fr}.section{padding:54px 0}.service-panel{padding:26px}.showcase-head{display:block}.footer-bottom{display:block}.brand{min-width:auto}.brand img{height:42px}}

/* Accueil — visuel principal agrandi pour retrouver les proportions de la maquette de référence */
@media (min-width:1281px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(520px,1.78fr);gap:38px}
  .visual-stage{position:relative;z-index:1;overflow:visible}
  .hero-banner{width:112%;max-width:none;height:auto;transform:translateX(-5%);transform-origin:center center;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}
}
@media (min-width:1025px) and (max-width:1280px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(500px,1.7fr);gap:24px}
  .visual-stage{position:relative;z-index:1;overflow:visible}
  .hero-banner{width:108%;max-width:none;height:auto;transform:translateX(-4%);transform-origin:center center}
}
@media (max-width:1024px){
  .hero-banner{width:100%;max-width:100%;height:auto;transform:none}
  .visual-stage{min-height:0}
}

/* Accueil — position verticale du visuel principal : rapproché de la barre de menu comme sur la référence */
@media (min-width:1281px){
  .hero .visual-stage{
    transform:translateY(-94px);
    transform-origin:center top;
  }
}
@media (min-width:1025px) and (max-width:1280px){
  .hero .visual-stage{
    transform:translateY(-72px);
    transform-origin:center top;
  }
}
@media (max-width:1024px){
  .hero .visual-stage{transform:none}
}


/* === Ajustements 07/08/2026 : bannière + page contact === */
/* Accueil : le visuel existant reste inchangé, seule sa mise en page est ajustée. */
@media (min-width:1281px){
  .hero .visual-stage{
    transform:translateY(-82px);
    transform-origin:center top;
  }
  .hero .hero-banner{
    width:112%;
    max-width:none;
    height:clamp(590px,36.8vw,700px);
    object-fit:fill;
    transform:translateX(-5%);
    transform-origin:center top;
  }
}
@media (min-width:1025px) and (max-width:1280px){
  .hero .visual-stage{
    transform:translateY(-62px);
    transform-origin:center top;
  }
  .hero .hero-banner{
    width:108%;
    max-width:none;
    height:560px;
    object-fit:fill;
    transform:translateX(-4%);
    transform-origin:center top;
  }
}
@media (max-width:1024px){
  .hero .hero-banner{height:auto;object-fit:contain}
}

/* Contact : deux grands panneaux équilibrés, formulaire vertical et coordonnées aérées. */
.contact-layout{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px;
  align-items:stretch;
}
.contact-layout > .info-card{
  min-height:660px;
  padding:42px 46px;
}
.contact-layout > .info-card h2{
  margin:0 0 38px;
  font-size:clamp(32px,2.4vw,46px);
  letter-spacing:-.035em;
}
.contact-details .contact-list{
  gap:28px;
  margin-top:8px;
}
.contact-details .contact-item{
  grid-template-columns:32px minmax(0,1fr);
  gap:18px;
  align-items:start;
  font-size:20px;
  line-height:1.45;
}
.contact-details .contact-item svg{
  width:27px;
  height:27px;
  margin-top:1px;
}
.contact-details .contact-item a,
.contact-details .contact-item span{
  color:#f5f5f5;
}
.contact-form{
  grid-template-columns:1fr;
  gap:20px;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  min-height:72px;
  padding:20px 24px;
  border-radius:18px;
  background:#090c10;
  border-color:rgba(255,255,255,.16);
  font-size:18px;
}
.contact-form textarea{
  min-height:190px;
  line-height:1.55;
}
.contact-form .btn{
  width:100%;
  min-height:72px;
  border-radius:18px;
  font-size:18px;
  margin-top:2px;
}
@media (max-width:1024px){
  .contact-layout{grid-template-columns:1fr}
  .contact-layout > .info-card{min-height:0;padding:34px}
}
@media (max-width:560px){
  .contact-layout > .info-card{padding:26px 22px}
  .contact-layout > .info-card h2{margin-bottom:28px}
  .contact-details .contact-item{font-size:17px;grid-template-columns:28px 1fr;gap:13px}
  .contact-form input,.contact-form select,.contact-form textarea{font-size:16px;padding:17px 18px;min-height:62px}
  .contact-form textarea{min-height:160px}
}

/* === Enrichissement visuel + responsive mobile 07/08/2026 === */
/* Horizon2 garde la priorité de contenu : la distribution reste secondaire et n'apparaît plus dans le menu principal. */

.service-visual-section{
  padding-top:38px;
  padding-bottom:22px;
}
.service-visual-frame{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:30px;
  background:linear-gradient(145deg,#12161c,#080a0e);
  box-shadow:0 30px 80px rgba(0,0,0,.36),0 0 70px rgba(255,90,0,.06);
  min-height:300px;
}
.service-visual-frame > img{
  width:100%;
  height:auto;
  max-height:650px;
  object-fit:cover;
  object-position:center;
}
.service-visual-duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:rgba(255,255,255,.12);
}
.service-visual-duo > img{
  height:360px;
  max-height:none;
  object-fit:cover;
}
.visual-badge{
  position:absolute;
  z-index:3;
  left:26px;
  top:24px;
  padding:10px 15px;
  border-radius:999px;
  background:rgba(5,7,10,.82);
  border:1px solid rgba(255,90,0,.35);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(12px);
}

/* Localisation / agences — illustration graphique sans ajout d'information. */
.agency-visual{
  grid-column:1/-1;
  position:relative;
  min-height:420px;
  overflow:hidden;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.13);
  background:radial-gradient(circle at 55% 50%,rgba(255,90,0,.2),transparent 24%),linear-gradient(135deg,#11151b,#080a0d);
  margin-top:6px;
}
.agency-map-grid{
  position:absolute;inset:-30%;opacity:.26;
  background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:48px 48px;
  transform:perspective(700px) rotateX(62deg) rotateZ(-12deg) scale(1.3);
}
.agency-map-rings{position:absolute;left:55%;top:50%;width:280px;height:280px;transform:translate(-50%,-50%)}
.agency-map-rings i{position:absolute;inset:0;border:1px solid rgba(255,90,0,.48);border-radius:50%;box-shadow:0 0 40px rgba(255,90,0,.13)}
.agency-map-rings i:nth-child(2){inset:42px}.agency-map-rings i:nth-child(3){inset:86px;background:rgba(255,90,0,.08)}
.agency-pin{position:absolute;left:55%;top:50%;transform:translate(-50%,-62%);width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--orange),var(--orange-2));box-shadow:0 22px 70px rgba(255,90,0,.38)}
.agency-pin svg{width:34px;height:34px;color:white}
.agency-map-label{position:absolute;left:8%;bottom:12%;padding:20px 24px;border-radius:18px;border:1px solid var(--line);background:rgba(7,9,12,.82);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:6px}
.agency-map-label strong{font-size:20px}.agency-map-label span{color:var(--muted);line-height:1.5}

/* Contact : occupe intelligemment l'espace sous les coordonnées. */
.contact-details{position:relative;overflow:hidden}
.contact-location-visual{
  position:absolute;
  left:46px;right:46px;bottom:42px;
  height:230px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.11);
  background:radial-gradient(circle at 66% 52%,rgba(255,90,0,.2),transparent 25%),linear-gradient(145deg,#0d1015,#080a0d);
  overflow:hidden;
}
.contact-location-visual:before{content:"";position:absolute;inset:-20%;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:36px 36px;transform:rotate(-10deg)}
.contact-location-orbit{position:absolute;border:1px solid rgba(255,90,0,.35);border-radius:50%;left:66%;top:50%;transform:translate(-50%,-50%)}
.orbit-one{width:170px;height:170px}.orbit-two{width:105px;height:105px}
.contact-location-pin{position:absolute;left:66%;top:50%;transform:translate(-50%,-55%);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--orange);box-shadow:0 15px 50px rgba(255,90,0,.35)}
.contact-location-pin svg{width:27px;height:27px}.contact-location-visual > span{position:absolute;left:28px;bottom:26px;font-size:22px;font-weight:900;letter-spacing:-.03em}

/* Blog : les cartes deviennent plus éditoriales et visuelles. */
.blog-card{padding:0 0 26px;overflow:hidden;min-height:0}
.blog-card > :not(.blog-thumb){margin-left:26px;margin-right:26px}
.blog-thumb{height:180px;margin-bottom:23px;border-bottom:1px solid var(--line);overflow:hidden;background:#090b0f}
.blog-thumb img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s ease,filter .45s ease}
.blog-card:hover .blog-thumb img{transform:scale(1.035);filter:brightness(1.05)}

/* Mobile : navigation, hero, typographie, images, cartes et formulaires. */
@media (max-width:1024px){
  .site-header{background:rgba(4,5,7,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .navbar{gap:14px}
  .menu-toggle{margin-left:auto;padding:10px 14px}
  .navlinks.open{gap:19px;padding:22px 2px 26px}
  .nav-dropdown-menu{gap:1px}
  .page-hero{padding:78px 0 60px}
  .page-hero h1{font-size:clamp(44px,8vw,70px)}
  .service-visual-section{padding-top:24px}
  .service-visual-frame{border-radius:24px;min-height:0}
  .service-visual-duo{grid-template-columns:1fr}
  .service-visual-duo > img{height:auto}
  .visual-badge{left:18px;top:18px}
  .agency-visual{min-height:360px}
  .contact-location-visual{position:relative;left:auto;right:auto;bottom:auto;margin-top:38px;height:220px}
  .contact-layout > .info-card{min-height:0}
  .blog-thumb{height:210px}
}

@media (max-width:700px){
  .navbar{min-height:74px;padding:11px 0}
  .brand img{height:38px}
  .menu-toggle{font-size:14px}
  .navlinks{font-size:16px}
  .navlinks.open{padding-top:18px}
  .nav-dropdown-menu a{font-size:14px;padding:7px 0;color:var(--muted)}
  .hero{padding:48px 0 38px}
  .hero-grid{gap:30px}
  .hero h1{font-size:clamp(44px,13.8vw,68px);line-height:.94;letter-spacing:-.065em}
  .hero .eyebrow{font-size:12px;letter-spacing:.13em;gap:10px;margin-bottom:18px}.hero .eyebrow:before{width:32px}
  .hero p{line-height:1.58}
  .hero-buttons{gap:12px;margin:22px 0 26px}
  .hero-buttons .btn{min-height:58px;padding:14px 18px}
  .hero .visual-stage{margin:0;transform:none;min-height:0}
  .hero .hero-banner{width:112%;max-width:none;height:auto;transform:translateX(-6%);object-fit:contain}
  .slider-dots{display:none}
  .metrics{margin-top:26px}
  .metric{padding:20px 12px;min-height:112px}.metric b{font-size:18px}.metric span{font-size:12px}
  .service-panel{padding:22px 14px;border-radius:24px}
  .cards{gap:16px}.card{padding:18px;border-radius:20px}.card h3{font-size:23px}.card p{font-size:15.5px}
  .card-mock{margin:-18px -18px 20px;height:180px;border-radius:19px 19px 12px 12px}.card-mock img{height:100%;object-fit:cover}
  .small-services{gap:14px}.small-service{padding:14px;gap:14px;border-radius:18px}.small-service .thumb{width:92px;height:80px}.small-service h3{font-size:20px}.small-service p{font-size:14px;line-height:1.45}
  .page-hero{padding:56px 0 46px}.page-hero h1{font-size:clamp(40px,12vw,58px);line-height:1}.page-hero .section-intro{font-size:16px;line-height:1.58}.page-hero .hero-buttons{margin-bottom:0}
  .service-visual-section{padding:18px 0 8px}.service-visual-frame{border-radius:19px}.service-visual-frame > img{min-height:200px;object-fit:cover}.visual-badge{font-size:10px;padding:8px 11px;left:12px;top:12px}
  .content-grid{gap:15px}.info-card{padding:22px;border-radius:20px}.info-card h2,.info-card h3{font-size:26px}.info-card p,.info-card li{font-size:16px;line-height:1.6}
  .cta-band{padding:24px;border-radius:22px;gap:18px}.cta-band h2{font-size:30px}.cta-band .btn{width:100%}
  .agency-visual{min-height:310px;border-radius:21px}.agency-map-rings{left:62%;width:200px;height:200px}.agency-map-rings i:nth-child(2){inset:30px}.agency-map-rings i:nth-child(3){inset:62px}.agency-pin{left:62%;width:60px;height:60px}.agency-map-label{left:18px;right:18px;bottom:18px;padding:16px 18px}.agency-map-label strong{font-size:18px}
  .contact-layout{gap:16px}.contact-layout > .info-card{padding:24px 20px}.contact-layout > .info-card h2{font-size:31px;margin-bottom:28px}.contact-details .contact-list{gap:23px}.contact-details .contact-item{font-size:16px;line-height:1.5}.contact-location-visual{height:190px;margin-top:32px}.contact-location-orbit,.contact-location-pin{left:70%}.contact-location-visual > span{font-size:19px;left:20px;bottom:20px}
  .contact-form{gap:14px}.contact-form input,.contact-form select,.contact-form textarea{border-radius:14px}.contact-form .btn{min-height:62px;border-radius:14px;font-size:16px}
  .blog-grid{gap:17px}.blog-card{border-radius:19px}.blog-thumb{height:175px;margin-bottom:20px}.blog-card > :not(.blog-thumb){margin-left:20px;margin-right:20px}.blog-card h3{font-size:22px}
  .showcase-card{padding:18px}.showcase-card img{margin:-18px -18px 20px;width:calc(100% + 36px)}
  .footer-grid{gap:34px}.footer-logo{max-width:250px}.footer-bottom{line-height:1.7}
}

@media (max-width:420px){
  .container{width:calc(100% - 22px)}
  .hero h1{font-size:43px}
  .page-hero h1{font-size:39px}
  .brand img{height:34px}
  .menu-toggle{padding:9px 11px;font-size:13px}
  .metric{min-height:104px}.metric svg{width:24px;height:24px}
  .small-service{grid-template-columns:78px 1fr auto}.small-service .thumb{width:78px;height:72px}
}


/* === Intégration premium des illustrations — sans répétition des images === */
.service-page-hero{padding:88px 0 72px}
.page-hero .service-hero-grid{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(430px,.97fr);gap:64px;align-items:center}
.service-hero-copy{min-width:0}.service-hero-copy h1{max-width:900px}
.service-art{position:relative;height:430px;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:radial-gradient(circle at 68% 28%,rgba(255,90,0,.18),transparent 34%),linear-gradient(145deg,#11151b 0%,#07090c 72%);box-shadow:0 30px 90px rgba(0,0,0,.38),0 0 70px rgba(255,90,0,.07);isolation:isolate}
.service-art:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1px);background-size:30px 30px;opacity:.18;z-index:-1}.service-art:after{content:"";position:absolute;width:380px;height:380px;border:1px solid rgba(255,90,0,.18);border-radius:50%;right:-155px;bottom:-180px;box-shadow:0 0 90px rgba(255,90,0,.11);z-index:-1}
.art-topbar{position:absolute;left:22px;top:20px;display:flex;gap:7px}.art-topbar i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}.art-topbar i:first-child{background:var(--orange)}
/* stratégie */
.strategy-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:106px;height:106px;border-radius:27px;display:grid;place-items:center;background:linear-gradient(145deg,var(--orange),#a83a00);font-size:28px;font-weight:1000;box-shadow:0 20px 65px rgba(255,90,0,.34);z-index:3}.strategy-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(255,90,0,.28);border-radius:50%;transform:translate(-50%,-50%)}.ring-a{width:270px;height:270px}.ring-b{width:370px;height:370px;opacity:.55}
.strategy-node{position:absolute;width:132px;padding:17px;border:1px solid var(--line);border-radius:18px;background:rgba(10,13,17,.88);backdrop-filter:blur(10px);box-shadow:0 18px 45px rgba(0,0,0,.35);z-index:2}.strategy-node span{display:block;color:#f5f5f5;font-size:10px;letter-spacing:.1em;font-weight:900}.node-line{display:block;width:70%;height:5px;border-radius:9px;background:linear-gradient(90deg,var(--orange),rgba(255,90,0,.1));margin-top:12px}.node-1{left:7%;top:17%}.node-2{right:7%;top:18%}.node-3{left:9%;bottom:14%}.node-4{right:8%;bottom:13%}
/* site web */
.web-browser{position:absolute;left:8%;right:8%;top:16%;bottom:14%;border:2px solid rgba(255,255,255,.22);border-radius:20px;background:#090c10;box-shadow:0 26px 60px rgba(0,0,0,.48);overflow:hidden;transform:perspective(850px) rotateY(-5deg) rotateX(2deg)}.web-nav{height:47px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 18px}.web-logo-mark{width:62px;height:9px;border-radius:10px;background:linear-gradient(90deg,var(--orange),rgba(255,90,0,.28))}.web-nav-lines{width:90px;height:6px;border-radius:10px;background:linear-gradient(90deg,rgba(255,255,255,.6) 0 24%,transparent 24% 38%,rgba(255,255,255,.28) 38% 64%,transparent 64% 76%,rgba(255,255,255,.2) 76%)}.web-hero-block{position:absolute;left:7%;top:28%;width:46%}.web-hero-block i{display:block;width:66px;height:7px;background:var(--orange);border-radius:10px;margin-bottom:15px}.web-hero-block b,.web-hero-block span{display:block;border-radius:10px;background:rgba(255,255,255,.82)}.web-hero-block b{height:17px;width:94%;margin-bottom:10px}.web-hero-block span{height:8px;width:74%;opacity:.35}.web-card-row{position:absolute;left:7%;right:7%;bottom:12%;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.web-card-row i{height:50px;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:linear-gradient(145deg,rgba(255,90,0,.14),rgba(255,255,255,.035))}.web-mobile{position:absolute;right:5%;bottom:5%;width:86px;height:170px;border:4px solid #373c45;border-radius:19px;background:linear-gradient(160deg,#10141a,#080a0d);box-shadow:0 22px 50px rgba(0,0,0,.55);transform:rotate(5deg)}.web-mobile:before{content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);width:28px;height:5px;border-radius:8px;background:#242832}.web-mobile:after{content:"";position:absolute;left:12px;right:12px;top:32px;height:78px;border-radius:10px;background:linear-gradient(160deg,rgba(255,90,0,.7),rgba(255,90,0,.08))}
/* réseaux sociaux */
.social-phone{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-2deg);width:190px;height:340px;border:5px solid #343943;border-radius:31px;background:#080a0e;box-shadow:0 35px 80px rgba(0,0,0,.55);padding:24px 13px 14px}.social-notch{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:52px;height:6px;background:#242832;border-radius:10px}.social-profile{display:flex;align-items:center;gap:9px;margin:9px 0 13px}.social-profile i{width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,var(--orange),#ffbd82)}.social-profile span{width:72px;height:7px;border-radius:8px;background:rgba(255,255,255,.28)}.social-post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.social-post-grid i{height:77px;border-radius:10px;background:linear-gradient(145deg,#1d222a,#101318);border:1px solid rgba(255,255,255,.06)}.social-post-grid .p1,.social-post-grid .p4{background:linear-gradient(145deg,rgba(255,90,0,.8),#612200)}.social-post-grid .p2,.social-post-grid .p5{background:radial-gradient(circle at 70% 35%,rgba(255,90,0,.5),transparent 32%),#15191f}.social-bubble{position:absolute;width:61px;height:61px;border-radius:18px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:rgba(13,16,21,.9);font-size:21px;font-weight:1000;box-shadow:0 18px 50px rgba(0,0,0,.38);color:#fff}.social-bubble-1{left:13%;top:19%;color:#7aa7ff}.social-bubble-2{right:12%;top:18%;color:#ff8b45}.social-bubble-3{left:10%;bottom:16%;color:#82b8ff}.social-bubble-4{right:11%;bottom:14%;color:#fff}
/* emailing et SMS */
.mail-window{position:absolute;left:6%;top:19%;width:61%;height:255px;border-radius:22px;background:linear-gradient(145deg,#f0ece7,#cfc8c0);padding:34px;box-shadow:0 26px 65px rgba(0,0,0,.42);transform:rotate(-1.5deg)}.mail-mini-head{width:42px;height:7px;border-radius:10px;background:#d15a15;margin-bottom:26px}.mail-bar{display:block;height:13px;border-radius:9px;background:rgba(0,0,0,.73);margin-bottom:10px}.mail-bar.bar-1{width:76%}.mail-bar.bar-2{width:58%}.mail-bar.bar-3{height:7px;width:68%;opacity:.25;margin-top:19px}.mail-button{width:76px;height:27px;border-radius:8px;background:#111;margin-top:22px}.sms-phone{position:absolute;right:6%;bottom:8%;width:155px;height:280px;border:5px solid #3a4049;border-radius:28px;background:#090b0f;box-shadow:0 25px 70px rgba(0,0,0,.55);transform:rotate(4deg)}.sms-notch{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:45px;height:6px;border-radius:9px;background:#252a32}.sms-message{position:absolute;left:12px;right:12px;top:74px;padding:15px 13px;border-radius:14px;background:#f3f3f3;color:#171717;box-shadow:0 15px 30px rgba(0,0,0,.28)}.sms-line{display:block;height:7px;border-radius:8px;background:rgba(0,0,0,.65);margin:7px 0}.sms-line.line-1{width:52%;background:#d15a15}.sms-line.line-2{width:88%}.sms-line.line-3{width:69%;opacity:.32}
/* SEO */
.seo-dashboard{position:absolute;left:7%;right:7%;top:18%;bottom:14%;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:linear-gradient(145deg,#10141a,#080a0d);box-shadow:0 26px 65px rgba(0,0,0,.45);padding:25px}.seo-search{height:44px;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:0 14px}.seo-search-line{width:52%;height:7px;background:rgba(255,255,255,.22);border-radius:9px}.seo-search b{color:var(--orange);font-size:21px}.seo-score{position:absolute;right:24px;top:91px;width:112px;height:112px;border-radius:50%;border:7px solid rgba(47,240,160,.65);display:grid;place-items:center;box-shadow:0 0 35px rgba(47,240,160,.09)}.seo-score strong{font-size:25px;color:#fff}.seo-chart{position:absolute;left:26px;right:166px;bottom:28px;height:135px;display:flex;align-items:end;gap:7px;padding-top:16px;border-bottom:1px solid rgba(255,255,255,.1)}.seo-chart i{flex:1;height:var(--h);min-width:4px;border-radius:5px 5px 0 0;background:linear-gradient(var(--orange-2),rgba(255,90,0,.25))}.seo-chip{position:absolute;padding:9px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(7,9,12,.85);font-size:10px;font-weight:900}.chip-1{left:11%;top:18%}.chip-2{right:11%;bottom:12%}
/* Blog : visuels éditoriaux uniques codés, sans réutilisation des mockups */
.blog-art{position:relative;isolation:isolate;background:linear-gradient(150deg,#11151b,#07090c);overflow:hidden}.blog-art:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:25px 25px;opacity:.17}.blog-art:after{content:"";position:absolute;width:220px;height:220px;left:var(--art-x);top:var(--art-y);transform:translate(-50%,-50%) rotate(var(--art-rot));border:1px solid rgba(255,90,0,.24);border-radius:42px;box-shadow:0 0 70px rgba(255,90,0,.09)}.blog-art-kicker{position:absolute;left:22px;bottom:22px;z-index:3;color:#fff;font-size:12px;font-weight:1000;letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;border:1px solid rgba(255,90,0,.35);border-radius:999px;background:rgba(7,9,12,.76)}.blog-art-index{position:absolute;right:20px;top:13px;z-index:2;font-size:52px;font-weight:1000;line-height:1;color:rgba(255,255,255,.045);letter-spacing:-.08em}.blog-art-orb{position:absolute;border-radius:50%;z-index:1}.orb-main{width:var(--art-size);height:var(--art-size);left:var(--art-x);top:var(--art-y);background:radial-gradient(circle at 35% 30%,#ff8a45,var(--orange) 38%,#481600 75%);box-shadow:0 0 55px rgba(255,90,0,.28);transform:translate(-50%,-50%)}.orb-small{width:22px;height:22px;left:calc(var(--art-x) - 18%);top:calc(var(--art-y) + 20%);background:#ff7a1a;box-shadow:0 0 28px rgba(255,90,0,.4)}.blog-art-line{position:absolute;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent);z-index:1;transform-origin:center}.line-a{width:65%;left:12%;top:42%;transform:rotate(var(--art-rot))}.line-b{width:48%;right:5%;top:67%;transform:rotate(calc(var(--art-rot) * -1))}.blog-art-2 .orb-main,.blog-art-7 .orb-main{border-radius:28% 72% 64% 36% / 47% 35% 65% 53%}.blog-art-3:after,.blog-art-8:after{border-radius:50%}.blog-art-4 .line-a,.blog-art-9 .line-a{height:7px;border-radius:20px;opacity:.7}.blog-art-5 .orb-main,.blog-art-10 .orb-main{background:radial-gradient(circle at 35% 30%,#ffe1cb,#ff7a1a 28%,#4d1b04 72%)}
@media (max-width:1180px){.page-hero .service-hero-grid{grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:38px}.service-art{height:390px}}
@media (max-width:1024px){.service-page-hero{padding:68px 0 56px}.page-hero .service-hero-grid{grid-template-columns:1fr;gap:34px}.service-art{height:360px;max-width:760px;width:100%}}
@media (max-width:700px){.service-page-hero{padding:54px 0 44px}.page-hero .service-hero-grid{gap:26px}.service-art{height:285px;border-radius:21px}.strategy-core{width:82px;height:82px;border-radius:22px;font-size:23px}.ring-a{width:205px;height:205px}.ring-b{width:270px;height:270px}.strategy-node{width:96px;padding:11px 12px;border-radius:13px}.strategy-node span{font-size:8px}.node-line{height:4px;margin-top:9px}.node-1{left:4%;top:15%}.node-2{right:4%;top:16%}.node-3{left:5%;bottom:12%}.node-4{right:5%;bottom:11%}.web-browser{left:5%;right:8%;top:14%;bottom:12%}.web-mobile{width:66px;height:132px;right:3%;bottom:3%}.web-hero-block b{height:12px}.web-card-row i{height:36px}.social-phone{width:150px;height:255px;border-width:4px;border-radius:25px;padding:20px 10px 10px}.social-post-grid{gap:5px}.social-post-grid i{height:53px}.social-bubble{width:47px;height:47px;border-radius:14px;font-size:17px}.social-bubble-1{left:7%;top:17%}.social-bubble-2{right:6%;top:18%}.social-bubble-3{left:6%;bottom:14%}.social-bubble-4{right:6%;bottom:13%}.mail-window{left:4%;top:15%;width:70%;height:190px;padding:23px}.mail-mini-head{margin-bottom:20px}.mail-button{margin-top:16px}.sms-phone{right:3%;bottom:4%;width:112px;height:210px;border-width:4px}.sms-message{left:8px;right:8px;top:56px;padding:10px 9px}.seo-dashboard{left:4%;right:4%;top:14%;bottom:10%;padding:17px}.seo-search{height:36px}.seo-score{right:16px;top:71px;width:85px;height:85px;border-width:5px}.seo-score strong{font-size:20px}.seo-chart{left:18px;right:120px;bottom:20px;height:98px;gap:4px}.seo-chip{font-size:8px;padding:7px 9px}.chip-1{left:8%;top:16%}.chip-2{right:7%;bottom:8%}.blog-art-kicker{left:16px;bottom:16px;font-size:10px}.blog-art-index{font-size:42px;right:15px}}
@media (max-width:420px){.service-art{height:250px}.art-topbar{left:16px;top:14px}.strategy-node{width:88px}.ring-b{width:240px;height:240px}}


/* === Raffinement premium des blocs de référencement 07/08/2026 === */
.section-head.compact{max-width:900px;margin-bottom:34px}
.feature-title{font-size:clamp(34px,3.6vw,56px);margin-bottom:14px}
.feature-intro{max-width:820px}
.feature-grid{align-items:stretch}
.feature-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:320px;
  padding:34px 34px 30px;
  background:
    radial-gradient(circle at 88% 16%,rgba(255,90,0,.16),transparent 24%),
    linear-gradient(145deg,#181d25 0%,#10141b 55%,#0b0d12 100%);
  border-color:rgba(255,255,255,.12);
}
.feature-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 36%);
  pointer-events:none;
}
.feature-card:after{
  content:"";
  position:absolute;
  left:34px;
  right:34px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg,rgba(255,90,0,.4),rgba(255,255,255,0));
}
.feature-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.feature-index{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:var(--orange);
  font-size:16px;
  font-weight:1000;
  box-shadow:0 12px 24px rgba(0,0,0,.28);
}
.feature-card h3{
  font-size:clamp(32px,2.4vw,56px);
  line-height:1.02;
  letter-spacing:-.04em;
  margin-bottom:16px;
}
.feature-card p{
  max-width:42ch;
  margin-bottom:22px;
}
.feature-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}
.feature-list li{
  position:relative;
  padding-left:30px;
  color:#e2e5eb;
  font-size:16px;
  line-height:1.55;
}
.feature-list li:before{
  content:"";
  position:absolute;
  left:0;
  top:.45em;
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff 0 12%,#ff7a1a 13% 62%,rgba(255,122,26,.16) 63% 100%);
  box-shadow:0 0 18px rgba(255,90,0,.35);
}
@media (max-width:700px){
  .section-head.compact{margin-bottom:22px}
  .feature-card{min-height:0;padding:24px 22px 24px}
  .feature-card:after{left:22px;right:22px}
  .feature-card-top{margin-bottom:14px}
  .feature-index{width:44px;height:44px;border-radius:14px;font-size:14px}
  .feature-card h3{font-size:26px;margin-bottom:12px}
  .feature-card p{margin-bottom:18px}
  .feature-list{gap:10px}
  .feature-list li{font-size:15px;padding-left:24px}
}


/* === Motion & diversity upgrade 07/08/2026 === */
@keyframes h360-float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes h360-float-y-sm{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes h360-float-x{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
@keyframes h360-rotate-slow{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes h360-rotate-rev{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes h360-pulse{0%,100%{box-shadow:0 0 0 rgba(255,90,0,0),0 18px 50px rgba(0,0,0,.2)}50%{box-shadow:0 0 0 12px rgba(255,90,0,.06),0 22px 56px rgba(255,90,0,.18)}}
@keyframes h360-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes h360-blink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes h360-bars{0%,100%{transform:scaleY(.9)}50%{transform:scaleY(1.08)}}
@keyframes h360-orbit{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes h360-path{0%,100%{opacity:.35;transform:scaleX(.92)}50%{opacity:1;transform:scaleX(1)}}
@keyframes h360-tilt-browser{0%,100%{transform:perspective(850px) rotateY(-5deg) rotateX(2deg) translateY(0)}50%{transform:perspective(850px) rotateY(-2deg) rotateX(0deg) translateY(-8px)}}
@keyframes h360-phone-float{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,-54%) rotate(1deg)}}
@keyframes h360-mail-float{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-9px)}}
@keyframes h360-sms-float{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(1deg) translateY(-8px)}}
@keyframes h360-chip-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes h360-scan{0%{opacity:.2;transform:translateX(-16px)}50%{opacity:1;transform:translateX(0)}100%{opacity:.2;transform:translateX(16px)}}
@keyframes h360-wave{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.04)}}

.strategy-glow{position:absolute;left:50%;top:50%;width:190px;height:190px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,90,0,.32),rgba(255,90,0,0) 72%);filter:blur(14px);opacity:.8}
.strategy-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 18px rgba(255,90,0,.45)}
.dot-a{left:17%;top:23%}.dot-b{right:19%;top:26%}.dot-c{left:22%;bottom:20%}.dot-d{right:20%;bottom:18%}
.web-code-card{position:absolute;right:11%;top:14%;width:106px;padding:14px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(9,12,16,.9);box-shadow:0 20px 46px rgba(0,0,0,.4)}
.web-code-card span{display:block;height:7px;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.18));margin:8px 0}.web-code-card span:nth-child(1){width:72%}.web-code-card span:nth-child(2){width:56%}.web-code-card span:nth-child(3){width:84%}
.web-ui-chip{position:absolute;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(8,10,12,.82);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 16px 40px rgba(0,0,0,.33)}
.web-ui-chip.chip-a{left:9%;bottom:16%}.web-ui-chip.chip-b{right:16%;bottom:14%}
.social-card{position:absolute;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:0 20px 50px rgba(0,0,0,.3)}
.social-card-a{left:12%;top:24%;width:94px;height:126px;transform:rotate(-10deg)}
.social-card-b{right:14%;bottom:19%;width:104px;height:138px;transform:rotate(11deg)}
.mail-orb{position:absolute;left:13%;bottom:14%;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffad76,var(--orange) 40%,#5f1f00 80%);filter:blur(.2px);box-shadow:0 0 50px rgba(255,90,0,.22)}
.mail-jet{position:absolute;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,90,0,.92),transparent);transform-origin:left center}.jet-1{left:29%;top:21%;width:120px;transform:rotate(-15deg)}.jet-2{right:17%;bottom:28%;width:100px;transform:rotate(18deg)}
.mail-spark{position:absolute;width:10px;height:10px;border-radius:50%;background:#ffb88d;box-shadow:0 0 18px rgba(255,90,0,.45)}.spark-1{left:38%;top:16%}.spark-2{right:20%;bottom:24%}
.seo-result{position:absolute;width:138px;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.11);background:rgba(7,10,13,.92);box-shadow:0 20px 44px rgba(0,0,0,.35)}
.result-1{left:11%;top:23%}.result-2{right:16%;bottom:19%}
.seo-rank{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,90,0,.16);color:var(--orange);font-size:12px;font-weight:1000;margin-bottom:10px}
.rline{display:block;height:6px;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.82),rgba(255,255,255,.18));margin-top:7px}.rline.short{width:58%}.rline.mid{width:71%}.rline.long{width:88%}

.art-distribution{background:radial-gradient(circle at 76% 24%,rgba(255,90,0,.18),transparent 24%),linear-gradient(145deg,#10141a,#080a0d)}
.dist-map{position:absolute;left:11%;right:10%;top:16%;bottom:14%;border-radius:26px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.02));overflow:hidden}
.dist-map:before{content:"";position:absolute;inset:-12%;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:42px 42px;transform:rotate(-11deg)}
.dist-target{position:absolute;border:1px solid rgba(255,90,0,.42);border-radius:50%;box-shadow:0 0 34px rgba(255,90,0,.12)}
.target-a{left:18%;top:24%;width:126px;height:126px}.target-b{right:14%;bottom:20%;width:154px;height:154px}
.target-a:before,.target-b:before{content:"";position:absolute;inset:28px;border:1px solid rgba(255,90,0,.38);border-radius:50%}
.dist-route{position:absolute;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(255,90,0,0),rgba(255,90,0,.95),rgba(255,90,0,0))}
.route-a{left:28%;top:43%;width:42%;transform:rotate(9deg)}.route-b{left:34%;top:54%;width:30%;transform:rotate(-18deg)}
.dist-flyer{position:absolute;width:92px;height:120px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,#f6f3ee,#cbc2b7);box-shadow:0 22px 46px rgba(0,0,0,.35)}
.dist-flyer:before{content:"";position:absolute;left:16px;top:20px;width:28px;height:6px;border-radius:9px;background:#d45e1a}.dist-flyer:after{content:"";position:absolute;left:16px;right:16px;bottom:20px;height:34px;border-radius:12px;background:linear-gradient(145deg,rgba(255,90,0,.55),rgba(255,90,0,.1))}
.flyer-a{left:48%;top:18%;transform:rotate(-12deg)}.flyer-b{right:11%;top:22%;transform:rotate(11deg)}
.dist-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--orange);box-shadow:0 0 18px rgba(255,90,0,.45)}.d1{left:23%;top:31%}.d2{left:52%;top:49%}.d3{right:22%;bottom:30%}

.feature-motif{position:absolute;right:24px;top:74px;width:104px;height:104px;pointer-events:none;opacity:.95}
.feature-motif i,.feature-motif span{position:absolute;display:block}
.motif-local i:nth-child(1){inset:18px;border:1px solid rgba(255,90,0,.36);border-radius:50%}.motif-local i:nth-child(2){inset:35px;border:1px solid rgba(255,90,0,.28);border-radius:50%}.motif-local span{left:50%;top:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%);background:var(--orange);box-shadow:0 0 22px rgba(255,90,0,.4)}
.motif-content i:nth-child(1){left:16px;top:24px;width:72px;height:50px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.03)}.motif-content i:nth-child(2){left:28px;top:38px;width:48px;height:5px;border-radius:9px;background:rgba(255,255,255,.8)}.motif-content i:nth-child(3){left:28px;top:51px;width:60px;height:5px;border-radius:9px;background:rgba(255,255,255,.18)}.motif-content span{right:12px;bottom:14px;width:28px;height:28px;border-radius:10px;background:linear-gradient(145deg,var(--orange),#8e3200)}
.motif-tech i{border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09)}.motif-tech i:nth-child(1){left:12px;top:16px;width:32px;height:32px}.motif-tech i:nth-child(2){left:52px;top:16px;width:40px;height:40px}.motif-tech i:nth-child(3){left:20px;top:58px;width:44px;height:28px}.motif-tech i:nth-child(4){left:70px;top:66px;width:18px;height:18px;background:var(--orange);border-color:transparent;box-shadow:0 0 20px rgba(255,90,0,.35)}
.motif-vision span{left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%)}.motif-vision span:nth-child(1){width:92px;height:92px;border:1px solid rgba(255,90,0,.25)}.motif-vision span:nth-child(2){width:56px;height:56px;border:1px solid rgba(255,255,255,.12)}.motif-vision span:nth-child(3){width:18px;height:18px;background:var(--orange);box-shadow:0 0 18px rgba(255,90,0,.4)}
.feature-card h3,.feature-card p,.feature-list,.feature-card-top{position:relative;z-index:2}

@media (prefers-reduced-motion:no-preference){
  .strategy-glow{animation:h360-wave 6s ease-in-out infinite}
  .strategy-core{animation:h360-float-y 5.4s ease-in-out infinite,h360-pulse 4.2s ease-in-out infinite}
  .ring-a{animation:h360-rotate-slow 20s linear infinite}
  .ring-b{animation:h360-rotate-rev 28s linear infinite}
  .strategy-node{animation:h360-float-y-sm 6s ease-in-out infinite}
  .node-2{animation-delay:-1.2s}.node-3{animation-delay:-2.1s}.node-4{animation-delay:-.6s}
  .strategy-dot{animation:h360-blink 3s ease-in-out infinite}
  .dot-b{animation-delay:.8s}.dot-c{animation-delay:1.4s}.dot-d{animation-delay:2s}
  .web-browser{animation:h360-tilt-browser 8s ease-in-out infinite}
  .web-mobile{animation:h360-float-y 5.6s ease-in-out infinite}
  .web-code-card{animation:h360-float-y-sm 6.5s ease-in-out infinite}
  .web-ui-chip{animation:h360-chip-float 4.8s ease-in-out infinite}
  .web-ui-chip.chip-b{animation-delay:-1.4s}
  .web-card-row i{animation:h360-wave 4.5s ease-in-out infinite}
  .web-card-row i:nth-child(2){animation-delay:-.7s}.web-card-row i:nth-child(3){animation-delay:-1.4s}
  .social-phone{animation:h360-phone-float 6.3s ease-in-out infinite}
  .social-card{animation:h360-float-y-sm 7s ease-in-out infinite}
  .social-card-b{animation-delay:-1.5s}
  .social-bubble{animation:h360-float-y-sm 4.8s ease-in-out infinite,h360-pulse 5s ease-in-out infinite}
  .social-bubble-2{animation-delay:-.8s}.social-bubble-3{animation-delay:-1.6s}.social-bubble-4{animation-delay:-2.2s}
  .social-post-grid i{animation:h360-wave 5.2s ease-in-out infinite}
  .social-post-grid i:nth-child(2){animation-delay:-.6s}.social-post-grid i:nth-child(3){animation-delay:-1.2s}.social-post-grid i:nth-child(4){animation-delay:-1.8s}.social-post-grid i:nth-child(5){animation-delay:-2.4s}.social-post-grid i:nth-child(6){animation-delay:-3s}
  .mail-orb{animation:h360-float-y-sm 5.8s ease-in-out infinite}
  .mail-window{animation:h360-mail-float 7.2s ease-in-out infinite}
  .sms-phone{animation:h360-sms-float 6s ease-in-out infinite}
  .sms-message{animation:h360-wave 4.6s ease-in-out infinite}
  .mail-jet{animation:h360-path 2.7s ease-in-out infinite}
  .jet-2{animation-delay:-1.3s}
  .mail-spark{animation:h360-blink 2.8s ease-in-out infinite}
  .seo-score{animation:h360-pulse 4.2s ease-in-out infinite}
  .seo-chart i{animation:h360-bars 2.4s ease-in-out infinite;transform-origin:bottom center}
  .seo-chart i:nth-child(2n){animation-delay:-.5s}.seo-chart i:nth-child(3n){animation-delay:-1s}
  .seo-chip{animation:h360-chip-float 5.4s ease-in-out infinite}
  .chip-2{animation-delay:-1.2s}
  .seo-result{animation:h360-float-y-sm 6.4s ease-in-out infinite}
  .result-2{animation-delay:-1.7s}
  .rline{background-size:200% 100%;animation:h360-shimmer 5.5s linear infinite}
  .dist-target{animation:h360-pulse 5.2s ease-in-out infinite}
  .dist-route{animation:h360-path 3.4s ease-in-out infinite}
  .dist-flyer{animation:h360-float-y-sm 6s ease-in-out infinite}
  .flyer-b{animation-delay:-1.8s}
  .dist-dot{animation:h360-blink 2.9s ease-in-out infinite}
  .agency-map-rings i{animation:h360-pulse 5.4s ease-in-out infinite}
  .agency-map-rings i:nth-child(2){animation-delay:-1.2s}.agency-map-rings i:nth-child(3){animation-delay:-2.4s}
  .agency-pin{animation:h360-float-y 5.7s ease-in-out infinite,h360-pulse 4.6s ease-in-out infinite}
  .contact-location-orbit{animation:h360-pulse 5.5s ease-in-out infinite}
  .orbit-two{animation-delay:-1.6s}
  .contact-location-pin{animation:h360-float-y-sm 5s ease-in-out infinite,h360-pulse 4.4s ease-in-out infinite}
  .blog-art .orb-main,.blog-art .orb-small{animation:h360-float-y-sm 7s ease-in-out infinite}
  .blog-art .line-a,.blog-art .line-b{animation:h360-scan 6s ease-in-out infinite}
  .feature-motif{animation:h360-float-y-sm 6.4s ease-in-out infinite}
  .feature-card:nth-child(2) .feature-motif{animation-delay:-1.1s}
  .feature-card:nth-child(3) .feature-motif{animation-delay:-2s}
  .feature-card:nth-child(4) .feature-motif{animation-delay:-2.8s}
}

.feature-card:nth-child(1){background:radial-gradient(circle at 84% 26%,rgba(255,90,0,.18),transparent 18%),linear-gradient(145deg,#181d25 0%,#10141b 55%,#0b0d12 100%)}
.feature-card:nth-child(2){background:radial-gradient(circle at 85% 28%,rgba(255,255,255,.08),transparent 16%),linear-gradient(145deg,#181d25 0%,#10141b 55%,#0b0d12 100%)}
.feature-card:nth-child(3){background:radial-gradient(circle at 84% 30%,rgba(100,140,255,.08),transparent 18%),linear-gradient(145deg,#181d25 0%,#10141b 55%,#0b0d12 100%)}
.feature-card:nth-child(4){background:radial-gradient(circle at 85% 28%,rgba(255,90,0,.14),transparent 18%),linear-gradient(145deg,#181d25 0%,#10141b 55%,#0b0d12 100%)}

@media (max-width:700px){
  .web-code-card{right:7%;top:13%;width:90px;padding:11px 10px}
  .web-ui-chip{padding:8px 11px;font-size:9px}.web-ui-chip.chip-a{left:8%;bottom:12%}.web-ui-chip.chip-b{right:11%;bottom:12%}
  .social-card-a{left:8%;top:26%;width:72px;height:96px}.social-card-b{right:9%;bottom:18%;width:78px;height:104px}
  .mail-orb{width:70px;height:70px;left:10%;bottom:12%}.jet-1{width:78px}.jet-2{width:64px}
  .seo-result{width:98px;padding:9px 10px}.result-1{left:6%;top:22%}.result-2{right:7%;bottom:18%}.seo-rank{width:20px;height:20px;font-size:11px}
  .feature-motif{right:12px;top:72px;width:76px;height:76px;opacity:.75}
  .motif-content i:nth-child(1){left:12px;top:17px;width:54px;height:38px}.motif-content i:nth-child(2){left:20px;top:28px;width:36px}.motif-content i:nth-child(3){left:20px;top:39px;width:46px}.motif-content span{width:22px;height:22px}
  .motif-tech i:nth-child(1){width:24px;height:24px}.motif-tech i:nth-child(2){left:40px;width:30px;height:30px}.motif-tech i:nth-child(3){top:48px;width:34px;height:20px}.motif-tech i:nth-child(4){left:56px;top:54px;width:14px;height:14px}
  .target-a{width:94px;height:94px}.target-b{width:118px;height:118px}.target-a:before,.target-b:before{inset:22px}.dist-flyer{width:70px;height:94px}
}


/* === Detached illustrations & live hero 07/08/2026 === */
.visual-stage-live{min-height:670px;overflow:visible}
.visual-stage-live .hero-banner{display:none!important}
.hero-glow{position:absolute;border-radius:50%;filter:blur(26px);opacity:.75;pointer-events:none}.hero-glow-a{width:240px;height:240px;left:12%;top:12%;background:radial-gradient(circle,rgba(255,90,0,.32),transparent 70%)}.hero-glow-b{width:180px;height:180px;right:3%;bottom:12%;background:radial-gradient(circle,rgba(47,240,160,.14),transparent 72%)}
.hero-spark{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 18px rgba(255,90,0,.45)}.spark-a{left:16%;top:18%}.spark-b{left:26%;top:30%}.spark-c{right:16%;top:26%}
.hero-particle-cloud{position:absolute;left:18%;top:17%;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,120,20,.8) 0 1px,transparent 2px),radial-gradient(circle at 52% 46%,rgba(255,120,20,.6) 0 1.5px,transparent 2.5px),radial-gradient(circle at 70% 22%,rgba(255,255,255,.9) 0 1px,transparent 2px),radial-gradient(circle at 62% 70%,rgba(255,120,20,.8) 0 1px,transparent 2px),radial-gradient(circle at 28% 68%,rgba(255,120,20,.5) 0 1.5px,transparent 2.5px);filter:drop-shadow(0 0 16px rgba(255,90,0,.2))}
.visual-stage-live .screen{right:7%;top:34px;width:72%}
.visual-stage-live .growth-card{left:4%;top:258px}
.visual-stage-live .insta-card{left:28%;top:360px}
.visual-stage-live .email-card{right:2%;top:418px}
.visual-stage-live .conversion-card{right:-1%;top:124px}
.visual-stage-live .bubble-card{right:-2%;top:532px}
.hero-float-card{will-change:transform}
.screen-logo{width:auto}

.service-cards .info-card{position:relative;overflow:hidden;padding-right:150px;min-height:250px}
.service-cards .info-card h3,.service-cards .info-card p,.service-cards .info-card ul,.service-cards .info-card .feature-list,.service-cards .info-card .feature-card-top{position:relative;z-index:2}
.card-illu{position:absolute;right:22px;top:22px;width:104px;height:104px;pointer-events:none;z-index:1;opacity:.98}
.card-illu *{position:absolute;display:block}
/* Generic detached card illustration atoms */
.illu-orbit .orb.big{inset:12px;border:1px solid rgba(255,90,0,.34);border-radius:50%}.illu-orbit .orb.small{left:34px;top:34px;width:36px;height:36px;border-radius:50%;background:linear-gradient(145deg,var(--orange),#a83c00);box-shadow:0 0 20px rgba(255,90,0,.35)}.illu-orbit .line{left:6px;right:6px;top:51px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,90,0,.8),transparent)}
.illu-editorial .sheet{left:18px;top:12px;width:62px;height:74px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}.illu-editorial .text{left:30px;height:6px;border-radius:9px;background:rgba(255,255,255,.78)}.illu-editorial .t1{top:33px;width:34px}.illu-editorial .t2{top:47px;width:46px;background:rgba(255,255,255,.18)}.illu-editorial .dot{right:12px;bottom:15px;width:30px;height:30px;border-radius:10px;background:linear-gradient(145deg,var(--orange),#7c2d00);box-shadow:0 12px 24px rgba(255,90,0,.18)}
.illu-network .node{width:18px;height:18px;border-radius:50%;background:var(--orange);box-shadow:0 0 18px rgba(255,90,0,.35)}.illu-network .n1{left:18px;top:18px}.illu-network .n2{right:16px;top:34px}.illu-network .n3{left:40px;bottom:18px}.illu-network .link{height:2px;background:linear-gradient(90deg,rgba(255,90,0,.72),rgba(255,255,255,.12));transform-origin:left center}.illu-network .l1{left:32px;top:28px;width:48px;transform:rotate(18deg)}.illu-network .l2{left:28px;top:38px;width:34px;transform:rotate(60deg)}
.illu-arrow .bar{bottom:12px;width:14px;border-radius:8px 8px 0 0;background:linear-gradient(var(--orange-2),#7e2d00)}.illu-arrow .b1{left:18px;height:28px}.illu-arrow .b2{left:40px;height:42px}.illu-arrow .b3{left:62px;height:58px}.illu-arrow .arrow{right:12px;top:22px;width:42px;height:42px;border-top:3px solid rgba(255,255,255,.85);border-right:3px solid rgba(255,255,255,.85);transform:rotate(45deg)}
.illu-monitor .monitor{left:14px;top:20px;width:78px;height:52px;border:2px solid rgba(255,255,255,.16);border-radius:14px;background:#0a0d11;box-shadow:0 14px 28px rgba(0,0,0,.2)}.illu-monitor .monitor:before{content:"";position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);width:20px;height:10px;background:#2b3138;border-radius:0 0 6px 6px}.illu-monitor .strip{left:26px;height:6px;border-radius:9px;background:linear-gradient(90deg,var(--orange),rgba(255,90,0,.1))}.illu-monitor .s1{top:36px;width:36px}.illu-monitor .s2{top:48px;width:50px}
.illu-responsive .desk{left:10px;top:24px;width:64px;height:44px;border:2px solid rgba(255,255,255,.14);border-radius:12px;background:#0c1015}.illu-responsive .phone{right:10px;top:12px;width:28px;height:58px;border:2px solid rgba(255,255,255,.18);border-radius:12px;background:linear-gradient(160deg,rgba(255,90,0,.5),rgba(255,90,0,.1))}
.illu-cta .pill{left:14px;top:18px;width:64px;height:24px;border-radius:999px;background:rgba(255,90,0,.15);border:1px solid rgba(255,90,0,.32)}.illu-cta .btn-mini{left:22px;top:52px;width:60px;height:28px;border-radius:10px;background:linear-gradient(145deg,var(--orange),#aa3c00);box-shadow:0 14px 24px rgba(255,90,0,.2)}.illu-cta .pointer{right:12px;bottom:12px;width:0;height:0;border-left:18px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;transform:rotate(18deg)}
.illu-wireframe .frame{left:14px;top:18px;width:76px;height:62px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03)}.illu-wireframe .cell{border-radius:8px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.02))}.illu-wireframe .c1{left:24px;top:28px;width:22px;height:22px}.illu-wireframe .c2{left:50px;top:28px;width:28px;height:10px}.illu-wireframe .c3{left:24px;top:56px;width:54px;height:10px}
.illu-calendar .calendar{left:18px;top:18px;width:62px;height:62px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}.illu-calendar .calendar:before{content:"";position:absolute;left:10px;right:10px;top:18px;height:2px;background:rgba(255,255,255,.14)}.illu-calendar .calendar:after{content:"";position:absolute;left:14px;top:30px;width:34px;height:18px;border-radius:8px;background:linear-gradient(145deg,var(--orange),#863002)}.illu-calendar .ring{border-radius:50%;border:1px solid rgba(255,90,0,.26)}.illu-calendar .r1{right:10px;bottom:10px;width:34px;height:34px}.illu-calendar .r2{right:1px;bottom:1px;width:52px;height:52px}
.illu-posts .post{width:24px;height:24px;border-radius:8px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,#1c2128,#0d1015)}.illu-posts .p1{left:18px;top:18px;background:linear-gradient(145deg,var(--orange),#6b2500)}.illu-posts .p2{left:48px;top:18px}.illu-posts .p3{left:18px;top:48px}.illu-posts .p4{left:48px;top:48px;background:linear-gradient(145deg,var(--orange),#8c3000)}
.illu-brand .star{left:34px;top:22px;width:34px;height:34px;background:linear-gradient(145deg,var(--orange),#983600);clip-path:polygon(50% 0%,61% 36%,98% 36%,68% 57%,79% 92%,50% 70%,21% 92%,32% 57%,2% 36%,39% 36%);box-shadow:0 0 24px rgba(255,90,0,.25)}.illu-brand .halo{left:18px;top:6px;width:66px;height:66px;border-radius:50%;border:1px solid rgba(255,255,255,.12)}
.illu-pin .pin{left:38px;top:16px;width:28px;height:42px;border-radius:50% 50% 50% 0;background:linear-gradient(145deg,var(--orange),#8a3000);transform:rotate(-45deg)}.illu-pin .pin:before{content:"";position:absolute;left:7px;top:7px;width:14px;height:14px;border-radius:50%;background:#fff}.illu-pin .pulse{left:24px;top:6px;width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,90,0,.28)}.illu-pin .pulse.p2{left:14px;top:-4px;width:76px;height:76px;opacity:.6}
.illu-envelope .env{left:18px;top:24px;width:62px;height:44px;border-radius:12px;background:linear-gradient(150deg,#f2efe9,#cfcbc4);box-shadow:0 12px 24px rgba(0,0,0,.18)}.illu-envelope .env:before{content:"";position:absolute;inset:0;clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);background:rgba(255,255,255,.4)}.illu-envelope .fly{right:10px;top:16px;width:26px;height:26px;border-top:3px solid var(--orange);border-right:3px solid var(--orange);transform:rotate(45deg)}
.illu-message .phone-mini{left:16px;top:16px;width:30px;height:60px;border:2px solid rgba(255,255,255,.18);border-radius:12px;background:#0c1015}.illu-message .bubble{left:52px;height:18px;border-radius:10px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.05))}.illu-message .b1{top:28px;width:38px}.illu-message .b2{top:52px;width:26px;background:linear-gradient(145deg,var(--orange),#7f2d00)}
.illu-segments .seg{border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}.illu-segments .s1{left:16px;top:18px;width:52px;height:18px}.illu-segments .s2{left:16px;top:44px;width:72px;height:18px}.illu-segments .s3{left:16px;top:70px;width:36px;height:18px;background:linear-gradient(145deg,var(--orange),#7f2d00)}
.illu-analytics .chart{left:18px;bottom:16px;width:68px;height:52px;border-left:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}.illu-analytics .tick{bottom:16px;width:12px;border-radius:6px 6px 0 0;background:linear-gradient(var(--orange-2),#783000)}.illu-analytics .t1{left:28px;height:22px}.illu-analytics .t2{left:46px;height:34px}.illu-analytics .t3{left:64px;height:44px}
.illu-zone .target{border-radius:50%;border:1px solid rgba(255,90,0,.32)}.illu-zone .t1{left:14px;top:14px;width:62px;height:62px}.illu-zone .t2{left:28px;top:28px;width:34px;height:34px}.illu-zone .core{left:43px;top:43px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 18px rgba(255,90,0,.35)}
.illu-route .map{left:16px;top:18px;width:68px;height:68px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}.illu-route .route{left:28px;top:48px;width:42px;height:2px;background:linear-gradient(90deg,rgba(255,90,0,.82),rgba(255,90,0,.18));transform:rotate(-18deg)}.illu-route .point{width:10px;height:10px;border-radius:50%;background:var(--orange)}.illu-route .a{left:24px;top:58px}.illu-route .b{right:20px;top:32px}
.illu-flyer .card{left:18px;top:14px;width:48px;height:66px;border-radius:14px;background:linear-gradient(155deg,#f3efe8,#cec4b7);box-shadow:0 12px 24px rgba(0,0,0,.18)}.illu-flyer .qr{right:12px;bottom:16px;width:28px;height:28px;border-radius:8px;background:linear-gradient(145deg,var(--orange),#803000);box-shadow:0 8px 18px rgba(255,90,0,.25)}
.illu-bullseye .ring{border-radius:50%;border:1px solid rgba(255,90,0,.32)}.illu-bullseye .r1{left:16px;top:16px;width:56px;height:56px}.illu-bullseye .r2{left:28px;top:28px;width:32px;height:32px}.illu-bullseye .center{left:41px;top:41px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 16px rgba(255,255,255,.2)}

/* page-specific card ambience */
.service-cards-marketing .info-card:nth-child(1){background:radial-gradient(circle at 88% 18%,rgba(255,90,0,.14),transparent 18%),linear-gradient(145deg,#181c24,#0d0f14)}
.service-cards-marketing .info-card:nth-child(2){background:radial-gradient(circle at 86% 20%,rgba(255,255,255,.06),transparent 16%),linear-gradient(145deg,#181c24,#0d0f14)}
.service-cards-marketing .info-card:nth-child(3){background:radial-gradient(circle at 87% 20%,rgba(82,139,255,.07),transparent 18%),linear-gradient(145deg,#181c24,#0d0f14)}
.service-cards-marketing .info-card:nth-child(4){background:radial-gradient(circle at 86% 20%,rgba(255,90,0,.12),transparent 17%),linear-gradient(145deg,#181c24,#0d0f14)}
.service-cards-creation .info-card:nth-child(2){background:radial-gradient(circle at 84% 18%,rgba(255,255,255,.06),transparent 16%),linear-gradient(145deg,#181c24,#0d0f14)}
.service-cards-social .info-card:nth-child(1){background:radial-gradient(circle at 87% 20%,rgba(255,90,0,.11),transparent 16%),linear-gradient(145deg,#181c24,#0d0f14)}
.service-cards-emailing .info-card:nth-child(1){background:radial-gradient(circle at 86% 18%,rgba(255,233,219,.08),transparent 16%),linear-gradient(145deg,#181c24,#0d0f14)}
.service-cards-distribution .info-card:nth-child(2){background:radial-gradient(circle at 86% 18%,rgba(255,90,0,.1),transparent 18%),linear-gradient(145deg,#181c24,#0d0f14)}

@media (prefers-reduced-motion:no-preference){
  .visual-stage-live .screen{animation:h360-tilt-browser 8.5s ease-in-out infinite}
  .visual-stage-live .conversion-card{animation:h360-pulse 4.6s ease-in-out infinite,h360-float-y-sm 6.2s ease-in-out infinite}
  .visual-stage-live .growth-card{animation:h360-float-y-sm 5.6s ease-in-out infinite}
  .visual-stage-live .insta-card{animation:h360-phone-float 6.8s ease-in-out infinite}
  .visual-stage-live .email-card{animation:h360-mail-float 7.2s ease-in-out infinite}
  .visual-stage-live .bubble-card{animation:h360-sms-float 6.5s ease-in-out infinite}
  .visual-stage-live .hero-glow{animation:h360-wave 7s ease-in-out infinite}
  .visual-stage-live .hero-spark{animation:h360-blink 2.6s ease-in-out infinite}
  .visual-stage-live .spark-b{animation-delay:.8s}.visual-stage-live .spark-c{animation-delay:1.5s}
  .visual-stage-live .hero-particle-cloud{animation:h360-float-y-sm 8s ease-in-out infinite}
  .visual-stage-live .bars i{animation:h360-bars 2.4s ease-in-out infinite;transform-origin:bottom center}
  .visual-stage-live .bars i:nth-child(2n){animation-delay:-.6s}.visual-stage-live .bars i:nth-child(3n){animation-delay:-1s}
  .visual-stage-live .curve{animation:h360-scan 5s ease-in-out infinite}
  .card-illu{animation:h360-float-y-sm 6.2s ease-in-out infinite}
  .service-cards .info-card:nth-child(2) .card-illu{animation-delay:-1s}
  .service-cards .info-card:nth-child(3) .card-illu{animation-delay:-2s}
  .service-cards .info-card:nth-child(4) .card-illu{animation-delay:-3s}
  .illu-orbit .orb.big,.illu-zone .target,.illu-bullseye .ring,.illu-pin .pulse,.illu-calendar .ring,.illu-brand .halo{animation:h360-pulse 4.8s ease-in-out infinite}
  .illu-network .node,.illu-zone .core,.illu-bullseye .center{animation:h360-blink 2.8s ease-in-out infinite}
  .illu-arrow .bar,.illu-analytics .tick,.visual-stage-live .insta-grid i{animation:h360-wave 4.4s ease-in-out infinite}
  .illu-arrow .b2,.illu-analytics .t2{animation-delay:-.6s}.illu-arrow .b3,.illu-analytics .t3{animation-delay:-1.2s}
  .illu-editorial .dot,.illu-flyer .qr,.illu-cta .btn-mini,.illu-brand .star{animation:h360-chip-float 4.8s ease-in-out infinite}
}

@media (max-width:1280px){.visual-stage-live{min-height:620px}.visual-stage-live .screen{width:74%}.visual-stage-live .bubble-card{top:510px}}
@media (max-width:1024px){
  .visual-stage-live{min-height:760px}
  .visual-stage-live .screen{right:10%;top:20px;width:78%}
  .visual-stage-live .conversion-card{top:46px;right:4%}
  .visual-stage-live .growth-card{left:4%;top:220px}
  .visual-stage-live .insta-card{left:6%;top:290px}
  .visual-stage-live .email-card{top:468px;right:4%}
  .visual-stage-live .bubble-card{top:640px;right:2%}
  .service-cards .info-card{padding-right:138px;min-height:230px}
}
@media (max-width:700px){
  .visual-stage-live{min-height:430px}
  .visual-stage-live .hero-glow-a{width:150px;height:150px;left:10%;top:6%}
  .visual-stage-live .hero-particle-cloud{left:12%;top:16%;width:100px;height:100px}
  .visual-stage-live .screen{width:92%;right:0;top:20px}
  .visual-stage-live .growth-card{left:0;top:210px;width:200px}
  .visual-stage-live .insta-card{left:128px;top:180px;width:160px;height:250px}
  .visual-stage-live .email-card{width:250px;height:180px;right:0;top:286px}
  .visual-stage-live .conversion-card{top:44px;right:0;width:145px;height:145px}
  .visual-stage-live .bubble-card{display:none}
  .service-cards .info-card{padding-right:108px;min-height:0}
  .card-illu{width:76px;height:76px;right:16px;top:16px;opacity:.92}
  .feature-card .card-illu{top:58px}
}
@media (max-width:480px){
  .service-cards .info-card{padding-right:24px;padding-top:100px}
  .card-illu{left:22px;right:auto;top:18px}
  .feature-card .card-illu{top:18px}
}


/* === Navigation/services/blog/contact cleanup 08/08/2026 === */
.small-services a.small-service{cursor:pointer;color:inherit;text-decoration:none;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.small-services a.small-service:hover{transform:translateY(-4px);border-color:rgba(255,90,0,.42);box-shadow:0 22px 48px rgba(0,0,0,.28)}
.small-services a.small-service:hover .arrow{transform:translateX(5px);color:var(--orange)}
.small-service .arrow{transition:transform .25s ease,color .25s ease}
.contact-map-wrap{position:absolute;left:46px;right:46px;bottom:42px;height:230px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#090c10;box-shadow:0 22px 55px rgba(0,0,0,.28)}
.contact-map{width:100%;height:100%;border:0;display:block;filter:saturate(.88) contrast(1.05)}
.map-placeholder{width:100%;height:100%;padding:26px 28px;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(circle at 85% 15%,rgba(255,90,0,.1),transparent 45%),linear-gradient(160deg,#14181f,#0b0d11)}
.map-placeholder .pill-tag{margin-bottom:10px}
.map-placeholder h3{font-size:19px;margin:0 0 8px;letter-spacing:-.02em}
.map-placeholder p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 16px;max-width:340px}
.map-placeholder .btn{align-self:flex-start;padding:12px 20px;min-height:0}
.form label{display:block;margin-bottom:8px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.blog-card p{font-size:16px;line-height:1.68;color:#c9ced6}
@media (max-width:1024px){.contact-map-wrap{position:relative;left:auto;right:auto;bottom:auto;margin-top:38px;height:280px}}
@media (max-width:700px){.contact-map-wrap{height:250px;margin-top:30px;border-radius:18px}.blog-card p{font-size:15px}.map-placeholder{padding:22px}.map-placeholder h3{font-size:17px}}


/* === Accueil : bannière principale exacte === */
.visual-stage-exact{position:relative;overflow:visible;min-height:0!important;transform:none!important;margin:0!important}
.visual-stage-exact .hero-banner-exact{
  display:block!important;
  width:112%;
  max-width:none;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:translateX(-5%) translateY(-54px)!important;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.46));
}
@media (min-width:1281px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(560px,1.78fr);gap:34px}
  .visual-stage-exact .hero-banner-exact{width:116%;transform:translateX(-7%) translateY(-60px)!important}
}
@media (min-width:1025px) and (max-width:1280px){
  .visual-stage-exact .hero-banner-exact{width:110%;transform:translateX(-5%) translateY(-42px)!important}
}
@media (max-width:1024px){
  .visual-stage-exact{width:100%}
  .visual-stage-exact .hero-banner-exact{width:100%;max-width:100%;transform:none!important;height:auto!important}
}
@media (max-width:700px){
  .visual-stage-exact{margin-top:4px!important}
  .visual-stage-exact .hero-banner-exact{width:108%;max-width:none;transform:translateX(-4%)!important}
}


/* === Ajustement bannière exacte : remontée + animation douce sans modifier l'image === */
@keyframes h360-exact-banner-float {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-10px,0) scale(1.008); }
}

.hero{
  padding-top:74px;
}
.visual-stage-exact{
  position:relative;
  overflow:visible;
  min-height:0!important;
  transform:none!important;
  margin:-34px 0 0!important;
  animation:h360-exact-banner-float 7.2s ease-in-out infinite;
  transform-origin:center top;
  will-change:transform;
}
.visual-stage-exact .hero-banner-exact{
  display:block!important;
  width:120%;
  max-width:none;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:translateX(-8%) translateY(-112px)!important;
  filter:drop-shadow(0 36px 72px rgba(0,0,0,.48));
}
@media (min-width:1440px){
  .hero{padding-top:68px;}
  .visual-stage-exact{margin:-44px 0 0!important;}
  .visual-stage-exact .hero-banner-exact{width:124%;transform:translateX(-9%) translateY(-124px)!important;}
}
@media (min-width:1281px) and (max-width:1439px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(590px,1.88fr);gap:28px}
  .visual-stage-exact{margin:-38px 0 0!important;}
  .visual-stage-exact .hero-banner-exact{width:121%;transform:translateX(-8%) translateY(-118px)!important;}
}
@media (min-width:1025px) and (max-width:1280px){
  .hero{padding-top:72px;}
  .hero-grid{gap:30px;}
  .visual-stage-exact{margin:-24px 0 0!important;}
  .visual-stage-exact .hero-banner-exact{width:116%;transform:translateX(-6%) translateY(-88px)!important;}
}
@media (max-width:1024px){
  .hero{padding-top:64px;}
  .visual-stage-exact{width:100%;margin:-8px 0 0!important;animation:h360-exact-banner-float 8s ease-in-out infinite;}
  .visual-stage-exact .hero-banner-exact{width:108%;max-width:none;transform:translateX(-4%) translateY(-22px)!important;height:auto!important;}
}
@media (max-width:700px){
  .hero{padding-top:52px;}
  .visual-stage-exact{margin:-2px 0 0!important;}
  .visual-stage-exact .hero-banner-exact{width:112%;max-width:none;transform:translateX(-5%) translateY(-12px)!important;}
}
@media (prefers-reduced-motion:reduce){
  .visual-stage-exact{animation:none;}
}

/* === Correctif bannière 08/08/2026 : mouvement visible + bords fondus, image inchangée === */
@keyframes h360-banner-live {
  0%,100% {
    transform:translate3d(var(--banner-x),var(--banner-y),0) scale(1) rotate(0deg);
    filter:drop-shadow(0 34px 68px rgba(0,0,0,.46)) brightness(1);
  }
  25% {
    transform:translate3d(var(--banner-x),calc(var(--banner-y) - 8px),0) scale(1.008) rotate(-.18deg);
  }
  50% {
    transform:translate3d(var(--banner-x),calc(var(--banner-y) - 18px),0) scale(1.018) rotate(.22deg);
    filter:drop-shadow(0 44px 82px rgba(0,0,0,.54)) brightness(1.035);
  }
  75% {
    transform:translate3d(var(--banner-x),calc(var(--banner-y) - 7px),0) scale(1.009) rotate(-.12deg);
  }
}
@keyframes h360-banner-aura {
  0%,100%{opacity:.38;transform:translate3d(-1%,3%,0) scale(.96)}
  50%{opacity:.72;transform:translate3d(2%,-2%,0) scale(1.08)}
}

.visual-stage-exact{
  transform:none!important;
  animation:none!important;
  isolation:isolate;
}
.visual-stage-exact::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:4%;right:2%;top:-5%;bottom:4%;
  border-radius:50%;
  background:radial-gradient(ellipse at 60% 42%,rgba(255,90,0,.22),rgba(255,90,0,.08) 34%,transparent 69%);
  filter:blur(28px);
  pointer-events:none;
  animation:h360-banner-aura 6.2s ease-in-out infinite;
}
.visual-stage-exact .hero-banner-exact{
  --banner-x:-8%;
  --banner-y:-112px;
  transform:translate3d(var(--banner-x),var(--banner-y),0);
  transform-origin:54% 48%;
  will-change:transform,filter;
  animation:h360-banner-live 5.6s cubic-bezier(.45,.05,.55,.95) infinite!important;
  /* Le PNG reste intact : ce masque CSS fait seulement disparaître visuellement le rectangle noir aux bords. */
  -webkit-mask-image:radial-gradient(ellipse 72% 68% at 53% 51%,#000 0%,#000 72%,rgba(0,0,0,.96) 80%,rgba(0,0,0,.62) 89%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 68% at 53% 51%,#000 0%,#000 72%,rgba(0,0,0,.96) 80%,rgba(0,0,0,.62) 89%,transparent 100%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

@media (min-width:1440px){
  .visual-stage-exact .hero-banner-exact{--banner-x:-9%;--banner-y:-124px;}
}
@media (min-width:1281px) and (max-width:1439px){
  .visual-stage-exact .hero-banner-exact{--banner-x:-8%;--banner-y:-118px;}
}
@media (min-width:1025px) and (max-width:1280px){
  .visual-stage-exact .hero-banner-exact{--banner-x:-6%;--banner-y:-88px;}
}
@media (max-width:1024px){
  .visual-stage-exact .hero-banner-exact{--banner-x:-4%;--banner-y:-22px;animation-duration:6.4s!important;}
}
@media (max-width:700px){
  .visual-stage-exact .hero-banner-exact{--banner-x:-5%;--banner-y:-12px;animation-duration:6.8s!important;}
}
@media (prefers-reduced-motion:reduce){
  .visual-stage-exact::before{animation:none}
  .visual-stage-exact .hero-banner-exact{animation:none!important;transform:translate3d(var(--banner-x),var(--banner-y),0)!important}
}


/* === Méthode 360° — workflow animé dans tout le bloc === */
@keyframes workflow-roam{
  0%,4%,100%{left:5%;top:7%}
  23%,29%{left:57%;top:7%}
  48%,54%{left:57%;top:57%}
  73%,79%{left:5%;top:57%}
}
@keyframes workflow-orbit-spin{to{transform:rotate(360deg)}}
@keyframes workflow-glow-pulse{0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.92)}50%{opacity:.58;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes workflow-num-breathe{0%,100%{box-shadow:0 0 26px rgba(255,90,0,.13),inset 0 0 0 0 rgba(255,90,0,.05)}50%{box-shadow:0 0 42px rgba(255,90,0,.28),inset 0 0 28px rgba(255,90,0,.06)}}

@media (min-width:1025px){
  .page-home .workflow-steps{
    position:relative;
    display:block;
    min-height:560px;
    padding:34px;
    overflow:hidden;
    isolation:isolate;
    background:
      radial-gradient(circle at 50% 50%,rgba(255,90,0,.10),transparent 24%),
      linear-gradient(145deg,#14181f,#0e1014);
  }
  .page-home .workflow-steps:before{
    content:"";
    position:absolute;
    inset:70px 78px;
    border:1px solid rgba(255,90,0,.22);
    border-radius:90px;
    background:
      linear-gradient(90deg,transparent 49.8%,rgba(255,90,0,.08) 50%,transparent 50.2%),
      linear-gradient(0deg,transparent 49.8%,rgba(255,90,0,.08) 50%,transparent 50.2%);
    box-shadow:inset 0 0 70px rgba(255,90,0,.025),0 0 55px rgba(255,90,0,.035);
    z-index:0;
  }
  .page-home .workflow-steps:after{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:138px;height:138px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    background:
      radial-gradient(circle,rgba(255,90,0,.16) 0 12%,transparent 13% 34%,rgba(255,90,0,.14) 35% 36%,transparent 37% 55%,rgba(255,90,0,.10) 56% 57%,transparent 58%);
    filter:drop-shadow(0 0 24px rgba(255,90,0,.18));
    animation:workflow-glow-pulse 4.8s ease-in-out infinite;
    z-index:0;
  }
  .page-home .workflow-steps .step{
    position:absolute;
    width:38%;
    min-height:190px;
    margin:0;
    padding:20px 22px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;
    background:linear-gradient(145deg,rgba(24,29,37,.88),rgba(10,13,18,.78));
    box-shadow:0 18px 46px rgba(0,0,0,.28);
    backdrop-filter:blur(10px);
    display:grid;
    grid-template-columns:88px 1fr;
    grid-template-rows:auto auto;
    column-gap:18px;
    align-content:center;
    text-align:left;
    z-index:2;
    animation:workflow-roam 24s cubic-bezier(.45,.05,.55,.95) infinite;
    will-change:left,top;
  }
  .page-home .workflow-steps .step:nth-child(2){animation-delay:-6s}
  .page-home .workflow-steps .step:nth-child(3){animation-delay:-12s}
  .page-home .workflow-steps .step:nth-child(4){animation-delay:-18s}
  .page-home .workflow-steps .step .num{
    grid-row:1/3;
    align-self:center;
    width:82px;height:82px;
    margin:0;
    border-width:3px;
    font-size:22px;
    background:radial-gradient(circle at 50% 50%,rgba(255,90,0,.08),transparent 62%);
    animation:workflow-num-breathe 3.8s ease-in-out infinite;
  }
  .page-home .workflow-steps .step h3{
    align-self:end;
    margin:0 0 7px;
    font-size:25px;
    line-height:1.05;
  }
  .page-home .workflow-steps .step p{
    align-self:start;
    margin:0;
    font-size:15px;
    line-height:1.5;
  }
  .page-home .workflow-steps:hover .step{animation-play-state:paused}
  .page-home .workflow-steps:hover:after{animation-play-state:paused}
}

@media (max-width:1024px){
  .page-home .workflow-steps{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    min-height:0;
    overflow:hidden;
  }
  .page-home .workflow-steps .step{
    position:relative;
    left:auto!important;top:auto!important;
    width:auto;
    min-height:220px;
    padding:22px 18px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:22px;
    background:linear-gradient(145deg,rgba(24,29,37,.82),rgba(10,13,18,.72));
    animation:none!important;
  }
  .page-home .workflow-steps .step .num{width:82px;height:82px;margin-bottom:18px}
}
@media (max-width:600px){
  .page-home .workflow-steps{grid-template-columns:1fr;padding:18px}
  .page-home .workflow-steps .step{min-height:0;padding:20px}
}
@media (prefers-reduced-motion:reduce){
  .page-home .workflow-steps .step,.page-home .workflow-steps:after,.page-home .workflow-steps .step .num{animation:none!important}
}

/* === Ajustement cartes workflow : plus d'espace pour les titres et descriptions === */
@media (min-width:1025px){
  @keyframes workflow-roam-roomy{
    0%,4%,100%{left:4%;top:6%}
    23%,29%{left:52%;top:6%}
    48%,54%{left:52%;top:58%}
    73%,79%{left:4%;top:58%}
  }
  .page-home .workflow-steps{
    min-height:610px;
    padding:34px;
  }
  .page-home .workflow-steps .step{
    width:44%;
    min-height:205px;
    padding:24px 26px;
    grid-template-columns:76px minmax(0,1fr);
    column-gap:20px;
    animation-name:workflow-roam-roomy;
  }
  .page-home .workflow-steps .step .num{
    width:74px;
    height:74px;
    font-size:21px;
  }
  .page-home .workflow-steps .step h3{
    font-size:clamp(22px,1.7vw,28px);
    line-height:1.08;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
  .page-home .workflow-steps .step p{
    font-size:16px;
    line-height:1.55;
    max-width:28ch;
  }
}

@media (min-width:1025px) and (max-width:1240px){
  .page-home .workflow-steps .step{
    width:45%;
    padding:22px 20px;
    grid-template-columns:68px minmax(0,1fr);
    column-gap:15px;
  }
  .page-home .workflow-steps .step .num{width:66px;height:66px;font-size:19px}
  .page-home .workflow-steps .step h3{font-size:21px}
  .page-home .workflow-steps .step p{font-size:14.5px;line-height:1.5}
}


/* === À propos, Réalisations et hiérarchie des titres 10/08/2026 === */
/* Le très grand titre est réservé à l'accueil. */
body:not(.page-home) .page-hero h1{font-size:clamp(36px,4.2vw,58px);line-height:1.02;letter-spacing:-.045em;max-width:980px}
body:not(.page-home) .service-page-hero h1{font-size:clamp(36px,4vw,56px);line-height:1.02;letter-spacing:-.045em}
.about-intro-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(520px,.95fr);gap:42px;align-items:start}
.about-lead{padding:18px 12px 18px 0}.about-lead .section-title{font-size:clamp(38px,4vw,60px);max-width:800px}.about-lead p{font-size:18px;line-height:1.78;color:var(--muted);max-width:780px}
.about-principles{display:grid;grid-template-columns:1fr 1fr;gap:18px}.about-principles .info-card{min-height:210px;position:relative;overflow:hidden;background:radial-gradient(circle at 90% 12%,rgba(255,90,0,.14),transparent 25%),linear-gradient(145deg,#181c24,#0d0f14)}
.about-index{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:15px;background:rgba(255,90,0,.12);border:1px solid rgba(255,90,0,.3);color:var(--orange);font-weight:1000;margin-bottom:22px}.about-principles h3{font-size:26px;margin-bottom:10px}.about-principles p{font-size:16px;line-height:1.6;margin:0;color:var(--muted)}
.about-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.about-work-card{position:relative;min-height:390px;border-radius:26px;border:1px solid var(--line);overflow:hidden;background:#0b0e12}.about-work-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s ease}.about-work-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,6,8,.96) 5%,rgba(5,6,8,.35) 62%,rgba(5,6,8,.12) 100%)}.about-work-card>div{position:absolute;z-index:2;left:28px;right:28px;bottom:26px}.about-work-card span,.portfolio-copy span{color:var(--orange);font-size:12px;font-weight:1000;text-transform:uppercase;letter-spacing:.12em}.about-work-card h3{font-size:30px;margin:9px 0}.about-work-card p{margin:0;color:#d6dae1;font-size:17px;line-height:1.55}.about-work-card:hover img{transform:scale(1.055)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.portfolio-card{display:block;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#181c24,#0d0f14);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.portfolio-card:hover{transform:translateY(-6px);border-color:rgba(255,90,0,.42);box-shadow:0 24px 60px rgba(0,0,0,.34)}.portfolio-card img{width:100%;height:290px;object-fit:cover;background:#080a0d}.portfolio-copy{padding:26px}.portfolio-copy h3{font-size:26px;margin:10px 0 12px}.portfolio-copy p{color:var(--muted);font-size:16px;line-height:1.6;margin:0}
@media (max-width:1180px){.about-intro-grid{grid-template-columns:1fr}.about-principles{max-width:900px}.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){body:not(.page-home) .page-hero h1,body:not(.page-home) .service-page-hero h1{font-size:clamp(34px,10vw,46px)}.about-principles,.about-work-grid,.portfolio-grid{grid-template-columns:1fr}.about-principles .info-card{min-height:0}.about-work-card{min-height:330px}.portfolio-card img{height:230px}.showcase-head .btn{margin-top:18px}}


/* === 10/08/2026 — bannières internes avec images existantes + cartes illustrées === */
/* Accueil : empêcher le visuel de masquer le texte sur les largeurs intermédiaires. */
.hero-grid > :first-child{position:relative;z-index:6;min-width:0}
.hero-grid > .visual-stage-exact{position:relative;z-index:2;min-width:0}
@media (min-width:1181px) and (max-width:1450px){
  .hero-grid{grid-template-columns:minmax(430px,.92fr) minmax(560px,1.35fr)!important;gap:30px!important}
  .hero h1{font-size:clamp(54px,5.1vw,72px)!important}
  .hero p{max-width:560px!important}
  .visual-stage-exact .hero-banner-exact{width:112%!important;--banner-x:-1%!important;--banner-y:-82px!important}
}
@media (max-width:1180px){
  .hero-grid{grid-template-columns:1fr!important}
  .hero-grid > :first-child{max-width:820px}
  .visual-stage-exact{margin-top:16px!important}
  .visual-stage-exact .hero-banner-exact{width:min(108%,980px)!important;--banner-x:-2%!important;--banner-y:-18px!important}
}

/* Toutes les pages internes ont une bannière visuelle dédiée. */
body:not(.page-home) .page-hero{overflow:hidden}
.page-hero-media-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(390px,.96fr);gap:54px;align-items:center}
.simple-page-hero-grid{min-height:330px}
.page-hero-copy{min-width:0;position:relative;z-index:2}
.page-banner-media{position:relative;margin:0;height:330px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#080a0d;box-shadow:0 28px 72px rgba(0,0,0,.38),0 0 52px rgba(255,90,0,.07)}
.service-banner-media{height:390px}
.page-banner-media:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,10,.22),transparent 34%),linear-gradient(0deg,rgba(5,7,10,.2),transparent 42%);pointer-events:none}
.page-banner-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s ease;filter:saturate(.96) contrast(1.03)}
.page-banner-media:hover img{transform:scale(1.035);filter:saturate(1.04) contrast(1.05)}
body:not(.page-home) .service-page-hero .service-hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);gap:54px}

/* Les blocs de services utilisent désormais de vraies images liées à leur titre. */
.service-cards .info-card.with-real-image,
.feature-grid .feature-card.with-real-image{position:relative;overflow:hidden;padding:30px 238px 30px 34px!important;min-height:286px;display:flex;flex-direction:column;justify-content:center}
.service-card-media{position:absolute;right:22px;top:22px;bottom:22px;width:188px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.11);background:#090b0f;box-shadow:0 18px 40px rgba(0,0,0,.3);z-index:1}
.service-card-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(5,7,10,.22));pointer-events:none}
.service-card-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .55s ease}
.info-card.with-real-image:hover .service-card-media img{transform:scale(1.065);filter:brightness(1.06)}
.service-cards .info-card.with-real-image > h3,
.service-cards .info-card.with-real-image > p,
.service-cards .info-card.with-real-image > ul,
.feature-grid .feature-card.with-real-image > h3,
.feature-grid .feature-card.with-real-image > p,
.feature-grid .feature-card.with-real-image > ul,
.feature-grid .feature-card.with-real-image > .feature-card-top{position:relative;z-index:2}

/* Différencier visuellement les crops selon les intentions des cartes. */
.card-media-1 img{object-position:42% center}.card-media-2 img{object-position:58% center}.card-media-3 img{object-position:50% 42%}.card-media-4 img{object-position:62% center}

@media (max-width:1180px){
  .page-hero-media-grid,body:not(.page-home) .service-page-hero .service-hero-grid{grid-template-columns:1fr;gap:30px}
  .page-banner-media,.service-banner-media{height:360px;max-width:900px;width:100%}
}
@media (max-width:760px){
  .page-banner-media,.service-banner-media{height:230px;border-radius:20px}
  .service-cards .info-card.with-real-image,.feature-grid .feature-card.with-real-image{padding:178px 24px 26px!important;min-height:0}
  .service-card-media{left:20px;right:20px;top:20px;bottom:auto;width:auto;height:132px;border-radius:16px}
}
@media (max-width:480px){
  .page-banner-media,.service-banner-media{height:205px}
  .service-card-media{height:118px}
  .service-cards .info-card.with-real-image,.feature-grid .feature-card.with-real-image{padding-top:164px!important}
}


/* === Navigation et bannières immersives 10/08/2026 === */
/* Les très grands visuels des pages internes occupent désormais presque toute la bannière. */
.page-hero:not(.hero){
  position:relative;
  overflow:hidden;
  min-height:470px;
  padding:0;
  background:#080a0d;
}
.page-hero:not(.hero) > .container{
  position:relative;
  min-height:470px;
  display:flex;
  align-items:center;
  z-index:1;
}
.page-hero .page-hero-media-grid{
  position:relative;
  width:100%;
  min-height:470px;
  display:flex;
  align-items:center;
  padding:72px 0;
}
.page-hero .page-hero-copy,
.page-hero .service-hero-copy{
  position:relative;
  z-index:4;
  width:min(54%,760px);
  max-width:760px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.page-hero .page-banner-media{
  position:absolute;
  z-index:1;
  top:0;
  bottom:0;
  left:31%;
  right:calc((100vw - 100%)/-2);
  margin:0;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:#090b0f;
  box-shadow:none;
}
.page-hero .page-banner-media:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,#080a0d 0%,rgba(8,10,13,.94) 8%,rgba(8,10,13,.76) 24%,rgba(8,10,13,.34) 47%,rgba(8,10,13,.06) 70%,transparent 100%),
    linear-gradient(0deg,rgba(8,10,13,.18),rgba(8,10,13,.02));
  pointer-events:none;
}
.page-hero .page-banner-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:0;
  transform:scale(1.02);
  filter:saturate(.98) contrast(1.03) brightness(.83);
}
.page-hero.service-page-hero .service-hero-grid{grid-template-columns:1fr!important;gap:0!important}
.page-hero h1{
  font-size:clamp(38px,4.1vw,64px)!important;
  line-height:1.02!important;
  max-width:800px!important;
}
/* Le libellé orange au-dessus des titres n'est plus affiché dans les bannières internes. */
.page-hero > .container > .eyebrow,
.page-hero .page-hero-copy > .eyebrow,
.page-hero .service-hero-copy > .eyebrow{display:none!important}

@media (max-width:1024px){
  .page-hero:not(.hero),.page-hero:not(.hero) > .container,.page-hero .page-hero-media-grid{min-height:430px}
  .page-hero .page-hero-copy,.page-hero .service-hero-copy{width:64%;max-width:650px}
  .page-hero .page-banner-media{left:25%;right:calc((100vw - 100%)/-2)}
  .page-hero .page-banner-media:after{background:linear-gradient(90deg,#080a0d 0%,rgba(8,10,13,.92) 14%,rgba(8,10,13,.62) 44%,rgba(8,10,13,.12) 74%,transparent 100%)}
}
@media (max-width:700px){
  .page-hero:not(.hero){min-height:520px}
  .page-hero:not(.hero) > .container,.page-hero .page-hero-media-grid{min-height:520px;padding:48px 0;align-items:flex-end}
  .page-hero .page-hero-copy,.page-hero .service-hero-copy{width:100%;max-width:none;padding-top:225px}
  .page-hero .page-banner-media{left:0;right:calc((100vw - 100%)/-2);top:0;bottom:0}
  .page-hero .page-banner-media:after{background:linear-gradient(0deg,#080a0d 0%,rgba(8,10,13,.94) 28%,rgba(8,10,13,.58) 55%,rgba(8,10,13,.08) 78%,transparent 100%)}
  .page-hero .page-banner-media img{object-position:center 35%;filter:brightness(.76) saturate(.96)}
  .page-hero h1{font-size:clamp(34px,10vw,48px)!important}
}

/* === Ajustements 10/08/2026 : bannière accueil + bannières internes + cartes illustrées === */
.page-home .hero{
  padding-bottom:18px;
}
.page-home .hero-grid{
  align-items:stretch;
}
.page-home .hero h1{
  font-size:clamp(40px,4.6vw,70px);
  max-width:11ch;
}
.page-home .hero p{
  max-width:560px;
}
.page-home .visual-stage.visual-stage-exact{
  position:relative;
  min-height:640px;
  height:100%;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  overflow:visible;
}
.page-home .hero-banner.hero-banner-exact{
  width:100%;
  height:100%;
  min-height:640px;
  object-fit:cover;
  object-position:center;
  border-radius:28px;
  box-shadow:0 35px 80px rgba(0,0,0,.45);
  transform:none !important;
}
@media (min-width:1281px){
  .page-home .visual-stage.visual-stage-exact{min-height:690px}
  .page-home .hero-banner.hero-banner-exact{min-height:690px}
}
@media (max-width:1024px){
  .page-home .hero h1{max-width:none}
  .page-home .visual-stage.visual-stage-exact,
  .page-home .hero-banner.hero-banner-exact{min-height:0;height:auto}
}

/* Bannières internes : titre plus court, image plus présente et sur toute la hauteur */
body:not(.page-home) .page-hero:not(.hero){
  min-height:440px;
}
body:not(.page-home) .page-hero:not(.hero) > .container,
body:not(.page-home) .page-hero .page-hero-media-grid{
  min-height:440px;
}
body:not(.page-home) .page-hero .page-hero-copy,
body:not(.page-home) .page-hero .service-hero-copy{
  width:min(44%,560px);
  max-width:560px;
}
body:not(.page-home) .page-hero .page-banner-media{
  left:18%;
  right:calc((100vw - 100%)/-2);
  top:0;
  bottom:0;
}
body:not(.page-home) .page-hero h1{
  font-size:clamp(30px,3vw,46px)!important;
  max-width:16ch!important;
}
body:not(.page-home) .page-hero .section-intro{
  max-width:36ch;
  font-size:clamp(16px,1.15vw,20px);
}
@media (max-width:1024px){
  body:not(.page-home) .page-hero .page-hero-copy,
  body:not(.page-home) .page-hero .service-hero-copy{width:58%;max-width:520px}
  body:not(.page-home) .page-hero .page-banner-media{left:20%}
}
@media (max-width:700px){
  body:not(.page-home) .page-hero:not(.hero),
  body:not(.page-home) .page-hero:not(.hero) > .container,
  body:not(.page-home) .page-hero .page-hero-media-grid{min-height:500px}
  body:not(.page-home) .page-hero .page-hero-copy,
  body:not(.page-home) .page-hero .service-hero-copy{width:100%;max-width:none;padding-top:210px}
  body:not(.page-home) .page-hero h1{max-width:13ch!important;font-size:clamp(31px,9vw,44px)!important}
}

/* Cartes illustrées dans l'accueil et la page À propos */
.page-home .workflow-steps .step,
.about-principles .info-card{
  position:relative;
  overflow:hidden;
}
.page-home .workflow-steps .step{
  padding-right:152px;
}
.step-media,
.about-card-media{
  position:absolute;
  right:18px;
  top:18px;
  width:104px;
  height:104px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#090b0f;
  box-shadow:0 16px 38px rgba(0,0,0,.28);
}
.step-media::after,
.about-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.1));
  pointer-events:none;
}
.step-media img,
.about-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.about-principles .info-card{
  padding-right:152px;
  min-height:240px;
}
.about-principles .about-index{
  position:relative;
  z-index:2;
}
.about-principles .info-card h3,
.about-principles .info-card p,
.page-home .workflow-steps .step h3,
.page-home .workflow-steps .step p{
  position:relative;
  z-index:2;
}
@media (max-width:1024px){
  .page-home .workflow-steps .step{padding-right:138px}
  .about-principles .info-card{padding-right:138px}
}
@media (max-width:700px){
  .step-media,
  .about-card-media{width:92px;height:92px;right:16px;top:16px}
  .page-home .workflow-steps .step,
  .about-principles .info-card{padding-right:24px;padding-top:126px}
}


/* === Ajustements visuels contextuels 10/08/2026 === */
/* Bannière principale : l'image remplit tout le cadre sans écraser le contenu des deux côtés. */
.page-home .visual-stage-exact .hero-banner-exact{
  object-fit:cover!important;
  object-position:54% center!important;
}

/* Pages internes : l'image remplit réellement toute la hauteur et toute la largeur de la bannière. */
body:not(.page-home) .page-hero:not(.hero){min-height:430px!important;}
body:not(.page-home) .page-hero:not(.hero) > .container,
body:not(.page-home) .page-hero .page-hero-media-grid{min-height:430px!important;}
body:not(.page-home) .page-hero .page-banner-media{
  top:0!important;
  bottom:0!important;
  left:calc((100vw - 100%)/-2)!important;
  right:calc((100vw - 100%)/-2)!important;
  height:auto!important;
  min-height:100%!important;
}
body:not(.page-home) .page-hero .page-banner-media img{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
  filter:brightness(.64) saturate(.98) contrast(1.04)!important;
}
body:not(.page-home) .page-hero .page-banner-media:after{
  background:
    linear-gradient(90deg,rgba(7,9,12,.96) 0%,rgba(7,9,12,.84) 23%,rgba(7,9,12,.50) 48%,rgba(7,9,12,.14) 72%,rgba(7,9,12,.04) 100%),
    linear-gradient(0deg,rgba(7,9,12,.28),rgba(7,9,12,.04))!important;
}
body:not(.page-home) .page-hero .page-hero-copy,
body:not(.page-home) .page-hero .service-hero-copy{
  width:100%!important;
  max-width:1450px!important;
}
body:not(.page-home) .page-hero h1{
  font-size:clamp(30px,2.7vw,44px)!important;
  line-height:1.08!important;
  max-width:none!important;
  white-space:nowrap;
  letter-spacing:-.035em!important;
  margin-bottom:16px!important;
}
body:not(.page-home) .page-hero .section-intro{
  max-width:900px!important;
  font-size:clamp(16px,1.15vw,19px)!important;
  line-height:1.55!important;
  margin-bottom:0;
}
body:not(.page-home) .service-page-hero .hero-buttons{margin-top:22px!important;margin-bottom:0!important;}

/* À propos : chaque étape a sa propre image contextuelle. */
.about-principles .about-principle-card{
  min-height:270px!important;
  padding:0!important;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(145px,.92fr);
  align-items:stretch;
}
.about-principle-copy{
  padding:28px 22px 28px 30px;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-principle-media{
  position:relative;
  margin:0;
  min-height:100%;
  overflow:hidden;
  border-left:1px solid rgba(255,255,255,.09);
  background:#090b0f;
}
.about-principle-media:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(13,16,21,.48),transparent 45%),linear-gradient(0deg,rgba(5,7,10,.18),transparent 50%);
  pointer-events:none;
}
.about-principle-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .55s ease,filter .55s ease;
}
.about-principle-card:hover .about-principle-media img{transform:scale(1.06);filter:brightness(1.06)}
.about-principle-card .about-index{margin-bottom:14px!important;}
.about-principle-card h3{font-size:28px!important;}

@media (max-width:1100px){
  body:not(.page-home) .page-hero h1{font-size:34px!important;}
  body:not(.page-home) .page-hero .section-intro{max-width:760px!important;}
}
@media (max-width:900px){
  body:not(.page-home) .page-hero h1{white-space:normal!important;font-size:clamp(32px,6vw,42px)!important;max-width:760px!important;}
}
@media (max-width:700px){
  body:not(.page-home) .page-hero:not(.hero),
  body:not(.page-home) .page-hero:not(.hero) > .container,
  body:not(.page-home) .page-hero .page-hero-media-grid{min-height:500px!important;}
  body:not(.page-home) .page-hero .page-hero-copy,
  body:not(.page-home) .page-hero .service-hero-copy{padding-top:225px!important;}
  body:not(.page-home) .page-hero .page-banner-media:after{
    background:linear-gradient(0deg,rgba(7,9,12,.98) 0%,rgba(7,9,12,.90) 30%,rgba(7,9,12,.54) 58%,rgba(7,9,12,.12) 82%,transparent 100%)!important;
  }
  body:not(.page-home) .page-hero .page-banner-media img{filter:brightness(.70) saturate(.96)!important;object-position:center 30%!important;}
  .about-principles .about-principle-card{grid-template-columns:1fr;min-height:0!important;}
  .about-principle-media{height:165px;min-height:165px;border-left:0;border-bottom:1px solid rgba(255,255,255,.09);grid-row:1;}
  .about-principle-copy{padding:24px 22px 26px;grid-row:2;}
}


/* === Intégration renforcée des images dans les cartes À propos === */
.about-principles .info-card{
  padding:30px 46% 30px 30px!important;
  min-height:270px!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.about-principles .about-card-media{
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:42%!important;
  height:auto!important;
  border-radius:0 24px 24px 0!important;
  border:0!important;
  border-left:1px solid rgba(255,255,255,.10)!important;
  box-shadow:none!important;
}
.about-principles .about-card-media::after{
  background:linear-gradient(90deg,rgba(13,16,21,.52),rgba(13,16,21,.08) 52%,transparent 100%),linear-gradient(0deg,rgba(5,7,10,.16),transparent 60%)!important;
}
.about-principles .about-card-media img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .55s ease,filter .55s ease;
}
.about-principles .info-card:hover .about-card-media img{transform:scale(1.055);filter:brightness(1.06)}
.about-principles .about-index{margin-bottom:14px!important}
.about-principles .info-card h3{font-size:28px!important;margin-bottom:10px!important}
.about-principles .info-card p{font-size:16px!important;line-height:1.6!important}
@media (max-width:700px){
  .about-principles .info-card{padding:178px 22px 26px!important;min-height:0!important}
  .about-principles .about-card-media{left:0!important;right:0!important;top:0!important;bottom:auto!important;width:100%!important;height:150px!important;border-radius:24px 24px 0 0!important;border-left:0!important;border-bottom:1px solid rgba(255,255,255,.10)!important}
  .about-principles .about-card-media::after{background:linear-gradient(0deg,rgba(13,16,21,.45),transparent 55%)!important}
}


/* === Correction 10/08/2026 : méthode restaurée + bannières sans texte superposé === */
/* Accueil : retour au workflow lisible sans images dans les cartes. */
.page-home .workflow-steps .step-media{display:none!important}
@media (min-width:1025px){
  .page-home .workflow-steps .step{
    padding:24px 26px!important;
    grid-template-columns:76px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:20px!important;
    min-height:205px!important;
  }
  .page-home .workflow-steps .step h3{margin:0 0 7px!important;position:relative!important;z-index:2!important}
  .page-home .workflow-steps .step p{margin:0!important;position:relative!important;z-index:2!important;max-width:28ch!important}
}
@media (min-width:1025px) and (max-width:1240px){
  .page-home .workflow-steps .step{
    padding:22px 20px!important;
    grid-template-columns:68px minmax(0,1fr)!important;
    column-gap:15px!important;
  }
}
@media (max-width:1024px){
  .page-home .workflow-steps .step{padding:22px 18px!important;padding-top:22px!important;padding-right:18px!important}
}
@media (max-width:600px){
  .page-home .workflow-steps .step{padding:20px!important}
}

/* Pages internes : le texte et l'image sont deux zones distinctes, jamais superposées. */
body:not(.page-home) .page-hero:not(.hero){
  min-height:0!important;
  padding:64px 0!important;
  overflow:visible!important;
  background:radial-gradient(circle at 92% 12%,rgba(255,90,0,.12),transparent 28%),linear-gradient(110deg,#050607,#0b0e12)!important;
}
body:not(.page-home) .page-hero:not(.hero) > .container,
body:not(.page-home) .page-hero .page-hero-media-grid{
  min-height:0!important;
  padding:0!important;
}
body:not(.page-home) .page-hero .page-hero-media-grid,
body:not(.page-home) .service-page-hero .service-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr)!important;
  gap:46px!important;
  align-items:center!important;
}
body:not(.page-home) .page-hero .page-hero-copy,
body:not(.page-home) .page-hero .service-hero-copy{
  position:relative!important;
  inset:auto!important;
  width:auto!important;
  max-width:none!important;
  padding:0!important;
  z-index:2!important;
}
body:not(.page-home) .page-hero .page-banner-media,
body:not(.page-home) .page-hero .service-banner-media{
  position:relative!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:100%!important;
  height:390px!important;
  min-height:390px!important;
  margin:0!important;
  border-radius:28px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 28px 72px rgba(0,0,0,.38),0 0 52px rgba(255,90,0,.07)!important;
  background:#080a0d!important;
}
body:not(.page-home) .page-hero .page-banner-media:after{
  background:linear-gradient(0deg,rgba(5,7,10,.08),transparent 34%)!important;
}
body:not(.page-home) .page-hero .page-banner-media img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  filter:saturate(.98) contrast(1.03)!important;
  transform:none!important;
}
body:not(.page-home) .page-hero h1{
  font-size:clamp(30px,2.6vw,43px)!important;
  line-height:1.08!important;
  max-width:18ch!important;
  white-space:normal!important;
  margin:0 0 16px!important;
}
body:not(.page-home) .page-hero .section-intro{
  max-width:620px!important;
  font-size:clamp(16px,1.1vw,19px)!important;
  line-height:1.58!important;
  margin-bottom:0!important;
}
body:not(.page-home) .service-page-hero .hero-buttons{margin:22px 0 0!important}

@media (max-width:1100px){
  body:not(.page-home) .page-hero .page-hero-media-grid,
  body:not(.page-home) .service-page-hero .service-hero-grid{
    grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr)!important;
    gap:30px!important;
  }
  body:not(.page-home) .page-hero .page-banner-media,
  body:not(.page-home) .page-hero .service-banner-media{height:330px!important;min-height:330px!important}
}
@media (max-width:900px){
  body:not(.page-home) .page-hero:not(.hero){padding:48px 0!important}
  body:not(.page-home) .page-hero .page-hero-media-grid,
  body:not(.page-home) .service-page-hero .service-hero-grid{
    grid-template-columns:1fr!important;
    gap:26px!important;
  }
  body:not(.page-home) .page-hero .page-banner-media,
  body:not(.page-home) .page-hero .service-banner-media{
    height:300px!important;
    min-height:300px!important;
    border-radius:22px!important;
  }
  body:not(.page-home) .page-hero h1{max-width:none!important;font-size:clamp(31px,6vw,42px)!important}
}
@media (max-width:560px){
  body:not(.page-home) .page-hero:not(.hero){padding:38px 0 42px!important}
  body:not(.page-home) .page-hero .page-banner-media,
  body:not(.page-home) .page-hero .service-banner-media{height:220px!important;min-height:220px!important;border-radius:18px!important}
  body:not(.page-home) .page-hero h1{font-size:clamp(29px,9vw,38px)!important}
}


/* === Corrections finales visibilité / animations / images contextuelles 10-08-2026 === */
/* Accueil : aucune extension du texte sur l'image. */
@media (min-width:1025px){
  .page-home .hero-grid{grid-template-columns:minmax(0,.72fr) minmax(640px,1.28fr)!important;gap:72px!important;align-items:center!important}
  .page-home .hero-copy{max-width:560px!important;min-width:0!important;position:relative!important;z-index:4!important}
  .page-home .hero h1{font-size:clamp(46px,4.3vw,66px)!important;max-width:9.6ch!important;line-height:.96!important}
  .page-home .hero p{max-width:520px!important}
  .page-home .visual-stage.visual-stage-exact{min-width:0!important;overflow:hidden!important;z-index:1!important}
  .page-home .hero-banner.hero-banner-exact{width:100%!important;max-width:100%!important;object-fit:cover!important;object-position:54% center!important}
}
@media (min-width:1025px) and (max-width:1240px){
  .page-home .hero-grid{grid-template-columns:minmax(0,.78fr) minmax(560px,1.22fr)!important;gap:42px!important}
  .page-home .hero h1{font-size:clamp(43px,4.8vw,60px)!important}
}

/* Méthode : 4 cartes visibles en permanence, animation plus courte et organisée. */
@keyframes workflow-card-float-a{0%,100%{transform:translate3d(0,0,0)}35%{transform:translate3d(9px,-8px,0)}70%{transform:translate3d(-6px,6px,0)}}
@keyframes workflow-card-float-b{0%,100%{transform:translate3d(0,0,0)}35%{transform:translate3d(-8px,7px,0)}70%{transform:translate3d(7px,-6px,0)}}
@media (min-width:1025px){
  .page-home .workflow-steps{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px!important;min-height:0!important;padding:30px!important;overflow:hidden!important}
  .page-home .workflow-steps:before{inset:48px!important;border-radius:70px!important}
  .page-home .workflow-steps .step{position:relative!important;left:auto!important;top:auto!important;width:auto!important;min-height:210px!important;margin:0!important;animation:workflow-card-float-a 4.2s ease-in-out infinite!important;will-change:transform!important}
  .page-home .workflow-steps .step:nth-child(2),.page-home .workflow-steps .step:nth-child(3){animation-name:workflow-card-float-b!important;animation-duration:4.7s!important}
  .page-home .workflow-steps .step:nth-child(2){animation-delay:-.7s!important}.page-home .workflow-steps .step:nth-child(3){animation-delay:-1.3s!important}.page-home .workflow-steps .step:nth-child(4){animation-delay:-2s!important}
  .page-home .workflow-steps:hover .step{animation-play-state:running!important}
}

/* Sous-menu À propos */
.about-nav-dropdown .nav-dropdown-menu{min-width:190px!important}
@media (max-width:1024px){.about-nav-dropdown .nav-dropdown-menu{padding-left:14px!important}}

/* Bannières internes : la hauteur suit la largeur réelle (ratio proche de l'image) pour que le
   texte ne soit jamais coupé quel que soit l'écran, + léger zoom pour grignoter la marge morte. */
body:not(.page-home) .page-hero .page-banner-media:has(img[src*="-photo.png"]),
body:not(.page-home) .page-hero .page-banner-media:has(img[src*="hero-blog-editorial"]),
body:not(.page-home) .page-hero .page-banner-media:has(img[src*="hero-realisations-context"]){aspect-ratio:16/9!important;height:auto!important;min-height:0!important}
body:not(.page-home) .page-hero .page-banner-media img{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;
  transform:scale(1.08)!important;
}
/* Cartes services : visuel en bandeau plein cadre, recadrage adapté à chaque image. */
.service-cards .info-card.with-real-image,.feature-grid .feature-card.with-real-image{
  padding:34px!important;
  min-height:0!important;
  display:block!important;
  overflow:hidden!important;
}
.service-card-media{
  position:relative!important;
  inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:calc(100% + 68px)!important;
  margin:-34px -34px 22px -34px!important;
  height:230px!important;
  background:#07090c!important;
}
.service-card-media img{width:100%!important;height:100%!important;object-fit:cover!important}
.info-card.with-real-image:hover .service-card-media img{transform:scale(1.05)!important}
@media (max-width:760px){
  .service-cards .info-card.with-real-image,.feature-grid .feature-card.with-real-image{padding:26px!important}
  .service-card-media{height:190px!important;margin:-26px -26px 20px -26px!important;width:calc(100% + 52px)!important}
}

/* À propos : image au-dessus, texte dessous, sans étouffement. */
.about-intro-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;gap:54px!important;align-items:start!important}
.about-principles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px!important}
.about-principles .info-card{padding:0!important;min-height:0!important;display:grid!important;grid-template-rows:190px auto!important;overflow:hidden!important}
.about-principles .about-card-media{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;height:190px!important;border-radius:24px 24px 0 0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.10)!important;background:#07090c!important}
.about-principles .about-card-media:after{display:none!important}
.about-principles .about-card-media img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:none!important}
.about-principles .about-card-copy{padding:26px 28px 30px!important}
.about-principles .about-index{margin-bottom:16px!important}
.about-principles .info-card h3{font-size:27px!important;margin-bottom:9px!important}
.about-principles .info-card p{font-size:16px!important;line-height:1.6!important;margin:0!important}
@media (max-width:1180px){.about-intro-grid{grid-template-columns:1fr!important}.about-principles{max-width:none!important}}
@media (max-width:700px){.about-principles{grid-template-columns:1fr!important}.about-principles .info-card{grid-template-rows:175px auto!important}.about-principles .about-card-media{height:175px!important}}

/* Blog : un seul visuel, plus grand, par carte — plus de recadrage illisible ni d'étiquette en double. */
.blog-card{padding:0 0 28px!important;overflow:hidden!important}
.blog-card > :not(.blog-thumb){margin-left:26px!important;margin-right:26px!important}
.blog-thumb-context{height:260px!important;position:relative!important;overflow:hidden!important;background:#06080b!important;border-bottom:1px solid rgba(255,255,255,.12)!important;display:block!important;padding:0!important}
.blog-thumb-context img.blog-context-main{position:relative!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;background:#080a0d!important;border-radius:0!important;filter:none!important}
/* La vignette secondaire coupait des mots en deux et doublonnait le texte déjà visible sous l'image. */
.blog-context-accent,.blog-context-label{display:none!important}
.blog-visible-index{position:absolute!important;right:16px!important;top:14px!important;z-index:4!important;min-width:50px!important;height:50px!important;border-radius:16px!important;display:grid!important;place-items:center!important;background:rgba(5,7,10,.92)!important;border:1px solid rgba(255,90,0,.55)!important;color:#fff!important;font-size:19px!important;font-weight:1000!important;box-shadow:0 10px 28px rgba(0,0,0,.35)!important}
.blog-card:hover .blog-thumb-context img.blog-context-main{transform:scale(1.04)!important}
@media (max-width:700px){.blog-thumb-context{height:210px!important}}

/* Réalisations : cartes clients — 2 par ligne, cartes plus grandes, hauteur du visuel calée sur
   le ratio réel des captures (≈1900/825) pour que l'image soit montrée en entier, sans recadrage. */
.clients-grid{grid-template-columns:repeat(2,1fr)!important}
.clients-grid .client-card{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.clients-grid .client-card p{flex:1}
.client-card-media{width:calc(100% + 64px);margin:-32px -32px 20px -32px;aspect-ratio:1900/825;height:auto;overflow:hidden;background:#07090c}
.client-card-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .5s ease}
.client-card:hover .client-card-media img{transform:scale(1.03)}
.client-link{display:inline-flex;align-items:center;gap:4px;margin-top:16px;color:var(--orange);font-weight:1000;font-size:14px;transition:gap .25s ease}
.client-link:hover{gap:9px}
@media (max-width:900px){.clients-grid{grid-template-columns:1fr!important}}
@media (max-width:700px){.client-card-media{margin:-22px -22px 18px -22px;width:calc(100% + 44px)}}
/* Cartes "à venir" : état vide visuellement distinct des vraies réalisations. */
.placeholder-card{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.18)}
.placeholder-card .pill-tag{background:rgba(255,255,255,.06);color:var(--muted)}
.placeholder-card h3{color:var(--muted)}
.placeholder-card:hover{transform:none;border-color:rgba(255,255,255,.28);box-shadow:none}

/* Types de sites : ligne "Idéal pour" sous chaque description, 7 cartes → dernière ligne incomplète assumée. */
.showcase-head .section-intro{margin-top:10px}
.sector-fit{display:block;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);font-size:14px;line-height:1.5;color:var(--orange);font-weight:700}
/* Étiquette + titre TOUJOURS sur une même ligne (jamais de retour à la ligne), et "Idéal pour"
   aligné en bas quelle que soit la longueur du texte. */
.sector-card{display:flex;flex-direction:column;padding:26px!important}
.sector-head{display:flex;align-items:baseline;flex-wrap:nowrap;gap:8px;margin-bottom:8px;min-width:0}
.sector-head .tag{white-space:nowrap;flex:none;font-size:11px!important;letter-spacing:.05em!important}
.sector-card h3{margin:0;font-size:21px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sector-card p{flex:1;margin:0}

/* Bannières internes : image plein cadre en fond, texte posé dessus, dégradé allégé (moins de noir). */
body:not(.page-home) .page-hero:not(.hero){
  min-height:0!important;padding:0!important;overflow:hidden!important;
  background:none!important;
}
body:not(.page-home) .page-hero:not(.hero) > .container,
body:not(.page-home) .page-hero .page-hero-media-grid,
body:not(.page-home) .service-page-hero .service-hero-grid{
  position:relative!important;
  display:flex!important;align-items:center!important;
  grid-template-columns:none!important;gap:0!important;
  min-height:440px!important;padding:0!important;margin:0!important;
}
body:not(.page-home) .page-hero .page-hero-copy,
body:not(.page-home) .page-hero .service-hero-copy{
  position:relative!important;inset:auto!important;z-index:4!important;
  width:min(54%,720px)!important;max-width:720px!important;min-width:0!important;
  padding:56px 0!important;flex:none!important;
  text-shadow:0 2px 18px rgba(0,0,0,.4)!important;
}
body:not(.page-home) .page-hero .page-banner-media,
body:not(.page-home) .page-hero .service-banner-media{
  position:absolute!important;inset:0!important;
  left:30%!important;right:calc((100vw - 100%)/-2)!important;top:0!important;bottom:0!important;
  width:auto!important;height:auto!important;min-height:0!important;
  margin:0!important;border:0!important;border-radius:0!important;
  overflow:hidden!important;box-shadow:none!important;background:#090b0f!important;z-index:1!important;
}
body:not(.page-home) .page-hero .page-banner-media:after,
body:not(.page-home) .page-hero .service-banner-media:after{
  content:""!important;position:absolute!important;inset:0!important;display:block!important;
  background:linear-gradient(90deg,rgba(5,7,10,.78) 0%,rgba(5,7,10,.6) 20%,rgba(5,7,10,.34) 40%,rgba(5,7,10,.12) 60%,transparent 82%)!important;
  pointer-events:none!important;
}
body:not(.page-home) .page-hero .page-banner-media img,
body:not(.page-home) .page-hero .service-banner-media img{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center!important;
  filter:saturate(1) contrast(1.02) brightness(.92)!important;
  transform:none!important;
}
/* Séparation nette entre la bannière et la section suivante. */
body:not(.page-home) .page-hero:not(.hero) + section.section{padding-top:110px!important}
body:not(.page-home) .page-hero h1{
  font-size:clamp(38px,4.1vw,64px)!important;line-height:1.02!important;max-width:800px!important;
}
@media (max-width:1024px){
  body:not(.page-home) .page-hero:not(.hero) > .container,
  body:not(.page-home) .page-hero .page-hero-media-grid,
  body:not(.page-home) .service-page-hero .service-hero-grid{min-height:430px!important}
  body:not(.page-home) .page-hero .page-hero-copy,
  body:not(.page-home) .page-hero .service-hero-copy{width:64%!important;max-width:560px!important}
  body:not(.page-home) .page-hero .page-banner-media,
  body:not(.page-home) .page-hero .service-banner-media{left:22%!important}
  body:not(.page-home) .page-hero .page-banner-media:after,
  body:not(.page-home) .page-hero .service-banner-media:after{background:linear-gradient(90deg,rgba(5,7,10,.82) 0%,rgba(5,7,10,.6) 24%,rgba(5,7,10,.3) 46%,rgba(5,7,10,.08) 68%,transparent 90%)!important}
}
@media (max-width:700px){
  body:not(.page-home) .page-hero:not(.hero) > .container,
  body:not(.page-home) .page-hero .page-hero-media-grid,
  body:not(.page-home) .service-page-hero .service-hero-grid{min-height:480px!important;padding:0!important;align-items:flex-end!important}
  body:not(.page-home) .page-hero .page-hero-copy,
  body:not(.page-home) .page-hero .service-hero-copy{width:100%!important;max-width:none!important;padding:0 0 40px!important}
  body:not(.page-home) .page-hero .page-banner-media,
  body:not(.page-home) .page-hero .service-banner-media{left:0!important;right:calc((100vw - 100%)/-2)!important}
  body:not(.page-home) .page-hero .page-banner-media:after,
  body:not(.page-home) .page-hero .service-banner-media:after{background:linear-gradient(0deg,rgba(5,7,10,.88) 0%,rgba(5,7,10,.62) 35%,rgba(5,7,10,.22) 62%,transparent 85%)!important}
  body:not(.page-home) .page-hero .page-banner-media img,
  body:not(.page-home) .page-hero .service-banner-media img{object-position:center 35%!important}
  body:not(.page-home) .page-hero h1{font-size:clamp(34px,10vw,48px)!important}
}

/* Menu : "Nos services" est un <button>, les autres sont des <a> — un bouton n'hérite pas
   automatiquement de la police de la page dans certains navigateurs sans ce reset explicite. */
.navlinks a,
.navlinks .nav-dropdown-toggle,
.navlinks button.nav-dropdown-toggle{
  font-family:inherit!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:normal!important;
  letter-spacing:normal!important;
}

/* Corrections 11/08/2026 : demandes client images 1 à 5, sans nouvel asset généré. */
.page-home .visual-stage.visual-stage-exact{
  border-radius:28px;
}
.page-home .visual-stage.visual-stage-exact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:28px;
  background:
    linear-gradient(90deg,rgba(5,7,10,.42) 0%,rgba(5,7,10,.2) 18%,transparent 44%),
    linear-gradient(0deg,rgba(5,7,10,.22),transparent 42%);
  pointer-events:none;
}
.page-home .hero-banner.hero-banner-exact{
  object-position:62% center!important;
  filter:saturate(1.03) contrast(1.04) brightness(.95);
}
.linked-info-card{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.linked-info-card:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:5px;
}
.cta-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  flex-wrap:wrap;
}
.sector-grid{
  align-items:stretch;
}
.sector-card{
  min-height:330px!important;
}
.sector-card p{
  flex:1 1 auto!important;
}
.sector-fit{
  min-height:4.5em;
  display:flex;
  align-items:flex-start;
}
@media (max-width:700px){
  .cta-actions{
    justify-content:stretch;
  }
  .cta-actions .btn{
    width:100%;
  }
  .sector-card{
    min-height:0!important;
  }
  .sector-fit{
    min-height:0;
  }
}

/* Corrections finales 11/08/2026 : accueil plein cadre, alignements et cartes cliquables. */
.page-home .hero{
  min-height:760px!important;
  padding:116px 0 64px!important;
  background:
    linear-gradient(90deg,rgba(5,7,10,.98) 0%,rgba(5,7,10,.9) 28%,rgba(5,7,10,.54) 52%,rgba(5,7,10,.2) 72%,rgba(5,7,10,.12) 100%),
    linear-gradient(0deg,rgba(5,7,10,.72) 0%,rgba(5,7,10,.08) 45%,rgba(5,7,10,.38) 100%),
    url("../img/hero-home-main.webp") center center/cover no-repeat!important;
}
.page-home .hero:before{opacity:.12!important}
.page-home .hero:after{display:none!important}
.page-home .hero-grid{
  display:block!important;
  min-height:560px!important;
}
.page-home .hero-copy{
  width:min(600px,48vw)!important;
  max-width:600px!important;
  padding-top:52px!important;
}
.page-home .hero h1{
  max-width:10ch!important;
  font-size:clamp(54px,5.4vw,86px)!important;
  line-height:.94!important;
  letter-spacing:0!important;
}
.page-home .hero p{
  max-width:570px!important;
  text-align:justify;
  text-align-last:left;
}
.page-home .visual-stage.visual-stage-exact{
  display:none!important;
}
@media (max-width:1024px){
  .page-home .hero{
    min-height:auto!important;
    padding:88px 0 54px!important;
    background-position:62% center!important;
  }
  .page-home .hero-grid{min-height:0!important}
  .page-home .hero-copy{
    width:min(720px,100%)!important;
    max-width:720px!important;
    padding-top:0!important;
  }
}
@media (max-width:700px){
  .page-home .hero{background-position:67% center!important}
  .page-home .hero h1{
    font-size:clamp(46px,14vw,72px)!important;
    max-width:9.5ch!important;
  }
}
.sector-card{
  display:grid!important;
  grid-template-rows:auto minmax(9.8em,1fr) minmax(4.9em,auto)!important;
  min-height:340px!important;
}
.sector-head{
  align-items:baseline!important;
  min-height:34px!important;
}
.sector-head .tag{
  line-height:1!important;
}
.sector-card p{
  margin:0!important;
  min-height:0!important;
  text-align:justify;
  text-align-last:left;
  hyphens:auto;
}
.sector-fit{
  align-self:end;
  min-height:4.9em!important;
  margin-top:14px!important;
}
@media (max-width:1024px){
  .sector-card{
    grid-template-rows:auto minmax(8.4em,1fr) minmax(4.9em,auto)!important;
  }
}
@media (max-width:700px){
  .sector-card{
    display:flex!important;
    min-height:0!important;
  }
  .sector-card p{
    text-align:left;
  }
  .sector-head{
    min-height:0!important;
  }
  .sector-fit{
    min-height:0!important;
  }
}
.client-card-media-link{
  display:block;
  color:inherit;
  text-decoration:none;
}
.client-card-media-link:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
}
.social-clients-grid{
  align-items:stretch;
}
.social-client-card .client-card-media{
  aspect-ratio:1900/825;
}
.social-platform-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.social-platform-links .client-link{
  margin-top:0;
}
.brand-social-card .client-card-media{
  background:radial-gradient(circle at 50% 45%,rgba(255,90,0,.22),rgba(7,9,12,.96) 64%);
}
.brand-social-card .client-card-media img{
  object-fit:contain;
  padding:52px;
}
@media (max-width:700px){
  .brand-social-card .client-card-media img{
    padding:34px;
  }
}

/* Ajustements client : hero accueil moins zoomé et alignement strict des cartes "Types de sites". */
.page-home .hero{
  background-color:#05070a!important;
  background-image:
    linear-gradient(90deg,rgba(5,7,10,.99) 0%,rgba(5,7,10,.98) 38%,rgba(5,7,10,.72) 54%,rgba(5,7,10,.28) 78%,rgba(5,7,10,.12) 100%),
    linear-gradient(0deg,rgba(5,7,10,.72) 0%,rgba(5,7,10,.1) 45%,rgba(5,7,10,.38) 100%),
    url("../img/hero-home-main.webp")!important;
  background-position:center center,center center,right 0 center!important;
  background-repeat:no-repeat!important;
  background-size:auto,auto,min(1500px,82vw) auto!important;
}
.page-home .hero-copy{
  width:min(840px,58vw)!important;
  max-width:840px!important;
}
.page-home .hero h1{
  max-width:840px!important;
  font-size:clamp(52px,4.8vw,80px)!important;
}
.page-home .hero h1 span{
  white-space:nowrap!important;
}
#types-de-sites .sector-card{
  display:grid!important;
  grid-template-rows:42px 158px 98px!important;
  row-gap:0!important;
  min-height:350px!important;
  padding:26px!important;
}
#types-de-sites .sector-head{
  min-height:42px!important;
  margin:0!important;
}
#types-de-sites .sector-card p{
  align-self:start!important;
  flex:none!important;
  padding-top:10px!important;
}
#types-de-sites .sector-fit{
  align-self:stretch!important;
  display:block!important;
  height:98px!important;
  min-height:98px!important;
  margin:0!important;
  padding-top:18px!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
  line-height:1.42!important;
}
.social-client-card .client-card-media img[src*="reseau_"]{
  object-fit:cover;
  object-position:center top;
}
@media (max-width:1024px){
  .page-home .hero{
    background-position:center center,center center,right -80px center!important;
    background-size:auto,auto,1180px auto!important;
  }
  .page-home .hero-copy{
    width:min(780px,100%)!important;
    max-width:780px!important;
  }
  #types-de-sites .sector-card{
    grid-template-rows:42px minmax(132px,1fr) 98px!important;
    min-height:326px!important;
  }
}
@media (max-width:700px){
  .page-home .hero{
    background-position:center center,center center,62% center!important;
    background-size:auto,auto,1040px auto!important;
  }
  .page-home .hero-copy{
    width:100%!important;
    max-width:none!important;
  }
  .page-home .hero h1{
    max-width:100%!important;
    font-size:44px!important;
  }
  .page-home .hero h1 span{
    white-space:normal!important;
  }
  #types-de-sites .sector-card{
    display:grid!important;
    grid-template-rows:auto auto auto!important;
    min-height:0!important;
  }
  #types-de-sites .sector-card p{
    padding-top:8px!important;
  }
  #types-de-sites .sector-fit{
    height:auto!important;
    min-height:0!important;
    margin-top:18px!important;
  }
}

/* Ajustements 11/08/2026 : cadrage final accueil, visuels uniques et comptes gérés sans liens. */
.page-home .hero{
  background-position:center center,center center,right -28px top -46px!important;
  background-size:auto,auto,min(1380px,76vw) auto!important;
}
.page-home .hero h1{
  max-width:880px!important;
}
.page-home .hero h1 span{
  white-space:nowrap!important;
}
.page-realisations .page-banner-media img[src*="hero-realisations-context"]{
  object-position:center center!important;
  filter:saturate(1.03) contrast(1.04) brightness(.92)!important;
}
.blog-thumb-generated img{
  object-position:center center!important;
}
.social-account-card{
  min-height:0!important;
}
.social-account-card .social-logo-media{
  width:calc(100% + 64px);
  min-height:220px;
  margin:-32px -32px 22px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(255,90,0,.2),transparent 42%),
    linear-gradient(145deg,#12161d,#07090c);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.social-logo-frame{
  width:136px;
  height:136px;
  display:block;
  padding:4px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--orange),rgba(255,255,255,.22),rgba(0,205,185,.55));
  box-shadow:0 18px 45px rgba(0,0,0,.35),0 0 45px rgba(255,90,0,.18);
}
.social-logo-frame img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
  background:#fff;
}
.network-badges{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:16px;
}
.network-badge{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,90,0,.34);
  background:rgba(255,90,0,.1);
  color:var(--orange);
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.social-account-card .client-link,
.social-account-card .social-platform-links{
  display:none!important;
}
@media (max-width:1024px){
  .page-home .hero{
    background-position:center center,center center,right -170px top -18px!important;
    background-size:auto,auto,1120px auto!important;
  }
}
@media (max-width:700px){
  .page-home .hero{
    background-position:center center,center center,58% top -20px!important;
    background-size:auto,auto,960px auto!important;
  }
  .page-home .hero h1 span{
    white-space:normal!important;
  }
  .social-account-card .social-logo-media{
    width:calc(100% + 44px);
    min-height:190px;
    margin:-22px -22px 20px;
  }
  .social-logo-frame{
    width:122px;
    height:122px;
  }
}

/* Ajustements formulaires, bannières internes et logos sociaux. */
.form .required-star{
  color:#ff3f3f;
  font-weight:1000;
}
.form .consent-field{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin-top:2px;
}
.form .consent-field input[type="checkbox"]{
  width:20px!important;
  height:20px!important;
  min-height:20px!important;
  padding:0!important;
  margin:2px 0 0!important;
  border-radius:5px!important;
  accent-color:var(--orange);
}
.form .consent-field label{
  margin:0!important;
  color:#d5d9e2!important;
  font-size:15px!important;
  font-weight:650!important;
  line-height:1.55!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.form .consent-field a{
  color:#7fb0ff;
  text-decoration:underline;
  text-underline-offset:3px;
}
.form .btn[disabled],
.form button:disabled{
  opacity:.48;
  cursor:not-allowed;
  filter:saturate(.55);
  box-shadow:none!important;
}
.social-account-card .social-logo-media{
  min-height:250px;
}
.social-logo-frame{
  width:min(78%,270px);
  height:154px;
  padding:18px;
  border-radius:26px;
  display:grid;
  place-items:center;
  background:#fff;
}
.social-logo-frame img{
  object-fit:contain;
  border-radius:0;
  background:transparent;
}
body:not(.page-home) .service-page-hero .page-hero-media-grid,
.page-contact .page-hero .page-hero-media-grid,
.page-devis .page-hero .page-hero-media-grid{
  min-height:520px!important;
}
body:not(.page-home) .service-page-hero .page-banner-media,
.page-contact .page-hero .page-banner-media,
.page-devis .page-hero .page-banner-media{
  left:24%!important;
}
body:not(.page-home) .service-page-hero .page-banner-media img,
.page-contact .page-hero .page-banner-media img,
.page-devis .page-hero .page-banner-media img{
  transform:scale(1.11)!important;
  object-position:center center!important;
}
@media (max-width:1024px){
  body:not(.page-home) .service-page-hero .page-hero-media-grid,
  .page-contact .page-hero .page-hero-media-grid,
  .page-devis .page-hero .page-hero-media-grid{
    min-height:470px!important;
  }
  body:not(.page-home) .service-page-hero .page-banner-media,
  .page-contact .page-hero .page-banner-media,
  .page-devis .page-hero .page-banner-media{
    left:18%!important;
  }
  body:not(.page-home) .service-page-hero .page-banner-media img,
  .page-contact .page-hero .page-banner-media img,
  .page-devis .page-hero .page-banner-media img{
    transform:scale(1.08)!important;
  }
}
@media (max-width:700px){
  .social-account-card .social-logo-media{
    min-height:210px;
  }
  .social-logo-frame{
    width:min(88%,235px);
    height:132px;
    padding:15px;
    border-radius:22px;
  }
  body:not(.page-home) .service-page-hero .page-hero-media-grid,
  .page-contact .page-hero .page-hero-media-grid,
  .page-devis .page-hero .page-hero-media-grid{
    min-height:500px!important;
  }
  body:not(.page-home) .service-page-hero .page-banner-media,
  .page-contact .page-hero .page-banner-media,
  .page-devis .page-hero .page-banner-media{
    left:0!important;
  }
  body:not(.page-home) .service-page-hero .page-banner-media img,
  .page-contact .page-hero .page-banner-media img,
  .page-devis .page-hero .page-banner-media img{
    transform:scale(1.04)!important;
    object-position:center 35%!important;
  }
}

/* Correctif final réalisations : logos de comptes visibles entièrement, sans recadrage. */
.page-realisations .social-account-card .social-logo-media{
  min-height:300px!important;
  padding:30px!important;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,90,0,.24),transparent 44%),
    linear-gradient(145deg,#141820,#07090c)!important;
}
.page-realisations .social-logo-frame{
  width:min(86%,360px)!important;
  height:220px!important;
  padding:20px!important;
  border-radius:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  background:#fff!important;
  box-shadow:0 22px 55px rgba(0,0,0,.38),0 0 46px rgba(255,90,0,.17)!important;
}
.page-realisations .social-logo-frame img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  border-radius:0!important;
  background:transparent!important;
  transform:none!important;
}
.page-realisations .social-logo-frame img[src*="social-logo-egeo"]{
  max-width:100%!important;
  max-height:100%!important;
  border-radius:22px!important;
}
.page-realisations .social-logo-frame img[src*="logo_horizon"]{
  max-width:96%!important;
}
@media (max-width:700px){
  .page-realisations .social-account-card .social-logo-media{
    min-height:230px!important;
    padding:22px!important;
  }
  .page-realisations .social-logo-frame{
    width:min(92%,285px)!important;
    height:172px!important;
    padding:18px!important;
    border-radius:24px!important;
  }
  .page-realisations .social-logo-frame img{
    max-height:100%!important;
  }
  .page-realisations .social-logo-frame img[src*="social-logo-egeo"]{
    max-width:100%!important;
    max-height:100%!important;
    width:170px!important;
    height:170px!important;
  }
}

/* Final image quality pass: avoid artificial enlargement, blur-like overlays and accidental crops. */
body:not(.page-home) .page-hero .page-banner-media img{
  transform:scale(1.01)!important;
  filter:brightness(.82) saturate(1.02) contrast(1.08)!important;
  image-rendering:auto;
}
.blog-thumb img,
.service-card-media img,
.portfolio-card img,
.client-card-media img{
  filter:none!important;
  image-rendering:auto;
}
.blog-thumb img,
.page-realisations .portfolio-card img{
  object-position:center center!important;
}
.page-realisations .social-logo-frame img[src*="social-logo-egeo"]{
  width:220px!important;
  height:220px!important;
  max-width:100%!important;
  max-height:100%!important;
}
.page-realisations .social-logo-frame img[src*="logo_serena"],
.page-realisations .social-logo-frame img[src*="logo_asphalte"],
.page-realisations .social-logo-frame img[src*="logo_webtel"],
.page-realisations .social-logo-frame img[src*="logo_arcadia"]{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  transform:none!important;
}
@media (max-width:700px){
  .page-realisations .social-logo-frame img[src*="social-logo-egeo"]{
    width:170px!important;
    height:170px!important;
  }
}


/* === Final pass — images nettes, complètes et contextualisées === */

/* Bannières internes : conserver toute l'image sans zoom artificiel. */
body:not(.page-home) .page-hero .page-banner-media,
body:not(.page-home) .service-page-hero .page-banner-media,
.page-contact .page-hero .page-banner-media,
.page-devis .page-hero .page-banner-media{
  aspect-ratio:16/9!important;
  height:auto!important;
  min-height:0!important;
  background:#07090c!important;
  overflow:hidden!important;
}
body:not(.page-home) .page-hero .page-banner-media img,
body:not(.page-home) .service-page-hero .page-banner-media img,
.page-contact .page-hero .page-banner-media img,
.page-devis .page-hero .page-banner-media img{
  width:100%!important;
  height:100%!important;
  transform:none!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:none!important;
}

/* Cartes des services : vraie zone 16/9 dédiée à l'image, sans recadrage. */
.service-cards .info-card.with-real-image{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(250px,42%)!important;
  grid-template-rows:auto 1fr!important;
  column-gap:28px!important;
  row-gap:12px!important;
  align-items:start!important;
  padding:30px!important;
  min-height:260px!important;
  overflow:hidden!important;
}
.service-cards .info-card.with-real-image > h3{
  grid-column:1!important;
  grid-row:1!important;
  margin:8px 0 0!important;
}
.service-cards .info-card.with-real-image > p{
  grid-column:1!important;
  grid-row:2!important;
  margin:0!important;
}
.service-cards .service-card-media{
  position:relative!important;
  inset:auto!important;
  grid-column:2!important;
  grid-row:1 / span 2!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  margin:0!important;
  border-radius:20px!important;
  background:#06080b!important;
  overflow:hidden!important;
  align-self:center!important;
}
.service-cards .service-card-media:after{display:none!important}
.service-cards .service-card-media img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
}
.service-cards .info-card.with-real-image:hover .service-card-media img{
  transform:none!important;
}

/* Portfolio : afficher les compositions en entier, sans zoom ou découpe. */
.page-realisations .portfolio-card img{
  width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#07090c!important;
  transform:none!important;
  filter:none!important;
}
.page-realisations .portfolio-card:hover img{transform:none!important}

/* Captures des vrais sites : ratio natif + aucun recadrage. */
.page-realisations .client-card-media{
  aspect-ratio:1900/825!important;
  height:auto!important;
  background:#07090c!important;
}
.page-realisations .client-card-media img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
}
.page-realisations .client-card:hover .client-card-media img{transform:none!important}

/* Blog : toutes les vignettes restent en 16/9 et visibles entièrement. */
.blog-thumb,
.blog-thumb-context{
  height:auto!important;
  aspect-ratio:16/9!important;
  background:#07090c!important;
}
.blog-thumb img,
.blog-thumb-context img.blog-context-main{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
}
.blog-card:hover .blog-thumb img,
.blog-card:hover .blog-thumb-context img.blog-context-main{
  transform:none!important;
  filter:none!important;
}

/* La typologie de chaque réalisation peut être plus longue qu'un simple "site vitrine". */
.page-realisations .client-card .pill-tag{
  white-space:normal!important;
  line-height:1.3!important;
  max-width:100%!important;
}

/* À propos : garder les illustrations lisibles et non recadrées. */
.page-about .about-card-media,
.page-a-propos .about-card-media,
.about-principles .about-card-media{
  background:#07090c!important;
}
.page-about .about-card-media img,
.page-a-propos .about-card-media img,
.about-principles .about-card-media img{
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
}

/* Mobile/tablette : empilement simple des cartes service. */
@media (max-width:900px){
  .service-cards .info-card.with-real-image{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    gap:18px!important;
    padding:24px!important;
  }
  .service-cards .service-card-media{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    aspect-ratio:16/9!important;
  }
  .service-cards .info-card.with-real-image > h3{
    grid-column:1!important;
    grid-row:2!important;
    margin:0!important;
  }
  .service-cards .info-card.with-real-image > p{
    grid-column:1!important;
    grid-row:3!important;
  }
}

/* =========================================================
   HORIZON 360 — REFONTE CIBLÉE 13/08/2026
   Accueil / Réalisations / Pages services / Contact / Footer
   ========================================================= */

/* Accueil : suppression du libellé "Agence de marketing digital" sans casser le rythme. */
.page-home .hero-copy > h1{margin-top:0!important}

/* Footer : vrai pictogramme Instagram + coordonnées lisibles. */
.site-footer .socials .instagram-link svg{
  width:17px;
  height:17px;
  display:block;
}
.site-footer .socials a{
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.site-footer .socials a:hover{
  border-color:rgba(255,90,0,.72);
  background:rgba(255,90,0,.09);
  transform:translateY(-2px);
}
.site-footer .address-one-line,
.address-one-line{
  white-space:nowrap!important;
}
.site-footer .contact-item{
  grid-template-columns:26px minmax(0,1fr);
}
.site-footer .contact-item .address-one-line{
  font-size:clamp(13px,.98vw,16px);
  letter-spacing:-.015em;
}

/* Réalisations : le contenu web est la première chose visible sous le header. */
.page-realisations .realisations-first{
  padding-top:68px!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,90,0,.08),transparent 26%),
    #0b0d11;
}
.page-realisations .realisations-first .showcase-head{
  margin-bottom:34px;
}
.page-realisations .realisations-first .section-title{
  max-width:980px;
}

/* Réalisations / comptes gérés : un langage visuel unique pour tous les logos. */
.page-realisations .social-account-card .social-logo-media{
  min-height:292px!important;
  padding:34px!important;
  background:linear-gradient(145deg,#12161d,#090b0f)!important;
}
.page-realisations .social-logo-frame{
  width:min(84%,360px)!important;
  height:220px!important;
  padding:28px!important;
  border-radius:28px!important;
  background:#fff!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:0 22px 58px rgba(0,0,0,.36),0 0 42px rgba(255,90,0,.10)!important;
  overflow:hidden!important;
}
.page-realisations .social-logo-frame .clean-social-logo{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:0!important;
  background:transparent!important;
  transform:none!important;
}
.page-realisations .social-logo-frame .egeo-new-logo{
  width:88%!important;
  height:auto!important;
  max-height:76%!important;
  filter:brightness(0)!important;
}
.page-realisations .social-account-card:hover .social-logo-frame{
  box-shadow:0 25px 64px rgba(0,0,0,.42),0 0 50px rgba(255,90,0,.14)!important;
}

/* -------------------- Pages services : schéma commun premium -------------------- */
.service-hero-v2{
  position:relative;
  overflow:hidden;
  padding:76px 0 86px;
  background:
    radial-gradient(circle at 78% 26%,rgba(255,91,13,.15),transparent 25%),
    radial-gradient(circle at 12% 16%,rgba(255,255,255,.035),transparent 22%),
    linear-gradient(135deg,#07090c 0%,#0a0d12 55%,#08090c 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.service-hero-v2:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.32;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.65),transparent 68%);
}
.service-hero-v2-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);
  gap:74px;
  align-items:center;
}
.service-hero-v2-copy{min-width:0}
.service-kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
  color:var(--orange);
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.service-kicker:before{
  content:"";
  width:42px;
  height:2px;
  border-radius:999px;
  background:var(--orange);
  box-shadow:0 0 18px rgba(255,90,0,.45);
}
.service-hero-v2 h1{
  margin:0;
  max-width:760px;
  color:#fff;
  font-size:clamp(46px,4.4vw,74px);
  line-height:.98;
  letter-spacing:-.06em;
}
.service-hero-v2 h1 span{
  display:block;
  margin-top:8px;
  color:var(--orange);
}
.service-hero-v2-copy > p{
  max-width:660px;
  margin:25px 0 0;
  color:#d5d9e2;
  font-size:clamp(17px,1.2vw,20px);
  line-height:1.65;
}
.service-hero-actions{margin:30px 0 0!important}
.service-proof-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:27px;
}
.service-proof-row span{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:8px 13px 8px 30px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#c7ccd5;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.service-proof-row span:before{
  content:"";
  position:absolute;
  left:12px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px rgba(255,90,0,.55);
}
.service-visual-v2{
  position:relative;
  min-height:520px;
}
.service-visual-halo{
  position:absolute;
  width:68%;
  aspect-ratio:1;
  right:4%;
  top:4%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,0,.22),rgba(255,90,0,.04) 42%,transparent 70%);
  filter:blur(9px);
}
.service-visual-frame{
  position:absolute;
  inset:24px 0 28px 46px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:34px;
  background:#0b0e13;
  box-shadow:0 38px 88px rgba(0,0,0,.48),0 0 0 1px rgba(255,90,0,.035) inset;
}
.service-visual-frame:before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,9,12,.25),transparent 26%),
    linear-gradient(0deg,rgba(7,9,12,.16),transparent 40%);
}
.service-visual-frame img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:contrast(1.04) saturate(.98);
}
.service-floating-card{
  position:absolute;
  z-index:4;
  left:0;
  bottom:52px;
  width:210px;
  min-height:118px;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  background:rgba(12,15,20,.92);
  box-shadow:0 24px 55px rgba(0,0,0,.45),0 0 34px rgba(255,90,0,.08);
  backdrop-filter:blur(14px);
}
.service-floating-card small{
  display:block;
  margin-bottom:8px;
  color:#8d94a2;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}
.service-floating-card strong{
  display:block;
  color:#fff;
  font-size:20px;
  line-height:1.15;
}
.service-floating-card i{
  display:block;
  width:72%;
  height:3px;
  margin-top:16px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--orange),rgba(255,90,0,.08));
}
.service-mini-badge{
  position:absolute;
  z-index:4;
  top:2px;
  right:18px;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:10px 15px;
  border:1px solid rgba(255,90,0,.25);
  border-radius:999px;
  background:rgba(12,15,20,.88);
  color:#fff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  box-shadow:0 16px 36px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);
}
.service-mini-badge span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 14px rgba(255,90,0,.55);
}

/* Pages services : leur premier bloc de contenu se raccorde plus naturellement au nouveau hero. */
body[class^="page-"] .service-hero-v2 + .section,
.page-social .service-hero-v2 + .section,
.page-emailing .service-hero-v2 + .section,
.page-referencement .service-hero-v2 + .section,
.page-distribution .service-hero-v2 + .section,
.page-marketing .service-hero-v2 + .section,
.page-creation .service-hero-v2 + .section{
  padding-top:84px;
}

/* -------------------- Contact : refonte complète -------------------- */
.contact-hero-v2{
  position:relative;
  overflow:hidden;
  padding:82px 0 88px;
  background:
    radial-gradient(circle at 78% 24%,rgba(255,90,0,.18),transparent 25%),
    linear-gradient(135deg,#07090c 0%,#0b0e13 52%,#080a0d 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.contact-hero-v2:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.32;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.7),transparent 76%);
  pointer-events:none;
}
.contact-hero-v2-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);
  gap:78px;
  align-items:center;
}
.contact-kicker{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:24px;
  color:var(--orange);
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
}
.contact-kicker:before{content:"";width:42px;height:2px;background:var(--orange);border-radius:999px}
.contact-hero-v2 h1{
  margin:0;
  max-width:760px;
  font-size:clamp(50px,4.8vw,78px);
  line-height:.96;
  letter-spacing:-.065em;
  color:#fff;
}
.contact-hero-v2 h1 span{
  display:block;
  margin-top:8px;
  color:var(--orange);
}
.contact-hero-v2-copy > p{
  max-width:680px;
  margin:26px 0 0;
  color:#d2d7df;
  font-size:clamp(17px,1.18vw,20px);
  line-height:1.65;
}
.contact-hero-actions{margin:31px 0 0!important}
.contact-quick-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:28px;
}
.contact-quick-points span{
  position:relative;
  padding-left:16px;
  color:#b9c0ca;
  font-size:13px;
  font-weight:750;
}
.contact-quick-points span:before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
  transform:translateY(-50%);
  box-shadow:0 0 11px rgba(255,90,0,.5);
}
.contact-digital-stage{
  position:relative;
  min-height:530px;
}
.contact-stage-orbit{
  position:absolute;
  border:1px solid rgba(255,90,0,.12);
  border-radius:50%;
  pointer-events:none;
}
.contact-stage-orbit.orbit-one{width:410px;height:410px;right:16px;top:34px}
.contact-stage-orbit.orbit-two{width:290px;height:290px;right:76px;top:94px;border-color:rgba(255,255,255,.06)}
.contact-ui-window{
  position:absolute;
  inset:42px 22px 42px 44px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:34px;
  background:linear-gradient(150deg,#171b22,#0b0e13 72%);
  box-shadow:0 40px 95px rgba(0,0,0,.5),0 0 55px rgba(255,90,0,.08);
  transform:perspective(1200px) rotateY(-4deg) rotateX(1deg);
}
.contact-ui-window:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 82% 22%,rgba(255,90,0,.14),transparent 26%);
}
.contact-ui-top{
  position:relative;
  z-index:2;
  height:58px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#0d1015;
}
.contact-ui-top > span{width:8px;height:8px;border-radius:50%;background:#343a44}
.contact-ui-top > span:first-child{background:var(--orange)}
.contact-ui-top b{margin-left:auto;color:#e9edf2;font-size:11px;letter-spacing:.12em}
.contact-ui-content{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:22px;
  padding:48px 32px 32px;
}
.contact-ui-copy small{display:block;color:var(--orange);font-size:10px;font-weight:900;letter-spacing:.16em;margin-bottom:15px}
.contact-ui-copy strong{display:block;color:#fff;font-size:29px;line-height:1.16;letter-spacing:-.04em}
.contact-ui-copy i{display:block;width:92%;height:7px;margin-top:18px;border-radius:999px;background:#262c36}
.contact-ui-copy i+ i{width:74%;margin-top:9px}
.contact-ui-copy i.short{width:49%}
.contact-ui-panel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-content:start;
}
.contact-ui-panel span{
  min-height:78px;
  display:flex;
  align-items:flex-end;
  padding:13px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:linear-gradient(145deg,#171b22,#101319);
  color:#d5dae2;
  font-size:11px;
  font-weight:850;
}
.contact-ui-panel span:nth-child(1),.contact-ui-panel span:nth-child(4){background:linear-gradient(145deg,rgba(255,90,0,.2),rgba(255,90,0,.04))}
.contact-stage-card{
  position:absolute;
  z-index:5;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(11,14,19,.94);
  box-shadow:0 24px 60px rgba(0,0,0,.48);
  backdrop-filter:blur(14px);
}
.contact-stage-card small{display:block;color:#8c94a1;font-size:9px;font-weight:900;letter-spacing:.15em;margin-bottom:8px}
.contact-stage-card strong{display:block;color:#fff}
.card-message{
  left:0;
  bottom:18px;
  width:238px;
  min-height:112px;
  padding:20px 52px 20px 20px;
  border-radius:20px;
}
.card-message strong{font-size:17px;line-height:1.25}
.card-message span{position:absolute;right:18px;bottom:20px;color:var(--orange);font-size:24px}
.card-stat{
  right:0;
  top:10px;
  width:154px;
  padding:18px;
  border-radius:20px;
}
.card-stat strong{font-size:34px;color:var(--orange)}
.card-stat i{display:block;width:100%;height:3px;margin-top:12px;border-radius:999px;background:linear-gradient(90deg,var(--orange),transparent)}

.contact-main-v2{
  position:relative;
  padding:96px 0 110px;
  background:#0b0d11;
}
.contact-section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(330px,.7fr);
  gap:58px;
  align-items:end;
  margin-bottom:38px;
}
.contact-section-head > div > span{
  display:block;
  margin-bottom:14px;
  color:var(--orange);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
}
.contact-section-head h2{
  margin:0;
  color:#fff;
  font-size:clamp(38px,3.6vw,58px);
  line-height:1;
  letter-spacing:-.055em;
}
.contact-section-head > p{
  margin:0;
  color:#9ea6b2;
  font-size:16px;
  line-height:1.7;
}
.contact-premium-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);
  gap:24px;
  align-items:start;
}
.contact-form-panel,
.contact-info-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:28px;
  background:linear-gradient(145deg,#141820,#0e1116);
  box-shadow:0 24px 68px rgba(0,0,0,.24);
}
.contact-form-panel{padding:34px}
.contact-info-panel{padding:34px}
.panel-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:30px;
}
.panel-head > span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(255,90,0,.28);
  border-radius:13px;
  background:rgba(255,90,0,.09);
  color:var(--orange);
  font-size:11px;
  font-weight:900;
}
.panel-head small{
  display:block;
  margin-bottom:3px;
  color:#858d99;
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}
.panel-head h3{margin:0;color:#fff;font-size:25px;letter-spacing:-.035em}
.contact-form-panel .form{gap:16px}
.contact-form-panel .form label{color:#cdd2db}
.contact-form-panel .form input,
.contact-form-panel .form textarea{
  border:1px solid rgba(255,255,255,.10)!important;
  background:#0b0e13!important;
  box-shadow:none!important;
}
.contact-form-panel .form input:focus,
.contact-form-panel .form textarea:focus{
  border-color:rgba(255,90,0,.62)!important;
  box-shadow:0 0 0 3px rgba(255,90,0,.08)!important;
}
.contact-form-panel .form textarea{min-height:150px}
.contact-form-panel .form textarea::placeholder{color:#5e6671}
.contact-info-list{display:grid;gap:10px}
.contact-info-row{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 20px;
  gap:14px;
  align-items:center;
  min-height:80px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  background:#0d1015;
  color:#fff;
  transition:border-color .25s ease,transform .25s ease,background .25s ease;
}
.contact-info-row:hover{transform:translateY(-2px);border-color:rgba(255,90,0,.30);background:#10141a}
.contact-info-row.no-link{grid-template-columns:48px minmax(0,1fr)}
.contact-info-row > i{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(255,90,0,.09);
  color:var(--orange);
}
.contact-info-row svg{width:21px;height:21px}
.contact-info-row small{display:block;color:#7e8793;font-size:10px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;margin-bottom:5px}
.contact-info-row strong{display:block;color:#f3f5f8;font-size:16px;line-height:1.35;font-weight:780}
.contact-info-row > b{color:var(--orange);font-size:18px}
.contact-map-v2{
  height:250px;
  margin-top:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:#0b0e13;
}
.contact-map-v2 iframe{width:100%;height:100%;border:0;filter:grayscale(.28) contrast(1.05) brightness(.88)}
.contact-note{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:18px;
  padding:16px 18px;
  border-radius:16px;
  background:rgba(255,90,0,.06);
  border:1px solid rgba(255,90,0,.16);
}
.contact-note > span{width:8px;height:8px;flex:0 0 auto;margin-top:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px rgba(255,90,0,.5)}
.contact-note p{margin:0;color:#b8bec8;font-size:13px;line-height:1.55}

/* Responsive : services + contact */
@media (max-width:1180px){
  .service-hero-v2-grid,
  .contact-hero-v2-grid{grid-template-columns:minmax(0,.95fr) minmax(470px,1.05fr);gap:44px}
  .service-visual-v2,.contact-digital-stage{min-height:470px}
  .contact-premium-grid{grid-template-columns:minmax(0,1fr) minmax(390px,.85fr)}
}
@media (max-width:960px){
  .service-hero-v2,
  .contact-hero-v2{padding:62px 0 70px}
  .service-hero-v2-grid,
  .contact-hero-v2-grid{grid-template-columns:1fr;gap:44px}
  .service-hero-v2-copy,
  .contact-hero-v2-copy{max-width:760px}
  .service-visual-v2,
  .contact-digital-stage{min-height:430px;max-width:820px;width:100%}
  .service-visual-frame{left:28px}
  .contact-premium-grid{grid-template-columns:1fr}
  .contact-section-head{grid-template-columns:1fr;gap:18px}
  .contact-info-panel{order:-1}
  .contact-info-row .address-one-line{white-space:normal!important}
  .site-footer .address-one-line{white-space:nowrap!important}
}
@media (max-width:700px){
  .page-realisations .realisations-first{padding-top:46px!important}
  .page-realisations .social-account-card .social-logo-media{min-height:216px!important;padding:22px!important}
  .page-realisations .social-logo-frame{width:min(94%,310px)!important;height:168px!important;padding:22px!important;border-radius:22px!important}
  .service-hero-v2,
  .contact-hero-v2{padding:48px 0 56px}
  .service-kicker,
  .contact-kicker{font-size:10px;margin-bottom:18px}
  .service-kicker:before,
  .contact-kicker:before{width:30px}
  .service-hero-v2 h1,
  .contact-hero-v2 h1{font-size:clamp(38px,11vw,52px);max-width:none}
  .service-hero-v2-copy > p,
  .contact-hero-v2-copy > p{font-size:16px;line-height:1.6}
  .service-proof-row{margin-top:22px}
  .service-visual-v2{min-height:335px}
  .service-visual-frame{inset:18px 0 20px 20px;border-radius:24px}
  .service-floating-card{left:0;bottom:4px;width:176px;min-height:98px;padding:16px;border-radius:16px}
  .service-floating-card strong{font-size:16px}
  .service-mini-badge{right:6px;top:0}
  .contact-digital-stage{min-height:350px}
  .contact-ui-window{inset:30px 8px 30px 20px;border-radius:24px;transform:none}
  .contact-ui-content{padding:34px 20px 22px;grid-template-columns:1fr;gap:18px}
  .contact-ui-panel{display:none}
  .contact-stage-orbit.orbit-one{width:280px;height:280px;right:0;top:28px}
  .contact-stage-orbit.orbit-two{width:190px;height:190px;right:42px;top:72px}
  .card-stat{right:0;top:4px;width:130px}
  .card-message{width:205px;min-height:96px;bottom:2px}
  .contact-main-v2{padding:70px 0 78px}
  .contact-form-panel,.contact-info-panel{padding:24px 20px;border-radius:22px}
  .contact-section-head h2{font-size:clamp(34px,10vw,45px)}
  .contact-info-row{grid-template-columns:44px minmax(0,1fr) 16px;padding:12px;gap:11px}
  .contact-info-row.no-link{grid-template-columns:44px minmax(0,1fr)}
  .contact-info-row strong{font-size:14px}
  .contact-info-row .address-one-line{font-size:13px!important;white-space:nowrap!important;letter-spacing:-.03em}
  .contact-map-v2{height:210px}
  .site-footer .contact-item .address-one-line{font-size:13px}
}
@media (max-width:420px){
  .service-hero-actions,
  .contact-hero-actions{display:grid!important;grid-template-columns:1fr!important}
  .service-hero-actions .btn,
  .contact-hero-actions .btn{width:100%;justify-content:center}
  .contact-info-row .address-one-line{font-size:12px!important}
  .site-footer .contact-item .address-one-line{font-size:12px!important}
}
/* Adresse : ne jamais couper entre la rue, le code postal et la ville. */
.contact-info-row .address-one-line,
.contact-details .address-one-line,
.site-footer .address-one-line{
  white-space:nowrap!important;
}
@media (max-width:960px){
  .contact-info-row .address-one-line{font-size:14px!important;letter-spacing:-.025em}
}


/* Formulaires : envoi serveur, messages d'état et anti-spam */
.hp-field{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
.form-status{
  grid-column:1/-1;
  min-height:22px;
  margin-top:4px;
  font-size:14px;
  line-height:1.5;
  font-weight:700;
}
.form-status:empty{display:none}
.form-status.sending{color:#c9ced6}
.form-status.success{
  color:#b8f5c8;
  background:rgba(39,174,96,.12);
  border:1px solid rgba(39,174,96,.28);
  border-radius:12px;
  padding:12px 14px;
}
.form-status.error{
  color:#ffd0c2;
  background:rgba(255,94,26,.10);
  border:1px solid rgba(255,94,26,.30);
  border-radius:12px;
  padding:12px 14px;
}
.mail-form button[type="submit"][disabled]{
  cursor:not-allowed;
}

/* === WEB TYPES — ajout 14/08/2026 === */
.web-types-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 10%,rgba(255,90,0,.10),transparent 24%),
    linear-gradient(180deg,#0a0c10,#0c0f14);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.web-types-section:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 92%);
}
.web-types-section .container{position:relative;z-index:1}
.web-types-head{max-width:980px!important;margin-bottom:38px!important}
.web-types-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.web-type-card{
  min-height:270px;
  display:flex;
  flex-direction:column;
  padding:25px 24px 27px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  box-shadow:0 18px 46px rgba(0,0,0,.16);
  transition:transform .28s ease,border-color .28s ease,background .28s ease;
}
.web-type-card:hover{transform:translateY(-5px);border-color:rgba(255,90,0,.48);background:linear-gradient(150deg,rgba(255,90,0,.075),rgba(255,255,255,.02))}
.web-type-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:auto}
.web-type-top span{font-size:12px;font-weight:1000;letter-spacing:.12em;color:#ff6813}
.web-type-top i{font-style:normal;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:#aeb5c0;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 9px;background:rgba(255,255,255,.025)}
.web-type-card h3{font-size:25px;line-height:1.06;letter-spacing:-.035em;margin:46px 0 12px}
.web-type-card p{margin:0;color:#aeb5c0;font-size:15px;line-height:1.62}
@media (max-width:1100px){.web-types-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.web-type-card{min-height:240px}}
@media (max-width:620px){.web-types-grid{grid-template-columns:1fr}.web-type-card{min-height:0}.web-type-card h3{margin-top:34px}.web-types-head{margin-bottom:26px!important}}