/*******************************************************************
                STYLE DU COMPOSANT DU DOSSIER
********************************************************************/
.dossier {
    position: relative;
    width: max-content;
    
    &:hover .dossier_contenu {
        transform: rotateX(20deg) skewX(338deg) translate(1.03125rem, 0.21875px);
    }

    .dossier_avantimg {
        z-index: 2;
    }
    
    .dossier_arriereimg, 
    .dossier_contenu > .dossier_avantimg {
        width: 7rem;
    }

    .dossier_contenu {
        position: absolute;
        top: 1.4375rem;
        left: 0.625rem;
        transform: rotateX(0deg) skewX(360deg) translate(0rem, 0rem);
        transition: transform 0.3s ease-in-out;

        .dossier_titre {
            color: #000;
            font-family: var(--police-titres);
            font-size: var(--mobile-taille-miniTextes);
            font-weight: var(--graisseur-normal);
            letter-spacing: -0.0531875rem;
            text-transform: uppercase;
            height: 100%;
            display: grid;
            place-items: center;
        }

        .dossier_informations {
            display: flex;
            position: absolute;
            top: 0;
            margin: 0.625rem 0.9375rem 0.9375rem 0.9375rem;
            /* height: -webkit-fill-available; */
            flex-direction: column;
            justify-content: space-between;
            
    
            .dossier_ligne {
                height: 1.156px;
                width: 100%;
                background-color: #000;
                margin: 0.4rem 0;
            }

            .dossier_icones {
                display: flex;
                align-items: flex-start;
                gap: 0.3rem;
            }
        
            .techno-icone {
                filter: invert(1);
                width: 1.2rem;
            }
        }
    }
}

/* Styles pour les écrans TABLETTE */
@media (min-width: 768px) {
    .dossier {
        .dossier_arriereimg, 
        .dossier_contenu > .dossier_avantimg {
            width: 9rem;
        }

        .dossier_contenu {
            .dossier_titre {
                font-size: 1rem;
            }
        }
    }
}

/* Styles pour les écrans DESKTOP */
@media (min-width: 1024px) {
    .dossier {
        .dossier_arriereimg, 
        .dossier_contenu > .dossier_avantimg {
        }
    }
}