/* Positive Theme — home. Porté de pages/home.dc.html. */

/* La carte à la une remonte sur le bandeau du header. */
.pm-home-lift { padding: 40px 0 52px }

/* ---------- LES DERNIÈRES PUBLIS ----------
   Colonne de gauche : 2 grandes cartes empilées. Colonne de droite : 3 petites. */
.latest { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-top: 24px; align-items: stretch }
.latest__main, .latest__side { display: grid; gap: 24px; align-content: start }
.latest .big .ph { min-height: 260px; height: auto }
.latest .big .cap { flex: 0 0 auto }
.latest .big .cap { padding: 24px 24px 28px }
.latest .big .card-title { font-size: 30px }
.latest .big p { font: 400 14.5px/1.55 var(--pm-font-body); margin: 12px 0 0 }
.latest .sm .ph { height: 168px }
.latest .sm .card-title { font-size: 21px }
.latest .sm .cap p { font-size: 12.5px }

/* Légendes : rotation rose / violet / magenta sur les 5 cartes. */
.latest__main .pop-art:nth-child(1) .cap { background: var(--pm-rose) }
.latest__main .pop-art:nth-child(2) .cap { background: var(--pm-violet) }
.latest__side .pop-art:nth-child(1) .cap { background: var(--pm-magenta) }
.latest__side .pop-art:nth-child(2) .cap { background: var(--pm-rose) }
.latest__side .pop-art:nth-child(3) .cap { background: var(--pm-violet) }

/* Deux petites cartes légèrement pivotées, redressées au survol. */
.latest__side .pop-art:nth-child(2) { transform: rotate(.5deg) }
.latest__side .pop-art:nth-child(3) { transform: rotate(-.5deg) }
.latest__side .pop-art:hover { transform: translate(-2px,-2px) rotate(0deg) }

/* Sur deux colonnes seulement, les 2 grandes cartes se partagent en parts
   égales la hauteur de la colonne de droite : les deux colonnes se terminent à
   la même ligne. `minmax(0,1fr)` et les `min-height: 0` sont indispensables —
   sans eux, la hauteur intrinsèque des images gonfle les rangées. C'est le
   visuel qui absorbe la place restante, pas la légende. En dessous de 1000px la
   grille passe en colonne unique : ces règles ne doivent plus s'appliquer,
   sinon les rangées n'ont plus de hauteur de référence et le visuel s'écrase. */
@media (min-width: 1001px) {
  .latest { align-items: stretch }
  .latest__main { grid-template-rows: minmax(0,1fr) minmax(0,1fr); align-content: stretch }
  .latest__main .pop-art { min-height: 0 }
  .latest .big .ph { flex: 1 1 0; min-height: 0 }
}

/* ---------- POSITIVE, C'EST QUOI ? ---------- */
.brand {
  border: var(--pm-bd); box-shadow: var(--pm-sh-9); background: var(--pm-grad-brand);
  padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px;
  align-items: center; overflow: hidden;
}
.brand img { display: block; width: 100%; height: auto }
.brand .brand-title { font-size: 56px; color: #fff; margin: 0 0 20px; line-height: .98; text-shadow: 5px 5px 0 var(--pm-violet) }
.brand p { font: 500 16px/1.64 var(--pm-font-body); color: rgba(255,255,255,.95); margin: 0 0 16px }
.brand p:last-of-type { margin-bottom: 0 }
.brand a:not(.btn-light) { color: #fff; text-decoration: underline; font-weight: 700 }

/* ---------- GUIDE SEXTOY ---------- */
.guide { display: grid; grid-template-columns: .6fr 1fr 1fr; gap: 28px; align-items: center }
.guide .intro { text-align: center }
.guide .intro img { width: 160px; margin: 0 auto }
.guide .intro .guide-title { font-size: 38px; margin: 12px 0 18px; color: var(--pm-violet); text-shadow: 4px 4px 0 var(--pm-rose) }
.guide .lite:nth-of-type(odd) .cap  { background: var(--pm-violet) }
.guide .lite:nth-of-type(even) .cap { background: var(--pm-magenta) }

/* ---------- RUBRIQUES EN DUO ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 46px; align-items: start }
.cat { border: var(--pm-bd); padding: 32px; box-shadow: var(--pm-sh-9) }
.cat.violet { background: var(--pm-violet) }
.cat.rose   { background: var(--pm-rose) }
.cat .cat-hd { text-align: center; margin-bottom: 22px }
.cat .cat-hd img { width: 74px; height: auto; margin: 0 auto 4px; display: block }
.cat .cat-title { font-size: 38px; text-align: center; margin: 0; color: #fff }
.cat.violet .cat-title { text-shadow: 4px 4px 0 var(--pm-rose) }
.cat.rose .cat-title   { text-shadow: 4px 4px 0 var(--pm-violet) }
.cat .lite .ph { height: 238px }
.cat .lite .card-title, .cat .lite .card-title a { font-size: 25px; color: var(--pm-ink) }
.cat .lite .cap { padding: 20px 20px 22px; background: #fff }
.cat .lite .cap p { font-size: 13px; color: var(--pm-ink) }

/* ---------- GRILLE SEXUALITÉ POSITIVE ---------- */
.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 24px }
.grid6 .lite .card-title, .grid6 .lite .card-title a { font-size: 21px; color: #fff }

@media (max-width: 1000px) {
  .latest { grid-template-columns: 1fr }
  .latest__side .pop-art { transform: none !important }
  .grid6 { grid-template-columns: 1fr 1fr }
  .duo { grid-template-columns: 1fr; gap: 36px }
  .brand { grid-template-columns: 1fr; padding: 32px }
  .brand .brand-title { font-size: 40px }
  .guide { grid-template-columns: 1fr; gap: 22px }
  .pm-home-lift { padding: 28px 0 40px }
}
@media (max-width: 620px) {
  .grid6 { grid-template-columns: 1fr }
  .latest .big .card-title { font-size: 26px }
  .cat { padding: 20px }
  .cat .cat-title { font-size: 28px }
  .brand .brand-title { font-size: 32px }
  .guide .intro .guide-title { font-size: 30px }
}