* {
    margin: 0;
    padding: 0;
  }

  header{
    display: flex;
    background-color: #0C2B4E;
    color: whitesmoke;
    font-size: x-large;
    height: 8vh;
    align-items: center;
    padding-left: 5vw;
    padding-right: 3vw;
    position: sticky;
    top: 0;
    z-index: 2000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }

html{ scroll-behavior: smooth; }

/* Main navigation in header */
.main-nav{
        display: flex;
        gap: 0.75rem;
        margin-left: 1rem;
}
.main-nav a{
        color: inherit;
        text-decoration: none;
        padding: 0.45rem 0.6rem;
        border-radius: 6px;
        font-weight: 600;
}
.main-nav a:hover{ background: rgba(255,255,255,0.06); }

/* keep in-page targets visible under the sticky header */
#about, #projets, #competences{
    scroll-margin-top: 10vh; /* leaves space so section headings aren't hidden under header */
}


.totop{
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #1D546C;
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 2001;
}
.totop.show{
    opacity: 1;
    transform: translateY(0);
}
.totop:focus{ outline: 3px solid rgba(31,122,140,0.25); }


#pfp{
    display: flex;
    height: 40vh;
    border: 1px;
    border-radius: 1vh ;
}

main{
    display: flex;
    background-color: #1A3D64;
    color: #F4F4F4;
    font-size: xx-large;
    flex-direction: column;
    padding-top: 15vh;
    gap: 49vh;
}

#about{
    display: flex;
    flex-direction: row;
    width: 60vw;
    padding-left: 20%;
}

#projets > h1{
    display: flex;
    background-color: #0C2B4E;
    padding-left: 5vw;
    height: 10vh;
    align-items: center;
}


#aboutme{
    padding-left: 2vw;
    display: flex;
    flex-direction: column;
}

/* Login button in header */
.login-btn{
    margin-left: auto; /* push to right */
    background-color: #1D546C;
    color: #fff;
    text-decoration: none;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.12s ease, background-color 0.12s ease;
}
.login-btn:active{
    transform: translateY(1px);
}
.login-btn:hover{
    background-color: #176070;
}

/* Modal styles (simple) */
.modal{ 
    position: fixed; 
    inset:0; 
    display:none; 
    align-items:center; 
    justify-content:center; 
    z-index:1200 
}


/* Yes AI made this */
.modal[aria-hidden="false"]{ display:flex }
.modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.5) }
.modal-panel{ position:relative; background:#fff; color:#111; border-radius:8px; padding:1.25rem; width:92%; max-width:420px; z-index:2 }
.modal-panel label{ display:block; margin-top:.6rem }
.modal-panel input{ width:90%; padding:.5rem; margin-top:.25rem; border:1px solid #ccc; border-radius:6px }
.modal-actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem }
.btn-primary{ background:#1f7a8c; color:#fff; border:none; padding:.5rem .9rem; border-radius:6px }
.btn-secondary{ background:transparent; border:1px solid #ccc; padding:.45rem .8rem; border-radius:6px }

/* badge displayed after login */
.user-badge{
    margin-left: auto;
    display: inline-block;
    background-color: #1f7a8c;
    color: #fff;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
}


.aboutprojet{
    display: flex;
    flex-direction: column;
}

#projets{
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

.blockprojet{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    width: min(90%, 1000px);
    margin: 0 auto 1.6rem auto;
    padding: 1.5rem;
    background-color: #1D546C;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Competences section layout */
#competences{
    padding: 2.25rem 1rem;
    color: inherit; /* keep same text color */
}
#competences h1{
    text-align: center;
    font-size: 2.4rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.competences-grid{
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}
.col-title{ display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem; }
.col-title h3{ margin:0; font-size:1.15rem; }
.col-title svg{ width:24px; height:24px; flex:0 0 24px; }
.col-title svg rect, .col-title svg path, .col-title svg circle{ stroke-width:1.2; }
/* image-based icons in competences (user supplied) */
.col-title img.comp-icon, .col-title img[alt]{
    width:24px;
    height:24px;
    flex:0 0 24px;
    object-fit:contain;
}
.skills{ list-style: disc; padding-left: 1.1rem; margin:0; font-size: 1rem; line-height:1.45; }
.skills li{ margin-bottom: .6rem; }

@media screen and (max-width: 800px){
    .competences-grid{ grid-template-columns: 1fr; }
    .col-title{ justify-content: center; }
    #competences h1{ font-size: 1.85rem; }
}

#cookiepic{
    width: 12vw;
    border-radius: 50%;    
}

#gptpic{
    width: 12vw;
}



@media screen and (max-width: 1141px){
    header{
        font-size: large;
    }

    .login-btn{
        padding: 0.5rem 0.8rem;
    }

    main{
        gap: 25vh;
    }

    #about{
        display: flex;
        width: 100%;
        flex-direction: column;
        padding-left: 0%;
    }

    #ftgbapt{
        width: 60vw;
        padding-left: 20%;
    }

    #about > a{
        display: flex;
        justify-content: center;
    }

    #projets > h1{
        font-size: xx-large;
    }
}

@media screen and (max-width: 1000px){
    #gptpic{
        display: none;
    }
    #cookiepic{
        display: none;
    }
}

@media screen and (max-width: 520px){
    main{
        gap: 20vh;
    }

    header{
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: 1rem 4vw;
        gap: 0.6rem;
    }

    .main-nav{
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .main-nav a{ width: auto; display:inline-block; }

    /* Make login button take full width on very small screens */
    .login-btn{
        margin-left: 0;
        align-self: flex-end;
        width: 90%;
        text-align: center;
    }

    #ftgbapt{
        width: 100%;
        padding-left: 0%;
    }

    .blockprojet{
        width: 100%;
        padding-left: 0%;
    }
}