/* ================================
   Page d'accueil - Double scroll inversé
   ================================ */

/* Variable pour le padding des colonnes */
.home-colonnes {
    --home-padding: var(--margin1);
}

/* Reset du content pour la home */
.home-content {
    padding: 0 !important;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

/* Empêcher le scroll sur le body pour la home */
body[data-template="home"] {
    overflow: hidden !important;
}

body[data-template="home"] #content {
    overflow: hidden !important;
}

/* Container des colonnes */
.home-colonnes {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Colonnes */
.home-colonne {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.home-colonne-gauche {
    background-color: var(--couleurFond1);
}

.home-colonne-droite {
    background-color: var(--couleurFond3);
}

/* Inner container pour le scroll */
.home-colonne-inner {
    display: flex;
    flex-direction: column;
    padding: var(--home-padding);
}

/* Wrapper pour chaque image */
.home-image-wrapper {
    margin-bottom: var(--spacing, 50px);
    display: flex;
    width: 100%;
}

/* Alignements desktop (horizontal) */
.home-image-wrapper.align-start {
    justify-content: flex-start;
}

.home-image-wrapper.align-end {
    justify-content: flex-end;
}

.home-image-wrapper.align-random {
    justify-content: flex-start;
    /* padding-left calculé par JS pour éviter les débordements */
}

/* Container image */
.home-image-container {
    position: relative;
}

.home-image-container img {
    display: block;
    filter: grayscale(100%);
    max-width: none; /* Annule le reset.css pour permettre les dimensions JS */
    height: auto !important; /* Force le ratio naturel */
}

/* Overlay de la date - Desktop: largeur de la colonne */
.home-date-overlay {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-around;
    pointer-events: none;
    /* Largeur de la colonne (50% de content_width) */
    width: calc(var(--content_width) / 2);
    /* Positionnement calculé par JS pour couvrir toute la colonne */
    left: calc(-1 * var(--overlay-offset, var(--home-padding)));
}

/* Texte de la date */
.home-date {
    font-family: inherit;
    font-size: 0.705rem;
    line-height: 0.823rem;
    /* line-height: 1.167em; */
    font-weight: bold;
    white-space: nowrap;
}

/* Couleurs des dates selon la colonne */
.home-colonne-gauche .home-date {
    color: var(--couleurText1);
}

.home-colonne-droite .home-date {
    color: var(--couleurText3);
}

/* ================================
   Responsive Tablette (917px - 1200px)
   Topnav sur le côté, colonnes empilées
   ================================ */
@media screen and (max-width: 1200px) and (min-width: 917px) {
    .home-colonnes {
        flex-direction: column;
    }

    .home-colonne {
        width: 100%;
        height: 50%;
    }

    /* Inner container en horizontal */
    .home-colonne-inner {
        flex-direction: row;
        align-items: flex-start;
        padding: var(--home-padding);
        height: 100%;
    }

    /* Pas de soustraction de hauteur car topnav sur le côté */
    .home-content {
        height: 100vh;
        height: 100dvh;
    }

    /* Wrapper pour chaque image - disposition horizontale */
    .home-image-wrapper {
        margin-bottom: 0;
        margin-right: var(--spacing, 50px);
        flex-shrink: 0;
        width: auto;
        height: auto;
    }

    /* Alignements verticaux en mode horizontal */
    .home-image-wrapper.align-start {
        align-self: flex-start;
    }

    .home-image-wrapper.align-end {
        align-self: flex-end;
    }

    .home-image-wrapper.align-random {
        align-self: flex-start;
        /* padding-top calculé par JS */
    }

    /* Overlay date - largeur de l'image */
    .home-date-overlay {
        width: 100%;
        left: 0;
        transform: translateY(-50%);
        justify-content: space-between;
        padding: 0 var(--home-padding);
    }

    /* Cacher la 4ème date */
    .home-date:nth-child(4) {
        display: none;
    }
}

/* ================================
   Responsive Mobile (≤ 916px)
   Topnav en haut, colonnes empilées
   ================================ */
@media screen and (max-width: 916px) {
    .home-colonnes {
        flex-direction: column;
    }

    .home-colonne {
        width: 100%;
        height: 50%;
    }

    /* Inner container en horizontal pour mobile */
    .home-colonne-inner {
        flex-direction: row;
        align-items: flex-start;
        padding: var(--home-padding);
        height: 100%;
    }

    /* Hauteur fixe pour les colonnes mobile - moins la hauteur du header */
    .home-content {
        height: calc(100vh - 80px);
        height: calc(100dvh - 80px);
    }

    /* Wrapper pour chaque image - disposition horizontale */
    .home-image-wrapper {
        margin-bottom: 0;
        margin-right: var(--spacing, 50px);
        flex-shrink: 0;
        width: auto;
        height: auto;
    }

    /* Alignements verticaux en mode horizontal */
    .home-image-wrapper.align-start {
        align-self: flex-start;
    }

    .home-image-wrapper.align-end {
        align-self: flex-end;
    }

    .home-image-wrapper.align-random {
        align-self: flex-start;
        /* padding-top calculé par JS */
    }

    /* Overlay date - largeur de l'image */
    .home-date-overlay {
        width: 100%;
        left: 0;
        transform: translateY(-50%);
        justify-content: space-between;
        padding: 0 var(--home-padding);
    }

    /* Cacher la 4ème date */
    .home-date:nth-child(4) {
        display: none;
    }
}