/* ==========================================================================
   KX — Sections additionnelles ia-intelligenceartificielle.ch
   Tout est scopé sous .kx (aucune collision avec #ih-hero, #agents-ia,
   #capacites-kupa ni avec le thème Astro).
   ========================================================================== */

.kx{
  --kx-a1:#38d8ff;            /* cyan — accent principal du hero */
  --kx-a2:#a06bff;            /* violet — accent secondaire du hero */
  --kx-bg:#05060d;
  --kx-bg2:#080a12;
  --kx-surface:rgba(255,255,255,.035);
  --kx-surface2:rgba(255,255,255,.06);
  --kx-line:rgba(184,203,255,.14);
  --kx-line2:rgba(184,203,255,.26);
  --kx-text:#f2f5ff;
  --kx-muted:#9fb0c8;
  --kx-ui:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --kx-d:"Sora","Space Grotesk",system-ui,sans-serif;
  --kx-m:"JetBrains Mono","SFMono-Regular",Menlo,monospace;
  --kx-r:18px;
  position:relative;
  font-family:var(--kx-ui);
  color:var(--kx-text);
  background:var(--kx-bg);
}
.kx *{box-sizing:border-box;}
.kx section{position:relative;padding:110px 0;overflow:hidden;}
.kx .kx-wrap{width:100%;max-width:1340px;margin:0 auto;padding:0 40px;}

/* --- Fond commun : grille + halo --------------------------------------- */
.kx .kx-grid{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(120,160,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,255,.04) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 85%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000,transparent 85%);}
.kx .kx-halo{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 520px at 50% -10%,rgba(56,216,255,.07),transparent 62%);}
.kx .kx-wrap{position:relative;z-index:1;}

/* --- Titres ------------------------------------------------------------- */
.kx .kx-eyebrow{font-family:var(--kx-m);font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--kx-a1);margin:0 0 14px;display:flex;align-items:center;gap:10px;justify-content:center;}
.kx .kx-eyebrow::before,.kx .kx-eyebrow::after{content:"";height:1px;width:38px;
  background:linear-gradient(90deg,transparent,var(--kx-line2));}
.kx .kx-eyebrow::after{background:linear-gradient(90deg,var(--kx-line2),transparent);}
.kx h2.kx-t{font-family:var(--kx-d);font-weight:800;font-size:clamp(30px,4.1vw,52px);line-height:1.06;
  letter-spacing:-.02em;margin:0;text-align:center;}
.kx h2.kx-t .g{background:linear-gradient(100deg,var(--kx-a1),var(--kx-a2) 72%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.kx .kx-sub{max-width:700px;margin:20px auto 0;text-align:center;font-size:16.5px;line-height:1.65;color:var(--kx-muted);}
.kx .kx-head{margin-bottom:54px;}

/* --- Boutons ------------------------------------------------------------ */
.kx .kx-btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:999px;
  font-family:var(--kx-ui);font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background .25s ease,border-color .25s ease;}
.kx .kx-btn.p{background:linear-gradient(100deg,var(--kx-a1),var(--kx-a2));color:#05060d;
  box-shadow:0 8px 32px rgba(56,216,255,.28);}
.kx .kx-btn.p:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(56,216,255,.42);}
.kx .kx-btn.s{background:rgba(255,255,255,.045);color:var(--kx-text);border-color:var(--kx-line2);backdrop-filter:blur(8px);}
.kx .kx-btn.s:hover{transform:translateY(-2px);background:rgba(255,255,255,.09);border-color:var(--kx-a1);}
.kx .kx-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px;}

/* ==========================================================================
   1. VITRINE AGENTS À ONGLETS
   ========================================================================== */
.kx .kx-tabs{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin:0 auto 42px;max-width:1010px;}
.kx .kx-tab{display:inline-flex;align-items:center;gap:11px;padding:9px 20px 9px 9px;border-radius:999px;
  background:rgba(255,255,255,.03);border:1px solid var(--kx-line);color:#c3cee0;
  font-size:14.5px;font-weight:500;cursor:pointer;font-family:var(--kx-ui);
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease;}
.kx .kx-tab img{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:center 22%;
  border:1px solid rgba(255,255,255,.16);flex:none;}
.kx .kx-tab:hover{background:rgba(255,255,255,.07);border-color:var(--kx-line2);color:#fff;transform:translateY(-1px);}
.kx .kx-tab[aria-selected="true"]{background:rgba(255,255,255,.09);border-color:var(--kx-a1);color:#fff;
  box-shadow:0 0 0 1px rgba(56,216,255,.25),0 8px 28px rgba(56,216,255,.14);}

.kx .kx-panel{display:none;}
.kx .kx-panel.on{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--kx-line);border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  animation:kxfade .5s cubic-bezier(.2,.85,.25,1) backwards;}
@keyframes kxfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* conversation */
.kx .kx-chat{padding:44px 38px;display:flex;flex-direction:column;gap:16px;justify-content:center;
  border-right:1px solid var(--kx-line);}
.kx .kx-bulle{max-width:86%;padding:17px 21px;border-radius:16px;font-size:15px;line-height:1.55;
  border:1px solid var(--kx-line);background:rgba(255,255,255,.04);}
.kx .kx-bulle.u{align-self:flex-start;border-bottom-left-radius:5px;color:#dfe7f5;}
.kx .kx-bulle.a{align-self:flex-end;border-bottom-right-radius:5px;margin-left:auto;
  background:rgba(56,216,255,.07);border-color:rgba(56,216,255,.22);color:#eaf3ff;}
.kx .kx-sign{display:flex;align-items:center;gap:9px;align-self:flex-end;margin-top:2px;
  font-family:var(--kx-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7d8da3;}
.kx .kx-sign img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:center 22%;}

/* carte agent */
.kx .kx-card{padding:44px 38px;display:flex;flex-direction:column;}
.kx .kx-card-head{display:flex;align-items:center;gap:18px;margin-bottom:8px;}
.kx .kx-card-head img{width:76px;height:76px;border-radius:20px;object-fit:cover;object-position:center 20%;
  border:1px solid rgba(255,255,255,.16);flex:none;}
.kx .kx-card h3{font-family:var(--kx-d);font-weight:800;font-size:30px;margin:0 0 6px;letter-spacing:-.015em;}
.kx .kx-card .kx-role{font-family:var(--kx-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--kx-a1);}
.kx .kx-card .kx-base{color:var(--kx-muted);font-size:15.5px;line-height:1.6;margin:14px 0 22px;}
.kx .kx-more{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:11px 20px;border-radius:999px;
  border:1px solid var(--kx-line2);background:rgba(255,255,255,.04);color:var(--kx-text);
  font-size:14px;font-weight:600;text-decoration:none;transition:.22s ease;}
.kx .kx-more:hover{background:rgba(255,255,255,.09);border-color:var(--kx-a1);}
.kx .kx-caps{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:11px;}
.kx .kx-caps li{display:flex;align-items:flex-start;gap:13px;padding:15px 18px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid var(--kx-line);font-size:15px;line-height:1.45;}
.kx .kx-check{width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px;
  background:rgba(56,216,255,.14);border:1px solid rgba(56,216,255,.4);
  display:flex;align-items:center;justify-content:center;color:var(--kx-a1);font-size:12px;font-weight:700;}
.kx .kx-plus{text-align:center;margin:22px 0 0;font-size:14px;color:#75839a;}

/* ==========================================================================
   2. BANDEAU BRIQUES TECHNOLOGIQUES
   ========================================================================== */
.kx .kx-stack{padding:56px 0;border-top:1px solid var(--kx-line);border-bottom:1px solid var(--kx-line);
  background:linear-gradient(180deg,#070912,#05060d);}
.kx .kx-stack-label{text-align:center;font-family:var(--kx-m);font-size:11.5px;letter-spacing:.26em;
  text-transform:uppercase;color:#7d8da3;margin:0 0 30px;}
.kx .kx-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.kx .kx-track{display:flex;gap:14px;width:max-content;animation:kxslide 38s linear infinite;}
.kx .kx-stack:hover .kx-track{animation-play-state:paused;}
@keyframes kxslide{to{transform:translateX(-50%)}}
.kx .kx-chip{display:inline-flex;align-items:center;gap:9px;padding:12px 22px;border-radius:999px;
  border:1px solid var(--kx-line);background:rgba(255,255,255,.03);
  font-family:var(--kx-m);font-size:13.5px;letter-spacing:.05em;color:#c3cee0;white-space:nowrap;}
.kx .kx-chip::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--kx-a1);box-shadow:0 0 9px var(--kx-a1);}

/* ==========================================================================
   3. CHIFFRES CLÉS
   ========================================================================== */
.kx .kx-kpis{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--kx-line);
  border-radius:24px;overflow:hidden;background:rgba(255,255,255,.02);}
.kx .kx-kpi{padding:36px 34px 30px;border-right:1px solid var(--kx-line);display:flex;flex-direction:column;}
.kx .kx-kpi:last-child{border-right:0;}
.kx .kx-kpi .n{font-family:var(--kx-d);font-weight:800;font-size:clamp(38px,4.6vw,58px);line-height:1;
  letter-spacing:-.03em;background:linear-gradient(100deg,var(--kx-a1),var(--kx-a2) 78%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.kx .kx-kpi .l{margin-top:9px;font-size:14.5px;color:var(--kx-muted);line-height:1.45;}
.kx .kx-viz{margin-top:26px;height:96px;display:flex;align-items:flex-end;gap:6px;}
.kx .kx-viz .b{flex:1;border-radius:5px 5px 2px 2px;background:rgba(255,255,255,.07);}
.kx .kx-viz .b.hot{background:linear-gradient(180deg,var(--kx-a1),var(--kx-a2));
  box-shadow:0 0 22px rgba(56,216,255,.35);}
.kx .kx-dots{margin-top:26px;height:96px;display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.kx .kx-dots span{border-radius:11px;border:1px solid var(--kx-line);display:flex;align-items:center;
  justify-content:center;font-family:var(--kx-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#c3cee0;background:rgba(255,255,255,.03);}
.kx .kx-dots span.hot{border-color:rgba(56,216,255,.45);color:var(--kx-a1);background:rgba(56,216,255,.08);}
.kx .kx-ring{margin-top:26px;height:96px;display:flex;align-items:center;justify-content:center;}
.kx .kx-ring svg{width:96px;height:96px;}
.kx .kx-clock{margin-top:26px;height:96px;display:flex;align-items:center;justify-content:center;gap:0;}
.kx .kx-clock .seg{width:4px;height:34px;margin:0 2px;border-radius:3px;transform-origin:center;
  background:linear-gradient(180deg,var(--kx-a1),var(--kx-a2));opacity:.9;box-shadow:0 0 10px rgba(56,216,255,.35);}

/* frise montée en charge */
.kx .kx-scale{margin-top:26px;display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:end;
  border:1px solid var(--kx-line);border-top:0;border-radius:0 0 24px 24px;padding:52px 40px 46px;
  background:rgba(255,255,255,.015);}
.kx .kx-scale h3{font-family:var(--kx-d);font-weight:800;font-size:clamp(24px,2.8vw,36px);line-height:1.12;
  letter-spacing:-.02em;margin:0 0 16px;}
.kx .kx-scale p{color:var(--kx-muted);font-size:15.5px;line-height:1.65;margin:0;}
.kx .kx-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:end;height:330px;}
.kx .kx-bar{display:flex;flex-direction:column;justify-content:flex-end;height:100%;}
.kx .kx-bar .v{font-family:var(--kx-d);font-weight:800;font-size:26px;letter-spacing:-.02em;}
.kx .kx-bar .c{font-size:12.5px;color:#75839a;margin:2px 0 12px;}
.kx .kx-bar .f{border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--kx-line);}
.kx .kx-bar.hot .f{background:linear-gradient(180deg,var(--kx-a1),var(--kx-a2));border-color:transparent;
  box-shadow:0 0 40px rgba(56,216,255,.3);}
.kx .kx-bar.hot .v{background:linear-gradient(100deg,var(--kx-a1),var(--kx-a2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ==========================================================================
   4. AGENT VEDETTE
   ========================================================================== */
.kx .kx-vedette{background:linear-gradient(180deg,#05060d,#070a14 55%,#05060d);}
.kx .kx-vgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;}
.kx .kx-vimg{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--kx-line);
  aspect-ratio:4/5;background:#080a12;}
.kx .kx-vimg img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;}
.kx .kx-vimg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(5,6,13,.75)),
             radial-gradient(70% 55% at 50% 0%,rgba(56,216,255,.16),transparent 70%);}
.kx .kx-badge{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--kx-line2);backdrop-filter:blur(8px);
  font-family:var(--kx-m);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#c8d4e8;}
.kx .kx-badge .d{width:7px;height:7px;border-radius:50%;background:#19e08a;box-shadow:0 0 10px #19e08a;
  animation:kxpulse 1.9s infinite;}
@keyframes kxpulse{0%,100%{opacity:1}50%{opacity:.3}}
.kx .kx-vedette h2{font-family:var(--kx-d);font-weight:800;font-size:clamp(38px,5.4vw,72px);line-height:1.02;
  letter-spacing:-.025em;margin:20px 0 0;text-align:left;}
.kx .kx-vlead{color:var(--kx-muted);font-size:17px;line-height:1.65;margin:20px 0 0;max-width:620px;}
.kx .kx-vfeat{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;}
.kx .kx-vfeat li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.45;}
.kx .kx-vctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px;}

/* ==========================================================================
   5. OFFRES
   ========================================================================== */
.kx .kx-toggle{display:flex;justify-content:center;margin:34px 0 46px;}
.kx .kx-switch{display:inline-flex;padding:5px;border-radius:999px;border:1px solid var(--kx-line);
  background:rgba(255,255,255,.03);gap:4px;}
.kx .kx-switch button{padding:11px 26px;border-radius:999px;border:0;background:transparent;cursor:pointer;
  font-family:var(--kx-ui);font-size:14.5px;font-weight:600;color:#9fb0c8;transition:.22s ease;}
.kx .kx-switch button[aria-pressed="true"]{background:linear-gradient(100deg,var(--kx-a1),var(--kx-a2));color:#05060d;}
.kx .kx-switch .save{font-family:var(--kx-m);font-size:10.5px;letter-spacing:.1em;opacity:.85;margin-left:7px;}

.kx .kx-offres{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
.kx .kx-offre{display:flex;flex-direction:column;padding:36px 32px;border-radius:24px;
  border:1px solid var(--kx-line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));}
.kx .kx-offre.hot{border-color:rgba(56,216,255,.42);box-shadow:0 0 0 1px rgba(56,216,255,.14),0 22px 60px rgba(56,216,255,.1);
  background:linear-gradient(180deg,rgba(56,216,255,.07),rgba(160,107,255,.035));}
.kx .kx-offre .tag{position:absolute;}
.kx .kx-otop{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px;}
.kx .kx-offre h3{font-family:var(--kx-d);font-weight:800;font-size:24px;margin:0;letter-spacing:-.015em;}
.kx .kx-tag{font-family:var(--kx-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;background:rgba(56,216,255,.14);color:var(--kx-a1);
  border:1px solid rgba(56,216,255,.35);white-space:nowrap;}
.kx .kx-opitch{color:var(--kx-muted);font-size:14.5px;line-height:1.55;margin:12px 0 0;min-height:66px;}
.kx .kx-prix{margin:24px 0 4px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.kx .kx-prix .v{font-family:var(--kx-d);font-weight:800;font-size:44px;letter-spacing:-.03em;line-height:1;}
.kx .kx-prix .v.devis{font-size:34px;}
.kx .kx-prix .u{font-size:14.5px;color:var(--kx-muted);}
.kx .kx-avalider{display:inline-flex;width:fit-content;align-items:center;gap:6px;margin-top:10px;padding:5px 11px;border-radius:6px;
  font-family:var(--kx-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,176,32,.13);border:1px solid rgba(255,176,32,.4);color:#ffc247;}
.kx .kx-olist{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:12px;flex:1;}
.kx .kx-olist li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.45;color:#dbe3f2;}
.kx .kx-olist li.no{color:#6b7a90;}
.kx .kx-i{width:19px;height:19px;border-radius:50%;flex:none;margin-top:1px;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;
  background:rgba(56,216,255,.14);border:1px solid rgba(56,216,255,.38);color:var(--kx-a1);}
.kx .kx-i.no{background:rgba(255,255,255,.04);border-color:var(--kx-line);color:#5d6b80;}
.kx .kx-offre .kx-btn{margin-top:28px;justify-content:center;width:100%;}
.kx .kx-note{text-align:center;color:#75839a;font-size:13.5px;margin:34px auto 0;max-width:760px;line-height:1.6;}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .kx .kx-vgrid{grid-template-columns:1fr;gap:38px;}
  .kx .kx-vimg{max-width:420px;aspect-ratio:1/1;}
  .kx .kx-scale{grid-template-columns:1fr;gap:34px;}
  .kx .kx-offres{grid-template-columns:1fr;max-width:520px;margin:0 auto;}
}
@media (max-width:900px){
  .kx section{padding:76px 0;}
  .kx .kx-wrap{padding:0 22px;}
  .kx .kx-panel.on{grid-template-columns:1fr;}
  .kx .kx-chat{border-right:0;border-bottom:1px solid var(--kx-line);padding:32px 24px;}
  .kx .kx-card{padding:32px 24px;}
  .kx .kx-kpis{grid-template-columns:1fr;}
  .kx .kx-kpi{border-right:0;border-bottom:1px solid var(--kx-line);}
  .kx .kx-kpi:last-child{border-bottom:0;}
  .kx .kx-vfeat{grid-template-columns:1fr;}
  .kx .kx-bars{height:200px;gap:11px;}
  .kx .kx-scale{padding:34px 22px;}
  .kx .kx-tab{font-size:13.5px;padding:7px 15px 7px 7px;}
  .kx .kx-tab img{width:27px;height:27px;}
}
@media (prefers-reduced-motion:reduce){
  .kx *,.kx *::before,.kx *::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;}
}


/* ==========================================================================
   ALIGNEMENT SUR LE STYLE « .ggai-service-path » (section « Choisissez votre
   activité. KUPA compose le service. ») — valeurs relevées sur la page live :
   fond bleu nuit + halos bleu/violet, titres Space Grotesk wght 760 très
   serrés, dégradé de titre bleu clair → violet → magenta, eyebrow bleu #2563eb.
   ========================================================================== */
.kx{
  --kx-a1:#7c8cff;
  --kx-a2:#d946ef;
  --kx-mid:#8b5cf6;
  --kx-blue:#2563eb;
  --kx-grad:linear-gradient(100deg,#7c8cff 0%,#8b5cf6 48%,#d946ef 100%);
  --kx-line:rgba(148,163,184,.17);
  --kx-line2:rgba(148,163,184,.3);
  --kx-text:#f8fafc;
  --kx-muted:#94a3b8;
  background:transparent;
}
.kx section{
  background:
    radial-gradient(circle at 88% 8%, rgba(124,58,237,.18), transparent 34rem),
    radial-gradient(circle at 4% 36%, rgba(37,99,235,.12), transparent 30rem),
    linear-gradient(145deg, rgba(15,23,42,.97), rgba(10,13,26,.98));
}
.kx .kx-grid{opacity:.5;}
.kx .kx-halo{display:none;}

/* eyebrow : bleu, gras, losange en tête, sans traits latéraux */
.kx .kx-eyebrow{color:var(--kx-blue);font-family:var(--kx-ui);font-weight:800;
  font-size:12.5px;letter-spacing:.12em;gap:8px;}
.kx .kx-eyebrow::before{content:"\2726";background:none;height:auto;width:auto;font-size:13px;}
.kx .kx-eyebrow::after{display:none;}

/* titres */
.kx h2.kx-t{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:760;
  font-size:clamp(38px,5.2vw,90px);
  line-height:.96;letter-spacing:-.055em;}
.kx h2.kx-t .g{background-image:var(--kx-grad);}
.kx .kx-sub{max-width:780px;font-size:17.5px;color:#94a3b8;}
.kx .kx-card h3,.kx .kx-scale h3,.kx .kx-offre h3,.kx .kx-vedette h2{
  font-family:"Space Grotesk",system-ui,sans-serif;font-weight:740;letter-spacing:-.035em;}

/* accents bleu → violet → magenta */
.kx .kx-btn.p{background-image:var(--kx-grad);color:#fff;box-shadow:0 10px 34px rgba(124,58,237,.34);}
.kx .kx-btn.p:hover{box-shadow:0 14px 44px rgba(217,70,239,.4);}
.kx .kx-btn.s:hover{border-color:var(--kx-mid);}
.kx .kx-tab[aria-selected="true"]{border-color:var(--kx-mid);
  box-shadow:0 0 0 1px rgba(139,92,246,.3),0 8px 28px rgba(124,58,237,.2);}
.kx .kx-card .kx-role{color:#a5b4fc;}
.kx .kx-check,.kx .kx-i{background:rgba(139,92,246,.16);border-color:rgba(139,92,246,.45);color:#c4b5fd;}
.kx .kx-bulle.a{background:rgba(124,58,237,.1);border-color:rgba(139,92,246,.28);}
.kx .kx-chip::before{background:var(--kx-mid);box-shadow:0 0 9px var(--kx-mid);}
.kx .kx-more:hover{border-color:var(--kx-mid);}
.kx .kx-stack{background:linear-gradient(180deg,rgba(15,23,42,.97),rgba(10,13,26,.98));border-color:var(--kx-line);}

/* surfaces bleu nuit */
.kx .kx-panel.on,.kx .kx-kpis,.kx .kx-scale,.kx .kx-offre{
  background:linear-gradient(180deg,rgba(16,23,37,.9),rgba(10,13,26,.72));border-color:var(--kx-line);}
.kx .kx-caps li,.kx .kx-bulle,.kx .kx-chip,.kx .kx-dots span{background:rgba(16,23,37,.7);}
.kx .kx-kpi .n,.kx .kx-bar.hot .v{background-image:var(--kx-grad);}
.kx .kx-viz .b.hot,.kx .kx-bar.hot .f{background-image:linear-gradient(180deg,#7c8cff,#d946ef);
  box-shadow:0 0 30px rgba(139,92,246,.4);}
.kx .kx-clock .seg{background-image:linear-gradient(180deg,#7c8cff,#d946ef);box-shadow:0 0 10px rgba(139,92,246,.4);}
.kx .kx-dots span.hot{border-color:rgba(139,92,246,.5);color:#c4b5fd;background:rgba(124,58,237,.1);}
.kx .kx-offre.hot{border-color:rgba(139,92,246,.45);
  background:linear-gradient(180deg,rgba(124,58,237,.14),rgba(217,70,239,.05));
  box-shadow:0 0 0 1px rgba(139,92,246,.16),0 22px 60px rgba(124,58,237,.14);}
.kx .kx-tag{background:rgba(139,92,246,.18);color:#c4b5fd;border-color:rgba(139,92,246,.4);}
.kx .kx-switch button[aria-pressed="true"]{background-image:var(--kx-grad);color:#fff;}
.kx .kx-badge .d{background:#8b5cf6;box-shadow:0 0 10px #8b5cf6;}

/* Raccord visuel avec le bas du slider (noir) : fondu sur les 340 premiers px
   de la première section, pour éviter la cassure nette hero → sections. */
.kx section:first-child{position:relative;}
.kx section:first-child::before{
  content:"";position:absolute;left:0;right:0;top:0;height:340px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#05060d 0%,rgba(5,6,13,.55) 45%,transparent 100%);}

/* ==========================================================================
   ALIGNEMENT SUR LES CARTES « .ggai-org__member » (section « De votre objectif
   à une mission contrôlée ») : une couleur de profil par agent, portrait rond
   à anneau 2px + halo, surfaces bleu nuit à liseré interne.
   Valeurs relevées sur la page en ligne.
   ========================================================================== */
.kx .kx-tab:nth-child(1),.kx .kx-panel[data-kx-panel="0"]{--kx-c:#8b5cf6;}
.kx .kx-tab:nth-child(2),.kx .kx-panel[data-kx-panel="1"]{--kx-c:#3b82f6;}
.kx .kx-tab:nth-child(3),.kx .kx-panel[data-kx-panel="2"]{--kx-c:#06b6d4;}
.kx .kx-tab:nth-child(4),.kx .kx-panel[data-kx-panel="3"]{--kx-c:#22c55e;}
.kx .kx-tab:nth-child(5),.kx .kx-panel[data-kx-panel="4"]{--kx-c:#ec4899;}
.kx .kx-tab:nth-child(6),.kx .kx-panel[data-kx-panel="5"]{--kx-c:#f59e0b;}
.kx .kx-tab:nth-child(7),.kx .kx-panel[data-kx-panel="6"]{--kx-c:#6366f1;}
.kx .kx-tab:nth-child(8),.kx .kx-panel[data-kx-panel="7"]{--kx-c:#14b8a6;}

.kx .kx-tab img{border:2px solid color-mix(in srgb,var(--kx-c,#8b5cf6) 76%,transparent);
  box-shadow:0 6px 18px color-mix(in srgb,var(--kx-c,#8b5cf6) 30%,transparent);}
.kx .kx-tab[aria-selected="true"]{
  border-color:color-mix(in srgb,var(--kx-c) 60%,transparent);
  background:
    radial-gradient(circle at 50% 0,color-mix(in srgb,var(--kx-c) 26%,transparent),transparent 70%),
    rgba(26,30,46,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px color-mix(in srgb,var(--kx-c) 26%,transparent);}

.kx .kx-card-head img{border-radius:50%;width:84px;height:84px;
  border:2px solid color-mix(in srgb,var(--kx-c,#8b5cf6) 76%,transparent);
  box-shadow:0 10px 30px color-mix(in srgb,var(--kx-c,#8b5cf6) 30%,transparent),
             0 0 0 6px color-mix(in srgb,var(--kx-c,#8b5cf6) 9%,transparent);}
.kx .kx-card .kx-role{color:color-mix(in srgb,var(--kx-c,#8b5cf6) 72%,#ffffff);}
.kx .kx-sign img{border:2px solid color-mix(in srgb,var(--kx-c,#8b5cf6) 70%,transparent);}

.kx .kx-panel.on{background:rgba(26,30,46,.88);border-color:rgba(255,255,255,.11);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px rgba(2,8,23,.5);}
.kx .kx-caps li,.kx .kx-chip,.kx .kx-dots span{background:rgba(26,30,46,.88);
  border-color:rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);}
.kx .kx-bulle{background:rgba(26,30,46,.88);border-color:rgba(255,255,255,.11);}
.kx .kx-bulle.a{background:
  radial-gradient(circle at 50% 0,color-mix(in srgb,var(--kx-c,#8b5cf6) 15%,transparent),transparent 75%),
  rgba(26,30,46,.88);
  border-color:color-mix(in srgb,var(--kx-c,#8b5cf6) 34%,transparent);}
.kx .kx-check{background:color-mix(in srgb,var(--kx-c,#8b5cf6) 16%,transparent);
  border-color:color-mix(in srgb,var(--kx-c,#8b5cf6) 45%,transparent);
  color:color-mix(in srgb,var(--kx-c,#8b5cf6) 60%,#ffffff);}
.kx .kx-chat{border-right-color:rgba(255,255,255,.11);}

/* ==========================================================================
   CARROUSEL PLEINE LARGEUR — les 8 agents défilent, les voisins dépassent
   sur les côtés. Défilement natif + scroll-snap (aucune dépendance).
   ========================================================================== */
.kx .kx-carou{position:relative;z-index:1;width:100%;}
.kx .kx-rail{
  display:flex;gap:28px;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding:0;
  padding:14px max(40px,calc((100% - 1180px) / 2)) 26px;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.kx .kx-rail::-webkit-scrollbar{display:none;}
.kx .kx-rail:focus-visible{outline:2px solid var(--kx-mid);outline-offset:-6px;border-radius:20px;}

/* chaque agent devient un slide — toujours affiché, plus de display:none */
.kx .kx-panel,
.kx .kx-panel.on{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  flex:0 0 min(1180px,88vw);
  scroll-snap-align:center;
  border:1px solid rgba(255,255,255,.11);border-radius:16px;overflow:hidden;
  background:rgba(26,30,46,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px rgba(2,8,23,.5);
  opacity:.42;transform:scale(.965);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
  animation:none;
}
.kx .kx-panel.on{
  opacity:1;transform:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px rgba(2,8,23,.5),
             0 0 0 1px color-mix(in srgb,var(--kx-c,#8b5cf6) 34%,transparent),
             0 18px 60px color-mix(in srgb,var(--kx-c,#8b5cf6) 22%,transparent);
}

/* flèches */
.kx .kx-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;padding-bottom:3px;
  color:#f8fafc;background:rgba(26,30,46,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 34px rgba(2,8,23,.6);
  backdrop-filter:blur(10px);
  transition:transform .22s ease,background .22s ease,border-color .22s ease,opacity .22s ease;
}
.kx .kx-nav.prev{left:max(14px,calc((100% - 1180px) / 2 - 74px));}
.kx .kx-nav.next{right:max(14px,calc((100% - 1180px) / 2 - 74px));}
.kx .kx-nav:hover:not(:disabled){transform:translateY(-50%) scale(1.07);
  background:rgba(38,44,66,.95);border-color:rgba(255,255,255,.28);}
.kx .kx-nav:disabled{opacity:.28;cursor:default;}

@media (max-width:900px){
  .kx .kx-panel,.kx .kx-panel.on{grid-template-columns:1fr;flex-basis:min(560px,90vw);opacity:1;transform:none;}
  .kx .kx-rail{gap:16px;padding:12px 5vw 22px;}
  .kx .kx-nav{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .kx .kx-rail{scroll-behavior:auto;}
  .kx .kx-panel{transition:none;}
}

/* ==========================================================================
   AJUSTEMENTS — onglets symétriques (4 × 2, largeurs égales) et resserrement
   de l'espace sous le slider.
   ========================================================================== */
.kx .kx-tabs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  max-width:1180px;margin:0 auto 34px;
}
.kx .kx-tab{
  width:100%;justify-content:flex-start;
  padding:9px 18px 9px 9px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.kx .kx-tab > img{flex:none;}

/* moins de vide entre le slider et la première section */
.kx section:first-child{padding-top:52px;}
.kx section:first-child::before{height:200px;}
.kx .kx-head{margin-bottom:40px;}

@media (max-width:1080px){
  .kx .kx-tabs{grid-template-columns:repeat(2,1fr);max-width:700px;}
}
@media (max-width:560px){
  .kx .kx-tabs{grid-template-columns:1fr;max-width:360px;gap:9px;}
  .kx section:first-child{padding-top:34px;}
}

/* ==========================================================================
   MISE EN PLEINE LARGEUR DES BLOCS ENCADRÉS DE GG AGENTS IA
   ---------------------------------------------------------------------------
   Ces blocs sont des cartes arrondies de 1560 px posées sur fond noir, dans un
   .ggai__container. On les étend bord à bord et on aligne leur fond sur celui
   des sections KX, pour une continuité sans cassure.

   Purement cosmétique : AUCUN fichier de GG Agents IA n'est modifié, et le
   kill switch kupa_sections (valeur off) rétablit l'affichage d'origine.

   POUR AJOUTER OU RETIRER UN BLOC : modifier la liste de sélecteurs ci-dessous.
   Blocs encadrés existants sur l'accueil :
     .ggai-showcase--network         « De votre objectif à une mission contrôlée »
     .ggai-service-path              « Choisissez votre activité »
     .ggai-showcase--infrastructure  « Votre intelligence IA, locale, privée… »
     .ggai-showcase--simulator       simulateur

   --kx-vw est posée en JS = clientWidth, donc SANS la barre de défilement
   (100vw l'inclut et créerait un débordement horizontal).
   ========================================================================== */
/* Spécificité renforcée : agents.css impose « #agents-ia … {max-width:100%} »
   (spécificité 1,1,0) qui plafonnait la largeur des blocs situés dans #agents-ia. */
.ggai-kupa-hero #agents-ia .ggai-showcase.ggai-showcase--network,
.ggai-kupa-hero .ggai-showcase--network,
.ggai-kupa-hero .ggai-service-path{
  max-width:none;
  width:var(--kx-vw,100vw);
  margin-left:calc(50% - var(--kx-vw,100vw) / 2);
  margin-right:calc(50% - var(--kx-vw,100vw) / 2);
  margin-bottom:0;
  border-radius:0;
  border-left:0;border-right:0;
  box-shadow:none;
  /* le contenu s'aligne EXACTEMENT sur .ggai__container (min(94vw,1560px)),
     donc sur le bloc « Projet KUPA » et le tableau comparatif qui suivent */
  padding:72px calc((var(--kx-vw,100vw) - min(94vw, 1560px)) / 2);
}

/* fond harmonisé avec les sections KX (mêmes halos, même dégradé de base) */
.ggai-kupa-hero #agents-ia .ggai-showcase.ggai-showcase--network,
.ggai-kupa-hero .ggai-showcase--network{
  background:
    radial-gradient(circle at 88% 8%, rgba(124,58,237,.18), transparent 34rem),
    radial-gradient(circle at 4% 36%, rgba(37,99,235,.12), transparent 30rem),
    linear-gradient(145deg, rgba(15,23,42,.97), rgba(10,13,26,.98));
  border-top:1px solid rgba(148,163,184,.17);
  border-bottom:1px solid rgba(148,163,184,.17);
}

@media (max-width:1099px){
  /* sous 1100 px, .ggai__container passe à min(100% - 3rem, 1560px) :
     on suit la même formule pour rester aligné sur les blocs voisins */
  .ggai-kupa-hero .ggai-showcase--network,
  .ggai-kupa-hero .ggai-service-path{padding:52px 24px;}
}

/* ==========================================================================
   PEAU SOMBRE DES PAGES PLATEFORME (body.kupa-platform)
   ---------------------------------------------------------------------------
   /configurateur-equipe-ia/, /kupa/, /solutions-entreprises/, /tarifs/,
   /documentation/, /mon-compte/ — rendues par kupa-commerce-platform en thème
   CLAIR. On les aligne sur la palette de l'accueil sans toucher au plugin.
   NB : --kupa-white sert aussi de couleur de TEXTE (boutons, hero, nav) et ne
   doit donc PAS être assombrie ; on surcharge les fonds au cas par cas.
   ========================================================================== */
body.kupa-platform{
  --kupa-ink:#f8fafc;
  --kupa-muted:#94a3b8;
  --kupa-line:rgba(148,163,184,.2);
  --kupa-surface:rgba(16,23,37,.7);
  --kupa-shadow:0 24px 70px rgba(2,8,23,.5);
  color:#f8fafc;
  background:
    radial-gradient(circle at 88% 8%, rgba(124,58,237,.14), transparent 34rem),
    radial-gradient(circle at 4% 36%, rgba(37,99,235,.1), transparent 30rem),
    linear-gradient(145deg,#0f172a,#0a0d1a) fixed;
}

/* sections posées sur fond clair -> transparentes */
body.kupa-platform .kupa-section--light,
body.kupa-platform .kupa-offers,
body.kupa-platform .kupa-sectors,
body.kupa-platform .kupa-faq,
body.kupa-platform .kupa-config-section,
body.kupa-platform .kupa-onboarding ol{
  background:transparent;
}

/* cartes et panneaux : surface bleu nuit, liseré interne (comme l'accueil) */
body.kupa-platform .kupa-process li,
body.kupa-platform .kupa-agent-card,
body.kupa-platform .kupa-offer-grid article,
body.kupa-platform .kupa-hosting-grid article,
body.kupa-platform .kupa-example-grid div,
body.kupa-platform .kupa-two-columns > div,
body.kupa-platform .kupa-function-grid div,
body.kupa-platform .kupa-logo-list li,
body.kupa-platform .kupa-sticky-card,
body.kupa-platform .kupa-form,
body.kupa-platform .kupa-config-nav,
body.kupa-platform .kupa-configurator,
body.kupa-platform .kupa-reco-summary div,
body.kupa-platform .kupa-conversion-card,
body.kupa-platform .kupa-login-card,
body.kupa-platform .kupa-account-nav,
body.kupa-platform .kupa-account-grid article,
body.kupa-platform .kupa-onboarding__panel{
  background:rgba(26,30,46,.88);
  border-color:rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 60px rgba(2,8,23,.45);
  color:#e2e8f0;
}
body.kupa-platform .kupa-process li:not(:last-child)::after{background:rgba(148,163,184,.25);}

/* textes qui étaient encrés sombre */
body.kupa-platform .kupa-sector-grid strong,
body.kupa-platform .kupa-faq-list summary,
body.kupa-platform .kupa-configurator legend,
body.kupa-platform .kupa-form label,
body.kupa-platform .kupa-configurator > .kupa-config-step > label,
body.kupa-platform .kupa-field-grid label,
body.kupa-platform .kupa-login-card label,
body.kupa-platform .kupa-onboarding-form label,
body.kupa-platform .kupa-config-step,
body.kupa-platform .kupa-step-heading h1,
body.kupa-platform .kupa-step-heading h2{
  color:#f8fafc;
}
body.kupa-platform .kupa-tags li{
  background:rgba(16,23,37,.85);color:#c7d2e4;border:1px solid rgba(148,163,184,.25);
}

/* champs de saisie */
body.kupa-platform .kupa-form input,
body.kupa-platform .kupa-form textarea,
body.kupa-platform .kupa-configurator input[type="text"],
body.kupa-platform .kupa-configurator input[type="email"],
body.kupa-platform .kupa-configurator input[type="number"],
body.kupa-platform .kupa-configurator select,
body.kupa-platform .kupa-configurator textarea,
body.kupa-platform .kupa-search input,
body.kupa-platform .kupa-onboarding-form input[type="text"],
body.kupa-platform .kupa-onboarding-form input[type="number"],
body.kupa-platform .kupa-onboarding-form select,
body.kupa-platform .kupa-onboarding-form textarea{
  background:rgba(10,13,26,.65);
  color:#f8fafc;
  border-color:rgba(148,163,184,.28);
}
body.kupa-platform ::placeholder{color:#64748b;}

/* cases de choix du configurateur : état repos sombre, état coché violet accueil */
body.kupa-platform .kupa-choice-grid label > span,
body.kupa-platform .kupa-radio-list label > span{
  background:rgba(26,30,46,.88);
  border-color:rgba(255,255,255,.13);
  color:#e2e8f0;
}
body.kupa-platform .kupa-radio-list label > span::before{
  background:rgba(10,13,26,.8);border-color:rgba(148,163,184,.4);
}
body.kupa-platform .kupa-choice-grid input:checked + span,
body.kupa-platform .kupa-radio-list input:checked + span{
  background:
    radial-gradient(circle at 50% 0,rgba(124,58,237,.24),transparent 75%),
    rgba(26,30,46,.92);
  border-color:rgba(139,92,246,.55);
  color:#fff;
  box-shadow:0 0 0 1px rgba(139,92,246,.25),0 12px 34px rgba(124,58,237,.2);
}
body.kupa-platform .kupa-choice-grid input:focus-visible + span,
body.kupa-platform .kupa-radio-list input:focus-visible + span{outline:2px solid #8b5cf6;}

/* accents divers */
body.kupa-platform .kupa-button--secondary{
  background:rgba(255,255,255,.06);color:#f8fafc;border-color:rgba(148,163,184,.3);
}
body.kupa-platform .kupa-button--secondary:hover{background:rgba(255,255,255,.11);}
body.kupa-platform .kupa-config-progress{background:rgba(255,255,255,.09);}
body.kupa-platform .kupa-selection-note{
  background:rgba(35,100,255,.12);border-color:rgba(53,217,255,.3);color:#bfdbfe;
}
body.kupa-platform .kupa-conversion-result{
  background:rgba(19,185,129,.12);border-color:rgba(19,185,129,.35);color:#a7f3d0;
}
body.kupa-platform .kupa-warning{
  background:rgba(252,185,0,.1);border-color:rgba(252,185,0,.35);color:#fde68a;
}
body.kupa-platform .kupa-account-nav a:hover{background:rgba(255,255,255,.07);}
body.kupa-platform .kupa-final-cta .kupa-button{color:#10213a;}

/* ==========================================================================
   MENU DU SITE — entrée « Plateforme » ajoutée par kupa-sections.js dans
   l'en-tête de l'accueil et des pages vitrines. Style calqué sur .btn-ghost
   et les panneaux glass du thème.
   ========================================================================== */
.kxnav-wrap{position:relative;display:inline-flex;}
.kxnav-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:0;
  font:inherit;color:inherit;}
.kxnav-btn .car{font-size:10px;opacity:.7;transition:transform .2s ease;}
.kxnav-wrap.open .kxnav-btn .car{transform:rotate(180deg);}
.kxnav-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px);
  min-width:250px;padding:8px;border-radius:14px;z-index:1200;
  background:rgba(10,15,30,.97);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 70px rgba(2,8,23,.65);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s;}
.kxnav-wrap.open .kxnav-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.kxnav-panel a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:9px;
  color:#c7d2e4;text-decoration:none;font-size:14.5px;white-space:nowrap;transition:.16s ease;}
.kxnav-panel a:hover{background:rgba(255,255,255,.06);color:#fff;}
.kxnav-panel a.hot{color:#fff;font-weight:600;
  background:linear-gradient(100deg,rgba(124,140,255,.16),rgba(217,70,239,.14));
  border:1px solid rgba(139,92,246,.35);}
.kxnav-panel a.hot:hover{background:linear-gradient(100deg,rgba(124,140,255,.26),rgba(217,70,239,.22));}
.kxnav-sep{height:1px;margin:6px 8px;background:rgba(255,255,255,.09);}

/* ==========================================================================
   EN-TÊTE VITRINE RÉPLIQUÉ (#kx-hdr) — injecté sur les pages qui n'ont pas
   l'en-tête de l'accueil (pages plateforme, archives). Valeurs relevées sur
   l'en-tête réel : fond rgba(8,10,18,.9) + blur 18px saturate 1.45, bordure
   basse rgba(139,92,246,.22), conteneur 1560px / 64px, CTA dégradé
   violet #7c3aed → cyan #06b6d4.
   ========================================================================== */
html.kx-hdr-on .kupa-header{display:none;}

#kx-hdr{position:sticky;top:0;z-index:1100;
  background:rgba(8,10,18,.9);
  -webkit-backdrop-filter:saturate(1.45) blur(18px);backdrop-filter:saturate(1.45) blur(18px);
  border-bottom:1px solid rgba(139,92,246,.22);
  font-family:Inter,"Inter Variable",system-ui,-apple-system,"Segoe UI",sans-serif;}
#kx-hdr *{box-sizing:border-box;}
#kx-hdr .kxh-in{max-width:1560px;margin:0 auto;padding:0 32px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;}

#kx-hdr .kxh-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
#kx-hdr .kxh-ic{position:relative;width:40px;height:40px;border-radius:12px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7c3aed,#06b6d4);
  color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em;
  box-shadow:0 6px 22px rgba(124,58,237,.45);}
#kx-hdr .kxh-tt{display:flex;flex-direction:column;line-height:1.15;}
#kx-hdr .kxh-tt b{color:#f5f7ff;font-weight:700;font-size:15.5px;}
#kx-hdr .kxh-tt i{font-style:normal;color:#8b93a8;font-size:10px;letter-spacing:.18em;text-transform:uppercase;}

#kx-hdr .kxh-nav{display:flex;align-items:center;gap:4px;}
#kx-hdr .kxh-lien{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:8px;
  color:#c5c9d8;font-size:16px;text-decoration:none;background:none;border:0;cursor:pointer;
  font-family:inherit;transition:background .18s ease,color .18s ease;white-space:nowrap;}
#kx-hdr .kxh-lien:hover{background:rgba(255,255,255,.05);color:#f5f7ff;}
#kx-hdr .kxh-lien.on{background:rgba(255,255,255,.05);color:#f5f7ff;}
#kx-hdr .kxh-live{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.2);
  color:#34d399;font-size:10px;font-weight:600;letter-spacing:.04em;}
#kx-hdr .kxh-live .d{width:6px;height:6px;border-radius:50%;background:#34d399;
  box-shadow:0 0 8px #34d399;animation:kxpulse 1.8s infinite;}

#kx-hdr .kxh-fin{display:flex;align-items:center;gap:12px;}
#kx-hdr .kxh-cta{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:12px;
  background:linear-gradient(to right,#7c3aed,#06b6d4);color:#fff;
  font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;
  box-shadow:0 8px 26px rgba(139,92,246,.35);transition:transform .2s ease,box-shadow .2s ease;}
#kx-hdr .kxh-cta:hover{transform:translateY(-1px);box-shadow:0 12px 34px rgba(139,92,246,.5);}

/* burger + panneau mobile */
#kx-hdr .kxh-burg{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:10px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);}
#kx-hdr .kxh-burg span{display:block;height:2px;border-radius:2px;background:#e2e8f0;transition:.2s ease;}
#kx-hdr .kxh-burg.x span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#kx-hdr .kxh-burg.x span:nth-child(2){opacity:0;}
#kx-hdr .kxh-burg.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
#kx-hdr .kxh-mob{display:flex;flex-direction:column;gap:2px;padding:10px 18px 16px;
  background:rgba(8,10,18,.97);border-bottom:1px solid rgba(139,92,246,.22);}
#kx-hdr .kxh-mob[hidden]{display:none;}
#kx-hdr .kxh-mob a{padding:12px 16px;border-radius:10px;color:#e2e8f0;text-decoration:none;font-size:15.5px;}
#kx-hdr .kxh-mob a:hover{background:rgba(255,255,255,.06);}
#kx-hdr .kxh-mob a.hot{color:#fff;font-weight:600;
  background:linear-gradient(100deg,rgba(124,140,255,.16),rgba(217,70,239,.14));
  border:1px solid rgba(139,92,246,.35);}

/* le dropdown Plateforme dans cet en-tête */
#kx-hdr .kxnav-wrap .kxnav-btn.on{background:rgba(255,255,255,.05);color:#f5f7ff;}

@media (max-width:1120px){
  #kx-hdr .kxh-nav{display:none;}
  #kx-hdr .kxh-burg{display:flex;}
}
@media (max-width:520px){
  #kx-hdr .kxh-in{padding:0 16px;}
  #kx-hdr .kxh-cta{display:none;}
}

/* ==========================================================================
   « De la demande client au devis validé » (#capacites-kupa) : pleine largeur
   + fond aligné sur la section 1 (mêmes halos violet/bleu, même dégradé 145°)
   pour une continuité de couleurs sur toute la page d'accueil.
   ========================================================================== */
.ggai-kupa-hero #capacites-kupa.ggai-capabilities{
  box-sizing:border-box; /* hors du conteneur .ggai (ex: /services), le border-box du plugin ne s'applique pas */
  max-width:none;
  width:var(--kx-vw,100vw);
  margin-left:calc(50% - var(--kx-vw,100vw) / 2);
  margin-right:calc(50% - var(--kx-vw,100vw) / 2);
  border-radius:0;
  box-shadow:none;
  padding:72px max(40px,calc((var(--kx-vw,100vw) - 1180px) / 2));
  background:
    radial-gradient(circle at 88% 8%, rgba(124,58,237,.18), transparent 34rem),
    radial-gradient(circle at 4% 36%, rgba(37,99,235,.12), transparent 30rem),
    linear-gradient(145deg, rgba(15,23,42,.97), rgba(10,13,26,.98));
  border-top:1px solid rgba(148,163,184,.17);
  border-bottom:1px solid rgba(148,163,184,.17);
}

@media (max-width:900px){
  .ggai-kupa-hero #capacites-kupa.ggai-capabilities{padding:52px 22px;}
}

/* ==========================================================================
   ORGANIGRAMME « mission contrôlée » (.ggai-org) — corrections + liaison
   ---------------------------------------------------------------------------
   Bugs corrigés :
   1. Portraits déformés (Yasmine, Antoine : photos 768×528 posées sans
      hauteur -> ellipse écrasée dans le cercle).
   2. Badge « Disponible 24/7 » qui chevauchait l'icône K du hub KUPA.
   3. Point blanc flottant en haut de la ligne verticale (ni sur le hub,
      ni sur la jonction) + point de branche blanc incohérent.
   Améliorations de la liaison : paquet lumineux qui descend de KUPA,
   jonction marquée, rampe animée, points de branche colorés par agent
   avec pulsation en cascade (suit l'ordre du processus).
   ========================================================================== */

/* 1 — portraits : remplir le cercle sans déformation.
   ⚠️ agents.css pose « #agents-ia img { height:auto } » (spécificité d'ID) :
   les variantes préfixées #agents-ia sont indispensables pour le surclasser. */
.ggai-kupa-hero .ggai-org__avatar{overflow:hidden;}
#agents-ia .ggai-org__avatar img,
#agents-ia .ggai-org-dialog__photo img,
.ggai-kupa-hero .ggai-org__avatar img{
  width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 28%;
}

/* 2 — badge posé sur la bordure haute du hub, hors de l'icône */
.ggai-kupa-hero .ggai-org__lead{position:relative;overflow:visible;}
.ggai-kupa-hero .ggai-org__lead > em{
  position:absolute;top:-13px;right:14px;left:auto;margin:0;z-index:3;
  background:#081321;
  border:1px solid rgba(16,185,129,.4);
  box-shadow:0 6px 18px rgba(2,8,23,.5);
}

/* 3 — ligne verticale KUPA → rampe : dégradé net + jonction marquée */
.ggai-kupa-hero .ggai-org__line{
  width:2px;
  background:linear-gradient(180deg,#7c3aed,#06b6d4);
}
.ggai-kupa-hero .ggai-org__line::after{
  content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:#fff;
  box-shadow:0 0 4px #fff,0 0 14px rgba(124,58,237,.85);
}
/* l'ancien point flottant devient un paquet de données qui descend */
.ggai-kupa-hero .ggai-org__line i{
  top:auto;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px rgba(6,182,212,.9);
  animation:kxdrop 2.4s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes kxdrop{
  0%{top:-3px;opacity:0}
  14%{opacity:1}
  80%{top:calc(100% - 5px);opacity:1}
  100%{top:calc(100% - 5px);opacity:0}
}

/* rampe horizontale : glux discret + halo renforcé */
.ggai-kupa-hero .ggai-org__team::before{
  background-size:180% 100%;
  animation:kxpan 11s linear infinite alternate;
  box-shadow:0 0 22px rgba(124,58,237,.3);
}
@keyframes kxpan{from{background-position:0% 0}to{background-position:100% 0}}

/* points de branche : toujours à la couleur de l'agent (fini le point blanc),
   pulsation en cascade dans l'ordre du processus */
.ggai-kupa-hero .ggai-org__member::after,
.ggai-kupa-hero .ggai-org__member.is-flow-active::after{
  background:var(--ggai-profile,#8b5cf6);
  animation:kxblip 2.4s ease-in-out infinite;
}
.ggai-kupa-hero .ggai-org__member:nth-child(1)::after{animation-delay:.9s}
.ggai-kupa-hero .ggai-org__member:nth-child(2)::after{animation-delay:1.15s}
.ggai-kupa-hero .ggai-org__member:nth-child(3)::after{animation-delay:1.4s}
.ggai-kupa-hero .ggai-org__member:nth-child(4)::after{animation-delay:1.65s}
@keyframes kxblip{
  0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 0 0 5px rgba(255,255,255,.09),0 0 12px 2px rgba(255,255,255,.35)}
}

/* branches verticales : légère montée en luminosité, même cadence */
.ggai-kupa-hero .ggai-org__member::before{
  animation:kxbranch 2.4s ease-in-out infinite;
}
.ggai-kupa-hero .ggai-org__member:nth-child(1)::before{animation-delay:.9s}
.ggai-kupa-hero .ggai-org__member:nth-child(2)::before{animation-delay:1.15s}
.ggai-kupa-hero .ggai-org__member:nth-child(3)::before{animation-delay:1.4s}
.ggai-kupa-hero .ggai-org__member:nth-child(4)::before{animation-delay:1.65s}
@keyframes kxbranch{0%,100%{filter:brightness(1)}50%{filter:brightness(1.8)}}

@media (prefers-reduced-motion:reduce){
  .ggai-kupa-hero .ggai-org__line i,
  .ggai-kupa-hero .ggai-org__team::before,
  .ggai-kupa-hero .ggai-org__member::before,
  .ggai-kupa-hero .ggai-org__member::after{animation:none;}
}

/* ==========================================================================
   TITRE « De la demande client au devis validé » : dégradé identique aux
   autres sections (le JS découpe le titre en deux lignes .kx-tline).
   Élargissement du contenu de la section à 1400 px (« pleine largeur »).
   ========================================================================== */
.ggai-kupa-hero #ggai-capabilities-title .kx-tline{display:block;}
.ggai-kupa-hero #ggai-capabilities-title .kx-tgrad{
  background-image:linear-gradient(100deg,#7c8cff 0%,#8b5cf6 48%,#d946ef 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.ggai-kupa-hero #capacites-kupa.ggai-capabilities{
  padding:72px max(40px,calc((var(--kx-vw,100vw) - 1400px) / 2));
}
@media (max-width:900px){
  .ggai-kupa-hero #capacites-kupa.ggai-capabilities{padding:52px 22px;}
}

/* ==========================================================================
   Portraits de Yasmine et d'Antoine (organigramme) : leurs photos-v2 sont des
   plans LARGES 768×528 (Emma et Julie sont des portraits serrés). Sans zoom,
   leurs visages paraissent petits dans la vignette. Réglages choisis par
   comparaison directe avec le cadrage de Julie (référence).
   ========================================================================== */
/* (recadrages déplacés en fin de feuille, ciblés par nom de fichier photo,
   pour couvrir à la fois les cartes et la fiche agent) */

/* ==========================================================================
   POLICE ET COULEUR CANONIQUES DES TITRES DE SECTION
   Référence : « Votre mission KUPA en quatre étapes » — Space Grotesk
   graisse 750-760, interlettrage -.05em, ligne d'accent en dégradé
   #7c8cff → #8b5cf6 → #d946ef. Appliqué partout : hero, sections KX,
   sections GG, et titres normalisés par kx-tfix (JS).
   ========================================================================== */
/* hero (plugin kupa-hero-sphere, Sora d'origine) */
.ggai-kupa-hero #ih-hero .ihtitle{
  font-family:"Space Grotesk",system-ui,sans-serif !important;
  font-weight:760;letter-spacing:-.05em;line-height:1.0;
}
.ggai-kupa-hero #ih-hero .ihtitle .g{
  background-image:linear-gradient(100deg,#7c8cff 0%,#8b5cf6 48%,#d946ef 100%);
  animation:none;
}
/* sections KX : verrouillage explicite (prime sur la règle de base Sora) */
.kx h2.kx-t{
  font-family:"Space Grotesk",system-ui,sans-serif !important;
  font-weight:760;letter-spacing:-.05em;
}
/* titre capacités (Inter d'origine) */
.ggai-kupa-hero #ggai-capabilities-title{
  font-family:"Space Grotesk",system-ui,sans-serif !important;
  font-weight:760;letter-spacing:-.05em;line-height:1.04;
}
/* titres normalisés par le JS */
.ggai-kupa-hero .kx-tfix-lg{
  font-family:"Space Grotesk",system-ui,sans-serif !important;
  font-weight:760;letter-spacing:-.05em;
}
.ggai-kupa-hero .kx-tfix-sm{
  font-family:"Space Grotesk",system-ui,sans-serif !important;
  font-weight:700;letter-spacing:-.035em;
}

/* bouton secondaire de l'en-tête répliqué — valeurs relevées sur le bouton
   « Découvrir les agents » de l'accueil (runtime) */
#kx-hdr .kxh-cta2{display:inline-flex;align-items:center;padding:9px 15px;border-radius:11px;
  background:rgba(37,99,235,.08);border:1px solid rgba(96,165,250,.24);
  color:#dbeafe;font-size:12.5px;font-weight:750;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;transition:background .18s ease,border-color .18s ease;}
#kx-hdr .kxh-cta2:hover{background:rgba(37,99,235,.16);border-color:rgba(96,165,250,.45);}
@media (max-width:760px){#kx-hdr .kxh-cta2{display:none;}}

/* ==========================================================================
   FICHE AGENT (.ggai-org-dialog) : la photo était posée en height:auto dans
   le rond de 100 px -> bande sombre sous les photos paysage (Yasmine, Antoine).
   La photo remplit désormais tout le cercle, avec les mêmes recadrages visage
   que sur les cartes. Ciblage par nom de fichier : suit l'agent affiché quel
   que soit l'ordre, et couvre cartes ET fiche.
   ========================================================================== */
.ggai-org-dialog__photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 28%;
  display:block;
}
/* uniquement dans les vignettes RONDES (cartes + fiche) — jamais sur les
   visuels rectangulaires des pages agents */
.ggai-org__avatar img[src*="automatisation-n8n-ia-photo"],
.ggai-org-dialog__photo img[src*="automatisation-n8n-ia-photo"]{
  object-position:center 28%;
  transform:scale(1.55);transform-origin:50% 30%;
}
.ggai-org__avatar img[src*="chef-projet-ia-photo"],
.ggai-org-dialog__photo img[src*="chef-projet-ia-photo"]{
  object-position:center 30%;
  transform:scale(1.25);transform-origin:50% 34%;
}

/* ==========================================================================
   DÉPLACEMENT DE « De la demande client au devis validé » : masquée sur
   l'accueil (le HTML y reste : il sert de source à /services), affichée sur
   /services par kupa-sections.js. Rétablir sur l'accueil = supprimer la
   règle ci-dessous.
   ========================================================================== */
body.ggai-kupa-hero #capacites-kupa{display:none !important;}

/* ==========================================================================
   BANNIÈRE DES FONCTIONNALITÉS — annonce colorée au-dessus du tableau
   « Comparez les cadres de service ». Une teinte par fonctionnalité, dans
   la progression des titres (bleu → cyan → vert → ambre → rose → violet).
   Posée par banniereFonctions() ; chaque pastille ouvre la fiche explicative.
   ========================================================================== */
/* titre sur une seule ligne : les deux fragments (blanc + dégradé) passent
   en ligne au lieu d'être empilés — « Comparez les cadres de service » */
.ggai-kupa-hero .ggai-comparison .ggai-section-heading{max-width:1100px;}
.ggai-kupa-hero .ggai-comparison .ggai-section-heading h3{text-wrap:nowrap;}
@media (max-width:1120px){
  .ggai-kupa-hero .ggai-comparison .ggai-section-heading h3{text-wrap:balance;}
}
.ggai-kupa-hero .ggai-comparison .ggai-section-heading h3 .ggai-title-line{
  display:inline;margin-top:0;
}

/* pas d'encart : les pastilles posent directement sur le fond, comme les
   onglets de la section de référence (.kx-tabs) */
.ggai-kupa-hero .ggai-comparison .kx-fbar{
  margin:0 auto clamp(30px,4vw,44px);
  max-width:1180px;
}
.ggai-kupa-hero .ggai-comparison .kx-fbar__liste{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
}

/* même gabarit que les prestations du bloc « Projet Kupa IA » : carte
   rectangulaire, pastille carrée, texte semi-gras — seule la teinte change */
.ggai-kupa-hero .ggai-comparison .kx-fchip{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:12px;
  width:100%;
  padding:13px 16px;
  border:1px solid color-mix(in srgb, var(--kxf,#3b82f6) 24%, rgba(148,163,184,.14));
  border-radius:12px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--kxf,#3b82f6) 9%, transparent),
    color-mix(in srgb, var(--kxf,#3b82f6) 3%, transparent));
  color:#e6ebf7;
  font-family:Inter,system-ui,sans-serif;font-size:15px;font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
/* pastille : même géométrie que la coche des prestations (24 px, r8) */
.ggai-kupa-hero .ggai-comparison .kx-fchip > i{
  display:grid;place-items:center;
  width:24px;height:24px;flex:none;border-radius:8px;
  background:color-mix(in srgb, var(--kxf,#3b82f6) 18%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kxf,#3b82f6) 48%, transparent);
}
.ggai-kupa-hero .ggai-comparison .kx-fchip > i::before{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--kxf,#3b82f6);
  box-shadow:0 0 8px color-mix(in srgb, var(--kxf,#3b82f6) 60%, transparent);
}
.ggai-kupa-hero .ggai-comparison .kx-fchip:hover{
  border-color:color-mix(in srgb, var(--kxf,#3b82f6) 52%, transparent);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--kxf,#3b82f6) 16%, transparent),
    color-mix(in srgb, var(--kxf,#3b82f6) 5%, transparent));
  transform:translateY(-1px);
}
.ggai-kupa-hero .ggai-comparison .kx-fchip:focus-visible{
  outline:none;color:#fff;
  border-color:var(--kxf,#3b82f6);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--kxf,#3b82f6) 30%, transparent);
}
@media (max-width:1080px){
  .ggai-kupa-hero .ggai-comparison .kx-fbar__liste{grid-template-columns:repeat(2,minmax(0,1fr));max-width:700px;margin-inline:auto;}
}

/* ==========================================================================
   TABLEAU COMPARATIF — lecture par couleur
   Chaque ligne porte la teinte de sa pastille (--kxf) : filet coloré à
   gauche, pastille « ? » à la même teinte, survol teinté. Survoler une
   pastille de la bannière allume la ligne correspondante (.kx-lie), et
   inversement : les deux blocs se répondent.
   ========================================================================== */
/* alternance discrète pour suivre les lignes du regard */
.ggai-kupa-hero .ggai-comparison tbody tr:nth-child(even) > *{
  background:rgba(255,255,255,.018);
}
/* filet coloré en tête de ligne (la 1re cellule est sticky : on passe par
   un box-shadow interne, qui reste visible au défilement horizontal) */
.ggai-kupa-hero .ggai-comparison tbody tr.kx-frow > th:first-child{
  box-shadow:inset 4px 0 0 var(--kxf,#3b82f6), 10px 0 22px rgba(2,8,23,.16);
}
/* pastille « ? » à la teinte de la fonctionnalité */
.ggai-kupa-hero .ggai-comparison tr.kx-frow .ggai-feature-help > i{
  border-color:color-mix(in srgb, var(--kxf,#3b82f6) 55%, transparent);
  background:color-mix(in srgb, var(--kxf,#3b82f6) 15%, transparent);
  color:color-mix(in srgb, var(--kxf,#3b82f6) 72%, #fff);
}
/* survol de la ligne, ou pastille survolée dans la bannière */
.ggai-kupa-hero .ggai-comparison tbody tr.kx-frow:hover > *,
.ggai-kupa-hero .ggai-comparison tbody tr.kx-frow.kx-lie > *{
  background:color-mix(in srgb, var(--kxf,#3b82f6) 11%, #111727);
}
.ggai-kupa-hero .ggai-comparison tbody tr.kx-frow:hover > th:first-child,
.ggai-kupa-hero .ggai-comparison tbody tr.kx-frow.kx-lie > th:first-child{
  background:color-mix(in srgb, var(--kxf,#3b82f6) 16%, #111727);
  box-shadow:inset 4px 0 0 var(--kxf,#3b82f6), 10px 0 22px rgba(2,8,23,.16);
}
.ggai-kupa-hero .ggai-comparison tbody tr.kx-frow.kx-lie .ggai-feature-help > i{
  border-color:var(--kxf,#3b82f6);
  background:color-mix(in srgb, var(--kxf,#3b82f6) 30%, transparent);
  color:#fff;transform:scale(1.06);
}
/* version mobile du tableau : même code couleur sur les cartes */
.ggai-kupa-hero .ggai-comparison__mobile .kx-frow{
  box-shadow:inset 4px 0 0 var(--kxf,#3b82f6);
}
@media (max-width:560px){
  .ggai-kupa-hero .ggai-comparison .kx-fbar__liste{grid-template-columns:1fr;max-width:360px;gap:9px;}
  .ggai-kupa-hero .ggai-comparison .kx-fchip{font-size:14px;padding:11px 14px;}
}

/* ==========================================================================
   BANDEAU DÉFILANT « ARCHITECTURE & SOUVERAINETÉ »
   Posé par bandeauInfra() sous la section locale / cloud / hybride. Même
   grammaire que le bandeau des outils (pleine largeur, masque latéral,
   pastilles arrondies) mais défilement inversé et deux teintes : violet pour
   ce qui relève du local, cyan pour le cloud privé.
   ========================================================================== */
.ggai-kupa-hero .kx-band{
  box-sizing:border-box;
  width:var(--kx-vw,100vw);
  margin-top:clamp(28px,4vw,56px);
  margin-bottom:clamp(28px,4vw,56px);
  margin-left:calc(50% - var(--kx-vw,100vw) / 2);
  margin-right:calc(50% - var(--kx-vw,100vw) / 2);
  padding:52px 0;
  border-top:1px solid rgba(148,163,184,.15);
  border-bottom:1px solid rgba(148,163,184,.15);
  background:linear-gradient(180deg,rgba(9,12,22,.97),rgba(6,8,16,.99));
}
.ggai-kupa-hero .kx-band__label{
  margin:0 0 28px;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:#7d8da3;
}
.ggai-kupa-hero .kx-band__marq{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.ggai-kupa-hero .kx-band__track{
  display:flex;gap:14px;width:max-content;
  animation:kxband 46s linear infinite; /* sens inverse du bandeau des outils */
}
.ggai-kupa-hero .kx-band:hover .kx-band__track{animation-play-state:paused;}
@keyframes kxband{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .ggai-kupa-hero .kx-band__track{animation:none;}
  .ggai-kupa-hero .kx-band__marq{overflow-x:auto;}
}
.ggai-kupa-hero .kx-band__chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:999px;white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--kxb) 30%, rgba(148,163,184,.14));
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--kxb) 10%, transparent),
    color-mix(in srgb, var(--kxb) 3%, transparent));
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;letter-spacing:.05em;color:#ccd6e6;
}
.ggai-kupa-hero .kx-band__chip[data-kx-t="v"]{--kxb:#8b5cf6;}
.ggai-kupa-hero .kx-band__chip[data-kx-t="c"]{--kxb:#22d3ee;}
.ggai-kupa-hero .kx-band__chip::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--kxb);box-shadow:0 0 9px var(--kxb);
}
@media (max-width:640px){
  .ggai-kupa-hero .kx-band{padding:38px 0;}
  .ggai-kupa-hero .kx-band__chip{padding:10px 17px;font-size:12.5px;}
}

/* ==========================================================================
   FAQ — une seule colonne : la grille 2 × N laissait un trou dès qu'une
   réponse s'ouvrait (la hauteur de rangée suit la carte la plus haute).
   Même code couleur que le reste : filet coloré par question.
   ========================================================================== */
.ggai-kupa-hero .ggai__faq-list{
  grid-template-columns:1fr;
  gap:10px;
}
.ggai-kupa-hero .ggai__faq details{
  box-shadow:inset 3px 0 0 color-mix(in srgb, var(--ggai-faq-color) 70%, transparent);
}
.ggai-kupa-hero .ggai__faq details[open]{
  border-color:color-mix(in srgb, var(--ggai-faq-color) 55%, transparent);
  box-shadow:inset 3px 0 0 var(--ggai-faq-color),
    0 14px 34px color-mix(in srgb, var(--ggai-faq-color) 14%, transparent);
}
.ggai-kupa-hero .ggai__faq-question strong{font-size:16px;line-height:1.3;}
.ggai-kupa-hero .ggai__faq-question small{letter-spacing:.09em;}
/* le « + » prend la teinte de la question et tourne à l'ouverture */
.ggai-kupa-hero .ggai__faq-toggle{
  border-color:color-mix(in srgb, var(--ggai-faq-color) 45%, transparent) !important;
  color:color-mix(in srgb, var(--ggai-faq-color) 75%, #fff) !important;
  transition:transform .2s ease, background .2s ease;
}
.ggai-kupa-hero .ggai__faq details[open] .ggai__faq-toggle{
  background:color-mix(in srgb, var(--ggai-faq-color) 22%, transparent) !important;
  transform:rotate(45deg);
}
/* la réponse s'aligne sur le numéro plutôt que sur le bord de la carte */
.ggai-kupa-hero .ggai__faq-answer{max-width:78ch;}

/* ==========================================================================
   APPEL FINAL « Construisez votre entreprise virtuelle » — même titre que
   les sections (Space Grotesk, échelle des h3, deux lignes dont une en
   dégradé). Le conteneur est élargi pour que la ligne colorée tienne.
   ========================================================================== */
.ggai-kupa-hero .ggai-closing-cta h2{
  font-size:clamp(2.25rem, 4.3vw, 4.6rem) !important;
  font-weight:750 !important;
  letter-spacing:-.052em !important;
  line-height:.98 !important;
  max-width:none;
}

/* --- raccord avec la section précédente : plus de palier de fond ni de vide.
   L'appel final reprend le fond de #agents-ia (même teinte, même trame) et
   colle à la section du dessus. --- */
.ggai-kupa-hero #agents-ia{padding-bottom:clamp(40px,5vw,72px);}
.ggai-kupa-hero .ggai-closing-cta{
  box-sizing:border-box;
  margin-block:0 clamp(56px,7vw,96px) !important;
  margin-left:calc(50% - var(--kx-vw,100vw) / 2);
  margin-right:calc(50% - var(--kx-vw,100vw) / 2);
  width:var(--kx-vw,100vw);
  padding-block:clamp(32px,4vw,56px);
}
.ggai-kupa-hero .ggai-closing-cta > .container-x{
  width:min(94vw,1560px);margin-inline:auto;
}
.ggai-kupa-hero .ggai-closing-cta [class*="max-w-2xl"]{
  max-width:940px;
}
.ggai-kupa-hero .ggai-closing-cta h2 .ggai-title-line + .ggai-title-line{
  margin-top:.015em;
}

/* ==========================================================================
   INFRASTRUCTURE — espacement resserré et explications au clic
   ========================================================================== */
/* l'ancien enchaînement laissait ~230 px de vide entre le bandeau et le
   titre : la marge du showcase s'ajoutait à celle du bandeau */
.ggai-kupa-hero .kx-band + * + .ggai-showcase--infrastructure,
.ggai-kupa-hero .kx-band + .ggai-showcase--infrastructure{
  margin-top:0;
}

/* éléments explicables : étapes du protocole + garanties LAN/ACL/TLS/Logs */
.ggai-kupa-hero .kx-exp{
  position:relative;cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.ggai-kupa-hero .kx-exp::after{
  content:"?";
  position:absolute;top:8px;right:8px;
  display:grid;place-items:center;
  width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(148,163,184,.35);
  color:#9fb0c8;font-size:10px;font-weight:800;line-height:1;
  opacity:.65;transition:opacity .2s ease, border-color .2s ease, color .2s ease;
}
.ggai-kupa-hero .kx-exp:hover{transform:translateY(-1px);}
.ggai-kupa-hero .kx-exp:hover::after{opacity:1;border-color:#60a5fa;color:#bfdbfe;}
.ggai-kupa-hero .kx-exp:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(96,165,250,.35);border-radius:12px;
}

/* dialogue d'explication */
.kx-modal{
  width:min(560px, calc(100vw - 32px));
  padding:30px 30px 26px;
  border:1px solid rgba(148,163,184,.2);
  border-radius:20px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(37,99,235,.16), transparent 58%),
    linear-gradient(150deg, rgba(15,20,38,.99), rgba(9,12,24,.99));
  color:#e6ebf7;
  box-shadow:0 40px 100px rgba(2,8,23,.6);
  font-family:Inter,system-ui,sans-serif;
}
.kx-modal::backdrop{background:rgba(3,6,15,.7);backdrop-filter:blur(3px);}
.kx-modal__x{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;display:grid;place-items:center;
  border:1px solid rgba(148,163,184,.24);border-radius:50%;
  background:rgba(255,255,255,.04);color:#c3cee0;font-size:13px;cursor:pointer;
}
.kx-modal__x:hover{background:rgba(255,255,255,.1);color:#fff;}
.kx-modal__k{
  display:inline-block;margin-bottom:12px;
  font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#93c5fd;
}
.kx-modal h3{
  margin:0 0 12px;padding-right:28px;
  font-family:"Space Grotesk",Sora,Inter,sans-serif;
  font-size:23px;font-weight:750;letter-spacing:-.03em;line-height:1.18;color:#f6f8ff;
}
.kx-modal p{margin:0;font-size:15.5px;line-height:1.62;color:#aab8cc;}
.kx-modal ul{
  display:grid;gap:8px;margin:20px 0 0;padding:0;list-style:none;
}
.kx-modal li{
  display:flex;gap:10px;align-items:flex-start;
  padding:11px 14px;border:1px solid rgba(148,163,184,.15);border-radius:11px;
  background:rgba(255,255,255,.03);
  font-size:14px;line-height:1.45;color:#dbe3f2;
}
.kx-modal li::before{
  content:"✓";flex:none;color:#34d399;font-weight:900;font-size:12px;line-height:1.4;
}
@media (max-width:560px){
  .kx-modal{padding:24px 20px 20px;}
  .kx-modal h3{font-size:20px;}
}

/* ==========================================================================
   BLOC « PROJET KUPA IA » — même identité de titre que les grandes sections
   (Space Grotesk, deux lignes, seconde en dégradé) et prestations en cartes.
   Classe .kx-projet posée par blocProjet().
   ========================================================================== */
.ggai-kupa-hero .kx-projet h3{
  font-family:"Space Grotesk",Sora,Inter,sans-serif !important;
  font-size:clamp(2.1rem,3.7vw,3.6rem);
  font-weight:750;letter-spacing:-.052em;line-height:.98;
  max-width:none;text-wrap:nowrap; /* chaque ligne posée par couperTitre reste entière */
}
@media (max-width:900px){
  .ggai-kupa-hero .kx-projet h3{text-wrap:balance;}
}
.ggai-kupa-hero .kx-projet h3 .ggai-title-line + .ggai-title-line{margin-top:.02em;}
.ggai-kupa-hero .kx-projet > div > p{
  margin-top:16px;font-size:16.5px;line-height:1.6;color:#a9b6ca;max-width:60ch;
}
/* badge « Projet Kupa IA » un cran plus affirmé */
.ggai-kupa-hero .kx-projet .ggai-model__badge{
  letter-spacing:.1em;
}

/* prestations : cartes lisibles au lieu d'une liste grise en 12 px */
.ggai-kupa-hero .kx-projet ul{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;margin:26px 0 0;
}
.ggai-kupa-hero .kx-projet li{
  align-items:center;gap:12px;
  padding:13px 16px;
  border:1px solid rgba(168,85,247,.2);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(168,85,247,.09),rgba(168,85,247,.03));
  color:#e6ebf7;font-size:15px;font-weight:600;line-height:1.35;
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.ggai-kupa-hero .kx-projet li:hover{
  border-color:rgba(168,85,247,.5);
  background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(168,85,247,.05));
  transform:translateY(-1px);
}
/* la coche devient une pastille */
.ggai-kupa-hero .kx-projet li span{
  display:grid;place-items:center;flex:none;
  width:24px;height:24px;border-radius:8px;
  background:rgba(168,85,247,.18);
  box-shadow:inset 0 0 0 1px rgba(168,85,247,.45);
  color:#d8b4fe;font-size:12px;font-weight:900;
}
@media (max-width:760px){
  .ggai-kupa-hero .kx-projet ul{grid-template-columns:1fr;}
  .ggai-kupa-hero .kx-projet h3{max-width:none;}
}

/* ==========================================================================
   DÉPLACEMENT DE « Livre blanc technique · Protocole cognitif KUPA »
   (.ggai-showcase--trust) : masquée sur l'accueil, réaffichée sur /services
   par livreBlancServices() dans une enveloppe .kx-trust qui rétablit les
   variables de thème sombre du plugin GG.
   ========================================================================== */
body.ggai-kupa-hero .ggai-showcase--trust{display:none !important;}

.kx-trust{
  box-sizing:border-box;
  width:var(--kx-vw,100vw);
  margin-left:calc(50% - var(--kx-vw,100vw) / 2);
  margin-right:calc(50% - var(--kx-vw,100vw) / 2);
  padding:clamp(56px,7vw,100px) 0;
  overflow:visible;
  /* même famille de halos que la section précédente (miroir) : les deux
     sections déplacées forment un seul bloc sombre continu */
  background:
    radial-gradient(circle at 10% 6%, rgba(124,58,237,.16), transparent 34rem),
    radial-gradient(circle at 92% 42%, rgba(37,99,235,.12), transparent 30rem),
    linear-gradient(145deg, rgba(12,17,33,.98), rgba(8,11,22,.99));
  border-bottom:1px solid rgba(148,163,184,.17);
}
.kx-trust > .ggai__container > .ggai-showcase--trust{margin-top:0;}
.kx-trust *,.kx-trust *::before,.kx-trust *::after{box-sizing:border-box;}
.kx-trust [data-ggai-reveal]{opacity:1;transform:none;}

/* /services : les enfants de la section importée héritent du border-box */
.ggai-kupa-hero #capacites-kupa.ggai-capabilities *,
.ggai-kupa-hero #capacites-kupa.ggai-capabilities *::before,
.ggai-kupa-hero #capacites-kupa.ggai-capabilities *::after{box-sizing:border-box;}

/* ==========================================================================
   ACCUEIL : grille d'agents limitée à 14 + bouton « Voir plus » (/workflows).
   La limite saute dès qu'un filtre de catégorie est utilisé.
   ========================================================================== */
.kx-limite article[data-ggai-card]:nth-child(n+13){display:none !important;}

.kx-voirplus{display:flex;justify-content:center;margin:44px 0 8px;}
.kx-voirplus a{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 34px;border-radius:14px;
  background:linear-gradient(to right,#7c3aed,#06b6d4);
  color:#fff;font-weight:600;font-size:16px;text-decoration:none;
  box-shadow:0 12px 38px rgba(124,58,237,.35);
  transition:transform .22s ease,box-shadow .22s ease;
}
.kx-voirplus a:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(124,58,237,.5);}
.kx-voirplus a span{transition:transform .22s ease;}
.kx-voirplus a:hover span{transform:translateX(4px);}

/* ==========================================================================
   /workflows : grille des agents en PLEINE LARGEUR (le wrapper .container-x
   du thème la limitait). Contenu utile plafonné à 1560 px, bords à l'écran.
   ========================================================================== */
.kx-agents-full > .container-x{
  max-width:none;
  box-sizing:border-box;
  width:var(--kx-vw,100vw);
  margin-left:calc(50% - var(--kx-vw,100vw) / 2);
  margin-right:calc(50% - var(--kx-vw,100vw) / 2);
  padding:0 max(24px,calc((var(--kx-vw,100vw) - 1560px) / 2));
}
@media (max-width:900px){
  .kx-agents-full > .container-x{padding:0 16px;}
}

/* ==========================================================================
   CONFIGURATEUR DE SERVICE (accueil) — lisibilité et liaison
   Bloc 01 « Votre activité » = identité BLEUE ; bloc 02 « Le résultat
   attendu » = identité VIOLETTE ; liaison animée 01 → 02 ; panneau de
   recommandation centré et aéré. Classes posées par ameliorerPicker().
   ========================================================================== */
.kx-pick-on > section{position:relative;border-radius:20px;transition:box-shadow .3s ease;}

.kx-pick-on > .kx-pick-1{
  --pick:#38bdf8;
  border:1px solid rgba(56,189,248,.28);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(56,189,248,.08), transparent 55%),
    rgba(13,18,32,.6);
  box-shadow:inset 3px 0 0 rgba(56,189,248,.65);
}
.kx-pick-on > .kx-pick-2{
  --pick:#8b5cf6;
  border:1px solid rgba(139,92,246,.3);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(139,92,246,.09), transparent 55%),
    rgba(13,18,32,.6);
  box-shadow:inset 3px 0 0 rgba(139,92,246,.65);
}
/* badge numéro à la couleur du bloc */
.kx-pick-on .kx-num{
  background:color-mix(in srgb, var(--pick) 16%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--pick) 45%, transparent) !important;
  color:var(--pick) !important;
  box-shadow:0 0 18px color-mix(in srgb, var(--pick) 25%, transparent);
}
/* titre du bloc : filet coloré sous le h3 */
.kx-pick-on > section h3{position:relative;}
.kx-pick-on > section h3::after{
  content:"";display:block;width:44px;height:3px;border-radius:3px;margin-top:8px;
  background:linear-gradient(90deg, var(--pick), transparent);
}

/* les deux blocs occupent toute la hauteur du panneau de recommandation :
   les trois colonnes de la section se terminent sur la même ligne */
@media (min-width:1100px){
  .ggai-kupa-hero .ggai-service-picker__choices{
    align-self:stretch;align-content:space-between;
  }
}

/* liaison 01 → 02 : ligne verticale dégradée + paquet qui descend */
.kx-pick-lien{
  position:relative;height:44px;width:2px;margin:2px auto;
  background:linear-gradient(180deg,#38bdf8,#8b5cf6);
  border-radius:2px;
}
.kx-pick-lien::before{
  content:"";position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid #8b5cf6;
}
.kx-pick-lien i{
  position:absolute;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 10px rgba(56,189,248,.9);
  animation:kxdrop 2.2s cubic-bezier(.45,0,.55,1) infinite;
}

/* ==========================================================================
   PANNEAU « RECOMMANDATION KUPA » : en-tête centré, titre équilibré,
   argumentaire aéré, boutons alignés.
   ========================================================================== */
.ggai-kupa-hero .ggai-service-picker__result{text-align:center;}
.ggai-kupa-hero .ggai-service-picker__result .ggai-service-picker__recommendation{text-align:center;}

/* eyebrow + badge centrés */
.ggai-kupa-hero .ggai-service-picker__result small{
  display:inline-flex;justify-content:center;margin-left:auto;margin-right:auto;
}

/* titre : centré, équilibré sur 2-3 lignes, graisse canonique */
.ggai-kupa-hero .ggai-service-picker__result h3{
  font-family:"Space Grotesk",system-ui,sans-serif !important;
  font-weight:750;letter-spacing:-.035em;line-height:1.08;
  text-align:center;text-wrap:balance;
  margin-left:auto;margin-right:auto;max-width:17ch;
}

/* argumentaire : centré, largeur de lecture confortable */
.ggai-kupa-hero .ggai-service-picker__result h3 + p,
.ggai-kupa-hero .ggai-service-picker__result .ggai-service-picker__recommendation > p{
  text-align:center;max-width:52ch;margin-left:auto;margin-right:auto;
  font-size:16.5px;line-height:1.65;text-wrap:pretty;
}

/* cartes internes (équipe recommandée, étapes 1-2-3) : texte réaligné à
   gauche pour la lisibilité — seule la tête du panneau est centrée */
.ggai-kupa-hero .ggai-service-picker__result ul,
.ggai-kupa-hero .ggai-service-picker__result ol,
.ggai-kupa-hero .ggai-service-picker__result .ggai-service-picker__agents{text-align:left;}
/* rangée agent : photo + textes sur une ligne, verticalement centrés
   (les rangées sont des <span> imbriqués sans classe -> ciblage par :has) */
.ggai-kupa-hero .ggai-service-picker__agents span:has(> img){
  display:flex;align-items:center;justify-content:flex-start;gap:12px;text-align:left;
}
#agents-ia .ggai-service-picker__agents span > img,
.ggai-kupa-hero .ggai-service-picker__agents span > img{
  width:44px;height:44px;max-width:none;flex:none;border-radius:12px;
  object-fit:cover;object-position:center 24%;
}
.ggai-kupa-hero .ggai-service-picker__agents span > img + span{
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
}

/* boutons et lien centrés */
.ggai-kupa-hero .ggai-service-picker__result .ggai-button{margin-left:auto;margin-right:auto;}

/* ==========================================================================
   OPTIONS DU CONFIGURATEUR — une couleur par choix
   Bloc 01 : 8 activités, 8 teintes. Bloc 02 : 6 résultats, 6 teintes
   coordonnées. La teinte est portée par --kxo sur chaque bouton ; pastille,
   bord, fond et coche la reprennent. Sélection = teinte pleine.
   ========================================================================== */
/* 01 — Votre activité */
.kx-pick-on [data-ggai-service-niche="restaurant-hotellerie"]{--kxo:#f59e0b;}
.kx-pick-on [data-ggai-service-niche="garage-automobile"]{--kxo:#f43f5e;}
.kx-pick-on [data-ggai-service-niche="cabinet-medical"]{--kxo:#10b981;}
.kx-pick-on [data-ggai-service-niche="pme-services"]{--kxo:#38bdf8;}
.kx-pick-on [data-ggai-service-niche="immobilier"]{--kxo:#8b5cf6;}
.kx-pick-on [data-ggai-service-niche="construction"]{--kxo:#f97316;}
.kx-pick-on [data-ggai-service-niche="architecture"]{--kxo:#14b8a6;}
.kx-pick-on [data-ggai-service-niche="commerce-ecommerce"]{--kxo:#ec4899;}
.kx-pick-on [data-ggai-service-niche="fiduciaire-comptabilite"]{--kxo:#eab308;}
.kx-pick-on [data-ggai-service-niche="agence-communication"]{--kxo:#d946ef;}
.kx-pick-on [data-ggai-service-niche="transport-logistique"]{--kxo:#6366f1;}
.kx-pick-on [data-ggai-service-niche="industrie-production"]{--kxo:#0ea5e9;}
/* 02 — Le résultat attendu */
.kx-pick-on [data-ggai-service-goal="relation-client"]{--kxo:#22d3ee;}
.kx-pick-on [data-ggai-service-goal="prospection"]{--kxo:#a3e635;}
.kx-pick-on [data-ggai-service-goal="devis-documents"]{--kxo:#fbbf24;}
.kx-pick-on [data-ggai-service-goal="administratif"]{--kxo:#34d399;}
.kx-pick-on [data-ggai-service-goal="marketing"]{--kxo:#e879f9;}
.kx-pick-on [data-ggai-service-goal="pilotage"]{--kxo:#60a5fa;}

/* état de repos : pastille et filet gauche à la teinte de l'option */
.kx-pick-on [data-ggai-service-niche],
.kx-pick-on [data-ggai-service-goal]{
  border-color:color-mix(in srgb, var(--kxo,#38bdf8) 30%, rgba(148,163,184,.12));
  box-shadow:inset 2px 0 0 color-mix(in srgb, var(--kxo,#38bdf8) 55%, transparent);
}
.kx-pick-on [data-ggai-service-niche] > b,
.kx-pick-on [data-ggai-service-goal] > b{
  background:color-mix(in srgb, var(--kxo,#38bdf8) 16%, transparent);
  color:var(--kxo,#93c5fd);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--kxo,#38bdf8) 40%, transparent);
}
/* survol : la teinte monte */
.kx-pick-on [data-ggai-service-niche]:hover,
.kx-pick-on [data-ggai-service-goal]:hover{
  border-color:color-mix(in srgb, var(--kxo,#38bdf8) 65%, transparent);
  background:color-mix(in srgb, var(--kxo,#38bdf8) 8%, transparent);
}
/* sélection : bord plein, fond teinté, pastille pleine, coche colorée */
.kx-pick-on [data-ggai-service-niche].is-selected,
.kx-pick-on [data-ggai-service-goal].is-selected{
  border-color:var(--kxo,#22d3ee);
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--kxo,#22d3ee) 18%, transparent),
    color-mix(in srgb, var(--kxo,#22d3ee) 6%, transparent));
  box-shadow:inset 2px 0 0 var(--kxo,#22d3ee),
    0 12px 30px color-mix(in srgb, var(--kxo,#22d3ee) 16%, transparent);
}
.kx-pick-on [data-ggai-service-niche].is-selected > b,
.kx-pick-on [data-ggai-service-goal].is-selected > b{
  background:var(--kxo,#0891b2);
  color:#081018;
  box-shadow:0 0 16px color-mix(in srgb, var(--kxo,#22d3ee) 45%, transparent);
}
.kx-pick-on [data-ggai-service-niche].is-selected > i,
.kx-pick-on [data-ggai-service-goal].is-selected > i{
  color:var(--kxo,#67e8f9);
}
.kx-pick-on [data-ggai-service-niche]:focus-visible,
.kx-pick-on [data-ggai-service-goal]:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--kxo,#22d3ee) 30%, transparent);
}

/* ==========================================================================
   ÉQUIPE RECOMMANDÉE — rangées cliquables (fiche agent)
   equipeFiches() pose data-ggai-details + .kx-fiche sur chaque rangée ;
   agents.js ouvre alors la même fiche détaillée que sur les cartes.
   ========================================================================== */
.ggai-kupa-hero .ggai-service-picker__agents .kx-fiche{
  position:relative;cursor:pointer;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.ggai-kupa-hero .ggai-service-picker__agents .kx-fiche::after{
  content:"Fiche →";
  margin-left:auto;flex:none;
  padding:4px 9px;border-radius:999px;
  border:1px solid rgba(96,165,250,.3);
  color:#93c5fd;font-size:11px;font-weight:700;letter-spacing:.02em;
  opacity:.75;transition:opacity .2s ease;
  white-space:nowrap;
}
.ggai-kupa-hero .ggai-service-picker__agents .kx-fiche:hover{
  border-color:rgba(96,165,250,.5);
  background:rgba(37,99,235,.1);
  transform:translateY(-1px);
}
.ggai-kupa-hero .ggai-service-picker__agents .kx-fiche:hover::after{opacity:1;}
.ggai-kupa-hero .ggai-service-picker__agents .kx-fiche:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(34,211,238,.25);
}
/* textes des rangées : plus lisibles que la base (.68rem / .57rem) */
.ggai-kupa-hero .ggai-service-picker__agents strong{font-size:14.5px;}
.ggai-kupa-hero .ggai-service-picker__agents small{font-size:12.5px;color:#9fb0c8;}
.ggai-kupa-hero .ggai-service-picker__agents > span{font-size:11.5px;color:#9fb0c8;}

/* ==========================================================================
   PANNEAU RECOMMANDATION — étapes 1·2·3 et actions bien VISIBLES
   La base rend ces éléments en ~9 px gris sombre : tailles remontées,
   contrastes renforcés, numéros d'étape colorés (cyan → violet → vert).
   ========================================================================== */
/* empilées (les 3 colonnes de la base coupaient les mots) */
.ggai-kupa-hero .ggai-service-picker__recommendation ol{grid-template-columns:1fr;gap:8px;margin-top:18px;}
.ggai-kupa-hero .ggai-service-picker__recommendation li{
  grid-template-columns:30px 1fr;gap:10px;padding:12px;
  border:1px solid rgba(148,163,184,.18);border-radius:12px;
  background:rgba(8,13,26,.72);
}
.ggai-kupa-hero .ggai-service-picker__recommendation li > b{
  width:30px;height:30px;border-radius:9px;font-size:13px;font-weight:800;
}
.ggai-kupa-hero .ggai-service-picker__recommendation li:nth-child(1) > b{
  background:rgba(34,211,238,.16);color:#22d3ee;box-shadow:inset 0 0 0 1px rgba(34,211,238,.4);}
.ggai-kupa-hero .ggai-service-picker__recommendation li:nth-child(2) > b{
  background:rgba(139,92,246,.16);color:#a78bfa;box-shadow:inset 0 0 0 1px rgba(139,92,246,.4);}
.ggai-kupa-hero .ggai-service-picker__recommendation li:nth-child(3) > b{
  background:rgba(52,211,153,.16);color:#34d399;box-shadow:inset 0 0 0 1px rgba(52,211,153,.4);}
.ggai-kupa-hero .ggai-service-picker__recommendation li strong{
  font-size:14px;color:#f1f5f9;letter-spacing:-.01em;
}
.ggai-kupa-hero .ggai-service-picker__recommendation li small{
  display:block;margin-left:0;margin-right:0; /* annule le small centré (badge) */
  font-size:12px;line-height:1.45;color:#9fb0c8;white-space:normal;text-align:left;
}
.ggai-kupa-hero .ggai-service-picker__agents small{
  display:block;margin-left:0;margin-right:0;text-align:left;
}

/* actions : boutons nets, lien catalogue affirmé */
.ggai-kupa-hero .ggai-service-picker__actions{margin-top:20px;gap:10px;}
.ggai-kupa-hero .ggai-service-picker__actions .ggai-button{
  min-height:52px;font-size:14px;font-weight:700;
}
.ggai-kupa-hero .ggai-service-picker__actions .ggai-button--secondary{
  border:1px solid rgba(96,165,250,.45);
  background:rgba(37,99,235,.12);
  color:#dbeafe;
}
.ggai-kupa-hero .ggai-service-picker__actions .ggai-button--secondary:hover:not(:disabled){
  border-color:rgba(96,165,250,.7);background:rgba(37,99,235,.2);
}
.ggai-kupa-hero .ggai-service-picker__actions [aria-disabled="true"],
.ggai-kupa-hero .ggai-service-picker__actions button:disabled{opacity:.6;}
.ggai-kupa-hero .ggai-service-picker__catalogue{
  padding:10px;font-size:13.5px;font-weight:700;color:#7dd3fc;
  text-underline-offset:3px;
}
.ggai-kupa-hero .ggai-service-picker__catalogue:hover:not(:disabled){color:#bae6fd;}

/* garde-fou : lisible sans crier */
.ggai-kupa-hero .ggai-service-picker__guard{
  justify-content:center;font-size:12.5px;color:#a8b6cb;
  border-top:1px solid rgba(148,163,184,.18);
}

/* ==========================================================================
   HARMONISATION DES EN-TÊTES DE SECTION — « De votre objectif à une mission
   contrôlée » aligné sur « Une équipe d'agents IA » (référence) :
   même taille de titre, même sous-titre (Space Grotesk, gris, 700px max).
   ========================================================================== */
.ggai-kupa-hero .ggai-showcase--network .ggai-section-heading h3{
  font-size:clamp(38px,5.2vw,90px) !important;
  line-height:.98;
}
.ggai-kupa-hero .ggai-showcase--network .ggai-section-heading p{
  font-family:"Space Grotesk",system-ui,sans-serif;
  font-size:17.5px;line-height:1.65;color:#9fb0c8;
  max-width:700px;margin-left:auto;margin-right:auto;text-align:center;
}

/* ==========================================================================
   HARMONISATION GÉNÉRALE DE L'ACCUEIL (v2.29)
   Un seul fond, un seul rythme vertical, aucun quadrillage. Trois familles :
   les BANDES pleine largeur, les CARTES contenues, et le reste transparent.
   ========================================================================== */

/* --- 1. Plus aucun quadrillage de fond ---------------------------------- */
.ggai-kupa-hero .ggai__ambient{
  background:
    radial-gradient(circle at 8% 5%, rgba(6,182,212,.12), transparent 27rem),
    radial-gradient(circle at 92% 14%, rgba(124,58,237,.11), transparent 30rem) !important;
  background-size:auto !important;
}
.ggai-kupa-hero .ggai-service-path::before,
.ggai-kupa-hero .ggai-comparison::before,
.ggai-kupa-hero .ggai-showcase--simulator::before{content:none !important;}
.ggai-kupa-hero .bg-grid{display:none !important;}

/* --- 2. Fond commun ------------------------------------------------------
   Même recette partout : halo violet en haut à droite, halo bleu à gauche,
   dégradé de base 145°. Seule la découpe change (bande ou carte). */
.ggai-kupa-hero .ggai-showcase--network,
.ggai-kupa-hero .ggai-service-path,
.ggai-kupa-hero .kx-band,
.ggai-kupa-hero .kx-trust,
.ggai-kupa-hero .ggai-closing-cta,
.ggai-kupa-hero #capacites-kupa.ggai-capabilities,
.ggai-kupa-hero .ggai-showcase--infrastructure,
.ggai-kupa-hero .ggai-showcase--simulator,
.ggai-kupa-hero .ggai-showcase--cases,
.ggai-kupa-hero .ggai-comparison,
.ggai-kupa-hero .ggai__faq,
.ggai-kupa-hero .ggai-kupa-offer--catalogue-bridge{
  background:
    radial-gradient(circle at 88% 8%, rgba(124,58,237,.16), transparent 34rem),
    radial-gradient(circle at 4% 36%, rgba(37,99,235,.11), transparent 30rem),
    linear-gradient(145deg, rgba(15,23,42,.97), rgba(10,13,26,.985)) !important;
}
/* bandes : filets horizontaux seulement */
.ggai-kupa-hero .ggai-showcase--network,
.ggai-kupa-hero .ggai-service-path,
.ggai-kupa-hero .kx-band,
.ggai-kupa-hero .kx-trust,
.ggai-kupa-hero .ggai-closing-cta,
.ggai-kupa-hero #capacites-kupa.ggai-capabilities{
  border-top:1px solid rgba(148,163,184,.15) !important;
  border-bottom:1px solid rgba(148,163,184,.15) !important;
  border-left:0 !important;border-right:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
/* cartes : même bordure, même rayon, même ombre */
.ggai-kupa-hero .ggai-showcase--infrastructure,
.ggai-kupa-hero .ggai-showcase--simulator,
.ggai-kupa-hero .ggai-showcase--cases,
.ggai-kupa-hero .ggai-comparison,
.ggai-kupa-hero .ggai__faq,
.ggai-kupa-hero .ggai-kupa-offer--catalogue-bridge{
  border:1px solid rgba(148,163,184,.16) !important;
  border-radius:clamp(1.25rem, 2.5vw, 2rem) !important;
  box-shadow:0 28px 80px rgba(2,8,23,.28) !important;
  padding:clamp(1.15rem, 3vw, 2.6rem) !important;
  overflow:hidden;
}

/* --- 3. Rythme vertical unique ------------------------------------------
   Les marges allaient de 80 à 176 px selon la section : un seul écart. */
.ggai-kupa-hero .ggai-showcase,
.ggai-kupa-hero .ggai-comparison,
.ggai-kupa-hero .ggai-configurator,
.ggai-kupa-hero .ggai__faq,
.ggai-kupa-hero .ggai-kupa-offer--catalogue-bridge{
  margin-top:clamp(52px, 5.5vw, 88px) !important;
}
.ggai-kupa-hero .ggai__container > .ggai-showcase--network:first-child{margin-top:0 !important;}
.ggai-kupa-hero .kx-band + * + .ggai-showcase--infrastructure,
.ggai-kupa-hero .kx-band + .ggai-showcase--infrastructure{margin-top:0 !important;}

/* --- 4. Mobile et tablette ----------------------------------------------
   Les bandes pleine largeur s'alignent sur la gouttière du conteneur, et
   les repères du slider passent en 2 × 2 au lieu de déborder. */
@media (max-width:1099px){
  .ggai-kupa-hero .ggai-showcase--network,
  .ggai-kupa-hero .ggai-service-path,
  .ggai-kupa-hero #capacites-kupa.ggai-capabilities{padding-left:24px;padding-right:24px;}
  .ggai-kupa-hero .ggai-showcase--infrastructure,
  .ggai-kupa-hero .ggai-showcase--simulator,
  .ggai-kupa-hero .ggai-showcase--cases,
  .ggai-kupa-hero .ggai-comparison,
  .ggai-kupa-hero .ggai__faq,
  .ggai-kupa-hero .ggai-kupa-offer--catalogue-bridge{padding:clamp(16px,2.6vw,22px) !important;}
}
@media (max-width:600px){
  /* rangée de repères du slider : 4 colonnes débordaient de 48 px */
  .ggai-kupa-hero *:has(> .ihstat){
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .ggai-kupa-hero .ihstat{min-width:0 !important;width:auto !important;}
  .ggai-kupa-hero .ggai-showcase,
  .ggai-kupa-hero .ggai-comparison,
  .ggai-kupa-hero .ggai__faq,
  .ggai-kupa-hero .ggai-kupa-offer--catalogue-bridge{margin-top:44px !important;}
}