html, body {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    /**cursor: url('../cursor.png'), auto;**/
}

@font-face {
    font-family: 'noi';
    src: url('../fonts/noi/web/NoiGrotesk-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'noi-ultralight';
    src: url('../fonts/noi/web/NoiGrotesk-UltraLight.ttf') format('truetype');
}

@font-face {
    font-family: 'noi-light';
    src: url('../fonts/noi/web/NoiGrotesk-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'noi-black';
    src: url('../fonts/noi/web/NoiGrotesk-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'noi-medium';
    src: url('../fonts/noi/web/NoiGrotesk-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'mazius';
    src: url('../fonts/mazius/mazius-regular.otf') format('opentype');
    font-weight:normal;
}






div.title-gradient {
    position:relative;
    top:0;
    left:0;
    width:100%;
    margin-top: 2%;
    margin-bottom: -3%;
}

div.title-gradient h2 {
    width:80%;
    margin: 0 auto;
    padding:14px 0 30px 0;
    text-align:center;
    font-size:220%;
    font-family:'mazius', serif;
    font-weight:normal;
    margin-bottom: -13%;
}

div.title-gradient h2 span.ita {
    font-style: italic;

}

div.title-gradient span.help {
    display:block;
    width:80%;
    margin: auto;
    text-align:center;
    font-size:40%;
    font-family:'noi', sans-serif;
}

div.title-gradient h3 {
    width:80%;
    margin: 0 auto;
    padding:50px 0 40px 0;
    text-align:center;
    font-size:110%;
    font-family:'noi-light', sans-serif;
    font-weight:normal;
}

div.image {
    background-size:cover;
    width:100%;
    height:205px;
    transition:all .3s ease;
}


div.details {
    position:relative;
    top:0;
    left:0;
    width:90%;
    padding:10px 10px;
}

div.details div.element-detail {
    margin:20px 0;
}

div.details div.element-detail h6 {
    font-family: Noi Grotesk;
    font-size: 14px;
    font-weight: 500;
    line-height: 16.87px;
    text-align: left;
    
}

div.details div.element-detail span {
    margin:0;
    padding:0;
    font-size: 10px;
    font-family:'noi', sans-serif;
    font-weight: normal;
}

div.details div.img {
    position:relative;
    top:0;
    margin:10px 0;
}

div.details div.img span {
    font-size:10px;
    font-family:'noi', sans-serif;
    font-style:italic;
    padding:10px 0;
    display:block;
}

div.details div.img img {
    width: 250px;
    height: 160px;
}

div.spec {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

div.spec div.specification {
    border-top: 1px solid black;
    display: flex;
    padding: 0;
    flex-direction: row;
    justify-content: space-between; /* Ajouté pour aligner les éléments à gauche et à droite */
    min-height: 70px; /* Hauteur minimale pour uniformité */
    align-items: center; /* Alignement vertical centré */
}

div.spec div.specification:last-child {
    border-bottom: 1px solid black;
}

div.spec div.specification > div:first-child {
    width: 40%;
    height: 100%; /* Utilisation de la hauteur totale disponible */
    font-family: 'noi-ultralight', sans-serif;
    font-size: 100%;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    padding: 0 0 0 20px;
    justify-content: center;
}

div.spec div.specification div:nth-child(2) {
    flex: 1; /* Ajouté pour prendre tout l'espace disponible */
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 65%;
    font-family: 'noi', sans-serif;
    line-height: 18px;
    padding-right: 20px; /* Ajouté pour un peu d'espace à droite */
}

div.spec div.specification div:nth-child(2) b {
    font-family: 'noi-black', sans-serif;
}

div.gradient-2 {
    position:relative;
    top:0;
    left:0;
    width:100%;
}

div.gradient {
    position:relative;
    top:0;
    left:0;
    width:100%;
    background-size: cover;
}

div.next {
    position:relative;
    left:0;
    margin-top: 5%;
    margin-bottom: -5%;
    width:100%;
    height: 10%;
    text-align:center;
    text-decoration: none !important;
}

div.next > span {
    font-family:'noi', sans-serif;
    font-size:18px;
    display:block;
    top:-50%;
    left:0;
    margin:0;
    position:relative;
    width:100%;
    transform:translateY(50px);
    z-index:10;
    text-decoration: none !important;
}


.btn:hover .arr {
    opacity: 1;
    width:auto;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ajustez ces valeurs selon vos besoins */
    width: 125px; /* Largeur du bouton */
    height: 45px; /* Hauteur du bouton */
    background-color: transparent; /* Couleur de fond transparente */
    border: none; /* Pas de bordure */
    cursor: pointer; /* Curseur en forme de main */
    padding: 0; /* Pas de padding */
    margin-top:-22px;
    margin-left:62%;
    z-index: 1; 
}

.btn img {
    max-width: 100%;
    max-height: 100%;
    display: block; /* Pour éviter les espaces blancs autour de l'image */
    border: none; /* Pas de bordure */
    top:-22px;
    left:68%;
    z-index: 1; 
}
.btn a {

    z-index: 1; 
}