/*Page d'accueil*/


body {
    background-image: url(Images/fond_d_ecran_hito_stountio-line.jpg);
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.navbar {
    display: flex;
    justify-content: space-evenly;
}

li {
    background-color: rgba(240, 228, 228, 0.849);
    padding: 15px;
    font-family: 'Permanent Marker';
    font-size: 24px;
    box-shadow: 10px 5px 5px rgb(168, 168, 168);
    color: black;
    list-style: none
}

a, a:visited, .link-card {
    text-decoration: none; /* Enlève le soulignement bleu */
    color: inherit;        /* Garde la couleur du texte originale */
}

.presentation {
    text-align: center;
    font-family: 'Permanent Marker';
}

.presentation h2 {
    color:olive;
    text-shadow: 10px 5px 5px rgb(168, 168, 168);
    font-size: 36px;

}

.categories {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: repeat(3, 20%);
    grid-auto-rows: 1fr; /* Force toutes les lignes à avoir la même hauteur (la plus grande) */
    gap: 50px;
    row-gap: 80px;
    justify-content: center;
    margin-top: 80px;
    grid-template-areas: "sport crea culture"
                          "fun bars restau"
                          ". lien .";

}

.link-card {
    display: flex;        /* Permet au lien de prendre toute la place du bloc */
    height: 100%;
}

.activite {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;   /* Prend toute la largeur du lien */
    height: 100%;  /* Prend toute la hauteur du lien -> Aligne les bordures ! */
    margin-bottom: 40px;
    background-color: rgba(240, 228, 228, 0.849);
    border: thick solid rgb(221, 224, 226);
    box-shadow: 10px 5px 5px rgb(168, 168, 168);
    padding: 20px;
    font-family: 'Permanent Marker';
    font-size: 18px;
}

.sport {
    grid-area: sport;
}

.crea {
    grid-area: crea;
}

.culture {
    grid-area: culture;
}

.fun {
    grid-area: fun;
}

.bars {
    grid-area: bars;
}

.restau {
    grid-area: restau;
}

.lien {
    grid-area: lien;
}

.activite img {
    max-width: 35%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

/*Activités*/

.logo {
    height:100px;
    width: 175px;
}

.mise-en-page {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
}

.section-as {
    background-color: rgba(240, 228, 228, 0.849);
    border: thick solid rgb(221, 224, 226);
    gap: 15px;
    padding-left: 30px;
}


/*Catégories plus larges*/

.lieux {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px;
}

.section-lieu {
    position: relative;
    text-align: center;
    height: 400px;
    width: 300px;
    background-image: url(Images/rideau-openclipart.png);
    padding: 10px;
    background-size: 85% auto;
    background-origin: padding-box;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.section-lieu h3 {

    z-index: 2;
}

.img-musee {
    width: 50%;
    position: relative;
    top: 10%
}

.img-theatre {
    width: 50%;
    position: relative;
    top: 10%;
}

.img-concert {
    width: 20%;
    position: relative;
    top: 10%;
}

.retour {
    width: 100px;

}

.navbar-retour, .navig {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.cliquable {
    color:olive;
    text-decoration-color: olive;
    text-decoration: underline;
}


.link-card-page {
    width : 100%;
    box-shadow: 10px 5px 5px rgb(168, 168, 168);
    font-family: 'Permanent Marker';
    font-size: 24px;
}

/*BARS*/

.barathon h2 {
    text-align: center;
}





/* Cache la navigation sur les écrans de moins de 768px */
@media (max-width: 768px) {
    body {
        /* On ajoute un espace égal à la hauteur du logo + un peu de marge */
        padding-top: 180px; 
    } 
    
    
    .navbar {
        display: none;
    }
    
    /* On ajuste la marge du main car le menu a disparu */
    .categories {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        margin-bottom: 20px;
        /* On passe à une seule colonne de 90% de large */
        grid-template-columns: 90%; 
        grid-template-rows: auto; /* Laisse la hauteur s'adapter au contenu */ 
        /* On redéfinit les zones pour qu'elles s'empilent verticalement */
        grid-template-areas: none;
        
        gap: 20px; /* On réduit un peu l'espace entre les blocs sur mobile */
    }

    .logo {
        position: static;
        transform: none;
        margin-bottom: 5px;
    }

    .navbar-retour, .navig {
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0;         /* Colle le logo en haut */
        left: 50%;      /* Place le bord gauche du logo au milieu de l'écran */
        transform: translateX(-50%); /* Décale le logo de 50% de sa propre largeur vers la gauche */
        z-index: 1000;  /* Assure qu'il passe bien au-dessus du reste */
    }

}