/* ==========================================================
   ParcsActus — Articles v2.3
   ========================================================== */

/* ==========================================================
   1. GRILLE
   ========================================================== */
.pa-grid {
    display: grid;
    gap: var(--pa-gap, 24px);
    align-items: start;
}
.pa-grid--cols-1 { grid-template-columns: 1fr; }
.pa-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pa-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pa-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.pa-grid__item { display: flex; flex-direction: column; }

.pa-grid__img {
    position: relative; /* OBLIGATOIRE pour le badge absolu */
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: #e0e0e0;
    aspect-ratio: 16 / 10;
}
.pa-grid__img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .45s ease;
}
.pa-grid__img:hover img { transform: scale(1.06); }
.pa-grid__img .pa-badge {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 2;
}
.pa-grid__body { padding: 12px 0 0; }
.pa-grid__title { font-size: 25px; font-weight: 700; line-height: 1.3; margin: 0; }
.pa-grid__title a { color: inherit; text-decoration: none; }
.pa-grid__title a:hover { text-decoration: none; }

@media (max-width: 900px) {
    .pa-grid--cols-4, .pa-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .pa-grid--cols-4, .pa-grid--cols-3, .pa-grid--cols-2 { grid-template-columns: 1fr; }
}

/* ==========================================================
   2. HERO SLIDER
   ========================================================== */
.pa-hero {
    position: relative;
    width: 100vw;
    min-height: 420px;
    overflow: hidden;
    background: #0d1f30;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Backgrounds */
.pa-hero__bgs { position: absolute; inset: 0; }
.pa-hero__bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity .7s ease, transform 8s ease;
}
.pa-hero__bg.is-active { opacity: 1; transform: scale(1); }
.pa-hero__overlay { position: absolute; inset: 0; z-index: 1; }

/* Contenus — PAS de transition + animation en même temps */
.pa-hero__contents {
    position: relative;
    z-index: 2;
    min-height: 160px;
}
.pa-hero__content {
    position: absolute;
    bottom: 0; left: 48px; right: 48px;
    opacity: 0;
    pointer-events: none;
    /* transition seulement pour les changements de slide (pas le premier) */
    transition: opacity .5s ease;
}
.pa-hero__content.is-active {
    opacity: 1;
    pointer-events: auto;
}
/* Animation uniquement à l'entrée initiale via JS qui ajoute .pa-hero--loaded */
.pa-hero--loaded .pa-hero__content { transition: opacity .5s ease; }

.pa-hero__content .pa-badge { display: inline-block; margin-bottom: 12px; }

.pa-hero__title {
    font-size: clamp(22px, 3.5vw, 46px);
    font-weight: 700; color: #fff;
    line-height: 1.2; margin: 0 0 10px;
    max-width: 750px;
}
.pa-hero__title a { color: #fff; text-decoration: none; }
.pa-hero__title a:hover { color: #fff; text-decoration: none; opacity: .88; }

.pa-hero__meta {
    font-size: 14px; color: rgba(255,255,255,.65);
    display: flex; gap: 6px; align-items: center;
}
.pa-hero__meta-dot { opacity: .4; }
.pa-hero__park { color: rgba(255,255,255,.8) !important; text-decoration: none; }
.pa-hero__park:hover { text-decoration: none; }

/* Bulles — toujours visibles */
.pa-hero__bubbles {
    position: relative; z-index: 3;
    display: flex; gap: 10px;
    padding: 0 48px 28px;
}
.pa-hero__bubble {
    flex: 1;
    background: rgba(255,255,255,.13);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 0.5px solid rgba(255,255,255,.25);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    text-align: left; min-width: 0;
}
.pa-hero__bubble.is-active {
    background: rgba(255,255,255,.24);
    border-color: rgba(255,255,255,.5);
}
.pa-hero__bubble:hover { background: rgba(255,255,255,.19); }
.pa-hero__bubble-cat {
    font-size: 10px; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(255,255,255,.52);
    margin-bottom: 5px;
}
.pa-hero__bubble-title {
    font-size: 14px; font-weight: 600; color: #fff;
    line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}

/* Animation d'entrée initiale du contenu */
@keyframes pa-hero-fadein {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pa-hero__content.pa-hero__content--init {
    animation: pa-hero-fadein .7s ease forwards;
}

@media (max-width: 768px) {
    .pa-hero__content { left: 20px; right: 20px; }
    .pa-hero__bubbles { padding: 0 20px 20px; gap: 8px; }
    .pa-hero__bubble-cat { display: none; }
    .pa-hero__bubble { padding: 9px 11px; }
    .pa-hero__bubble-title { font-size: 12px; }
}

/* ==========================================================
   3. FEATURED + LISTE
   ========================================================== */
.pa-sidebar-layout {
    display: grid;
    grid-template-columns: var(--pa-left, 50%) 1fr;
    gap: 40px; align-items: start;
}

.pa-sidebar__featured-img {
    display: block; position: relative;
    overflow: hidden; border-radius: 6px;
    background: #e0e0e0;
    aspect-ratio: 16 / 10; margin-bottom: 16px;
}
.pa-sidebar__featured-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .45s ease;
}
.pa-sidebar__featured-img:hover img { transform: scale(1.05); }
.pa-sidebar__featured-img .pa-badge {
    position: absolute; top: 10px; left: 10px;
}

.pa-sidebar__featured-body { display: flex; gap: 16px; align-items: flex-start; }
.pa-sidebar__featured-date { flex-shrink: 0; text-align: center; line-height: 1; min-width: 36px; }
.pa-sidebar__featured-date strong { display: block; font-size: 34px; font-weight: 700; line-height: 1; }
.pa-sidebar__featured-date span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #888; margin-top: 3px; }
.pa-sidebar__featured-content { flex: 1; min-width: 0; }
.pa-sidebar__featured-title { font-size: 25px; font-weight: 700; line-height: 1.3; margin: 4px 0 0; }
.pa-sidebar__featured-title a { color: inherit; text-decoration: none; }
.pa-sidebar__featured-title a:hover { text-decoration: none; }

.pa-sidebar__list { display: flex; flex-direction: column; }
.pa-sidebar__item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 0; border-bottom: 1px solid #eee;
}
.pa-sidebar__item:first-child { padding-top: 0; }
.pa-sidebar__item:last-child { border: none; padding-bottom: 0; }

.pa-sidebar__item-img {
    flex-shrink: 0; width: 88px; height: 88px;
    border-radius: 5px; overflow: hidden;
    display: block; background: #e0e0e0;
    position: relative;
}
.pa-sidebar__item-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .4s ease;
}
.pa-sidebar__item-img:hover img { transform: scale(1.07); }
.pa-sidebar__item-body { flex: 1; min-width: 0; }
.pa-sidebar__item-title { font-size: 25px; font-weight: 700; line-height: 1.35; margin: 4px 0 0; }
.pa-sidebar__item-title a { color: inherit; text-decoration: none; }
.pa-sidebar__item-title a:hover { text-decoration: none; }

@media (max-width: 900px) {
    .pa-sidebar-layout { grid-template-columns: 1fr; gap: 28px; }
}