.landing{
    width: 100%;
    font-family: 'Swiss721', sans-serif;
}
.containerlanding{
    margin-top: var(--9);
    display: flex;
    flex-direction: column;
    margin-left: 11.6%;
    margin-right: 3%;
}
.name{
    color: var(--grey);
    opacity: 0.9;
    font-size: 1.5rem;
}
.titlelanding{
    color: var(--white);
    opacity: 0.9;
    margin-top: var(--7);
    font-size: 3rem;
}
.littleaboutme{
    margin-top: var(--8);
    color: var(--grey);
    font-size: 1.5rem;
    opacity: 0.9;
    display: flex;
    justify-content: end;
}
.highlight{
    margin-left: 0.2em;
    position: relative;
    --tw-text-opacity: 1;
    height: 60%;
    transition: 0.1s;
}
/*dotted line under*/
.highlight::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px; /* Épaisseur de la ligne */
    border-bottom: 1px dotted var(--highlighttxt); /* Ligne en pointillé */
    z-index: -1; /* Place la ligne derrière le texte */
}
.highlight:hover{
    background-color: var(--highlightback);
    color: var(--highlighttxt);
}
.about{
    width: 100%;
    font-family: 'Swiss721', sans-serif;
    padding-top: calc(var(--10)*1.2);
    padding-bottom: var(--9);
}
.containerabout{
    margin: var(--7) 3% 0 11.6%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.containerabout2{
    margin: var(--8) 3% 0 11.6%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.subjectabout{
    border-top: 1px solid var(--darkline);
    opacity: 0;
}
.txtabout{
    margin-top: 1rem;
}
.presentation, .skills{
    width: calc(100vw*0.3925);
}
.interests, .tools{
    width: calc(100vw*0.384);
    margin-top: calc(var(--9)*2);
}
.numberabout{
    font-family: "IBM Plex", sans-serif;
}
.numberabout span:nth-child(1) {
    font-size: 1rem;
}

.numberabout span:nth-child(2) {
    font-size: 0.75rem;
}

.numberabout span:nth-child(3) {
    font-size: 1rem;
}
.subtitleabout{
    color: var(--grey);
    display: flex;
    flex-direction: row;
    gap: var(--2);
    margin-bottom: var(--4);
}
.txtsubtitleabout{
    display: flex;
    flex-direction: row;
    margin-top: 2px;
}
.txtaboutme{
    font-size: 1.5rem;
    font-family: 'Swiss721', sans-serif;
}
.tag-canvas {
    width: 100%;
    height: 25rem;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    border: none;
}

.tag-canvas canvas {
    display: block;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--darkline);
}
.tag {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    wrap-option: nowrap;
    font-size: 1rem;
    color: var(--white);
    border: 1px solid var(--white);
    border-radius: 10px; /* Rounded corners */
    box-sizing: border-box;
    transform-origin: center; /* Ensure rotation happens around the center */
    z-index: -1; /* Ensure it appears below the canvas */
    padding: 8px;
}

.tiles-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    gap: var(--3);
}

.tile {
    flex-grow: 1;
    padding: 1rem;
    border: 1px solid var(--tiles);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-family: 'Swiss721', sans-serif;
    position: relative;
    margin: 0;
    transition: transform 0.3s;
    perspective: 1000px;
}

.tile-overlay {
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0); /* Bordure initiale invisible */
    opacity: 0; /* Opacité initiale invisible */
    transition: opacity 0s; /* Transition instantanée pour l'opacité */
    mix-blend-mode: screen; /* Pour l'effet de lumière */
}
.togglearrange{
    aspect-ratio: 1/1;
    margin-top: 2px;
    height: 80%;
    border: 1px solid var(--grey);
    border-radius: 50%;
    margin-left: var(--2);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.pointarrange{
    width: 0;
    opacity: 0;
    height: 0;
    background-color: var(--grey);
    border-radius: 50%;
}

/* selectedwork */

.selectedwork{
    width: 100%;
    font-family: 'Swiss721', sans-serif;
    padding-top: var(--9);
    padding-bottom: var(--9);
}
.containerwork {
    margin: var(--7) 3% 0 11.6%;
    display: flex;
    flex-direction: row;
    gap: var(--3);
    z-index: 2;
    justify-content: space-between;
}
.workselect {
    flex: 1;
    height: 40rem;
    overflow: hidden;
    position: relative;
    transition: filter 0.6s ease, flex 0.8s cubic-bezier(0.5, 0, 0.35, 1);
}

.selecworkimg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    transition: transform 0.3s ease-out;
}

.selecworkimg img {
    position: absolute;
    top: -15%;
    left: -5%;
    height: 130%;
    width: 110%;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}
/*
.workselect:hover {
    flex: 4;
    transition: flex 0.8s cubic-bezier(0.5, 0, 0.35, 1);
}

.containerwork .workselect:hover ~ .workselect,
.containerwork .workselect:hover + .workselect {
    flex: 1.5;
    transition: flex 0.8s cubic-bezier(0.5, 0, 0.35, 1);
}
*/
.containerwork .workselect:not(:hover) {
    flex: 0.9;
    filter: grayscale(90%);
    transition: filter 0.6s ease, flex 0.8s cubic-bezier(0.5, 0, 0.35, 1);
}


/* Le conteneur principal */
.descriptionselecwork {
    position: absolute; /* Changer de absolute à relative pour contenir les pseudo-éléments */
    width: 100%;
    bottom: 0;
    padding: var(--9) 1rem 1rem;
    background: rgba(0,0,0,0);
    z-index: 1; /* Assurez-vous que ce z-index est bien inférieur à d'autres éléments si nécessaire */
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* La pseudo-classe before pour le dégradé */
.descriptionselecwork::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, var(--fadeselecwork) 0%, var(--fadeselecwork) 50%, rgba(0, 0, 0, 0) 100%);
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: -1; /* Positionné derrière le contenu, mais au-dessus d'autres éléments si nécessaire */
}

/* Survol pour rendre le dégradé visible */
.workselect:hover .descriptionselecwork::before {
    opacity: 1;
}

.tagasset{
    border: 1px solid var(--bordertagassets);
    border-radius: 0.5rem;
    font-size: 1rem;
    padding: 0.25rem 0.75rem;
    transition: border 0.2s;
}
.tagasset:hover{
    border: 1px solid var(--bordertagassetshover);
    transition: border 0.2s;
}

.d_title{
    font-size: 3rem;
    width: calc(((100vw - 0.116*100vw - 0.03*100vw - 2*var(--3))/3) - 2rem);
}
.d_tag{
    margin-top: var(--4);
    display: flex;
    flex-direction: row;
    text-wrap: nowrap;
    width: calc(((100vw - 0.116*100vw - 0.03*100vw - 2*var(--3))/3) - 2rem);
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--txttag);
}
.d_desc{
    opacity: 0;
    margin-top: 1.5rem;
    width: calc(((100vw - 0.116*100vw - 0.03*100vw - 2*var(--3))/3) - 2rem);
    text-align: justify;
}
.subtitlesection {
    margin-left: 11.6%;
    position: relative;
    width: fit-content;
    font-size: 2rem;
    color: var(--grey);
    font-weight: 200;
}
.selecwork{
    width: calc(100% - 11.6% - 3%);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.voirall{
    font-size: 1rem;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .titlelanding{
        font-size: 1.5rem !important;
    }
    .littleaboutme{
        font-size: 0.65rem !important;
    }
    .d_title{
        font-size: 2rem;
    }
    .txtaboutme{
        font-size: 1rem !important;
    }
    .tag-canvas{
        height: 40rem !important;
    }
}
@media (max-width: 767px) {
    .containerwork{
        flex-direction: column;
        height: 150vh;
    }
    .d_desc, .d_tag, .d_title{
        width: auto !important;
    }
    .descriptionselecwork{
        align-items: start  !important;
    }
    .titlelanding{
        font-size: 2rem;
    }
    .littleaboutme{
        font-size: 1rem ;
    }
}
@media (max-width: 991px) {
    .titlelanding{
        font-size: 2.5rem;
    }
    .littleaboutme{
        font-size: 1.25rem ;
    }
    .subtitlesection{
        font-size: 1.5rem !important;
    }
}
@media (max-width: 1199px) {

}
@media (max-width: 1599px) {

}