﻿:root {
    --menuCollectionWidth: 1.625rem;
    --menuCollectionWidth3: 1.25rem;

    --border: thin solid #000;
    --borderWhite: thin solid #fff;
    --borderGray: thin solid gray;
	--width1b : 1541
}

/*content*/
.contentBlock, .content {
    min-height: inherit;
}
.contentBlock {
    overflow: hidden;
}
.blockCollection {
    width: 100%;
    overflow: hidden;
}
.contentCollection {
    overflow: hidden;
    position: relative;
}
.contentCollection, .collection {
    min-height: inherit;
}
.collectionLoading {
    visibility: hidden;
    height: 1000px;
    width: 100%;
    overflow: hidden;
}
.menuCollection {
    width: var(--menuCollectionWidth);
   /* height: 100%;*/
    height:auto;
    line-height: 1px;
    position: absolute;
    top: 0;
    background: #fff;
    /* border-right: var(--border);
        z-index: 101;*/ 
    z-index: 1;
}
.menuCollection.fixed {
    position: fixed;
    /*z-index: 300;*/
}
    .menuCollection.fixed.open {
       /* z-index: 300;*/
    }
.divMenuCollection {
    background: #fff;
    overflow: hidden;
}
a.btFiltre {
    line-height: var(--menuCollectionWidth);
    white-space: nowrap;
    -ms-transform: translate(0px, 180px) rotate(270.000deg) skew(0.000deg) scale(1.000, 1.000);
    -ms-transform-origin: 0% 0%;
    -webkit-transform: translate(0px, 180px) rotate(270.000deg) skew(0.000deg) scale(1.000, 1.000);
    -webkit-transform-origin: 0% 0%;
    transform: translate(0px, 180px) rotate(270.000deg) skew(0.000deg) scale(1.000, 1.000);
    transform-origin: 0% 0%;
    position: absolute;
}
    a.btFiltre span.spanFilter {
        background-image: url('../../../Images/_Common/Svg/icon-chevron-select.svg');
        background-size: 0.756rem 0.625rem;
        background-position: right center;
        background-repeat: no-repeat;
        padding-right: 1.44rem;/**/
    }
#menuFilters {
    scrollbar-color: #fff rgba(167, 167, 167, 0.80);
    scrollbar-width: thin;
    overflow-y: auto;
}
/*menu filters open*/
.menuCollection.open,
.menuCollection.open .divMenuCollection {
    width: 15rem;
}
.menuCollection.open {
    overflow: hidden;
    height:100%;
    border-right:var(--border);
}
    .menuCollection.open a.btFiltre {
        -ms-transform: none;
        -webkit-transform: none;
        transform: none;
        position: relative;
        width: inherit;
        display: inline-block;
        background-color: #b1b3b6;
        background-image: url('../../../Images/_Common/Svg/flecheLeftBlack.svg');
        background-repeat: no-repeat;
    }
        .menuCollection.open a.btFiltre span.spanFilter {
            display: inline-block;
            width: 100%;
            background-image: none;
            padding: 0;
            line-height: normal;
            height: auto;
            float: left;
        }
ul.menu {
    display: none;
}
    ul.menu.smMenuHide {
        display: inline-block;
    }
ul.menu, ul.blockMenu {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}
    ul.menu li {
        width: 100%;
        border-bottom: var(--border);
    }
        ul.menu li.sousMenu {
            line-height: 1.3875rem;
            display: inline-block;
            width: 100%;
            padding-left: var(--padding);
            border-bottom: none;
        }

a.linkMenu {
    height: auto;
    line-height: normal;
    width: inherit;
    display: inline-block;
    background-image: url(../../../Images/_Common/Svg/btPlus1.svg);
    background-repeat: no-repeat;
    text-transform: uppercase;
}
    a.linkMenu.open {
        background-image: url('../../../Images/_Common/Svg/btMinus1.svg');
    }
input.linkSousMenu {
    width: 0.56rem;
    height: 0.56rem;
    margin: 0;
    border: none;
    background-image: url(../../../Images/_Common/Svg/cbxFilter.svg);
    background-size: 0.56rem;
    background-position: left center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
    input.linkSousMenu.selected {
        background-image: url(../../../Images/_Common/Svg/cbxFilter_checked.svg);
    }
li.sousMenu label {
    cursor: pointer;
    max-width: calc(100% - 0.56rem);
    padding-left: 0.56rem;
    width: calc(100% - 0.56rem);
    float: right;
    line-height: normal;
    padding-top: 0.3rem;
}
input.filtreTs {
    width: 0.56rem;
    height: 0.56rem;
    margin: 0;
    border: none;
    /*background-image: url(../../../Images/_Common/Svg/cbxFilter.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;*/
    cursor: pointer;
}
    input.filtreTs.selected {
       /* background-image: url(../../../Images/_Common/Svg/cbxFilter_checked.svg);*/
    }
/*********BtsRight********/
.divBtsRight {
    float: right;
}
.btContent {
    width: 1.125rem;
    height: var(--divArianeHeight);
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    display: inline-block;
    margin-right: 2.1875rem;
}
.btFiltres {
    display: none;
    background-image: url(../../../Images/_Common/Svg/btFilter.svg);
    margin-right: 0;
}
/*****filterTag*****/
.filtersTags {
    width: 100%;
    display: none;
}
.menuCollection.open .filtersTags {
    display: block;
    border-bottom: var(--border);
}
.filtersTags a.tag {
    position: relative;
    width: 100%;
    height:auto;
    line-height:normal;
    display: inline-block;
    background-color: #b1b3b6;
    color: #000;
    border-top: var(--border);
    background-image: url('../../../Images/_Common/Svg/btCloseBlack.svg');
    background-repeat: no-repeat;
    cursor: pointer;
    overflow: hidden;
}


/*-----------collection---------*/
/*-----------topCollection---------*/
.collection {
    width: calc(100% - var(--menuCollectionWidth));
    margin-left: var(--menuCollectionWidth);
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    float: left;
    min-height: inherit;
    padding-bottom: 3rem;
    border-left: 1px solid #999;
}
.collection {/*250911*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.blockThumbnails {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid #999;
}
.infos {
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: center;
	border-right: 1px solid #999
}
.collectionContact {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    align-items: center;
}
.infoEmptyRep {
	width: 60%;
}
.infosLeft {
    border-right: 0.05vw solid #999;
    padding: 7px 7px 7px 15px;
}
.collectionContact {
	margin-top: 3rem;
}
.collectionContact .infosLeft {	
	border-right: unset;
}
.collectionContact .blockBouton {
	justify-self: center;
}
.collectionContact .button {
	display: inline-block;
    box-sizing: border-box;
    color: #000;
    background-color: #0000002e;
    border: none;
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    padding: 36px 56px;
	text-transform: uppercase;
	
}
.infosRight {
    text-transform:uppercase;
    display: flex;
    align-items: center;
}
    .infosRight input[type = "radio"],
    .infosRight input[type = "checkbox"] {
        margin: 0;
    }
	.infosRight label {
        display: flex;
        align-items: center;
    }
	.infosRight input[type="checkbox"] {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  width: 1em;
	  height: 1em;
	  cursor: pointer;
	  background-image: url('../../../../Images/_Common/Svg/cbx.svg');
	  background-repeat: no-repeat;
	  background-position: center;
	  background-size: contain;
	  border: none;
	}

	.infosRight input[type="checkbox"]:checked {
	  background-image: url('../../../../Images/_Common/Svg/cbx_selected.svg');
	}

.infoDispo, 
.labelDispo {
    display: inline;
}
.infoDispoShort,
.labelDispoShort {
    display: none;
}
.thumbnail {
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    background-color: #fff;
    padding: 5%;
    padding-bottom: 3%;
    display: flex;    
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
}
    .thumbnail > .thumbName {
        margin-top: auto;
    }
a.thumbImg {
    width: inherit;
    height: inherit;
    display: inline-block;
    position:relative;
}
.thumbnail img {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}
.thumbnail span{
    display:inline-block;
    /*width:100%;
    float:left;*/
}
.thumbName {
    text-align: center;
    background-repeat: no-repeat;
    background-position: center left;
    display: inline-block;
    width:100%;
}
    .thumbName.thumbType_1 {
        background-image: url('../../../Images/_Common/Svg/ts_1_black.svg');
    }
    .thumbName.thumbType_0 {
        background-image: url('../../../Images/_Common/Svg/ts_0_black.svg');
    }
    .thumbName .name, .thumbName .auteur {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        padding: 0 6%;
        width: 100%;
        float: left;
    }
.thumbnail.thumbBlack{
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
    background-color: #000;
    color:#ffffff !important;
}
    .thumbnail.thumbBlack span {
        color: #ffffff !important;
    }
    .thumbnail.thumbBlack .thumbName.thumbType_1 {
        background-image: url('../../../Images/_Common/Svg/ts_1_white.svg');
    }
    .thumbnail.thumbBlack .thumbName.thumbType_0 {
        background-image: url('../../../Images/_Common/Svg/ts_0_white.svg');
    }
/*--------Font-size--------*/
.fontFiltre, .fontFiltreItem {
    font-size: 0.756rem; /*(12px)*/
}
/*maxWidth 600px*/
/*font-size*/
.thumbName .name, .collectionContact .infosLeft {
    font-size: calc((10 / var(--width3)) * 100vw);
}
.thumbName .auteur {
    font-size: calc((9 / var(--width3)) * 100vw);
}

.collectionContact .button {
	font-size:calc((12.1 / var(--width3)) * 100vw);
}

/*-----601px------ */
@media (min-width: 37.563em) {
    /*font-size*/
    .fontInfoLeft {
        font-size: calc((8 / var(--width2)) * 100vw);/*7.119*/
    }
    .fontInfoRight {
        font-size: calc((8 / var(--width2)) * 100vw);/*7.766*/
    }
    .thumbName .name, .collectionContact .infosLeft {
        font-size: calc((10 / var(--width2)) * 100vw);
    }
    .thumbName .auteur {
        font-size: calc((9 / var(--width2)) * 100vw);
    }
	.collectionContact .button {
		font-size:calc((12.1 / var(--width2)) * 100vw);
	}
}
/*--------1111x---------*/
@media (min-width: 69.438em) {
    /*font-size*/
    .fontInfoLeft {
        font-size: calc((11 / var(--width1b)) * 100vw);
		line-height : 1.1;
    }
    .fontInfoRight {
        font-size: calc((12.1 / var(--width1b)) * 100vw);
    }
    .thumbName .name, .collectionContact .infosLeft {
        font-size: calc((14 / var(--width1b)) * 100vw);
    }
    .thumbName .auteur {
        font-size: calc((10 / var(--width1b)) * 100vw);
    }
	.collectionContact .button {
		font-size:calc((27 / var(--width1b)) * 100vw);
	}
}
/*--------1542x---------*/
@media (min-width: 96.375em) {
    /*font-size*/
    .fontInfoLeft {
        font-size: calc((11 / var(--width1)) * 100vw);
		line-height : 1.1;
    }
    .fontInfoRight {
        font-size: calc((12.1 / var(--width1)) * 100vw);
    }
    .thumbName .name, .collectionContact .infosLeft {
        font-size: calc((14 / var(--width1)) * 100vw);
    }
    .thumbName .auteur {
        font-size: calc((10 / var(--width1)) * 100vw);
    }
	.collectionContact .button {
		font-size:calc((27 / var(--width1)) * 100vw);
	}
}
/*--------1921px---------*/
@media (min-width: 120.063em) {
    /*font-size*/
    .fontInfoLeft {
       /* font-size: 0.6875rem; *//*11px;*/
        font-size: 0.688rem;
    }
    .fontInfoRight {
        /*font-size: 0.756rem;*/ /*12px;*/
        font-size: 0.756rem;
    }
    .thumbName .name, .collectionContact .infosLeft {
        /*font-size: 0.875rem;*/ /*14px;*/
        font-size: 0.875rem;
    }
    .thumbName .auteur {
        /*font-size: 0.625rem;*/ /*10px;*/
        font-size: 0.625rem;
    }
	.collectionContact .button {
		font-size: 1.688rem;
	}
}


/*--------sans media query (= + de 1920px)---------*/
.infosRight {
    padding-left: 12px;
}
    /*.infosRight label {
        margin-left: 12px;
    }*/
    .infosRight input[type = "radio"],
    .infosRight input[type = "checkbox"] {
        width: 16px;
        height: 16px;
    }
    .infosRight input[type = "checkbox"] {
        margin-left: 29px;
		margin-right: 12px; 
    }
.thumbName {
    padding-left: 12px;
    background-size: 12px;
}

.menuCollection.open a.btFiltre {
    height: 1.5625rem;
    line-height: 1.5625rem;    
    background-size: 0.5625rem 0.756rem;
    background-position: right 0.5rem center;
}
.filtersTags a.tag {
    height: auto;
}
.menuCollection.open a.btFiltre,
.filtersTags a.tag,
a.linkMenu {
    padding: 0.3rem calc(0.7rem + 0.625rem) 0.3rem var(--padding);
    background-size: 0.7rem;
    background-position: right 0.625rem center;
}



/*--------1920px---------*/
@media (max-width: 120em) {
	
	
    .infosRight {
        padding-left: calc((15 / var(--width1))* 100vw);
    }
        /*.infosRight label {
            margin-left: calc((29 / var(--width1))* 100vw);
			margin-right: calc((12 / var(--width1))* 100vw);
        }*/
        .infosRight input[type = "radio"],
        .infosRight input[type = "checkbox"] {
            width: calc((16 / var(--width1)) * 100vw);
            height: calc((16 / var(--width1)) * 100vw);
        }
        .infosRight input[type = "checkbox"] {
            margin-left: calc((29 / var(--width1))* 100vw);
            margin-right: calc((12 / var(--width1))* 100vw);
        }
    .thumbName {
        padding-left: calc((12 / var(--width1)) * 100vw);
        background-size: calc((12 / var(--width1)) * 100vw);
    }
	.infosLeft {
		border-right: 0.05vw solid #999;
		padding: calc((7 / var(--width1)) * 100vw) calc((7 / var(--width1)) * 100vw) calc((7 / var(--width1)) * 100vw) calc((15 / var(--width1)) * 100vw);
	}
	.thumbnail {		
		gap: calc((20 / var(--width1)) * 100vw);
	}
	.collectionContact .button {
    padding: calc((36 / var(--width1))* 100vw) calc((56 / var(--width1))* 100vw);	
	}
}
/*--------1541px---------*/
@media (max-width: 96.313em) {
	
	.blockThumbnails {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.infos {
		grid-template-columns: 2fr 2fr;
	}
	.collectionContact {
		grid-template-columns: 2fr 1fr 1fr;
	}
	.infoEmptyRep {
		width: 75%;
	}

    .infosRight {
        padding-left: calc((15 / var(--width1b))* 100vw);
    }
        /*.infosRight label {
            margin-left: calc((29 / var(--width1b))* 100vw);
			margin-right: calc((12 / var(--width1b))* 100vw);
        }*/
        .infosRight input[type = "radio"],
        .infosRight input[type = "checkbox"] {
            width: calc((16 / var(--width1b)) * 100vw);
            height: calc((16 / var(--width1b)) * 100vw);
        }
        .infosRight input[type = "checkbox"] {
            margin-left: calc((29 / var(--width1b))* 100vw);
            margin-right: calc((12 / var(--width1b))* 100vw);
        }
    .thumbName {
        padding-left: calc((12 / var(--width1b)) * 100vw);
        background-size: calc((12 / var(--width1b)) * 100vw);
    }
	.infosLeft {
		border-right: 0.05vw solid #999;
		padding: calc((7 / var(--width1b)) * 100vw) calc((7 / var(--width1b)) * 100vw) calc((7 / var(--width1b)) * 100vw) calc((15 / var(--width1b)) * 100vw);
	}
	.thumbnail {		
		gap: calc((20 / var(--width1b)) * 100vw);
	}
}
@media (max-width: 96.313em) and (min-width: 69.438em) {
	.divTitre {
		 padding: calc((17 / var(--width1b))* 100vw) var(--padding) calc((25 / var(--width1b))* 100vw) var(--padding);
	}
}
/*--------1110px---------*/
@media (max-width: 69.375em) {
     .infosRight {
        padding-left: calc((10 / var(--width2)) * 100vw);
    }
        /*.infosRight label {
            margin-left: calc((10 / var(--width2)) * 100vw);
        }*/
        .infosRight input[type = "radio"],
        .infosRight input[type = "checkbox"] {
            width: calc((8 / var(--width2)) * 100vw);
            height: calc((8 / var(--width2)) * 100vw);
        }
        .infosRight input[type = "checkbox"] {
            margin-left: calc((10 / var(--width2)) * 100vw);
            margin-right:calc((4 / var(--width2)) * 100vw);
        }
    .thumbName {
        padding-left: calc((12 / var(--width2)) * 100vw);
        background-size: calc((12 / var(--width2)) * 100vw);
    }
    .blockThumbnails {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .infos, .collectionContact {
        grid-template-columns: 3fr 1fr;
    }
	
	.collectionContact .button {
    padding: calc((18 / var(--width2))* 100vw) calc((20 / var(--width2))* 100vw);	
	}
	
    .infoDispo,
    .labelDispo {
        display: none;
    }
    .infoDispoShort,
    .labelDispoShort {
        display: inline-block;
    }
    .menuCollection.open a.btFiltre {
        padding-left: var(--padding2);
        height: 1.5625rem;
        line-height: 1.5625rem;
        background-size: 0.5625rem 0.756rem;
        background-position: right 0.625rem center;
    }
        .menuCollection.open a.btFiltre,
        .filtersTags a.tag,
        a.linkMenu {
            padding: 0.3rem calc(0.7rem + var(--padding2)) 0.3rem var(--padding2);
            background-size: 0.7rem;
            background-position: right var(--padding3) center;
        }
	/*.divTitre {
		padding-left: var(--padding);
	}*/

    .menuCollection.fixed {
        top: var(--headerHeight2);
    }
}
/*-----600px------ */
@media (max-width: 37.5em) {
    * {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

	.collectionContact .blockBouton {		
        /*padding-left: var(--padding3);
		justify-self: left;*/
		width: 100%;
	}
	.collectionContact .infosLeft,
	.infoEmptyRep.infosLeft {
		padding: var(--padding3);
	}

     .infosRight {
        padding-left: calc((12 / var(--width3)) * 100vw);
    }
        /*.infosRight label {
            margin-left: calc((12 / var(--width3)) * 100vw);
        }*/
        .infosRight input[type = "radio"],
        .infosRight input[type = "checkbox"] {
            width: calc((12 / var(--width3)) * 100vw);
            height: calc((12 / var(--width3)) * 100vw);
        }
        .infosRight input[type = "checkbox"] {
            margin-left: calc((12 / var(--width3)) * 100vw);
        }
    .thumbName {
        padding-left: calc((10 / var(--width3)) * 100vw);
        background-size: calc((10 / var(--width3)) * 100vw);
    }
    .blockThumbnails {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: none;
    }
	.collectionContact {
		grid-template-columns: 2fr;
	}
	
	.infoEmptyRep {
		width: 100%;
	}
		
	.collectionContact .button {
    /*padding: calc((18 / var(--width3))* 100vw) calc((20 / var(--width3))* 100vw);*/
		font-size: calc((14 / var(--width3)) * 100vw);
		line-height: calc((16 / var(--width3)) * 100vw);
		background: #00000026;
		display: block;
		width: 100%;
		padding: calc((6 / var(--width3)) * 100vw) var(--padding3);
		text-align: left;	
	}
	
    .infos {
        display: none;
    }
    .divBtsRight {
        width: 100%;
    }
    .btFiltres {
        /* width: 1.125rem;*/
        width: 100%;
        height: var(--divArianeHeight3);
        margin-right: 0;
        display: block;
        background-position: right center;
        background-size: calc(var(--divArianeHeight3) - 6px);
    }
    /*filters*/
    .menuCollection {
        width: 0;
        border: none;
    }
        .menuCollection.fixed {
            top: var(--headerHeight3);
        }
    a.btFiltre {
        display: none;
        margin-left: -0.125rem;
        line-height: var(--menuCollectionWidth3);
        -ms-transform: translate(0px,135px) rotate(270.000deg) skew(0.000deg) scale(1.000,1.000);
        -webkit-transform: translate(0px, 135px) rotate(270.000deg) skew(0.000deg) scale(1.000, 1.000);
        transform: translate(0px, 135px) rotate(270.000deg) skew(0.000deg) scale(1.000, 1.000);
    }
    .menuCollection.open, 
    .menuCollection.open .divMenuCollection {
        width: 100%;
    }
        .menuCollection.open a.btFiltre {
            margin-left: 0;
            background-image: url(../../../Images/_Common/Svg/icon-chevronWhite.svg);
            background-position: right 0.756rem center;
            background-size: 1rem 1rem;
        }
        .menuCollection.open a.btFiltre,
        .filtersTags a.tag,
        a.linkMenu {
            padding: 0.3rem calc(0.7rem + var(--padding3)) 0.3rem var(--padding3);
            background-size: 0.7rem;
            background-position: right var(--padding3) center;
        }
		a.linkMenu.open {
			padding-bottom: 0;
			margin-bottom: 0.5rem;
		}
	input.linkSousMenu {
		vertical-align: top;
	}
    #menuFilters {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    /*.btFiltres {
        display: block;
    }*/
    ul.menu li.sousMenu {
        line-height: 1.5625rem;
		padding-right: 3%;
    }	
	.fontFiltre, .fontFiltreItem {
		font-size: 0.9rem;
	}
    input.linkSousMenu {
        width: 0.9rem;
        height: 0.9rem;
        background-size: 0.9rem;
    }
    li.sousMenu label {
        max-width: calc(100% - 0.9rem);
        padding-left: 0.9rem;
        width: calc(100% - 0.9rem);
		line-height: 1.2;
		padding-top: 0;
		margin-bottom: 0.6rem
    }

    /*collection*/
    .collection {
        width: 100%;
        margin-left: 0;
        border-left: 1px solid #999;
    }
}
.infoEmptyRep {
	border-right: none;
}