/* =============================================================
   ZEDD Projets Carousel — zpc-style.css
   ============================================================= */

:root {
    --zpc-green:       #7DC242;
    --zpc-green-dark:  #6aad38;
    --zpc-bg:          #edf2ee;
    --zpc-white:       #ffffff;
    --zpc-grey-card:   #b8b8b8;
    --zpc-grey-light:  #d4d4d4;
    --zpc-text:        #1a1a1a;
    --zpc-text-muted:  #555555;
    --zpc-radius:      12px;
    --zpc-radius-sm:   8px;
    --zpc-shadow:      0 2px 12px rgba(0,0,0,.08);
    --zpc-transition:  .25s ease;
    --zpc-font:        inherit;
}

/* ── Wrapper global ── */
.zpc-wrapper {
    font-family:     var(--zpc-font);
    background:      var(--zpc-bg);
    padding:         2rem 1.5rem 1.5rem;
    border-radius:   var(--zpc-radius);
    overflow:        hidden;
    box-sizing:      border-box;
}

/* ── Filtres années ── */
.zpc-filters {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0;
    margin-bottom:   1.75rem;
    border:          2px solid var(--zpc-white);
    border-radius:   var(--zpc-radius-sm);
    width:           fit-content;
    overflow:        hidden;
    background:      var(--zpc-white);
}

.zpc-filter-btn {
    background:      var(--zpc-white);
    color:           var(--zpc-green);
    border:          none;
    padding:         .6rem 2.2rem;
    font-size:       1.1rem;
    font-weight:     700;
    cursor:          pointer;
    transition:      background var(--zpc-transition), color var(--zpc-transition);
    letter-spacing:  .02em;
    outline:         none;
    position:        relative;
}

.zpc-filter-btn:not(:last-child)::after {
    content:         '';
    position:        absolute;
    right:           0;
    top:             20%;
    height:          60%;
    width:           1px;
    background:      #e0e0e0;
}

.zpc-filter-btn.active,
.zpc-filter-btn:hover {
    background:      var(--zpc-green);
    color:           var(--zpc-white);
}

.zpc-filter-btn:focus-visible {
    outline:         2px solid var(--zpc-green-dark);
    outline-offset:  -2px;
}

/* ── Panneaux par année ── */
.zpc-year-panel {
    display:         none;
}

.zpc-year-panel.active {
    display:         block;
}

/* ── Track wrapper (masque le débordement) ── */
.zpc-track-wrapper {
    overflow:        hidden;
}

/* ── Track (conteneur des cartes, glissant) ── */
.zpc-track {
    display:         flex;
    gap:             1.25rem;
    transition:      transform .35s cubic-bezier(.4,0,.2,1);
    will-change:     transform;
    align-items:     flex-start;
}

/* ── Cartes ── */
.zpc-card {
    flex:            0 0 calc(33.333% - .84rem); /* 3 visibles par défaut */
    min-width:       220px;
    background:      var(--zpc-white);
    border-radius:   var(--zpc-radius);
    overflow:        hidden;
    box-shadow:      var(--zpc-shadow);
    transition:      transform var(--zpc-transition), box-shadow var(--zpc-transition);
    box-sizing:      border-box;
}

/* ── Track (conteneur des cartes, glissant) ── */
.zpc-track {
    display: flex;
    gap: 1.25rem;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    align-items: stretch;
    /* ← était flex-start */
}

/* ── Cartes ── */
.zpc-card {
    flex: 0 0 calc(33.333% - .84rem);
    min-width: 220px;
    background: var(--zpc-white);
    border-radius: var(--zpc-radius);
    overflow: hidden;
    box-shadow: var(--zpc-shadow);
    transition: transform var(--zpc-transition), box-shadow var(--zpc-transition);
    box-sizing: border-box;
    /* Supprimer la règle first-child ci-dessous */
}

.zpc-card-image {
    width: 100%;
    height: 200px;
    /* ← hauteur fixe au lieu de aspect-ratio */
    overflow: hidden;
    background: var(--zpc-grey-card);
    flex-shrink: 0;
}


.zpc-card:hover {
    transform:       translateY(-3px);
    box-shadow:      0 6px 20px rgba(0,0,0,.13);
}

/* Lien englobant */
.zpc-card-link {
        display: flex;
        flex-direction: column;
        text-decoration: none;
        color: inherit;
        height: 100%;
}

.zpc-card-link:hover .zpc-card-title {
    color:           var(--zpc-green);
}

/* Image / placeholder */
.zpc-card-image {
    width:           100%;
    aspect-ratio:    4 / 3;
    overflow:        hidden;
    background:      var(--zpc-grey-card);
}

.zpc-card-image img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    display:         block;
    transition:      transform .4s ease;
}

.zpc-card:hover .zpc-card-image img {
    transform:       scale(1.04);
}

.zpc-card-placeholder {
    width:           100%;
    height:          100%;
    background:      linear-gradient(135deg, #c8c8c8 0%, #b0b0b0 100%);
}

/* Corps de la carte */
.zpc-card-body {
    padding:         .85rem 1rem .95rem;
}

.zpc-card-subtitle {
    font-size:       .75rem;
    font-weight:     600;
    color:           var(--zpc-green);
    text-transform:  uppercase;
    letter-spacing:  .05em;
    margin:          0 0 .25rem;
}

.zpc-card-title {
    font-size:       .95rem;
    font-weight:     700;
    color:           var(--zpc-text);
    margin:          0 0 .3rem;
    line-height:     1.3;
    transition:      color var(--zpc-transition);
}

.zpc-card-desc {
    font-size:       .82rem;
    color:           var(--zpc-text-muted);
    margin:          0;
    line-height:     1.45;
    display:         -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:        hidden;
}

/* ── Navigation (prev / counter / next) ── */
.zpc-nav {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      1.25rem;
    padding:         0 .25rem;
    max-width:       180px; /* centré à gauche comme le screenshot */
}

.zpc-prev,
.zpc-next {
    background:      transparent;
    border:          none;
    color:           var(--zpc-green);
    font-size:       1.3rem;
    cursor:          pointer;
    padding:         .2rem .4rem;
    border-radius:   var(--zpc-radius-sm);
    transition:      background var(--zpc-transition), opacity var(--zpc-transition);
    line-height:     1;
}

.zpc-prev:hover,
.zpc-next:hover {
    background:      rgba(125,194,66,.12);
}

.zpc-prev:disabled,
.zpc-next:disabled {
    opacity:         .3;
    cursor:          default;
    background:      transparent;
}

.zpc-counter {
    font-size:       .85rem;
    font-weight:     600;
    color:           var(--zpc-green);
    min-width:       40px;
    text-align:      center;
    letter-spacing:  .02em;
}

/* ── Messages d'erreur / vide ── */
.zpc-error,
.zpc-empty {
    padding:     .75rem 1rem;
    border-radius: var(--zpc-radius-sm);
    font-size:   .9rem;
}

.zpc-error {
    background:  #fff0f0;
    color:       #c0392b;
    border:      1px solid #f5c6c6;
}

.zpc-empty {
    color:       var(--zpc-text-muted);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .zpc-card,
    .zpc-card:first-child {
        flex: 0 0 calc(50% - .63rem);
    }
}

@media (max-width: 580px) {
    .zpc-wrapper {
        padding: 1.25rem 1rem 1rem;
    }

    .zpc-filter-btn {
        padding:   .5rem 1.4rem;
        font-size: .95rem;
    }

    .zpc-card,
    .zpc-card:first-child {
        flex: 0 0 calc(85% - .63rem);
    }
}