main{
overflow:hidden;
/* --------------------------------------------Acceuil---------------------------------------- */
    .main_pro{
        height:var(--abs-innerH-nav);
        margin:0;
        padding:0;
        grid-column:1;
        overflow:hidden;
        width:100%;

        & h2{
            font-size:200%;
            font-weight:800;
        }

    /* ==============================================================================
    =================================   DESIGN  =====================================
    ================================================================================= */

        #SC_Desi{
            position:absolute;
            left:0;
            z-index:10;        
            
            display:flex;
            width:100%;
            height:50%;
            
            overflow:hidden;
            animation-direction: reverse;
            transition-property: transform;
            background-color:var(--Emphasis-color);
            & a{
                position:relative;
                padding:var(--b);
                display:flex;
                margin:10%;
                justify-content:center;
                align-items:center;
                align-self:center;
                justify-self:center;
                & img{
                    position:relative;
                    /* bottom:10%; */
                    margin:auto;          
                    width:50vh;
                }
            }

            & h2
            {
                writing-mode:vertical-rl;
                position:relative;
                align-self:center;
    /*            left :75%;
                top:25%;*/
                z-index:45;
                color:white;
                font-family: Helvetica,sans-serif;
                transform-origin:center;
                transform:rotate(225deg);
            }
            & #Desc_SC_Design
            {
                text-align: left;
            }
        }

    /* ==============================================================================
    =================================   WEBDESIGN  ==================================
    ================================================================================= */

        & #SC_WebD
        {
            position:absolute;
            display:flex;
            justify-content:center;
            align-items:center;
            width:50%;
            height:100%;
            z-index:13;

            right:0;
            overflow:hidden;

            clip-path: polygon(calc(90% + var(--nav)) 0%, 100% 0, 100% 100%, 0 100%, 0 50%);
            animation-direction: reverse;
            transition-property: transform;
            background-color:lightblue;
            & a{
                display:flex;
                padding:var(--b);
                margin:auto;
                margin-bottom:10%;
                & img{
                    position:relative;
                    margin:auto;
                    width:50vh;
                }
            }
            & h2
            {
                position:absolute;
                align-self:center;
                justify-self:center;
                right:calc(var(--quart-b) + var(--nav));
                bottom:calc(var(--b));
                font-family: Helvetica,sans-serif;
                z-index:45;
                color:white;
            }

            & #Desc_SC_WebD
            {
                z-index:8;
            }
        }

    /* ==============================================================================
    =============================   ILLUSTRATION  ===================================
    ================================================================================= */

        & #SC_Illu{
            position:absolute;
            left:0;
            bottom:0;
            z-index:11;        

            display:flex;
            height:50%;
            width:50%;
            overflow:hidden;

            animation-direction: reverse;
            transition-property: transform;
            background-color:var(--Button-color);
            & a{
                position:relative;
                padding:var(--b);
                margin:auto ;
                height:fit-content;
                display:flex;
                justify-content:center;
                align-items:center;            
                & img{
                    position:relative;
                    margin:auto;
                    width:50vh;
                }
            }

            & h2{
                position:relative;
                writing-mode:vertical-rl;
                align-self:center;
                font-family: Helvetica,sans-serif;
                left:var(--quart-b);
                z-index:20;
    /*            transform:rotate(270deg);*/
                color:white;
            }
            & #Desc_SC_Illu
            {
                text-align: left;
            }
        }
    }

    /*-----------------MEDIA-QUERIES------------------*/

    @media screen AND (max-width:740px){
        main{
            .main_pro{
                position:relative;
                margin:0;
                padding:0;
                height:100%;
                display:flex;
                flex-direction:column;
                gap:0;
                width:100vw;
                
                &>section{     
                    padding:0;
                    overflow:hidden;
                    h2{
                        position:relative;
                        writing-mode:horizontal-tb;
                        top:0;
                        padding:var(--b);
                    }
                }
                & #SC_Illu{
                    clip-path:none;
                    position:relative;
                    height:var(--10b);
                    width:100vw;
                    
                    
                    order:1;
                    justify-content:center;
                    align-items:center;
                    
                    img{
                        position:relative;
                        width:100%;
                        height:auto;
                    }
                    h2{
                        transform:unset;
                        writing-mode:horizontal-tb;
                    }
                }
                & #SC_Desi{
                    top:unset;
                    bottom:unset;
                    left:unset;
                    right:unset;
                    clip-path:none;
                    position:relative;
                    height:var(--10b);
                    width:100vw;
                    order:2;
                    justify-content:center;
                    align-items:center;
                    img{
                        position:relative;
                        width:100%;
                        height:auto;
                    }
                    h2{
                        position:relative;
                        top:unset;
                        bottom:unset;
                        left:var(--demi-b);
                        padding-left:var(--demi-b);
                        right:unset;
                        writing-mode:horizontal-tb;
                    }
                }
                & #SC_WebD{
                    top:unset;
                    bottom:unset;
                    left:unset;
                    right:unset;
                    
                    clip-path:none;
                    position:relative;
                    height:var(--10b);
                    width:100vw;
                    order:3;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    img{
                        position:relative;
                        width:100%;
                        height:auto;
                    }
                    h2{
                        top:unset;
                        bottom:unset;
                        left:unset;
                        right:unset;
                        transform:unset;
                        writing-mode:horizontal-tb;
                    }
                }
            }

        }

    }
}