/* ── APS Public CSS — style éditorial ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&family=Inter:wght@300;400&display=swap');

.aps-showcase {
    /* Valeurs de repli — surclassées inline par PHP */
    --aps-font-nav:  "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
    --aps-font-body: 'Inter', sans-serif;
    --aps-font-serif:'Cormorant Garamond', Georgia, serif;

    --aps-bg:            #f5f5f5;
    --aps-item-bg:       transparent;
    --aps-border-color:  #e0e0e0;
    --aps-border-width:  0px;
    --aps-label-color:   #111111;
    --aps-cat-color:     #777777;
    --aps-title-color:   #111111;
    --aps-excerpt-color: #555555;
    --aps-date-color:    #999999;
    --aps-arrow-bg:      #ffffff;
    --aps-arrow-color:   #111111;

    --aps-gap: 2px;
    --aps-img-height: 420px;
    --aps-vis-desktop: 5;
    --aps-vis-tablet:  3;
    --aps-vis-mobile:  2;
    --aps-visible: var(--aps-vis-desktop);

    width: 100%;
    background: var(--aps-bg);
    padding: 0 0 40px;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── Header ── */
.aps-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 24px 14px;
}
.aps-label,
.aps-cta {
    font-family: var(--aps-font-nav);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aps-label-color);
}
.aps-cta {
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.aps-cta:hover { border-color: currentColor; }

/* ── Track ── */
.aps-track-wrap { position: relative; overflow: hidden; }
.aps-track {
    display: flex;
    gap: var(--aps-gap);
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

/* ── Item ── */
.aps-item {
    flex: 0 0 calc((100% - var(--aps-gap) * (var(--aps-visible) - 1)) / var(--aps-visible));
    min-width: 0;
    background: var(--aps-item-bg);
    border: var(--aps-border-width) solid var(--aps-border-color);
    box-sizing: border-box;
}
.aps-item__img-wrap {
    display: block;
    overflow: hidden;
    width: 100%;
    height: var(--aps-img-height);
    position: relative;
    background: #dcdcdc;
}
.aps-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform .6s cubic-bezier(.25, .46, .45, .94);
}
.aps-item__noimg { display: block; width: 100%; height: 100%; background: #e6e6e6; }
.aps-item:hover .aps-item__img { transform: scale(1.03); }

.aps-item__info { padding: 12px 10px 14px; }

.aps-item__cat {
    font-family: var(--aps-font-nav);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aps-cat-color);
    margin: 0 0 6px;
}
.aps-item__title {
    font-family: var(--aps-font-serif);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 6px;
    color: var(--aps-title-color);
}
.aps-item__title a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.aps-item__title a:hover { border-color: currentColor; }

.aps-item__excerpt {
    font-family: var(--aps-font-body);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.6;
    color: var(--aps-excerpt-color);
    margin: 0 0 6px;
}
.aps-item__date {
    font-family: var(--aps-font-nav);
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aps-date-color);
    margin: 0;
}

/* ── Flèches ── */
.aps-arrow {
    position: absolute;
    top: calc(var(--aps-img-height) / 2 - 18px);
    background: var(--aps-arrow-bg);
    border: none;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--aps-arrow-color);
    opacity: 0;
    transition: opacity .2s;
    z-index: 10;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.aps-track-wrap:hover .aps-arrow { opacity: 1; }
.aps-arrow--prev { left: 10px; }
.aps-arrow--next { right: 10px; }
.aps-arrow:disabled { opacity: .3 !important; cursor: default; }
.aps-arrow.hidden { display: none; }

/* Pas de carrousel : on masque flèches et points */
.aps-showcase--static .aps-dots:empty { display: none; }

/* ── Dots ── */
.aps-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.aps-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--aps-border-color); border: none; padding: 0;
    cursor: pointer; transition: background .2s;
}
.aps-dot.active { background: var(--aps-title-color); }

/* ── Responsive — le nombre de colonnes bascule via --aps-visible ── */
@media (max-width: 1024px) {
    .aps-showcase { --aps-visible: var(--aps-vis-tablet); }
}
@media (max-width: 640px) {
    .aps-showcase { --aps-visible: var(--aps-vis-mobile); }
    .aps-header { padding: 14px 16px 10px; }
    .aps-item__img-wrap { height: 260px; }
    .aps-item__title { font-size: 15px; }
    .aps-arrow { opacity: 1; }
}