:root{
    --rouge: #ec6d5d ;
}

body {
    background-image: url('../../medias/fond.png');
    margin: 0;
    width: 100%;
}

h1 {
    text-align: center;
    font-family: "Poppins";
    font-size: 3em;
    margin: 0;
    padding-top: 25px;
    padding-bottom: 25px;
    color: #ec6d5d;
}

.grosconteneur {
    display: grid; /* Utilisation de la grille pour disposer les résultats */
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes égales */
    grid-gap: auto;
    justify-content: space-evenly;
    margin-bottom: 400px;
}


.fond_blanc{
    background-color: white;
    position: relative;
    padding-bottom: 50px;
}

/* ---------------- NAVIGATION ---------------- */

nav{
    background-color: white;
    padding: 1rem 2rem;
    border-bottom: solid #ec6d5d;
}

nav a{
    padding: 5px;
    margin-right: 50px;
    text-decoration: none;
    font-size: 1em;
    color:#ec6d5d;
    font-family: "Poppins";
}

nav a:visited{
color:#ec6d5d;
}

nav a:hover{
    text-shadow: 1.5px 1.5px 1.5px darkgrey;
}

.titre_nav{
    font-size: 1.4em;
    font-weight: bold;
    margin-top: 2px;
    color: var(--rouge);
}

/* --------------------- FILTRES --------------------- */

.formulairefiltres {
    padding: 20px; /* Ajout de padding pour l'espace intérieur */
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    z-index: 999; /* Assurez-vous que la boîte reste au-dessus du contenu */
    transition: all 0.3s ease; /* Transition fluide */
    justify-content: space-between; /* Espacement égal entre les éléments */
    width: auto;
    max-width: 600px; /* Ajouter une largeur de 100% pour remplir l'espace disponible */
    height: auto;
    margin-left: 10%;
    margin-right: 10%;
    font-family: "Poppins";
    margin-bottom: 100px;
}

#btn_filtrer{
    margin-bottom: 12px;
}

/* Styles pour chaque section à l'intérieur du formulaire */
.formulairefiltres section {
    flex: 1; /* Chaque section occupera un espace égal */
    margin-bottom: 20px; /* Espacement entre chaque section */
    margin-right: 20px; /* Espacement à droite de chaque section */
}

/* Média query pour ajuster le nombre de sections par ligne en fonction de la taille de l'écran */
@media screen and (max-width: 768px) {
    .formulairefiltres section {
        flex-basis: calc(50% - 20px); /* Deux sections par ligne avec espacement */
    }
}

.filtresminiature {
    margin-left: 35px !important;
    position: fixed !important;
    top: 50px !important; /* Ajustez selon le besoin */
    left: 2px !important; /* Ajustez selon le besoin */
    max-width: 200px !important; /* Ajustez selon le besoin */
    width: 30%;
    background-color: white !important; /* Couleur de fond */
    padding: 20px !important; /* Espace intérieur */
    border-radius: 10px !important; /* Coins arrondis */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1) !important; /* Ombre légère */
    z-index: 999 !important; /* Assurez-vous que la boîte reste au-dessus du contenu */
    transition: all 0.3s ease !important; /* Transition fluide */
}

@media screen and (min-width: 768px) {
    .filtresminiature  {
        position: fixed !important;
        top: 50px !important; /* Ajustez selon le besoin */
        left: 2px !important; /* Ajustez selon le besoin */
    }
}

.titreaccueil {
    color: black;
}

/* --------------------- CARTE --------------------- */
.iframe {
    position: absolute;
    width: 50%;
    max-width: 600px;
}

#map {
    height: 740px; 
    border-radius: 30px;
    margin-right: 10%;
}

@media (min-width: 1400px){
    .iframe{
        margin-left:  100px;
    }
    .formulairefiltres{
        margin-left: 17%;
        margin-right: 5%;
    }
}

/* Styles par défaut pour les grands écrans */
#map.miniature {
    position: fixed !important;
    bottom:25px;/*selon le besoin */
    right: 15px !important; /* Ajustez selon le besoin */
    width: 250px;
    height: 250px;
    z-index: 999;
    border-radius: 10px;
    transition: all 0.5s ease-in-out;
    margin-right: 10px !important;
}

@media (max-width: 1150px){
    #map.miniature {
        display: none;
    }
    .conteneur_resultats_et_liste{
        margin-right: 50px; /*Suprimme la marge prévue pour la carte*/
    }
}

/* --------------------- LOGOS MOBILE --------------------- */

.logos{
    text-align: center;
    margin-top: 25px;
}

/* --------------------- PAGINATION --------------------- */
.paginationpages{
    text-align: center;
    margin-top: 100px;
    margin-bottom: 20px;
    white-space: nowrap;
    font-family: 'Poppins';
}

.paginationpages a {
    text-decoration: none;
    padding: 10px;
    border: 1.5px var(--rouge) solid;
    background-color: white;
    color: black;
    border-radius: 5px;
}

.paginationpages a:hover {
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    padding: 10px;
    border: 1.5px var(--rouge) solid;
    background-color: #f7d5cb;
    color: black;
    border-radius: 5px;
}

.paginationpages span {
    text-decoration: none;
    padding: 10px;
    border: 1.5px var(--rouge) solid;
    background-color: #f7d5cb;
    border-radius: 5px;
}

p{
    position: relative;
    top: 10px;
    margin-bottom: 25px;
    color: var(--rouge);
    background-color: white;
    display: inline-block;
    padding: 15px;
    padding-inline: 20px;
    font-family: 'Poppins';
    white-space: nowrap;
}

/* --------------------------- RESULTATS ---------------------------*/

.conteneur_resultats_et_liste {
    margin-left: 300px;
    margin-right: 300px;
}

.conteneur_resultats {
    display: grid; /* Utilisation de la grille pour disposer les résultats */
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes égales */
    grid-gap: 20px; /* Espacement entre les boîtes */
}

@media (max-width: 1000px){
   .conteneur_resultats {
        grid-template-columns: 1fr; /* Une seule colonne qui prendra toute la largeur disponible */
        margin-right: 35px; /* Ajouter une marge à droite */
    }   
    .result-box {
        width: 180%;
    }
    .liste{
        font-size: 2em;
    }
    .paginationpages a{
        font-size: 0.8em;
    }
}

.result-box {
    font-family:'Poppins';
    border: 2px solid #ec6d5d;
    border-radius: 50px;
    padding: 10px;
    background-color: white;
}

.cinema-info {
    margin-inline: 50px;
    margin-bottom: 50px;
}

/* Style pour le titre du cinéma */
.cinema-title {
    margin-top: 50px;
    font-size: 1.2em;
    color: #333;
    margin-bottom: 5px;
    text-align: center;
}

/* Style pour l'adresse, la commune et le nombre de places */
.cinema-info {
    font-size: 1em;
    color: #666;
}

.titre {
    text-align: center;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 3em;
    margin-bottom: 50px;
    margin-top: 50px;
}

.liste {
    position: relative;
    font-family:'Poppins';
    margin-bottom: 100px;
    text-align: center;
    font-size: 2.5em;
}

.cinema-info {
    margin-left: 50px;
    margin-bottom: 50px;
}

/* Style pour le titre du cinéma */
.cinema-title {
    margin-top: 50px;
    font-size: 1.2em;
    color: #333;
    margin-bottom: 5px;
    text-align: center;
}

/* Style pour l'adresse, la commune et le nombre de places */
.cinema-info {
    font-size: 1em;
    color: #666;
}

/* --------------------------- PAGES DU BAS ---------------------------*/

.page_bas{
    background-color: white;
    padding: 25px;
    text-align: center;
    margin-bottom: 20px;
    text-decoration: none;
    color: var(--rouge);
    font-weight: bold;
    margin: 0 auto;
    margin-top: 20px;
    width: 20%
}

.prec_suiv {
    padding-top: 5px;
    font-size: 1.2em;
}

.prec_suiv a {
    color: var(--rouge);
}

/* --------------------------- MOBILE RESPONSIVE ---------------------------*/

@media (min-width:650px){
    section{
        font-size: 1.2em;
    }
    section.filtresminiature{
        font-size: 1em;
    }
    .paginationpages {
        font-size: 1.4em;
    }
    p{
        font-size: 1.3em;
    }
}