/* ---------- Carte postale recomposée (crops de la vraie carte durer-postcard-annotated.jpg, sans les annotations) ---------- */
.pc { --src: url(/assets/img/durer-postcard-annotated.jpg); position: relative; container-type: inline-size; aspect-ratio: 3 / 2; background: #f9f9f7; border-radius: 3px; box-shadow: 0 18px 40px rgba(65, 31, 17, .16), 0 2px 4px rgba(0,0,0,.08); overflow: hidden; }
.pc > * { position: absolute; }
.pc__photo { left: 5cqw; top: 6cqw; width: 36cqw; height: 47cqw; background: var(--src) 29.2% 43.5% / 561.6% auto no-repeat; border: .9cqw solid #fff; box-shadow: 0 0 0 .35cqw #c9a85a; }
.pc__sep { left: 48cqw; top: 6cqw; bottom: 6cqw; border-left: 1.5px dotted #8c8c8c; }
.pc__stamp { right: 4cqw; top: 4cqw; width: 15cqw; aspect-ratio: 1; background: var(--src) 67.7% 18.3% / 1217.7% auto no-repeat; }
.pc__pm { right: 17cqw; top: 6cqw; width: 15cqw; color: #2b3a55; opacity: .8; transform: rotate(-10deg); font-family: var(--font-mono); }
.pc__mot { left: 51.5cqw; top: 23cqw; width: 45cqw; aspect-ratio: 318 / 185; background: var(--src) 62.4% 53.5% / 432.7% auto no-repeat; mix-blend-mode: multiply; filter: brightness(1.04) contrast(1.12); }
.pc__mot::after { content: ""; position: absolute; right: 0; top: 8%; width: 8%; height: 22%; background: #f9f9f7; }
.pc__coeur { right: 5cqw; bottom: 4cqw; width: 12cqw; aspect-ratio: 95 / 83; background: var(--src) 69.5% 75.2% / 1448% auto no-repeat; mix-blend-mode: multiply; }

/* 05 — « La fiche produit, au bon endroit » */

/* ---------- Vue éclatée ---------- */
.explode { background: #fff; overflow: hidden; }
.explode__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.explode__stage { height: 600px; display: grid; place-items: center; perspective: 1600px; }
.xstack { --src: url(/assets/img/durer-postcard-annotated.jpg); --gap: 62px; position: relative; width: 400px; aspect-ratio: 3 / 2; container-type: inline-size; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-34deg); }
.xl { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateZ(calc((var(--i) - 2.5) * var(--gap) * var(--p))); transition: transform .15s linear; border-radius: 3px; outline: 1.5px dashed rgba(31, 168, 85, calc(.55 * var(--p))); outline-offset: 0; background: rgba(230, 255, 218, calc(.18 * var(--p))); }
.xl > div, .xl > svg { position: absolute; }
.xl--0 { --i: 0; background: none; outline: 0; }
.xl--1 { --i: 1; } .xl--2 { --i: 2; } .xl--3 { --i: 3; } .xl--4 { --i: 4; } .xl--5 { --i: 5; }
.xl__paper { inset: 0; background: #f9f9f7; border-radius: 3px; box-shadow: 0 1px 0 #e7e3d8, 0 2px 0 #dcd6c6, 0 3px 0 #d2cbb9, 0 30px 50px rgba(65, 31, 17, .22); }
.xl__paper::after { content: ""; position: absolute; left: 48cqw; top: 6cqw; bottom: 6cqw; border-left: 1.5px dotted #8c8c8c; }
.xl__n { position: absolute; left: -14px; top: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--c-green); color: var(--c-ink); font: 700 13px/26px var(--font-mono); text-align: center; opacity: var(--p); box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.xl--0 .xl__n { left: auto; right: -14px; top: auto; bottom: -14px; }
.explode__kicker { font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-green-dark); margin-bottom: 10px; }
.explode .durer__text { margin-top: 16px; font-size: 17px; line-height: 26px; }
.explode__list { margin-top: 22px; display: grid; gap: 10px; }
.explode__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 22px; color: var(--c-slate); }
.explode__list b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c-green); font: 700 12px/24px var(--font-mono); text-align: center; color: var(--c-ink); margin-top: -1px; }
.explode__list strong { color: var(--c-ink); font-weight: 600; margin-right: 4px; }
.explode__real { margin-top: 24px; width: 100%; max-width: 420px; height: auto; border-radius: 12px; border: 1px solid var(--c-border-soft); }

/* ---------- La carte Hector (fiche produit, prix unique « dès ») ---------- */
.produit { background: var(--c-cream); }
.produit__grid { display: grid; grid-template-columns: 1.08fr 1fr; gap: 64px; align-items: start; }
.produit__info { position: relative; }
.produit__from { transform: rotate(-2deg); }
.produit__name { margin-top: 14px; font-size: 46px; line-height: 1.05; font-weight: 600; letter-spacing: -1.2px; color: var(--c-ink-2); }
.produit__rating { margin-top: 10px; font-size: 14px; color: var(--c-slate); }
.produit__rating .st { color: var(--c-green-dark); letter-spacing: 1px; }
.produit__lead { margin-top: 16px; font-size: 18px; line-height: 27px; color: var(--c-slate); }
.produit__cols { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--c-border-faq); border-bottom: 1px solid var(--c-border-faq); }
.produit__cols h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--c-grey); }
.produit__cols .checks { margin-top: 10px; }
.produit__cols .checks li { font-size: 14.5px; }
.produit__price { margin: 22px 0 16px; }
.produit__price p { display: flex; align-items: baseline; gap: 8px; color: var(--c-slate); font-size: 18px; }
.produit__price b { font-size: 54px; line-height: 1; font-weight: 600; letter-spacing: -1.5px; color: var(--c-green-dark); }
.produit__price small { display: block; margin-top: 6px; font-size: 14px; color: var(--c-grey); }

/* ---------- Face-à-face ---------- */
.h2h__grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vs { background: #fff; border-radius: 24px; padding: 26px 24px 24px; border: 1px solid var(--c-border-soft); box-shadow: var(--sh-card); }
.vs__logos { display: flex; align-items: center; gap: 8px; }
.vs__logos img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; box-shadow: var(--sh-tile); background: #fff; }
.vs__logos .vs__hector { border-radius: 50%; }
.vs__logos em { font-style: normal; font-family: var(--font-mono); font-size: 13px; color: var(--c-grey); margin: 0 4px; }
.vs h3 { margin-top: 18px; font-size: 20px; font-weight: 600; line-height: 1.25; }
.vs ul { margin-top: 16px; display: grid; gap: 6px; }
.vs li { position: relative; padding-left: 30px; font-size: 15px; line-height: 21px; }
.vs li::before { content: ""; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; background: center / contain no-repeat; }
.vs__them { color: var(--c-grey); }
.vs li.vs__them::before { background-image: url(/assets/img/icon-cross-grey.svg); }
.vs__us { font-weight: 600; color: var(--c-ink); margin-bottom: 10px; }
.vs li.vs__us::before { background-image: url(/assets/img/icon-check-green.svg); }
.vs li:last-child { margin-bottom: 0; }

/* ---------- Barre collante ---------- */
.sbar { position: fixed; left: 50%; bottom: 16px; z-index: 85; width: min(680px, 100% - 32px); transform: translate(-50%, 140%); transition: transform .35s var(--ease); }
.sbar.is-on { transform: translate(-50%, 0); }
.sbar__in { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 20px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); box-shadow: 0 16px 40px rgba(17, 27, 33, .18), 0 0 0 1px rgba(0,0,0,.05); }
.sbar__in img { width: 36px; height: 36px; border-radius: 50%; }
.sbar__in p { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sbar__in b { font-size: 15px; }
.sbar__in span { font-size: 13px; color: var(--c-green-dark); font-weight: 600; }

/* Preuve : pas de chevauchement */
.proof { padding-top: 90px; }
.proof__top { transform: none; margin-bottom: 0; }
.proof__title { margin-top: 64px; }

@media (max-width: 1200px) { .xstack { width: 340px; } }
@media (max-width: 960px) {
  .explode__grid, .produit__grid { grid-template-columns: 1fr; }
  .explode__stage { height: 480px; order: -1; }
  .h2h__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .explode__stage { height: 400px; }
  .xstack { width: 250px; --gap: 44px; }
  .explode__grid { gap: 8px; }
  .explode__real { max-width: none; }
  .produit__name { font-size: 34px; }
  .produit__cols { grid-template-columns: 1fr; gap: 16px; }
  .produit__price b { font-size: 44px; }
  .h2h__grid { margin-top: 32px; }
  .sbar { bottom: 0; width: 100%; }
  .sbar__in { border-radius: 18px 18px 0 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .sbar__in img { display: none; }
  .sbar__in .btn { padding: 10px 16px; min-height: 44px; font-size: 15px; }
  body.has-sbar .vbar { bottom: 78px; }
  .proof { padding-top: 56px; } .proof__top { padding-top: 0; } .proof__title { margin-top: 48px; }
}