/* Import de la police Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');

body {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--color-01);
    color: var(--color-02);
}



/* Scrollbar personnalisée */
::-webkit-scrollbar {
    width: 0.5rem; /* 8px */
}

::-webkit-scrollbar-track {
    background: var(--color-01);
}

::-webkit-scrollbar-thumb {
    background: var(--color-02);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-03);
}

/* Hero section */
.hero-section {
    margin-top: 6.25rem; /* 100px */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12.5rem; /* 200px */
    padding: 6.25rem 1.25rem; /* 100px 20px */
}

.h3 {
    font-size: 1.5rem; /* 24px */
    margin-bottom: 1.875rem; /* 30px */
    margin-top: 1.875rem; /* 30px */
}

.h2 {
    font-size: 4.5rem; /* 48px */
    font-weight: 700;
}

.h1 {
    font-size: 6rem; /* 96px */
    font-weight: 700;
}

.h1-5 {
    font-size: 8rem; /* 80px */
    font-weight: 700;
}

.h4 {
    font-size: 3rem;
    font-weight: 700;
}

.p {
    font-size: 1.5rem; /* 20px */
}



#lastName {
    padding-left: 12.5rem; /* 200px */
}

#nickname {
    text-align: start;
}

#age {
    text-align: end;
}

/* Conteneur principal de la photo */
.infoPhoto {
    position: relative;
    /* On utilise une taille fluide basée sur la largeur de l'écran */
    width: clamp(250px, 30vw, 350px); 
    /* Aspect-ratio assure que le conteneur reste un carré parfait */
    aspect-ratio: 1 / 1; 
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Le cercle de couleur en fond */
.photo-id {
    background: var(--color-03);
    width: 80%; /* Ajuste ce % pour laisser plus ou moins de place au texte autour */
    height: 80%;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    overflow: hidden;
}

/* L'image de profil à l'intérieur */
.pp-link {
    width: 100%;
    height: 100%;
    background-image: url('../assets/pp-linkedin.webp');
    background-size: cover;
    background-position: center;
}

/* Le texte qui tourne (SVG) */
.circle-text-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Il prend toute la place du parent .infoPhoto */
    height: 100%;
    z-index: 2;
    pointer-events: none; /* Permet de cliquer à travers le texte si besoin */
}

.rotating-text {
    animation: rotateText 30s linear infinite;
    transform-origin: center;
}

@keyframes rotateText {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* jojo en quelques mots */
.about-section {
    margin: 3em 20%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 1.875rem; /* 30px */
    padding: 1.25rem; /* 50px 20px */
}

#mini-a-propos {
    margin-top: 0;
    margin-bottom: 0;
    text-align: end;
}



.skills-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6.25rem; /* 100px */
    padding: 1.25rem; /* 50px 20px */
}

/* --- BANDEAU ALTERNANCE DÉFILANT --- */
.banner-container {
    width: 100%;
    background-color: var(--color-03); /* Fond foncé */
    color: var(--color-02); /* Texte clair */
    overflow: hidden; /* Cache le texte qui dépasse de l'écran */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    padding: 20px 0;
    position: relative;
    z-index: 100; /* S'assure qu'il passe au-dessus du reste */
    margin-top: 7rem; /* Pousse le bandeau sous la barre de navigation sur PC */
    /* border-bottom: 2px solid var(--box-color); Optionnel : une petite bordure */
}

.banner-text {
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.25rem;
    
    /* C'est ici qu'on appelle l'animation */
    /* 20s = la vitesse. Si c'est trop rapide, mets 30s. Si c'est trop lent, mets 10s. */
    animation: scroll-banner 30s linear infinite;
}

/* Pause l'animation quand on passe la souris dessus (pratique pour lire !) */
.banner-container:hover .banner-text {
    animation-play-state: paused;
}

/* --- L'ANIMATION CSS --- */
@keyframes scroll-banner {
    0% {
        transform: translateX(0); /* Point de départ */
    }
    100% {
        transform: translateX(-50%); /* Se décale vers la gauche */
    }
}


/* --- SECTION PROJETS --- */

.projects-section {
    /* Donne de l'espace autour de la section */
    padding: 1rem 1.25rem;
    margin: 0 10%;
    margin-bottom: 10rem;
    display: flex;
    justify-content: center; /* Centre le bloc sur la page */
}

.projects-content {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.projects-content .h3 {
    margin-bottom: 0; /* Enlève la marge du bas pour coller au gros titre */
    font-weight: 700;
}

.projects-content .h1-5 {
    margin-bottom: 0; /* Enlève la marge du bas pour coller au gros titre */
    font-weight: 700;
    text-align: justify;
}

/* On s'assure que le lien n'a pas de style par défaut (pas souligné) */
.projects-content a {
    text-decoration: none;
    color: var(--color-02);
    transition: color 0.3s ease; /* Transition douce pour le hover */
}
.projects-content a:hover {
    color: var(--color-03); /* Change la couleur au survol */
}

/* L'image qui remplace le 'O' */
.letter-image {
    display: inline-block;
    margin: 0 0.1em; /* Un petit espace de chaque côté pour éviter que ça colle trop aux lettres */
    width: 0.70em;  /* Largeur relative à la taille du texte */
    height: 0.70em; /* Hauteur relative (pour faire un carré parfait) */
    
    /* Mets ici le chemin vers l'image que tu veux afficher ! */
    background-image: url('../assets/projets/accueil.gif'); 
    background-size: cover;
    background-position: center;
    
    /* Alignement magique pour que l'image repose sur la même ligne que les lettres */
    vertical-align: baseline;
    
    /* Petite astuce : on la descend d'un tout petit chouïa si la police a un léger décalage */
    /* transform: translateY(5%); Décommente et ajuste si l'image te parait trop haute */
}

#projet-lien {
    text-decoration: underline;
    text-decoration-color: var(--color-03);
    text-underline-offset: 4px;
    text-decoration-thickness: 4px;
}



/* --- RESPONSIVE TABLETTE & MOBILE --- */

@media (max-width: 1024px) {
    /* On réduit la taille globale des titres */
    .h1 { font-size: 4rem; }
    .h1-5 { font-size: 4.5rem; }
    .h4 { font-size: 2.2rem; }
    
    .hero-section {
        flex-direction: column-reverse; /* Photo au-dessus du nom sur tablette */
        gap: 3rem;
        padding: 3rem 1.25rem;
    }

    #lastName {
        padding-left: 0; /* On annule le décalage à droite */
        text-align: center;
    }
    
    .about-section {
        margin: 3rem 5%; /* On donne plus de place au texte */
    }
}

@media (max-width: 768px) {
    /* Mobile */
    .h1 { font-size: 3rem; }
    .h1-5 { font-size: 3.2rem; }
    .h4 { font-size: 1.8rem; }
    .p { font-size: 1.1rem; }

    .hero-section {
        margin-top: 2rem;
    }

    /* On centre les textes pour le mobile */
    .infoName {
        text-align: center;
    }

    #nickname, #age {
        text-align: center;
    }

    .projects-section {
        margin: 0 5%;
        margin-bottom: 5rem;
    }
}