/*home page*/

body{
  font:30px/1.1em arial, sans-serif;
background:black;

}

body {
	margin:0;
	padding:0;
	}

html {
	font-size:100%;
	}

body {
	font-size:1.8rem;
	background:black;
	}

h1 {
	font-family:"Space Mono", monospace; /* Chargement d'une Google Font */
	font-size:2.5em; /* =25px */
	}

img {
	width:100%;    /* responsive */
	height:auto;   /* Hauteur proportionnelle */
	margin:0;      /* Reset les marges par défaut */
	padding:0;     /* Reset les marges par défaut */
	line-height:0; /* Reset les marges par défaut */
	}

main {

	width:90%;
	margin-left:auto;
	margin-right:auto;
	}

ul {
	list-style-type:none;
	}

ul li {
	display:inline-block;
	margin-right:6em;
	}

section.grid {
	display:grid;
	background:#eee; /* gris */
	grid-template-columns:1fr 1fr 1fr 1fr ;
	grid-template-rows:1fr 160px ;
	grid-gap:1em;
	}



section.grid .item1 {
	grid-column-start:1;
	grid-column-end:5;
	}



section.grid .item3 {
  grid-column-start:1;
  grid-column-end:3;
  text-align: center;
  background-color: white

	}

section.grid .item4  {
grid-column-start:3;
grid-column-end:5;
text-align: center;
background-color: white
}



/*watch page*/
body {
	margin:0;
	padding:0;
	}

html {
	font-size:100%;
	}

body {
	font-size:1.8rem;
	background:black;
	}

h1 {
	font-family:"Palatino, URW Palladio L, serif"; /* Chargement d'une Google Font */
	font-size:2.5em; /* =25px */
	}
h2  {
  font-family:;
font-size:1em;

}
img {
	width:100%;    /* responsive */
	height:auto;   /* Hauteur proportionnelle */
	margin:0;      /* Reset les marges par défaut */
	padding:0;     /* Reset les marges par défaut */
	line-height:0; /* Reset les marges par défaut */
	}

main {

	width:90%;
	margin-left:auto;
	margin-right:auto;
	}

ul {
	list-style-type:none;
	}

ul li {
	display:inline-block;
	margin-right:0em;
	}

section.grid2{
	display:grid;
	background:#eee; /* gris */
	grid-template-columns:1fr 1fr  ;
	grid-template-rows:200px 300px 1fr 70px ;
	grid-gap:1em;
	}
  section.grid2 .itema {
  	grid-column-start:1;
  	grid-column-end:5;
    align-text: center;
    background-color: white
  	}



  section.grid2 .itemb {
    grid-column-start:1;
    grid-column-end:5;
    text-align: center;
    border-color: lightgrey

  	}
    section.grid2 .itemc {
      grid-column-start:1;
      grid-column-end:5;
      text-align: center;
      background-color: black

    	}
      section.grid2 .itemd {
        grid-column-start:1;
        grid-column-end:5;

        background-color: white;

        }

/*read page*/


body {
	margin:0;
	padding:0;
	}

html {
	font-size:100%;
	}

body {
	font-size:1.8rem;
	background:white;
	}

h1 {
	font-family:"Space Mono, monospace"; /* Chargement d'une Google Font */
	font-size:2.5em; /* =25px */
	}

  img {
  	width:100%;    /* responsive */
  	height:auto;   /* Hauteur proportionnelle */
  	margin:0;      /* Reset les marges par défaut */
  	padding:0;     /* Reset les marges par défaut */
  	line-height:0; /* Reset les marges par défaut */
  	}

main {

	width:90%;
	margin-left:auto;
	margin-right:auto;
  background-color: white
	}

ul {
	list-style-type:none;
	}

ul li {
	display:inline-block;
	margin-right:6em;
	}
p{font-family: "Optima, sans-serif";
  font-size: 0,2em;
  line-height: 1,8
}
  h4{font-family: "Palatino, URW Palladio L, serif";

  }
  h3 {
    font-family: "Palatino, URW Palladio L, serif";
  }




section.grid3 {
	display:grid;
	background:#eee; /* gris */
	grid-template-columns:1fr   ;
	grid-template-rows:340px  1000px 6000px  ;
	grid-gap:1em;
	}



section.grid .iteme {
	grid-column-start:2;
	grid-column-end:-3;
	}



section.grid .itemf {
  grid-column-start:3;
  grid-column-end:-2;


	}



  section.grid .itemg {
  	grid-column-start:2;
  	grid-column-end:-4;
    background-color: white
  	}













@media screen and (max-width:2560px) {
/* Jusqu’à 2560px */
    /* iMac 27" paysage = 2560px */
    body { background:#336666;}
}

@media screen and (max-width:1920px) {
/* Entre 1280px et 1920px */
    /* iMac 21.5" paysage = 1920px */
    body { background:#336666; }
}

@media screen and (max-width:1280px) {
/* Entre 1024px et 1280px */
    /* Notebook */
    body { background:#cccc99; }
}

@media screen and (max-width:1024px) {
/* Entre 768px et 1024px */
    /* iPad portrait & landscape */
    /* iPhone6+ paysage = 960px */
    body { background:#666633; }
}

@media screen and (max-width:768px) {
/* Entre 667px et 768px */
    /* iPad portrait = 768px */
    body { background:#336666; }
}

@media screen and (max-width:667px) {
/* Entre 375px et 667px */
    /* Mobiles paysage */
    /* iPhone6 paysage = 667px */
    /* iPhone 5s paysage = 568px */
    /* iPhone 4 paysage = 468 px */
    body { background:#ffcccc; }
}



@media screen and (max-width:375px) {
/* Entre 0px et 375px */
/* Mobiles portrait */
/* iPhone6+ portrait = 540px */
/* iPhone6 portrait = 375px */
/* iPhone4 & iPhone5 portrait = 320px */


























/*responsive*/


/*page watch*/