/* PME'Pulse — pages de service (chargé après home.css) */

/* ---------- Thème par page ---------- */
.svc-page { --hero-bg: var(--pp-yellow-soft); --accent: var(--pp-orange); --accent-2: var(--pp-blue); }
.theme-orange { --hero-bg: #FFB59E; --accent: var(--pp-yellow); --accent-2: var(--pp-blue); }
.theme-blue { --hero-bg: #A9C8FF; --accent: var(--pp-yellow); --accent-2: var(--pp-orange); }
.theme-mint { --hero-bg: #9FEBD3; --accent: var(--pp-orange); --accent-2: var(--pp-blue); }
.theme-cream { --hero-bg: var(--pp-cream); --accent: var(--pp-orange); --accent-2: var(--pp-mint); }
.theme-yellow { --hero-bg: var(--pp-yellow-soft); --accent: var(--pp-orange); --accent-2: var(--pp-blue); }
.theme-pink { --hero-bg: #FFC9DD; --accent: var(--pp-yellow); --accent-2: var(--pp-mint); }
.theme-lilac { --hero-bg: #D4C8FF; --accent: var(--pp-yellow); --accent-2: var(--pp-orange); }
.theme-sky { --hero-bg: #BFE8FF; --accent: var(--pp-orange); --accent-2: var(--pp-yellow); }

.svc-page .hero {
  background:
    radial-gradient(1100px 560px at 90% 0%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(800px 480px at 0% 100%, rgba(255, 255, 255, .35), transparent 60%),
    var(--hero-bg);
}
.svc-page .hero__grid--flip .stage { order: -1; }
.svc-page .rotator__swoosh path { stroke: var(--accent-2); }
.svc-page .hero__trust li::before { color: var(--pp-ink); }
.svc-page .hero__big { font-size: clamp(42px, 6vw, 84px); }
.svc-page .ticker { background: var(--pp-ink); }

/* Fil d'Ariane */
.crumbs { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; font-weight: 600; animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .45; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------- Décors : coupure de journal, anneaux, étoiles ---------- */
.clip {
  position: absolute; z-index: 1; pointer-events: none;
  width: 190px; padding: 14px 16px 16px;
  background: #FFFDF6;
  border: 2px solid var(--pp-ink);
  box-shadow: 4px 4px 0 rgba(14, 14, 16, .85);
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--pp-ink);
  clip-path: polygon(0 4%, 6% 0, 14% 3%, 24% 0, 36% 2%, 48% 0, 60% 3%, 72% 0, 84% 2%, 100% 0, 98% 30%, 100% 62%, 97% 100%, 82% 97%, 66% 100%, 50% 97%, 34% 100%, 18% 97%, 0 100%, 2% 60%);
  animation: float 10s ease-in-out infinite;
}
.clip b { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; border-bottom: 1.5px solid var(--pp-ink); padding-bottom: 6px; margin-bottom: 8px; }
.clip i { display: block; font-size: 17px; line-height: 1.15; font-weight: 700; font-style: italic; }
.clip u { display: block; height: 5px; margin-top: 7px; background: repeating-linear-gradient(90deg, rgba(14, 14, 16, .35) 0 70%, transparent 70% 100%); text-decoration: none; }
.clip u + u { width: 80%; }
.ring {
  position: absolute; z-index: 1; pointer-events: none;
  border-radius: 50%;
  border: 12px solid var(--accent-2);
  box-shadow: inset 0 0 0 3px var(--pp-ink), 0 0 0 3px var(--pp-ink);
  animation: float 12s ease-in-out infinite;
}
.spark { position: absolute; z-index: 1; pointer-events: none; animation: spin 16s linear infinite; }
.spark svg { display: block; width: 100%; height: 100%; }

/* ---------- Scènes (un visuel par page) ---------- */
.scene { position: relative; height: 520px; animation: rise 1s cubic-bezier(.2, .8, .2, 1) .45s both; }
.card {
  position: absolute; background: #fff;
  border: 3px solid var(--pp-ink); border-radius: 22px;
  box-shadow: 10px 10px 0 var(--pp-ink);
  overflow: hidden;
}
.tag {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; border-radius: 16px;
  background: #fff; border: 2.5px solid var(--pp-ink); box-shadow: 5px 5px 0 var(--pp-ink);
  font-size: 14px; font-weight: 700; line-height: 1.25;
  animation: bob 6s ease-in-out infinite;
}
.tag small { display: block; font-weight: 500; font-size: 12.5px; color: var(--pp-ink-3); }
.tag__ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: var(--accent); flex-shrink: 0; }

/* 1. Logo : plan de travail */
.sc-logo .board { inset: 20px 30px 90px 10px; transform: rotate(-2deg); background-color: #fff; background-image: linear-gradient(rgba(14,14,16,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14,14,16,.06) 1px, transparent 1px); background-size: 22px 22px; display: grid; place-items: center; }
.sc-logo .board svg { width: 62%; overflow: visible; }
.sc-logo .draw { fill: none; stroke: var(--pp-ink); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw-loop 6s ease-in-out infinite; }
.sc-logo .fillin { animation: fill-loop 6s ease-in-out infinite; }
.sc-logo .swatches { position: absolute; left: 30px; right: 60px; bottom: 6px; display: flex; gap: 12px; z-index: 3; }
.sc-logo .swatches span { flex: 1; height: 74px; border-radius: 16px; border: 2.5px solid var(--pp-ink); box-shadow: 4px 4px 0 var(--pp-ink); display: flex; align-items: flex-end; padding: 8px; font: 700 11px/1 var(--pp-font); animation: pop-loop 6s ease-in-out infinite; }
.sc-logo .swatches span:nth-child(1) { background: var(--pp-ink); color: #fff; }
.sc-logo .swatches span:nth-child(2) { background: var(--pp-yellow); animation-delay: .15s; }
.sc-logo .swatches span:nth-child(3) { background: var(--pp-orange); animation-delay: .3s; }
.sc-logo .swatches span:nth-child(4) { background: var(--pp-blue); color: #fff; animation-delay: .45s; }
.sc-logo .t1 { top: -6px; right: 0; }
.sc-logo .pen { position: absolute; z-index: 4; font-size: 44px; top: 40%; left: 46%; animation: pen 6s ease-in-out infinite; filter: drop-shadow(3px 3px 0 rgba(14,14,16,.8)); }

/* 2. Webdesign : maquette fil de fer -> design */
.sc-ux .desk { inset: 30px 70px 70px 0; }
.sc-ux .phone { width: 170px; height: 330px; right: 0; bottom: 10px; border-radius: 30px; }
.sc-ux .bar { height: 34px; border-bottom: 3px solid var(--pp-ink); background: var(--pp-cream); }
.sc-ux .ui { padding: 18px; display: grid; gap: 12px; }
.sc-ux .blk { height: 16px; border-radius: 8px; border: 2px dashed rgba(14,14,16,.35); background: transparent; animation: wire 5s ease-in-out infinite; }
.sc-ux .blk.big { height: 70px; --c: var(--accent-2); }
.sc-ux .blk.w70 { width: 70%; --c: var(--pp-ink); }
.sc-ux .blk.w50 { width: 50%; --c: #E6E2D6; }
.sc-ux .blk.btn { width: 120px; height: 34px; border-radius: 999px; --c: var(--pp-orange); }
.sc-ux .blk.c { --c: var(--pp-yellow); }
.sc-ux .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-ux .row .blk { height: 56px; }
.sc-ux .phone .ui { padding: 14px; gap: 10px; }
.sc-ux .phone .blk.big { height: 90px; }
.sc-ux .cursor { position: absolute; z-index: 4; font-size: 38px; animation: cursor 5s ease-in-out infinite; filter: drop-shadow(2px 2px 0 rgba(14,14,16,.8)); }
.sc-ux .t1 { top: 0; right: 40px; }

/* 3. Site vitrine : devanture */
.sc-shop .front { inset: 10px 20px 80px 10px; transform: rotate(1.5deg); }
.sc-shop .awning { height: 46px; border-bottom: 3px solid var(--pp-ink); background: repeating-linear-gradient(90deg, var(--accent-2) 0 34px, #fff 34px 68px); position: relative; }
.sc-shop .awning::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px; background: radial-gradient(circle at 17px 0, var(--accent-2) 16px, transparent 17px) 0 0 / 68px 14px repeat-x; }
.sc-shop .sign { margin: 26px 22px 0; padding: 12px 16px; border: 3px solid var(--pp-ink); border-radius: 14px; background: var(--pp-yellow); font-weight: 900; font-size: 22px; letter-spacing: -.02em; text-align: center; }
.sc-shop .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 22px; }
.sc-shop .tiles span { aspect-ratio: 1; border-radius: 14px; border: 2.5px solid var(--pp-ink); display: grid; place-items: center; font-size: 30px; background: var(--pp-cream); animation: bob 5s ease-in-out infinite; }
.sc-shop .tiles span:nth-child(2) { animation-delay: -1.5s; }
.sc-shop .tiles span:nth-child(3) { animation-delay: -3s; }
.sc-shop .open { position: absolute; top: 72px; right: 26px; z-index: 3; padding: 6px 12px; border-radius: 8px; background: var(--pp-mint); border: 2.5px solid var(--pp-ink); font-weight: 900; font-size: 13px; transform: rotate(8deg); animation: swing 3s ease-in-out infinite; transform-origin: top center; }
.sc-shop .t1 { bottom: 10px; left: 0; }
.sc-shop .t2 { bottom: 40px; right: 0; animation-delay: -2s; }

/* 4. E-commerce : produits + panier */
.sc-shopify .store { inset: 30px 20px 60px 0; }
.sc-shopify .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px; }
.sc-shopify .prod { border: 2.5px solid var(--pp-ink); border-radius: 16px; padding: 12px; background: #fff; }
.sc-shopify .prod i { display: grid; place-items: center; height: 88px; border-radius: 12px; background: var(--pp-cream); font-style: normal; font-size: 40px; }
.sc-shopify .prod b { display: block; margin-top: 8px; font-size: 13px; }
.sc-shopify .prod em { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-style: normal; font-weight: 800; font-size: 14px; }
.sc-shopify .prod em span { padding: 4px 10px; border-radius: 999px; background: var(--pp-ink); color: #fff; font-size: 11px; }
.sc-shopify .cart { position: absolute; top: 0; right: 0; z-index: 4; width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; font-size: 34px; background: var(--pp-yellow); border: 3px solid var(--pp-ink); box-shadow: 5px 5px 0 var(--pp-ink); animation: shake 2.4s ease-in-out infinite; }
.sc-shopify .cart b { position: absolute; top: -10px; right: -10px; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--pp-orange); color: #fff; border: 2.5px solid var(--pp-ink); font-size: 14px; }
.sc-shopify .t1 { bottom: 0; left: -10px; }
.sc-shopify .coin { position: absolute; z-index: 3; font-size: 28px; animation: coin 3s ease-in infinite; }

/* 5. Page de vente : entonnoir */
.sc-funnel .funnel { position: absolute; inset: 40px 40px 60px 20px; display: grid; gap: 14px; justify-items: center; align-content: center; }
.sc-funnel .lvl { height: 86px; border: 3px solid var(--pp-ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--pp-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 16px; font-weight: 900; font-size: 18px; text-align: center; position: relative; z-index: 2; }
.sc-funnel .lvl small { font-size: 12.5px; font-weight: 600; opacity: .75; line-height: 1.2; }
.sc-funnel .l1 { width: 100%; background: #fff; }
.sc-funnel .l2 { width: 76%; background: var(--pp-yellow); }
.sc-funnel .l3 { width: 58%; background: var(--pp-orange); color: #fff; }
.sc-funnel .drop { position: absolute; z-index: 3; width: 16px; height: 16px; border-radius: 50%; background: var(--pp-ink); border: 2px solid #fff; animation: drop 3.6s cubic-bezier(.5, 0, .6, 1) infinite; }
.sc-funnel .t1 { right: -10px; bottom: 0; }

/* 6. SEO : page de résultats Google */
.sc-serp .serp { inset: 20px 10px 60px 10px; padding: 20px; }
.sc-serp .q { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 999px; border: 2.5px solid var(--pp-ink); font-weight: 600; font-size: 14px; }
.sc-serp .res { position: relative; height: 300px; margin-top: 18px; }
.sc-serp .r { position: absolute; left: 0; right: 0; height: 64px; padding: 10px 14px; border-radius: 14px; border: 2px solid #E6E2D6; background: #fff; }
.sc-serp .r i { display: block; height: 10px; width: 40%; border-radius: 6px; background: #DAD6CA; }
.sc-serp .r u { display: block; margin-top: 8px; height: 14px; width: 75%; border-radius: 6px; background: var(--pp-blue); opacity: .55; text-decoration: none; }
.sc-serp .r:nth-child(1) { top: 0; animation: serp-down 7s ease-in-out infinite; }
.sc-serp .r:nth-child(2) { top: 76px; animation: serp-down 7s ease-in-out infinite; }
.sc-serp .r:nth-child(3) { top: 152px; animation: serp-down 7s ease-in-out infinite; }
.sc-serp .r.me { top: 228px; border: 3px solid var(--pp-ink); background: var(--pp-yellow); box-shadow: 5px 5px 0 var(--pp-ink); animation: serp-up 7s ease-in-out infinite; z-index: 2; font-weight: 800; font-size: 14px; }
.sc-serp .r.me span { display: block; font-size: 12px; font-weight: 600; opacity: .7; }
.sc-serp .medal { position: absolute; z-index: 4; top: 120px; right: -6px; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; background: var(--pp-orange); color: #fff; border: 3px solid var(--pp-ink); box-shadow: 4px 4px 0 var(--pp-ink); font-weight: 900; font-size: 26px; animation: medal 7s ease-in-out infinite; }
.sc-serp .t1 { bottom: 0; left: 0; }

/* 7. Meta Ads : publication sponsorisée */
.sc-meta .phone { width: 280px; height: 470px; left: 50%; top: 10px; margin-left: -150px; border-radius: 36px; transform: rotate(-4deg); }
.sc-meta .post-h { display: flex; align-items: center; gap: 10px; padding: 16px; border-bottom: 2px solid #EEE9DC; font-size: 13px; font-weight: 800; }
.sc-meta .post-h i { width: 36px; height: 36px; border-radius: 50%; background: var(--pp-yellow); border: 2px solid var(--pp-ink); font-style: normal; display: grid; place-items: center; }
.sc-meta .post-h small { display: block; font-weight: 500; color: var(--pp-ink-3); }
.sc-meta .visual { height: 250px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-2), var(--pp-orange)); border-bottom: 2px solid var(--pp-ink); }
.sc-meta .visual span { padding: 12px 18px; border-radius: 14px; background: #fff; border: 3px solid var(--pp-ink); font-weight: 900; font-size: 20px; transform: rotate(-4deg); }
.sc-meta .cta-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-size: 13px; font-weight: 800; }
.sc-meta .cta-row span { padding: 7px 12px; border-radius: 10px; background: var(--pp-ink); color: #fff; }
.sc-meta .reacts { padding: 0 16px; font-size: 20px; letter-spacing: 6px; }
.sc-meta .heart { position: absolute; z-index: 4; font-size: 30px; animation: heart 4s ease-out infinite; }
.sc-meta .t1 { right: -6px; bottom: 30px; }
.sc-meta .t2 { left: -6px; top: 60px; animation-delay: -3s; }

/* 8. Google Ads : recherche + annonce */
.sc-gads .box { inset: 30px 10px 90px 10px; padding: 26px 22px; }
.sc-gads .search { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 999px; border: 3px solid var(--pp-ink); font-weight: 600; font-size: 16px; min-height: 56px; }
.sc-gads .search b { flex: 1; font-weight: 600; }
.sc-gads .caret { width: 2px; height: 22px; background: var(--pp-ink); animation: blink 1s steps(1) infinite; }
.sc-gads .ad { margin-top: 22px; padding: 16px; border-radius: 16px; border: 3px solid var(--pp-ink); background: var(--pp-cream); box-shadow: 5px 5px 0 var(--pp-ink); animation: ad-in 6s ease-in-out infinite; }
.sc-gads .ad small { font-weight: 800; font-size: 12px; }
.sc-gads .ad strong { display: block; margin-top: 6px; font-size: 19px; color: #1A47C9; line-height: 1.25; }
.sc-gads .ad p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--pp-ink-2); }
.sc-gads .muted { margin-top: 16px; display: grid; gap: 10px; opacity: .55; }
.sc-gads .muted i { display: block; height: 12px; border-radius: 6px; background: #DAD6CA; }
.sc-gads .muted i:nth-child(2) { width: 70%; }
.sc-gads .click { position: absolute; z-index: 4; font-size: 38px; left: 46%; top: 52%; animation: click 6s ease-in-out infinite; filter: drop-shadow(2px 2px 0 rgba(14,14,16,.8)); }
.sc-gads .t1 { bottom: 4px; right: 0; }
.sc-gads .t2 { bottom: 30px; left: 0; animation-delay: -2.5s; }

/* ---------- Sections des pages de service ---------- */
.why { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.why p { margin: 20px 0 0; }
.why__cards { display: grid; gap: 16px; }
.why__card { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 22px; border-radius: 20px; background: #fff; border: 2.5px solid var(--pp-ink); box-shadow: 6px 6px 0 var(--accent-card, var(--pp-yellow)); }
.why__card:nth-child(2) { --accent-card: var(--pp-orange); }
.why__card:nth-child(3) { --accent-card: var(--pp-blue); }
.why__card span { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--pp-cream); border: 2px solid var(--pp-ink); }
.why__card h3 { margin: 0; font-size: 18.5px; font-weight: 800; line-height: 1.3; }
.why__card p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--pp-ink-2); }

.incl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.incl__item { position: relative; padding: 28px 24px; border-radius: 22px; background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .18); transition: transform .25s ease, border-color .25s ease; }
.incl__item:hover { transform: translateY(-6px) rotate(-.6deg); border-color: var(--pp-yellow); }
.incl__item::before { content: "✓"; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pp-yellow); color: var(--pp-ink); font-weight: 900; }
.incl__item h3 { margin: 16px 0 0; font-size: 18px; font-weight: 800; color: #fff; }
.incl__item p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .72); }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.rel { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 22px; border: 2.5px solid var(--pp-ink); background: #fff; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.rel:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--pp-ink); }
.rel span { font-size: 30px; }
.rel h3 { margin: 0; font-size: 19px; font-weight: 800; }
.rel p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--pp-ink-2); }
.rel b { margin-top: auto; font-size: 14px; }

.svc-page .section--accent { background: var(--hero-bg); }

/* ---------- Animations des scènes ---------- */
@keyframes draw-loop { 0% { stroke-dashoffset: 900; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 900; } }
@keyframes fill-loop { 0%, 40% { opacity: 0; transform: scale(.6); } 55%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pop-loop { 0%, 50% { transform: translateY(0); } 58% { transform: translateY(-14px); } 66%, 100% { transform: translateY(0); } }
@keyframes pen { 0% { transform: translate(-120px, 60px) rotate(-10deg); } 25% { transform: translate(40px, -90px) rotate(6deg); } 45% { transform: translate(110px, 40px) rotate(-6deg); } 70% { transform: translate(-30px, 20px); } 100% { transform: translate(-120px, 60px) rotate(-10deg); } }
@keyframes wire { 0%, 35% { background: transparent; border-color: rgba(14,14,16,.35); border-style: dashed; } 50%, 85% { background: var(--c, var(--pp-yellow)); border-color: var(--pp-ink); border-style: solid; } 100% { background: transparent; border-color: rgba(14,14,16,.35); border-style: dashed; } }
@keyframes cursor { 0% { left: 20%; top: 70%; } 30% { left: 52%; top: 28%; } 38% { transform: scale(.85); } 44% { transform: none; } 70% { left: 78%; top: 62%; } 100% { left: 20%; top: 70%; } }
@keyframes swing { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-6deg); } }
@keyframes shake { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-10deg) scale(1.08); } 85% { transform: rotate(8deg) scale(1.08); } }
@keyframes coin { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(60px, -160px) scale(1.1) rotate(180deg); } }
@keyframes drop { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--dx, 0), 330px); opacity: 0; } }
@keyframes serp-up { 0%, 15% { top: 228px; } 45%, 85% { top: 0; } 100% { top: 228px; } }
@keyframes serp-down { 0%, 15% { transform: translateY(0); } 45%, 85% { transform: translateY(76px); } 100% { transform: translateY(0); } }
@keyframes medal { 0%, 40% { transform: scale(0) rotate(-90deg); } 50%, 85% { transform: scale(1) rotate(0); } 100% { transform: scale(0); } }
@keyframes heart { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--hx, 20px), -220px) scale(1.2); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes ad-in { 0%, 30% { opacity: 0; transform: translateY(16px); } 40%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes click { 0%, 40% { transform: translate(80px, 90px); } 55% { transform: translate(0, 0); } 60% { transform: scale(.8); } 65%, 90% { transform: none; } 100% { transform: translate(80px, 90px); } }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .svc-page .hero__grid--flip .stage { order: 0; }
  .scene { height: 470px; max-width: 540px; width: 100%; margin: 0 auto; }
  .why { grid-template-columns: 1fr; gap: 40px; }
  .incl, .related { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .scene { height: 400px; }
  .card { box-shadow: 7px 7px 0 var(--pp-ink); }
  .incl, .related { grid-template-columns: 1fr; }
  .clip, .spark { display: none; }
  .sc-meta .phone { width: 240px; height: 390px; margin-left: -120px; }
  .sc-meta .visual { height: 190px; }
  .sc-ux .phone { width: 130px; height: 260px; }
  .sc-ux .desk { right: 50px; }
  .sc-funnel .lvl { height: 70px; font-size: 16px; }
  .sc-shopify .prod i { height: 60px; font-size: 30px; }
  .sc-serp .res { height: 280px; }
  .sc-logo .swatches span { height: 56px; }
}

/* ---------- Réalisations ---------- */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 52px; }
.project {
  display: flex; flex-direction: column;
  border: 3px solid var(--pp-ink); border-radius: 26px; overflow: hidden;
  background: #fff; text-decoration: none; color: var(--pp-ink);
  box-shadow: 8px 8px 0 var(--pp-ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.project:nth-child(4n+2) { --pc: var(--pp-orange); }
.project:nth-child(4n+3) { --pc: var(--pp-blue); }
.project:nth-child(4n+4) { --pc: var(--pp-mint); }
.project:hover { transform: translate(-4px, -4px) rotate(-.4deg); box-shadow: 12px 12px 0 var(--pc, var(--pp-yellow)); }
.project__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 3px solid var(--pp-ink); background: var(--pp-cream); }
.project__bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--pp-ink); }
.project__bar i:nth-child(1) { background: var(--pp-orange); }
.project__bar i:nth-child(2) { background: var(--pp-yellow); }
.project__bar i:nth-child(3) { background: var(--pp-mint); }
.project__bar span { margin-left: 8px; flex: 1; padding: 4px 12px; border-radius: 999px; background: #fff; border: 2px solid var(--pp-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project__shot { position: relative; overflow: hidden; aspect-ratio: 12 / 5; border-bottom: 3px solid var(--pp-ink); }
.project__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.project:hover .project__shot img { transform: scale(1.05); }
.project__body { padding: 24px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.project__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.project__tags span { padding: 5px 12px; border-radius: 999px; border: 2px solid var(--pp-ink); font-size: 12.5px; font-weight: 700; background: var(--pc, var(--pp-yellow)); }
.project h3 { margin: 4px 0 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
.project p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--pp-ink-2); }
.project__go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.project__go svg { width: 18px; height: 18px; transition: transform .2s ease; }
.project:hover .project__go svg { transform: translate(3px, -3px); }

/* Scène : captures en éventail */
.sc-work .shot { position: absolute; width: 78%; aspect-ratio: 12 / 5; border-radius: 18px; overflow: hidden; border: 3px solid var(--pp-ink); box-shadow: 8px 8px 0 var(--pp-ink); background: #fff; animation: bob 7s ease-in-out infinite; }
.sc-work .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sc-work .s1 { top: 0; left: 0; rotate: -6deg; }
.sc-work .s2 { top: 120px; right: 0; rotate: 4deg; animation-delay: -2s; }
.sc-work .s3 { top: 250px; left: 4%; rotate: -2deg; animation-delay: -4s; }
.sc-work .s4 { top: 370px; right: 6%; rotate: 5deg; animation-delay: -5.5s; }
.sc-work .t1 { top: -10px; right: 0; z-index: 5; }
@media (max-width: 900px) { .projects { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .sc-work .shot { width: 86%; } .sc-work .s2 { top: 90px; } .sc-work .s3 { top: 190px; } .sc-work .s4 { top: 280px; } }

/* ---------- Résultats publicitaires ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 48px; }
.stat {
  padding: 24px 20px; border-radius: 22px;
  background: #fff; border: 3px solid var(--pp-ink); box-shadow: 6px 6px 0 var(--sc, var(--pp-ink));
}
.stat:nth-child(2) { --sc: var(--pp-orange); }
.stat:nth-child(3) { --sc: var(--pp-blue); }
.stat:nth-child(4) { --sc: var(--pp-mint); }
.stat:nth-child(5) { --sc: var(--pp-yellow); }
.stat b { display: block; font-weight: 900; font-size: clamp(30px, 3vw, 42px); line-height: 1; letter-spacing: -.03em; }
.stat span { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.45; font-weight: 600; }
.stat small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--pp-ink-3); }
.proofs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; align-items: start; }
.proof { margin: 0; border: 3px solid var(--pp-ink); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 6px 6px 0 var(--pp-ink); }
.proof--wide { grid-column: 1 / -1; }
.proof a { display: block; }
.proof img { width: 100%; height: auto; }
.proof figcaption { padding: 12px 16px; border-top: 2px solid var(--pp-ink); font-size: 14px; font-weight: 700; background: var(--pp-cream); }
.results__note { margin-top: 22px; font-size: 13.5px; color: var(--pp-ink-2); }
@media (max-width: 1020px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .proofs { grid-template-columns: 1fr; } }

@media (max-width: 640px) {
  .svc-page .hero__big { font-size: clamp(38px, 11vw, 48px); }
  .crumbs { font-size: 12.5px; margin-bottom: 14px; }
  .scene { height: 360px; }
  .why { gap: 32px; }
  .why__card { padding: 18px; gap: 14px; box-shadow: 4px 4px 0 var(--accent-card, var(--pp-yellow)); }
  .why__card span { width: 44px; height: 44px; font-size: 21px; }
  .stats { gap: 10px; margin-top: 32px; }
  .stat { padding: 18px 16px; box-shadow: 4px 4px 0 var(--sc, var(--pp-ink)); }
  .stat b { font-size: 28px; }
  .stat span { font-size: 13.5px; }
  .proofs { gap: 16px; margin-top: 28px; }
  .project__body { padding: 18px 18px 20px; }
  .project { box-shadow: 6px 6px 0 var(--pp-ink); }
  .sc-work .s1 { top: 0; } .sc-work .s2 { top: 80px; } .sc-work .s3 { top: 165px; } .sc-work .s4 { top: 245px; }
  .sc-meta .phone { height: 340px; }
  .sc-meta .visual { height: 160px; }
  .sc-gads .box { inset: 20px 0 80px 0; padding: 18px 14px; }
  .sc-gads .search { font-size: 14px; padding: 10px 14px; min-height: 46px; }
  .sc-serp .serp { inset: 10px 0 50px 0; padding: 14px; }
  .sc-serp .res { height: 260px; }
  .sc-shop .front { inset: 10px 6px 70px 6px; }
  .sc-shopify .store { inset: 30px 6px 50px 0; }
  .sc-shopify .grid { gap: 10px; padding: 12px; }
  .sc-shopify .prod { padding: 8px; }
  .sc-shopify .prod b { font-size: 11.5px; }
  .sc-funnel .funnel { inset: 20px 6px 60px 6px; }
  .sc-logo .board { inset: 20px 10px 90px 0; }
  .sc-logo .swatches { left: 10px; right: 10px; }
  .sc-ux .desk { inset: 30px 60px 60px 0; }
  .tag { font-size: 12.5px; padding: 8px 11px; gap: 8px; box-shadow: 3px 3px 0 var(--pp-ink); }
  .tag__ico { width: 30px; height: 30px; font-size: 15px; }
  .tag small { font-size: 11px; }
}
@media (max-width: 640px) {
  .sc-meta .visual span { font-size: 16px; padding: 9px 13px; }
  .sc-meta .post-h { padding: 12px; font-size: 12px; }
  .sc-meta .cta-row { font-size: 11px; padding: 10px 12px; }
  .sc-meta .reacts { font-size: 16px; }
}
@media (max-width: 640px) {
  .incl, .related { display: flex; margin-top: 32px; }
  .incl__item h3 { font-size: 17px; }
}

/* ---------- Hero : cadre des décors et grands écrans ---------- */
.hero__deco { position: absolute; top: 0; bottom: 0; left: 0; right: 0; max-width: 1480px; margin: 0 auto; pointer-events: none; z-index: 1; }
@media (min-width: 1280px) {
  .hero .wrap { max-width: 1400px; }
  .hero__grid { gap: 72px; }
  .svc-page .hero__grid { grid-template-columns: 1fr 1fr; }
  .scene { height: 560px; }
}
@media (min-width: 1600px) {
  .hero .wrap { max-width: 1480px; }
  .svc-page .hero__big { font-size: 92px; }
  .scene { height: 600px; }
}

/* Google Ads : résultats naturels sous l'annonce */
.sc-gads .box { inset: 20px 10px 70px 10px; }
.sc-gads .muted { margin-top: 18px; display: grid; gap: 16px; opacity: 1; }
.sc-gads .muted > div { display: grid; gap: 7px; padding: 0 4px; }
.sc-gads .muted i { display: block; height: 9px; width: 34%; border-radius: 6px; background: #DAD6CA; }
.sc-gads .muted b { display: block; height: 13px; width: 72%; border-radius: 6px; background: #1A47C9; opacity: .35; }
.sc-gads .muted i + b + i { width: 88%; height: 9px; }
.sc-gads .t1 { bottom: -6px; right: 0; }
.sc-gads .t2 { bottom: 26px; left: -14px; }
@media (max-width: 640px) { .sc-gads .muted > div:nth-child(3) { display: none; } }
.sc-shopify .store { inset: 40px 20px auto 0; }
@media (max-width: 640px) { .sc-shopify .store { inset: 30px 6px auto 0; } }
@media (min-width: 1280px) {
  .sc-meta .phone { width: 320px; height: 540px; margin-left: -170px; }
  .sc-meta .visual { height: 300px; }
  .sc-meta .visual span { font-size: 24px; }
}

/* Le titre du hero s'adapte aussi à la hauteur de l'écran (portables 768 px) */
@media (min-width: 1021px) {
  .hero { padding-top: calc(var(--pp-header-h) + 28px); padding-bottom: 72px; }
  .hero__big, .svc-page .hero__big { font-size: clamp(40px, min(6vw, 8.6vh), 92px); }
  body:not(.svc-page) .hero__big { font-size: clamp(36px, min(6vw, 8.6vh, 10.4cqi), 92px); }
  .hero__kicker { font-size: clamp(17px, min(1.6vw, 2.6vh), 24px); margin-bottom: 10px; }
  .hero h1 { margin-top: 18px; }
  .hero__sub { margin-top: 20px; font-size: clamp(16px, min(1.25vw, 2.1vh), 19px); }
  .hero__ctas { margin-top: 24px; }
  .hero__trust { margin-top: 18px; }
  .crumbs { margin-bottom: 12px; }
  .scene { height: min(560px, 68vh); }
}

/* ---------- Pages locales ---------- */
.loc-h3 { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.loc-h3 + .loc-links { margin-bottom: 28px; }
.loc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.loc-links a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px; text-decoration: none; border-bottom: 2px solid var(--pp-yellow); }
.loc-links a::before { content: "→"; color: var(--pp-orange); }
.loc-links a:hover { border-color: var(--pp-ink); }
.loc-links--cols { grid-template-columns: repeat(3, 1fr); margin-top: 32px; }
.related--8 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .related--8 { grid-template-columns: 1fr 1fr; } .loc-links--cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .loc-links--cols { grid-template-columns: 1fr; } .related--8 { display: flex; } }