.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media screen and (min-width: 800px) {
  nav{
    background-color: rgb(124, 12, 12);
    margin: 0px;
    padding: 0px;
    text-align: center;
  }
  
  nav2{
    background-color: rgb(124, 12, 12);
    margin: 0px;
    padding: 0px;
    /*text-align: center;*/
  }

  button.Retour{
    text-align: left;
    font-size: 20px;
    margin: 10px;
    background-color: rgb(64, 25, 25);
  }
  
  footer{
    background-color: rgb(124, 12, 12);
    color: white;
    text-align: center;
    padding: 10px 0;
    position: relative;
    width: 100%;
    bottom: 0;
  }
  
  .Résumer, .apropos, .realisateur{
    font-size: 20px;;
  }
  
  h1{
    margin: 0px;
    font-size: 50px;
    text-align: center;
    /*font-family: 'Tektur', sans-serif;*/
  }
  
  h2{
    font-size: 35px;
  }
  
  h3{
    font-size: 25px;
  }
  
  .nom__acheter{
    font-size: 40px;
  }
  .intro{
    font-size: 25px;
    margin-left: 150px;
    margin-right: 150px;
  }
  
  body{
    margin: 0px;
    padding: 0px;
    background-color: #8a5a45;
    flex-direction: column;
    height: 100%;
    display: flex;
    /*font-family: 'Tektur', sans-serif;*/
    width: 100%;
  }
  
  .content {
    flex: 1;
    padding: 20px;
  }
  
  .grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 150px);
    gap: 2%;
    margin-bottom: 50px;
    margin-top: 20px;
  }
  
  .bouton{
    grid-column: 4 / 6;
    grid-row: 3;
    /*font-family: 'Tektur', sans-serif;*/
  }
  
  .infos{
    grid-column: 4 / 6;
    grid-row: 2;
    margin: 0%;
    padding: 0%;
    /*font-family: 'Tektur', sans-serif;*/
    color: white;
    font-size: 20px;
  }
  
  .infos2{
    grid-column: 4 / 6;
    grid-row: 3;
    margin: 0%;
    padding: 0%;
    /*font-family: 'Tektur', sans-serif;*/
    color: white;
    font-size: 20px;
  }
  
  .panier__acheter{
    grid-column: 4 / 5;
    grid-row: 2 ;
    font-size: 30px;
    text-align: left;
    margin: 0%;
  }
  
  .titre{
    grid-column: 4;
    grid-row: 1;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-right: 0%;
    margin-left: 0%;
    /*font-family: 'Tektur', sans-serif;*/
    color: white;
    font-size: 30px;
  }
  
  .bouton__acheter, .bouton__télécharger{
    /*font-family: 'Tektur', sans-serif;*/
    width: 150px;
    height: 75px;
    background-color: #a52a2a;
  }
  
  P, h2, h3{
    /*font-family: 'Tektur', sans-serif;*/
    color: white;
    /*margin-left: 30px;*/
    margin-right: 30px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 30px;
  }
  
  .grid2{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 150px);
    gap: 2%;
    margin-bottom: 100px;
    margin-top: 20px;
  }
  
  .panier__{
    width: 450px;
    grid-column: 2 / 4;
    grid-row: 2 / 5;
  }
  
  .danspanier{
    font-size: 60px;
    text-align: center;
    grid-column: 2 / 6;
    grid-row: 1 / 2 ;
  }
  
  .image__film{
    width: 300px;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }
  
  .image__réalisateur{
    width: 300px;
  }
  
  .apropos{
    display: block;
    text-align: center;
  }
  
  .intro{
    display: block;
    text-align: center;
   /* margin: 10px;*/
  }
  
  .realisateur{
    display: inline-block;
    text-align: center;
  }
  
  .Résumer{
    text-align: left;
    padding: 0%;
    float: left;
    margin-left: 100px;
    width: 1000px;
  }
  
  .apropos{
    text-align: right;
    padding: 0%;
    float: right;
    width: 900px;
    margin-right: 100px;
  }
  
  .bandeannonce{
    width: 1000px;
    text-align: center;
    margin-left: 100px;
    padding-top: 15px;
  }
  
  p.Résumer{
    padding: 0%;
    width: 800px;
    margin-left: 30px;
  }
  
  .form{
    color: white;
    text-align: center;
    font-size: 25px;
    padding-left: 350px;
    padding-right: 350px;
    background-color: #583729;
  }
  
  .submit{
    width: 250px;
    height: 30px;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: brown;
  }
  
  .label__prenom,.label__nom, .label__email, .label__tel,
  .label__rue, .label__code, .label__pays, .label__numéro, 
  .label__date, .label__chiffre{
    display: inline;
    width: 150px;
  }
  
  .form__prénom, .form__nom, .form__email, .form__tel, 
  .form__rue, .form__code, .form__pays, .form__numéro, 
  .form__date, .form__chiffre {
    margin-bottom: 10px;
  }
  
  input{
    height: 15px;
    width: auto;
  }
  
  .merci{
    text-align: center;
    font-size: 20px;
    margin-left: 200px;
    margin-right: 200px;
  }
  
  .merci__image{
    width: 500px;
    margin: 10px;
  }

  .merci__poster{
    width: 500px;
  }
  
  .reading-progress {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #a52a2a;
    height: 5px;
  }
  
  .reading-progress__bar {
    width: 0%;
    background-color: white;
    height: 5px;
  }
  
  a {
    color: rgb(255, 255, 255);
    font-size: 20px;
  }
  
  li{
    font-size: 25px;
  }
  
  .panier__titre{
    font-size: 30px;
  }
  
}





@media screen and (max-width : 800px){
  nav{
    background-color: rgb(124, 12, 12);
    margin: 0px;
    padding: 0px;
    text-align: center;
  }
  
  nav2{
    background-color: rgb(124, 12, 12);
    margin: 0px;
    padding: 0px;
    /*text-align: center;*/
  }
  
  button.Retour{
    text-align: left;
    font-size: 15px;
    margin: 10px;
    background-color: rgb(64, 25, 25);
  }
  
  footer{
    background-color: rgb(124, 12, 12);
    color: white;
    text-align: center;
    padding: 10px 0;
    position: relative;
    width: 100%;
    bottom: 0;
  }
  
  .Résumer, .apropos, .realisateur{
    font-size: 15px;;
  }
  
  h1{
    margin: 0px;
    font-size: 30px;
    text-align: center;
    /*font-family: 'Tektur', sans-serif;*/
  }
  
  h2{
    font-size: 25px;
  }
  
  h3{
    font-size: 15px;
  }
  
  .nom__acheter{
    font-size: 20px;
    width: 147px;
    text-align: left;
    float: left;
  }

  .intro{
    font-size: 25px;
    margin: 0%;
  }
  
  body{
    margin: 0px;
    padding: 0px;
    background-color: #8a5a45;
    flex-direction: column;
    height: 100%;
    display: flex;
    /*font-family: 'Tektur', sans-serif;*/
    width: 100%;
  }
  
  .content {
    flex: 1;
    padding: 20px;
  }
  
  .grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 150px);
    gap: 2%;
    margin-bottom: 50px;
    margin-top: 20px;
  }
  
  .bouton{
    grid-column: 4 / 6;
    grid-row: 3;
    /*font-family: 'Tektur', sans-serif;*/
  }
  
  .infos{
    grid-column: 4 / 6;
    grid-row: 2;
    margin: 0%;
    padding: 0%;
    /*font-family: 'Tektur', sans-serif;*/
    color: white;
    font-size: 20px;
  }
  
  .infos2{
    grid-column: 4 / 6;
    grid-row: 3;
    margin: 0%;
    padding: 0%;
    /*font-family: 'Tektur', sans-serif;*/
    color: white;
    font-size: 20px;
  }
  
  .panier__acheter{
    grid-column: 4 / 5;
    grid-row: 2 ;
    font-size: 15px;
    text-align: left;
    margin: 0%;
  }
  
  .titre{
    grid-column: 4;
    grid-row: 1;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-right: 0%;
    margin-left: 0%;
    /*font-family: 'Tektur', sans-serif;*/
    color: white;
    font-size: 30px;
  }
  
  .bouton__acheter, .bouton__télécharger{
    /*font-family: 'Tektur', sans-serif;*/
    width: 100px;
    height: 75px;
    background-color: #a52a2a;
  }
  
  P, h2, h3{
    /*font-family: 'Tektur', sans-serif;*/
    color: white;
    /*margin-left: 30px;*/
    margin-right: 30px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 30px;
  }
  
  .grid2{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 150px);
    gap: 2%;
    margin-bottom: 100px;
    margin-top: 20px;
  }
  
  .panier__{
    width: 250px;
    grid-column: 2 / 4;
    grid-row: 2 / 5;
  }
  
  .danspanier{
    font-size: 40px;
    text-align: center;
    grid-column: 2 / 6;
    grid-row: 1 / 2 ;
  }
  
  .image__film{
    width: 250px;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }
  
  .image__réalisateur{
    width: 300px;
  }
  
  .apropos{
    display: block;
    text-align: center;
  }
  
  .intro{
    display: block;
    text-align: center;
    margin: 10px;
  }
  
  .realisateur{
    display: inline-block;
    text-align: center;
  }
  
  .Résumer{
    text-align: left;
    padding: 0%;
    float: left;
    margin-left: 100px;
    width: 1000px;
  }
  
  .apropos{
    text-align: right;
    padding: 0%;
    float: right;
    width: 500px;
    margin-right: 100px;
  }
  
  .bandeannonce{
    width: 350px;
    text-align: center;
    margin-left: 30px;
    padding-top: 15px;
  }
  
  p.Résumer{
    padding: 0%;
    width: 500px;
    margin-left: 30px;
  }
  
  .form{
    color: white;
    text-align: center;
    font-size: 15px;
    padding-left: 350px;
    padding-right: 350px;
    background-color: #583729;
  }
  
  .submit{
    width: 250px;
    height: 30px;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: brown;
  }
  
  .label__prenom,.label__nom, .label__email, .label__tel,
  .label__rue, .label__code, .label__pays, .label__numéro, 
  .label__date, .label__chiffre{
    display: inline;
    width: 100px;
  }
  
  .form__prénom, .form__nom, .form__email, .form__tel, 
  .form__rue, .form__code, .form__pays, .form__numéro, 
  .form__date, .form__chiffre {
    margin-bottom: 10px;
  }
  
  input{
    height:15px;
    width: auto;
    text-align: center;
  }
  
  .merci{
    text-align: center;
    font-size: 20px;
    margin-left: 150px;
    margin-right: 150px;
  }
  
  .merci__image{
    width: 300px;
    margin: 10px;
  }

  .merci__poster{
    width: 300px;
  }
  
  .reading-progress {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #a52a2a;
    height: 5px;
  }
  
  .reading-progress__bar {
    width: 0%;
    background-color: white;
    height: 5px;
  }
  
  a {
    color: rgb(255, 255, 255);
    font-size: 15px;
  }
  
  li{
    font-size: 15px;
  }
  
  .panier__titre{
    font-size: 30px;
  }
}