/* font: https://www.herofonts.com/ */

@font-face {
    font-family: NeotericRegular;
    src: url('../fonts/NEOTERIC_regular.ttf');
}


/*------------------------STYLE MOBILE--------------------------- */

@media screen and (max-width: 600px) {
    body {
        margin: 0 auto;
        background-color: #f2efe3e5;
        color: #2a2a2a;
    }
    #header {
        top: 0;
        height: 4em;
        width: 100%;
        background-color: #ffba25;
        display: grid;
        grid-template-areas: "none titre info";
        grid-template-columns: 11% 78% 11%;
        text-align: center;
        align-items: center;
        color: #2a2a2a;
    }
    .titreMonNom {
        font-family: 'NeotericRegular';
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: .3em;
        margin: 0;
        font-size: 1.3em;
        position: relative;
        display: block;
        cursor: pointer;
        padding: 0 .3em;
        grid-area: titre;
        width: fit-content;
        justify-self: center;
    }
    .titreMonNom a {
        color: #2a2a2a;
    }
    .titreMonNom a:active {
        opacity: 0.5;
    }
    .infoNavBtn {
        font-family: 'NeotericRegular';
        font-weight: bold;
        font-size: 1.4em;
        grid-area: info;
        width: fit-content;
        justify-self: center;
        transition: opacity 0.5s ease;
    }
    .infoNavBtn:hover {
        opacity: 70%;
        cursor: pointer;
    }
    .infoNavBtn:active {
        opacity: 100%;
        color: white;
    }
    .aDecorationNone {
        text-decoration: none;
    }
    #global {
        height: 100%;
        margin: 0em 6vw 0 6vw;
        border-top: .5vh solid #2a2a2a;
        border-bottom: .5vh solid #2a2a2a;
        display: flex;
        justify-content: center;
        padding-top: 2em;
        padding-bottom: 2em;
    }
    footer {
        width: 100%;
        padding-top: 1em;
        padding-bottom: 1em;
        font-family: 'Montserrat', sans-serif;
    }
    .copyright {
        margin: 0;
        opacity: .5;
        font-size: .8em;
        padding-left: 6vw;
    }
    .sectionGrid {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 35vh 35vh 35vh 35vh 35vh 35vh 35vh;
        gap: 1.5vh 1.5vh;
        grid-template-areas: "projetrecherche" "ls" "tim2020" "sportlaval" "nihm" "roismokedmeat" "equinox";
        /* Animation d'opacité lorsque load  */
        animation: opaciteSections 1s 1 ease-in;
    }
    @keyframes opaciteSections {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 100%;
        }
    }
    .recherche {
        grid-area: projetrecherche;
    }
    .ls {
        grid-area: ls;
    }
    .nihm {
        grid-area: nihm;
    }
    .tim {
        grid-area: tim2020;
    }
    .sportlaval {
        grid-area: sportlaval;
    }
    .roismokedmeat {
        grid-area: roismokedmeat;
    }
    .equinox {
        grid-area: equinox;
    }
    .gridItem {
        border: .5vh solid #2a2a2a;
    }
    .gridItem:hover {
        cursor: pointer;
    }
    .imgContainer {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        box-sizing: border-box;
        border: 1vh solid #f2efe3;
    }
    #recherche {
        background-image: url("../medias/projetRecherche_preview.png");
    }
    #ls {
        background-image: url("../medias/lastspark_preview.webp");
    }
    #nihm {
        background-image: url("../medias/nihm_preview.webp");
    }
    #tim {
        background-image: url("../medias/tim_preview.webp");
    }
    #roismokedmeat {
        background-image: url("../medias/roismokedmeat_preview.webp");
    }
    #equinox {
        background-image: url("../medias/equinox_preview.webp");
    }
    #sportlaval {
        background-image: url("../medias/sportlaval_preview.webp");
    }
    /* Strikethrough animation pour Titre Mon nom */
    .titreMonNom:before,
    .titreMonNom:after {
        content: '';
        position: absolute;
        width: 0%;
        height: .4vh;
        top: 50%;
        margin-top: -0.5px;
        background: #2a2a2a;
    }
    .titreMonNom:before {
        left: -2.5px;
    }
    .titreMonNom:after {
        right: 2.5px;
        background: #2a2a2a;
        transition: width 1s ease;
    }
    .titreMonNom:hover:before {
        background: #2a2a2a;
        width: 100%;
        transition: width 1s ease;
    }
    .titreMonNom:hover:after {
        background: transparent;
        width: 100%;
        transition: 0s;
    }
    /* Menu Contact */
    #menuContact {
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 2;
        top: 0;
        left: 100%;
        background-color: black;
        transition: 0.8s;
        transition-timing-function: ease-out;
        flex-direction: row;
        font-family: 'Montserrat', sans-serif;
        color: white;
    }
    .menuContactContent {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .zoneTexte {
        padding: 2em 2em 0 2em;
        display: flex;
        flex-direction: column;
    }
    .zoneImgProfil {
        display: none;
    }
    .xFermerNav {
        font-size: 2em;
        transition: opacity 0.5s ease;
        width: fit-content;
        padding-bottom: 1em;
    }
    .xFermerNav:hover {
        opacity: 40%;
        cursor: pointer;
    }
    .xFermerNav:active {
        opacity: 100%;
        color: #ffba25;
    }
    .ligneSeparationContact {
        border-top: .2vh solid white;
        padding-top: 1em;
    }
    .descriptionContact {
        font-size: 1.15em;
        letter-spacing: .15em;
        line-height: 2em;
        margin: 0;
        padding-bottom: 1em;
    }
    .liensContactIcons {
        font-size: 1.7em;
        display: flex;
        align-items: center;
        padding-bottom: 1em;
    }
    .liensContactIcons>* {
        padding-right: 4vw;
    }
    .liensContactIcons>a {
        transition: opacity 0.5s ease;
        color: #ffba25;
    }
    .liensContactIcons>a:hover {
        opacity: 40%;
        cursor: pointer;
    }
    .liensContactIcons>a:active {
        color: #ffba25;
        opacity: 100%;
    }
    .separater {
        color: white;
    }
    .listeCompetences {
        margin: 0;
        padding: 0;
        font-size: 1.3em;
        letter-spacing: .15em;
        line-height: 2em;
    }
    /* ------------------------- PROJETS ----------------------------- */
    #projetRecherche {
        display: none;
    }
    #projetLs {
        display: none;
    }
    #projetNihm {
        display: none;
    }
    #projetTim {
        display: none;
    }
    #projetSportLaval {
        display: none;
    }
    #projetRoiSmokedMeat {
        display: none;
    }
    #projetEquinox {
        display: none;
    }
    .contentProjet {
        font-family: 'Montserrat', sans-serif;
        width: 100%;
        /* Animation d'opacité lorsque load  */
        animation: opaciteSections 1s 1 ease-in;
    }
    .headerProjet {
        display: flex;
        justify-content: space-between;
        font-size: .5em;
        letter-spacing: .4em;
        color: #2a2a2a;
        text-transform: uppercase;
    }
    .xRetourAccueil {
        transition: color 0.5s ease;
        color: #2a2a2a;
    }
    .xRetourAccueil:hover {
        color: #ffba25;
        cursor: pointer;
    }
    /* -------carrousel-------- */
    .slider {
        width: 100%;
        text-align: center;
        align-self: center;
        padding-top: 4vh;
    }
    .slides {
        display: flex;
        overflow-x: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding-bottom: 1em;
    }
    .slides>div {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 100%;
        transform-origin: center center;
        transform: scale(1);
        transition: transform 0.5s;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 6em;
    }
    .imgSelect {
        max-height: 20vh;
        object-fit: fill;
    }
    /* Exception Equinox */
    .contentEquinox {
        padding-top: 4vh;
        display: flex;
        flex-flow: column;
        font-size: 6em;
    }
    #slide-equinox-1 {
        margin-bottom: .5em;
        align-self: center;
    }
    #slide-equinox-2 {
        align-self: center;
    }
    /* Exception Projet recherche */
    .containerIMGTopRecherche {
        width: 100%;
        text-align: center;
        align-self: center;
        padding-top: 2vh;
    }
    .imgTopRecherche {
        width: 100%;
    }
    .descriptionRecherche {
        color: black;
        font-size: .7em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
        padding-bottom: 7em;
        padding-top: 2em;
        margin: 0;
    }
    .sectionsRecherche {
        width: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding-bottom: 7em;
    }
    .sectionsRecherche:last-child {
        padding-bottom: 2em;
    }
    .sectionsRecherche p {
        margin: 0;
        font-size: .8em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
        padding: 2em .5em 0 .5em;
    }
    #sousSectionIMGRecherche1 {
        width: 80%;
        align-self: center;
    }
    #sousSectionIMGRecherche2 {
        width: 100%;
        align-self: center;
    }
    #sousSectionIMGRecherche3 {
        width: 80%;
        align-self: center;
    }
    .iframeContainer {
        align-self: center;
        height: 30vh;
        width: 80vw;
    }
    .iframeProjetRecherche {
        height: 100%;
        width: 100%;
        border: none;
        padding: 0;
        margin: 0;
    }
    .hoverLiensRecherche a {
        color: #ffba25;
        transition: opacity 0.5s ease;
        opacity: 100%
    }
    .hoverLiensRecherche a:hover {
        opacity: 50%;
    }
    .hoverLiensRecherche a:active {
        opacity: 0.5;
    }
    /* ----overlay img---- */
    .containerIMG {
        max-height: 20vh;
        position: relative;
        color: white;
    }
    .overlayIMG {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.9);
        overflow: hidden;
        width: 100%;
        height: 0;
        transition: .5s ease;
    }
    .containerIMG:hover .overlayIMG {
        height: 100%;
    }
    .frameFigma {
        border: 1vw solid black;
        width: 70vw;
        height: 25vh;
    }
    .descriptionProjet {
        font-size: .2em;
        letter-spacing: .2em;
        text-align: left;
        position: absolute;
        top: 50%;
        left: 40%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
    }
    .descriptionProjet p {
        line-height: 1.9em;
    }
    .descriptionBas {
        color: black;
        font-size: .8em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
    }
    .textHighlight {
        color: #ffba25;
    }
    .containerDots {
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
    }
    .dot {
        position: relative;
        cursor: pointer;
        height: 1.2vh;
        width: 1.2vh;
        margin: 0 1.7vw;
        background-color: black;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.5s ease;
    }
    .dot:hover {
        background-color: #ffba25;
    }
    .dot:focus {
        background-color: #ffba25;
    }
    .dot:active {
        background-color: #ffba25;
    }
    .documentDot {
        width: fit-content;
        border-radius: 10em;
        padding: .5em 1em .5em 1em;
        text-decoration: none;
        color: white;
        display: flex;
        align-items: center;
        font-size: .5em;
        margin: 0 1vw
    }
    .hoverLiens a {
        color: black;
        transition: color 0.5s ease;
    }
    .hoverLiens a:hover {
        color: #ffba25;
    }
    .hoverLiens a:active {
        opacity: 0.5;
    }
}


/*------------------------ STYLE TABLETTE ---------------------*/

@media screen and (max-width: 769px) and (min-width: 600px) {
    body {
        margin: 0 auto;
        background-color: #f2efe3e5;
        color: #2a2a2a;
    }
    #header {
        top: 0;
        height: 5em;
        width: 100%;
        background-color: #ffba25;
        display: grid;
        grid-template-areas: "none titre info";
        grid-template-columns: 7% 86% 7%;
        text-align: center;
        align-items: center;
        color: #2a2a2a;
    }
    .titreMonNom {
        font-family: 'NeotericRegular';
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: .3em;
        margin: 0;
        font-size: 2.2em;
        position: relative;
        display: block;
        cursor: pointer;
        padding: 0 .3em;
        grid-area: titre;
        width: fit-content;
        justify-self: center;
    }
    .titreMonNom a {
        color: #2a2a2a;
    }
    .titreMonNom a:active {
        opacity: 0.5;
    }
    .infoNavBtn {
        font-family: 'NeotericRegular';
        font-weight: bold;
        font-size: 2.1em;
        grid-area: info;
        width: fit-content;
        justify-self: center;
        transition: opacity 0.5s ease;
    }
    .infoNavBtn:hover {
        opacity: 70%;
        cursor: pointer;
    }
    .infoNavBtn:active {
        opacity: 100%;
        color: white;
    }
    .aDecorationNone {
        text-decoration: none;
    }
    #global {
        height: 100%;
        margin: 0em 8vw 0 8vw;
        border-top: .5vh solid #2a2a2a;
        border-bottom: .5vh solid #2a2a2a;
        display: flex;
        justify-content: center;
        padding-top: 3em;
        padding-bottom: 2em;
    }
    footer {
        width: 100%;
        padding-top: 1em;
        padding-bottom: 1em;
        font-family: 'Montserrat', sans-serif;
    }
    .copyright {
        margin: 0;
        opacity: .5;
        font-size: 1em;
        padding-left: 8vw;
    }
    .sectionGrid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 35vh 35vh 35vh 35vh;
        gap: 2vh 2vh;
        grid-template-areas: "projetrecherche ls" "tim2020 tim2020" "sportlaval nihm" "roismokedmeat equinox";
        /* Animation d'opacité lorsque load  */
        animation: opaciteSections 1s 1 ease-in;
    }
    @keyframes opaciteSections {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 100%;
        }
    }
    .recherche {
        grid-area: projetrecherche;
    }
    .ls {
        grid-area: ls;
    }
    .nihm {
        grid-area: nihm;
    }
    .tim {
        grid-area: tim2020;
    }
    .sportlaval {
        grid-area: sportlaval;
    }
    .roismokedmeat {
        grid-area: roismokedmeat;
    }
    .equinox {
        grid-area: equinox;
    }
    .gridItem {
        border: .5vh solid #2a2a2a;
    }
    .gridItem:hover {
        cursor: pointer;
    }
    .imgContainer {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        box-sizing: border-box;
        border: 1vh solid #f2efe3;
    }
    #recherche {
        background-image: url("../medias/projetRecherche_preview.png");
    }
    #ls {
        background-image: url("../medias/lastspark_preview.webp");
    }
    #nihm {
        background-image: url("../medias/nihm_preview.webp");
    }
    #tim {
        background-image: url("../medias/tim_preview.webp");
    }
    #roismokedmeat {
        background-image: url("../medias/roismokedmeat_preview.webp");
    }
    #equinox {
        background-image: url("../medias/equinox_preview.webp");
    }
    #sportlaval {
        background-image: url("../medias/sportlaval_preview.webp");
    }
    /* Strikethrough animation pour Titre Mon nom */
    .titreMonNom:before,
    .titreMonNom:after {
        content: '';
        position: absolute;
        width: 0%;
        height: .4vh;
        top: 50%;
        margin-top: -0.5px;
        background: #2a2a2a;
    }
    .titreMonNom:before {
        left: -2.5px;
    }
    .titreMonNom:after {
        right: 2.5px;
        background: #2a2a2a;
        transition: width 1s ease;
    }
    .titreMonNom:hover:before {
        background: #2a2a2a;
        width: 100%;
        transition: width 1s ease;
    }
    .titreMonNom:hover:after {
        background: transparent;
        width: 100%;
        transition: 0s;
    }
    /* Menu Contact */
    #menuContact {
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 2;
        top: 0;
        left: 100%;
        background-color: black;
        transition: 0.8s;
        transition-timing-function: ease-out;
        flex-direction: row;
        font-family: 'Montserrat', sans-serif;
        color: white;
    }
    .menuContactContent {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .zoneTexte {
        padding: 2em 4em 0 4em;
        display: flex;
        flex-direction: column;
        grid-area: zoneTexte;
        overflow-y: scroll;
    }
    .zoneImg {
        height: 100%;
        width: 100%;
        grid-area: zoneImg;
    }
    .zoneImgProfil {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .xFermerNav {
        font-size: 2.5em;
        transition: opacity 0.5s ease;
        width: fit-content;
        padding-bottom: 1em;
    }
    .xFermerNav:hover {
        opacity: 40%;
        cursor: pointer;
    }
    .xFermerNav:active {
        opacity: 100%;
        color: #ffba25;
    }
    .ligneSeparationContact {
        border-top: .2vh solid white;
        padding-top: 1em;
    }
    .descriptionContact {
        font-size: 1.5em;
        letter-spacing: .15em;
        line-height: 2em;
        margin: 0;
        padding-bottom: 1em;
    }
    .liensContactIcons {
        font-size: 2em;
        display: flex;
        align-items: center;
        padding-bottom: 1em;
    }
    .liensContactIcons>* {
        padding-right: 1vw;
    }
    .liensContactIcons>a {
        transition: opacity 0.5s ease;
        color: #ffba25;
    }
    .liensContactIcons>a:hover {
        opacity: 40%;
        cursor: pointer;
    }
    .liensContactIcons>a:active {
        color: #ffba25;
        opacity: 100%;
    }
    .separater {
        color: white;
    }
    .listeCompetences {
        margin: 0;
        padding: 0;
        font-size: 1.3em;
        letter-spacing: .15em;
        line-height: 2em;
    }
    /* ------------------------- PROJETS ----------------------------- */
    #projetRecherche {
        display: none;
    }
    #projetLs {
        display: none;
    }
    #projetNihm {
        display: none;
    }
    #projetTim {
        display: none;
    }
    #projetSportLaval {
        display: none;
    }
    #projetRoiSmokedMeat {
        display: none;
    }
    #projetEquinox {
        display: none;
    }
    .contentProjet {
        font-family: 'Montserrat', sans-serif;
        width: 100%;
        /* Animation d'opacité lorsque load  */
        animation: opaciteSections 1s 1 ease-in;
    }
    .headerProjet {
        display: flex;
        justify-content: space-between;
        font-size: .7em;
        letter-spacing: .4em;
        color: #2a2a2a;
        text-transform: uppercase;
    }
    .xRetourAccueil {
        transition: color 0.5s ease;
        color: #2a2a2a;
    }
    .xRetourAccueil:hover {
        color: #ffba25;
        cursor: pointer;
    }
    /* -------carrousel-------- */
    .slider {
        width: 100%;
        text-align: center;
        align-self: center;
        padding-top: 4vh;
    }
    .slides {
        display: flex;
        overflow-x: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding-bottom: 2.2em;
    }
    .slides>div {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 100%;
        transform-origin: center center;
        transform: scale(1);
        transition: transform 0.5s;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 6em;
    }
    .imgSelect {
        max-height: 30vh;
        object-fit: fill;
    }
    /* Exception Equinox */
    .contentEquinox {
        padding-top: 4vh;
        display: flex;
        flex-flow: column;
        font-size: 6em;
    }
    #slide-equinox-1 {
        margin-bottom: .5em;
        align-self: center;
    }
    #slide-equinox-2 {
        align-self: center;
    }
    /* Exception Projet recherche */
    .containerIMGTopRecherche {
        width: 100%;
        text-align: center;
        align-self: center;
        padding-top: 3vh;
    }
    .imgTopRecherche {
        width: 100%;
    }
    .descriptionRecherche {
        color: black;
        font-size: 1.2em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
        padding-bottom: 7em;
        padding-top: 2em;
        margin: 0;
    }
    .sectionsRecherche {
        width: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding-bottom: 8em;
    }
    .sectionsRecherche:last-child {
        padding-bottom: 3em;
    }
    .sectionsRecherche p {
        margin: 0;
        font-size: 1em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
        padding: 2em 2em 0 2em;
    }
    #sousSectionIMGRecherche1 {
        width: 70%;
        align-self: center;
    }
    #sousSectionIMGRecherche2 {
        width: 100%;
        align-self: center;
    }
    #sousSectionIMGRecherche3 {
        width: 70%;
        align-self: center;
    }
    .iframeContainer {
        align-self: center;
        height: 30vh;
        width: 60vw;
    }
    .iframeProjetRecherche {
        height: 100%;
        width: 100%;
        border: none;
        padding: 0;
        margin: 0;
    }
    .hoverLiensRecherche a {
        color: #ffba25;
        transition: opacity 0.5s ease;
        opacity: 100%
    }
    .hoverLiensRecherche a:hover {
        opacity: 50%;
    }
    .hoverLiensRecherche a:active {
        opacity: 0.5;
    }
    /* ----overlay img---- */
    .containerIMG {
        max-height: 30vh;
        position: relative;
        color: white;
    }
    .overlayIMG {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.9);
        overflow: hidden;
        width: 100%;
        height: 0;
        transition: .5s ease;
    }
    .containerIMG:hover .overlayIMG {
        height: 100%;
    }
    .frameFigma {
        border: 1vw solid black;
        width: 70vw;
        height: 30vh;
    }
    .descriptionProjet {
        font-size: .2em;
        letter-spacing: .2em;
        text-align: left;
        position: absolute;
        top: 50%;
        left: 40%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
    }
    .descriptionProjet p {
        line-height: 1.9em;
    }
    .descriptionBas {
        color: black;
        font-size: 1.2em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
    }
    .textHighlight {
        color: #ffba25;
    }
    .containerDots {
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
    }
    .dot {
        position: relative;
        cursor: pointer;
        height: 2vh;
        width: 2vh;
        margin: 0 1.7vw;
        background-color: black;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.5s ease;
    }
    .dot:hover {
        background-color: #ffba25;
    }
    .dot:focus {
        background-color: #ffba25;
    }
    .dot:active {
        background-color: #ffba25;
    }
    .documentDot {
        width: fit-content;
        border-radius: 10em;
        padding: .5em 1em .5em 1em;
        text-decoration: none;
        color: white;
        display: flex;
        align-items: center;
        font-size: .8em;
        margin: 0 1vw
    }
    .hoverLiens a {
        color: black;
        transition: color 0.5s ease;
    }
    .hoverLiens a:hover {
        color: #ffba25;
    }
    .hoverLiens a:active {
        opacity: 0.5;
    }
}


/*-------------------- STYLE GRANDE TABLETTE ------------------------------------------*/

@media screen and (max-width: 1200px) and (min-width: 769px) {
    body {
        margin: 0 auto;
        background-color: #f2efe3e5;
        color: #2a2a2a;
    }
    #header {
        top: 0;
        height: 5em;
        width: 100%;
        background-color: #ffba25;
        display: grid;
        grid-template-areas: "none titre info";
        grid-template-columns: 7% 86% 7%;
        text-align: center;
        align-items: center;
        color: #2a2a2a;
    }
    .titreMonNom {
        font-family: 'NeotericRegular';
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: .3em;
        margin: 0;
        font-size: 2.2em;
        position: relative;
        display: block;
        cursor: pointer;
        padding: 0 .3em;
        grid-area: titre;
        width: fit-content;
        justify-self: center;
    }
    .titreMonNom a {
        color: #2a2a2a;
    }
    .titreMonNom a:active {
        opacity: 0.5;
    }
    .infoNavBtn {
        font-family: 'NeotericRegular';
        font-weight: bold;
        font-size: 2.8em;
        grid-area: info;
        width: fit-content;
        justify-self: center;
        transition: opacity 0.5s ease;
    }
    .infoNavBtn:hover {
        opacity: 70%;
        cursor: pointer;
    }
    .infoNavBtn:active {
        opacity: 100%;
        color: white;
    }
    .aDecorationNone {
        text-decoration: none;
    }
    #global {
        height: 100%;
        margin: 0em 8vw 0 8vw;
        border-top: .5vh solid #2a2a2a;
        border-bottom: .5vh solid #2a2a2a;
        display: flex;
        justify-content: center;
        padding-top: 3em;
        padding-bottom: 2em;
    }
    footer {
        width: 100%;
        padding-top: 1em;
        padding-bottom: 1em;
        font-family: 'Montserrat', sans-serif;
        bottom: 0;
    }
    .copyright {
        margin: 0;
        opacity: .5;
        font-size: 1em;
        padding-left: 8vw;
    }
    .sectionGrid {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 35vh 35vh 35vh 35vh;
        gap: 2vh 2vh;
        grid-template-areas: "projetrecherche ls" "tim2020 tim2020" "sportlaval nihm" "roismokedmeat equinox";
        /* Animation d'opacité lorsque load  */
        animation: opaciteSections 1s 1 ease-in;
    }
    @keyframes opaciteSections {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 100%;
        }
    }
    .recherche {
        grid-area: projetrecherche;
    }
    .projetRecherche {
        grid-area: projetrecherche;
    }
    .ls {
        grid-area: ls;
    }
    .nihm {
        grid-area: nihm;
    }
    .tim {
        grid-area: tim2020;
    }
    .sportlaval {
        grid-area: sportlaval;
    }
    .roismokedmeat {
        grid-area: roismokedmeat;
    }
    .equinox {
        grid-area: equinox;
    }
    .gridItem {
        border: .5vh solid #2a2a2a;
    }
    .gridItem:hover {
        cursor: pointer;
    }
    .imgContainer {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        box-sizing: border-box;
        border: 1vh solid #f2efe3;
    }
    #recherche {
        background-image: url("../medias/projetRecherche_preview.png");
    }
    #ls {
        background-image: url("../medias/lastspark_preview.webp");
    }
    #nihm {
        background-image: url("../medias/nihm_preview.webp");
    }
    #tim {
        background-image: url("../medias/tim_preview.webp");
    }
    #roismokedmeat {
        background-image: url("../medias/roismokedmeat_preview.webp");
    }
    #equinox {
        background-image: url("../medias/equinox_preview.webp");
    }
    #sportlaval {
        background-image: url("../medias/sportlaval_preview.webp");
    }
    /* Strikethrough animation pour Titre Mon nom */
    .titreMonNom:before,
    .titreMonNom:after {
        content: '';
        position: absolute;
        width: 0%;
        height: .4vh;
        top: 50%;
        margin-top: -0.5px;
        background: #2a2a2a;
    }
    .titreMonNom:before {
        left: -2.5px;
    }
    .titreMonNom:after {
        right: 2.5px;
        background: #2a2a2a;
        transition: width 1s ease;
    }
    .titreMonNom:hover:before {
        background: #2a2a2a;
        width: 100%;
        transition: width 1s ease;
    }
    .titreMonNom:hover:after {
        background: transparent;
        width: 100%;
        transition: 0s;
    }
    /* Menu Contact */
    #menuContact {
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 2;
        top: 0;
        left: 100%;
        background-color: black;
        transition: 0.8s;
        transition-timing-function: ease-out;
        font-family: 'Montserrat', sans-serif;
        color: white;
    }
    .menuContactContent {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-areas: "zoneTexte zoneImg"
    }
    .zoneTexte {
        padding: 2em 1em 0 3em;
        display: flex;
        flex-direction: column;
        grid-area: zoneTexte;
        margin-bottom: 2em;
        height: 100%;
    }
    .zoneTexteScrollable {
        height: auto;
        padding-right: 2em;
    }
    .zoneImg {
        height: 100%;
        width: 100%;
        grid-area: zoneImg;
    }
    .zoneImgProfil {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    /* scrollbar */
    .zoneTexteScrollable::-webkit-scrollbar {
        width: .3vh;
    }
    .zoneTexteScrollable::-webkit-scrollbar-track {
        background: none;
    }
    .zoneTexteScrollable::-webkit-scrollbar-thumb {
        background: #ffba25;
    }
    .xFermerNav {
        font-size: 4em;
        transition: opacity 0.5s ease;
        width: fit-content;
        padding-bottom: 1em;
    }
    .xFermerNav:hover {
        opacity: 40%;
        cursor: pointer;
    }
    .xFermerNav:active {
        opacity: 100%;
        color: #ffba25;
    }
    .descriptionContact {
        font-size: 1.8em;
        letter-spacing: .15em;
        line-height: 2em;
        margin: 0;
        padding-bottom: 1em;
    }
    .liensContactIcons {
        font-size: 3em;
        display: flex;
        align-items: center;
        padding-bottom: 1em;
    }
    .liensContactIcons>* {
        padding-right: 3vw;
    }
    .liensContactIcons>a {
        transition: opacity 0.5s ease;
        color: #ffba25;
    }
    .liensContactIcons>a:hover {
        opacity: 40%;
        cursor: pointer;
    }
    .liensContactIcons>a:active {
        color: #ffba25;
        opacity: 100%;
    }
    .separater {
        color: white;
    }
    .listeCompetences {
        margin: 0;
        padding: 0;
        font-size: 1.3em;
        letter-spacing: .15em;
        line-height: 2em;
    }
    /* ------------------------- PROJETS ----------------------------- */
    #projetRecherche {
        display: none;
    }
    #projetLs {
        display: none;
    }
    #projetNihm {
        display: none;
    }
    #projetTim {
        display: none;
    }
    #projetSportLaval {
        display: none;
    }
    #projetRoiSmokedMeat {
        display: none;
    }
    #projetEquinox {
        display: none;
    }
    .contentProjet {
        font-family: 'Montserrat', sans-serif;
        width: 100%;
        /* Animation d'opacité lorsque load  */
        animation: opaciteSections 1s 1 ease-in;
    }
    .headerProjet {
        display: flex;
        justify-content: space-between;
        font-size: 1em;
        letter-spacing: .4em;
        color: #2a2a2a;
        text-transform: uppercase;
    }
    .xRetourAccueil {
        transition: color 0.5s ease;
        color: #2a2a2a;
    }
    .xRetourAccueil:hover {
        color: #ffba25;
        cursor: pointer;
    }
    /* -------carrousel-------- */
    .slider {
        width: 100%;
        text-align: center;
        align-self: center;
        padding-top: 4vh;
    }
    .slides {
        display: flex;
        overflow-x: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding-bottom: 2.4em;
        overflow-y: hidden;
    }
    .slides>div {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 100%;
        transform-origin: center center;
        transform: scale(1);
        transition: transform 0.5s;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 6em;
    }
    .imgSelect {
        max-height: 35vh;
        object-fit: fill;
    }
    /* Exception Equinox */
    .contentEquinox {
        width: 100%;
        text-align: center;
        align-self: center;
        padding-top: 4vh;
        display: flex;
        justify-content: space-evenly;
        font-size: 6em;
        flex-flow: row nowrap;
    }
    /* Exception Projet recherche */
    .containerIMGTopRecherche {
        width: 100%;
        text-align: center;
        align-self: center;
        padding-top: 3vh;
    }
    .imgTopRecherche {
        width: 100%;
    }
    .descriptionRecherche {
        color: black;
        font-size: 1.5em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
        padding-bottom: 7em;
        padding-top: 2em;
        margin: 0;
    }
    .sectionsRecherche {
        width: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding-bottom: 10em;
    }
    .sectionsRecherche:last-child {
        padding-bottom: 5em;
    }
    .sectionsRecherche p {
        margin: 0;
        font-size: 1.5em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
        padding: 1.5em 2em 0 2em;
    }
    #sousSectionIMGRecherche1 {
        width: 70%;
        align-self: center;
    }
    #sousSectionIMGRecherche2 {
        width: 100%;
        align-self: center;
    }
    #sousSectionIMGRecherche3 {
        width: 70%;
        align-self: center;
    }
    .iframeContainer {
        align-self: center;
        height: 30vh;
        width: 60vw;
    }
    .iframeProjetRecherche {
        height: 100%;
        width: 100%;
        border: none;
        padding: 0;
        margin: 0;
    }
    .hoverLiensRecherche a {
        color: #ffba25;
        transition: opacity 0.5s ease;
        opacity: 100%
    }
    .hoverLiensRecherche a:hover {
        opacity: 50%;
    }
    .hoverLiensRecherche a:active {
        opacity: 0.5;
    }
    /* ----overlay img---- */
    .containerIMG {
        max-height: 35vh;
        position: relative;
        color: white;
    }
    .overlayIMG {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.9);
        overflow: hidden;
        width: 100%;
        height: 0;
        transition: .5s ease;
    }
    .containerIMG:hover .overlayIMG {
        height: 100%;
    }
    .frameFigma {
        border: 1vw solid black;
        width: 60vw;
        height: 33vh;
    }
    .descriptionProjet {
        font-size: .2em;
        letter-spacing: .2em;
        text-align: left;
        position: absolute;
        top: 50%;
        left: 40%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
    }
    .descriptionProjet p {
        line-height: 1.9em;
    }
    .descriptionBas {
        color: black;
        font-size: 1.8em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
    }
    .textHighlight {
        color: #ffba25;
    }
    .containerDots {
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
    }
    .dot {
        position: relative;
        cursor: pointer;
        height: 2.3vh;
        width: 2.3vh;
        margin: 0 1.7vw;
        background-color: black;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.5s ease;
    }
    .dot:hover {
        background-color: #ffba25;
    }
    .dot:focus {
        background-color: #ffba25;
    }
    .dot:active {
        background-color: #ffba25;
    }
    .documentDot {
        width: fit-content;
        border-radius: 10em;
        padding: .5em 1em .5em 1em;
        text-decoration: none;
        color: white;
        display: flex;
        align-items: center;
        font-size: 1em;
        margin: 0 1vw
    }
    .hoverLiens a {
        color: black;
        transition: color 0.5s ease;
    }
    .hoverLiens a:active {
        opacity: 0.5;
    }
}


/*------------------------- STYLE Grand Ecran -------------------*/

@media screen and (min-width: 1200px) {
    body {
        margin: 0 auto;
        background-color: #f2efe3e5;
        color: #2a2a2a;
        cursor: url("../media/cur.gif"), auto;
        scroll-behavior: smooth;
    }
    #header {
        top: 0;
        height: 5em;
        width: 100%;
        background-color: #ffba25;
        display: grid;
        grid-template-areas: "none titre info";
        grid-template-columns: 7% 86% 7%;
        text-align: center;
        align-items: center;
        color: #2a2a2a;
    }
    .titreMonNom {
        font-family: 'NeotericRegular';
        text-transform: uppercase;
        font-weight: bold;
        letter-spacing: .3em;
        margin: 0;
        font-size: 2.2em;
        position: relative;
        display: block;
        cursor: pointer;
        padding: 0 .3em;
        grid-area: titre;
        width: fit-content;
        justify-self: center;
    }
    .titreMonNom a {
        color: #2a2a2a;
    }
    .titreMonNom a:active {
        opacity: 0.5;
    }
    .infoNavBtn {
        font-family: 'NeotericRegular';
        font-weight: bold;
        font-size: 2.4em;
        grid-area: info;
        width: fit-content;
        justify-self: center;
        transition: opacity 0.5s ease;
    }
    .infoNavBtn:hover {
        opacity: 70%;
        cursor: pointer;
    }
    .infoNavBtn:active {
        opacity: 100%;
        color: white;
    }
    .aDecorationNone {
        text-decoration: none;
    }
    #global {
        height: 100%;
        margin: 0em 12vw 0 12vw;
        border-top: .5vh solid #2a2a2a;
        border-bottom: .5vh solid #2a2a2a;
        display: flex;
        justify-content: center;
        padding-top: 3em;
        padding-bottom: 2em;
    }
    footer {
        width: 100%;
        padding-top: 1em;
        padding-bottom: 1em;
        font-family: 'Montserrat', sans-serif;
    }
    .copyright {
        margin: 0;
        opacity: .5;
        font-size: 1em;
        padding-left: 12vw;
    }
    .sectionGrid {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 40vh 40vh 40vh;
        gap: 2vh 2vh;
        grid-template-areas: "projetrecherche projetrecherche ls ls ls" "tim2020 tim2020 tim2020 sportlaval sportlaval" "nihm roismokedmeat roismokedmeat roismokedmeat equinox";
        /* Animation d'opacité lorsque load  */
        animation: opaciteSections 1s 1 ease-in;
    }
    @keyframes opaciteSections {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 100%;
        }
    }
    .recherche {
        grid-area: projetrecherche;
    }
    .ls {
        grid-area: ls;
    }
    .nihm {
        grid-area: nihm;
    }
    .tim {
        grid-area: tim2020;
    }
    .sportlaval {
        grid-area: sportlaval;
    }
    .roismokedmeat {
        grid-area: roismokedmeat;
    }
    .equinox {
        grid-area: equinox;
    }
    .gridItem {
        border: .5vh solid #2a2a2a;
    }
    .gridItem:hover {
        cursor: pointer;
    }
    .imgContainer {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        box-sizing: border-box;
        border: 1vh solid #f2efe3;
        filter: grayscale(100%);
    }
    .imgContainer:hover {
        /* animation  */
        animation-name: coloriser;
        animation-duration: .5s;
        animation-timing-function: ease-in;
        animation-fill-mode: forwards;
    }
    @keyframes coloriser {
        0% {
            filter: grayscale(100%);
        }
        100% {
            filter: grayscale(0%);
        }
    }
    #recherche {
        background-image: url("../medias/projetRecherche_preview.png");
    }
    #ls {
        background-image: url("../medias/lastspark_preview.webp");
    }
    #nihm {
        background-image: url("../medias/nihm_preview.webp");
    }
    #tim {
        background-image: url("../medias/tim_preview.webp");
    }
    #roismokedmeat {
        background-image: url("../medias/roismokedmeat_preview.webp");
    }
    #equinox {
        background-image: url("../medias/equinox_preview.webp");
    }
    #sportlaval {
        background-image: url("../medias/sportlaval_preview.webp");
    }
    /* Strikethrough animation pour Titre Mon nom */
    .titreMonNom:before,
    .titreMonNom:after {
        content: '';
        position: absolute;
        width: 0%;
        height: .4vh;
        top: 50%;
        margin-top: -0.5px;
        background: #2a2a2a;
    }
    .titreMonNom:before {
        left: -2.5px;
    }
    .titreMonNom:after {
        right: 2.5px;
        background: #2a2a2a;
        transition: width 1s ease;
    }
    .titreMonNom:hover:before {
        background: #2a2a2a;
        width: 100%;
        transition: width 1s ease;
    }
    .titreMonNom:hover:after {
        background: transparent;
        width: 100%;
        transition: 0s;
    }
    /* Menu Contact */
    #menuContact {
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 2;
        top: 0;
        left: 100%;
        background-color: black;
        transition: 0.8s;
        transition-timing-function: ease-out;
        flex-direction: row;
        font-family: 'Montserrat', sans-serif;
        color: white;
    }
    .menuContactContent {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .zoneTexte {
        padding: 2em 6em 0 3em;
        display: flex;
        flex-direction: column;
    }
    .zoneTexteScrollable {
        height: 100%;
    }
    .zoneImg {
        height: 100%;
        width: 100%;
    }
    .zoneImgProfil {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .xFermerNav {
        font-size: 2.5em;
        transition: opacity 0.5s ease;
        width: fit-content;
        padding-bottom: 1em;
    }
    .xFermerNav:hover {
        opacity: 40%;
        cursor: pointer;
    }
    .xFermerNav:active {
        opacity: 100%;
        color: #ffba25;
    }
    .ligneSeparationContact {
        border-top: .2vh solid white;
        padding-top: 1em;
    }
    .descriptionContact {
        font-size: 1.4em;
        letter-spacing: .15em;
        line-height: 2em;
        margin: 0;
        padding-bottom: 1em;
    }
    .liensContactIcons {
        font-size: 2em;
        display: flex;
        align-items: center;
        padding-bottom: 1em;
    }
    .liensContactIcons>* {
        padding-right: 1vw;
    }
    .liensContactIcons>a {
        transition: opacity 0.5s ease;
        color: #ffba25;
    }
    .liensContactIcons>a:hover {
        opacity: 40%;
        cursor: pointer;
    }
    .liensContactIcons>a:active {
        color: #ffba25;
        opacity: 100%;
    }
    .separater {
        color: white;
    }
    .listeCompetences {
        margin: 0;
        padding: 0;
        font-size: 1.3em;
        letter-spacing: .15em;
        line-height: 2em;
    }
    /* ------------------------- PROJETS ----------------------------- */
    #projetRecherche {
        display: none;
    }
    #projetLs {
        display: none;
    }
    #projetNihm {
        display: none;
    }
    #projetTim {
        display: none;
    }
    #projetSportLaval {
        display: none;
    }
    #projetRoiSmokedMeat {
        display: none;
    }
    #projetEquinox {
        display: none;
    }
    .contentProjet {
        font-family: 'Montserrat', sans-serif;
        width: 100%;
        /* Animation d'opacité lorsque load  */
        animation: opaciteSections 1s 1 ease-in;
    }
    .headerProjet {
        display: flex;
        justify-content: space-between;
        font-size: .7em;
        letter-spacing: .4em;
        color: #2a2a2a;
        text-transform: uppercase;
    }
    .xRetourAccueil {
        transition: color 0.5s ease;
        color: #2a2a2a;
    }
    .xRetourAccueil:hover {
        color: #ffba25;
        cursor: pointer;
    }
    /* -------carrousel-------- */
    .slider {
        width: 100%;
        text-align: center;
        align-self: center;
        padding-top: 4vh;
    }
    .slides {
        display: flex;
        overflow-x: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding-bottom: 2.4em;
    }
    .slides>div {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 100%;
        transform-origin: center center;
        transform: scale(1);
        transition: transform 0.5s;
        background-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 6em;
    }
    .imgSelect {
        max-height: 65vh;
        object-fit: fill;
    }
    /* Exception Equinox */
    .contentEquinox {
        width: 100%;
        text-align: center;
        align-self: center;
        padding-top: 4vh;
        display: flex;
        justify-content: space-evenly;
        font-size: 6em;
    }
    /* Exception Projet recherche */
    .containerIMGTopRecherche {
        width: 100%;
        text-align: center;
        align-self: center;
        padding-top: 6vh;
    }
    .imgTopRecherche {
        width: 100%;
    }
    .descriptionRecherche {
        color: black;
        font-size: 1.2em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
        padding-bottom: 7em;
        padding-top: 2em;
        margin: 0;
    }
    .sectionsRecherche {
        width: 100%;
        display: flex;
        flex-flow: column;
        justify-content: center;
        padding-bottom: 10em;
    }
    .sectionsRecherche:last-child {
        padding-bottom: 5em;
    }
    .sectionsRecherche p {
        margin: 0;
        font-size: 1.2em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
        padding: 2em 7em 0 7em;
    }
    #sousSectionIMGRecherche1 {
        width: 40%;
        align-self: center;
    }
    #sousSectionIMGRecherche2 {
        align-self: center;
    }
    #sousSectionIMGRecherche3 {
        width: 45%;
        align-self: center;
    }
    .iframeContainer {
        align-self: center;
        height: 60vh;
        width: 50vw;
    }
    .iframeProjetRecherche {
        height: 100%;
        width: 100%;
        border: none;
        padding: 0;
        margin: 0;
    }
    .hoverLiensRecherche a {
        color: #ffba25;
        transition: opacity 0.5s ease;
        opacity: 100%
    }
    .hoverLiensRecherche a:hover {
        opacity: 50%;
    }
    .hoverLiensRecherche a:active {
        opacity: 0.5;
    }
    /* ----overlay img---- */
    .containerIMG {
        max-height: 65vh;
        position: relative;
        color: white;
    }
    .overlayIMG {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.9);
        overflow: hidden;
        width: 100%;
        height: 0;
        transition: .5s ease;
    }
    .containerIMG:hover .overlayIMG {
        height: 100%;
    }
    .frameFigma {
        border: 1vw solid black;
        width: 58vw;
        height: 60vh;
    }
    .descriptionProjet {
        font-size: .2em;
        letter-spacing: .2em;
        text-align: left;
        position: absolute;
        top: 50%;
        left: 40%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: white;
    }
    .descriptionProjet p {
        line-height: 1.9em;
    }
    .descriptionBas {
        color: black;
        font-size: 1.2em;
        letter-spacing: .2em;
        text-align: center;
        line-height: 1.9em;
        font-weight: bolder;
    }
    .textHighlight {
        color: #ffba25;
    }
    .containerDots {
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        margin-bottom: 3em;
    }
    .dot {
        position: relative;
        cursor: pointer;
        height: 2.3vh;
        width: 2.3vh;
        margin: 0 1.7vw;
        background-color: black;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.5s ease;
    }
    .dot:hover {
        background-color: #ffba25;
    }
    .dot:focus {
        background-color: #ffba25;
    }
    .dot:active {
        background-color: #ffba25;
    }
    .documentDot {
        width: fit-content;
        border-radius: 10em;
        padding: .5em 1em .5em 1em;
        text-decoration: none;
        color: white;
        display: flex;
        align-items: center;
        font-size: .9em;
        margin: 0 1vw
    }
    .hoverLiens a {
        color: black;
        transition: color 0.5s ease;
    }
    .hoverLiens a:hover {
        color: #ffba25;
    }
    .hoverLiens a:active {
        opacity: 0.5;
    }
}