@import url("/css/libs/carrousel.css");
@import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Merienda:wght@800&family=Poppins&family=Ubuntu&display=swap');

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   /*font-family: "Poppins",sans-serif;*/
}

:root
{
  /* --fond_principal:rgb(201, 171, 2);*/
   --fond_principal:rgb(156, 134, 15);
   --fond_cadre:rgba(201, 171, 2, 0.112);
   --fond_menu:rgba(201, 171, 2, 0.357);
   --principal: #444444;
   --fond_page: #e7f7f4;
}

body
{
   position:relative;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   min-height:100vh;
  background-color: var(--fond_page);
  /* background: repeating-conic-gradient(
       at 50% 0%, var(--fond_principal) 0%,
       black 66%,
       var(--fond_principal) 0%)
   fixed*/

   /*background-image: conic-gradient(from 126deg at 50% 1%, black 0% 25%, black 25% 30%, var(--fond_principal) 30% 50% )*/
}

section
{
   width:85vw;
}

header
{
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width:100%;
   padding:10px 7.5vw;
   background-color: var(--principal);
   font-family: 'Belanosima', sans-serif;
}

header .logo
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 3em;
   text-align: center;
   color:white;
   text-decoration: none;
   text-transform: uppercase;
   font-family: 'Belanosima', sans-serif;
   
   opacity: 0;
   animation: animationDroite 1s ease forwards;
   animation-delay: 0s;
}

header img
{
   height: 80px;
   margin-right: 50px;
}

header b
{
   color:rgb(255, 0, 0);
   font-size: 1.1em;
   font-weight: bold;
   font-style: italic;
   text-transform: uppercase;
}

header i
{
   color:#00204c;
   font-size: 1.1em;
   font-weight: bold;
   font-style: italic;
   text-transform: uppercase;
}

header ul
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:10px;
   margin-right:30px;
   opacity: 0;
   animation: animationGauche 1s ease forwards;
   animation-delay: 1s;
}

header li
{
   list-style: none;
   
}

header li a
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 1.3em;
   color:white;
   text-decoration: none;
   transition: 0.25s ease-in-out;
   padding:10px 25px;
   text-transform: uppercase;
   border-radius: 5px;
}

header li a:hover
{
   color:black;
   background-color: white;
}

header li a.active
{
   color:white;
   border:1px solid white
}

header li a.active:hover
{
   color:black;
   border:1px solid white
}

header li a:hover img
{
   filter: invert(0%);
}

header li a img
{
   width:25px;
   height: 25px;
   margin-right: 10px;
   filter: invert(100%);
}

.content
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:30px;
   color:black;
   background-color: rgba(255, 255, 255, 0.603);
   padding: 0 20px;
   width:85vw;
   margin: 55px 0;
   font-family: 'Belanosima', sans-serif;
   background-color: var(--fond_page);
}

.content_gauche
{
   width: 50%;
   display: flex;
   align-items: flex-start;
   align-self: baseline;
   justify-content: space-between;
   flex-direction: column;
   line-height: 3em;
   /*padding:0 20px;*/
   gap:30px;
}

.content_droit
{
   background-color: transparent;
   position: relative;
   width: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   height: 554px;
}

.content_droit img
{
   max-width: 50vw;
   overflow: hidden;
}

.slogan
{
   font-size:2.5em;
   margin: 0 0 30px 0px;
   font-family: 'Merienda', cursive;
   opacity: 0;
   animation: animationHaut 1s ease forwards;
   animation-delay: 0.5s;
}

.slogan span
{
   font-size:1em;
   margin:0px 10px;
}

#text
{
   margin-left: 10px;
}

#text, .typed-cursor
{
   font-size:1.15em;
   color:var(--principal);
   text-transform: uppercase;
}

.typed-cursor
{
   position: relative;
   top:-5px;
   right:-6px
}

.content_gauche p
{
   position: relative;
   margin-top:25px;
   font-size: 1.2em;
   line-height: 1em;
   font-family: 'Belanosima', sans-serif;
   padding: 20px;
   background-color: #d6e5e2;
   /*background-color: #f8f8ff;*/
   color:black;
   letter-spacing: 0.03em;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
   font-family: 'Poppins', sans-serif;
}

.content_gauche p::before
{
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 2px;
   height: 100%;
   background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
}

.content_gauche p::after
{
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 2px;
   height: 100%;
   background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
}


.content_gauche h2
{
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2em;
}

.btn-contact
{
   display: flex;
   justify-content: space-around;
   align-items: center;
   color: black;
   background-color: var(--fond_page);
   box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 3px 1px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
   text-decoration: none;
   padding:5px 30px;
   margin: 30px 0px;
   gap:0 25px;
   border-radius:5px;
   text-transform: uppercase;
   transition: 0.25s ease-in-out;
}

.btn-contact:hover
{
   background-color: var(--principal);
   color:white;
}

.btn-contact:hover img
{
   filter:invert(100%);
}

.btn-contact img
{
   width:35px;
   height: 35px;
}

.contactez-nous
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
}

.contactez-nous a
{
   display: flex;
   align-items: center;
   justify-content: center;
   transition: 0.25s all;
   color:black;
}

.contactez-nous a:hover
{

   transform: scale(1.04);
}

.contactez-nous img
{
   width:80px;
   margin-left: 10px;
}

.contactez-nous .btn-contact img
{
   width:40px;
}

footer
{
   display: flex;
   align-items: flex-start;
   justify-content: center;
   width:100%;
   padding: 50px 10%;
   background-color: #444444;
   color:white;
   text-transform: uppercase;
}

footer a
{
   text-decoration: none;
   color:white;
}

.footer_gauche, .footer_centre, .footer_droite
{
   text-align: center;
   width:33%;
}

.footer_centre, .footer_droite
{
   align-self: center;
}

.footer_droite
{
   line-height: 3em;
   font-size: 1.5em;
}

.footer_centre
{
   line-height: 3em;
}

.footer_gauche img
{
   width: 200px;
   margin-bottom: 35px
}

.footer_gauche h1
{
   font-size: 4em;
}


.retour_biblio
{
   margin-top:5px;
   color:white;
   font-size: 0.85em;
}

@media screen and (max-width: 1800px)
{
   .contactez-nous
   {
      flex-direction: column;
   }
}

@media screen and (max-width: 1616px)
{
   .slogan
   {
      font-size: 2em;
   }

   .content_gauche h2
   {
      font-size: 1.8em;
   }
}



@media screen and (max-width: 1350px)
{
   header
   {
       flex-direction: column;
   }

   header ul
   {
       margin: 20px 0;
   }

   .content
   {
       margin-top:50px;
   }

   footer
   {
      flex-direction: column;
      align-items: center;
      gap:25px;
   }

   footer img
   {
      max-width: 80vw;
   }

   .footer_centre, .footer_gauche, .footer_droite
   {
      width: auto;
   }

   .lien_top
   {
      display:none;
   }

   .content,
   .content_gauche,
   .content_droit
   {
       width:100%;
       flex-direction: column;
   }
 
   .slogan, .content h2
   {
      justify-content: center;
      width: 100%;
      text-align: center;
   }

   .content_gauche p
   {
      width: 100%;
   }
}

@media screen and (max-width: 800px)
{
   section
   {
      width: 95vw;
   }

   header ul
   {
       flex-direction: column;
       display:none;
   }

   header img
   {
       margin-right: 15px;
   }

   .logo
   {
       margin-top:15px;
   }

   .logo span i,
   .logo span b
   {
       font-size:0.6em;
   }

   .slogan
   {
      margin-top: 25px;
      font-size: 2em;
   }

   .content
   {
       margin-top:0px;
   }
   
   .content,
   .content_gauche,
   .content_droit
   {
       width:100%;
       flex-direction: column;
   }

   .content_droit
   {
       /*display:none;*/
   }

   .description_parfum
   {
       width: 94%;
       padding: 20px;
       line-height: 1.3em;
       font-size: 0.9em;
   }


   .menu_mobile,
   .toggle span
   {display: none}

   header ul.active
   {
       position: fixed;
       top: -10%;
       left: 0;
       width: 100%;
       height: 110%;
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 9999;
       background-color: black;
   }

   header.active ul
   {
       justify-content: center;
       align-items: center;
       flex-direction: column;
       gap:25px;
   }

   .toggle
   {
       position: absolute;
       width: 32px;
       height: 40px;
       justify-content: center;
       align-items: center;
       z-index: 100000;
       cursor: pointer;
       top:25px;
       right: 20px;
   }

   .toggle::before
   {
       content: '';
       position: absolute;
       width: 100%;
       height: 2px;
       background: #ffffff;
       transform: translateY(-10px);
       box-shadow: 0 10px 0 #ffffff;
       transition: 0.25s;
   }
   .toggle.active::before
   {
       transform: translateY(0px) rotate(45deg);
       box-shadow: 0 0px 0 #ffffff;
   }

   .toggle::after
   {
       content: '';
       position: absolute;
       width: 100%;
       height: 2px;
       background: #ffffff;
       transform: translateY(10px);
       transition: 0.25s;
   }

   .toggle.active::after
   {
       transform: translateY(0px) rotate(-45deg);
   }


   footer
   {
       padding:20px;
   }

}

@media screen and (max-width: 515px)
{
   .content_gauche h2
   {
      font-size: 1.5em;
   }

   header img
   {
      height: 50px;
   }

   header .logo 
   {
      font-size: 1.5em;
      height: 70px;
   }

   .contactez-nous
   {
      padding:3px 15px;
      font-size: 0.95em;
      text-align: center;
   }
}

@media screen and (max-width: 460px)
{
   .content_gauche h2
   {
      display: block;
      font-size: 1.3em;
   }

   .typed-cursor
   {
      display: inline;
   }
}

@keyframes animationDroite
{
    0%
    {
        opacity: 0;
        transform: translateX(-100px);
    }

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

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

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

@keyframes animationHaut
{
    0%
    {
        opacity: 0;
        transform: translateY(50px);
    }

    100%
    {
        opacity: 1;
        transform: translateY(0px);
    }
}