body{
    background-image: url(/ressources/images/background_pic.jpg); /* image de fond */
    background-size: cover; /* l'image couvre tout l'écran selon ses dimensions */
    background-repeat: no-repeat; /* l'image ne se répète pas */
    margin: 0; /* enlève les marges */
    background-color: #C7BEBD; /* couleur de la page */
    background-position: center;
    padding-bottom: -150px;
}
a{
    text-decoration: none;
}
#logo{
    width: 150px; /* taille du logo */
    height: auto; /* taille du logo */
    position: absolute; /* placement libre sur la page */
    top: 50px; /* logo 50px du haut */
    left: 50px; /* logo 50px de la gauche */
}
#usericon_placement{
    width: 70px; /* largeur de l'icône */
    height: auto; /* hauteur automatique pour pas déformer l'image */
    position: absolute; /* placement libre sur la page */
    top: 50px; /* 50px du haut */
    right: 75px; /* 75px de la droite */
}



/* BARRE DE RECHERCHE */
.button {
    display: flex; /* met tous les éléments sur une ligne */
    align-items: center; /* centre verticalement les éléments */
    background-color: #A6A6A4; /* couleur du rectangle gris clair */
    border-radius: 25px; /* coins arrondis du rectangle */
    padding: 5px 15px; /* espace intérieur entre le contenu et les bords */
    height: 50px; /* hauteur totale de la barre */
    width: 80%; /* largeur relative à la taille de l’écran */
    max-width: 600px; /* limite la largeur maximale */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 1); /* ajoute ombre sous la barre */
    position: absolute; /* position libre sur la page */
    top: 65%; /* position verticale (environ au centre bas de l’écran) */
    left: 50%; /* position horizontale au centre */
    transform: translate(-50%, -50%); /* recentre parfaitement la barre */
    z-index: 10; /* place la barre au-dessus du reste du contenu */

     /*  Animation */
    animation: slideDown 0.4s ease-out forwards;

}


/* //////////// ANIMATION BARRE DU MILIEU /////////////////////*/
@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translate(-50%, -150%); /* commence bien au-dessus de la page */
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%); /* revient à sa position normale */
    }
}

/* Icône du menu à gauche */
.bar_icon {
    font-size: 20px; /* taille du symbole */
    margin-right: 10px; /* espace entre l’icône et le champ de texte */
    cursor: pointer; /* curseur interactif (main) */
}

/* TEXTE  */
#w-text {
    font-family: "Afacad", sans-serif;
    position: absolute;   /* placement libre sur la page */
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none; /* optionnel, pour que le texte ne capture pas le passage du curseur */
    font-size: 25px;
}

/* Style général du footer */
.footer-aurus {
    background-color: #ddd7d6;
    padding: 45px 0 20px;
    margin-top: 100px;
    
}

.footer-section {
    font-family: "Afacad", sans-serif;
    color: black;
}

.footer-section h5 {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section ul li {
    margin-bottom: 8px;
    font-size: 15px;
}

.footer-section ul li a {
    color: black;
    text-decoration: none;
    transition: all 0.3s;
}

.footer-section ul li a:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* Badges d'applications */
.app-badges img {
    height: 50px;
    width: auto;
    margin-right: 15px;
    margin-bottom: 10px;
}

/* Icônes réseaux sociaux */
.social-icons a {
    display: inline-block;
    margin: 0 10px;
}

.social-icons img {
    width: 35px;
    height: 35px;
    transition: transform 0.3s;
}

.social-icons img:hover {
    transform: scale(1.1);
}

/* Mini texte en bas */
.footer-bottom {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #a6a6a4;
    font-family: "Afacad", sans-serif;
    color: black;
}

/* Responsive - Mobile et tablette */
@media screen and (max-width: 768px) {
    body{
    background-size: cover;
    background-position: center 45%; /* remonte un peu le cadrage */
    
    transform-origin: top center;
    }
    .footer-aurus {
        padding: 30px 15px 20px;
        bottom: -20em;
    }
    .button{
        display: flex;
        top: 85%;
    }
    #w-text{
        font-size: 20px;
    }
    .app-badges {
        display: none;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .social-icons {
        text-align: center;
        margin-top: 20px;
    }
}

/* Responsive pour écrans 1920x1080px */
@media screen and (min-width: 1920px) {
    .footer-aurus{
        position: absolute;
        padding: 25px 15px 20px;
        bottom: -15.5em;
        margin-top: 5px;
    }
    .app-badges{
        transform: scale(0.8);
    }
    .social-icons{
        transform: scale(0.9);
    }
    .footer-section{
        transform: scale(1);
    }
}