:root {
  --color-primary:   #161616;  /* Couleur dominante, souvent utilisée pour les fonds ou le texte fort */
  --color-secondary: #A3A3A3;  /* Couleur secondaire, parfaite pour les éléments de soutien */
  --color-accent:    #FCFCFC;  /* Couleur d’accent ou de contraste */
}

    html {
        scroll-behavior: smooth;
    }

header {
        transition: opacity 1.8s ease-out 2s, transform 1.8s ease-out 2s;

}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: inherit;
    background-color: var(--color-accent);
    display: flex;
    
    width: 100vw;
    overflow-x: hidden;
}

    .fade-in {
        opacity: 0;
        transform: translateY(-100px);
        /* Only set initial state, no animation or transition here */
    }

    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 1.8s ease-out, transform 1.8s ease-out;
    }


 .fade-down {
        opacity: 0;
        transform: translateY(100px);
        /* Only set initial state, no animation or transition here */
    }


    .fade-down.visible {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 1.8s ease 2.8s, transform 1.8s ease 2.8s;
    }


    .fade-in-late {
        opacity: 0;
        transform: translateY(-100px);
        /* Only set initial state, no animation or transition here */
    }

    .fade-in-late.visible {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 1.8s ease-out 2.8s, transform 1.8s ease-out 2.8s;
    }

      .fade-in-about {
        opacity: 0;
        transform: translate(12rem,200rem);
        /* Only set initial state, no animation or transition here */
    }

    .fade-in-about.visible {
        opacity: 1;
        transform: translate(12rem,-8rem);
        transition: opacity 1s ease-out 2.8s, transform 1.8s ease-out 2.8s;
    }  


.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    will-change: opacity, transform;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s ease-out 3s, transform 1.2s ease-out 3s;
}



/* ===== HERO NEW DESIGN ===== */





.hero svg {
    position: relative;
    display: block;
    width: 110%;
    height: auto;
    z-index: -100;
}

.hero span {
    width: 100%;
}

.hero-svg-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
}
.hero-svg-bg svg {
    width: 100%;
    height: auto;
}




.hero-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100vh;
    padding:  5vw 5vw 0 5vw;
    position: relative;
    z-index: 2;
}

.hero-up {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    margin-bottom: 12rem;

}

.hero-title {
    line-height: 0.8;
    color: var(--color-primary);
        z-index: 3;

}
.title-graphic {
    font-family: "Nyght Serif", serif; /* Exemple d'une typo élégante */
        font-style: italic;
    font-size: 12rem;
    font-weight: 200;
        letter-spacing: -0.4rem;

}

.title-designer {
    font-family: "Inter", sans-serif; /* Exemple d'une typo moderne */
    font-style: italic;
    font-size: 12rem;
    font-weight: 400;
    letter-spacing: -0.6rem;

}

.hero-subtext {
    max-width: 480px;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--color-primary);
    line-height: 1.5;
    z-index: 3;
}

.hero-down {
    display: flex;
    flex-direction: row;
justify-content: space-between;    
gap: 1rem;
    width: 100%;
}


.hero-left {
    display: flex;
    flex-direction: row;
justify-content: start;
align-items: flex-end;
    gap: 1rem;
    width: 100%;
}

.hero-right {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: flex-end;
    gap: 1rem;
    width: 100%;
}

.hero-about {
    transform: translate(12rem,-8rem);
    position: relative;
    z-index: 1;
    display: inline; /* reste horizontal */
    font-size: 12rem;
    font-style: italic;
    font-weight: 400;
    line-height: 0.8;
    letter-spacing: -0.6rem;
    color: var(--color-primary);
    white-space: pre-wrap; /* pour gérer correctement les retours à la ligne */
}



.hero-img {
    position: relative;
    width: 14rem;
    height: 16rem;
    object-fit: cover;
    position: relative;
    z-index: 2; /* on top of hero-about */
}

.hero-background {
    width: 100%;
    height: 100vh;
    position: relative;
    padding: 2rem 2rem 0 2rem;
      overflow: hidden; /* cache le débordement de l'image */

}

.hero-background img {
width: 100%;
    height: auto;

    
}









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

  width: 100vw;
  height: 100%;
}


.hero {
    height: fit-content;
    z-index: 1;
    position: relative;
}


.home .img2 {
    transform: translateX(2vw);
      z-index: 2;
      width: 18vw;
      height: 24vw;
      overflow: hidden;
}

.container-intro {
    display: flex;
    flex-direction: row;
    justify-content: end;
    width: 90%;

    margin-bottom: 24px;
}

.intro {
    width: 40%;
}

.home .img2 img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

p {
	font-family: "Inter", serif;
	font-size: 16px;
	font-optical-sizing: auto;
	font-weight: 200;
	font-style: normal;
    color: var(--color-primary);
}
  



h3 {
    font-size: 24px;

}

ul {
 color: var(--color-primary);
 display: flex;
 flex-direction: column;
gap: 6px;
}


li {
     color: var(--color-secondary);
     font-weight: 200;
}



.about {

width: 100vw ;
overflow: hidden;
padding: 6rem;
  box-sizing: border-box;

}


.about-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: auto;
    height: fit-content;
    overflow: hidden;
    margin: 0px 13px;
    
}

.about-experiences-competences {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 40px !important;
    width: 100vw;
    margin-top: 6rem;
}
.about-container img{
    width: 100%;
    height: 30%;
    object-fit: cover;
    overflow: hidden;
}

.about-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 6vw;


}

.section-bio {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    
}

.bio-text {
    text-align: justify;

}

.section-experiences {
        width: 100%;
         display: flex;
    flex-direction: column;
    gap: 4rem;
    
}

.experiences-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
        padding-left: 6vw;

}

.experience-item {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about-collumn {
    display: flex;
    flex-direction: column;
    gap: 8rem;
}

.section-skills-software {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 4rem;
}

.skills-list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 4rem;
    padding-left: 4vw;
}

.skills-list li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style-type : none;
    text-align: center;
    align-items: center;
    gap: 6px;
}



.sphere {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--color-accent);
    border-radius: 128px;
    width: 96px;
    height: 96px;
    align-items: center;
}

#ac-1 {
    width: 50%;
      flex: 1; /* chaque section prend la même largeur, optionnel */
}

#ac-2 {
    width: 50%;
      flex: 1; /* chaque section prend la même largeur, optionnel */

}

.experience-infos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
}

.experience-title {
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: 12px;
}



.section-competences {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    width: 100%;
}

.section-title {
    text-align: center;
}

.competences-list {
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end; /* Pour aligner les icônes sur la même ligne de base */
    gap: 2rem;
    padding: 0rem 6rem 0rem 6rem;
    text-align: center;
}


.competence-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.competence-item svg {
   scale: 1.5;
}

.competence-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-secondary);
}



.about-comp {
    width: 100%;
    display: flex;
    justify-content: center; /* centre horizontalement le contenu */
    padding-bottom: 10rem ; /* un peu d'espace en haut et en bas */
}

.section-pro-skills {
    text-align: center; /* centre le texte et les éléments à l'intérieur */
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}



.skills-category {
    margin-bottom: 1rem;
}

.skills-category h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.skills-category p {
    font-size: 1rem;
    line-height: 1.6;
}






/* Section About - Texte en #141414 */
.about-container,
.about-container h1,
.about-container h2,
.about-container h3,
.about-container h4,
.about-container h5,
.about-container h6,
.about-container p,
.about-container a,
.about-container span,
.about-container li {
    color: var(--color-primary) !important;
}

.contact-overlay .container,
.contact-overlay .header-contact,
.contact-overlay .hero,
.contact-overlay .form-section,
.contact-overlay .form-field,
.contact-overlay .form-right,
.contact-overlay .footer {
    width: 100%;
    max-width: none;
}

.section-pro-skills {
    background: rgba(200, 200, 200, 0.2); /* gris transparent léger */
    border-radius: 32px; /* arrondi cohérent avec le style global */
    padding: 20px; /* espace intérieur réduit */
    backdrop-filter: blur(10px); /* effet de flou léger pour le fond */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* ombre subtile */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 3px 16px; /* marges latérales uniquement */
}

.section-competences {
    background: rgba(200, 200, 200, 0.2); /* gris transparent léger */
    border-radius: 32px; /* arrondi cohérent avec le style global */
    padding: 20px; /* espace intérieur réduit */
    backdrop-filter: blur(10px); /* effet de flou léger pour le fond */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* ombre subtile */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-experiences,
.section-skills-software {
        background: rgba(200, 200, 200, 0.2); /* gris transparent léger */
    border-radius: 32px; /* arrondi cohérent avec le style global */
    padding: 20px; /* espace intérieur réduit */
    backdrop-filter: blur(10px); /* effet de flou léger pour le fond */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* ombre subtile */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 3px; /* marges latérales uniquement */
}

/* Bloc spécifique pour .section-pro-skills */
.section-pro-skills {
    width: 100%;
    box-sizing: border-box; /* pour inclure le padding dans la largeur totale */
}








/* ================== RESPONSIVE (pour les écrans plus petits) ================== */
@media (max-width: 768px) {
    .competences-list {
        flex-wrap: wrap; /* Les éléments passent à la ligne sur mobile */
        justify-content: center;
        gap: 1.5rem;
    }

    .competence-item img {
        width: 50px;
        height: 50px;
    }
}




.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 0 12px 24px 12px;

}

.footer-info {
    font-size: 0.8rem;
    color: var(--color-secondary);
    font-size: 0.8rem;
    font-weight: 400;
}

.footer-info a{
    transition: color 0.3s ease;

}

.footer-info a:hover {
    color: var(--color-primary);
}

.rs {
    display: flex;
    flex-direction: row;
    gap: 64px;
    padding-bottom: 8px;
}

.footer-center {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
    gap: 32px;
}








/* =============== HERO SVG ANIMATION (works3 style) =============== */


@keyframes svgFadeColor {
    from { fill: #161616; } /* noir profond */
    to { fill: #16161608; }   /* gris clair */
}
.fade-in.visible .hero-svg path {
    animation: svgFadeColor 1.8s ease forwards 1.8s;
}






/* ================== MOBILE RESPONSIVE ================== */
@media (max-width: 768px) {
    .about {
        padding: 3rem 2rem;
    }

    .about-container,
    .about-row,
    .about-collumn {
        flex-direction: column;
        gap: 2rem;
        width: 100%;
    }

    #ac-1,
    #ac-2 {
        width: 100%;
    }

    .section-experiences,
    .section-skills-software,
    .section-pro-skills,
    .section-competences {
        width: 100%;
        padding: 16px;
        margin: 0;
        border-radius: 16px;
        gap: 2rem;
    }

    .experiences-list,
    .skills-list,
    .competences-list {
        flex-direction: column;
        gap: 1.5rem;
        padding-left: 0;
        align-items: flex-start;
    }

    .experience-item,
    .competence-item,
    .skills-list li {
        width: 100%;
        text-align: left;
    }

    .sphere {
        width: 64px;
        height: 64px;
    }

    .skills-list li span,
    .competence-label {
        font-size: 0.8rem;
    }

    .skills-category h3 {
        font-size: 1rem;
    }

    .skills-category p {
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .rs {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .hero-content {
        flex-direction: column;
        align-items: center;
        height: auto;
        padding: 2rem;
    }

    .hero-up,
    .hero-down {
        width: 100%;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .hero-title {
        font-size: 4rem;
        text-align: center;
    }

    .hero-subtext {
        text-align: center;
        font-size: 0.9rem;
    }

    .hero-img {
        width: 10rem;
        height: 12rem;
    }
}