@font-face {
    font-family: "Satoshi-Variable";
    src: url("/assets/Satoshi-Variable.ttf")
    format("truetype");
}

@font-face {
    font-family: "PopJoy";
    src: url("/assets/PopJoy.otf") format("opentype");
}

/* Text font */
body, p, .info-box, .review-box, .points-positifs-box, .points-negatifs-box, .btn {
    font-family: 'Satoshi-Variable', sans-serif;
}

/* Titles and note font */
h1, h2, h3, h4, h5, h6, .note-stars {
    font-family: 'PopJoy', sans-serif;
    color : #2C3849 ;
} 

.hero-section {
    position: relative;
    background-image: 
        url('../assets/BG_spikes.png'),
        url('../assets/BG_stripes.jpg');
    background-repeat: repeat-x, repeat;
    background-position: bottom left, top left;
    background-size: auto 20px, auto; /* la taille des pics et des rayures */
    padding: 100px 20px 40px;
    text-align: center;
    min-height: 30vh;
}
.articles-section {
    background-image: url('../assets/BG_dots.jpg'); 
    background-repeat: repeat;
    background-size: auto;
    padding: 40px 20px;
    min-height: 100vh;
}

.articles-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    justify-content: center; 
}

.hero-section, .articles-section {
    margin: 0;
}

.hero-section h1, .hero-section p {
    margin: 0;
}

.articles-section h2 {
    margin-top: 0;
    margin-bottom: 0px;
    margin-left: 16px;
    margin-right: 16px;
    text-align: center;
    font-size: 2rem;
}   

.hero-box {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 16px;
    border-radius: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: inline-block;
}

.articles-box {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 16px;
    border-radius: 28px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    margin: 0 auto 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.articles-section {
    text-align: center;
}

#backToTop {
    display: none; /* masqué par défaut */
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1000;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.5); /* fond blanc autour de l'image */
    background-image: url('/assets/Luigi_idle.png'); /* image normale */
    background-size: 50%; /* ajuste la taille de l'image à l'intérieur du cercle */
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.3s, transform 0.2s;
}

#backToTop:hover {
    background-image: url('/assets/Luigi_jumping.png'); /* image au hover */
    transform: scale(1.1); /* léger zoom au hover */
}