* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Bricolage Grotesque", sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
   /* Remplir toute la hauteur de l'écran */
    background-image: linear-gradient(to right top, #b4d8ff, #c8deff, #d9e5ff, #e7ecff, #f3f4ff, #f7f7ff, #fafbff, #fefeff, #fdfdff, #fcfdff, #fbfcff, #f9fcff);
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    margin: 20px;
}
.logo img {
    height: 32px;
}
.image-btn {
    border: 2px solid #0072ef;
   /* Bordure initiale */
    padding: 10px 30px;
   /* Plus d'espace à gauche et à droite */
    cursor: pointer;
   /* Curseur en forme de main */
    display: inline-flex;
   /* Flexbox pour centrer l'image */
    align-items: center;
   /* Centre l'image verticalement */
    justify-content: center;
   /* Centre l'image horizontalement */
    border-radius: 8px;
   /* Bordure arrondie légèrement */
    transition: transform 0.3s ease, border-radius 0.3s ease;
   /* Transition pour l'agrandissement et l'arrondi */
    position: relative;
   /* Nécessaire pour l'animation */
}
.image-btn img {
    width: 100px;
   /* Ajuste la taille de l'image */
    height: auto;
   /* Maintient les proportions de l'image */
    display: block;
   /* Enlève les espaces en dessous de l'image */
    transition: transform 0.3s ease;
   /* Transition pour l'agrandissement de l'image */
}
/* Animation du box-shadow avec un gradient circulaire */
@keyframes boxShadowAnimation {
    0% {
        box-shadow: 5 4px 10px #0072ef, 0 4px 10px #0072ef;
   }
    50% {
        box-shadow: 5 4px 10px #0095ff, 0 4px 10px #0072ef;
   }
    100% {
        box-shadow: 5 4px 10px #0072ef, 0 4px 10px #0091ff;
   }
}
.image-btn {
    animation: boxShadowAnimation 3s infinite alternate;
   /* Applique l'animation de box-shadow */
}
/* Agrandissement du bouton au survol */
.image-btn:hover {
    transform: scale(1.05);
   /* Agrandissement du bouton au survol */
    border-radius: 12px;
   /* Augmente l'arrondi de la bordure au survol */
}
.contact-btn {
    background: #0072ef;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 87, 255, 0.3);
    transition: 0.3s;
}
.contact-btn:hover {
    background: #1c4dff;
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 120px;
    flex-grow: 1;
   /* Cela permet au contenu de prendre l'espace restant */
}
.subtitle {
    color: #0072ef;
    font-size: 65px;
    margin-bottom: 10px;
}
.welcome {
    color: #003c72;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 5px;
}
.companies {
    display: flex;
    justify-content: center;
    gap: 60px;
}
.company {
    text-align: center;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.company img {
    width: 180px;
}
.image-btn {
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 87, 255, 0.3);
    transition: 0.3s;
}
footer {
    position: fixed;
    padding: 25px 40px;
    background: white;
    border-top: 1px solid #ddd;
    box-shadow: 0px 3px 14px rgba(74, 58, 255, 0.03), 0px -2px 4px rgba(20, 20, 43, 0.02), 0px 12px 24px rgba(20, 20, 43, 0.04);
    border-radius: 10px;
    margin: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: 0;
    border-radius: 0;
    z-index: 1000;
    width: 100vw;
}
footer p {
    font-size: 14px;
    color: #6F6C90;
}
footer a {
    color: #0057ff;
    text-decoration: none;
}
footer a:hover {
    text-decoration: underline;
}
canvas {
    display: block;
}
/* ---- particles.js container ---- */
#particles-js {
    position: fixed;
   /* Fixe le fond des particules */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right top, #b4d8ff, #c8deff, #d9e5ff, #e7ecff, #f3f4ff, #f7f7ff, #fafbff, #fefeff, #fdfdff, #fcfdff, #fbfcff, #f9fcff);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    z-index: -1;
   /* Assure-toi que ce soit derrière le contenu */
}

/* new*/
/* ---- RESPONSIVE MOBILE ---- */
@media (max-width: 768px) {
    /* Ajuste la disposition */
    .companies {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .image-btn {
        width: 90%;
        max-width: 250px;
        height: 70px;
    }

    .company img {
        max-width: 100px;
    }

    /* Ajustement du contenu pour éviter que le dernier bouton soit caché */
    main {
        height: calc(100vh - 80px); /* Ajuste pour laisser de l'espace au footer */
    }

    /* Footer fixe */

}