@font-face {
    font-family: 'Sarabun';
    src: url('assets/fonts/Sarabun_Regular.ttf');
}

@font-face{
    font-family: 'Sarabun_LightItalic';
    src: url('assets/fonts/Sarabun-LightItalic.ttf');
}

@font-face{
    font-family: 'Sarabun_Blod';
    src: url('assets/fonts/Sarabun_Bold.ttf');
}

@font-face {
        font-family: 'Staaliches';
        src: url('assets/fonts/Staatliches_Regular.ttf');
    }
@font-face{
    font-family: 'Truculenta';
    src: url('assets/fonts/Truculenta-Bold.ttf');
}
@font-face{
    font-family: 'HankenGrotesk_Regular';
    src: url('assets/fonts/HankenGrotesk-Regular.ttf');
}
@font-face{
    font-family: 'HankenGrotesk_Blod';
    src: url('assets/fonts/HankenGrotesk-Bold.ttf');
}
/* page carriere */

body{
    font-family:'Sarabun', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
    background-color: #235CB1;
    margin: 0%;
}

/*titre*/

.title{
    font-family: 'Staaliches', sans-serif;
    font-size: 50px;
    /*margin: haut droite bas gauche*/
    line-height: 1.1;
    margin-bottom: 0;
}

.title--big{
    font-size: 105px;
    text-align: center;
    margin-bottom: -72px;
    margin-top: 23px;
    margin-left: -5%;
}

.Carriere .title--side{
    
    font-size: 72px;

    transform: rotate(-90deg);
    transform-origin: left top;
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block;

    position: relative;
    left: -24px;
    top: 220px;
}
.Carriere .title--litle{
    text-align: center;
    margin-top: -10%;
}



.title--paragraphe{
    font-family: 'Sarabun_Blod', sans-serif;
    font-size: 23px;
    margin-bottom: 34px;
    margin-top: 50px;

}
/*section*/

.section{
        
     padding-bottom: 72px;
}
.section > *:last-child{
    margin-bottom: 0;
}
.section > *:first-child{
    margin-top: 0;
}


.Carriere .box--red{
    background-color: #A84D4A;
    box-sizing: border-box;
    border: 32px solid  #A84D4A;
    margin-top:0 ;
    margin-bottom: 0;
}

.Carriere .section--sketches .box--red{
    border-bottom: 100px solid #A84D4A;
    width: calc(100% + 64px);
    position: relative;
    left: -32px;
    padding-bottom: 40%;
}

/*image*/

img{ 
    width: 50px;
}

.image--amerique{
    width: 100%;
}
.Carriere .image--mont{

    width: calc(100% + 64px);
    position: relative;
    left: -32px;
    top: -90%;

}
.image--musique{
    width: 100%;
}
.image--misteV{
    width: 311px;
    position: relative;
    left: -32px;
}

/*grid*/

.Carriere .grid{
    display: grid;
    grid-template-columns: 38px 108px 1fr;
    column-gap: 24px;
    padding-left: 32px;
    padding-right: 32px;
}

.Carriere .grid > *{
    grid-column: 1 / -1;
}
.Carriere .mgrid-start2{
    grid-column-start: 2;
}

.Carriere .mgrid-end1{
    grid-column-end: -3;
}


/*footer*/


.logo{
    width: 50px;
    display:  inline-block;
    position: relative;
    overflow: hidden;
    
  
}

.logo_content{
    text-indent: 120%;
    white-space: nowrap;
    position: absolute;
}

.footerMedia{
    display: flex;
   flex-direction: row;
}

a{
    text-decoration: none;
    color: #FFFFFF;

}

a:hover,
a:focus{
    font-family: 'Sarabun_Blod';
}

.section--footer{
    display: block;
    width: 100%;
    padding: 0px;

 
    margin-top: 23px;
  
}

ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-family:'Sarabun', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #FFFFFF;
}

.section--footer{
    background-color: #4B1614;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 32px solid #4B1614;
}

.copy{
    opacity: .5;
}
.copy small{ font-size: 11px;}

/*navigation*/

.star{
    padding: 5px;
    width: 50px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    
}
.active{
    transform: scale(1.5);
}


.star_content{
    text-indent: 110%;
    white-space: nowrap;
    position: absolute;
}

.Navpage{
   display: flex;
   flex-direction: row;
   margin: 23px;
   justify-content: center; 
   align-items: center;
}





/*bandeau*/


.messagedefilant {
    padding-top: 8px;
    padding-bottom: 8px;
    display: block;

    width: calc(100% + 62px);
    position: relative;
    left: -32px;

    font-family: 'Staaliches', sans-serif;
    font-size: 16px;
    color: #FFFFFF;
    background-color: #A84D4A;
    height: 24px; /* Hauteur de la banderole */
    overflow: hidden;

  }
  
  .messagedefilant div {
    
    position: absolute;
    white-space: nowrap; /*  Empêche les retours à la ligne */
    display: flex; /* Permet un défilement fluide avec flexbox */
    animation: defilement var(--Vitesse, 10s) linear infinite;
    
  }
  
  
  
  @keyframes defilement {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }


/*page polemique*/

body.Polemique{
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #4B1614;
    background-color: #E6E6E0;
    margin: 0%;
}

/*grid*/
.Polemique .grid{
    display: grid;
    grid-template-columns: 1fr 108px  38px;
    column-gap: 24px;
    padding-left: 32px;
    padding-right: 32px;
}

.Polemique .grid > *{
    grid-column: 1 / -1;
}




/*image*/

.Polemique .section--header::after{
    content: "";
    width: calc(100% + 64px);
    height: 476px;
    background-image: url(assets/image/KFC_MisterV@2x.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    top: 0;
    left: -32px;
    grid-column: 1 / -1;
    

}



.Polemique img{
    width: 100%;
}


.image--big{
    
    width: calc(100% + 62px);
    position: relative;
    left: -32px;
    top: -100px;
    margin-top: 34px;


}

.Polemique .section--Malbouffe > *{
    
    color: #4B1614;
    opacity: 1;
}

.Polemique .section--Malbouffe::before{
    content: "";
    width: 100%;
    height: 1000px;
    background-image: url(assets/image/pizza_delamama@2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 0;
    top: 160%;
    opacity: 0.25;

}

.Polemique .KFC{
    box-sizing: border-box;
    border-top: 23px solid #D81F34;
    margin-top: 72px;
}


/*titre*/

.Polemique .title{
    font-family: 'Truculenta', sans-serif;
    font-size: 32px;
    /*margin: haut droite bas gauche*/
    line-height: 1.1;
    margin-top: 50px;
}

.Polemique .title--big{
    font-size: 50px;
    text-align: left;
    margin-bottom: 50px;
    margin-top: 23px;
}



.Polemique .title--paragraphe{
    font-family: 'HankenGrotesk_Blod', sans-serif;
    font-size: 23px;
    margin-bottom: 34px;
    margin-top: 50px;

}
.Polemique h1{
    color: #D81F34;
}
/*section*/
.Polemique .NoMargin{
    margin-top: -72px;
}

.ligne_carre{
   
    width: calc(100% + 64px);
    display: block;
    position: relative;
    top: 0;
    left: -32px;
    margin-bottom: 23px;
}


/*footer*/

.Polemique .section--footer{
    background-color: #D81F34;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 32px solid #D81F34;
}





/*biographie*/

body.Biographie{
    content: "";
    width: 100%;
    height: 200px;
    background-image: url(assets/image/motif_background@2x.jpg);
    background-repeat: repeat;
    background-size: cover;
}

/*image*/

.Biographie .image--small{ 
    width: 105px;
    padding-top: 34px;
    padding-bottom: 34px;
}

.Biographie .image--moyenne{
    width: 224px;
    padding-bottom: 34px;
}
.Biographie .image--big{
    display: block;
    width: calc(100% + 64px);
    position: relative;
    left: -32px;
    top: 0;
    margin-top: 34px;
    margin-bottom: 34px;
}

.image--voiture{

    width: 200%;
    position: relative;
    left: -105px;
    bottom: -120px;

}
/*paragraphe*/
.par{
    font-family: 'Staaliches',sans-serif;
}
.par--big{
    font-size: 50px;
}

.par--moyenne{
    font-size: 34px;
}
.par--small{
    font-size: 23px;
}
.section--film ul{
    margin-top: 0;
    margin-bottom: 72px;
}
/*titre*/
.Biographie .section--film .title--section{
    margin-top: 50px;
}

/*grid*/
.Biographie .grid{
    display: grid;
    grid-template-columns: 72px 105px 1fr;
    column-gap: 24px;
    padding-left: 32px;
    padding-right: 32px;
}

.Biographie .grid > *{
    grid-column: 1 / -1;
}



.Biographie .mgrid-start2{
    grid-column-start: 2;
}

.Biographie .mgrid-end1{
    grid-column-end: -3;
}


.Biographie .fond--musique{
    background-color: #A84D4A;
    box-sizing: border-box;
    border: 32px solid #A84D4A;
    margin-top: 50px;
}

/*section*/
.Biographie .section--film{
    margin-top: 50px;
}

.Biographie .section--film > *:first-child{
    margin-top: 0px;
}
/*carousel*/

.Biographie .carousel-container {
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
    display: block;
}
   
.Biographie .carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.Biographie .carousel-item {
    position: relative;
    min-width: 224px;
    height: 476px;
    margin: 0 10px;
    
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition: transform 0.3s;
}
.Biographie .carousel-item img {
    width: 224px;
    border-radius: 200px;
    box-sizing: border-box;
    border: 23px solid #A84D4A;
    
}

.Biographie .carousel-item:hover {
    transform: scale(0.9);
}



/* carousel carier*/



.Carriere .carte--container {
    position: relative;
    width: 100%;
 
    display: block;
}
   
.Carriere .carte {
    display: flex;
    flex-direction: column;
    
}

.Carriere .carte--item {
    position: relative;
    min-width: 327px;
    padding: 10px;
    margin-right: 32px;
    margin-bottom: 32px;
    text-align: left;
    cursor: pointer;
    background-color: #A84D4A;
}

.Carriere .carte--item img {
    width: 224px;
    border-radius: 200px;
    margin: 51px;

}
.Carriere .carte--item:hover {
    transform: scale(0.9);
}



/*tablette*/

@media (min-width: 734px){

    /* page carriere */

body{
    font-size: 20px;
}

/*titre*/

.title{
    font-size: 132px;
}

.title--big{
    font-size: 192px;
    text-align: center;
    margin-bottom: -20%;

}

.Carriere .title--side{
    
    font-size: 132px;
    transform: none;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    position: relative;
    left: 0%;
    top: 0%;
}
.Carriere .title--litle{
    
    margin-top: -50%;
    font-size: 90px;
}

.title--paragraphe{
    font-size: 43px;
    margin-bottom: 43px;
    margin-top: 43px;

}

/*section*/

.section{
        
     padding-bottom: 132px;
}
.section > *:last-child{
    margin-bottom: 0;
}
.section > *:first-child{
    margin-top: 0;
}


.Carriere .box--red{
  
    box-sizing: border-box;
    border: 29px solid  #A84D4A;

}

.Carriere .section--sketches .box--red{
    border-bottom: 100px solid #A84D4A;
    width: calc(100% + 166px);
    position: relative;
    left: -83px;
    margin-top: 62px;
    padding-bottom: 20%;
}

/*image*/




.Carriere .image--mont{

    width: calc(100% + 166px);
    position: relative;
    left: -83px;
    top: -50%;

}
.image--musique{
    width: 100%;
}
.image--misteV{
    width: 330px;
    position: relative;
    left: -83px;
    top: -100%;
}

/*grid*/

.Carriere .grid{
    display: grid;
    grid-template-columns: 238px 90px 1fr;
    column-gap: 30px;
    padding-left: 83px;
    padding-right: 83px;
}

.Carriere .grid > *{
    grid-column: 1 / -1;
}
.Carriere .tgrid-start1{
    grid-column-start: 1;
}
.Carriere .tgrid-start2{
    grid-column-start: 2;
}

.Carriere .tgrid-end1{
    grid-column-end: -3;
}


/*footer*/


.logo{
    width: 90px;

}

.logo_content{
    text-indent: 210%;
    white-space: nowrap;
    position: absolute;
}



ul{

    font-size: 20px;
    flex-direction: row;
}

.section--footer{
    background-color: #4B1614;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 83px solid #4B1614;
}


/*navigation*/

.star{
    padding: 5px;
    width: 50px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    
}
.active{
    transform: scale(1.5);
}


.star_content{
    text-indent: 110%;
    white-space: nowrap;
    position: absolute;
}

.Navpage{
   display: flex;
   flex-direction: row;
   margin: 23px;
   justify-content: center; 
   align-items: center;
}

/*bandeau*/


.messagedefilant {
    padding-top: 8px;
    padding-bottom: 8px;
    display: block;

    width: calc(100% + 166px);
    position: relative;
    left: -83px;
    top:-330px;
    font-size: 20px;

  }
  




/*page polemique*/

body.Polemique{
    font-size: 20px;

}

/*grid*/
.Polemique .grid{
    display: grid;
    grid-template-columns: 238px 179px 1fr;
    column-gap: 30px;
    padding-left: 189px;
    padding-right: 189px;
}

.Polemique .grid > *{
    grid-column: 1 / -1;
}

.Polemique .tgrid-start2{
    grid-column-start: 2;
}
.Polemique .tgrid-end1{
    grid-column-end: -3;
}




/*image*/

.Polemique .section--header::after{
    content: "";
    height: 630px;
    width: calc(100% + 166px);
    position: relative;
    top: 0;
    left: -83px;
}



.image--big{
    
    width: calc(100% + 166px);
    position: relative;
    left: -80px;
    top: -100px;
    margin-top: 34px;


}



.Polemique .KFC{
 
    width: calc(100% + 170px);
    margin-top: 45px;
    margin-bottom: -200px;
}


 .humoristiques{

    width: calc(100% + 166px);
    position: relative;
    top: 20px;
}

/*titre*/

.Polemique .title{
    
    font-size: 62px;

}

.Polemique .title--big{
    font-size: 90px;
    text-align: left;
    margin-bottom: 0;
    margin-top: 29px;
}



.Polemique .title--paragraphe{
    font-size: 20px;
    margin-bottom: 29px;
    margin-top: 45px;

}

/*section*/


.ligne_carre{
   
    width: calc(100% + 166px);
    position: relative;
    top: 0px;
    left: -83px;
    margin-bottom: 23px;
}

/*footer*/

.Polemique .section--footer{
    background-color: #D81F34;
    color: #FFFFFF;
    box-sizing: border-box;
    border: 83px solid #D81F34;
}





/*biographie*/

body .Biographie{
    content: "";
    width: 100%;
    height: 200px;
    background-image: url(assets/image/motif_background@2x.jpg);
    background-repeat: repeat;
    background-size: cover;
}

/*image*/

.Biographie .image--small{ 
    width: 105px;
    padding-top: 34px;
    padding-bottom: 34px;
}

.Biographie .image--moyenne{
    width: 224px;
    padding-bottom: 34px;
}
.Biographie .image--big{
    display: block;
    width: calc(100% + 378px);
    position: relative;
    left: -189px;
    top: 0;
    margin-top: 34px;
    margin-bottom: 34px;
}

.image--voiture{

    width: 100%;
    position: relative;
    left: 0;
    bottom: -140px;

}
/*paragraphe*/
.par{
    font-family: 'Staaliches',sans-serif;
}
.par--big{
    font-size: 50px;
}

.par--moyenne{
    font-size: 34px;
}
.par--small{
    font-size: 23px;
}
.section--film ul{
    margin-top: 0;
    margin-bottom: 72px;
}
/*titre*/
.Biographie .section--film .title--section{
    margin-top: 50px;
}

/*grid*/
.Biographie .grid{
    display: grid;
    grid-template-columns: 280px 90px 1fr;
    column-gap: 30px;
    padding-left: 83px;
    padding-right: 83px;
}

.Biographie .grid > *{
    grid-column: 1 / -1;
}



.Biographie .mgrid-start2{
    grid-column-start: 2;
}

.Biographie .mgrid-end1{
    grid-column-end: -2;
}


.Biographie .fond--musique{
    background-color: #A84D4A;
    box-sizing: border-box;
    border: 32px solid #A84D4A;
    margin-top: 50px;

}

/*section*/
.Biographie .section--film{
    margin-top: 50px;
}

.Biographie .section--film > *:first-child{
    margin-top: 0px;
}

}


/*ordi*/
@media (min-width: 1200px){
    body{
        font-size: 20px;
    }
    
    /*titre*/
    
    .title{
        font-size: 132px;
    }
    
    .title--big{
        font-size: 192px;
        text-align: center;
    }
    
    .Carriere .title--side{
        
        font-size: 132px;
    
      
    }
    .Carriere .title--litle{
        font-size: 105px;
       
      
    }
    
    
    
    .title--paragraphe{
        font-size: 43px;
       
    
    }
    /*section*/
    
    .section{
            
         padding-bottom: 0;
    }
    
    .Carriere .box--red{
     
        box-sizing: border-box;
        border: 29px solid  #A84D4A;
        border-bottom: 189px;
    }


    .Carriere .section--sketches .box--red{
        border: 90px solid #A84D4A;
        padding-left: 189px;
        padding-right: 189px;
        width: calc(100% + 378px);
        position: relative;
        left: -189px;
        padding-bottom: 50%;
    }
    
    /*image*/
    
    
    .image--amerique{
        width: 100%;
    }
    .Carriere .image--mont{
    
        width: calc(100% + 378px);
        position: relative;
        left: -189px;
        top: -60%;
    
    }
    .image--musique{
        width: 100%;
    }
    .image--misteV{
        width: 595px;
        position: relative;
        left: -189px;
        top: -50%;
    }
    
    /*grid*/
    
    .Carriere .grid{
        display: grid;
        grid-template-columns: 537px 141px 1fr;
        column-gap: 30px;
        padding-left: 189px;
        padding-right: 189px;
    }
    
    .Carriere .grid > *{
        grid-column: 1 / -1;
    }
    .Carriere .pgrid-start2{
        grid-column-start: 2;
    }
    
    .Carriere .pgrid-end1{
        grid-column-end: -3;
    }

    .Carriere .pgrid-end2{
        grid-column-end: 2;
    }
    
    .Carriere .pgrid-start-2{
        grid-column-start: -2;
    }

    /*footer*/
    
    
    .logo{
        width: 62px;
        display:  inline-block;
        position: relative;
        overflow: hidden;
        
      
    }
    
    .logo_content{
        text-indent: 150%;
        white-space: nowrap;
        position: absolute;
    }
    
    .footerMedia{
        display: flex;
       flex-direction: row;
    }
    
    a{
        text-decoration: none;
        color: #FFFFFF;
        margin: 20px;
    }

    
    a:hover,
    a:focus{
        font-family: 'Sarabun_Blod';
    }
    
    .section--footer{
        display: block;
        width: 100%;
        padding: 0px;
    
     
        margin-top: 23px;
      
    }
    
    ul{
        list-style-type: none;
        padding: 0;
        margin-left: 0;
        font-family:'Sarabun', sans-serif;
        font-size: 20px;
        line-height: 1.5;
        color: #FFFFFF;
        display: flex;
        flex-direction: row;
    }
    
    .section--footer{
        background-color: #4B1614;
        color: #FFFFFF;
        box-sizing: border-box;
        border: 189px solid #4B1614;
        border-top: 62px solid #4B1614;
        border-bottom: 62px solid #4B1614;
    }
    
    .copy{
        opacity: .5;
    }
    .copy small{ font-size: 11px;}
    
    /*navigation*/
    
    .star{
        padding: 5px;
        width: 50px;
        display: inline-block;
        position: relative;
        overflow: hidden;
        
    }
    .active{
        transform: scale(1.5);
    }
    
    
    .star_content{
        text-indent: 110%;
        white-space: nowrap;
        position: absolute;
    }
    
    .Navpage{
       display: flex;
       flex-direction: row;
       margin: 23px;
       justify-content: center; 
       align-items: center;
    }
    
    
    
    
    
    /*bandeau*/
    
    
    .messagedefilant {
        padding-top: 14px;
        padding-bottom: 14px;
        display: block;
    
        width: calc(100% + 378px);
        position: relative;
        left: -189px;
    
        font-size: 29px;
        background-color: #A84D4A;
        height: 43px; /* Hauteur de la banderole */
        overflow: hidden;
    
      }
      
      
      
      
      @keyframes defilement {
        from {
          transform: translateX(100%);
        }
        to {
          transform: translateX(-100%);
        }
      }
    
    
    /*page polemique*/
    
    body.Polemique{
        font-family: sans-serif;
        font-size: 20px;
        line-height: 1.5;
        color: #4B1614;
        background-color: #E6E6E0;
        margin: 0%;
    }
    
    /*grid*/

    .Polemique .grid{
        display: grid;
        grid-template-columns: 365px 250px  1ff;
        column-gap: 30px;
        padding-left: 189px;
        padding-right: 189px;
    }
    
    .Polemique .grid > *{
        grid-column: 1 / -1;
    }

    .Polemique .pgrid-end2{
        grid-column-end: 2;
    }
    .Polemique .pgrid-end3{
        grid-column-end: 3;
    }
    .Polemique .pgrid-start-3{
        grid-column-start: -3;
    }
    .Polemique .pgrid-start-2{
        grid-column-start: -2;
    }
    
    
    /*image*/
    
    .Polemique .section--header::after{
        content: "";
        width: calc(100% + 378px);
        height: 476px;
        background-image: url(assets/image/KFC_MisterV@2x.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
        top: 0;
        left: -189px;
     
    }
    
    
    .image--big{
        
        width: calc(100% + 378px);
        position: relative;
        left: -186px;
        top: -100px;
        margin-top: 34px;
    
    }
    
    .Polemique .section--Malbouffe::before{
        content: "";
        width: 100%;
        height: 1500px;
        background-image: url(assets/image/pizza_delamama@2x.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: absolute;
        left: 189px;
        top: 160%;
        opacity: 0.25;
    
    }
    
    .Polemique .KFC{
        box-sizing: border-box;
        border-top: 23px solid #D81F34;
        margin-top: 72px;
        width: calc(100% + 378px);
        position: relative;
        left: -189px;
        margin-top: 90px;
        margin-bottom: -200px;
    }
    
    
    
    /*titre*/
    
    .Polemique .title{
        font-family: 'Truculenta', sans-serif;
        font-size: 62px;
        /*margin: haut droite bas gauche*/
        line-height: 1.1;
        margin-top: 43px;
        margin-bottom: 62px;
    }
    
    .Polemique .title--big{
        font-size: 132px;
        text-align: left;
        margin-bottom: 62px;
        margin-top: 29px;
    }
    
    
    
    .Polemique .title--paragraphe{
        font-family: 'HankenGrotesk_Blod', sans-serif;
        font-size: 20px;
        margin-bottom: 43px;
        margin-top: 43px;
    
    }
    .Polemique h1{
        color: #D81F34;
    }
    /*section*/
    .Polemique .NoMargin{
        margin-top: -72px;
    }
    
    .ligne_carre{
       
        width: calc(100% + 378px);
        display: block;
        position: relative;
        top: -6px;
        left: -189px;
        margin-bottom: 23px;
    }
    
    
    /*footer*/
    
    .Polemique .section--footer{
        background-color: #D81F34;
        color: #FFFFFF;
        box-sizing: border-box;
        border: 189px  solid #D81F34;
        border-bottom: 62px;
        border-top: 62px;
    }
    
    
    
    
    
    /*biographie*/
    
    
    /*image*/
    
    .Biographie .image--small{ 
        width: 105px;
        padding-top: 34px;
        padding-bottom: 34px;
    }
    
    .Biographie .image--moyenne{
        width: 224px;
        padding-bottom: 34px;
    }
    .Biographie .image--big{
        display: block;
        width: calc(100% + 389px);
        position: relative;
        left: -189px;
        top: 0;
        margin-top: 34px;
        margin-bottom: 34px;
    }
    
    .image--voiture{
    
        width: 100%;
        position: relative;
        left: 0px;
        bottom: -115px;
    
    }
    /*paragraphe*/
    .par{
        font-family: 'Staaliches',sans-serif;
    }
    .par--big{
        font-size: 50px;
    }
    
    .par--moyenne{
        font-size: 34px;
    }
    .par--small{
        font-size: 23px;
    }
    .section--film ul{
        margin-top: 0;
        margin-bottom: 72px;
    }
    /*titre*/
    .Biographie .section--film .title--section{
        margin-top: 50px;
    }
    
    /*grid*/
    .Biographie .grid{
        display: grid;
        grid-template-columns: 423px 280px 1fr;
        column-gap: 30px;
        padding-left: 189px;
        padding-right: 189px;
    }
    
    .Biographie .grid > *{
        grid-column: 1 / -1;
    }
    
    
    
    .Biographie .pgrid-start2{
        grid-column-start: 2;
    }
    
    .Biographie .pgrid-end-3{
        grid-column-end: -3;
    }
    .Biographie .pgrid-end-2{
        grid-column-end: 2;
    }
    .Biographie .pgrid-start-3{
        grid-column-start: -3;
    }
    
    .Biographie .fond--musique{
        background-color: #A84D4A;
        box-sizing: border-box;
        border: 32px solid #A84D4A;
        margin-top: 50px;
    }
    
    /*section*/
    .Biographie .section--film{
        margin-top: 50px;
    }
    
    .Biographie .section--film > *:first-child{
        margin-top: 0px;
    }
    /*carousel*/
    
    .Biographie .carousel-container {
        position: relative;
        width: 100%;
        
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 50px 0;
        display: block;
    }
       
    .Biographie .carousel {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }
    .Biographie .carousel-item {
        position: relative;
        min-width: 224px;
        height: 476px;
        margin: 0 10px;
        
        overflow: hidden;
        text-align: left;
        cursor: pointer;
        transition: transform 0.3s;
    }
    .Biographie .carousel-item img {
        width: 224px;
        border-radius: 200px;
        box-sizing: border-box;
        border: 23px solid #A84D4A;
        
    }
    
    .Biographie .carousel-item:hover {
        transform: scale(0.9);
    }
    
    
    
    /* carousel carier*/
    
    
    
    .Carriere .carte--container {
        position: relative;
        width: 100%;
     
        display: block;
    }
       
    .Carriere .carte {
        display: flex;
        flex-direction: column;
        
    }
    
    .Carriere .carte--item {
        position: relative;
        min-width: 327px;
        padding: 10px;
        margin-right: 32px;
        margin-bottom: 32px;
        text-align: left;
        cursor: pointer;
        background-color: #A84D4A;
    }
    
    .Carriere .carte--item img {
        width: 224px;
        border-radius: 200px;
        margin: 51px;
    
    }
    .Carriere .carte--item:hover {
        transform: scale(0.9);
    }
    
    
}

@media screen and (min-width:734px) {
   /*
    .nav__order {
      display: inline-flex;
      flex-direction: row;
    }
    .nav_btn{
     margin-bottom: 0px;
     margin-right: 5px;
    }
    .nav_btn:last-child{
     margin-right: 0;
    }
*/

     /*navigation*/
    
    .star{
        padding: 16px;
        width: 90px;
        display: inline-block;
        position: relative;
        overflow: hidden;
        
    }
    .active{
        transform: scale(1.5);
    }
    
    
    .star_content{
        text-indent: -40%;
        white-space: nowrap;
        top: -100;
        position: relative;
        
    }
    
    .Navpage{
       display: flex;
       flex-direction: row;
       margin: 23px;
       justify-content: center; 
       align-items: center;
    }
 }