/* V284 — Section « Nos services » (accueil) : vitrine interactive « en direct ».
   Console sombre + filtre par objectif + 6 tuiles bento, chacune avec une mini-interface animée.
   Points de rupture vérifiés : mobile (≤699), tablette (700–1099), ordinateur (1100–1799), grand écran (≥1800). */

#services.sx{
  --sx-blue:#1f55f0;--sx-blue2:#3b82ff;--sx-cyan:#12c2ff;--sx-violet:#6b4bff;--sx-green:#22d38a;
  --sx-ink:#0b1533;--sx-muted:#56658a;
  --sx-bg:#050c26;--sx-tile:rgba(255,255,255,.045);--sx-line:rgba(150,180,255,.14);
  --sx-txt:#eef3ff;--sx-sub:#9eacd0;
  --sx-r:clamp(18px,1.4vw,26px);
  --sx-gap:clamp(10px,1vw,18px);
  position:relative;background:#fff;color:var(--sx-ink);
  padding:clamp(44px,5vw,112px) var(--side) clamp(40px,4.4vw,96px);
  font-family:Poppins,system-ui,sans-serif;scroll-margin-top:80px;
}
#services.sx *,#services.sx *::before,#services.sx *::after{box-sizing:border-box}
.sx-wrap{max-width:1760px;margin:0 auto}

/* ---------- En-tête ---------- */
.sx-head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:clamp(20px,4vw,90px);align-items:end;margin-bottom:clamp(24px,2.6vw,52px)}
.sx-eyebrow{display:flex;align-items:center;gap:16px;font-size:clamp(.72rem,.7vw,.9rem);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#1b2a52;margin-bottom:clamp(12px,1.2vw,22px)}
.sx-eyebrow::before{content:"";width:clamp(28px,2.2vw,44px);height:3px;border-radius:3px;background:linear-gradient(90deg,var(--sx-blue),var(--sx-cyan))}
.sx h2{font-size:clamp(1.85rem,3.3vw,4.1rem);line-height:1.04;font-weight:800;letter-spacing:-.035em;color:var(--sx-ink);max-width:19ch;margin:0}
.sx h2 em{font-style:normal;background:linear-gradient(90deg,#1f55f0,#3b82ff 60%,#12a8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-lead{font-size:clamp(.95rem,1.05vw,1.3rem);line-height:1.6;color:var(--sx-muted);max-width:44ch;margin:0 0 .3em}
.sx-lead strong{color:var(--sx-ink);font-weight:600}

/* ---------- Console ---------- */
.sx-console{position:relative;isolation:isolate;border-radius:calc(var(--sx-r) + 10px);padding:clamp(12px,1.3vw,26px);color:var(--sx-txt);
  background:radial-gradient(120% 80% at 0% 0%,#0d1f5c 0%,transparent 55%),radial-gradient(90% 70% at 100% 100%,#1a1460 0%,transparent 60%),var(--sx-bg);
  box-shadow:0 40px 90px -30px rgba(8,24,80,.55),0 0 0 1px rgba(255,255,255,.06) inset;overflow:hidden}
.sx-console-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sx-aurora{position:absolute;width:55%;aspect-ratio:1;border-radius:50%;filter:blur(80px);opacity:.5}
.sx-aurora.a1{left:-12%;top:-30%;background:radial-gradient(circle,#2563ff 0%,transparent 65%);animation:sx-drift 18s ease-in-out infinite alternate}
.sx-aurora.a2{right:-15%;bottom:-35%;background:radial-gradient(circle,#7c3aed 0%,transparent 65%);opacity:.38;animation:sx-drift 22s ease-in-out infinite alternate-reverse}
.sx-gridlines{position:absolute;inset:0;background-image:linear-gradient(rgba(140,170,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(140,170,255,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(80% 60% at 50% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(80% 60% at 50% 30%,#000 10%,transparent 75%)}
@keyframes sx-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(12%,10%) scale(1.15)}}

/* ---------- Barre « Je veux… » ---------- */
.sx-bar{display:flex;align-items:center;gap:clamp(10px,1.2vw,22px);padding:clamp(4px,.4vw,8px) clamp(4px,.4vw,8px) clamp(12px,1.1vw,20px);flex-wrap:wrap}
.sx-bar-label{display:flex;align-items:center;gap:10px;margin:0;font-size:clamp(.78rem,.78vw,1rem);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#c9d5f5;white-space:nowrap}
.sx-live-dot{width:8px;height:8px;border-radius:50%;background:var(--sx-green);box-shadow:0 0 0 0 rgba(34,211,138,.6);animation:sx-ping 2s infinite}
@keyframes sx-ping{0%{box-shadow:0 0 0 0 rgba(34,211,138,.55)}80%,100%{box-shadow:0 0 0 9px rgba(34,211,138,0)}}
.sx-goals{position:relative;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--sx-line);min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sx-goals::-webkit-scrollbar{display:none}
.sx-goal{position:relative;z-index:1;flex:none;border:0;background:none;color:#aebbe0;font:500 clamp(.8rem,.8vw,1.02rem)/1 Poppins,sans-serif;padding:clamp(9px,.7vw,13px) clamp(13px,1.05vw,20px);border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .3s}
.sx-goal:hover{color:#fff}
.sx-goal[aria-pressed="true"]{color:#fff}
.sx-goal:focus-visible{outline:2px solid var(--sx-cyan);outline-offset:2px}
.sx-goal-ink{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:var(--w,0);transform:translateX(var(--x,4px));border-radius:999px;background:linear-gradient(90deg,var(--sx-blue),var(--sx-blue2));box-shadow:0 8px 22px -6px rgba(59,130,255,.7),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .5s cubic-bezier(.65,0,.25,1),width .5s cubic-bezier(.65,0,.25,1)}
.sx-bar-status{margin:0 0 0 auto;font-size:clamp(.76rem,.74vw,.95rem);color:var(--sx-sub);white-space:nowrap}
.sx-bar-status b{color:#fff;font-weight:600}

/* ---------- Grille bento ---------- */
.sx-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--sx-gap);
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-areas:"site site seo" "shop app seo" "flow app host"}
.sx-t-site{grid-area:site}.sx-t-seo{grid-area:seo}.sx-t-shop{grid-area:shop}.sx-t-app{grid-area:app}.sx-t-auto{grid-area:flow}.sx-t-host{grid-area:host}

.sx-tile{--mx:50%;--my:50%;position:relative;display:flex;flex-direction:column;gap:clamp(14px,1.2vw,22px);min-width:0;padding:clamp(16px,1.45vw,28px);border-radius:var(--sx-r);
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02));border:1px solid var(--sx-line);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s,border-color .4s,box-shadow .5s}
.sx-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(59,130,255,.16),transparent 45%)}
.sx-tile::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;opacity:0;transition:opacity .4s;
  background:radial-gradient(300px circle at var(--mx) var(--my),rgba(120,180,255,.9),transparent 50%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.sx-tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.sx-tile:hover::before,.sx-tile:hover::after{opacity:1}
.sx-tile:focus-within{outline:2px solid var(--sx-cyan);outline-offset:3px}
.sx-tile:has(.sx-link:focus-visible){outline:2px solid var(--sx-cyan);outline-offset:3px}

.sx-copy{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.sx-meta{display:flex;align-items:center;gap:10px;width:100%;margin-bottom:clamp(10px,.9vw,16px)}
.sx-ico{display:grid;place-items:center;width:clamp(38px,2.6vw,50px);aspect-ratio:1;border-radius:14px;color:#fff;
  background:linear-gradient(140deg,var(--sx-blue2),var(--sx-blue) 55%,#3b2bd9);box-shadow:0 10px 24px -8px rgba(59,130,255,.75),inset 0 1px 0 rgba(255,255,255,.35)}
.sx-ico svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sx-t-host .sx-ico svg{fill:currentColor;stroke:none}
.sx-idx{font:600 clamp(.72rem,.68vw,.88rem)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;color:#6f7fa8}
.sx-reco{margin-left:auto;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;color:#04122f;background:linear-gradient(90deg,#7ee8ff,#9fb9ff);opacity:0;transform:translateY(-4px) scale(.9);transition:opacity .35s,transform .35s}
.sx h3{margin:0;font-size:clamp(1.15rem,1.3vw,1.7rem);line-height:1.18;font-weight:700;letter-spacing:-.02em;color:#fff}
.sx-link{color:inherit;text-decoration:none}
.sx-link:focus-visible{outline:none}
.sx-link::after{content:"";position:absolute;inset:0;z-index:4}
.sx-tile .sx-link::after{inset:calc(-1 * clamp(16px,1.45vw,28px))}
.sx-copy p{margin:.5em 0 0;font-size:clamp(.88rem,.86vw,1.08rem);line-height:1.55;color:var(--sx-sub);max-width:46ch}
.sx-points{list-style:none;margin:.9em 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sx-points li{font-size:clamp(.74rem,.72vw,.9rem);color:#cfe0ff;padding:5px 11px;border-radius:999px;background:rgba(59,130,255,.12);border:1px solid rgba(59,130,255,.25)}
.sx-more{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(12px,1vw,18px);font-size:clamp(.86rem,.84vw,1.05rem);font-weight:600;color:#8fb6ff;transition:color .3s,gap .3s}
.sx-more i{display:grid;place-items:center;width:clamp(28px,1.9vw,36px);aspect-ratio:1;border-radius:50%;background:rgba(59,130,255,.16);border:1px solid rgba(110,160,255,.35);transition:background .3s,transform .3s}
.sx-more svg{width:50%;height:50%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sx-tile:hover .sx-more{color:#fff;gap:14px}
.sx-tile:hover .sx-more i{background:var(--sx-blue);border-color:var(--sx-blue);transform:rotate(-45deg)}

/* Zone de démonstration commune */
.sx-demo{position:relative;flex:1;min-height:0;border-radius:calc(var(--sx-r) - 6px);background:linear-gradient(180deg,rgba(3,8,28,.65),rgba(3,8,28,.35));border:1px solid rgba(255,255,255,.06);overflow:hidden}

/* Filtre par objectif */
.sx-console[data-goal]:not([data-goal="all"]) .sx-tile:not(.is-match){opacity:.28;filter:saturate(.2) blur(.5px);transform:scale(.985)}
.sx-console[data-goal]:not([data-goal="all"]) .sx-tile.is-match{border-color:rgba(110,170,255,.55);box-shadow:0 0 0 1px rgba(110,170,255,.25),0 30px 70px -30px rgba(59,130,255,.6)}
.sx-tile.is-match .sx-reco{opacity:1;transform:none}

/* Apparition au défilement (seulement avec JS) */
.sx-js .sx-tile{opacity:0;transform:translateY(26px)}
.sx-js .sx-console.is-in .sx-tile{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 90ms)}
.sx-js .sx-console.is-in.is-settled .sx-tile{transition-delay:0s}
.sx-js .sx-console.is-in .sx-tile:hover{transform:translateY(-4px)}
.sx-js .sx-console.is-in[data-goal]:not([data-goal="all"]) .sx-tile:not(.is-match){transform:scale(.985)}

/* ---------- Pied de console ---------- */
.sx-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-top:var(--sx-gap);padding:clamp(16px,1.4vw,26px) clamp(16px,1.6vw,30px);border-radius:var(--sx-r);
  background:linear-gradient(90deg,rgba(31,85,240,.22),rgba(107,75,255,.14) 60%,rgba(18,194,255,.12));border:1px solid rgba(110,160,255,.25)}
.sx-foot p{margin:0;font-size:clamp(.9rem,.9vw,1.12rem);color:#c3cfef;line-height:1.5}
.sx-foot-q{color:#fff;font-weight:600;margin-right:.35em}
.sx-cta{display:inline-flex;align-items:center;gap:16px;flex:none;padding:8px 8px 8px clamp(20px,1.6vw,30px);border-radius:999px;background:#fff;color:#0b1a4a;font-weight:600;font-size:clamp(.92rem,.92vw,1.14rem);text-decoration:none;box-shadow:0 14px 30px -10px rgba(59,130,255,.6);transition:transform .25s,box-shadow .25s}
.sx-cta i{display:grid;place-items:center;width:clamp(36px,2.4vw,46px);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,var(--sx-blue2),var(--sx-blue));color:#fff}
.sx-cta svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sx-cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(59,130,255,.8)}
.sx-note{margin:14px 0 0;text-align:center;font-size:.78rem;color:#8a97b5}

/* =========================================================
   DÉMO 01 — Site web responsive qui se construit
   ========================================================= */
.sx-t-site{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.3fr);align-items:stretch}
.sx-t-site .sx-copy{justify-content:center}
.sxs{display:flex;flex-direction:column;gap:10px;padding:12px;min-height:clamp(290px,22vw,430px)}
.sxs-devs{display:flex;gap:4px;align-self:center;padding:3px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.sxs-devs span{font-size:.7rem;font-weight:500;color:#7f8db3;padding:5px 11px;border-radius:999px;transition:background .4s,color .4s}
.sxs-devs span.on{background:rgba(59,130,255,.25);color:#fff}
.sxs-stage{position:relative;flex:1;display:flex;justify-content:center;min-height:0}
.sxs-browser{--bw:100%;position:relative;width:var(--bw);height:100%;min-height:230px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 24px 50px -18px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1);transition:width .9s cubic-bezier(.7,0,.2,1),border-radius .6s}
.sxs-browser[data-d="tab"]{--bw:min(64%,330px)}
.sxs-browser[data-d="mob"]{--bw:min(38%,180px);border-radius:20px}
.sxs-chrome{display:flex;align-items:center;gap:5px;height:24px;padding:0 9px;background:#eef2f9;border-bottom:1px solid #e1e7f2}
.sxs-chrome>i{width:7px;height:7px;border-radius:50%;background:#ff6058;flex:none}
.sxs-chrome>i:nth-child(2){background:#ffbd2e}.sxs-chrome>i:nth-child(3){background:#28c941}
.sxs-url{display:flex;align-items:center;gap:4px;margin:0 auto;padding:2px 10px;border-radius:6px;background:#fff;font-size:9px;color:#5b6787;white-space:nowrap;overflow:hidden;max-width:70%}
.sxs-url svg{width:9px;height:9px;fill:none;stroke:#22a565;stroke-width:2.4;flex:none}
.sxs-viewport{position:absolute;inset:24px 0 0;overflow:hidden}
.sxs-page{container-type:inline-size;color:#0f1b3d;transition:transform 1.6s cubic-bezier(.6,0,.2,1)}
.sxs-browser.is-scroll .sxs-page{transform:translateY(-38%)}
.sxs-nav{display:flex;align-items:center;gap:12px;padding:3.2cqi 4.5cqi;font-size:clamp(7px,2.1cqi,11px)}
.sxs-logo{display:flex;align-items:center;gap:5px;font-weight:700;white-space:nowrap}
.sxs-logo span{width:1.5em;height:1.5em;border-radius:4px;background:linear-gradient(135deg,#ffb400,#ff8a00);flex:none}
.sxs-links{display:flex;gap:2.4cqi;margin-left:auto;color:#5b6787;font-style:normal}
.sxs-links i{font-style:normal}
.sxs-navbtn{padding:.5em 1em;border-radius:999px;background:#0f1b3d;color:#fff;font-weight:600}
.sxs-burger{display:none;margin-left:auto;flex-direction:column;gap:3px}
.sxs-burger i{display:block;width:14px;height:2px;border-radius:2px;background:#0f1b3d}
.sxs-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:3cqi;align-items:center;padding:1cqi 4.5cqi 3.5cqi}
.sxs-hero-txt{display:flex;flex-direction:column;align-items:flex-start;gap:1.6cqi}
.sxs-hero-txt small{font-size:clamp(6px,1.7cqi,10px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#e08a00}
.sxs-hero-txt strong{font-size:clamp(11px,4.6cqi,30px);line-height:1.05;letter-spacing:-.03em;font-weight:800}
.sxs-sub{font-size:clamp(7px,1.9cqi,12px);color:#5b6787;line-height:1.4}
.sxs-cta{margin-top:.6cqi;padding:.75em 1.3em;border-radius:999px;background:linear-gradient(90deg,#ffb400,#ff8a00);color:#1b1200;font-weight:700;font-size:clamp(7px,1.9cqi,12px);box-shadow:0 6px 14px -6px rgba(255,140,0,.8);transition:transform .2s}
.sxs-cta.is-press{transform:scale(.92)}
.sxs-hero-img{aspect-ratio:16/10.5;border-radius:2.4cqi;background:#cfd8e8 url(../img/services/sx-demo-maison.webp) center/cover no-repeat;box-shadow:0 10px 24px -12px rgba(15,27,61,.5)}
.sxs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqi;padding:0 4.5cqi 5cqi}
.sxs-cards span{display:flex;flex-direction:column;gap:1.1cqi;padding:2.2cqi;border-radius:2cqi;background:#f3f6fc;border:1px solid #e4eaf5}
.sxs-cards b{width:3.4cqi;height:3.4cqi;min-width:10px;min-height:10px;border-radius:30%;background:linear-gradient(135deg,#3b82ff,#1f55f0)}
.sxs-cards i{height:5px;border-radius:3px;background:#d5ddec}.sxs-cards i+i{width:70%}
@container (max-width:420px){
  .sxs-links,.sxs-navbtn{display:none}
  .sxs-burger{display:flex}
  .sxs-hero{grid-template-columns:1fr;padding-bottom:5cqi}
  .sxs-hero-img{order:-1;aspect-ratio:16/9}
  .sxs-hero-txt strong{font-size:clamp(13px,8cqi,26px)}
  .sxs-hero-txt small,.sxs-sub,.sxs-cta{font-size:clamp(7px,3.4cqi,11px)}
  .sxs-nav{font-size:clamp(8px,3.6cqi,11px)}
  .sxs-cards{grid-template-columns:1fr}
  .sxs-cards span{padding:4cqi;border-radius:4cqi}
}
@container (min-width:240px) and (max-width:420px){.sxs-cards{grid-template-columns:1fr 1fr}.sxs-cards span:last-child{grid-column:1/-1}}
/* état « maquette fil de fer » */
.sxs-page *{transition:color .5s,background-color .5s,border-color .5s,box-shadow .5s,opacity .5s}
.sxs-browser.is-wire .sxs-page *{color:transparent!important;box-shadow:none!important}
.sxs-browser.is-wire .sxs-logo span,.sxs-browser.is-wire .sxs-navbtn,.sxs-browser.is-wire .sxs-cta,.sxs-browser.is-wire .sxs-cards b,.sxs-browser.is-wire .sxs-burger i{background:#e3e9f4}
.sxs-browser.is-wire .sxs-links i,.sxs-browser.is-wire .sxs-hero-txt small,.sxs-browser.is-wire .sxs-hero-txt strong,.sxs-browser.is-wire .sxs-sub{background:#e9eef7;border-radius:4px}
.sxs-browser.is-wire .sxs-hero-img{background:#f3f6fb;outline:1.5px dashed #b9c6de;outline-offset:-1.5px;background-image:linear-gradient(to top right,transparent calc(50% - 1px),#c9d4e8 50%,transparent calc(50% + 1px)),linear-gradient(to top left,transparent calc(50% - 1px),#c9d4e8 50%,transparent calc(50% + 1px))}
.sxs-browser.is-wire .sxs-cards span{background:#fff;border-style:dashed;border-color:#c3cfe4}
.sxs-browser.is-wire .sxs-cards i{background:#edf1f8}
.sxs-browser::after{content:"";position:absolute;inset:24px 0 0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(59,130,255,.18) 48%,rgba(59,130,255,.5) 50%,transparent 52%);background-size:100% 220%;background-position:0 120%;opacity:0}
.sxs-browser.is-build::after{animation:sxs-scan 1s cubic-bezier(.5,0,.3,1) forwards}
@keyframes sxs-scan{0%{opacity:1;background-position:0 120%}100%{opacity:1;background-position:0 -20%}}
.sxs-cursor{position:absolute;left:0;top:0;width:18px;height:18px;z-index:3;opacity:0;transform:translate(var(--cx,80%),var(--cy,90%));transition:transform 1s cubic-bezier(.6,0,.25,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.sxs-cursor svg{width:100%;height:100%;fill:#0f1b3d;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.sxs-browser.is-click .sxs-cursor{opacity:1}
.sxs-toast{position:absolute;right:8px;bottom:8px;z-index:3;display:flex;align-items:center;gap:8px;padding:7px 12px 7px 7px;border-radius:12px;background:#0f1b3d;color:#fff;box-shadow:0 14px 30px -10px rgba(15,27,61,.7);opacity:0;transform:translateY(12px) scale(.96);transition:opacity .4s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.sxs-toast b{display:block;font-size:10px;font-weight:600;line-height:1.2}
.sxs-toast small{display:block;font-size:8.5px;color:#9fb0d8}
.sxs-check{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:var(--sx-green);flex:none}
.sxs-check svg{width:14px;height:14px;fill:none;stroke:#04221a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sxs-browser.is-toast .sxs-toast{opacity:1;transform:none}
.sxs-browser[data-d="mob"] .sxs-toast{left:6px;right:6px}
.sxs-score{position:absolute;bottom:-4px;left:-4px;z-index:4;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#071233;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 26px -8px rgba(0,0,0,.6);transition:opacity .5s,transform .5s}
.sxs-score svg{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);transform:rotate(-90deg)}
.sxs-score circle{fill:none;stroke-width:4}
.sxs-score .t{stroke:rgba(255,255,255,.08)}
.sxs-score .v{stroke:var(--sx-green);stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset 1.4s cubic-bezier(.3,0,.2,1)}
.sxs-score b{font-size:17px;font-weight:700;line-height:1;color:#fff;margin-top:-6px}
.sxs-score small{position:absolute;bottom:13px;font-size:7.5px;color:#8fa0c9;letter-spacing:.06em;text-transform:uppercase}
.sxs-score.is-on .v{stroke-dashoffset:calc(113.1 * .02)}

/* =========================================================
   DÉMO 02 — SEO : la fiche grimpe au 1er rang
   ========================================================= */
.sxg{display:flex;flex-direction:column;gap:12px;padding:14px;min-height:300px}
.sxg-search{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:clamp(.8rem,.78vw,.98rem);color:#fff;min-height:42px}
.sxg-search svg{width:16px;height:16px;fill:none;stroke:#8fb6ff;stroke-width:2.2;stroke-linecap:round;flex:none}
.sxg-caret{display:inline-block;width:1.5px;height:1.05em;margin-left:-6px;background:#8fb6ff;animation:sxg-blink 1s steps(1) infinite}
@keyframes sxg-blink{50%{opacity:0}}
.sxg-results{--rh:clamp(44px,3.2vw,56px);--rg:7px;position:relative;list-style:none;margin:0;padding:0;height:calc(5 * var(--rh) + 4 * var(--rg))}
.sxg-results li{position:absolute;left:0;right:0;top:calc(var(--p) * (var(--rh) + var(--rg)));height:var(--rh);display:flex;align-items:center;gap:11px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);transition:top .85s cubic-bezier(.65,0,.2,1),background .5s,box-shadow .5s,opacity .5s}
.sxg-fav{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.1);flex:none}
.sxg-l{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.sxg-l b{height:6px;width:62%;border-radius:4px;background:rgba(160,185,240,.3)}
.sxg-l i{height:5px;width:40%;border-radius:4px;background:rgba(160,185,240,.15)}
.sxg-results li[data-r="b"] .sxg-l b{width:72%}.sxg-results li[data-r="c"] .sxg-l b{width:54%}.sxg-results li[data-r="d"] .sxg-l b{width:66%}
.sxg-pos{font:600 .78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:#6f7fa8;min-width:2.2ch;text-align:right}
.sxg-results li.is-you{z-index:2;background:linear-gradient(90deg,rgba(31,85,240,.55),rgba(59,130,255,.25));border-color:rgba(130,180,255,.6);box-shadow:0 12px 30px -12px rgba(59,130,255,.9)}
.sxg-results li.is-you .sxg-fav{background:#fff}
.sxg-results li.is-you .sxg-fav svg{width:14px;height:14px;fill:var(--sx-blue)}
.sxg-l strong{font-size:clamp(.8rem,.8vw,1rem);font-weight:600;color:#fff;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxg-l small{font-size:clamp(.66rem,.64vw,.8rem);color:#a9c4ff;line-height:1}
.sxg-results li.is-you .sxg-pos{color:#fff;font-size:.95rem}
.sxg-results li.is-you.is-top .sxg-pos{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sx-green);color:#04221a;font-size:.8rem}
.sxg-chart{flex:1;display:flex;flex-direction:column;gap:8px;min-height:110px;padding:12px 12px 0;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);overflow:hidden}
.sxg-chart-head{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;color:#9eacd0}
.sxg-up{display:inline-flex;align-items:center;gap:4px;color:var(--sx-green);font-weight:600}
.sxg-up svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sxg-svg{flex:1;width:100%;min-height:70px;display:block}
.sxg-line{fill:none;stroke:url(#sxg-fill);stroke:#5b9bff;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 2.6s cubic-bezier(.4,0,.2,1)}
.sxg-area{fill:url(#sxg-fill);opacity:0;transition:opacity 1.4s .8s}
.sxg-dot{fill:#fff;stroke:#5b9bff;stroke-width:3;opacity:0;transition:opacity .4s 2.4s}
.sxg.is-grow .sxg-line{stroke-dashoffset:0}
.sxg.is-grow .sxg-area{opacity:1}
.sxg.is-grow .sxg-dot{opacity:1}

/* =========================================================
   DÉMO 03 — Boutique : ventes en direct
   ========================================================= */
.sxc{display:flex;flex-direction:column;gap:10px;padding:14px;min-height:250px}
.sxc-kpi{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:end;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05)}
.sxc-kpi>span{grid-column:1;font-size:.72rem;color:#9eacd0}
.sxc-kpi>b{grid-column:1;font-size:clamp(1.25rem,1.5vw,1.9rem);font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.sxc-bars{grid-column:2;grid-row:1/3;display:flex;align-items:flex-end;justify-content:flex-end;gap:4px;height:44px}
.sxc-bars i{width:clamp(6px,.55vw,10px);height:calc(var(--h) * 100%);border-radius:3px 3px 1px 1px;background:rgba(110,150,255,.35);transform-origin:bottom;transform:scaleY(.1);transition:transform .8s cubic-bezier(.2,.9,.3,1)}
.sxc-bars i.now{background:linear-gradient(180deg,#7ee8ff,var(--sx-blue2))}
.sxc.is-on .sxc-bars i{transform:none}
.sxc.is-on .sxc-bars i:nth-child(2){transition-delay:.05s}.sxc.is-on .sxc-bars i:nth-child(3){transition-delay:.1s}.sxc.is-on .sxc-bars i:nth-child(4){transition-delay:.15s}.sxc.is-on .sxc-bars i:nth-child(5){transition-delay:.2s}.sxc.is-on .sxc-bars i:nth-child(6){transition-delay:.25s}.sxc.is-on .sxc-bars i:nth-child(7){transition-delay:.3s}.sxc.is-on .sxc-bars i:nth-child(8){transition-delay:.35s}
.sxc-feed{--fh:50px;position:relative;list-style:none;margin:0;padding:0;flex:1;min-height:calc(3 * var(--fh) + 12px);overflow:hidden}
.sxc-feed li{position:absolute;left:0;right:0;top:0;height:var(--fh);display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);transform:translateY(calc(var(--k) * (var(--fh) + 6px)));opacity:calc(1 - var(--k) * .28);transition:transform .6s cubic-bezier(.2,1,.3,1),opacity .6s}
.sxc-feed li.is-new{transform:translateY(-110%) scale(.96);opacity:0}
.sxc-feed li.is-out{opacity:0;transform:translateY(calc(3 * (var(--fh) + 6px)))}
.sxc-thumb{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;flex:none;color:#fff;font-size:.72rem;font-weight:700}
.sxc-t{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.2}
.sxc-t b{font-size:.78rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxc-t small{font-size:.68rem;color:#8e9cc2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxc-amt{font-size:.8rem;font-weight:600;color:var(--sx-green);font-variant-numeric:tabular-nums;white-space:nowrap}

/* =========================================================
   DÉMO 04 — Application mobile
   ========================================================= */
.sxa{display:grid;place-items:center;padding:22px 14px;min-height:clamp(420px,30vw,560px)}
.sxa-glow{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(59,130,255,.45),transparent 65%);filter:blur(20px)}
.sxa-phone{position:relative;width:clamp(210px,17vw,300px);aspect-ratio:9/18.6;padding:8px;border-radius:38px;background:linear-gradient(145deg,#2a3456,#0b1230 45%,#1c2547);box-shadow:0 40px 70px -24px rgba(0,0,0,.85),inset 0 0 0 1.5px rgba(255,255,255,.14);transform:perspective(900px) rotateY(-9deg) rotateX(4deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.sx-tile:hover .sxa-phone{transform:perspective(900px) rotateY(0) rotateX(0) translateY(-4px)}
.sxa-screen{position:relative;height:100%;border-radius:31px;overflow:hidden;background:linear-gradient(180deg,#eef3ff,#f8faff 40%);display:flex;flex-direction:column;gap:8%;gap:clamp(7px,.6vw,11px);padding:0 11px 10px;color:#0f1b3d;font-size:clamp(9px,.72vw,12.5px)}
.sxa-status{display:flex;align-items:center;justify-content:space-between;height:28px;padding:0 6px;font-size:.92em}
.sxa-status b{font-weight:600}
.sxa-island{width:34%;height:15px;border-radius:999px;background:#05091a}
.sxa-status span{display:flex;gap:2px;align-items:flex-end}
.sxa-status span i{width:3px;border-radius:1px;background:#0f1b3d}.sxa-status span i:nth-child(1){height:4px}.sxa-status span i:nth-child(2){height:6px}.sxa-status span i:nth-child(3){height:8px}
.sxa-hello{display:flex;align-items:center;justify-content:space-between}
.sxa-hello span{display:flex;flex-direction:column;line-height:1.1}
.sxa-hello small{color:#6a7697;font-size:.95em}
.sxa-hello b{font-size:1.55em;font-weight:700;letter-spacing:-.02em}
.sxa-hello em{display:grid;place-items:center;width:2.7em;height:2.7em;border-radius:50%;background:linear-gradient(135deg,#3b82ff,#6b4bff);color:#fff;font-style:normal;font-weight:600;font-size:.9em}
.sxa-kpis{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.sxa-kpis div{display:flex;flex-direction:column;gap:1px;padding:.85em;border-radius:12px;background:linear-gradient(140deg,#1f55f0,#3b82ff);color:#fff;box-shadow:0 8px 18px -10px rgba(31,85,240,.9)}
.sxa-kpis div.alt{background:#fff;color:#0f1b3d;box-shadow:0 4px 14px -8px rgba(15,27,61,.3)}
.sxa-kpis small{font-size:.85em;opacity:.8}
.sxa-kpis b{font-size:1.75em;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.sxa-kpis i{font-style:normal;font-size:.8em;opacity:.85}
.sxa-kpis .alt i{color:#16a36b;opacity:1}
.sxa-chart{padding:.9em;border-radius:12px;background:#fff;box-shadow:0 4px 14px -8px rgba(15,27,61,.25)}
.sxa-chart-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.6em}
.sxa-chart-h b{font-weight:600}.sxa-chart-h small{color:#8a94b0;font-size:.85em}
.sxa-cols{display:flex;align-items:flex-end;gap:5px;height:5.4em}
.sxa-cols i{flex:1;height:calc(var(--h) * 100%);border-radius:4px 4px 2px 2px;background:#dbe5fb;transform-origin:bottom;transform:scaleY(.08);transition:transform .9s cubic-bezier(.2,.9,.3,1)}
.sxa-cols i.hi{background:linear-gradient(180deg,#3b82ff,#1f55f0)}
.sxa.is-on .sxa-cols i{transform:none}
.sxa.is-on .sxa-cols i:nth-child(2){transition-delay:.06s}.sxa.is-on .sxa-cols i:nth-child(3){transition-delay:.12s}.sxa.is-on .sxa-cols i:nth-child(4){transition-delay:.18s}.sxa.is-on .sxa-cols i:nth-child(5){transition-delay:.24s}.sxa.is-on .sxa-cols i:nth-child(6){transition-delay:.3s}.sxa.is-on .sxa-cols i:nth-child(7){transition-delay:.36s}
.sxa-days{display:flex;gap:5px;margin-top:.35em}.sxa-days span{flex:1;text-align:center;font-size:.75em;color:#9aa4c0}
.sxa-tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.sxa-tasks li{display:flex;align-items:center;gap:.7em;padding:.62em .75em;border-radius:10px;background:#fff;box-shadow:0 3px 10px -8px rgba(15,27,61,.35);transition:opacity .4s}
.sxa-tasks i{position:relative;width:1.25em;height:1.25em;border-radius:6px;border:1.6px solid #c4cee4;flex:none;transition:background .3s,border-color .3s}
.sxa-tasks i::after{content:"";position:absolute;left:30%;top:12%;width:30%;height:52%;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.sxa-tasks span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxa-tasks li.done i{background:#16c47f;border-color:#16c47f}
.sxa-tasks li.done i::after{transform:rotate(45deg) scale(1)}
.sxa-tasks li.done span{color:#97a2bf;text-decoration:line-through}
.sxa-tab{margin-top:auto;display:flex;justify-content:space-around;padding:.7em;border-radius:14px;background:#fff;box-shadow:0 -2px 12px -8px rgba(15,27,61,.3)}
.sxa-tab i{width:1.4em;height:1.4em;border-radius:6px;background:#dbe2f1}.sxa-tab i.on{background:var(--sx-blue)}
.sxa-chip{position:absolute;display:flex;align-items:center;gap:8px;padding:8px 13px;border-radius:12px;font-size:.76rem;font-weight:500;color:#fff;background:rgba(12,22,58,.82);border:1px solid rgba(140,175,255,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 16px 30px -14px rgba(0,0,0,.8);animation:sxa-float 5s ease-in-out infinite;white-space:nowrap}
.sxa-chip-1{left:6%;top:22%}
.sxa-chip-2{right:5%;bottom:20%;animation-delay:-2.5s}
.sxa-chip-2 svg{width:15px;height:15px;fill:none;stroke:#7ee8ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sxa-sync{width:9px;height:9px;border-radius:50%;background:var(--sx-green);box-shadow:0 0 10px var(--sx-green)}
@keyframes sxa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* =========================================================
   DÉMO 05 — Automatisation : flux
   ========================================================= */
.sxw{display:flex;flex-direction:column;gap:8px;padding:12px 12px 10px;min-height:250px}
.sxw-flow{width:100%;height:auto;display:block;overflow:visible}
.sxw-wire{fill:none;stroke:rgba(120,160,255,.35);stroke-width:1.6;stroke-dasharray:4 5;animation:sxw-dash 1.2s linear infinite}
@keyframes sxw-dash{to{stroke-dashoffset:-18}}
.sxw-pk circle:first-child{fill:#12c2ff;opacity:.8}
.sxw-pk circle:last-child{fill:#e9fbff}
.sxw-node rect{fill:rgba(255,255,255,.06);stroke:rgba(140,170,255,.3);stroke-width:1}
.sxw-node .ic{fill:none;stroke:#9fc0ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sxw-node text,.sxw-hub text{font:500 9.5px Poppins,sans-serif;fill:#9eacd0;text-anchor:middle}
.sxw-node text.in{fill:#e6edff;font-size:10px;font-weight:600;text-anchor:start}
.sxw-node.out rect{animation:sxw-hit 1.4s ease-in-out infinite}
.sxw-node.out:nth-of-type(2) rect{animation-delay:.3s}
@keyframes sxw-hit{0%,70%,100%{stroke:rgba(140,170,255,.3)}80%{stroke:#7ee8ff}}
.sxw-hub rect{fill:url(#sxw-g);filter:drop-shadow(0 8px 18px rgba(80,110,255,.6))}
.sxw-gear{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:sxw-spin 6s linear infinite}
@keyframes sxw-spin{to{transform:rotate(360deg)}}
.sxw-log{--lh:30px;position:relative;list-style:none;margin:0;padding:0;height:calc(3 * var(--lh));overflow:hidden;font:500 clamp(.7rem,.68vw,.84rem)/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.sxw-log li{position:absolute;left:0;right:0;top:0;height:calc(var(--lh) - 4px);display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,.035);color:#cfdaf7;transform:translateY(calc(var(--k) * var(--lh)));opacity:calc(1 - var(--k) * .3);transition:transform .5s cubic-bezier(.2,1,.3,1),opacity .5s;white-space:nowrap;overflow:hidden}
.sxw-log li.is-new{transform:translateY(-100%);opacity:0}
.sxw-log li b{color:var(--sx-green);font-weight:700}
.sxw-log li time{margin-left:auto;color:#6f7fa8;padding-left:8px}

/* =========================================================
   DÉMO 06 — Hébergement : statut en direct
   ========================================================= */
.sxh{display:flex;flex-direction:column;gap:10px;padding:14px;min-height:250px}
.sxh-head{display:flex;align-items:center;gap:10px;font-size:clamp(.78rem,.76vw,.95rem)}
.sxh-head b{font-weight:600;color:#fff}
.sxh-pulse{position:relative;width:10px;height:10px;border-radius:50%;background:var(--sx-green);flex:none}
.sxh-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--sx-green);opacity:0;animation:sxh-ring 2s ease-out infinite}
@keyframes sxh-ring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.sxh-uptime{display:flex;gap:3px;height:32px}
.sxh-uptime i{flex:1;border-radius:3px;background:linear-gradient(180deg,#34e3a0,#16b877);opacity:.85;transform-origin:bottom;transform:scaleY(.15);transition:transform .5s cubic-bezier(.2,1.2,.4,1)}
.sxh-uptime i:last-child{animation:sxh-blink 1.6s ease-in-out infinite}
@keyframes sxh-blink{50%{opacity:.45}}
.sxh.is-on .sxh-uptime i{transform:none}
.sxh-uptime-legend{display:flex;justify-content:space-between;font-size:.66rem;color:#6f7fa8;margin-top:-4px}
.sxh-checks{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.sxh-checks li{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.05);font-size:clamp(.76rem,.72vw,.9rem);color:#c3cfef}
.sxh-checks svg{width:16px;height:16px;fill:none;stroke:#8fb6ff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sxh-checks b{margin-left:auto;font-weight:600;color:var(--sx-green);white-space:nowrap;font-variant-numeric:tabular-nums}

/* =========================================================
   POINTS DE RUPTURE
   ========================================================= */

/* Grand écran ≥ 1800 px */
@media (min-width:1800px){
  #services.sx{--sx-gap:20px}
  .sx-console{padding:28px}
  .sxs{min-height:460px}
  .sxa{min-height:600px}
  .sxa-phone{width:310px}
  .sxs-score{width:72px;height:72px}
  .sxs-score b{font-size:20px}
}

/* Ordinateur portable 1100–1399 : on resserre */
@media (max-width:1399px) and (min-width:1100px){
  .sx-t-site{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr)}
  .sx-points{display:none}
}

/* Tablette 700–1099 px */
@media (max-width:1099px){
  .sx-head{grid-template-columns:1fr;gap:14px;align-items:start}
  .sx h2{font-size:clamp(1.75rem,4.2vw,2.6rem);max-width:22ch}
  .sx-lead{max-width:60ch}
  .sx-bar-status{display:none}
  .sx-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"site site" "seo app" "shop app" "flow host"}
  .sxa{min-height:440px}
  .sxa-phone{width:clamp(190px,26vw,240px)}
  .sxa-screen{font-size:clamp(9px,1.25vw,11px)}
}
@media (max-width:1099px) and (min-width:700px){
  .sx-bar{flex-wrap:nowrap}
  .sx-goals{flex:1}
}

/* Site : copie au-dessus de la démo quand la tuile est étroite */
@media (max-width:899px){
  .sx-t-site{grid-template-columns:1fr}
}

/* Mobile ≤ 699 px */
@media (max-width:699px){
  #services.sx{padding-inline:16px}
  .sx-console{margin-inline:-6px;padding:10px;border-radius:24px}
  .sx-bar{flex-direction:column;align-items:stretch;gap:10px;padding:6px 2px 12px}
  .sx-goals{border-radius:16px;margin-inline:-2px;scroll-snap-type:x proximity}
  .sx-goal{scroll-snap-align:start}
  .sx-goal-ink{border-radius:12px}
  .sx-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"site" "seo" "shop" "app" "flow" "host"}
  .sx-tile{padding:16px}
  .sx-tile .sx-link::after{inset:-16px}
  .sx-points{display:none}
  .sxs{min-height:330px;padding:10px}
  .sxs-browser[data-d="tab"]{--bw:76%}
  .sxs-browser[data-d="mob"]{--bw:52%}
  .sxs-score{width:52px;height:52px;bottom:-6px;left:-6px}
  .sxs-score b{font-size:14px}
  .sxs-score small{bottom:10px;font-size:6.5px}
  .sxg{min-height:0}
  .sxg-chart{min-height:120px}
  .sxa{min-height:420px}
  .sxa-phone{width:min(220px,62vw)}
  .sxa-screen{font-size:10px}
  .sxa-chip{font-size:.7rem;padding:7px 10px}
  .sxa-chip-1{left:2%;top:12%}
  .sxa-chip-2{right:2%;bottom:12%}
  .sx-foot{flex-direction:column;align-items:stretch;text-align:left}
  .sx-cta{justify-content:space-between}
}

/* Très petits écrans */
@media (max-width:380px){
  .sx-goal{padding:9px 12px;font-size:.78rem}
  .sxw-log{font-size:.66rem}
}

/* Mouvement réduit : états finaux, aucune animation en boucle */
@media (prefers-reduced-motion:reduce){
  .sx-aurora,.sx-live-dot,.sxw-wire,.sxw-gear,.sxa-chip,.sxh-pulse::after,.sxh-uptime i:last-child,.sxg-caret,.sxw-node.out rect{animation:none!important}
  .sxw-pk{display:none}
  .sx-tile,.sx-js .sx-tile{transition:none!important}
  .sx-js .sx-tile{opacity:1;transform:none}
  .sxa-phone{transform:none}
}

/* --- Ajustements V284 après vérification visuelle --- */
.sxs-score{top:-42px;right:0;bottom:auto;left:auto;width:40px;height:40px}
.sxs-score svg{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}
.sxs-score b{font-size:13px;margin:0}
.sxs-score small{display:none}
.sxa{padding:64px 14px}
.sxa-chip-1{left:5%;top:16px}
.sxa-chip-2{right:5%;bottom:16px}
.sxa-phone{width:clamp(210px,19vw,320px)}
@media (min-width:1800px){.sxs-score{width:46px;height:46px;top:-46px}.sxs-score b{font-size:15px}.sxa-phone{width:330px}}
@media (max-width:1099px){
  .sxs{min-height:400px}
  .sx-goals{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .sx-goals.is-end{-webkit-mask-image:none;mask-image:none}
  .sxa-phone{width:clamp(200px,27vw,250px)}
}
@media (max-width:699px){
  .sxs{min-height:390px}
  .sxs-devs{align-self:flex-start}
  .sxs-score{width:36px;height:36px;top:-40px;right:0;bottom:auto;left:auto}
  .sxs-score b{font-size:12px}
  .sxa{padding:58px 10px;min-height:0}
  .sxa-phone{width:min(220px,60vw)}
  .sxa-chip-1{left:4%;top:12px}
  .sxa-chip-2{right:4%;bottom:12px}
}
@container (max-width:420px){.sxs-hero-img{aspect-ratio:16/8}}
@media (max-width:480px){.sxw-log li time{display:none}}

/* =========================================================
   V285 — Palette alignée sur le site (blanc, bleu royal, cyan, marine)
   Tuiles marine / blanches en alternance, comme les cartes d'origine.
   ========================================================= */
#services.sx{--sx-green:#19b3ff;--sx-navy:#0a1638;--sx-navy2:#13275e}
.sx-console{color:var(--sx-ink);background:linear-gradient(180deg,#f7faff 0%,#eef4fe 100%);box-shadow:0 30px 70px -44px rgba(31,85,240,.45),inset 0 0 0 1px #e1eaf8}
.sx-aurora.a1{background:radial-gradient(circle,#3b82ff 0%,transparent 65%);opacity:.16}
.sx-aurora.a2{background:radial-gradient(circle,#12c2ff 0%,transparent 65%);opacity:.14}
.sx-gridlines{background-image:linear-gradient(rgba(31,85,240,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(31,85,240,.05) 1px,transparent 1px)}
.sx-bar-label{color:#1b2a52}
.sx-goals{background:#fff;border-color:#dce6f6;box-shadow:0 8px 22px -14px rgba(31,85,240,.35)}
.sx-goal{color:#4a5b80}
.sx-goal:hover{color:var(--sx-ink)}
.sx-goal[aria-pressed="true"],.sx-goal[aria-pressed="true"]:hover{color:#fff}
.sx-goal-ink{box-shadow:0 8px 20px -8px rgba(31,85,240,.65),inset 0 1px 0 rgba(255,255,255,.25)}
.sx-bar-status{color:var(--sx-muted)}
.sx-bar-status b{color:var(--sx-ink)}

/* Tuiles marine (par défaut) */
.sx-tile{background:linear-gradient(165deg,#15296a 0%,#0a1638 62%);border-color:rgba(255,255,255,.07);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 24px 50px -30px rgba(10,22,56,.65)}
.sx-tile:hover{box-shadow:0 34px 64px -30px rgba(10,22,56,.7)}
.sx-copy p{color:#b3c0e0}
.sx-more{color:#9cc0ff}
.sx-demo{background:rgba(3,10,35,.4);border-color:rgba(255,255,255,.07)}
.sx-reco{color:#fff;background:linear-gradient(90deg,#1f55f0,#3b82ff);box-shadow:0 6px 14px -6px rgba(31,85,240,.7)}
.sx-tile:not(.is-light) .sx-reco{background:#fff;color:#1f55f0}

/* Tuiles blanches */
.sx-tile.is-light{background:#fff;border-color:#e2eaf7;box-shadow:0 20px 44px -28px rgba(31,85,240,.35)}
.sx-tile.is-light:hover{box-shadow:0 30px 60px -30px rgba(31,85,240,.45)}
.sx-tile.is-light::before{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(59,130,255,.07),transparent 45%)}
.sx-tile.is-light::after{background:radial-gradient(300px circle at var(--mx) var(--my),rgba(59,130,255,.7),transparent 50%)}
.sx-tile.is-light h3{color:var(--sx-ink)}
.sx-tile.is-light .sx-copy p{color:var(--sx-muted)}
.sx-tile.is-light .sx-idx{color:#8a97b5}
.sx-tile.is-light .sx-more{color:var(--sx-blue)}
.sx-tile.is-light .sx-more i{background:rgba(31,85,240,.07);border-color:rgba(31,85,240,.22)}
.sx-tile.is-light:hover .sx-more{color:var(--sx-ink)}
.sx-tile.is-light:hover .sx-more i{color:#fff}
.sx-tile.is-light .sx-demo{background:linear-gradient(180deg,#f5f9ff,#eef4fe);border-color:#e3ebf8}

/* Filtre */
.sx-console[data-goal]:not([data-goal="all"]) .sx-tile:not(.is-match){opacity:.35;filter:saturate(.35)}
.sx-console[data-goal]:not([data-goal="all"]) .sx-tile.is-match{border-color:#3b82ff;box-shadow:0 0 0 2px rgba(59,130,255,.35),0 30px 64px -30px rgba(31,85,240,.6)}

/* Pied */
.sx-foot{background:linear-gradient(100deg,#0a1638 0%,#13307f 55%,#1f55f0 100%);border-color:transparent;box-shadow:0 24px 50px -30px rgba(10,22,56,.7)}
.sx-foot p{color:#c8d4f2}

/* Démo 01 — maquette aux couleurs bleues */
.sxs-logo span{background:linear-gradient(135deg,#3b82ff,#1f55f0)}
.sxs-hero-txt small{color:#1f55f0}
.sxs-cta{background:linear-gradient(90deg,#1f55f0,#3b82ff);color:#fff;box-shadow:0 6px 14px -6px rgba(31,85,240,.8)}
.sxs-check{background:linear-gradient(135deg,#19b3ff,#1f55f0)}
.sxs-check svg{stroke:#fff}

/* Démo 02 — SEO sur fond clair */
.sxg-search{background:#fff;border-color:#dbe5f5;color:var(--sx-ink)}
.sxg-search svg{stroke:var(--sx-blue)}
.sxg-caret{background:var(--sx-blue)}
.sxg-results li{background:#fff;border-color:#e6edf8}
.sxg-fav{background:#e9effa}
.sxg-l b{background:#d3dcee}
.sxg-l i{background:#e7ecf6}
.sxg-pos{color:#8a97b5}
.sxg-results li.is-you{background:linear-gradient(90deg,#1f55f0,#3b82ff);border-color:transparent;box-shadow:0 14px 28px -12px rgba(31,85,240,.7)}
.sxg-l small{color:#d6e4ff}
.sxg-results li.is-you.is-top .sxg-pos{background:#fff;color:var(--sx-blue)}
.sxg-chart{background:#fff;border-color:#e6edf8}
.sxg-chart-head{color:var(--sx-muted)}
.sxg-up{color:var(--sx-blue)}
.sxg-line{stroke:var(--sx-blue)}
.sxg-dot{stroke:var(--sx-blue)}

/* Démo 03 — Boutique sur fond clair */
.sxc-kpi,.sxc-feed li{background:#fff;border-color:#e6edf8}
.sxc-kpi>span{color:var(--sx-muted)}
.sxc-kpi>b{color:var(--sx-ink)}
.sxc-bars i{background:rgba(31,85,240,.16)}
.sxc-bars i.now{background:linear-gradient(180deg,#12c2ff,#1f55f0)}
.sxc-feed li{box-shadow:0 6px 16px -12px rgba(31,85,240,.4)}
.sxc-t b{color:var(--sx-ink)}
.sxc-t small{color:#6b7a9c}
.sxc-amt{color:var(--sx-blue)}

/* Démo 04 — Application */
.sxa-glow{background:radial-gradient(circle,rgba(59,130,255,.4),transparent 65%)}
.sxa-hello em{background:linear-gradient(135deg,#3b82ff,#1f55f0)}
.sxa-kpis .alt i{color:var(--sx-blue)}
.sxa-tasks li.done i{background:var(--sx-blue);border-color:var(--sx-blue)}

/* Démo 05 — Automatisation */
.sxw-hub rect{fill:url(#sxw-g)}
.sxw-log li b{color:#19b3ff}

/* Démo 06 — Hébergement sur fond clair */
.sxh-head b{color:var(--sx-ink)}
.sxh-pulse{background:var(--sx-blue)}
.sxh-pulse::after{border-color:var(--sx-blue)}
.sxh-uptime i{background:linear-gradient(180deg,#3b82ff,#1f55f0);opacity:.9}
.sxh-uptime-legend{color:#8a97b5}
.sxh-checks li{background:#fff;border-color:#e6edf8;color:#34446b}
.sxh-checks svg{stroke:var(--sx-blue)}
.sxh-checks b{color:var(--sx-blue)}

/* Mobile : alternance marine / blanc conservée */
@media (max-width:699px){
  .sx-grid{grid-template-areas:"site" "seo" "app" "shop" "flow" "host"}
}

/* =========================================================
   V286 — Contours renforcés
   Tâche 1 : éléments posés sur fond blanc (tuiles blanches seulement)
   Tâche 2 : bulle « Je veux… »
   ========================================================= */
.sx-tile.is-light{border:1.5px solid #c9d8f0;box-shadow:0 20px 44px -28px rgba(31,85,240,.4),0 1px 0 rgba(31,85,240,.06)}
.sx-tile.is-light .sx-demo{border:1.5px solid #cdd9ee}
.sx-tile.is-light .sx-more i{border:1.5px solid rgba(31,85,240,.38)}
.sx-tile.is-light .sxg-search{border:1.5px solid #bccdea;box-shadow:0 4px 12px -8px rgba(31,85,240,.35)}
.sx-tile.is-light .sxg-results li:not(.is-you),
.sx-tile.is-light .sxg-chart,
.sx-tile.is-light .sxc-kpi,
.sx-tile.is-light .sxc-feed li,
.sx-tile.is-light .sxh-checks li{border:1.5px solid #cfdbef;box-shadow:0 4px 12px -9px rgba(31,85,240,.4)}
.sx-tile.is-light .sxg-fav{box-shadow:inset 0 0 0 1.5px #c7d5ee}

/* Bulle « Je veux… » */
.sx-goals{border:2px solid #b7cbee;box-shadow:0 10px 26px -14px rgba(31,85,240,.5),0 0 0 4px rgba(59,130,255,.07)}
.sx-goal-ink{top:3px;bottom:3px}

/* =========================================================
   V289 — Grand cadre « Je veux… » (console) :
   fond plus soutenu, contour accentué, forme plus carrée aux coins arrondis
   ========================================================= */
.sx-console{border-radius:20px;background:linear-gradient(180deg,#dde8fb 0%,#cfdcf5 100%);border:2px solid #aec3ea;box-shadow:0 30px 70px -40px rgba(31,85,240,.5),inset 0 1px 0 rgba(255,255,255,.75)}
.sx-gridlines{background-image:linear-gradient(rgba(31,85,240,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(31,85,240,.07) 1px,transparent 1px)}
.sx-tile,.sx-foot{border-radius:16px}
.sx-bar-status{color:#3d4f7a}
@media (max-width:699px){.sx-console{border-radius:16px}.sx-tile,.sx-foot{border-radius:14px}}

/* =========================================================
   V290 — Tâche 1 : contour accentué des services blancs
           Tâche 2 : les 6 services en carrés (coins presque droits)
   ========================================================= */
.sx-tile.is-light{border:2px solid #8fabe0;box-shadow:0 20px 44px -28px rgba(31,85,240,.45)}
.sx-tile.is-light:hover{border-color:#5f87d8}
.sx-tile,.sx-tile::before,.sx-tile::after{border-radius:6px}
.sx-tile .sx-demo{border-radius:4px}
@media (max-width:699px){.sx-tile,.sx-tile::before,.sx-tile::after{border-radius:6px}}

/* =========================================================
   V291 — Grand cadre « Je veux… » : contour bleu foncé (même bleu que le survol
   des services blancs) + forme encore plus carrée
   ========================================================= */
.sx-console{border:2px solid #5f87d8;border-radius:8px}
@media (max-width:699px){.sx-console{border-radius:8px}}

/* =========================================================
   V292 — Bulle des choix (« Tout voir », « Attirer plus de clients »…) :
   fond blanc conservé, forme carrée comme les services (6 px)
   ========================================================= */
.sx-goals{border-radius:6px}
.sx-goal,.sx-goal-ink{border-radius:4px}
@media (max-width:699px){.sx-goals{border-radius:6px}.sx-goal,.sx-goal-ink{border-radius:4px}}

/* =========================================================
   V293 — Titre des services à droite de l'icône et du chiffre
   ========================================================= */
.sx-meta{align-items:center;gap:12px}
.sx-meta .sx-ico{flex:none}
.sx-meta .sx-idx{flex:none;align-self:center}
.sx-meta h3{flex:1;min-width:0}
.sx-reco{flex:none;align-self:flex-start}
.sx-console[data-goal="all"] .sx-reco,.sx-tile:not(.is-match) .sx-reco{display:none}

/* =========================================================
   V294 — Boîte des choix : même contour que les services blancs
   ========================================================= */
.sx-goals{border:2px solid #8fabe0;box-shadow:0 20px 44px -28px rgba(31,85,240,.45)}
.sx-goals:hover{border-color:#5f87d8}

/* =========================================================
   V295 — Titres des services 01 et 06 sur une seule ligne
   (la taille s'ajuste à la largeur disponible pour ne jamais déborder)
   ========================================================= */
.sx-t-site .sx-copy,.sx-t-host .sx-copy{container-type:inline-size}
.sx-t-site .sx-meta,.sx-t-host .sx-meta{gap:10px}
.sx-t-site .sx-meta h3,.sx-t-host .sx-meta h3{white-space:nowrap}
.sx-t-site .sx-meta h3{font-size:min(clamp(1.15rem,1.3vw,1.7rem),calc((100cqi - clamp(38px,2.6vw,50px) - 42px) / 10.8))}
.sx-t-host .sx-meta h3{font-size:min(clamp(1.15rem,1.3vw,1.7rem),calc((100cqi - clamp(38px,2.6vw,50px) - 42px) / 15.2))}
@media (min-width:1280px){.sx-t-site{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr)}}

/* Entre 700 et 1279 px : 2 colonnes; Hébergement et Automatisation sur toute la largeur */
@media (min-width:700px) and (max-width:1279px){
  .sx-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"site site" "seo app" "shop app" "host host" "flow flow"}
  .sx-bar-status{display:none}
}
@media (min-width:900px) and (max-width:1279px){
  .sx-t-site,.sx-t-host,.sx-t-auto{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-items:stretch}
  .sx-t-host .sx-copy,.sx-t-auto .sx-copy{justify-content:center}
}
@media (min-width:700px) and (max-width:899px){
  .sxw-flow{max-width:520px;margin-inline:auto}
}

/* =========================================================
   V296 — TEST : tous les contours modifiés à la demande passent au noir
   (grand cadre, boîte des choix, services blancs et leurs éléments intérieurs)
   ========================================================= */
.sx-console{border-color:#000}
.sx-goals,.sx-goals:hover{border-color:#000}
.sx-tile.is-light,.sx-tile.is-light:hover{border-color:#000}
.sx-tile.is-light .sx-demo{border-color:#000}
.sx-tile.is-light .sx-more i{border-color:#000}
.sx-tile.is-light .sxg-search,
.sx-tile.is-light .sxg-results li:not(.is-you),
.sx-tile.is-light .sxg-chart,
.sx-tile.is-light .sxc-kpi,
.sx-tile.is-light .sxc-feed li,
.sx-tile.is-light .sxh-checks li{border-color:#000}
.sx-tile.is-light .sxg-fav{box-shadow:inset 0 0 0 1.5px #000}

/* =========================================================
   V297 — Badges « Recommandé » retirés
   ========================================================= */
.sx-reco{display:none!important}

/* =========================================================
   V298 — Contours adoucis (remplace le noir du test V296)
   Grands contours : marine ardoise #34446b (couleur des textes du site)
   Éléments intérieurs des services blancs : bleu moyen #5b7fd1
   ========================================================= */
.sx-console{border-color:#34446b}
.sx-goals,.sx-goals:hover{border-color:#34446b}
.sx-tile.is-light,.sx-tile.is-light:hover{border-color:#34446b}
.sx-tile.is-light .sx-demo{border-color:#5b7fd1}
.sx-tile.is-light .sx-more i{border-color:#5b7fd1}
.sx-tile.is-light .sxg-search,
.sx-tile.is-light .sxg-results li:not(.is-you),
.sx-tile.is-light .sxg-chart,
.sx-tile.is-light .sxc-kpi,
.sx-tile.is-light .sxc-feed li,
.sx-tile.is-light .sxh-checks li{border-color:#5b7fd1}
.sx-tile.is-light .sxg-fav{box-shadow:inset 0 0 0 1.5px #5b7fd1}

/* =========================================================
   V299 — Plus d'espace entre « Je veux… » et la barre des choix
   ========================================================= */
@media (min-width:700px){.sx-goals{margin-left:clamp(14px,1.6vw,32px)}}
@media (max-width:699px){.sx-bar{gap:14px}}

/* =========================================================
   V300 — Bandeau « Pas certain de ce qu'il vous faut ? » : éléments carrés
   ========================================================= */
.sx-foot{border-radius:6px}
.sx-cta{border-radius:6px;padding:8px 8px 8px clamp(18px,1.4vw,26px)}
.sx-cta i{border-radius:4px}
@media (max-width:699px){.sx-foot,.sx-cta{border-radius:6px}}

/* =========================================================
   V301 — Fond du grand cadre plus reposant pour les yeux :
   blanc légèrement bleuté uni, sans grille ni lueurs
   ========================================================= */
.sx-console{background:#f4f7fc}
.sx-console-fx{display:none}

/* =========================================================
   V305 — Texte d'introduction retiré : en-tête sur une seule colonne
   ========================================================= */
.sx-head{grid-template-columns:1fr}

/* =========================================================
   V306 — Hiérarchie de l'en-tête corrigée
   « Nos services » = titre (même style que « Nos réalisations »)
   « Des solutions numériques… » = sous-texte (même style que le texte sous « Nos réalisations »)
   ========================================================= */
.sx .sx-eyebrow.sx-title{font:700 clamp(1.15rem,1.45vw,1.9rem)/1.25 Poppins,sans-serif;letter-spacing:.2em;gap:clamp(16px,1.3vw,24px);color:#12244d;max-width:none;margin:0 0 clamp(14px,1.3vw,24px)}
.sx .sx-eyebrow.sx-title::before{width:clamp(40px,3.2vw,64px);height:4px}
.sx-sub{margin:0;color:#2b3f73;font-size:clamp(.86rem,1vw,1.1rem);line-height:1.55;max-width:60ch}
.sx-sub em{font-style:normal;font-weight:600;color:#1f55f0}
.sx-head{margin-bottom:clamp(22px,2.2vw,40px)}
@media (max-width:1099px){.sx-sub{font-size:clamp(.98rem,1.7vw,1.1rem);line-height:1.6}}
@media (max-width:699px){.sx .sx-eyebrow.sx-title{font-size:1.1rem;letter-spacing:.16em}.sx .sx-eyebrow.sx-title::before{width:36px}}

/* =========================================================
   V307 — Titre « Nos services » un peu plus grand (≈ +22 %)
   ========================================================= */
.sx .sx-eyebrow.sx-title{font-size:clamp(1.4rem,1.78vw,2.35rem);gap:clamp(18px,1.5vw,28px)}
.sx .sx-eyebrow.sx-title::before{width:clamp(46px,3.8vw,76px)}
@media (max-width:699px){.sx .sx-eyebrow.sx-title{font-size:1.3rem}.sx .sx-eyebrow.sx-title::before{width:40px}}

/* =========================================================
   V308 — Démo SEO réaliste : vraie page de résultats de recherche
   (barre de recherche, onglets, nombre de résultats, résultats avec favicon,
   nom du site, URL, titre bleu, description; « Votre entreprise » monte au 1er rang)
   ========================================================= */
#services .sxg{background:#fff;padding:14px 14px 6px;gap:0;font-family:Arial,Helvetica,sans-serif;min-height:0}
#services .sxg-bar{padding-bottom:4px}
#services .sxg-search{display:flex;align-items:center;gap:0;height:44px;min-height:0;padding:0 12px 0 18px;border-radius:24px;background:#fff;border:1px solid #dfe1e5;box-shadow:0 1px 6px rgba(32,33,36,.22);font:15px/1 Arial,Helvetica,sans-serif;color:#202124}
#services .sxg-q{white-space:nowrap;overflow:hidden;text-overflow:clip}
#services .sxg-caret{margin-left:1px;width:1px;background:#202124}
#services .sxg-icons{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none;padding-left:10px}
#services .sxg-icons svg{width:18px;height:18px;fill:none;stroke:#1a73e8;stroke-width:2.2;stroke-linecap:round}
#services .sxg-icons svg.x{width:16px;height:16px;stroke:#70757a;stroke-width:2}
#services .sxg-icons .sep{width:1px;height:22px;background:#dadce0}
#services .sxg-tabs{display:flex;gap:18px;padding:12px 6px 0;border-bottom:1px solid #ebebeb;white-space:nowrap;overflow:hidden;font-size:13px;color:#5f6368}
#services .sxg-tabs span{padding-bottom:9px;border-bottom:3px solid transparent}
#services .sxg-tabs span.on{color:#1a73e8;border-bottom-color:#1a73e8}
#services .sxg-count{margin:10px 6px 4px;font-size:12px;color:#70757a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#services .sxg-results{--rh:106px;--rg:0px;height:calc(5 * var(--rh))}
#services .sxg .sxg-results li,#services .sx-tile.is-light .sxg-results li:not(.is-you){display:block;top:calc(var(--p) * var(--rh));height:var(--rh);padding:9px 10px;border:0;border-radius:8px;background:transparent;box-shadow:none;transition:top .9s cubic-bezier(.65,0,.2,1),background .5s,box-shadow .5s}
#services .sxg-top{display:flex;align-items:center;gap:10px;min-width:0}
#services .sx-tile.is-light .sxg-fav,#services .sxg-fav{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;color:#fff;font:700 12px/1 Arial,sans-serif;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
#services .sxg-fav svg{width:14px;height:14px;fill:#fff}
#services .sxg-site{display:flex;flex-direction:column;min-width:0;line-height:1.25}
#services .sxg-site b{font-weight:400;font-size:13px;color:#202124;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#services .sxg-site small{font-size:11.5px;color:#4d5156;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#services .sxg-title{display:block;margin:5px 0 2px;font-size:16px;line-height:1.3;color:#1a0dab;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default}
#services .sxg-snip{margin:0;font-size:12px;line-height:1.45;color:#4d5156;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#services .sxg-rich{display:block;font-size:11.5px;line-height:1.4;color:#70757a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#services .sxg-rich i{font-style:normal;color:#f4b400;letter-spacing:1px}
#services .sxg-results li.is-you .sxg-snip{-webkit-line-clamp:1}
#services .sxg-pos{display:none}

/* Votre entreprise : surlignée et étiquetée avec sa position */
#services .sxg .sxg-results li.is-you{z-index:2;background:#eef4ff;box-shadow:inset 3px 0 0 #1f55f0,0 12px 26px -16px rgba(31,85,240,.7)}
#services .sxg-results li.is-you .sxg-site b{font-weight:700;color:#202124}
#services .sxg-results li.is-you .sxg-site small{color:#4d5156}
#services .sxg-results li.is-you .sxg-pos{display:inline-flex;align-items:center;margin-left:auto;flex:none;padding:4px 8px;border-radius:4px;background:#34446b;color:#fff;font:700 11px/1 Arial,sans-serif;width:auto;height:auto;transition:background .4s}
#services .sxg-results li.is-you .sxg-pos::before{content:"Position\00a0"}
#services .sxg-results li.is-you.is-top .sxg-pos{background:#1f55f0}

@media (max-width:699px){
  #services .sxg{padding:12px 10px 4px}
  #services .sxg-tabs{gap:14px}
  #services .sxg-results{--rh:104px}
  #services .sxg-title{font-size:15px}
}
@media (prefers-reduced-motion:reduce){#services .sxg .sxg-results li{transition:none}}

/* =========================================================
   V309 — Démo Boutique réaliste : tableau de bord « Commandes » en tons neutres
   (comme une vraie plateforme e-commerce; le bleu reste seulement sur le cadre)
   ========================================================= */
#services .sxc{--n-ink:#1a1a1a;--n-sub:#616161;--n-line:#d4d4d4;background:#fff;padding:14px;gap:10px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
#services .sxc-head{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--n-ink)}
#services .sxc-head b{font-weight:650}
#services .sxc-pill{font-size:11.5px;color:#4a4a4a;background:#f1f1f1;border:1px solid #e3e3e3;border-radius:6px;padding:3px 8px}
#services .sxc-live{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:11.5px;color:#4a4a4a}
#services .sxc-live i{width:7px;height:7px;border-radius:50%;background:#29845a;box-shadow:0 0 0 0 rgba(41,132,90,.5);animation:sxc-ping 2s infinite}
@keyframes sxc-ping{0%{box-shadow:0 0 0 0 rgba(41,132,90,.45)}80%,100%{box-shadow:0 0 0 7px rgba(41,132,90,0)}}

#services .sx-tile.is-light .sxc-kpi,#services .sxc-kpi{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--n-line);border-radius:10px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05)}
#services .sxc-kpi-l{display:flex;flex-direction:column;gap:2px;min-width:0}
#services .sxc-kpi-l>span{font-size:12px;color:var(--n-sub)}
#services .sxc-kpi-l>b{font-size:clamp(1.15rem,1.4vw,1.6rem);font-weight:700;color:var(--n-ink);letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
#services .sxc-trend{font-style:normal;font-size:11.5px;font-weight:600;color:#29845a}
#services .sxc-bars{height:40px}
#services .sxc-bars i{background:#e3e3e3}
#services .sxc-bars i.now{background:#303030}

#services .sxc-feed{--fh:54px}
#services .sx-tile.is-light .sxc-feed li,#services .sxc-feed li{gap:10px;padding:0 12px 0 8px;border:1px solid var(--n-line);border-radius:10px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05)}
#services .sxc-thumb{width:36px;height:36px;border-radius:8px;border:1px solid rgba(0,0,0,.06)}
#services .sxc-thumb svg{width:20px;height:20px;fill:none;stroke:#5a4636;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#services .sxc-t b{font-size:13px;font-weight:600;color:var(--n-ink)}
#services .sxc-t small{font-size:12px;color:var(--n-sub)}
#services .sxc-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
#services .sxc-amt{font-size:13px;font-weight:600;color:var(--n-ink)}
#services .sxc-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:#0c5132;background:#cdfee1;border-radius:5px;padding:2px 6px}
#services .sxc-badge i{width:6px;height:6px;border-radius:50%;background:#29845a}
@media (prefers-reduced-motion:reduce){#services .sxc-live i{animation:none}}

/* =========================================================
   V310 — Démo Boutique : vignettes de produits bien visibles
   (couleurs franches + icônes blanches plus épaisses) et commandes plus anciennes moins décolorées
   ========================================================= */
#services .sxc-thumb{width:38px;height:38px;border:0;border-radius:9px;box-shadow:0 4px 10px -4px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25)}
#services .sxc-thumb svg{width:21px;height:21px;stroke:#fff;stroke-width:2}
#services .sxc-feed li{opacity:calc(1 - var(--k) * .14)}
#services .sx-tile.is-light .sxc-feed li,#services .sxc-feed li,#services .sx-tile.is-light .sxc-kpi,#services .sxc-kpi{border-color:#c4c4c4}

/* =========================================================
   V311 — Démo Boutique : contours des 4 cartes (Ventes totales + commandes) bien visibles
   ========================================================= */
#services .sx-tile.is-light .sxc-feed li,#services .sxc-feed li,
#services .sx-tile.is-light .sxc-kpi,#services .sxc-kpi{border:1.5px solid #8f8f8f;box-shadow:0 2px 6px -3px rgba(0,0,0,.18)}

/* =========================================================
   V312 — Démo Hébergement en langage simple pour le client :
   site en ligne · 100 % du temps ce mois-ci · copie de sécurité / protection / mises à jour
   · une demande de changement traitée par l'équipe
   ========================================================= */
#services .sxh{background:#fff;padding:14px;gap:10px}
#services .sxh-site{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid #5b7fd1;border-radius:10px;background:#fff}
#services .sxh-globe{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;flex:none;background:linear-gradient(135deg,#3b82ff,#1f55f0)}
#services .sxh-globe svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round}
#services .sxh-site-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
#services .sxh-site-t b{font-size:.86rem;font-weight:600;color:var(--sx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#services .sxh-site-t small{font-size:.74rem;color:#56658a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#services .sxh-on{display:inline-flex;align-items:center;gap:6px;margin-left:auto;flex:none;font-size:.74rem;font-weight:600;color:#0c5132;background:#cdfee1;border-radius:999px;padding:4px 10px}
#services .sxh-on i{position:relative;width:7px;height:7px;border-radius:50%;background:#1f9d5c}
#services .sxh-on i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid #1f9d5c;opacity:0;animation:sxh-ring 2s ease-out infinite}

#services .sxh-month{padding:10px 12px;border:1.5px solid #5b7fd1;border-radius:10px;background:#fff}
#services .sxh-month-t{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
#services .sxh-month-t b{font-size:1.3rem;font-weight:700;color:var(--sx-ink);line-height:1}
#services .sxh-month-t span{font-size:.78rem;color:#56658a}
#services .sxh-uptime{height:22px;gap:2px}
#services .sxh-uptime i{background:linear-gradient(180deg,#34c27d,#1f9d5c);opacity:.95}
#services .sxh-uptime-legend{margin-top:4px}

#services .sxh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#services .sxh-list li{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1.5px solid #5b7fd1;border-radius:10px;background:#fff;font-size:.8rem;line-height:1.3;color:#34446b}
#services .sxh-ck{position:relative;width:20px;height:20px;border-radius:50%;flex:none;border:1.6px solid #b9c6de;transition:background .3s,border-color .3s}
#services .sxh-ck::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
#services .sxh-list li.done .sxh-ck{background:#1f9d5c;border-color:#1f9d5c}
#services .sxh-list li.done .sxh-ck::after{transform:rotate(45deg) scale(1)}

#services .sxh-chat{display:flex;flex-direction:column;gap:6px;padding-top:2px}
#services .sxh-msg{max-width:88%;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
#services .sxh-msg.show{opacity:1;transform:none}
#services .sxh-msg.me{align-self:flex-end}
#services .sxh-msg.me span{display:block;padding:8px 12px;border-radius:14px 14px 4px 14px;background:#eef2f8;color:#34446b;font-size:.78rem;line-height:1.35}
#services .sxh-msg.us{align-self:flex-start;display:flex;flex-direction:column;gap:3px}
#services .sxh-reply,#services .sxh-typing{padding:8px 12px;border-radius:14px 14px 14px 4px;background:linear-gradient(135deg,#3b82ff,#1f55f0);color:#fff;font-size:.78rem;line-height:1.35}
#services .sxh-reply{display:none}
#services .sxh-typing{display:inline-flex;gap:4px;align-items:center;width:max-content}
#services .sxh-typing i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.5;animation:sxh-dot 1s infinite}
#services .sxh-typing i:nth-child(2){animation-delay:.15s}#services .sxh-typing i:nth-child(3){animation-delay:.3s}
@keyframes sxh-dot{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
#services .sxh-msg.us small{font-size:.68rem;color:#8a97b5;display:none}
#services .sxh-msg.us.answered .sxh-typing{display:none}
#services .sxh-msg.us.answered .sxh-reply,#services .sxh-msg.us.answered small{display:block}
@media (prefers-reduced-motion:reduce){#services .sxh-typing i,#services .sxh-on i::after{animation:none}#services .sxh-msg{transition:none}}
@media (max-width:480px){
  #services .sxh-site{gap:8px;padding:9px 10px}
  #services .sxh-globe{width:28px;height:28px}
  #services .sxh-globe svg{width:16px;height:16px}
  #services .sxh-site-t b{font-size:.8rem}
  #services .sxh-on{padding:3px 8px;font-size:.68rem;gap:5px}
}
@media (max-width:380px){#services .sxh-site-t b{font-size:.75rem}#services .sxh-on{padding:3px 7px;font-size:.64rem}}

/* =========================================================
   V313 — Démo Hébergement : carte de prix « On héberge votre site pour vous · 29 $ / mois »
   ========================================================= */
#services .sxh-price{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:10px;color:#fff;
  background:linear-gradient(120deg,#0a1638 0%,#13307f 60%,#1f55f0 100%);box-shadow:0 12px 26px -16px rgba(10,22,56,.8)}
#services .sxh-price-l{display:flex;flex-direction:column;gap:2px;min-width:0}
#services .sxh-price-l small{font-size:.74rem;color:#c8d4f2}
#services .sxh-price-l b{font-size:clamp(1.5rem,1.7vw,2rem);font-weight:800;line-height:1.05;letter-spacing:-.02em}
#services .sxh-price-l b span{font-size:.5em;font-weight:500;color:#c8d4f2;margin-left:4px;letter-spacing:0}
#services .sxh-price-l em{font-style:normal;font-size:.72rem;color:#9fc0ff}
#services .sxh-price-tag{flex:none;align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0a1638;background:#fff;border-radius:4px;padding:5px 8px}
#services .sx-t-host .sx-copy p strong{color:var(--sx-ink);font-weight:600}
#services .sxh-price{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px}
#services .sxh-price>small{font-size:.76rem;color:#c8d4f2}
#services .sxh-price-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
#services .sxh-price-row b{font-size:clamp(1.5rem,1.7vw,2rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;white-space:nowrap}
#services .sxh-price-row b span{font-size:.5em;font-weight:500;color:#c8d4f2;margin-left:4px;letter-spacing:0}
#services .sxh-price>em{font-style:normal;font-size:.74rem;color:#9fc0ff}
#services .sxh-price-tag{align-self:center}

/* =========================================================
   V314 — Démo Hébergement compacte : prix · aperçu du site en ligne · statistiques en direct · extras
   (même hauteur qu'avant pour ne plus étirer la rangée Automatisation)
   ========================================================= */
#services .sxh2{background:#fff;padding:12px;gap:8px;min-height:0}
#services .sxh2-price{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:#fff;background:linear-gradient(110deg,#0a1638,#13307f 60%,#1f55f0)}
#services .sxh2-price b{font-size:1.35rem;font-weight:800;line-height:1;white-space:nowrap}
#services .sxh2-price b span{font-size:.55em;font-weight:500;color:#c8d4f2;margin-left:4px}
#services .sxh2-incl{font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#0a1638;background:#fff;border-radius:4px;padding:3px 6px;white-space:nowrap}
#services .sxh2-price small{margin-left:auto;font-size:.72rem;color:#9fc0ff;white-space:nowrap}

#services .sxh2-site{border:1.5px solid #5b7fd1;border-radius:8px;overflow:hidden;background:#fff}
#services .sxh2-bar{display:flex;align-items:center;gap:5px;padding:6px 8px;background:#eef2f9;border-bottom:1px solid #dbe3f1}
#services .sxh2-bar>i{width:7px;height:7px;border-radius:50%;background:#ff6058;flex:none}
#services .sxh2-bar>i:nth-child(2){background:#ffbd2e}#services .sxh2-bar>i:nth-child(3){background:#28c941}
#services .sxh2-url{display:flex;align-items:center;gap:4px;margin-left:6px;padding:2px 8px;border-radius:5px;background:#fff;font-size:.72rem;font-weight:600;color:var(--sx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#services .sxh2-url svg{width:10px;height:10px;fill:none;stroke:#1f9d5c;stroke-width:2.4;flex:none}
#services .sxh2-on{display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex:none;font-size:.66rem;font-weight:700;color:#0c5132;background:#cdfee1;border-radius:999px;padding:2px 8px}
#services .sxh2-on em{width:6px;height:6px;border-radius:50%;background:#1f9d5c;animation:sx-ping 2s infinite}
#services .sxh2-shot{position:relative;height:clamp(56px,4.4vw,74px);background:#cfd8e8 url(../img/services/sx-demo-maison.webp) center 40%/cover no-repeat}
#services .sxh2-shot-t{position:absolute;left:8px;bottom:6px;font-size:.66rem;font-weight:600;color:#fff;background:rgba(10,22,56,.72);border-radius:4px;padding:2px 7px}

#services .sxh2-stats{padding:9px 11px;border:1.5px solid #5b7fd1;border-radius:8px;background:#fff}
#services .sxh2-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#services .sxh2-kpis div{display:flex;flex-direction:column;min-width:0}
#services .sxh2-kpis small{font-size:.66rem;color:#56658a}
#services .sxh2-kpis b{font-size:.98rem;font-weight:700;color:var(--sx-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
#services .sxh2-kpis b.sxh2-up{color:#1f9d5c}
#services .sxh2-src{display:flex;height:8px;margin-top:8px;border-radius:4px;overflow:hidden;background:#eef2f9}
#services .sxh2-src span{width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
#services .sxh2.is-on .sxh2-src span{width:var(--w)}
#services .sxh2-src .g,#services .sxh2-leg i.g{background:#1f55f0}
#services .sxh2-src .r,#services .sxh2-leg i.r{background:#12c2ff}
#services .sxh2-src .d,#services .sxh2-leg i.d{background:#34446b}
#services .sxh2-leg{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:6px;font-size:.66rem;color:#56658a}
#services .sxh2-leg span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
#services .sxh2-leg i{width:7px;height:7px;border-radius:2px}

#services .sxh2-extras{display:flex;flex-wrap:wrap;gap:6px}
#services .sxh2-extras span{font-size:.68rem;font-weight:600;color:#1f55f0;background:#eef4ff;border:1px solid #c6d6f7;border-radius:4px;padding:3px 7px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){#services .sxh2-on em{animation:none}#services .sxh2-src span{transition:none}}

/* =========================================================
   V315 — L'espace vide sous la démo SEO est donné à l'Hébergement
   Colonne de droite = SEO + Hébergement empilés; l'Hébergement s'étire pour remplir la hauteur
   (sur tablette / mobile, l'enveloppe est transparente : les tuiles restent dans la grille habituelle)
   ========================================================= */
.sx-colr,.sx-colr-in{display:contents;list-style:none;margin:0;padding:0}
@media (min-width:1280px){
  .sx-grid{grid-template-areas:"site site right" "shop app right" "flow app right"}
  .sx-colr{display:block;grid-area:right;min-width:0}
  .sx-colr-in{display:flex;flex-direction:column;gap:var(--sx-gap);height:100%}
  .sx-colr .sx-t-seo{flex:none}
  .sx-colr .sx-t-host{flex:1 1 auto}
  #services .sxh2-site{flex:1;display:flex;flex-direction:column;min-height:0}
  #services .sxh2-shot{flex:1;height:auto;min-height:clamp(56px,4.4vw,74px);max-height:260px;background-position:center 35%}
}

/* =========================================================
   V316 — Création de sites web : titre en haut comme les autres services,
   contenu réparti sur la hauteur (bouton en bas); textes plus lisibles sur les tuiles marine
   ========================================================= */
.sx-t-site .sx-copy{justify-content:flex-start}
.sx-t-site .sx-copy .sx-more{margin-top:auto;padding-top:clamp(12px,1vw,18px)}
.sx-t-site .sx-points{margin-top:1.1em}
.sx-tile:not(.is-light) .sx-copy p{color:#dbe4fa}
.sx-tile:not(.is-light) .sx-points li{color:#fff;background:rgba(59,130,255,.2);border-color:rgba(130,170,255,.45)}
.sx-tile:not(.is-light) .sx-more{color:#cfe0ff}
@media (max-width:899px){.sx-t-site .sx-copy .sx-more{margin-top:clamp(12px,1vw,18px);padding-top:0}}

/* =========================================================
   V319 — Fond du grand cadre « Je veux… » en blanc pur
   ========================================================= */
#services.sx,.sx-console{background:#fff}

/* =========================================================
   V320 — Section « Nos services » : aucune ombre
   (box-shadow, drop-shadow). Les anneaux/filets qui servent
   de bordure et les pastilles « en direct » sont conservés.
   ========================================================= */
#services.sx,
#services.sx *:not(.sx-live-dot):not(.sxc-live i):not(.sxh2-on em),
#services.sx *::before,
#services.sx *::after{box-shadow:none!important;text-shadow:none!important}
#services .sxs-cursor,
#services .sxw-hub rect{filter:none!important}
/* Filets intérieurs qui jouent le rôle de bordure (pas des ombres) */
#services.sx .sx-tile.is-light .sxg-fav{box-shadow:inset 0 0 0 1.5px #5b7fd1!important}
#services.sx .sxg .sxg-results li.is-you{box-shadow:inset 3px 0 0 #1f55f0!important}
#services.sx .sxa-phone{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)!important}

/* =========================================================
   V321 — Plateau marine : grand cadre « Je veux… » en #0A1638
   Section : blanc. Tuiles bleues éclaircies, tuiles blanches
   sans bordure. Toujours aucune ombre (bloc V320).
   ========================================================= */
#services.sx{background:#fff}
#services.sx .sx-console{background:#0A1638;border:0}
/* Barre « Je veux… » */
#services.sx .sx-bar-label{color:#fff}
#services.sx .sx-bar-status{color:#aebbe0}
#services.sx .sx-bar-status b{color:#fff}
#services.sx .sx-goals,#services.sx .sx-goals:hover{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
#services.sx .sx-goal{color:#c8d4f2}
#services.sx .sx-goal:hover{color:#fff}
#services.sx .sx-goal[aria-pressed="true"]{color:#fff}
/* Tuiles bleues : un ton plus clair que le plateau */
#services.sx .sx-tile:not(.is-light){background:linear-gradient(165deg,#1d3a8f 0%,#13275e 70%);border:1px solid rgba(255,255,255,.12)}
/* Tuiles blanches : la couleur suffit, plus de bordure */
#services.sx .sx-tile.is-light{background:#fff;border:0}
/* Filtre actif : la tuile choisie garde un contour visible */
#services.sx .sx-console[data-goal]:not([data-goal="all"]) .sx-tile.is-match{outline:2px solid #3b82ff;outline-offset:0}
/* Bande « Pas certain… » : bleu de marque pour se détacher du marine */
#services.sx .sx-foot{background:linear-gradient(100deg,#163a9e 0%,#1f55f0 100%);border:1px solid rgba(255,255,255,.14)}
#services.sx .sx-foot p{color:#dbe4fa}

/* =========================================================
   V323 — Barre « Je veux… » défilable sur mobile et tablette
   - Mobile : la barre restait aussi large que son contenu (flex
     en colonne + wrap) et était coupée par le cadre → plus de défilement.
   - Souris : glisser-déposer + molette (voir JS) ; curseur « main ».
   ========================================================= */
@media (max-width:699px){#services.sx .sx-bar{flex-wrap:nowrap}}
#services.sx .sx-goals{max-width:100%;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
#services.sx .sx-goals.is-scrollable{cursor:grab}
#services.sx .sx-goals.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
#services.sx .sx-goals.is-dragging .sx-goal{pointer-events:none}