/* ══ Section App mobile PCM Agency — iPhone réaliste + écrans fidèles + interactif ══ */
#app .pcmapp{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.pcmapp-copy .kick{margin-bottom:22px}
.pcmapp-feat{list-style:none;margin:26px 0 30px;padding:0;display:flex;flex-direction:column;gap:12px}
.pcmapp-feat li{position:relative;padding-left:30px;font-size:15.5px;color:var(--ink-2);line-height:1.45}
.pcmapp-feat li::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/12px no-repeat}

/* ── Badges stores officiels (format noir officiel) ── */
.pcmapp-stores{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pcmapp-badge{display:inline-flex;align-items:center;gap:11px;padding:0 16px;height:52px;border-radius:11px;
  background:#000;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.22);
  transition:transform .4s var(--ease),border-color .3s}
.pcmapp-badge:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.5)}
.pcmapp-badge svg{flex-shrink:0}
.pcmapp-badge .bt{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.pcmapp-badge .bt small{font-size:10px;letter-spacing:.02em;font-weight:400;opacity:.92}
.pcmapp-badge .bt b{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-top:1px}
.pcmapp-soon{display:inline-block;margin-top:16px;font-size:11px;color:var(--a1);
  border:1px solid rgba(110,168,255,.35);padding:5px 11px;border-radius:100px}

/* ── iPhone réaliste ── */
.pcmapp-device{display:flex;justify-content:center;perspective:1600px}
.pcmapp-phone{position:relative;width:310px;height:640px;border-radius:56px;
  background:linear-gradient(150deg,#3a3d44 0%,#17181c 26%,#0d0e11 60%,#26282e 100%);
  padding:11px;
  box-shadow:0 50px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08),inset 0 0 3px rgba(255,255,255,.25);
  animation:pcmapp-float 8s ease-in-out infinite;transform-style:preserve-3d}
.pcmapp-phone.paused{animation-play-state:paused}
@keyframes pcmapp-float{0%,100%{transform:translateY(0) rotateY(-7deg) rotateX(2deg)}50%{transform:translateY(-16px) rotateY(-3deg) rotateX(0)}}
/* boutons latéraux */
.pcmapp-phone::before{content:"";position:absolute;left:-3px;top:150px;width:3px;height:34px;border-radius:2px 0 0 2px;background:linear-gradient(#2a2c31,#141519);box-shadow:0 60px 0 #1a1b1f,0 108px 0 #1a1b1f}
.pcmapp-phone::after{content:"";position:absolute;right:-3px;top:200px;width:3px;height:74px;border-radius:0 2px 2px 0;background:linear-gradient(#2a2c31,#141519)}
/* Dynamic Island */
.pcmapp-island{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:104px;height:30px;background:#000;border-radius:100px;z-index:8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.pcmapp-island::after{content:"";position:absolute;right:11px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3550,#05070d);box-shadow:inset 0 0 2px rgba(90,140,255,.4)}
.pcmapp-screen{position:relative;width:100%;height:100%;border-radius:45px;overflow:hidden;background:linear-gradient(168deg,#191423 0%,#100f18 46%,#0b0f16 100%)}
/* reflet écran */
.pcmapp-screen::after{content:"";position:absolute;inset:0;border-radius:45px;pointer-events:none;z-index:20;
  background:linear-gradient(125deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 24%,rgba(255,255,255,0) 100%)}

/* Status bar iOS */
.pcmapp-status{position:absolute;top:0;left:0;right:0;height:52px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 8px;z-index:6;font-size:13px;font-weight:600;color:#f2f3f7;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}
.pcmapp-status .st-r{display:flex;align-items:center;gap:6px}
.pcmapp-status .st-r svg{display:block}

/* écrans empilés */
.pcmapp-view{position:absolute;inset:0;padding:58px 16px 74px;opacity:0;transform:translateY(12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.pcmapp-view.active{opacity:1;transform:none;pointer-events:auto}

.pcmapp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pcmapp-hi small{display:block;font-size:11px;color:#9aa0ad}
.pcmapp-hi b{font-size:18px;color:#f2f3f7;font-weight:700;letter-spacing:-.02em}
.pcmapp-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;background:linear-gradient(135deg,#6ea8ff,#b98bff);box-shadow:0 4px 12px rgba(59,111,224,.35)}
.pcmapp-vtitle{font-size:19px;font-weight:800;color:#f2f3f7;letter-spacing:-.03em;margin-bottom:14px}

/* carte consultant */
.pcmapp-consult{display:flex;align-items:center;gap:11px;background:linear-gradient(135deg,#3b6fe0,#7c5cf0);border-radius:16px;padding:13px 14px;margin-bottom:12px;box-shadow:0 10px 24px rgba(59,111,224,.3)}
.pcmapp-consult .cav{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px}
.pcmapp-consult .ci{flex:1;color:#fff}
.pcmapp-consult .ci small{opacity:.8;font-size:10.5px;display:block}
.pcmapp-consult .ci b{font-size:14px;font-weight:600}
.pcmapp-consult .cbtn{width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.2);display:grid;place-items:center;color:#fff}

.pcmapp-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.pcmapp-kpi{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);border-radius:15px;padding:12px;box-shadow:0 2px 10px rgba(0,0,0,.25);position:relative}
.pcmapp-kpi .ki{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;margin-bottom:8px}
.pcmapp-kpi .ki svg{width:15px;height:15px}
.ki.blue{background:rgba(110,168,255,.15);color:#6ea8ff}.ki.green{background:rgba(16,185,129,.1);color:#10b981}
.ki.violet{background:rgba(139,92,246,.1);color:#8b5cf6}.ki.amber{background:rgba(245,158,11,.12);color:#f59e0b}
.pcmapp-kpi .num{font-size:20px;font-weight:800;color:#f2f3f7;letter-spacing:-.03em;line-height:1}
.pcmapp-kpi .lab{font-size:10.5px;color:#949bab;margin-top:3px}

.pcmapp-card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:14px;box-shadow:0 2px 10px rgba(0,0,0,.25);margin-bottom:10px}
.pcmapp-card .ct{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;font-weight:700;color:#f2f3f7;margin-bottom:9px}
.pcmapp-bar{height:7px;border-radius:100px;background:rgba(255,255,255,.12);overflow:hidden}
.pcmapp-bar i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,#6ea8ff,#b98bff);width:0;transition:width 1.1s var(--ease)}
.pcmapp-view.active .pcmapp-bar i.p60{width:60%}.pcmapp-view.active .pcmapp-bar i.p85{width:85%}.pcmapp-view.active .pcmapp-bar i.p35{width:35%}
.pcmapp-sub{font-size:10.5px;color:#949bab;margin-top:7px}
.pcmapp-slabel{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#98a2b3;margin:4px 2px 8px}

/* étapes projet */
.pcmapp-stage{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);border-radius:13px;padding:11px 13px;margin-bottom:8px;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.pcmapp-dot{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:grid;place-items:center}
.pcmapp-dot.done{background:#e7f7ef}.pcmapp-dot.prog{background:rgba(59,111,224,.14)}.pcmapp-dot.wait{background:#eef0f4}
.pcmapp-dot svg{width:12px;height:12px}
.pcmapp-stage .sl{font-size:13.5px;color:#f2f3f7;font-weight:600;flex:1}
.pcmapp-stage .ss{font-size:10px;padding:3px 9px;border-radius:100px;font-weight:600}
.ss.g{background:#e7f7ef;color:#1c9c66}.ss.b{background:rgba(110,168,255,.16);color:#8bb6ff}.ss.w{background:#eef0f4;color:#9aa0ad}.ss.a{background:#fff4e5;color:#e08a1e}

/* factures */
.pcmapp-inv{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:12px 13px;margin-bottom:8px;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.pcmapp-inv .il small{display:block;font-size:10px;color:#9aa0ad}
.pcmapp-inv .il b{font-size:14.5px;color:#f2f3f7;letter-spacing:-.02em}
.pcmapp-pay{margin-top:12px;width:100%;border:none;border-radius:14px;padding:14px;color:#fff;font-size:14.5px;font-weight:700;
  background:linear-gradient(135deg,#6ea8ff,#b98bff);box-shadow:0 10px 24px rgba(59,111,224,.4);cursor:pointer}

/* bottom nav interactive */
.pcmapp-tab{position:absolute;left:0;right:0;bottom:0;height:62px;background:rgba(16,16,24,.82);backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-around;align-items:center;padding:0 6px 6px;z-index:15}
.pcmapp-tab button{display:flex;flex-direction:column;align-items:center;gap:3px;color:#7c8494;font-size:8.5px;font-weight:600;background:none;border:none;cursor:pointer;padding:6px 4px;transition:color .2s}
.pcmapp-tab button svg{width:20px;height:20px}
.pcmapp-tab button.on{color:#6ea8ff}
.pcmapp-glow{position:absolute;inset:-2px;border-radius:56px;background:radial-gradient(60% 42% at 50% 0%,rgba(110,168,255,.28),transparent 68%);pointer-events:none;z-index:-1;filter:blur(4px)}

@media(max-width:900px){
  #app .pcmapp{grid-template-columns:1fr;gap:44px}
  .pcmapp-device{order:-1}
  .pcmapp-phone{width:272px;height:562px}
}

/* ── Mockup photoréaliste (image PSD composée) ── */
.pcmapp-mockup{width:100%;max-width:396px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 44px 80px rgba(0,0,0,.55));animation:pcmapp-floaty 8s ease-in-out infinite}
@keyframes pcmapp-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:900px){.pcmapp-mockup{max-width:300px}}