/* ── Widget VP Blog (hero featured + sidebar + grille filtrable) ── */

.vp-blog { width: 100%; display: flex; flex-direction: column; gap: clamp(8px,1.5vw,24px); }

/* Filtres */
.vp-blog__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 48px; }
.vp-blog__pill { display: inline-block; text-decoration: none; font-family: "Montserrat", sans-serif; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: 2px; text-transform: uppercase; padding: 10px !important; border-radius: 100px !important; border: 0 !important; cursor: pointer; background: var(--muted,#fdf6f3) !important; background-image:none; color: var(--surface-dark,#4b4b4b) !important; transition: all .2s; box-shadow:none; }
.vp-blog__pill:hover { background: rgba(241,184,160,.2) !important; background-image:none; color: var(--foreground,#000) !important; }
.vp-blog__pill.is-active { background-image: linear-gradient(to right, rgb(180,99,150), rgb(241,184,160)) !important; color: #fff !important; box-shadow: 0 10px 30px rgba(244,149,133,.25); }
.vp-blog__empty { text-align: center; font-family: "Playfair Display", serif; font-style: italic; font-size: 20px; color: var(--muted-foreground,#6b6b6b); padding: 80px 0; }

/* Badge catégorie (commun) */
.vp-blog__badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--primary,#f1b8a0); color: #fff; font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; }

/* Image de fond zoomable (commun) */
.vp-blog__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .7s ease; }
.vp-blog__card:hover .vp-blog__bg,
.vp-blog__ocard:hover .vp-blog__bg { transform: scale(1.05); }

/* ── Rangée hero : featured (2fr) + sidebar (1fr) ── */
.vp-blog__hero { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(8px,1.5vw,24px); align-items: stretch; }
.vp-blog__side { display: flex; flex-direction: column; gap: clamp(8px,1.5vw,24px); }

/* Cartes overlay (featured + sidebar) */
.vp-blog__ocard { position: relative; display: block; overflow: hidden; border-radius: 16px; text-decoration: none; }
.vp-blog__ocard .vp-blog__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 45%, transparent 75%); }
.vp-blog__ocard-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px; }
.vp-blog__date--light { color: rgba(255,255,255,.6); }
.vp-blog__otitle { font-family: "Playfair Display", serif; font-weight: 400; color: #fff; margin: 6px 0 0; line-height: 1.2; transition: color .3s; }
.vp-blog__ocard:hover .vp-blog__otitle { color: var(--primary,#f1b8a0); }
.vp-blog__oexcerpt { font-family: "Playfair Display", serif; font-style: italic; font-size: 14px; color: rgba(255,255,255,.75); margin: 10px 0 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Featured : remplit la hauteur de la colonne sidebar */
.vp-blog__featured { height: 100%; min-height: 420px; }
.vp-blog__featured .vp-blog__ocard-cap { padding: 32px; }
.vp-blog__featured .vp-blog__otitle { font-size: clamp(20px,2.5vw,28px); }

/* Sidebar : 2 cartes 16/9 empilées */
.vp-blog__sidecard { flex: 1; aspect-ratio: 16/9; }
.vp-blog__sidecard .vp-blog__ocard-cap { padding: 16px; }
.vp-blog__sidecard .vp-blog__otitle { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp-blog__sidecard .vp-blog__date--light { font-size: 10px; }

/* ── Grille standard (reste) ── */
.vp-blog__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(8px,1.5vw,24px); }
.vp-blog__card { display: flex; flex-direction: column; background: var(--muted,#fdf6f3); border-radius: 16px; overflow: hidden; text-decoration: none; transition: box-shadow .3s, transform .3s; }
.vp-blog__card:hover { box-shadow: 0 20px 50px rgba(0,0,0,.1); transform: translateY(-3px); }
.vp-blog__img { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.vp-blog__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.vp-blog__date { font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--surface-dark,#4b4b4b); }
.vp-blog__title { font-family: "Playfair Display", serif; font-weight: 400; font-size: 17px; line-height: 1.3; color: var(--foreground,#000); margin: 0; transition: color .3s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp-blog__card:hover .vp-blog__title { color: var(--primary,#f1b8a0); }
.vp-blog__excerpt { font-family: "Playfair Display", serif; font-style: italic; font-size: 14px; color: var(--surface-dark,#4b4b4b); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp-blog__more { display: inline-flex; align-items: center; gap: 6px; font-family: "Montserrat", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--primary,#f1b8a0); margin-top: 4px; transition: gap .2s; }
.vp-blog__card:hover .vp-blog__more { gap: 12px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .vp-blog__hero { grid-template-columns: 1fr; }
  .vp-blog__featured { min-height: 0; aspect-ratio: 16/9; }
  .vp-blog__side { flex-direction: row; }
  .vp-blog__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .vp-blog__side { flex-direction: column; }
  .vp-blog__grid { grid-template-columns: 1fr; }
}