@font-face {
    font-family: "GoldLine";
    src: url(./assets/font/GoldLine.otf);
}

@font-face {
    font-family: "Cinzel";
    src: url(./assets/font/Cinzel.otf);
}

@font-face {
    font-family: "SteelFish";
    src: url(./assets/font/SteelFish.otf);
}

@font-face {
    font-family: "HandoReg";
    src: url(./assets/font/HandoReg.ttf);
}

@font-face {
    font-family: "Michland";
    src: url(./assets/font/Michland.otf);
}

@font-face {
    font-family: "Allenoire";
    src: url(./assets/font/Allenoire.otf);
}



body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
    overflow-x: hidden;

}


/* ==================== Header ==================== */
.logo-yp{
object-fit: cover;
width: 80px;
margin: 0 40px 0 40px;
image-rendering: crisp-edges;
}

.logo-yp-side-bar{
  object-fit: cover;
width: 90px;
margin: 0 20px 0 20px;
image-rendering: crisp-edges;
}

.nav-scrolled{
  position: fixed;
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.8);
  z-index: 1000000;
  width: 100%;
  opacity: 0;
  display: none;
  transition: 0.5s ease-in-out;
  border-bottom: 1px solid rgb(235, 235, 235);
}

.bloc-title{
   margin-top: 20px;
}

.title-name{
    font-family: "GoldLine";
    margin: 0 0;
    text-align: center;
    font-size: 1.5rem;
}


nav>ul{
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}

nav>ul>li>button,
#btnPrestations,
#btnPrestationsScrolled,
#btnPrestationsSideBar{
    font-family: "Cinzel";
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    margin: 0 20px;
}

.dropdown-content>a,
.dropdown-content-scrolled>a,
.dropdown-content-side-bar>a{
    cursor: pointer;

}
.btnAccueil::after,
.btnAccueilScrolled::after,
.btnAccueilSideBar::after {
    border-bottom: 3px solid rgba(255, 0, 0, 0.6);
  }

  #btnPrestations::after,
  #btnPrestationsScrolled::after,
  #btnPrestationsSideBar::after {
    border-bottom: 3px solid rgba(128, 0, 128, 0.6);
  }

  .btnApropos::after,
  .btnAproposScrolled::after,
  .btnAproposSideBar::after {
    border-bottom: 3px solid rgba(0, 128, 0, 0.6);
  }

  .btnContact::after,
  .btnContactScrolled::after,
  .btnContactSideBar::after {
    border-bottom: 3px solid rgba(0, 0, 255, 0.6);
  }

  .btnAccueil::after,
  .btnAccueilScrolled::after, 
  .btnAccueilSideBar::after,
#btnPrestations::after,
#btnPrestationsScrolled::after, 
#btnPrestationsSideBar::after,
.btnApropos::after,
.btnAproposScrolled::after,
.btnAproposSideBar::after,
.btnContact::after,
.btnContactScrolled::after,
.btnContactSideBar::after{
    content: "";
    display: block;
    margin-top: 5px;
}
  
.btnAccueil, 
.btnAccueilScrolled,
.btnAccueilSideBar,
#btnPrestations, 
#btnPrestationsScrolled,
#btnPrestationsSideBar,
.btnApropos, 
.btnAproposScrolled,
.btnAproposSideBar,
.btnContact,
.btnContactScrolled,
.btnContactSideBar{
    border: none;
    outline: none;
    background: none;
    font-size: 1.1rem;
    transition: 0.3s;
}

.btnAccueil:hover:after,
.btnAccueilScrolled:hover:after {
  box-shadow: 0px 1px 5px red;
}

#btnPrestations:hover:after, 
#btnPrestationsScrolled:hover:after{
  box-shadow: 0px 1px 5px purple;
}

.btnApropos:hover:after, 
.btnAproposScrolled:hover:after{
  box-shadow: 0px 1px 5px green;
}

.btnContact:hover:after,
.btnContactScrolled:hover:after{
  box-shadow: 0px 1px 5px blue;
}

.btnAccueil:after,
.btnAccueilScrolled:after,
#btnPrestations:after, 
#btnPrestationsScrolled:after,
.btnApropos:after, 
.btnAproposScrolled:after,
.btnContact:after,
.btnContactScrolled:after{
  transition: 0.3s;
}


.btnAccueil>p, 
.btnAccueilScrolled>p,
.btnAccueilSideBar>p,
#btnPrestations>p, 
#btnPrestationsScrolled>p,
#btnPrestationsSideBar>p,
.btnApropos>p, 
.btnAproposScrolled>p,
.btnAproposSideBar>p,
.btnContact>p,
.btnContactScrolled>p,
.btnContactSideBar>p{
margin-bottom: 0;
}

.btnAccueilSideBar,
#btnPrestationsSideBar,
.btnAproposSideBar,
.btnContactSideBar{
  font-weight: bold;
}
.dropdown-navbar,
.dropdown-navbar-scrolled,
.dropdown-navbar-side-bar {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content,
  .dropdown-content-scrolled,
  .dropdown-content-side-bar {
    display: none;
    position: absolute;
    border: 2px solid rgba(128, 0, 128, 0.6);
    background-color: #f9f9f9;
    width: 100%;
    top: 33px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
    transition: 1s;
  }
  
  .dropdown-content a,
  .dropdown-content-scrolled a,
  .dropdown-content-side-bar a {
    color: rgb(80, 80, 80);
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    font-family: "Cinzel";
  }
  
  .dropdown-content a:hover,
  .dropdown-content-scrolled a:hover,
  .dropdown-content-side-bar a:hover {
    background-color: #f1f1f1;
    transition: 0.5s;
  }

  #btn-mariage:hover,
  #btn-evf:hover,
  #btn-communion:hover,
  #btn-shooting:hover,
  #btn-projet:hover,
  #btn-mariage-scrolled:hover,
  #btn-evf-scrolled:hover,
  #btn-communion-scrolled:hover,
  #btn-shooting-scrolled:hover,
  #btn-projet-scrolled:hover,
  #btn-mariage-side-bar:hover,
  #btn-evf-side-bar:hover,
  #btn-communion-side-bar:hover,
  #btn-shooting-side-bar:hover,
  #btn-projet-side-bar:hover {
    color: black;
    transition: 0.5s;
  }


  #side-bar {
    display: none;
    position: fixed;
    width: 170px;
    height: 70%;
    background: rgb(244,244,244);
background: linear-gradient(180deg, rgb(255, 255, 255, 0.9) 0%, rgb(255, 255, 255, 0.9) 48%, rgba(53,53,172,0) 100%, rgba(244,244,244,0) 100%);
    top: 0;
    left: -170px;
    transition: 0.5s ease-out;
    z-index: 4;
  }
  .toggle-btn {
    position: absolute;
    top: 30px;
    left: 190px;
    cursor: pointer;
    height: 50px;
    width: 50px;
  }
  .toggle-btn span {
    width: 60px;
    height: 9px;
    border-radius: 5px;
    background: #1a1a1a;
    display: block;
    margin-top: 4px;
    transition: 0.3s ease;
  }

  .nav-side-bar{
    display: flex;
    flex-direction: column;
    margin-top: 15px;
  }

  .nav-side-bar>li{
    margin: 15px 0;
  }
  
  /* prioriser la class active  */
  #side-bar.active {
    left: 0;
  }
  
  .active span {
    position: absolute;
  }
  .active span:nth-child(1) {
    transform: rotate(45deg);
  }
  .active span:nth-child(2) {
    opacity: 0;
  }
  .active span:nth-child(3) {
    transform: rotate(-45deg);
  }
  .active ~ .content {
    opacity: 0.3;
  }

/* ======================================================== */





/* ========================= Footer ====================== */

.footer{
    background-image: linear-gradient(to right, rgb(223, 235, 248), rgb(214, 230, 247), rgb(223, 235, 248) );
    padding: 1% 2% 0 2%;
position: relative; 
}

.footer>div:first-child{
    display: grid;
    grid-template-columns: 30%  30%  30%;
    justify-content: center;
    text-align: center;
}

.left-side-footer{
  display: flex;
  justify-content: center;
  align-items: center;
}
.left-side-footer>p{
  font-family: "SteelFish";
  letter-spacing: 2px;
  font-size: 2rem;
  font-weight: bold;
}

  .adresse-mail{
    font-family: "SteelFish";
    letter-spacing: 6px;
    font-size: 2rem;
 text-decoration: none;
 font-weight: bold;
    color: #2a2d31;
  }

  #liste-rs{
    display: flex;
    justify-content: center;
  }

  #liste-rs>img{
    width: 50px;
    margin: 30px;
    cursor: pointer;
    transition: 0.6s;
  }

  #liste-rs>img:hover{
    transform: scale(1.2);
  }

  .footer>div:last-child{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }

  .bottom-footer>p:first-child{
    font-family: "arial";
    letter-spacing: 3px;
    font-size: 0.8rem;
    margin-bottom: 2px;
   text-align: center;
  }

  .bottom-footer>p:last-child{
    font-family: "arial";
    letter-spacing: 3px;
    font-size: 0.8rem;
    margin-bottom: 5px;
   text-align: center;
  }


/* ===================== RESPONSIVE ========================== */

@media screen and (max-width: 1000px){
  #liste-rs>img {
    width: 40px;
    margin: 20px;
}

.footer>div:first-child {
  align-items: center;
}

.logo-yp{
  width: 70px;
  margin: 0 40px 0 40px;
}

.adresse-mail{
font-size: 1.5rem;
letter-spacing: 4px;
}

.bottom-footer>p:first-child, .bottom-footer>p:last-child{
  font-size: 0.7rem;
}
}

@media screen and (max-width: 900px){

  .btnAccueil, .btnAccueilScrolled, #btnPrestations, #btnPrestationsScrolled, .btnApropos, .btnAproposScrolled, .btnContact, .btnContactScrolled{
    font-size: 1rem;
  }
}

@media screen and (max-width: 700px){

.bloc-accueil{
padding-top: 50px;
}

  #side-bar{
    display: initial;
  }
  .bloc-title{
    display: none;
  }

  #liste-rs>img {
    width: 30px;
    margin: 20px;
}

.logo-yp{
  width: 50px;
  margin: 0 40px 0 40px;
}

.adresse-mail{
font-size: 1.2rem;
letter-spacing: 2px;
}

.bottom-footer>p:first-child, .bottom-footer>p:last-child{
  font-size: 0.6rem;
}

.footer>div:last-child{
  margin-top: 5px;
}
}

@media screen and (max-width: 500px){

  .footer>div:first-child {
 grid-template-columns: 1fr;
 grid-template-rows: 80px 30px 50px;
 grid-template-areas: "logo" "address" "rs";
  }

  .left-side-footer{
grid-area: address;
  }

  .middle-side-footer{
grid-area: logo;
  }

  .right-side-footer{
grid-area: rs;
  }

  .toggle-btn {
    height: 40px;
    width: 40px;
  }
  .toggle-btn span {
    width: 40px;
    height: 6px;
  }

}