@font-face{
    font-family: "Supreme";
    src: url(Fonts/Supreme_Complete/Supreme_Complete/Fonts/TTF/Supreme-Variable.ttf);
}
@font-face {
    font-family: "Satoshi";
    src: url(../Fonts/Satoshi-Variable.ttf);
}
.satoshi{
    font-family: "Satoshi";
    font-weight: 400;
}
.sarala {
  font-family: "Sarala", sans-serif;
  font-weight: 400;
  font-style: normal;
}

@media (max-width: 600px){

    .nav__toggle{
        display: block;
        position: fixed;
        top: 10px;
        left: 10px;
        background-image: url(../icons/menu.svg);
        background-repeat: no-repeat;
        width: 24px;   
        height: 24px;
        background-position: center;
        background-size: contain;
        text-indent: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
    .nav__liste{
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        z-index: 10;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;  
    }
    .nav--open .nav__liste{
        transform: translateX(0);   
    }
    .nav{
        background: linear-gradient(270deg,rgba(58, 0, 140, 1) 0%, rgba(20, 0, 41, 1) 100%);
    }
    .nav__el{
        margin-top: -20px;
    }
}
@media (min-width: 600px){
    .nav__toggle{
        display: none;
    }
}
@media (min-width: 600px){
     .nav__liste{
        justify-content: end;
        margin-right: 60px;
    }
}

body{
    font-family: "Supreme";
    margin: 0;
    overflow-x: hidden;
}
.angkor{
    font-family: "Angkor", serif;
    font-size: 45px;
    font-weight: 400;
    margin: 0;
    margin-top: 50px;
}
img{
    max-width: 100%;
}
.paragraphe{
    font-size: 16px;
    line-height: 150%;
    margin: 0;
}
.bold{
    font-weight: 700;
}
.soustitre{
    font-size: 32px;
}
.intertitre{
    font-size: 23px;
}
.header{
    background: linear-gradient(270deg,rgba(58, 0, 140, 1) 0%, rgba(20, 0, 41, 1) 100%);
    color: white;
    padding: 20px 47px 20px 47px;
    text-align: center;
}
.underline{
    text-decoration: underline;
    text-underline-offset: 16%;
}
.persona{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline: 46px;
}
.persona h2{
    margin-bottom: 0;
    margin-top: 32px;
}
.persona h3{
    margin-bottom: 15px;
    margin-top: 16px;
}
.persona p{
    margin: 0;
}
.persona__img{
    width: 181px;
    height: 257px;
    margin-block: 12px;
}
.usersearch{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-inline: 36px;
}
.usersearch h3{
    margin-bottom: 15px;
    margin-top: 50px;
}
.prototypage{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.prototypage p{
    margin-inline: 40px;
    margin-bottom: 37px;
}
.prototypage h3{
    margin-bottom: 15px;
    margin-top: 50px;
}
.prototypage__grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-inline: 10px;
}
.img{
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 5px 5px 13px 2px rgba(0,0,0,0.20);
}
.img--big{
    width: 238px ;
    height: 147px;
}
.img--small{
    width: 152px ;
    height: 147px;
}
.img--1{
    grid-area: 1 / 1 / 3 / 4;
}
.img--2{
    grid-area: 1 / 4 / 3 / 6;
}
.img--3{
    grid-area: 3 / 3 / 5 / 6;
}
.img--4{
    grid-area: 3 / 1 / 5 / 3;
}
.img--5{
    grid-area: 5 / 1 / 7 / 4;
}
.img--6{
    grid-area: 5 / 4 / 7 / 6;
}
.design{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.design p{
    margin-inline: 45px;
}
.design__img{
    width: 342px;
    height: 227px;
}
.design__circle{
    display: flex;
    flex-direction: row;
    gap: 55px;
    align-items: center;
    margin-block: 40px;
}
.circle{
    width: 86px;
    height: 86px;
    border-radius: 50%;
}
.circle--1{
    background-color: #003141;
}
.circle--2{
    background-color: #ffffff;
    border-style: solid;
    border-width: 2px;
}
.circle--3{
    background-color: #041322;
}
.design__assemblage{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.design__police{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.design__police--satoshi{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.design__police--sarala{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.design a{
    padding: 10px 50px 10px 50px;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
    transition: 0.2s ease;
    color: black;
    text-decoration: none;
    margin-block: 32px;
}
.design a:hover{
    scale: 1.05;
    background-color: black;
    color: white;
    cursor: pointer;
    border-color: black;
}
.design h2{
    margin: 6px 0 0 0;
}
.design h3{
    margin-top: 50px;
}
.design h4{
  margin-top: 30px;
  margin-bottom: 6px;
}
footer{
    display: flex;
    flex-direction: column;
    background-color: #140029;
    color: white;
    align-items: center;
    padding-bottom: 5px;
    padding-top: 15px;
}
footer a{
    margin-bottom: 13px;
}
.btnfin{
    display: flex;
    flex-direction: row; 
    gap: 20px;
}

@media (min-width: 1024px){
    .paragraphe{
        font-size: 20px;
    }
    .angkor{
        font-size: 90px;
    }
    .soustitre{
        font-size: 29px;
    }
    .persona__img{
        grid-column: 1/2;
        grid-row: 2/4;
        width: 253px;
        height: 357px;
    }
    .intertitre{
        font-size: 20px;
    }
    .grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        row-gap: 6px;
        column-gap: 128px;
        margin-inline: 176px;
    }
    .persona__p1{
        grid-column: 2/4;
        grid-row: 2/3;
        align-self: end;
        padding-bottom: 11px;
    }
    .persona__p2{
        grid-column: 2/4;
        grid-row: 3/4;
        align-self: start;
        padding-top: 11px;
    }
    .persona h2, .persona h3{
        grid-column: 1/2;
        grid-row: 1/2;
    }
    .persona h2{
        margin-top: -30px;
    }
    .persona h3{
        align-self: end;
        margin: 0;
    }
    .usersearch{
        align-items: start;
        margin-left: 11vw;
    }
    .usersearch h3{
        margin-bottom: 18px;
        margin-top: 70px;
    }
    .usersearch p{
        padding: 18px 18px 18px 18px;
        background: linear-gradient(-56deg,rgba(58, 0, 140, 1) 0%, rgba(20, 0, 41, 1) 100%);
        color: white;
        border-radius: 10px;
        margin-right: 39vw;
    }
    .prototypage{
        margin-left: 11vw;
        align-items: start;
    }
    .prototypage p{
        margin-left: 0;
        margin-right: 40%;
        margin-bottom: 18px;
    }
    .prototypage h3{
        margin-top: 70px;
        margin-bottom: 18px;
    }
    .prototypage__grid{
        grid-template-columns: 1fr 0.5fr repeat(2, 1fr) 0.5fr repeat(2, 1fr);
        grid-template-rows: repeat(5, 1fr) 0.5fr 1fr;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        max-width: 600px;
        margin-inline: 0;
    }
    .img--prototypage{
        width: 100%;
        height: 100%;    
    }
    .img--1{
        grid-area: 1 / 1 / 4 / 4;
    }
    .img--2{
        grid-area: 1 / 4 / 5 / 6;
    }
    .img--3{
        grid-area: 1 / 6 / 4 / 8;
    }
    .img--4{
        grid-area: 4 / 6 / 8 / 8;
    }
    .img--5{
        grid-area: 4 / 1 / 8 / 4;
    }
    .img--6{
        grid-area: 5 / 4 / 8 / 6;
    }
    .design__circle{
        flex-direction: column;
        gap: 30px;
    }
    .circle{
    width: 112px;
    height: 112px;
    }
    .design__content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;        
    margin-top: 20px;   
}
.design {                
    margin-inline: 11vw;
}

.design__assemblage {
    flex-direction: row;
    gap: 30px;
}

.design__police {
    display: flex;
    flex-direction: column;
}
.design h3 { 
    align-self: start;
 }
.design p {
     margin: 0;
     }
.design__img {
    width: 100%;
    max-width: 647px;
    height: auto;
}
.design a {
    align-self: center;
    margin-top: 20px; 
}
.btnfin{
    flex-direction: row;
    gap: 200px;
}


}
@media (min-width: 1024px) and (max-width:1380px){
    .grid{
        column-gap: 0;
    }
    .persona__p1, .persona__p2{
        padding-left: 40px;
    }
}

.btnend{
    border-width: 0;
    white-space: nowrap;
    padding-inline: 5px;
}
.header__txt{
    margin-inline: 15%;
}