/* =================================================================
   Post Parallax Gallery — ppg-style.css
   Design : Minimaliste / Épuré — typo nette, bordures légères,
   animations élégantes, espacements généreux
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;1,9..144,300&display=swap');

/* ─────────────────────────────────────────────
   Variables globales
───────────────────────────────────────────── */
:root {
  --ppg-gap:          24px;
  --ppg-radius:       6px;
  --ppg-accent:       #111;
  --ppg-border-color: #e0e0e0;

  --ppg-font-title: 'Fraunces', Georgia, serif;
  --ppg-font-ui:    'Outfit', system-ui, sans-serif;

  --ppg-text:       #1a1a1a;
  --ppg-muted:      #888;
  --ppg-bg-card:    #fff;
  --ppg-ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ppg-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/* ─────────────────────────────────────────────
   Wrapper — commun à tous les layouts
───────────────────────────────────────────── */
.ppg-gallery {
  width: 100%;
  /* fallback gap si variable non définie */
  --ppg-gap: 24px;
}

.ppg-empty {
  font-family: var(--ppg-font-ui);
  color: var(--ppg-muted);
  font-size: .9rem;
  padding: 2rem 0;
  text-align: center;
}

/* ═════════════════════════════════════════════
   LAYOUT 1 — GRILLE UNIFORME
   .ppg-layout--grid
═════════════════════════════════════════════ */
.ppg-layout--grid {
  display: grid;
  gap: var(--ppg-gap);
  grid-template-columns: repeat( var(--ppg-col-count, 3), 1fr );
}

/* Colonnes responsive */
.ppg-layout--grid.ppg-cols--1 { --ppg-col-count: 1; }
.ppg-layout--grid.ppg-cols--2 { --ppg-col-count: 2; }
.ppg-layout--grid.ppg-cols--3 { --ppg-col-count: 3; }
.ppg-layout--grid.ppg-cols--4 { --ppg-col-count: 4; }
.ppg-layout--grid.ppg-cols--5 { --ppg-col-count: 5; }
.ppg-layout--grid.ppg-cols--6 { --ppg-col-count: 6; }

@media (max-width: 1024px) {
  .ppg-layout--grid.ppg-cols--5,
  .ppg-layout--grid.ppg-cols--6 { --ppg-col-count: 3; }
  .ppg-layout--grid.ppg-cols--4 { --ppg-col-count: 3; }
}
@media (max-width: 768px) {
  .ppg-layout--grid.ppg-cols--3,
  .ppg-layout--grid.ppg-cols--4,
  .ppg-layout--grid.ppg-cols--5,
  .ppg-layout--grid.ppg-cols--6 { --ppg-col-count: 2; }
}
@media (max-width: 480px) {
  .ppg-layout--grid { --ppg-col-count: 1 !important; }
}

/* ═════════════════════════════════════════════
   LAYOUT 2 — MASONRY (Pinterest)
   .ppg-layout--masonry
   → JS Masonry.js est initialisé dans ppg-script.js
═════════════════════════════════════════════ */
.ppg-layout--masonry {
  /* Masonry positionne via JS, ce wrapper garde les marges */
  position: relative;
}

/* Gutter item — utilisé par Masonry.js via data-attr */
.ppg-layout--masonry .ppg-card {
  /* La largeur est calculée en JS selon le nb de colonnes */
  margin-bottom: var(--ppg-gap);
}

/* ═════════════════════════════════════════════
   LAYOUT 3 — LISTE
   .ppg-layout--list
═════════════════════════════════════════════ */
.ppg-layout--list {
  display: flex;
  flex-direction: column;
  gap: var(--ppg-gap);
}

.ppg-layout--list .ppg-card {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: start;
}

@media (max-width: 640px) {
  .ppg-layout--list .ppg-card {
    grid-template-columns: 1fr;
  }
}

/* ═════════════════════════════════════════════
   CARTE — Base commune
═════════════════════════════════════════════ */
.ppg-card {
  background: var(--ppg-bg-card);
  border-radius: var(--ppg-radius);
  overflow: hidden;
  position: relative;
  /* Transition douce pour les hover */
  transition: box-shadow .4s var(--ppg-ease), transform .4s var(--ppg-ease);
}

.ppg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,.08);
}

/* ── Styles de bordure ── */
.ppg-border--none    { border: none; }
.ppg-border--thin    { border: 1px solid var(--ppg-border-color); }
.ppg-border--medium  { border: 2px solid var(--ppg-border-color); }
.ppg-border--thick   { border: 3px solid var(--ppg-border-color); }
.ppg-border--rounded {
  border: 1px solid var(--ppg-border-color);
  border-radius: 16px;
}
.ppg-border--pill    {
  border: 1px solid var(--ppg-border-color);
  border-radius: 9999px;
  overflow: hidden;
}

/* ── Image ── */
.ppg-card__img-link {
  display: block;
  overflow: hidden;
  text-decoration: none;
}

.ppg-card__img-wrap {
  overflow: hidden;
  position: relative;
  /* aspect-ratio injecté inline selon l'option */
  width: 100%;
  background: #f5f5f5;
}

/* Pas d'aspect-ratio défini → auto (masonry) */
.ppg-layout--masonry .ppg-card__img-wrap:not([style*="aspect-ratio"]) {
  aspect-ratio: unset;
}

.ppg-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ppg-ease-out);
  will-change: transform;
}

.ppg-card:hover .ppg-card__img {
  transform: scale(1.04);
}

/* Parallax sur l'image (JS gère le translateY) */
.ppg-parallax-img {
  height: 115%;
  margin-top: -7.5%;
}

/* ── Corps ── */
.ppg-card__body {
  padding: clamp(.9rem, 2vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

/* ── Taxonomie ── */
.ppg-card__tax {
  font-family: var(--ppg-font-ui);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ppg-muted);
  text-decoration: none;
  transition: color .2s;
  display: inline-block;
}
.ppg-card__tax:hover { color: var(--ppg-accent); }

/* ── Titre ── */
.ppg-card__title {
  font-family: var(--ppg-font-title);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 300;
  line-height: 1.3;
  margin: 0;
  color: var(--ppg-text);
}
.ppg-card__title a {
  text-decoration: none;
  color: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .4s var(--ppg-ease);
}
.ppg-card__title a:hover { background-size: 100% 1px; }

/* ── Bouton ── */
.ppg-card__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--ppg-font-ui);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-decoration: none;
  margin-top: .25rem;
  width: fit-content;
  transition: gap .3s var(--ppg-ease), color .25s, border-color .25s, background .25s;
}
.ppg-card__btn:hover { gap: .7rem; }

.ppg-card__btn-arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform .3s var(--ppg-ease);
}
.ppg-card__btn:hover .ppg-card__btn-arrow { transform: translateX(4px); }

/* Outline */
.ppg-btn--outline .ppg-card__btn {
  color: var(--ppg-accent);
  border: 1px solid var(--ppg-accent);
  padding: .42em .9em;
  border-radius: var(--ppg-radius);
}
.ppg-btn--outline .ppg-card__btn:hover {
  background: var(--ppg-accent);
  color: #fff;
}

/* Solid */
.ppg-btn--solid .ppg-card__btn {
  background: var(--ppg-accent);
  color: #fff;
  padding: .42em .9em;
  border-radius: var(--ppg-radius);
  border: 1px solid transparent;
}
.ppg-btn--solid .ppg-card__btn:hover { opacity: .82; }

/* Underline */
.ppg-btn--underline .ppg-card__btn {
  color: var(--ppg-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ═════════════════════════════════════════════
   FONDU AU SCROLL — fade-in
═════════════════════════════════════════════ */
.ppg-has-fadein .ppg-card--fade {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .75s var(--ppg-ease-out) var(--ppg-delay, 0s),
    transform .75s var(--ppg-ease-out) var(--ppg-delay, 0s),
    box-shadow .4s var(--ppg-ease),
    translate .4s var(--ppg-ease);
}
.ppg-has-fadein .ppg-card--fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Masonry : désactive le translateY du fade pour ne pas interférer avec Masonry */
.ppg-layout--masonry .ppg-card--fade {
  transition:
    opacity .75s var(--ppg-ease-out) var(--ppg-delay, 0s),
    box-shadow .4s var(--ppg-ease);
}
.ppg-layout--masonry .ppg-card--fade.is-visible { opacity: 1; }

/* ═════════════════════════════════════════════
   Layout liste — ajustements
═════════════════════════════════════════════ */
.ppg-layout--list .ppg-card__img-link {
  height: 100%;
}
.ppg-layout--list .ppg-card__img-wrap {
  height: 100%;
  min-height: 180px;
}
.ppg-layout--list .ppg-card__body {
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 2rem);
}
.ppg-layout--list .ppg-card__title {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
}

/* ═════════════════════════════════════════════
   Skeleton loader (pendant chargement Masonry)
═════════════════════════════════════════════ */
.ppg-layout--masonry.is-loading .ppg-card {
  visibility: hidden;
}
.ppg-layout--masonry.is-ready .ppg-card {
  visibility: visible;
}

/* ═════════════════════════════════════════════
   Widget vide dans Elementor editor
═════════════════════════════════════════════ */
.ppg-editor-placeholder {
  padding: 2.5rem 1.5rem;
  border: 2px dashed #d0d0d0;
  border-radius: 8px;
  background: #fafafa;
  text-align: center;
  font-family: var(--ppg-font-ui);
  color: #999;
}
.ppg-editor-placeholder strong {
  display: block;
  margin-bottom: .4rem;
  color: #555;
  font-size: 1rem;
}