/* =========================================================
   AMADAHOME - STYLESS.CSS
   Version nettoyée et responsive
   Header noir + logo personnalisé + sidebar + footer
========================================================= */


/* =========================================================
   RESET / BASE
========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #0f0f0f;
}


/* =========================================================
   HEADER
========================================================= */

.youtube-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 65px;

    display: flex;
    align-items: center;

    padding: 0 15px;
    box-sizing: border-box;

    background: #000000;
    z-index: 5000;

    overflow: visible;
}


/* =========================================================
   HAMBURGER + LOGO
========================================================= */

.logo-area {
    display: flex;
    align-items: center;

    width: 220px;
    min-width: 220px;
    height: 65px;

    flex: 0 0 220px;

    overflow: visible;
}

.menu-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    margin: 0 8px 0 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    background: transparent;
    color: #ffffff;

    font-size: 26px;
    cursor: pointer;
}

.logo-amadahome {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    width: 150px;
    min-width: 0;
    height: 65px;

    flex: 0 1 150px;

    margin: 0;
    padding: 0;

    overflow: visible;
    text-decoration: none;
}

.logo-image {
    display: block;

    width: auto;
    max-width: 150px;

    height: 45px;
    max-height: 45px;

    margin: 0;
    padding: 0;

    object-fit: contain;
}


/* =========================================================
   MENU HORIZONTAL
========================================================= */

.header-menu {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 1 1 auto;
    min-width: 0;
    height: 65px;

    gap: 8px;

    overflow: hidden;
    white-space: nowrap;
}

.header-menu-link {
    display: flex;
    align-items: center;

    flex: 0 0 auto;

    padding: 9px 12px;

    color: #b3b3b3;
    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    border-radius: 8px;
    white-space: nowrap;
}

.header-menu-link:hover,
.header-menu-link.active {
    background: #222222;
    color: #ffffff;
}


/* =========================================================
   BOUTON PUBLIER
========================================================= */

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin-left: 10px;

    flex: 0 0 auto;
    min-width: 0;
}

.create-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
    padding: 10px 16px;

    background: #222222;
    color: #ffffff;

    border-radius: 25px;
    text-decoration: none;

    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.create-button:hover {
    color: #ffffff;
}


/* =========================================================
   SIDEBAR VERTICAL
========================================================= */

.youtube-sidebar {
    position: fixed;

    top: 65px;
    left: 0;
    bottom: 0;

    width: 240px;

    background: #ffffff;

    padding: 15px;

    overflow-y: auto;

    border-right: 1px solid #eeeeee;

    z-index: 4000;

    transform: translateX(0);
    transition: transform 0.3s ease;
}


/* Desktop : fermeture par le JS actuel */
.youtube-sidebar.sidebar-hidden {
    transform: translateX(-100%);
}


/* Mobile : fermé par défaut */
@media (max-width: 850px) {
    .youtube-sidebar {
        top: 60px;
        width: 240px;

        transform: translateX(-100%);

        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15);
    }

    .youtube-sidebar.mobile-open {
        transform: translateX(0);
    }
}


.youtube-sidebar a {
    display: flex;
    align-items: center;

    gap: 18px;

    padding: 12px 15px;
    margin-bottom: 4px;

    text-decoration: none;

    color: #111111;

    border-radius: 10px;

    font-size: 15px;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.youtube-sidebar a:hover,
.youtube-sidebar a.active {
    background: #f2f2f2;
    color: #111111;
}

.youtube-sidebar a.active {
    font-weight: bold;
}

.youtube-sidebar i {
    font-size: 20px;
}

.youtube-sidebar hr {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 15px 0;
}

.sidebar-title {
    font-size: 15px;
    font-weight: bold;

    padding: 10px 15px;

    color: #333333;
}


/* =========================================================
   CONTENU PRINCIPAL
   Compatible avec #main ET .main-content
========================================================= */

#main,
.main-content {
    margin-left: 240px;

    padding: 95px 40px 50px 40px;

    min-height: 500px;

    box-sizing: border-box;

    transition: margin-left 0.3s ease;
}


/* Menu fermé sur desktop */
#main.full-width,
.main-content.full-width {
    margin-left: 0;
}


/* Compatibilité avec la nouvelle classe JS */
#main.menu-open,
.main-content.menu-open {
    margin-left: 240px;
}


/* =========================================================
   BREADCRUMBS
========================================================= */

.breadcrumbs {
    padding: 20px 0;
    background: #ffffff;
}

.breadcrumbs .container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
}

.breadcrumbs h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;

    list-style: none;

    margin: 0;
    padding: 0;

    gap: 8px;

    font-size: 13px;
}

.breadcrumbs a {
    color: #111111;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}


/* =========================================================
   PAGE À PROPOS
========================================================= */

.about {
    padding: 30px 0 60px;
}

.about-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
}

.about img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

.about-content {
    padding: 20px 30px;
}

.about-content h2 {
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 600;
}

.about-content p {
    margin-bottom: 15px;
    color: #444444;
    line-height: 1.7;
}


/* =========================================================
   GRILLE DES BIENS
========================================================= */

.property-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(250px, 1fr));

    gap: 35px 20px;
}

.property-card {
    cursor: pointer;
    min-width: 0;
}

.property-carousel {
    position: relative;

    overflow: hidden;

    border-radius: 12px;

    background: #eeeeee;
}

.property-carousel img {
    width: 100%;
    height: 220px;

    object-fit: cover;

    display: block;
}

.property-info {
    margin-top: 8px;
}

.property-icon,
.property-category {
    display: none;
}

.property-text {
    width: 100%;
}

.property-title {
    font-size: 17px;
    font-weight: bold;

    margin: 0 0 2px;

    text-transform: capitalize;
    line-height: 1.2;
}

.property-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.property-location {
    font-size: 14px;
    color: #606060;

    margin: 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.details-button {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    margin: 0;
    padding: 5px 10px;

    background: #f2f2f2;

    border-radius: 18px;

    color: #111111;
    text-decoration: none;

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

    white-space: nowrap;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.details-button:hover {
    background: #dddddd;
    color: #111111;
}


/* =========================================================
   TITRES / AUCUN RESULTAT
========================================================= */

.page-title {
    margin-bottom: 30px;
}

.page-title h2 {
    font-size: 27px;
    font-weight: bold;
    margin-bottom: 7px;
}

.page-title p {
    color: #606060;
    margin: 0;
}

.no-results {
    text-align: center;
    padding: 70px 20px;
    color: #606060;
}

.no-results h3 {
    margin-top: 15px;
    color: #111111;
}


/* =========================================================
   FOOTER
========================================================= */

.amadahome-footer {
    margin-left: 240px;

    background: #000000;
    color: #ffffff;

    border-top: 1px solid #222222;

    margin-top: 30px;

    padding: 35px 30px 20px;

    font-family: Arial, Helvetica, sans-serif;

    transition: margin-left 0.3s ease;
}

.amadahome-footer.full-width {
    margin-left: 0;
}

.amadahome-footer.menu-open {
    margin-left: 240px;
}

.footer-container {
    max-width: 1300px;
    margin: 0 auto;
}

.footer-main {
    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr;

    gap: 60px;

    padding-bottom: 30px;
}

.footer-brand {
    max-width: 400px;
}

.footer-title {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: -0.3px;

    margin-bottom: 15px;
}

.footer-logo-icon {
    width: 38px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ff0000;
    color: #ffffff;

    border-radius: 8px;

    font-size: 17px;
}

.footer-description {
    margin: 0;

    color: #b3b3b3;

    font-size: 14px;
    font-weight: 400;

    line-height: 1.6;
}

.footer-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-section h4 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;
}

.footer-section a {
    display: block;

    margin-bottom: 10px;

    color: #b3b3b3;

    font-size: 14px;
    font-weight: 400;

    text-decoration: none;

    transition: color 0.2s ease;
}

.footer-section a:hover {
    color: #ffffff;
}

.footer-section p {
    display: flex;
    align-items: center;

    gap: 10px;

    margin: 0 0 12px;

    color: #b3b3b3;

    font-size: 14px;
}

.footer-section p i {
    color: #ffffff;
    font-size: 16px;
}

.footer-divider {
    width: 100%;
    height: 1px;

    background: #2a2a2a;

    margin: 0 0 20px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;
}

.footer-bottom p {
    margin: 0;

    color: #888888;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.5;
}

.footer-bottom p:last-child {
    text-align: right;
}


/* =========================================================
   MENU MOBILE DU HEADER
========================================================= */

.mobile-menu {
    display: none;

    position: fixed;

    top: 65px;
    left: 0;

    width: 270px;
    max-width: 85vw;

    height: calc(100vh - 65px);

    background: #ffffff;

    z-index: 4900;

    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.15);

    overflow-y: auto;

    padding: 15px 0;
}

.mobile-menu.mobile-open {
    display: block;
}

.mobile-menu a {
    display: flex;
    align-items: center;

    gap: 14px;

    width: 100%;

    padding: 14px 22px;

    color: #222222;
    text-decoration: none;

    font-size: 15px;
}

.mobile-menu a i {
    width: 22px;
    font-size: 18px;
}

.mobile-menu a:hover,
.mobile-menu a.active {
    background: #f2f2f2;
    font-weight: 600;
}


/* =========================================================
   RESPONSIVE - 1200 PX
========================================================= */

@media (max-width: 1200px) {

    .logo-area {
        width: 200px;
        min-width: 200px;
        flex-basis: 200px;
    }

    .logo-amadahome {
        max-width: 145px;
    }

    .logo-image {
        max-width: 145px;
        height: 43px;
        max-height: 43px;
    }

    .header-menu-link {
        font-size: 13px;
        padding: 8px 8px;
    }

    .property-grid {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
    }
}


/* =========================================================
   TABLETTE - 850 PX
========================================================= */

@media (max-width: 850px) {

    .youtube-header {
        height: 60px;
        padding: 0 8px;
    }

    /* Le menu horizontal reste visible */
    .header-menu {
        height: 60px;
        justify-content: flex-start;
        gap: 4px;
        overflow: hidden;
    }

    .header-menu-link {
        font-size: 12px;
        padding: 6px 5px;
    }

    /* LOGO : aucune largeur forcée qui puisse le couper */
    .logo-area {
        width: auto;
        min-width: 0;

        flex: 0 1 auto;

        height: 60px;

        overflow: visible;
    }

    .logo-amadahome {
        width: auto;
        min-width: 0;

        max-width: 120px;

        flex: 0 1 auto;

        height: 60px;

        overflow: visible;
    }

    .logo-image {
        width: auto;
        max-width: 120px;

        height: 38px;
        max-height: 38px;

        object-fit: contain;
    }

    .header-right {
        margin-left: auto;
        flex: 0 0 auto;
    }

    /* Contenu */
    #main,
    .main-content {
        margin-left: 0;
    }

    /*
       Quand le menu vertical mobile est ouvert,
       le contenu est décalé et n'est plus recouvert.
    */
    body:has(.youtube-sidebar.mobile-open) #main,
    body:has(.youtube-sidebar.mobile-open) .main-content {
        margin-left: 240px;
    }

    body:has(.youtube-sidebar.mobile-open) .amadahome-footer {
        margin-left: 240px;
    }

    /* Footer */
    .amadahome-footer {
        margin-left: 0;
        padding: 30px 25px 20px;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-brand {
        grid-column: 1 / -1;
        max-width: 600px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .footer-bottom p:last-child {
        text-align: left;
    }

    .mobile-menu {
        top: 60px;
        height: calc(100vh - 60px);
    }
}




@media (max-width: 850px) {

    #main,
    .main-content {
        margin-left: 0;
        padding: 85px 25px 40px 25px;
    }

    body:has(.youtube-sidebar.mobile-open) #main,
    body:has(.youtube-sidebar.mobile-open) .main-content {
        margin-left: 240px;
    }

    body:has(.youtube-sidebar.mobile-open) .amadahome-footer {
        margin-left: 240px;
    }
}
/* =========================================================
   MOBILE - 700 PX
========================================================= */

@media (max-width: 700px) {

    .youtube-header {
        height: 60px;
        padding: 0 6px;
    }

    .logo-area {
        width: 105px;
        min-width: 105px;
        height: 60px;

        flex: 0 0 105px;

        overflow: visible;
    }

    .menu-toggle {
        width: 30px;
        height: 34px;

        flex: 0 0 30px;

        margin-right: 3px;
    }

    .logo-amadahome {
        width: auto;
        min-width: 0;

        max-width: 72px;

        height: 60px;

        flex: 0 1 auto;

        overflow: visible;
    }

    .logo-image {
        width: auto;
        max-width: 72px;

        height: 32px;
        max-height: 32px;

        object-fit: contain;
    }

    .header-menu {
        height: 60px;
        justify-content: flex-start;
        gap: 2px;
        overflow: hidden;
    }

    .header-menu-link {
        font-size: 12px;
        font-weight: 500;
        padding: 6px 5px;
    }

    .header-right {
        margin-left: 4px;
        flex: 0 0 36px;
    }

    .create-button {
        width: 36px;
        height: 36px;

        padding: 0;
        border-radius: 50%;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .create-button span {
        display: none;
    }

    .main-content,
    #main {
        padding-left: 15px;
        padding-right: 15px;
    }

    .property-grid {
        grid-template-columns: 1fr;
    }

    .property-carousel img {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .page-title h2 {
        font-size: 23px;
    }

    .youtube-sidebar {
        width: 240px;
    }

    .amadahome-footer {
        padding: 30px 15px 20px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-title {
        font-size: 19px;
    }

    .footer-description {
        font-size: 13px;
    }

    .footer-section h4 {
        margin-bottom: 12px;
    }

    .footer-bottom p {
        font-size: 11px;
    }
}


/* =========================================================
   TRÈS PETIT ÉCRAN - 450 PX
   Mon Compte + S'inscrire passent dans le hamburger
========================================================= */

@media (max-width: 450px) {

    .youtube-header {
        padding: 0 5px;
    }

    .logo-area {
        width: 88px;
        min-width: 88px;
        flex: 0 0 88px;

        overflow: visible;
    }

    .menu-toggle {
        width: 28px;
        height: 32px;

        flex: 0 0 28px;

        margin-right: 2px;
    }

    /*
       Logo réduit proportionnellement,
       sans crop.
    */
    .logo-amadahome {
        width: auto;
        min-width: 0;

        max-width: 58px;

        flex: 0 1 auto;

        overflow: visible;
    }

    .logo-image {
        width: auto;
        max-width: 58px;

        height: 28px;
        max-height: 28px;

        object-fit: contain;
    }

    /* Liens principaux conservés */
    .header-menu-link {
        font-size: 12px;
        padding: 6px 4px;
    }

    /* Ces deux liens sont disponibles dans le hamburger */
    .header-menu .compte-link,
    .header-menu .inscription-link {
        display: none;
    }

    .header-right {
        margin-left: 3px;

        flex: 0 0 34px;
        width: 34px;
    }

    .create-button {
        width: 34px;
        height: 34px;
    }
}