/*orgaGénéral page pour tousExposition===========================================================*/
#content{
    min-height: calc(100vh + var(--borderWidth));
    margin-top: calc(var(--borderWidth) * -1) ;
    display: flex;
    flex-direction: column;

    overflow: auto;
    height: 100%;
}
.zeroHeight, .containeur_preVisu_expo, .pourSiVide{
    display: grid;
    grid-template-columns: 35% 42% 23%;
    width: 100%;
}
.containeur_preVisu_expo{
    height: 12.235rem;
    min-height: 12.235rem;
}
.containeur_preVisu_expo>*{
    height: 100%;
}


.preVisu_expo_titre{
    background-color: var(--couleurFond1);
    color: var(--couleurText1);
    border-top: solid var(--couleurText1) var(--borderWidth);
}
.containeur_preVisu_expo:hover > .preVisu_expo_titre > *{
    text-decoration: underline;
    text-underline-offset: 3px;
}

.preVisu_expo_info{
    background-color: var(--couleurFond2);
    color: var(--couleurText2);
    border-top: solid var(--couleurText2) var(--borderWidth);

    display: grid;
    grid-template-columns: 45% 55%;
    gap: var(--margin1);
}
.Containeur_preVisu_expo_info_dateLieu{
    display: flex;
    flex-direction: column;
    gap: var(--margin1);
}
.preVisu_expo_imageCouv {
    background-color: var(--couleurFond3);
    color: var(--couleurText3);
    border-top: solid var(--couleurText3) var(--borderWidth);

    height: 100%; /* on fige la hauteur au même niveau que le parent */
    overflow: hidden; /* cache le débordement si cover */

    padding-bottom: calc(10%) ;
    padding-right: calc(40% - var(--margin2))  ;
}

.preVisu_expo_imageCouv > img {
    max-height: 100%;
    max-width: 100%;

    /* rendre l'image blanche/Noire puis la mélanger */
    filter: grayscale(1) ;
    mix-blend-mode: multiply; /* essayer aussi screen, overlay, etc. */
}
/*.containeur_preVisu_expo:nth-child(1)>*{
    border-top: none;
}*/

/*gère la fin du tableau==================*/
.finDeTableau{
    flex: 1;
    overflow: hidden;
    width: 100%;
}
.zeroHeight{
    height: 0;
    overflow: visible;
}
.zeroHeight>*{
    height: var(--borderWidth);
}
.finDeTableau_expo_titre{
    background-color: var(--couleurText1) ;
}
.finDeTableau_expo_info{
    background-color: var(--couleurText2);
}
.finDeTableau_expo_imageCouv{
    background-color: var(--couleurText3);
}

/*pour que background pas blanc si pas assez de contenu pour remplir*/
.pourSiVide{
    position: absolute;
    height: calc(100% + var(--borderWidth));
    width: calc(100% - var(--topnav_width));
    z-index: -1;
}
.pourSiVide>*{
    border: none;
}
/*menu filtrant=================================================================*/
/*gestion ouverture menu*/
.filtres_summary{
    pointer-events: none;
}
.spanOuvrirFiltre{
    pointer-events: auto;
}
.filtres_summary::-webkit-details-marker { display: none; }
.filtres_summary::marker { content: ""; }
.filtres_summary{
    display: block;
    list-style: none;
    /*cursor: pointer;*/
    user-select: none;
}
.filtres[open] .spanOuvrirFiltre{
  display: none;
}
/*.filtres[open] #presentationSite{
  display: none;
}*/

input[type="radio"] { display: none; }
label {
    --rondLabelSize: 0.4em;
    /*cursor: pointer;*/
    position: relative;
    padding-left: calc(var(--rondLabelSize) + var(--margin1));
    user-select: none;
    font-size: 16px;
    display: block;
}
label::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(1em / 2);
    transform: translateY(-50%);
    width: var(--rondLabelSize);
    height: var(--rondLabelSize);
    border: 1.6px solid;
    border-radius: 50%;
    background: transparent;
}
input[type="radio"]:checked + label::before {
    background: var(--couleurText0);
}
label:hover:before {
    width: 0px;
    height: 0px;
    border: calc(var(--rondLabelSize)/4*3.4) double;
    background: transparent !important;
}
.containeurInputFiltre{
    display: flex;
    flex-direction: column;
    gap: var(--margin1);
}

/*responsiv============================================================*/
@media (max-width: 1300px) {
    .containeur_preVisu_expo{
        height: 15.882rem;
        min-height: 15.882rem;
    }
}

@media (max-width: 1200px) {

    .containeur_preVisu_expo{
        height: 15.882rem;
    }
    .preVisu_expo_imageCouv {
        padding-bottom: var(--margin1)  ;
        padding-right: var(--margin1)  ;
    }
    .containeur_preVisu_expo{
        display: grid;
        grid-template-columns: 100%;
        height: auto;
    }
    .containeur_preVisu_expo>*{
        background-color: inherit;
    }

    .preVisu_expo_imageCouv > img {
        margin: auto;
        max-height: 40vh;
    }

    .preVisu_expo_info{
        grid-template-columns: 100%;
        grid-template-rows: auto auto;
    }
    .Containeur_preVisu_expo_info_dateLieu{
        flex-direction: row;
    } 
    .Containeur_preVisu_expo_info_dateLieu>*{
        width: 50%;
    }

    /*changement des couleurs de l'affichage des cases*/
    .ensembleCouleur1{
        background-color: var(--couleurFond1);
        color: var(--couleurText1);
    }
    .ensembleCouleur1>*{
        color: var(--couleurText1);
    }
    .ensembleCouleur2{
        background-color: var(--couleurFond2);
        color: var(--couleurText2);
    }
    .ensembleCouleur2>*{
        color: var(--couleurText2);
    }
    .containeur_preVisu_expo>*{
        border-top: none;
    }

    #content, .pourSiVide{
        min-height: 0;
    }
    .pourSiVide{
        top: 0;
    }

    .pourSiVide>*{
        background-color: var(--couleurFond2);
    }
    .finDeTableau{
        display: none;
    }
    .preVisu_expo_info{
        grid-row-start: 3; /* Commence à la seconde colonne */
	    grid-row-end: 4; /* Termine à la troisième colonne */
    }
    .preVisu_expo_imageCouv{
        grid-row-start: 2; /* Commence à la seconde colonne */
	    grid-row-end: 3; /* Termine à la troisième colonne */
    }
    .ensembleCouleur1  img{
        mix-blend-mode: screen;
    }
/*     .ensembleCouleur2 img{
        filter: url(#filtreOrange);
    } */
    .containeur_preVisu_expo{
        min-height: auto;
    }
}

@media (max-width: 916px) {
}