.pvh{padding:150px var(--pad) 40px;max-width:1300px}
.pvh h1{font-size:clamp(44px,7vw,112px);letter-spacing:-.055em;line-height:.95;margin-bottom:28px}
.pvf{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.pvf button{border:1px solid rgba(21,20,19,.28);background:transparent;border-radius:99px;padding:9px 18px;font-size:14px;cursor:pointer;transition:.25s}
.pvf button:hover{border-color:var(--ink)}.pvf button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pvg{padding:30px var(--pad) 120px}
.pv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pc{position:relative;aspect-ratio:9/15;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#2a2321,#0e0c0b);cursor:pointer;border:0;padding:0;text-align:left;color:#ffffff;transition:transform .5s}
.pc:hover{transform:translateY(-6px)}
.pc .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.pc:hover .bg{transform:scale(1.06)}
.pc::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,transparent 50%,rgba(0,0,0,.85));z-index:1}
.pc .nm{position:absolute;left:18px;right:18px;bottom:46px;z-index:2;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.pc .lb{position:absolute;left:18px;bottom:18px;z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.pc .pl{position:absolute;right:16px;top:16px;z-index:2;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);display:grid;place-items:center;font-size:15px;transition:.3s}
.pc:hover .pl{background:var(--kaki)}
.pc.plain .bg{background:radial-gradient(circle at 50% 35%,var(--tint,#635bff),transparent 65%)}
.pc.plain .nm{bottom:auto;top:44%;font-size:30px;text-align:center;left:12px;right:12px}

.pvm{position:fixed;inset:0;z-index:300;background:rgba(14,12,11,.92);display:grid;place-items:center;backdrop-filter:blur(10px);overflow:auto;padding:30px}
.pvm[hidden]{display:none}
.pvm-in{display:grid;gap:20px;justify-items:center}
.pvm .pv-tablet{width:min(420px,86vw);transform:none}
.pvm-x{position:fixed;top:20px;right:28px;background:none;border:0;color:#fff;font-size:46px;line-height:1;cursor:pointer;z-index:2}
.pvm-meta{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:baseline;justify-content:center;color:#ffffff}
.pvm-meta b{font-size:24px;font-weight:600;letter-spacing:-.03em}
.pvm-meta span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#b4b8c2}
.pvm-meta .link{color:#ffffff;border-color:#9aa0ac}

/* cartes = vraie capture de l'application (format tablette 370 × 658) */
.pc{aspect-ratio:370/658}
.pc::before{background:linear-gradient(180deg,transparent 0,transparent 62%,rgba(0,0,0,.82) 100%)}
.pc .nm{font-size:20px;bottom:42px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.pc .lb{text-shadow:0 2px 10px rgba(0,0,0,.6)}
@media(max-width:600px){.pv-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pc .nm{font-size:16px}}

/* logos officiels (nom seul) à la place du nom en texte : blancs sur le fond sombre  */
.pc .nm.lg{display:flex;align-items:flex-end;text-shadow:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}
.pc .nm.lg img,.pvm-meta b.lg img{display:block;width:calc(var(--w,100) * 1px);height:auto;max-height:38px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.pvm-meta b.lg img{width:calc(var(--w,100) * 1.6px);max-height:60px;object-position:center}
@media(max-width:600px){.pc .nm.lg img{width:calc(var(--w,100) * .8px);max-height:30px}}

/* aperçu en direct dans la carte (quand il n'y a pas de capture) */
.pc .bg.live{overflow:hidden;background:#fff}
.pc .bg.live iframe{position:absolute;left:0;top:0;width:370px;height:658px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.pc:hover .bg.live{transform:none}

/* Dolce Gusto : légèrement plus bas pour s'aligner sur les autres logos */
.pc .nm.lg img[alt*="Dolce"]{transform:translateY(7px)}
/* Nespresso : le « N » a une courbe fine à gauche ; on décale pour que la lettre s'aligne avec les autres logos */
.pc .nm.lg img[alt="Nespresso"]{transform:translateX(-8px)}
@media(max-width:600px){.pc .nm.lg img[alt="Nespresso"]{transform:translateX(-6px)}}
/* un logo large ne dépasse jamais la carte (mobile) */
.pc .nm.lg img{max-width:100%}

/* logos massifs (écusson + mot) : plafond de hauteur plus haut pour rester lisibles */
.pc .nm.lg img[alt="Johnnie Walker"]{max-height:60px;--w:84}
.pc .nm.lg img[alt="Hyundai"]{max-height:46px}
.pvm-meta b.lg img[alt="Johnnie Walker"]{max-height:96px}

/* logo + sous-titre empilés en bas : un libellé long passe sur 2 lignes et pousse le logo vers le haut, sans le recouvrir */
.pc .ft{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left}
.pc .ft .nm,.pc .ft .lb{position:static;left:auto;right:auto;bottom:auto;max-width:100%}
.pc .ft .lb{white-space:normal;line-height:1.35}