@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Space+Grotesk:wght@400;700&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background-color: #f5f5f3;
}


header {
    margin-bottom: 50px;
    background-color: #f5f5f3;
    color: black;
    padding: 10px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}


    /*Le bouton "Switch" : Tu pourrais imaginer un bouton en haut de ta page qui permet de basculer le portfolio 
    entre un "Mode Design" (très visuel, coloré, formes organiques) et un "Mode Code" (mode sombre,
 police monospace type console, lignes de code en fond). C'est le genre de feature qui montre immédiatement tes compétences aux recruteurs en un seul clic ! */

#go-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    height: auto;
    width: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    padding: 10px 15px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

#go-top:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
}



h1 {
    margin: 10px 0;
    color: black;
    font-weight: bold;
    font-size: 400%;
    font-family: 'Space Grotesk', sans-serif;
}

h2 {
    margin: 10px 0;
    color: black;
    font-weight: bold;
    font-size: 200%;
    font-family: 'Space Grotesk', sans-serif;
}

h3, h5 {
    margin: 10px 0;
    color: black;
    font-family: 'Space Grotesk', sans-serif;
}

h4{
    padding: 20px;
    text-align: center;
    margin: 10px 0;
    color: black;
    font-weight: bold;
    font-size: 300%;
    font-family: 'Space Grotesk', sans-serif;
}

nav {
    margin: 20px 0;
    backdrop-filter: blur(10px);
}

nav a {
    color: #333;
    text-decoration: none;
    padding: 5px 15px;
}

nav img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
    filter: invert(1);
}

#linkedin-logo {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
    border-radius: 5px;
}
#linkedin-logo:hover {
    transform: scale(1.5);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}


nav img:hover {
    transform: scale(1.5);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}


section {
    width: 60%;
    margin: 0 auto;
    padding: 20px 0;
}

#container {
    margin: auto;
    margin-top: 200px;
    margin-bottom: 200px;
    align-items: center;
    height: 400px;
    padding: 40px;
    overflow: hidden;
    display: block;
    color: #1a1a1a;

}

#pics {
  float: right;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  shape-outside: circle(50%);
  margin: 0 0 20px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#pics:hover {
    transform: scale(1.05);
    /*transform: rotate(5deg);*/
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}





#projets {
    height: auto; 
}
.grille-projets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 100%;
}



.carte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid #eee;
    padding: 40px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.carte h3 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 10px;
}
.carte p {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
}

.carte:hover {
    transform: translateY(-5px);
    border: 1px solid #1a1a1a;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

#cv {
    text-align: center;
}

#cv p {
    font-size: 1.1rem;
    color: #333;
}
.btn-cv {
    display: inline-block;
    margin-left: 10px;
    padding: 8px 20px;
    border: 1px solid #1a1a1a;
    color: #1a1a1a;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}
.btn-cv:hover {
    background-color: #1a1a1a;
    color: #f5f5f3;
}

#contact {
    text-align: center;
}
.contact-info {
    display: flex;
    justify-content: center;
    columns: 3;
    gap: 40px;
    margin-top: 20px;

}
#contact a {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}
#contact a:hover {
    border-bottom: 1px solid #1a1a1a;

}
#contact img {
    position: relative;

    width: auto;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: #415d46 -24px 13px 0px ;

}


span {
 font-weight: bold;
}

footer {
    margin-top: 50px;
    text-align: center;
    padding: 10px 0;
    background-color: #f5f5f3;
    color: black;
    position: relative;
    bottom: 0;
    width: 100%;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.4);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: auto;
}

footer h5 {
    margin: 10px 0;
    font-weight: bold;
}

footer p {
    margin: 5px 0;
}
footer a {
    color: gray;
    text-decoration: none;
    padding: 5px 15px;
    transition: color 0.3s ease, transform 0.3s ease;
}

footer a:hover {
    color: #333;
    cursor: pointer;
}