/* ============================================================
   NOUVEAU SITE BUILD&SAVE (entreprises) — 19.10.2026
   Chargé seulement si $siteMode = 'pro' (après app.css et site.css). BuildStudio n'utilise pas ce fichier.
   Palette : graphite #17171c · nuit #0e0e12 · violet #8e76a6 / #b6a4c8 · blanc #f5f4f0 · argent #b7bbc5. Police Arial.
   ============================================================ */
body.pro { --g: #17171c; --n: #0e0e12; --v: #8e76a6; --vl: #b6a4c8; --w: #f5f4f0; --s: #b7bbc5; --line: rgba(23,23,28,.09); background: #fff; color: var(--g); }
body.pro::before, body.pro::after { display: none !important; }
.px-wrap { width: 100%; max-width: 76rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 1024px) { .px-wrap { padding: 0 2rem; } }

/* ---------- En-tête ---------- */
.px-header { position: sticky; top: 0; z-index: 60; background: rgba(14,14,18,.86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(255,255,255,.07); color: #fff; }
.px-header-in { max-width: 76rem; margin: 0 auto; height: 4.25rem; padding: 0 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
@media (min-width: 1024px) { .px-header-in { padding: 0 2rem; } }
.px-logo { display: flex; align-items: center; gap: .65rem; font-size: 1.2rem; color: #fff; }
.px-logo .wordmark { color: #fff; }
body.pro .amp { color: var(--v); }   /* 02.11.2026 : le & = couleur principale du site (nouveau logo) */
.px-nav { display: none; gap: .25rem; margin-left: auto; }
.px-nav a { padding: .5rem .8rem; border-radius: 999px; font-size: .9rem; color: rgba(255,255,255,.72); transition: color .15s, background .15s; }
.px-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
@media (min-width: 1100px) { .px-nav { display: flex; } }
.px-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
@media (min-width: 1100px) { .px-actions { margin-left: .5rem; } }
.px-icon { display: inline-flex; align-items: center; gap: .25rem; height: 2.5rem; min-width: 2.5rem; justify-content: center; padding: 0 .55rem; border-radius: 999px; color: rgba(255,255,255,.85); font-size: .8rem; font-weight: 700; text-transform: uppercase; cursor: pointer; list-style: none; }
.px-icon::-webkit-details-marker { display: none; }
.px-icon:hover { background: rgba(255,255,255,.08); color: #fff; }
.px-cart .cart-count { position: absolute; top: -.45rem; right: -.55rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem; border-radius: 999px; background: var(--vl); color: #fff; font-size: .68rem; line-height: 1.1rem; text-align: center; }
.px-cta { display: none; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 1.1rem; border-radius: 999px; background: var(--v); color: #fff; font-weight: 700; font-size: .9rem; box-shadow: 0 6px 20px -6px rgba(142,118,166,.7); transition: background .15s, transform .15s; }
.px-cta:hover { background: #7d6496; transform: translateY(-1px); }
@media (min-width: 640px) { .px-cta { display: inline-flex; } }
.px-header .langsel .bs-pop { color: var(--g); }
.px-mmenu { position: absolute; right: 1rem; top: calc(100% + .5rem); width: min(22rem, calc(100vw - 2rem)); padding: .75rem; border-radius: 1.25rem; background: #fff; color: var(--g); box-shadow: 0 24px 60px -12px rgba(0,0,0,.35); border: 1px solid var(--line); }
.px-mmenu .mm-link { display: flex; align-items: center; justify-content: space-between; padding: .8rem .9rem; border-radius: .8rem; font-size: .95rem; font-weight: 600; }
.px-mmenu .mm-link:hover { background: #f3f3f6; }
.px-mmenu .px-cta { display: flex; }

/* ---------- Boutons, titres ---------- */
.px-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: .95rem; transition: transform .15s, background .15s, box-shadow .15s; }
.px-btn:hover { transform: translateY(-1px); }
.px-btn-sm { padding: .55rem 1rem; font-size: .85rem; }
.px-btn-v { background: var(--v); color: #fff; box-shadow: 0 10px 30px -10px rgba(142,118,166,.8); }
.px-btn-v:hover { background: #7d6496; }
.px-btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.22); }
.px-btn-ghost:hover { background: rgba(255,255,255,.08); }
.px-btn-dark { background: var(--g); color: #fff; }
.px-btn-dark:hover { background: #000; }
.px-ctas { display: flex; flex-wrap: wrap; gap: .75rem; }
.px-k { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--v); }
.px-h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; }
.px-h1 em { font-style: normal; background: linear-gradient(90deg, #c5b4d7, #8e76a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.px-h2 { margin-top: .6rem; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; }
.px-p { margin-top: .9rem; max-width: 38rem; font-size: 1.08rem; line-height: 1.55; color: rgba(23,23,28,.66); }
.px-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.5rem; font-weight: 700; color: var(--v); }
.px-link:hover { gap: .65rem; }

/* ---------- Héro ---------- */
.px-hero { position: relative; overflow: hidden; background: radial-gradient(60rem 30rem at 85% -10%, rgba(142,118,166,.38), transparent 60%), radial-gradient(40rem 24rem at 0% 110%, rgba(182,164,200,.16), transparent 60%), var(--n); color: #fff; padding: 4.5rem 0 5rem; }
@media (min-width: 1024px) { .px-hero { padding: 6.5rem 0 7rem; } }
.px-hero-in { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .px-hero-in { grid-template-columns: 1.15fr .85fr; gap: 4rem; } }
.px-eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); font-size: .8rem; color: rgba(255,255,255,.75); margin-bottom: 1.5rem; }
.px-eyebrow span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--vl); box-shadow: 0 0 0 4px rgba(182,164,200,.25); }
.px-lead { margin-top: 1.4rem; max-width: 36rem; font-size: 1.15rem; line-height: 1.55; color: rgba(255,255,255,.7); }
.px-hero .px-ctas { margin-top: 2rem; }
.px-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.8rem; font-size: .9rem; color: rgba(255,255,255,.62); }
.px-checks li { display: inline-flex; align-items: center; gap: .4rem; }
.px-checks svg { color: var(--vl); }

/* Exemple d'automatisation animé */
.px-flow { position: relative; padding: 1.5rem; border-radius: 1.75rem; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.px-flow-k { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vl); }
.px-flow ol { position: relative; margin-top: 1.2rem; display: grid; gap: .7rem; }
.px-flow ol::before { content: ""; position: absolute; left: 1.45rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: linear-gradient(var(--vl), rgba(182,164,200,.1)); }
.px-flow li { position: relative; display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem .7rem .55rem; border-radius: 1rem; background: rgba(14,14,18,.6); border: 1px solid rgba(255,255,255,.06); animation: px-step 8s infinite; animation-delay: calc(var(--i) * 1.6s); }
.px-flow li b { display: block; font-size: .95rem; }
.px-flow li small { display: block; font-size: .78rem; color: rgba(255,255,255,.5); }
.px-node { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; margin-left: .15rem; border-radius: 50%; background: #23232b; color: var(--vl); box-shadow: 0 0 0 4px var(--n); }
.px-node svg { width: 1rem; height: 1rem; }
@keyframes px-step { 0%, 100% { border-color: rgba(255,255,255,.06); background: rgba(14,14,18,.6); } 8%, 22% { border-color: rgba(182,164,200,.7); background: rgba(142,118,166,.22); } 30% { border-color: rgba(255,255,255,.06); background: rgba(14,14,18,.6); } }
.px-flow-ok { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .75rem 1rem; border-radius: 1rem; background: rgba(52,199,89,.12); color: #7ee2a0; font-size: .9rem; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .px-flow li { animation: none; } }

/* 4 piliers */
.px-pillars { position: relative; z-index: 2; margin-top: -2.5rem; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .px-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.px-pillar { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(23,23,28,.35); transition: transform .15s, box-shadow .15s; }
.px-pillar:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(142,118,166,.45); }
.px-pillar b { margin-top: .6rem; font-size: 1.02rem; }
.px-pillar small { font-size: .86rem; color: rgba(23,23,28,.6); }
.px-pillar-go { position: absolute; right: 1.1rem; top: 1.3rem; color: rgba(23,23,28,.3); }
.px-ic { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .9rem; background: #f4f0f8; color: var(--v); }

/* ---------- Sections ---------- */
.px-sec { padding: 5rem 0; }
@media (min-width: 1024px) { .px-sec { padding: 7rem 0; } }
.px-dark { background: var(--n); color: #fff; }
.px-dark .px-p { color: rgba(255,255,255,.62); }
.px-dark .px-k { color: var(--vl); }
.px-soft { background: #f5f5f7; }
.px-split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .px-split { grid-template-columns: .9fr 1.1fr; gap: 4rem; } .px-split-rev > :first-child { order: 0; } }
.px-list { display: grid; gap: .6rem; margin-top: 1.5rem; }
.px-list li { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.px-list svg { flex: none; color: var(--v); }
.px-screens { display: grid; gap: 1rem; }
@media (min-width: 640px) { .px-screens { grid-template-columns: 1fr 1fr; } .px-screens > :first-child { grid-column: span 2; } }

.px-autos { display: grid; gap: .75rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .px-autos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .px-autos { grid-template-columns: 1fr 1fr 1fr; } }
.px-auto { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; padding: 1.1rem; border-radius: 1.1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); font-size: .92rem; line-height: 1.35; }
.px-auto span { display: block; margin-bottom: .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.px-auto p:last-child span { color: var(--vl); }
.px-auto i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(182,164,200,.18); color: var(--vl); }

.px-cards4, .px-cards2 { display: grid; gap: .9rem; margin-top: 2.5rem; }
.px-cards2 { margin-top: 0; grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .px-cards4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .px-cards4 { grid-template-columns: repeat(4, 1fr); } }
.px-card { padding: 1.4rem; border-radius: 1.25rem; background: #fff; border: 1px solid var(--line); }
.px-card b { display: block; margin-top: 1rem; font-size: 1.05rem; }
.px-card p { margin-top: .35rem; font-size: .9rem; line-height: 1.45; color: rgba(23,23,28,.6); }

.px-prods { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .px-prods { grid-template-columns: repeat(3, 1fr); } }
.px-prod { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.5rem; background: #fff; border: 1px solid var(--line); transition: box-shadow .15s, transform .15s; }
.px-prod:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -28px rgba(23,23,28,.45); }
.px-prod-img { display: block; aspect-ratio: 4 / 3; background: #f3f3f5; }
.px-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.px-prod-body { display: flex; flex: 1; flex-direction: column; gap: .7rem; padding: 1.25rem; }
.px-prod-body h3 { font-size: 1.15rem; font-weight: 800; }
.px-prod-auto { display: flex; gap: .5rem; font-size: .9rem; line-height: 1.45; color: rgba(23,23,28,.66); }
.px-prod-auto svg { flex: none; margin-top: .15rem; color: var(--v); }
.px-prod-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: .5rem; }
.px-prod-foot b { font-size: 1.1rem; }

.px-steps { display: grid; gap: .9rem; margin-top: 2.5rem; counter-reset: s; }
@media (min-width: 768px) { .px-steps { grid-template-columns: repeat(4, 1fr); } }
.px-steps li { padding: 1.4rem; border-radius: 1.25rem; background: #f5f5f7; }
.px-steps span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--g); color: #fff; font-weight: 800; }
.px-steps b { display: block; margin-top: 1rem; font-size: 1.05rem; }
.px-steps p { margin-top: .3rem; font-size: .9rem; color: rgba(23,23,28,.6); }

.px-final { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 1rem 0 5rem; padding: 2.5rem; border-radius: 2rem; color: #fff; background: radial-gradient(40rem 20rem at 100% 0%, rgba(142,118,166,.45), transparent 60%), var(--n); }
.px-final .px-p { color: rgba(255,255,255,.65); }

/* L'ancien site.css colore #nav et .wordmark (règles .clair #nav … !important) : on reprend la main */
body.pro.clair #nav.px-header { background: rgba(14,14,18,.9) !important; border-bottom: 1px solid rgba(255,255,255,.07); }
body.pro.clair #nav.px-header::after { opacity: .5; }
body.pro .px-header .wordmark { color: #fff !important; font-size: 1.2rem; }
body.pro .px-header .bs-pop a { color: var(--g); }

/* Studio 3D (bloc commun inc/studio.php) dans la largeur du nouveau site */
.px-studio > section { max-width: 76rem; margin: 0 auto; padding: 1rem 1.25rem 0 !important; }
@media (min-width: 1024px) { .px-studio > section { padding: 1rem 2rem 0 !important; } }
.px-studio .max-w-7xl { max-width: none !important; }
.px-studio .studio-title { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; }
#pieces-3d .px-btn { margin-top: 1.75rem; }

/* Autres pages du site pro : en-tête sombre → pas de fond lavande */
body.pro main { background: #fff; }
body.pro footer.bg-petrol-900 { background: var(--n) !important; }

/* ---------- v2 (19.10.2026, « B2B vraiment pro ») : maquette 3D du CRM, métiers, automatisations en 2 colonnes ---------- */
.px-3d { position: relative; height: 30rem; perspective: 1600px; display: grid; place-items: center; }
@media (max-width: 640px) { .px-3d { height: 22rem; } }
.px-3d-board { --mx: 0deg; --my: 0deg; position: relative; width: 31rem; height: 21rem; transform-style: preserve-3d;
  transform: rotateX(calc(52deg + var(--my))) rotateZ(calc(-34deg + var(--mx))); transition: transform .6s cubic-bezier(.2,.7,.2,1); animation: px-float 7s ease-in-out infinite; }
@media (max-width: 640px) { .px-3d-board { width: 21rem; height: 15rem; } }
@keyframes px-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.px-3d-app { position: absolute; inset: 0; display: flex; overflow: hidden; border-radius: 1.4rem; background: linear-gradient(160deg, #1d1d25, #121217); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), -30px 40px 80px -10px rgba(0,0,0,.7), 0 0 120px -20px rgba(142,118,166,.55); transform-style: preserve-3d; }
.px-3d-side { display: flex; flex-direction: column; gap: .6rem; width: 3rem; padding: 1rem .7rem; background: rgba(255,255,255,.03); border-right: 1px solid rgba(255,255,255,.06); }
.px-3d-side i { display: block; height: 1.6rem; border-radius: .5rem; background: rgba(255,255,255,.07); }
.px-3d-side i.on { background: linear-gradient(135deg, #c5b3d6, #88719e); }
.px-3d-main { flex: 1; display: flex; flex-direction: column; gap: .75rem; padding: 1rem; transform-style: preserve-3d; }
.px-3d-top { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: #fff; }
.px-3d-top span { width: 5rem; height: .9rem; border-radius: 999px; background: rgba(255,255,255,.08); }
.px-3d-chart { display: flex; align-items: flex-end; gap: .45rem; height: 6.5rem; padding: .7rem; border-radius: .9rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); transform: translateZ(14px); }
.px-3d-chart i { flex: 1; height: var(--h); border-radius: .3rem .3rem .1rem .1rem; background: linear-gradient(180deg, #c5b3d6, rgba(142,118,166,.35)); animation: px-grow 3.5s ease-in-out infinite alternate; transform-origin: bottom; }
.px-3d-chart i:nth-child(odd) { animation-delay: -1.2s; }
@keyframes px-grow { from { transform: scaleY(.82); } to { transform: scaleY(1); } }
.px-3d-cols { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; transform: translateZ(8px); }
.px-3d-cols > div { display: flex; flex-direction: column; gap: .35rem; padding: .5rem; border-radius: .75rem; background: rgba(255,255,255,.035); }
.px-3d-cols small { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.px-3d-cols p { padding: .4rem .5rem; border-radius: .5rem; background: rgba(255,255,255,.08); font-size: .68rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-3d-cols > div:last-child p { background: rgba(52,199,89,.18); color: #b6f0c8; }
.px-3d-chip { position: absolute; display: flex; align-items: center; gap: .55rem; padding: .6rem .85rem; border-radius: .9rem; background: #fff; color: #17171c; box-shadow: -14px 22px 40px -12px rgba(0,0,0,.55); white-space: nowrap; }
.px-3d-chip svg { flex: none; width: 1.9rem; height: 1.9rem; padding: .4rem; border-radius: .6rem; background: #f4f0f8; color: #8e76a6; }
.px-3d-chip b { display: block; font-size: .78rem; }
.px-3d-chip small { display: block; font-size: .66rem; color: rgba(23,23,28,.55); }
.px-3d-c1 { left: -2.5rem; top: 2rem; transform: translateZ(70px); animation: px-chip 6s ease-in-out infinite; }
.px-3d-c2 { right: -2rem; top: -1.5rem; transform: translateZ(95px); animation: px-chip 6s ease-in-out -1.5s infinite; }
.px-3d-c3 { right: -3rem; bottom: 3rem; transform: translateZ(60px); animation: px-chip 6s ease-in-out -3s infinite; }
.px-3d-c4 { left: 4rem; bottom: -1.8rem; transform: translateZ(85px); animation: px-chip 6s ease-in-out -4.5s infinite; }
@keyframes px-chip { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
@media (max-width: 640px) { .px-3d-chip { padding: .45rem .6rem; } .px-3d-chip small { display: none; } .px-3d-c1 { left: -1rem; } .px-3d-c3 { right: -1rem; } .px-3d-c2 { right: -.5rem; } }
@media (prefers-reduced-motion: reduce) { .px-3d-board, .px-3d-chart i, .px-3d-chip { animation: none; } }

.px-sec-tight { padding: 4rem 0 0; }
@media (min-width: 1024px) { .px-sec-tight { padding: 5rem 0 0; } }
.px-jobs { display: grid; gap: .75rem; margin-top: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .px-jobs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .px-jobs { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.px-job { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.1rem; background: #f5f5f7; border: 1px solid var(--line); transition: transform .15s, box-shadow .15s; }
.px-job:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(23,23,28,.45); }
.px-job img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.px-job b { padding: .7rem .8rem .8rem; font-size: .85rem; line-height: 1.25; }

.px-auto-split { display: grid; gap: 1.5rem; margin-top: 2.5rem; align-items: start; }
@media (min-width: 1100px) { .px-auto-split { grid-template-columns: 22rem 1fr; } }
.px-auto-split .px-autos { margin-top: 0; }
@media (min-width: 1100px) { .px-auto-split .px-autos { grid-template-columns: 1fr 1fr; } }

/* ===== v42 (31.10.2026) — un seul site : « Boutique » pour revenir aux particuliers, étiquette « Entreprise » près du logo ===== */
.px-logo-tag { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: .18rem .4rem; line-height: 1; }
.px-shop { display: inline-flex; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 .9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 700; font-size: .85rem; white-space: nowrap; transition: background .15s; }
.px-shop:hover { background: rgba(255,255,255,.1); }
@media (max-width: 480px) { .px-logo-tag { display: none; } .px-shop { padding: 0 .7rem; font-size: .8rem; } }
@media (max-width: 380px) { .px-shop span { display: none; } .px-shop { width: 2.5rem; padding: 0; justify-content: center; } }
.px-nav a, .px-cta, .px-shop { white-space: nowrap; }
@media (max-width: 1499px) { .px-logo-tag { display: none; } }

/* v46d (03.11.2026, demande du propriétaire) : l'espace Entreprise prend toute la largeur de l'ordinateur (avant : 1216 px au maximum) */
@media (min-width: 1024px) {
  .px-wrap, .px-header-in, .px-studio > section { max-width: 160rem; padding-left: clamp(1.25rem, 3vw, 4rem); padding-right: clamp(1.25rem, 3vw, 4rem); }
}

/* v46d : en-tête Entreprise sur téléphone (il dépassait de 20 à 50 px) */
@media (max-width: 560px) {
  .px-header-in { gap: .5rem; padding: 0 .75rem; }
  .px-logo { min-width: 0; gap: .5rem; } .px-logo .wordmark { font-size: 1.02rem !important; }
  .px-actions { gap: .25rem; }
  .px-shop span { display: none; } .px-shop { width: 2.5rem; padding: 0; justify-content: center; }
}
@media (max-width: 370px) { .px-logo .wordmark { display: none; } }


/* ===== v52 (05.11.2026) : accueil entreprises, essai « automatisations d'abord » (pages/pro-accueil.php). Ancienne page : pages/pro-accueil-ancien.php ===== */
.pa { --ez: cubic-bezier(.16, 1, .3, 1); overflow-x: clip; }
.px-nav a.is-on { color: #fff; background: rgba(255,255,255,.1); }
.pa .px-sec { padding: 6rem 0; }
@media (min-width: 1024px) { .pa .px-sec { padding: 8.5rem 0; } }
.pa .px-h2 em, .pa-em { font-style: normal; background: linear-gradient(90deg, #c5b4d7, #8e76a6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pa [data-mag] { transition: transform .35s var(--ez), background .2s; }
.pa-end { margin-top: 3rem; }

/* lumière qui suit la souris */
.pa-spot { position: relative; isolation: isolate; }
.pa-spot::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; border-radius: inherit; transition: opacity .6s; background: radial-gradient(28rem circle at var(--sx, 50%) var(--sy, 50%), rgba(182,164,200,.16), transparent 70%); }
.pa-spot.lit::before { opacity: 1; }

/* 1. haut de page : circuit qui s'allume en boucle */
.pa-hero { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1000px) { .pa-hero { grid-template-columns: 1.05fr 1fr; gap: 4.5rem; } }
.pa-circuit { position: relative; display: grid; gap: .85rem; padding: 1.3rem; border-radius: 1.75rem; color: #fff; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 50px 90px -60px rgba(142,118,166,.9); }
.pa-circuit::before, .pa-circuit::after { content: ""; position: absolute; left: 2.95rem; top: 2.6rem; width: 2px; }
.pa-circuit::before { height: calc(100% - 8.4rem); background: rgba(255,255,255,.12); }
.pa-circuit::after { height: calc(100% - 8.4rem); background: linear-gradient(#c5b4d7, #8e76a6); transform-origin: top; animation: paLine 10s ease-in-out infinite; }
@keyframes paLine { 0%, 4% { transform: scaleY(0); opacity: 1; } 56%, 90% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.pa-nd { position: relative; z-index: 1; display: flex; align-items: center; gap: .9rem; padding: .8rem .9rem; border-radius: 1.1rem; background: rgba(255,255,255,.045); animation: paNd 10s ease infinite; animation-delay: calc(var(--i) * 1.5s); }
@keyframes paNd { 0%, 2% { background: rgba(255,255,255,.045); transform: none; } 7% { background: rgba(182,164,200,.3); transform: translateX(5px); } 14%, 62% { background: rgba(182,164,200,.16); transform: none; } 80%, 100% { background: rgba(255,255,255,.045); } }
.pa-nd b { font-size: .96rem; font-weight: 600; }
.pa-ic { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: .85rem; background: #0e0e12; color: #c5b4d7; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.pa-ok { display: flex; align-items: center; gap: .5rem; padding: .7rem .95rem; border-radius: 1rem; background: rgba(95,190,130,.14); color: #a9e2bf; font-size: .88rem; font-weight: 600; opacity: 0; animation: paOk 10s ease infinite; }
@keyframes paOk { 0%, 54% { opacity: 0; transform: translateY(8px); } 60%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 2. tâches qui se barrent */

/* 3. section vedette */
.pa-pin { padding: 5rem 0; }
.pa-pin-grid { display: grid; gap: 2.5rem; margin-top: 2rem; }
.pa-steps li { position: relative; padding-left: 1.5rem; }
.pa-steps li::before, .pa-steps li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; }
.pa-steps li::before { background: rgba(255,255,255,.13); }
.pa-steps li::after { background: #c5b4d7; transform: scaleY(0); transform-origin: top; transition: transform .8s var(--ez); }
.pa-steps li.on::after, .pa-steps li.past::after { transform: scaleY(1); }
.pa-steps button { display: block; width: 100%; padding: 1.1rem 0; text-align: left; color: rgba(255,255,255,.4); transition: color .6s; }
.pa-steps button:hover { color: rgba(255,255,255,.8); }
.pa-steps li.on button { color: #fff; }
.pa-steps b { display: block; font-size: clamp(1.1rem, 1.9vw, 1.5rem); font-weight: 700; letter-spacing: -.025em; }
.pa-steps small { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: .95rem; line-height: 1.45; color: rgba(255,255,255,.6); transition: max-height .8s var(--ez), opacity .7s, margin .8s var(--ez); }
.pa-steps li.on small { max-height: 5rem; margin-top: .35rem; opacity: 1; }
.pa-screen { position: relative; min-height: 26rem; overflow: hidden; border-radius: 1.5rem; background: #fff; color: var(--g); box-shadow: 0 60px 100px -55px rgba(142,118,166,.85); }
.pa-bar { display: flex; align-items: center; gap: .4rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); font-size: .78rem; color: rgba(23,23,28,.55); }
.pa-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dcdbe0; }
.pa-bar span { margin-left: .5rem; }
.pa-sc { position: absolute; inset: 3rem 0 0; display: grid; place-content: center stretch; gap: 1rem; padding: 1.75rem; opacity: 0; transform: translateY(22px) scale(.98); transition: opacity .7s, transform 1s var(--ez); pointer-events: none; }
.pa-sc.on { opacity: 1; transform: none; }
/* scène 1 : le téléphone s'approche de la plaque, au ralenti */
.pa-sc1 { position: absolute; }
.pa-plate { position: relative; justify-self: center; display: grid; place-items: center; gap: .4rem; width: 10.5rem; height: 12.5rem; border-radius: 1.1rem; background: #f5f5f7; color: #6c5487; font-size: .85rem; font-weight: 700; box-shadow: 0 26px 44px -30px rgba(0,0,0,.5); }
.pa-sc1.on .pa-plate::before, .pa-sc1.on .pa-plate::after { content: ""; position: absolute; left: 50%; top: 42%; width: 5rem; height: 5rem; margin: -2.5rem; border-radius: 50%; box-shadow: 0 0 0 2px var(--v); animation: paPing 2.6s ease-out 1.8s infinite; opacity: 0; }
.pa-sc1.on .pa-plate::after { animation-delay: 3.1s; }
@keyframes paPing { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.pa-phone { position: absolute; right: 8%; bottom: 7%; display: grid; align-content: center; justify-items: center; gap: .5rem; width: 7.2rem; height: 13rem; padding: .5rem; border-radius: 1.2rem; background: #17171c; color: #fff; text-align: center; box-shadow: 0 30px 50px -24px rgba(0,0,0,.6); transform: translate(70px, 60px) rotate(11deg); opacity: 0; transition: transform 2.2s var(--ez) .25s, opacity .8s .25s; }
.pa-sc1.on .pa-phone { transform: translate(0, 0) rotate(5deg); opacity: 1; }
.pa-phone i { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: linear-gradient(135deg, #c5b4d7, #8e76a6); opacity: 0; transform: scale(.5); transition: opacity .7s 2.3s, transform 1s var(--ez) 2.3s; }
.pa-phone b { font-size: .7rem; font-weight: 600; line-height: 1.25; opacity: 0; transition: opacity .7s 2.6s; }
.pa-sc1.on .pa-phone i { opacity: 1; transform: none; }
.pa-sc1.on .pa-phone b { opacity: 1; }
/* scène 2 : la fiche se remplit */
.pa-fiche { overflow: hidden; border-radius: 1rem; box-shadow: 0 0 0 1px var(--line); }
.pa-f-h { display: flex; align-items: center; gap: .8rem; padding: 1rem; background: #f5f5f7; }
.pa-f-h b { display: block; } .pa-f-h small { color: rgba(23,23,28,.6); font-size: .8rem; }
.pa-av { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--v); color: #fff; font-size: .85rem; font-weight: 700; }
.pa-f-r { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-top: 1px solid var(--line); font-size: .9rem; opacity: 0; transform: translateX(-14px); transition: opacity .6s, transform .9s var(--ez); }
.pa-f-r > span { color: rgba(23,23,28,.6); } .pa-f-r > b { font-weight: 600; text-align: right; }
.pa-sc.on .pa-f-r { opacity: 1; transform: none; transition-delay: calc(var(--i) * .5s + .45s); }
.pa-pill { padding: .1rem .6rem; border-radius: 99px; background: rgba(142,118,166,.16); color: #6c5487; font-size: .8rem; }
/* scène 3 : les 2 h passent, le message s'écrit */
.pa-sc3 { justify-items: center; }
.pa-clock { position: relative; width: 4.2rem; height: 4.2rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--v); }
.pa-clock i { position: absolute; left: 50%; bottom: 50%; width: 2px; margin-left: -1px; background: #17171c; transform-origin: bottom; }
.pa-clock i:first-child { height: 1.65rem; }
.pa-clock i:last-child { height: 1.1rem; }
.pa-sc3.on .pa-clock i:first-child { animation: paHand 1s linear 2 forwards; }
.pa-sc3.on .pa-clock i:last-child { animation: paHand2 2s ease-out forwards; }
@keyframes paHand { to { transform: rotate(360deg); } }
@keyframes paHand2 { to { transform: rotate(60deg); } }
.pa-msg { max-width: 22rem; padding: 1rem 1.1rem; border-radius: 1.1rem; background: #f5f5f7; font-size: .95rem; line-height: 1.45; opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .7s, transform 1s var(--ez); }
.pa-sc3.on .pa-msg { opacity: 1; transform: none; transition-delay: 1.9s; }
.pa-msg small { display: block; margin-bottom: .3rem; font-size: .76rem; color: rgba(23,23,28,.6); }
/* scène 4 : les étoiles arrivent une à une */
.pa-sc4 { justify-items: center; text-align: center; }
.pa-sc4 p { font-size: 1.4rem; font-weight: 700; letter-spacing: -.03em; opacity: 0; transition: opacity .8s; }
.pa-sc4.on p { opacity: 1; transition-delay: 2.1s; }
.pa-stars i { display: inline-block; font-size: 2.6rem; font-style: normal; color: #e0a92e; opacity: 0; transform: scale(.3) rotate(-30deg); transition: opacity .4s, transform .8s cubic-bezier(.3, 1.6, .5, 1); }
.pa-sc4.on .pa-stars i { opacity: 1; transform: none; transition-delay: calc(var(--i) * .32s + .3s); }
@media (min-width: 1000px) {
  .pa-pin { height: 420vh; padding: 0; }
  .pa-pin-in { position: sticky; top: 4.25rem; display: flex; align-items: center; height: calc(100vh - 4.25rem); }
  .pa-pin .px-h2 { font-size: clamp(2rem, 3.2vw, 2.7rem); }
  .pa-sub { margin-top: .5rem; }
  .pa-pin-grid { grid-template-columns: 1fr 1.1fr; gap: 4.5rem; align-items: center; margin-top: 1.6rem; }
}
@media (max-width: 999px) {
  .pa-steps { display: none; }
  .pa-screen { display: grid; gap: 1rem; min-height: 0; overflow: visible; background: transparent; box-shadow: none; }
  .pa-screen > .pa-bar { display: none; }
  .pa-sc, .pa-sc1 { position: relative; inset: auto; min-height: 19rem; padding: 3.2rem 1.25rem 1.25rem; border-radius: 1.25rem; background: #fff; opacity: 1; transform: none; overflow: hidden; pointer-events: auto; }
  .pa-plate { justify-self: start; margin-left: .25rem; width: 9.5rem; }
  .pa-phone { right: 5%; }
  .pa-sc::before { content: attr(data-t); position: absolute; left: 1.25rem; right: 1.25rem; top: 1.1rem; font-size: .92rem; font-weight: 700; }
}

/* 4. Quand / Alors */
.pa-autos { display: grid; gap: .9rem; margin-top: 2.5rem; }
@media (min-width: 760px) { .pa-autos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pa-auto { display: grid; grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1fr); align-items: center; width: 100%; padding: 1.2rem; border-radius: 1.25rem; background: #f5f5f7; text-align: left; font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--g); transition: transform .3s ease; }
.pa-auto:hover { transform: scale(1.012); }
.pa-auto small { display: block; margin-bottom: .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v); }
.pa-link { position: relative; display: block; height: 2px; margin: 0 .45rem; background: rgba(23,23,28,.13); }
.pa-link i { position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--v); opacity: 0; }
.pa-auto.run .pa-link i { animation: paDot 1.2s ease-in-out forwards; }
@keyframes paDot { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.pa-b { padding: .3rem .5rem; margin: -.3rem -.5rem; border-radius: .7rem; }
.pa-auto.run .pa-b { animation: paThen 1.9s ease .95s; }
@keyframes paThen { 0% { background: transparent; } 25% { background: rgba(142,118,166,.24); } 100% { background: transparent; } }

/* 5. CRM en démonstration */
.pa-two { display: grid; gap: 2.75rem; align-items: center; }
@media (min-width: 1000px) { .pa-two { grid-template-columns: 1fr 1.05fr; gap: 5rem; } .pa-rev > :first-child { order: 2; } }
.pa-app, .pa-chatbox { overflow: hidden; border-radius: 1.5rem; background: #fff; color: var(--g); box-shadow: 0 0 0 1px var(--line), 0 50px 90px -60px rgba(23,23,28,.55); }
.pa-tabs { display: flex; gap: .3rem; padding: .6rem .7rem 0; }
.pa-tabs button { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .85rem; border-radius: 99px; font-size: .85rem; font-weight: 600; color: rgba(23,23,28,.6); transition: background .3s, color .3s; }
.pa-tabs button:hover { color: #111; }
.pa-tabs button.on { background: #111; color: #fff; }
.pa-pane { display: none; position: relative; min-height: 19rem; padding: 1rem; }
.pa-pane.on { display: block; animation: paIn .7s var(--ez); }
@keyframes paIn { from { opacity: 0; transform: translateY(10px); } }
.pa-kan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.pa-kan > div { display: flex; flex-direction: column; gap: .45rem; min-height: 12rem; padding: .6rem; border-radius: .9rem; background: #f5f5f7; }
.pa-kan small { font-size: .7rem; font-weight: 700; color: rgba(23,23,28,.55); }
.pa-kan p { padding: .6rem .55rem; border-radius: .65rem; background: #fff; font-size: .8rem; font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.pa-mv { position: relative; z-index: 2; background: #17171c !important; color: #fff; transition: transform 1.6s var(--ez); }
.pa-toast { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: .9rem; background: rgba(142,118,166,.15); color: #5d4777; font-size: .85rem; font-weight: 600; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .8s var(--ez); }
.pa-toast.sh { opacity: 1; transform: none; }
.pa-ag li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .85rem .3rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.pa-ag b { font-weight: 700; } .pa-ag em { font-style: normal; font-size: .74rem; font-weight: 600; color: #6c5487; }
.pa-new { opacity: 0; transform: translateX(-16px); background: rgba(142,118,166,.08); transition: opacity .8s, transform 1.1s var(--ez); }
.pa-new.sh { opacity: 1; transform: none; }
.pa-doc > p { padding: .4rem .2rem .9rem; }
.pa-tl li { position: relative; padding: .7rem 0 .7rem 2rem; font-size: .92rem; font-weight: 600; opacity: .28; transition: opacity .8s; }
.pa-tl li::before { content: ""; position: absolute; left: .35rem; top: .95rem; width: .75rem; height: .75rem; border-radius: 50%; background: #d8d6dc; transition: background .6s, box-shadow .6s; }
.pa-tl li:not(:last-child)::after { content: ""; position: absolute; left: .68rem; top: 1.7rem; bottom: -.95rem; width: 2px; background: #e4e3e7; }
.pa-tl li.sh { opacity: 1; }
.pa-tl li.sh::before { background: var(--v); box-shadow: 0 0 0 5px rgba(142,118,166,.2); }

/* 6. IA */
.pa-ia-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.pa-ia-tabs button { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .95rem; border-radius: 99px; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: background .3s, color .3s; }
.pa-ia-tabs button:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.pa-ia-tabs button.on { background: #fff; color: #111; }
.pa-chat { display: flex; flex-direction: column; gap: .6rem; justify-content: flex-end; min-height: 20rem; padding: 1.1rem; }
.pa-bub { max-width: 86%; padding: .75rem 1rem; border-radius: 1.1rem; font-size: .94rem; line-height: 1.42; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .7s var(--ez); }
.pa-bub.sh, .pa-bub:has(.pa-typing) { opacity: 1; transform: none; }
.pa-bub.me { align-self: flex-end; background: #17171c; color: #fff; border-bottom-right-radius: .3rem; }
.pa-bub.ai { align-self: flex-start; background: #f5f5f7; border-bottom-left-radius: .3rem; }
.pa-typing { display: inline-flex; gap: 4px; }
.pa-typing i { width: 6px; height: 6px; border-radius: 50%; background: #8f8f96; animation: paTy 1s infinite; }
.pa-typing i:nth-child(2) { animation-delay: .15s; } .pa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes paTy { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }

/* 7. méthode */
.pa-meth { position: relative; display: grid; gap: 1.6rem; margin-top: 3.25rem; }
@media (min-width: 800px) { .pa-meth { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } }
.pa-meth-l { display: none; position: absolute; left: 1.2rem; right: 25%; top: 1.2rem; height: 2px; background: rgba(23,23,28,.12); }
.pa-meth-l i { display: block; height: 100%; background: var(--v); transform: scaleX(0); transform-origin: left; }
@media (min-width: 800px) { .pa-meth-l { display: block; } }
.pa-mstep { position: relative; }
.pa-mstep > span { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; color: rgba(23,23,28,.5); font-weight: 700; box-shadow: inset 0 0 0 2px rgba(23,23,28,.14); transition: background .6s, color .6s, box-shadow .6s, transform .8s var(--ez); }
.pa-mstep.on > span { background: var(--g); color: #fff; box-shadow: 0 0 0 6px rgba(142,118,166,.2); transform: scale(1.06); }
.pa-mstep b { display: block; margin-top: .9rem; font-size: 1.1rem; font-weight: 700; }
.pa-mstep p { margin-top: .3rem; font-size: .93rem; line-height: 1.45; color: rgba(23,23,28,.62); }

/* 8. produits */
.pa .h45-tab { margin-top: 2.5rem; }
.pa .h45-vs-card { transition: background-color .3s; }
.pa .h45-vs-card:hover { background: #faf9f7; }
.pa-jobs-k { margin-top: 2.5rem; font-weight: 700; }
.pa .pro-met { margin-top: .9rem; }
.pa-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 2.25rem; }
@media (min-width: 860px) { .pa-parts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.pa-part { position: relative; overflow: hidden; padding: 1.2rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: transform .3s ease; }
.pa-part:hover { transform: scale(1.02); }
.pa-part b { display: block; margin-top: .8rem; font-weight: 700; }
.pa-part p { margin-top: .25rem; font-size: .88rem; line-height: 1.4; color: rgba(23,23,28,.62); }
/* « couche par couche » : une barre se remplit au survol, comme une impression */
.pa-print { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: repeating-linear-gradient(90deg, var(--v) 0 6px, transparent 6px 9px); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ez); }
.pa-part:hover .pa-print, .pa-part.in .pa-print { transform: scaleX(1); }
.pa-3d-btn { margin-top: 1.75rem; }
@media (max-width: 480px) { .pa-auto { grid-template-columns: minmax(0, 1fr) 1.6rem minmax(0, 1fr); font-size: .88rem; padding: 1rem; } }


/* ===== v52b : demandes du propriétaire : quasi tout blanc avec du gris (façon Apple), même écriture que la boutique, animations plus rapides et plus grandes, lumière très discrète ===== */
/* en-tête blanc sur tout l'espace entreprises */
body.pro .px-header { background: rgba(255,255,255,.86); color: var(--g); box-shadow: 0 1px 0 rgba(23,23,28,.08); }
body.pro .px-logo, body.pro .px-logo .wordmark { color: var(--g); }
body.pro .px-nav a { color: rgba(23,23,28,.66); font-weight: 500; }
body.pro .px-nav a:hover, body.pro .px-nav a.is-on { color: #111; background: rgba(23,23,28,.06); }
body.pro .px-icon { color: rgba(23,23,28,.75); }
body.pro .px-icon:hover { background: rgba(23,23,28,.06); color: #111; }
body.pro .px-shop { color: #111 !important; border-color: rgba(23,23,28,.2) !important; background: transparent !important; }
body.pro .px-cta { background: #111; box-shadow: none; font-weight: 600; }
body.pro .px-cta:hover { background: #000; }
.pa { --bs-linen: #f5f5f7; }
.pa .px-h1 { font-size: clamp(2.5rem, 4.8vw, 4.4rem); line-height: 1.02; font-weight: 600; letter-spacing: -.045em; }
.pa .px-h2 { font-weight: 600; letter-spacing: -.04em; }
.pa .px-studio .studio-title { font-weight: 600; letter-spacing: -.04em; }
.pa .px-btn { font-weight: 600; }
.pa .px-btn-v { background: #111; box-shadow: 0 14px 34px -14px rgba(139,114,168,.75); }
.pa .px-btn-v:hover { background: #000; }
.pa .px-btn-ghost { color: #111; border-color: rgba(23,23,28,.25); }
.pa .px-btn-ghost:hover { background: rgba(23,23,28,.05); }
.pa .px-list li, .pa .px-link { font-weight: 500; }
.pa .px-soft, .pa-pin { background: #f5f5f7; color: var(--g); }
/* haut de page blanc */
.pa .px-hero { background: #fff; color: var(--g); padding-top: 4.5rem; padding-bottom: 4rem; }
.pa .px-eyebrow { border-color: rgba(23,23,28,.12); background: #f5f5f7; color: rgba(23,23,28,.7); }
.pa .px-lead { color: rgba(23,23,28,.66); }
.pa .px-checks { color: rgba(23,23,28,.62); }
.pa .px-checks svg { color: var(--v); }
.pa .px-pillars { margin-top: 0; }
.pa-circuit { color: var(--g); background: #f5f5f7; box-shadow: none; padding: 1.5rem; }
.pa-circuit::before { background: rgba(23,23,28,.12); }
.pa-circuit::after { animation-duration: 6s; }
.pa-nd { padding: 1rem; background: #fff; animation: paNd2 6s ease infinite; animation-delay: calc(var(--i) * .8s); }
@keyframes paNd2 { 0%, 2% { box-shadow: 0 0 0 0 transparent; transform: none; } 6% { box-shadow: 0 0 0 2px var(--v); transform: translateX(5px); } 14%, 70% { box-shadow: 0 0 0 2px rgba(142,118,166,.45); transform: none; } 88%, 100% { box-shadow: 0 0 0 0 transparent; } }
.pa-nd b { font-size: 1.05rem; }
.pa-ic { background: #f5f5f7; color: #6c5487; box-shadow: none; }
.pa-ok { background: rgba(52,160,95,.12); color: #1d7a45; animation-duration: 6s; font-size: .95rem; }
/* lumière : à peine visible */
.pa-spot::before { background: radial-gradient(16rem circle at var(--sx, 50%) var(--sy, 50%), rgba(142,118,166,.05), transparent 70%); }
/* apparitions plus rapides */
html.rv .pa [data-rv] { transition-duration: .55s, .6s, .6s, .5s; transition-delay: calc(var(--d, 0ms) * .45); }
html.rv .pa [data-rv="up"]:not(.in) { transform: translateY(22px); filter: none; }
html.rv .pa [data-rv="words"] .w > * { transition: transform .6s var(--ez) calc(var(--i, 0) * 28ms); }
/* grande section : moins longue, plus remplie, éléments plus grands */
.pa-steps li::before { background: rgba(23,23,28,.12); }
.pa-steps li::after { background: var(--v); transition-duration: .35s; }
.pa-steps button { color: rgba(23,23,28,.38); transition-duration: .3s; }
.pa-steps button:hover { color: rgba(23,23,28,.75); }
.pa-steps li.on button { color: #111; }
.pa-steps small { color: rgba(23,23,28,.62); transition: max-height .35s var(--ez), opacity .3s, margin .35s var(--ez); }
.pa-screen { box-shadow: 0 40px 80px -50px rgba(23,23,28,.4), 0 0 0 1px rgba(23,23,28,.06); }
.pa-sc { bottom: 11.4rem; transition: opacity .3s, transform .4s var(--ez); padding: 1.25rem 1.75rem; }
.pa-plate { width: 12.5rem; height: 14rem; font-size: 1rem; }
.pa-sc1.on .pa-plate::before, .pa-sc1.on .pa-plate::after { animation-duration: 1.6s; animation-delay: .75s; }
.pa-sc1.on .pa-plate::after { animation-delay: 1.5s; }
.pa-phone { width: 8.4rem; height: 14.5rem; right: 13%; bottom: 3%; transition: transform .9s var(--ez) .05s, opacity .35s .05s; }
.pa-phone i { width: 2.8rem; height: 2.8rem; transition: opacity .3s .8s, transform .45s var(--ez) .8s; }
.pa-phone b { font-size: .82rem; transition: opacity .3s .95s; }
.pa-fiche { font-size: 1.05rem; }
.pa-f-h { padding: 1.15rem; } .pa-av { width: 3.1rem; height: 3.1rem; }
.pa-f-r { padding: .95rem 1.15rem; font-size: 1rem; transition: opacity .25s, transform .35s var(--ez); }
.pa-sc.on .pa-f-r { transition-delay: calc(var(--i) * .16s + .1s); }
.pa-clock { width: 5.6rem; height: 5.6rem; }
.pa-clock i:first-child { height: 2.2rem; } .pa-clock i:last-child { height: 1.5rem; }
.pa-sc3.on .pa-clock i:first-child { animation-duration: .4s; }
.pa-sc3.on .pa-clock i:last-child { animation-duration: .8s; }
.pa-msg { max-width: 30rem; padding: 1.2rem 1.35rem; font-size: 1.12rem; transition: opacity .3s, transform .4s var(--ez); }
.pa-sc3.on .pa-msg { transition-delay: .7s; }
.pa-stars i { font-size: 4.2rem; transition: opacity .2s, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.pa-sc4.on .pa-stars i { transition-delay: calc(var(--i) * .1s + .05s); }
.pa-sc4 p { font-size: 1.7rem; font-weight: 600; transition: opacity .3s; }
.pa-sc4.on p { transition-delay: .65s; }
.pa-log { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.1rem; display: grid; gap: .2rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.pa-log li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .32rem .4rem; border-radius: .55rem; font-size: .92rem; font-weight: 500; opacity: .25; transition: opacity .3s, background .3s; }
.pa-log time { color: rgba(23,23,28,.55); }
.pa-log svg { color: #1d7a45; opacity: 0; transition: opacity .3s; }
.pa-log li.on { opacity: 1; }
.pa-log li.on svg { opacity: 1; }
@media (min-width: 1000px) {
  .pa-pin { height: 250vh; }
  .pa-pin-grid { grid-template-columns: .8fr 1.3fr; gap: 3.5rem; }
  .pa-screen { min-height: min(68vh, 39rem); }
}
@media (max-width: 999px) {
  .pa-log { display: none; }
  .pa-sc, .pa-sc1 { bottom: auto; padding: 3.2rem 1.25rem 1.25rem; box-shadow: 0 0 0 1px rgba(23,23,28,.06); }
  .pa-phone { right: 5%; bottom: 4%; width: 7rem; height: 12rem; }
  .pa-plate { width: 9.5rem; height: 12rem; }
  .pa-pin { padding: 4rem 0; }
}
/* Quand / Alors */
.pa-auto { padding: 1.45rem; font-size: 1.04rem; }
.pa-auto.run .pa-link i { animation-duration: .55s; }
.pa-auto.run .pa-b { animation-duration: 1.1s; animation-delay: .4s; }
/* CRM et IA : plus grands, plus rapides */
@media (min-width: 1000px) { .pa-two { grid-template-columns: .8fr 1.25fr; gap: 4rem; } }
.pa-tabs { padding: .8rem .9rem 0; } .pa-tabs button { padding: .65rem 1.05rem; font-size: .95rem; }
.pa-pane { min-height: 24rem; padding: 1.2rem; }
.pa-pane.on { animation-duration: .35s; }
.pa-kan > div { min-height: 16rem; padding: .8rem; gap: .6rem; }
.pa-kan small { font-size: .78rem; }
.pa-kan p { padding: .85rem .7rem; font-size: .95rem; }
.pa-mv { transition-duration: .7s; }
.pa-toast { font-size: .95rem; padding: .85rem 1rem; transition: opacity .25s, transform .35s var(--ez); }
.pa-ag li { padding: 1.05rem .5rem; font-size: 1.05rem; }
.pa-ag em { font-size: .84rem; }
.pa-new { transition: opacity .3s, transform .4s var(--ez); }
.pa-doc > p { font-size: 1.1rem; }
.pa-tl li { padding: .95rem 0 .95rem 2.2rem; font-size: 1.05rem; transition: opacity .25s; }
.pa-tl li::before { top: 1.25rem; transition: background .25s, box-shadow .25s; }
.pa-tl li:not(:last-child)::after { top: 2rem; bottom: -1.25rem; }
.pa-ia-tabs button { color: rgba(23,23,28,.72); box-shadow: inset 0 0 0 1px rgba(23,23,28,.16); }
.pa-ia-tabs button:hover { color: #111; box-shadow: inset 0 0 0 1px rgba(23,23,28,.45); }
.pa-ia-tabs button.on { background: #111; color: #fff; box-shadow: none; }
.pa-chat { min-height: 25rem; padding: 1.3rem; gap: .75rem; }
.pa-bub { font-size: 1.05rem; padding: .9rem 1.15rem; transition: opacity .2s, transform .3s var(--ez); }
/* méthode, produits, fin */
.pa-mstep > span { width: 3.1rem; height: 3.1rem; font-size: 1.05rem; transition-duration: .3s; }
.pa-meth-l { left: 1.55rem; top: 1.55rem; }
.pa-mstep b { font-weight: 600; font-size: 1.2rem; }
.pa-print { transition-duration: .7s; }
.pa .px-final { background: #f5f5f7; color: var(--g); }
.pa .px-final .px-p { color: rgba(23,23,28,.65); }
html body.pro #nav.px-header, html body.pro .px-header { background: rgba(255,255,255,.9) !important; color: var(--g); border-bottom: 1px solid rgba(23,23,28,.08); }
body.pro #nav .px-logo .wordmark, body.pro #nav .px-logo { color: var(--g); }
html body.pro.clair #nav.px-header { background: rgba(255,255,255,.92) !important; border-bottom: 1px solid rgba(23,23,28,.08); }
html body.pro.clair #nav.px-header .wordmark, html body.pro.clair #nav.px-header .wordmark span:not(.amp), html body.pro.clair #nav.px-header .px-logo { color: #111 !important; }
html body.pro.clair #nav.px-header .amp { color: var(--v) !important; }
html body.pro.clair #nav.px-header .px-shop svg { color: #111; }

/* ===== v52c : 2e section en 4 grandes cartes animées, façon Apple ===== */
.pa-bento { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 860px) { .pa-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; } .pa-bc { grid-column: span 5; } .pa-bc-w { grid-column: span 7; } }
.pa-bc { display: flex; flex-direction: column; min-height: 22rem; padding: 2rem; overflow: hidden; border-radius: 1.75rem; background: #f5f5f7; cursor: default; transition: transform .3s ease; }
.pa-bc:hover { transform: scale(1.01); }
.pa-bc-k { font-size: .85rem; font-weight: 600; color: var(--v); }
.pa-bc h3 { margin-top: .3rem; font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.1; font-weight: 600; letter-spacing: -.035em; }
.pa-bc-p { margin-top: .5rem; max-width: 26rem; font-size: 1rem; line-height: 1.45; color: rgba(23,23,28,.62); }
.pa-v { display: flex; flex: 1; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
.pa-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .95rem; border-radius: 99px; background: #fff; font-size: .92rem; font-weight: 600; box-shadow: 0 10px 24px -16px rgba(23,23,28,.45); }
.pa-chip svg { color: #1d7a45; flex: none; }
/* avis */
.pa-v-star { flex-direction: column; }
.pa-bs i { display: inline-block; font-size: clamp(3rem, 6vw, 4.8rem); line-height: 1; font-style: normal; color: #e0a92e; }
.run .pa-bs i { animation: paB .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * .11s); }
@keyframes paB { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }
.run .pa-v-star .pa-chip { animation: paC .4s var(--ez) .65s both; }
@keyframes paC { from { opacity: 0; transform: translateY(14px) scale(.95); } }
/* devis */
.pa-tile { display: grid; place-items: center; flex: none; width: 5.2rem; height: 5.2rem; border-radius: 1.3rem; background: #fff; color: #6c5487; box-shadow: 0 16px 30px -22px rgba(23,23,28,.5); }
.pa-tile-ok { background: #111; color: #fff; }
.pa-road { position: relative; flex: 1; max-width: 9rem; height: 2px; background: rgba(23,23,28,.15); }
.pa-road i { position: absolute; left: 100%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--v); opacity: 0; }
.run .pa-road i { animation: paR .7s ease-in-out .1s both; }
@keyframes paR { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.run .pa-tile-ok { animation: paOkT .45s cubic-bezier(.3, 1.6, .5, 1) .7s both; }
@keyframes paOkT { from { background: #fff; color: transparent; transform: scale(.75); } }
/* factures */
.pa-inv { display: flex; align-items: center; gap: .7rem; width: 100%; max-width: 24rem; padding: 1.15rem 1.25rem; border-radius: 1.2rem; background: #fff; font-size: 1.05rem; box-shadow: 0 16px 30px -22px rgba(23,23,28,.5); }
.pa-inv > svg { color: #6c5487; flex: none; }
.pa-inv b { font-weight: 600; }
.pa-sts { display: grid; margin-left: auto; justify-items: end; }
.pa-sts em { grid-area: 1 / 1; padding: .3rem .75rem; border-radius: 99px; font-size: .85rem; font-style: normal; font-weight: 600; white-space: nowrap; opacity: 0; }
.pa-sts .s1 { background: #f0f0f2; color: rgba(23,23,28,.6); }
.pa-sts .s2 { background: rgba(142,118,166,.16); color: #5d4777; }
.pa-sts .s3 { background: rgba(52,160,95,.14); color: #1d7a45; opacity: 1; }
.run .s1 { animation: paS1 2.1s both; } .run .s2 { animation: paS2 2.1s both; } .run .s3 { animation: paS3 2.1s both; }
@keyframes paS1 { 0%, 30% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes paS2 { 0%, 30% { opacity: 0; } 38%, 66% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes paS3 { 0%, 66% { opacity: 0; } 74%, 100% { opacity: 1; } }
/* stock */
.pa-v-stock { flex-direction: column; }
.pa-gauge { display: block; width: 100%; max-width: 30rem; height: 1.4rem; overflow: hidden; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px rgba(23,23,28,.08); }
.pa-gauge i { display: block; width: 20%; height: 100%; border-radius: 99px; background: var(--v); }
.run .pa-gauge i { animation: paG 1.1s ease-in-out both; }
@keyframes paG { from { width: 100%; background: #111; } 70% { background: #111; } }
.run .pa-v-stock .pa-chip { animation: paC .4s var(--ez) 1s both; }
@media (max-width: 859px) { .pa-bc { min-height: 19rem; padding: 1.5rem; } .pa-tile { width: 4.4rem; height: 4.4rem; } }

/* ===== v52d : base blanc et gris, touches de violet foncé et de noir ; petits défauts du téléphone ===== */
.pa { --v: #5f4480; --vl: #7d5fa3; }
html body.pro.clair #nav.px-header .amp { color: #5f4480 !important; }
body.pro .rv-bar { background: linear-gradient(90deg, #5f4480, #2f1f45); }
.pa .px-h1 em, .pa .px-h2 em, .pa-em { background: linear-gradient(90deg, #7a5aa0, #4a2f6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pa .px-eyebrow span { background: #5f4480; box-shadow: 0 0 0 4px rgba(95,68,128,.18); }
.pa .px-btn-v { box-shadow: 0 14px 32px -14px rgba(74,47,107,.8); }
.pa .h45-yes small { color: #5f4480; }
/* touches de noir : petites icônes et carte finale */
.pa .px-ic, .pa-ic { background: #111; color: #fff; box-shadow: none; }
.pa .px-final { background: radial-gradient(38rem 20rem at 88% 0, rgba(95,68,128,.55), transparent 70%), #111; color: #fff; }
.pa .px-final .px-p { color: rgba(255,255,255,.7); }
.pa .px-final .px-btn-v { background: #fff; color: #111; box-shadow: none; }
.pa .px-final .px-btn-v:hover { background: #f0f0f2; }
.pa .px-final .px-btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.pa .px-final .px-btn-ghost:hover { background: rgba(255,255,255,.1); }
.pa-gauge i { background: #5f4480; }
/* téléphone */
@media (max-width: 639px) {
  .pa .px-sec { padding: 3.75rem 0; }
  .pa .px-studio { display: none; }
  .pa .px-hero { padding-top: 3rem; padding-bottom: 2.5rem; }
  .pa-pin { padding: 3.25rem 0; }
  .pa-bento { margin-top: 1.5rem; }
  .pa-bc { min-height: 16.5rem; }
  .pa-v { margin-top: 1rem; }
  .pa-sc, .pa-sc1 { min-height: 17rem; }
  .pa-plate { width: 8.5rem; height: 10.5rem; margin-left: 0; }
  .pa-phone { right: 7%; bottom: 7%; width: 6rem; height: 10.2rem; }
  .pa-phone i { width: 2.1rem; height: 2.1rem; }
  .pa-phone b { font-size: .68rem; }
  /* CRM : 3 lignes au lieu de 3 colonnes serrées ; la carte descend de l'une à l'autre */
  .pa-kan { grid-template-columns: minmax(0, 1fr); }
  .pa-kan > div { flex-flow: row wrap; align-items: center; align-content: flex-start; min-height: 5.3rem; }
  .pa-kan small { flex: 0 0 100%; }
  .pa-kan p { padding: .55rem .7rem; font-size: .9rem; }
  .pa-pane { min-height: 23rem; }
  .pa-chat { min-height: 17rem; justify-content: flex-start; }
}
@media (max-width: 639px) { .pa-pane[data-pane="0"] { min-height: 0; padding-bottom: 4.6rem; } }

/* ===== v52e : fond gris Apple (le blanc pur agresse), rectangles blancs, interactions en violet et noir ===== */
html:has(body.pro), html body.pro.clair { background: #f5f5f7; }
html body.pro.clair #nav.px-header { background: rgba(245,245,247,.88) !important; }
.pa, .pa .px-hero, .pa .px-soft, .pa-pin { background: transparent; }
/* rectangles blancs */
.pa-circuit, .pa-bc, .pa-auto, .pa-part, .px-pillar, .pa .h45-tab, .pa-app, .pa-chatbox, .pa-screen { background: #fff; box-shadow: 0 1px 2px rgba(23,23,28,.04), 0 18px 40px -32px rgba(23,23,28,.35); border-color: transparent; }
.pa .px-eyebrow, .pa .pro-met-a { background: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(23,23,28,.06); }
.pa .px-btn-ghost { background: #fff; border-color: rgba(23,23,28,.12); }
.pa .px-btn-ghost:hover { background: #fff; border-color: #5f4480; color: #5f4480; }
.pa .px-final .px-btn-ghost { background: transparent; }
/* éléments gris à l'intérieur des rectangles blancs */
.pa-nd { background: #f5f5f7; }
.pa-circuit::before { background: rgba(23,23,28,.14); }
.pa-inv { background: #f5f5f7; box-shadow: none; }
.pa-tile { background: #f5f5f7; box-shadow: none; color: #5f4480; }
.pa-tile-ok { background: #111; color: #fff; }
.pa-gauge { background: #ececf0; box-shadow: none; }
/* interactions : violet et noir */
.pa-chip { background: #111; color: #fff; box-shadow: none; }
.pa-chip svg { color: #c9b6e0; }
.pa-ok { background: rgba(95,68,128,.12); color: #4a2f6b; }
.pa-sts .s2 { background: rgba(95,68,128,.14); color: #4a2f6b; }
.pa-sts .s3 { background: #111; color: #fff; }
.pa-pill, .pa-toast { background: rgba(95,68,128,.12); color: #4a2f6b; }
.pa-new { background: rgba(95,68,128,.08); }
.pa-ag em { color: #4a2f6b; }
.pa-log svg { color: #5f4480; }
.pa-tl li.sh::before { box-shadow: 0 0 0 5px rgba(95,68,128,.16); }
.pa-av { background: #5f4480; }
.pa-auto small { color: #5f4480; }
.pa-auto.run .pa-b { animation-name: paThen2; }
@keyframes paThen2 { 0% { background: transparent; } 25% { background: rgba(95,68,128,.18); } 100% { background: transparent; } }
.pa .h45-yes, .pa .h45-th .h45-th-yes { background: rgba(95,68,128,.07); }
.pa .h45-vs-card:hover { background: #fff; }
.pa .pro-met-a:hover { box-shadow: 0 0 0 1px #5f4480; color: #5f4480; transform: none; }
.pa .pro-met-a:hover svg { opacity: 1; }
@media (hover: hover) {
  .pa-bc:hover, .pa-auto:hover, .pa-part:hover, .px-pillar:hover { box-shadow: 0 0 0 1.5px #5f4480, 0 18px 40px -30px rgba(74,47,107,.5); }
  .px-pillar:hover { transform: scale(1.01); }
  .pa-tabs button:hover:not(.on), .pa-ia-tabs button:hover:not(.on) { color: #5f4480; }
}
.pa-ia-tabs button { background: #fff; box-shadow: 0 1px 2px rgba(23,23,28,.06); }
.pa-ia-tabs button:hover { box-shadow: 0 0 0 1px #5f4480; }
.pa-ia-tabs button.on { background: #111; color: #fff; }
.pa-mstep > span { background: #fff; box-shadow: none; }
.pa-mstep.on > span { background: #111; box-shadow: 0 0 0 6px rgba(95,68,128,.16); }
@media (max-width: 999px) { .pa-screen { background: transparent; box-shadow: none; } .pa-sc, .pa-sc1 { box-shadow: 0 1px 2px rgba(23,23,28,.04), 0 18px 40px -32px rgba(23,23,28,.35); } }

html body.pro.clair main { background: #f5f5f7; }

/* v55 : toute la largeur sur tous les écrans, mêmes marges que la boutique */
@media (min-width: 1024px) {
  body.pro .px-wrap, body.pro .px-header-in, body.pro .px-studio > section { max-width: 200rem; padding-left: clamp(1.5rem, 3vw, 5rem) !important; padding-right: clamp(1.5rem, 3vw, 5rem) !important; }
}