body, html {
    background-color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #363531;
    transition: 0.5s;
    overflow-x: hidden;
}

*:focus {
  outline: none;
}

a, button {
    color: #363531;
    text-decoration: none;
}

a:hover, button:hover {
    color: inherit;
}

.text-red {
    color: #E5223C;
}

.bg-red {
    background-color: #E5223C;
    color: #fff;
}

.bg-blue {
    background-color: #4A96D1;
}

.bg-yellow {
    background-color: #FDEE65;
}

.bg-grey {
    background-color: #363531;
    color: #fff;
}

.grey, .blue, .red, .yellow {
    padding-top: 100px;
    padding-bottom: 150px;
}

.fs-35 {
    font-size: 35px !important;
}

.fw-sb {
    font-weight: 600 !important;
}
.mb8 {
    margin-bottom: 8px !important;
}

h1 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 11px;
    text-transform: uppercase;
}

h2 {
    font-size: 44px;
    font-weight: 700;
    text-transform: uppercase;
}

h3 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 60px;
}

h4 {
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 600;
}

.en-tete {
    padding-bottom: 60px;
}

.en-tete p {
    margin-bottom: 0;
    font-weight: 400;
}

.en-tete p b {
    font-weight: 600;
}

.en-tete hr {
    opacity: 1;
    width: 50%;
}

.content p {
    margin-bottom: 0;
}

.p1 {
    font-size: 14px;
    font-weight: 600;
}

.p2 {
    font-size: 20px;
    font-weight: 500;
}

p b {
    font-weight: 600;
}

.slider {
    padding: 120px 0;
}

.slick-publication .slick-slide img,
.slick-modale .slick-slide img {
    height: 420px;
    object-fit: cover;
}

.content h3, .color h3 {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}

.btn-cadre {
    border: 1px solid;
    padding: 12px 25px;
    display: inline-block;
    transition: 0.5s;
}

.bg-red .btn-cadre {
    color: #fff;
}

.btn-cadre-sm {
    border: 1px solid;
    padding: 8px;
    display: inline-block;
    transition: 0.5s;
    border-radius: 3px;
}

@media (min-width:1200px){
    .btn-cadre:hover,
    .btn-cadre-sm:hover {
        border: 1px solid transparent;
        display: inline-block;
        color: #fff;
        background-color: #363531;
    }
}

.bg-grey .btn-cadre:hover,
.bg-grey .btn-cadre-sm:hover {
    color: #363531;
    background-color: #fff;
}

.btn-resa {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.btn-resa p {
    padding: 12px 21px 12px 15px;
    background-color: #E5223C;
    border: 1px solid #E5223C;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    transition: 0.5s;
}

.btn-resa .circle {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #E5223C;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    background-color: #fff;
    z-index: 9;
    padding: 0;
}

.btn-resa:hover p {
    color: #E5223C;
    background-color: #fff;
    border: 1px solid #E5223C;
}

.mt-100 {
    margin-top: 100px;
}

.pt-100 {
    padding-top: 100px;
}

.pt-150 {
    padding-top: 200px;
}

.pb-150 {
    padding-bottom: 200px;
}

.video iframe {
    filter: drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.5));
    height: 300px;
    width: 100%;
}

.poly-jaune {
    position: absolute;
    width: 1100px;
    height: 700px;
    transform: translateY(150px);
    mix-blend-mode: multiply;
    transition: 0.3s;
}

.poly-jaune::after {
    content: "";
    background: #FDEE65;
    opacity: 0.6;
    position: absolute;
    top: -50px;
    left: -50px;
    bottom: -50px;
    right: -50px;
    clip-path: polygon(20% 16%, 33% 10%, 46% 66%, 40% 73%);
}

.poly-jaune::before {
    content: "";
    background: #FDEE65;
    opacity: 0.6;
    position: absolute;
    top: -50px;
    left: -50px;
    bottom: -50px;
    right: -50px;
    clip-path: polygon(46% 81%, 86% 70%, 88% 80%, 53% 100%);
}

.cr-wrap-modale {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-top: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(0deg, rgba(28, 28, 28, 0.6) 0%, rgba(28, 28, 28, 0) 100%);
}

.cr-wrap-modale .cr {
    max-width: 50%;
}

.cr-wrap {
    position: absolute;
    bottom: 0;
    text-align: end;
    width: 100%;
    padding-top: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 5px;
    background: linear-gradient(0deg, rgba(28, 28, 28, 0.6) 0%, rgba(28, 28, 28, 0) 100%);
}

.cr {
    color: #fff;
    font-size: 10px;
    margin-bottom: 0;
}

.cr-wrap-head {
    position: absolute;
    bottom: 0;
    text-align: end;
    width: calc(100% - 21px);
    padding-top: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 5px;
    background: linear-gradient(0deg, rgba(28, 28, 28, 0.6) 0%, rgba(28, 28, 28, 0) 100%);
}


/* IMAGES */
.images h4 {
    font-size: 26px;
    font-weight: 600;
    margin: 20px 0 10px;
}

.images p {
    font-size: 18px;
    font-weight: 400;
}

.images .position-absolute {
    bottom: 10px;
    left: 20px;
}

.home .images .position-absolute {
    left: 8.33333333%;
}

.images .bg-img {
    height:300px;
    background-size: 110%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    transition: 0.5s;
}

.images .bg-img:hover {
    background-size: 115%;
}

.home .images .bg-img {
    height: 550px;
}


/* ACCES */
.bg-acces {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
}

.bg-acces p {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 400;
}

.bg-acces .btn-cadre {
    border: 1px solid;
    margin-top: 50px;
    padding: 12px 30px;
    display: inline-block;
    margin-bottom: 150px;
}


/* GALERIE */
.galerie {
    padding-bottom: 100px;
}

.galerie-item img {
    cursor: pointer;
}

.modale {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #202020;
    z-index: 99;
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
}

.modale.show {
    opacity: 1;
    pointer-events: inherit;
}

.modale .objet, .modale .station {
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
}

.modale .station {
    max-width: 75%;
    max-height: 60vh;
}

.modale h4 {
    color: #FDEE65;
    font-size: 22px;
    font-weight: 600;
    text-transform: none;
}

.modale h4 span {
    color: #FDEE65;
    font-size: 14px;
    font-weight: 500;
}

.modale h5 {
    color: #FDEE65;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 34px;
}

.modale p {
    color: #fff;
    font-weight: 400;
}

.modale .details {
    position: absolute;
    bottom: -120px;
}

.modale .map {
    background-image: url('../img/map-parcours.png');
    background-position: center;
    background-size: cover;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    width: 25%;
}

.modale .map .local {
    width: 12px;
    margin-left: 8px;
    fill: #FDEE65;
    transition: 0.5s;
}

.modale .btn-cadre {
    position: absolute;
    bottom: 18px;
    color: #FDEE65;
    border-color: #FDEE65;   
}

.modale .btn-cadre:hover {
    color: #363531;
    background-color: #FDEE65;
}

.modale .btn-cadre:hover .local {
    fill:#363531;
}


/* ACCORDION */
.accordion-item {
    border: none;
    margin-top: 50px;
    background-color: transparent;
    z-index: 1;
    position: relative;
}

.accordion-body {
    padding: 0;
}

.accordion svg {
    width: 17px;
    margin-left: auto;
    margin-right: 5px;
    fill: #363531;
}

.accordion-body .row {
    border-bottom: 1px solid;
}

.accordion h2 {
    font-size: 32px;
    font-weight: 700;
}

.accordion h6 {
    font-size: 22px;
    font-weight: 600;
}

.accordion p {
    font-size: 16px;
}

.accordion h6 + p {
    text-transform: uppercase;
}

.accordion .arrow {
    width: 17px;
    margin: 0 5px;
    transition: 0.4s;
}

.accordion .dossier {
    min-height: 52px;
    border-bottom: 1px solid;
    height:50%;
}

.accordion .revue {
    min-height: 52px;
    height:50%;
}

.accordion a:hover .dossier,
.accordion a:hover .revue {
    background-color: #363531;
    color: white;
}

.accordion a:hover svg {
    fill: #fff;
}

.accordion hr {
    opacity: 1;
}

.button-accordion:not(.collapsed) .arrow {
    transform: rotate(-180deg);
}


/* CHRONOLOGIE */

.chronologie {
    margin-top: 10px;
}

.chronologie:first-child {
    margin-top: 60px;
}

.chronologie .date {
    font-size: 24px;
    font-weight: 600;
    text-align: right;
    line-height: 29px;
    display: block;
    padding-bottom: 10px;
    width: 100%;
    color: inherit;
    margin-bottom: 0;
}

.chronologie .line {
    width: 1px;
    background-color: #363531;
    height: 100%;
    right: 25px;
    bottom: 0;
    margin-left: auto;
    margin-right: 14px;
}

.chronologie:last-child .line {
    display: none;
}

.chronologie .line.line-home {
    display: none;
}

.chronologie:first-child .line.line-home {
    display: block;
    position: absolute;
    height: 280px;
    bottom: calc(100% + 20px);
    right: 10px;
}

.chronologie p {
    font-size: 16px;
    line-height: 26px;
}

.chronologie .mb-80 {
    margin-bottom: 80px;
}

.chronologie .fs-20 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 60px;
}

.chronologie span {
    font-size: 14px;
}


/* FILE */
.file {
    display: block;
    padding: 20px 0;
    background-color: #fff;
    width: 100%;
    color: #363531 !important;
    text-align: center;
    margin-top: 0;
    border: 1px solid #363531;
    transition: 0.5s;
}

.file:hover {
    background-color: #E5223C;
    box-shadow: 2px 17px 22px 0px rgb(0 0 0 / 70%);
    transform: translateY(-5px);
}


/* EXPOSITION */
.expos {
    padding-bottom: 150px;
} 

.expos h4 {
    margin-bottom: 60px;
}

.expos h3 {
    font-size: 16px;
    font-weight: 500;
    text-transform: lowercase;
}

.expos h5 {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
}

.expos .btn-cadre-i {
    background-color: #1D1D1B;
    border: 1px solid #fff;
    background-color: #1D1D1B;
    color: #fff;
}

.expos .btn-cadre-i:hover {
    background-color: #1D1D1B;
    border: 1px solid #1D1D1B;
    background-color: #fff;
    color: #1D1D1B;
}

.expos .grayscale {
  filter: grayscale(100%);
  transition: 0.5s;
}

.expos a:hover .grayscale {
    filter: grayscale(0);
}

.random1::before {
    content: "";
    background: #E5223C;
    position: absolute;
    z-index: 1;
    top: -50px;
    left: -50px;
    bottom: -50px;
    right: -50px;
    clip-path: polygon(55% 30%, 100% 20%, 95% 50%, 53% 45%);
}

.random2::before {
    content: "";
    background: #E5223C;
    position: absolute;
    z-index: 1;
    top: -50px;
    left: -50px;
    bottom: -50px;
    right: -50px;
    clip-path: polygon(0% 30%, 55% 30%, 58% 40%, 3% 55%);
}

.random3::before {
    content: "";
    background: #E5223C;
    position: absolute;
    z-index: 1;
    top: -50px;
    left: -50px;
    bottom: -50px;
    right: -50px;
    clip-path: polygon(60% 0%, 70% 5%, 60% 70%, 40% 50%);
}

.random4::before {
    content: "";
    background: #E5223C;
    position: absolute;
    z-index: 1;
    top: -50px;
    left: -50px;
    bottom: -50px;
    right: -50px;
    clip-path: polygon(2% 80%, 55% 75%, 52% 100%, 0% 90%);
}

.expoPoly {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateY(150px);
    top: 0;
    mix-blend-mode: multiply;
    z-index: 2;
}

.poly1::after {
    content: "";
    background: rgba(229, 34, 60);
    position: absolute;
    top: -50px;
    left: -50px;
    bottom: -50px;
    right: -50px;
    clip-path: polygon(0% 65%, 95% 20%, 100% 40%, 25% 100%);
}

.poly2::after {
    content: "";
    background: rgba(229, 34, 60);
    position: absolute;
    top: -50px;
    left: -50px;
    bottom: -50px;
    right: -50px;
    clip-path: polygon(0% 8%, 20% 5%, 25% 49%, 15% 55%);
    z-index: 1;
}

.poly2::before {
    content: "";
    background: #E5223C;
    position: absolute;
    top: -50px;
    left: -50px;
    bottom: -50px;
    right: -50px;
    clip-path: polygon(0% 90%, 95% 65%, 100% 80%, 5% 96%);
    z-index: 1;
}

.expos.details .expoPoly {
    top: -50%;
    left: -50%;
    width: 500px;
    transform: translateY(-150px);
    top: 150px;
}


/* NAV */
.logo {
    width: 150px;
    margin: 20px 0 0 25px;
}

nav .left a,
nav li a {
    transition: 0.5s;
}

nav .top {
    position: fixed;
    display: flex;
    align-items: center;
    top: 45px;
    left: 180px;
    width: 100%;
    z-index: 10;
}

.left svg {
    position: fixed;
    z-index: 10;
    fill: #363531;
}

.menu .left img, .search .left img {
    position: absolute;
    left: 0;
}

.left h1 {
    position: fixed;
    left: -320px;
    top: 110px;
    transform: rotate(-90deg) translateX(-50%);
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    z-index: 10;
}

.left span {
    font-size: 10px;
    margin: 0 5px;
}

nav .right {
    position: fixed;
    top: 45px;
    right: 20px;
    text-align: right;
    z-index: 10;
}

nav .right ul li {
    margin-bottom: 8px;
}

nav .right ul .link {
    width: 120px;
    cursor: pointer;
}

nav .right .main .link, .link-shop  {
    font-weight: 700;
}

.bg-red a,
.bg-grey a {
    color: #fff;
}

.bg-red button,
.bg-grey button {
    color: #fff;
}

@media (max-width: 1200px) {
    .bg-red .reseaux a,
    .bg-grey .reseaux a {
        color: #202020;
    }
}

nav .reseaux {
    position: fixed;
    bottom: 50px;
    right: 20px;
    text-align: right;
    z-index: 9;
}

nav .reseaux a {
    display: flex;
    border: 1px solid;
    margin-bottom: 12px;
    height: 30px;
    width: 30px;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    margin-left: auto;
    transition: 0.5s;
}

nav .reseaux .nl {
    background-color: rgba(255, 255, 255, 0.1);
    height: auto;
    width: fit-content;
    border: 1px solid;
    padding: 4px 12px;
    transition: 0.25s;
    cursor: pointer;
}

nav .reseaux a:hover,
nav .reseaux .nl:hover {
    background-color: #E5223C;
    color: #fff;
}

@media (min-width: 1200px){
    .bg-red nav .reseaux a:hover,
    .bg-red nav .reseaux .nl:hover {
        background-color: #fff;
        color: #E5223C;
    }
}

.text-red a {
    color: #E5223C;
}

nav .submenu-search a,
nav .submenu-fond a {
    color: #fff;
}


/* MENU */
.menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    transition: 1s;
    pointer-events: none;
}

.menu .left h1 {
    position: absolute;
    z-index: 0;
}

/* .filtre {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: #1c1c1c99;
} */

.submenu-fond {
    position: absolute;
    right: 100%;
    width: 80%;
    height: 100%;
    border-left: 200px solid transparent;
    border-bottom: 100vh solid #E5223C;
    transition: 0.5s ease-out;
    z-index: 1;
}

.menu.show .submenu-fond {
    right: 0;
}

.img-fond-menu{
    background-size: cover;
    background-position: left;
    height: 100%;
    width: 0%;
    position: absolute;
    left: 0;
    transition: 0.5s;
    z-index: 0;
}

.menu .left {
    opacity: 0;
    transition: 0.5s;
}

.menu.show .left {
    opacity: 1;
}

.menu.show .img-fond-menu {
    width: 40%;
}

.img-fond-visite {
    background-image: url('../img/menu/visite_image_menu.png');
}

.img-fond-expositions-manifestation {
    background-image: url('../img/menu/expo_image_menu.png');
}

.img-fond-histoire-pedagogie {
    background-image: url('../img/menu/histoire_image_menu.png');
    background-color: #1c1c1c;
}

.img-fond-le-musee {
    background-image: url('../img/menu/musee_image_menu.png');
}

.close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.submenu {
    position: absolute;
    top: 30vh;
    left: 100px;
    text-align: left;
    opacity: 0;
    transition: 0.5s;
}

.submenu.show {
    left: 200px;
    opacity: 1;
}

.submenu li {
    font-size: 26px;
    position: relative;
}

.submenu h2 {
    text-transform: uppercase;
    font-size: 14px;
}

.submenu li .underline {
    position: absolute;
    bottom: 0;
    height: 2px;
    width: 0;
    background-color: #fff;
    transition: 0.5s;
}

.submenu li:hover .underline {
    width: 100%;
}


/* SEARCH */
/* .search {
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: -100%;
    z-index: 99;
    transition: 0.5s;
} */

#search-results {
    position: absolute;
    width: 100%;
    top: 73px;
}

.search-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border: 1px solid #fff;
    background-color: #202020;
    z-index: 1;
    max-height: 250px;
    overflow-y: scroll;
}

.search-list h3 {
    border-bottom: 1px solid #fff;
}

.search-list h3,
.search-list p {
    padding: 10px;
}

.search-list p:hover {
    background-color: #2e2e2b;
}

.search-list h3 {
    margin-top: 0 !important;
}

.submenu-search {
    border-bottom: 100vh solid #363531;
}

.img-fond-search {
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 40%;
    position: absolute;
    left: 0;
}

.search .left h1 {
    position: absolute;
}

.search h2 {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 50px;
}

.search input {
    background-color: #363531;
    border: none;
    padding: 18px 0;
    position: relative;
    width: 500px;
    color: #fff;
    font-size: 24px;
}

.search input:focus-visible {
    outline: none;
}

.search form {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #fff;
}

.search button {
    color: white;
    display: inline-block;
    border: none;
    background-color: #363531;
    font-size: 14px;
}

.search h3 {
    text-transform: uppercase;
    font-size: 14px;
    margin-top: 100px;
    margin-bottom: 18px;
}

.search li {
    font-size: 16px;
    margin-bottom: 10px;
}


/* ALERT */
.alerte {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 34px;
    background-color: #E5223C;
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 600;
    z-index: 100;
}

.alerte .a1,
.alerte .a2 {
    position: absolute;
    display: inline-block;
    white-space: nowrap;
    margin-left: 100%;
    animation-name: defil;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-fill-mode: backwards;
    animation-iteration-count: infinite;
}

.alerte .a2 {
    animation-delay: 10s;
}

@keyframes defil {
    from {margin-left: 100%;}
    to {margin-left: -100%;}
}


/* MODALE MAILCHIMP */
#modale {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 28, 28, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    z-index: 999;
}

#modale.show {
    opacity: 1;
    visibility: visible;
}

#mc_embed_signup input {
    border-radius: 0;
    color: #202020;
    border-color: #202020;
}

.button-nl {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #202020;
    padding: 4px 12px;
    transition: 0.25s;
    border-radius: none;
    margin-left: auto;
    transition: 0.5s;
}

#mc-embedded-subscribe {
    margin-left: auto;
}

#mc_embed_signup input.button-nl:hover {
    background-color: #E5223C;
    color: #fff;
    border-color: #fff;
}


/* CAROUSEL */
.accueil {
    height: 100vh;
    width: 100%;
}

.accueil h2 {
    font-size: 32px;
    line-height: 38px;
    font-weight: 700;
}

.accueil h3 {
    line-height: 17px;
    margin-bottom: 0;
}

.date-carousel {
    margin-bottom: 28px;
}

.btn-tpz .txt{
    position: relative;
}

.btn-tpz p::before {
    content: '';
    position: absolute;
    display: inline-block;
    border: 1px solid #363531;
    width: 170px;
    height: 40px;
    transform: perspective(400px) rotateY(40deg) rotate(-2deg);
    left: -8px;
    bottom: 6px;
}

.btn-tpz .txt {
    padding: 17px;
    padding-top: 8px;
    display: inline-block;
}

.slick-dots {
    position: absolute;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    bottom: -150px;
    left: 50%;
    height: 20px;
    transform: translateX(-50%);
}

.slick-dots li {
    height: 30px;
    width: 60px;
    margin: 0 5px;
    background-color: transparent;
    border-top: 3px solid  rgba(54, 53, 49, 1);
    cursor: pointer;
    transition: 0.5s linear;
}

.slick-dots li.slick-active {
    border-top: 8px solid rgba(54, 53, 49, 1);
}

.slick-dots li:hover {
    border-top: 8px solid rgba(54, 53, 49, 1);
}

.slick-dots button {
    display: none;
}

.cadre-e22 {
    position: absolute;
    display: flex;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
}

.cadre-e22 img {
    width: 130px;
    margin-left: 7px;
}

.cadre-e22 p {
    margin-bottom: 0;
    font-size: 10px;
    font-weight: 700;
}

.accueil, .home {
    overflow: hidden;
}

.slick-accueil .slick-list {
    overflow: visible;
}

.slick-accueil .slick-text,
.slick-accueil .slick-image {
    position: relative;
    opacity: 0;
    right: 100px;
}

.slick-accueil .slick-active .slick-text,
.slick-accueil .slick-active .slick-image {
    opacity: 1;
    right: 0;
}


/* HOME */
.home .histPeda h5 {
    font-weight: 700;
    font-size: 32px;
}

.home .histPeda h6 {
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
}

.home h4 + p,
.home h1 + h4 {
    margin-bottom: 70px;
}

.home .video iframe {
    height: 400px;
}

.accueil .expoPoly {
    transform: translateY(100px);
}

@keyframes animSlide {
    0% {opacity: 0; transform: translateX(100px);}
    100% {opacity: 1; transform: translateX(0px);}
}

@keyframes animPoly {
    0% {opacity: 0; left: 150px;}
    100% {opacity: 1; left: 0px;}
}

/* .slick-accueil .slick-active img {
    animation-name: animSlide;
    animation-fill-mode: forwards;
    animation-duration: 0.75s;
}

.slick-accueil .slick-active h3 {
    animation-name: animSlide;
    animation-fill-mode: forwards;
    animation-duration: 0.75s;
    animation-delay: 0.25s;
}

.slick-accueil .slick-active h2 {
    animation-name: animSlide;
    animation-fill-mode: forwards;
    animation-duration: 0.75s;
    animation-delay: 0.5s;
}

.slick-accueil .slick-active .date-carousel {
    animation-name: animSlide;
    animation-fill-mode: forwards;
    animation-duration: 0.75s;
    animation-delay: 0.75s;
}

.slick-accueil .slick-active .desc-carousel {
    animation-name: animSlide;
    animation-fill-mode: forwards;
    animation-duration: 0.75s;
    animation-delay: 1s;
}

.slick-accueil .slick-active .know-more {
    animation-name: animSlide;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-delay: 1.25s;
}

.slick-accueil .slick-active .expoPoly {
    animation-name: animPoly;
    animation-duration: 2s;
}

.slick-accueil img,
.slick-accueil h3,
.slick-accueil h2,
.slick-accueil .date-carousel,
.slick-accueil .desc-carousel,
.slick-accueil .know-more,
.slick-accueil .expoPoly {
    opacity: 0;
} */


.slick-expo .slick-item:first-child::before {
    content: '';
    background-image: url('../img/expo/drag.png');
    background-size: 110px;
    background-position: center;
    background-repeat: no-repeat;
    width: 140px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: -100px;
    transform: translate(-50%, -100%);
    opacity: 1;
    transition: 0.5s;
}

.slick-expo .slick-list {
    overflow: visible;
}

.home .slider {
    padding: 0;
}

.home-slider-item-title {
    color: #fff;
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    max-width: 100px;
    transition: 0.5s;
}

.home .slick-item img {
    margin: 0 60px;
    transition: 0.5s;
    opacity: 0.3;
    max-width: 380px;
}

.home .slick-current img {
    opacity: 1;
}

.accueil .slick-track {
    display: flex;
    align-items: center;
}

.bg-slide {
    margin: 0 60px;
    width: 360px;
    height: 620px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: 0.5s;
}

.bg-slide .filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    transition: 0.5s;
}

.bg-slide:hover .filter {
    background-color: rgb(0 0 0 / 10%);
}

.form1 {
    clip-path: polygon(5% 0%, 70% 5%, 100% 100%, 0% 98%);
}

.bg-slide:hover.form1 {
    clip-path: polygon(10% 5%, 75% 10%, 100% 95%, 0% 93%);
}

.form0 {
    clip-path: polygon(0% 2%, 90% 0%, 60% 90%, 5% 85%);
}

.bg-slide:hover.form0 {
    clip-path: polygon(5% 2%, 95% 5%, 65% 95%, 0% 90%);
}


/* ARCHIVES */
.archive.accordion {
    margin: 150px 0;
}

.archive.accordion .accordion-body .row {
    border-bottom: none;
    padding: 34px 0;
}

.archive.accordion h2 {
    font-size: 22px;
    margin-bottom: 21px;
}

.archive.accordion p {
    font-size: 16px;
    font-weight: 500;
}

.archive.accordion p b {
    font-weight: 600;
}

.archive.accordion {
    position:relative;
}

.archive.accordion a:hover svg {
    fill: #363531;
}

.archive h3 {
    margin-bottom: 20px;
}

/* MANIFESTATIONS */
.filter-manif label {
    cursor:pointer;
}

.filter-manif label.selected {
    background-color: #363531;
    color: #fff;
    border: 1px solid #363531;
}

.filter-manif select {
    position: relative;
    padding: 6px 30px;
    color: #fff;
    background-color: #363531;
    appearance: none;
    background-image: url('../img/chevron-down-light-white.svg');
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

.manif .row {
    border-bottom: none;
    padding: 18px 22px;
    min-height: 180px;
    align-items: center;
}

.manif.accordion h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 0;
}

.manif.accordion h3 {
    font-size: 22px;
    margin-bottom: 21px;
}

.manif.accordion p {
    font-size: 16px;
    font-weight: 500;
}

.manif.accordion p b {
    font-weight: 600;
}

.manif.accordion {
    position:relative;
}

.manif p.category {
    font-size: 9px;
    padding: 5px 10px;
    border: 1px solid;
    display: inline-block;
    margin-bottom: 5px;
}

.billet-hover {
    position: relative;
}

.billet-hover .bg-red,
.billet-hover .bg-blue,
.billet-hover .bg-yellow {
    position: absolute;
    width: 0%;
    height: 100%;
    transition: 1s;
    top: 0;
    left: -20px;
    z-index: 0;
}

@media (min-width: 1200px){
    .billet-hover:hover .bg-red,
    .billet-hover:hover .bg-blue,
    .billet-hover:hover .bg-yellow {
        width: calc(100% + 40px);
    }
}
.billet-hover .ticket {
    position: absolute;
    height: 100%;
    width: 100px;
    right: -20px;
    top: 0;
    background-color: transparent;
    overflow: hidden;
    padding: 0;
}

.ticket p {
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    height: 100%;
    width: 100%;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-left: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 0;
}

.ticket.yellow p {
    opacity: 0;
    color: #363531;
    border-left: 1px solid #363531;
    transition: 1s;
}

.billet-hover:hover .ticket.yellow p {
    opacity: 1;
}

@media (min-width: 1200px){
    .billet-hover .circle {
        position: absolute;
        width: 21px;
        height: 21px;
        border-radius: 50%;
        border: 1px solid #fff;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        z-index: 1;
        padding: 0;
    }
}

.billet-hover .ticket:hover .circle.red {
    border-color: #E5223C;
}

.billet-hover .ticket:hover .circle.blue {
    border-color: #4A96D1;
}

.billet-hover .ticket:hover .circle.yellow {
    border-color: #FDEE65;
}

.ticket:hover .circle {
    background-color: #fff;
}

.ticket.red:hover p {
    color: #E5223C;
    background-color: #fff;
    border: 1px solid #E5223C;
}

.ticket.blue:hover p {
    color: #4A96D1;
    background-color: #fff;
    border: 1px solid #4A96D1;
}

.ticket.yellow:hover p {
    color: #FDEE65;
    background-color: #fff;
    border: 1px solid #FDEE65;
}


/* HIGHLIGHT MUSEE */
.highlight-m {
    padding: 130px 0;
    color: white;
}

.highlight-m h2 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 24px;
}

.highlight-m p {
    margin-bottom: 28px;
}

.highlight-m .btn-tpz p::before {
    width: 370px;
    border: 1px solid #fff;
    left: 15px;
}


/* HIGHLIGHT YOUTUBE */
.highlight-y {
    padding: 80px 0 150px;
}

.highlight-y iframe {
    filter: drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.5));
    height: 500px;
}

.highlight-y h2 {
    font-size: 14px;
    text-transform: uppercase;
}

.highlight-y h3 {
    text-transform: uppercase;
    font-size: 24px;
    margin-bottom: 70px;
    font-weight: 700;
}

.highlight-y h4 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 18px;
}

.highlight-y .btn-tpz {
    color: #fff;
}

.highlight-y .btn-tpz .txt::before {
    width: 230px;
    border: 1px solid #fff;
}


/* LE MUSEE */
.home .content .images {
    padding-top: 150px;
    padding-bottom: 150px;
}

.musee-home .desc {
    position: absolute;
    bottom: 45px;
    z-index: 3;
}

.musee-home h2 {
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
}

.home .filtre {
    position: absolute;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 50%);
    height: 100%;
    width: 100%;
}

.bg-musee {
    background-image: url('../img/menu/musee_image_menu.png');
    height: 800px;
    background-size: cover;
    background-position: center;
}

.musee h1 {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
}

.musee h2 {
    text-transform: uppercase;
    font-size: 44px;
    font-weight: 700;
}

.musee .date {
    font-size: 24px;
    font-weight: 600;
    text-align: right;
    line-height: 29px;
}

.musee .line {
    width: 1px;
    background-color: #363531;
    height: 100%;
    right: 25px;
    bottom: 0;
    margin-left: auto;
    margin-right: 14px;
}

.musee .line.line-home {
    position: absolute;
    height: 280px;
    bottom: calc(100% + 20px);
    right: 10px;
}

.musee p {
    font-size: 16px;
    line-height: 26px;
}

.musee span {
    font-size: 14px;
}

.musee .mb-80 {
    margin-bottom: 80px;
}

.musee .bg-grey {
    padding-top: 110px;
    padding-bottom: 160px;
}

.musee h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 19px;
}

.musee .date {
    display: block;
    padding-bottom: 10px;
    background-color: #fff;
    width: 100%;
    color: #363531;
    text-align: right;
    margin-bottom: 0;
}

.musee .fs-20 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 60px;
}


/* FONDATION */
.musee .fondation {
    padding-bottom: 140px;
}


/* EQUPE */
.musee .equipe h3 {
    font-weight: 600;
    font-size: 22px;
    margin: 20px 0 10px;
}

.musee .equipe h4 {
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 60px;
}


/* AMIS */
.musee .btn-pdf {
    border: 1px solid #363531;
    padding: 11px 13px;
    display: inline-flex;
    align-items: center;
}

.musee .btn-pdf svg {
    width: 10px;
    margin-left: 13px;
}

.musee .amis p {
    margin: 0;
    font-weight: 400;
}

.musee .amis p span {
    font-weight: 600;
}


/* SLIDER */
.modale-slick .slick-track {
    display: flex;
    align-items: center;
}

.modale-slick .slick-track img {
    max-height: 90vh;
    object-fit: contain;
}

.slick-arrow {
    width: 80px;
    height: 100%;
    top: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slick-arrow img {
    width: 40px;
}

.slick-prev {
    left: -80px;
}

.slick-next {
    right: -80px;
}


/* EXPO & MANIF */
.expo-manif {
    padding: 120px 0;
    overflow: hidden;
}

.expo-manif h2 {
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 600;
}

.expo-manif h3 {
    font-size: 14px;
}

.expo-manif .slick-list {
    overflow: visible;
}


/* HISTOIRE & PEDAGOGIE */
.hist-peda {
    padding: 150px 0;
    font-size: 16px;
}

.hist-peda h2 {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
}

.hist-peda h3 {
    margin-bottom: 140px;
}

.hist-peda h4 {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
}

.hist-peda h5 {
    text-transform: uppercase;
    margin-bottom: 40px;
}

.hist-peda img {
    width: 90%;
}

.hist-peda .btn-tpz p::before {
    width: 180px;
}


/* FOOTER */
footer {
    padding-top: 150px;
    font-size: 14px;
}

footer h6 {
    font-weight: 700;
}

footer .mention {
    margin-top: 30px;
    font-size: 12px;
}

footer img {
    transition: 0.5s;
}

footer .invert {
    max-width: 160px;
}

.bg-grey footer .invert {
    filter: invert(1);
}


/* VISITE */
.visite {
    padding-bottom: 145px;
}

.visite .row {
    padding-top: 170px;
}

.visite h1 {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
}

.visite h2 {
    font-weight: 700;
    font-size: 44px;
    text-transform: uppercase;
}

.visite p {
    font-weight: 500;
    font-size: 14px;
}

.visite span {
    font-weight: 600;
}

.visite hr {
    background-color: #363531;
    color: #363531;
    opacity: 1;
    margin-bottom: 37px;
}

.more {
    padding: 150px 0 220px;
}

.more h2 {
    font-size: 14px;
    text-transform: uppercase;
}

.more h3 {
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 90px;
}


/* ACCES */
.acces {
    background-image: url('../img/acces/Bitmap.png');
    height: 100vh;
    background-position: center;
    background-size: contain;
    padding-top: 170px;
}

.acces .row {
    padding-top: 0;
}

.acces .btn-acces {
    margin-bottom: 170px;
}

.acces .fs-20 {
    font-size: 20px;
}

.acces .ionicon {
    width: 30%;
    justify-self: center;
}


/* RESERVATION */
.reservation {
    padding: 150px 0;
}

.reservation form h3 {
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 600;
}

.reservation form h4 {
    margin-top: 53px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 10px;
    border-bottom: 1px solid #363531;
}

.reservation form label {
    font-size: 14px;
}

.reservation form input, .reservation form select {
    border: 1px solid #E6E8ED;
    background-color: #fff;
    width: 100%;
    height: 32px;
    margin-bottom: 21px;
    padding-left: 6px;
}

.reservation form textarea {
    width: 100%;
    height: 100px;
    border: 1px solid #E6E8ED;
    background-color: #fff;
    color: #202020;
    padding: 7px 8px;
}

.btn-grey {
    border: 1px solid #363531;
    text-transform: uppercase;
    background-color: #363531;
    padding: 11px 25px;
    border-radius: 0;
    color: #fff;
}

.btn-grey:hover {
    border: 1px solid transparent;
    color: #363531;
    background-color: #fff;
}

.btn-red {
    border: 1px solid #E5223C;
    color: #E5223C;
    padding: 11px 25px;
    border-radius: 0;
}

.btn-red:hover {
    color: #fff;
    background-color: #E5223C;
}

button {
    background-color: transparent;
}

#ui-datepicker-div {
    background-color: #fff;
    border: 1px solid;
    padding: 10px;
}

.ui-datepicker-calendar {
    text-align: center;
}

.ui-datepicker-calendar td {
    padding: 5px;
    transition: 0.5s;
}

.ui-datepicker-calendar td:not(.ui-state-disabled):hover {
    background-color: #E5223c;
}

.ui-datepicker-title {
    text-align: center;
}

a.ui-corner-all {
    position: absolute;
}

.ui-datepicker-next {
    right: 10px;
}


/* PUBLICATIONS */

.bg-grey .publications h4, .bg-grey .publications p{
    color: #fff;
    transition: 0.5s;
}

.publications {
    padding-top: 50px;
    padding-bottom: 50px;
}

.publications h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0;
    text-transform: inherit;
}

.publi-hover {
    padding: 15px;
    transition: 0.5s;
}

.publi-hover:hover {
    background-color: #E5223C;
    box-shadow: 2px 17px 22px 5px rgb(0 0 0 / 70%);
    transform: translateY(-10px);
}
.publi-hover:hover p,
.publi-hover:hover h4 {
    color: #363531;
}


/* PEDAGOGIE */
.pedagogie {
    padding-top: 100px;
    padding-bottom: 200px;
}

.histoire .photos {
    padding-bottom: 100px;
}


/* COLLECTION */
.collection {
    padding-top: 100px;
    padding-bottom: 200px;
}

.collection p span {
    text-transform: uppercase;
    font-weight: 600;
    display: block;
}


/* DETAILS PUBLICATIONS */
.details-publications {
    padding-top: 140px 0;
}

.details-publications h1 {
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
}

.details-publications h2 {
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.details-publications .title {
    padding-top: 150px;
}

.details-publications .subtitle {
    font-size: 16px;
}

.details-publications .resume {
    font-size: 20px;
}

.details-publications .title {
    margin-bottom: 80px;
}

.slick-publication .slick-item,
.slick-modale .slick-item {
    padding-right: 40px;
}

.slick-publication .slick-dots,
.slick-modale .slick-dots {
    bottom: -60px;
}

.details-publications .photos {
    padding-top: 100px;
    padding-bottom: 100px;
}

.details-publications h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 32px;
    text-transform: uppercase;
}

.details-publications .expo-liee {
    padding-top: 150px;
    padding-bottom: 150px;
}



/* CLASS JS */

.menu.show {
    /* left: 0; */
    pointer-events: initial;
}

.unscroll {
    overflow-y: hidden;
}