:root {
    /* Body Background gradient anims */
    --body-BgColor-dark: linear-gradient(56deg, rgba(23,25,35,1) 0%, rgba(29,36,47,1) 41%, rgba(34,46,58,1) 50%, rgba(23,25,35,0.9943339884782038) 75%, rgba(23,25,35,0.9943339884782038) 99%);
    --body-BgColor-light: linear-gradient(56deg, rgb(246 247 249) 0%, rgb(242 244 247) 41%, rgb(244 246 247) 50%, rgb(239 239 239 / 99%) 75%, rgb(255 255 255 / 99%) 99%);

    --body-filterDropShadow-dark: drop-shadow(2px 4px 6px black);
    --body-filterDropShadow-light: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));

    --white: white;
    --black: #181c26;

    --background-headerColor: #0f2737;

    --secondaryColor: #19ddbc;
    --secondaryColorVif: #00ffd5;
    --secondaryColorMat: #26ceb2;
    --secondaryColorVeryMat: #42ab9a;
}

.quoteAuthor {
    color:#ef3b2d;
    font-weight: bold;
}


.pageSectionTitleFormations {
    margin-block-start: 2em !important;
}
.pageSectionTitleHobbies {
    margin-block-start: 2em !important;
}





.cvGrisedText {
    font-size: 85%;
    opacity: 0.8;
}



.containerToggleLight {

    /* Temporaire: checkbox disabled HTML  */
    opacity: 0.2;

    position: absolute;
    right: 5px;
    top: 116%;

    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    margin: 0px 12px;
}

#currentThemeIcon {
    font-size: 1.6em;
    align-self: center;
}


.currentThemeIcon {
    color: var(--white);
}
.currentThemeIcon[data-theme="light"] {
    /* color: var(--black); */
    color: white;
}


.switch {
    position: relative;
    display: inline-block;
    /* width: 60px;
    height: 34px; */
    width: 52px;
    height: 27px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cccccc8f;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: '';
    /* height: 26px;
    width: 26px; */
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #1b202b;
}

input:checked + .slider:before {
    transform: translateX(24px);
}


strong {
    color: #ef3b2d;
}

html {
    /* background: linear-gradient(56deg, rgba(23,25,35,1) 0%, rgba(29,36,47,1) 41%, rgba(34,46,58,1) 50%, rgba(23,25,35,0.9943339884782038) 75%, rgba(23,25,35,0.9943339884782038) 99%);
    background-size: 800% 800%;
    background-position: 0% 0%;

    animation: fadeInBody 0.5s forwards ease; */
}

body {

    font-size: 85%;
}

html, body {
    max-width: 100%;
    height: 100%;
    overflow-x: hidden;

    /* background: linear-gradient(56deg, rgba(23,25,35,1) 0%, rgba(29,36,47,1) 41%, rgba(34,46,58,1) 50%, rgba(23,25,35,0.9943339884782038) 75%, rgba(23,25,35,0.9943339884782038) 99%);
    background-size: 800% 800%;
    background-position: 0% 0%;

    animation: fadeInBody 0.5s forwards ease; */
}

    * {
    -webkit-tap-highlight-color: transparent;
    }


/* body::-webkit-scrollbar {
  display: none;
} */


* {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }

/* Hide scrollbar for IE, Edge and Firefox */
body {
    
  /* -ms-overflow-style: none; 
  scrollbar-width: none;   */
}


body[data-theme="light"] {
    background: #f9f6f4;
    /* color: var(--text-color-dark); */
}


body {
    
    /* position: static; */
    position: relative;
    font-family: 'Nunito', sans-serif;

    background: var(--body-BgColor-dark);
    /* background: linear-gradient(56deg, rgba(23,25,35,1) 0%, rgba(29,36,47,1) 41%, rgba(54, 139, 150, 0.6) 50%, rgba(23,25,35,0.9943339884782038) 75%, rgba(23,25,35,0.9943339884782038) 99%); */

    background-size: 800% 800%;

    /* opacity: 0; */
    animation: gradientAnimProjet 2s ease 0s normal forwards running;

    transition: background-color 0.5s, color 0.5s;

    /* Pour footer */
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
/* body:not(#flashPointCache) {
    filter: var(--body-filterDropShadow-dark);
}
body:not(#flashPointCache)[data-theme="light"] {
    filter: var(--body-filterDropShadow-light);
} */

@keyframes gradientAnimProjet {
    from {
        background-position: 75% 35%;
    }
    to {
        background-position: 0% 0%;
    }
}
@keyframes fadeInBody {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.swipeSymbol {
    z-index: 999999;
    position: absolute;
    right: 3%;
    top: 0px;
    font-size: 0.8em;
    color: var(--secondaryColorVif);
    display: flex;
    flex-direction: column;
    text-align: center;
    opacity: 0.7;

    animation: fadePulseSwipe 3s 0s normal ease infinite;
}
@keyframes fadePulseSwipe {
    0% {
        opacity: 0.1;
        transform: translateX(-40px);
    }
    37% {
        opacity: 0.5;
        transform: translateX(10px);
    }
    100% {
        opacity: 0.1;
        transform: translateX(-40px);
    }
}
.swipeImg {
    width: 45px;
}

/* .swipeTxt {
    animation: swipeText 2s 0s normal ease infinite;
}
@keyframes swipeText {
    0% {
        transform: translateX(-50px);
    }
    50% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-50px);
    }
} */

iframe html {
    opacity: 0;
}

main {
    flex:1; /* 4 */
}

.projet1_topleftShape_desktop {
    /* transform: rotate(180deg) translateX(90px) translateY(83px); */
    transform: rotate(180deg);
    width: 50%;
}
.projet1_topleftShape_desktop2 {
    /* transform: translateX(-28px) translateY(-54px); */
    width: 50%;
}


.accueilGrid2 {
    display: inline-flex;

}

.socialFooter {
    margin: 0 7px;
    font-size: 130%;
    transition: all 0.4s ease;
}
.socialFooter:hover {
    color: #ef3b2d;
}

.desktopSlideMargin {
    margin: 10px 5% 40px 5%;
    position: relative;
    overflow: hidden;

    border-top-left-radius: 34px;
    border-bottom-right-radius: 34px;

    overflow: visible;
}

:root {
    --swiper-theme-color: #ef3b2d !important;
}
swiper-container {
    /* height: 22vh; */
    margin-top: 3px;
    height: 100%;
}
swiper-slide {
    /* overflow: hidden; */
    overflow: visible;

    text-align: center;
    color: white;
    font-size: 1.5em;

    margin-right: 0px;
}
.gridProjetHeaderContainer {
    /* position: relative;
    bottom: 50px; */
    margin-top: 15px;
    justify-content: space-around;
    
}

.projetFuncList {
    font-size: 0.8em;
    text-align: left;

    width: fit-content;
    margin: 0 auto;
    min-width: 414px;
}

.swiper-button-prev {
    top: 5% !important;
    /* background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ef3b2d'%2F%3E%3C%2Fsvg%3E") !important; */
    /* color: #ef3b2d !important; */
}
.swiper-button-next {
    top: 5% !important;
    /* background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ef3b2d'%2F%3E%3C%2Fsvg%3E") !important; */
    /* color: #ef3b2d !important; */
}
.swiper-pagination-bullet-active {
    /* background-color: #ef3b2d !important; */
}


/* Container du lightbulb (relativ) et des calques (absolute) */
.lightBulbWrapperDiv {
    filter:drop-shadow(8px 5px 4px black);
    opacity: 0;

    height: 250px;
    position: relative;
    /* margin: 50px; */
    width: 205px;
    /* margin: 0 61px 0 0; */
    margin: 0px 0px 0px 0px;

    transform: scale(0.8);
    
    transition: all 0.4s;

    z-index: 999;

    bottom: 14px;
    left: 27px;
}
.lightBulbWrapperDiv[data-theme="light"] {
    filter:none;

}


/* Rectangle photo Accueil */
#rectangleSvgPath {
    opacity: 0.85;
    transform: scale(0.67);
    fill: none; 
    /* stroke: #ef3b2d;  */
    stroke: var(--secondaryColor);
    stroke-width: 3; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;
}
.rectangleSvg {
    opacity: 0;
    height: 200px;

    position: absolute;
    right: -95px;
    /* height: -webkit-fill-available; */
}

#smileSvgContainer {
    transition: all 0.4s;
}
.smileSvgContainer {
    position: absolute;
    right: -14px;
    bottom: -12px;
    height: 25px;
    width: 62px;
}
.smileSvgContainerResp {
    right: -14px !important;
}
.smileSvg {

}


.swiper {
    overflow: visible;
}
.swiper-container {
    overflow: visible;
}


#sideNavDesktop {
    transform: scale(0.8);

    display: none;
    opacity: 0;

    z-index: 99999;
    position: fixed;
    top: -20px;

    /* border-left: 1px solid rgba(128, 128, 128, 0.3); */
    border-left: 1px solid rgba(128, 128, 128, 0.15);
    transition: all 0.25s;

    right: -65px;
    padding: 5px 27px;
    font-size: 1.25em;
    color: #ffffff94;
    text-align: left;
    padding-inline-start: 0px;
    /* display: inline-flex; */
    flex-direction: column;
    align-items: end;
    /* padding-left: 25px; */
    background: radial-gradient(circle, rgba(25,221,188,0.05) 0%, rgba(2,0,36,0) 70%);
}
#sideNavDesktop li {
    transition: color 0.6s, transform 0.4s;
    padding: 4px 10px;
    width: -webkit-fill-available;
    text-align: right;
}
#sideNavDesktop li:hover {
    color: #ef3b2d;
}   
.sideNavDesktopActif li :hover {
    color: var(--secondaryColor) !important;
}
.sideNavDesktopActif {
    color: var(--secondaryColor) !important;
    font-weight: bold;
    /* text-decoration: underline; */
}
.fadeInDesktopNav {
    display: inline-flex !important;
    animation: fadeIn 0.5s 0s ease forwards;
}

#smilePath {
    transform : translateX(0px) rotateY(47deg);
    transition: all 0.4s;
}
.smilePathResp {
    transform: translateX(0px) rotateY(45deg) !important;
}
.smileSvgPath {
    fill: none; 
    stroke: #ef3b2d; 
    stroke-width: 3; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;
    transition: stroke 0.4s;
}

.bigSmiled {
    background-color: #1a1e29;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;

    right: 9px !important;
    bottom: -16px !important;
    height: 31px !important;
    width: 53px !important;
}

.titleO {
    transition: all 0.4s;
}

.fadeInSlide {
    animation: fadeIn 2s 0s ease forwards;
}

#projectContainer1 {
    /* opacity: 0; */
    opacity: 1;
}
#projectContainer2 {
    /* opacity: 0; */
    opacity: 1;
}



.bonjourSvgContainer {

}
.bonjourSvgPath {
    opacity: 1;
    fill: none; 
    stroke: #2da8ef; 
    stroke-width: 5; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;
    transition: stroke 0.8s ease;
}


.cvUnorderedList {
    position: relative;
    z-index: 99999999;
}


.trainingSvgContainer {
    /* Maj test gradient circular: */
    width: 100px;
    height: 100px;
    /* background: radial-gradient(circle, rgba(239,59,45,0.15) 0%, rgba(2,0,36,0) 70%); */

    position: absolute;
    transform: translate(163px, -66px) rotateX(0deg);
    opacity: 1;
    /* margin-left: 25px; */
    margin-left: 40px;

    /* animation: chapeauDiplome 1.8s 0s linear infinite; */
    animation: chapeauDiplome 2.5s 2s linear infinite;
}
/* @keyframes chapeauDiplome {
    0% {
        opacity: 0.92;
        transform: translate(163px, -66px) rotateX(0deg);
    }
    7% {
        transform: translate(163px, -65px) rotateX(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(163px, -80px) rotateX(28deg) rotate(5deg);
    }
    100% {
        opacity: 0.92;
        transform: translate(163px, -66px) rotateX(0deg);
    }
} */
@keyframes chapeauDiplome {
    0% {
        opacity: 0.92;
        transform: translate(163px, -66px) rotateX(0deg);
    }
    18% {
        transform: translate(163px, -65px) rotateX(29deg);
    }
    50% {
        transform: translate(163px, -79px) rotateX(0deg) rotate(5deg);
    }
    55% {
        opacity: 1;
        transform: translate(163px, -80px) rotateX(0deg) rotate(5deg);
    }
    60% {
        transform: translate(163px, -79px) rotateX(0deg) rotate(5deg);
    }
    100% {
        opacity: 0.92;
        transform: translate(163px, -66px) rotateX(0deg);
    }
}


.formationSvgPath {
    opacity: 1;
    transform:scale(0.8);  
    fill: none; 
    stroke: #ef3b2d; 
    stroke-width: 2; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;
    transition: stroke 0.4s;
}


.skillsSvgContainer {
    /* position: absolute;
    left: 50%;
    transform: translateX(-12%) translateY(-116px);
    opacity: 0.92;
    z-index: -99; */
    position: absolute;
    height: 80px;
    width: 100px;
    top: -38px;
    left: 115%;
    z-index: -99;

    overflow: visible;


}

.skillsSvgPath {
    opacity: 1;
    transform:scale(0.8);  
    fill: none; 
    stroke: #ef3b2d; 
    stroke-width: 2; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;
    transition: stroke 0.4s;
}


/* Fleche svg /projects */
.arrowSvgContainer {
    position: absolute;
    /* top: 110%; */
    top: 100%;
    transform: translateY(46px);

    opacity: 0.8;
    z-index: -99;

    overflow: visible;
}

.arrowSvgPath {
    opacity: 0.8;
    transform:scale(0.8);  
    fill: none; 
    stroke: #ef3b2d; 
    stroke-width: 3; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;
    transition: stroke 0.4s;
}


.hobbiesSvgContainer {
    position: absolute;
    transform: translate(160px, -66px) rotateY(0deg);
    opacity: 0;
    z-index: -99;

    width: 93px;
    height: 78px;

    overflow: visible;

    /* Apparemment pas besoin d'attendre la fin du drawing */
    animation: poissonHobbies 4.5s 0s linear infinite;
}
@keyframes poissonHobbies {
    0% {
        opacity: 0;
        transform: translate(150px, -66px) rotateY(0deg);
    }
    15% {
        opacity: 0.92;
    }
    50% {
        opacity: 1;
        transform: translate(200px, -66px) rotateY(28deg);
    }
    85% {
        opacity: 0.92;
    }
    100% {
        opacity: 0;
        transform: translate(250px, -66px) rotateY(0deg);
    }
}


.hobbiesSvgPath {
    opacity: 1;
    transform:scale(0.8);  
    fill: rgba(255, 255, 255, 0); 
    stroke: #ef3b2d; 
    stroke-width: 2; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;
    transition: stroke 0.4s;

    /* Scintillement lancé que aprè drawing parce que révèle le poisson */
    /* Meme delai que le cycle du premier déplacement  */
    animation: fillScintillement 4.5s 4.5s linear infinite;
}
@keyframes fillScintillement {
    0% {
        fill: rgba(255, 255, 255, 0); 
    }
    25% {
        fill: rgba(255, 255, 255, 0); 
    }
    /* 47% {
        fill: rgba(255, 255, 255, 0.04); 
    } */
    50% {
        fill: rgba(255, 255, 255, 0.07); 
    }
    /* 53% {
        fill: rgba(255, 255, 255, 0.04); 
    } */
    75% {
        fill: rgba(255, 255, 255, 0); 
    }
    100% {
        fill: rgba(255, 255, 255, 0); 
    }
}



.outilsSvgContainer {
    position: absolute;
    transform: translate(115px, -87px);
    opacity: 0.92;
    z-index: -99;

    overflow: visible;
}

.outilsSvgPath {
    opacity: 0.8;
    transform:scale(0.8);  
    fill: none; 
    stroke: #ef3b2d; 
    stroke-width: 2; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;
    transition: stroke 0.4s;
}



.langsSvgContainer {
    position: absolute;
    transform: translate(137px, -82px) scale(1.1);
    opacity: 0.92;
    z-index: -99;

    overflow: visible;
}

.langsSvgPath {
    opacity: 0.8;
    transform:scale(0.8);  
    fill: none; 
    stroke: #ef3b2d; 
    stroke-width: 2; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;
    transition: stroke 0.4s;
}






/* LightBulb (relativ) */
/* https://jakearchibald.com/2013/animated-line-drawing-svg/ */
#lightBulbPath {
    opacity: 0.7;
    transform:scale(0.3); 
    fill: none; 
    stroke: #ef3b2d; 
    stroke-width: 13; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;

    transition: stroke 0.4s;
}

.lightBulbContainer {
    height: 250px;
    position: relative;
    margin: 50px;
    width: 205px;
    margin: 0 auto;
    transition: all 0.4s;
}
.lightBulbWrapperDiv:hover {
    cursor: pointer;
}
.lightBulbWrapperDiv #lightBulbPath {
    transition: all 0.4s;
}
.lightBulbWrapperDiv:hover #lightBulbPath, .lightBulbWrapperDiv.hover #lightBulbPath {
    stroke: rgb(0, 255, 213);
    stroke-width: 6; 
    opacity: 1;
}





/* Calque 1 (fils de cuivre) */
#lightBulbPath2 {
    opacity: 0.7;
    transform:scale(0.3); 
    fill: none; 
    stroke: #ef3b2d; 
    stroke-width: 15; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;

    transition: stroke 0.4s;
}

.lightBulbContainer2 {
    position: absolute;
    height: 250px;
    margin: 50px;
    width: 205px;
    margin: 0 auto;
    bottom: 0px;
    
    transition: all 0.4s;
}

.lightBulbWrapperDiv:hover {
    cursor: pointer;
}
.lightBulbWrapperDiv #lightBulbPath2 {
    transition: all 0.4s;
}
.lightBulbWrapperDiv:hover #lightBulbPath2, .lightBulbWrapperDiv.hover #lightBulbPath2 {
    stroke: rgb(0, 255, 213);
    stroke-width: 6; 
    opacity: 1;
}




/* Calque 2 (Halo) */
.lightBulbContainer3 {
    position: absolute;
    height: 260px;
    width: 210px;
    margin: 50px;
    margin: 0 auto;
    bottom: 35px;

    opacity: 0;
    transition: all 1.5s;

    /* Halo Cyan: */
    /* background: rgb(0,255,213);
    background: -moz-radial-gradient(circle, rgba(0,255,213,1) 0%, rgba(17,18,63,0) 53%);
    background: -webkit-radial-gradient(circle, rgba(0,255,213,1) 0%, rgba(17,18,63,0) 53%);
    background: radial-gradient(circle, rgba(0,255,213,1) 0%, rgba(17,18,63,0) 53%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffd5",endColorstr="#11123f",GradientType=1); */

    /* Halo Jaune: */
    background: #fffd00;
    background: -moz-radial-gradient(circle, rgba(255,253,0,1) 0%, rgba(17,18,63,0) 53%);
    background: -webkit-radial-gradient(circle, rgba(255,253,0,1) 0%, rgba(17,18,63,0) 53%);
    background: radial-gradient(circle, rgba(255,253,0,1) 0%, rgba(17,18,63,0) 53%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fffd00",endColorstr="#11123f",GradientType=1);
}
.lightBulbWrapperDiv:hover .lightBulbContainer3, .lightBulbWrapperDiv.hover .lightBulbContainer3 {
    opacity: 0.7;
}




/* Calque 3 (effet Vis) */
#lightBulbPath4 {
    opacity: 0.7;
    transform:scale(0.3); 
    fill: none; 
    stroke: #ef3b2d; 
    stroke-width: 15; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;

    transition: stroke 0.4s;
}
.lightBulbContainer4 {
    position: absolute;
    height: 250px;
    margin: 50px;
    width: 205px;
    margin: 0 auto;
    bottom: 0px;
    
    transition: all 0.4s;
}
.lightBulbWrapperDiv:hover #lightBulbPath4, .lightBulbWrapperDiv.hover #lightBulbPath4 {
    stroke: rgb(0, 255, 213);
    stroke-width: 6; 
    opacity: 1;
}








/* Calque 3 (effet Vis) */
#lightBulbPath5 {
    opacity: 0.7;
    transform:scale(0.3); 
    fill: none; 
    stroke: #ef3b2d; 
    stroke-width: 15; 
    stroke-linecap: round; 
    stroke-linejoin:  miter; 
    stroke-miterlimit: 4;

    transition: stroke 0.4s;
}
.lightBulbContainer5 {
    position: absolute;
    height: 262px;
    margin: 50px;
    width: 205px;
    margin: 0 auto;
    bottom: -62px;
    
    transition: all 0.4s;
}
.lightBulbWrapperDiv:hover #lightBulbPath5, .lightBulbWrapperDiv.hover #lightBulbPath5 {
    stroke: rgb(0, 255, 213);
    stroke-width: 23; 
    opacity: 1;
}










/* Eclairage du box ciotation quand hover lightBulb */
/* .lightBulbWrapperDiv:hover #inspirationContainer, .lightBulbWrapperDiv.hover #inspirationContainer {
    box-shadow: 2px 0px 2px #fffd00;
} */


#lightBulbWrapperDiv:hover + #inspirationContainer h3 {
    transition: all 0.3s;
}

#lightBulbWrapperDiv:hover + #inspirationContainer {
    color: rgba(7, 255, 223, 1);
    /* border-bottom: 5px solid rgba(7, 255, 223, 0.7);
    border-right: 2px solid rgba(7, 255, 223, 0.7); */
    background-color: #00ffd41a;

    box-shadow: 0px 0 29px 7px #00ffff59;


    
    /* animation: glowBorder 2s infinite ease; */
}
@keyframes glowBorder {
    0% {
        box-shadow: 0px 0 29px 7px #00ffff59;
    }
    50% {
        box-shadow: 0px 0 29px 7px #00ffff;
    }
    100% {
        box-shadow: 0px 0 29px 7px #00ffff59;
    }
}

#lightBulbWrapperDiv:hover + #inspirationContainer h3 {
    color: rgba(7, 255, 223, 1);
}


#lightBulbWrapperDiv:hover + #inspirationContainer div .quote1 {
    opacity: 0.7;
}
#lightBulbWrapperDiv:hover + #inspirationContainer div .quote2 {
    opacity: 0.7;
}


#citationAndLightBulbWrapper {
    align-items: center;
    display:inline-flex;
    flex-direction: row;

    margin-bottom: 16px;
}




.documentWrapper {
    z-index:1;
    position: relative;
}
/* .imgDocuVignettes {
    z-index: 0;
} */
.documentWrapper:hover {
    background-color: #ef3b2d;
    animation: backgroundAnim 0.9s ease 0s normal forwards running;
    border-radius: 5px;
}
@keyframes backgroundAnim {
    from {
        background-color:#171923a3;
    }
    to {
        background-color: #ef3b2d;
    }
}


footer {  
    z-index: 99;
    align-items: center;
    display: inline-flex;
    text-align: center;
    justify-content: center;

    padding: 15px 0;
    background-color: #161a24;
    color: #565973;
    font-size: 0.9em;
    text-align: center;

    color: #aaaaaa;


    /* position: relative; */
    /* bottom: 0%; */
    width: 100%;
}
footer.footerAccueil {
    opacity: 0;
    /* Juste pour eviter le pop puis decalage lors du chargement du form(qui est un api) */
    animation: fadeIn 0.2s 0.5s forwards;
    /* position: absolute !important; */
    /* position: relative; */
    /* bottom: auto; */
    margin-top: 30px;

}
footer.footerCv {
    opacity: 0;
    /* Juste pour eviter le pop puis decalage lors du chargement du form(qui est un api) */
    animation: fadeIn 0.2s 0.5s forwards;
    /* position: absolute !important; */
    /* position: relative; */
    /* bottom: auto; */
    /* margin-top: 30px; */
    margin-top: 50px;

}
footer.footerProjets {
    flex-direction: column;
    margin-top: 0px;
}
.footerLoisir {
    z-index: -100;
    background-color: rgba(22, 26, 36, 0.2);
    /* position: relative !important; */
    /* bottom: 0%; */
}





input:not(.plezi-submit-btn), textarea {
    background-color: #1b1f2a !important;
    border: 1px solid var(--secondaryColorVeryMat) !important;
    color: #E7E8F2 !important;
}
textarea:focus, input:focus{  
    outline: 1px solid #ef3b2d !important;;
}

.plezi-submit-btn {
    background-color: var(--secondaryColor) !important;
    transition: all 0.5s;
}
.plezi-submit-btn:hover {
    background-color: #161a24 !important;
    color: #ef3b2d !important;
    border: 1px solid rgba(239, 59, 45, 0.5) !important;
}


#plz-form-4e67dacf-1c2f-4b24-8594-268e8604f643 {
    opacity: 0;
    border-radius: 9px;
    margin-top: 65px !important;
    padding: 10px 36px !important;
    width: 65% !important;
    background-color: #26ceb212 !important;

    /* border-top: 1px solid rgba(239, 59, 45, 0.6);
    border-bottom: 1px solid rgba(239, 59, 45, 0.6); */
    border: 2px solid #79797969;
    /* height: 0px; */
    overflow: scroll;
    font-family: 'Nunito', sans-serif;
    height: 0;

    background: #ef3a2d1f;
    background: -moz-radial-gradient(circle, rgba(239,59,45,0.3) 0%, rgba(255,255,255,0) 90%);
    background: -webkit-radial-gradient(circle, rgba(239,59,45,0.3) 0%, rgba(255,255,255,0) 90%);
    background: radial-gradient(circle, rgba(239,59,45,0.3) 0%, rgba(255,255,255,0) 90%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ef3b2d",endColorstr="#ffffff",GradientType=1);


    box-shadow: 0px 0 40px 0px #00ffff4f;
}

.fadeInForm {
    animation: fadeInForm 0.7s 0.1s ease-in forwards;
}
@keyframes fadeInForm {
    from {
        opacity: 0;
        /* height: 0px; */
    }
    to {
        opacity: 1;
        /* height: auto; */
    }
}

.fadeInFormHeader {
    animation: fadeInForm 0.35s 0s ease-in forwards;
}
@keyframes fadeInForm {
    from {
        opacity: 0;
        /* height: 0px; */
    }
    to {
        opacity: 1;
        /* height: auto; */
    }
}

.fadeOutForm {
    animation: fadeOutForm 0.1s 0s ease forwards;
}
@keyframes fadeOutForm {
    from {
        opacity: 1;
        /* height: 0px; */
    }
    to {
        opacity: 0;
        /* height: auto; */
    }
}

#formBackBtn {
    display: none;
    cursor: pointer;

    /* animation: fadeIn 0.5s 0s ease forwards; */
    position: absolute;
    top: 0;
    right: 0;
    font-size: 3em;
    color: var(--secondaryColor);
    padding: 7px;

    transition: all 0.4s;
}
#formBackBtn:hover {
    /* opacity: 0.7; */
    color: #19ddbcc2;
    transform: translateX(-10px);
   
}



#accueilGridPresentation {
    opacity: 0;
    position: relative;
    width: 95%;
    /* margin: 0px auto; */

    display: inline-flex;
    flex-direction: row-reverse;

    align-items: center;
    gap: 30px;

    left: 50%;
    transform: translateX(-50%);
}
#portraitAccueil {
    float: none;
    margin: 0px 0px 0px 0px;
}



.fadeInCitation {
    animation: fadeInCitation 1s 0s ease-in forwards;
}
@keyframes fadeInCitation {
    from {
        opacity: 0;
        /* height: 0px; */
    }
    to {
        opacity: 1;
        /* height: auto; */
    }
}

#contactButton {

    align-items: center;
    gap: 11px;

    font-family: 'Nunito', sans-serif;
    display: flex;
    /* margin:0 auto; */
    font-size: 1.3em;
    /* margin-top: 42px; */
    color: var(--secondaryColor);
    background-color: #00ffd614;
    padding: 10px 15px;
    border: 1px solid var(--secondaryColorMat);
    border-radius: 5px;
    cursor: pointer;

    

    transition: all 0.3s;
}
#contactButton:hover {
    background-color: var(--secondaryColor);
    color: black;
}


.symfonyShapeDiv {
    position: absolute;
    top: 0;
    right: 50%;
    padding: 3px 0px;
    width: 100%;
    transform: translateX(50%);
    background-color: var(--secondaryColorMat);
    color: black;
    font-weight: bold;
    border-radius: 4px;

    /* clip-path: polygon(100% 0, 96% 25%, 50% 38%, 4% 26%, 0 0); */
    clip-path: polygon(0 0, 100% 0, 100% 22%, 51% 29%, 0 21%);
    height: 91px;

}

.secondaryColorVif {
    color: #01ffd5 !important;
}

.cvSvgPathBlue {
    stroke: var(--secondaryColor) !important;
}
























/* WIP: Effet reflet sur le iframe */

.iframeWrapper {
    position: absolute;
    z-index: 1;
    height:670px;
    width:360px;
    top: 25%;
    /* background: linear-gradient(56deg, rgba(23,25,35,1) 0%, rgba(29,36,47,1) 41%, rgba(34,46,58,1) 50%, rgba(23,25,35,0.9943339884782038) 75%, rgba(23,25,35,0.9943339884782038) 99%) !important; */
    background: linear-gradient(59deg, rgba(23,25,35,0) 0%, rgba(164,171,182,1) 42%, rgba(128,165,182,1) 50%, rgba(23,25,35,0.15399785402442223) 75%, rgba(23,25,35,0) 100%);
    
    background-size: 800% 800%;

    animation: gradientAnimProjetIframeWrapper 1s ease 0s normal forwards running;
}
@keyframes gradientAnimProjetIframeWrapper {
    from {
        background-position: 75% 35%;
    }
    to {
        background-position: 0% 0%;
    }
}










#messageLoadingLong {
    opacity: 2.5em;
    color: rgb(226 232 240 / 40%);
    text-align: center;
    font-style: oblique;
    opacity: 0;
    animation: fadeInMessageGalerie 0.5s 5.5s ease forwards;
}




























input[type=text] {
    width: 100%;
    padding: 5px 15px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid rgba(239, 59, 45, 0.7);
    border-radius: 4px;
    background-color:#171923;
    caret-color: rgba(239, 59, 45, 1);
}



ul {
    list-style: none;
}
.projetFuncList li::before {
    content: "•";
    color: #ef3b2d;
    display:inline-block;
    width:1em;
    margin-left:-1em;
}

.projetSlideTitleReact {
    color: #00ffff !important;
}

.projetSlideTitleTerrine {
    color: #6d7cfd !important;
}

.projetFuncList-squadforge li::before {
    color: #ffa012;
}

.projetFuncList-100ciels li::before {
    color: #e8ca7d;
}

.projetFuncList-terrine li::before {
    color: #6d7cfd;
}

.cvFormationsList li::before {
    content: "•";
    color: #ef3b2d;
    display:inline-block;
    width:1em;
    margin-left:-1em;
}


.cvSectionBgGradient ul li::before {
    content: "•";
    color: #01ffd5;
    display:inline-block;
    width:1em;
    margin-left:-1em;


}



#titleCv {
    text-align: right;

    margin-block-end: 1.3em;
    margin-block-start: 0;
}







/* .cvTitle {
    margin-top: 12px !important;
    margin-right: 4px;
} */









/* Grid CV */
.gridContainer {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr 0.3fr; 
    gap: 0px 80px; 
    grid-template-areas: 
    "formations hobbys"
    "langages langages"
    "outils langues"; 

    margin-top: 30px;
}
.formations { 
    grid-area: formations;
    /* bottom: 50px;  */
    text-align: justify;
    /* margin-right: 20px; */
}
.hobbys { grid-area: hobbys; }
.langages { grid-area: langages;
    bottom: 160px; 
    margin-bottom: 50px;
 }
.outils { grid-area: outils; }
.langues { grid-area: langues; }
/* Fin grid CV */

.fadeOutFast {
    animation: fadeOutFast 0.3s 0s ease forwards;
}
@keyframes fadeOutFast {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


.pageSectionTitleSkills {
    text-align: center;
    width: fit-content;
    left: 45%;
    transform: translateX(-45%);
} 

.fadeOut {
    animation: fadeOut 0.5s 0s ease forwards;
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.fadeOutContact {
    animation: fadeOut 0.3s 0s ease forwards;
}
.fadeInContact {
    animation: fadeIn 0.3s 0s ease forwards;
}

.paragraphe {
    color: #E7E8F2;
    font-size: 1.2em;
    text-align: justify;

}


/* Traits (WIP: traitFaded) */
/* .separateurListe {
    height: 1px;
    width: 100%;
    background-color: #ef3b2d;
    margin-bottom: 15px;
    margin-top: 10px;
} */

.separateurListe {
	opacity: 0.8;
	width: 100%;
	margin: 0 auto;
    margin-bottom: 8px;
    margin-top: 8px;

	height: 1px;
	background: #171923;
	background: -webkit-linear-gradient(left, #171923 0%, #ef3b2d 50%, #171923 100%);
}
.separateurListe2 {
	opacity: 0.8;
	width: 100%;
	margin: 0 auto;
    margin-bottom: 8px;
    margin-top: 8px;
	height: 1px;

	background: #171923;
	/* background: -webkit-linear-gradient(left, #ef3b2d 0%, #171923 100%); */

    background: -webkit-linear-gradient(left, #171923 0%, #42ab9acf 50%, #171923 100%);
}
.separateurListe.light {
    opacity: 1;
    width: 100%;
    text-align: center;

    background: #ef3b2d;
    /* background: -webkit-linear-gradient(left, #171923 0%, #ef3b2d 50%, #171923 100%); */

    background: -webkit-linear-gradient(left, #171923 0%, #42ab9acf 50%, #171923 100%);
}

.formationChevron {
    display: flex;
    align-items: center;
}
.formationChevronIcon {
    cursor: pointer;
    padding: 6px;
    background-color: #1b212b;
    border-radius: 5px;
    border: 1px solid #19ddbca2;
    font-size: 1.2em;
    color: #19ddbc;

    transition: all 0.3s;
}
.formationChevronIcon:hover {
    background-color: #19ddbc;
    color: #1b212b;
    border-color: #19ddbc;
}


.stageBandeau {

    font-size: 95% !important;


    width: 100%;
    justify-content: space-between;

    display: inline-flex;
    padding: 2px 0;
    margin: 5px auto;

    background: rgba(239,59,45,0.3);
    background: -moz-linear-gradient(90deg, rgba(239,59,45,0.3) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(239,59,45,0.3) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(90deg, rgba(239,59,45,0.3) 0%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ef3b2d",endColorstr="#ffffff",GradientType=1);

    border-left: 2px solid #ef3a2dee;
    padding-left: 11px;
}

#stage1content {
    display: none;
}
#stage2content {
    display: none;
}


.cvSectionBgGradient {
    

    background: rgb(12,237,200);
    background: -moz-radial-gradient(circle, rgba(12,237,200,0.1) 0%, rgba(66,66,66,0) 60%);
    background: -webkit-radial-gradient(circle, rgba(12,237,200,0.1) 0%, rgba(66,66,66,0) 60%);
    background: radial-gradient(circle, rgba(12,237,200,0.1) 0%, rgba(66,66,66,0) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0cedc8",endColorstr="#424242",GradientType=1);

    position: relative;

    background-color: #00000000;
    /* box-shadow: 0px 0 25px -6px #00ffff24; */
    padding: 10px 20px 2px 19px;
    border-radius: 12px;

    /* box-shadow: 6px 6px 25px 0px #00ffff24;
    border-bottom: 1px solid #19ddbc54;
    border-right: 1px solid #19ddbc30; */
    
    box-shadow: 6px 6px 25px 0px #00ffff0d;
    border-bottom: 1px solid #19ddbc12;
    border-right: 1px solid #19ddbc0d;
}
.cvSectionBgGradientSkills {
    background: rgb(12,237,200);
    background: -moz-radial-gradient(circle, rgba(12,237,200,0.4) 0%, rgba(66,66,66,0) 45%);
    background: -webkit-radial-gradient(circle, rgba(12,237,200,0.4) 0%, rgba(66,66,66,0) 45%);
    background: radial-gradient(circle, rgba(12,237,200,0.4) 0%, rgba(66,66,66,0) 45%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0cedc8",endColorstr="#424242",GradientType=1);
}

.overflowHidden {
    overflow: hidden;
}


/* *** GRID COMPETENCES */
.gridCompetences {  
    transform: scale(0.82);

    margin: 0 auto 30px auto;
    /* margin: 0 15% 30px 15%; */

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    /* gap: 20px 20px; */
    width: fit-content;
    gap: 30px 60px;

    grid-auto-flow: row;
    grid-template-areas:
      "grid-html5 grid-css3 grid-javascript"
      "grid-php grid-bdd grid-sql";
  }
  
  .grid-html5 { grid-area: grid-html5; }
  
  .grid-css3 { grid-area: grid-css3; }
  
  .grid-javascript { grid-area: grid-javascript; }
  
  .grid-php { grid-area: grid-php; }
  
  .grid-bdd { grid-area: grid-bdd; }
  
  .grid-sql { grid-area: grid-sql; }

  .carreCompetences {
    /* au dessus des hapes bg : */
    z-index: 9999;

      width: 220px;
      height: 220px;
      padding: 50px;
      border-radius: 3px;
      /* background-color: #ef3a2daf; */
      /* background-color: #9b3c34; */
      /* background-color: #762e33; */
      background-color: #a93840;
      color: #E7E8F2;
      border: 1px solid var(--secondaryColorVeryMat);

      text-align: center;
      margin: auto auto;

      box-shadow: 0 0 13px -2px var(--secondaryColor);
  }
  .textCompetences {
      /* color: #a8a8a8; */
      font-size: 1.5em;
      color: var(--secondaryColor);
      /* font-size: large; */
      font-weight: bold;
      text-shadow: 1px 1px black;
  }



  .isDesktop {
    display: block !important;
  }
  .isDesktopInline {
    display: inline !important;
  }
  .isMobile {
    display: none !important;
  }



  .cvBgShape {
    position: absolute;
    /* display: none; */

    width: 95%;
    z-index: -9999;
    opacity: 0.1;

    /* background-image: url("../img/projects/shape-redBlue-cropped.png"), linear-gradient(180deg, rgba(28,33,44,1) 0%, rgba(255,255,255,0) 50%); */
  }


  .clipPathShapes {
    /* display: none; */
    position: absolute;
    opacity: 0.3;
  }
  .clipPathShape-blue {
    background-color: var(--secondaryColor);
  }
  .clipPathShape-red {
    background-color: #ef3b2d;
  }


  .clipPathShape1 {
    width: 70px;
    height: 70px;

    top: 5px;
    left: 15px;

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(45deg);
  }
  .clipPathShape2 {
    width: 68px;
    height: 56px;

    top: 28px;
    left: 132px;
    /* opacity: 0.6; */

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(35deg);
  }
  .clipPathShape3 {
    width: 71px;
    height: 71px;

    top: 119px;
    left: 56px;
    z-index: 9;
    /* opacity: 0.8; */

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(17deg);
  }
  .clipPathShape4 {
    width: 80px;
    height: 80px;

    top: -31px;
    left: 98px;

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(108deg);
  }
  .clipPathShape5 {
    width: 40px;
    height: 40px;

    top: 5px;
    left: -40px;

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(304deg);
  }
  .clipPathShape6 {
    width: 131px;
    height: 139px;

    top: 5px;
    left: 34px;

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(25deg);
  }
  .clipPathShape7 {
    width: 60px;
    height: 60px;

    top: 26px;
    left: 179px;

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(15deg);
  }
  .clipPathShape8 {
    width: 97px;
    height: 96px;

    top: 5px;
    left: 269px;
    /* opacity: 0.6; */

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(145deg);
  }
  .clipPathShape9 {
    width: 60px;
    height: 60px;

    top: 166px;
    left: 15px;

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(154deg);
  }
  .clipPathShape10 {
    width: 80px;
    height: 80px;

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(45deg);
  }
  .clipPathShape11 {
    width: 80px;
    height: 80px;

    top: 41px;
    left: -9px;

    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: rotate(45deg);
  }



  @keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInCompetences {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInFormation {
    from {
        left: -500px;
        opacity: 0;

    }
    to {
        left: 0px;
        opacity: 1;
    }
}

@keyframes fadeInHobbys {
    from {
        right: -500px;
        opacity: 0;

    }
    to {
        right: 0px;
        opacity: 1;
    }
}

@keyframes fadeInLangs {
    from {
        right: -500px;
        opacity: 0;

    }
    to {
        right: 0px;
        opacity: 1;
    }
}


.formationsShape {
    position: absolute;

    /* width: 289px; */
    width: 98%;
    right: 0;
    bottom: 0;
    opacity: 0.15;

    border-bottom-right-radius: 13px;
}

.hobbiesShape {
    position: absolute;
    width: 70%;
    opacity: 0.25;

    right: -24px;
    top: -17px;

    /* rotated pour top-right corner de la card: */
    border-bottom-right-radius: 10px;
    transform: rotate(270deg);
}

.outilsShape {
    position: absolute;
    width: 70%;
    opacity: 0.25;
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 10px;
}

.langsShape {
    position: absolute;
    width: 50%;
    opacity: 0.18;
    bottom: 0;
    left: 0;
    border-bottom-right-radius: 10px;
}


.portraitTrait1 {
    height: 15px;
    width: 105%;
    margin: 0 auto;
    position: absolute;
}


.formations {
    position: relative;
    opacity: 0;

}
.formationsAnim {
    animation-name: fadeInFormation;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

.hobbys {
    position: relative;
    opacity: 0;

    /* top: 10px; */
    top: 30px;
    /* right: -28px; */

}
.hobbiesAnim {
    animation-name: fadeInHobbys;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
.langages {
    overflow: hidden;
    position: relative;
    opacity: 0;

    padding: 64px 20px 2px 11px;
    border-radius: 12px;
    /* box-shadow: 0px 0px 25px 0px #00ffff12; */

}
.competencesAnim {
    animation-name: fadeInCompetences;
    animation-duration: 2s;
    animation-fill-mode: forwards;

}
.outils {
    position: relative;
    /* bottom: 50px; */
    bottom: 130px;
    opacity: 0;

    width: 275px;
    
}
.outilsAnim {
    animation-name: fadeInFormation;
    animation-duration: 2s;
    /* animation-delay: 3.5s; */
    animation-fill-mode: forwards;
}
.langues {
    position: relative;
    /* bottom: 45px; */
    bottom: 115px;
    opacity: 0;
    margin: 0 auto;

    width: 220px;
}
.langsAnim {
    animation-name: fadeInLangs;
    animation-duration: 2s;
    /* animation-delay: 4.5s; */
    animation-fill-mode: forwards;
}

.exeptionJs {
    height: 101px !important;
}


.imgDisclaimer {
    opacity: 0.85;
    width: 25px;
    position: relative;
    top: 3px;
}
#disclaimerContenuWrapper {
    opacity: 0;
}
.disclaimerContenuWrapper {
    animation: fadeInSpe 1s ease 0.8s normal forwards running !important;
}
@keyframes fadeInSpe {
    from {
        color: white;
        opacity: 0;
    }
    to {
        color: rgba(255, 17, 60, 1);
        opacity: 1;
    }
}


.fadeInQuote {
    animation: fadeIn 0.35s 0s 1 forwards linear;
}
.fadeOutQuote {
    animation: fadeOut 0.35s 0s 1 forwards linear;
}






.sousTitreUnderligned {
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-color: #ef3b2d;
    text-decoration-thickness: 4px;

    font-size: 1.2em;
    font-weight: bold;
}


.downloadCvIcon {
    font-size: 1.3em;
    position: relative;
    margin-right: 9px;
    top: 1px;
    margin-left: 3px;
}

.desktopNavSpan {
    opacity: 0;
    /* margin-left: 9px; */
    /* transition: all 0.3s; */
}
.desktopNavSpanCV {
    font-size: 90%;
    margin-left: 9px; 
}

.desktopSpanActif {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.sideNavDesktop:hover {
    transform: translateX(-50px);
}

.sideNavDesktop img, .sideNavDesktop i {
    transition: opacity 0.3s;
}

.sideNavDesktop:hover img, .sideNavDesktop:hover i {
    opacity: 1;
}
.sideNavDesktop:hover .desktopNavSpan {
    width: fit-content;
    opacity: 1;
}

#sideNavDesktop li a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.desktopNavAccueil {
    font-size: 1.4em;
    position: relative;
    right: 2px;
    color: #5d5d5d;
}
.desktopNavAccueilActif {
    color: var(--secondaryColor) !important;
}
.desktopNavCv {
    width: 35px;
    height: 35px;

    position: relative;
    left: 5px;
}
.desktopNavProjets {
    width: 35px;
    height: 35px;

    position: relative;
    right: 3px;
}
.desktopNavLoisirs {
    width: 35px;
    height: 35px;

    position: relative;
    right: 5px;
}
.sideNavDesktopProjets {
    position: relative;
    right: 1px;
}
.sideNavDesktopLoisirs {
    position: relative;
    right: 2px;
}
.sideNavDesktopCv {
    display: inline-flex;
    align-items: center;
}

.sideNavDesktopCv:not(.sideNavDesktopActif):hover a img {
    content:url("../img/navBurgerImg/nav_cv_red.png");
}
.sideNavDesktopProjets:not(.sideNavDesktopActif):hover a img {
    content:url("../img/navBurgerImg/nav_projets_red.png");
}
.sideNavDesktopLoisirs:not(.sideNavDesktopActif):hover a img {
    content:url("../img/navBurgerImg/nav_loisirs_red.png");
}

.notActifNavDesktop {
    opacity: 0.5;
}

.selected {
    font-weight: 900;
    text-decoration-thickness: 2px;

    /* color: #ef3b2d; */
    color: #0cedc8;
    text-shadow: 1px 1px #1a1f29;
    text-decoration-color: var(--secondaryColor) !important;

    text-decoration-line: underline;
    text-underline-position: under;
    /* text-decoration-color: #ef3b2d; */
    text-decoration-color: var(--secondaryColorMat);

    /* MAJ 26/01/2024 */
    background: rgb(2,0,36);
    background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(12,237,200,0.1) 100%);
    /* padding: 0px 9px; */
    border-radius: 5px;
    /* border-right: 1px solid #19ddbc1a;
    border-left: 1px solid #19ddbc1a; */
    border-bottom: 0px solid var(--secondaryColor);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.highlightSpan {
    color: #ef3b2d;
    font-weight: bold;
}

.pageSectionTitle {
    position: relative;
    z-index: 9999999;
    
    font-size: 1.38em;
    font-weight: 600;
    margin-bottom: 35px;
    margin-block-start: 0em;
}

.fa-magnifying-glass {
    font-size: 0.9em;
}

.accueilPageContent {
    margin: 0% 12%;
}

#githubBtnImg[data-theme="light"] {
    content: url("../img/githubLogo2_red.png");
}

.pageTitle {
    filter: drop-shadow(2px 4px 6px black);
    text-decoration-thickness: 3px;
    color:#E7E8F2;
    opacity: 0;
    text-decoration-line: underline;
    text-underline-position: under;
    text-decoration-color: #ef3b2d;
    -moz-text-decoration-color: #ef3b2d;

    text-align:right;
    font-size: 2.3em;

    margin-top:35px;

    animation-name: fadeIn;
    animation-duration: 1s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
}
.pageTitle[data-theme="light"] {
    color: var(--black);
    filter: drop-shadow(0px 0px 0px rgb(9, 9, 9));
}

#NavBarContainer {
    /*  Au dessus de la galerie */
    position:absolute; 
    right:0%; 
    margin-right:2%;

    z-index: 2;
    top: 4px;
}

.menuButton {
    padding: 0px 9px;
    margin: 0px 2px;
}

.menuButton:hover {
    color: var(--secondaryColor);
    animation-name: hoverMenuButton;
    animation-duration: 1.3s;

    background: linear-gradient(180deg, rgba(2,0,36,0) 40%, rgba(12,237,200,0.15) 100%);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
@keyframes hoverMenuButton {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

#projectHeaderCodeWrapper {
    font-size: 80%;
}

/* Header Projet PC */
#pageContainer {
    position: relative;
    background-size:cover;
    background-repeat:no-repeat;
    /* height:400px; */
    height: fit-content;
    margin: 0px 10%;
}

.gitHubLink {
    cursor:pointer;
    z-index: 999;
    position: relative;
    opacity: 0;

    top: 9px;
    left: 35px;

    animation: fadeIn 0.6s 0.7s ease forwards;
    transition: all 0.4s;
}
.gitHubLink:hover .githubLogo, .gitHubLink:hover .githubAccueil {
    opacity: 0.5;
}

.githubAccueil {
    position: absolute;
    top: 38px;
    left: -4px;
    color: #f44336;
    transform: rotate(352deg);
    font-size: 1.15em;
    opacity: 0.9;
    margin-block-start: 0;
    transition: all 0.4s;

    animation: rotateGithubText 2.5s ease-in-out infinite;
}
@keyframes rotateGithubText {
    0% {
        transform: rotate(353deg);
    }
    50% {
        transform: scale(1.1) rotate(347deg);
    }
    100% {
        transform: rotate(353deg);
    }
}

.githubLogo {
    width: 55px;
    position: absolute;
    transform: rotate(352deg);
    opacity: 1;
    transition: all 0.3s;

    animation: rotateGithubLogo 2.5s ease-in-out infinite;
}
@keyframes rotateGithubLogo {
    0% {
        transform: rotate(354deg);
    }
    50% {
        transform: scale(1.1) rotate(345deg);
    }
    100% {
        transform: rotate(354deg);
    }
}



.githubLinkIcon-squadforge {
    color: #ffa012 !important;
}

.githubLinkIcon-les100ciels {
    color: #e8ca7d !important;
}


#traitHeader {
    display: none;
    height: 1px;
    /* margin-bottom: 20px; */
    width: 100%;
    background-color: #E7E8F2;
    opacity: 0.6;
    background-color: #ef3b2d;
}

.traitSeparateurProjet {
    height:1px;
    width:95%;
    background: -webkit-linear-gradient(left, #171923 0%, #ef3b2d 50%, #171923 100%);
    opacity:0.5;
    margin: 130px auto 90px auto;
}

.documentationHeader {
    opacity: 0;
    margin-top: 50px; 
    color:#E7E8F2;
}
.documentationTitle {
    text-align:center; 
    margin:40px auto; 
    font-size:2em
}
.chevronOrange {
    opacity:0.6; 
    color:#ef3b2d;
}
.documentationButtons {
    text-align:center; 
    margin:40px auto; 
    font-size:1.7em;
}
.buttonSelected {
    padding: 10px 30px; 
    border-top: 3px solid rgba(239, 59, 45, 0.9);
    border-bottom: 3px solid rgba(239, 59, 45, 0.9); 
    /* border-right: 1px solid rgba(231, 232, 242, 0.02);
    border-left: 1px solid rgba(231, 232, 242, 0.02); */
    border-radius:5px;
}
.buttonNonSelected {
    opacity: 0.4;
    padding: 10px 30px; 
    border-top:1px solid rgba(231, 232, 242, 0.4);
    border-bottom:1px solid rgba(231, 232, 242, 0.4); 
    /* border-right: 1px solid rgba(231, 232, 242, 0.02);
    border-left: 1px solid rgba(231, 232, 242, 0.02); */
    border-radius:5px;
}
.buttonNonSelected:hover {
    animation-name: fadeInButtonDocu;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    cursor: pointer;
}
@keyframes fadeInButtonDocu {
    from {
        opacity: 0.4;
        border-top:1px solid rgba(231, 232, 242, 0.4);
        border-bottom:1px solid rgba(231, 232, 242, 0.4); 
        padding: 10px 30px;   
        border-radius:5px;  
    }
    to {
        opacity: 1;
        border-top:2px solid rgba(231, 232, 242, 0.6);
        border-bottom:2px solid rgba(231, 232, 242, 0.6);
        padding: 14px 30px; 
        border-radius:8px;
    }
}



.boutonMockup{
    /* Bouton accueil */
    width: 23px;
    height: 23px;
    border: 2px solid #ef3b2d;
    background-color:rgba(239, 59, 45, 0.1);
    border-radius: 50%;
    opacity: 0.7;

    position:absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-109px);
    top: 831px;
    margin: 0 auto;
}
.boutonMockup2{
    /* Caméra */
    width: 7px;
    height: 7px;
    background-color: #ef3b2d;
    border: 2px solid #ef3b2d;
    border-radius: 50%;
    opacity: 0.7;

    position:relative;
    top: 14px;
    margin: 0 auto;
}
.boutonMockup3{
    /* On/Off */
    width: 4px;
    height: 40px;
    background-color: #ef3b2d;
    border: 2px solid #ef3b2d;
    opacity: 0.8;
    margin-left:40px;

    position:absolute;
    /* left: 180px; */
    right: -4px;
    top: 274px;
    margin: 0 auto;
}
/* #bouton3Container {
     width: 4px;
    height: 30px;

    margin-left:40px;

    position:relative;
    left: 180px;
    top: 300px;
    margin: 0 auto; 
} */
/* .boutonMockup3:hover {
    animation-name: boutonMockup;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
} */
@keyframes boutonMockup {
    from {
        opacity: 0.8;
        width: 4px;
        left: 180px;
    }
    to {
        opacity: 1;
        width: 20px;
        left: 195px;
    }
}
.boutonMockup4{
    /* Vol+ */
    width: 4px;
    height: 40px;
    background-color: #ef3b2d;
    border: 2px solid #ef3b2d;
    opacity: 0.8;

    position: absolute;
    /* left: 180px; */
    right: -4px;
    top: 145px;
    margin: 0 auto;
}
.boutonMockup5{
    /* Vol- */
    width: 4px;
    height: 40px;
    background-color: #ef3b2d;
    border: 2px solid #ef3b2d;
    opacity: 0.8;

    position:relative;
    position: absolute;
    right: -4px;
    top: 192px;
    margin: 0 auto;
}


.projetNbr {
    opacity: 0.7;
    font-weight: 100;
    margin-block-end: 0;

    font-size: 0.9em;
}


.lienBJJ {
    position:relative; 
    margin: 46px auto 0px auto;
    color:#E7E8F2; 
    text-align:center; 
    font-size:1.3em; 
    opacity:0.8;
}
.lienBJJ a:hover {
    /* color: #ef3b2d; */
    animation-name: linkColor;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}
@keyframes linkColor {
    from {
        color:#E7E8F2; 
    }
    to {
        color: #ef3b2d;
    }
}

.redirectionPng {
    width: 26px;
    position: relative;
    top: 4px;
    margin-left: 5px;
}


.swipeImgDropShadow {
    filter: drop-shadow(3px 5px 6px black);
}



.projectDescriptionHeader {

    padding: 1px 0px 0px 0px;
    border-radius: 13px;
    z-index: 9999999;
    overflow: hidden;


    background-color: #171b2524;
    border: 0px solid #0000002e;
    
    margin-bottom: 7px;
    border-radius: 13px;
    overflow: hidden;
}






/* Grid iframe + header (PROJET) */
.gridProjetHeaderContainer {
    display: inline-flex;

    width: 90%;
    position: relative;
    right: 33px;

}
.iframe { 
    z-index: 9999;
    filter: drop-shadow(10px 17px 8px black);
    position: relative;
    bottom: 89px;
    text-align: center;

    grid-area: iframe; 
    text-align: justify; 
    margin-right: 35px;
    margin-left: 62px; 
    opacity: 0;

    /* animation-name: fadeIn;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards; */

    transform: perspective(1220px) rotateY(83deg) translateX(35px) scale(0.65);

    animation: fadeInRotateIframe 2s 1.5s ease forwards !important;
}
.iframeRotate {
    animation: fadeInRotateIframe 2s 0.7s ease forwards !important;
}

.projectShapesDiv-top-left {
    position: absolute;

    /* left: 0; */
    left: -69px;
    top: 0px;
    width: 516px;
    opacity: 0.5;
}

.projectShapesDiv-bottom-right {
    position: absolute;

    /* right: 0;
    bottom: 0px; */
    right: -82px;
    bottom: -33px;

    width: 516px;
    opacity: 0.5;
}

.projectShapeBgAnim1 {
    opacity: 0;
    animation: fadeInBgProject 0.9s 1.9s linear forwards;
}

.projectShapeBgAnim2 {
    opacity: 0;
    animation: fadeInBgProject 0.9s 1.2s linear forwards;

    border-bottom-right-radius: 38px;
    /* margin-bottom: 56px; */
}

@keyframes fadeInBgProject {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.75;
    }
}

@keyframes fadeInRotateIframe {
    from {
        opacity: 0;
        transform: perspective(1220px) rotateY(83deg) translateX(35px) scale(0.65);
    }
    to {
        opacity: 1;
        transform: perspective(1220px) rotateY(0deg) translateX(35px) scale(0.65);
    }
}

.iframe iframe {
    display: block;
    margin: 0 auto;
    background-color: rgb(7, 7, 7); 
    z-index: -1;  
}
.header { grid-area: header; }



.iframeElem {
    box-shadow: 0 0 89px -11px #0ff;
    margin: 60px auto 60px auto; 
    border: 2px solid #ef3b2d; 
    padding: 18px 8px 35px 8px; 

    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    
    width: 394px;
    
    height: 745px;

    position: relative;
}

.iframeElem-100ciels {
    border-color: #e8ca7d;

    box-shadow: 0 0 35px 5px #e8ca7d !important;
}


.iframeElem-squadforge {
    border-color: #ffa012;
}


.boutonIframe-100ciels {
    background-color: #e8ca7d75;
    border-color: #e8ca7d;
}

.boutonIframe-squadforge {
    background-color: #ffa01275;
    border-color: #ffa012;
}

#lineBreakMobile {
    display: none;
}
#lineBreakMobileStatus {
    display: none;
}

#portfolioSousTitre {
    position: relative;
    bottom: 16px;

    line-height: 1.1em;

    margin-block-start: 0;
    font-size: 1.1em;
    margin-block-end: 0.55em;

    margin-left: 18px;
    padding-left: 18px;
    color: #ef3b2d;
    border-left: 1px solid #19ddbc36;
}

#iframeElem1 {
    box-shadow: 0 0 89px -11px #f89c2f !important;
}
#iframeElem2 {
    box-shadow: 0 0 89px -11px #16ddbc !important;
}
#iframeElem3 {
    box-shadow: 0 0 89px -11px #1f30bf !important;
}

.iframeReflet {
    clip-path: polygon(0 0, 34% 0, 100% 100%, 67% 100%);
    width: 500px;
    height: 750px;
    background-color: rgb(236, 236, 236);
    position: absolute;

    display: none;
}


.alertSeekDesktopWrap {
    margin: 4px 0px;
    border-radius: 4px;
    /* box-shadow: 0px 0px 5px var(--secondaryColorVeryMat);

    animation: alertBoxShadowPulse 2.7s 0s ease-in infinite; */
}
@keyframes alertBoxShadowPulse {
    0% {
        box-shadow: 0px 0px 5px var(--secondaryColorVeryMat);
    }
    50% {
        box-shadow: 0px 0px 10px var(--secondaryColorVeryMat);
    }
    100% {
        box-shadow: 0px 0px 5px var(--secondaryColorVeryMat);
    }
}



.alertSeekDesktop {
    color: var(--secondaryColor);
    font-size: 0.8em;

    padding: 4px 9px 4px 6px;
    border-radius: 5px;
    /* border: 1px solid var(--secondaryColor); */

    background-color: #19ddbc17;

    animation: alertPulse 2.7s 0s ease-in-out infinite;
}
@keyframes alertPulse {
    0% {
        background-color: #19ddbc17;
    }
    50% {
        background-color: #19ddbc46;
    }
    100% {
        background-color: #19ddbc17;
    }
}


.jumellesIcon {
    position: relative;

    transform: scale(1.1);
    margin: 4px 6px;
}


/* classes headerProjet */

.header {
    color: #d4d4d4;
    position: relative;
    margin: auto auto;
    /* width: 80%; */

    padding-left: 15px;

    padding-bottom:10px;

    margin-top: 60px;

    /* Remplacé par ligneParLigne */
    /* opacity: 0;
    animation-name: fadeInHeaderProjet;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    animation-duration: 1s; */
}
@keyframes fadeInHeaderProjet {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.projectContainer {
    /* padding-bottom: 40px; */
    position: relative;
    bottom: 19px;
}

.demoVideo {
    padding: 40px;
    border-radius: 54px;
}

.carouselImgProject {
    margin: 0 auto;
    width: -webkit-fill-available;
    width: 48%;

    border-radius: 10px;
}
.splide {
    margin-top: 40px;
}

.splide__arrow {
    /* background: #ffa012; Squadforge */
    background: #ef3b2d;
}

.splide__list li::before {
    color: rgba(255, 0, 0, 0);
    list-style-type: none !important;
}
.splide__pagination {
    bottom: -26px;
}
.splide__pagination li::before {
    color: rgba(255, 0, 0, 0);
    list-style-type: none !important;

}
.splide__pagination__page.is-active {
    background: #ef3b2d !important;
}

.splide__arrow svg {
    fill: white;
}

.splide__slide img {
    border: 2px solid #181818;
    padding: 1px;
}

.splide__toggle {
    position: absolute;
    bottom: -5px;
    right: 50%;
    transform: translateX(50%);
    width: 35px;
    height: 35px;
    background-color: #1c222d;
    border-radius: 50px;
    fill: #ef3b2d;
    /* border: 0px solid #ef3b2d94; */
    /* border-bottom: 2px solid #ef3b2d; */
    border: 2px solid #ef3b2d;
    align-items: center;
    display: inline-flex;
    transition: all 0.2s;
}
.splide__toggle:hover {
    background-color: #ef3b2d;
    fill: #1c222d;
}

.splide__arrow {
    background: #ef3b2d00;
    width: 5em;
}


.splide__slide {
    padding-bottom: 2px;
}
.splide__progress__bar {
    height: 2px;
    /* background: #ffa009; Squadforge */
    background: #ef3b2d;
}

/* Splide max width */
.splide__progress {
    margin: 0 auto;
    width: 40%;
}

#contactBtnFade {
    filter: drop-shadow(2px 4px 6px black);
    opacity: 0;
    display: inline-flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    gap: 5px;

    /* margin-bottom: 45px; */
}

.linkedinBtn {
    padding: 13px 12px 12px 12px;
    font-size: 1.5em;
    color: #0e0e0e;
    border: 1px solid #121212;
    border-radius: 5px;
    background-color: var(--secondaryColor);

    transition: all 0.3s;
}
.linkedinBtn:hover {
    color: var(--secondaryColor);
    background-color: #00ffd614;
    border-color: var(--secondaryColor);
}

.darkedHeader {
    /* background-color: #0000001a; */
    background-color: #00000000; 

    background: rgb(25,221,188); 
    background: -moz-linear-gradient(180deg, rgba(25,221,188,0.1) 0%, rgba(255,255,255,0) 90%);
    background: -webkit-linear-gradient(180deg, rgba(25,221,188,0.1) 0%, rgba(255,255,255,0) 90%); 
    background: linear-gradient(180deg, rgba(25,221,188,0.1) 0%, rgba(255,255,255,0) 90%);
}

.splide__toggle__pause, .splide__toggle__play {
    margin: auto;
}

.description {
    /* overflow: hidden; */
    position: relative;
    /* top: -11px; */
    top: 23px;
    font-size: 80%;
    color: white;
    z-index: 100;

    color: white;
    background-color: #ffffff00;
    padding: 13px 20px 37px 20px;
    /* box-shadow: 0 0 50px -15px #ef3b2d; */
    border-radius: 12px;
    /* border: 1px solid #8080802e; */
    border: 0px solid #02ffd66b;
    height: fit-content;

    opacity: 0;
    animation: fadeIn 0.45s 0.2s ease forwards;
}

.mainSkill {
    box-shadow: 0 0 30px -4px #0ff;
    border: 2px solid var(--secondaryColor) !important;
}



.splide__arrow--prev {
    transform: scaleX(1) scale(2);
}
.splide__arrow--next {
    transform: scale(2);
}


.projetSkillsList {
    gap: 1px;
    font-size: 0.6em;
    list-style-type: none;
    padding-inline-start: 0px;
    display: inline-flex;

    flex-wrap: wrap;
    justify-content: center;

    /* background-color: #181c26;
    padding: 10px 0px;
    border-radius: 13px; */
}
.projetSkillsList li {
    list-style-type: none;
    color: #efe8e8;
    font-weight: 600;
    margin: 5px 3px;
    padding: 2px 10px 1px 10px;
    border: 1px solid #ef3b2d;
    border-radius: 100px;
    background-color: #ef3b2d;
    letter-spacing: 1px;
}
.projetSkillsList li::before {

    display: none;
}

.projetSkillsList1 {
    /* border-left: 1px solid #f97b2b80;
    border-right: 1px solid #f97b2b80; */
}

.projetDescriptionText {
    font-size: 1.1em;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

.projetSlideTitle {
    color: #ef3b2d;
    font-weight: bold;
    font-size: 1.2em;
    

    margin-block-start: 0;
    margin-block-end: 0em;
}

.projectTitle {
    display: inline-flex;
    transform: translateX(-14px);
}

.projectTitleLes100ciels {
    transform: translateX(-29px);
}

.projectTitleTerrine {
    transform: translateX(-34px);
}


.projectSlideLogo3 {
    padding-right: 7px; 
    width: 47px !important;
}

.projectSlideLogo4 {
    padding-right: 7px; 
    width: 47px !important;

    left: 97px;
    top: 26px;
}


/* Effet arriere plan */
.projectSlideLogo {
    position: relative;
    left: 83px;
    width: 35px;
    transform: scale(6);
    z-index: -9999;

    /* margin-right: 15px; */
    
    opacity: 0;

    animation: fadeInProjectLogo 0.5s 0.5s ease forwards;
}
@keyframes fadeInProjectLogo {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.04;
    }
}


.traitHeaderProjet {
    /* margin-bottom: 5px !important; */
}



































.indented {
    margin-left: 25px;
}


.pChevrons {
    color: #808080;
    font-family: Consolas;
    opacity: 0.6;
}
.pTags {
    color: #569cd6;
    font-family: Consolas;
    opacity: 0.6;
}
.pAttributes {
    color: #9cdcfe;
    font-family: Consolas;
    opacity: 0.6;
}
.pValues {
    color: #ef3b2d;
    font-family: Consolas;
    opacity: 0.6;
}
.pText {
    color: #E7E8F2;
    font-size: 1.7em;
    font-family: Century Gothic;
    opacity: 0.85;
    font-weight: bold;
}

.pText1 {
    line-height: 100%;
    opacity: 0;
    /* animation: fadeInPText 1.3s ease 0.9s normal forwards running, flash 0.1s ease 1.5s normal forwards running; */
    animation: fadeInPText 1.5s ease 1s normal forwards running;

}
.pText2 {
    line-height: 100%;
    opacity: 0;
    animation: fadeInPText 1.3s ease 1.5s normal forwards running;
}
.pText3 {
    line-height: 100%;
    opacity: 0;
    /* fadeIn synchro avec le .iframe  */
    animation: fadeInPText 1.3s ease 2s normal forwards running;
}
@keyframes fadeInPText {
    from {
        opacity: 0;
        color:#ef3b2d
    }
    to {
        opacity: 0.92;
        color:#E7E8F2

    }
}
@keyframes flash {
    0% {
        /* opacity: 0.85; */
        color:#E7E8F2
    }
    50% {
        /* opacity: 1; */
        color:#ef3b2d
    }
    100% {
        /* opacity: 0.85; */
        color:#E7E8F2
    }
}





/* Grid aperçu documents  */
.gridDocuments {
    text-align: center;

    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    gap: 15px 7px; 
    grid-template-areas: 
      "dicoDonees casUtil" 
      "diagClasses schemaPartie"; 
}
.dicoDonnees { grid-area: dicoDonees; position:relative; top:3px;}
.casUtil { grid-area: casUtil; position:relative; top:3px;}
.diagClasses { grid-area: diagClasses; position:relative; top:3px;}
.schemaPartie { grid-area: schemaPartie; position:relative; top:3px;}

.imgDocuVignettes {
    width: 290px;
    height: 200px;
    border-radius: 7px;
    padding: 3px;
    border: 1px solid rgba(239, 59, 45, 0.4);
}
.imgDocuVignettes:hover {
    border-radius: 7px;
    animation: borderDocuHover 0.2s ease 0s normal forwards running;
}
@keyframes borderDocuHover {
    from {
        /* padding plus élevé (pour effet stroke) OU moins élevé (pour compenser le border et garder l'img fixe) */
        padding: 3px;
        border: 1px solid rgba(239, 59, 45, 0.4);    
    }
    to {
        /* padding plus élevé (pour effet stroke) OU moins élevé (pour compenser le border et garder l'img fixe) */
        /* padding: 4px; */
        border: 2px solid rgba(239, 59, 45, 0.6);    
    }
}

/* GRID git (regularitée et aperçu gitkraken) */
.gridGit {
    text-align: center;

    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr; 
    gap: 0px 15px; 
    grid-template-areas: 
      "regulariteGit apercuGitKraken"; 
}
.regulariteGit { grid-area: regulariteGit; }
.apercuGitKraken { grid-area: apercuGitKraken; }

.imgGitVignettes {
    width: 410px;
    height: 170px;
    border-radius: 9px;
    padding: 4px;
    border: 1px solid rgba(239, 59, 45, 0.4);
}
.imgGitVignettes:hover {
    /* padding plus élevé (pour effet stroke) OU moins élevé (pour compenser le border et garder l'img fixe) */
    /* padding: 6px;
    border: 4px solid rgba(239, 59, 45, 0.6); */
    animation: borderGitHover 0.2s ease 0s normal forwards running;
}
@keyframes borderGitHover {
    from {
        /* padding plus élevé (pour effet stroke) OU moins élevé (pour compenser le border et garder l'img fixe) */
        padding: 4px;
        border: 1px solid rgba(239, 59, 45, 0.4);    
    }
    to {
        /* padding plus élevé (pour effet stroke) OU moins élevé (pour compenser le border et garder l'img fixe) */
        padding: 6px;
        border: 4px solid rgba(239, 59, 45, 0.6);    
    }
}



/* GRID responsive (phone, pc, tablet) */
.gridResponsive {
    text-align: center;

    display: grid; 
    grid-template-columns: 0.9fr 1.1fr; 
    grid-template-rows: 1fr 1fr; 
    gap: 10px 10px; 
    grid-template-areas: 
      "pcResp pcResp"
      "phoneResp tabletResp";
}
.phoneResp { grid-area: phoneResp; }
.tabletResp { grid-area: tabletResp; }
.pcResp { grid-area: pcResp; }



/* Projet Header fadeIn ligne par ligne:  */
.headerLine1 {
    opacity: 0;
    animation: ligneParLigne 0.5s ease 0.8s normal forwards running;
}
.headerLine2 {
    opacity: 0;
    /* animation: ligneParLigne 2.5s ease 0.65s normal forwards running; */
    animation: ligneParLigne 0.5s ease 0.95s normal forwards running;
}
.headerLine3 {
    opacity: 0;
    animation: ligneParLigne 0.5s ease 1.1s normal forwards running;
}
.headerLine4 {
    opacity: 0;
    animation: ligneParLigne 0.5s ease 1.25s normal forwards running;
}
.headerLine5 {
    opacity: 0;
    /* animation: ligneParLigne 2.5s ease 1.1s normal forwards running; */
    animation: ligneParLigne 0.5s ease 1.40s normal forwards running;
}
.headerLine6 {
    opacity: 0;
    animation: ligneParLigne 0.5s ease 1.55s normal forwards running;
}
.headerLine7 {
    opacity: 0;
    animation: ligneParLigne 0.5s ease 1.70s normal forwards running;
}
.headerLine8 {
    opacity: 0;
    animation: ligneParLigne 0.5s ease 1.9s normal forwards running;
}
.headerLine9 {
    opacity: 0;
    /* animation: ligneParLigne 2.5s ease 1.6s normal forwards running; */
    animation: ligneParLigne 0.5s ease 2.05s normal forwards running;
}
.headerLine10 {
    opacity: 0;
    animation: ligneParLigne 0.5s ease 2.20s normal forwards running;
}
.headerLine11 {
    opacity: 0;
    animation: ligneParLigne 0.5s ease 2.35s normal forwards running;
}
@keyframes ligneParLigne {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.shape {
    background-color:#ef3b2d;
    position: relative;
    top:1%;
    height: 200px;
    width: 50px;
    clip-path: polygon(51% 36%, 56% 25%, 56% 100%, 51% 100%);
}












#messageGalerie {
    display: block;
    color: rgb(226 232 240 / 55%);
    text-align: center;
    font-style: oblique;

    opacity: 0;
}
.fadeInHd {
    animation: fadeInMessageGalerie 0.5s ease forwards;

}
@keyframes fadeInMessageGalerie {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.titleSmile {
    position: absolute;
    bottom: -39px;
    right: 20px;
    transform: rotate(90deg) scaleY(1);
    font-size: 1.4em;
    font-weight: 100;
    color: #ef3b2d;

    transition: all 0.3s;
}



.images {
    overflow: hidden;
    border-radius: 10px;
    opacity: 0;
}


.galeriePhotoFadeIn {
    animation: galeriePhotoFadeIn 0.5s ease-in-out 1 forwards normal;
}
@keyframes galeriePhotoFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


#lightBulbPath, #lightBulbPath2, #lightBulbPath4, #lightBulbPath5 {
    opacity: 0.93;
}



.accueilKeyboardPngDesktop {
    position: absolute;
    opacity: 0.9;
    width: 108%;
    right: -8px;
    top: 104%;

    filter: drop-shadow(2px 4px 6px black);

    transition: all 0.3s;
}







.accueilVideoPcDiv {


    border-radius: 7px;
    border: 5px solid var(--secondaryColor);
    border-bottom: 15px solid var(--secondaryColor);
    border-top: 5px solid var(--secondaryColor);

    filter: drop-shadow(1px 2px 12px black);

    transition: all .3s;
}


.accueilVideoPcDiv1 {
    position: relative;
    bottom: 32px;
    width: 29%;
    z-index: 999;

    box-shadow: 0px 0 40px 10px #00ffff9e;

    border: 1px solid black;
    border-radius: 10px;
}


.accueilVideoPcVideo {
    border-radius: 0px;
    border: 1px solid black;
}

.accueilProjectsTrait {
    position: absolute;
    top: 50%;
    transform: translate(-50px, -50%);
    z-index: 0;

    height: 4px;
    /* background: rgb(66,171,154);
    background: -moz-linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(66,171,154,0.7805497198879552) 50%, rgba(66,66,66,0) 100%);
    background: -webkit-linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(66,171,154,0.7805497198879552) 50%, rgba(66,66,66,0) 100%);
    background: linear-gradient(85deg, rgba(66,171,154,0) 15%, rgba(0, 255, 213, 0.3) 50%, rgba(66,66,66,0) 85%); */
    background: rgb(0,255,213);
    background: -moz-radial-gradient(circle, rgba(0,255,213,0.15) 0%, rgba(255,255,255,0) 60%);
    background: -webkit-radial-gradient(circle, rgba(0,255,213,0.15) 0%, rgba(255,255,255,0) 60%);
    background: radial-gradient(circle, rgba(0,255,213,0.15) 0%, rgba(255,255,255,0) 60%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffd5",endColorstr="#ffffff",GradientType=1);
    width: 130%;

    /* transition: all 0.3s; */
    transition: height 0.1s, transform 0.3s, background 0.3s, boxShadow 0.3s;

    animation: fadeInTraitProjetAccueil 1s 0s ease forwards;
}
@keyframes fadeInTraitProjetAccueil {
    from {
        height: 4px;
        width: 125%;
    }
    to {
        height: 275px;
        width: 185%;
    }
}

.accueilProjectsTrait2 {
    display: none;
    
    position: absolute;
    top: 52%;
    transform: translate(-250px, -52%);
    z-index: 0;

    height: 2px;
    background: rgb(66,171,154);
    background: -moz-linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(66,171,154,0.5) 50%, rgba(66,66,66,0) 100%);
    background: -webkit-linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(66,171,154,0.5) 50%, rgba(66,66,66,0) 100%);
    background: linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(66,171,154,0.5) 50%, rgba(66,66,66,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#42ab9a",endColorstr="#424242",GradientType=1);
    width: 75%;

    transition: all 0.3s;
}






/* VEILLE */

.veilleTitle {
    color:#e2e8f0; 
    font-size:3.5em;
    opacity:0;

    animation: fadeIn 1.4s ease 0.3s normal forwards running;
}
.galerieTitle {
    color:#e2e8f0; 
    font-size:3.5em;
    opacity:0;

    animation: fadeIn 1.4s ease 0.3s normal forwards running;

    margin-block-start: 0;
}
.projetTitle {
    /* filter: drop-shadow(7px 9px 2px black); */
    text-align: center;
    color:#e2e8f0; 
    font-size:3.5em;
    opacity:0;
    margin-block-end: 0em;

    position: relative;
    /* right: 65px; */

    animation: fadeIn 1.4s ease 0.3s normal forwards running;
}

.carreTitre {
    color:#ef3b2d; 
    position:relative; 
    top: 12px;
    opacity: 0;

    /* Delai adapté au fadeIn du .sectionsGridContainer   /!\ (effet à adapter) */
    animation: fadeIn 0.8s ease 0.9s normal forwards running, whiteToOrange 0.8s ease 0.9s normal forwards running;
}
.carreTitreVeille {
    top: 10px !important;
    /* Synchro avec .sectionSitesTitle et .sectionTipsTitle */
    animation: fadeIn 0.8s ease 0.9s normal forwards running, whiteToOrange 0.8s ease 1.6s normal forwards running, whiteToOrange 0.8s ease 2.7s normal forwards running !important;
}
.carreTitreProjet {
    /* Cas particulier sur Projet: Le point fadeIn est synchro avec le fadeIn <iframe> */
    animation: fadeIn 0.8s ease 2.2s normal forwards running, whiteToOrange 1s ease 2.4s normal forwards running !important;
}
@keyframes whiteToOrange {
    from {
        color:#E7E8F2;
    }
    to {
        color:#ef3b2d;
    }
}




























#arrowNext {
    font-size: 5em; 
    color: white; 
    width: 75px; 
    position: absolute; 
    right: 2%; 
    font-weight: bold;
    text-align: center;
}
#arrowNext:hover {
    cursor: pointer;
}
#arrowPrevious {
    font-size: 5em; 
    color: white; 
    width: 75px; 
    position: absolute; 
    left: 2%; 
    font-weight: bold;
    text-align: center;
}
#arrowPrevious:hover {
    cursor: pointer;
}


.pageTitleAccueil {
    margin-top: 8px;
    margin-bottom: 27px;
}



#menuLigneCv {
    font-size: 1.1em;
    color:#E7E8F2;

    margin-block-start: 0.6em;

    margin-block-end: 0em !important;
}
#menuLigneCv[data-theme="light"] { 
    /* color: var(--black); */
}

#headerAccueil[data-theme="light"] {
    background-color: var(--background-headerColor);
}


#headerAccueil {
    opacity: 0;
    /* background-color: #00f6ff0f;
    box-shadow: 0 0 32px -11px #0ff; */
}
#headerCv {
    /* background-color: #00f6ff0f;
    box-shadow: 0 0 32px -11px #0ff; */
}
#headerProjets {
    /* background-color: #00f6ff0f;
    box-shadow: 0 0 32px -11px #0ff; */
}

.arrowSvgContainer {
    opacity: 0;
}

.shapePresentation {
    position: absolute;
    opacity: 0.27;

    /* width: 100%; */
    transform: scale(1.5);
    height: -webkit-fill-available;

    bottom: 28px;
    left: 10px;
}



#portfolioTitle {
    font-size: 2em;
    margin-block-start: 0.5em;
    margin-block-end: 0;
}


.paragrapheAccueil { 
    position: relative;
    overflow: hidden;

    /* text-align: justify; */
    text-align: left;
    color: #E7E8F2;
    margin: 0px 20px 12px 20px;
    
    font-size: 1.2em;

    background-color: #00000017;
    padding: 13px 10px 14px 24px;
    border-radius: 12px;
    box-shadow: 6px 6px 25px 0px #00ffff24;
    border-bottom: 1px solid #19ddbc54;
    border-right: 1px solid #19ddbc30;

    /* animation: fadeIn 0.5s 0s ease forwards; */
}
#paragrapheAccueil[data-theme="light"] {
    color: var(--black);
    font-weight: 600;
}



.imgAccueil { 
    /* MAJ 01/02/2024 */
    /* background-color: #ef3b2d; */
    background: rgba(239,59,45);
    background: -moz-linear-gradient(10deg, rgba(239,59,45,1) 0%, rgba(239,75,45,1) 21%, rgba(12,237,200,0.9) 100%);
    background: -webkit-linear-gradient(10deg, rgba(239,59,45,1) 0%, rgba(239,75,45,1) 21%, rgba(12,237,200,0.9) 100%);
    background: linear-gradient(10deg, rgba(239,59,45,1) 0%, rgba(239,75,45,1) 21%, rgba(12,237,200,0.9) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ef3b2d",endColorstr="#0cedc8",GradientType=1);

    opacity: 0;

    float: right;
    width: 161px;
    height: 159px;
    margin: 20px 30px 15px 49px;
    padding: 1px 1px 1px 1px;

    vertical-align: middle;
    position: relative;

    filter: blur(5px) grayscale(1);
    box-shadow: 0px 0 33px 5px #00ffff6b;

    animation: imgAccueilFadeIn 1.7s 1.3s ease forwards;
}
/* .imgAccueil:hover { 
    cursor: pointer;
    opacity: 0.8 !important;
    padding: 0px;
} */


.cvFormationsList {
    position: relative;
    line-height: 1.4em;
    text-align: justify;
}


.traitFormationsPuces {
    position: absolute;
    left: 26px;
    top: 8px;

    width: 2px;
    height: -webkit-fill-available;

    background-color: #ef3b2d59;

    border-radius: 7px;

}


.cvFormationsList li::before {
    transform: scale(1.7);
}


#pageTitleDiv {
    width: 100%;
    display: inline-flex;
    align-items: baseline;
}


.pageContainerProjet {

}



.testPopPortraitImg {
    width: 147px;
    height: 141px;
    position: relative;
    top: 16px;
    left: 3px;
}

.accueilProjectsDiv {
    opacity: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 70px auto 110px auto;

    /* justify-content: space-evenly; */
    justify-content: center;
    gap: 11%;
    right: 62px;
}

.accueilProjectsRightDiv {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.accueilProjectsBtnLabel {
    display: none;
}
.accueilProjectsRightDiv:hover {

}

.slideInProjectBtn {

}

.accueilProjectsRightLink {
    position: relative;
    z-index: 9;

    background-color: #1c212c;

    color: rgb(248, 244, 244);
    font-size: 1.2em;
    align-items: center;
    display: flex;

    border: 2px solid var(--secondaryColorVeryMat);
    border-radius: 11px;
    padding: 9px 20px 7px 20px;

    filter: drop-shadow(1px 2px 4px black);

    transition: all 0.3s;
}
.accueilProjectsRightLink:hover {
    color: rgb(8, 8, 8);
    border-color: var(--secondaryColor);
    /* background-color: #109f88; */
    /* background-color: #2cc5ac; */
    background: radial-gradient(circle, rgba(5,236,208,1) 70%, rgba(255,255,255,0) 140%);
    border-left-color: #00eece;

    /* glow */
    box-shadow: 0 0 64px -15px #0ff;

    animation: glowLinkProjects 3s 0s ease infinite;
}
@keyframes glowLinkProjects {
    /* 0% {
        background: radial-gradient(circle, rgba(5,236,208,1) 60%, rgba(255,255,255,0) 140%);
    }
    50% {
        background: radial-gradient(circle, rgba(5,236,208,1) 60%, rgba(255,255,255,0) 140%);
    }
    100% {
        background: radial-gradient(circle, rgba(5,236,208,1) 60%, rgba(255,255,255,0) 140%);
    } */
}

.fixScalePortraitPC {
    position: relative;
    transform: scale(0.9);
    /* left: 30px; */
    left: 0px;
}

.accueilProjectsRightLink:hover .redirectProjectsIcon {
    opacity: 1;
}


/* sibling selector trait quand rightDiv hovered: */
.accueilProjectsRightLink:hover + .accueilProjectsTrait {
    /* effet glow (décalé X car rectangulaire visible pas beau) */
    box-shadow: 50px 0 64px -15px #0ff;

    height: 100px;

    background: rgb(66,171,154);
    background: -moz-linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(0,255,213,1) 50%, rgba(66,66,66,0) 100%);
    background: -webkit-linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(0,255,213,1) 50%, rgba(66,66,66,0) 100%);
    background: linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(0,255,213,1) 50%, rgba(66,66,66,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#42ab9a",endColorstr="#424242",GradientType=1);

    transform: translate(80px, -50%);

    /* animation: bandeauGrowShrink 2.1s 0s ease-in-out infinite; */

    /* Test anim entre-deux pour fluidité (height bandeau from height: 275px; to 110px */
    animation: bandeauTransition 0.2s 0s linear 1, bandeauGrowShrink 2.1s 0.2s ease-in-out infinite;
}
@keyframes bandeauTransition {
    from {
        height: 275px;
    }
    to {
        height: 110px;
    }
}
@keyframes bandeauGrowShrink {
    0% {
        transform: translate(80px, -50%);
        height: 110px;
    }
    50% {
        transform: translate(80px, -50%);
        height: 145px;
    }
    100% {
        transform: translate(80px, -50%);
        height: 110px;
    }
}

/* MARCHE PAS (why? ça marche avec le 1er trait et c'est exactement le meme binsss) */
/* sibling selector trait quand rightDiv hovered: */
/* .accueilProjectsRightLink:hover + .accueilProjectsTrait2 {
    height: 2px;

    background: rgb(66,171,154);
    background: -moz-linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(0,255,213,0.7) 50%, rgba(66,66,66,0) 100%);
    background: -webkit-linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(0,255,213,0.7) 50%, rgba(66,66,66,0) 100%);
    background: linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(0,255,213,0.7) 50%, rgba(66,66,66,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#42ab9a",endColorstr="#424242",GradientType=1);

    transform: translate(700px, -52%);
}

.accueilProjectsTrait2:has(+ a:hover) {
    height: 2px;

    background: rgb(66,171,154);
    background: -moz-linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(0,255,213,0.7) 50%, rgba(66,66,66,0) 100%);
    background: -webkit-linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(0,255,213,0.7) 50%, rgba(66,66,66,0) 100%);
    background: linear-gradient(85deg, rgba(66,171,154,0) 0%, rgba(0,255,213,0.7) 50%, rgba(66,66,66,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#42ab9a",endColorstr="#424242",GradientType=1);

    transform: translate(700px, -52%);
} */


.accueilProjectsRightDivSpan {
    text-align:center;
    display:inline-flex;
    align-items:center;
    justify-content:space-around;

    font-weight: bold;
    color: #e2ebeb;

    line-height: 1.1em;
    margin-top: 5px;
}




/* Select an H1 heading that has a currently-hovered <a>nchor as a sibling */
.accueilVideo:has(+ a:hover) {
    border: 3px solid var(--secondaryColorVif);
    transform: translateX(20px);

    /* glow: */
    box-shadow: 0px 0 64px -15px #0ff;
}



.redirectProjectsIcon {
    color: #ef3b2d;
    margin-left: 4px;
    opacity: 0.7;
    
    transition: all 0.3s;
}

.accueilProjectsIcon {
    /* Fix décalage png */
    position: relative;
    left: 5px;

    opacity: 0.9;
    width: 60px;

    transition: all 0.3s;
}

.accueilProjectsRightLink:hover .accueilProjectsRightDiv img {
    transform: scale(1.07);
    opacity: 1;
    filter: drop-shadow(0px 0px 1px black);

}


.accueilProjectsRightLink:hover .accueilProjectsRightDiv span {
    color: #272d2c;

}





.pageContainerAccueil {
    animation: accueilGradient 1s 0.2s ease forwards;
}
@keyframes accueilGradient {
    0% {
        background: radial-gradient(circle, rgba(12,237,200,0.0) 0%, rgba(66,66,66,0) 67%);
    }
    100% {
        background: radial-gradient(circle, rgba(12,237,200,0.045) 0%, rgba(66,66,66,0) 67%);
    }
}

.lightBulbWrapperDiv {

    transform: rotate(356deg) scale(0.57);

    animation: accueilAmpouleGradient 0.5s 0.5s ease forwards;
}
@keyframes accueilAmpouleGradient {
    0% {
        background: radial-gradient(circle, rgba(12,237,200,0.0) 0%, rgba(66,66,66,0) 67%);
    }
    100% {
        background: radial-gradient(circle, rgba(12,237,200,0.16906512605042014) 0%, rgba(66,66,66,0) 67%);
    }
}


@keyframes imgAccueilFadeIn {
    from {
        /* border-radius: 50px; */
        border-radius: 100px;
        opacity: 0;
        filter: blur(5px) grayscale(1);
        border: 2px solid rgba(255, 255, 255);
    }
    to {
        /* border-radius: 100px; */
        border-radius: 25px;
        opacity: 1;
        filter: blur(0px) grayscale(0);
        /* border: 2px solid white; */
        border: 2px solid rgb(255, 255, 255);
    }
}




/* Fix du Header Dégueulasse (seulement sur loisirs) ET VOIR MEDIA QUERIES */
.testH1 {
    filter: drop-shadow(2px 4px 6px black);
    font-size: 2.7em;
    width: fit-content;
    position: relative;

    color: #ef3b2d;
    /* line-height: 0; */
    padding: 2px 0px 1px 24px;
    margin-block-end: 0;
    margin-block-start: 0;
}
.authorTitle {
    filter: drop-shadow(2px 4px 6px black);
}
.testHeader {
    z-index: 999;
    position: relative;
    display: flex;
    justify-content: space-between;
    /* background-color: #191b25; */
}
.testMenuLigne {
    margin-top: 3px !important;
}
.testNavBarContainer {
    position: relative !important;
    margin-right: 2%;
    text-align: right;
    align-self: flex-end;
    display: flex;
    margin-bottom: 18px;


}

/* PROJET */
.testProjetTitle {
    /* text-align: right !important; */
}
.testBarreProjetSouligne {
    animation: testBarreProjetSouligne 1s ease 0s normal forwards running !important;
}
@keyframes testBarreProjetSouligne {
    from {
        right: 1000px;
        background-color:#e2e8f0;
        height:15px; 
    }
    to {
        /* right: -50%; */
        right: -18px;
        margin: 0px auto 60px auto;
        background-color:#ef3b2d;
        height:8px; 
    }
}


.galerieAccueil {
    justify-content: center;
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    /* gap: 15px 25px;  */
    gap: 20px 0px;
    grid-template-areas: 
      "photo1 photo2 photo3"
      "photo4 photo5 photo6"
      "photo7 photo8 photo9"
      "photo10 photo11 photo12" 
      "photo13 photo14 photo15"
      "photo16 photo17 photo18"
      "photo19 photo20 photo21"
      "photo22 photo23 photo24" 
      "photo25 photo26 photo27"
      "photo28 photo29 photo30"
      "photo31 photo32 photo33"
      "photo34 photo35 photo36" 
      "photo37 photo38 photo39"
      "photo40 photo41 photo42"
      "photo43 photo44 photo45"
      "photo46 photo47 photo48" 
      "photo49 photo50 photo51"
      "photo52 photo53 photo54"
      "photo55 photo56 photo57"; 
}
.photo1 { grid-area: photo1; }
.photo2 { grid-area: photo2; }
.photo3 { grid-area: photo3; }
.photo4 { grid-area: photo4; }
.photo5 { grid-area: photo5; }
.photo6 { grid-area: photo6; }
.photo7 { grid-area: photo7; }
.photo8 { grid-area: photo8; }
.photo9 { grid-area: photo9; }
.photo10 { grid-area: photo10; }
.photo11 { grid-area: photo11; }
.photo12 { grid-area: photo12; }
.photo13 { grid-area: photo13; }
.photo14 { grid-area: photo14; }
.photo15 { grid-area: photo15; }
.photo16 { grid-area: photo16; }
.photo17 { grid-area: photo17; }
.photo18 { grid-area: photo18; }
.photo19 { grid-area: photo19; }
.photo20 { grid-area: photo20; }
.photo21 { grid-area: photo21; }
.photo22 { grid-area: photo22; }
.photo23 { grid-area: photo23; }
.photo24 { grid-area: photo24; }
.photo25 { grid-area: photo25; }
.photo26 { grid-area: photo26; }
.photo27 { grid-area: photo27; }
.photo28 { grid-area: photo28; }
.photo29 { grid-area: photo29; }
.photo30 { grid-area: photo30; }
.photo31 { grid-area: photo31; }
.photo32 { grid-area: photo32; }
.photo33 { grid-area: photo33; }
.photo34 { grid-area: photo34; }
.photo35 { grid-area: photo35; }
.photo36 { grid-area: photo36; }
.photo37 { grid-area: photo37; }
.photo38 { grid-area: photo38; }
.photo39 { grid-area: photo39; }
.photo40 { grid-area: photo40; }
.photo41 { grid-area: photo41; }
.photo42 { grid-area: photo42; }
.photo43 { grid-area: photo43; }
.photo44 { grid-area: photo44; }
.photo45 { grid-area: photo45; }
.photo46 { grid-area: photo46; }
.photo47 { grid-area: photo47; }
.photo48 { grid-area: photo48; }
.photo49 { grid-area: photo49; }
.photo50 { grid-area: photo50; }
.photo51 { grid-area: photo51; }
.photo52 { grid-area: photo52; }
.photo53 { grid-area: photo53; }
.photo54 { grid-area: photo54; }
.photo55 { grid-area: photo55; }
.photo56 { grid-area: photo56; }
.photo57 { grid-area: photo57; }





.galerieDiv { 
    padding-bottom:100px;
    text-align: justify;
    color: #E7E8F2;
    margin: 0 20px;
}
.photosGallerie {
    /* opacity: 1; */
    display: block;
    width: 150x;
    margin: auto;
    border-radius: 2px;
    filter: blur(0px);
}
.photosGallerie:hover {
    /* width: 500px; */
    cursor: pointer;

    animation: imgBlur 0.4s ease 0s normal forwards;
}
@keyframes imgBlur { 
    from {
        opacity: 1;
        filter: blur(0px);
    }
    to {
        opacity: 0.8;
        filter: blur(2px);
    }
}


.loupesGalerie {
    opacity: 0;
    transition: opacity .4s;

    position: absolute; 
    font-size: 3.5em; 
    font-weight: bold; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    margin-block-start:0em; 
    margin-block-end:0em; 

    color:rgba(242, 228, 227, 0.9);
    background: rgb(0 0 0 / 60%);

    z-index: 1;

    display:flex; 
    align-items:center; 
    justify-content:center; 
}
.location-listing:hover .loupesGalerie {
    opacity: 1;
}

.location-image img {
    /* filter: blur(0px); */
    transition: all 0.4s ease;
  }
  .location-listing:hover .location-image img {
    /* filter: blur(2px); */
    transform: scale(1.2);
  }

.modal {
    display: none;
    position: fixed;
    /* z-index:3 important cas il y a deja le z-index du hover Gallerie sur 1 et la Barre de navigation en 2 */
    z-index: 3;
    padding-top: 80px;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}

.modal-image {
    margin: auto;
    margin-bottom: 25px !important;
    display: block;
    width: 90%;
    max-width: 800px;

    border-radius: 10px;
    /* border: 2px solid rgba(239, 59, 45, 0.3); */
}
.modal-image:hover {
    cursor: zoom-in;
}


#caption {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 800px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

.modal-image, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}
@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

.closeModal {
    position: absolute;
    z-index: 99999999;
    top: 37px;
    right: 130px;
    color: #f1f1f1;
    font-size: 5em;
    font-weight: bold;

    animation: fadeIn 0.7s 0s ease forwards;
    transition: 0.3s;
}

.closeModal:hover, .closeModal:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}





























.docAdminGrid {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 1fr; 
    gap: 0px 15px; 
    grid-template-areas: 
    "adminHistorique adminUserList adminLogs"; 
}
.adminHistorique { grid-area: adminHistorique; }
.adminUserList { grid-area: adminUserList; }
.adminLogs { grid-area: adminLogs; }



.imgAdminDoc {
    height: 420px;
    width: 218px;

    border-radius: 6px;
    border: 1px solid #e7392c;
    padding: 9px 3px 17px 3px;

}

.textAdminDoc {
    font-size: 90%;
    width: 218px;
}







#docuLoadContainer {
    opacity: 0;
    color: #e2e8f0; 
    margin: 0 15%; 
    /* padding-bottom: 100px;  */
    /* height: 1300px; */
}
/* Classe ajoutée avec l'observer (au moment ou l'element est visible) */
.docuLoadContainer {
    animation: fadeInOnScroll 2s ease 0.3s normal forwards running;
}
@keyframes fadeInOnScroll {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}


.documentationHeaderFadeInScroll {
    animation: fadeInOnScroll 2s ease 0.1s normal forwards running;
}


.disclaimerContainer {
    opacity: 0;
    margin-top: 50px; 
    text-align:center; 
    position:relative; 
    color:rgba(191, 4, 38, 1); 
    padding: 5px 0; 
    border:1px solid rgba(239, 59, 45, 0.2); 
    border-radius: 10px;

    font-size: 110%;

    width:65% !important;
    margin: 50px auto 0 auto;
}
.disclaimerContainerStyleScroll {
    animation: styleOnScroll 1s ease-in-out 0.1s normal forwards running, clignotementDisclaimer 2.1s ease-in-out 1s infinite;
}
@keyframes styleOnScroll {
    from{
        width: 2px;
        opacity: 0;
        border:0px solid rgba(239, 59, 45, 0); 
    }
    to {
        width: 100%;
        opacity: 1;
        /* border opacity from 0.1 to 0.3,  repeat infinite delayed apres pop */
        border: 3px solid rgba(255, 19, 1, 0.1); 
    }
}
@keyframes  clignotementDisclaimer {
    0% {
        border: 3px solid rgba(255, 19, 1, 0.1); 
    }
    50% {
        border: 3px solid rgba(255, 19, 1, 0.3); 
    }
    100% {
        border: 3px solid rgba(255, 19, 1, 0.1); 
    }
}








.imgGalleries {
    /* width:90%;  */
    width: 100%;
    height:auto; 
    margin:auto; 
    vertical-align:middle; 
    /* border-radius:10px; */
}


#photoBar {
    background-color: #e9e3e2 !important;
}
#flashRectangle {
    border-color: #e9e3e2 !important;
}


#photographieTitle {
    /* Clickable pour opacity 0/1 des images (voir l'aquarium) temporaire: deplacer dans un vrai bouton */
    /* cursor: pointer; */

    z-index: 9999999999999999999999;
    position: relative;

    /* color: #ef3b2d; */
    color: #e9e3e2;

    text-align: center;
    font-size: 3em;

    /* opacity: 0; */
    /* animation: fadeInPhotographieTitle 0.5s 1.1s ease-in forwards; */

    margin-block-start: 0;

    -webkit-box-reflect:below 7px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
}
@keyframes fadeInPhotographieTitle {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.letterO {
    width: 25px;
    transform: rotateZ(0deg);
    filter: blur(0px);
    margin: 0 2px;

    animation: lensRotate 1.2s 1.2s forwards ease-in-out;
}
@keyframes lensRotate {
    0% {
        filter: blur(0px);
        transform: rotateZ(0deg);
    }
    20% {
        filter: blur(7px);
    }
    100% {
        filter: blur(0px);
        transform: rotateZ(360deg);
    }
}
.lettersOanimProc {
    width: 25px;
    margin: 0 2px;
    filter: blur(0px) !important;
    transform: rotateZ(0deg);
    animation: lensRotateProc 1.2s 0s forwards linear !important;
}
@keyframes lensRotateProc {
    0% {
        filter: blur(0px);
        transform: rotateZ(0deg);
    }
    50% {
        filter: blur(7px);
    }
    100% {
        filter: blur(0px);
        transform: rotateZ(360deg);
    }
}









#projet1 {
    
}









.barreVeilleSouligne {
    height:15px; 
    width:515px; 
    background-color:#e2e8f0; 
    position:relative; 
    bottom:64px;

    margin-bottom: 70px;

    right: 700px;
    animation: barreVeilleSouligne 1s ease 0s normal forwards running;
}
.barreGalerieSouligne {
    border-radius: 2px;
    height:15px; 
    width:163px; 
    background-color:#e2e8f0; 
    position:relative; 
    bottom:59px;

    /* margin-bottom: 70px; */

    right: 700px;
    animation: barreVeilleSouligne 1s ease 0s normal forwards running;
}
.barreProjetSouligne {
    /* filter: drop-shadow(7px 9px 2px black); */
    border-radius: 2px;
    height:15px; 
    width:288px; 
    background-color:#e2e8f0; 
    position:relative; 
    bottom:13px;
    margin-bottom: 60px;

    /* text-align: right; */
    right: 1000px;
    animation: barreProjetSouligne 1s ease 0s normal forwards running;
}
@keyframes barreVeilleSouligne {
    from {
        right: 1000px;
        background-color:#e2e8f0;
        height: 15px;
    }
    to {
        right: -5px;
        background-color:rgba(239, 59, 45, 0.9);
        height: 6px;
    }
}
@keyframes barreProjetSouligne {
    from {
        right: 1000px;
        background-color:#e2e8f0;
        height:15px; 
    }
    to {
        /* right: -531px; */
        right: -51%;
        transform: translateX(-47%);
        background-color:#ef3b2d;
        height:8px; 
    }
}


.switchProjectButton {
    border: 2px solid rgb(240 248 255 / 10%);
    border-radius: 50px;
    padding: 0px 18px;

    cursor: pointer;
    transition: all 0.4s;
}
.switchProjectButton:hover {
    border: 2px solid rgba(240, 255, 255, 0.45);
}

.buttonProjectActif {
    border: 2px solid rgb(239 59 45 / 35%);
    color: rgb(242 58 43 / 55%);

    cursor: default;
}
.buttonProjectActif:hover {
    border: 2px solid rgb(239 59 45 / 35%);
    color: rgb(242 58 43 / 55%);
}

    /* Grid Veille */
    .sectionsGridContainer {
        color: #e2e8f0;

        display: grid; 
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 1fr 1fr; 
        gap: 50px 50px; 
        grid-template-areas: 
          "sectionSites sectionTips"
          "Autres ."; 

        opacity: 0;
        /* Delai adapté avec le fadeIn de .carreTitre   /!\ (effet à maintenir) */
        animation: fadeIn 0.5s ease 0.85s normal forwards running;
      }
      .sectionSites { 
          grid-area: sectionSites; 

          opacity: 0;
          position: relative;
          right: 400px;
          bottom: 20px;
          animation: sectionSitesSlide 1.5s ease 1.8s normal forwards running;
        }
        @keyframes sectionSitesSlide {
            from {
                opacity: 0;
                right: 400px;
            }
            to {
                opacity: 1;
                right: 0px;
            }
        }
      .sectionTips { 
          grid-area: sectionTips; 
          border-left: 1px solid rgba(239, 59, 45, 0);
          padding-left: 50px;
          margin-left: 30px;

          position: relative;
          bottom: 140px;
          left: 100px;

          opacity: 0;
          position: relative;
          left: 400px;
          animation: sectionTipsSlide 1.4s ease 1s normal forwards running, borderDelayed 0.5s ease 3s normal forwards running;
        }
        @keyframes sectionTipsSlide {
            from {
                opacity: 0;
                left: 400px;
            }
            to {
                opacity: 1;
                left: 0px;
            }
        }
        @keyframes borderDelayed {
            from {
                border-left: 1px solid rgba(239, 59, 45, 0);
            }
            to {
                border-left: 1px solid rgba(239, 59, 45, 0.4);
            }
        }
      .Autres { grid-area: Autres; }


.sectionSitesTitle {
    font-size: 140%;
    color: #ef3b2d;
    /* Synchro avec .carreTitreVeille */
    animation: whiteToOrange 0.8s ease 2.7s normal forwards running;
}
.sectionTipsTitle {
    font-size: 140%;
    color: #ef3b2d;
    /* Synchro avec .carreTitreVeille */
    animation: whiteToOrange 0.8s ease 1.6s normal forwards running;
}
.sectionAutresTitle {
    color: #ef3b2d;
}

.veilleLignes {
    padding: 0px 0px 0px 30px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.1);

    /* border-radius: 6px; */
}
.veilleLignesLiens {
    position: relative;
    float: right;
    color: #e2e8f0;
    text-decoration: none;
}
.veilleLignesLiens:hover {
    animation: lienCouleurSwitch 0.2s ease 0s normal forwards running;
}
@keyframes lienCouleurSwitch {
    from {
        color: #e2e8f0;
    }
    to {
        color: #ef3b2d;
    }
}


/* Grid ligneVeille (description + lien) */
.veilleLignes {
    list-style: none;

    display: grid; 
    grid-template-columns: 1.2fr 0.8fr; 
    grid-template-rows: 1fr; 
    gap: 0px 15px; 
    grid-template-areas: 
      "veilleLignesDesc veilleLignesLiens"; 
  }
  .veilleLignesLiens { 
      grid-area: veilleLignesLiens; 

      position: relative;
      margin: auto 0px;
    }
  .veilleLignesDesc { 
      grid-area: veilleLignesDesc; 
      margin-block-start: 0.6em;
      margin-block-end: 0.6em;
    }

    


    li.veilleLignes::before {
        content: "";

    }


.veilleLigneAjout {
    position:relative; 
    text-align:center; 
    border-radius:3px; 
    background-color:rgba(20,201,151,0.07); 
    border:1px solid rgba(20,201,151,0.8);

    padding: 8px 0;

    cursor: pointer;
}
li.veilleLigneAjout::before {
    content: "";

}



/* https://loading.io/css/ */
.lds-ring {
    display: inline-block;
    /* position: */
    position: relative;
    line-height: 0px;
    bottom: 25%;
    /* margin-top: 40px; */
    left: 50%;
    transform: translateX(-50%);

    width: 160px;
    height: 160px;

    /* FadeIn */
    opacity: 0;
    animation: fadeInSpinner 0.5s 2s normal forwards ease;
  }
  @keyframes fadeInSpinner {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.8;
    }
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;

    width: 128px;
    height: 128px;

    margin: 8px;
    border: 8px solid #fff;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #ef3b2d transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;

  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;

  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;

  }
  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }



  .paddingBottom {
    padding-bottom: 50px;
  }



    /* Anims en 2 temps (aller et retour) permettrait de gerer le hover differremment et regle le probleme de 360 au moment du demi-tour */
    #poissonAcueil1 {
    
    }

    /* TEST Anims en 2 temps avec JS et interval */
    .poissonAcueil1AnimFront {
        offset-path: path("M -20 -2 C 52 10 136 11 231 -2");
        top: 25%;
        position: absolute;
    
        animation: poissonAcueil1AnimFront 6000ms 1 linear;
        width: 63px;
        height: 63px;
        z-index: 999;
    
        content:url("../img/poisson_mix.png");
        opacity: 0;
        transform: rotateY(180deg);
    
        transition: filter 0.7s linear;
    }
    .poissonAcueil1AnimBack {
        offset-path: path("M 232 1 C 152 -11 42 -10 -28 0");
        top: 24%;
        position: absolute;

        animation: poissonAcueil1AnimBack 6000ms 1 linear;
        width: 55px;
        height: 55px;
        z-index: -999;

        content:url("../img/poisson_mix.png");
        opacity: 0;
        transform: rotateY(180deg);
        filter: blur(1px);

        transition: filter 0.7s linear;
    }

    @keyframes poissonAcueil1AnimFront {
        0% {
            offset-distance: 0%;
            opacity: 0;
            transform: rotateY(110deg);
        }
        7% {
            /* offset-distance: 7%; */
            opacity: 0.7;
            transform: rotateY(130deg);
        } 
        50% {
            /* offset-distance: 50%; */
            opacity: 1;
            transform: rotateY(180deg);
        }
        93% {
            /* offset-distance: 93%; */
            opacity: 0.7;
            transform: rotateY(120deg);
        }
        100% {
            offset-distance: 100%;
            opacity: 0;
            transform: rotateY(100deg);
        }
    }
    @keyframes poissonAcueil1AnimBack {
        0% {
            offset-distance: 0%;
            opacity: 0;
            transform: rotateX(180deg) rotateY(100deg);
        }
        7% {
            offset-distance: 7%;
            opacity: 0;
            transform: rotateX(180deg) rotateY(120deg);
        } 
        50% {
            offset-distance: 50%;
            opacity: 0.7;
            transform: rotateX(180deg) rotateY(180deg);
        }
        93% {
            offset-distance: 93%;
            opacity: 0;
            transform: rotateX(180deg) rotateY(120deg);
        }
        100% {
            offset-distance: 100%;
            opacity: 0;
            transform: rotateX(180deg) rotateY(90deg);
        }
    }

/* .lightBulbWrapperDiv:hover #poissonAcueil1, .lightBulbWrapperDiv.hover #poissonAcueil1 {
    filter: brightness(0.1) drop-shadow(2px 4px 6px black);
    opacity: 1 !important;
} */

.lightBulbWrapperDiv:hover .poissonAcueil1AnimFront, .lightBulbWrapperDiv.hover .poissonAcueil1AnimFront {
    filter: brightness(0.1) drop-shadow(2px 4px 6px black);
    /* opacity: 1 !important; */
}
.lightBulbWrapperDiv:hover .poissonAcueil1AnimBack, .lightBulbWrapperDiv.hover .poissonAcueil1AnimBack {
    filter: blur(1px) brightness(0.2) !important;
    opacity: 1 !important;
}


  /* Raie Accueil */
  #raieAccueil1 {
    filter: blur(1px);
    /* https://yqnn.github.io/svg-path-editor/ */
    /* offset-path: path("M 135 -145 C -63 446 460 690 1062 864"); */
    offset-path: path("M 135 -145 C 108.781 388.732 1171.381 539.914 2501.792 384.412");
    offset-rotate: auto;

    position: absolute;

    top: -5%;
    z-index: -5;

    /* Delai = delai initial avant les setInterval: (reponsiv) */
    animation: raieAccueil1 20000ms 1000ms 1 linear;
    width: 200px;
    height: 200px;

    /* background: cyan; */
    content:url("../img/raieAccueil1.png");
    opacity: 0;
    transform: rotateZ(9deg) rotateX(180deg);
  }
  
  @keyframes raieAccueil1 {
    0% {
        transform: rotateZ(9deg) rotateX(180deg);
        offset-distance: 0%;
        opacity: 0;
    }
    11% {
        opacity: 0.3;
    }
    22% {
        opacity: 0.3;
        transform: rotateZ(9deg) rotateX(180deg);
    }
    33% {
        opacity: 0.3;
    }
    44% {
        opacity: 0.3;
    }
    55% {
        transform: rotateZ(9deg) rotateX(130deg);
        opacity: 0.3;
    }
    66% {
        opacity: 0.3;
    }
    77% {
        transform: rotateZ(9deg) rotateX(120deg);
        opacity: 0.3;
    }
    88% {
        opacity: 0.3;
    }
    100% {
        transform: rotateZ(9deg) rotateX(110deg);
        opacity: 0.1;
        offset-distance: 100%;
    }
  }





  #motion-demo {
    display: none;
    /* https://yqnn.github.io/svg-path-editor/ */
    offset-path: path("M -79 5 C 159 113 593 -33 1089 80");
    top: 3%;
    offset-rotate: auto;
    position: absolute;

    animation: move 6500ms 1500ms infinite ease;
    width: 80px;
    height: 80px;

    /* background: cyan; */
    content:url("../img/poisson_red.png");
    opacity: 0;
    transform: rotateY(180deg);

    filter:invert(0%);
  }
  
  @keyframes move {
    0% {
        offset-distance: 0%;
        opacity: 0;
        transform: rotateY(180deg);
        filter:invert(0%);
    }
    11% {
        opacity: 0.7;
        transform: rotateY(140deg);
        filter:invert(5%);
    }
    22% {
        opacity: 0.3;
        transform: rotateY(180deg);
        filter:invert(0%);
    }
    33% {
        opacity: 0.7;
        transform: rotateY(210deg);
        filter:invert(5%);
    }
    44% {
        opacity: 0.3;
        transform: rotateY(180deg);
        filter:invert(0%);
    }
    55% {
        opacity: 0.7;
        transform: rotateY(140deg);
        filter:invert(5%);
    }
    66% {
        opacity: 0.3;
        transform: rotateY(180deg);
        filter:invert(0%);
    }
    77% {
        opacity: 0.7;
        transform: rotateY(210deg);
        filter:invert(5%);
    }
    88% {
        opacity: 0.3;
        transform: rotateY(180deg);
        filter:invert(0%);
    }
    100% {
        opacity: 0;
        offset-distance: 100%;
        transform: rotateY(140deg);
        filter:invert(5%);

    }
  }

  /* Raie manta */
  #motion-demo2 {
    display: none;
    filter: blur(2px);
    /* https://yqnn.github.io/svg-path-editor/ */
    offset-path: path("M 248 -160 C -58 378 289 368 30 872");
    offset-rotate: auto;

    position: fixed;

    top: -5%;
    z-index: -5;

    animation: move2 18000ms 2000ms infinite linear;
    width: 200px;
    height: 200px;

    /* background: cyan; */
    content:url("../img/poisson4_red2.png");
    opacity: 0;
    transform: rotateZ(270deg);
  }
  
  @keyframes move2 {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }
    11% {
        opacity: 0.3;
    }
    22% {
        opacity: 0.3;
    }
    33% {
        opacity: 0.3;
    }
    44% {
        opacity: 0.3;
    }
    55% {
        opacity: 0.3;
    }
    66% {
        opacity: 0.3;
    }
    77% {
        opacity: 0.3;
    }
    88% {
        opacity: 0.3;
    }
    100% {
        opacity: 0.1;
        offset-distance: 100%;
    }
  }



  /*  ANIMS JELLYFISHEEESSS (Le "saut" marche: possibilité de rajouter encore des etapes juste pour le rotateX qui fait l'effet de *BwOoPBwoOp*) */
  /* En vrai mettre des saut tout les 2% juste pour le rotateX pour plus de **BwOoPBwoOp**BwOoPBwoOp* */
  /* rotateX = height (le bwoop) */
  #motion-demo3a {
    display: none;
    /* https://yqnn.github.io/svg-path-editor/ */
    offset-path: path("M -76 920 C 189 703 321 105 580 -22");
    offset-rotate: auto;
    position: fixed;

    /* C'est à cause du top:5% que le path svg commence en haut */
    top: -5%;
    z-index: -5;

    animation: move3a 30000ms 1000ms infinite cubic-bezier(0.52, 0.23, 0.34, 0.72);
    width: 65px;
    /* height: 65px; */

    content:url("../img/jellyfish_blue.png");
    opacity: 0;
    transform: rotateZ(75deg);
  }
  #motion-demo3b {
    display: none;
    /* https://yqnn.github.io/svg-path-editor/ */
    offset-path: path("M -76 920 C 189 703 207 72 434 -45");
    offset-rotate: auto;
    position: fixed;

    /* C'est à cause du top:5% que le path svg commence en haut */
    top: 3%;
    z-index: -5;

    animation: move3b 30000ms 1000ms infinite cubic-bezier(0.52, 0.23, 0.34, 0.72);
    width: 55px;
    height: 80px;

    content:url("../img/jellyfish_blue.png");
    opacity: 0;
    transform: rotateZ(75deg);
  }
  #motion-demo3c {
    display: none;
    /* https://yqnn.github.io/svg-path-editor/ */
    offset-path: path("M -66 669 C 164 477 134 100 275 -53");
    offset-rotate: auto;
    position: fixed;

    /* C'est à cause du top:5% que le path svg commence en haut */
    top: 3%;
    z-index: -5;

    animation: move3b 31000ms 1050ms infinite cubic-bezier(0.52, 0.23, 0.34, 0.72);
    width: 55px;
    height: 80px;

    content:url("../img/jellyfish_blue.png");
    opacity: 0;
    transform: rotateZ(75deg);
  }

  /*  ANIMS JELLYFISHEEESSS (Le "saut" marche: possibilité de rajouter encore des etapes juste pour le rotateX qui fait l'effet de *BwOoPBwoOp*) */
  /* En vrai mettre des saut tout les 2% juste pour le rotateX pour plus de **BwOoPBwoOp**BwOoPBwoOp* */
  /* IDEE: pour l'enfant (bcp plus petit): Faire pleins pleins pleins de petits **bwoPbwopbwop** */
  @keyframes move3a {
    0% {
        offset-distance: 0%;
        opacity: 0;
        transform: rotateZ(75deg);
        width: 55px;
        height: 80px;
    }
    5% {
        offset-distance: 5%;

        transform: rotateZ(75deg);
        width: 90px;
        height: 45px;
    }
    11% {
        /* offset-distance: 11%; */

        opacity: 0.5;
        transform: rotateZ(75deg);
        width: 55px;
        height: 80px;

    }
    16% {
        offset-distance: 16%;

        transform: rotateZ(75deg);
        width: 90px;
        height: 45px;

    }
    22% {
        /* offset-distance: 22%; */

        opacity: 0.4;
        transform: rotateZ(75deg);
        width: 55px;
        height: 80px;

    }
    27% {
        offset-distance: 27%;

        transform: rotateZ(75deg);
        width: 90px;
        height: 45px;

    }
    33% {
        /* offset-distance: 33%; */

        opacity: 0.5;
        transform: rotateZ(75deg);
        width: 55px;
        height: 80px;


    }
    38% {
        offset-distance: 38%;

        transform: rotateZ(75deg);
        width: 90px;
        height: 45px;

    }
    44% {
        /* offset-distance: 44%; */

        opacity: 0.4;
        transform: rotateZ(75deg);
        width: 55px;
        height: 80px;


    }
    49% {
        offset-distance: 49%;

        transform: rotateZ(75deg);
        width: 90px;
        height: 45px;

    }
    55% {
        /* offset-distance: 55%; */

        opacity: 0.5;
        transform: rotateZ(75deg);
        width: 55px;
        height: 80px;


    }
    60% {
        offset-distance: 60%;

        transform: rotateZ(75deg);
        width: 90px;
        height: 45px;

    }
    66% {
        /* offset-distance: 66%; */

        opacity: 0.4;
        transform: rotateZ(75deg);
        width: 55px;
        height: 80px;

    }
    71% {
        offset-distance: 71%;

        transform: rotateZ(75deg);
        width: 90px;
        height: 45px;

    }
    77% {
        /* offset-distance: 77%; */

        opacity: 0.5;
        transform: rotateZ(75deg);
        width: 55px;
        height: 80px;

    }
    82% {
        offset-distance: 82%;

        transform: rotateZ(75deg);
        width: 90px;
        height: 45px;

    }
    88% {
        /* offset-distance: 88%; */

        opacity: 0.4;
        transform: rotateZ(75deg);
        width: 55px;
        height: 80px;

    }
    93% {
        offset-distance: 93%;

        transform: rotateZ(75deg);
        width: 90px;
        height: 45px;

    }
    100% {
        opacity: 0.2;
        transform: rotateZ(75deg);
        width: 55px;
        height: 80px;

        offset-distance: 100%;
    }
  }
  /* 55 80, 90 45 */
  @keyframes move3b {
    0% {
        offset-distance: 0%;
        /* opacity: 0; */
        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0;
    }
    3% {
        offset-distance: 3%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    6% {
        /* offset-distance: 6%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    9% {
        offset-distance: 9%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    12% {
        /* offset-distance: 12%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    15% {
        offset-distance: 15%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    18% {
        /* offset-distance: 18%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    21% {
        offset-distance: 21%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    24% {
        /* offset-distance: 24%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    27% {
        offset-distance: 27%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    30% {
        /* offset-distance: 30%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    33% {
        offset-distance: 33%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    36% {
        /* offset-distance: 36%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    39% {
        offset-distance: 39%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    42% {
        /* offset-distance: 42%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    45% {
        offset-distance: 45%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    48% {
        /* offset-distance: 48%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    51% {
        offset-distance: 51%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    54% {
        /* offset-distance: 54%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    57% {
        offset-distance: 57%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    60% {
        /* offset-distance: 60%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    63% {
        offset-distance: 63%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    66% {
        /* offset-distance: 66%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    69% {
        offset-distance: 69%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    72% {
        /* offset-distance: 72%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    75% {
        offset-distance: 75%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    78% {
        /* offset-distance: 78%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    81% {
        offset-distance: 81%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    84% {
        /* offset-distance: 84%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    87% {
        offset-distance: 87%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    90% {
        /* offset-distance: 90%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    93% {
        offset-distance: 93%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    96% {
        /* offset-distance: 96%; */

        transform: rotateZ(75deg);
        width: 25px;
        height: 50px;
        opacity: 0.5;

    }
    99% {
        offset-distance: 99%;

        transform: rotateZ(75deg);
        width: 60px;
        height: 25px;

    }
    100% {
        offset-distance: 100%;

        transform: rotateZ(75deg);
        width: 20px;
        height: 25px;
        opacity: 0.5;
    }
  }


  /* WhaleShark */
  #motion-demo_whaleShark {
    display: none;
    filter: blur(3px);
    /* https://yqnn.github.io/svg-path-editor/ */
    /* offset-path: path("M -65 176 A 1 1 0 0 0 -88 -451"); */
    /* offset-path: path("M -283 488 C 342 153 217 -360 -205 -555"); */
    

    offset-rotate: auto;

    position: fixed;

    /* Modif Path:  */
    top: 10%;
    offset-path: path("M -270 -108 C 100 349 557 46 527 -124");


    z-index: -10;

    animation: moveWhaleShark 30000ms 5s infinite linear;
    width: 600px;
    height: 600px;

    /* background: cyan; */
    content:url("../img/whaleSharkDotted.png");
    opacity: 0;
    transform: rotateZ(98deg);
  }
  
  @keyframes moveWhaleShark {
    0% {
        offset-distance: 0%;
        opacity: 0;
        filter: blur(3px);
    }
    11% {
        opacity: 0.25;
    }
    22% {
        opacity: 0.2;
    }
    33% {
        opacity: 0.25;
    }
    44% {
        opacity: 0.2;
    }
    55% {
        opacity: 0.25;
    }
    66% {
        opacity: 0.2;
    }
    77% {
        opacity: 0.25;
    }
    88% {
        opacity: 0.2;
        filter: blur(3px);
    }
    100% {
        opacity: 0.1;
        offset-distance: 100%;
        filter: blur(7px);

    }
  }














  #motion-demoBubble1 {
    display: none;
    filter: blur(0px);
    /* https://yqnn.github.io/svg-path-editor/ */
    offset-path: path("M 248 -160 C -84 114 470 603 30 872");
    offset-rotate: auto;

    position: fixed;

    top: -5%;
    z-index: -5;

    animation: moveBubble 12000ms 2000ms infinite linear;
    width: 20px;
    height: 20px;

    /* background: cyan; */
    content:url("../img/bubble.png");
    opacity: 0;
    /* transform: rotateZ(270deg); */
  }
  @keyframes moveBubble {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }
    11% {
        opacity: 0.8;
    }
    22% {
        opacity: 0.8;
    }
    33% {
        opacity: 0.8;
    }
    44% {
        opacity: 0.8;
    }
    55% {
        opacity: 0.8;
    }
    66% {
        opacity: 0.8;
    }
    77% {
        opacity: 0.8;
    }
    88% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        offset-distance: 100%;
    }
  }











    /*  Tortue, turtle */
    #motion-demo_tortoise {
        display: none;
        filter: blur(5px);
        /* https://yqnn.github.io/svg-path-editor/ */
        offset-path: path("M 866 595 C 524 494 155 241 -188 29");
        offset-rotate: auto;
    
        position: fixed;
    
        top: -5%;
        z-index: -2;
    
        animation: moveTortoise 13500ms 2000ms infinite ease-in;
        width: 0px;
        height: 0px;
    
        /* background: cyan; */
        content:url("../img/tortoise_red.png");
        opacity: 0;
        transform: rotateZ(178deg);
    
    }
    @keyframes moveTortoise {
        0% {
            offset-distance: 0%;
            opacity: 0;
            filter: blur(7px);
            width: 0px;
            height: 0px;

        }
        10% {
            opacity: 0.4;
        }
        90% {
            filter: blur(0px);
            opacity: 0.7;
        }
        100% {
            offset-distance: 100%;
            opacity: 0.8;
            filter: blur(0px);
            width: 200px;
            height: 200px;
    
        }
    }











    /* ESPADONS */
    /* RAPID poisson esturgeon  */
    #motion-demo_rapid {
        display: none;
        /* https://yqnn.github.io/svg-path-editor/ */
        /* From droite to gauche, trait */
        /* offset-path: path("M 802 -40 C 430 65 98 182 -159 297"); */
        offset-path: path("M 1323 383 C 960 461 377 333 -302 -201");
        
        offset-rotate: auto;
    
        position: fixed;
    
        top: 10%;
        z-index: -5;
    
        /* animation: moveRapid 1300ms 3000ms 1 linear; */
        animation: moveRapid 1850ms 1 cubic-bezier(1,.66,.51,.98);

        width: 230px;
        height: 120px;
    
        /* background: cyan; */
        content:url("../img/rapid_blue.png");
        opacity: 0;
        transform: rotateZ(172deg);

        filter: invert(0%) blur(0px);
    }

    #motion-demo_rapid2 {
        display: none;
        /* https://yqnn.github.io/svg-path-editor/ */
        /* From droite to gauche, trait */
        /* offset-path: path("M 802 -40 C 430 65 98 182 -159 297"); */
        offset-path: path("M 1323 383 C 696 580 524 136 -302 -201");
        
        offset-rotate: auto;
    
        position: fixed;
    
        top: 10%;
        z-index: -5;
    
        /* animation: moveRapid 1300ms 3000ms 1 linear; */
        animation: moveRapid 1850ms 520ms 1 cubic-bezier(1,.66,.51,.98);

        width: 200px;
        height: 107px;
    
        /* background: cyan; */
        content:url("../img/rapid_blue.png");
        opacity: 0;
        transform: rotateZ(172deg);

        filter: invert(0%) blur(0px);
    }

    
    #motion-demo_rapid3 {
        display: none;
        /* https://yqnn.github.io/svg-path-editor/ */
        /* From droite to gauche, trait */
        /* offset-path: path("M 802 -40 C 430 65 98 182 -159 297"); */
        offset-path: path("M 1323 383 C 840 327 722 12 -492 -110");
        
        offset-rotate: auto;
    
        position: fixed;
    
        top: 10%;
        z-index: -5;
    
        /* animation: moveRapid 1300ms 3000ms 1 linear; */
        animation: moveRapid 1850ms 310ms 1 cubic-bezier(1,.66,.51,.98);

        width: 150px;
        height: 80px;
    
        /* background: cyan; */
        content:url("../img/rapid_blue.png");
        opacity: 0;
        transform: rotateZ(172deg);

        filter: invert(0%) blur(0px);
    }


    @keyframes moveRapid {
        0% {
            offset-distance: 0%;
            opacity: 0;
            filter: invert(0%) blur(0px);
        }
        20% {
            opacity: 0.5;
            filter: invert(0%) blur(0px);
        }
        30% {
            opacity: 0.3;
            filter: invert(22%) blur(1px);
        }
        40% {
            opacity: 0.5;
            filter: invert(0%) blur(1px);
        }
        50% {
            opacity: 0.3;
            filter: invert(22%) blur(2px);
        }
        60% {
            opacity: 0.5;
            filter: invert(0%) blur(3px);
        } 
        70% {
            opacity: 0.3;
            filter: invert(22%) blur(4px);
        }
        80% {
            opacity: 0.5;
            filter: invert(0%) blur(4px);
        }
        100% {
            opacity: 0;
            filter: invert(22%) blur(6px);
            offset-distance: 100%;
        }
    }



    #motion-demo_whale2Pc {
        display: none;
        /* https://yqnn.github.io/svg-path-editor/ */
        /* From droite to gauche, trait */
        /* offset-path: path("M 802 -40 C 430 65 98 182 -159 297"); */
        offset-path: path("M 61 40 C 12 13 3 9 -8 9");
        
        offset-rotate: auto;
    
        position: fixed;
    
        top: -5%;
        z-index: -999;
    
        /* animation: moveRapid 1300ms 3000ms 1 linear; */
        animation: moveWhale2 30000ms 6000ms 1 linear;

        width: 1500px;
        height: 1300px;
    
        /* background: cyan; */
        content:url("../img/cachalot_red.png");
        opacity: 0;
        /* transform: rotateZ(172deg); */

        filter: invert(0%) blur(200px);
    }
    @keyframes moveWhale2 {
        0% {
            offset-distance: 0%;
            opacity: 0;
            filter: invert(0%) blur(200px);
        }
        30% {
            offset-distance: 30%;
            opacity: 0.2;
            filter: invert(0%) blur(8px);
        }
        70% {
            offset-distance: 70%;
            opacity: 0.2;
            filter: invert(0%) blur(8px);
        }
        100% {
            opacity: 0;
            filter: invert(0%) blur(200px);
            offset-distance: 100%;
        }
    }



    


    #scubaDiver {
        display: none;
        /* https://yqnn.github.io/svg-path-editor/ */
        /* From droite to gauche, trait */
        /* offset-path: path("M 802 -40 C 430 65 98 182 -159 297"); */
        /* offset-path: path("M 0 63 L 27 14"); */
        
        /* offset-rotate: auto; */
    
        position: absolute;

        right: -100px;
        bottom: -80px;
    
        /* top: -5%; */
        z-index: -999;
    
        /* animation: moveRapid 1300ms 3000ms 1 linear; */
        animation: fadeScuba 10000ms 1200ms infinite linear, floatScuba 5s 0s infinite forwards ease-in-out;

        width: 160px;
        /* height: 160px; */
    
        /* background: cyan; */
        content:url("../img/scuba3_red.png");
        opacity: 0;
        /* transform: rotateZ(172deg); */

        transform: rotateZ(47deg) rotateY(181deg);
        filter: invert(0%) blur(10px);
    }
    @keyframes fadeScuba {
        0% {
            /* offset-distance: 0%; */
            opacity: 0;
            filter: invert(0%) blur(10px);
        }
        30% {
            /* offset-distance: 30%; */
            opacity: 0.7;
            filter: invert(0%) blur(1px);
        }
        70% {
            /* offset-distance: 70%; */
            opacity: 0.7;
            filter: invert(0%) blur(1px);
        }
        100% {
            opacity: 0;
            filter: invert(0%) blur(10px);
            /* offset-distance: 100%; */
        }
    }
    @keyframes floatScuba {
        0% {
            bottom: -70px;

        }
        50% {
            bottom: -85px;

        }
        100% {
            bottom: -70px;

        }
    }

    .aquariumScubaFlash {
        animation: aquariumScubaFlash 10000ms 1200ms infinite linear;
    }
    @keyframes aquariumScubaFlash {
        0% {
            filter: grayscale(0)
        }
        51% {
            filter: grayscale(0)

        }
        52% {
            filter: grayscale(1)

        }
        55% {
            filter: grayscale(0)

        }
        100% {
            filter: grayscale(0)

        }
    }


    #scubaDiverFlash {
        display: none;
        position: absolute;
        width: 60px;
        height: 60px;
        right: -61px;
        top: 27px;
        opacity: 0;
        background: rgb(255,255,255);
        background: -moz-radial-gradient(circle, rgba(255,255,255,1) 4%, rgba(219,255,252,0.520045518207283) 31%, rgba(249,255,2,0) 65%);
        background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 4%, rgba(219,255,252,0.520045518207283) 31%, rgba(249,255,2,0) 65%);
        background: radial-gradient(circle, rgba(255,255,255,1) 4%, rgba(219,255,252,0.520045518207283) 31%, rgba(249,255,2,0) 65%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#f9ff02",GradientType=1);
    
        animation: scubaFlashProc 10000ms 1200ms infinite linear, floatScubaFlash 5s 0s infinite forwards ease-in-out;
    }
    @keyframes scubaFlashProc {
        0% {
            opacity: 0;
        }
        43% {
            filter: blur(0px);
            opacity: 0;
        }
        44% {
            filter: blur(5px);
            opacity: 0.2;
        }
        49% {
            filter: blur(5px);
            opacity: 0.2;
        }
        50% {
            filter: blur(0px);
            opacity: 0;
        }
        51% {
            filter: blur(3px);
            opacity: 1;
        }
        52% {
            filter: blur(0px);
            opacity: 0; 
        }
        100% {
            opacity: 0;

        }
    }
    @keyframes floatScubaFlash {
        0% {
            top: 27px;

        }
        50% {
            top: 42px;

        }
        100% {
            top: 27px;

        }
    }






















    /* Shark rotate (pas de path) */ 
    /* FAIRE LA MEME mais avec diametre de rotate enorme (refaire PNG) et taille poisson plus grande (POUR PC) */
    #motion-demo_shark1 {
        display: none;
        filter: blur(3px);    
        position: fixed;
    
        /* Mobile (effet rotate dans le coin en haut à droite) */
        /* top: 0%;
        right: 0%; */
        top: -18%;
        right: -8%;  
        z-index: -2;
    
        animation: moveShark1test 8000ms 1 linear;
        width: 310px;
        height: 310px;
    
        content:url("../img/shark1_red_rotate.png");
        opacity: 0;
        transform: rotateZ(100deg) rotateX(180deg);
    }
    @keyframes moveShark1test {
        0% {
            opacity: 0;
            transform: rotateZ(100deg) rotateX(180deg);
        }
        40% {
            opacity: 0.4;
        }
        70% {
            opacity: 0.4;
        }
        100% {
            opacity: 0;
            transform: rotateZ(370deg) rotateX(180deg);
        }
    }






    /* Whale rotate (pas de path) */ 
    /* FAIRE LA MEME mais avec diametre de rotate enorme (refaire PNG) et taille poisson plus grande (POUR PC) */
    #motion-demo_whalePc {
        display: none;
        filter: blur(200px);    
        position: fixed;
    
        /* Mobile (effet rotate dans le coin en haut à droite) */
        /* top: 0%;
        right: 0%; */
        bottom: 15%;
        /* right: 35%; */
        z-index: -20;
    
        animation: moveWhale 60000ms infinite linear;
        width: 1300px;
        height: 1300px;
    
        content:url("../img/whalePC_red_rotate.png");
        opacity: 0;
        transform: rotateZ(-100deg);
    }
    @keyframes moveWhale {
        0% {
            filter: blur(200px);    

            opacity: 0;
            transform: rotateZ(-100deg);
        }
        25% {
            filter: blur(8px);    
            opacity: 0.08;
        }
        75% {
            filter: blur(8px);    
            opacity: 0.08;
        }
        100% {
            filter: blur(200px);    
            opacity: 0;
            transform: rotateZ(150deg);
        }
    }






    #coral1 {
        display: none;
        filter: blur(4px);    
        position: fixed;
    
        /* Mobile (effet rotate dans le coin en haut à droite) */
        /* top: 0%;
        right: 0%; */
        bottom: -13%;
        right: -2%;
        z-index: -200;
    
        /* animation: moveCoral1 60000ms infinite linear; */
        width: 350px;
        height: 350px;
    
        content:url("../img/coral1_blue.png");
        opacity: 0.25;
        transform: rotateZ(0deg) rotateX(0deg);

        animation: moveCoral1 5s infinite ease;
    }
    @keyframes moveCoral1 {
        0% {
            height: 350px;
            width: 350px;
        }
        50% {
            height: 315px;
            width: 350px;
        }
        100% {
            height: 350px;
            width: 350px;
        }
    }
    #coral2 {
        display: none;
        filter: blur(2px);    
        position: fixed;
    
        /* Mobile (effet rotate dans le coin en haut à droite) */
        /* top: 0%;
        right: 0%; */
        bottom: -7%;
        right: -2%;
        z-index: -20;
    
        /* animation: moveCoral1 60000ms infinite linear; */
        width: 200px;
        height: 200px;
    
        content:url("../img/coral2_red.png");
        opacity: 0.3;
        transform: rotateZ(0deg) rotateX(0deg);

        animation: moveCoral2 5s infinite ease;
    }
    @keyframes moveCoral2 {
        0% {
            height: 200px;
            width: 200px;
        }
        50% {
            height: 180px;
            width: 200px;
        }
        100% {
            height: 200px;
            width: 200px;
        }
    }



    #coral3 {
        display: none;
        filter: blur(8px);    
        position: fixed;
    
        /* Mobile (effet rotate dans le coin en haut à droite) */
        /* top: 0%;
        right: 0%; */
        bottom: -7%;
        right: -2%;
        z-index: -200;

    
        /* animation: moveCoral1 60000ms infinite linear; */
        width: 400px;
        height: 400px;
    
        content:url("../img/coral2_red.png");
        opacity: 0.1;
        transform: rotateY(180deg) rotateZ(0deg) rotateX(0deg);

        animation: moveCoral3 8s infinite ease-in-out;
    }
    @keyframes moveCoral3 {
        0% {
            width: 400px;
            height: 400px;
            }
        50% {
            width: 400px;
            height: 350px;
            }
        100% {
            width: 400px;
            height: 400px;
            }
    }






    #coral4 {
        display: none;
        filter: blur(7px);    
        position: fixed;
    
        /* Mobile (effet rotate dans le coin en haut à droite) */
        /* top: 0%;
        right: 0%; */
        top: -15%;
        left: -5%;
        z-index: -80;

    
        /* animation: moveCoral1 60000ms infinite linear; */
        width: 300px;
        height: 300px;
    
        content:url("../img/coral1_blue.png");
        opacity: 0.2;
        transform: rotateY(181deg) rotateZ(15deg) rotateX(182deg);
        animation: moveCoral4 8s infinite ease-in-out;
    }
    @keyframes moveCoral4 {
        0% {
            width: 300px;
            height: 300px;
            }
        50% {
            width: 300px;
            height: 280px;
            }
        100% {
            width: 300px;
            height: 300px;
            }
    }














  #iframe {
    height: 700px;

    text-align: center;
    height: 700px;
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }




  #status {
    letter-spacing: 2px; 
    font-size:85%; 
    opacity:0.8; 
    margin-left: 8px;

    border: 2px solid rgba(239, 59, 45, 0.4);
    background-color: rgba(239, 59, 45, 0.1);
    padding: 2px 7px;
    border-radius: 4px; 

    animation: blinkeringStatus 2s infinite forwards linear;
  }
  @keyframes blinkeringStatus {
    0% {
        border: 2px solid rgba(239, 59, 45, 0.4);
        background-color: rgba(239, 59, 45, 0.1);

    }
    33% {
        border: 2px solid rgba(239, 59, 45, 0.9);
        background-color: rgba(239, 59, 45, 0.3);

    }
    66% {
        border: 2px solid rgba(239, 59, 45, 0.9);
        background-color: rgba(239, 59, 45, 0.3);

    }
    100%{
        border: 2px solid rgba(239, 59, 45, 0.4);
        background-color: rgba(239, 59, 45, 0.1);

    }
  }

  #status2 {
    letter-spacing: 2px; 
    font-size:85%; 
    opacity:0.8; 
    margin-left: 8px;

    border: 2px solid rgba(0, 255, 213, 0.4);
    background-color: rgba(0, 255, 213, 0.1);
    padding: 2px 7px;
    border-radius: 4px; 

    animation: blinkeringStatus2 2s infinite forwards linear;
  }
  @keyframes blinkeringStatus2 {
    0% {
        border: 2px solid rgba(0, 255, 213, 0.4);
        background-color: rgba(0, 255, 213, 0.1);
    
    }
    33% {
        border: 2px solid rgba(0, 255, 213, 1);
        background-color: rgba(0, 255, 213, 0.3);

    }
    66% {
        border: 2px solid rgba(0, 255, 213, 1);
        background-color: rgba(0, 255, 213, 0.3);

    }
    100%{
        border: 2px solid rgba(0, 255, 213, 0.4);
        background-color: rgba(0, 255, 213, 0.1);
    
    }
  }


  #photoTitlePart1 {
    position: relative;
    top: -60px;
    opacity: 0;
    animation: fadeInPhoto1 0.7s 0.25s 1 ease-out forwards;
  }
  #photoTitlePart2 {
    position: relative;
    top: 60px;
    opacity: 0;
    animation: fadeInPhoto2 0.7s 0.75s 1 ease-out forwards;
  }

  @keyframes fadeInPhoto1 {
    from {
        filter: blur(3px);
        opacity: 0;
        top: -60px;
    }
    to {
        filter: blur(0px);
        opacity: 1;
        top: -0px;
    }
  }
  @keyframes fadeInPhoto2 {
    from {
        filter: blur(3px);
        opacity: 0;
        top: 60px;
    }
    to {
        filter: blur(0px);
        opacity: 1;
        top: 0px;
    }
  }


#letterI {
    
}
#flashPoint {
    position: absolute;
    line-height: 0;
    /* top: 8%;
    right: 33px; */
    color: rgb(255, 255, 255);
    opacity: 0;

    filter: blur(150px);

    top: -206px;
    right: -31px;
    font-size: 15em;
    animation: blinkingFlash 0.4s 3s linear forwards;

}
.flashPointAnim {
    /* animation: blinkingFlash 0.4s 4.1s linear forwards; */
}
@keyframes blinkingFlash {
    0% {
        opacity: 0;
        filter: blur(150px);
    }
    48% {
        opacity: 1;
        filter: blur(30px);
    }
    52% {
        opacity: 1;
        filter: blur(30px);
    }
    100% {
        opacity: 0;
        filter: blur(150px);
    }
}


#flashPoint2 {
    position: absolute;
    line-height: 0;
    background-color: rgb(255, 255, 255);

    opacity: 0;

    filter: blur(150px);

    top: -60px;
    right: -2px;

    width: 75%;
    height: 75%;

    animation: blinkingFlash2 0.4s 3s linear forwards;
}
@keyframes blinkingFlash2 {
    0% {
        opacity: 0;
        filter: blur(150px);
    }
    48% {
        opacity: 1;
        filter: blur(10px);
    }
    52% {
        opacity: 1;
        filter: blur(10px);
    }
    100% {
        opacity: 0;
        filter: blur(150px);
    }
}
.flashPoint2Anim {
    /* animation: blinkingFlash2 0.4s 4.1s linear forwards; */
}






.wave {
    display: block;
    width: 0px;
    height: 0px;
    opacity: 0;
    /* background: #ef3b2d; */

    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-5.0em);
    --mask:
        radial-gradient(33.54px at 50% 45.00px,#000 99%,#0000 101%) calc(50% - 30px) 0/60px 100%,
        radial-gradient(33.54px at 50% -30px,#0000 99%,#000 101%) 50% 15px/60px 100% repeat-x;
    -webkit-mask: var(--mask);
            mask: var(--mask);

    /* background: rgb(17,18,63);
    background: -moz-linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(239,59,45,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(239,59,45,1) 100%);
    background: linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(239,59,45,1) 100%); */
    background: rgb(17,18,63);
    background: -moz-linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(45,187,239,1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(45,187,239,1) 100%);
    background: linear-gradient(0deg, rgba(17,18,63,0) 0%, rgba(45,187,239,1) 100%);
    

    animation: fadeInWave 1.2s 1.2s forwards ease-out;

}
@keyframes fadeInWave {
    from {
        opacity: 0;
        height: 0px;
        width: 0;
    }
    to {
        opacity: 0.7;
        height: 26px;
        width: 304px;
        
    }
}

.plezi-submit-btn {
    font-family: 'Nunito', sans-serif;
}

.quote1, .quote2 {
    position: absolute;
    opacity: 0.3;
    width: 100px;

    transition: all 0.3s;
}
.quote1 {
    top: 0%;
    left: 0%;
}
.quote2 {
    bottom: 0%;
    right: 0%;
    margin-right: 25px;
}

#inspirationContainer {
    filter: drop-shadow(2px 4px 6px black);
    transform: scale(0.9);
    position: relative;
    margin-bottom: 0px; 
    color: #e2e8f0;
    padding: 0px 28px;
    border-radius: 6px;

    /* background-color: rgb(239 59 45 / 7%); */
    /* background-color: #00ffd40d; */
    background-color: #00ffd408;

    padding-bottom: 26px;
    border-bottom-right-radius: 10px;
    opacity: 0;

    transition: all 0.3s;

    /* border: 1px solid #00ffd64f; */
}
#inspirationContainer[data-theme="light"] {
    /* background-color: #97ffed; */
    background: radial-gradient(circle, #00ffd557 0%, rgba(2,0,36,0) 200%);
    filter: drop-shadow(1px 2px 6px black);
    border: 2px solid #ef3b2d8a;
}

#quoteContent {
    position: relative; 
    z-index:999; 
    font-size:1.5em; 
    opacity:0.95; 
    font-style:italic;

    display: block;
    width: 60%;
    margin: 0 auto;
    text-align: justify;
}
#quoteContent[data-theme="light"] {
    color: #0e0e0e;
    font-weight: 600;
}

#inspirationTitle {
    /* color:#ef3b2d; */
    color: var(--secondaryColorMat);
    font-size: 1.5em;
    transition: all 0.3s;
}
#inspirationTitle[data-theme="light"] {
    color: #293735;
}

#changeQuotation{
    font-family: 'Nunito', sans-serif;
    /* display: flex; */
    display: none;
    margin: 10px;
    font-size: 2.7em;
    color: #ef3b2d;
    padding: 11px 15px;
    border-bottom-right-radius: 5px;
    opacity: 0.6;
    /* border: 1px solid rgb(239 59 45 / 60%); */
    background-color: rgba(0, 0, 0, 0);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
    margin: 12px auto;

    transform: rotate(0deg);
    /* transition: transform 0.7s ease-in-out; */
}
/* #changeQuotation:hover {
    transform: rotate(180deg);
} */
.rotateChangeQuot {
    animation: rotateChangeQuot 0.7s ease-in-out;
}
@keyframes rotateChangeQuot {
    from {
        transform: rotate(0deg);
    } 
    to {
        transform: rotate(360deg);
    }
}





.testezLe-div {
    position: absolute;
    bottom: 100%;
    right: 100%;
    width: max-content;
    transform: rotateZ(352deg);
    font-size: 1.15em;

    opacity: 0;
    animation: fadeIn 0.7s 4s ease forwards, growTestezLe 3s 4.7s ease infinite;
}

@keyframes growTestezLe {
    0% {
        transform: rotateZ(352deg) scale(1);
    }
    50% {
        transform: rotateZ(352deg) scale(1.1);
    }
    100% {
        transform: rotateZ(352deg) scale(1);
    }
}



.arrow-testezLe {
    position: absolute;
    top: 0;
    right: 0px;
    transform: translateX(158px) rotate(350deg);
}
.atl1 path {
    fill: #ffa012;
}
.atl2 path {
    fill: #ef3b2d;
}
.atl3 path {
    fill: #6d7cfd;
}
.atl4 path {
    fill: #e8ca7d;
}








.fa-file-arrow-down {
    margin-right: 5px;
}

#dlCv {
    background-color: var(--secondaryColorMat);
    padding: 5px 9px;
    border-radius: 36px;

    margin-right: 30px;
    font-size: 0.54em;

    color: #08090c;

    opacity: 0;
    animation: fadeIn 0.5s 0.5s ease forwards;
    transition: all 0.4s;
}
#dlCv:hover {
    background-color: #d54030;
    color: #ebebeb;
}

.projectLinksDiv {
    display: inline-flex;
    flex-direction: row;
    gap: 15px;
    /* Maj caroussel */
    /* float: right; */
    right: 13px;
    position: relative;

    transition: 0.4s ease;
}

.projectLinksDiv-desktop {
    position: absolute !important;
    display: inline-flex !important;
    flex-direction: column !important;
    right: -90px !important;
    top: 18px !important;
}

.githubProjectLink {
    border: 2px solid var(--secondaryColorVeryMat);
    padding: 9px 10px;
    /* font-size: 0.95em; */
    font-size: 1.25em;
    border-radius: 4px;
    position: relative;
    top: 5px;
    background-color: #00ffd51a;

    transition: 0.4s ease;
}
.githubProjectLink:hover {
    background-color: var(--secondaryColor);
    color: #151a23;
}

.githubProjectLink:hover .githubLinkIcon {
    color: #151a23;

}

.githubLinkIcon {
    position: relative;
    top: 1px;
    color:var(--secondaryColor);
}


.linkWebsite {
    gap: 13px;
    display: flex;
    align-items: baseline;

    transition: 0.4s ease;
}

.linkGithub {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;

    /* background-color: #00ffd51a; */

    transition: 0.4s ease;
}

#underlineCV {
    text-decoration-thickness: 3px;
    color: #E7E8F2;
    opacity: 0;
    text-decoration-line: underline;
    text-underline-position: under;
    text-decoration-color: #ef3b2d;
    -moz-text-decoration-color: #ef3b2d;
    text-align: right;
    font-size: 1.6em;
    margin-top: 40px;
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
}

#photoBar {
    position: absolute;
    /* line-height: 0; */
    opacity: 1;
    height: 0px;

    width: 6px;
    background-color: #ef3b2d;
    right: 57px;
    z-index: 500;
    /* transform: rotateZ(180deg); */
    border-radius: 5px;
    animation: photoBarGrow 0.4s 1.5s forwards ease, photoBarShrink 0.4s 3.8s forwards ease;
}
@keyframes photoBarGrow {
    from {
        height: 0px; 

    }
    to {
        height: 50px;

    }
}
@keyframes photoBarShrink {
    from {
        height: 50px;

    }
    to {
        height: 0px;

    }
}

#flashPointCache {
    position: absolute;
    line-height: 0;
    /* top: 8%;
    right: 33px; */
    color: #1d222d;
    opacity: 1;

    filter: blur(0px);

    top: -15%;
    right: 26px;
    font-size: 2em;
    z-index: 5;
}

#bodyLoisir:before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    animation: contrastEffect 0.4s 2.9s ease-in-out forwards;
}
.bodyLoisir {
    /* animation: contrastEffect 0.4s 2.9s ease-in-out forwards; */
}
@keyframes contrastEffect {
    0% {
        backdrop-filter: grayscale(0) brightness(1);
    }
    50% {
        /* filter: grayscale(0.9) brightness(1); */
        backdrop-filter: grayscale(1) brightness(1.3);
    }
    57% {
        /* filter: grayscale(0.9) brightness(1); */
        backdrop-filter: grayscale(1) brightness(1.3);
    }
    100% {
        backdrop-filter: drop-shadow(2px 4px 6px black);
    }
}



#flashRectangle {
    position: absolute;
    background-color: rgba(255,255,255,0.1);
    /* width: 51px;
    height: 30px; */
    width: 0px;
    height: 0px;
    opacity: 0;
    margin: 15px auto;

    border: 4px solid #ef3b2d;
    border-radius: 3px;
    top: -42px;
    right: 25px;
    z-index: 999;

    animation: fadeInFlashRectangleWidth 0.3s 2s forwards ease-in-out, fadeInFlashRectangleHeight 0.3s 2.3s forwards ease-in-out, flashRectangle 0.4s 2.9s ease-in-out forwards, fadeOutHeight 0.3s 3.2s forwards ease-in-out, fadeOutWidth 0.3s 3.6s forwards ease-in-out;
}
@keyframes fadeInFlashRectangleWidth {
    0% {
        opacity: 0;
        width: 0px;
    }
    100% {
        opacity: 1;
        width: 70px;
    }
}
@keyframes fadeInFlashRectangleHeight {
    0% {
        height: 0px;
        margin: 15px auto;
    }
    100% {
        height: 42px;
        margin: 0px auto;
    }
}
@keyframes flashRectangle {
    0% {
        background-color: rgba(255,255,255,0.1);
        border: 4px solid #ef3b2d;
    }
    49% {
        background-color: rgba(255,255,255,1);
        border: 2px solid rgba(255, 205, 201, 1);
    }
    51% {
        background-color: rgba(255,255,255,1);
        border: 2px solid rgba(255, 205, 201, 1);
    }
    100% {
        background-color: rgba(255,255,255,0.1);
        border: 4px solid #ef3b2d;
    }
}
@keyframes fadeOutHeight {
    0% {
        height: 42px;
        margin: 0px auto;
    }
    100% {
        height: 0px;
        margin: 15px auto;
    }
}

@keyframes fadeOutWidth {
    0% {
        opacity: 1;
        width: 70px;
    }
    100% {
        opacity: 0;
        width: 0px;
    }
}



.flashRectangleAnim {
    /* animation: procFlash 0.4s 0s linear forwards !important; */
}
@keyframes procFlash {
    0% {
        opacity: 0;
        background-color: rgba(255,255,255,0.1);
    }
    47% {
        opacity: 1;
        background-color: rgba(255,255,255,1);
    }
    53% {
        opacity: 1;
        background-color: rgba(255,255,255,1);
    }
    100% {
        opacity: 0;
        background-color: rgba(255,255,255,0.1);
    }
}


/* REWORK JS -> CSS : */

.accueilWord {
    opacity: 0;
    position: relative;
    bottom: 15px;
    filter: blur(7px);

    animation-name: fadeInWordPresentation;
    animation-duration: 0.8s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    /* Délai selon class .wordX */

}

/* Ancienne classe ajoutée en setIntervalJS: */
.fadeInWordPresentation {
    animation: fadeInWordPresentation 0.8s 0s ease forwards;
}
@keyframes fadeInWordPresentation {
    from {
        opacity: 0;
        bottom: 15px;
        filter: blur(7px);
    }
    to {
        opacity: 1;
        bottom: 0px;
        filter: blur(0px);
    }
}

/* +300ms (0.3s) delai initial, +0.05 par iteration */
.word1 {
    animation-delay: 0.35s;
}
.word2 {
    animation-delay: 0.40s;
}
.word3 {
    animation-delay: 0.45s;
}
.word4 {
    animation-delay: 0.50s;
}
.word5 {
    animation-delay: 0.55s;
}
.word6 {
    animation-delay: 0.60s;
}
.word7 {
    animation-delay: 0.65s;
}
.word8 {
    animation-delay: 0.70s;
}
.word9 {
    animation-delay: 0.75s;
}
.word10 {
    animation-delay: 0.80s;
}
.word11 {
    animation-delay: 0.85s;
}
.word12 {
    animation-delay: 0.90s;
}
.word13 {
    animation-delay: 0.95s;
}
.word14 {
    animation-delay: 1.00s;
}
.word15 {
    animation-delay: 1.05s;
}
.word16 {
    animation-delay: 1.10s;
}
.word17 {
    animation-delay: 1.15s;
}
.word18 {
    animation-delay: 1.20s;
}
.word19 {
    animation-delay: 1.25s;
}
.word20 {
    animation-delay: 1.30s;
}
.word21 {
    animation-delay: 1.35s;
}
.word22 {
    animation-delay: 1.40s;
}
.word23 {
    animation-delay: 1.45s;
}
.word24 {
    animation-delay: 1.50s;
}
.word25 {
    animation-delay: 1.55s;
}
.word26 {
    animation-delay: 1.60s;
}
.word27 {
    animation-delay: 1.65s;
}
.word28 {
    animation-delay: 1.70s;
}
.word29 {
    animation-delay: 1.75s;
}
.word30 {
    animation-delay: 1.80s;
}
.word31 {
    animation-delay: 1.85s;
}
.word32 {
    animation-delay: 1.90s;
}
.word33 {
    animation-delay: 1.95s;
}
.word34 {
    animation-delay: 2.00s;
}
.word35 {
    animation-delay: 2.05s;
}
.word36 {
    animation-delay: 2.10s;
}
.word37 {
    animation-delay: 2.15s;
}
.word38 {
    animation-delay: 2.20s;
}
.word39 {
    animation-delay: 2.25s;
}
.word40 {
    animation-delay: 2.30s;
}
.word41 {
    animation-delay: 2.35s;
}
.word42 {
    animation-delay: 2.40s;
}
.word43 {
    animation-delay: 2.45s;
}
.word44 {
    animation-delay: 2.50s;
}
.word45 {
    animation-delay: 2.55s;
}
.word46 {
    animation-delay: 2.60s;
}
.word47 {
    animation-delay: 2.65s;
}
.word48 {
    animation-delay: 2.70s;
}
.word49 {
    animation-delay: 2.75s;
}
.word50 {
    animation-delay: 2.80s;
}
.word51 {
    animation-delay: 2.85s;
}
.word52 {
    animation-delay: 2.90s;
}
.word53 {
    animation-delay: 2.95s;
}
.word54 {
    animation-delay: 3.00s;
}
.word55 {
    animation-delay: 3.05s;
}
.word56 {
    animation-delay: 3.10s;
}
.word57 {
    animation-delay: 3.15s;
}
.word58 {
    animation-delay: 3.20s;
}
.word59 {
    animation-delay: 3.25s;
}
.word60 {
    animation-delay: 3.30s;
}
.word61 {
    animation-delay: 3.35s;
}
.word62 {
    animation-delay: 3.40s;
}
.word63 {
    animation-delay: 3.45s;
}
.word64 {
    animation-delay: 3.50s;
}
.word65 {
    animation-delay: 3.55s;
}
.word66 {
    animation-delay: 3.60s;
}
.word67{
    animation-delay: 3.65s;
}
.word68 {
    animation-delay: 3.70s;
}
.word69 {
    animation-delay: 3.75s;
}
.word70 {
    animation-delay: 3.80s;
}
.word71 {
    animation-delay: 3.85s;
}
.word72 {
    animation-delay: 3.90s;
}
.word73 {
    animation-delay: 3.95s;
}
.word74 {
    animation-delay: 4.00s;
}
.word75 {
    animation-delay: 4.05s;
}
.word76 {
    animation-delay: 4.10s;
}
.word77 {
    animation-delay: 4.15s;
}
.word78 {
    animation-delay: 4.20s;
}
.word79 {
    animation-delay: 4.25s;
}
.word80 {
    animation-delay: 4.30s;
}
.word81 {
    animation-delay: 4.35s;
}
.word82 {
    animation-delay: 4.40s;
}
.word83 {
    animation-delay: 4.45s;
}
.word84 {
    animation-delay: 4.50s;
}
.word85 {
    animation-delay: 4.55s;
}