@charset "UTF-8"

 /*font-family: 'Roboto', sans-serif;*/
 /*font-weight: 300, 400, 700*/
 /* Rouge : #9e182f */
 /* Rouge survol : #871528*/
 /* Jaune : #ffae35 */
 /* Jaune survol : #e28700*/
 /* Vert : #3eb2a4*/
 /* Bleu : #6a7cc0*/



 /* STYLE GENERAL
-------------------------------------------------- */
 html {
     scroll-behavior: smooth;
 }

 body {
     margin: 0;
     font-family: 'Roboto', sans-serif;
     background-color: #f5f5f5;
 }

 hr {
     width: 10%;
     height: 2px;
     margin-bottom: 40px;
     background-color: #9e182f;
 }

 ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }


 a:focus,
 a:active {
     text-decoration: none;
 }

 a {
     color: #e28700;
     text-decoration: none;
 }

 a:hover {
     color: #ffae35;
     text-decoration:underline;
 }


 h2 {
     font-size: 30px;
     margin-top: 30px;
     font-weight: 300;
 }

 h3 {
     font-size: 22px;
     margin-top: 30px;
 }

 h4 {
     font-size: 18px;
 }

 p {
     text-align: justify;
	}

 .title-medium {
     font-weight: 400;
 }

 .title-bold {
     font-weight: 700;
 }

 .container {
     width: 800px;
     padding-right: 50px;
     padding-left: 50px;
 }

 .logo {
     display: block;
     margin: 0 auto;
     padding: 0 0 20px 0;
     text-align: center;
 }
 
 .logo2 {
 	 display: block;
 	 margin-left: auto;
     margin-right: auto }
 }
 
 .lien-gris {
	color: #666666;
	text-decoration: none;
}

a:hover.lien-gris {
	color: #666666;
	text-decoration:underline;
}

a:link.lien-gris {
	color: #666666;
}
a:visited.lien-gris {
	color: #666666;
}



 /* HEADER
-------------------------------------------------- */

.header {
    background-color: #fff;
    padding: 40px 0 30px;
    margin-bottom: 5px;
}

.header img {
    padding: 0;
}

 /* ARTICLE
-------------------------------------------------- */

.titre,hr,h2  {
     text-align: center;
}

 .article {
     text-align: left;
     background-color: #fff;
     padding-top: 30px;
     padding-bottom: 30px;
 }

 .image-article {
     display: block;
     padding: 20px 0;
     margin: 0 auto;
     max-width: 100%;
     height: auto;
     text-align: center;
 }
 
 .image-article2 {
     display: block;
     margin: 0 auto;
     max-width: 100%;
     height: auto;
     text-align: center;
 }

 .source {
     padding: 20px 0;
     font-size: 12px;
     font-style: italic;
 }


 /*
  * HIERARCHIE TYPOGRAPHIQUE DU NOUVEAU MODELE
  * H2 : titre principal
  * H3 : sections principales
  * H4 : sous-sections
  *
  * Les règles sont limitées à .article pour ne pas modifier
  * les titres des autres zones du gabarit.
  */
 .article h2 {
     font-size: 30px;
     font-weight: 300;
     margin-top: 30px;
 }

 .article h3 {
     font-size: 18px;
     font-weight: 400;
     margin-top: 24px;
     margin-bottom: 8px;
     text-align: left;
 }

 .article h4 {
     font-size: 17px;
     font-weight: 400;
     margin-top: 18px;
     margin-bottom: 7px;
     text-align: left;
 }

 .article p {
     line-height: 1.5;
 }

 /* LIENS PROS
-------------------------------------------------- */

 .liens-pro {
     text-align: left;
     background-color: #ececec;
     padding-top: 30px;
     padding-bottom: 60px;
 }

 .liens-pro h3 {
     margin: 25px 0 30px;
 }

 .liens-pro h4 {
     margin: 20px 0 15px;
 }

 .liens-pro p {
     margin: 2px 0 0;
     text-align: left;
 }

 /* FOOTER
-------------------------------------------------- */

 .footer {
     padding-top: 50px;
     padding-bottom: 60px;
     background-image: url('../img/footer-img.jpg');
     background-position: center;
     background-repeat: repeat, no-repeat;
     background-size: cover;
     color: #fff;
     font-size: 14px;
 }

 .footer p {
     text-align: center;
     font-size: 14px;
 }

.footer a {
     color: #ffae35;
 }

.footer a:hover {
     color: #e28700 ;
 }



 /* MEDIA QUERIES
-------------------------------------------------- */
 @media only screen and (max-width : 575px) {
     .container {
         width: 470px;
     }
        
	 
 }
 
@media only screen and (max-width : 800px) {
	    img:not(.logo2){
	 	width: 100%;
	 	height: auto;
	 }
	 
}