body {
    font-family: Arial, sans-serif;
    height: 100wh;
    margin: 0;
    padding: 0;
}
.logo-container img {
     background-color: #81c6ee;
     
}


header {
    display: flex;
    background-color: #81c6ee;
    color: white;
    padding: 0;
    text-align: center;
    flex-direction: column;
}

header nav ul {
    list-style: none;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 10px;
}

header nav ul li a {
    color: rgb(8, 8, 8);
    text-decoration: none;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xx-large;
}

#hero2 {
    
    background: white;
    text-align: center;
    font-family:Impact, 'Arial Narrow Bold', sans-serif;
    font-size: xx-large;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

#content {
    background: white;
    padding: 20px;
    display: flex;
    flex-direction: row;
}

#products {
    background: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
}



    
    > a h4 {
        text-decoration: none;
        color: rgb(8, 8, 8);
        display: flex;
    }


.product-item {
    padding: 0px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

 }   
    > a h4 {
        text-decoration: none;
        color: rgb(8, 8, 8);
        display: flex;
    }



.video-item .thumbnail-link {
    text-decoration: none;
}

.video-item .thumbnail-link  h4 {
    color: #000;
    display: flex;
    justify-content: center;

} 

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 0px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}
.thumbnail-link {
    display: flex;
    text-align: left;
    margin: 20px;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    

}

.thumbnail-link a {
    text-decoration: none;
    color: #000;
    display: flex;
    align-content: center;

}

.thumbnail-link img {
    display: flex;
    width: 200px; /* Ajustez la largeur selon vos besoins */
    height: auto;
    border-radius: 10px; /* Optionnel : pour arrondir les coins de l'image */
    transition: transform 0.3s;
    flex-direction: column;
}

.thumbnail-link img:hover {
    transform: scale(1.05); /* Agrandir légèrement l'image au survol */
}

.thumbnail-link span {
    display: flex;
    margin-top: 10px;
    font-size: 1.2em;
    font-weight: bold;
    justify-content: center;
}

/* ajout perso */

.product-link {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin: 20px;
  justify-content: center;
}

.product-link a {
    text-decoration: none;
    color: #000;

}

.product-link img {
    display: flex;
    border-radius: 10px; /* Optionnel : pour arrondir les coins de l'image */
    transition: transform 0.3s;
    align-items: center;
    width: auto;
    height: auto;
  	justify-content: center;
}

.product-link img:hover {
    transform: scale(1.05); /* Agrandir légèrement l'image au survol */
}

.product-link span {
    display: flex;
    margin-top: 10px;
    font-size: 1.2em;
    font-weight: bold;
    justify-content: center;
}

#hero1 {
    
    background: white;
    text-align: center;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xx-large;
    display: flex;
    flex-direction: column;
    width: 20%;
    justify-content: right;
}

#hero3 {
    
    background: white;
    text-align: center;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: xx-large;
    display: flex;
    flex-direction: column;
    width: 20%;
    justify-content: left;
}

main {
    display: flex;
    flex-direction: row;
    padding: 0px;
    justify-content: center;
}



#hero4 {
    
    background: white;
    text-align: center;
    font-family:Impact, 'Arial Narrow Bold', sans-serif;
    font-size: xx-large;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 60%;

}

.thumbnail-link2 {
    display: flex;
    text-align: left;
    margin: 20px;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    

}

.thumbnail-link2 a {
    text-decoration: none;
    color: #000;
    display: flex;
    align-content: center;

}

.thumbnail-link2 img {
    display: flex;
    width: 150px; /* Ajustez la largeur selon vos besoins */
    height: auto;
    border-radius: 10px; /* Optionnel : pour arrondir les coins de l'image */
    transition: transform 0.3s;
    flex-direction: column;
}

.thumbnail-link2 img:hover {
    transform: scale(1.05); /* Agrandir légèrement l'image au survol */
}

.thumbnail-link2 span {
    display: flex;
    margin-top: 10px;
    font-size: 1.2em;
    font-weight: bold;
    justify-content: center;
}