@media only screen and (max-width: 600px) {


    body,html {
        scrollbar-width: none;
    }


    .containerToggleLight {
        left: 18px;
        top: 35px;
        gap: 10px;
    }
    .slider {
        background-color: #cccccc46;
    }

    .switch {
        width: 46px;
        height: 22px;
    }

    .slider:before { 
        height: 15px;
        width: 15px;
    }

    #currentThemeIcon {
        font-size: 1.1em;
        align-self: auto;
    }

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


    .contactBtnDiv {
        top: 95px;
    }


    .traitFormationsPuces {
        position: absolute;
        left: 7px;
        /* top: 9px; */
        top: 13px;
    
        width: 2px;
        height: -webkit-fill-available;
    
        /* background-color: #ef3b2d75; */
        background-color: #01ffd569;
    
        border-radius: 7px;
    
    }



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









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

    body {
        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: 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: 1200% 1200%;
        animation: gradientAnimProjet 2s ease 0s normal forwards running;
        /* width: 100vh; */
    }
    @keyframes gradientAnimProjet {
        from {
            background-position: 15% 10%;
        }
        to {
            background-position: 80% 30%;
        }
    }


    .titleLoisirs {
        padding: 5px 0px 10px 16px !important;
    }

    .lablelsBurgerContainer {
        display: inline-flex;
        flex-direction: column;
        position: absolute;

        /*** Sinon caché par la barre de navigation du navigateur */
        /* bottom: 5%; */
        bottom: 15%;

        width: 80%;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);

        gap: 6px;
    }

    #socialBurgerContainer {
        opacity: 0;
    }
    #lablelsBurgerContainer {
        opacity: 0;
    }
    .socialBurgerContainer {
        position: absolute;
        display: inline-flex;

        /*** Sinon caché par la barre de navigation du navigateur */
        /* bottom: 117px; */
        bottom: 26%;

        width: 100%;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
        justify-content: center;
        gap: 34px;
    }

    .burgerSocialBtn {
        font-size: 1.5em;
    }


    .mainSkill {
        box-shadow: 0 0 17px -1px #00ffff9c;
        border: 1px solid var(--secondaryColor) !important;
    }


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

    .swipeSymbol {
        position: absolute;
        right: 5%;
        top: -5px;
        font-size: 0.7em;
        color: var(--secondaryColorVif);
        display: flex;
        flex-direction: column;
        text-align: center;
        /* opacity: 0.6; */
        opacity: 0;
    
        animation: fadePulseSwipe 3s 1s normal ease infinite;
    }
    @keyframes fadePulseSwipe {
        0% {
            opacity: 0.05;
            transform: translateX(-35px) scale(0.85);
        }
        50% {
            opacity: 0.85;
            transform: translateX(5px) scale(0.9);
        }
        100% {
            opacity: 0.05;
            transform: translateX(-35px) scale(0.85);
        }
    }
    .swipeImg {
        width: 50px;
    }
    .swipeTxt {
        transform: translateY(-4px);
    }

    .projectTitle {
        transform: translateX(0px);

        position: relative;
        top: 5px;
    }

    .projectSlideLogo {
        filter: drop-shadow(2px 4px 6px black);
        width: 50px;
        left: 0;
        margin-right: 3px;
        transform: scale(1.05) translate(-4px, -5px);
        border-right: 1px solid rgb(255 255 255 / 22%);

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

    .close {
        /* top: 15px;
        right: 35px;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s; */
    }
    .closeModal {
        position: absolute;
        z-index: 99999999;
        top: 48px;
        right: 20px;
        color: #f1f1f1;
        font-size: 4em;
        font-weight: bold;

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


    #menuLigneCv {
        font-size: 1em;
    }

    .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) 27%);
        }
    }

    .portraitMobile {
        float: right;
        /* margin: 0px 5px 8px 22px; */
        margin: 0px 5px 7px 22px;

        /* border: 1px solid #19ddbc14; */
        /* border: 1px solid #ef3b2d70; */
        border-radius: 12px;
        padding: 9px 4px 0px 4px;
    }

    .paragrapheAccueil { 

        width: 100%;

        text-align: justify;

        font-size: 1.05em;
        margin: 0px 0px 12px 0px;
        /* margin-bottom: 20px !important; */
        margin-bottom: 0px;

        padding: 15px 18px 15px 19px;

        background-color: #00000000;
        box-shadow: 0px 0px 0px 0px #00ffff00;
        border-bottom: 1px solid #19ddbc00;
        border-right: 1px solid #19ddbc00;
        
    }

    .projetNbr {
        text-shadow: 1px 1px 10px black;
        opacity: 1;
        color: #f2f5f5;
        font-size: 1em;
        margin-block-start: 13px;
    }

    .projetSlideTitle {
        font-size: 1.5em;
        /* text-shadow: 0px 0px 5px black; */
        text-shadow: 2px 0px 3px black;

        background-color: #181b247d;
        backdrop-filter: blur(6px);
        border-radius: 7px;
        padding: 3px 10px 0px 10px;
    }

    .projetTitleSF-mobile {
        font-size: 1.7em;
    }

    .accueilGrid2 {
        display: inline-flex;
        flex-direction: column;
    }
    .profile-badge {
        margin: 1px auto !important;
    }

    .imgGalleries {
        width:100%; 
        height:auto; 
        margin:auto; 
        vertical-align:middle; 
        border-radius:3px;
    }


    .navBurger_cvIcon {
        width: 34px;
        height: 35px;
        position: relative;
        left: 2px;
    }

    #navBurger_cvIcon[data-theme="light"] {
        content: url("../img/navBurgerImg/nav_cv_white.png")
    }
    #navBurger_projectsIcon[data-theme="light"] {
        content: url("../img/navBurgerImg/nav_projets_white.png")
    }
    #navBurger_loisirsIcon[data-theme="light"] {
        content: url("../img/navBurgerImg/nav_loisirs_white.png")
    }

    .navBurger_projectsIcon {
        width: 32px;
        height: 31px;
        position: relative;
        top: -3px;
    }

    .navBurger_loisirsIcon {
        width: 32px;
        height: 31px;
        position: relative;
        top: -1px;
    }

    .burgerMenuButtonWithImg {
        display: inline-flex !important;
        align-items: center;
        gap: 11px;
    }

    #photographieTitle {
        margin-top: 30px;
        margin-block-end: 0.9em;
        font-size: 2.5em;
        -webkit-box-reflect: below -7px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.55, transparent), to(white));
        /* opacity: 0;

        animation: flickeringTitle 1.5s 0.25s forwards !important; */

    }
    @keyframes flickeringTitle {
        0% {
            opacity: 0;
        }
        20% {
            opacity: 1;
        }
        21% {
            opacity: 0;
        }
        63% {
            opacity: 1;
        }
        64% {
            opacity: 0;
        }
        65% {
            opacity: 1;
        }
        66% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    #messageGalerie {
        margin-block-end: 0.2em;

        animation: fadeIn 0.5s 2.2s ease forwards;
    }
    .galerieDiv {
        margin: 0 0px;
        padding: 15px;
        /* background-color: #00000054;
        box-shadow: 0 0 24px -10px #19ddbcb3; */

        border-radius: 18px;

        opacity: 0;

        animation: fadeIn 0.7s 2s ease forwards;
    }
    .images {
        border-radius: 7px;
    }

    #caption {
        height: auto;
    }
    #arrowPrevious {
        font-size: 3.3em;
        color: white;
        width: 85px;
        position: absolute;
        left: 2%;
        font-weight: bold;
        text-align: center;
    }
    #arrowNext {
        font-size: 3.3em;
        color: white;
        width: 85px;
        position: absolute;
        right: 2%;
        font-weight: bold;
        text-align: center;
    }
    
    .accueilPageContent {
        margin: 0% 5%;
        /* margin: 0% 3%; */
    }

    #pageContainer {
        background-size: cover;
        background-repeat: no-repeat;
        /* height: 200px !important; */
        height: fit-content;

        /* Maj Attention affecte tout les onglets */
        /* margin: 0% 5% !important; */
        margin: 0% 5%;
    }

    #pageContainerProjet {
        margin-top: 24px !important;

        background-size: cover;
        background-repeat: no-repeat;
        height: fit-content;
        /* margin: 0% 2% !important; */
        margin: 0% 0% !important;
    }

    /* CHANGER LE GRID pour que les elements soit sur une seule colonne */
    .gridContainer {
        gap: 0px 20px !important; 

        /* MOBILE: Oula attention (60px pour compenser les positions relatives) */
        margin-bottom: -60px;
    }
    /* Fin grid CV */


    #changeQuotation{

        font-family: 'Nunito', sans-serif;
        font-size: 1.8em;
        color: #ef3b2d;
        padding: 9px 14px;
        border-bottom-right-radius: 5px;
        opacity: 0.7;
        border-radius: 3px;
        cursor: pointer;
        transition: all 0.5s;
        position: relative;
        left:0px;
        top: 7px;
    }

    #dlCv {
        background-color: var(--secondaryColor);
        font-size: 0.6em;
        gap: 3px;
        padding: 4px 11px 2px 9px;
        margin-right: 20px;
    }

    .menuButton:hover {
        color: #cbcbcb !important;
        /* animation-name: none; */
        animation-duration: 0s;
        background: transparent !important;
    }
    @keyframes hoverMenuButton {
        from {
            opacity: 0.1;
        }
        to {
            opacity: 1;
        }
    }

    .menuButton {
        margin: 5px 2px;
    }
    

    #underlineCV {
        font-size: 1.26em;
    }

    #toggleTechnique {
        position: relative;
        top: 40px;
        right: 10px;    
    }

    .disclaimerContainer {
        width:90% !important;
        margin: 0px auto 0 auto;
    }


    #disclaimerContenuWrapper {
        margin: 0 20px;
    }
    #disclaimerContainerElem {
        position: relative;
        /* bottom: 240px; */
    }

    #documentationHeaderElem {
        position: relative;
        /* bottom: 320px; */
    }

    .documentationButtons {
        margin: 60px auto;
    }

    .boutonMockup {
        top: 736px !important;
    }
    .boutonMockup2 {
        position: relative;
        top: 14px !important;
        /* top:0; */
    }



    .switchProjectButton {
        border: 2px solid rgb(240 248 255 / 1%);
        border-radius: 50px;
        padding: 0px 18px;
    
        cursor: pointer;
        transition: all 0.4s;
    }
    .switchProjectButton:hover {
        border: 2px solid rgba(240, 255, 255, 0.05);
    }
    
    .buttonProjectActif {
        border: 2px solid rgb(239 59 45 / 2%);
        color: rgb(242 58 43 / 55%);
    
        cursor: default;
    }
    .buttonProjectActif:hover {
        border: 2px solid rgb(239 59 45 / 5%);
        color: rgb(242 58 43 / 55%);
    }




    #lineBreakMobile {
        display: none;
    }
    #lineBreakMobileStatus {
        display: block;
        height: 0;
    }

    #status {
        color: white;
        text-align: center;
        padding: 3px 7px;

        animation: none;
        border: 0px solid rgba(239, 59, 45, 1);
        background-color: rgba(239, 59, 45, 0);

        text-decoration: underline;
        text-decoration-color: #ef3b2dde;
        text-decoration-thickness: 3px;
        text-underline-offset: 4px;
    }

    #status2 {
        color: white;
        text-align: center;
        padding: 6px 7px;

        border: 0px solid rgba(0, 255, 213, 0);

        animation: blinkeringStatus2 2s infinite forwards linear;
    }
    @keyframes blinkeringStatus2 {
        0% {
            background-color: rgba(0, 255, 213, 0.1);
        
        }
        33% {
            background-color: rgba(0, 255, 213, 0.45);
    
        }
        66% {
            background-color: rgba(0, 255, 213, 0.45);
    
        }
        100%{
            background-color: rgba(0, 255, 213, 0.1);
        
        }
      }

    .gridProjetHeaderContainer {
        width: 100%;
        margin-top: 0px !important;
        display: inline-flex;
        flex-direction: column-reverse;

        right: 0px;
    }
    .header { 
        grid-area: header; 
        /* font-size: 45%; */
        font-size: 57%;
        position: relative;
        left: -29px;
        margin: 3% 0% 0% 5%;
    }
    .description { 
        width: 97%;
        margin: 5px auto 0px auto;

        top: -2px;

        font-size: 100%;
        grid-area: description; 
        position: relative;
        padding: 2px 5px 26px 5px;
        /* pas de border pour épurer */
        /* border: 1px solid #02ffd685; */
        border: 0px solid #02ffd685;

        /* Un truc de fou: ça montre quand y'a du contenu à slider grace à la superposition des box shadow des pages */
        /* box-shadow: 0 0 57px -7px var(--secondaryColor); */

        /* border-radius: 11px; */
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;

        

        background-color: #151a2314;
        background: radial-gradient(circle, rgba(12,237,200,0.15) 0%, rgba(66,66,66,0) 70%);

        /* bottom: 270px; */
    }


    /* SAVE */
    /* .description1boxShadow {
        box-shadow: 15px 0 57px -3px var(--secondaryColor);
    }
    .description2boxShadow {
        box-shadow: 0px 0 57px -3px var(--secondaryColor);
    }
    .description3boxShadow {
        box-shadow: -15px 0 57px -3px var(--secondaryColor);
    } */
    /* SAVE 2 */
    /* .description1boxShadow {
        box-shadow: 15px 0 57px -3px var(--secondaryColor);
    }
    .description2boxShadow {
        box-shadow: 0px 0 52px 5px var(--secondaryColor);
    }
    .description3boxShadow {
        box-shadow: -15px 0 57px -3px var(--secondaryColor);
    } */
    


    .smileSvgContainer {
        right: -15px;
        bottom: -12px;
        height: 25px;
        width: 62px;
        transform: scale(0.8);
    }

    #smilePath {
        transform: translateX(0px) rotateY(47deg);
    }

    #sideNavDesktop {
        display: none !important;
    }


    .titleSmile {
        display: none;
        
        position: absolute;
        bottom: -39px;
        right: 49px;
        transform: rotate(90deg) scaleY(1);
        font-size: 1.4em;
        font-weight: 100;
        color: #19ddbcde;
    }


    .description1boxShadow {
        /* Mobile: Pas de padding bottom car c'est la page projet la plus grande  */

        /* animation: fadeIn 0.7s 0.1s ease forwards, glowProjectMobile1 2s 0.8s linear infinite;
        box-shadow: 15px 60px 56px -3px #19ddbc8f; */
    }
    @keyframes glowProjectMobile1 {
        0% {
            box-shadow: 15px 60px 56px -3px #19ddbc8f;
        }
        50% {
            box-shadow: 0px 60px 25px 5px #19ddbc8f;
        }
        100% {
            box-shadow: 15px 60px 56px -3px #19ddbc8f;
        }
    }
    /* C'est la 3eme valeur qui permet de gérer la superposition des shadow: */
    .description2boxShadow {
        /* Mobile: fix height différentes entres les pages projet (du coup complee avec padding) */
        /* padding-bottom: 83px; */

        /* animation: fadeIn 0.7s 0.1s ease forwards, glowProjectMobile2 2s 0.8s linear infinite;
        box-shadow: 0px 60px 25px 5px #19ddbc8f; */
    }
    @keyframes glowProjectMobile2 {
        0% {
            box-shadow: 0px 60px 25px 5px #19ddbc8f;
        }
        50% {
            box-shadow: 0px 60px 50px 5px #19ddbc8f;
        }
        100% {
            box-shadow: 0px 60px 25px 5px #19ddbc8f;
        }
    }
    .description3boxShadow {
        /* Mobile: fix height différentes entres les pages projet (du coup complee avec padding) */
        /* padding-bottom: 222px; */
        
        /* animation: fadeIn 0.7s 0.1s ease forwards, glowProjectMobile3 2s 0.8s linear infinite;
        box-shadow: -15px 60px 57px -3px #19ddbc8f; */
    }
    @keyframes glowProjectMobile3 {
        0% {
            box-shadow: -15px 30px 56px -3px #19ddbc8f;
        }
        50% {
            box-shadow: -15px 30px 25px -3px #19ddbc8f;
        }
        100% {
            box-shadow: -15px 30px 56px -3px #19ddbc8f;
        }
    }


    .projectDescriptionWrapper {

        overflow: hidden;

        /* background-color: #171b258f; */
        background: -moz-linear-gradient(180deg, rgba(23,27,37,0.2) 0%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(23,27,37,0.2) 0%, rgba(255,255,255,0) 100%);
        background: linear-gradient(180deg, rgba(23,27,37,0.2) 0%, rgba(255,255,255,0) 100%);

        padding: 6px 0px 0px 0px;
        margin-bottom: 14px;

        backdrop-filter: blur(3px);

        border-radius: 16px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;

        /* border-left: 2px solid #00000052;
        border-right: 2px solid #00000052; */
        border-top: 2px solid #00000052;
        /* border-bottom: 2px solid #00000052; */
    }



    .splide__pagination {
        display: none;
        bottom: -24px;
    }

    .splide__toggle {
        position: absolute;
        bottom: -8px;
        right: 50%;
        transform: translateX(50%);
        background-color: #111425;
        border: 0px solid #ef3b2d;
        border-bottom: 1px solid #ef3b2d;
    
        /* width: 32px;
        height: 32px; */

        
        width: 35px;
        height: 35px;
        padding: 5px 10px !important;

    }

    .projectShapeBgAnim1-mobile {
        z-index: -1;
        opacity: 0;
        animation: fadeInBgProject-bottom-right 0.7s 1.7s linear forwards;

        left: 68px;
        /* top: -112px; */
        top: -71px;
        width: 349px;
    
    }

    .topLeftBgMobile {
        border-top-left-radius: 11px;
        border-top-right-radius: 7px;

        /* ANICENNE VERSION STYLEE */
        /* left: 0px;
        width: 100%;
        top: -7px; */

        /* left: -53px;
        width: 115%;
        top: -40px; */

        left: -66px;
        /* width: 119%; */
        width: 121%;
        /* top: -40px; */
        top: -38px;


        

        /* oulah: +ram */
        filter: saturate(1.12);

        animation: fadeInBgProject 1s 0.2s linear forwards !important;
    }

    @keyframes fadeInBgProject {
        from {
            opacity: 0;
        }
        to {
            opacity: 0.2;
        }
    }
    @keyframes fadeInBgProject-bottom-right {
        from {
            opacity: 0;
        }
        to {
            opacity: 0.4;
        }
    }
    

    .splide__arrow {
        width: 1em !important;
    }

    .carouselImgProject {
        border-radius: 7px;
        width: 63%;
    }
    .splide__slide img {
        border: 2px solid #1c1c1c;
        padding: 0px;
    }


    .headerLine5 {
        line-height: 180% !important;
    }



    @keyframes borderDelayed {
        from {
            border-left: 1px solid rgba(239, 59, 45, 0);
        }
        to {
            border-left: 1px solid rgba(239, 59, 45, 0);
        }
    }

    .sectionsGridContainer {
        color: #e2e8f0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 110px 50px;
        grid-template-areas:
            "sectionSites"
            "sectionTips"
            "Autres"
            ".";
        opacity: 0;
        animation: fadeIn 0.5s ease 0.85s normal forwards running;
    }
    .sectionTips {
        padding-left: 0px;
        margin-left: 0px;
        border: 0px;
    }
    .sectionSites {
        position: relative;
        bottom: 100px;
    }


    .respPasIndent {
        padding-inline-start: 10px !important;
    }

    .indented {
        margin-left: 13px;
    }


    #portfolioTitle {
        margin-block-end: 0;
        margin-block-start: 0.2em !important;
    }
    #portfolioSousTitre {
        /* display: none !important; */
        font-size: 0.9em !important;
        line-height: 1.11em !important;
        display: inline-flex;
        flex-direction: column;

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

        position: relative;
        bottom: 0em;

        margin-left: 7px !important;
        padding-left: 9px !important;
        color: #ef3b2d;
        position: relative;
        bottom: 12px;

        border-left: 1px solid #19ddbc4f;

        /* Pour espace smile: */
        margin-top: 5px;
    }
    #portfolioSousTitre[data-theme="light"] {
        padding-bottom: 2px;
    }


    .carreTitreVeille {
        top: 11px !important;
    }
    .carreTitreProjet {
        top: 9px !important;
    }


    .traitSeparateurProjet {
        position: relative;
        /* bottom: 300px; */
        margin: 80px auto 80px auto;
    }
    #docuLoadContainer-wrapper {
        position: relative;
        /* bottom: 300px; */
    }

    .pageSectionTitle {
        font-size: 1.2em;
        margin-block-start: 0.7em;
    }

    .paragrapheDescriptionProjet {
        /* margin-block-start: 1em;
        margin-block-end: 1em; */
        margin: 2em 20px 0 0;
    }

    .swiper-container {
        margin-top: 0px;
    }

    .pdh1 {
        box-shadow: 0 -40px 12px 1px #ffa012;
    }
    .pdh2 {
        box-shadow: 0 -40px 12px 1px var(--secondaryColor);
    }
    .pdh3 {
        /* box-shadow: 0 -40px 12px 1px #cbdaff; */
        box-shadow: 0 -40px 12px 1px #7a85e3;
    }
    .pdh4 {
        box-shadow: 0 -40px 12px 1px #e8ca7d;
    }
    .pdh5 {
        /* box-shadow: 0 -40px 12px 1px #cbdaff; */
        box-shadow: 0 -40px 12px 1px #00ffff;
    }



    .arrow-testezLe {
        top: -2px;
        right: 0px;
        transform: translateX(122px) rotate(350deg);
    }


    .projectDescriptionHeader { 

        border-top: 1px solid #00000091;

        /* background-color: #171b2500; */
        /* background-color: #181a24bd; */
        background: rgb(24,26,36);
        background: -moz-linear-gradient(180deg, rgba(24,26,36,0.0) -40%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(24,26,36,0.0) -40%, rgba(255,255,255,0) 100%);
        background: linear-gradient(180deg, rgba(24,26,36,0.0) -40%, rgba(255,255,255,0) 100%);



        width: 96%;
        margin: 0 auto;

        padding: 1px 0px 0px 0px;

        border: 0px;
    }

    .projectShapeBgAnim2 {
        /* margin-bottom: 56px; */
        margin-bottom: 0px;
    }

    .desktopSlideMargin {
        margin: 0 0px 0 0px;
        position: relative;
        overflow: visible;
        border-top-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .projetSkillsList {
        gap: 1px;
        width: 95%;
        font-size: 70%;
        margin-block-start: 0em;
        margin-block-end: 0em;

        /* background-color: #181c26; */
        /* padding: 10px 0px;
        border-radius: 13px; */
    }
    .projetSkillsList1 {
        /* border-left: 1px solid #f97b2b80;
        border-right: 1px solid #f97b2b80; */
    }
    swiper-container {
        /* height: 19vh; */
        height: 100%;
    }
    swiper-slide {
        font-size: 1.1em;
        margin-right: 0px;

        overflow: visible;
        margin-right: 0px;
    }
    .projetDescriptionText {
        margin-block-start: 0;
        text-align: center;
        /* width: 88%; */
        width: 95%;
        margin: 0 auto 6px auto;
        font-size: 1em;

        position: relative;
        bottom: 5px;
    }
    .projetFuncList {
        margin-block-start: 0.3em;
        margin-block-end: 1em;

        line-height: 1.15em;

        padding-inline-start: 31px;

        font-size: 0.92em;
        color: #ffffffed;

        /* padding-right: 10px; */

        min-width: 0px;
        padding-right: 0px;

        /* background: rgb(14,14,14);
        background: -moz-linear-gradient(180deg, rgba(14,14,14,0.5) 0%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(14,14,14,0.5) 0%, rgba(255,255,255,0) 100%);
        background: linear-gradient(180deg, rgba(14,14,14,0.5) 0%, rgba(255,255,255,0) 100%); */
        /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e0e0e",endColorstr="#ffffff",GradientType=1); */
        background: rgb(24,26,36);
        background: -moz-linear-gradient(0deg, rgba(24,26,36,0.42) 0%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(0deg, rgba(24,26,36,0.42) 0%, rgba(255,255,255,0) 100%);
        background: linear-gradient(0deg, rgba(24,26,36,0.42) 0%, rgba(255,255,255,0) 100%);

        padding-top: 10px;
        padding-bottom: 14px;
        margin-block-end: 0;

        border-radius: 11px;
        /* margin-left: 8px; */
        margin-left: 0px;
        margin-right: 8px;

        width: 100%;
        padding-right: 20px;
        border-bottom-right-radius: 25px;
    }

    footer.footerProjets {
        margin-top: 0px;
    }

    .fixBottom {
        bottom: -45px;
    }

    .projectSlideLogo3 {
        width: 65px !important;
    }

    .projectSlideLogo4 {
        width: 65px !important;

        top: 0px;
    }

    .projectTitleTerrine  {
        position: relative;
        top: 4px;
        transform: translateX(0px);
    }

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

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


    /* Pour centrer */
    .projetFuncListPositionMobile {
        /* width: 92%;
        backdrop-filter: blur(17px); */
    }

    .projetSlideTitleTerrine {
        position: relative;
        bottom: 7px;
        left: 5px;
    }

    .projet3PositionMobile {
        position: relative;
        top: -21px;
    }

    .projetSkillsList li {
        margin: 3px 3px;
        border: 1px solid #0000006e;
    }

    .projetFuncList li {
        margin: 7px auto;
    }

    .projectLinksDiv {
        flex-direction: row;
        float: none;
        right: 0px;

        /* Maj center */
        left: 50%;
        transform: translateX(-50%);
        margin-top: 30px;
    }

    .headerProjets {
        /* box-shadow: 0 0 24px -6px #0ff; */
        box-shadow: 0 0 32px -11px #0ff0
    }

    #projectContainer1 {
        opacity: 1;
    }
    #projectContainer2 {
        opacity: 1;
    }

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

    .iframe {
        margin: auto;
        
        width: 100%;
        /* transform: scale(0.79); */
        transform: perspective(1220px) rotateY(83deg) scale(0.79);
        opacity: 0;
        /* bottom: 25px; */
        bottom: -10px;

        animation: fadeInRotateIframeMobile 2s 0.5s ease forwards !important;
    }

    @keyframes fadeInRotateIframeMobile {
        from {
            opacity: 0;
            transform: perspective(1220px) rotateY(83deg) scale(0.79);
        }
        to {
            opacity: 1;
            transform: perspective(1220px) rotateY(0deg) scale(0.79);
        }
    }


    .iframeElem {
        /* width: 335px; */
        /* width: 100%;
        height: 650px; */
        width: 95%;
        height: 651px;
        /* box-shadow: 0 0 49px -15px #0ff; */
        box-shadow: 0 0 35px 5px #0ff;

        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .lienBJJ {
        margin-block-end: 0em;
    }

    .separator-mobile-project {
        height: 5px;
        width: 50%;
        background-color: red;
    }


    .githubAccueil {
        position: absolute;
        top: 89px;
        left: 2px;
        color: #f44336;
        transform: rotate(353deg);
        font-size: 1.1em;
        opacity: 0.8;
        
        animation: rotateGithubText 2.5s ease-in-out infinite;
    }
    .githubLogo {
        width: 50px;
        position: absolute;
        transform: rotate(354deg);
        opacity: 0.96;
        top: 36px;
        left: -23px;

        animation: rotateGithubLogo 2.5s ease-in-out infinite;
    }

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

        position: absolute;
        right: -169px;
        top: -4px;
        /* height: -webkit-fill-available; */
    }


    #plz-form-4e67dacf-1c2f-4b24-8594-268e8604f643 {
        width: 99% !important;
        padding: 6px 21px !important;
        margin-top: 20px !important;

        padding-top: 25px !important;
    }
    #formBackBtn {
        top: 4px;
        right: 11px;
        font-size: 2em;
    }


    #contactDiv {
        position: relative;
        bottom: 175px;
    }

    .smilePathResp {
        transform: translateX(0px) rotateY(45deg) !important;
    }


    .pageTitle {
        text-decoration-thickness: 2px;

        margin-block-start: 0.5em;
        margin-block-end: 0.3em;
        font-size: 1.7em;

        text-decoration-color: rgb(239 59 45 / 92%);
    }



    .homeIconFa {
        position: relative;
        left: 3px;
    }

    .testH1 {
        filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.582)) !important;

        font-size: 2.2em;
        padding: 2px 0px 0px 10px !important;

        /* Danger */
        margin-bottom: -8px;
    }
    /* HYPER IMPORTANT ICI: */
    .testHeader {
        display: block;
    }

    .testH1-pluba {
        padding: 0px 0px 0px 10px !important;
    }

    .testH1mobile {
        font-size: 2em !important;
        padding: 3px 0px 0px 16px !important;
        margin-bottom: -8px;
    }


    .pageContainerCv {
        margin-top: -6px !important;
    }

    .testProjetTitle {
        text-align: center !important;
    }

    .modal {
        padding-top: 130px;
    }
    .close {
        top: 82px;
        right: 12px;
    }


    #NavBarContainer {
        width: 100%;
        background-color: #b92f25;
        margin-right: 0% !important;
        border-radius: 0px !important;
        padding: 0px;

        /* top: 7% !important; */
        top: 0px;


        position: relative !important;
    }
    .navBarContainerMobile {
        /* Bandeau nav transparent sur /accueil (mobile) */
        background-color: #ffffff00 !important;
    }

    #plz-form-4e67dacf-1c2f-4b24-8594-268e8604f643 {
        border-radius: 7px !important;
    }


    .darkedHeader {
        background: rgb(25,221,188);
        background: -moz-linear-gradient(180deg, rgba(25,221,188,0.1) 0%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(25,221,188,0.1) 0%, rgba(255,255,255,0) 100%);
        background: linear-gradient(180deg, rgba(25,221,188,0.1) 0%, rgba(255,255,255,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#19ddbc",endColorstr="#ffffff",GradientType=1);
    }

    #headerAccueil {
        background: rgb(25,221,188);
        background: -moz-linear-gradient(180deg, rgba(25,221,188,0.13) 0%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(180deg, rgba(25,221,188,0.13) 0%, rgba(255,255,255,0) 100%);
        background: linear-gradient(180deg, rgba(25,221,188,0.13) 0%, rgba(255,255,255,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#19ddbc",endColorstr="#ffffff",GradientType=1);
    }

    .poissonAcueil1AnimFront {
        width: 73px;
        height: 73px;
    }
    .poissonAcueil1AnimBack {
        width: 60px;
        height: 60px;
    }

    .cvDarkedLi {
        background-color: #00000021;
        padding: 5px 10px;
        border-radius: 11px;
    }


    .selected {
        /* test */
        width: 80%;
        
        font-weight: bold;

        /* text-decoration-color: #171923;
        color: #171923;
        text-underline-offset: 1px;
        text-decoration-thickness: 5px; */
        text-decoration-color: var(--secondaryColor) !important;
        
        

        /* MAJ 26/01/2024 */
        /* background: rgb(2,0,36); */
        background: rgba(2,0,36,0);

        color: #00ffd5 !important;
        /* color: #ef3b2d !important; */
        /* background: rgb(255,255,255);
        background: -moz-linear-gradient(85deg, rgba(255,255,255,0) 0%, rgba(25,221,188,0.3) 30%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(85deg, rgba(255,255,255,0) 0%, rgba(25,221,188,0.3) 30%, rgba(255,255,255,0) 100%);
        background: linear-gradient(85deg, rgba(255,255,255,0) 0%, rgba(25,221,188,0.3) 30%, rgba(255,255,255,0) 100%); */
        background: rgb(255,255,255);
        background: -moz-linear-gradient(73deg, rgba(255,255,255,0) 3%, rgba(25,221,188,0.5) 27%, rgba(255,255,255,0) 95%);
        background: -webkit-linear-gradient(73deg, rgba(255,255,255,0) 3%, rgba(25,221,188,0.5) 27%, rgba(255,255,255,0) 95%);
        background: linear-gradient(73deg, rgba(255,255,255,0) 3%, rgba(25,221,188,0.5) 27%, rgba(255,255,255,0) 95%);

        text-underline-offset: 3px;
        text-decoration-thickness: 2px;

        
        
        /* background: radial-gradient(circle, rgba(12,237,200,0.25) 0%, rgba(2,0,36,0) 50%); */
        /* border-left: 1px solid #19ddbcc1;
        border-right: 1px solid #19ddbcc1; */
        border-bottom: 0px solid white;
        /* border-radius: 3px; */

    }
    .selected[data-theme="light"] {
        background: linear-gradient(73deg, rgba(255,255,255,0) 3%, rgb(196 54 12 / 85%) 27%, rgba(255,255,255,0) 100%);
    }

    .symfonyShapeDiv {
        color: #171821;
        border-radius: 1px;
        height: 91px;
        clip-path: polygon(0 0, 100% 0, 100% 22%, 51% 29%, 0 21%);

        border-top: 1px solid #484848;
        border-left: 1px solid #484848;
        border-right: 1px solid #484848;
        border-radius: 3px;
    }
    .symfonyShapeTxt {
        font-size: 0.9em;
        position: relative;
        bottom: 4px;
        font-weight: 600;
    }

    .cvLineHeightMobile {
        line-height: 1.25em;
    }

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

    .formationChevronIcon {
        padding: 5px;
        background-color: #19ddbc;
        border-radius: 5px;
        border: 1px solid #19ddbc70;
        font-size: 1.2em;
        color: #13151c;
    }

    .formationsShape {
        opacity: 0.35;
    }
    .hobbiesShape {
        position: absolute;
        width: 60%;
        opacity: 0.45;
    
        /* rotated pour top-right corner de la card: */
        border-bottom-right-radius: 10px;
        transform: rotate(270deg);

        /* right: 0;
        top: 0; */
        right: -9px;
        top: -13px;
    }

    .stageBandeau {
        font-size: 85% !important;

        text-align: left;
        /* background: linear-gradient(85deg, rgba(66,66,66,0) 5%, rgba(239,59,45,0.34441526610644255) 50%, rgba(66,66,66,0) 95%); */
        background: rgba(239,59,45,0.2);
        background: -moz-linear-gradient(90deg, rgba(239,59,45,0.2) 0%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(90deg, rgba(239,59,45,0.2) 0%, rgba(255,255,255,0) 100%);
        background: linear-gradient(90deg, rgba(239,59,45,0.2) 0%, rgba(255,255,255,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ef3b2d",endColorstr="#ffffff",GradientType=1);

        border-left: 1px solid #ef3b2d8f;
        padding-left: 8px;
    }

    .cvSectionBgGradient {
        background: radial-gradient(circle, rgba(12,237,200,0.1) 0%, rgba(66,66,66,0) 57%);

        background-color: #00000024;
        box-shadow: 0px 0 25px -6px #00ffff4a;
        /* padding: 1px 20px 2px 11px; */
        padding: 1px 11px 2px 11px;
        border-radius: 12px;

        /* A adapter selon section ? */
        box-shadow: 5px 5px 25px -6px #00ffff33; /* shadow bottom et right principalement */
        border-bottom: 1px solid #19ddbc54;
        border-right: 1px solid #19ddbc30;
    }

    .cvSectionBgGradientSkills {
        background: radial-gradient(circle, rgba(12,237,200,0.32) 20%, rgba(66,66,66,0) 58%);
    }

    .splide {
        margin-top: 34px;
    }

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

    .projectContainer {
        padding-bottom: 0px;
    }

    #menuLigne {
        margin-left: 17px;
        padding: 3px;
        margin-top: 28px;
        
        margin-block-start: 0em;
        margin-block-end: 0em;
    }
    #menuLigneCv {
        margin-left: 17px;
        padding: 3px;
        /* margin-top: 28px !important; */
        margin-block-start: 0em;
        margin-block-end: 0em;
    }






    .formationsAnim {
        animation-name: fadeInFormation;
        animation-duration: 1.6s;
        /* animation-delay: 0.5s; */
        animation-fill-mode: forwards;
    }

    .hobbiesAnim {
        animation-name: fadeInHobbys;
        animation-duration: 1.6s;
        animation-fill-mode: forwards;
    }

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

    .outilsAnim {
        animation-name: fadeInFormation;
        animation-duration: 1.6s;
        /* animation-delay: 5.5s; */
        animation-fill-mode: forwards;
    }

    .langsAnim {
        animation-name: fadeInLangs;
        animation-duration: 1.6s;
        /* animation-delay: 4.5s; */
        animation-fill-mode: forwards;
    }

/* 
    #formations {
        left: -300px;
        opacity: 0;
    } */


    @keyframes fadeInFormation {
        from {
            left: -160px;
            opacity: 0;
    
        }
        to {
            left: 0px;
            opacity: 1;
        }
    }

    @keyframes fadeInHobbys {
        from {
            right: -160px;
            opacity: 0;
    
        }
        to {
            right: 0px;
            opacity: 1;
        }
    }

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

    @keyframes fadeInLangs {
        from {
            right: -160px;
            opacity: 0;
    
        }
        to {
            right: 0px;
            opacity: 1;
        }
    }


    
    #titleCv {
        margin-block-start: 0.7em;
        margin-block-end: 0.25em;
    }

    .projetTitle {
        filter: drop-shadow(4px 4px 3px black);
        font-size: 4.3em;
        /* top: 40px; */
        margin-block-start:0.7em;
    }
    .veilleTitle {
        font-size: 2.5em;
        line-height: 1em;
        position: relative;
        bottom: 25px !important;
    }
    .galerieTitle {
        font-size: 2.5em;
        line-height: 1em;
        position: relative;
        bottom: 10px !important;

        margin-block-end: 0em !important;
        margin-block-start: 1em !important;
    }


    .imgGitVignettes {
        width: 265px;
        height: 125px;
        border-radius: 9px;
        padding: 4px;
        border: 1px solid rgba(239, 59, 45, 0.4);
    }



    .barreProjetSouligne {
        filter: drop-shadow(4px 4px 3px black);

        width: 200px !important;
        bottom: 4px !important;
        animation: barreProjetSouligne 1s ease 0s normal forwards running !important;
    }
    .barreVeilleSouligne {
        width: 257px;
    }
    .barreGalerieSouligne {
        width: 116px;
        bottom: 8px;
        margin-bottom: 30px;

        animation: barreVeilleSouligne 1s ease 0s normal forwards running;
    }
    @keyframes barreVeilleSouligne {
        from {
            right: 1000px;
            background-color:#e2e8f0;
            height: 15px;
        }
        to {
            right: -3px;
            background-color:rgba(239, 59, 45, 0.9);
            height: 6px;
        }
    }
    
    @keyframes barreProjetSouligne {
        from {
            right: 1000px;
            background-color: #e2e8f0;
            height: 15px;
        }
        to {
            right: -73px;
            background-color: rgba(239, 59, 45, 0.9);
            height: 8px;
        }
    }

    .boutonMockup4 {
        height: 0px !important;
        width: 0px !important;

        position: absolute;
        opacity: 0;
    }
    .boutonMockup5 {
        height: 0px !important;
        width: 0px !important;

        position: absolute;
        opacity: 0;

    }
    .boutonMockup3 {
        height: 0px !important;
        width: 0px !important;

        position: absolute;
        opacity: 0;

    }

    .pageSectionTitleSkills {
        left: 50%;
        transform: translateX(-50%);
    }

    .skillsSvgContainer {
        /* transform: translate(-12%, -111px); */

        top: -93px;
        left: 56%;
        transform: translateX(-50%);
    }
    .skillsSvgPath {
        opacity: 1;
        stroke-width: 3px;
    }

    .hobbiesSvgContainer {
        transform: translate(140px, -66px);

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

    
    .hobbiesSvgPath {
        opacity: 0.9;

        animation: fillScintillement 3.5s 3.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.08); 
        }
        /* 53% {
            fill: rgba(255, 255, 255, 0.04); 
        } */
        75% {
            fill: rgba(255, 255, 255, 0); 
        }
        100% {
            fill: rgba(255, 255, 255, 0); 
        }
    }
    

    .trainingSvgContainer {
        transform: translate(163px, -66px);
        margin-left: 0px;

        animation: chapeauDiplome 2.5s 2s linear infinite;
    }
    @keyframes chapeauDiplome {
        0% {
            opacity: 0.92;
            transform: translate(163px, -66px) rotateX(0deg);
        }
        18% {
            transform: translate(163px, -65px) rotateX(27deg);
        }
        50% {
            transform: translate(163px, -74px) rotateX(0deg) rotate(5deg);
        }
        55% {
            opacity: 1;
            transform: translate(163px, -75px) rotateX(0deg) rotate(5deg);
        }
        60% {
            transform: translate(163px, -74px) rotateX(0deg) rotate(5deg);
        }
        /* 99% {
            transform: translate(163px, -66px) rotateX(0deg);
        } */
        100% {
            opacity: 0.92;
            transform: translate(163px, -66px) rotateX(0deg);
        }
    }


    .formations {
        margin-right: 0px;
    }

    
    .formationSvgPath {
        opacity: 0.9;
    }

    .hobbiesSvgContainer, .outilsSvgContainer, .trainingSvgContainer, .skillsSvgContainer, .trainingSvgContainer {
        opacity: 0.92;
    }

    .pageSectionTitleMobile {
        margin-bottom: 25px !important;
    }

    .langsSvgContainer {
        transform: translate(129px, -70px);
    }

    .langages { grid-area: langages;
        margin-bottom: 0px;
     }



#citationAndLightBulbWrapper {
    display:inline-flex;
    flex-direction: column;

    position: relative;
    bottom: 47px;
    margin-bottom: 23px;
}
.lightBulbWrapperDiv {
    filter: drop-shadow(12px 5px 6px black);
    transform: scale(0.385) rotate(3deg) !important;
    margin: 0px auto;
    /* bottom: 0px; */

    bottom: -125px;
    left: 74px;
}





#messageGalerie {
    font-size: 0.85em;
}


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

#quoteContent {
    text-align: left;
    font-size:1.1em; 

    width: 90%;

    /* left: 15px; */
    left: 0px;
}

#inspirationTitle {
    color:var(--secondaryColorMat);
    font-size: 1.3em;
}




.quote1, .quote2 {
    opacity: 0.15;
    width: 70px;
}
.quote2 {
    position: absolute !important;
    /* right: 5%; */
}
    






#traitHeader {
    height:0px;
}
/* .traitHeaderProjet { 
    height: 0px !important;
} */



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

        /* margin-top: 30px; */
        margin-top: 17px;
    }


    .hobbys {
        position: relative;

        top: -7px;

        right: 0;
    }



    .docAdminGrid {
        display: grid; 
        grid-template-columns: 1fr; 
        grid-template-rows: 1fr 1fr 1fr; 
        gap: 15px 0px; 
        grid-template-areas: 
        "adminHistorique"
        "adminUserList"
        "adminLogs"; 
    }
    .textAdminDoc {
        /* margin-block-end: 0em; */
    }

    .accueilProjectsTrait {
        /* Give up du bandeau anim mobile: */
        display: none;

        width: 150%;
        height: 0px;
        transform: translate(-400px, -50%);
        background: linear-gradient(85deg, rgba(66,171,154,0) 8%, rgba(66,171,154,0.08) 50%, rgba(66,66,66,0) 92%);

        /* transition: all 0.4s; */
        transition: width 0.4s, transform 1s, height 0.4s, background 0.4s;
    }
    .accueilProjectsTrait2 {
        display: none;
    }

    @keyframes fadeInTraitProjetAccueil {
        from {
            height: 4px;
        }
        to {
            height: 178px;
        }
    }


    .accueilWord {
        opacity: 0;
        position: relative;
        bottom: 10px;
        filter: blur(4px);

        animation-name: fadeInWordPresentation;
        animation-duration: 0.6s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }

    .fadeInWordPresentation {
        animation: fadeInWordPresentation 0.7s 0s linear forwards;
    }
    @keyframes fadeInWordPresentation {
        from {
            opacity: 0;
            bottom: 15px;
            filter: blur(7px);
        }
        to {
            opacity: 1;
            bottom: 0px;
            filter: blur(0px);
        }
    }


    #scrollToTop {
        opacity: 0;
        z-index: 999999999;

        overflow: hidden;

        font-size: 1.3em;

        position: fixed;
        bottom: 10px;
        right: 10px;

        color: var(--secondaryColor);
        padding: 11px 14px;
        border-radius: 25px;
        background-color: #1d1e1f;
        /* border: 1px solid #8080805c; */

        transition: 0.4s;
    }
    #scrollToTopIcon {
        transition: all 0.3s;
    }
    .scrollToTopIcon {
        position: relative;
        top: 1px;
        left: 1px;

        /* transition: all 0.3s; */
    }


    .accueilProjectsDiv {
        flex-direction: column;
        margin: 0px auto 5px auto;

        /* Pourcentage contraignant pour height bouton hover mobile */
        /* width: 70%; */
        width: 210px;
        position: relative;
        left: 50%;

        /* transform: translateX(-50%); */
        transform: translate(-50%, 0px);

        border: 2px solid #0a0a0a;
        border-radius: 11px;
        box-shadow: 0px 0 39px 15px #00ffff59;

        transition: all 0.3s;
    }
    .accueilProjectsDiv:hover {
        /* box-shadow: 0px 0 1px 1px #00ffff;
        border: 2px solid var(--secondaryColor); */
        box-shadow: 0px 0 0px 0px #ffffff;
        border: 2px solid rgba(0,0,0,0);
        transform: translate(-50%, 1px);

    }
    .accueilVideo {
        width: 100%;
        border-radius: 8px;
        margin: auto;

        /* border: 5px solid var(--secondaryColor); */
        border-top: 4px solid var(--secondaryColor);
        border-bottom: 5px solid var(--secondaryColor);
        border-right: 4px solid var(--secondaryColor);
        border-left: 4px solid var(--secondaryColor);
    }
    #accueilVideo[data-theme="light"] {
        border-top: 4px solid #ef3b2d;
        border-bottom: 5px solid #ef3b2d;
        border-right: 4px solid #ef3b2d;
        border-left: 4px solid #ef3b2d;
    }
    .accueilProjectsRightDiv {
        flex-direction: row;
        color: rgb(248, 244, 244);
        font-size: 1.2em;
        align-items: center;
        display: flex;
        margin: 25px auto;
    }
    .accueilProjectsIcon {
        width: 52px;
    }

    .accueilProjectsRightDivSpan {
        line-height: 1em;
        margin-top: 0px;

        font-size: 1.1em;
        font-weight: bold;
        color: #060606e8;
        /* text-shadow: 1px 1px black; */

        /* border-bottom-left-radius: 7px;
        border-bottom-right-radius: 7px; */
        width: 100%;

        letter-spacing: 0px;
        animation: testLetterSpacing 1.5s 0s ease-in-out infinite;

        transition: all 0.3s;
    }
    @keyframes testLetterSpacing {
        0% {
            letter-spacing: 0px;
        }
        50% {
            letter-spacing: 1px;
        }
        100% {
            letter-spacing: 0px;
        }
    }
    .accueilProjectsRightDivSpan[data-theme="light"] {
        color: rgb(255, 255, 255);
        text-shadow: 0 0 black;
    }

    .accueilProjectsLabelLink {
        position: absolute;
        /* bottom: 0px; */
        bottom: 0px;
        z-index: 25;
        width: 100%;
        text-align: center;

        border-radius: 8px;

        display: block;
        transition: all 0.3s;
    }

    .accueilProjectsDiv:hover .accueilProjectsLabelLink {
        bottom: 0px;

        box-shadow: 0px 0 90px 50px #00ffff59;
    }

    .accueilProjectsDiv:hover .accueilProjectsBtnLabel {
        border-radius: 9px;
        height: 146px;
        /* background-color: #26ceb287; */
        background-color: #30f1d1d4;
        position: relative;
        bottom: 1px;
        backdrop-filter: blur(1px);
        border: 3px solid #0e0e0ee6;
        border-bottom: 14px solid #0e0e0ee6;
    }

    .accueilKeyboardPng {
        position: absolute;
        opacity: 0.9;
        width: 250px;
        top: 103%;

        transition: all 0.3s;
    }
    #accueilKeyboardPng[data-theme="light"] {
        content:url("../img/keyboard_red.png");
        filter: drop-shadow(2px 2px 1px black);
    }
    .accueilProjectsDiv:hover .accueilKeyboardPng {
        /* animation: keyboardHueRotate 4s 0s linear infinite; */
        opacity: 1;
    }
    @keyframes keyboardHueRotate {
        from {
            filter: hue-rotate(0deg);
        }
        to {
            filter: hue-rotate(360deg);
        }
    }

    .accueilProjectsDiv:hover .accueilProjectsBtnLabel .accueilProjectsRightDivSpan {
        color: white;
        text-shadow: 2px 2px black;
        font-size: 1.4em;
    }

    .accueilProjectsDiv:hover .accueilProjectsTrait {
        width: 400%;
        transform: translate(630px, -49%);
        height: 190px !important;

        background: linear-gradient(90deg, rgba(66,171,154,0) 8%, rgba(66,171,154,0.8) 50%, rgba(66,66,66,0) 92%);
    }


    .cvFormationsList {
        line-height: 1.3em;
        padding-inline-start: 22px;
        text-align: justify;
    }

    .separateurListe {
        margin-bottom: 8px;
        margin-top: 8px;
    }

    .separateurListe.light {
        background: -webkit-linear-gradient(left, #171923 0%, #42ab9ac7 50%, #171923 100%);
    }

    .outilsSectionTitleMobile {
        margin-block-start: 0.7em;
    }


    .outils {
        margin: 0 auto;
        /* bottom: -1px; */
        bottom: 44px;
    }
    .langues {
        /* bottom: -46px; */
        bottom: -14px;
    }

    .clipPathShapes {
        opacity: 0.1;
    }

    /* GRID COMPETENCES */
    .langages {
        overflow: visible;
        /* bottom: 100px; */
        bottom: 70px;

        /* margin-top: 0px; */
        margin-top: 30px;

        padding: 64px 11px 2px 11px;

        box-shadow: 0px 0px 25px 0px #00ffff12;
    }
    .gridCompetences {  
        transform: none;
        margin: 0 auto 30px auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        /* Les carrés sont pas responsive donc ça dépasse sur la droite et toute la page également: */
        /* gap: 19px 19px; */
        /* gap: 1px 1px; */
        gap: 9px 9px;

        grid-auto-flow: row;
        grid-template-areas:
          "grid-html5 grid-css3"
          "grid-javascript grid-php"
          "grid-bdd grid-sql";
      }
    .carreCompetences {
        /* background-color: #8c322c; */
        background-color: #9f353d;
        /* width: 150px;
        height: 150px;
        padding: 15px; */
        width: 125px;
        height: 125px;
        padding: 0px;
    }
    .imgCompetences {
        width: 60px;
        height: 50px;
        position: relative;
        top: 27px;
        opacity: 0.92;
        filter: drop-shadow(1px 0px 2px black);
    }
    .exeptionJs {
        Width: 62px;
        height: 48px !important;
    }
    .textCompetences {
        margin-block-start: 1.8em;
        margin-block-end: 0em;

        /* color: #171821; */
        color: var(--secondaryColor);

        font-size: 1.0em;

        text-shadow: 1px 1px #000000;
    }


    .githubProjectLink {
        padding: 8px 10px;
        /* font-size: 1.45em; */
        font-size: 2.5em;
    }


    .testezLe-div {
        position: absolute;
        bottom: 100%;
        right: 100%;
        width: max-content;
        transform: rotateZ(352deg) translateX(100%);
        font-size: 1.25em;
    }
    .testezLe-div p {
        margin-block-end: 0em;
    }

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


    body {
        font-size: 100%;
    }

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



    .opentBtnFixed {
        position: fixed !important;
        display: none;

        /* right: 13px; */
        right: 9px;
        top: 5px;
        z-index: 999999999;

        background-color: #181a24de;

        padding: 3px 7px;
        border-radius: 12px;

        border: 0px solid #ffffff3a;

        animation: fadeIn 0.4s 0s ease forwards;
    }



    .imgDocuVignettes {
        width: 220px;
        height: 165px;
        border-radius: 9px;
        padding: 3px;
        border: 1px solid rgba(239, 59, 45, 0.4);
    }

    .accueilProjectsRightLink {
        display: none;
    }

    .accueilProjectsBtnLabel {
        background-color: var(--secondaryColor);
        width: 100%;
        height: 23px;

        display: inline-flex;
        flex-direction: row;
        /* justify-content: space-evenly; */
        gap: 14px;

        border-bottom-left-radius: 9px;
        border-bottom-right-radius: 9px;

        transition: all 0.3s;
    }
    .accueilProjectsBtnLabel[data-theme="light"] {
        background-color: #ef3b2d;
    }
    
    /* Pour le menuBurger fadeOut bg */
    #pageContainer {
        transition: all 0.5s;
    }
    #pageTitleDiv {
        transition: all 0.5s;
    }
    #pageContainerProjet {
        margin-top: 21px !important;

        transition: all 0.5s;
    }

    #contactButton {
        margin-bottom: 0px;
    }

    #contactBtnFade {
        margin-top: 40px;
        margin-bottom: 0px;
    }
    .linkedinBtn {
        padding: 13px 14px;
        border: 0px;
    }
    
    #accueilGridPresentation {
        overflow: hidden;
        width: 100%;
        display: block;
        margin: 0 auto;
        margin-bottom: 23px;
        
        border-bottom-left-radius: 11px;
        border-bottom-right-radius: 11px;

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

    #portraitAccueil {
        float: right;
        /* margin: 0px 0px 0px 0px; */
        margin: 7px 12px 0px 24px;
    }

    .fixScalePortraitPC {
        float: right;
        left: 0px;
    }

    .imgAccueil {

        /* Fix rouge en haut */
        background-position-y: -3px;

        position: relative;
        top: 8px;
        float: right;

        border: 1px solid white;

        opacity: 0;
        width: 100px;
        height: 101px;
        /* margin: 4px 10px 10px 18px; */
        margin: 0px 0px 0px 0px;

        padding: 2px 2px 2px 8px;
        /* left: -14px; */
        left: 0px;

        filter: blur(3px) grayscale(1);
        animation: imgAccueilFadeIn 2s 1.8s ease forwards;

    }
    @keyframes imgAccueilFadeIn {
        from {
            border-radius: 50px;
            opacity: 0;
            filter: blur(3px) grayscale(1);
        }
        to {
            border-radius: 55px;
            opacity: 1;
            filter: blur(0px) grayscale(0);
        }
    }
    .imgAccueil[data-theme="light"] {
        border: 1px solid #013028b8;

    }
    
    .testPopPortraitImg {
        width: 97px;
        height: 93px;
        position: relative;
        /* top: 7px;
        left: -6px; */
        top: -2px;
        /* left: -4px; */
        left: 1px;

        /* background-color: #ef3b2d24; */
        /* background-color: #d1594f59; */
        /* background-color: #2defc024;
        border: 1px solid #ffffff12; */

        background: linear-gradient(10deg, rgba(239,59,45,1) 0%, rgba(239,75,45,1) 21%, rgba(12,237,200,0.9) 100%);
        border: 1px solid white;
    }


    #lightBulbWrapperDiv:hover + #inspirationContainer {
        color: rgba(7, 255, 223, 1);
        /* border-bottom: 3px solid rgba(7, 255, 223, 0.7);
        border-right: 1px solid rgba(7, 255, 223, 0.7); */
        border: 1px solid #00ffd5;
        
        /* animation: glowText 2s infinite ease; */
    }
    



    /* GRID DIAGRAMMES DOC TECH */
    .gridDocuments {
        text-align: center;
    
        display: grid; 
        grid-template-columns: 1fr; 
        grid-template-rows: 1fr 1fr 1fr 1fr; 
        gap: 15px 7px; 
        grid-template-areas: 
          "dicoDonees"
          "casUtil" 
          "diagClasses"
          "schemaPartie"; 
    }






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

        display: grid; 
        grid-template-columns: 1fr; 
        grid-template-rows: 1fr 1fr; 
        gap: 25px 0px; 
        grid-template-areas: 
        "regulariteGit"
        "apercuGitKraken"; 
    }









    .bienvenueDoc {
        height:0px;
        width:0px;
        margin: 0 !important;
        opacity: 0;
        margin-block-start:0em !important;
        margin-block-end: 0em !important;
    }


























    .galerieAccueil {
        justify-content: center;
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr; 
        /* gap: 20px 20px;  */
        gap: 15px 15px; 
        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 photo58";
    }

    .photosGallerie {
        width: 135px;
    }
    .photosGallerie:hover {
        animation: imgBlur 0.4s ease 0s normal forwards;
    }
    @keyframes imgBlur { 
        from {
            opacity: 1;
            filter: blur(0px);
        }
        to {
            opacity: 0.8;
            filter: blur(1px);
        }
    }
    
    .loupesGalerie {
        font-size: 2em;
    }

    
    .modal-image {
        /* width: 98%; */
        width: 90%;
        margin: 0 auto;
    }


    #mySidenav {
        overflow: hidden;
    }
    .menuBurgerShape {
        position: absolute;
        opacity: 0.15;
        bottom: 0;
        right: 0;

        filter: blur(2px);
    }


    .menuButton {
        width: 100%;
        opacity: 0;
    }

    .fadeInNavBurgerLi {
        animation: fadeInNavBurgerLi 0.6s 0s ease forwards;
    }
    @keyframes fadeInNavBurgerLi {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    .fadeInNavSocials {
        animation: fadeInNavSocials 0.6s 0s ease forwards;
    }
    @keyframes fadeInNavSocials {
        from {
            opacity: 0;
            /* transform: translateX(50px); */
        }
        to {
            opacity: 1;
            /* transform: translateX(0px); */
        }
    }


    .lds-ring {
        width: 80px;
        height: 80px;
    }
    .lds-ring div {
        width: 64px;
        height: 64px;    
    }




    #motion-demo {
        /* https://yqnn.github.io/svg-path-editor/ */
        offset-path: path("M -79 5 C 70 132 381 -20 491 82");

        position: fixed;
        top: 30%;
        z-index: -5;


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

    }


    #motion-demo2 {
        /* https://yqnn.github.io/svg-path-editor/ */
        offset-path: path("M 248 -160 C -84 114 470 603 30 872");
        position: fixed;

        top: -5%;

        width: 170px;
        height: 170px;
    
    }

    /* Faire la meme un peu modifié et devant les photos */

    #motion-demo3a {
        offset-path: path("M -76 920 C 189 703 170 119 354 -59");
    }


    #motion-demo_whalePc {
        width: 0px;
        height: 0px;
    }


    #coral1 {
        bottom: -13%;
        right: -10%;
        z-index: -200;
    
        width: 250px;
        height: 250px;
    
        animation: moveCoral1 5s infinite ease;

        content:url("../img/coral1_red.png");

    }
    @keyframes moveCoral1 {
        0% {
            height: 250px;
            width: 250px;
        }
        50% {
            height: 220px;
            width: 250px;
        }
        100% {
            height: 250px;
            width: 250px;
        }
    }

    #coral2 {
        filter: blur(1px);    

        bottom: -7%;
        right: -2%;
        z-index: -200;
    
        width: 200px;
        height: 200px;
    
        animation: moveCoral2 5s infinite ease;
    }
    @keyframes moveCoral2 {
        0% {
            height: 200px;
            width: 200px;
        }
        50% {
            height: 180px;
            width: 200px;
        }
        100% {
            height: 200px;
            width: 200px;
        }
    }

    #coral3 {
        opacity: 0.4;
        content:url("../img/coral1_blue.png");

        width: 320px;
        height: 320px;
    }
    @keyframes moveCoral3 {
        0% {
            width: 320px;
            height: 320px;
            }
        50% {
            width: 320px;
            height: 290px;
            }
        100% {
            width: 320px;
            height: 320px;
            }
    }

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

    
        /* animation: moveCoral1 60000ms infinite linear; */
        /* width: 170px;
        height: 170px; */
        width: 230px;
        height: 230px;

    
        content:url("../img/coral1_blue.png");
        opacity: 0.2;
        transform: rotateY(181deg) rotateZ(35deg) rotateX(182deg);
        animation: moveCoral4 10s infinite ease;
    }
    @keyframes moveCoral4 {
        0% {
            width: 230px;
            height: 230px;
            }
        50% {
            width: 230px;
            height: 210px;
            }
        100% {
            width: 230px;
            height: 230px;
            }
    }











    #motion-demo_rapid {
        filter: blur(2px) invert(0%);
        top: 20%;

        width: 200px;
        height: 107px;

        offset-path: path("M 357 311 C 40 308 98 182 -302 -201");
        animation: moveRapid 1550ms 1 cubic-bezier(1,.66,.51,.98);

    }
    #motion-demo_rapid2 {
        filter: blur(2px) invert(0%);
        top: 20%;

        width: 150px;
        height: 80px;

        offset-path: path("M 357 311 C 57 267 286 195 -302 -201");
        animation: moveRapid 1550ms 850ms 1 cubic-bezier(1,.66,.51,.98);

    }
    #motion-demo_rapid3 {
        filter: blur(2px) invert(0%);
        top: 20%;

        width: 160px;
        height: 82px;

        offset-path: path("M 357 311 C 104 263 201 92 -444 -93");
        animation: moveRapid 1550ms 300ms 1 cubic-bezier(1,.66,.51,.98);

    }

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


    /* Requin corner haut-droit  */
    #motion-demo_shark1 {
        display: none;
        filter: blur(3px);    
        position: fixed;
    
        /* Mobile (effet rotate dans le coin en haut à droite) */
        /* top: 0%;
        right: 0%; */
        top: -10%;
        right: -15%;  
        z-index: -2;
    
        animation: moveShark1test 8000ms 1 linear;
        width: 235px;
        height: 235px;
    
        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);
        }
    }



    .letterO {
        width: 22px;
        position: relative;
        top: 1px;
    
    }


    
    .wave {
        display: block;
        width: 0px;
        height: 0px;
        opacity: 0;
        /* background: #ef3b2d; */
    
        position: absolute;
        left: 50%;
        /* transform: translateX(-50%) translateY(-4.8em); */
        transform: translateX(-50%) translateY(-3.8em);
    
        --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%); */

        /* *** Save 24/01/2024 15:23 *** */
        /* 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%); */
        background: linear-gradient(0deg, #19ddbc0a 0%, var(--secondaryColorVif) 100%);


        animation: fadeInWave 1.5s 1s forwards ease-out;
    
    }
    @keyframes fadeInWave {
        from {
            opacity: 0;
            height: 0px;
            width: 0;
    
        }
        to {
            opacity: 0.9;
            height: 27px;
            width: 256px;
            
        }
    }


    #flashPoint {
        position: absolute;
        line-height: 0;
        /* top: 8%;
        right: 33px; */
        color: rgb(255, 255, 255);
        opacity: 0;
    
        filter: blur(100px);
    
        top: -13%;
        right: 18px;
        font-size: 2em;
    }
    /* .flashPointAnim {
        animation: blinkingFlash 0.4s 4.1s linear forwards;
    } */


    #inspirationContainer {
        width: 100%;
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 5px; 

        padding: 0px 10px 22px 23px;

        border: 1px solid #00ffd685;
    }

    #lightBulbPath, #lightBulbPath2, #lightBulbPath4, #lightBulbPath5 {
        opacity: 0.85;

    }
    #lightBulbPath {
        stroke-width: 23px;
    }

    



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

        top: -3px;
    
        width: 6px;
        background-color: #ef3b2d;
        right: 47px;
        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: 43px;
    
        }
    }
    @keyframes photoBarShrink {
        from {
            height: 43px;
    
        }
        to {
            height: 0px;
    
        }
    }
    



    #scubaDiver {
        display: none !important;    
        position: absolute;

        right: -52px;
        bottom: -80px;
    
        z-index: -999;
    
        /* Désactivation "diver" sur mobile: */
        /* animation: fadeScuba 18000ms 1200ms infinite linear, floatScuba 5s 0s infinite forwards ease-in-out; */

        width: 90px;
    
        content:url("../img/scuba3_red.png");
        opacity: 0;

        transform: rotateZ(47deg) rotateY(181deg);
        filter: invert(0%) blur(10px);
    }
    @keyframes floatScuba {
        0% {
            bottom: -50px;

        }
        50% {
            bottom: -57px;

        }
        100% {
            bottom: -50px;

        }
    }


    #openBtn2 .burger-icon span {
        width: 32px !important;
    }


    #raieAccueil1 {
        width: 160px;
        height: 160px;
        offset-path: path("M 135 -145 C -84.891 667.473 441.62 619.849 714.136 1069.632");

        filter: blur(0px);
        /* Delai = delai initial avant les setInterval: (reponsiv) */
        /* animation: raieAccueil1 20000ms 3500ms 1 linear; */
        animation: raieAccueil1 20000ms 1500ms 1 linear;
    }

    @keyframes raieAccueil1 {
        0% {
            transform: rotateZ(9deg) rotateX(180deg);
            offset-distance: 0%;
            opacity: 0;
        }
        11% {
            opacity: 0.25;
        }
        22% {
            opacity: 0.25;
            transform: rotateZ(9deg) rotateX(180deg);
        }
        33% {
            opacity: 0.25;
        }
        44% {
            opacity: 0.25;
        }
        55% {
            transform: rotateZ(9deg) rotateX(130deg);
            opacity: 0.25;
        }
        66% {
            opacity: 0.25;
        }
        77% {
            transform: rotateZ(9deg) rotateX(118deg);
            opacity: 0.25;
        }
        88% {
            opacity: 0.25;
        }
        100% {
            transform: rotateZ(9deg) rotateX(106deg);
            opacity: 0.1;
            offset-distance: 100%;
        }
      }












      /* +300ms (0.3s) delai initial, +0.05 par iteration */
    .word1 {
        animation-delay: 0.35s;
    }
    .word2 {
        animation-delay: 0.375s;
    }
    .word3 {
        animation-delay: 0.400s;
    }
    .word4 {
        animation-delay: 0.425s;
    }
    .word5 {
        animation-delay: 0.450s;
    }
    .word6 {
        animation-delay: 0.475s;
    }
    .word7 {
        animation-delay: 0.500s;
    }
    .word8 {
        animation-delay: 0.525s;
    }
    .word9 {
        animation-delay: 0.550s;
    }
    .word10 {
        animation-delay: 0.575s;
    }
    .word11 {
        animation-delay: 0.600s;
    }
    .word12 {
        animation-delay: 0.625s;
    }
    .word13 {
        animation-delay: 0.650s;
    }
    .word14 {
        animation-delay: 0.675s;
    }
    .word15 {
        animation-delay: 0.700s;
    }
    .word16 {
        animation-delay: 0.725s;
    }
    .word17 {
        animation-delay: 0.750s;
    }
    .word18 {
        animation-delay: 0.775s;
    }
    .word19 {
        animation-delay: 0.800s;
    }
    .word20 {
        animation-delay: 0.825s;
    }
    .word21 {
        animation-delay: 0.850s;
    }
    .word22 {
        animation-delay: 0.875s;
    }
    .word23 {
        animation-delay: 0.900s;
    }
    .word24 {
        animation-delay: 0.925s;
    }
    .word25 {
        animation-delay: 0.950s;
    }
    .word26 {
        animation-delay: 0.975s;
    }
    .word27 {
        animation-delay: 1.000s;
    }
    .word28 {
        animation-delay: 1.025s;
    }
    .word29 {
        animation-delay: 1.050s;
    }
    .word30 {
        animation-delay: 1.075s;
    }
    .word31 {
        animation-delay: 1.100s;
    }
    .word32 {
        animation-delay: 1.125s;
    }
    .word33 {
        animation-delay: 1.150s;
    }
    .word34 {
        animation-delay: 1.175s;
    }
    .word35 {
        animation-delay: 1.200s;
    }
    .word36 {
        animation-delay: 1.225s;
    }
    .word37 {
        animation-delay: 1.250s;
    }
    .word38 {
        animation-delay: 1.275s;
    }
    .word39 {
        animation-delay: 1.300s;
    }
    .word40 {
        animation-delay: 1.325s;
    }
    .word41 {
        animation-delay: 1.350s;
    }
    .word42 {
        animation-delay: 1.375s;
    }
    .word43 {
        animation-delay: 1.400s;
    }
    .word44 {
        animation-delay: 1.425s;
    }
    .word45 {
        animation-delay: 1.450s;
    }
    .word46 {
        animation-delay: 1.475s;
    }
    .word47 {
        animation-delay: 1.500s;
    }
    .word48 {
        animation-delay: 1.525s;
    }
    .word49 {
        animation-delay: 1.550s;
    }
    .word50 {
        animation-delay: 1.575s;
    }
    .word51 {
        animation-delay: 1.600s;
    }
    .word52 {
        animation-delay: 1.625s;
    }
    .word53 {
        animation-delay: 1.650s;
    }
    .word54 {
        animation-delay: 1.675s;
    }
    .word55 {
        animation-delay: 1.700s;
    }
    .word56 {
        animation-delay: 1.725s;
    }
    .word57 {
        animation-delay: 1.750s;
    }
    .word58 {
        animation-delay: 1.775s;
    }
    .word59 {
        animation-delay: 1.800s;
    }
    .word60 {
        animation-delay: 1.825s;
    }
    .word61 {
        animation-delay: 1.850s;
    }
    .word62 {
        animation-delay: 1.875s;
    }
    .word63 {
        animation-delay: 1.900s;
    }
    .word64 {
        animation-delay: 1.925s;
    }
    .word65 {
        animation-delay: 1.950s;
    }
    .word66 {
        animation-delay: 1.975s;
    }
    .word67{
        animation-delay: 2.000s;
    }
    .word68 {
        animation-delay: 2.025s;
    }
    .word69 {
        animation-delay: 2.050s;
    }
    .word70 {
        animation-delay: 2.075s;
    }
    .word71 {
        animation-delay: 2.100s;
    }
    .word72 {
        animation-delay: 2.125s;
    }
    .word73 {
        animation-delay: 2.150s;
    }
    .word74 {
        animation-delay: 2.175s;
    }
    .word75 {
        animation-delay: 2.200s;
    }
    .word76 {
        animation-delay: 2.225s;
    }
    .word77 {
        animation-delay: 2.250s;
    }
    .word78 {
        animation-delay: 2.275s;
    }
    .word79 {
        animation-delay: 2.300s;
    }
    .word80 {
        animation-delay: 2.325s;
    }
    .word81 {
        animation-delay: 2.350s;
    }
    .word82 {
        animation-delay: 2.375s;
    }
    .word83 {
        animation-delay: 2.400s;
    }
    .word84 {
        animation-delay: 2.425s;
    }
    .word85 {
        animation-delay: 2.450s;
    }












    #scubaDiverFlash {

        /* Désactivation Diver mobile */
        display: none !important;

        width: 40px;
        height: 40px;
        right: -32px;
        top: 38px;
        animation: scubaFlashProc 18000ms 1200ms infinite linear, floatScubaFlash 5s 0s infinite forwards ease-in-out;
    }


    #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 -124 71");
        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.6;
        }
        100% {
            offset-distance: 100%;
            opacity: 0.7;
            filter: blur(0px);
            width: 170px;
            height: 170px;
    
        }
    }

    #bodyLoisir:before {
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        animation: contrastEffect 0.4s 4.9s ease-in-out forwards;
    }
    .bodyLoisir {
        /* animation: contrastEffect 0.4s 4.9s ease-in-out forwards; */
    }
  


    #photoBar {
        animation: photoBarGrow 0.4s 3.5s forwards ease, photoBarShrink 0.4s 5.8s forwards ease;
    }

    



    #flashPoint {
        animation: blinkingFlash 0.4s 5s linear forwards;
    
    }
    .flashPointAnim {
        /* animation: blinkingFlash 0.4s 4.1s linear forwards; */
    }
    


    #flashPoint2 {    
        animation: blinkingFlash2 0.4s 5s linear forwards;
    }
    .flashPoint2Anim {
        /* animation: blinkingFlash2 0.4s 4.1s linear forwards; */
    }



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





    #flashRectangle {
        position: absolute;
        background-color: rgba(255,255,255,0.1);
        /* width: 51px;
        height: 30px; */
        width: 1px;
        height: 1px;
        opacity: 0;
        margin: 15px auto;
    
        border: 3px solid #ef3b2d;
        border-radius: 3px;
        top: -36px;
        right: 21px;
        z-index: 999;
    
        animation: fadeInFlashRectangleWidth 0.3s 4s forwards ease-in-out, fadeInFlashRectangleHeight 0.3s 4.3s forwards ease-in-out, flashRectangle 0.4s 4.9s ease-in-out forwards, fadeOutHeight 0.3s 5.2s forwards ease-in-out, fadeOutWidth 0.3s 5.6s forwards ease-in-out;
    }
    @keyframes fadeInFlashRectangleWidth {
        0% {
            opacity: 0;
            width: 1px;
        }
        100% {
            opacity: 1;
            width: 60px;
        }
    }
    @keyframes fadeInFlashRectangleHeight {
        0% {
            height: 1px;
            margin: 15px auto;
        }
        100% {
            height: 35px;
            margin: 0px auto;
        }
    }
    @keyframes flashRectangle {
        0% {
            background-color: rgba(255,255,255,0);
            border: 3px solid #ef3b2d;
        }
        49% {
            background-color: rgba(255,255,255,1);
            border: 1px solid rgba(255, 205, 201, 1);
        }
        51% {
            background-color: rgba(255,255,255,1);
            border: 1px solid rgba(240, 126, 117, 1);
        }
        100% {
            background-color: rgba(255,255,255,0);
            border: 3px solid #ef3b2d;
        }
    }
    @keyframes fadeOutHeight {
        0% {
            height: 35px;
            margin: 0px auto;
        }
        100% {
            height: 1px;
            margin: 15px auto;
        }
    }
    
    @keyframes fadeOutWidth {
        0% {
            opacity: 1;
            width: 60px;
        }
        100% {
            opacity: 0;
            width: 1px;
        }
    }
    


    /* menu Burger :  */
    .sidenav {
        z-index: 999999999;

        border-top-left-radius: 12px;

        height: 100vh;
        width: 255px;
        position: fixed;
        top: 0;
        /* Fix la barre qui dépasse un peu */
        /* right: -250px; */
        right: -256px;

        background-color: #181a23;
        color: #cbcbcb;

        padding-top: 83px;
        transition: right 0.5s ease;
        border-left: 1px solid #19ddbc3b;
    }
    .sidenav[data-theme="light"] {
        background-color: #0c4454;
        color: #f3efef;
    }


    
    /* Sidenav menu links */
    .sidenav a {
        padding: 11px 8px 11px 32px;
        text-decoration: none;
        font-size: 25px;
        
        display: block;
        transition: 0.3s;
    }

    .sidenav a span {
        text-shadow: 1px 1px black;
    }
    
    .sidenav a:hover {
        color: #ef3b2d;
    }
    
    .sidenav ul {
        width: 100%;
        list-style-type: none;
        padding: 0;
        margin: 0;
    }
    
    /* Active class */
    .sidenav.active {
        right: 0;
    }
    
    /* Close btn */
    .sidenav .close {
        position: absolute;
        padding: 10px 15px;
        top: 0;
        right: 25px;
        font-size: 42px;
        font-weight: bold;
        /* color: #ef3b2d; */
        color: #f0f2f5;
        z-index: 999999;
    }
    .sidenav .closeBurger {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 42px;
        color: #ef3b2d;
    }
    
    /* Icône burger */
    .burger-icon span {
        display: block;
        width: 35px;
        height: 4px;
        background-color: #41e9cdf5;
        margin: 7px 0;
        border-radius: 5px;
    }


    #openBtn {
        filter: drop-shadow(1px 2px 3px black);
        position: absolute;

        /* right: 10px; */
        right: 5px;

        top: 9px;
        width: 44px;
        height: 59px;
        z-index: 99999999;
    }
    .openBtnLoisirs {
        right: 10px !important;
        top: 7px !important;
    }










}