body{
                background: none repeat scroll 0 0 #fff;
            /*	background-image: url("../img/pecours-droite.jpg");*/
                /*color: #561010;*/
            /*    color:<?php echo $mycolor?>; */
              
                font-family: Roboto;
                font-weight: 300;
               
           }
           
           .content { /*conteneur général fixant la largeur de la page et les marges auto pour centrer*/
            max-width: 960px;
            margin: auto;
            }
.grid_header{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 0.2fr 0.5fr;
  gap: 1px 1px;
  grid-template-areas: "header_logo header_slogan header_slogan header_photo" "header_logo header_line header_line header_line" "header_logo header_menu header_menu header_menu";
  background: none repeat scroll 0 0  #fff;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
  font-family: 'Oswald', sans-serif;
/*font-style:oblique;*/
    border: 2px solid #E2E2E2;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
}


.header_slogan {
  grid-area: header_slogan;
  font-family: 'Architects Daughter', cursive;
  font-size:200%;
  text-align: center;
  margin: auto;
}

.header_photo {
  grid-area: header_photo;
  background-color:none;
  text-align:right;
  border:none;
  padding:10px;
}

.header_line {
  grid-area: header_line;
  grid-column: 2/5;
  grid-row: 2;
  height:2px;
  border-bottom:1px solid #561010;
  
  
 }

.header_menu { grid-area: header_menu;
margin:10px;
}

.header_logo {
    grid-area: header_logo;
    padding-top:2px;
    padding-left:2px;
}

.grid-slogan {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "slogan slogan slogan slogan";
  padding-top:15px;
  padding-bottom:15px;
}

.slogan { grid-area: slogan;

	font-size:0.8em;
	text-align: center;
	font-style:italic;
	letter-spacing:0.1em;

}



.header_logo img{
    max-height:160px;
    max-width:auto;
}

.header_photo img{
    max-height:160px;
    max-width:auto;
    border: 2px solid #E2E2E2;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;          
}

 @media only screen and (max-width: 1024px) and (-ms-high-contrast:none){
  .grid_header {
    display: -ms-grid;
    -ms-grid-columns: repeat(4, 1fr);
    -ms-grid-rows: repeat(3, 1fr);
  }

  .header_slogan {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
  }

  .header_photo {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }

  .header_line {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 3;
  }

  .header_menu {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 3;
  }

  .header_logo {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  
   .grid-slogan {
    display: -ms-grid;
    -ms-grid-columns: repeat(4, 1fr);
    -ms-grid-rows: 1fr;
  }

  .slogan {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 4;
  }

}