@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Farsan&display=swap');

:root {
    --primary-color: #e6d5bc;
    --secondary-color: rgb(209, 219, 219);
    --golden-color: rgb(138, 128, 71);
    
}



@media only screen and (max-width: 1200px) {
  
    .col-1 {width: 100% !important;}
    .col-2 {width: 100% !important;}
    .col-3 {width: 100%!important;}
    .col-4 {width: 100%!important;}
    .col-5 {width: 100%!important;}
    .col-6 {width: 100%!important;}
    .col-7 {width: 100%!important;}
    .col-8 {width: 100%!important;}
    .col-9 {width: 100%!important;}
    .col-10 {width: 100%!important;}
    .col-11 {width: 100%!important;}
    .col-12 {width: 100%!important;}

   
    
    

      .Carte_Carrousel{
      display: none;
      }
  
      .Image_Accroche{
          
        display: flex;
        text-align: left;
        align-items: center;
        height: auto;
        width: 95% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
     
      }

      figcaption{
        display: flex;
        text-align: left;
        align-items: center;
        height: auto;
        width: 95% !important;
        margin-left: -2em !important;
        margin-top: -3em !important;

      }
  
      
  
      .Clip_Audio_Carrousel{
          display: flex;
          margin-top:2px;
          width: 100% !important;
          margin-left: 0.5em !important;
          max-height: 100%;
          
          
      }

     textarea{
        width:100% !important;
     }

     button[type=submit],input[type=reset]{

        display:block;
        text-align: center;
        margin-top: -2em ;
    
    }

    .Bouton_Accueil {
        box-shadow: 0px 5px 9px 0px #1c1b18;
        background-color:#eae0c2;
        border-radius:15px;
        display:inline-block;
        align-items: center;
        cursor:pointer;
        color:#000000;
        font-size:14px;
        font-weight:bold;
        text-decoration:none;
        width: 95% !important;
        margin-left:0% !important;
        margin-right: 5% !important;
        margin-bottom: 2em;
    }


    
  
  }
  
   [class*="col-"] {
      float: left;
      padding: 1rem;
      
      
    }
  
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}




html {
    font-family: Crimson Text, Arial, sans-serif ; 
    font-variant: normal;
    font-weight: normal;
    font-size: 1em;
}

body {
    margin: 0px;
    padding: 0px;
}

.CSS3 {
    text-align: center;
    list-style: none;
    color: white;
    margin-top: -1em;
}

.CSS3:is(p) {
 text-decoration: underline;
}

/* -- Menu Navigation + Entête -- */ 

header img{
    
    display:flex;
    margin-left: auto;
    margin-right: auto;
    mix-blend-mode: multiply;
    max-width: 50vh;
    height: auto;
    align-items: center;
    
   
    

}



#Entete {
    
    position: relative;
    width: 100%;
    background: radial-gradient(circle, rgba(255,255,255,1) 2%, rgba(179,179,179,1) 46%);
    background-size: cover;
    top:0px;
    left:0px;
    right:0px;
     
    
}



.Bouton_Navigation li:nth-child(3){
  
    margin-left:7vh;

}

.Bouton_Navigation li:nth-child(1){

    
    margin-right:7vh;
    margin-left: -25px;

}

.Bouton_Navigation a{
    display: flex;
    color:var(--golden-color);
    text-decoration: none;
    text-shadow: 1px 1px black;
    
    
    
   
}

.Bouton_Navigation ul{

   display:flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   padding-top: 10px;
   padding-bottom: 10px;
   list-style: none;
   background-color: var(--secondary-color);
   border-top: 3px double black;
   border-bottom: 3px double black;
   margin-bottom: 0;
   
   
   
   

}



.Bouton_Navigation a:hover{
    text-decoration: none;
    color: white;
    transition-duration: 0.5s;
    
}



#alt-linguistique:hover {

    background-color: black;
    color: white;
    transition-duration: 1s;
    

}



#alt-linguistique {
    
    display: inline-block;
    margin-left:57%;
    margin-top: 1%;
    padding: 0.5em;
    text-decoration: none;
    border-radius: 12% 24%;
    background-color: var(--secondary-color);
    color: black;
    font-weight: bold;
    border-style: outset ;
    

}

body{
    background-image:  url(../images/background-rouge.jpg);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-blend-mode:lighten; 
}

/* -- Carroussel -- */ 
* {
    box-sizing: border-box;
  }

  .Titre_Accueil
  {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-decoration: underline;
    color: var(--primary-color);
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .Bouton_NavGauche_Carrousel, .Bouton_NavDroite_Carrousel{

    display: flex;
    margin-left: auto;
    margin-right: auto;
  }

  

  .Contenu_Carrousel1, .Contenu_Carrousel2, .Contenu_Carrousel3    
  {
    margin-top: 10vh;
    background-color: var(--secondary-color);
    margin: 5%;
    border-radius: 15px;
    max-width:100%;
    height: auto;
    content: "";
    clear: both;
    display: flex;
    

  }

  
  .Intro_Carrousel{
    content: "";
    clear: both;
    display: table;
    align-items: center;

  }

  


 

  .MiseEvidence{
    color: rgb(138, 128, 71);
    font-weight: bold;
    font-style: italic;


  }

    .Titre_Carrousel
  {
    
    text-align: center;
    color:var(--golden-color);
    text-decoration: underline;
    list-style-image: url(../images/pin.png);
    font-size: 2rem;
    width: 100%;
   
  }

  .Titre_Carrousel::after{

    content: "";
    background: url(../images/pin.png) 0 0 no-repeat;
    width: 30px;
    height: 30px;
    background-size: cover;
  }


  main{

width:100%;
}

figure{
    float: right;
    text-align: left;
    
    
    
    

}

figcaption{
    margin-left: 3em;
    margin-top:-3em;
    color: rgb(117, 117, 117);
}

.Image_Accroche{
   
    margin-top: 5em;
    max-width: 100%;
    height: auto;
    border-radius: 25px;
    overflow: hidden;
    margin-left: 5em;
    
    
    
}



.Accroche_Carrousel {


text-align: center;
font-family: "Farsan", serif;
font-size: 2rem;



   
}

.Description_Carrousel{
text-align: justify;
width: 100%;



}

.Clip_Audio_Carrousel{
    display: flex;
    margin-top:  -3em;
    max-width: 100%;
    margin-left: 5em;
    
    
}






.fa-thumbtack{
    color: rgb(153, 24, 24);
    margin-right: 1em;

}

/* Pied de page */

footer{
    width: 100%;
    content: "";
    clear: both;
    display: table;
    background: radial-gradient(circle, rgba(255,255,255,1) 2%, rgba(179,179,179,1) 46%);
    border-top: 5px double black;

}

.Logo_Simple_Bas{
    max-width: 100px;
    height:auto;
    justify-content:center ;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    display: block;

}
 

.BasGauche ul{
    display: inline-flex;
    justify-content:center ;
    align-items: center;
    list-style: none;
    width: 100%;
    font-size: 2em;
}

.BasGauche li:nth-child(1){
    
    padding-right: 2em;
}

.BasGauche li:nth-child(3){
    
    padding-left: 2em;
    margin-right: 1em;
}

.BasGauche li{

    margin-top: -1em;
}


.BasGauche a{

color: black;
text-decoration: none;
}

footer a:hover{

    color: red;
    transition: 1s;
}



img{
    max-width: 100%;
    max-height: 100%;
}

.CentreBas{
    text-align: center;

}

.CentreBas a{

    text-decoration: none;
    color: black;
}

.CentreBas a > p{

   margin-top: 0;
   margin-left: 0.2em;
}

.CentreBas a:hover{
    color:red;
    text-decoration: none;
}

.CentreBas a:visited{

    text-decoration: none;
   
}

.Copyright{
    margin-left: 1em;

}



.CorpsSuggerer{
    width: 100%;
}

.BasGauche img{

    max-width: 100px;
}

footer img{
    mix-blend-mode: multiply;
}

/* À propos */

.imagePropos{
    border-radius: 160%;
    max-width:100%;
    width:300px;
    height: auto;
    max-width: 100%;
}

.AproposContenu{
    content: "";
    clear: both;
    display: table;
    align-items: center;
    margin:5em;
}

.DescriptifProjet{

text-align: center;
margin-top:8%; 
margin-bottom: 10%;
padding: 3em;
background-color: var(--secondary-color);
border-radius: 30px ;
}



.titreApropos{

text-align: center;
color: var(--primary-color);
text-decoration: underline;
font-size: 2em;

}

/* Formulaire */

form{
    
    padding: 2em;
    background-color: var(--secondary-color);
    border-radius: 10px;
}

label{
padding:0.5%;
color: var(--golden-color);
margin-bottom: 0.5em;
display: block;
text-decoration: underline;
font-weight: bold;


}

input, select, button, textarea {
    max-width: 100%;
    width: 100%;
    padding:0.5em;
    margin-left: auto  ;
    margin-right: auto;
    
}



.IntroSuggerer{
    text-align: center;
    color: var(--primary-color);
}

input, textarea, button{
    border-radius: 2px;
    
}

input[type=text]:focus, textarea:focus, select:focus, input[type=email]:focus, button:hover, input[type=reset]:hover {
    background-color: rgb(170, 30, 30);
    color: white;
    border: 1px solid black;
    -webkit-transition: 0.5s;
    transition: 1s;
    outline: none;
  }


button[type=submit],input[type=reset]{

    display:block;
    text-align: center;
    margin-top: 3em;

}



.formulaire{
    display: table;
    content: "";
    clear: both;
    width: 90%;
    justify-content: center;
    padding-left: 5%;
    padding-right: 5%;
    padding-left: 5%;
    padding-right: 5%;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    
    

    }

.required:after {
        content:"*";
        color: red;
        font-family:'Times New Roman', Times, serif;
        
      }



/* Accueil */

.ChoixLanguage{
    display: table;
    content: "";
    clear: both;
    width:90%;
    background-color: var(--secondary-color);
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5em;
    margin-bottom: 5em;
    border-radius: 10px;

}



.ImageAccueil {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: auto;
  height: auto;
  mix-blend-mode: multiply;

}

.Boite_Choix_Language ul{
    list-style: none;
    text-align: center;
    width: 100%;

}


.TitreAcc h1{

display: block;
width: 100%;
text-align: center;
color:var(--golden-color);
text-decoration: underline;

}



.Bouton_Accueil {
	box-shadow: 0px 5px 9px 0px #1c1b18;
	background-color:#eae0c2;
	border-radius:15px;
	display:inline-block;
    align-items: center;
	cursor:pointer;
	color:#000000;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
    width: 25%;
    margin-left:15%;
    margin-bottom: 2em;
}
.Bouton_Accueil:hover {
	background-color:#ccc2a6;
}
.Bouton_Accueil:active {
	position:relative;
	top:1px;
}

.Bas_Page_Accueil{
    display: block;
    min-height: 50vh;
    text-align: center;
}

.HautPage{
    
    display: flex;
    text-align: center;
    justify-content: space-around;
    flex-wrap: wrap;
    font-size: 10vh;
    
    
}

.HautPage a {

    color: antiquewhite;
    text-decoration: none;
}

.swipper-wrapper{
    
    display: flex;
    overflow: hidden;
}