<style type="text/css">


  /* ---------------------------- */  
  /*  LES POLICES                 */
  /* ---------------------------- */





  @font-face 
  {
  
  font-family: "Montserrat";
  src: url("../Polices/Montserrat-Light.otf");

  font-family: "marckscript";
  src: url("../Polices/MarckScript-Regular.ttf");

  font-family: "tiza";
  src: url("../Polices/tiza.ttf");

  font-family: "number";
  src: url("../Polices/edodz.ttf");

  }





  /* ---------------------------- */  
  /*  GENERALE                    */
  /* ---------------------------- */





  html, body
  {
    margin:0;
    padding:0;
    height:100%;
    /*background-image:url(images/Undetourenfrance/fond.jpg);*/
    background-repeat: repeat;
    transform : scale(1, 1);
        /*background-color: white;*/
  }

  p
  {
    text-align: justify;
    font-family: 'calibri';
    color: #636559;
    margin: 0.5em;
  }

  a
  {
    text-decoration: none;
    color: black;
    color: #636559;
  }

  a:hover
  {
    opacity: 0.8;
  }

  img
  {
    opacity: none;
  }

   b
  {
    color: #4871b5;
  }

  #MEP_PAGE
  {
    width: 80%;
    margin: auto;
  }
  
   #MEP_PAGE:after
  {

    clear: both;
    display: block;
    content: "";
  }



  

/* ---------------------------- */  
/*  HOME                        */
/* ---------------------------- */





#lien_ici
  {
    width: 45%; 
    font-size: 1.5EM; 
    border: solid 2px black; 
    text-align: center; 
    margin: 0 0 1em 0; 
    color: #bb3333; 
    padding: 0 0.5em 0 0.5em;
  }

  .titre_participez
  {
    text-align: center; 
    font-family: 'Fredericka the Great', cursive;
    color: #bb3333;
  }

  #formulaire_participation
  {
    font-family: Montserrat; 
    padding: 1em 2em 1em 2em; 
    margin-right: auto; 
    margin-left: auto;
  }

#Map_Home
  {
    background-image: url(../images/drap.jpg);
    background-size: cover;
    backface-visibility: 10%;
    /*background-color: #fefefe;*/
    border: solid 1px #e8e9ea;
    width: 75%; 
    align-items: center;
    justify-content: center;
    display: flex;
    justify-content: space-around;
  }

#Participez
  {
    width: 40%;  
    text-align: center; 
    display: flex;
    justify-content: flex-end;
    margin-left: 1em;
  }

 #Image_Participez
  {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: rotate(-7deg);
    background-color: white; 
    opacity: 0.9; 
    border-radius: 5px; 
    border: solid 1px grey;
  }

#map_et_aside 
{
  display: flex;
  justify-content: space-between;
}

#Map_et_Form
  {
    width: 51.6%; 
    display: block; 
    text-align: center;
  }

.Champ_Form_Participer
  {
    width: 80%;
  }





/* ---------------------------- */  
/*  ASIDE                       */
/* ---------------------------- */





#Aside
  {
    width: 22%;
  }





/* ---------------------------- */  
/*  NOTRE PROJET                */
/* ---------------------------- */





  .titre_projet
  {
    width: 50%; 
    text-align: center; 
    margin: auto;
    color: #bb3333;
    font-family: 'Fredericka the Great', cursive; 
    font-size: 20px;
  }

  .cadre_image_flottante
  {
    display: flex;
    flex-direction: column; 
    width: 20%; 
    float: left; 
    margin: 1em;
  }

  .imagesflotantesGauche
  {
    border-radius: 5px 5px 0 0; 
    width: 100%;
  }




  /* ---------------------------- */  
  /*  SELECTION                   */
  /* ---------------------------- */




.vignette
    {
      width: 23.5%;
      height: 450px;
      float: left;
      box-sizing: border-box;
      text-align: center; ; 
      margin-right: 2%;
      background-color: #fefefe; 
      border: solid 1px #e8e9ea;
      margin-bottom: 30px;
    }
    .vignette:nth-child(4n){

      margin-right: 0;

    }

    .Titre_vignette
    { 
      height: 2.5em;
      margin: 0.5em;
      font-size: 20px;
    }

    .image_vignette
    {
      display: block; 
      width: 95%; 
      margin-left: auto; 
      margin-right: auto; 
      margin-top: 1em; 
      margin-bottom: 0.5em;
    }
    .image_vignette img{

      width: 100%

    }
    .Etape
    {
      border: solid; 
      padding: 0.2em; 
      font-family: 'Amatic SC', cursive;
      font-size: 25px;
      width: 40%; 
      margin: auto; 
      background-color: #4CAF50; 
      color: white; 
      text-align: center;
    }

    .Resume_vignette
    {
      margin: 1em 0.5em 0.5em 0.5em;
    }





  /* ---------------------------- */  
  /*  ARTICLES                    */
  /* ---------------------------- */





  #MEP_ARTICLE
  {
    width: 75%;  
    float: left; 
    box-sizing: border-box;
  }

  .fond_texte
  {
     
    background-color: white; 
    opacity: 0.9;
  }

  .article
  {
    padding: 0 1em 0 1em;
  }

  .article a
  {
    text-decoration: none;
    color: #4871b5;
    font-weight: bold;
  }

 .div_cadre
  {
    background-color: #fefefe; 
    border: solid 1px #e8e9ea;
    width: 100%;
  }

  .video
  {
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
    height: 315px;
  }

  .imgarticleH
  {
    width: 70%;
  }
      
  .imgarticleV
  {
    width: 40%;
  }



  

  /* ---------------------------- */  
  /*  LES TITRES                  */
  /* ---------------------------- */





  h1
  {
    font-family: 'Lato', sans-serif; 
    color: #636559;
    text-transform: uppercase;
    font-size: 25px;
  }

  h2
  {
    font-family: 'Lato', sans-serif; 
    color: #636559;
    margin-top: 0;
    font-size: 15px;
    text-transform: uppercase;
  }

  h3
  {
   font-family: 'Lato', sans-serif; 
   font-size: 1em;
   text-transform: uppercase;
   color: #636559;
  }

  h4, time
  { 
    font-family: 'Lato', sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    color: grey;
    margin: 0.2em;
    color: #636559;
    text-transform: uppercase;
  }

  .hr_haut
  {
    width: 40%; 
    margin-top: 3em;
  }

  .hr_bas
  {
    width: 40%; 
    margin-bottom: 3em;
  }





  /* ---------------------------- */  
  /*  MENU                        */
  /* ---------------------------- */





    #Barre_Menu_Reseaux_Sociaux
    { 
      width: 100%; 
      display: flex; 
      align-items: center; 
      justify-content: center;
      padding-top: 0.2em; 
      padding-bottom: 0.2em;  
    }

    #Lien_HSF_Top
    {
      width: 80%;
    }

    #Cadre_Reseaux_Sociaux
    {
      width: 12%; 
      height: 100%; 
      margin: 0; 
      display: flex; 
      align-items: center; 
      justify-content: space-around; 
      margin-right: 2em;
    }

    .Lien_Reseaux_Sociaux

   {
      max-width: 15%;
      margin-top: 0; 
      margin-bottom: 0;
      opacity: 0.7;
    }

    #Cadre_Reseaux_Sociaux a:hover
    {
      opacity: 1;
    }

    .Icone_Reseaux_Sociaux
    {
      width:100%;
    }

  #Cadre_LOGO_udef
  {
    width: 80%; 
    background-image: url('../images/fondlogo.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    margin:  0em auto 1em auto; 
    padding: 0;
  }

  #LOGO_udef
  {
    width: 35%; 
    margin: auto; 
    display: block;
  }

  /* Add a black background color to the top navigation */
  .topnav 
  {
      background-color: #4d4d4f;
      overflow: hidden;
      font-family: 'Lato', sans-serif;
      margin-bottom: 3em;
      margin: 1em auto 3em auto;
      width: 80%;
  }



  /* Style the links inside the navigation bar */
  .topnav a 
  {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 8px 16px;
      text-decoration: none;
      font-size: 12.9px;
  }


  /* Change the color of links on hover */
  .topnav a:hover 
  {
      background-color: #ddd;
      color: black; 
  }



  /* Add a color to the active/current link */
  .topnav a.active 
  {
      background-color: #4CAF50;
      color: white;
  }

 .topnav .icon 
  {
  display: none;
  }

@media screen and (max-width: 660px) {
  .topnav a:not(.active) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 660px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}





/* ---------------------------- */  
/*  PIED DE PAGE                */
/* ---------------------------- */

#Groupe_partie_pdp
{
    width: 100%;
    margin: 2em auto 0 auto; 
    display: flex; 
    justify-content: space-between;
}

.Section_pdp
{
  width: 33%; 
  text-align: center; 
  display: flex; 
  flex-direction: column;
}

.HR_pdp
{
  display: none;
}

.logo_partenaires
    {
      width: 20%;
      margin: 0 1em 0 1em;
    }

#PDP_LIENS_SOCIAUX
{
  width: 50%;
  display: flex; 
  justify-content: space-around; 
  margin: 1em auto 1em auto;"
}

.lien_RS
{
width: 20%;
}

.logo_Soutien
{
  width: 30%;
}





/* ---------------------------- */  
/*   MEDIA QUERRIES             */
/* ---------------------------- */





@media screen and (max-width: 1200px) and (orientation : landscape)
{

  /* ---------------------------- */  
  /*  HOME MQ                     */
  /* ---------------------------- */
 

  #Map_Home
  { 
    background-size: contain;
  }

  #Participez
  {
    width: 40%;
    margin: 1em 0 2em 0;
    justify-content: center; 
  }

   #Map_et_Form
   {
    margin: 0;
   }

  #Image_Participez
  {
    width: 100%;
    margin-top: 1em;
  }
}

@media screen and (max-width: 1024px) and (orientation : landscape)
{

  /* ---------------------------- */  
  /*  GENERAL MQ                  */
  /* ---------------------------- */

  #MEP_PAGE
    {
      flex-direction: column;
      width: 95%;
    } 

  /* ---------------------------- */  
  /*  HOME MQ                     */
  /* ---------------------------- */


  #Map_Home
  {
    flex-direction: column;
    background-size: contain;
  }

  #Participez
  {
    width: 70%;
  }



  #Map_et_Form
   {
    width: 70%;
    margin: 0;
   }

  /* ---------------------------- */  
  /*  MENU MQ                     */
  /* ---------------------------- */

  #Lien_HSF_Top
   {
      width: 95%;
   }

  #Cadre_LOGO_udef
   {
    width: 95%; 
   }

  .topnav
   {
    width: 95%;
   }

  /* ---------------------------- */  
  /*  SELECTION MQ                */
  /* ---------------------------- */




.vignette
    {
      width: 31.5%;
    }
    .vignette:nth-child(3){

      margin-right: 0;

    }

 }

@media screen and (max-width: 1200px) and (orientation : portrait)
{

  /* ---------------------------- */  
  /*  GENERAL MQ                  */
  /* ---------------------------- */

  #MEP_PAGE
    {
      flex-direction: column;
      width: 95%;
    }

  /* ---------------------------- */  
  /*  HOME MQ                     */
  /* ---------------------------- */

  #Map_Home
  {
    flex-direction: column;
    width: 65%;
    background-size: contain;
  }

  #Participez
  {
    width: 90%;
    margin: 1em 0 2em 0; 
    justify-content: center;
  }
  #Image_Participez
  {
    width: 60%;
    margin-top: 1em;
  }

  /* ---------------------------- */  
  /*  ASIDE MQ                    */
  /* ---------------------------- */

}

@media screen and (max-width: 1024px) and (orientation : portrait)
{

  /* ---------------------------- */  
  /*  HOME MQ                     */
  /* ---------------------------- */

  #map_et_aside 
  {
    flex-direction: column;
    justify-content: space-between;
  }

  
  #Map_Home
  {
    flex-direction: column;
    width: 100%;
  }

  #Participez
  {
    width: 55%;
  }
  #Image_Participez
  {
    width: 100%;
    margin-top: 1em;
  }

  /* ---------------------------- */  
  /*  ASIDE MQ                    */
  /* ---------------------------- */

  #Aside
  {
    width: 100%;
    margin-top: 2em;
  }

  /* ---------------------------- */  
  /*  MENU MQ                     */
  /* ---------------------------- */

  #Lien_HSF_Top
   {
      width: 95%;
   }

  #Cadre_LOGO_udef
   {
    width: 95%; 
   }

  .topnav
   {
    width: 95%;
   }

  /* ---------------------------- */  
  /*  SELECTION MQ                */
  /* ---------------------------- */

.vignette
    {
      width: 31.5%;
    }
    .vignette:nth-child(3){

      margin-right: 0;

    }


 } 

@media screen and (max-width: 800px) and (orientation : landscape)
{

  /* ---------------------------- */  
  /*  HOME MQ                     */
  /* ---------------------------- */

  #Map_Home
  {
    flex-direction: column;
    width: 100%;
  }

  #Image_Participez
  {
    width: 85%;
    margin-top: 1em;
  }

  /* ---------------------------- */  
  /*  ASIDE MQ                    */
  /* ---------------------------- */

  #map_et_aside
  {
    flex-direction: column;
  }

  #Aside
  {
    width: 100%;
    margin-top: 2em;
  }

  /* ---------------------------- */  
  /*  PROJET MQ                   */
  /* ---------------------------- */


  .titre_projet
  {
    width: 80%;
  }

}

@media screen and (max-width: 800px) and (orientation : portrait)
{

  /* ---------------------------- */  
  /*  HOME MQ                     */
  /* ---------------------------- */

  #Map_et_Form
  {
    width: 95%; 
  }

  .Champ_Form_Participer
  {
    width: 95%;
  }

  /* ---------------------------- */  
  /*  ARTICLES MQ                 */
  /* ---------------------------- */

  #MEP_ARTICLE
  {
    width: 100%;  
  }

/* ---------------------------- */  
/*  ASIDE                       */
/* ---------------------------- */

#Aside
  {
    display: none;
  }

/* ---------------------------- */  
/*  PIED DE PAGE MQ             */
/* ---------------------------- */

#Groupe_partie_pdp
  {
    flex-direction: column; 
    align-items: center; 
  }
  .Section_pdp
  {
    width: 100%;
    margin-bottom: 2em;
  }
  .HR_pdp
  {
    display: initial;
    width: 50%; 
    margin-bottom: 2em;
  }

  .logo_partenaires
  {
    width: 15%;
  }



.logo_Soutien
{
  width: 20%;
}

  /* ---------------------------- */  
  /*  PROJET MQ                   */
  /* ---------------------------- */


  .titre_projet
  {
    width: 90%;
  }

}

@media screen and (max-width: 660px) and (orientation : portrait)
  {
    #MEP_PAGE
    {
      width: 95%;
    }
    .div_cadre
    {
      padding: 0;
    }

    #Participez 
    {
      width: 75%;
    }

  /* ---------------------------- */  
  /*  SELECTION MQ                */
  /* ---------------------------- */


.vignette
    {
      width: 100%;
      margin-top: 0.5em;
    }
    .vignette:nth-child(1){

      margin-right: 0;

    }

  #PDP_LIENS_SOCIAUX
{
  width: 100%;
  justify-content: center;
}

.lien_RS
{
width: 15%;
margin: 0.5em;
}

  .logo_partenaires
  {
    width: 20%;
  }


  }











    

    textarea
    {
      height: 200px;
      margin: auto;
    }

    

    #partager
    {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      margin-top: 1em;
      margin-bottom: 1em;
      display: flex;
      align-items: center;
    }

    #formulaire_ajout_commentaire
    {
      text-align: center;
      width: 100%;
      margin-top: 4em;
    }

    .champ_ajout_comm
    {
      width: 50%;
      margin: 0.5em;
    }

    #Repondre_commentaire
    {
      text-align: center;
      width: 100%;
      margin-top: 4em;
    }

    .champ_reponse_comm1
    {
      margin: 0.5em;
      width: 90%;
    }

    .champ_reponse_comm2
    {
      width: 80%;
    }

    .champ_reponse_comm3
    {
      width: 20%;
    }







</style>
