/* =========================================================
STYLE GLOBAL DU SITE
========================================================= */

/* Style de base pour toute la page */
body{
    font-family:Arial;        /* Police du texte */
    margin:0;                /* Supprime les marges par défaut du navigateur */
    background:#f5f6fa;      /* Couleur de fond gris clair */
}


/* =========================================================
SECTION HERO (image principale en haut)
========================================================= */

.hero{
    background:url("../images/hero.jpg") center/cover; /* Image centrée et couvre toute la zone */
    height:420px;             /* Hauteur fixe de la bannière */

    display:flex;             /* Active Flexbox */
    flex-direction:column;    /* Les éléments sont en colonne */
    justify-content:center;   /* Centre verticalement */
    align-items:center;       /* Centre horizontalement */

    color:white;              /* Texte en blanc */
    text-align:center;        /* Texte centré */
}

/* Bouton dans la section hero */
.btn-hero{
    background:#007bff;       /* Couleur bleue */
    padding:12px 25px;        /* Espace intérieur */
    color:white;              
    text-decoration:none;     /* Enlève le soulignement */
    border-radius:5px;        /* Coins arrondis */
    margin-top:15px;          /* Espace au-dessus */
}




/* =========================================================
   PHOTO PRINCIPALE (GRANDE IMAGE)
========================================================= */

.main-photo{
    width:100%;          /* prend toute la largeur */
    height:750px;        /* 🔥 plus grande hauteur */
    object-fit:cover;    /* évite déformation */
    border-radius:10px;  /* coins arrondis */
}

/* =========================================================
CONTENEUR PRINCIPAL
========================================================= */

.container{
    max-width:1200px;         /* Largeur maximale */
    margin:auto;              /* Centre le contenu */
    padding:40px 20px;        /* Espace intérieur */
}


/* =========================================================
SECTION LOGEMENTS (cartes)
========================================================= */

.logements{
    display:grid; /* Utilise CSS Grid pour aligner les cartes */

    /* Colonnes automatiques responsive */
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:25px;                 /* Espace entre les cartes */
    margin-top:30px;
}

/* Carte individuelle */
.logement-card{
    background:white;
    border-radius:8px;        /* Coins arrondis */
    overflow:hidden;          /* Coupe ce qui dépasse */
    box-shadow:0 3px 12px rgba(0,0,0,0.15); /* Ombre */
    text-align:center;
}

/* Image dans la carte */
.logement-card img{
    width:100%;               /* Prend toute la largeur */
    height:200px;             /* Hauteur fixe */
    object-fit:cover;         /* Ajuste l’image sans déformation */
}

/* Titre */
.logement-card h3{
    padding:10px;
}

/* Description */
.logement-card p{
    padding:0 10px 10px;
}

/* Bouton général */
.btn{
    display:inline-block;
    background:#007bff;
    color:white;
    padding:8px 15px;
    text-decoration:none;
    margin-bottom:15px;
    border-radius:4px;
}


/* =========================================================
SECTION FEATURES (avantages)
========================================================= */

.features{
    display:flex;             /* Flexbox */
    justify-content:center;   /* Centre horizontalement */
    gap:40px;                 /* Espace entre blocs */
    padding:40px;
    background:white;
    margin-top:40px;
}

/* Bloc individuel */
.features div{
    max-width:300px;
    text-align:center;
}

/* Bouton retour */
.btn-retour{
    display:inline-block;
    background:#34495e;       /* Gris foncé */
    color:white;
    padding:10px 15px;
    text-decoration:none;
    border-radius:5px;
    font-weight:bold;
}

/* Effet au survol */
.btn-retour:hover{
    background:#2c3e50;
}


/* =========================================================
RESPONSIVE MOBILE
========================================================= */

@media (max-width:768px){

    /* Bouton admin en mobile */
    .navbar .btn-warning{
        padding:6px 8px;      /* Réduit la taille */
        font-size:0;          /* Cache le texte (icône seulement) */

        display:inline-block; /* Empêche largeur complète */
        width:auto;           /* Taille automatique */
    }

    /* Icône du bouton admin */
    .navbar .btn-warning i{
        font-size:16px;
        margin:0;
    }

    /* Centre les éléments du menu */
    .navbar .nav-item{
        text-align:center;
    }

}


/* =========================================================
NAVBAR (BARRE DU HAUT)
========================================================= */
/* 🔥 Navbar compacte (solution complète) */
.navbar {
    padding: 2px 10px !important;   /* très petit espace */
    min-height: 50px;
}

/* Aligne bien le contenu verticalement */
.navbar .container,
.navbar .container-fluid {
    display: flex;
    align-items: center;
}

/* Réduit le logo */
.navbar img {
    height: 35px;
}

/* Réduit texte logo */
.navbar-brand {
    font-size: 18px;
    padding: 0;
    margin: 0;
}

/* Réduit les liens */
.navbar-nav .nav-link {
    padding: 4px 8px !important;
    font-size: 15px;
}

/* Bouton admin */
.navbar .btn {
    padding: 6px 12px;
    font-size: 14px;
}





.photo-container{
position:relative;
width:100%;
}

.photo-title{
position:absolute;
top:50%;
left:50%;

transform:translate(-50%, -50%);

background:rgba(0,0,0,0.6);
color:#fff;

padding:15px 25px;
border-radius:8px;

font-size:24px;
font-weight:bold;

text-align:center;

z-index:10;
}



.badge-green{
background:#28a745;
}

.badge-red{
background:#dc3545;
}



/* ================= FILTRE ================= */

.filter-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:20px;
    background:white;
    padding:15px;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

/* Inputs + select */
.filter-row input,
.filter-row select{
    padding:8px;
    border:1px solid #ccc;
    border-radius:5px;
    height:38px;
}

/* Bouton filtrer */
.filter-row .btn{
    display:inline-block;
    height:38px;
    padding:0 15px;
    white-space:nowrap;
    border:none;
    cursor:pointer;
}

/* Reset */
.btn-retour{
    display:inline-block;
    background:#e74c3c;
    color:white;
    padding:0 15px;
    height:38px;
    line-height:38px;
    border-radius:5px;
    text-decoration:none;
}




/* 🔥 CORRECTION PRINCIPALE */
.filter-row .btn{
    display:inline-block;   /* au lieu de block */
}

/* RESET */
.btn-retour{
    display:inline-block;
    background:#e74c3c;
    color:white;
    padding:10px;
    border-radius:5px;
    text-decoration:none;
    margin-left:5px;
}

/* ===== NAVBAR PRO ===== */
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#2c3e50;
    padding:12px 20px;
    border-radius:8px;
    margin-bottom:20px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

/* LOGO */
.logo{
    color:white;
    font-weight:bold;
    font-size:20px;
}

/* MENU */
.menu{
    display:flex;
    align-items:center;
}

.menu a{
    color:white;
    text-decoration:none;
    margin:0 8px;
    padding:8px 12px;
    border-radius:6px;
    transition:0.2s;
    font-size:14px;
}

.menu a:hover{
    background:#34495e;
}

/* ACTIVE PAGE */
.menu a.active{
    background:#1abc9c;
}

/* USER / LOGOUT */
.user a{
    color:white;
    text-decoration:none;
    background:#e74c3c;
    padding:8px 12px;
    border-radius:6px;
    font-size:14px;
    transition:0.2s;
}

.user a:hover{
    background:#c0392b;
}

/* ===== RESPONSIVE (MOBILE) ===== */
@media(max-width:768px){

    .navbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .menu{
        flex-direction:column;
        width:100%;
        margin-top:10px;
    }

    .menu a{
        width:100%;
        margin:3px 0;
    }

    .user{
        width:100%;
        margin-top:10px;
    }

    .user a{
        display:block;
        width:100%;
        text-align:center;
    }
}


/* ===== NAVBAR PRO ===== */
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#2c3e50;
    padding:12px 20px;
    border-radius:8px;
    margin-bottom:20px;
    box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

/* LOGO */
.logo{
    color:white;
    font-weight:bold;
    font-size:20px;
}

/* MENU */
.menu{
    display:flex;
    align-items:center;
}

.menu a{
    color:white;
    text-decoration:none;
    margin:0 8px;
    padding:8px 12px;
    border-radius:6px;
    transition:0.2s;
    font-size:14px;
}

.menu a:hover{
    background:#34495e;
}

/* ACTIVE PAGE */
.menu a.active{
    background:#1abc9c;
}

/* USER / LOGOUT */
.user a{
    color:white;
    text-decoration:none;
    background:#e74c3c;
    padding:8px 12px;
    border-radius:6px;
    font-size:14px;
    transition:0.2s;
}

.user a:hover{
    background:#c0392b;
}

/* ===== RESPONSIVE (MOBILE) ===== */
@media(max-width:768px){

    .navbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .menu{
        flex-direction:column;
        width:100%;
        margin-top:10px;
    }

    .menu a{
        width:100%;
        margin:3px 0;
    }

    .user{
        width:100%;
        margin-top:10px;
    }

    .user a{
        display:block;
        width:100%;
        text-align:center;
    }
}


/* ===== BADGE STATUT ===== */
.badge-dispo{
    position:absolute;
    top:10px;
    right:10px;
    background:#2ecc71;
    color:white;
    padding:5px 10px;
    font-size:12px;
    border-radius:4px;
    z-index:10;
}

.badge-loue{
    position:absolute;
    top:10px;
    right:10px;
    background:#e74c3c;
    color:white;
    padding:5px 10px;
    font-size:12px;
    border-radius:4px;
    z-index:10;
}