/* ===========================================
   SINGLE EXPOSITION (CPT: exposition)
   =========================================== */

#single-exposition{
    width:100%;
    height: auto; 
    min-height: calc(100vh - 212px);
    display: flex;
}

#col-single-exposition{
    width:70%;
    max-width:70%;
    margin:0 auto;
    padding: 60px 0px 100px;
    min-height: calc(100vh - 160px);
    overflow: visible;
}

/* HEADER --------------------------------------------------------------*/

.header-exposition{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:100px;
}

.header-exposition-text{
    width:48%;
    margin-bottom: 18px;
}

.header-exposition-thumbnail{
    width:48%;
    margin: 22px 0 0;
    display: flex;
    justify-content: center;
}

.header-exposition-thumbnail img{
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

.exposition-title{
    font-size:1em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.exposition-subtitle{
    margin: 12px 0 0;
    font-size: 4em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.exposition-infos{
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.exposition-infos .exposition-dates{
    font-size: 2em;
    letter-spacing: 0.04em;
    opacity: 0.85;
    text-transform: none;
}

.exposition-infos .exposition-lieu{
    margin-top: 20px;
    font-size: 1em;
    letter-spacing: 0.04em;
    opacity: 0.85;
    text-transform: none;
    padding-left: 20px;
    border-left: 1px dotted #000;
}

.exposition-infos .exposition-price{
    font-weight: 700;
}


/* CONTENU --------------------------------------------------------------*/


.exposition-content{
    line-height: 1.7;
    width: 70%;
    margin: 0 auto;
}

.exposition-content p a{
    text-decoration:underline;
}



/* SIDEBAR EXPOSITION (widgets : AddToAny, etc.) -----------------------*/

.exposition-sidebar{
    --expo-share-icon-size: 40px;
    width: 70%;
    margin: 48px auto 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    text-align: center;
}

.exposition-sidebar .widget{
    margin-bottom: 1.25em;
}

.exposition-sidebar .widget:last-child{
    margin-bottom: 0;
}

.exposition-sidebar .widget-title{
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.65;
    margin: 0 0 14px;
}

.exposition-sidebar .a2a_kit,
.exposition-sidebar .addtoany_list{
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    max-width: none;
    margin: 0;
}

/*
 * Le plugin masque les liens vides : .a2a_kit a:empty { display:none }
 * jusqu’à ce que page.js injecte les icônes — sur certaines pages le script
 * arrive tard : on force l’affichage de la zone cliquable pour la sidebar.
 */
.exposition-sidebar .addtoany_list.a2a_kit > a:empty,
.exposition-sidebar .addtoany_list.a2a_kit > a[class^="a2a_button_"]{
    display: inline-flex !important;
    visibility: visible !important;
}

.exposition-sidebar .a2a_kit a,
.exposition-sidebar .addtoany_list a{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--expo-share-icon-size) + 8px);
    min-width: calc(var(--expo-share-icon-size) + 8px);
    padding: 6px !important;
    border: none !important;
    background: transparent !important;
    opacity: 1;
    font-size: var(--expo-share-icon-size) !important;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.exposition-sidebar .addtoany_list > a:not(.addtoany_special_service) > span{
    width: var(--expo-share-icon-size) !important;
    height: var(--expo-share-icon-size) !important;
    min-width: var(--expo-share-icon-size) !important;
    min-height: var(--expo-share-icon-size) !important;
    line-height: var(--expo-share-icon-size) !important;
}

.exposition-sidebar .a2a_kit a:hover,
.exposition-sidebar .a2a_kit a:focus-visible{
    opacity: 1;
    transform: scale(1.05);
    background: transparent !important;
    color: inherit !important;
}

.exposition-sidebar .a2a_kit a span,
.exposition-sidebar .a2a_kit a svg{
    display: inline-block !important;
    visibility: visible !important;
}

.exposition-sidebar .a2a_default_style a span{
    display: inline-block !important;
}

.exposition-sidebar .a2a_kit a img,
.exposition-sidebar .a2a_kit a svg,
.exposition-sidebar .a2a_kit .a2a_svg{
    width: var(--expo-share-icon-size) !important;
    height: var(--expo-share-icon-size) !important;
    max-width: none !important;
    opacity: 1 !important;
    vertical-align: middle !important;
}

.exposition-sidebar .addtoany_list a::after{
    content: none !important;
    display: none !important;
}

@media (max-width: 768px){
    .exposition-sidebar{
        width: 100%;
        margin-top: 36px;
        padding-top: 20px;
    }
}




/* FOOTER --------------------------------------------------------------*/

.exposition-footer{
    margin: 80px 0 10px;
    display: flex;
    justify-content: center;
}

.exposition-footer .back-to-archive{
    font-size: 1em;
    letter-spacing: 0.04em;
    opacity: 0.85;
    text-transform: none;
}




/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1800px){

    .exposition-subtitle{font-size: 3.5em;}
    .exposition-infos .exposition-dates{font-size: 1.75em;}
}

@media (max-width: 1600px){

    .exposition-subtitle{font-size: 3em;}
    .exposition-infos .exposition-dates{font-size: 1.5em;}
}


@media (max-width: 1400px){

    .exposition-subtitle{font-size: 2.5em;}
    .exposition-infos .exposition-dates{font-size: 1.25em;}
}

@media (max-width: 1200px){

    #col-single-exposition{width:80%;max-width:80%;}

    .exposition-subtitle{font-size: 2em;}
    .exposition-infos .exposition-dates{font-size: 1em;}
    .exposition-infos .exposition-lieu{font-size: 0.85em;}
}

@media (max-width: 768px){

    #col-single-exposition{width:70%;max-width:70%;}
    .header-exposition{flex-direction:column;}
    .header-exposition-text{width:100%;order:2;}
    .header-exposition-thumbnail{width:100%;order:1;}

    .exposition-content{width:100%;}

}

@media (max-width: 480px){

    
}