/*
 * Accueil « pub » (`/?lp=apercu`), voir public/ad-landing.js.
 * Hors de ce mode, rien ici ne s'applique : `#lp-hero` porte `hidden`.
 * Tout est conditionné à l'absence d'aperçu prêt : dès que `app.js` pose
 * `product-preview-ready`, la fiche poster revient telle quelle.
 */
html.lp-apercu body:not(.product-preview-ready) .lp-hero[hidden] { display: grid !important; }
html.lp-apercu body:not(.product-preview-ready) .product-hero,
html.lp-apercu body:not(.product-preview-ready) #product-reminder { display: none; }

/* Les libellés des boutons sont posés par le module : pas de flash du prix. */
html.lp-apercu:not(.lp-labels) .header-cta,
html.lp-apercu:not(.lp-labels) #mobile-create-cta { visibility: hidden; }

.lp-hero {
  width: min(1160px, calc(100% - 40px));
  min-height: auto;
  padding: 44px 0 52px;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .95fr);
  grid-template-areas: "head proof" "body proof";
  align-items: center;
  column-gap: clamp(32px, 5vw, 68px);
  row-gap: 0;
}
.lp-head { grid-area: head; align-self: end; }
.lp-body { grid-area: body; align-self: start; }
.lp-hero h1 { max-width: 640px; color: #12233b; font-size: clamp(38px, 4.6vw, 60px); line-height: 1.02; }
.lp-hero h1 em { color: #e55332; }
.lp-hero .hero-copy { margin-top: 22px; }
.lp-hero .hero-button { margin-top: 26px; }
.lp-price-note { margin: 16px 0 0; color: var(--muted); font-size: 14px; font-weight: 700; }

.lp-proof { grid-area: proof; margin: 0; }
.lp-proof-stage { position: relative; margin: 0 0 0 7%; }
.lp-proof-case {
  width: 100%;
  height: auto;
  border: 3px solid var(--line);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--line);
  background: #fff;
}
.lp-proof-photo {
  position: absolute;
  /* En haut à gauche, sur le ciel et le numéro de case : aucun visage caché,
     et la photo se lit avant la case. */
  left: -8%;
  top: -9%;
  width: 30%;
  height: auto;
  padding: 6px 6px 22px;
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: 4px 4px 0 rgba(41, 41, 50, .85);
  transform: rotate(-6deg);
}
.lp-proof-tag {
  position: absolute;
  padding: 4px 10px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--yellow);
  font: 900 13px/1.2 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.lp-proof-tag-before { left: -6%; top: 39%; transform: rotate(-6deg); background: #fff; }
.lp-proof-tag-after { top: -14px; right: 14px; transform: rotate(2deg); }
.lp-proof figcaption { margin: 16px 0 0 7%; color: var(--muted); font-size: 12.5px; line-height: 1.4; }

@media (max-width: 900px) {
  .lp-hero {
    width: calc(100% - 32px);
    padding: 22px 0 34px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "proof" "body";
  }
  .lp-hero h1 { font-size: clamp(32px, 9vw, 46px); }
  .lp-proof { margin-top: 34px; }
  .lp-proof-stage { margin-left: 6%; }
  .lp-proof-photo { left: -6%; top: -7%; width: 28%; padding: 4px 4px 14px; }
  .lp-proof-tag { font-size: 11px; padding: 3px 8px; }
  .lp-proof-tag-before { left: -5%; top: 36%; }
  .lp-proof figcaption { margin-left: 6%; font-size: 12px; }
  .lp-hero .hero-copy { margin-top: 18px; font-size: 17px; }
  .lp-hero .hero-button { width: 100%; justify-content: center; text-align: center; }
  .lp-hero .hero-reassurance { gap: 10px 16px; }
}
/* Sous 390 px, la feuille principale remplace le libellé de l'en-tête par un
   pseudo-élément ; la version pub y met le sien. */
@media (max-width: 390px) {
  html.lp-apercu .header-cta::after { content: "Créer ma BD"; }
}