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

    menu[role="open"]{
        position: fixed;
        max-height: initial;
        height: 100%;
        border-radius: 0px;
        background-image: url('../img/icn/menu.png');
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 30px 30px;
        top:0%;
        left:0%;
        z-index: 8;
        flex-direction: column;
        align-items: center;
        width: fit-content;
        max-width: 400px;
        align-items: center;
        background-image: none;
        box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.8);
        transform: translateX(0%);
        transition: all 0.3s ease;
    }
    menu{
        position: initial;
        display: flex;
        flex-direction: column;
        margin:0px auto;
        z-index: 8;
        max-width:425px;
        width: 100%;
        height: 60px;
        overflow: hidden;
        background-image: url('../img/icn/menu.png');
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 30px 30px;
        transition: all 0.3s ease-in;
    }
    .whiteMenu, .whiteMenu[role="open"]{
        background-image: url('../img/icn/menu_blue.png');
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 30px 30px;
    }
    
    menu[state="fixer"] {
        position: fixed;
        border: 2px solid #000;
        top: 0;
        left:0;
    }
    menu img[id="logo_sgpp"]{
        width: 250px;  /*-- 60px */
        height: 55px; /* -- height: 50px; */
        border-radius: 0%;
        margin: auto auto;
        transition: all 0.2s ease 0.3s;
        object-fit: cover;
        object-position: left center;
    }
    menu[role="open"] img[id="logo_sgpp"]{
        margin: 20px auto;
        margin-top: 40px;
        width: 260px;  /*-- 60px */
        height: 40px; /* -- height: 50px; */
        transition: all 0.2s ease;
        object-fit: contain;
        object-position: initial;
        border-radius: 0px;
    }
    menu .navBarre{
        display: flex;
        flex-direction: column;
        margin: 5px auto;
    }
    menu .navBarre > a{
        padding: 10px 0px;
    }
    menu .navBarre .notifBell{
        padding-right: 30px;
        background-size: 25px 25px;
    }
    menu .lng_icn{
        justify-content: center;
        align-items: center;
        margin-left: none;
        margin: 15px auto;
    }
    .blueMenu{
        background-image: url('../img/icn/menu.png');
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 30px 30px;
    }
    .blueMenu:hover{
        background-image: url('../img/icn/menu_blue.png');
        background-repeat: no-repeat;
        background-position: 10px 10px;
        background-size: 30px 30px;
    }



    /* =========================================*/
    /* =========================================*/
    /* =========================================*/
    /* =========================================*/

    section{
        max-width: 425px;
        width: 100%;
        overflow-x: hidden;
    }
    .home{
        max-width: 400px;
        width:auto;
        margin: 0px auto;
        padding: 10px 5px;
        overflow: hidden;
        max-height: none;
        flex-direction: column;
    }
    .home .articleDesc{
        width: 100%;
        max-height: none;
    }
    .eclipseArticles .elipse{
        height: 70px;
        width: 30%;
    }
    .eclipseArticles .elipse img{
        height: 70px;
        width: 100%;
    }
    .eclipseArticles .elipse span{
        height:70px;
    }
    .home .articleSlidesImgs{
        position:absolute;
        top: 240px;
        flex-direction: column;
        justify-content: space-evenly;
        max-height: none;
        max-width: 380px;
        width: 100%;
        max-height: 350px;
        height: 330px;
        margin: 5px auto;
    }
    .articleSlidesImgs img{
        max-width: 350px;
        width: 100%;
        height: 90px;
        margin: 2px auto;
        border-radius: 5px;
        /*border: 2px solid #fff;*/
        transform: rotate(0);
        transition: all 0.3s ease-in;
    }
    .articleSlidesImgs:hover img{
        transform: rotate(0);
    }

    .articleSlidesImgs img.onlyOne {
        height: 90%;
        transform: rotate(0deg) translateY(-30px);
    }
    .articleSlidesImgs:hover img.onlyOne{
        transform: rotate(0deg) translateY(-30px);
    }

    .majDateArticle{
        font-size: 0.7rem;
        font-weight: 400;
        margin: 5px 0px;
        margin-bottom: 340px;
    }


    .whoAreWe{
        flex-direction: column;
        height: auto;
        max-width: 400px;
        max-height: none;
    }
    .whoAreWe .mainSection{
        width: 100%;
        max-width: 400px;
        padding: 10px;
    }
    .mainSection h1{
        font-size: 1.5rem;
    }
    .twoSection{
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: none;
        min-width: none;
        width: 100%;
        overflow: initial;
    }
    .twoSection >img{
        min-width: initial;
        max-width: initial;
        max-height: none;
        width: 100%;
        height: 150px;
        object-fit: contain;
        margin: 10px 5px;
        display: none;  
    }
    .twoSection .twoSectionVertical{
        min-width: initial;
        max-width: initial;
        overflow-wrap: initial;
        width: 100%;
    }
    .twoSectionVertical p{
        font-size: 0.9rem;
    }
    .twoSectionVertical img{
        max-width: 100%;
    }
    .mainSection .historyDesc{
        font-size: 0.9rem;
    }
    .secondSection{
        width: 100%;
    }
    .secondSection img{
        max-width: 280px;
        margin: 10px auto;
    }

    /* =========================================*/
    /* =========================================*/
    /* =========================================*/
    /* =========================================*/

    .portsSection{
        max-width: 400px;
        max-height: initial;
    }
    .portsSection .eclipseNavBtn{
        display: none;
    }
    .portsSection .portsContainer{
        max-width: 400px;
        margin: 0px auto;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 10px;
        overflow-y: initial;
        overflow: hidden;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }
    .portsContainer::-webkit-scrollbar{
        background-color: initial;
    }
    .portsContainer .portPreview{
        flex-direction: column;
        max-width: 400px;
        min-width: 360px;
        padding: 10px;
    }

    .portTitle{
        padding: 10px;
        max-width: 400px;
    }
    .portTitle h1{
        font-size: 1.5rem;
        text-align: center;
        margin:10px auto;
    }
    .portTitle img{
        max-width: 400px;
        margin:5px auto;
        width: 100%;
        height: 150px;
    }
    .portDesc{
        padding: 10px;
        max-width: 400px;
        color: #11435c;
    }
    .portDesc h1{
        font-size: 1.5rem;
        margin: 2px auto;
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6);
    }
    .portDesc h4{
        margin: 2px auto;
    }
    .portDesc .historyDesc{
        padding: 2px 0px;
        font-size: 0.9rem;
        line-height: 1.3rem;
        color: #000;
    }
    .portGallery img{
        height: 60px;
        width: 100px;
        margin: 0px 10px;
    }

    /* =========================================*/
    /* =========================================*/
    /* =========================================*/
    /* =========================================*/

    .ceoWords{
        flex-direction: column-reverse;
        max-width: 400px;
        max-height: initial;
        height: auto;
        position: relative;
    }
    .ceoDesc{
        margin-top: 10px;
        margin-bottom: 100px;
        padding: 5px 0px;
        height: initial;
        max-width: 400px;
    }
    .ceoDesc[role="second"]{
        width: 100%;
        margin: 5px auto;
        margin-top: 5px;
        padding: 5px auto;
    }
    .ceoDesc[role="second"] img{
        margin: 20px auto;
        transform: scale(0.8);
        margin-bottom: 0px;
    }
    .ceoDesc h1{
        position: absolute;
        top:-15px;
        left: 0%;
        text-align: center;
        max-width: 400px;
        min-width: none;
        width: 360px;
    }
    .ceoDesc .btnArticleDesc{
        margin : 5px auto;
    }
    .ceoSpeech{
        max-width: 400px;
        padding: 15px;
        display: flex;
        flex-direction: column;
    }
    .ceoSpeech img{
        max-width: 100px;
        margin: 5px auto;
    }
    .ceoSpeech p{
        font-size: 0.85rem;
        padding: 5px;
    }
    .footer{
        max-width: 420px;
        max-height: initial;
        margin: 0px auto;
        display: flex;
        flex-wrap: wrap;
        padding: 15px;
    }
    .aboutUs{
        margin: 10px auto;
        height: initial;
    }
    .linksArea{
        max-width: 400px;
        width: 100%;
        margin: 5px 0px;
        padding: 5px;
    }
    .linksArea .coordonnees{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .linksArea .coordonnees a{
        margin: 5px 7px;
    }
    .linksArea h5{
        margin-top: 20px;
    }
    .newsLetterSection{
        display: flex;
        flex-direction: column-reverse;
    }
    .newsLetterSection .socialNetworks{
        margin: 5px auto;;
    }



    .catchEyes[role="ceoWords"]{
        max-width: 400px;
        display: flex;
        flex-direction: column;
        height: initial;
        max-height: initial;
        
    }
    .catchEyes[role="ceoWords"] > img[alt="ceo"]{
        position: initial;
        min-width: initial;
        max-width: 100%;
        width: 100%;
        height: 200px;
        margin: 20px auto;
        margin-bottom: 10px;
    }
    .catchEyes[role="ceoWords"] > .description{
        width: 100%;
        padding: 0px 5px;
    }
    .catchEyes[role="ceoWords"] .quoteCatchEyes{
        display: none;
    }
    .catchEyes[role="DG"]{
        height: initial;
        max-height: initial;        
        max-width: 400px;
        display: flex;
        flex-direction: column-reverse;
        position: relative;
    }
    .catchEyes[role="DG"] > img{
        height: 200px;
    }
    .catchEyes[role="DG"] .description{
        width: 100%;
    }
    .catchEyes[role="DG"] .description h1{
        position: absolute;
        top: 70px;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    }
    .otherLinksArticles[role="DC"] .otherAticles{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .otherAticles .articleCard[size="smallCard"]{
        width: 160px;
        min-width: none;
        height: 220px;
    }
    .otherAticles .articleCard[size="smallCard"] img{
        object-fit: cover;
        height: 120px;
    }
    .otherAticles .articleCard[size="smallCard"] h4{
        font-size: 0.9rem;
    }
    .showingMission{
        max-width: initial;
    }
    .showingMission .showingMissionContainer{
        display: flex;
        flex-direction: column;
        position: initial;
        max-width: 425px;;
        width: 100%;
        padding: 10px;
    }
    .showingMission h1, .showingMissionContainer img{
        position: initial;
        max-width: none;
        min-width: initial;
        width: calc(100% - 20px);
        margin:5px auto;
        justify-self: center;
        align-self: center;
    }
    .showingMission h1{
        transform: translate(0);
        font-size: 1.2rem;
        margin: 5px auto;
    }
    .showingMissionContainer img{
        width: calc(100% - 20px);
        height: 150px;
        margin:0px auto;
    }
    .showingMissionContainer .missionContainer{
        position: initial;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 425px;
        width: calc(100% - 10px);
        margin: 15px auto;;
        left:0px;
    }
    .showingMissionContainer .titleIcn[role="close"]{
        position: absolute;
        border-radius: 50%;;
        left: 50%;
        filter:brightness(10);
        transform: translateX(-50%) rotate(180deg) scale(1.3) ;
        box-shadow: -0px -2px 2px rgba(0, 0, 0, 0.3);
        opacity: 1;
    }
    .missionContainer h5{
        font-size: 1rem;
    }
    .missionContainer p{
        font-size: 0.9rem;
        line-height: 1.4rem;
    }
    .previewArticle{
        max-width: 425px;
        width: 100%;
        height: 250px;
        overflow: hidden;
    }
    .previewArticle h1{
        font-size: 1.5rem;
    }
    .previewArticle > #imgPrincipale{
        height: 160px;
    }
    .article2Section{
        flex-direction: column-reverse;
    }
    .articleGallery{
        max-width: 400px;
    }
    .otherAticles .articleCard{
        width: 180px;
        height: initial;
    }
    .otherAticles .articleCard p{
        max-height: initial;
    }
    .otherAticles .articleCard a{
        opacity: 1;
        background-color: #11435c;
        padding: 3px 2px;
        color:#fff;
    }
    .otherLinksArticles{
        height: initial;
        max-height: initial;
        padding: 5px;
    }
    .catchEyes{
        max-width: 420px;
        height: initial;
        max-height: initial;
        display: flex;
        flex-direction: column;
    }
    .catchEyes img{
        width: 100%;
        height: 220px;
        max-width: 400px;
        margin: 10px auto;
    }
    .catchEyes .description{
        width: 100%;
    }
    .thumbProjects{
        max-height: initial;
        height: initial;
    }
    .thumbProjects#allProjects{
        height: initial;
        max-height: initial;
    }
    #allProjects .thumbProjectLine{
        display: flex;
        flex-wrap: initial;
        flex-direction: column;
        padding: 10px;
        border-bottom: 1px solid #2086b9;
    }
    #allProjects .thumbProjectLine > *{
        position: initial;
    }
    #allProjects .thumbProjectLine > img{
        width: 100%;
        height: 120px;
    }

    /* =========================================*/
    /* =========================================*/
    /* =========================================*/
    /* =========================================*/

    .previewContact{
        max-width: 425px;
        height: 220px;

    }

    .sendingSection{
        max-width: 420px;
        height: initial;
        max-height: initial;
        padding: 5px;
    }
    .sendingTitle{
        max-width: 400px;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }
    .sendingTitle div{
        max-width: initial;
        min-width: initial;
        width: 90%;
        text-align: center;
    }
    .sendingTitle img{
        min-width: initial;
        max-width: initial;
        min-height: initial;
        max-height: initial;
        height:initial;
        width: 90%;
        object-fit: cover;
        margin: 0px 5px;
    }

    .sendingSection form input, .sendingSection form select{
        max-width: initial;
        width: 100%;
    }
    .sendingSection form textarea{
        min-height: initial;
        height: 200px;
    }



    /* =========================================*/
    /* =========================================*/
    /* =========================================*/
    /* =========================================*/

    .contactSection{
        max-width: 425px;
        width: 100%;
        padding: 0px;
        max-height: initial;
        height: auto;
        margin: 0px auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .contactSection .contactCardContainer{
        max-width: 425px;
        min-width: initial;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        margin: 0px auto;
        max-height: initial;
        height: auto;
    }
    .contactCardContainer .lateralBarre{
        padding: 5px; 
        max-width: 425px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .lateralBarre .logoSgpp{
        display: none;
    }
    .cardinalMap{
        max-width: 300px;
        justify-self: center;
        align-self: center;
        margin: 0px;
    }
    .contactUnitsFrame{
        max-width: 420px;
        margin-top: 5px;
        width: 100%;
        padding: 0px;
        height: 80px;
    }
    .contactUnitsContainer{
        display: flex;
        flex-direction: row;
        padding: 0px;
        margin: 0px auto;
        height: 80px;
        max-width: initial;
        width: 100%;
    }
    .contactUnitsContainer .contactUnitLine{
        padding: 5px;
        width: 20%;
        max-width: 58px;
        margin: 0px auto;
        background-color: #fff;
        background-image: none;
        line-height: 0.8rem;
        padding-top: 10px;
        word-wrap: break-word;
        opacity: 1;
        padding: auto 5px;
        color: #2086b9;
        font-size: 0.6rem;
        text-align: center;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .contactUnitLine > span{
        display: none;
    }
    .contactUnitLine[role="active"]{
        height:75px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        background-color: #56BDD7;
        background-image: url('../img/icn/pin_location.png');
        background-size: 13px 20px;
        background-position: center 5px;
        color: #fff;
        line-height: 0.9rem;
        font-size: 0.7rem;
        padding-top: 25px; 
        width: 25%;
        max-width: 62px;
        word-wrap: initial;
    }
    .mainBody{
        max-width: 425px;
        width: 100%;
        padding: 20px 15px;
    }
    .sendingSection[role="contactSession"]{
        max-width: 425px;
        width: 100%;
        max-height: initial;
        height: auto;
        padding: 5px 0px;
    }
    .sendingSection[role="contactSession"] .sendingTitle{
        max-width: 425px;
        width: 100%;
        min-width: initial;
    }
    .sendingSection[role="contactSession"] .sendingTitle img{
        max-width: 425px;
        width: 80%;
        min-height: initial;
        height: auto;
        max-height: 100px;
        object-fit: contain;
    }


    /* ===============================================================
    ==================================================================
    ==================================================================
    =============================================================== */

    .portSection{
        max-width: 420px;
        width: 100%;
        max-height: initial;
        height: auto;
        margin: 0px auto;
    }
    .portSection[id="nosPorts"]{
        padding: 5px 0px;
        justify-content: center;
        align-items: center;
    }
    .portSection[id="nosPorts"] h1{
        margin : 5px auto;
        text-align: center;
        font-size: 2rem;
        padding: 5px 0px;
    }
    .portSection[id="nosPorts"] .portsCardContainer{
        margin: 0px auto;
        max-width: 425px;
        max-height: initial;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        box-shadow: none;
    }
    .portSection[id="nosPorts"] .lateralBarre{
        max-width: 425px;
        min-height: initial;
        height: auto;
        margin: 0px;
        width: 100%;
        padding: 5px 0px;
    }
    .portSection[id="nosPorts"] .contactUnitsFrame{
        max-width: 425px;
        padding: 0px 1px;
        min-height: none;
        height: auto;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .portSection[id="nosPorts"] .contactUnitsFrame[size="long"]{
        padding: 0px;
    }
    .portSection[id="nosPorts"] .contactUnitsContainer{
        min-height: none;
        height:78px;
        padding: 0px;
        margin: 0px;
    }
    .portSection[id="nosPorts"] .contactUnitLine{
        height: 62px;
        background-position: center 5px;
        background-image: none;
    }
    .portSection[id="nosPorts"] .contactUnitLine[role="actived"]{
        height: 77px;
        padding-top: 30px;
        background-color: #56BDD7;
        color: white;
        background-image: url('../img/icn/pin_location.png');
        background-size: 12px 20px;
    }
    .mainBody[id="portPageContainer"]{
        margin: 0px auto;
        padding: 0px;
        max-width: 425px;
        width: 100%;
    }
    .mainBody[id="portPageContainer"] .portHorizontalBarre{
        max-width: 425px;
        width: 100%;
        max-height: initial;
        height: 80px;
        background-color: #fff;
        color: #11435c;
        padding: 0px;
        align-items: start;
    }
    #portPageContainer .portHorizontalBarre .portLine{
        max-width: 60px;
        width: 65px;
        height: 62px;
        background-color: #1C324C;
        background-position: center 10px;
        background-size: 15px 18px;
        opacity: 1;
        color:#fff;
        padding: 0px 2px;
        font-size: 0.6rem;
        display: flex;
        word-wrap: break-word;
        overflow: hidden;
        border-bottom-left-radius: 5PX;
        border-bottom-RIGHt-radius: 5PX;
    }
    #portPageContainer .portHorizontalBarre .portLine[role="active"]{
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        min-height: initial;
        max-width: initial;
        width: 70px;
        height: 65px;
        font-size: 0.7rem;
        font-weight: 400;
        padding:0px 2px;
        padding-top: 25px;
    }
    #portPageContainer .portDescFrame{
        max-width: 425px;
        max-height: initial;
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .portNameTitle{
        width : 100%;
        background-image: none;
        padding: 5px;
    }
    .portSlideContainer{
        max-width: 425px;
        max-height: none;
        min-height: none;
        width: 100%;
        height: fit-content;
        padding: 0px;
    }
    .portSlideContainer[role="portPage"] img{
        max-width: inital;
        min-width: 360px;
        max-height: none;
        min-height: initial;
        width: 320px;
        height:auto;
        overflow: hidden;
    }
    .portSlideContainer[role="portPage"] .navNext{
        display: none;
    }
    #portPageContainer .portParagDesc{
        font-size: 0.8rem;
        line-height: 1.2rem;
    }
    .portDescFrame .moreInfoPart, .portDescFrame .mapsPart{
        max-width: none;
        width: 100%;
        height:auto;
        justify-content: center;
        padding: 10px 5px;
    }
    .portDescFrame .mapsPart{
        padding: 10px 0px;
    }
    .portDescFrame .mapsPart iframe{
        padding: 5px;
        margin: 5px auto;
        width: 100%;
    }


    /* ===============================================================
    ==================================================================
    ==================================================================
    =============================================================== */

    .archiveSection{
        max-width: 425px;
        width: 100%;
        margin: 0px auto;
    }

    .archiveTable .LineTable, .LineTable[role="headTable"]{
        max-height: initial;
        height: auto;
    }
    .archiveTable .LineTable span{
        height: auto;
    }
    .archiveTable .LineTable span[role="designation"], .LineTable[role="headTable"] span[role="designation"]{
        min-width: initial;
        width: 100%;
    }
    .archiveTable .LineTable span[role="Année"], .LineTable[role="headTable"] span[role="Année"]{
        display: none;
    }
    .archiveTable .LineTable span[role="Type"], .LineTable[role="headTable"] span[role="Type"]{
        display: none;
    }
    .archiveTable .LineTable span[role="Actions"], .LineTable[role="headTable"] span[role="Actions"]{
        display: none;
    }
    .archiveMainPage{
        display: flex;
        flex-direction: column-reverse;
    }
    .paginationBarre{
        display: none;   
    }
    .archiveFilters{
        max-width: initial;
        max-height: initial;
        height: auto;
        width: 100%;
        padding: 10px;
        margin: 5px 0px;
    }
    .filterLine{
        flex-direction: row;
        flex-wrap: wrap;
    }
    .filterLine .filterChoice{
        margin: 2px;
    }
    .archiveFilters .btnArticleDesc{
        margin: 5px auto;
    }





    .posteAQuai div{
        max-width: 1440px;
        width: calc(100% - 10px);
    }
    .posteAQuai form input, .posteAQuai form textarea, .posteAQuai form select{
        min-width: initial;
        width: calc(100% - 10px);
    }
    .popUpContainer{
        width: fit-content;
        height: 100%;
        padding: 10px;
        justify-content: center;
        
    }
    .popUpDesignation{
        display: none;
    }
    .popUpTitle{
        font-size: 1.1rem;
    }
    .popUpCloseBtn{
        bottom: initial;
        top: 35px;
        opacity: 1;
        border: 2px solid #fff;
        border-radius: 50%;
        filter: brightness(200%);
        transform: translateX(50%);
    }
    .popUpImg{
    
        max-width: 90%;;
        object-fit: cover;
        width: fit-content;
        margin: 15px auto;
        border-radius: 20px;
        border: 6px solid #fff;
        transition: all 0.5s ease-in repeat;
        cursor: pointer;
        animation: shaking 3s infinite;
    }

}