#webCollectionPage, #webCollectionPage * {
    box-sizing: border-box;
}



#webCollectionPage, #webCollectionPage {
    margin: 0;
    padding: 0;

    background: #000;
    color: #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}




/* =========================================================
   SÉLECTEUR D'ARTISTE
   ========================================================= */



#webCollectionPage .collectionBar {
    position: sticky;
    top: 0;

    z-index: 5100;

    display: flex;
    align-items: center;
    gap: 8px;

    width: 100%;

    padding: 8px;

    background: #000;
}



#webCollectionPage .collectionSelect {
    display: block;

    width: 100%;
    max-width: 420px;

    margin: 0;

    padding:
        10px
        38px
        10px
        12px;

    border: 1px solid #333;
    border-radius: 0;

    background: #111;
    color: #fff;

    font: inherit;
    font-size: 14px;

    cursor: pointer;
}



#webCollectionPage .collectionsButton {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 39px;
    padding: 0 14px;

    border: 1px solid #333;
    border-radius: 0;

    background: #111;
    color: #fff;

    font: inherit;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
}



#webCollectionPage .collectionsButton:hover, #webCollectionPage .collectionsButton:focus-visible {
    background: #fff;
    color: #000;
    outline: none;
}




/* =========================================================
   FILTRES
   ========================================================= */



#webCollectionPage .filters {
    position: sticky;
    top: 55px;
    z-index: 5000;

    display: flex;
    flex-wrap: wrap;
    gap: 1px;

    width: 100%;

    background: #000;
}



#webCollectionPage .filterButton {
    flex: 0 0 auto;

    margin: 0;
    padding: 10px 13px;

    border: 0;

    background: #161616;
    color: #bbb;

    font: inherit;
    font-size: 12px;

    cursor: pointer;
}



#webCollectionPage .filterButton:hover, #webCollectionPage .filterButton.active {
    background: #fff;
    color: #000;
}



#webCollectionPage .work.isHidden {
    display: none;
}




/* =========================================================
   GRILLE — DESKTOP : 4
   ========================================================= */



#webCollectionPage .gallery {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 2px;

    width: 100%;
}




/* =========================================================
   TUILE
   ========================================================= */



#webCollectionPage .work {
    position: relative;

    min-width: 0;

    overflow: hidden;

    background: #111;

    cursor: pointer;
}



#webCollectionPage .workImage {
    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    object-fit: cover;

    background: #161616;

    transition:
        transform .3s ease,
        opacity .3s ease;
}



#webCollectionPage .work:hover .workImage {
    transform: scale(1.025);
    opacity: .9;
}




/* =========================================================
   LÉGENDE
   ========================================================= */



#webCollectionPage .caption {
    padding:
        10px
        12px
        13px;

    background: #111;
}



#webCollectionPage .title {
    font-size: 15px;
    line-height: 1.2;
}



#webCollectionPage .meta {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.25;
    opacity: .65;
}




#webCollectionPage .collectionGroupTitle {
    grid-column: 1 / -1;
    margin: 0;
    padding: 22px 14px 12px;
    display: flex;
    align-items: flex-end;
    background-color: #000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}



#webCollectionPage .classificationTitle {
    grid-column: 1 / -1;
    height: auto;
    margin: 0;
    padding: 10px 14px;
    display: block;
    background-color: #111;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-shadow: 0 1px 4px rgba(0,0,0,.95);
}



#webCollectionPage .classificationTitle.isHidden {
    display: none;
}



#webCollectionPage .artistTile {
    position: relative;
    display: block;
    min-width: 0;
    overflow: hidden;
    background: #111;
    color: #fff;
    text-decoration: none;
}



#webCollectionPage .artistTile .workImage {
    transition: transform .3s ease, opacity .3s ease;
}



#webCollectionPage .artistTile:hover .workImage {
    transform: scale(1.025);
    opacity: .9;
}



#webCollectionPage .artistCaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 70px 16px 16px;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.92));
}



#webCollectionPage .artistName {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.08;
}



#webCollectionPage .artistWorkTitle {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 400;
    opacity: .82;
}



/* =========================================================
   VIEWER
   ========================================================= */



#webCollectionPage .viewer {
    position: fixed;
    inset: 0;

    z-index: 10000;

    display: none;

    align-items: center;
    justify-content: center;

    overflow: hidden;
    background: #000;
}



#webCollectionPage .viewer.open {
    display: flex;
}



#webCollectionPage .viewerImage {
    display: block;

    width: auto;
    height: auto;

    max-width: 100vw;
    max-height: 100vh;

    object-fit: contain;

    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    will-change: transform;
    transition: transform .12s ease-out;
    cursor: zoom-in;
}



#webCollectionPage .viewerImage.isZoomed { cursor: grab; }


#webCollectionPage .viewerImage.isDragging { cursor: grabbing; transition: none; }



#webCollectionPage .viewerCaption {
    transition: opacity .18s ease;
}



/* Masquer le titre et les informations quand la souris est sur l'image. */


#webCollectionPage .viewer:has(.viewerImage:hover) .viewerCaption {
    opacity: 0;
}




/* =========================================================
   FERMETURE
   ========================================================= */



#webCollectionPage .noticeButton {
    position: fixed;

    z-index: 2147483646;

    top: 18px;
    right: 82px;

    display: none;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 18px;

    border: 1px solid rgba(255,255,255,.5);
    border-radius: 24px;

    background: rgba(0,0,0,.72);
    color: #fff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;

    cursor: pointer;
    pointer-events: auto;

    -webkit-appearance: none;
    appearance: none;
}



#webCollectionPage .noticeButton.isVisible {
    display: flex;
}



#webCollectionPage .noticeButton:hover, #webCollectionPage .noticeButton:focus-visible {
    background: #fff;
    color: #000;
    outline: none;
}




#webCollectionPage .closeViewer {
    position: fixed !important;

    z-index: 2147483647 !important;

    top: 12px !important;
    right: 12px !important;

    display: block !important;

    width: 56px !important;
    height: 56px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: rgba(0,0,0,.82) !important;
    color: #fff !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 44px !important;
    font-weight: 300 !important;

    line-height: 52px !important;
    text-align: center !important;

    cursor: pointer !important;
    pointer-events: auto !important;

    -webkit-appearance: none !important;
    appearance: none !important;
}




/* =========================================================
   NAVIGATION
   ========================================================= */



#webCollectionPage .previous, #webCollectionPage .next {
    position: fixed;

    z-index: 10010;

    top: 80px;
    bottom: 80px;

    width: 70px;

    padding: 0;
    border: 0;

    background: transparent;
    color: #fff;

    font-size: 60px;

    cursor: pointer;

    opacity: .45;
}



#webCollectionPage .previous:hover, #webCollectionPage .next:hover {
    opacity: 1;
}



#webCollectionPage .previous {
    left: 0;
}



#webCollectionPage .next {
    right: 0;
}




/* =========================================================
   VIEWER — TITRE
   ========================================================= */



#webCollectionPage .viewerCaption {
    position: fixed;

    z-index: 10005;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
        55px
        85px
        18px;

    text-align: center;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0),
            rgba(0,0,0,.9)
        );

    pointer-events: none;
}



#webCollectionPage .viewerTitle {
    font-size: 19px;
    line-height: 1.2;
}



#webCollectionPage .viewerMeta {
    margin-top: 5px;
    font-size: 12px;
    opacity: .65;
}



#webCollectionPage .counter {
    position: fixed;

    z-index: 10015;

    top: 22px;
    left: 22px;

    font-size: 12px;

    opacity: .65;

    pointer-events: none;
}





/* =========================================================
   VARIANTE FOND BLANC — pages d’œuvres uniquement
   ========================================================= */



#webCollectionPage .themeButton {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 0 14px;
    border: 1px solid #333;
    border-radius: 0;
    background: #111;
    color: #fff;
    font: inherit;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
}



#webCollectionPage .themeButton:hover, #webCollectionPage .themeButton:focus-visible {
    background: #fff;
    color: #000;
    outline: none;
}



#webCollectionPage.worksLight {
    background: #fff;
    color: #111;
}



#webCollectionPage.worksLight .collectionBar, #webCollectionPage.worksLight .filters {
    background: #fff;
}



#webCollectionPage.worksLight .collectionSelect, #webCollectionPage.worksLight .collectionsButton, #webCollectionPage.worksLight .themeButton {
    border-color: #d0d0d0;
    background: #fff;
    color: #111;
}



#webCollectionPage.worksLight .collectionSelect:hover, #webCollectionPage.worksLight .collectionsButton:hover, #webCollectionPage.worksLight .collectionsButton:focus-visible, #webCollectionPage.worksLight .themeButton:hover, #webCollectionPage.worksLight .themeButton:focus-visible {
    background: #111;
    color: #fff;
}



#webCollectionPage.worksLight .filterButton {
    background: #f1f1f1;
    color: #555;
}



#webCollectionPage.worksLight .filterButton:hover, #webCollectionPage.worksLight .filterButton.active {
    background: #111;
    color: #fff;
}



#webCollectionPage.worksLight .gallery {
    background: #fff;
}



#webCollectionPage.worksLight .work, #webCollectionPage.worksLight .caption, #webCollectionPage.worksLight .workImage {
    background: #fff;
}



#webCollectionPage.worksLight .work {
    color: #111;
}



#webCollectionPage.worksLight .meta {
    color: #555;
    opacity: 1;
}



#webCollectionPage.worksLight .viewer {
    background: #fff;
}



#webCollectionPage.worksLight .previous, #webCollectionPage.worksLight .next {
    color: #111;
}



#webCollectionPage.worksLight .counter {
    color: #111;
    opacity: .65;
}



#webCollectionPage.worksLight .viewerCaption {
    color: #111;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0),
        rgba(255,255,255,.94)
    );
}



#webCollectionPage.worksLight .closeViewer, #webCollectionPage.worksLight .noticeButton {
    border-color: rgba(0,0,0,.28) !important;
    background: rgba(255,255,255,.86) !important;
    color: #111 !important;
}



#webCollectionPage.worksLight .closeViewer:hover, #webCollectionPage.worksLight .noticeButton:hover, #webCollectionPage.worksLight .noticeButton:focus-visible {
    background: #111 !important;
    color: #fff !important;
}



/* =========================================================
   SMARTPHONE VERTICAL : 2
   ========================================================= */



@media 
    (max-width: 767px)
    and (orientation: portrait)
{
    
#webCollectionPage .gallery {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

}




/* =========================================================
   SMARTPHONE HORIZONTAL : 3
   ========================================================= */



@media 
    (max-width: 950px)
    and (orientation: landscape)
    and (max-height: 600px)
{
    
#webCollectionPage .gallery {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

}




/* =========================================================
   TABLETTE VERTICALE : 3
   ========================================================= */



@media 
    (min-width: 768px)
    and (max-width: 1100px)
    and (orientation: portrait)
{
    
#webCollectionPage .gallery {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

}




/* =========================================================
   TABLETTE HORIZONTALE : 4
   ========================================================= */



@media 
    (min-width: 768px)
    and (max-width: 1366px)
    and (orientation: landscape)
    and (min-height: 601px)
{
    
#webCollectionPage .gallery {
        grid-template-columns:
            repeat(4, minmax(0,1fr));
    }

}




/* =========================================================
   VIEWER SMARTPHONE
   ========================================================= */



@media  (max-width: 767px)
{
    
#webCollectionPage .filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }


    
#webCollectionPage .filters::-webkit-scrollbar {
        display: none;
    }


    
#webCollectionPage .filterButton {
        white-space: nowrap;
    }


    
/* Accueil artistes : typographie plus compacte sur smartphone. */

    
#webCollectionPage .artistName {
        font-size: 20px;
        line-height: 1.1;
    }


    
#webCollectionPage .artistWorkTitle {
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.2;
    }


    
#webCollectionPage .artistCaption {
        padding: 48px 10px 10px;
    }


    
#webCollectionPage .noticeButton {
        top: 16px;
        right: 70px;
        min-height: 40px;
        padding: 0 13px;
        font-size: 10px;
    }


    
#webCollectionPage .closeViewer {
        width: 48px !important;
        height: 48px !important;

        font-size: 38px !important;
        line-height: 44px !important;
    }


    
#webCollectionPage .previous, #webCollectionPage .next {
        width: 48px;
        font-size: 44px;
    }


    
#webCollectionPage .viewerCaption {
        padding:
            45px
            55px
            14px;
    }


    
#webCollectionPage .viewerTitle {
        font-size: 16px;
    }

}




/* Pied de page : même grille à cinq colonnes que visites.php. */


#webCollectionPage .content-section.layout-5cols {
    display: grid;
    grid-template-columns: 5% 25% 25% 40% 5%;
    width: 100%;
    padding: 2vw 0 8vw;
    align-items: start;
    background: #fff;
    color: #000;
}


#webCollectionPage .content-section.layout-5cols .content-liens { grid-column: 2; }


#webCollectionPage .content-section.layout-5cols .content-texte { grid-column: 3; }


#webCollectionPage .content-section.layout-5cols .content-edito { grid-column: 4; }


#webCollectionPage .content-section.layout-5cols .content-liens, #webCollectionPage .content-section.layout-5cols .content-texte, #webCollectionPage .content-section.layout-5cols .content-edito {
    padding: 0 1.5vw;
    min-width: 0;
    line-height: 1.45;
}


#webCollectionPage .content-section.layout-5cols .titre {
    display: block;
    font-size: 3vw;
    font-weight: 800;
    padding-bottom: 1vw;
}


#webCollectionPage .content-section.layout-5cols .sousTitre {
    display: block;
    font-size: 2vw;
    font-weight: 800;
    padding: 1vw 0;
}


#webCollectionPage .content-section.layout-5cols .texte { font-size: 1vw; }


#webCollectionPage .content-section.layout-5cols .texte a {
    display: inline-block;
    color: #000;
    font-weight: 800;
    text-decoration: none;
}


#webCollectionPage .content-section.layout-5cols .texte a:hover, #webCollectionPage .content-section.layout-5cols .texte a.active { color: #f0f; }


#webCollectionPage .content-section.layout-5cols .content-edito .texte { overflow-wrap: anywhere; }


@media  (max-width: 800px) {
    
#webCollectionPage .content-section.layout-5cols {
        grid-template-columns: 5% 90% 5%;
        gap: 1.5rem 0;
        padding: 2rem 0 4rem;
    }

    
#webCollectionPage .content-section.layout-5cols .content-liens, #webCollectionPage .content-section.layout-5cols .content-texte, #webCollectionPage .content-section.layout-5cols .content-edito { grid-column: 2; padding: 0; }

    
#webCollectionPage .content-section.layout-5cols .titre { font-size: 2rem; }

    
#webCollectionPage .content-section.layout-5cols .sousTitre { font-size: 1.3rem; }

    
#webCollectionPage .content-section.layout-5cols .texte { font-size: .95rem; }

}



#webCollectionPage { display:block; min-height:100vh; background:#000; color:#fff; font-family:Arial,Helvetica,sans-serif; }
#webCollectionPage #collections-footer {scroll-margin-top:0;}


/* Commandes communes du site : au-dessus des barres de webCollection,
   mais en dessous de la visionneuse plein écran. */
body.page-webCollection header.header-buttons {
    z-index: 6200;
}
body.page-webCollection nav#mainMenu {
    z-index: 6100;
}
body.page-webCollection #scroll-buttons {
    z-index: 6200;
}

/* webCollection : commandes du site en traits blancs sur fond transparent. */
body.page-webCollection #menuButton.icon,
body.page-webCollection #scrollDownButton.icon,
body.page-webCollection #scroll-buttons_top.icon {
    --icon-stroke: #fff;
    --icon-stroke-w: 2.4px;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #fff !important;
    box-shadow: none !important;
    color: #fff !important;
}

body.page-webCollection #menuButton.icon:hover,
body.page-webCollection #menuButton.icon:focus-visible,
body.page-webCollection #scrollDownButton.icon:hover,
body.page-webCollection #scrollDownButton.icon:focus-visible,
body.page-webCollection #scroll-buttons_top.icon:hover,
body.page-webCollection #scroll-buttons_top.icon:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
}

body.page-webCollection #menuButton .icon-svg,
body.page-webCollection #scrollDownButton .icon-svg,
body.page-webCollection #scroll-buttons_top .icon-svg {
    stroke: #fff !important;
    fill: none;
    filter: none;
}