/* SIPTRUNK.MA Connect — page d'accueil « Votre téléphonie connectée au Cloud ».
   Tout est préfixé .pm : aucune interférence avec style.css du thème. */

/* ===================================================================
   SIPTRUNK.MA — Landing premium
   Tout est préfixé .pm pour ne jamais interférer avec le thème.
=================================================================== */

.pm{
  /* Palette */
  --pm-ink:      #050A1E;
  --pm-navy:     #0B1740;
  --pm-navy-2:   #132a6b;
  --pm-orange:   #FF6B00;
  --pm-orange-2: #FF9142;
  --pm-cyan:     #38CBF0;
  --pm-blue:     #3C7BFF;
  --pm-paper:    #F4F7FE;
  --pm-text:     #17204A;
  --pm-mute:     #5D6892;
  --pm-line:     #DDE4F5;
  --pm-line-d:   rgba(255,255,255,.16);

  /* Type */
  --pm-display: "Archivo", "Space Grotesk", "Inter", system-ui, sans-serif;
  --pm-body:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --pm-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --pm-max: 1220px;
  --pm-r:   18px;

  font-family: var(--pm-body);
  color: var(--pm-text);
  overflow-x: clip;
}

.pm *,
.pm *::before,
.pm *::after{ box-sizing: border-box; }

.pm-wrap{ max-width: var(--pm-max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }

/* ---------------------------------------------------- Typographie */
.pm h1,.pm h2,.pm h3{ font-family: var(--pm-display); margin: 0; letter-spacing: -.02em; line-height: 1.06; }

.pm-h1{
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
}
.pm-h1 em{ font-style: normal; color: var(--pm-orange); display: block; }

.pm-h2{
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  font-weight: 800;
  color: var(--pm-text);
  text-transform: uppercase;
}
.pm-h2-light{ color: #fff; }

.pm-kicker{
  font-family: var(--pm-mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pm-orange); margin: 0 0 12px;
}
.pm-kicker-light{ color: var(--pm-orange-2); }

.pm-lead{ font-size: 1.05rem; line-height: 1.62; color: var(--pm-mute); margin: 14px 0 0; max-width: 62ch; }
.pm-lead-light{ color: #B9C4E8; }

/* ---------------------------------------------------- Boutons */
.pm-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 10px; text-decoration: none;
  font-family: var(--pm-body); font-weight: 600; font-size: .98rem; line-height: 1;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.pm-btn svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-btn:hover{ transform: translateY(-2px); }
.pm-btn:focus-visible{ outline: 3px solid var(--pm-cyan); outline-offset: 3px; }

.pm-btn-primary{ background: var(--pm-orange); color: #fff; box-shadow: 0 14px 34px rgba(255,107,0,.34); }
.pm-btn-primary:hover{ background: var(--pm-orange-2); color: #fff; }
.pm-btn-ghost{ background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.28); }
.pm-btn-ghost:hover{ background: rgba(255,255,255,.14); color: #fff; }
.pm-btn-outline{ background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.pm-btn-outline:hover{ background: rgba(255,255,255,.12); color: #fff; }
.pm-btn-lg{ padding: 18px 32px; font-size: 1.05rem; }

.pm-cta-row{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pm-cta-center{ justify-content: center; }

/* ===================================================================
   1. HÉRO
=================================================================== */
.pm-hero{
  position: relative;
  background: var(--pm-ink);
  padding: 84px 0 56px;
  overflow: hidden;
  isolation: isolate;
}
.pm-hero-bg{ position: absolute; inset: 0; z-index: 0; }
.pm-grid-lines{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 60% 10%, #000 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 60% 10%, #000 25%, transparent 75%);
}
.pm-orb{ position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.pm-orb-a{ width: 620px; height: 620px; top: -220px; right: -140px; background: #1B49C8; }
.pm-orb-b{ width: 420px; height: 420px; bottom: -180px; left: -120px; background: #0C5E8A; }
.pm-orb-c{ width: 560px; height: 560px; top: -140px; right: -160px; background: #16407F; }

.pm-hero-in{ display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.pm-hero-copy{ flex: 1 1 480px; min-width: 300px; }
.pm-hero-visual{ flex: 1 1 460px; min-width: 300px; position: relative; }

.pm-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--pm-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: #A9B7E6; background: rgba(255,255,255,.06); border: 1px solid var(--pm-line-d);
  padding: 8px 16px; border-radius: 999px; margin: 0 0 22px;
}
.pm-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--pm-orange); box-shadow: 0 0 0 4px rgba(255,107,0,.22); }

.pm-sub{ color: #B9C4E8; font-size: 1.08rem; line-height: 1.62; max-width: 54ch; margin: 22px 0 0; }

.pm-trust{
  list-style: none; margin: 36px 0 0; padding: 22px 0 0; border-top: 1px solid var(--pm-line-d);
  display: flex; flex-wrap: wrap; gap: 26px 34px;
}
.pm-trust li{ display: flex; flex-direction: column; gap: 3px; }
.pm-trust strong{ font-family: var(--pm-display); font-size: .92rem; color: #fff; letter-spacing: .01em; }
.pm-trust span{ font-size: .78rem; color: #8B98CC; }

.pm-hero-photo{
  position: absolute; inset: auto 0 0 0; width: 100%; height: auto;
  border-radius: var(--pm-r); opacity: .28; z-index: 0;
}

.pm-partners{
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--pm-line-d);
}
.pm-partners-label{ font-family: var(--pm-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #6F7CB2; }
.pm-logo{ max-height: 26px; width: auto; opacity: .8; filter: grayscale(1) brightness(2); }
.pm-logo-text{
  font-family: var(--pm-display); font-weight: 700; font-size: .95rem;
  color: #93A2D8; letter-spacing: .02em; filter: none;
}

/* ===================================================================
   Sections génériques
=================================================================== */
.pm-sec{ padding: 92px 0; position: relative; }
.pm-head{ margin-bottom: 46px; }
.pm-head-center{ text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.pm-head-center .pm-lead{ margin-left: auto; margin-right: auto; }
.pm-head-split{ display: flex; flex-wrap: wrap; gap: 24px 60px; align-items: flex-end; justify-content: space-between; }
.pm-head-split > div:first-child{ flex: 1 1 400px; max-width: 560px; padding-right: 32px; }
.pm-head-split .pm-lead{ flex: 1 1 380px; max-width: 46ch; margin: 0; }

/* ===================================================================
   2. PROBLÈME
=================================================================== */
.pm-problem{ background: #fff; }
.pm-problem-in{ display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.pm-problem-visual{ flex: 0 1 420px; min-width: 280px; }
.pm-problem-visual svg{ width: 100%; height: auto; }
.pm-problem-copy{ flex: 1 1 460px; min-width: 300px; }

.silo-box{ fill: #fff; stroke: var(--pm-line); stroke-width: 1.5; }
.silo-t{ font-family: var(--pm-display); font-size: 15px; font-weight: 700; fill: var(--pm-text); }
.silo-d{ font-family: var(--pm-body); font-size: 11.5px; fill: var(--pm-mute); }
.broken{ stroke: var(--pm-line); stroke-width: 2; stroke-dasharray: 5 6; fill: none; }
.cut path{ stroke: var(--pm-orange); stroke-width: 2.6; stroke-linecap: round; fill: none; }

.pm-ledger{ list-style: none; margin: 34px 0 0; padding: 0; }
.pm-ledger li{
  display: flex; gap: 22px; align-items: flex-start;
  padding: 22px 0; border-top: 1px solid var(--pm-line);
}
.pm-ledger li:last-child{ border-bottom: 1px solid var(--pm-line); }
.pm-ledger-n{ font-family: var(--pm-mono); font-size: .8rem; color: var(--pm-orange); padding-top: 3px; }
.pm-ledger h3{ font-size: 1.06rem; color: var(--pm-text); margin-bottom: 6px; text-transform: none; letter-spacing: -.01em; }
.pm-ledger p{ margin: 0; font-size: .95rem; color: var(--pm-mute); line-height: 1.58; }

/* ===================================================================
   3. SOLUTION (pipeline)
=================================================================== */
.pm-solution{ background: linear-gradient(170deg, var(--pm-navy) 0%, var(--pm-ink) 100%); }
.pm-pipeline{ overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.pipe-svg{ width: 100%; min-width: 980px; height: auto; }
.pm-pipeline-note{
  margin: 26px auto 0; max-width: 62ch; text-align: center;
  color: #A6B3E0; font-size: .95rem; line-height: 1.6;
}
.step-n{ font-family: var(--pm-mono); font-size: 13px; fill: var(--pm-orange); }

/* ===================================================================
   Éléments SVG communs
=================================================================== */
.node-box{ fill: rgba(255,255,255,.045); stroke: var(--pm-line-d); stroke-width: 1.5; }
.node-box.is-accent{ fill: rgba(255,107,0,.10); stroke: rgba(255,107,0,.5); }
.node-t1{ font-family: var(--pm-display); font-size: 15px; font-weight: 700; fill: #fff; }
.node-t2{ font-family: var(--pm-body); font-size: 12px; fill: #98A6D8; }
.core-box{ fill: rgba(255,107,0,.12); stroke: var(--pm-orange); stroke-width: 2; }
.core-t{ font-family: var(--pm-display); font-size: 26px; font-weight: 800; fill: #fff; letter-spacing: .01em; }
.orbit{ fill: none; stroke: rgba(56,203,240,.20); stroke-width: 1.4; stroke-dasharray: 3 9; }
.orbit-2{ stroke: rgba(255,107,0,.18); }
.arrow{ fill: none; stroke: var(--pm-orange); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.flow{
  fill: none; stroke: var(--pm-cyan); stroke-width: 2;
  stroke-dasharray: 8 10; opacity: .85;
  animation: pmFlow 1.4s linear infinite;
}
.flow-soft{ stroke: rgba(255,255,255,.28); animation-duration: 2.4s; }
.flow-direct{
  fill: none; stroke: var(--pm-orange); stroke-width: 1.8;
  stroke-dasharray: 5 9; opacity: .8;
  animation: pmFlow 2.2s linear infinite;
}
.pipe-legend .flow, .pipe-legend .flow-direct{ animation: none; }
@keyframes pmFlow{ to{ stroke-dashoffset: -36; } }

/* Illustrations */
.il{ width: 100%; height: auto; }
.il-line, .il-line-c{ fill: none; stroke: #9FB2EA; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il-line-c{ fill: none; }
.il-line-dark{ fill: none; stroke: rgba(5,10,30,.55); stroke-width: 2; }
.il-box{ fill: rgba(255,255,255,.06); stroke: #9FB2EA; stroke-width: 3; stroke-linejoin: round; }
.il-fill-accent, .il-accent-fill{ fill: var(--pm-orange); stroke: none; }
.il-fill-soft{ fill: rgba(56,203,240,.28); stroke: none; }
.il-accent-line{ fill: none; stroke: var(--pm-orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.il-glow{ fill: none; stroke: var(--pm-cyan); stroke-width: 2.4; stroke-linecap: round; opacity: .75; }

/* Illustrations sur fond clair */
.pm-problem .il-line, .pm-problem .il-line-c,
.pm-bundles .il-line, .pm-bundles .il-line-c,
.pm-inbound .il-line, .pm-inbound .il-line-c{ stroke: #4E5E9B; }
.pm-problem .il-box, .pm-bundles .il-box, .pm-inbound .il-box{ fill: #F1F5FF; stroke: #4E5E9B; }
.pm-bundles .il-fill-soft, .pm-inbound .il-fill-soft{ fill: rgba(60,123,255,.20); }

/* ===================================================================
   4. BUNDLES
=================================================================== */
.pm-bundles{ background: var(--pm-paper); }
.pm-bundle-grid{ display: flex; flex-wrap: wrap; gap: 22px; align-items: stretch; }
.pm-bundle{
  flex: 1 1 260px; min-width: 250px;
  background: #fff; border: 1px solid var(--pm-line); border-radius: var(--pm-r);
  padding: 26px 24px 24px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 4px rgba(10,20,60,.03);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.pm-bundle::before{ content:""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--bd); }
.pm-bundle:nth-child(even){ transform: translateY(22px); }
.pm-bundle:hover{ transform: translateY(-6px); box-shadow: 0 22px 48px rgba(10,20,60,.14); border-color: var(--bd); }
.pm-bundle:nth-child(even):hover{ transform: translateY(16px); }

.pm-bundle-tag{
  display: inline-block; font-family: var(--pm-mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: #fff; background: var(--bd);
  padding: 5px 10px; border-radius: 5px; margin: 0 0 14px; align-self: flex-start;
}
.pm-bundle-name{
  font-size: 2rem; font-weight: 800; color: var(--bd);
  text-transform: uppercase; margin-bottom: 8px;
}
.pm-bundle-sub{ font-size: .9rem; color: var(--pm-mute); line-height: 1.5; margin: 0 0 18px; }

.pm-bundle-art{
  height: 118px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,.02), transparent);
  border-radius: 12px; margin-bottom: 18px;
}
.pm-bundle-ill{ width: 96px; height: 96px; }
.pm-bundle-art .il-fill-accent, .pm-bundle-art .il-accent-fill, .pm-bundle-art .il-accent-line{ fill: var(--bd); }
.pm-bundle-art .il-accent-line{ fill: none; stroke: var(--bd); }

.pm-bundle-feats{ list-style: none; margin: 0 0 20px; padding: 0; flex: 1 1 auto; }
.pm-bundle-feats li{
  position: relative; padding: 7px 0 7px 22px; font-size: .88rem; color: var(--pm-text); line-height: 1.4;
}
.pm-bundle-feats li::before{
  content: ""; position: absolute; left: 0; top: 13px; width: 9px; height: 9px;
  border-radius: 3px; background: var(--bd);
}
.pm-bundle-price{
  font-family: var(--pm-display); font-weight: 700; font-size: 1.1rem;
  color: var(--pm-text); margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var(--pm-line);
}
.pm-bundle-link{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .9rem; color: var(--bd); text-decoration: none;
}
.pm-bundle-link svg{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.pm-bundle-link:hover svg{ transform: translateX(4px); }

/* ===================================================================
   5. APPELS ENTRANTS
=================================================================== */
.pm-inbound{ background: #fff; }
.pm-fan{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fan-svg{ width: 100%; min-width: 860px; height: auto; }
.pm-inbound .node-box{ fill: #F7F9FF; stroke: var(--pm-line); }
.pm-inbound .node-box.is-accent{ fill: rgba(255,107,0,.07); stroke: rgba(255,107,0,.55); }
.pm-inbound .node-t1{ fill: var(--pm-text); }
.pm-inbound .node-t2{ fill: var(--pm-mute); }
.arch-svg .node-t1{ font-size: 15px; }
.arch-svg .node-t2{ font-size: 12px; }
.pm-inbound .flow-soft{ stroke: #C3CFF0; }

/* ===================================================================
   6. APPELS SORTANTS
=================================================================== */
.pm-outbound{
  background: var(--pm-ink); color: #fff; overflow: hidden; isolation: isolate;
}
.pm-outbound-bg{ position: absolute; inset: 0; z-index: 0; }
.pm-outbound-in{ display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.pm-outbound-copy{ flex: 1 1 520px; min-width: 300px; }
.pm-outbound-visual{ flex: 0 1 380px; min-width: 260px; margin: 0; text-align: center; }
.pm-outbound-visual img{ width: 100%; height: auto; border-radius: var(--pm-r); }
.pm-gw-ill{ width: 100%; max-width: 300px; }
.pm-gw-ill-2{ max-width: 220px; margin-top: -18px; opacity: .85; }
.pm-outbound-visual figcaption{ margin-top: 16px; font-size: .82rem; color: #8B98CC; }

.pm-steps{ list-style: none; counter-reset: none; margin: 32px 0 0; padding: 0; }
.pm-steps li{ display: flex; gap: 18px; align-items: flex-start; position: relative; padding-bottom: 22px; }
.pm-steps li:last-child{ padding-bottom: 0; }
.pm-steps li > span{
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--pm-mono); font-size: .82rem;
  background: rgba(255,107,0,.14); color: var(--pm-orange);
  border: 1px solid rgba(255,107,0,.42);
}
.pm-steps li::after{
  content: ""; position: absolute; left: 17px; top: 38px; bottom: 6px;
  width: 1px; background: linear-gradient(180deg, rgba(255,107,0,.45), rgba(255,255,255,.06));
}
.pm-steps li:last-child::after{ display: none; }
.pm-steps h3{ font-size: 1rem; color: #fff; margin-bottom: 4px; text-transform: none; }
.pm-steps p{ margin: 0; font-size: .92rem; color: #A6B3E0; line-height: 1.55; }

.pm-badges{ list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; padding: 0; }
.pm-badges li{
  font-size: .82rem; color: #CBD5F5; background: rgba(255,255,255,.06);
  border: 1px solid var(--pm-line-d); padding: 9px 15px; border-radius: 999px;
}

/* ===================================================================
   7. AGENTS IA
=================================================================== */
.pm-ai{ background: radial-gradient(90% 70% at 50% 0%, #0B2B4A 0%, var(--pm-ink) 62%); }
.pm-orbit{ overflow-x: auto; }
.ai-svg{ width: 100%; min-width: 760px; height: auto; }
.pm-ai .core-box{ fill: rgba(56,203,240,.10); stroke: var(--pm-cyan); }

.pm-ai-benefits{
  list-style: none; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
  margin: 44px 0 0; padding: 0;
}
.pm-ai-benefits li{
  flex: 1 1 200px; max-width: 280px; text-align: center;
  border-top: 2px solid rgba(56,203,240,.4); padding-top: 18px;
}
.pm-ai-benefits strong{
  display: block; font-family: var(--pm-display); font-size: 2.6rem; font-weight: 800;
  color: var(--pm-cyan); line-height: 1;
}
.pm-ai-benefits span{ display: block; margin-top: 8px; font-size: .88rem; color: #A6B3E0; }

/* ===================================================================
   8. CAS D'USAGE
=================================================================== */
.pm-uses{ background: var(--pm-paper); }
.pm-mosaic{ display: flex; flex-wrap: wrap; gap: 16px; }
.pm-tile{
  flex: 1 1 190px; min-width: 170px;
  background: #fff; border: 1px solid var(--pm-line); border-radius: 14px;
  padding: 22px 20px; text-decoration: none; color: inherit; display: block;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pm-tile.is-big{ flex: 1 1 380px; padding: 30px 28px; background: var(--pm-navy); border-color: var(--pm-navy); }
.pm-tile:hover{ transform: translateY(-4px); border-color: var(--pm-orange); box-shadow: 0 16px 34px rgba(10,20,60,.12); }
.pm-tile-ic{ display: block; width: 34px; height: 34px; color: var(--pm-orange); margin-bottom: 14px; }
.pm-tile-ic svg{ width: 100%; height: 100%; }
.pm-tile h3{ font-size: 1.02rem; text-transform: none; letter-spacing: -.01em; margin-bottom: 6px; }
.pm-tile p{ margin: 0; font-size: .85rem; color: var(--pm-mute); line-height: 1.5; }
.pm-tile.is-big h3{ font-size: 1.6rem; color: #fff; text-transform: uppercase; letter-spacing: .01em; }
.pm-tile.is-big p{ color: #B9C4E8; font-size: .95rem; max-width: 40ch; }
.pm-tile.is-big .pm-tile-ic{ width: 42px; height: 42px; }

/* ===================================================================
   9. ARCHITECTURE
=================================================================== */
.pm-arch{ background: linear-gradient(190deg, var(--pm-ink) 0%, var(--pm-navy) 100%); }
.pm-arch-stage{ position: relative; overflow-x: auto; }
.arch-svg{ width: 100%; min-width: 900px; height: auto; }
.arch-node{ cursor: pointer; }
.arch-node .node-box{ transition: fill .2s ease, stroke .2s ease; }
.arch-node:hover .node-box,
.arch-node:focus .node-box,
.arch-node.is-on .node-box{ fill: rgba(255,107,0,.14); stroke: var(--pm-orange); }
.arch-node:focus{ outline: none; }
.arch-node:focus-visible .node-box{ stroke: var(--pm-cyan); stroke-width: 2.5; }

.pm-arch-panel{
  max-width: 720px; margin: 26px auto 0; text-align: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--pm-line-d);
  border-radius: var(--pm-r); padding: 22px 26px;
}
.pm-arch-panel h3{ font-size: 1.1rem; color: #fff; margin-bottom: 8px; text-transform: none; }
.pm-arch-panel p{ margin: 0; color: #A6B3E0; font-size: .95rem; line-height: 1.55; }

/* ===================================================================
   10. CTA FINAL
=================================================================== */
.pm-final{
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(255,107,0,.32), transparent 60%),
    linear-gradient(180deg, var(--pm-navy) 0%, var(--pm-ink) 100%);
  padding: 96px 0 104px; text-align: center;
}
.pm-final-t{
  font-family: var(--pm-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); color: #fff; letter-spacing: -.02em;
}
.pm-final-p{ max-width: 60ch; margin: 20px auto 0; color: #C3CDEE; font-size: 1.04rem; line-height: 1.6; }
.pm-final-note{ margin-top: 26px; font-family: var(--pm-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #7C8AC0; }

/* ---------------------------------------------------- Barre mobile */
.pm-sticky{ display: none; }

/* ===================================================================
   Révélation au scroll
=================================================================== */
[data-reveal]{ opacity: 0; transform: translateY(22px); }
.pm-is-in[data-reveal],
[data-reveal].pm-is-in{ opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.7,.3,1); }
.pm-bundle[data-reveal]{ transition-delay: calc(var(--d, 0) * 90ms); }

/* ===================================================================
   Responsive
=================================================================== */
@media (max-width: 1024px){
  .pm-sec{ padding: 70px 0; }
  .pm-hero{ padding: 60px 0 44px; }
  .pm-bundle:nth-child(even){ transform: none; }
  .pm-bundle:nth-child(even):hover{ transform: translateY(-6px); }
}

@media (max-width: 782px){
  .pm-sec{ padding: 56px 0; }
  .pm-wrap{ padding: 0 18px; }
  .pm-hero{ padding: 44px 0 36px; }
  .pm-trust{ gap: 18px 24px; }
  .pm-trust li{ flex: 1 1 44%; }
  .pm-head-split{ display: block; }
  .pm-head-split .pm-lead{ margin-top: 16px; }
  .pm-problem-in, .pm-outbound-in{ gap: 34px; }
  .pm-tile.is-big h3{ font-size: 1.3rem; }
  .pm-final{ padding: 70px 0 118px; }

  .pm-sticky{
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(5,10,30,.94); backdrop-filter: blur(8px);
    border-top: 1px solid var(--pm-line-d);
  }
  .pm-sticky .pm-btn{ flex: 1 1 0; padding: 13px 8px; font-size: .9rem; }

  /* Les schémas larges défilent horizontalement : on l'indique visuellement. */
  .pm-pipeline, .pm-fan, .pm-orbit, .pm-arch-stage{
    mask-image: linear-gradient(90deg, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
  }
}

@media (max-width: 640px){
  /* Sur petit écran, on retire la ligne secondaire des schémas : illisible sous 11px. */
  .hero-svg .node-t2{ display: none; }
  .hero-svg .node-t1{ font-size: 19px; }
  .pm-bundle-name{ font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce){
  .pm *{ animation: none !important; transition: none !important; }
  [data-reveal]{ opacity: 1; transform: none; }
  .flow{ animation: none; }
}

/* ===================================================================
   PAGES BUNDLE (/pack/…) — identité couleur par produit
=================================================================== */

.pm-bd{ --bd: var(--pm-orange); }

.pm-bd-hero{
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, var(--pm-ink) 0%, var(--pm-navy) 72%, #16265e 100%);
  padding: 76px 0 44px;
}
.pm-bd-hero-bg{ position: absolute; inset: 0; z-index: 0; }
.pm-orb-bd{ width: 520px; height: 520px; top: -180px; right: -120px; background: var(--bd); opacity: .34; }

.pm-bd-hero-in{ display: flex; flex-wrap: wrap; gap: 44px; align-items: center; }
.pm-bd-copy{ flex: 1 1 460px; min-width: 290px; }
.pm-bd-visual{ flex: 0 1 400px; min-width: 270px; }

.pm-bd-tag{
  display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: 6px;
  background: var(--bd); color: #fff;
  font-family: var(--pm-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
}
.pm-bd-name{
  font-family: var(--pm-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 5.6rem); line-height: .92; letter-spacing: -.03em;
  color: var(--bd); margin: 0 0 14px;
  text-shadow: 0 6px 34px rgba(0,0,0,.45);
}
.pm-bd-tagline{
  font-family: var(--pm-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(.95rem, 2vw, 1.22rem); letter-spacing: .01em; line-height: 1.35;
  color: #fff; margin: 0 0 26px; max-width: 30ch;
}

.pm-bd-feats{ list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.pm-bd-feats li{ display: flex; gap: 12px; align-items: flex-start; color: #D5DDF7; font-size: .96rem; line-height: 1.45; }
.pm-bd-check{
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bd); display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.pm-bd-check svg{ width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.pm-bd-flowtag{
  display: inline-block; margin: 0 0 26px; padding: 9px 18px; border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--bd);
  color: #fff; font-family: var(--pm-mono); font-size: .7rem;
  letter-spacing: .18em; text-transform: uppercase;
}

.pm-btn-bd{ background: var(--bd); color: #fff; box-shadow: 0 14px 32px rgba(3,8,30,.45); }
.pm-btn-bd:hover{ color: #fff; filter: brightness(1.14); }

.pm-bd-card{
  background: #fff; border-radius: 20px; padding: 26px;
  box-shadow: 0 30px 70px rgba(3,6,24,.5);
}
.pm-bd-art{
  height: 230px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #F6F8FF, #fff); border-radius: 14px; margin-bottom: 20px;
}
.pm-bd-art img{ max-height: 210px; width: auto; max-width: 100%; }
.pm-bd-ill{ width: 190px; height: 190px; }
.pm-bd-art .il-line, .pm-bd-art .il-line-c{ stroke: #46538C; }
.pm-bd-art .il-box{ fill: #F1F5FF; stroke: #46538C; }
.pm-bd-art .il-fill-accent, .pm-bd-art .il-accent-fill{ fill: var(--bd); }
.pm-bd-art .il-accent-line{ fill: none; stroke: var(--bd); }
.pm-bd-art .il-fill-soft{ fill: rgba(60,123,255,.18); }

.pm-bd-price{ border-top: 1px solid var(--pm-line); padding-top: 16px; }
.pm-bd-price strong{
  display: block; font-family: var(--pm-display); font-weight: 800;
  font-size: 1.5rem; color: var(--pm-text); line-height: 1.15;
}
.pm-bd-price span{ display: block; margin-top: 6px; font-size: .8rem; color: var(--pm-mute); line-height: 1.45; }

.pm-bd-bestfor{
  margin: 40px 0 0; padding: 16px 20px; border-left: 3px solid var(--bd);
  background: rgba(255,255,255,.05); color: #C3CDEE; font-size: .95rem; line-height: 1.5;
}

/* Inclus */
.pm-bd-incl{ background: #fff; }
.pm-grid-incl{ display: flex; flex-wrap: wrap; gap: 20px; }
.pm-incl{
  flex: 1 1 280px; min-width: 250px; background: #fff;
  border: 1px solid var(--pm-line); border-left: 3px solid var(--bd);
  border-radius: 12px; padding: 24px;
}
.pm-incl-n{ font-family: var(--pm-mono); font-size: .74rem; color: var(--bd); display: block; margin-bottom: 10px; }
.pm-incl h3{ font-size: 1.04rem; text-transform: none; letter-spacing: -.01em; margin-bottom: 8px; }
.pm-incl p{ margin: 0; font-size: .93rem; color: var(--pm-mute); line-height: 1.55; }

/* Deux colonnes de flux */
.pm-flows-2{ display: flex; flex-wrap: wrap; gap: 28px; }
.pm-flow-col{
  flex: 1 1 340px; min-width: 280px;
  background: rgba(255,255,255,.04); border: 1px solid var(--pm-line-d);
  border-radius: var(--pm-r); padding: 28px;
}
.pm-flow-col h3{ color: #fff; font-size: 1.05rem; text-transform: none; margin-bottom: 20px; }
.pm-flow-col .pm-steps li > span{
  background: rgba(255,255,255,.09);
  border-color: var(--bd);
  color: #fff;
}
.pm-flow-col .pm-steps li::after{ background: linear-gradient(180deg, var(--bd), rgba(255,255,255,.05)); }

/* Navigation entre bundles */
.pm-bd-others{ background: var(--pm-paper); }
.pm-bd-nav{ display: flex; flex-wrap: wrap; gap: 16px; }
.pm-bd-nav-item{
  flex: 1 1 220px; min-width: 200px; text-decoration: none;
  background: #fff; border: 1px solid var(--pm-line); border-top: 4px solid var(--bd2, var(--pm-navy));
  border-radius: 12px; padding: 22px 20px; display: block;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pm-bd-nav-item:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px rgba(10,20,60,.13); }
.pm-bd-nav-name{
  display: block; font-family: var(--pm-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.4rem; color: var(--bd2, var(--pm-navy)); line-height: 1.05; margin-bottom: 8px;
}
.pm-bd-nav-tag{ display: block; font-size: .84rem; color: var(--pm-mute); line-height: 1.45; margin-bottom: 10px; }
.pm-bd-nav-price{ display: block; font-family: var(--pm-display); font-weight: 700; font-size: .95rem; color: var(--pm-text); }
.pm-bd-nav-all{ border-top-color: var(--pm-orange); }

/* FAQ bundle */
.pm-bd-faq{ background: #fff; }
.pm-faq{ max-width: 840px; }
.pm-faq details{
  border: 1px solid var(--pm-line); border-radius: 12px; background: #fff;
  padding: 16px 20px; margin-bottom: 12px;
}
.pm-faq summary{
  cursor: pointer; font-family: var(--pm-display); font-weight: 600;
  color: var(--pm-text); list-style: none;
}
.pm-faq summary::-webkit-details-marker{ display: none; }
.pm-faq summary::after{ content: "+"; float: right; color: var(--bd); font-weight: 700; }
.pm-faq details[open] summary::after{ content: "–"; }
.pm-faq details p{ margin: 12px 0 0; color: var(--pm-mute); font-size: .94rem; line-height: 1.6; }
.pm-bd-upgrade{
  margin: 26px 0 0; max-width: 840px; padding: 16px 20px;
  border-left: 3px solid var(--bd); background: var(--pm-paper);
  color: var(--pm-text); font-size: .94rem; line-height: 1.55;
}

.pm-bd .pm-final{
  background: linear-gradient(180deg, var(--pm-navy) 0%, var(--pm-ink) 100%);
  position: relative; isolation: isolate;
}
.pm-bd .pm-final::before{
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .30;
  background: radial-gradient(60% 110% at 50% 0%, var(--bd), transparent 62%);
}

@media (max-width: 782px){
  .pm-bd-hero{ padding: 46px 0 32px; }
  .pm-bd-name{ font-size: clamp(2.6rem, 15vw, 4rem); }
  .pm-bd-art{ height: 180px; }
  .pm-bd-ill{ width: 150px; height: 150px; }
}

/* ===================================================================
   PAGES LÉGALES (gabarit page-legal.php)
=================================================================== */
.pm-legal-hero{
  background: linear-gradient(160deg, var(--pm-ink) 0%, var(--pm-navy) 100%);
  padding: 66px 0 54px; color: #fff;
}
.pm-legal-title{
  font-family: var(--pm-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); color: #fff; letter-spacing: -.02em; margin: 0;
}
.pm-legal-meta{ margin: 14px 0 0; font-family: var(--pm-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #8B98CC; }

.pm-legal-body{ background: #fff; padding: 62px 0 74px; }
.pm-legal-wrap{ max-width: 820px; }
.pm-legal-content{ color: var(--pm-text); font-size: 1rem; line-height: 1.72; }
.pm-legal-content h2{
  font-family: var(--pm-display); font-size: 1.28rem; font-weight: 700;
  color: var(--pm-navy); margin: 44px 0 14px; padding-top: 22px;
  border-top: 1px solid var(--pm-line); text-transform: none; letter-spacing: -.01em;
}
.pm-legal-content h2:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
.pm-legal-content h3{
  font-family: var(--pm-display); font-size: 1.04rem; font-weight: 600;
  color: var(--pm-text); margin: 26px 0 10px; text-transform: none;
}
.pm-legal-content p{ margin: 0 0 14px; }
.pm-legal-content ul, .pm-legal-content ol{ margin: 0 0 18px; padding-left: 22px; }
.pm-legal-content li{ margin-bottom: 8px; }
.pm-legal-content strong{ color: var(--pm-navy); }

.pm-legal-warning{
  background: #FFF6EE; border: 1px solid #FFD3AC; border-left: 4px solid var(--pm-orange);
  border-radius: 10px; padding: 18px 22px; margin: 0 0 34px;
  font-size: .94rem; line-height: 1.62; color: #6A3B10;
}
.pm-legal-warning:last-child{ margin: 40px 0 0; }
.pm-legal-warning strong{ color: #8A3F00; display: block; margin-bottom: 8px; }
.pm-legal-warning ol{ margin: 10px 0 0; padding-left: 20px; }

/* Liens légaux du pied de page */
.footer-legal{
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  padding: 18px 0 0; margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: .84rem;
}
.footer-legal a{ color: #A9B7E6; text-decoration: none; }
.footer-legal a:hover{ color: #fff; text-decoration: underline; }


/* ===================================================================
   ARABE (RTL) — ajustements de la page d'accueil
=================================================================== */
.rtl .pm-eyebrow,
.rtl .pm-kicker,
.rtl .pm-trust li,
.rtl .pm-ledger li,
.rtl .pm-steps li,
.rtl .pm-bd-feats li{ text-align: right; }

.rtl .pm-ledger li,
.rtl .pm-steps li,
.rtl .pm-bundle-feats li{ direction: rtl; }

.rtl .pm-bundle-feats li{ padding: 7px 22px 7px 0; }
.rtl .pm-bundle-feats li::before{ left: auto; right: 0; }

.rtl .pm-steps li::after{ left: auto; right: 17px; }

.rtl .pm-incl{ border-left: 1px solid var(--pm-line); border-right: 3px solid var(--bd); }
.rtl .pm-bd-bestfor{ border-left: 0; border-right: 3px solid var(--bd); }
.rtl .pm-legal-warning{ border-left: 1px solid #FFD3AC; border-right: 4px solid var(--pm-orange); }
.rtl .pm-legal-content ul,
.rtl .pm-legal-content ol{ padding-left: 0; padding-right: 22px; }

.rtl .pm-faq summary::after{ float: left; }

/* Les schémas restent lus de gauche à droite : le flux technique va de la
   source vers l'usage, quel que soit le sens de lecture de la langue. */
.rtl .hero-svg,
.rtl .pipe-svg,
.rtl .fan-svg,
.rtl .ai-svg,
.rtl .arch-svg{ direction: ltr; }
.rtl .pm-pipeline,
.rtl .pm-fan,
.rtl .pm-orbit,
.rtl .pm-arch-stage{ direction: ltr; }

/* ===================================================================
   SECTION D'OUVERTURE — NUMÉROS POUR AGENTS IA
=================================================================== */
.pm-ain{
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(168deg, #04122A 0%, #071A38 46%, var(--pm-ink) 100%);
  padding: 96px 0 92px;
}
.pm-ain-bg{ position: absolute; inset: 0; z-index: 0; }
.pm-ain-glow{ position: absolute; border-radius: 50%; filter: blur(110px); opacity: .42; }
.pm-ain-g1{ width: 640px; height: 640px; top: -260px; right: -160px; background: #0C6E9E; }
.pm-ain-g2{ width: 420px; height: 420px; bottom: -200px; left: -120px; background: #1B49C8; }
.pm-ain-grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(56,203,240,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,203,240,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(110% 80% at 30% 20%, #000 20%, transparent 72%);
  mask-image: radial-gradient(110% 80% at 30% 20%, #000 20%, transparent 72%);
}

.pm-ain-head{ max-width: 800px; margin-bottom: 44px; }
.pm-ain-tag{
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(56,203,240,.12); border: 1px solid rgba(56,203,240,.45);
  color: var(--pm-cyan); font-family: var(--pm-mono);
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
}
.pm-ain-tag i{
  width: 7px; height: 7px; border-radius: 50%; background: var(--pm-cyan);
  box-shadow: 0 0 0 4px rgba(56,203,240,.22); animation: pmPulse 2s infinite;
}
@keyframes pmPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.pm-ain-h{
  font-family: var(--pm-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.06;
  letter-spacing: -.025em; color: #fff; margin: 0 0 16px;
}
.pm-ain-h em{ font-style: normal; color: var(--pm-cyan); }
.pm-ain-lede{ color: #B9C4E8; font-size: 1.06rem; line-height: 1.65; margin: 0; max-width: 62ch; }

.pm-ain-main{ display: flex; flex-wrap: wrap; gap: 44px; align-items: flex-start; }
.pm-ain-left{ flex: 0 1 420px; min-width: 290px; }
.pm-ain-right{ flex: 1 1 460px; min-width: 300px; }

/* Carte d'appel */
.pm-callcard{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(56,203,240,.32); border-radius: 22px; padding: 24px;
  box-shadow: 0 30px 70px rgba(2,8,26,.6);
}
.pm-cc-top{
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--pm-mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: #8B98CC;
}
.pm-cc-live{ display: inline-flex; align-items: center; gap: 7px; color: #4ADE80; }
.pm-cc-live i{ width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; animation: pmPulse 1.4s infinite; }
.pm-cc-num{ font-family: var(--pm-display); font-weight: 800; font-size: 1.5rem; color: #fff; margin: 16px 0 4px; }
.pm-cc-sub{ font-size: .82rem; color: #8B98CC; margin: 0 0 20px; }
.pm-cc-wave{ display: block; width: 100%; height: 52px; margin-bottom: 18px; }
.pm-cc-on rect{ fill: var(--pm-cyan); }
.pm-cc-off rect{ fill: #3E4870; }
.pm-cc-who{
  display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-radius: 12px;
  background: rgba(56,203,240,.10); border: 1px solid rgba(56,203,240,.30);
}
.pm-cc-av{
  width: 38px; height: 38px; border-radius: 11px; background: rgba(56,203,240,.18);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.pm-cc-av .il{ width: 26px; height: 26px; }
.pm-cc-av .il-box{ fill: none; stroke: var(--pm-cyan); stroke-width: 4; }
.pm-cc-av .il-line, .pm-cc-av .il-line-c{ stroke: var(--pm-cyan); stroke-width: 4; }
.pm-cc-av .il-fill-accent{ fill: var(--pm-cyan); }
.pm-cc-av .il-accent-line{ stroke: var(--pm-cyan); }
.pm-cc-who b{ display: block; font-family: var(--pm-display); font-size: .95rem; color: #fff; }
.pm-cc-who span{ display: block; font-size: .78rem; color: #8B98CC; margin-top: 2px; }

/* Fiche technique SIP */
.pm-sipcard{
  margin-top: 18px; background: rgba(3,8,26,.62); border: 1px solid var(--pm-line-d);
  border-radius: 16px; padding: 18px 20px; font-family: var(--pm-mono); font-size: .78rem;
}
.pm-sipcard h3{
  margin: 0 0 14px; font-family: var(--pm-mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: #6F7CB2; font-weight: 500;
}
.pm-sipcard dl{ margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; }
.pm-sipcard dt{ color: #6F7CB2; }
.pm-sipcard dd{ margin: 0; color: #CBD5F5; word-break: break-all; }
.pm-sipcard dd b{ color: var(--pm-cyan); font-weight: 500; }

/* Arguments */
.pm-ain-args{
  list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 2px;
  border: 1px solid var(--pm-line-d); border-radius: 18px; overflow: hidden;
}
.pm-ain-args li{
  display: flex; gap: 16px; padding: 20px 22px;
  background: rgba(255,255,255,.035); transition: background .2s ease;
}
.pm-ain-args li:hover{ background: rgba(56,203,240,.07); }
.pm-ain-n{ flex: 0 0 auto; font-family: var(--pm-mono); font-size: .72rem; color: var(--pm-cyan); padding-top: 3px; }
.pm-ain-args h3{ margin: 0 0 5px; font-family: var(--pm-display); font-size: 1.02rem; font-weight: 700; color: #fff; text-transform: none; }
.pm-ain-args p{ margin: 0; font-size: .92rem; line-height: 1.55; color: #A6B3E0; }
.pm-ain-note{
  margin: 16px 0 0; font-family: var(--pm-mono); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: #6F7CB2;
}

/* Rail du parcours d'appel */
.pm-rail{ margin-top: 64px; padding-top: 44px; border-top: 1px solid var(--pm-line-d); }
.pm-rail-h{ display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; margin-bottom: 28px; }
.pm-rail-h h3{
  margin: 0; font-family: var(--pm-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.22rem; color: #fff; letter-spacing: -.01em;
}
.pm-rail-h span{ font-family: var(--pm-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #6F7CB2; }
.pm-rail-steps{ display: flex; flex-wrap: wrap; }
.pm-rail-step{ flex: 1 1 190px; min-width: 180px; position: relative; padding: 0 20px 0 0; }
.pm-rail-dot{
  display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--pm-cyan);
  box-shadow: 0 0 0 5px rgba(56,203,240,.16); position: relative; z-index: 2;
}
.pm-rail-bar{
  position: absolute; left: 14px; right: 0; top: 6px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(56,203,240,.55) 0 8px, transparent 8px 17px);
}
.pm-rail-step:last-child .pm-rail-dot{ background: var(--pm-orange); box-shadow: 0 0 0 5px rgba(255,107,0,.18); }
.pm-rail-t{
  margin: 18px 0 6px; font-family: var(--pm-mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--pm-cyan);
}
.pm-rail-step:last-child .pm-rail-t{ color: var(--pm-orange); }
.pm-rail-step h4{ margin: 0 0 6px; font-family: var(--pm-display); font-size: 1rem; font-weight: 700; color: #fff; }
.pm-rail-step p{ margin: 0; font-size: .88rem; line-height: 1.5; color: #A6B3E0; padding-right: 14px; }

/* RTL */
.rtl .pm-ain-args li,
.rtl .pm-rail-step,
.rtl .pm-sipcard{ text-align: right; }
.rtl .pm-rail-step p{ padding-right: 0; padding-left: 14px; }
.rtl .pm-rail-bar{ left: 0; right: 14px; }
.rtl .pm-sipcard dl{ direction: rtl; }
.rtl .pm-sipcard dd{ direction: ltr; text-align: right; }

@media (max-width: 900px){
  .pm-ain{ padding: 56px 0 62px; }
  .pm-rail-step{ padding-bottom: 26px; }
  .pm-rail-bar{ display: none; }
}

/* =========================================================================
   v1.4.0 — CTA de fin de section + prix des bundles
   ========================================================================= */

.pm-seccta{
	margin-top:44px;
	padding-top:30px;
	border-top:1px solid rgba(16,22,56,.10);
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	text-align:center;
}
.pm-seccta-light{ border-top-color:rgba(255,255,255,.16); }

.pm-seccta .pm-btn{ min-width:min(320px,100%); justify-content:center; }

.pm-seccta-note{
	margin:0;
	font-size:.86rem;
	color:var(--muted,#8B93AD);
	max-width:44ch;
	line-height:1.5;
}
.pm-seccta-light .pm-seccta-note{ color:rgba(255,255,255,.62); }

.pm-seccta-light .pm-btn-outline{
	border-color:rgba(255,255,255,.34);
	color:#fff;
}
.pm-seccta-light .pm-btn-outline:hover{
	border-color:#fff;
	background:rgba(255,255,255,.08);
}

/* Prix des bundles : montant annuel dominant, équivalent mensuel en appui */
.pm-bundle-per{
	font-family:var(--font-mono,"IBM Plex Mono",monospace);
	font-size:.62em;
	font-weight:400;
	opacity:.66;
	margin-inline-start:.35em;
	white-space:nowrap;
}
.pm-bundle-alt{
	margin:-6px 0 0;
	font-family:var(--font-mono,"IBM Plex Mono",monospace);
	font-size:.8rem;
	color:var(--muted,#8B93AD);
	letter-spacing:.01em;
}


/* --- Prix : isolation bidi pour l'arabe (v1.4.0) ---------------------------
   Un montant comme « 3 000 DH » mêle chiffres, espace et lettres latines.
   Dans un paragraphe RTL, l'espace est un caractère neutre : l'algorithme bidi
   scinde le nombre en deux séquences et les réordonne — « 3 000 DH » devenait
   « DH 000 3 ». <bdi dir="ltr"> isole le montant, l'espace fine insécable
   U+202F empêche toute coupure, et les unités arabes ont été reformulées sans
   barre oblique initiale (elle aussi neutre, elle migrait en fin de ligne). */

.pm-bundle-amount,
.pm-bundle-alt bdi{
	unicode-bidi:isolate;
	direction:ltr;
	white-space:nowrap;
}

.pm-bundle-price,
.pm-bundle-alt{
	display:flex;
	align-items:baseline;
	gap:.4em;
	flex-wrap:wrap;
}

[dir="rtl"] .pm-bundle-price,
[dir="rtl"] .pm-bundle-alt{ flex-direction:row-reverse; justify-content:flex-end; }

[dir="rtl"] .pm-bundle-per,
[dir="rtl"] .pm-bundle-alt span{ letter-spacing:0; }

.pm-bundle-per{ margin-inline-start:0; }


/* --- Schémas SVG en arabe : géométrie préservée (v1.4.0) -------------------
   Les libellés des schémas sont posés avec `<text x="…">` sans text-anchor,
   donc en `text-anchor: start`. Or « start » dépend de la direction héritée :
   en RTL il désigne le bord DROIT du texte, qui s'étend alors vers la gauche
   et recouvre l'icône placée à sa gauche.

   Les coordonnées des schémas sont calculées pour un flux gauche→droite. On
   force donc `direction: ltr` sur les SVG : les ancres retrouvent leur sens,
   et chaque libellé arabe reste rendu de droite à gauche à l'intérieur de sa
   propre séquence, ce qui est le comportement correct. */

.hero-svg,
.pipe-svg,
.fan-svg,
.ai-svg,
.arch-svg{
	direction:ltr;
}

.hero-svg text,
.pipe-svg text,
.fan-svg text,
.ai-svg text,
.arch-svg text{
	direction:ltr;
	unicode-bidi:isolate;
}

/* Les libellés centrés ne dépendent pas de la direction : on les laisse tels
   quels. Ceux calés à gauche sont explicitement ancrés au début. */
.hero-svg text:not([text-anchor]),
.pipe-svg text:not([text-anchor]),
.fan-svg text:not([text-anchor]),
.ai-svg text:not([text-anchor]),
.arch-svg text:not([text-anchor]){
	text-anchor:start;
}

@media (max-width:640px){
	.pm-seccta{ margin-top:34px; padding-top:24px; }
	.pm-seccta .pm-btn{ width:100%; }
}