*{
    transition: 0.25s;
}

html, body{
	margin: 0;
	padding: 0;
	font-family: Arial;
	background: whitesmoke;
	font-size: 1.1rem;
	color: var(--dark);
	font-family: 'Raleway', sans-serif;
}

h1{
    margin-top: 4rem;
}

h1, h2{
    width: 90%;
    text-align: center;
    padding: 0 5%;
}

.menu-bar {
    position: fixed;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 25px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    display: inline-flex;
    background-color: var(--blue-4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    align-items: center;
    padding: 0 10px;
    z-index: 11;
}

.menu-bar a {
    display: block;
    list-style: none;
    color: white;
    font-family: sans-serif;
    font-weight: bold;
    padding: 12px 16px;
    margin: 0 8px;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.menu-bar a::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    transition: 0.2s;
    border-radius: 25px;
}
.menu-bar a:hover {
    color: black;
}
.menu-bar a:hover::before {
    background: linear-gradient(to bottom, var(--white), var(--blue-1));
    box-shadow: 0px 3px 20px 0px black;
    transform: scale(1.2);
}

ul, .display {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media all and (max-width: 1250px){
    ul, .display {
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media all and (max-width: 992px){
    ul, .display {
        grid-template-columns: 1fr 1fr;
    }
}
@media all and (max-width: 650px){
    ul, .display {
        grid-template-columns: 1fr;
    }
}

li {
    list-style: none;
}

h3 {
    margin: 0;
    color: var(--blue-1);
    font-size: 1.3rem;
    width: 100%;
    text-align: center;
}

p {
    color: var(--dark);
    font-size: .9rem;
    width: 94%;
    text-align: justify;
    padding: 16px 3%;
}

a, i{
    color: var(--blue-3);
}

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.container {
    display: flex;
    justify-content: center;
}

.container .card {
    height: 310px;
    cursor: help;
}

.container .card .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--blue-3);
    filter: brightness(.6);
}

.container .card:hover .image { filter: brightness(1); }
.container .card:hover .slide.slide1 .content h3 { opacity: 0; }


.container .card .slide.slide1 .content i {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-style: normal;
    color: white;
    background: var(--blue-4);
    padding: 2px 18px 2px;
    border-radius: 52px;
    opacity: 0;
    transition: .4s .1s;
    z-index: 10;
    white-space: nowrap;
}
.container .card:hover .slide.slide1 .content i { opacity: 1; }


.container .card .slide.slide1 .content span {
    position: absolute;
    top: 0%;
    left: 100%;
    transform: translate(-70%, -30%);
    font-size: .8rem;
    font-weight: bold;
    color: black;
    background: radial-gradient(circle at 65% 15%, #ff6060 1px, red 3%, #a30000 60%, red 100%);
    padding: 10px 8px;
    border-radius: 50px;
    opacity: 0;
    transition: .4s .1s;
    z-index: 10;
    white-space: nowrap;
}
.container .card:hover .slide.slide1 .content span { opacity: 1; }



.container .card .slide.slide1 .content b {
    position: absolute;
    top: 0%;
    right: 100%;
    transform: translate(60%, -30%);
    font-size: .8rem;
    font-weight: bold;
    color: black;
    background: radial-gradient(circle at 65% 15%, var(--blue-1) 1px, var(--blue-2) 3%, var(--blue-4) 60%, var(--blue-4) 100%);
    padding: 10px 10px;
    border-radius: 50px;
    opacity: 0;
    transition: .4s .1s;
    z-index: 10;
    white-space: nowrap;
}
.container .card:hover .slide.slide1 .content b { opacity: 1; }


.container .card .slide {
    width: 300px;
    height: 200px;
    transition: 0.5s;
}

.container .card .slide.slide1 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    transition: .7s;
    transform: translateY(100px);
}

.container .card:hover .slide.slide1{
    transform: translateY(0px);
}

.container .card .slide.slide2 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px 25px;
    box-sizing: border-box;
    transition: .8s;
    transform: translateY(-100px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.container .card:hover .slide.slide2{
    transform: translateY(0);
}

.container .card .slide.slide2::after{
    content: "";
    position: absolute;
    width: 30px;
    height: 4px;
    bottom: 15px;
    left: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--blue-4);
}

.container .card .slide.slide2 .content p {
    margin: 0;
    padding: 0;
    text-align: center;
    color: var(--dark);
}

.container .card .slide.slide1 .content h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 24px;
    text-align: center;
    color: var(--white);
}

.container .card .slide.slide2 .content span {
    text-align: center;
    font-weight: bold;
    display: block;
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 24px;
    text-align: center;
    color: var(--blue-4);
}

.separateur{
    border: 3px solid var(--blue-4);
    background: var(--blue-4);
    margin: 6rem 10px;
    z-index: 1;
    border-radius: 10px;
}

.bas-span {
    display: block;
    text-align: center;
    width: 90%;
    margin: auto;
}
.bas-span button {
    border: none;
    background: var(--blue-1);
    padding: 0.6rem 0.8rem;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
    transition: .25s;
}.bas-span button:hover {
    background: var(--blue-2);
    box-shadow: 0 15px 25px rgb(0 0 0 / 12%);
    transform: scale(1.1);
    cursor: help;
}.bas-span button:active {
    background: var(--blue-3);
    box-shadow: 0 5px 15px rgb(0 0 0 / 20%);
    transform: scale(0.9);
    cursor: default;
}

#bas { display: none; }
.display { display: grid !important; }




#prevu .container { margin: 1rem 0; }

#prevu > h3 {
    color: var(--blue-4);
    margin: 1rem 0;
}

#prevu .container .card {
    position: relative;
    background-color: var(--blue-4);
    border-radius: 10px;
    width: 300px;
    height: 100px;
}

#prevu .container .card h3 {
    z-index: 6;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 95%;
    color: var(--white);
}

#hidden {
    color: var(--white);
    width: 90%;
    margin: auto;
}