@keyframes slidein {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(100%);
    }
}


:root {
    font-size: 62.5%;
    /* 1 rem = 10px */
    --p-left: 2vw;
    --p-right: 2vw;
    --Badgeweb: #ff8686;
    --BadgeUX: #7effa5;
    --BadgeFE: #fff279;
    --BadgeBE: #8fadff;

}




* {
    box-sizing: border-box;
}


/*
*
*   font size 
*
*/

h1,
h2,
h3,
h4,
h5,
.btn {

    font-family: 'Merriweather Sans', sans-serif;
}

h3 {
    font-size: 2.8rem;
}

p,
span,
label,
ul,
a,
button,
input,
li {

    font-family: 'Roboto', sans-serif
}
input,
button{
    color: white;
}

html {
    scroll-behavior: smooth;

}

/*
*
*   HEADER 
*
*/


header {
    height: 100vh;
    width: 100%;
    background-image: url(../images/fond.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 48%;
    overflow: hidden;





}

.overlay {
    position: relative;
    z-index: 0;
    background-color: #000000;
    width: 100vw;
    height: 100vh;
    opacity: 0.5;

}

.fond {
    opacity: 1;
    width: 100%;
    height: 100vh;
    background-color: rgb(255, 255, 255);
    clip-path: polygon(100% 81%, 0 100%, 100% 100%);
}

.o-navblock {
    position: fixed;
    width: 100%;
    z-index: 100000;
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(68, 67, 67);
    height: 100px;
}

.logo {

    display: flex;
    padding: 0.4rem;
    justify-content: space-between;
    height: 100%;
    background-color: rgb(104, 104, 104);

    width: 220px;
    min-width: 220px;
    margin-right: 2rem;
}

.logo>img {

    width: 100%;
}


.m-menuBlock {
    margin: 0;
    width: 70%;
    height: 100%;

    padding: 0;
    display: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    list-style: none;
    font-size: 2rem;

}

.a-menuBlock__item {
    padding: 0.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;

    text-decoration: none;
    text-transform: uppercase;
    border-bottom: transparent 0.5rem solid;
}

.a-link {

    font-size: 1.8rem;
    color: white;
    text-decoration: none;

}

.a-linkhb {

    font-size: 3rem;
    color: white;
    text-decoration: none;

}

.a-menuBlock__item:hover {
    border-bottom: white 0.5rem solid;
    cursor: pointer;

}

.m-titleblock {
    font-size: 2.5rem;
    margin: 0;
    position: relative;
    width: 100%;
    left: 50%;
    top: 40%;
    transform: translate(-50%, 50%);
    color: white;
    text-transform: uppercase;
    z-index: 1;

}

.a-prenom {
    font-size: 1.2em;
    display: block;
    text-align: center;

}

.a--blue {

    padding: 0.2rem;
    color: rgb(0, 0, 0);
    background-color: white;
}



.a--white {
    color: white;
}

.a-web {
    margin-top: 1rem;
    font-size: 1em;
    display: block;
    text-align: center;
}

.m-buttonHamburger {
    display: block;
    align-items: center;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.a-menuBlockHamburger {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.m-menuBlockHamburger {

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.a-menuBlockHamburger__item {
    list-style: none;
    margin-top: 1rem;
    width: 95%;
    text-align: start;
    text-decoration: none;
}


.a-buttonHamburger {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 45px;
    height: 45px;
    overflow: hidden;
    list-style: none;
    position: relative;
    color: #ffffff;
    font-size: 4rem;
    border: 0.2rem solid black;
    border-radius: 1rem;
}

.a-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: translateY(0px);

}

.hbicons {
    text-align: center;
    position: relative;
    width: 45px;
    height: 45px
}

.btnactive {
    animation: 310ms activebutton;
    animation-fill-mode: forwards
}

.btndisable {
    animation: 310ms btndisable;
    animation-fill-mode: forwards
}

@keyframes activebutton {

    from {
        transform: translatey(0px);
    }

    to {
        transform: translatey(-45px);

    }

}

@keyframes btndisable {

    from {
        transform: translatey(-45px);

    }

    to {

        transform: translatey(0);
    }

}

.m-svg {
    position: relative;
    top: 65%;
    overflow: hidden;

}

.o-navhamburger {
    display: none;
    position: fixed;

    width: 100vw;
    height: 100vh;
    background-color: rgb(192, 189, 189);
    z-index: 10000;

    animation: 3s isdisabled;
    animation-fill-mode: forwards
}

.m-menuBlockHamburger {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 3.5rem;

    text-transform: uppercase;
    text-align: start;
}



.active {
    display: block;
    animation: 310ms isactive;
    animation-fill-mode: forwards
}

.disabled {
    display: block;
    animation: 310ms isdisabled;
    animation-fill-mode: forwards
}

@keyframes isactive {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes isdisabled {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);

    }
}

/* 
    a suprimer car une image trop grand fait 
    apparaitre un bordure blanc 

*/


/*********** */


/* 

    SECTION COMPETENCE 

*/

.o-sectionCompétence {

    overflow: hidden;
    padding-left: var(--p-left);
    padding-right: var(--p-right);
}

.m-titleCompétence {
    text-align: center;
    font-size: 2.8rem;
}

.grid {
    display: grid;
    column-gap: 2rem;
    justify-items: center;
    row-gap: 2rem;
    grid-template-columns: repeat(1, 1fr)
}

.a-sectionarticle__item {

    display: flex;
    flex-direction: column;
    width: 300px;
    border-radius: 10px;
    align-items: center;


}

.a-sectionarticle-background {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: center;
    clip-path: polygon(61% 0, 100% 0, 100% 38%, 100% 90%, 50% 100%, 0 90%, 0 0);

}

.a-sectionarticle-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.bg--html {

    background-color: var(--Badgeweb);

}

.bg--ux {

    background-color: var(--BadgeUX);

}

.bg--front-end {

    background-color: var(--BadgeFE);

}

.bg--back-end {

    background-color: var(--BadgeBE);

}

.--html {



    border: 0.5rem var(--Badgeweb) solid;


}

.--Ux {

    border: 0.5rem var(--BadgeUX) solid;


}

.--front-end {

    border: 0.5rem var(--BadgeFE) solid;

}

.--back-end {

    border: 0.5rem var(--BadgeBE) solid;

}


.a-sectionarticle-title {
    font-size: 1.8rem;
    text-align: center;
}

.a-sectionarticle-paragraphe {
    font-size: 1.5rem;
}

.a-sectionarticle-image {
    justify-self: center;
    width: 50%;
    height: 100%;

}

/* 
img {

    width: 20%;
} */

.badge {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}


.badge-item {
    margin-top: 1rem;
    font-size: 1.5rem;
    text-transform: uppercase;

    padding: 1.5rem;
    border-radius: 1.2rem;
}

.--red {
    background-color: var(--Badgeweb);
}

.--vert {
    background-color: var(--BadgeUX);
}

.--blue {
    background-color: var(--BadgeBE);
}

.--jaune {
    background-color: var(--BadgeFE);
}

/* 

Section : Projects

*/


.o-sectionProjects {
    overflow: hidden;
    background-color: rgb(80, 80, 80);
    margin-top: 10rem;
    padding-bottom: 5rem;

}

.m-marginprojects {
    padding-bottom: 1.5rem;
    background-color: black;
    overflow: hidden;
    padding-left: 10%;
    padding-right: 10%;
}

.m-titleProjects {
    color: white;
    text-align: center;
    font-size: 2.8rem;
}

.m-svgprojects {
    width: 100%;
    position: absolute;
    top: -32%;
    overflow: hidden;
    z-index: -1;

}


.m-articleprojects {

    border-radius: 10px 10px 10px 10px;
    background-color: white;
    margin-top: 1.5rem;
    width: 30rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: baseline;
}


.m-articleprojects>img {

    width: 100%;
    height: 226px;

    border-radius: 1rem 1rem 0 0;
}

.articletexte>h3 {
    text-align: center;
    font-size: 2.4rem;
}

.articletexte>p {
    font-size: 1.5rem;
}

.flexbadge {
    display: flex;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
}

.articletexte {
    background-color: white;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
    border-radius: 0 0 1rem 1rem;
    height: 50%;
    width: 100%;
}

.minibadge-item {
    margin-top: 0.5rem;
    margin-left: 1.2rem;
    font-size: 1rem;
    text-transform: uppercase;

    padding: 1rem;
    border-radius: 1.2rem;
}

.lab {
    font-size: 2.5rem;
}

.itenlinkgithub {
    font-size: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;

}

.itenlinkgithub>a {
    margin-left: 0.5rem;
    text-decoration: none;
    color: #0B0560;
    font-size: 1rem;
    text-transform: uppercase;
}

.btn {
    border-radius: 0 0 9px 9px;
    font-size: 1.6rem;
    padding: 1.5rem;
    text-align: center;
    color: #0B0560;
    display: block;
    text-decoration: none;
    width: 100%;
    border: #0B0560 2px solid;




}

.btn:hover {
    background-color: rgb(218, 212, 212);
}

.lirelasuite {
    margin-top: 3.5rem;
    align-self: flex-end;
    align-content: flex-end;
}


/* 

    section: services

*/


.o-sectionservices {
    overflow: hidden;
    padding-top: 2rem;
    padding-bottom: 8rem;
    margin-top: 10rem;
    width: 100%;
    background-color: rgb(117, 117, 117);

}

.o-sectionservices>h2 {


    text-align: center;
    font-size: 2.8rem;



}

.flexservices {

    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-around;
    align-items: center;



}

.m-articleservices {

    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    width: 30rem;
    height: 56rem;

    border-radius: 10px;


    background-color: whitesmoke;

}


.m-articleservices-title {

    text-align: center;
    font-size: 2.4rem;

}


.m-articleservices-image {

    width: 50%;

}


.m-articleservices-description {

    margin-top: 1rem;
    background-color: rgb(43, 43, 43);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 30px 0px 7px 7px
}

.m-articleservices-ul {

    list-style: square;
    color: white;
    font-size: 1.8rem;

}


.m-articleservices-link {
    text-decoration: none;
    color: rgb(255, 255, 255);
    padding: 1rem;
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
    background-color: rgb(73, 73, 73);
    margin-top: auto;
    border-radius: 0px 0px 7px 7px;
    transition: background-color 250ms;
}

.m-articleservices-link:hover{

    background-color: #2b2b49;

}


/* 

Section : a propos de moi

*/


.fondphoto {
    flex: 1;

    width: 100%;
    height: 40rem;
    background-color: #373737;

}

.o-sectionapropos {
    margin-top: 10rem;
    width: 100%;
}

.o-sectionapropos>h2 {
    text-align: center;
    margin-bottom: 5rem;
    font-size: 2.8rem;

}

figure {

    margin: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.figureimg {
    flex: 1;

    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: 50% 30%;
    clip-path: polygon(51% 0, 100% 0, 100% 80%, 90% 95%, 10% 95%, 0 80%, 0 0)
}


figcaption {
    flex: 1;
    height: 40rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #373737;
    color: white;
    padding: 1.5rem;
}

.m-figcaptiontitle {
    font-size: 2.5rem;
    text-transform: uppercase;
}

.m-figcaptiontext {
    font-size: 1.5rem;
}

.social {
    font-size: 2.5rem;
    text-align: center;
    margin-top: 15px;
    align-self: flex-start;
}

.social>a {

    color: white;
}

.social>a>i {
    background-color: rgb(82, 82, 82);
    border-radius: 50%;
    padding: 1rem;
    transition: background-color 100ms;
}

.social>a>i:hover {
    background-color: rgb(121, 121, 121);
}

.social2 {
    font-size: 2.5rem;
    text-align: center;
    margin-top: 15px;
    align-self: center;
}

.social2>a {

    color: white;
}

.social2>a>i {
    background-color: rgb(82, 82, 82);
    border-radius: 50%;
    padding: 1rem;
    transition: background-color 100ms;
}

.social2>a>i:hover {
    background-color: rgb(121, 121, 121);
}


/*

    Section Contact

*/

.o-sectioncontact {
    overflow: hidden;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-bottom: 2.5rem;
    margin-top: 10rem;
    background-color: #373737;


}

.m-contacttitle {
    text-align: center;
    font-size: 2.8rem;
    color: white;
    text-transform: uppercase;
}

form {
    color: white;
    font-size: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    align-items: baseline;

}

.formbadge {

    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    text-align: center;
    flex: 1;
    width: 100%;

}

.itemformbadge {
    padding-top: 0.5rem;
    background-color: rgb(97, 97, 97);
    border-bottom: 0.5rem solid rgb(102, 95, 131);
    flex: 1;
    height: 60px
}

.is_valid {

    color: rgb(184, 255, 184);

}

.is_notvalid {

    color: rgb(255, 0, 0);

}

.itemformbadge>p {
    margin: 0;
    margin-top: 0.5rem;
    font-size: 1rem;
}

.flex1 {
    flex: 1;
}

.flex2 {
    display: flex;
    flex: 1;
}









.form-control {
    width: 100%;
    margin-top: 1.2rem;
    display: flex;
    flex-direction: column;
}


.m-input {
    padding: 1.2rem;
    text-decoration: none;
    width: 100%;
    background-color: rgb(85, 85, 85);
    height: 3.2rem;
    border: none;
    border-bottom: 0.5rem solid rgb(102, 95, 131);
}

.m-input:hover {
    background-color: rgb(102, 95, 131);

}


.form-control>textarea {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    border: solid 0.2rem black;
}





.form-rgpd {
    margin-top: 2rem;
    display: flex;
    width: 100%;
    margin-bottom: 2rem;
}

.rgpd {
    display: block;
    width: 100%;
}


.form-rgpd>input {

    width: 3.5rem;
    height: 2.5rem;
    margin-right: 1.5rem;
}


.btn-submit {
    border: none;
    text-decoration: none;
    padding: 1.5rem;
    width: 100%;
    background-color: rgb(102, 95, 131);

}


/*

    ckeditor

*/

.ck {
    color: black;
    width: 100%;
    height: 150px;
    background-color: rgb(85, 85, 85);
    border-bottom: 0.5rem solid rgb(102, 95, 131);
}

.ck-content {


    overflow-x: auto;
    background-color: rgb(85, 85, 85);
}

.d-none {
    display: none;
}

.d-flexnone {
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    animation-fill-mode: forwards;
    animation: 1.5s side;
}

.d-flex {

    animation: 1.5s show;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;


}


@keyframes show {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes side {


    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


.m-form {
    position: relative;
}

.iconeinfo {
    padding: 3rem;
    background-color: rgb(56, 56, 56);
    color: rgb(0, 250, 83);
    font-size: 15rem;
    text-align: center;
    border-radius: 50%;
}

.iconeinfo_eror {
    padding: 3rem;
    background-color: rgb(56, 56, 56);
    color: rgb(158, 42, 42);
    font-size: 15rem;
    text-align: center;
    border-radius: 50%;

}

.info_succes {
    padding: 15rem 5rem;
    position: fixed;

    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: rgb(255, 255, 255);

}

.info_error {
    padding: 15rem 5rem;

    position: fixed;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: rgb(255, 255, 255);

}

.texteinfo {
    font-size: 1.8rem;
    color: black;
    text-align: center;
}

/* 


Footer 

*/


.grid {
    justify-content: center;
    display: grid;
    grid-template-columns: fit-content(50%);

}


.o-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 5rem;
    height: 160px;
    background-color: #373737;
    padding: 1rem;
}



.m-footersection-title {
    font-size: 1.2rem;
    color: white;
    text-transform: uppercase;
    text-align: center;
}


.m-linksfooter {
    padding: 0;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;


}

.o-itemlink {
    padding: 0;
    margin: 0;
    list-style: none;
    color: white;

}

.o-itemlink>a {
    color: inherit;
    text-decoration: none;
}

/* 

    media query 

*/


@media (min-width: 992px) {
    .o-sectioncontact{
        padding-left: 15vw;
        padding-right: 15vw;
    }
    :root {
        --p-left: 15vw;
        --p-right: 15vw;
    }

    .m-articleprojects {
        height: 63rem;
    }

    .grid {
        justify-content: center;
        display: grid;
        grid-template-columns: fit-content(50%) fit-content(50%);

    }

    .col-span {
        grid-column: 1 / 3;



    }

    .m-menuBlock {
        display: flex;
    }

    figure {
        flex-direction: row;
    }

    .flexservices {
        flex-direction: row;
        align-items: baseline;
    }

    .figureimg {

        width: 100%;
        height: 100%;
        object-position: 50% 10%;
        clip-path: polygon(0 0, 96% 0, 78% 100%, 0% 100%);
    }

    .end {
        justify-self: end;
    }


    .a-sectionarticle__item {
        width: 350px;
    }

    .m-buttonHamburger {
        display: none;
    }
}




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



        ANIMATION FX


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

.animation {

    animation-duration: 0.600s;
}

.animation--slideintop {
    animation-name: slideintop;
    animation-fill-mode: both;

}

.animation--slideinout {
    transform: translateY(-5rem);
    opacity: 0;
    filter: blur(.5rem);

}

.animation--slideleft {
    animation-name: slideleft;
    animation-fill-mode: both;

}

.animation--slideleftout {
    transform: translatex(-5rem);
    opacity: 0;

}


.animation--slideright {
    animation-name: slideright;
    animation-fill-mode: both;

}

.animation--sliderightout {
    
    transform: translatex(5rem);
    opacity: 0;
    filter: blur(.5rem);

}


.animation--blur {
    animation-name: blur;
    animation-fill-mode: both;

}

.animation--blurout {

    filter: blur(5rem);
    filter: contrast(5rem);


}

.animation--scale {

    animation-name: scale;
    animation-fill-mode: both;

}



.animation--scaleout {
    transform: scale(0);
    filter: blur(1rem);

}

@keyframes scale {

    from {

        transform: scale(0);
        filter: blur(1rem);
    }

    to {

        transform: scale(1);
    }

}


@keyframes blur {
    from {
        filter: blur(5rem);
        filter: contrast(5rem);


    }

    to {
        filter: blur(0rem);
        filter: contrast(0rem);

    }
}




@keyframes slideright {

    from {
        transform: translatex(5rem);
        opacity: 0;
        filter: blur(.5rem);


    }

    to {
        transform: translateY(0);
        opacity: 1;

    }

}





@keyframes slideleft {

    from {
        transform: translatex(-5rem);
        opacity: 0;
        filter: blur(.5rem);
    }

    to {
        transform: translateY(0px);
        opacity: 1;

    }

}




@keyframes slideintop {

    from {
        transform: translateY(-5rem);
        opacity: 0;
        filter: blur(.5rem);

    }

    to {
        transform: translateY(0px);
        opacity: 1;

    }

}


/* 

page : mentions légales

*/

.o-navmentionslegales {
    display: flex;
    width: 100%;
    background-color: rgb(104, 104, 104);

    justify-content: space-between;
    align-items: center;

}

.Mentionslegal {
    display: flex;
    flex-direction: column;

    font-size: 1.3rem;

}

.textementions {
    display: flex;
    flex-direction: column;
    padding-left: 5%;
    padding-right: 5%;
    width: 90%;
    text-align: start;
}