@import url("/css/libs/menu.css");
@import url("/css/libs/autocomplete.css");
@import url("/css/libs/contact.css");
@import url("/css/libs/form.css");
@import url("/css/libs/frise_histoire.css");
@import url("/css/libs/patrimoine.css");
@import url("/css/libs/carrousel.css");
@import url("/css/libs/carte.css");
@import url("/css/libs/histoire.css");
@import url("/css/libs/documents_utiles.css");


@import url('https://fonts.googleapis.com/css2?family=Fondamento&family=Kanit&family=Meddon&display=swap');

:root
{
   --main : rgba(192,26,54,1); /*#a11111; /*#c20f2f;*/ 
   --main_sombre : rgb(133, 19, 38);
   --bleu_fonce : rgba(32,85,160,1);
   --bleu_clair : rgba(82,128,143,1);
   --jaune : rgba(183,149,11,1);
   --vert : rgba(110,139,59,1);
   --vert_fonce : rgba(40,106,96,1);
   --secondaire : #dadada8a;
   --footer : #1a1a1a;
   --backgroundNoirTransparent : #1a1a1abe;
   --titre_secondaire : #757575be;
}

*
{
   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: 'Kanit', sans-serif;
   background-color: #FFF;
   position: relative;
}

header
{
   display : flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   color: white;
   z-index: 10000;
   transition: 0.25s ease-in-out;
   top:0;
   position: fixed;
   width: 100%;
   height:150px;
}

.sticky
{
   position: sticky;
   top:0px;
}

.mouse_scroll
{
   display: flex;
   align-items: center;
   justify-content: center;
   position: fixed;
   bottom:5vh;
   right:5vw;
   gap:0 20px;
   z-index: 10000000;
   padding:5px 20px;
   background-color: var(--main);
   cursor: pointer;
   animation: defiler ease-in-out 3s forwards infinite;
}

.mouse_scroll img
{
   position: absolute;
   filter: invert();
   height: 50px;
   right: -50px;
}


@keyframes defiler 
{
   0%,100%
   {
      bottom:5vh;
   }
   50%
   {
      bottom:3vh;
   }
}

.mouse_scroll .texte_defilement
{
   font-size: 1.5em;
   color: white;
}

.header_haut
{
   display: flex;
   position: sticky;
   top:20px;
   align-items: center;
   justify-content: space-between;
   font-size: 1em;
   width: 100%;
   height: 150px;
   padding: 0px 2vw;
   /*background-color: var(--main);*/
   background: var(--main);
  /* background: linear-gradient(90deg, rgba(189,21,21,1) 0%, rgba(105,11,11,1) 100%);*/
   background: linear-gradient(90deg, var(--main) 0%, rgb(0, 0, 0) 70%);
   z-index:1;
   box-shadow: 0px 0px 5px 2px rgb(65, 65, 65);
}

.img_vitraux
{
   position: absolute;
   /* height: 100%; */
   /* transform: translateX(50%); */
   display: flex;
   align-items: center;
   justify-content: center;
   width: 1503px;
   height:150px;
   object-fit: cover;
   transition: 0.25s ease-in-out;
}

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;*/
   opacity: 1;
   transform: translateX(0px);
   font-family: 'Fondamento', cursive;
}

.logo_slogan img
{
   max-height: 125px;
   padding: 3px 0px;
   transition: 0.25s ease-in-out;
}

.slogan
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-transform: uppercase;
   text-align: center;
   gap: 0px 40px;
   font-size: 1.5em;
   font-family: 'Fondamento', cursive;
}

.premiere_lettre
{
   font-family: 'Meddon', cursive;
}

.lieu_logo
{
   font-size: .6em;
}

.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;
   color: white;
   letter-spacing: 0.2em;
   line-height: 0.95em;
   opacity: 1;
   transform: translateX(0px);
}

.main
{
   position: relative;
   display : flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   background-color: white;
   position: relative;
   background-image: url("/img/general/grille.png");
}

.contenu
{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   width: 100%;
   min-height: 100vh;
}

.partie_1 .titre_partie
{
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--backgroundNoirTransparent);
   width: fit-content;
   text-transform: uppercase;
   font-family: 'Kanit', sans-serif;
   align-self: flex-start;
   letter-spacing: 0.1em;
   color: white;
   position: relative;
   transform: translateY(225px);
   z-index: 5;
   gap:0 20px;
   padding: 10px 25px 10px 6vw
}

.partie_2 .titre_partie
{
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--backgroundNoirTransparent);
   width: fit-content;
   z-index: 1;
   margin: 2vh 0vw 2vh 0vw;
   text-transform: uppercase;
   font-family: 'Kanit', sans-serif;
   align-self: flex-start;
   letter-spacing: 0.1em;
   color: white;
   gap: 0 20px;
   padding: 10px 25px 10px 7vw;
}

.titre_partie img
{
   width: 45px;
   height: 45px;
}

.hr_partie
{
   height: 4px;
   margin: 0 0 -1px -1px;
   padding: 0px;
   overflow: hidden;
   width: 100%;
   background-color: #000;
}

.partie_1,
.partie_2,
.partie_3
{
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   flex-direction: column;
   width: 100%;
   position: relative;
}

.partie_1
{
   min-height: 550px;
}

.partie_2
{
   height: 100vh;
   min-height: 850px;
}

.partie_1 .fond img,
.partie_2 .fond img
{
   position: absolute;
   height: 100vh;
   min-height: 850px;
   width:100%;
   top:0;
   left:0;
   object-fit: cover;
}

.partie_1 .cadre_info
{
   background-color: var(--backgroundNoirTransparent);
   margin: 25px 16vw 0 7vw;
   width: fit-content;
   position: relative;
   z-index: 1;
}

.partie_1 .intro_texte,
.partie_2 .intro_texte
{
   
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
   flex-direction: column;
   width:35vw;
   color: white;
   font-size: 1.2em;
   text-align: justify;
   padding:25px;
}

.partie_1 .cadre_info
{
   position: absolute;
   top:304px;
}

.partie_2 .intro_texte
{
   align-items: center;
}

.btn
{
   width:fit-content;
   margin:15px 0; 
   height:50px;
   color:black;
   background-color: var(--main);
   padding:5px 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   color:white;
   cursor:pointer;
   transition: 0.5s;
   font-size: 1em;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   font-weight: bold;
   text-align: center;
}

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

.btn img
{
   width:25px;
   height: auto;
}

.btn_main
{
   display: flex;
   gap : 0 20px;
}

.btn_infoRando
{
   text-decoration: none;
}

.btn_seSituer
{
   display: flex;
   align-items: center;
   justify-content: center;
}

.btn_seSituer:hover img,
.btn_infoRando:hover img
{
   filter:invert()
}

.btn_seSituer img,
.btn_infoRando img
{
   margin-right: 10px;
   width: 30px;
}

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

footer
{
   position: relative;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   width:100%;
   padding: 50px 10%;
   background-color: var(--main);
   color:white;
   text-transform: uppercase;
   z-index:2;
   box-shadow: -2px -2px 6px 0px #292929;
}

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

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

.footer_centre, .footer_droite
{
   align-self: flex-start;
}

.footer_droite
{
   line-height: 2.5em;
   font-size: 1em;
   padding:0 20px;
}

.footer_droite a 
{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0 5px;
}

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

.footer_droite img
{
   width: 30px;
}

.footer_droite span
{
   font-size: 1.5em;
   font-weight: bold;
}

.footer_gauche
{
   font-family: 'Fondamento', cursive;
   display: flex;
   justify-content: center;
   align-items: center;
}

.footer_centre
{
   /*line-height: 3em;*/
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   font-size: 1.5em;
   font-family: 'Fondamento', cursive;
}

.livre_marcheur
{
   margin-top: 20px;
   max-width: 15vw;
}

.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(--main);
}

.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(--main);
}

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

.carteZoom
{
   display: none;
   justify-content: center;
   align-items: center;
   position: fixed;
   z-index: 1000000000;
   top:0;
   left:0;
   width: 100vw;
   height: 100vh;
}

.carteZoom.active
{
   display: flex;
}

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

.contenu.association
{
   width:70vw;
   font-size: 1.5em;
   margin-bottom: 200px;
   text-align: justify;
}

.contenu.association .titre_asso
{
   margin:200px 0 50px 0;
   font-size: 2em;
   background-color: #292929;
   padding: 0 50px;
   color: white;
}

.contenu.association span
{
   font-weight: bold;
   display: contents;
}

.img_presentation
{
   margin-top: 50px;
   width: 50vw;
   max-width: 80vw;
}

#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: 100%;
   }

   .lien_top
   {
      display:none;
   }
}
@media screen and (max-width: 1490px)
{
   .btn_main
   {
      font-size: 0.85em;
   }
}

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

   .footer_droite 
   {
      font-size: 1em;
   }

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

   .titre_partie h1
   {
      font-size: 1em;
   }

   .partie_1 .intro_texte,
   .partie_2 .intro_texte
   {
      padding:10px;
      font-size: 0.85em;
      width: initial;
  }

  .mouse_scroll img
  {
     position: absolute;
     filter: invert();
     height: 40px;
     left: -30px;
  }
  
}

@media screen and (max-width: 950px),
      screen and (max-height: 450px) 
{
   header,
   .img_vitraux
   {
      height: 90px;
   }
}

@media screen and (max-width: 810px)
{
   .contenu h1
   {
      font-size: 0.75em;
   }
   
   .contenu_404
   {
      font-size: 2em;
   }

   
   .contenu.association
   {
      font-size: 1em;
      width: 85vw;
   }

   .contenu.association .titre_asso
   {
      font-size: 1em;
   }
}

@media screen and (max-width: 605px)
{
   .btn 
   {
      align-self: center;
   }
}

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

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

   .contenu_404
   {
      font-size: 1em;
   }
   
   .partie_2 .titre_partie
   {
      margin: 10px 0;
   }

   .mouse_scroll .texte_defilement
   {
      font-size: 1em;
   }

   .mouse_scroll img
   {
      height: 25px;
   }

   .contenu.association .titre_asso
   {
      font-size: 1em;
      text-align: center;
   }

}

@media screen and (max-width: 350px)
{
   .logo_slogan h2
   {
      /*display: none;*/
   }
}


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