/* ============================================================
   DATAGIX — Refonte 2026 · Design System
   DA : bleu #104CBA / bleu logo #1789C6 · Nunito + Rubik
   ============================================================ */
:root{
  --blue:#104CBA;
  --blue-2:#1789C6;
  --cyan:#35B4F0;
  --navy:#060B1C;
  --navy-2:#0B1430;
  --ink:#101A2E;
  --text:#4E5A6E;
  --soft:#F3F7FD;
  --line:rgba(16,76,186,.10);
  --grad:linear-gradient(120deg,#104CBA 0%,#1789C6 55%,#35B4F0 100%);
  --shadow:0 20px 60px -20px rgba(6,20,60,.25);
  --r:18px;
  --font-h:'Inter','Nunito',sans-serif;
  --font-b:'Inter','Rubik',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;overscroll-behavior-x:none}
/* Evite qu'un scroll vertical pres du bord gauche soit interprete par le
   navigateur mobile comme un balayage "retour en arriere" (l'animation
   saccadee qui melange deux pages a l'ecran vue sur mobile). */
body{font-family:var(--font-b);color:var(--text);background:#fff;font-size:16.5px;line-height:1.7;overflow-x:hidden;width:100%;overscroll-behavior-x:none;touch-action:pan-y}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-h);color:var(--ink);line-height:1.16;font-weight:600;letter-spacing:-.02em}
.container{width:min(1200px,92%);margin-inline:auto}

/* ---------- Selection / scrollbar ---------- */
::selection{background:var(--blue);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0B1430}
::-webkit-scrollbar-thumb{background:var(--grad);border-radius:99px}

/* ============ HEADER ============ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:1000;transition:.4s}
.topbar{background:var(--navy);color:#B7C4DE;font-size:13px;padding:7px 0;max-height:200px;overflow:hidden;transition:max-height .35s,padding .35s}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;row-gap:6px}
.topbar span{display:inline-flex;align-items:center;gap:7px}
.topbar b{color:#fff;font-weight:500}
.topbar .tb-right{display:flex;gap:22px;flex-wrap:wrap;row-gap:6px}
/* Espace client : c'est le lien le plus utilise par les clients existants
   (facturation, tickets). Il etait dans le bandeau du haut sur l'ancien
   site -- il y reste. */
.topbar .tb-client{color:#fff;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:.25s}
.topbar .tb-client:hover{color:var(--cyan)}
.topbar .tb-social{display:inline-flex;align-items:center;gap:13px}
.topbar .tb-social a{display:inline-flex;color:#B7C4DE;transition:.25s}
.topbar .tb-social a:hover{color:#fff}
.topbar .tb-social svg{width:15px;height:15px;fill:currentColor;display:block}
.header-main{background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.35s}
.header-main .container{display:flex;align-items:center;justify-content:space-between;height:78px}
/* max-height (pas margin-top) : sur mobile le topbar peut passer sur 2
   lignes (texte qui empile), une marge negative fixe ne le masquait
   plus qu'a moitie et laissait une bande coupee visible au scroll. */
.site-header.scrolled .topbar{max-height:0;padding-top:0;padding-bottom:0}
.site-header.scrolled .header-main{border-bottom-color:var(--line);box-shadow:0 10px 40px -18px rgba(6,20,60,.18)}
.logo img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:34px}
.nav>li{list-style:none;position:relative}
.nav a{font-size:15px;font-weight:500;color:var(--ink);position:relative;padding:8px 0;display:inline-flex;align-items:center;gap:5px}
.nav>li>a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2.5px;border-radius:9px;background:var(--grad);transition:.35s cubic-bezier(.6,0,.2,1)}
.nav>li>a:hover::after,.nav>li>a.active::after{width:100%}
.nav .caret{font-size:10px;opacity:.55;transition:.3s}
.nav li:hover .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 14px);left:-18px;background:#fff;min-width:270px;border-radius:16px;padding:10px;box-shadow:0 30px 80px -20px rgba(6,20,60,.3);opacity:0;visibility:hidden;transform:translateY(14px);transition:.3s cubic-bezier(.5,0,.2,1);border:1px solid var(--line)}
.nav li:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;font-size:14.5px;transition:.22s}
.dropdown a:hover{background:var(--soft);color:var(--blue);transform:translateX(4px)}
.dropdown .d-ico{width:34px;height:34px;border-radius:9px;background:var(--soft);display:grid;place-items:center;font-size:15px;flex-shrink:0}
.header-cta{display:inline-flex}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:26px;height:2.5px;background:var(--ink);border-radius:9px;transition:.3s}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-h);font-weight:500;font-size:15px;padding:15px 30px;border-radius:99px;position:relative;overflow:hidden;transition:.35s;cursor:pointer;border:0}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 14px 35px -12px rgba(16,76,186,.55)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 45px -12px rgba(16,76,186,.65)}
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-110%);transition:.6s}
.btn-primary:hover::before{transform:translateX(110%)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);transform:translateY(-3px)}
.btn-line{background:transparent;color:var(--blue);border:1.5px solid rgba(16,76,186,.3)}
.btn-line:hover{background:var(--blue);color:#fff;transform:translateY(-3px)}
.btn .arr{transition:.3s}
.btn:hover .arr{transform:translateX(5px)}

/* ============ HERO ============ */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 500px at 85% -10%,rgba(23,137,198,.28),transparent 60%),
  radial-gradient(700px 500px at -10% 110%,rgba(16,76,186,.35),transparent 60%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(120,160,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.06) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 30%,transparent 75%)}
#pixels{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;z-index:2;padding:210px 0 130px;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.hero-inner.solo{grid-template-columns:1fr;text-align:center;padding:190px 0 110px}
.hero-inner.solo .hero-copy{margin-inline:auto;max-width:820px}
.hero-inner.solo .hero-actions,.hero-inner.solo .badge{justify-content:center}
.badge{display:inline-flex;align-items:center;gap:9px;background:rgba(23,137,198,.14);border:1px solid rgba(23,137,198,.35);color:#9CD4F5;font-size:13px;font-weight:500;padding:8px 18px;border-radius:99px;margin-bottom:26px}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(53,180,240,.55)}50%{box-shadow:0 0 0 8px rgba(53,180,240,0)}}
.hero h1{color:#fff;font-size:clamp(34px,4.4vw,54px);font-weight:500;letter-spacing:-.025em;line-height:1.14;margin-bottom:22px;max-width:17ch}
.hero h1 .grad{color:#7EC8F5;background:none;-webkit-background-clip:initial;background-clip:initial}
.hero p.lead{font-size:19px;color:#A9B7D4;max-width:560px;margin-bottom:38px}
.hero-inner.solo p.lead{margin-inline:auto}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-visual{position:relative}
.hero-visual .main-img{border-radius:26px;box-shadow:0 40px 100px -30px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12);animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.float-card{position:absolute;background:rgba(13,24,54,.75);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:14px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 20px 50px -15px rgba(0,0,0,.5);animation:float 6s ease-in-out infinite}
.float-card .fc-ico{width:40px;height:40px;border-radius:11px;background:var(--grad);display:grid;place-items:center;font-size:18px}
.float-card b{display:block;color:#fff;font-family:var(--font-h);font-size:15px}
.float-card small{color:#93A3C4;font-size:12px}
.fc-1{top:6%;left:-9%;animation-delay:-2s}
.fc-2{bottom:8%;right:-7%;animation-delay:-4s}
.hero-partners{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.09);padding:26px 0 30px}
.hero-partners .container{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.hero-partners small{color:#7386AB;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* ============ SECTIONS ============ */
.section{padding:110px 0;position:relative}
.section.soft{background:var(--soft)}
.section.dark{background:var(--navy);color:#B4C1DC}
.section.dark h2,.section.dark h3{color:#fff}
.sec-head{max-width:680px;margin-bottom:64px}
.sec-head.center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--blue-2);font-family:var(--font-h);font-weight:800;font-size:13.5px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2.5px;border-radius:9px;background:var(--grad)}
.sec-head.center .eyebrow::after{content:"";width:26px;height:2.5px;border-radius:9px;background:var(--grad)}
h2.h2{font-size:clamp(30px,3.6vw,44px);letter-spacing:-.8px;margin-bottom:18px}
.sec-head p{font-size:17.5px}

/* ============ CARDS ============ */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:38px 32px;position:relative;overflow:hidden;transition:.45s cubic-bezier(.5,0,.2,1)}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:.45s}
.card:hover{transform:translateY(-10px);box-shadow:var(--shadow);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card .ico{width:62px;height:62px;border-radius:16px;background:var(--soft);display:grid;place-items:center;margin-bottom:24px;transition:.4s;font-size:26px}
.card .ico img{width:34px;height:34px;object-fit:contain}
.card:hover .ico{background:var(--grad);transform:rotate(-6deg) scale(1.06)}
.card:hover .ico img{filter:brightness(0) invert(1)}
.card h3{font-size:21px;margin-bottom:12px}
.card p{font-size:15.5px}
.card .more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--blue);font-family:var(--font-h);font-weight:800;font-size:14.5px}
.card .more .arr{transition:.3s}
.card:hover .more .arr{transform:translateX(5px)}
.section.dark .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09)}
.section.dark .card h3{color:#fff}
/* Les icones SVG ont des traits sombres (luminance 29 a 194) : sur le navy
   elles disparaissaient. La pastille passe en blanc pour les rendre lisibles.
   Exception plus bas : ssl-secure-domain.svg est claire a 56 %, elle garde
   un fond sombre sinon c'est l'inverse qui se produit. */
.section.dark .card .ico{background:#fff}
.section.dark .card .ico:has(img[src*="ssl-secure-domain"]){background:rgba(255,255,255,.07)}

/* ============ SPLIT ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split.rev>.split-media{order:2}
.split-media{position:relative}
.split-media .frame{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.split-media .frame img{width:100%;height:100%;object-fit:cover;transition:1.2s cubic-bezier(.4,0,.2,1)}
.split-media .frame:hover img{transform:scale(1.05)}
/* Photo detouree (fond transparent) : taille native, sans cadre ni ombre rectangulaire */
.split-media.cutout{max-width:465px;margin-inline:auto}
.split-media.cutout .frame{border-radius:0;overflow:visible;box-shadow:none;background:transparent}
.split-media.cutout .frame img{height:auto;object-fit:contain;filter:drop-shadow(0 18px 40px rgba(10,32,66,.16))}
.split-media.cutout .frame:hover img{transform:none}
.split-media::after{content:"";position:absolute;width:180px;height:180px;background-image:radial-gradient(rgba(16,76,186,.4) 2.5px,transparent 2.5px);background-size:16px 16px;z-index:-1;right:-40px;bottom:-40px;animation:drift 9s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(12px,-12px)}}
.stamp{position:absolute;left:-30px;bottom:34px;background:#fff;border-radius:18px;padding:20px 26px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:center;border:1px solid var(--line)}
.stamp .num{font-family:var(--font-h);font-weight:800;font-size:30px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stamp small{color:var(--text);font-size:13px;line-height:1.35}
.ticks{margin-top:28px;display:grid;gap:14px}
.ticks li{list-style:none;display:flex;gap:13px;align-items:flex-start;font-size:15.5px}
.ticks .tk{width:24px;height:24px;flex-shrink:0;border-radius:8px;background:var(--soft);color:var(--blue);display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:2px;transition:.3s}
.ticks li:hover .tk{background:var(--grad);color:#fff}
.section.dark .ticks .tk{background:rgba(255,255,255,.08);color:var(--cyan)}

/* ============ STATS ============ */
.stats{position:relative;background:var(--grad);border-radius:30px;padding:66px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;color:#fff;overflow:hidden;box-shadow:0 40px 90px -30px rgba(16,76,186,.55)}
.stats::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 2px,transparent 2px);background-size:22px 22px;mask-image:linear-gradient(120deg,#000,transparent 55%)}
.stat{text-align:center;position:relative}
.stat .n{font-family:var(--font-h);font-weight:800;font-size:clamp(38px,4.5vw,56px);line-height:1}
.stat .n sup{font-size:.55em;color:#BFE3FA}
.stat p{color:#D6E9FA;font-size:14.5px;margin-top:8px}

/* ============ MARQUEE ============ */
.marquee{overflow:hidden;position:relative;padding:10px 0;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:70px;width:max-content;animation:scroll 32s linear infinite;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee img{height:52px;width:auto;object-fit:contain;filter:grayscale(1) opacity(.55);transition:.35s}
.marquee img:hover{filter:none;transform:scale(1.1)}
.section.dark .marquee img{filter:grayscale(1) brightness(2.2) opacity(.5)}
.section.dark .marquee img:hover{filter:brightness(1.6)}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:44px 32px 36px;transition:.4s}
.step:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.step::before{counter-increment:step;content:"0" counter(step);position:absolute;top:-24px;left:28px;width:52px;height:52px;border-radius:15px;background:var(--grad);color:#fff;font-family:var(--font-h);font-weight:800;font-size:19px;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(16,76,186,.5)}
.step h3{font-size:19px;margin-bottom:10px}
.step p{font-size:15px}

/* ============ PRICING ============ */
.price-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:42px 36px;position:relative;transition:.45s;display:flex;flex-direction:column}
.price-card:hover{transform:translateY(-10px);box-shadow:var(--shadow)}
.price-card.pop{background:var(--navy);color:#AEBDDA;border:0;box-shadow:0 40px 90px -25px rgba(6,20,60,.5)}
.price-card.pop h3,.price-card.pop .amount{color:#fff}
.price-card .tag{position:absolute;top:-14px;right:26px;background:var(--grad);color:#fff;font-family:var(--font-h);font-weight:800;font-size:12px;padding:7px 16px;border-radius:99px;letter-spacing:.06em}
.price-card h3{font-size:20px;margin-bottom:6px}
.price-card .amount{font-family:var(--font-h);font-weight:800;font-size:42px;color:var(--ink);margin:14px 0 4px}
.price-card .amount small{font-size:15px;font-weight:500;color:var(--text)}
.price-card.pop .amount small{color:#8FA2C8}
.price-card ul{margin:26px 0 30px;display:grid;gap:12px}
.price-card li{list-style:none;display:flex;gap:11px;font-size:14.5px;align-items:center}
.price-card li::before{content:"✓";color:var(--blue-2);font-weight:800}
.price-card .btn{margin-top:auto;justify-content:center}

/* ============ TEAM ============ */
.team-card{position:relative;border-radius:22px;overflow:hidden;background:var(--navy);aspect-ratio:3/3.6}
.team-card img{width:100%;height:100%;object-fit:cover;transition:.8s cubic-bezier(.4,0,.2,1)}
.team-card:hover img{transform:scale(1.08);opacity:.45}
.team-card .tc-info{position:absolute;inset:auto 0 0 0;padding:26px;background:linear-gradient(transparent,rgba(6,11,28,.95));transform:translateY(8px);transition:.45s}
.team-card:hover .tc-info{transform:translateY(0)}
.team-card b{color:#fff;font-family:var(--font-h);font-size:18px;display:block}
.team-card small{color:#9CD4F5;font-size:13px}

/* ============ BLOG ============ */
.post-card{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.45s;display:flex;flex-direction:column}
.post-card:hover{transform:translateY(-9px);box-shadow:var(--shadow)}
.post-card .pc-img{aspect-ratio:16/9.5;overflow:hidden}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover;transition:.9s}
.post-card:hover .pc-img img{transform:scale(1.07)}
.post-card .pc-body{padding:28px;display:flex;flex-direction:column;flex:1}
.post-card .meta{font-size:12.5px;color:var(--blue-2);font-weight:500;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
.post-card h3{font-size:19px;line-height:1.35;margin-bottom:10px}
.post-card p{font-size:14.5px;flex:1}

/* ============ CTA BAND ============ */
.cta-band{position:relative;background:var(--navy);border-radius:32px;padding:80px 60px;color:#fff;overflow:hidden;text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 50% -40%,rgba(23,137,198,.4),transparent 70%)}
.cta-band::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,160,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.07) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 100%,#000,transparent 70%)}
.cta-band h2{color:#fff;font-size:clamp(28px,3.4vw,42px);margin-bottom:16px;position:relative;z-index:1}
.cta-band p{color:#A9B7D4;max-width:560px;margin:0 auto 36px;position:relative;z-index:1}
.cta-band .hero-actions{justify-content:center;position:relative;z-index:1}

/* ============ CONTACT ============ */
.contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.c-info{display:grid;gap:18px}
.c-line{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;transition:.35s}
.c-line:hover{transform:translateX(6px);box-shadow:var(--shadow)}
.c-line .ci{width:52px;height:52px;flex-shrink:0;border-radius:14px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:21px}
.c-line b{display:block;color:var(--ink);font-family:var(--font-h);font-size:16px}
.c-line small{font-size:14px}
.form{background:#fff;border:1px solid var(--line);border-radius:26px;padding:46px;box-shadow:var(--shadow)}
.form h3{font-size:24px;margin-bottom:26px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:block;font-size:13.5px;font-weight:500;color:var(--ink);margin:0 0 7px}
.form .fg{margin-bottom:20px}
.form input,.form select,.form textarea{width:100%;border:1.5px solid #E3EAF6;background:var(--soft);border-radius:12px;padding:14px 17px;font-family:var(--font-b);font-size:15px;color:var(--ink);outline:none;transition:.3s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--blue-2);background:#fff;box-shadow:0 0 0 4px rgba(23,137,198,.12)}
.form textarea{min-height:130px;resize:vertical}

/* ============ FOOTER ============ */
.site-footer{background:var(--navy);color:#93A3C4;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 400px at 90% 0%,rgba(16,76,186,.18),transparent 60%)}
.f-top{position:relative;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:50px;padding:80px 0 60px}
.f-brand img{height:42px;margin-bottom:22px;filter:brightness(0) invert(1)}
.f-brand p{font-size:14.5px;max-width:300px}
.f-arpce{margin-top:20px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:12px 16px;border-radius:13px;font-size:12px;line-height:1.5}
.f-arpce img{height:34px;filter:brightness(0) invert(1);opacity:.9}
.f-col h4{color:#fff;font-size:16px;margin-bottom:22px}
.f-col ul{display:grid;gap:12px}
.f-col li{list-style:none}
.f-col a{font-size:14.5px;transition:.25s;display:inline-flex;align-items:center;gap:8px}
.f-col a::before{content:"→";color:var(--cyan);opacity:0;margin-left:-16px;transition:.25s}
.f-col a:hover{color:#fff;padding-left:16px}
.f-col a:hover::before{opacity:1;margin-left:0}
/* Coordonnees repliees en bas de page : uniquement sur mobile, ou le
   bandeau du haut est masque pour degager l'ecran (cf. media query). */
.f-contact-mob{display:none}
/* Le bandeau du haut est masque sur mobile : sans ces icones en pied de
   page, les reseaux sociaux seraient invisibles sur telephone. */
.f-social{display:flex;gap:12px;margin-top:24px}
.f-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);color:#B7C4DE;transition:.25s}
.f-social a:hover{background:var(--blue);color:#fff;transform:translateY(-2px)}
.f-social svg{width:17px;height:17px;fill:currentColor;display:block}
.f-bottom{position:relative;border-top:1px solid rgba(255,255,255,.08);padding:24px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px}
.f-bottom a:hover{color:#fff}

/* ============ SPEC TABLES (serveurs) ============ */
.spec-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 14px 44px -22px rgba(6,20,60,.18)}
.spec-table{width:100%;border-collapse:collapse;min-width:820px;font-size:14.5px}
.spec-table th{font-family:var(--font-h);font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);text-align:left;padding:18px 20px;border-bottom:2px solid var(--line);background:var(--soft)}
.spec-table td{padding:20px;border-bottom:1px solid var(--line);vertical-align:middle}
.spec-table tr:last-child td{border-bottom:0}
.spec-table tbody tr{transition:.25s}
.spec-table tbody tr:hover{background:var(--soft)}
.spec-table b{font-family:var(--font-h);color:var(--ink);font-size:15.5px;display:block}
.spec-table small{color:var(--text)}
.spec-table .btn{padding:11px 22px;font-size:13.5px;white-space:nowrap}
.gamme-head{display:flex;gap:22px;align-items:center;margin:70px 0 26px}
.gamme-head img{width:74px;height:74px;object-fit:contain}
.gamme-head h3{font-size:26px;margin-bottom:6px}
.gamme-head p{font-size:15px;max-width:760px}

/* ============ FAQ ============ */
.faq{max-width:860px;margin-inline:auto;display:grid;gap:16px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.3s}
.faq-item[open]{box-shadow:var(--shadow)}
.faq-item summary{cursor:pointer;list-style:none;padding:22px 26px;font-family:var(--font-h);font-weight:800;font-size:17px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:24px;color:var(--blue-2);transition:.3s;flex-shrink:0}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-body{padding:0 26px 24px;font-size:15px}
.faq-item .faq-body p{margin-bottom:10px}
.faq-item .faq-body ul{margin:8px 0 12px 20px}
.faq-item .faq-body li{margin-bottom:6px}

/* ============ OS GRID ============ */
.os-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:18px}
.os-grid .card{padding:26px 14px;text-align:center}
.os-grid .card img{height:46px;margin:0 auto 12px}
.os-grid .card h3{font-size:15px;margin:0}

/* ============ TEAM (fiche membre) ============ */
.member{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.45s}
.member:hover{transform:translateY(-9px);box-shadow:var(--shadow)}
.member .m-img{aspect-ratio:1/1;overflow:hidden}
.member .m-img img{width:100%;height:100%;object-fit:cover;transition:.8s}
.member:hover .m-img img{transform:scale(1.07)}
.member .m-body{padding:24px 26px 28px}
.member h3{font-size:19px;margin-bottom:2px}
.member .role{color:var(--blue-2);font-family:var(--font-h);font-weight:800;font-size:13.5px;margin-bottom:10px}
.member p{font-size:14px}
.section.dark .member{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09)}
.section.dark .member h3{color:#fff}

/* ============ REVEAL ANIMATIONS ============ */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-l{opacity:0;transform:translateX(-46px);transition:.95s cubic-bezier(.4,0,.2,1)}
.reveal-r{opacity:0;transform:translateX(46px);transition:.95s cubic-bezier(.4,0,.2,1)}
.reveal-l.in,.reveal-r.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(30px);transition:.8s cubic-bezier(.4,0,.2,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(2){transition-delay:.12s}
.stagger.in>*:nth-child(3){transition-delay:.24s}
.stagger.in>*:nth-child(4){transition-delay:.36s}
.stagger.in>*:nth-child(5){transition-delay:.48s}
.stagger.in>*:nth-child(6){transition-delay:.6s}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr;padding-top:190px}
  .hero-visual{display:none}
  .split,.contact-wrap{grid-template-columns:1fr;gap:44px}
  .split.rev>.split-media{order:0}
  .split-media::after{right:0;bottom:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:40px}
  .f-top{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .topbar .tb-right span:last-child{display:none}
  /* Le flou (backdrop-filter) sur un entete position:fixed force le
     navigateur a re-flouter tout ce qui defile dessous a chaque frame :
     un des principaux responsables des saccades au scroll sur mobile.
     Le fond est deja a 90% opaque, le flou n'apporte presque rien ici. */
  /* !important : la regle body.accueil.scrolled plus bas dans le fichier
     a le meme poids et vient apres, donc l'emporterait sinon. C'est
     plus qu'un detail de perf : backdrop-filter cree un nouveau bloc
     conteneur pour ses descendants position:fixed. Le menu plein-ecran
     mobile (.nav) est un enfant de .header-main -> avec le flou actif,
     le menu se positionnait par rapport a la barre d'entete (qui ne
     fait que ~80px) au lieu de tout l'ecran, laissant le haut decouvert
     (bande blanche visible au-dessus du menu, entete d'origine
     transparaissant derriere). */
  .header-main,body.accueil .site-header.scrolled .header-main{backdrop-filter:none!important}
  /* Sur mobile, le bandeau tel/e-mail/adresse mange une grosse part de
     l'ecran en haut : on le masque ici et on le remonte en bas de page
     (bloc .f-contact-mob, juste au-dessus des CGV). */
  .topbar{display:none}
  .f-contact-mob{position:relative;display:grid;gap:12px;padding:26px 0 4px;
    border-top:1px solid rgba(255,255,255,.08);font-size:14.5px}
  .f-contact-mob a,.f-contact-mob span{display:inline-flex;align-items:center;gap:9px;color:#93A3C4}
  .f-contact-mob b{color:#fff;font-weight:500}
  .f-contact-mob a:hover{color:#fff}
  /* Sur mobile, le formulaire de devis passe avant le bloc coordonnees
     (bureaux, telephone, e-mail) : le visiteur tombe directement sur le
     formulaire au lieu de devoir scroller pour le trouver. */
  .contact-wrap .form{order:-1}
  /* Meme logique pour les autres flous du haut de page : chacun force
     un recalcul GPU a chaque frame de scroll pendant qu'il reste a
     l'ecran (bandeau du haut, pastille du hero) -- source probable des
     a-coups/glitches d'affichage vus au scroll sur certains telephones. */
  body.accueil .site-header .topbar{backdrop-filter:none!important}
  .hv-annonce,.btn-rond.clair{backdrop-filter:none!important}
  /* Sur mobile le scroll est rapide (doigt) et irregulier : meme avec
     une marge de declenchement anticipee, le contenu pouvait rester
     invisible un instant (grand blanc) avant d'apparaitre d'un coup.
     Plus simple et plus fiable : pas d'animation d'apparition, tout est
     visible directement. */
  .reveal,.reveal-l,.reveal-r,.stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .nav{position:fixed;inset:0;height:100vh;height:100dvh;background:var(--navy);flex-direction:column;justify-content:flex-start;align-items:center;gap:22px;padding:110px 24px 50px;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateX(100%);transition:.45s cubic-bezier(.6,0,.2,1);z-index:1001}
  .nav.open{transform:none}
  .nav a{color:#fff;font-size:20px}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;background:transparent;box-shadow:none;border:0;display:none;margin-top:14px}
  .nav li.open .dropdown{display:flex;flex-direction:column;gap:4px}
  .nav li.open .caret{transform:rotate(180deg)}
  .dropdown a{color:#B7C4DE;font-size:16px}
  .burger{display:flex;z-index:1002}
  .burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);background:#fff}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);background:#fff}
  .header-cta{display:none}
  .f-top{grid-template-columns:1fr}
  .cta-band{padding:60px 26px}
  .form{padding:30px 22px}
  .f-row{grid-template-columns:1fr}
  .stamp{left:10px}
}

/* ============ PAGES LEGALES ============ */
.legal{max-width:820px;margin-inline:auto}
.legal-art{padding:30px 0;border-bottom:1px solid var(--line)}
.legal-art:first-child{padding-top:0}
.legal-art:last-child{border-bottom:0}
.legal-art h2{font-family:var(--font-h);font-size:20px;color:var(--ink);margin-bottom:14px;position:relative;padding-left:18px}
.legal-art h2::before{content:"";position:absolute;left:0;top:.34em;width:6px;height:6px;border-radius:2px;background:var(--grad)}
.legal-art p{color:var(--text);margin-bottom:14px;line-height:1.75}
.legal-art p:last-child{margin-bottom:0}
.legal-art a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.legal-art a:hover{color:var(--blue-2)}
.legal-art ul{margin:0 0 14px;padding-left:0;list-style:none}
.legal-art ul li{position:relative;padding-left:26px;margin-bottom:9px;color:var(--text);line-height:1.7}
.legal-art ul li::before{content:"";position:absolute;left:8px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--blue-2)}
.legal-rights{margin:0}
.legal-rights dt{font-family:var(--font-h);font-weight:700;color:var(--ink);margin-top:16px}
.legal-rights dt:first-child{margin-top:0}
.legal-rights dd{margin:4px 0 0;color:var(--text);line-height:1.7}
.legal-table{width:100%;border-collapse:collapse;margin-top:4px}
.legal-table th,.legal-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.legal-table tr:last-child th,.legal-table tr:last-child td{border-bottom:0}
.legal-table th{font-family:var(--font-b);font-weight:500;color:var(--ink);white-space:nowrap;width:42%;background:var(--soft)}
.legal-table td{color:var(--text)}
@media(max-width:640px){
  .legal-art{padding:24px 0}
  .legal-art h2{font-size:18px}
  .legal-table th,.legal-table td{display:block;width:auto;white-space:normal;border-bottom:0;padding:10px 14px}
  .legal-table th{background:var(--soft);border-radius:8px 8px 0 0}
  .legal-table tr{display:block;margin-bottom:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
}

/* ============ ARTICLES ============ */
.article{max-width:800px;margin-inline:auto}
.article h2{font-family:var(--font-h);font-size:23px;color:var(--ink);margin:34px 0 14px;line-height:1.3}
.article h2:first-child{margin-top:0}
.article p{color:var(--text);line-height:1.8;margin-bottom:16px}
.article ul{margin:0 0 18px;padding-left:0;list-style:none}
.article ul li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--text);line-height:1.75}
.article ul li::before{content:"";position:absolute;left:8px;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--blue-2)}
.article a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.article a:hover{color:var(--blue-2)}
.article-back{margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.article-back a{font-family:var(--font-h);font-weight:800;font-size:15px;text-decoration:none}
/* --- Elements produits par l'editeur WordPress -----------------------------
   Les pages sont ecrites en HTML a la main, mais les articles sont rediges
   par le client dans l'editeur. Celui-ci genere des sous-titres, des images,
   des listes numerotees, des citations et des tableaux : sans ces regles,
   une image inseree deborde de la colonne de lecture et les sous-titres
   sortent a la taille par defaut du navigateur. */
.article h3{font-family:var(--font-h);font-size:19px;color:var(--ink);margin:28px 0 12px;line-height:1.35}
.article ol{margin:0 0 18px;padding-left:22px}
.article ol li{color:var(--text);line-height:1.75;margin-bottom:10px}
.article img{max-width:100%;height:auto;border-radius:16px;display:block}
.article figure{margin:28px 0}
.article figcaption{font-size:14px;color:var(--text);opacity:.75;margin-top:10px;text-align:center}
.article blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--blue-2)}
.article blockquote p{margin-bottom:0;font-size:18px;line-height:1.7}
.article strong{color:var(--ink);font-weight:700}
.article table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.article th,.article td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.article th{background:var(--soft);font-family:var(--font-h);font-weight:700;color:var(--ink)}
.article .wp-block-image{margin:28px 0}
/* Un tableau large ne doit pas faire deborder la page sur mobile. */
.article .wp-block-table{overflow-x:auto}
@media(max-width:640px){ .article h2{font-size:20px;margin-top:28px} }

/* ============ HERO PHOTO PLEINE LARGEUR (style Cisco) ============ */
/* La photo de l'equipe occupe tout le bloc, un voile assure la lisibilite
   du texte. Remplace l'ancien hero a vignette flottante. */
/* Hauteur de hero identique sur toutes les pages. Sans ca, la hauteur
   suit la longueur du texte (de 538 a 863 px selon la page) et la meme
   photo se retrouve cadree differemment d'une page a l'autre. 790 px
   contient le contenu le plus long (553 px) plus ses marges. */
.hero.photo{background:#07182D;min-height:790px;display:flex;align-items:center}
.hero.photo .hero-bg{position:absolute;inset:0;z-index:0}
/* 38% plutot que le centre : les visages sont dans la moitie haute des
   photos, un recadrage centre leur coupe le haut du crane. */
.hero.photo .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
/* cette photo a ses personnes decalees a droite du cadre d'origine :
   un recadrage centre les fait sortir du cadre sur mobile. */
.hero.photo .hero-bg img[src*="DATAGIX-11-v2"]{object-position:80% 38%}
.hero.photo .hero-bg img[src*="microsoft-v3"]{object-position:63% 38%}
.hero.photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(6,14,32,.94) 0%,rgba(6,14,32,.82) 38%,rgba(6,14,32,.42) 68%,rgba(6,14,32,.28) 100%)}
/* pas de width:100% ici : .container fixe deja min(1200px,92%) et se
   centre ; l'ecraser collait le texte contre le bord gauche de l'ecran
   sur les ecrans larges (aucune marge, mots limites/coupes a l'oeil). */
.hero.photo .hero-inner{grid-template-columns:1fr;padding:150px 0 80px;text-align:left}
.hero.photo #pixels{z-index:1;opacity:.5}
.hero.photo .hero-copy{max-width:640px}
.hero.photo .badge{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#CFE4F5;
  text-transform:uppercase;letter-spacing:.12em;font-size:11.5px}
.hero.photo p.lead{color:#D5DEEB}
.hero.photo .ticks li{color:#E6ECF5}
.hero.photo .ticks .tk{background:rgba(255,255,255,.14);color:#fff}
.hero.photo .ticks li:hover .tk{background:var(--blue-2);color:#fff}

/* variante : texte centre, pour les pages de contenu */
.hero.photo.center .hero-inner{text-align:center}
.hero.photo.center .hero-copy{margin-inline:auto;max-width:760px}
.hero.photo.center .hero-actions,.hero.photo.center .badge{justify-content:center}
@media(min-width:901px){
  .hero.photo.center::after{background:linear-gradient(180deg,rgba(6,14,32,.9) 0%,rgba(6,14,32,.78) 55%,rgba(6,14,32,.9) 100%)}
}

/* variante : bandeau court, pour les pages secondaires */
/* compact ne joue plus sur la hauteur, sinon le cadrage de la photo
   differerait a nouveau d'une page a l'autre : il ne change que le titre. */
.hero.photo.compact h1{font-size:clamp(30px,3.6vw,44px)}

/* Sous 900px, la photo pleine hauteur (calee sur la longueur du texte)
   recadrait a l'extreme et noyait tout le contenu sous le voile sombre.
   La photo redevient un bandeau de hauteur fixe en haut de la section
   (juste assez pour le badge + le titre), qui s'estompe vers le navy
   uni : seul le titre se lit sur la photo, le reste (texte, boutons,
   chiffres) suit dessous sur fond plein. */
@media(max-width:900px){
  .hero.photo{min-height:auto}
  /* le bandeau demarre SOUS l'entete, pas derriere : autrement le haut
     de la photo (souvent les visages) disparait derriere la barre
     blanche et il ne reste que des epaules -> effet "photo coupee". */
  .hero.photo .hero-bg{position:absolute;inset:auto;top:var(--header-h, 160px);left:0;right:0;height:420px;bottom:auto}
  .hero.photo::after{top:var(--header-h, 160px);left:0;right:0;height:420px;bottom:auto;
    background:linear-gradient(180deg,rgba(6,14,32,.5) 0%,rgba(6,14,32,.86) 68%,#07182D 100%)}
  /* espace au-dessus du badge = hauteur reelle de l'entete (mesuree en
     JS, cf. --header-h) + une respiration. Une valeur fixe ne marche
     pas : le bandeau du haut passe sur 1, 2 ou 3 lignes selon la
     largeur, et le badge finissait cache derriere l'entete. */
  .hero.photo .hero-inner{padding:calc(var(--header-h, 160px) + 28px) 0 70px}
  .hero.photo.grp-microsoft,.hero.photo.grp-odoo{min-height:auto}
}
@media(max-width:600px){
  .hero.photo .hero-bg,.hero.photo::after{height:340px}
  .hero.photo .hero-inner{padding:calc(var(--header-h, 160px) + 24px) 0 60px}
}

/* ============ ACCUEIL : HERO VIDEO PLEIN ECRAN ============ */
/* Reprise du parti pris de onepercentfortheplanet.fr : la video occupe
   tout l'ecran, l'en-tete passe par-dessus, le texte tient sur la moitie
   gauche. */
body.accueil .site-header .header-main{background:transparent;backdrop-filter:none;border-bottom-color:rgba(255,255,255,.14)}
body.accueil .site-header .topbar{background:rgba(6,14,32,.55);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}
body.accueil .site-header .topbar span,body.accueil .site-header .topbar b{color:#DCE6F2}
body.accueil .site-header .nav > li > a{color:#fff}
body.accueil .site-header .nav > li > a:hover{color:#9CD4F5}
body.accueil .site-header .logo img{filter:brightness(0) invert(1)}
body.accueil .site-header .burger span{background:#fff}
/* au scroll, l'en-tete redevient blanc et lisible */
body.accueil .site-header.scrolled .header-main{background:rgba(255,255,255,.94);backdrop-filter:blur(18px)}
body.accueil .site-header.scrolled .nav > li > a{color:var(--ink)}
body.accueil .site-header.scrolled .logo img{filter:none}
body.accueil .site-header.scrolled .burger span{background:var(--ink)}

.hero-video{position:relative;min-height:100vh;display:flex;align-items:center;background:#060E20;overflow:hidden}
.hero-video video,.hero-video .hv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-video .hv-poster{z-index:0}
.hero-video video{opacity:0;transition:opacity .8s ease}
.hero-video video.pret{opacity:1;z-index:1}
.hero-video::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(94deg,rgba(6,14,32,.88) 0%,rgba(6,14,32,.7) 34%,rgba(6,14,32,.3) 62%,rgba(6,14,32,.15) 100%)}
/* pas de width:100% ici : .container fixe deja min(1200px,92%) et se
   centre, l ecraser collait le texte au bord de l ecran */
.hv-inner{position:relative;z-index:3;padding:200px 0 120px}
.hv-copy{max-width:620px}
.hv-annonce{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);color:#fff;font-size:14px;font-weight:500;padding:10px 22px;border-radius:99px;margin-bottom:34px}
.hero-video h1{color:#fff;font-weight:700;font-size:clamp(34px,4.6vw,58px);line-height:1.12;letter-spacing:-.02em;margin-bottom:30px}
.hero-video h1 .grad{color:#7EC8F5}
.hv-copy p{color:#fff;font-size:17px;line-height:1.6;margin-bottom:16px;max-width:560px}
.hv-copy p.fort{font-weight:600}
.hv-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
/* bouton pilule avec la fleche dans un rond, comme le site de reference */
.btn-rond{display:inline-flex;align-items:center;gap:14px;padding:13px 30px 13px 13px;border-radius:45px;
  font-weight:600;font-size:15px;text-decoration:none;transition:.3s;border:0;cursor:pointer}
.btn-rond .rond{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;
  font-size:16px;flex-shrink:0;transition:.3s}
.btn-rond.plein{background:#0E2B4C;color:#fff}
.btn-rond.plein:hover{background:#14406F}
.btn-rond.plein:hover .rond{transform:translateX(3px);background:rgba(255,255,255,.34)}
.btn-rond.clair{background:rgba(255,255,255,.2);backdrop-filter:blur(8px);color:#fff}
.btn-rond.clair:hover{background:rgba(255,255,255,.32)}
.btn-rond.clair:hover .rond{transform:translateX(3px)}
/* chiffres cles poses en bas du hero */
.hv-chiffres{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(255,255,255,.14);
  background:linear-gradient(transparent,rgba(6,14,32,.5))}
.hv-chiffres .container{display:flex;gap:60px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}
.hv-chiffres div{color:#fff}
.hv-chiffres b{display:block;font-size:30px;font-weight:700;line-height:1.1}
.hv-chiffres small{color:#B9C8DE;font-size:13.5px}

@media(max-width:900px){
  /* le hero est un conteneur flex : en dessous de 900px on empile, sinon
     le bandeau de chiffres se place en colonne a cote du texte */
  .hero-video{min-height:auto;display:block}
  /* meme logique que .hero.photo : la video (format paysage) redevient un
     bandeau de hauteur fixe en haut de la section, estompe vers le navy
     uni. Seul le titre se lit sur la video, le reste suit dessous sur
     fond plein (poster et video restent superposes en absolu pour garder
     le fondu enchaine de main.js). */
  /* comme .hero.photo : le bandeau demarre sous l'entete pour rester
     entierement visible. object-position : la baie de serveurs commence
     sous le plafond/spots, on descend le cadrage pour la montrer. */
  .hero-video video,.hero-video .hv-poster{position:absolute;inset:auto;top:var(--header-h, 160px);left:0;width:100%;height:460px;object-position:50% 60%}
  .hero-video::after{top:var(--header-h, 160px);left:0;right:0;height:460px;bottom:auto;
    background:linear-gradient(180deg,rgba(6,14,32,.5) 0%,rgba(6,14,32,.86) 68%,#060E20 100%)}
  .hv-inner{padding:calc(var(--header-h, 160px) + 28px) 0 70px}
  .hv-chiffres{position:static;background:rgba(6,14,32,.6)}
  .hv-chiffres .container{gap:30px}
}
@media(max-width:600px){
  .hero-video video,.hero-video .hv-poster{height:380px}
  .hero-video::after{height:380px}
  .hv-inner{padding:calc(var(--header-h, 160px) + 24px) 0 60px}
}

/* ============ RANGEE DE LOGOS FIXE ============ */
/* Pour les blocs qui ne comptent que quelques logos : pas de defilement,
   une simple rangee centree qui passe a la ligne si besoin. */
.logos-fixes{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:34px 64px;padding:10px 0}
.logos-fixes img{height:56px;width:auto;object-fit:contain;filter:grayscale(1) opacity(.55);transition:.35s}
.logos-fixes img:hover{filter:none;transform:scale(1.08)}
.section.dark .logos-fixes img{filter:grayscale(1) brightness(2.2) opacity(.5)}
.section.dark .logos-fixes img:hover{filter:brightness(1.6)}
@media(max-width:640px){
  .logos-fixes{gap:26px 34px}
  .logos-fixes img{height:42px}
}

/* ============ CARTE GOOGLE MAPS ============ */
.carte{max-width:900px;margin:0 auto;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow);line-height:0}
.carte iframe{width:100%;height:420px;border:0;display:block;filter:grayscale(.25)}
.carte-adresse{text-align:center;margin-top:16px;font-size:14.5px;color:var(--text)}
.carte-adresse a{color:var(--blue);font-weight:500}
@media(max-width:640px){ .carte iframe{height:320px} }

/* ============ DIRIGEANT ============ */
.dirigeant{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:center;
  max-width:900px;margin-inline:auto;background:#fff;border:1px solid var(--line);
  border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.dirigeant .d-img{aspect-ratio:1/1.1;overflow:hidden}
.dirigeant .d-img img{width:100%;height:100%;object-fit:cover;object-position:center top}
.dirigeant .d-body{padding:36px 44px 36px 0}
.dirigeant h3{font-size:26px;margin:6px 0 2px}
.dirigeant .role{color:var(--blue-2);font-weight:600;font-size:15px;margin-bottom:16px}
.dirigeant p{color:var(--text);line-height:1.75}
.dirigeant .d-contact{margin-top:18px;display:flex;gap:22px;flex-wrap:wrap}
.dirigeant .d-contact a{color:var(--blue);font-weight:500;font-size:14.5px}
@media(max-width:760px){
  .dirigeant{grid-template-columns:1fr;gap:0}
  .dirigeant .d-img{aspect-ratio:16/10}
  .dirigeant .d-body{padding:28px 26px 32px}
}

/* ---------- Formulaire de devis ---------- */
/* Pot de miel : hors ecran plutot que display:none, que certains robots
   reperent pour justement ne pas remplir le champ. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-msg{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:14.5px;line-height:1.5}
.form-msg.ok{background:rgba(53,180,240,.12);color:var(--blue);border:1px solid rgba(53,180,240,.35)}
.form-msg.ko{background:rgba(200,40,40,.08);color:#B3261E;border:1px solid rgba(200,40,40,.28)}
.form button[disabled]{opacity:.65;cursor:progress}



/* Contact Form 7 */
.wpcf7 {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
}

.wpcf7 form {
    width: 100%;
}

.wpcf7 p {
    margin-bottom: 18px;
}

.wpcf7 label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.wpcf7 textarea {
    min-height: 160px;
    resize: vertical;
}

.wpcf7 input[type="submit"] {
    padding: 12px 24px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
}

/* DATAGIX - Correction couleurs menu mobile */
@media (max-width: 768px) {
  .site-header .nav.open > li > a,
  body.accueil .site-header .nav.open > li > a,
  body.accueil .site-header.scrolled .nav.open > li > a {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .site-header .nav.open .dropdown a {
    color: #dce6f2 !important;
  }
}





/* DATAGIX - Réseaux sociaux footer */

.f-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-social-links a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}

.footer-social-links a:hover {
  color: #35b4f0;
}

.footer-copyright,
.footer-legal {
  font-size: 13px;
}

/* Mobile */
@media (max-width: 768px) {
  .f-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 15px;
  }
}