html{
    /* height:100%; */
    margin:0;
    padding:0;
    background-color: rgb(100, 100, 100);
}
body{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    height:100%;
    margin:0;
    padding:0;
    width:100%;
    max-width:640px;
    margin:0 auto;
    font-family: sans-serif;
    font-weight:100;
}
section{
    /* min-height:10%; */
    width:100%;
    /* padding-bottom:10%; */
    /* max-height:33.3333333%; */
}
section.intro{
    background-image: linear-gradient(to bottom, black 0, black 200px, rgb(38, 37, 37) 100%);
    /* background-color: rgb(0, 0, 0); */
    /* flex-grow: 1; */
    color:rgb(138, 137, 137);
}
section.music{
    background-image: linear-gradient(to right, rgb(88, 10, 10) 0, rgb(88, 10, 10) 20%, rgb(148, 70, 70) 100%);
    /* background-color: rgb(88, 10, 10); */
}
section.book{
    background-image: linear-gradient(to right, rgb(40, 40, 40) 0, rgb(40, 40, 40) 20%, rgb(60, 60, 60) 100%);
    /* background-color: rgb(40, 40, 40); */
    display: flex;
    flex-direction: column;
}
section.voir{
    background-image: linear-gradient(to right, rgb(88, 10, 10) 0, rgb(88, 10, 10) 20%, rgb(148, 70, 70) 100%);
    /* background-color: rgb(88, 10, 10); */
}
section.fin{
    padding:0;
    height:100px;;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    font-size:120%;
    color:rgb(188, 187, 187);
    background-image: linear-gradient(to bottom, rgb(88, 10, 10) 0, rgb(88, 10, 10) 20%, rgb(148, 70, 70) 100%);
}
p, h1{
    margin:5%;
}
h2{
    margin:2% 5%;
}
p{
    color:rgb(138, 137, 137);
}
h1{
    /* color:rgb(188, 187, 187); */
    color: red;
    font-size:150%;
    font-weight: 100;
}
h2{
    color:rgb(168, 167, 167);
    font-size:110%;
    font-weight: 100;
}
.img{
    /* max-width:30%; */
    max-height:200px;
    /* height:fit-content; */
    float:right;
    margin-left: 5%;
    margin-right: 5%;
    /* margin-bottom:10%; */
}
section.intro img{
    margin:5%;
    border-radius: 50%;
}
.rezos{
    display: flex;
    flex-direction: row;
    margin-left:5%;
}

.rezos a{
    display:block;
    margin-right:3%;
}

.rezos img{
    width:30px;
}

@media screen and (max-width: 320px) {
    iframe{
        width:90%;
        margin:2% 5%;
        border-radius:20px;
    }
    iframe.video{
        width:90%;
        margin:2% 5%;
        border-radius:20px;
    }
}
@media screen and (min-width: 321px) {
    iframe{
        width:90%;
        height:150px;
        margin:2% 5%;
        border-radius:20px;
    }
    iframe.video{
        width:576px;
        height:380px;
        margin:2% 5%;
        border-radius:20px;
    }
}

section.book img{
    margin-right:5%;
}
a{
    color:rgb(138, 137, 137);
}
li{
    color:red;
}
section.book .item{
    border-top:thin solid rgb(83, 81, 81);
    margin:2% 0;
}   
section.music .item{
    border-top:thin solid rgb(128, 50, 50);
    margin:5% 0;
    position:relative;
    overflow: hidden;
}

section.voir .item{
    border-top:thin solid rgb(128, 50, 50);
    margin:5% 0;
}
section.voir img{
    max-width: 90%;
    margin:5%;
}
 
.title{
    color:rgb(138, 137, 137);
}
li{
    margin:2% 0;
}

/* Le ruban */
.ribbon {
  width: 150px;
  height: 30px;
  background: #e74c3c;
  color: white;
  text-align: center;
  line-height: 30px;
  position: absolute;
  top: 15px;     /* marge du bord */
  right: -40px;  /* pour le placer correctement */
  transform: rotate(45deg);
  z-index: 10;   /* toujours au premier plan */
  font-weight: bold;
  font-family: sans-serif;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.ribbon span {
  display: block;
}