*{
    margin:0;
    padding:0;
    list-style: none;
    text-decoration: none;
    font-family: fantasy;
    scroll-behavior: smooth;
}


h1, h2, h3, h4, h5, h6{
    font-family: 'Alex Brush', cursive;
    color:#765830;
    font-size: 4em;
    margin-top:1em;
    margin-bottom:1em;
}

h1{
    font-size: 5em;
    text-align: center;
    font-weight: bold;
    margin-bottom:20px;
}

h2{
    font-family: "Cormorant SC", serif;
    margin-bottom: 10px;
}

p{
    font-family: "Cormorant Garamond", serif;
    color:#765830;
    font-size: 2em;
    font-weight: bold;
    text-align: justify;
  }

 

body{
   background-image: url("images/background.png");
    background-size: cover;
    background-repeat: repeat-y;
}

a{
    cursor:pointer;
}

/* NAVBAR */
/* Affichage par défaut = affichage mobile */
.nav-toggler{
    position:fixed;
    z-index:1000; /*tout le temps visible même sur le texte => 1 seul bouton pour ouvrir/fermer*/
    top:30px;
    right:30px;
    height: 50px;
    width: 50px;
    border:none;
    outline:none; /* A mettre pour l'accessibilité*/
    cursor:pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

.nav-toggler img{
    width: 90px;
    height: auto;
    border-radius: 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



nav {
    position:fixed;
    /* padding: 2em; */
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid #cfcfcf;
    transform:translateY(-200%);
    transition: transform 0.3s cubic-bezier(0.73, 0.11, 0.67, 0.84);
    background: transparent;
     -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

nav.active{
    transform: translate(0);
}

nav a{
    color:#765830;
    font-size: 2em;
    font-family: "Cormorant SC", serif;
    font-weight: bold;
    display: block;
    margin: 10px 0;
    text-decoration: none;
}


header{
    margin-top: 50px;
}

/* ACCEUIL */
.home{
    margin: 5em;
}

.home h2{
    text-align: left;
    justify-content:left;
    font-family: 'Alex Brush', cursive;
}

.home h3{
    text-align: center;
    justify-content:center;
    font-family: 'Alex Brush', cursive;
}

.home .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 1em;
}

.home .container img{
    height: 400px;
    width: 400px;
    z-index: -1;
    display: inline-block;
    mask:
   radial-gradient(at 70% 31%,#000 29%,#0000 30%),
   radial-gradient(at 30% 31%,#000 29%,#0000 30%),
   linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
    clip-path: polygon(-41% 0,50% 91%, 141% 0);
    /*filter: drop-shadow(0px 0px 4px #232323);*/
}

/* COUNTDOWN */
.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: -1;
    border-radius: 10px;
    width:50em;
    height: auto;
    font-family: sans-serif;
    margin-left:5em;
    margin-top:5em;
    margin-right: 5em;
    margin-bottom: 5em;
    
}

#countdown{
    display: grid;
    z-index: -1;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    margin :25px;
    color:#FFFF;
}


.box {
    height: auto;
    text-align: center;
    background: linear-gradient(#e7b74a, #71540e);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}


.box > div:first-child {
    font-size: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 20px;
}

.unite {
    padding: 10px 20px;
    background: linear-gradient(#e7b74a, #71540e);
    font-size: 2em;
}

/* WORKING */
.formaticien {
    margin-left :20px;
    margin-right: 20px;
    width: 90%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -2;
}

/* PLANNING */
.planning{
    margin: 5em;
   
}



.planning .container {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1.5fr, repeat(7, 1fr);
}

.planning img{
    position: relative;
    height: 400px;
    width: 500px;
    filter: drop-shadow(0px 0px 4px #232323);
    align-items: center;
    z-index: -1;
}

.planning .container a{
    font-family: "Cormorant Garamond", serif;
    color:#765830;
    font-size: 1em;
}

.planning .container  .item1{
    grid-column: 1/4;
    grid-row: 1;
    font-family: "Cormorant SC", serif;
    color:#765830;
    text-align: center;
    font-size: 5em;
    font-weight: bold;
    margin-bottom: 50px;
}


.planning .container  .item2{
    grid-column: 1;
    grid-row: 2/4;
    align-content: center;
    text-align: right;
    padding:1em;
}

.planning .container  .item3{
    justify-content: center;
    grid-column:2/4;
    grid-row: 2;
    align-content:center;
    text-align: center;
    font-size: 1em;
}

.planning .container  .item4{
    grid-column: 3;
    grid-row:2/4;
    align-content: center;
    text-align: center;
}

.planning .container  .item5{
    grid-column: 2/4;
    grid-row:3;
    align-content: center;
    text-align: center;
    font-size: 50px;
}

.planning .container  .item6{
    grid-column: 1;
    grid-row:4/6;
    align-content: center;
    text-align: center;
}

.planning .container  .item7{
   grid-column: 1/3;
   grid-row:4;
   align-content:center;
    text-align: center;
    font-size: 1em;
}

.planning .container  .item8{
    grid-column: 3;
    grid-row: 4/6;
    align-content: center;
    text-align: left;
    padding:1em;
}

.planning .container  .item8 img{
    height: 400px;
    width: 400px;
 }

.planning .container  .item9{
    align-content: center;
    text-align: center;
    font-size: 50px;
    grid-column: 1/3;
    grid-row:5;
}

.planning .container  .item10{
    grid-column: 1;
    grid-row:6/8;
    align-content: center;
    text-align: right;
    padding:1em;
}

.planning .container  .item11{
   align-content:center;
    text-align: center;
    font-size: 1em;
    grid-column: 2/4;
    grid-row:6;
}

.planning .container  .item12{
    grid-column: 3;
    grid-row:6/8 ;
    align-content: center;
    text-align: center;
}

.planning .container  .item13{
    align-content: center;
    text-align: center;
    font-size: 50px;
    grid-column: 2/4;
    grid-row:7;
}

.planning #scrollToTopButton{
    display :none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background: transparent;
     -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color:#765830;
    cursor:pointer;
    padding:15px;
    border-radius: 10px;
}

.planning #scrollToTopButton:hover{
background-color: #765830;
color:white;
}

.liste{
    margin: 5em;
    text-align: justify;

}

.liste h2{
    text-align: left;
    justify-content:left;
    margin-bottom: 1em;
}

.liste a{
    display: flex;
    justify-content:center;
    align-items: center;
    font-family: 'Alex Brush', cursive;
    font-size: 3em;
}

.liste a:hover{
    text-decoration: underline;
}

.sleep {
    margin:5em;
}

.sleep .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.todo{
    margin: 5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:flex-start;
} 


.todo h4{
    font-family: "Cormorant SC", serif;
    color:#765830;
    text-align: center;
}
.todo h5{
    font-size: 2em;
    color: black;
    font-family: "Cormorant Garamond", serif;
}
.todo .title{
    margin-bottom: 20em;
}

.todo .Remonte{
    position:fixed;
    z-index:1000;
    bottom:30px;
    right:30px;
    font-size: 2em;
    
}

.todo .Remonte img{
    height: 30px;
    width: 30px;
}


.todo #historique .container{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1.5fr, repeat(7, 1fr);
    
}

.todo #historique .container a{
    font-size : 2em;
}

.todo #historique .container img{
    position: relative;
    height: 400px;
    width: 500px;
    filter: drop-shadow(0px 0px 4px #232323);
    align-items: center;
    z-index: -1;
}


.todo #historique .container .item2{
    align-content: center;
    text-align: center;
    padding: 2em;
}

.todo #historique .container .item3{
    align-content: center;
    text-align: center;
    padding: 2em;
}

.todo #historique .container .item6{
    align-content: center;
    text-align: center;
    padding: 2em;
}

.todo #historique .container .item7{
    align-content: center;
    text-align: center;
    padding: 2em;
}

.todo #historique .container .item10{
    align-content: center;
    text-align: center;
    padding: 2em;
}

.todo #historique .container .item11{
    align-content: center;
    text-align: center;
    padding: 2em;
}

.todo #scrollToTopButton{
    display :none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background: transparent;
     -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color:#765830;
    cursor:pointer;
    padding:15px;
    border-radius: 10px;
}

.todo #scrollToTopButton:hover{
background-color: #765830;
color:white;
}

/* INFO */

.info{
    margin: 5em;
    scroll-behavior: smooth;
}

.info .nav{
    height: 70vh;
}

.info #car {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1.5fr, repeat(9, 1fr);
    grid-gap:20px;
    font-size: 1.5em;
    padding: 1,5em;
 /*   place-items: center;  */
    margin-top: 50px;
}

.info #car img{
    position: relative;
    height: 400px;
    width: 500px;
    filter: drop-shadow(0px 0px 4px #232323);
    align-items: center;
    text-align: center;
    z-index: -1;
}

.info #car a{
    font-size: 1em;
}

.info #car .item1{
    grid-column: 1/4;
    grid-row: 1;
    font-family: "Cormorant SC", serif;
    color:#765830;
    align-items: center;
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 50px;
    margin-top: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index:-1;


}

.info #car .item2{
    grid-column: 1/4;
    grid-row: 2;
    font-family: 'Alex Brush', cursive;
    color:#765830;
    align-items: center;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top:20px;
    font-size: 2em;
}

.info #car .item3{
    grid-column: 1/3;
    grid-row: 3;
    align-items: center;
    text-align: center;
}

.info #car .item4{
    grid-column: 1/3;
    grid-row: 4;
    align-items: center;
    text-align: center;
    font-size: 1em;
}

.info #car .item5{
    padding-left: 10px;
    grid-column: 3;
    grid-row: 3/5;
    font-size: 2em;
    align-items: center;
    text-align: center;
}

.info #car .item6{
    grid-column: 1/4;
    grid-row: 5;
    font-family: 'Alex Brush', cursive;
    color:#765830;
    text-align: center;
    align-items: center;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top:20px;
    font-size: 2em;
}

.info #car .item7{
    grid-column: 1;
    grid-row:6/8;
    align-items: center;
    text-align: center;
}

.info #car .item8{
    text-align: center;
    align-items: center;
    grid-column: 2/4;
    grid-row: 6;
}

.info #car .item9{
    text-align: center;
    align-items: center;
    grid-column: 2/4;
    grid-row: 7;
}

.info #car .item10{
    text-align: center;
    align-items: center;
    grid-column: 1/3;
    grid-row:8
}

.info #car .item11{
    grid-column: 3;
    grid-row: 8/10;
    text-align: center;
    align-items: center;
}

.info #car .item12{
    grid-column: 1/3;
    grid-row: 9;
    align-items: center;
    text-align: center;
}

.info #navette {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    margin-top: 2em;
}

.info #navette .item1{
    font-family: "Cormorant SC", serif;
    color:#765830;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 50px;
    margin-top: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index:-1;
}

.info #social {
    display: flex;
    align-items: center;
    text-align: center;
    flex-direction: column;
    margin-top: 2em;
}

.info #social .item1{
    font-family: "Cormorant SC", serif;
    color:#765830;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 50px;
    margin-top: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index:-1;
}

.info #scrollToTopButton{
    display :none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background: transparent;
     -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color:#765830;
    cursor:pointer;
    padding:15px;
    border-radius: 10px;
}

.info #scrollToTopButton:hover{
background-color: #765830;
color:white;
}

/* PHOTO */
.photo{
    margin: 5em;
    scroll-behavior: smooth;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1.5fr, repeat(9, 1fr);
    grid-gap:20px;
    font-size: 1.5em;
    padding: 1,5em;
    text-align: center;
    justify-content: center;
    align-items: center;
}


.photo img{
    position: relative;
    height: 300;
    width: 350px;
    filter: drop-shadow(0px 0px 4px #232323);
    align-items: center;
    z-index: -1;
}

.photo .item0{
    grid-column: 1/3;
    grid-row: 1;
}
.photo .item1{
    grid-column: 1/3;
    grid-row: 2;
    font-family: "Cormorant SC", serif;
    color:#765830;
    align-items: center;
    text-align: center;
    font-size: 0.5em;
    font-weight: bold;
    margin-bottom: 50px;
    margin-top: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index:-1;


}

.photo .item2{
    grid-column: 1;
    grid-row: 3;
}

.photo .item3{
    grid-column: 2;
    grid-row: 3;
}

.photo .item4{
    grid-column: 1/3;
    grid-row: 4;
    font-family: "Cormorant SC", serif;
    color:#765830;
    align-items: center;
    text-align: center;
    font-size: 0.5em;
    font-weight: bold;
    margin-bottom: 50px;
    margin-top: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index:-1;
}

.photo .item6{
    grid-column: 2;
    grid-row: 5;
}