body{
  font-family:sans-serif;
  margin:0;
  line-height:1;
  background:#EEE7E5;
  
  /*#2E2E2E;*/
}

  .grid{
  display:grid; /* le fameux */
  /*grid-template-columns:2fr 3fr 3fr; /* 3 colonnes de largeur = */*/
  grid-template-colums:repeat(auto-fit, 1fr) 
  grid-template-rows:100px 250px 250px ; /* 3 rangées */
  grid-row-gap:8px; /* gouttière de rangées */
  grid-column-gap:8px; /* gouttière de colonnes */
  padding:0; 
  margin:12px;
  max-width:1920px;
 
}
  /* typographie */
  
.titre{
  grid-column:span 3;
  background: #CBC6C4;
  text-align: center;
  
}
.image1{
display: inline-block;
text-align: center;
grid-row:span 2;
background:#EEE7E5;
padding: 20px;
align-self: center;

}

.image2{
display: inline-block;
text-align: center;
grid-row:span 2;
background: #EEE7E5;
padding: 20px;

}

.fiche{
grid-row:span 1;
  background: #faee92;
  padding: 10px 10px 10px 30px;
  box-shadow: 1px 1px 2px #448022;
  border-radius: 4px;
  align-self: center;
}

.intel {
background : #0071c5;
height: 20px;
padding: 2px;
}

.amd{
background: #ED1C24;
height: 20px;
padding: 2px;
}

.mac{
background: #5CAD67;
height: 20px;
padding: 5px;
}

/*
.grid>*{
  padding:12px;
  margin:0;
  color:#fff;
  background:green;
  margin:0;
  display:block;
}
*/

.taille1{
font-size : 28px;
font-weight: 300;
color : white;

/*text-shadow: 1px 1px 5px white;*/
text-shadow: 0 0 5px black, 0 0 10px black, 0 0 20px gray;
}

.taille1mac{
font-size : 20px;
color : white;
padding: 15px 0 15px 0;
text-shadow: 0 0 10px lime, 0 0 20px lime, 0 0 30px lime;
}
.taille2 {
font-size : 16px;
font-weight: 100;
color : black;
text-shadow: 1px 1px 2px gray;

}

.taille3 {
font-size : 14px;
font-weight: 150;
color : black;
text-shadow: none;
}

img {
padding: 5px;
margin: 10px;


}

/*
img:hover {
background: white;
border: 1px solid lightgray;
border-radius: 5px;
padding: 20px;
display: block;
position: absolute;
width: 20%; height: auto;
}
*/

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align:center;
}

h2 {
color: white;
text-align: center;
text-shadow: 1px 1px 10px black;
}

.text{
font-size: 16px;
line-height: 1.5;
color: black;
text-shadow: 1px 1px 2px white;
}

a.text span.detail{
    display: none;
}
a.text:hover span.detail{
	display: block;
	position: absolute;
	text-align:center;
	background-color: white;
	}
	
.text:hover{
color: white;
text-align: center;
text-shadow: 1px 1px 10px black;
	}

li{
list-style-type: none;
}

.centrer{
text-align: center;
}

.menu{
position: fixed;
background-color: white;
z-index: 99;
height: 200px;
top: 0;
left:0;
right:0;

}

.corps{
margin-top: 200px;
}

@media only screen and (max-width:900px){

.grid {
display:grid;
grid-template-columns:1fr;
grid-row-gap: 2px;
grid-column-gap: 2px;
}

.image1, .image2{
display: block;
grid-row: span 2;
}

.titre {
grid-column: span 1;
}
.fichier{
grid-row: span 1;
}
a.text span.detail img{
    width: 50%;
	
}

} 

@media only screen and (max-width:400px){

.grid {
display:grid;
grid-template-columns:1fr;
grid-row-gap: 2px;
grid-column-gap: 2px;
justify-content: center;
}


a.text span.detail img{
    width: 100%;
}

.taille1{
font-size : 22px;
font-weight: 300;
color : white;
text-align: center;

/*text-shadow: 1px 1px 5px white;*/
text-shadow: 0 0 5px black, 0 0 10px black, 0 0 20px gray;
}

.taille1mac{
font-size : 18px;
color : white;
padding: 15px 0 15px 0;
text-shadow: 0 0 10px lime, 0 0 20px lime, 0 0 30px lime;
}
.taille2 {
font-size : 14px;
font-weight: 100;
color : black;
text-shadow: 1px 1px 2px gray;

}

.taille3 {
font-size : 14px;
font-weight: 150;
color : black;
text-shadow: none;
}

img {
padding: 2px;
margin: 5px;
border-radius: 5px;
}

.menu{
position: fixed;
background-color: white;
z-index: 99;
height: 180px;
top: 0;
left:0;
right:0;

}
.corps{
margin-top: 180px;
}
h1 {
  font-size: 52px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align:center;
}
}

@media only screen and (max-width:360px){

.menu{
position: fixed;
background-color: white;
z-index: 99;
height: 180px;
top: 0;
left:0;
right:0;

}
.corps{
margin-top: 180px;
}
h1 {
  font-size: 52px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align:center;
}

}