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

    overflow-x: hidden;
}

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat.ttf');
}

*{
    font-family: 'Montserrat';
    box-sizing: border-box;
    scroll-behavior: smooth;

    transition: 1s ease
}

*::-webkit-scrollbar {
    width: 0;
}

.hidden {
    opacity: 0; transform: translateY(50%);
    transition: .75s;
}

.show {
    opacity: 1 !important;
    transform: unset !important;
}

h1, h2, h3, h4, h5, p, a {
    margin: 0;
    text-decoration: none; font-size: var(--textFontSize); color: inherit;
}

h2 b {
    background: var(--base-color); color : var(--secondary-color);
}

section, footer {
    width: 100%; height: 100dvh;
    padding: 5%; 
}

/* Les animations */

@keyframes tagsPop {
    0% {
        scale: 0; transform: translateY(-25%);
    }
    50% {
        scale: 1.15; transform: unset;
    }
    100% {
        scale: unset; 
    }
}

@keyframes copy {
    
    0% {

    }
    50% {
        transform: translateY(-4.5dvh);
    }
    100% {
        transform: unset;
    }
}

@keyframes pulse {
    0% { background-color: #e5e9f0; }
    50% { background-color: #e9edf1; }
    100% { background-color: #e5e9f0; }
}

@keyframes scrollAnim {
    0%{

    }
    50% {
        transform: translateY(10%)
    }
    100% {
        transform: unset;
    }
}
/*  */

:root {
    --base-color : #7D8AF1;
    --secondary-color : #fff;
    --box-color : #f7fbfe;
    --background-color : #7d8bf10c;

    --main-gradient : linear-gradient(45deg,rgb(180, 186, 241) 0%, rgba(125, 138, 241, 1) 65%);
    --preview-gradient : linear-gradient(0deg, rgba(125, 139, 241, 0.75) 0%, rgba(0, 0, 0, 0) 100%);

    --main-border-radius : 4.5dvh;
    --secondary-border-radius : calc(var(--main-border-radius)/3);

    --heroTitleSize : 5rem;
    --titleSize : 4rem;
    --subtitleSize : 2.65rem;
    --textFontSize : 1.25rem;
    --numbersFontSize : 4.5rem;

    --mainLineHeight : 100%;
    --secondaryLineHeight : 80%;

    --titlesFontWeight : 800;

    --clearTexture : brightness(.9) blur(5px); --clearTextureBg : #7d8bf175;

    --boxPadding : 2.5%;
}

.mobileLink {
    display: none;
}

.clearTexture{
    backdrop-filter: var(--clearTexture); background: var(--clearTextureBg); color: var(--base-color);
}

.subtitles {
    font-size: var(--subtitleSize); font-weight: var(--titlesFontWeight); line-height: var(--secondaryLineHeight);
}

/*  */
.logo {
    width: 5dvw;
    animation: .5s tagsPop forwards ease-in;
}

header {
    width: 100%;
    position: fixed; top: 0;  
    z-index: 9999999;

    color: var(--base-color);
    transition: .75s;
}

.hiddenHeader {
    background: transparent !important;
}

.hiddenHeader > div > * {
    transform: translateX(7.5dvw);
}

header * {
    transition: .75s;
}

.hiddenHeader img {
    filter: brightness(2);
}

.topPageElement {
    filter: unset !important;
}

.titles::first-letter{
    text-transform: uppercase;
}

/* Components : Nav & Footer */

nav {
    width: 100%;

    display: flex; justify-content: space-between; align-items: center;
    color: var(--secondary-color); font-weight: bold;
}

header > div > div:first-of-type > a {
    margin: 0 .5%;
}

header > div:last-of-type > a {
    color: var(--secondary-color);
}

header > div:first-of-type {
    width: 100%;

    padding: 1.5%;
    display: flex; justify-content: space-between; align-items: center;
    background: var(--secondary-color);
    
    z-index: 999999999999;
}

header > div > div {
    width: 100%;
    display: flex; justify-content: flex-end; align-items: center;
}

header > div button {
    background: none; border: none;
    color: var(--base-color);
    margin-right: 5%;
}

header > div > div img {
    width: 3.5dvh;
}

button:hover {
    cursor: pointer;
}

#slideMenu {
    width: 100%; height: 100dvh;
    
    position: fixed; top: 0;

    transform: translateY(-100dvh);
    transition: 1s;

    z-index: 999;
}

#slideMenu > div {
    width: 100%; height: fit-content;
    padding: var(--boxPadding); padding-top: 5%;
    display: flex; justify-content: space-evenly; align-items: flex-start;

    background: var(--secondary-color); color: var(--base-color);
}

#slideMenu > div > div {
    display: flex; flex-direction: column; gap: .5dvh;
}

nav > div {
    display: flex; justify-content: center; align-items: center;
}

footer {
    height: auto !important;
    padding: 10%;

    background: var(--base-color); color: var(--secondary-color);
    display: flex; flex-direction: column; align-items: 100%;
}

footer p, footer h4, footer a {
    color: inherit;
}

footer + div {
    width: 100%;
    padding: .5%;
    display: flex; justify-content: flex-end; align-items: center; gap: 2.5%;

    background: #7280ee;
}

footer h3 {
    font-size: 4rem; line-height: 80%;
    width: 55%; margin: 10% 0;
}

footer > div {
    width: 100%;
    display: flex; justify-content: space-between; align-items: flex-start;
}

footer > div > div {
    width: 100%;
}

footer > div:first-of-type > div {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: .5dvh;
}

footer > div:last-of-type > div:last-of-type {
    display: flex; justify-content: flex-end; gap: 1.5dvh;
}

footer > div:first-of-type > div > p:first-of-type {
    font-weight: bold; opacity: .75;
}

footer a > img {
    height: 3.5dvh;
}

footer hr{
    border: 1px solid var(--box-color);
    margin: 3.5% 0;
}

#SWUMention, #SWUMention a{
    display: flex; align-items: center; flex-direction: row;
}
/* Components : HeroSection */

#heroSection {
    background: url(../assets/images/iut.jpg); background-size: cover; background-position: center;
}

#heroSection > div {
    width: 100%; height: 100%;
    position: relative;

    display: flex; flex-direction: column; justify-content: center;
    color: var(--secondary-color);
}

#heroSection > div > div {
    display: flex; flex-direction: column; gap: 3.5dvh;
}

#heroSection > div > div > div {
    display: flex; gap: 1.5dvh;
}

#heroSection img {
    height: 5dvh;
}

#heroSection h1 {
    width: 500px;
    font-size: var(--heroTitleSize); color: inherit; line-height: var(--mainLineHeight);
}

#heroSection b {
    background-color: var(--base-color);
}

/* Components : EventDisplay */

#eventDisplay {
    height: auto;
    position: relative;
    
    padding: 2.5% 7.5%;
    overflow: hidden;

    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3.5dvh; color: var(--base-color);
    background: var(--secondary-color); 
}

#eventContent h2 {
    font-size: var(--subtitleSize); font-weight: var(--titlesFontWeight);
}

.cardDisplay {
    width: 100%; display: flex; gap: 1%; row-gap: 5dvh;
}

.eventItems {
    width:100%;

    color: var(--box-color);
    border-radius: var(--secondary-border-radius);

    display: flex; flex-direction: column; gap: 1.5dvh;
}
.eventItems > div {
    display: flex; flex-direction: column; gap: 1.5dvh; width: 100%;
}
.eventItems > div:last-of-type {
    color: var(--base-color);
}

.eventCards {
    height: 36dvh; width: 100%;
    border-radius: var(--secondary-border-radius); position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
}

.eventItems:hover > div {
    background-size: 105%;
}

.eventCards > div {
    padding: 0 5%; z-index: 9;
    color: var(--box-color);
}

.eventCards > div:first-of-type {
    width: 100%; height: 100%;
    position: absolute; top: 0; z-index: 0;

    border-radius: var(--secondary-border-radius);
}

.eventCards > div:last-of-type {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 5%;
}

.cardGradient {
    background : linear-gradient(0deg, rgba(72, 84, 173, 0.999) 10%, rgba(0, 0, 0, 0) 100%); border-radius: var(--secondary-border-radius);
    z-index: 9;
}

#eventContent {
    width:100%;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}

#eventContent > h2 {
    color: var(--base-color) !important;
}

.timeSeparator{
    font-size: 2rem; color: var(--secondary-color); font-weight: bold;
}

#eventDisplay > div::-webkit-scrollbar {
    width: 0;
}

.categoryTitle {
    margin: 3.5% 0;
    color: var(--secondary-color); line-height: var(--secondaryLineHeight); font-weight: var(--titlesFontWeight); font-size: var(--titleSize);
}

.date, .countdown + p, #eventDisplay .titles {
    color: inherit;
}

.titles {
    font-size: var(--titleSize); line-height: var(--mainLineHeight); font-weight: var(--titlesFontWeight);
}

.date::first-letter {
    text-transform: uppercase;
}

.countdown {
    font-size: 3rem; font-weight: bold; color: inherit;
}

.eventDesc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;

    color: inherit;
}

#slidesCount {
    position: absolute;
    margin: 1.5% 2.5%; bottom: 0;

    display: flex; justify-content: center; align-items: center; z-index: 2;
}

.sphereCount {
    width: 1.5dvh; height: 1.5dvh;
    background: var(--secondary-color); border-radius: .75dvh; outline: 1px solid var(--base-color);

    margin: 0 2.5%;
    transition: 1s;
}

.sphereCount:hover {
    cursor: pointer;
}

.sphereCount:first-of-type {
    width: 25dvh;
    background : var(--base-color);
}

/* Components : CtaDisplay */

#ctaDisplay {
    height: auto;
    padding: 4.5% 10%;

    display: flex; flex-direction: column; gap: 1.5dvh;
}

#backgroundImage {
    width: 100%; height: 100dvh;
    position: fixed; top: 0; left: 0;

    background: url(../assets/images/IUT.jpg); background-size: cover; background-position: center;
    z-index: -1;
}

#ctaDisplay > div:first-of-type {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: var(--secondary-color);
}

#ctaDisplay > div:last-of-type {
    display: flex; justify-content: center; gap: 1.5%;
}

#ctaDisplay > div:last-of-type > div {
    height: auto; width: 100%;
    padding: var(--boxPadding);
    
    background: var(--box-color); border-radius: var(--secondary-border-radius);
    display: flex; flex-direction: column; justify-content: flex-start; gap: 2.5dvh;
}

.icons {
    width: 5dvh; height: 5dvh;
    padding: 2.5%;
    border-radius: var(--main-border-radius); background-color: var(--secondary-color);
}

/* Components : Numbers */

#numbersDisplay {
    height: auto !important;
    padding: 3% 10%;

    display: flex; flex-direction: column; gap: 3.5dvh;

    background-color: var(--base-color); color: var(--secondary-color) !important;
}

#numbersDisplay p, #numbersDisplay h2, #numbersDisplay h2 {
    color: inherit; text-align: center;
}

#numbersDisplay > div {
    display: flex; justify-content: center; align-items: center; gap: 5%;
}

#numbersDisplay > div > div {
    display: flex; flex-direction: column; align-items: center;
}

.numbers {
    font-size: var(--numbersFontSize);
}

/* Pages */

.backgroundImg{
    background: url(../assets/images/iut2.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;
}

.pagesDisplay {
    height: auto !important;
    display: flex; justify-content: space-between; align-items: stretch; gap: 1%;
    padding: 3.5% 10%;
    position: relative;

    background: var(--secondary-color); color: var(--base-color);
}

.pagesDisplay:nth-of-type(even) {
    flex-direction: row-reverse;
    background: var(--box-color);
}

.pagesDisplay > div {
    width: 100%; height: auto; 
    border-radius: var(--main-border-radius);
}

.pagesDisplay > div:last-of-type {
    padding: 2.5%; 
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}

.pagesDisplay a {
    display: flex; justify-content: center; align-items: center; gap: 1.5dvh;
}

.pagesDisplay a:hover {
    font-weight: bold;
}

.pagesDisplay a:hover > img {
    rotate: unset;
}

.pagesDisplay a > img {
    width: 2.5dvh;
    rotate: -45deg;

    transition: 1s;
}

.pagesDisplay > div:last-of-type > p {
    text-align: justify;
}

.pagesDisplay > div:last-of-type > div {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 2.5dvh; width: 100%;
}


.tagList {
    width: 100%;
    display: flex; flex-wrap: wrap; gap: 3.5%; flex-direction: row !important;
}

.tagList > p{
    padding: 2.5%;
    border-radius: var(--main-border-radius); background: var(--box-color);
}

.mobileBackground {
    width: 125%; height: 100dvh;
    top: -5%; left: -5%;
    background: url(../assets/images/iut2.jpg); background-size: cover; background-position: center; background-repeat: no-repeat;

    display: none;
    position: fixed; top: 0; z-index: -1;
}

/* Components : InfosDisplay */

.infosDisplay {
    height: auto; padding: 3.5% 10%;
    color: var(--base-color);
    display: flex; justify-content: space-between; align-items: stretch; gap: 1.5%;
}

.infosDisplay > div {
    width: 100%; height: auto; padding: var(--boxPadding);
    background: var(--box-color); border-radius: var(--secondary-border-radius);

    display: flex; flex-direction: column; justify-content: space-between; gap: 3.5dvh;
}

.clearTexture > div a {
    width: 100%;
    padding: 1.5%;

    background: var(--base-color); color: white; border-radius: var(--secondary-border-radius); text-align: center; font-weight: bold;
}

.clearTexture p {
    text-align: justify; font-size: var(--textFontSize);
}

.btn {
    padding: 2.5dvh 5dvh; text-align: center;
    background: var(--base-color); color: var(--secondary-color); border-radius: var(--secondary-border-radius);
}

.btn:hover {
    font-weight: bold;
}

/* Components : LatestDisplay */

#latestDisplay {
    padding: 3.5% 10%;

    display: flex; flex-direction: column; gap: 1.5dvh;
    background: var(--box-color);
}

#latestDisplay > div:first-of-type h2 {
    color: var(--base-color); font-size: var(--subtitleSize);
}

#latestDisplay > div:last-of-type {
    height: 55dvh; width: 100%;
    padding: 1% 0;
    display: flex; justify-content: center; align-items: center; gap: 1%;
}

#latestDisplay a div {
    height: 100%; 
    border-radius: var(--secondary-border-radius);
    transition: 1s;

    outline: 3px solid #7d8bf100;
}

#latestDisplay a div:hover {
    transform: translateY(-1.5%); outline: 3px solid var(--base-color);
}

.carousel-item:hover {
    filter: unset; box-shadow: 0 0 1dvh rgba(0, 0, 0, 0.259);
}

.carousel-item {
    position: relative;
    height: 100%; width: 100%; flex: 0 0 22.5%;

    border-radius: var(--secondary-border-radius); filter: saturate(0.5) brightness(.8);
}

.carousel-item a {
    display: flex;
    height: 100%;
}

.carousel-item a div {
    width: 100%; height: 100%;
}

/* Components : MetiersDisplay */

#metiersDisplay {
    width: 100%; height: auto !important;
    padding: 10% 15.5%;

    position: relative;
    background: var(--secondary-color); color: var(--base-color);
}

#metiersDisplay > div > div {
    display: flex; flex-direction: column; gap: 3.5dvh;
}
.backgroundMetier {
    width: 100%; height: 85dvh;
    background: none; position: relative;

}
.backgroundMetier > div {
    width: 100%; height: 100%; padding: 2.5%;
    position: absolute; 
    display: flex; justify-content: center; align-items: flex-end; color: var(--secondary-color);
    background: linear-gradient(0deg, rgba(125, 139, 241, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
}

.backgroundMetier > div > div{
    display: flex; flex-direction: column; align-items: center; gap: .5dvh;

    animation: scrollAnim 2s forwards infinite ease;
}

.backgroundMetier p {
    width:fit-content; font-weight: bold;
}

.backgroundMetier > div > div > p:last-of-type {
    rotate: 90deg;
}

.cardCarousel {
    height: auto;
    padding: 2.5% 5%;
    overflow-x: auto;
    scroll-behavior: smooth;

    display: flex; gap: 1%;
    
    cursor: grab;
    user-select: none;
}

.cardCarousel::-webkit-scrollbar {
    width: 0;
}

.metierCard {
    height: auto;
    padding: var(--boxPadding);

    display: flex; flex-direction: column; flex: 0 0 33%; gap: 1.5dvh;
    background: var(--box-color); border-radius: var(--secondary-border-radius); color: var(--base-color);
}

/* Components : QADisplay */

#qADisplay {
    height: unset !important;
    padding: 5% 15%;

    display: flex; color: var(--base-color); justify-content: center; align-items: center; gap: 5%;
    background: var(--secondary-color);
}

.accordeon {
    max-height: 65px;
    padding: 0 1.5%; margin-bottom: 1.5%;
    border-radius: var(--secondary-border-radius);

    transition: .75s; overflow:clip; 

    outline: 3px solid var(--base-color); color: var(--base-color); background: var(--secondary-color);
    font-size: 1.15rem; 
}

.accordeon > div:first-of-type {
    cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
}

.accordeon > div:last-of-type {
    padding: 1.5% 0;
}
/*  */

.competencesDisplay {
    display: flex; gap: 1.5dvh;

    background: unset !important;
}

.competencesDisplay > div {
    width: 100%; height: 100%;
    padding: 5%;

    display: flex; flex-direction: column; justify-content: center; gap: 1.5dvh;
    background: var(--base-color); color: var(--secondary-color) !important; border-radius: 2.5dvh;
}

#companyLogo {
    height: auto !important;
    padding: 2.5% 0;
    background: var(--secondary-color);
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5dvh;
    color: var(--base-color); text-align: center;
}


.infiniteCarrousel{
    width: 100%;
    overflow-x: auto;
    display: flex;
}

.infiniteCarrousel::-webkit-scrollbar {
    width: 0;
}

.group{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6em;
    padding-right: 1em;
    animation: spin 20s infinite linear; 
}

.group img{
    flex: 0 0 5em;
    height: 7em;
    padding: 1em;
    pointer-events: none;
}

@keyframes spin {
    from{
        translate: 0;
    }
    to{
        translate: -100%;
    }
}

@media screen and (max-width: 768px) {
    :root {
        --main-border-radius : 30px;
        --secondary-border-radius : 15px;

        --heroTitleSize : 4.5rem;
        --subtitleSize : 2.25rem;
        --titleSize : 2.25rem;
        --textFontSize : 1.1rem;
        --numbersFontSize : 4.5rem;

        --mainLineHeight : 90%;
        --secondaryLineHeight : 110%;

        --titlesFontWeight : 800;

        --clearTexture : brightness(.9) blur(5px); --clearTextureBg : #7d8bf175;

        --boxPadding : 10%;
    }

    /* Nav & Footer*/

        .logo {
            width: 10dvh;
        }

        header > div:first-of-type {
            padding: 3.5%;
        }
        header > div > div:first-of-type > a{
            display: none;
        }

        .hiddenHeader > div > * {
            transform: unset !important;
            margin: 0;
        }

        header > div > div img {
            width: 4.5dvh;
        }

        footer {
            padding: 10%;
        }

        footer > div {
            flex-direction: column;
        }

        footer > div > div {
            margin: 12% 0;
        }

        /*  */

    h4{
        font-size: var(--subtitleSize); font-weight: var(--titlesFontWeight)
    }
    #heroSection h1 {
        width: auto;
    }
    #slideMenu > div {
        height: 100% !important;
        flex-direction: column; padding-top: var(--boxPadding); gap: 1.5dvh;
    }
    #eventDisplay {
        flex-direction: column;
    }
    #eventDisplay > div:last-of-type {
        height: 100%;
    }
    #eventContent {
        width: auto !important; align-items: center;
        text-align: center;
    }
    #eventDisplay > div:last-of-type > div {
        flex-direction: column; justify-content: flex-end; align-items: center;
        background-size : cover;
    }

    #eventDisplay > div:last-of-type > div:last-of-type{
        justify-content: flex-end;
    }

    .cardDisplay {
        flex-direction: column; gap: 5dvh;
    }

    .timeSeparator {
        display: block;
    }
    .eventCards > div:last-of-type {
        width: 100%;
        display: flex; justify-content: space-between; align-items: center;
    }
    .countdown + p {
        display: none;
    }
    #eventDisplay > div:last-of-type > div:last-of-type {
        align-items: flex-start;
    }
    /*  */

    #numbersDisplay {
        padding : 10%;
    }

    #numbersDisplay > div {
        flex-direction: column;
    }

    /*  */

    #ctaDisplay {
        padding: 4.5%;
        text-align: center;
    }
    #ctaDisplay > div:last-of-type {
        flex-direction: column;
    }
    #ctaDisplay > div:last-of-type > div {
        width: 100%; margin-bottom: 5%; align-items: center;
    }

    .infosDisplay{
        flex-direction: column;
        padding: 5%; gap: 1.5dvh;
    }

    .infosDisplay > div > * {
        margin: 2.5% 0;
    }

    .clearTexture > div a {
        padding: 5%;
    }

    /*  */

    #companyLogo {
        padding: 15% 0;
    }
    /*  */

    #latestDisplay {
        height: 60dvh !important;
        padding: 5%;
    }
    

    #latestDisplay > div:first-of-type {
        justify-content: flex-start;
        gap: 5%;
    }

    /*  */

    .pagesDisplay {
        height: auto !important; padding: 15% 0 !important;
        flex-direction: column !important;
        padding: 0; background: unset !important; border-radius: unset;
    }
    .pagesDisplay > div > div {
        width: 100%;
    }

    .pagesDisplay > div:first-of-type {
        display: block; border-radius: unset !important;
    }
    .pagesDisplay a {
        width: 100%;
    }
    /*  */
    #qADisplay {
        flex-direction: column;
    }
    #qADisplay > * {
        margin: 3.5% 0;
    }
    .accordeon {
        padding: 5%; margin: 5% 0;
    }
    .tagList {
        display: none;
    }
    /*  */
    #metiersDisplay {
        padding: 10%;
    }
    #metiersDisplay > div > div > * {
        margin: 5% 0;
    }
    .metierCard {
        flex: 0 0 90%;
    }
    .cardCarousel {
        gap: 5%; padding: 5%;
    }

    /*  */

    .pagesDisplay {
         background: var(--secondary-color) !important; padding: unset;
    }

    .pagesDisplay > div:last-of-type {
        width: 100% !important;
    }

    .pagesDisplay > div:last-of-type {
        padding: unset;
    }
    .pagesDisplay > div:last-of-type > div {
        padding: 10%;
        background: unset; border-radius: unset; 
    }

    .pagesDisplay > div:last-of-type > div p {
        text-align: justify !important;
    }

    .mobileLink {
        display: block;
    }
    .mobileBackground {
        display: block;
        filter: blur(3.5px);
    }
    .tagList {
        display: none !important;
    }

    .competencesDisplay {
        display: flex !important; flex-direction: column; padding: 2.5%;
    }
    #latestDisplay > div:last-of-type {
        justify-content: flex-start;
    }
    .carousel-item {
        flex: 0 0 100%;
    }
}