body, html {
    position: relative;
}

/* BANIERE */
.baniere-holder {
    width: 100%;
    height: 45vh;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 60%, rgba(255, 255, 255, 0) 98%);
    mask-image: linear-gradient(to bottom, black 60%, rgba(255, 255, 255, 0) 98%);
    margin-bottom: 50px;
}
    .baniere-holder img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover; /* Remplir l'espace de manière proportionnelle */
        object-position: center;
        filter: brightness(0.8);
    }

.baniere-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #fff; /* Couleur du texte */
}
    .baniere-text h1 {
        font-family: "Bebas Neue", sans-serif;
        font-weight: 400;
        font-size: 8rem;
        margin: 0;
        white-space: nowrap;
    }

.baniere-tags {
    margin: 0 0 10% 0;
    display: flex;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
}
    .baniere-tags p {
        margin: 0 20px 0 20px;
        padding: 3px 10px;
        font-style: italic;
        border: 2px solid;
        border-radius: 15px; /* Coins arrondis */
    }

/* STRUCTURE */
section{
    margin: 0px;
    padding: 0px;

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

}

.project-grid {
    width: 55vw;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
}

.project-grid-item {
    margin: 0 0 5px 0;
    overflow: hidden;
    padding: 0;
    position: relative;
}

/* ELEMENTS */
.project-grid-item.full {
    grid-column: span 12;
}
.project-grid-item.demi {
    grid-column: span 6;
}
.project-grid-item.quart {
    grid-column: span 3;
}
.project-grid-item.trois-quart {
    grid-column: span 9;
}
.project-grid-item.tier {
    grid-column: span 4;
}
.project-grid-item.deux-tier {
    grid-column: span 8;
}

.project-grid-item.image {
    overflow: hidden;
}
    .project-grid-item img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.project-grid-item.video {
    overflow: hidden;
    background-color: var(--gris-clair);
    display: flex;
    justify-content: center;
    height: 50vh;
}
    .project-grid-item video {
        width: auto;
        height: 100%;
        display: block;
    }

/* TEXT */
.project-grid-item.titre {
    grid-column: span 12;
    margin-top: 50px;
}
.titre h2 {
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    font-style: italic;
}

.project-grid-item.text {
    text-align: justify;
    text-align-last: left;
}

    .project-grid-item.text-alternatif {
        text-align: justify;
        text-align-last: left;
        padding: 8px 15px;
        font-style: italic;
        border: 2px solid var(--presque-noir-clair);
        border-radius: 8px;
        color: var(--presque-noir-clair);
        font-size: 0.9rem;
    }

p {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
}

/* Ligne de DIVISION */
.line {
    background-color: var(--presque-noir);
    width: 100%;
    height: 2px;
}

/* GRILLE INTER PROJET */
.image-table {
    column-count: 3;
    column-gap: 10px;
}
    .image-table img {
        width: 100%;
        display: block;
        margin-bottom: 10px;
    }

/* BACKGROUND */
.into-projet-bg {
    position: absolute;
    z-index: -100;
    width: 100%;
    height: 100%;
    box-sizing: border-box; /* Pour inclure le padding dans la hauteur du div */
    background-blend-mode: multiply;
    filter: brightness(1.2);
}


/* ---------------------------------------------------------- téléphone ----- */
@media (max-width: 767px) {
    /* BANIERE */
    .baniere-holder {
        height: 40vh; /* 20% de la hauteur de la fenêtre */
    }

    .baniere-text {
        width: 100%;
    }
        .baniere-text h1 {
            text-align: center;
            font-size: 3rem;
            margin: 10% 0 0 0;
            white-space: normal;
        }

    .baniere-tags {
        display: flex;
        align-items: center;
        justify-content: center;
    }
        .baniere-tags p {
            font-size: 1rem;
            white-space: nowrap;
            margin: 7px;
        }

    /* CONTENU */
    section {
        width: 100vw;
    }

    .project-grid {
        box-sizing: border-box;
        width: 100%;
        padding: 7px;
        display: flex;
        align-items: start;
        flex-direction: column;
    }

    .project-grid-item {
        overflow: hidden;
        padding: 0;
        margin:0;
        position: static;
    }
        .project-grid-item.quart {
            height: 40vh;
        }

    .project-grid-item.titre {
        width:100%;
    }

    .project-grid-item.video {
        width:100%;
        height: auto;
    }
        .project-grid-item video {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    
}