/* ============================================================
   PHONOMAKER — PAGE CASSETTES
   Feuille de style dédiée, chargée uniquement sur le template
   « Cassettes ». Tout est scopé sous .pm-k7 → zéro fuite sur
   Divi ou le reste du site.

   Structure de la page :
     .pm-k7                  ← wrapper + tokens + fond crème
       .pm-global-header     ← header partagé (inc/pm-header.php)
       .k7-main              ← compense le header fixe
         section (hero)
         .k7-subnav          ← sous-nav collante scroll-spy
         section#pack … #faq
       footer                ← footer partagé (inc/pm-footer.php)

   Palette canonique Phonomaker :
     crème #F0E7D2 · encre #1A1815 · blanc cassé #EEEFF1
     orange #CF3417 · bleu #1B4082 · cyan #6BB0C5
   ============================================================ */

/* ---------- POLICES (locales) ---------- */
@font-face {
  font-family: "Impact";
  src: url("./fonts/Impact.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Highest Praise";
  src: url("./fonts/HighestPraise-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ============================================================
   1. TOKENS + BASE
   ============================================================ */
.pm-k7 {
  --pm-ink:        #1A1815;
  --pm-ink-80:     #3D403F;
  --pm-ink-60:     #6B6E6D;
  --pm-ink-40:     #9A9C9B;
  --pm-paper:      #F0E7D2;
  --pm-paper-2:    #E5DAC2;
  --pm-white:      #EEEFF1;
  --pm-orange:     #CF3417;
  --pm-blue:       #1B4082;
  --pm-cyan:       #6BB0C5;

  --pm-font-display: "Impact", "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --pm-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pm-font-script:  "Highest Praise", "Caveat", "Bradley Hand", cursive;

  --pm-h:      60px;   /* hauteur du header global fixe */
  --k7-subnav: 52px;   /* hauteur de la sous-nav collante */
  --k7-pad:    clamp(20px, 4vw, 60px);

  background: var(--pm-paper);
  color: var(--pm-ink);
  font-family: var(--pm-font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;            /* coupe le débordement sans casser sticky */
}
.pm-k7 *, .pm-k7 *::before, .pm-k7 *::after { box-sizing: border-box; }
.pm-k7 a { color: inherit; }
.pm-k7 img { max-width: 100%; }
.pm-k7 ::selection { background: var(--pm-orange); color: var(--pm-paper); }

/* compense le header fixe */
.pm-k7 .k7-main { padding-top: var(--pm-h); }

/* ancres : compense header + sous-nav collante */
.pm-k7 [id] { scroll-margin-top: calc(var(--pm-h) + var(--k7-subnav) + 12px); }

/* correctif Divi haute-spécificité (filet de sécurité) */
.pm-k7 h1, .pm-k7 h2, .pm-k7 h3, .pm-k7 h4 {
  color: inherit; padding-bottom: 0; margin-top: 0;
}

/* ---------- conteneur & sections ---------- */
.pm-k7 .k7-wrap { max-width: 1240px; margin: 0 auto; }
.pm-k7 .k7-sec {
  position: relative; isolation: isolate;
  padding: clamp(56px, 8vw, 88px) var(--k7-pad) clamp(64px, 9vw, 96px);
}
.pm-k7 .k7-sec--paper { background: var(--pm-paper); }
.pm-k7 .k7-sec--ink   { background: var(--pm-ink);  color: var(--pm-white); }
.pm-k7 .k7-sec--blue  { background: var(--pm-blue); color: var(--pm-white); }

/* grain feTurbulence sur chaque section (identique à l'univers Vinyle) */
.pm-k7 .k7-sec::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pm-k7 .k7-sec--ink::before,
.pm-k7 .k7-sec--blue::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pm-k7 .k7-sec > * { position: relative; z-index: 1; }

/* ---------- typographie ---------- */
.pm-k7 .k7-eyebrow {
  display: inline-block;
  font: 600 12px/1 var(--pm-font-body);
  letter-spacing: .14em; text-transform: uppercase;
}
.pm-k7 .k7-h2 {
  font-family: var(--pm-font-display); font-weight: 400;
  font-size: clamp(40px, 6.2vw, 78px); line-height: .86;
  text-transform: uppercase; margin: 10px 0 0;
}
.pm-k7 .k7-h2--sm { font-size: clamp(36px, 5.4vw, 66px); line-height: .88; }
.pm-k7 .k7-script {
  font-family: var(--pm-font-script);
  font-size: clamp(22px, 2.6vw, 30px);
  transform: rotate(-3deg); display: inline-block;
}
.pm-k7 .k7-lede {
  font-weight: 300; font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6; margin: 0;
}

/* ---------- en-tête de section (titre + chapô côte à côte) ---------- */
.pm-k7 .k7-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(20px, 4vw, 40px); flex-wrap: wrap;
}
.pm-k7 .k7-head .k7-lede { max-width: 420px; }

/* ---------- boutons ---------- */
.pm-k7 .k7-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--pm-font-body); font-weight: 600; font-size: 15px; line-height: 1.15;
  padding: 15px 26px; border: 1.5px solid var(--pm-ink); border-radius: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: transparent; color: inherit;
  transition: transform .15s cubic-bezier(.22,.61,.36,1), box-shadow .15s cubic-bezier(.22,.61,.36,1);
}
.pm-k7 .k7-btn--fill {
  background: var(--pm-orange); color: var(--pm-white);
  border-color: var(--pm-orange); box-shadow: 3px 3px 0 0 var(--pm-ink);
}
.pm-k7 .k7-btn--ink {
  background: var(--pm-ink); color: var(--pm-white);
  border-color: var(--pm-ink); box-shadow: 3px 3px 0 0 var(--pm-orange);
}
.pm-k7 .k7-btn--ghost { box-shadow: 3px 3px 0 0 var(--pm-ink); }
.pm-k7 .k7-btn--light { border-color: var(--pm-white); color: var(--pm-white); }
.pm-k7 .k7-btn:hover { transform: translate(-2px, -2px); }
.pm-k7 .k7-btn--fill:hover  { box-shadow: 5px 5px 0 0 var(--pm-ink); }
.pm-k7 .k7-btn--ink:hover   { box-shadow: 5px 5px 0 0 var(--pm-orange); }
.pm-k7 .k7-btn--ghost:hover { box-shadow: 5px 5px 0 0 var(--pm-ink); }
.pm-k7 .k7-btn:active { transform: translate(0, 0); }

/* ---------- cartes risographiées ---------- */
.pm-k7 .k7-card {
  background: var(--pm-white); border: 1.5px solid var(--pm-ink);
  box-shadow: 4px 4px 0 0 var(--pm-ink); color: var(--pm-ink);
}
.pm-k7 .k7-card--lg { box-shadow: 5px 5px 0 0 var(--pm-ink); }
.pm-k7 .k7-card__body { padding: 20px 20px 24px; }
.pm-k7 .k7-card__title {
  font-family: var(--pm-font-display); font-weight: 400;
  font-size: clamp(19px, 1.8vw, 24px); text-transform: uppercase; line-height: 1;
}
.pm-k7 .k7-card p { font-weight: 300; font-size: 14px; line-height: 1.55; margin: 8px 0 0; }
.pm-k7 .k7-card__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-bottom: 1.5px solid var(--pm-ink); background: var(--pm-paper-2); }

/* ---------- grilles ---------- */
.pm-k7 .k7-grid   { display: grid; gap: clamp(14px, 1.6vw, 18px); }
.pm-k7 .k7-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pm-k7 .k7-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pm-k7 .k7-grid-4 { grid-template-columns: repeat(4, 1fr); }
.pm-k7 .k7-grid-6 { grid-template-columns: repeat(6, 1fr); gap: 14px; }

/* ============================================================
   2. HERO
   ============================================================ */
.pm-k7 .k7-hero {
  position: relative; overflow: hidden; background: var(--pm-paper);
  padding: clamp(40px, 6vw, 56px) var(--k7-pad);
}
.pm-k7 .k7-hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.04fr .96fr;
  gap: clamp(24px, 3vw, 40px); align-items: center;
  min-height: 620px; max-width: 1240px; margin: 0 auto;
}
.pm-k7 .k7-hero h1 {
  font-family: var(--pm-font-display); font-weight: 400;
  font-size: clamp(58px, 9vw, 118px); line-height: .82;
  letter-spacing: -.02em; text-transform: uppercase; margin: 16px 0 0;
}
.pm-k7 .k7-hero h1 .k7-outline {
  -webkit-text-stroke: 2.5px var(--pm-orange); color: transparent;
}
.pm-k7 .k7-hero-script {
  font-family: var(--pm-font-script); font-size: clamp(24px, 2.6vw, 30px);
  color: var(--pm-blue); transform: rotate(-3deg); margin: 14px 0 0;
  transform-origin: left center;
}
.pm-k7 .k7-hero p { font-weight: 300; font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55; max-width: 400px; margin: 16px 0 26px; }
.pm-k7 .k7-hero-facts {
  display: grid; grid-template-columns: repeat(3, auto); gap: 0 clamp(16px, 2vw, 26px);
  justify-content: start; margin: 34px 0 0;
  border-top: 1.5px solid var(--pm-ink); padding-top: 14px;
}
.pm-k7 .k7-fact-n {
  font-family: var(--pm-font-display); font-weight: 400;
  font-size: clamp(22px, 2.3vw, 30px); line-height: 1;
}
.pm-k7 .k7-fact-l { font-weight: 300; font-size: 12.5px; }

/* blobs + grain du hero */
.pm-k7 .k7-blob { position: absolute; z-index: 0; mix-blend-mode: multiply; pointer-events: none; }
.pm-k7 .k7-hero-grain {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  opacity: .55; z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* cassette flottante */
.pm-k7 .k7-hero-visual { position: relative; height: clamp(320px, 42vw, 560px); }
.pm-k7 .k7-k7-float {
  position: absolute; left: 47%; top: 42%; width: 96%;
  transform: translate(-50%, -50%); z-index: 1;
}
.pm-k7 .k7-k7-inner {
  position: relative; --rot: -4deg; transform: rotate(-4deg);
  animation: k7Float 7s ease-in-out infinite;
}
.pm-k7 .k7-k7-inner > img {
  position: relative; z-index: 1; width: 100%; display: block;
  filter: drop-shadow(14px 18px 0 rgba(26,24,21,.32));
}
.pm-k7 .k7-reel {
  position: absolute; width: 10.6%; aspect-ratio: 1/1;
  transform: translate(-50%, -50%); z-index: 0;
}
.pm-k7 .k7-reel--l { left: 29.6%; top: 45.3%; }
.pm-k7 .k7-reel--r { left: 70.5%; top: 45.4%; }
.pm-k7 .k7-reel svg { width: 100%; height: 100%; display: block;
  animation: k7Spin 3.6s linear infinite; transform-origin: 50% 50%; }

.pm-k7 .k7-star { position: absolute; left: -2%; top: 2%; width: clamp(48px, 6vw, 78px);
  transform: rotate(-12deg); z-index: 3; }
.pm-k7 .k7-annot {
  position: absolute; right: 2%; bottom: 2%; z-index: 3;
  display: flex; align-items: flex-end; gap: 6px;
}
.pm-k7 .k7-annot span {
  font-family: var(--pm-font-script); font-size: clamp(19px, 2vw, 26px);
  transform: rotate(-4deg); text-align: right; line-height: 1.15; max-width: 190px;
}
.pm-k7 .k7-annot img { width: clamp(52px, 6vw, 74px); transform: rotate(-142deg); }

@keyframes k7Spin  { to { transform: rotate(360deg); } }
@keyframes k7Float { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); }
                     50%     { transform: translateY(-13px) rotate(var(--rot,0deg)); } }
@keyframes k7Fade  { from { opacity: 0; transform: translateY(10px); }
                     to   { opacity: 1; transform: translateY(0); } }

/* ============================================================
   3. SOUS-NAV COLLANTE (scroll-spy) — calquée sur la page Studio
   ============================================================ */
.pm-k7 .k7-subnav {
  position: sticky; top: var(--pm-h); z-index: 55;
  background: rgba(240,231,210,.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1.5px solid var(--pm-ink);
  border-bottom: 1.5px solid var(--pm-ink);
}
.pm-k7 .k7-subnav-in {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px; padding: 0 var(--k7-pad);
}
.pm-k7 .k7-subnav-label {
  flex: none; padding: 16px 0;
  font: 700 10px/1 var(--pm-font-body);
  letter-spacing: .16em; text-transform: uppercase; color: var(--pm-ink-60);
}
.pm-k7 .k7-scroller { position: relative; flex: 1; min-width: 0; }
.pm-k7 .k7-scroller-track {
  display: flex; gap: 2px; overflow-x: auto; padding: 8px 0;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
}
.pm-k7 .k7-scroller-track::-webkit-scrollbar { display: none; }
.pm-k7 .k7-subnav-link {
  flex: none; text-decoration: none;
  font: 700 12px/1 var(--pm-font-body);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 10px 12px; color: var(--pm-ink);
  border-bottom: 3px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.pm-k7 .k7-subnav-link:hover { color: var(--pm-orange); }
.pm-k7 .k7-subnav-link.is-active { color: var(--pm-orange); border-bottom-color: var(--pm-orange); }
.pm-k7 .k7-subnav-cta { flex: none; font-size: 12px; padding: 10px 16px; }

/* dégradé + flèche « il y a la suite » (tactile / petit écran) */
.pm-k7 .k7-scroller::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 52px;
  pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 3;
  background: linear-gradient(90deg, rgba(240,231,210,0), rgba(240,231,210,.95) 70%);
}
.pm-k7 .k7-scroller.has-more::after { opacity: 1; }
.pm-k7 .k7-scroller-arrow {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: none;
  align-items: center; justify-content: center; z-index: 4; pointer-events: none;
  background: var(--pm-orange); color: var(--pm-paper);
  animation: k7Nudge 1.4s ease-in-out infinite;
}
.pm-k7 .k7-scroller.has-more .k7-scroller-arrow { display: inline-flex; }
.pm-k7 .k7-scroller-arrow svg { width: 14px; height: 14px; }
@keyframes k7Nudge { 0%,100% { transform: translateY(-50%) translateX(0); }
                     50%     { transform: translateY(-50%) translateX(3px); } }
@media (min-width: 1024px) {
  .pm-k7 .k7-scroller::after, .pm-k7 .k7-scroller-arrow { display: none !important; }
}

/* ============================================================
   4. LE PACK
   ============================================================ */
.pm-k7 .k7-pack-grid {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.pm-k7 .k7-dupbox {
  background: var(--pm-orange); color: var(--pm-white);
  border: 1.5px solid var(--pm-ink); box-shadow: 5px 5px 0 0 var(--pm-ink);
  padding: 22px 24px; max-width: 360px;
}
.pm-k7 .k7-dupbox-t {
  font-family: var(--pm-font-display); font-weight: 400;
  font-size: 26px; text-transform: uppercase; line-height: 1;
}
.pm-k7 .k7-dupbox p { font-weight: 300; font-size: 14px; line-height: 1.55; margin: 8px 0 0; }

/* ============================================================
   5. COQUES
   ============================================================ */
.pm-k7 .k7-shell {
  display: block; text-decoration: none; color: inherit; cursor: pointer;
  padding: 0; background: transparent;
  border: 1.5px solid rgba(238,239,241,.35);
  transition: transform .15s cubic-bezier(.22,.61,.36,1), box-shadow .15s ease,
              border-color .15s ease, background .15s ease;
  font-family: inherit; text-align: left;
}
.pm-k7 .k7-shell:hover { transform: translate(-2px, -2px); border-color: var(--pm-white); }
.pm-k7 .k7-shell.is-active {
  border-color: var(--pm-orange); background: var(--pm-orange);
  box-shadow: 4px 4px 0 0 var(--pm-white);
}
.pm-k7 .k7-shell-img {
  width: 100%; aspect-ratio: 1/1; display: block;
  background: var(--pm-white) center/contain no-repeat;
}
.pm-k7 .k7-shell-name {
  padding: 9px 10px 11px; font-weight: 600; font-size: 11.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--pm-white);
}
.pm-k7 .k7-shell-name span { font-weight: 300; opacity: .6; }
.pm-k7 .k7-shell-pick {
  display: flex; align-items: center; gap: 14px; margin: 26px 0 0;
}
.pm-k7 .k7-shell-pick img { width: 56px; filter: brightness(0) invert(1); opacity: .85; }
.pm-k7 .k7-shell-pick .k7-script { color: var(--pm-cyan); font-size: clamp(20px, 2.2vw, 26px); }

/* ============================================================
   6. HABILLAGE
   ============================================================ */
.pm-k7 .k7-hab-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(16px, 2vw, 24px); }
.pm-k7 .k7-hab-2 .k7-card__img { aspect-ratio: 16 / 10; }
.pm-k7 .k7-hab-2 .k7-card__title { font-size: clamp(24px, 2.6vw, 30px); margin: 6px 0 8px; }
.pm-k7 .k7-hab-2 .k7-card__body { padding: 22px 24px 26px; }
.pm-k7 .k7-tag {
  display: inline-block; font: 600 11px/1 var(--pm-font-body);
  letter-spacing: .1em; text-transform: uppercase; color: var(--pm-orange);
}
.pm-k7 .k7-hab-4 .k7-card__img { aspect-ratio: 1 / 1; }
.pm-k7 .k7-hab-4 .k7-card__body { padding: 18px 18px 22px; }

/* ============================================================
   7. FABRICATION
   ============================================================ */
.pm-k7 .k7-step img.k7-step-photo {
  width: 100%; height: clamp(180px, 22vw, 250px); object-fit: cover;
  display: block; border: 1.5px solid var(--pm-white);
}
.pm-k7 .k7-step img.k7-step-n { height: clamp(46px, 5vw, 64px); width: auto;
  display: block; margin: 18px 0 8px; }
.pm-k7 .k7-step-t {
  font-family: var(--pm-font-display); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px); text-transform: uppercase; line-height: 1;
}
.pm-k7 .k7-step p { font-weight: 300; font-size: 15px; line-height: 1.6; margin: 8px 0 0; }

/* ============================================================
   8. CALCULATEUR
   ============================================================ */
.pm-k7 .k7-calc { display: grid; grid-template-columns: 1.25fr .75fr;
  gap: clamp(24px, 3vw, 34px); align-items: start; }
.pm-k7 .k7-calc-fields { display: flex; flex-direction: column; gap: 26px; }
.pm-k7 .k7-field-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1.5px solid var(--pm-ink); padding-bottom: 8px; margin-bottom: 16px;
}
.pm-k7 .k7-field-head b { font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.pm-k7 .k7-field-head small { font-weight: 300; font-size: 12.5px; }
.pm-k7 .k7-field-head a { font-weight: 600; font-size: 12.5px; }
.pm-k7 .k7-opts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* chips */
.pm-k7 .k7-chip {
  font-family: var(--pm-font-body); font-weight: 600; font-size: 14px;
  padding: 12px 16px; cursor: pointer; white-space: nowrap; line-height: 1.15;
  border: 1.5px solid var(--pm-ink); background: var(--pm-white); color: var(--pm-ink);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.pm-k7 .k7-chip span { font-weight: 300; opacity: .65; }
.pm-k7 .k7-chip:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 0 var(--pm-ink); }
.pm-k7 .k7-chip.is-active {
  background: var(--pm-ink); color: var(--pm-white); box-shadow: 3px 3px 0 0 var(--pm-orange);
}
.pm-k7 .k7-chip.is-active span { opacity: .8; }
.pm-k7 .k7-chip--dot { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 10px 14px; }
.pm-k7 .k7-dot { width: 13px; height: 13px; display: inline-block;
  border: 1px solid rgba(26,24,21,.45); flex: none; }
.pm-k7 .k7-chip.is-active .k7-dot { border-color: rgba(238,239,241,.5); }

.pm-k7 .k7-qty-custom {
  display: flex; align-items: center; gap: 8px; margin-left: 6px;
  font-weight: 300; font-size: 13.5px;
}
.pm-k7 .k7-input, .pm-k7 .k7-textarea {
  font-family: var(--pm-font-body); font-size: 15px; font-weight: 300; color: var(--pm-ink);
  padding: 13px 14px; border: 1.5px solid var(--pm-ink); background: var(--pm-paper);
  border-radius: 0; width: 100%;
}
.pm-k7 .k7-qty-custom .k7-input { width: 96px; padding: 10px 12px; background: var(--pm-white); }
.pm-k7 .k7-input:focus, .pm-k7 .k7-textarea:focus {
  outline: 2px solid var(--pm-orange); outline-offset: 1px;
}
.pm-k7 .k7-input::placeholder, .pm-k7 .k7-textarea::placeholder { color: rgba(26,24,21,.45); }

/* carte prix collante */
.pm-k7 .k7-price-col { position: sticky; top: calc(var(--pm-h) + var(--k7-subnav) + 16px); }
.pm-k7 .k7-price {
  background: var(--pm-ink); color: var(--pm-white);
  border: 1.5px solid var(--pm-ink); box-shadow: 6px 6px 0 0 var(--pm-orange);
  padding: 26px 26px 28px;
}
.pm-k7 .k7-price-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pm-k7 .k7-price-top b { font-weight: 600; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pm-cyan); }
.pm-k7 .k7-price-top small { font-weight: 300; font-size: 11.5px; opacity: .7; }
.pm-k7 .k7-price-total {
  font-family: var(--pm-font-display); font-weight: 400;
  font-size: clamp(46px, 5vw, 64px); line-height: .95; margin: 14px 0 2px;
}
.pm-k7 .k7-price-unit { font-weight: 300; font-size: 14.5px; margin-bottom: 18px; }
.pm-k7 .k7-price-unit strong { font-weight: 600; }
.pm-k7 .k7-recap {
  display: flex; flex-direction: column; gap: 7px;
  font-weight: 300; font-size: 13.5px;
  border-top: 1px solid rgba(238,239,241,.28); padding-top: 14px;
}
.pm-k7 .k7-recap div { display: flex; justify-content: space-between; gap: 12px; }
.pm-k7 .k7-recap div span:first-child { opacity: .75; }
.pm-k7 .k7-recap div span:last-child { text-align: right; }
.pm-k7 .k7-recap .k7-recap-sep { border-top: 1px solid rgba(238,239,241,.28); padding-top: 9px; }
.pm-k7 .k7-price .k7-btn { margin-top: 20px; width: 100%; box-shadow: 3px 3px 0 0 var(--pm-white); }
.pm-k7 .k7-price .k7-btn:hover { box-shadow: 5px 5px 0 0 var(--pm-white); }
.pm-k7 .k7-price-note { font-weight: 300; font-size: 12px; line-height: 1.5; margin: 12px 0 0; opacity: .7; }
.pm-k7 .k7-price-aside {
  font-family: var(--pm-font-script); font-size: clamp(20px, 2.2vw, 25px);
  color: var(--pm-orange); transform: rotate(-3deg); margin: 16px 0 0; text-align: right;
}

/* ---------- formulaire de devis ---------- */
.pm-k7 .k7-quote { margin-top: 56px; }
.pm-k7 .k7-quote[hidden] { display: none; }
.pm-k7 .k7-quote-box {
  background: var(--pm-white); border: 1.5px solid var(--pm-ink);
  box-shadow: 6px 6px 0 0 var(--pm-ink);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 36px) clamp(26px, 3.4vw, 38px);
  animation: k7Fade .48s cubic-bezier(.22,.61,.36,1) both;
}
.pm-k7 .k7-quote-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  border-bottom: 1.5px solid var(--pm-ink); padding-bottom: 14px; margin-bottom: 24px;
}
.pm-k7 .k7-quote-title {
  font-family: var(--pm-font-display); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 44px); line-height: .9;
  text-transform: uppercase; margin-top: 8px;
}
.pm-k7 .k7-quote-recap { font-weight: 300; font-size: 14px; line-height: 1.5; text-align: right; }
.pm-k7 .k7-quote-recap strong { font-weight: 600; }
.pm-k7 .k7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.pm-k7 .k7-form label { display: flex; flex-direction: column; gap: 7px; }
.pm-k7 .k7-form label span {
  font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.pm-k7 .k7-form .k7-full { grid-column: 1 / -1; }
.pm-k7 .k7-textarea { resize: vertical; }
.pm-k7 .k7-form-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px;
}
.pm-k7 .k7-form-foot p { font-weight: 300; font-size: 13px; max-width: 420px; margin: 0; }
.pm-k7 .k7-form-err {
  grid-column: 1 / -1; margin: 0; font-weight: 600; font-size: 13.5px; color: var(--pm-orange);
}
.pm-k7 .k7-form-err[hidden] { display: none; }
.pm-k7 .k7-sent { display: flex; align-items: flex-start; gap: 20px; }
.pm-k7 .k7-sent img { width: 64px; flex: none; }
.pm-k7 .k7-sent-t {
  font-family: var(--pm-font-display); font-weight: 400;
  font-size: clamp(32px, 4vw, 46px); line-height: .9; text-transform: uppercase;
}
.pm-k7 .k7-sent p { font-weight: 300; font-size: 16px; line-height: 1.6; max-width: 520px; margin: 10px 0 0; }

/* ============================================================
   9. SPECS & GABARITS
   ============================================================ */
.pm-k7 .k7-specs-grid { display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: start; }
.pm-k7 .k7-specs-list {
  display: flex; flex-direction: column; gap: 11px;
  font-weight: 300; font-size: 15.5px; line-height: 1.5;
}
.pm-k7 .k7-specs-list div {
  display: flex; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid rgba(238,239,241,.22); padding-bottom: 9px;
}
.pm-k7 .k7-specs-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.pm-k7 .k7-specs-list div span:first-child { opacity: .7; flex: none; }
.pm-k7 .k7-specs-list div span:last-child { text-align: right; }
.pm-k7 .k7-dl {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; border: 1.5px solid var(--pm-white); color: var(--pm-white);
  text-decoration: none; font-weight: 600; font-size: 15px;
  transition: background .18s ease, color .18s ease, transform .15s ease;
}
.pm-k7 .k7-dl small { font-weight: 300; font-size: 13px; opacity: .7; }
.pm-k7 .k7-dl:hover { background: var(--pm-white); color: var(--pm-ink); transform: translateX(3px); }
.pm-k7 .k7-dl:hover small { opacity: .6; }
.pm-k7 .k7-dl-list { display: flex; flex-direction: column; gap: 12px; }

/* ============================================================
   10. FAQ
   ============================================================ */
.pm-k7 .k7-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr;
  gap: clamp(28px, 4vw, 56px); align-items: start; }
.pm-k7 .k7-faq-list { border-top: 1.5px solid var(--pm-ink); }
.pm-k7 .k7-faq-item { border-bottom: 1.5px solid var(--pm-ink); }
.pm-k7 .k7-faq-q {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; background: transparent; border: 0; padding: 20px 2px;
  cursor: pointer; text-align: left; font-family: inherit; color: inherit;
}
.pm-k7 .k7-faq-q span:first-child { font-weight: 500; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.35; }
.pm-k7 .k7-faq-sign {
  font-family: var(--pm-font-display); font-size: 26px; line-height: 1;
  color: var(--pm-orange); flex: none;
}
.pm-k7 .k7-faq-a {
  font-weight: 300; font-size: 15.5px; line-height: 1.65; margin: 0;
  padding: 0 clamp(8px, 5vw, 60px) 22px 2px; max-width: 640px;
}
.pm-k7 .k7-faq-a[hidden] { display: none; }

/* ============================================================
   11. CTA FINAL
   ============================================================ */
.pm-k7 .k7-cta {
  position: relative; overflow: hidden; background: var(--pm-orange); color: var(--pm-white);
  padding: clamp(52px, 7vw, 76px) var(--k7-pad) clamp(56px, 7.5vw, 80px);
}
.pm-k7 .k7-cta::after {
  content: ""; position: absolute; inset: 22px;
  border: 1.5px solid rgba(238,239,241,.6); pointer-events: none;
}
.pm-k7 .k7-cta-in {
  position: relative; z-index: 1; max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 40px); flex-wrap: wrap;
}
.pm-k7 .k7-cta-t {
  font-family: var(--pm-font-display); font-weight: 400;
  font-size: clamp(40px, 6vw, 76px); line-height: .86; text-transform: uppercase;
}
.pm-k7 .k7-cta p { font-weight: 300; font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.6; max-width: 440px; margin: 14px 0 0; }
.pm-k7 .k7-cta-btns { display: flex; flex-direction: column; gap: 12px; }
.pm-k7 .k7-cta-btns .k7-btn { font-size: 16px; padding: 17px 28px; justify-content: center; }
.pm-k7 .k7-cta-btns .k7-btn--ink { box-shadow: 4px 4px 0 0 var(--pm-white); }
.pm-k7 .k7-cta-btns .k7-btn--ink:hover { box-shadow: 6px 6px 0 0 var(--pm-white); }

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .pm-k7 .k7-grid-6 { grid-template-columns: repeat(4, 1fr); }
  .pm-k7 .k7-calc { grid-template-columns: 1fr; }
  .pm-k7 .k7-price-col { position: static; }
  .pm-k7 .k7-price-aside { text-align: left; }
}
@media (max-width: 900px) {
  .pm-k7 .k7-hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 8px; }
  .pm-k7 .k7-hero-visual { height: min(78vw, 420px); order: -1; }
  .pm-k7 .k7-hero p { max-width: none; }
  .pm-k7 .k7-pack-grid,
  .pm-k7 .k7-specs-grid,
  .pm-k7 .k7-faq-grid { grid-template-columns: 1fr; }
  .pm-k7 .k7-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .pm-k7 .k7-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pm-k7 .k7-hab-2  { grid-template-columns: 1fr; }
  .pm-k7 .k7-quote-recap { text-align: left; }
  .pm-k7 .k7-dupbox { max-width: none; }
}
@media (max-width: 700px) {
  .pm-k7 .k7-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .pm-k7 .k7-form { grid-template-columns: 1fr; }
  .pm-k7 .k7-head { align-items: flex-start; }
  .pm-k7 .k7-star { width: 44px; }
  .pm-k7 .k7-annot span { font-size: 17px; max-width: 130px; }
  .pm-k7 .k7-annot img { width: 46px; }
  .pm-k7 .k7-cta-btns { width: 100%; }
  .pm-k7 .k7-subnav-label { display: none; }
  /* sur mobile, le CTA mangerait la place des onglets — il reste
     accessible dans le hero et dans le bloc CTA final */
  .pm-k7 .k7-subnav-cta { display: none; }
}
@media (max-width: 520px) {
  .pm-k7 .k7-grid-3, .pm-k7 .k7-grid-4 { grid-template-columns: 1fr; }
  .pm-k7 .k7-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .pm-k7 .k7-hero-facts { grid-template-columns: 1fr 1fr; gap: 14px 20px; }
  .pm-k7 .k7-qty-custom { margin-left: 0; width: 100%; }
  .pm-k7 .k7-sent { flex-direction: column; gap: 12px; }
}

/* ---------- accessibilité : mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .pm-k7 .k7-k7-inner, .pm-k7 .k7-reel svg,
  .pm-k7 .k7-scroller-arrow, .pm-k7 .k7-quote-box { animation: none !important; }
  .pm-k7 .k7-btn, .pm-k7 .k7-chip, .pm-k7 .k7-shell, .pm-k7 .k7-dl { transition: none !important; }
}

/* ---------- barre d'admin WordPress ---------- */
body.admin-bar .pm-k7 .k7-subnav { top: calc(var(--pm-h) + 32px); }
body.admin-bar .pm-k7 .k7-price-col { top: calc(var(--pm-h) + var(--k7-subnav) + 48px); }
@media screen and (max-width: 782px) {
  body.admin-bar .pm-k7 .k7-subnav { top: calc(var(--pm-h) + 46px); }
}

/* ---------- hCaptcha (widget rendu par le script Web3Forms) ---------- */
.pm-k7 .pm-captcha { margin-top: 18px; }
.pm-k7 .pm-captcha iframe { max-width: 100%; }


/* ============================================================
   v13 — CORRECTIFS RESPONSIVE PAGE CASSETTES
   ------------------------------------------------------------
   1. HERO   : ronds de couleur derrière la cassette, kicker retiré,
               compactage pour voir les 2 CTA sans scroller
   2. FABRIC.: les 3 étapes passent en carrousel (mobile)
   3. CALC.  : le calculateur passe en wizard 6 étapes + barre
               d'estimation collante (mobile)
   4. CTA FIN: cadre réaligné sur le contenu
   ============================================================ */

/* ------------------------------------------------------------
   1. HERO — ronds de couleur repositionnés DERRIÈRE la cassette
   ------------------------------------------------------------
   Les 2 blobs sont en position:absolute avec top:62% / top:36%
   (pourcentages de la hauteur du hero, pensés pour la mise en
   page desktop 2 colonnes). En mobile, .k7-hero-visual passe en
   order:-1 : il monte tout en haut, et les blobs se retrouvent
   par-dessus le TEXTE.
   On recalcule leur position en longueurs absolues pour qu'ils
   tombent sur la zone du visuel :
       haut du visuel  = padding-top du hero
       hauteur visuelle = valeur de .k7-hero-visual { height }
   Volontairement PAS de <div> conteneur : un wrapper positionné
   créerait un stacking context et le mix-blend-mode: multiply des
   blobs n'aurait plus le papier comme fond à multiplier.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .pm-k7 .k7-hero {
    --k7-vis-top: 18px;              /* = padding-top mobile du hero */
    --k7-vis-h:   min(58vw, 250px);  /* = height de .k7-hero-visual  */
  }
  .pm-k7 .k7-hero > svg.k7-blob:nth-of-type(1) {   /* rond orange */
    right: -16% !important;
    top: calc(var(--k7-vis-top) + var(--k7-vis-h) * .60) !important;
    width: 66% !important;
  }
  .pm-k7 .k7-hero > svg.k7-blob:nth-of-type(2) {   /* rond cyan */
    right: 30% !important;
    top: calc(var(--k7-vis-top) + var(--k7-vis-h) * .30) !important;
    width: 38% !important;
  }
}

/* ---- HERO compact : les 2 CTA visibles sans scroller ---- */
@media (max-width: 700px) {
  /* kicker « Produits physiques — cassette » retiré (icône comprise).
     !important obligatoire : le <div> porte un style inline
     `display:flex`, qui gagne sinon sur la feuille de style. */
  .pm-k7 .k7-hero-kicker { display: none !important; }

  .pm-k7 .k7-hero { padding-top: 18px; padding-bottom: 30px; }
  .pm-k7 .k7-hero-grid { gap: 6px; }
  .pm-k7 .k7-hero-visual { height: min(58vw, 250px); }

  .pm-k7 .k7-hero h1 { font-size: clamp(46px, 13vw, 64px); margin-top: 0; }
  .pm-k7 .k7-hero-script { font-size: 21px; margin-top: 10px; }
  .pm-k7 .k7-hero p { font-size: 15px; line-height: 1.5; margin: 12px 0 18px; }

  /* les 2 CTA sur une ligne, ils se partagent la largeur */
  .pm-k7 .k7-hero-cta { flex-wrap: nowrap; gap: 10px; }
  .pm-k7 .k7-hero-cta .k7-btn {
    flex: 1 1 0; min-width: 0; padding: 13px 12px; font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* les chiffres passent sous la ligne de flottaison, on les allège */
  .pm-k7 .k7-hero-facts { margin-top: 22px; padding-top: 12px; }

  /* la cassette est plus petite : on resserre les annotations */
  .pm-k7 .k7-annot { bottom: -4px; }
}

/* ------------------------------------------------------------
   2. FABRICATION — carrousel une étape à la fois (mobile)
   Même principe que le « parcours de fabrication » de la page
   Le Vinyle : stepper cliquable + swipe tactile + compteur.
   Le stepper et la nav sont injectés par cassettes.js.
   ------------------------------------------------------------ */
.pm-k7 .k7-fab-stepper,
.pm-k7 .k7-fab-nav,
.pm-k7 .k7-fab-hint { display: none; }

@media (max-width: 900px) {
  /* le stepper */
  .pm-k7 .k7-fab-stepper {
    display: flex; gap: 4px; margin: 0 0 6px;
    border-bottom: 1.5px solid rgba(238,239,241,.28);
  }
  .pm-k7 .k7-fab-step {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
    gap: 8px; cursor: pointer; padding: 10px 6px 12px;
    background: none; border: 0; border-bottom: 3px solid transparent;
    font: 600 11px/1.2 var(--pm-font-body); letter-spacing: .08em;
    text-transform: uppercase; color: rgba(238,239,241,.55);
    transition: color .15s, border-color .15s;
  }
  .pm-k7 .k7-fab-step-num {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--pm-font-mono, var(--pm-font-body)); font-size: 11px;
    border: 1.5px solid rgba(238,239,241,.35); color: inherit;
  }
  .pm-k7 .k7-fab-step.is-active { color: var(--pm-white); border-bottom-color: var(--pm-orange); }
  .pm-k7 .k7-fab-step.is-active .k7-fab-step-num {
    background: var(--pm-orange); border-color: var(--pm-orange); color: var(--pm-white);
  }

  /* indication de swipe */
  .pm-k7 .k7-fab-hint {
    display: block; font: 400 11px/1 var(--pm-font-body);
    letter-spacing: .06em; text-transform: uppercase;
    text-align: center; color: rgba(238,239,241,.5); margin: 12px 0 16px;
  }

  /* la grille devient une pile où une seule étape est visible */
  .pm-k7 .k7-fabgrid { display: block !important; }
  .pm-k7 .k7-fabgrid .k7-step { display: none; }
  .pm-k7 .k7-fabgrid .k7-step.is-active {
    display: block;
    animation: k7Fade .32s cubic-bezier(.22,.61,.36,1) both;
  }
  /* la photo est carrée en desktop : trop haute en carrousel mobile */
  .pm-k7 .k7-fabgrid .k7-step img.k7-step-photo { aspect-ratio: 4 / 3; object-fit: cover; }

  /* navigation ← / → + compteur */
  .pm-k7 .k7-fab-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 18px; padding-top: 16px;
    border-top: 1.5px solid rgba(238,239,241,.28);
  }
  .pm-k7 .k7-fab-arrow {
    width: 46px; height: 46px; flex: none; cursor: pointer;
    background: transparent; color: var(--pm-white);
    border: 1.5px solid rgba(238,239,241,.5);
    font-family: var(--pm-font-display); font-size: 20px; line-height: 1;
  }
  .pm-k7 .k7-fab-arrow:active { background: rgba(238,239,241,.12); }
  .pm-k7 .k7-fab-count {
    font: 600 12px/1 var(--pm-font-body); letter-spacing: .1em; text-transform: uppercase;
  }
  .pm-k7 .k7-fab-count b { color: var(--pm-orange); }
}

/* ------------------------------------------------------------
   3. CALCULATEUR — wizard 6 étapes + estimation toujours visible
   Reprend le pattern du formulaire Studio (page-reservation.php) :
   onglets numérotés, un panneau à la fois, nav Précédent/Suivant,
   et une barre collante en bas qui affiche l'estimation en direct
   (dépliable pour voir le détail).
   Structure injectée par cassettes.js ; les <div> de champs sont
   DÉPLACÉS (pas clonés) dans les panneaux : le render() du
   calculateur continue de piloter les mêmes nœuds.
   ------------------------------------------------------------ */
.pm-k7 .k7-wiz-tabs,
.pm-k7 .k7-wiz-nav,
.pm-k7 .k7-mbar { display: none; }

@media (max-width: 900px) {
  /* onglets d'étapes */
  .pm-k7 .k7-wiz-tabs {
    display: flex; gap: 3px; margin-bottom: 22px;
    border-bottom: 1.5px solid var(--pm-ink-20);
  }
  .pm-k7 .k7-wiz-tab {
    flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
    padding: 10px 2px 12px; background: none; border: 0;
    border-bottom: 3px solid transparent; cursor: not-allowed;
  }
  .pm-k7 .k7-wiz-tab-num {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font: 600 11px/1 var(--pm-font-body);
    border: 1.5px solid var(--pm-ink-20); color: var(--pm-ink-40);
  }
  .pm-k7 .k7-wiz-tab.is-done { cursor: pointer; }
  .pm-k7 .k7-wiz-tab.is-done .k7-wiz-tab-num {
    border-color: var(--pm-ink); color: var(--pm-ink); background: var(--pm-paper);
  }
  .pm-k7 .k7-wiz-tab.is-active { border-bottom-color: var(--pm-orange); }
  .pm-k7 .k7-wiz-tab.is-active .k7-wiz-tab-num {
    background: var(--pm-orange); border-color: var(--pm-orange); color: var(--pm-white);
  }

  /* panneaux : un seul visible */
  .pm-k7 .k7-wiz-panel { display: none; }
  .pm-k7 .k7-wiz-panel.is-current {
    display: block;
    animation: k7Fade .3s cubic-bezier(.22,.61,.36,1) both;
  }
  /* le conteneur n'a plus besoin de son gap vertical de 26px.
     v13.1 : sa min-height est figée par cassettes.js sur la hauteur du
     panneau le plus haut. Sans ça, changer d'étape modifiait la hauteur
     du document et le navigateur réajustait le scroll — d'où l'effet
     « la page descend toute seule ». */
  .pm-k7 .k7-calc-fields { gap: 0; }

  /* nav Précédent / Suivant */
  .pm-k7 .k7-wiz-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 26px; padding-top: 18px;
    border-top: 1px solid var(--pm-ink-20);
  }
  .pm-k7 .k7-wiz-prev {
    background: none; border: 1.5px solid transparent; color: var(--pm-ink-60);
    font: 600 12px/1 var(--pm-font-body); letter-spacing: .08em; text-transform: uppercase;
    padding: 14px 4px 14px 0; cursor: pointer;
  }
  .pm-k7 .k7-wiz-prev[hidden] { display: none; }
  .pm-k7 .k7-wiz-next {
    background: var(--pm-orange); border: 1.5px solid var(--pm-orange); color: var(--pm-white);
    box-shadow: 3px 3px 0 0 var(--pm-ink);
    font: 600 12px/1 var(--pm-font-body); letter-spacing: .06em; text-transform: uppercase;
    padding: 15px 18px; cursor: pointer;
    flex: 0 1 auto; min-width: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
  .pm-k7 .k7-wiz-next:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 var(--pm-ink); }

  /* v13.1b — PLUS DE RÈGLE DE MASQUAGE ICI.
     La carte prix est DÉPLACÉE par le JS dans la barre d'estimation.
     Or la barre est désormais insérée à l'intérieur de .k7-calc (juste
     au-dessus des onglets) : `.k7-calc .k7-price-col { display:none }`
     matchait donc l'élément déplacé et vidait le panneau « Détail ».
     Le déplacement suffit à la sortir de la grille : rien à masquer.
     Bénéfice annexe : si le JS ne tourne pas, la carte prix reste
     visible à sa place au lieu de disparaître.

     Dans la barre, on retire le doublon d'en-tête (total + prix unitaire
     sont déjà dans la tête de barre) et on garde le récap détaillé,
     le bouton de devis et la note. */
  .pm-k7 .k7-mbar-body .k7-price-top,
  .pm-k7 .k7-mbar-body .k7-price-total,
  .pm-k7 .k7-mbar-body .k7-price-unit { display: none; }
  .pm-k7 .k7-mbar-body .k7-recap { border-top: 0; padding-top: 6px; }

  /* --- barre d'estimation : COLLANTE EN HAUT ---------------------
     v13.1 : elle était en position:fixed en bas d'écran, où le bouton
     flottant « haut de page » (rendu par le thème parent) passait
     par-dessus — on ne voyait plus qu'elle existait.
     Elle est maintenant collée SOUS la sous-nav, dans le flux du
     calculateur : aucun conflit de z-index avec un élément dont on ne
     maîtrise pas le sélecteur, et elle est lue juste au-dessus des
     onglets d'étapes donc impossible à manquer.
     Le panneau de détail s'ouvre en SURIMPRESSION (absolute) : la
     hauteur de la barre ne change pas, donc aucun décalage de page. */
  .pm-k7 .k7-mbar {
    display: block; position: sticky;
    top: calc(var(--pm-h) + var(--k7-subnav));
    z-index: 6; margin: 0 0 14px;
    background: var(--pm-ink); color: var(--pm-white);
    border: 1.5px solid var(--pm-ink);
    box-shadow: 3px 3px 0 0 var(--pm-orange);
  }
  .pm-k7 .k7-mbar-head {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px 11px;
    background: none; border: 0; cursor: pointer; color: var(--pm-white); text-align: left;
  }
  .pm-k7 .k7-mbar-step {
    display: block; font: 600 9.5px/1.3 var(--pm-font-body);
    letter-spacing: .12em; text-transform: uppercase; color: var(--pm-cyan);
  }
  .pm-k7 .k7-mbar-total {
    display: block; margin-top: 1px;
    font-family: var(--pm-font-display); font-weight: 400; font-size: 26px; line-height: 1;
  }
  .pm-k7 .k7-mbar-sub { display: block; font: 300 11px/1.3 var(--pm-font-body); opacity: .72; margin-top: 2px; }
  .pm-k7 .k7-mbar-cta {
    flex: none; display: flex; align-items: center; gap: 6px;
    font: 600 10px/1 var(--pm-font-body); letter-spacing: .1em; text-transform: uppercase;
    color: var(--pm-white); border: 1.5px solid rgba(238,239,241,.45); padding: 8px 10px;
  }
  .pm-k7 .k7-mbar-chev { transition: transform .2s; font-size: 11px; }
  .pm-k7 .k7-mbar.is-open .k7-mbar-chev { transform: rotate(180deg); }

  /* détail : en surimpression sous la barre, aucun reflow */
  .pm-k7 .k7-mbar-body {
    position: absolute; left: -1.5px; right: -1.5px; top: 100%;
    background: var(--pm-ink); border: 1.5px solid var(--pm-ink); border-top: 0;
    box-shadow: 3px 3px 0 0 var(--pm-orange);
    max-height: 0; overflow: hidden; padding: 0 14px;
    transition: max-height .28s ease;
  }
  .pm-k7 .k7-mbar.is-open .k7-mbar-body { max-height: 56vh; overflow-y: auto; padding: 4px 14px 16px; }
  .pm-k7 .k7-mbar-body .k7-price { border: 0; padding: 0; background: none; box-shadow: none; }
  .pm-k7 .k7-mbar-body .k7-price-aside { display: none; }
}

/* ------------------------------------------------------------
   4. CTA FINAL — cadre blanc réaligné sur le contenu
   ------------------------------------------------------------
   Le cadre est en `inset: 22px` alors que le padding horizontal de
   la section vaut var(--k7-pad) = 20px sur mobile : le texte sortait
   du cadre de 2px, et l'ombre 4px des boutons de 6px de plus.
   On élargit le padding et on resserre le cadre.
   ------------------------------------------------------------ */
@media (max-width: 700px) {
  .pm-k7 .k7-cta { padding: 44px 32px 48px; }
  .pm-k7 .k7-cta::after { inset: 14px; }
  .pm-k7 .k7-cta-in { display: block; }
  .pm-k7 .k7-cta-t { font-size: clamp(30px, 8vw, 42px); }
  .pm-k7 .k7-cta p { margin-top: 12px; }
  .pm-k7 .k7-cta-btns { width: 100%; margin-top: 26px; }
  .pm-k7 .k7-cta-btns .k7-btn {
    width: 100%; font-size: 15px; padding: 15px 16px;
    white-space: normal;
  }
  /* l'ombre portée doit rester DANS le cadre (18px de marge dispo) */
  .pm-k7 .k7-cta-btns .k7-btn--ink { box-shadow: 3px 3px 0 0 var(--pm-white); }
  .pm-k7 .k7-cta-btns .k7-btn--ink:active { box-shadow: 1px 1px 0 0 var(--pm-white); }
}