hmtl{
  font-size: 62.5%;
}
main{
  background: #ededed;
}
ul{
  list-style-type: none;
  padding-left: 1rem;
  padding-right: 1rem;
  color: #2F574D;
}
body{
  font-family: 'Rozha One', serif;
  background: #ededed;
}
/*Grille*/
div.grid{
  grid-template-columns: 1fr 76%;
  grid-template-rows: 1fr;
  display:grid;
  grid-gap:1rem;
}
/*titre*/
div.block1 {
  background: :lightgrey;
  text-align: center;
  grid-row: 1/2;
  grid-column: 2/3;
  margin-top: 0rem;
  height:6rem;
  line-height: 6rem;
  white-space: normal;
  white-space: nowrap;
}
div.block1 h1{
  font-family: 'Rozha One', serif;
  color:#2F574D;
  text-align: center;
  text-transform: uppercase;
  text-transform: full-width;
  font-size: 7rem;
  margin-top: 0rem;
}
div.Sommaire {
  grid-row: 2/3;
  grid-column: 1/3;
  position: fixed;
  top:0rem;
  left:2.2rem;
}

div.Sommaire h2 {
  font-family: 'Rozha One', serif;
  text-transform: none;
  width: auto;
  text-align: center;
  color: #EFFBFF;
  font-size: 1.9rem;
}
div.sommairecolonne1{
  font-family: 'Rozha One', monospace;
  background: white;
  position: fixed;
  text-align: center;
  top:5rem;
  left:1.4rem;
  background: #6B979C;
}
div.sommairecolonne2{
  font-family: 'Rozha One', monospace;
  background: white;
  position: fixed;
  text-align: center;
  top:5rem;
  left:7.68rem;
  background: #6B979C;
}
div.sommairecolonne3{
  font-family: 'Rozha One', monospace;
  background:white;
  position: fixed;
  text-align: center;
  top:5rem;
  left:14.96rem;
  background: #6B979C;
}
div.blocksommaire{

  grid-row: 1/9;
  grid-column: 1/2;
  background: #4C767A;
  height: 100%;

}

div.Biographie{
  grid-row: 2/3;
  grid-column: 2/3;
  text-align: center;
  text-align: justify;
  padding-left: 8rem;
  padding-right: 8rem;
  font-family: 'Playfair Display', serif;
}
blockquote{
  font-size: 2rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  margin:auto;
  margin-bottom: 2rem;
  border: solid 0.01rem #E8AFA0;
  width: 70%;
}
div.Biographie img{
  width:30%;
  padding-left: 17rem;
  padding-right: 8rem;
  margin-bottom: 2rem;
}
div.Résumé{
  grid-row: 3/4;
  background: #E8AFA0;
  width: 50%;
  margin:auto;
  grid-column: 2/3;
  padding-left: 5rem;
  padding-right: 5rem;
  text-align: center;
  text-align: justify;
  font-family: 'Playfair Display', serif;
  padding-bottom: 1.5rem;
}
div.Résumé h3{
  text-align: right;
  color:#EFFBFF;
  text-transform: uppercase;
  font-weight: 800;
  font-family: 'Rozha One',monospace;
  font-size: 2rem;
}
div.texte {
  font-family: 'Playfair Display',serif;
  text-align: justify;
  grid-row: 2/7;
  grid-column: 2/3;
  width: auto;
  background: #E8AFA0;
  padding-left: 4rem;
  padding-right: 4rem;
}
div.texte img{
  position: absolute;
  width:15%;
  padding-left: 16rem;
  margin-top: -20rem;
}

div.texte h4{
  font-family: 'Rozha One', monospace;
  font-size: 10rem;
  font-weight: 800;
  text-align: left;
  padding-left: 10rem;
  height: 0rem;
  line-height: 1rem;
}
div.retour{
  grid-row: 7/8;
  grid-column: 2/3;
  padding-right: 3rem;
  text-align: right;
  font-family: 'Playfair Display',serif;
  font-size: 5rem:
  height:100%;
  line-height: 1rem;
}
div.BlockFooter{
  grid-row: 8/9;
  grid-column: 2/3;
  text-align: center;
  padding-right:3rem;
}
span {
  font-family: 'Rozha One',monospace;
  font-weight: 700;
  font-size: 3rem;
}
div.BlockFooter a:hover{
  color:#2F574D;
}
div.BlockFooter a:visited{
  color:#E8AFA0;
}
a{
  text-decoration: none;
  color:#EFFBFF;
}
a:hover{
  color:#E8AFA0;
}
a:visited{
  color:#E8AFA0;
}
@media screen and (max-width:1500px){
  div.tabledesmatieres{display: none;}
  div.tabledesmatierescolonne1{display: none;}
  div.tabledesmatierescolonne2{display:none;}
  div.tabledesmatierescolonne3{display:none;}
}
@media screen and (max-width:667px){
  div.Sommaire {display: none;}
div.sommairecolonne1{display: none;}
div.sommairecolonne2{display: none;}
div.sommairecolonne3{display: none;}
div.tabledesmatieres{display: grid;}
div.tabledesmatierescolonne1{display: grid;}
div.tabledesmatierescolonne2{display:grid;}
div.tabledesmatierescolonne3{display:grid;}
div.blocksommaire{
grid-row: 8/9;
grid-column: 100%;}
div.block1{
  grid-row: 1/2;
  grid-column: 100%;
}
div.BlockFooter{
  grid-row: 9/10;
  grid-column: 100%;
}
}}