/*

@font-face {
	font-family: 'Roboto';
	font-weight: 400;
	src: url(‘/fonts/Robot-Regular.ttf’) format(‘truetype’)
}
@font-face {
	font-family: 'Roboto';
	font-weight: 700;
	src: url(‘/fonts/Roboto-Bold.woff2’) format(‘woff2’),
		url(‘/fonts/Robot-Bold.ttf’) format(‘truetype’)
}
@font-face {
	font-family: 'Roboto';
	font-style: italic;
	src: url(‘/fonts/Roboto-Italic.woff2’) format(‘woff2’),
		url(‘/fonts/Robot-Italic.ttf’) format(‘truetype’)
}
@font-face {
	font-family: 'Roboto';
	font-weight: 700;
	font-style: italic;
	src: url(‘/fonts/Roboto-Italic-Bold.woff2’) format(‘woff2’),
		url(‘/fonts/Robot-Italic-Bold.ttf’) format(‘truetype’)
}


*/
{
  margin: 0; /* ne pas enlever pour ne pas faire apparâitre des marges par défaut un peut partout */
}



body {
    /* Ici on utilise le sélecteur body pour appliquer une police et une taille par défaut pour les éléments */
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
   
     color: #33312A;
   background-color: white;
   /*margin: 0;  cette propriété permet de s'assurer que nos éléments prennent bien toute la largeur de la page */
   
}



h1 {
 font-size: 5em;
    font-style:normal;
    font-weight:800;
    text-align:center;
    margin: auto;
}

  

h2 { 
     font-weight: 300;
  font-size: 2.5em;
 
   
  
}


.h2_contact {
	color: white;
	font-weight: 300;
	margin: 0px;
}



.h2_intro {
  font-weight: 400;
  font-size: 2em;
    color:hsla(22%, 90%, 15%, 0.9);
    text-align: center;
   margin: 20px 0px 120px 50px; */
} 


.h2_telechargement {
  font-weight: 400;
  font-size: 1.8em;

    
   /* margin: 0px 0px 0px 0px; */ 
} 



nav {
	width: 100%;
    margin: 0px auto 30px auto;
   background-color: #305661;
    position:fixed;
    top: 0px;
}


p {
    font-weight: 300;
    /*color:hsla(22, 90%, 15%, 0.9);*/
  
     font-size: 1.1em;
  }
  
  
.p_contact {
	/*color: #F2B705; */
	font-weight: 300;
	margin: auto;
	color: white;
	text-align: center;
	}
	
	
.p_interface {
margin:0px 110px 40px 0px;

  }
	


.p_telechargement {
margin: 0px 60px 30px 0px;
text-align: justify;
  }



.p_description {
 font-size: 1.3em;

font-weight: 400;
margin:0px 0px 0px 0px;
 

  }
  
  
  

strong {
	font-weight: 300;
} 





.adn {
   display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
   justify-content:space-between;
	 margin:  0px 0px 0px 0px;
	 height: auto;
	    background-color: #ECE8E2;
}



.bloc_adn {
 
 margin: 60px 60px 60px 60px;
}



 .colonne_contact {
	display: flex;
  flex-direction: column; 
   align-items: center;
   font-size: 0.9em;
  /*margin:0px 20px 20px 20px;*/
 } 
 
 
 

.contact {
  background-color: #305661;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
     justify-content:space-around;
     align-items:flex-start;
     padding:  20px 0px 40px 0px;
   height:auto;
   padding:30px 0px 0px 0px;
   
}



.container_icone {
  display: flex;
  justify-content: center;
  margin:  120px 0px 0px 0px;
    flex-direction: row;
 
}



.description {
   display: flex;
  flex-direction:row;
  background-color: #F9F7F4;
 margin-left: 80px;
  
}

.descro {
 background-color: #F9F7F4;
 padding: 0px 0px 40px 0px;
 
}



.encadre_telechargement {

   background-color: white;
  /* margin:  50px 50px 50px 0px; */
  border-radius: 25px 25px 25px 25px;
  /* padding: 25px 25px 25px 25px; */
 
}





.full_img_center {
  display: flex;
   justify-content: center;
padding: 50px 0px 50px 0px;
   background-color: #F9F7F4;
    height: auto;
    }
    
    
    
 .grid_interface {
	margin:0px 0px 0px 180px;

    display: grid;
    grid-template-columns: 1fr 9fr ;
   
    gap: 0px;
}



.grid_telechargement {

	/* margin:0px 10px 10px 10px; */

    display: grid;
    grid-template-columns: 1fr 4fr;
    /*grid-template-rows: 100px 100px 200px; */
    gap: 10px;
}





.img_left {

	/*margin:50px 20px 50px 50px;*/
	  max-width: 10%;
    max-height:15%;

}




	
.responsive {
 width: 85%;
}



.menu {
    display: flex;                /* Transformation en flexbox */
    flex-wrap: wrap;
    padding:0;                    /* Suppression des marges internes */
     /*background-color: #ccc;       Ajout de la couleur d'arrière-plan */
    justify-content:flex-end;	/* Alignements des liens dans le menu */
    font-size: 1.0em;
   
    
}



.footer {
  background-color: #305661;
      padding:  1px 0px 20px 0px;
   height:auto;
}


.presentation_interface {
	  display:flex;
	  flex-wrap: wrap;
	      display: flex;
    align-items: center;
    justify-content: center;
	  flex-direction:row;

	  width: 100%;
   height: auto;
 display: inline-block;
 
    text-align:left;
  margin:  0px 0px 0px 0px;	

}




.presentation_grid {
	display: grid;
	 grid-template-columns: 1fr 1fr;
	   grid-template-rows: repeat(2, auto);
	  gap:40px;
	  justify-content: center; 
	   margin:  50px 50px 50px 80px;  	  
}






.telechargement{
     background:#F9F7F4;
    padding:  80px 80px 80px 60px;   
}



<!--  ========================================================= -->




.lien {
	 text-decoration: none;        /* Suppression du soulignement */
	transition: all 0.5s ;          /* Ajout des effets de transition */
	  color:#002b5e; 
	  font-weight: 300;  
}


.lien_contact {
	 text-decoration: none;        /* Suppression du soulignement */
	transition: all 0.5s ;          /* Ajout des effets de transition */
	 color: white;
	  font-weight: 300;  
}

.lien_telechargement {
	 text-decoration: none;        /* Suppression du soulignement */
	transition: all 0.5s ;          /* Ajout des effets de transition */
	  color:#305661; 
	  font-weight: 400;  
}



.lien:hover {
	 text-decoration: none;        /* Suppression du soulignement */
	transition: all 0.3s ;          /* Ajout des effets de transition */
	  color:#F29A05;   
}


.lien_contact:hover {
	 text-decoration: none;        /* Suppression du soulignement */
	transition: all 0.3s ;          /* Ajout des effets de transition */
	  color:#F29A05;   
}






.menu li {
    list-style-type: none ;       /* Suppression des puces */
  
}
.menu a {
    display:block;                /* Transformation en block */
    min-width: 100px;             /* Largeur minimale des liens */   
    margin: 0.2rem;               /* Marges externes */
    padding: 0.4rem 0;            /* Marges internes */
    text-align: center;           /* Centrage du texte */   
    color: #fff;                 /* Couleur du texte */
    text-decoration: none;        /* Suppression du soulignement */
    /* border: 1px solid #fff;        Ajout d'une bordure */
    /* border-radius: 4px;           Arrondis des bordures */
    
    transition: all 0.5s ;          /* Ajout des effets de transition */
  
}
/*
.menu a.actif {    
    background-color: #000 ; 
    color: #1ABC9C ;
    border-color: #1ABC9C ;
}
*/
.menu a:hover,
.menu a:hover.actif{
    /* background-color: #ed2794; */
    color:#CADD49;
    border-color: #ffe843;
}