/* =======================================================
                        ROOT
======================================================= */

:root{

    /*=========================
            COULEURS
    =========================*/

    --color-primary:#55641D;
    --color-primary-dark:#415111;

    --color-secondary:#D9E98A;
    --color-accent:#E1D2F3;
    --color-blue:#BED7FD;

    --color-bg:#F9F8F3;
    --color-white:#FFFFFF;

    --color-text:#1E1E1E;
    --color-text-light:#555555;
    --color-border:#D9D9D9;



    /*=========================
            POLICES
    =========================*/

    --font-title:"Bricolage Grotesque", sans-serif;
    --font-body:"Poppins", sans-serif;



    /*=========================
        TAILLES TYPO
    =========================*/

    --fs-xs:.75rem;
    --fs-sm:.875rem;
    --fs-base:1rem;
    --fs-md:1.125rem;

    --fs-h4:clamp(1.15rem,1vw + .8rem,1.4rem);
    --fs-h3:clamp(1.35rem,1vw + 1rem,1.75rem);
    --fs-h2:clamp(1.8rem,2vw + 1rem,2.6rem);
    --fs-h1:clamp(2.5rem,3vw + 1rem,4rem);



    /*=========================
        FONT WEIGHT
    =========================*/

    --fw-light:300;
    --fw-regular:400;
    --fw-medium:500;
    --fw-semibold:600;
    --fw-bold:700;



    /*=========================
            ESPACEMENTS
    =========================*/

    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:1.5rem;
    --space-lg:2rem;
    --space-xl:3rem;
    --space-2xl:5rem;
    --space-3xl:7rem;



    /*=========================
        BORDER RADIUS
    =========================*/

    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:18px;
    --radius-xl:30px;
    --radius-pill:999px;



    /*=========================
            OMBRES
    =========================*/

    --shadow-sm:0 2px 4px rgba(0,0,0,.08);
    --shadow-md:0 4px 12px rgba(0,0,0,.12);
    --shadow-lg:0 8px 20px rgba(0,0,0,.15);



    /*=========================
        VARIABLES BOOTSTRAP
    =========================*/

    --bs-body-font-family:var(--font-body);
    --bs-body-font-size:var(--fs-base);
    --bs-body-line-height:1.6;

    --bs-body-bg:var(--color-bg);
    --bs-body-color:var(--color-text);

    --bs-link-color:var(--color-text);
    --bs-link-hover-color:var(--color-primary);
}


/* =======================================================
                    GLOBALES
======================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    font-size:100%;
}

body{

    margin:0;
    padding:0;

    background:var(--color-bg);
    color:var(--color-text);

    font-family:var(--font-body);
    font-size:var(--fs-base);
    line-height:1.6;

    overflow-x:hidden;
}

main{
    flex:1;
}

img{

    max-width:100%;
    display:block;
}

a{

    color:inherit;
    text-decoration:none;

    transition:.25s;
}

ul{

    margin:0;
    padding:0;
    list-style:none;
}

section{

    padding:var(--space-3xl) 0;
}

.container{

    max-width:1200px;
}


/* =======================================================
                    TYPOGRAPHIE
======================================================= */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-title);
    font-weight:var(--fw-bold);
    line-height:1.15;
    margin:0;
}

h1{

    font-size:var(--fs-h1);
}

h2{

    font-size:var(--fs-h2);
}

h3{

    font-size:var(--fs-h3);
}

h4{

    font-size:var(--fs-h4);
}

p{

    margin:0 0 1rem;
}

.small{

    font-size:var(--fs-sm);
}

.xs{

    font-size:var(--fs-xs);
}

.medium{

    font-weight:var(--fw-medium);
}

.bold{

    font-weight:var(--fw-bold);
}



/* =======================================================
                    BOUTONS
======================================================= */

.btn{

    border-radius:var(--radius-pill);
    padding:.8rem 1.6rem;

    font-weight:600;

    transition:.25s;

    box-shadow:none;
}

.btn-primary{

    --bs-btn-bg:var(--color-primary);

    --bs-btn-border-color:var(--color-primary);

    --bs-btn-color:var(--color-bg);



    --bs-btn-hover-bg:var(--color-primary-dark);

    --bs-btn-hover-border-color:var(--color-primary-dark);

    --bs-btn-hover-color:var(--color-bg);



    --bs-btn-active-bg:var(--color-text);

    --bs-btn-active-border-color:var(--color-text);



    --bs-btn-disabled-bg:#BDBDBD;

    --bs-btn-disabled-border-color:#BDBDBD;
}

.btn-primary:focus,
.btn-primary:focus-visible{

    box-shadow:none;
}

.btn-secondary{

    --bs-btn-bg:transparent;

    --bs-btn-color:var(--color-primary);

    --bs-btn-border-color:var(--color-primary);



    --bs-btn-hover-bg:var(--color-primary);

    --bs-btn-hover-color:var(--color-bg);

    --bs-btn-hover-border-color:var(--color-primary);



    --bs-btn-active-bg:var(--color-secondary);

    --bs-btn-active-border-color:var(--color-secondary);

    --bs-btn-active-color:var(--color-text);
}

.btn-secondary:focus,
.btn-secondary:focus-visible{

    box-shadow:none;
}

/* =======================================================
                    ICONES
======================================================= */

.fa-brands,
.fa-solid{

    transition:.25s;
}

.fa-brands:hover,
.fa-solid:hover{

    color:var(--color-primary);
}



/* =======================================================
                    TEXTES
======================================================= */

::selection{

    background:var(--color-secondary);
    color:var(--color-text);
}

.text-primary{
    color:var(--color-primary);
}

.bg-primary{
    background:var(--color-primary);
}

.bg-secondary{
    background:var(--color-secondary);
}

.bg-accent{
    background:var(--color-accent);
}

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

.rounded{
    border-radius:var(--radius-lg);
}

.shadow{
    box-shadow:var(--shadow-md);
}

.section-title{
    margin-bottom:3rem;
}

.subtitle{
    color:var(--color-text-light);
}



/*==================================
            NAVBAR
==================================*/

.navbar-custom{

    height:90px;
    background:transparent;
}

.navbar-custom .container{

    max-width:1200px;
}

.nav-link{

    position:relative;

    font-family:var(--font-body);
    font-size:.9rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.5px;

    color:var(--color-text);

    transition:.3s;
}

/* .nav-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-4px;

    width:0;
    height:2px;

    background:var(--color-primary);

    transition:.3s;
}

.nav-link:hover::after{

    width:100%;
} */

.nav-link:hover{

    /* color:var(--color-accent); */

    background:var(--color-accent);

    padding:.35rem .7rem;

    border-radius:6px;

    color:var(--color-primary-dark);
}


.nav-link.active{

    background:var(--color-blue);

    padding:.35rem .7rem;

    border-radius:6px;

    color:var(--color-primary-dark);
}


.navbar-btn{

    padding:.65rem 1.3rem;

    font-size:.85rem;

    font-weight:600;

    text-transform:uppercase;
}


/*=================================
            REUTILISABLES
=================================*/

.section-title{
    display: inline;
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--color-primary);
    background: linear-gradient(
        transparent 55%,
        var(--color-accent) 55%
    );
    padding: 0 .6rem 0 .2rem;
}

/*=================================
            ABOUT
=================================*/

.about{

    padding:7rem 0;
}

.about p{

    max-width:720px;
    margin-bottom:1.5rem;
    line-height:1.8;
}

.about-right{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1rem;
}

.about-circle{

    width:220px;
    height:220px;

    background:var(--color-secondary);

    border:2px solid var(--color-primary);

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:flex-end;

    overflow:hidden;
}

.about-img{

    width:170px;
    

    transform:translateY(15px);
}

.about .btn{
    padding:.7rem 1.8rem;
}




/*=================================
            TIMELINE
=================================*/

.timeline{

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

.timeline-card{

    width:900px;
    max-width:100%;

    height:74px;

    display:flex;
    justify-content:center;
    align-items:center;

    font-family:var(--font-title);
    font-weight:700;
    font-size:1.3rem;

    border:2px solid var(--color-text);
    border-radius:18px;

    position:relative;

    transition:.3s;
}


.green{
    background:var(--color-secondary);
    z-index:3;
    transform:rotate(0deg);
}

.purple{
    background:var(--color-accent);
    margin-top:-8px;
    transform:rotate(-0.8deg);
    z-index:2;
    margin-top:-10px;
}

.blue{
    background:var(--color-blue);
    margin-top:-8px;
    transform:rotate(0.8deg);
    z-index:1;
    margin-top:-10px;
}



/*==================================
                CTA
==================================*/

.cta{

    padding:7rem 0;
}

.cta-box{

    background:var(--color-primary);

    border-radius:24px;

    padding:3.5rem 3rem;

    position:relative;

    overflow:visible;
}

.cta h2{

    color:var(--color-bg);

    margin-bottom:1rem;
}

.cta p{

    color:rgba(255,255,255,.85);

    max-width:520px;

    margin-bottom:2rem;
}

.cta .btn{

    background:var(--color-secondary);

    color:var(--color-text);

    border-radius:999px;

    padding:.8rem 1.5rem;

    font-weight:600;

    border:none;
}

.cta .btn:hover{

    background:var(--color-white);
}


.cta-img{

    max-height:450px;

    position:absolute;

    right:40px;

    bottom:-35px;
}


/*==================================
                CONTACT
==================================*/

.contact{
    padding:7rem 0;
}

.contact-info{
    align-items:flex-start;
}

.contact-info p{
    margin-top:.8rem;
    margin-bottom:0;
}

.contact-icon{

    font-size:1.8rem;
    margin-bottom:.5rem;
}

.phone{
    color:var(--color-secondary);
}

.mail{
    color:var(--color-accent);
}

.home{
    color:var(--color-blue);
}

.socials{
    display:flex;
    gap:1rem;
    margin-top:2rem;
}

.socials a{
    font-size:2.3rem;
    transition:.3s;
}

.socials a:hover{
    transform:translateY(-3px);
}

.form-control{
    background:transparent;
    border:1.5px solid var(--color-primary);
    border-radius:12px;
    padding:.9rem 1rem;
    font-family:var(--font-body);
    box-shadow:none;
}

.form-control:focus{
    border-color:var(--color-primary);
    box-shadow:none;
    background:transparent;
}

textarea.form-control{
    resize:none;
    min-height:170px;
}

.contact button{
    border-radius:999px;
    padding:.8rem 2rem;
    font-weight:600;
}


/*==================================
            FOOTER
==================================*/

.footer{
    background:var(--color-accent);
    min-height: 90px;
    padding:1.5rem 0;
    margin-top:5rem;
}

.footer .container{

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

    gap:.75rem;
}


.footer-text{
    margin:0;
    font-size:.8rem;
    font-weight:400;
    color:var(--color-primary-dark);
    text-align:center;
}


.footer-socials{
    display:flex;
    gap:.8rem;
}

.footer-socials a{
    font-size:1.3rem;
    transition:.25s;
}

.socials-linkedin{
    color:var(--color-accent);
}

.socials-github{
    color:var(--color-blue);
}

.footer-socials a:hover{
    transform:translateY(-2px);
    color:var(--color-text);
}




/*=================================
            COMPETENCES
=================================*/

.skills{
    padding:7rem 0;
}

.skills-list{
    margin-top:3rem;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.skill-row{
    display:flex;
    align-items:center;
    gap:1.5rem;
}

.skill-category{
    min-width:130px;
    padding:.5rem 1rem;
    border-radius:999px;
    font-size:.85rem;
    font-weight:600;
    text-align:center;
}

.skill-category.frontend{
    background:var(--color-secondary);
}

.skill-category.backend{
    background:var(--color-accent);
}

.skill-category.database{
    background:var(--color-blue);
}

.skill-category.tools{
    background:var(--color-accent);
}

.skill-row p{
    margin:0;
    font-weight:500;
}


.learning-box{
    background:var(--color-secondary);
    border-radius:24px;
    padding:3rem;
}

.learning-box h3{
    margin-bottom:1.5rem;
}

.learning-box p{
    max-width:500px;
}

.learning-box ul{
    list-style:disc;
    padding-left:1.5rem;
}

.learning-box li{
    margin-bottom:.4rem;
}





/*=================================
            PROJETS
=================================*/

.projects{
    padding:5rem 0;
}

.projects .section-title{
    display:inline-block;
    margin-bottom:4rem;
}

.project-item{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:5rem;
    margin-bottom:6rem;
}

.project-item-reverse .project-image{
    order:2;
}

.project-item-reverse .project-content{
    order:1;
}

.project-image img{
    width:100%;
    max-width:520px;
    margin:auto;
}

.project-content{
    max-width:500px;
}

.project-type{
    display:block;
    margin-bottom:.3rem;
    font-size:.75rem;
    font-weight:500;
}

.project-content h3{
    margin-bottom:.5rem;
}

.project-content p{
    font-size:.85rem;
    line-height:1.6;
    margin-bottom:1rem;
}

.project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    margin-bottom:1rem;
}

.project-tags span{
    padding:.25rem .7rem;
    border-radius:999px;
    font-size:.65rem;
    font-weight:500;
}

.project-tags .tag-front{
    background:var(--color-secondary);
}

.project-tags .tag-back{
    background:var(--color-accent);
}

.project-tags .tag-bdd{
    background:var(--color-blue);
}




.project-links{
    display:flex;
    gap:1.5rem;
}

.project-links a{
    font-size:.75rem;
    text-decoration:underline;
}

.project-links a:hover{
    color:var(--color-primary);
}






/*=================================
        RESPONSIVE MOBILE
=================================*/

@media (max-width: 767px){

    /* GLOBAL */

    section{
        padding:4rem 1rem;
    }

    .container{
        width:100%;
        max-width:100%;
        padding-left:1rem;
        padding-right:1rem;
    }


    /* HERO */

    .hero{
        padding-top:3rem;
    }

    .hero .row{
        text-align:left;
    }

    .hero h1{
        font-size:2.3rem;
    }

    .hero p{
        font-size:.85rem;
    }

    .hero-img{
        width:70%;
        max-width:280px;
        margin:2rem auto 0;
    }

    .hero-buttons .btn-secondary{
        margin-top: 1rem;

    }


    /* TIMELINE */

    .timeline{
        padding-top:2rem;
        padding-bottom:4rem;
    }

    .timeline-card{
        width:100%;
        height:auto;
        min-height:60px;
        padding:1rem;
        text-align:center;
        font-size:.85rem;
    }

    .purple,
    .blue{
        margin-top:-5px;
    }


    /* COMPETENCES */

    .skills{
        padding:4rem 1rem;
    }

    .skills-list{
        gap:1rem;
        margin-top:2rem;
    }

    .skill-row{
        flex-direction:column;
        align-items:flex-start;
        gap:.5rem;
    }

    .skill-category{
        min-width:100px;
    }

    .learning-box{
        margin-top:2rem;
        padding:2rem;
    }


    /* ABOUT */

    .about{
        padding:4rem 1rem;
    }

    .about p{
        max-width:100%;
        font-size:.85rem;
    }

    .about-right{
        margin-top:2rem;
    }

    .about-circle{
        width:170px;
        height:170px;
    }

    .about-img{
        width:135px;
    }


    /* PROJETS */

    .projects{
        padding:4rem 1rem;
    }

    .project-item{
        display:flex;
        flex-direction:column;
        gap:2rem;
        margin-bottom:5rem;
    }

    .project-item-reverse .project-image{
        order:1;
    }

    .project-item-reverse .project-content{
        order:2;
        margin-left:0;
    }

    .project-image{
        width:100%;
    }

    .project-image img{
        width:100%;
        max-width:400px;
        margin:auto;
    }

    .project-content{
        width:100%;
        max-width:100%;
    }

    .project-content h3{
        font-size:1.5rem;
    }


    /* CTA */

    .cta{
        padding:4rem 1rem;
    }

    .cta-box{
        padding:2rem 1.5rem;
    }

    .cta-img{
        position:relative;
        right:auto;
        bottom:auto;
        max-height:250px;
        max-width:55%;
        margin:1rem auto -2rem;
    }


    /* CONTACT */

    .contact{
        padding:4rem 1rem;
    }

    .contact-info{
        text-align:center;
    }

    .contact-info > div{
        margin-bottom:2rem;
    }

    .socials{
        margin-top:1.5rem;
    }

}