/**
 * wallpapers-accordion.css — V3 Art-Nando
 * Identique V0 — layout fixe PC + mobile (scroll horizontal naturel)
 */

/* ── Titre ────────────────────────────────────────────────────── */
.gallery-title3 {
    font-family: 'Varela Round', sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #fff;
    padding: 0;
}
.WPtexte {
    font-size: 1em;
    line-height: 1.5em;
    margin-top: 45px;
    color: #fff;
}

/* ── Layout wrapper — identique V0 ───────────────────────────── */
#banner { height: auto !important; margin: 0 auto !important; padding: 0 0 100px 0; }
.gallery-wrapper {
    height: auto !important;
    width: 100%;
    max-width: 760px;
    text-align: center;
    margin: 50px auto 0 !important;
    padding: 0 0 10px 0;
}
.gallery {
    position: relative;
    height: auto !important;
    width: 100%;
    text-align: center;
    margin: 50px auto 0 !important;
    padding: 0 0 10px 0;
}

/* ── Accordion — identique V0 ────────────────────────────────── */
.gallery #wp1,.gallery #wp2,.gallery #wp3,.gallery #wp4,.gallery #wp5,
.gallery #wp6,.gallery #wp7,.gallery #wp8,.gallery #wp9,.gallery #wp10,
.gallery #wp11,.gallery #wp12,.gallery #wp13,.gallery #wp14,.gallery #wp15 {
    position: relative;
    top: 10px;
    left: 0;
    background: linear-gradient(to top, #eaeaea, #fafafa);
    background: linear-gradient(to top, #eaeaea, #fafafa);
    padding: 10px;
    display: inline-block;
    box-shadow: 0 1px 1px rgba(0,0,0,.65);
    border-radius: 3px;
    border: solid 1px #ddd;
    width: 460px;
    height: 220px;
    overflow: hidden;
}

.gallery input { display: none; }

.gallery input:checked + label,
.gallery label:hover {
    background: #44b4c4;
    border: solid 1px rgba(0,0,0,.15);
    color: #ffffff;
    box-shadow: 0 1px 1px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.1) inset;
}
.gallery label {
    font-family: Helvetica, Arial, sans-serif;
    cursor: pointer;
    display: block;
    border: solid 1px transparent;
    text-align: center;
    border-radius: 3px;
    float: left;
    width: 40px;
    height: 200px;
    line-height: 200px;
    background: #80c9c6 !important;
    border: solid 1px rgba(0,0,0,.15);
    color: #ffffff !important;
}
.gallery label:last-child { margin-right: 0; }

.gallery article {
    width: 0;
    height: 180px;
    overflow: hidden;
    -webkit-transition: width .25s linear, opacity .2s linear;
    transition: width .25s linear, opacity .3s linear;
    position: relative;
    top: 5px;
    margin-bottom: 0;
    padding: 0;
    margin-right: 10px;
    opacity: 0;
    float: left;
}
.gallery div:last-child article { margin-right: 0; }

.gallery article p {
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 18px;
    width: 245px;
    padding: 5px 10px;
}

/* Checked → ouvre l'article */
.gallery #wp1  > div.wp1  > input:checked ~ article,
.gallery #wp2  > div.wp2  > input:checked ~ article,
.gallery #wp3  > div.wp3  > input:checked ~ article,
.gallery #wp4  > div.wp4  > input:checked ~ article,
.gallery #wp5  > div.wp5  > input:checked ~ article,
.gallery #wp6  > div.wp6  > input:checked ~ article,
.gallery #wp7  > div.wp7  > input:checked ~ article,
.gallery #wp8  > div.wp8  > input:checked ~ article,
.gallery #wp9  > div.wp9  > input:checked ~ article,
.gallery #wp10 > div.wp10 > input:checked ~ article,
.gallery #wp11 > div.wp11 > input:checked ~ article,
.gallery #wp12 > div.wp12 > input:checked ~ article,
.gallery #wp13 > div.wp13 > input:checked ~ article,
.gallery #wp14 > div.wp14 > input:checked ~ article,
.gallery #wp15 > div.wp15 > input:checked ~ article {
    width: 255px;
    opacity: 1;
}

/* ── Icônes zoom + download — améliorées V3 ──────────────────── */
.gallery article p.dlwp {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 255px;
    height: 180px;
    cursor: pointer;
}
.gallery article p.dlwp img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter .25s ease;
}
.gallery article p.dlwp::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background .25s ease;
    pointer-events: none;
    z-index: 1;
}
.gallery article p.dlwp:hover::after { background: rgba(0,0,0,.35); }

.gallery article p.dlwp a.imgzoom {
    position: absolute;
    bottom: 10px;
    left: calc(50% - 48px);
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    color: #333 !important;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s;
    text-decoration: none;
}
.gallery article p.dlwp a.icondownload,
.gallery article p.dlwp a[href*="download.php"] {
    position: absolute;
    bottom: 10px;
    left: calc(50% + 4px);
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(68,180,196,.9);
    color: #ffffff !important;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s .05s, transform .2s .05s;
    text-decoration: none;
}
.gallery article p.dlwp a.imgzoom i,
.gallery article p.dlwp a[href*="download.php"] i { font-size: 1.1rem; line-height: 1; }

.gallery article p.dlwp:hover a.imgzoom,
.gallery article p.dlwp:hover a.icondownload,
.gallery article p.dlwp:hover a[href*="download.php"] {
    opacity: 1;
    transform: translateY(0);
}
/* Touch devices — icônes toujours visibles */
@media (hover: none), (pointer: coarse) {
    .gallery article p.dlwp a.imgzoom,
    .gallery article p.dlwp a.icondownload,
    .gallery article p.dlwp a[href*="download.php"] {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* ── Modal zoom ───────────────────────────────────────────────── */
#zoomModal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.85);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}
#zoomModal[style*="flex"] { display: flex !important; }
#zoomModal .modal-content {
    display: block;
    max-width: min(90vw, 900px);
    max-height: 88vh;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    cursor: zoom-out;
    animation: wpZoomIn .3s ease;
}
@keyframes wpZoomIn  { from { transform:scale(.75); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes wpZoomOut { from { transform:scale(1); opacity:1; } to { transform:scale(.75); opacity:0; } }
.modal-content.out { animation: wpZoomOut .25s ease; }