/* =====================
   RESET & GLOBAL
===================== */
body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
html{
    scroll-behavior: smooth;
}
p{
    text-align: justify;
    margin:  15px;
    font-size: 19px;

}
.img{
    width:350px;
    margin: 0 auto;

}
li{
    font-size: 20px;
}

/* =====================
   BANNER
===================== */
.banner{
     background:url(../img/banniere.jpg);
      height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  object-fit: cover;
  width: 100%;
  border-radius: 10px;
}
.banner_text{
    margin: 0;
    width: 300px;
    height: 80px;
     background-color: beige;
     font-family: Arial, Helvetica, sans-serif;
     opacity: 75%;
    display: flex;
    justify-content: center;
    align-items: center;
      position: absolute;
  top: 50%;
  left: 50%;
transform: translate(-50%, -50%);
border-radius: 30px;
}

/* =====================
   LAYOUT
===================== */
.container{
    display: flex;
gap: 10px;
}
.content{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 0 20px 0;
    background-color: lightgrey;
  border-radius: 10px 10px 0 0;
  margin: 5px 10px 20px 10px;


}

.content_title{
margin-left: 10px;
}
.btn_wrapper{
    display: none;
}
.main_title{
    margin-top: 0;
    background-color: #a90331;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    height: 50px;
    border-radius: 10px 10px 0 0;
    color: white;

   display: flex;
   justify-content: center;
   align-items: center;
      text-align: center;
    width: 100%;
    box-sizing: border-box;  
}

/* =====================
   NAVIGATION
===================== */
.nav{
    background-color: lightgrey;
    display: inline-block;
    margin: 5px 0 0 10px;
    border: 2px solid black;
    border-radius: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav_list{
display: flex;
flex-direction: column;
list-style: none ;
text-align: center;
padding: 0;
width: 200px;
}
.nav_item{
list-style: none;
}
.nav_link{
text-decoration: none;
width: 100%;
height: 50px;
font-weight: bold;
font-size: 1em;
color: rgb(0, 0, 0);
display: flex;
justify-content: center;
align-items: center;

}
.nav_link:hover {
     color: rgb(255, 255, 255); 
     cursor: pointer;
    background-color: #a90331;
}


/* =====================
   NAVIGATION FOR PHONE
===================== */
.nav_mobile{
   display: none;
    width: 100%;
}
/* =====================
LINKS IN ABOUT
===================== */

.title_links{
    text-align: center;
margin: 0 auto;
margin-bottom: 10px;
}
.links_list{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.links_list_link{
    text-decoration: none;
    color: #a90331;
}
.accueil{
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.accueil a{
      text-decoration: none;
      color: #a90331;
      font-size: 18px;
      display: inline-block;
      transition: transform 0.2s ease;
}
.accueil  a:hover {
    color: #000000;
    text-decoration: underline;
  transform: scale(1.1);
   }
   
.source{
    margin: 0 auto;
    padding-top: 10px;
}
.source a{
       text-decoration: none;
      color: #a90331;
}
.source a:hover{
       text-decoration: none;
          color: #3e12a5;
}

/* =====================
   FORM
===================== */
form{
   padding-top: 15px;
    margin: 0 auto;
min-width:  60vw;
     padding: 10px;
}
.button_form{
display: block;
margin: 0 auto;
padding: 8px;
border-radius: 20px;
font-size: 20px;
height: 50px;
}

input[type="text"]{
    width: 100%;
    padding: 5px;
    height: 30px;
    box-sizing: border-box;
   

}
input[type="text"]:focus{
      outline: none;
}
.label_cover{
display: flex;
margin-bottom: 10px;
}
label{
  float: left;
  width: 30%;
  margin-top: 6px;
  font-size: 20px;
}
textarea{
    width: 100%;
    height: 80px;
    box-sizing: border-box;
}
textarea:focus{
  outline: none;
}


/* =====================
    GALLERY
===================== */
.gallery{
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    width: 100%;
}
.gallery > div{
    flex: 0 0 calc(33.33% - 10px);
    min-width: 0; 
}
.gallery img{
    width: 100%;
    display: block;
    

}
.example-image{
    padding: 3px;
    border: 2px solid black;
    box-sizing: border-box; 
    width: 100%; 
    object-fit: cover;
   height: 399px;
}
.example-image:hover{
   transform:scale(0.98);
}
.gallery_title{
text-align: center;
font-weight: bold;
}



/* =====================
    CULTURE
===================== */
.go__up__link{
    display: block;
    margin-left: auto;
    padding: 5px 13px;
           border: 1px solid black;
    background-color:  #a90331;
    color: white;
    border-radius: 50px;
}
.go__up__link:hover{
    background-color:  #518129;
        color: rgb(0, 0, 0);
        border: 1px solid black;
}
/* =====================
    LINKS
===================== */

.links_wrapp{
display: flex;
justify-content: space-between;
max-width: 600px;
margin: 0 auto;
gap:10px;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}


.links {
  display: flex;
  flex-wrap: wrap;
}

.links a {
  width: calc(33.33% - 8px);
  padding: 10px;
  box-sizing: border-box;
  text-decoration: none;
color: #a90331;
font-size: 20px;
transition: transform 0.2s ease;
}

.links a:hover {
  color: #000000;
    text-decoration: underline;
  transform: scale(1.1);
}


@media screen and (max-width:1023px) and (min-width:639px){
   .container{
    display: flex;
    flex-direction: column;
gap: 10px; 
box-sizing: border-box;
padding: 5px 10px 20px 10px; 
}
.content{
    margin: 0;          
    box-sizing: border-box;
    width: 100%;
  
}

.navigation{
     position: sticky;
    top: 0;
    z-index: 100;
}
.nav{
    
    background-color: lightgrey;
    display: flex;
    margin-top: 5px;
    border: 2px solid black;
    border-radius: 10px;
  
  
}

.nav_list{
    background-color: lightgrey;
display: flex;
flex-direction: row;
width: 100vh;
align-items: center;
justify-content: space-around;
margin: 0 auto;



}
.nav_link{
text-decoration: none;
display:block;
width: 100%;
height: 50px;
font-weight: bold;
font-size: 1em;
color: rgb(0, 0, 0);
display: flex;
justify-content: center;
align-items: center;
padding: 0 5px;

}
.nav_link:hover {
     color: rgb(255, 255, 255); 
     cursor: pointer;
    background-color: #a90331;

}

.gallery > div{
    flex: 0 0 calc(50% - 10px);
}
form{
   padding-top: 15px;
    margin: 0 auto;
  min-width:  40vw;
   
}
.img{
    width: 250px;
}

}
@media screen and (max-width:639px){
    .container{
    gap: 0;
    padding: 5px 10px 20px 10px; 
    }
 .img{
        width: 150px;
    }
.btn{
    display: flex;
    background-color: #a90331;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
}
.menu_text{
    color: #a90331;
    font-weight: bold;
}
.nav{
    display: none;
}
.main_title{
    width: 100%;
    padding: 5px;
}
.btn_wrapper{
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-bottom: 10px;

 
}
.wrapper_nav_mobile{
position: sticky;
    top: 0;
    z-index: 100;
    background-color: lightgrey;
}
.nav{
   display: none;
}
.nav_mobile{
   display: none;
    width: 100%;
}
.nav_mobile.open{
    display: inline-block;
    width: 100%;
    background-color: lightgrey;
}
.nav_mobile_list{
    display: flex;
    flex-direction: column;
list-style: none ;
text-align: center;
padding: 0;

}
.nav_mobile_link{
text-decoration: none;
display: inline-block;
width: 100%;
height: 50px;
font-weight: bold;
font-size: 1em;
color: rgb(0, 0, 0);
display: flex;
align-items: center;
justify-content: center
}
.nav_mobile_link:hover {
     color: rgb(255, 255, 255); 
     cursor: pointer;
      background-color: #a90331;
}
.gallery > div{
    flex: 0 0 calc(100% - 10px);
}
.img{
    width: 150px;
}
.label_cover{
display: block;
margin-bottom: 10px;
}
form{
   padding-top: 15px;
   margin: 0 auto;
   max-width:  20vw;
   
   
}
label{
    margin-bottom: 5px;
}

}