@import url("/css/libs/menu.css");
@import url("/css/libs/defilant.css");
@import url("/css/libs/contact.css");
@import url("/css/libs/form.css");


@import url('https://fonts.googleapis.com/css2?family=REM&family=Work+Sans&display=swap');

:root
{
   --main : rgb(0, 131, 162);/*#F6EC65;*/
   --secondaire : #dadada;
   --footer : #1a1a1a;
}

*
{
   margin:0;
   padding:0;
   box-sizing: border-box;
}

html
{
   margin: 0;
   padding: 0;
   scroll-behavior: smooth;
}

body
{
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   position: relative;
   font-family: 'Work Sans', sans-serif;
   background-color: #FFF;
}

header
{
   position:relative;
   display : flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   color: white;
}

.header_haut
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 1em;
   width: 100%;
   height: 120px;
   padding: 0px 7vw;
   background-color: #FFF;
   box-shadow: 0px 2px 4px #707070;
   z-index:1;
}

section
{
   flex:1
}

.logo_slogan
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:15px;
   text-decoration: none;
   color:black;
   opacity: 0;
   animation: animationDroite 1s ease forwards;
   animation-delay: 0s;
}

.logo_slogan img
{
   max-height: 95px;
   padding: 3px 0px;
}

.slogan
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-transform: uppercase;
   text-align: center;
   gap: 0px 10px;
   font-size: 1.3em;
   line-height: 1.5em;
   letter-spacing: 1em;
   font-family: 'Kanit', sans-serif;
}

.slogan h1
{
   position: relative;
   letter-spacing: 0.5em;
   font-size: 2.5em;
   text-indent: 0.5em;
}

.slogan h1::after
{
   content: '';
   position: absolute;
   bottom: -5px;
   left: 50%;
   width: 80%;
   height: 2px;
   background-color: var(--main);
   transform: translateX(-50%);
}

.slogan h2
{
   font-size: 1em;
   opacity: 0;
   animation: animationDroite 1.5s ease forwards;
   animation-delay: 1s;
   color: #0083a2;
   letter-spacing: 0.25em;
   text-indent: 0.25em;
}

.main
{
   display : flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   background-color: white;
   width:100%;
}

.contenu
{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin:35px 0;
   /*width:77vw;*/
}

.contenu h1
{
   font-size: 2em;
   text-transform: uppercase;
}   

.contenu h1:first-child
{
   border-left: 35px solid var(--main);
   padding-left:15px;
   margin-bottom:25px;
}

.contenu .expert
{
   width: 100%;
}

.contenu .expert_texte
{
   font-size: 1.2em;
   border-left: 3px solid var(--main);
   padding-left:35px;
   margin-left:17.5px;
   font-weight: 100;
   width:85vw;
}

.contenu .expert_texte a
{
   color: black;
}

.contenu .expert_texte ul
{
   margin: 15px 0 15px 15px;
}

.img_container_page_front
{
   display: flex;
   align-items: center;
   justify-content: center;
   gap:20px;
   flex-wrap: wrap;
   margin:50px 0;
}

.img_container_page_front img
{
   cursor: pointer;
}

.contenu .savoir_plus h1
{
   position: relative;
   border-left: 25px solid var(--main);
   padding-left: 15px;
   margin-bottom: 35px;
   margin-left: -35px;
   font-size: 1.3em;
}

.contenu .savoir_plus
{
   position: relative;
   width: calc(100% - 38px);
   margin:25px 0; 
   padding:20px 0 20px 20px;
}

.contenu .savoir_plus .lien_bas
{
   display: flex;
   justify-content: space-around;
   align-items: center;
   border-left: 3px solid var(--main);
   margin:0px 0 0 -22px
}

.contenu .savoir_plus .lien_bas div
{
   display: flex;
   justify-content: center;
   align-items: center;
}

.contenu .savoir_plus img
{
   margin-right: 25px;
   height:50px;
}

.contenu .savoir_plus a
{
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   padding: 15px 20px;
   text-align: center;
   color:rgb(0, 0, 0);
   font-weight: bolder;
   text-decoration: none;
   font-size: 1.5em;
   text-transform: uppercase;
   transition: 0.25s;
}

.contenu .savoir_plus .lien_bas div:nth-child(1) a
{
   background-color: #e6f4ff;
}

.contenu .savoir_plus .lien_bas div:nth-child(2) a
{
   background-color: #e6f4ff;
}

.contenu .savoir_plus .lien_bas div:nth-child(1) a:hover
{
   background-color: #003055;
   color:white
}

.contenu .savoir_plus .lien_bas div:nth-child(2) a:hover
{
   background-color: #003055;
   color:white
}

.contenu_404
{
   margin:25px 0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap:30px;
   text-align: center;
   font-size: 3em;
}

.contenu_404 a
{
   color:black
}

.realisations
{
   display: flex;
   flex-direction: column;
}

.img_realisations
{
   display: flex;
   align-items: center;
   justify-content: space-around;
   margin-top: 35px;
}

.realisations img
{
   float: none;
}

footer
{
   display: flex;
   align-items: flex-start;
   justify-content: center;
   width:100%;
   padding: 50px 10%;
   background-color: var(--footer);
   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;
}

.error404
{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   width: 100%;
   text-align: center;
   margin: 50px 0;
   gap:20px;
}

.error404 a
{
   color:black;
}

/***ADMIN LOGIN ****/
.title-section
{
   font-size: 3em;
   margin-bottom:30px;
}

.login_page_cadre
{
   padding: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   margin:50px 0;
}

.alert
{
   margin:40px 0;
   padding:25px;
   border-radius: 5px;
   font-weight: bold;
   color:rgb(0, 0, 0);
   width:50vw
}

.alert-danger
{
   background-color: rgb(255, 188, 188);
   border:1px solid red;
}

.alert-success
{
   background-color: rgb(212, 255, 204);
   border:1px solid rgb(0, 173, 0);
}

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

.login_page label
{
   margin:10px 0;
   font-size: 2em;
}

.login_page input[type="text"], .login_page input[type="password"]
{
   width:30vw;
   height:50px;
   padding:0 20px;
   font-size: 1.5em;
}

.login_page button
{
   padding:5px 50px;
   margin:35px 0;
   font-size: 2em;
   background-color:var(--main-sombre);
   color:black;
   border-radius: 5px;
   border:1px solid black;
   box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
   transition: 0.25s;
   cursor: pointer;
}

.login_page button:hover
{
   color:var(--main-sombre);
   background-color: white;
   box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}


/******* FIN LOGIN ***/

.lien_top
{
   display:block;
   text-decoration: none;
}

.haut_page
{
   position: fixed;
   text-align: center;
   right: 30px;
   bottom: 30px;
   border: 1px solid white;
   background: #000;
   color: white;
   width: 50px;
   height: 50px;
   padding: 5px;
   border-radius: 5px;
   cursor: pointer;
   display: none;
   z-index: 200;
   font-size: 18px;
   line-height: 1;
   transition: 0.25s ease-in-out;
}

.haut_page:hover
{
   transform: scale(1.2);
}

.liste_ancre_menu
{
   display: flex;
   align-items: center;
   justify-content: center;
   width:75vw;
   flex-wrap: wrap;
   gap:50px;
   margin-bottom:25px;
   border: 3px var(--secondaire2) solid;
   border-radius: 10px;
   padding:20px;
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.liste_ancre_menu a
{
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   color:black;
   font-size: 2em;
   transition: 0.25s ease-in-out;
}

.liste_ancre_menu  h4
{
   padding:5px 20px;
   border-radius: 5px;
}

.liste_ancre_menu a:hover h4
{
   color:white;
   background-color: var(--footer);
}

.liste_ancre_menu img
{
   width:50px;
   margin-right: 10px;
}

.top_page
{
   color:black;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
}

.top_page h5
{
   padding:5px 20px;
   border-radius: 5px;
   transition: 0.25s ease-in-out;
}

.top_page:hover h5
{
   color:white;
   background-color: var(--footer);
}

.top_page img
{
   filter: contrast(0%);
   margin-right:10px;
}

.img_global
{
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #ffffff7c;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   display:none;
   backdrop-filter: blur(10px);
}

.img_global img
{
   width: 50%;
   cursor: pointer;
   /*aspect-ratio: 2/2;*/
}

.img_aide
{
   font-style: italic;
   margin:10px 0;
}

#captcha_input
{
   width: 300px;
   height: 35px;
   padding-left: 5px;
}

.btn_reload
{
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.8em;
}

.btn_reload img
{
   width: 35px;
   border:1px solid rgb(133, 133, 133);
   padding:5px;
   margin:5px
}

@media screen and (max-width: 1700px)
{
   .header_haut
   {
      font-size: 0.6em;
   }

   .logo_slogan img
   {
      max-height: 85px;
   }

   .slogan
   {
      gap: 0px 10px;
   }

   .slogan h1
   {
      position: relative;
      letter-spacing: 0.5em;
      font-size: 3.5em;
      text-indent: 0.5em;
   }

   .slogan h2
   {
      font-size: 1em;
   }

   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;
   }
}

@media screen and (max-width: 1340px)
{
   .header_haut
   {
      font-size: 0.5em;
   }

   .slogan h2
   {
      display: none;
   }
}

@media screen and (max-width: 1200px)
{
   .contenu .savoir_plus .lien_bas
   {
      flex-direction: column;
      gap:25px
   }

   .contenu .savoir_plus .lien_bas img
   {
      width:30px;
      height: auto;
   }

   .footer_droite 
   {
      font-size: 1em;
   }

   .slogan h2
   {
      display: block;
      font-size:1.2em;
   }

   .contenu .expert_texte
   {
      display: flex;
      flex-direction:column;
   }

   .contenu .expert_texte.realisations
   {
      flex-direction:column;
   }

   .contenu .expert_texte img
   {
      align-self: center;
      width:50vw;
      margin-top:20px;
   }

   .img_realisations
   {
      gap:20px;
      flex-direction: column;
   }
}

@media screen and (max-width: 810px)
{
   .contenu h1
   {
      font-size: 1.5em;
   }
   
   .defilant img
   {
      height: 100%;
      object-fit: cover;
   }
   
   .contenu
   {
      width: 90vw;
   }
   
   .contenu_404
   {
      font-size: 2em;
   }
}

@media screen and (max-width: 605px)
{
   .contenu h1
   {
      font-size: 1.1em;
   }
   
   .contenu .savoir_plus .lien_bas
   {
      font-size: 0.75em;
      padding:0 0px 0 20px
   }

   .contenu .savoir_plus .lien_bas div
   {
      gap:25px
   }

   .contenu .savoir_plus .lien_bas img
   {
      margin:0;
   }

   .contenu .savoir_plus a
   {
      padding: 5px 20px;
      text-align: center;
   }

   .contenu .expert_texte
   {
      padding-left:10px
   }

   .contenu .expert_texte img
   {
      align-self: center;
      width:50vw;
      margin:0px;
   }
}

@media screen and (max-width: 505px)
{
   .logo_slogan
   {
      font-size: 0.65em;
      gap:0
   }

   .contenu .savoir_plus .lien_bas div
   {
      gap:10px;
      font-size: 0.85em;
   }

   .contenu_404
   {
      font-size: 1em;
   }
}

@media screen and (max-width: 350px)
{
   .logo_slogan h2
   {
      display: none;
   }
   .contenu
   {
      width: 99vw;
      padding:10px;
   }
}


@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);
    }
}