/* =============================================================
   Écho Média Lab — feuille de style responsive (un seul HTML)
   Points de rupture : ≤ 1000 px (tablette), ≤ 680 px (mobile)
   ============================================================= */

:root{
  --bg:#08070c; --bg2:#050309; --panel:#0f0c15; --panel2:#17131f;
  --text:#f7f4fb; --muted:#aaa4b3; --muted2:#c6beca;
  --line:rgba(255,255,255,.10); --line2:rgba(164,102,255,.32);
  --purple:#8d54ff; --purple-light:#c08cff; --pink:#ff3c6d; --magenta:#df3cae;
  --grad:linear-gradient(90deg,#8c4cff 0%,#df3cae 48%,#ff4a52 100%);
  --grad-v:linear-gradient(180deg,#8c4cff 0%,#df3cae 55%,#ff4a52 100%);
  --radius:26px; --radius-sm:18px; --max:1420px;
  --header-h:128px;
  --font:Manrope,"Avenir Next",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{margin:0;background:radial-gradient(circle at 10% 0%,rgba(123,63,228,.12),transparent 30%),var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-weight:800;margin:0}
ul{list-style:none;margin:0;padding:0}
.shell{width:min(var(--max),calc(100% - 9vw));margin:auto}
.nowrap{white-space:nowrap}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Utilitaires typographiques --- */
.grad{background:var(--grad)}
.grad-purple{background:linear-gradient(90deg,#8c4cff,#b45cff)}
.grad-pink{background:linear-gradient(90deg,#e23c9a,#ff4a52)}
.grad,.grad-purple,.grad-pink{-webkit-background-clip:text;background-clip:text;color:transparent}
.pink{color:var(--pink)}
.bar{display:block;width:72px;height:4px;border-radius:999px;background:var(--grad);margin:22px 0 28px}
.bar-sm{width:44px;height:3px;margin:10px 0 14px}
.button{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;background:var(--grad);color:#fff;text-decoration:none;font-weight:700;border:0;cursor:pointer;font:inherit;font-weight:700;transition:transform .2s,box-shadow .2s}
.button:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(190,60,170,.35)}

/* --- Sections --- */
.section{padding:104px 0;border-top:1px solid var(--line)}
.section-head{margin-bottom:48px}
.section-label{display:inline-block;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;font-weight:800;margin-bottom:26px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.section-label::after{content:"";display:block;width:72px;height:4px;margin-top:16px;border-radius:999px;background:var(--grad)}
.section-title{font-size:clamp(2.2rem,4vw,4.2rem);line-height:1.04;letter-spacing:-.045em;max-width:1100px}
.section-title.center{text-align:center;margin:0 auto 60px}
.section-copy{color:var(--muted2);font-size:1.08rem;max-width:760px;margin:22px 0 0}
.subtitle{font-size:clamp(1.35rem,2vw,1.9rem);font-weight:600;margin:14px 0 0;letter-spacing:-.02em}
.h3-big{font-size:clamp(1.8rem,2.8vw,2.7rem);line-height:1.1;letter-spacing:-.035em;max-width:620px}

/* --- Pastille AiTD --- */
.aitd-pill{display:inline-block;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,70,118,.55);background:rgba(255,70,118,.08);color:#ff7b9d;letter-spacing:.08em;text-transform:uppercase;font-size:.77rem;font-weight:700}
.aitd-pill-lg{display:block;width:max-content;font-size:1.4rem;letter-spacing:.02em;text-transform:none;padding:10px 24px;border-radius:14px;color:#fff;border:1px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box;margin:4px 0 30px}
.aitd-pill-card{font-size:1rem;text-transform:none;letter-spacing:0;padding:5px 12px;border-radius:10px;color:#fff;border:1px solid transparent;background:linear-gradient(#14101d,#14101d) padding-box,var(--grad) border-box;vertical-align:middle;margin-left:8px}

/* --- Icônes --- */
.ico{width:28px;height:28px;display:block;flex:none}
.ico-img{object-fit:cover;border-radius:50%;mix-blend-mode:screen}
.variant-b .orbit-figure img,.variant-b .adv-core-img{mix-blend-mode:screen}
.ico-sm{width:20px;height:20px}
.ico-media{width:72px;height:72px}
.ico-cyl{width:44px;height:44px;margin:0 auto 10px}

/* =============================== EN-TÊTE =============================== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(8,7,12,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.header-inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;position:relative}
.brand img{width:190px;height:auto;display:block}
.nav{display:flex;gap:28px;align-items:center}
.nav a{text-decoration:none;color:#ded9e5;font-size:.9rem;font-weight:600;transition:color .2s}
.nav a:hover{color:#fff}
.header-right{display:flex;align-items:center;gap:14px;order:3}
.lang-switch{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:36px;padding:0 12px;border-radius:999px;border:1px solid rgba(164,102,255,.5);color:#ded9e5;text-decoration:none;font-size:.82rem;font-weight:700;letter-spacing:.08em;transition:border-color .2s,color .2s}
.lang-switch:hover{color:#fff;border-color:#c08cff}
.menu-toggle{display:none;background:transparent;border:0;width:44px;height:44px;padding:8px;cursor:pointer;flex-direction:column;justify-content:center;gap:6px}
.menu-toggle span{display:block;width:26px;height:2px;border-radius:99px;background:var(--grad);transition:transform .2s,opacity .2s}
.menu-open .menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-open .menu-toggle span:nth-child(2){opacity:0}
.menu-open .menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* =============================== ACCUEIL =============================== */
.hero{min-height:calc(100vh - var(--header-h));display:flex;align-items:center;position:relative;overflow:hidden;border-top:0}
.hero::after{content:"";position:absolute;right:-8%;top:8%;width:54%;height:78%;opacity:.52;background:radial-gradient(circle at 72% 30%,rgba(255,62,100,.14),transparent 32%),radial-gradient(circle at 35% 55%,rgba(137,83,255,.22),transparent 44%);pointer-events:none}
.hero-network{position:absolute;right:4%;top:20%;width:42%;height:55%;opacity:.33;pointer-events:none}
.hero-network span{position:absolute;width:7px;height:7px;border-radius:50%;background:#bc83ff;box-shadow:0 0 16px #a464ff}
.hero-network i{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(172,115,255,.65),transparent);transform-origin:left center}
.hero-content{position:relative;z-index:2}
.hero-eyebrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;text-transform:uppercase;letter-spacing:.13em;font-size:.77rem;color:#a9a3b3;font-weight:700}
.hero h1{font-size:clamp(3.2rem,8vw,8rem);line-height:.93;letter-spacing:-.06em;margin:36px 0 32px;max-width:1050px}
.hero-sub{font-size:clamp(1.05rem,1.5vw,1.35rem);color:#c7c1cb;margin:0 0 34px;max-width:640px}

/* =============================== À PROPOS =============================== */
.about-section{position:relative;overflow:hidden;background:radial-gradient(circle at 11% 88%,rgba(173,20,133,.30),transparent 27%),radial-gradient(circle at 18% 54%,rgba(97,30,177,.15),transparent 32%),var(--bg)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start}
.about-left{padding:20px 5vw 40px 0}
.about-left .section-title{font-size:clamp(3rem,5vw,5.6rem);max-width:540px}
.about-left .accent{display:block}
.about-left .accent::after{content:".";color:var(--pink)}
.about-copy{padding:20px 0 0 4vw;border-left:1px solid rgba(142,77,210,.46)}
.about-copy p{font-size:clamp(1.05rem,1.3vw,1.3rem);line-height:1.75;color:#c2bbc8;margin:0 0 34px;max-width:720px}
.about-copy .lead{color:#fff;font-weight:700}

/* =============================== SERVICES =============================== */
.services-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.service-card{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:26px;min-height:330px;padding:34px 36px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.10);background:linear-gradient(145deg,rgba(111,59,185,.12),rgba(255,255,255,.02))}
.service-pink{background:linear-gradient(145deg,rgba(255,255,255,.02),rgba(220,50,110,.12))}
.service-num{font-size:3.6rem;line-height:1;font-weight:800;letter-spacing:-.04em;background:linear-gradient(180deg,#9d5cff,#7a3df0);-webkit-background-clip:text;background-clip:text;color:transparent}
.service-pink .service-num{background:linear-gradient(180deg,#ff4d7d,#e82a6b);-webkit-background-clip:text;background-clip:text}
.service-body{position:relative;z-index:2}
.service-card h3{font-size:1.65rem;line-height:1.15;margin:4px 0 6px;letter-spacing:-.02em}
.service-tag{font-size:1.05rem;color:#a978ff;margin:0 0 22px;font-weight:600}
.service-pink .service-tag{color:#ff5a7d}
.service-list{display:grid;gap:10px;color:#d3cdd9;font-size:.98rem}
.service-list li{padding-left:18px;position:relative}
.service-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:#9b68ff}
.service-pink .service-list li::before{background:#ff4d7d}
.service-deco{position:absolute;z-index:1;pointer-events:none;opacity:.9}
.deco-rings{right:0;top:0;width:36%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);mask-image:linear-gradient(90deg,transparent,#000 35%)}
.variant-a .deco-rings{background:repeating-radial-gradient(circle at 100% 50%,rgba(160,100,255,.35) 0 1px,transparent 1px 22px),radial-gradient(circle at 100% 50%,rgba(190,80,255,.55),transparent 32%)}
.deco-glow{right:0;top:0;width:34%;height:52%;-webkit-mask-image:linear-gradient(225deg,#000,transparent 70%);mask-image:linear-gradient(225deg,#000,transparent 70%)}
.variant-a .deco-glow{background:radial-gradient(circle at 100% 0%,rgba(255,60,110,.45),transparent 60%)}
.deco-fan{right:0;bottom:0;width:24%;height:88%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.deco-wave{right:0;bottom:0;width:30%;height:46%;-webkit-mask-image:linear-gradient(225deg,#000 40%,transparent);mask-image:linear-gradient(225deg,#000 40%,transparent)}
.variant-b .service-deco{object-fit:cover;object-position:right bottom;mix-blend-mode:screen}
.variant-b .deco-rings,.variant-b .deco-fan{height:100%}
.variant-b .deco-wave{width:22%;height:44%}
.pillars{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 0;margin-top:44px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#8d8795;font-weight:600}
.pillars li{padding:0 18px;position:relative}
.pillars li+li::before{content:"";position:absolute;left:-3px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--pink);transform:translateY(-50%)}

/* =============================== MÉDIAS =============================== */
.media-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.media-card{aspect-ratio:1/1;border-radius:22px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(160deg,rgba(87,45,139,.14),rgba(255,255,255,.015));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;text-align:center;padding:20px;transition:.25s}
.media-card:hover{transform:translateY(-4px);border-color:rgba(158,94,255,.55)}
.media-icon{display:grid;place-items:center;filter:drop-shadow(0 0 14px rgba(170,90,255,.45))}
.media-icon .ico-img{width:120px;height:120px;border-radius:0;filter:none;-webkit-mask-image:radial-gradient(circle,#000 50%,transparent 71%);mask-image:radial-gradient(circle,#000 50%,transparent 71%)}
.media-card h3{font-size:1.05rem;font-weight:600}

/* =============================== PROGRAMMATIQUE =============================== */
.prog-section{background:var(--bg2)}
.prog-platform{border-top:1px solid var(--line)}
.platform-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:4vw;align-items:center}
.platform-copy .section-title{font-size:clamp(2.4rem,4.2vw,4.4rem)}

/* Schéma orbital (variante A) */
.orbit{position:relative;aspect-ratio:1/1;max-width:640px;margin:auto;width:100%}
.orbit-lines{position:absolute;inset:0;width:100%;height:100%}
.aitd-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;aspect-ratio:1/1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 50%,#1a0f2c 0%,#120a1f 70%);border:2px solid transparent;background:linear-gradient(#140a22,#140a22) padding-box,var(--grad) border-box;box-shadow:0 0 60px rgba(160,70,255,.45),0 0 120px rgba(255,60,110,.2);z-index:3}
.aitd-core strong{font-size:clamp(2rem,4.5vw,3.6rem);letter-spacing:-.03em;line-height:1}
.aitd-core small{font-size:clamp(.55rem,.9vw,.78rem);letter-spacing:.3em;text-transform:uppercase;color:#d9d1e6;margin-top:10px;line-height:1.6}
.core-bar{display:block;width:60px;height:2px;background:var(--grad);margin-top:14px}
.dsp-nodes{position:absolute;inset:0}
.dsp-node{position:absolute;width:23%;aspect-ratio:1/1;border-radius:50%;background:#0b0810;border:1px solid rgba(164,102,255,.55);box-shadow:0 0 22px rgba(140,76,255,.25);overflow:hidden;transform:translate(-50%,-50%)}
.dsp-node img{width:100%;height:100%;object-fit:cover;display:block}
.dsp-node.n1{left:50%;top:11%}
.dsp-node.n2{left:84%;top:30%}
.dsp-node.n3{left:84%;top:70%}
.dsp-node.n4{left:50%;top:89%}
.dsp-node.n5{left:16%;top:70%}
.dsp-node.n6{left:16%;top:30%}
.orbit-figure{margin:0}
.orbit-figure img{display:block;width:100%;height:auto;max-width:640px;margin:auto}

/* L'avantage AiTD */
.advantage-grid{display:grid;grid-template-columns:1fr .9fr 1fr;gap:28px;align-items:start}
.adv-head{font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin:0 0 18px;text-align:center;min-height:44px}
.adv-center .adv-head{text-transform:none;letter-spacing:0}
.adv-center .adv-head span{display:block;font-size:1.6rem;letter-spacing:-.02em}
.adv-center .adv-head small{display:block;font-size:.95rem;font-weight:600;color:#ddd6e2;margin-top:2px}
.adv-list{display:grid;gap:16px}
.adv-item{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:20px 22px;border-radius:var(--radius-sm);border:1px solid rgba(164,102,255,.28);background:rgba(255,255,255,.025)}
.adv-icon{width:64px;height:64px;border-radius:50%;border:1px solid rgba(190,120,255,.6);display:grid;place-items:center;background:#0d0a14;box-shadow:0 0 18px rgba(160,90,255,.25)}
.adv-icon .ico-img{width:100%;height:100%}
.variant-b .adv-icon{border:0;box-shadow:none;background:transparent}
.adv-item h4{font-size:1.12rem;margin:0 0 6px}
.adv-item p{margin:0;color:#bbb3c2;font-size:.95rem;line-height:1.5}
.adv-core-wrap{position:relative;display:grid;place-items:center;min-height:300px}
.adv-links{position:absolute;inset:0;width:100%;height:100%;opacity:.8;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.aitd-core-lg{position:relative;left:auto;top:auto;transform:none;width:min(260px,70%)}
.adv-core-img{width:min(300px,80%);height:auto;display:block;border-radius:50%;position:relative}
.callout{display:flex;align-items:center;gap:22px;margin:48px auto 0;max-width:860px;padding:22px 30px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.02);font-size:1.15rem;line-height:1.5}
.callout-icon{width:56px;height:56px;flex:none;border-radius:50%;background:#140b1e;border:1px solid var(--line2);display:grid;place-items:center}
.callout-icon .ico-img{width:100%;height:100%}
.variant-b .callout-icon{border:0;background:transparent}

/* Au cœur du AiTD */
.planning-grid{display:grid;grid-template-columns:.44fr .56fr;gap:4vw;align-items:center}
.planning-copy .section-copy{max-width:none;margin-top:18px}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:34px}
.feat{display:flex;align-items:center;gap:14px;font-size:.98rem;color:#ddd6e2;padding:10px 0;border-top:1px solid var(--line)}
.feat-icon{width:58px;height:58px;flex:none;border-radius:50%;border:1px solid rgba(190,120,255,.5);display:grid;place-items:center;background:#0d0a14}
.feat-icon .ico-img{width:100%;height:100%}
.variant-b .feat-icon{border:0;background:transparent}
.planning-shot{margin:0;transform:perspective(1400px) rotateY(-5deg) rotateX(1deg);filter:drop-shadow(0 28px 55px rgba(0,0,0,.5));border-radius:24px;overflow:hidden;border:1px solid rgba(190,120,255,.35)}
.planning-shot img{width:100%;display:block}

/* Data Lake */
.datalake-flow{display:grid;grid-template-columns:1.05fr .75fr .62fr .62fr 1.15fr;gap:22px;align-items:center;margin-top:10px}
.dl-sources,.dl-results{display:grid;gap:14px}
.dl-card{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:18px 20px;border-radius:var(--radius-sm);border:1px solid rgba(164,102,255,.3);background:rgba(255,255,255,.02)}
.dl-icon{width:64px;height:64px;border-radius:50%;border:1px solid rgba(190,120,255,.55);display:grid;place-items:center;background:#0d0a14;flex:none}
.dl-icon .ico-img{width:100%;height:100%}
.variant-b .dl-icon{border:0;background:transparent}
.dl-card h4{font-size:1.12rem;margin:0 0 6px;display:inline-block}
.dl-card p{margin:0;color:#c6beca;font-size:.9rem;line-height:1.55}
.dl-result{border-color:rgba(255,70,140,.3)}
.dl-result .dl-icon{border-color:rgba(255,80,150,.6)}
.dl-result h4{display:block}
.dl-lake{display:grid;place-items:center}
.cylinder{width:100%;max-width:230px;position:relative;filter:drop-shadow(0 0 30px rgba(150,70,255,.35))}
.cyl-top{height:48px;border-radius:50%;border:2px solid transparent;background:linear-gradient(#1c0f2e,#1c0f2e) padding-box,var(--grad) border-box;position:relative;z-index:2;margin-bottom:-24px}
.cyl-body{padding:46px 18px 30px;border:2px solid transparent;border-top:0;border-radius:0 0 115px 115px/0 0 24px 24px;background:linear-gradient(180deg,#120a1f,#0a0612) padding-box,var(--grad-v) border-box;text-align:center}
.cyl-body strong{display:block;font-size:2rem;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.cyl-body .bar-sm{margin:12px auto}
.cyl-body p{margin:0;font-size:.82rem;color:#d4cde0;line-height:1.45}
.dl-step{text-align:center;position:relative}
.dl-lake,.dl-step{position:relative}
.dl-lake::after,.dl-step::after{content:"";position:absolute;right:-19px;top:50%;width:14px;height:14px;border-top:2px solid var(--magenta);border-right:2px solid var(--magenta);transform:translateY(-50%) rotate(45deg);opacity:.9}
.dl-lake::before,.dl-step::before{content:"";position:absolute;right:-22px;top:50%;width:22px;height:1px;background:linear-gradient(90deg,var(--purple),var(--magenta))}
.dl-step-icon{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;border:1px solid rgba(190,120,255,.6);display:grid;place-items:center;background:#0d0a14;box-shadow:0 0 26px rgba(160,90,255,.3)}
.dl-step-icon .ico{width:44px;height:44px}
.dl-step-icon .ico-img{width:100%;height:100%}
.variant-b .dl-step-icon{border:0;background:transparent;box-shadow:none}
.dl-step-pink{border-color:rgba(255,80,150,.6);box-shadow:0 0 26px rgba(255,60,120,.25)}
.dl-step h4{font-size:1rem;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;display:inline-block}
.dl-step p{margin:0;font-size:.92rem;color:#d4cde0;line-height:1.5}

/* Intelligence artificielle */
.prog-eco .section-title{font-size:clamp(2rem,3.4vw,3.4rem)}
.prog-ai{background:radial-gradient(circle at 92% 20%,rgba(170,40,160,.28),transparent 32%),var(--bg2)}
.ai-paras{max-width:900px;display:grid;gap:22px;color:var(--muted2);font-size:1.1rem;line-height:1.75}
.ai-paras p{margin:0}
.ai-benefits{margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);padding-top:40px}
.ai-benefit{text-align:center;padding:10px 16px;border-left:1px solid var(--line)}
.ai-benefit:first-child{border-left:0}
.ai-icon{width:92px;height:92px;margin:0 auto 18px;border-radius:22px;border:1px solid rgba(190,120,255,.6);display:grid;place-items:center;background:#0d0a14;box-shadow:0 0 22px rgba(160,90,255,.25)}
.ai-icon .ico{width:44px;height:44px}
.ai-icon .ico-img{width:100%;height:100%;border-radius:22px}
.variant-b .ai-icon{border:0;background:transparent;box-shadow:none}
.ai-benefit b{display:block;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase}
.ai-benefit span{font-size:.95rem;color:#c6beca}

/* Écosystème */
.eco-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.eco-tile{border-radius:16px;border:1px solid rgba(255,70,140,.45);background:#0b0810;padding:12px;box-shadow:0 0 18px rgba(255,60,120,.08)}
.eco-tile h4{display:flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin:0 0 12px}
.eco-tile img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;display:block}
.divider-title{display:flex;align-items:center;gap:22px;margin:52px 0 30px;font-size:.9rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:#e6dfee}
.divider-title::before,.divider-title::after{content:"";flex:1;height:1px;background:var(--line)}
.buy-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.buy{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.buy-icon{width:72px;height:72px;border-radius:50%;border:1px solid rgba(255,80,150,.6);display:grid;place-items:center;background:#0d0a14;box-shadow:0 0 22px rgba(255,60,120,.2)}
.buy-icon .ico{width:34px;height:34px}
.buy-icon .ico-img{width:100%;height:100%}
.variant-b .buy-icon{border:0;background:transparent;box-shadow:none}
.buy h4{font-size:1rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px}
.buy p{margin:0;font-size:.9rem;color:#c6beca;line-height:1.5}

/* Technologie */
.prog-tech{background:radial-gradient(circle at 50% 45%,rgba(170,30,110,.28),transparent 34%),var(--bg2)}
.benefit-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:1240px;margin:auto}
.benefit-col{padding:20px 40px}
.benefit-col+.benefit-col{border-left:1px solid var(--line)}
.benefit-col .num{font-size:3.6rem;font-weight:300;line-height:1;letter-spacing:-.02em}
.benefit-col h4{font-size:1.5rem;margin:14px 0 12px;letter-spacing:-.02em}
.benefit-col p{color:#cfc7d4;margin:0;font-size:1.05rem;line-height:1.6}
.benefits-cta{text-align:center;margin-top:60px;padding-top:44px;border-top:1px solid var(--line)}

/* =============================== RÉALISATIONS =============================== */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.work-card{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#131017}
.work-media{height:250px;background:#21192a;overflow:hidden}
.work-media img{width:100%;height:100%;object-fit:cover;display:block}
.work-body{padding:28px;min-height:245px}
.work-logo{height:46px;width:auto;max-width:180px;object-fit:contain;object-position:left center;margin-bottom:14px;display:block}
.work-logo.logo-fibm{height:58px}
.work-logo.logo-white{filter:brightness(0) invert(1);height:42px}
.work-logo.logo-sentier{height:52px}
.work-logo.logo-aylmer{height:42px}
.work-logo.logo-barreau{height:58px}
.work-card h3{margin:0 0 9px;font-size:1.18rem}
.work-sector{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#9a92a0;margin-bottom:12px}
.tag{display:inline-block;padding:7px 12px;border:1px solid rgba(164,100,255,.36);border-radius:999px;color:#c5aaff;font-size:.75rem}
.work-objective{color:#aaa3ae;margin-top:12px;font-size:.9rem}

/* =============================== CONTACT =============================== */
.contact-section{background:#000}
.contact-grid{display:grid;grid-template-columns:.96fr 1.04fr;gap:5vw;align-items:start}
.contact-left .section-title{font-size:clamp(2.8rem,5vw,5.4rem);max-width:700px}
.contact-left .grad{display:block}
.contact-intro{font-size:1.05rem;line-height:1.7;color:#d4d0d8;max-width:520px;margin:30px 0 0}
.contact-card{border:1px solid rgba(255,255,255,.2);background:rgba(10,10,13,.64);border-radius:24px;padding:28px 32px 26px;box-shadow:0 18px 70px rgba(0,0,0,.28)}
.contact-card h3{font-size:1.75rem;line-height:1.2;margin:0 0 22px;letter-spacing:-.03em}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;background:#070709;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:14px 15px;color:#fff;font:inherit;outline:none;transition:border-color .18s,box-shadow .18s}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#e6e2ea}
.contact-form select{appearance:none;-webkit-appearance:none;color:#e6e2ea;background-image:linear-gradient(45deg,transparent 50%,#eee 50%),linear-gradient(135deg,#eee 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:46px}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:rgba(199,74,255,.72);box-shadow:0 0 0 3px rgba(173,63,255,.1)}
.contact-form textarea{min-height:130px;resize:vertical;grid-column:1/-1}
.contact-form .span-2{grid-column:1/-1}
.contact-form button{grid-column:1/-1;justify-content:center;width:100%;font-size:1.05rem;padding:15px 24px;border-radius:12px}
.contact-meta{margin-top:28px;padding:22px 28px;border:1px solid rgba(255,255,255,.16);border-radius:18px;display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,255,.012)}
.meta-item{display:flex;align-items:center;gap:18px;padding:0 24px;justify-content:center}
.meta-item+.meta-item{border-left:1px solid rgba(255,255,255,.18)}
.meta-icon{width:54px;height:54px;flex:none;border-radius:50%;border:1px solid rgba(195,60,255,.55);display:grid;place-items:center;box-shadow:0 0 18px rgba(195,60,255,.1)}
.meta-icon .ico{width:30px;height:30px}
.meta-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:#c75cff;margin-bottom:4px;font-weight:700}
.meta-value{font-size:1rem;color:#fff;text-decoration:none}
a.meta-value:hover{text-decoration:underline}
.footer{padding:24px 0 28px;text-align:center;color:#8d8795;font-size:.9rem;background:#000;border-top:1px solid var(--line)}

/* =============================== TABLETTE (≤ 1000 px) =============================== */
@media (max-width:1000px){
  :root{--header-h:84px}
  .section{padding:80px 0}
  .brand img{width:160px}
  .menu-toggle{display:flex}
  .header-inner{position:static}
  .nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;gap:0;background:rgba(8,7,12,.98);border-bottom:1px solid var(--line);padding:12px 18px 18px;backdrop-filter:blur(18px)}
  .menu-open .nav{display:flex}
  .nav a{width:100%;padding:13px 8px;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav a:last-child{border-bottom:0}
  .about-grid,.platform-grid,.planning-grid,.contact-grid{grid-template-columns:1fr}
  .about-left{padding:0 0 10px}
  .about-copy{padding:0;border-left:0}
  .advantage-grid{grid-template-columns:1fr 1fr}
  .adv-center{grid-column:1/-1;order:-1}
  .adv-core-wrap{min-height:260px}
  .media-grid{grid-template-columns:repeat(3,1fr)}
  .datalake-flow{grid-template-columns:1fr 1fr;gap:28px}
  .dl-lake::after,.dl-step::after,.dl-lake::before,.dl-step::before{display:none}
  .dl-lake{grid-column:1/-1}
  .dl-results{grid-column:1/-1}
  .ai-benefits{grid-template-columns:repeat(3,1fr);gap:20px 0}
  .ai-benefit{border-left:0}
  .eco-grid{grid-template-columns:repeat(3,1fr)}
  .buy-row{grid-template-columns:1fr 1fr}
  .benefit-cols{grid-template-columns:1fr}
  .benefit-col{padding:28px 0}
  .benefit-col+.benefit-col{border-left:0;border-top:1px solid var(--line)}
  .portfolio-grid{grid-template-columns:1fr 1fr}
  .planning-shot{transform:none}
  .contact-meta{grid-template-columns:1fr;gap:18px}
  .meta-item{justify-content:flex-start;padding:0}
  .meta-item+.meta-item{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:18px}
}

/* =============================== MOBILE (≤ 680 px) =============================== */
@media (max-width:680px){
  :root{--header-h:64px}
  .shell{width:min(100% - 40px,var(--max))}
  .section{padding:56px 0}
  .section-head{margin-bottom:30px}
  .section-label{margin-bottom:18px;font-size:.78rem}
  .section-label::after{margin-top:12px;width:54px;height:3px}
  .section-title{font-size:clamp(1.9rem,8vw,2.5rem)}
  .section-copy{font-size:1rem}
  .brand img{width:138px}
  .hero{min-height:auto;align-items:flex-start;padding:54px 0 58px}
  .hero-content{max-width:none}
  .hero-eyebrow{gap:8px 9px;font-size:.62rem;line-height:1.55;letter-spacing:.12em}
  .hero-eyebrow .dot{display:none}
  .hero h1{font-size:clamp(3rem,15vw,3.8rem);margin:26px 0 24px}
  .hero-sub{font-size:1.05rem;margin-bottom:28px}
  .hero-network{display:none}
  .about-left .section-title{font-size:clamp(2.8rem,13vw,3.6rem)}
  .about-copy p{font-size:1rem;margin-bottom:22px}
  .services-grid{grid-template-columns:1fr;gap:16px}
  .service-card{grid-template-columns:auto 1fr;gap:16px;padding:22px 20px;min-height:auto}
  .service-num{font-size:2.4rem}
  .service-card h3{font-size:1.25rem}
  .service-tag{font-size:.9rem;margin-bottom:14px}
  .service-list{font-size:.86rem;gap:7px}
  .service-deco{opacity:.6}
  .deco-fan,.deco-wave{display:none}
  .br-desktop{display:none}
  .pillars{font-size:.62rem;letter-spacing:.14em;gap:8px 0}
  .pillars li{padding:0 10px}
  .media-grid{grid-template-columns:1fr 1fr;gap:12px}
  .media-card{gap:18px;padding:16px}
  .ico-media{width:52px;height:52px}
  .media-icon .ico-img{width:96px;height:96px}
  .media-card h3{font-size:.95rem}
  .platform-copy .section-title{font-size:clamp(1.9rem,8.5vw,2.5rem)}
  .aitd-pill-lg{font-size:1.1rem;padding:8px 18px;margin-bottom:20px}
  .orbit{max-width:420px}
  .advantage-grid{grid-template-columns:1fr;gap:22px}
  .adv-center{order:0}
  .adv-head{min-height:0;text-align:left}
  .adv-center .adv-head{text-align:center}
  .adv-item{padding:16px}
  .adv-icon{width:54px;height:54px}
  .callout{flex-direction:column;align-items:flex-start;gap:14px;font-size:1rem;padding:20px}
  .h3-big{font-size:clamp(1.5rem,6.5vw,2rem)}
  .feat-grid{grid-template-columns:1fr;gap:4px;margin-top:22px}
  .planning-grid{gap:34px}
  .datalake-flow{grid-template-columns:1fr;gap:22px}
  .cylinder{max-width:200px}
  .ai-paras{font-size:1rem}
  .ai-benefits{grid-template-columns:1fr;gap:0;padding-top:10px;margin-top:36px}
  .ai-benefit{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;text-align:left;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
  .ai-icon{grid-row:1/3;width:64px;height:64px;margin:0;border-radius:16px}
  .ai-icon .ico{width:32px;height:32px}
  .ai-icon .ico-img{border-radius:16px}
  .eco-grid{grid-template-columns:1fr 1fr;gap:10px}
  .eco-tile{padding:10px}
  .eco-tile h4{font-size:.62rem;gap:6px;margin-bottom:8px}
  .divider-title{font-size:.7rem;letter-spacing:.2em;gap:12px;margin:36px 0 22px}
  .buy-row{grid-template-columns:1fr 1fr;gap:18px 12px}
  .buy{grid-template-columns:1fr;text-align:center;justify-items:center;gap:10px}
  .buy-icon{width:60px;height:60px}
  .buy h4{font-size:.78rem}
  .buy p{font-size:.8rem}
  .section-title.center{margin-bottom:30px}
  .benefit-col .num{font-size:2.6rem}
  .benefit-col h4{font-size:1.3rem}
  .benefit-col p{font-size:.98rem}
  .benefits-cta{margin-top:30px;padding-top:30px}
  .portfolio-grid{grid-template-columns:1fr 1fr;gap:12px}
  .work-media{height:120px}
  .work-body{padding:14px;min-height:0}
  .work-logo{height:30px;max-width:120px;margin-bottom:8px}
  .work-logo.logo-fibm,.work-logo.logo-barreau,.work-logo.logo-sentier{height:34px}
  .work-card h3{font-size:.9rem}
  .work-sector{font-size:.6rem;margin-bottom:8px}
  .tag{font-size:.62rem;padding:5px 9px}
  .work-objective{font-size:.75rem}
  .contact-left .section-title{font-size:clamp(2.6rem,12vw,3.4rem)}
  .contact-intro{font-size:1rem;margin-top:20px}
  .contact-card{padding:22px 18px;margin-top:10px}
  .contact-card h3{font-size:1.45rem}
  .contact-form{grid-template-columns:1fr}
  .contact-form .span-2,.contact-form textarea,.contact-form button{grid-column:auto}
  .contact-meta{padding:18px}
}