body {
    background-color:  #f8edf6 ;
    height: 2000px;
}

#masthead {
    display: flex;
    justify-content: space-between; /* logo à gauche, menu à droite */
    align-items: center;
    padding: 10px 20px;
}

/*css pour le logo header*/
#masthead img{
    height: 80px;
}

#masthead nav ul {
    list-style: none; /* ❌ Enlève les puces */
    display: flex;
    justify-content: space-between;
    gap: 20px;        /* 📏 espace entre les items */
    margin: 0;
    padding: 0;
}

#masthead nav ul li {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    color: #111;
}

#masthead a{
     text-decoration: none;
     color: #000;
     font-family: 'Merriweather', serif;
}

/*la premiere div du site avec la presentation*/
#site-header {
    display: flex;
    justify-content: space-between; /* espace entre le texte et l'image */
    align-items: center;            /* alignement vertical */
    padding: 20px;
    gap: 40px;                      /* espace entre les deux blocs */
    flex-wrap: wrap;               /* utile pour mobile */
}

/*ma présentation*/
.text-container {
    flex: 1;
    min-width: 250px;
}

/*l'image arrondi*/
.image-container img {
    max-width: 400px;
    height: auto;
    border-radius: 1000px; /* optionnel : coins arrondis */
}

/* la base du site (les info centré) */
.site-content{
   margin-left: 200px;
   margin-right: 200px;

}

#site-header h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 8px;
}

#site-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    
}


/* Sous-titre (étudiante...) */
#site-header h2 {
    font-family: 'Merriweather', serif;
    font-size: 24px;
    font-weight: 400;
    color: #333;
}

.competence-div h2{
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
}

.competence-div i {
    font-size: 30px;
    color: #ff3399;
    margin-bottom: 0px;
    margin-top: 50px;
}

.competence-div {
    text-align: center;
    border: #555;
}

.competence-div h6 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
    text-transform: uppercase;
}

.competence-div p{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #555;
    
}

/* pour le rebors en bas pour chauqe domaine*/
#comp-1 {
    border-bottom: 2px solid   #e6e6e6 ; /* Rose fuchsia */
    display: inline-block;
}

#comp-2 {
    border-bottom: 2px solid   #e6e6e6 ; /* Rose fuchsia */
    display: inline-block;
}

#comp-3 {
    border-bottom: 2px solid   #e6e6e6 ; /* Rose fuchsia */
    display: inline-block;
}


/* partie compétences */
.skills-div h2{
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
}

.skills-div p {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #555;
}

* { box-sizing: border-box; }

.container {
  width: 100%;
  background-color: white;
  border-radius: 20px;
  height: 20px;
  margin-bottom: 10px;
}

.skills {
  height: 100%;
  width: 0%;
  background-color: #ff3399;
  color: white;
  text-align: right;
  padding-right: 5px;
  line-height: 20px;
  font-size: 12px;
  font-family: 'Roboto', sans-serif;
  border-radius: 20px;
  overflow: hidden;
}

/* la div formation */
.formation-div h2{
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
}

.formt h6{
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
    text-transform: uppercase;
    margin-bottom: 4px;
    margin-top: 0px;
    
}

.formt p{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #555;
    margin-top: 0;
    margin-bottom: 40px;
}

.first {
    border-top: 10px solid   #ff3399 ; /* Rose fuchsia */
    display: inline-block;
    margin-bottom: 4px;
}
/* animation js */
[class*="reveal-"] {
    opacity: 0;
    transform: translateY(-30px);
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
    transition: 1s;
}

.reveal-2{
    transition-delay: .1s;
}
.reveal-3{
    transition-delay: .2s;
}
.reveal-4{
    transition-delay: .3s;
}

/*footer */
.site-footer {
  background-color: #fbf4fa; /* plus clair que le fond général */
  padding: 30px 20px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  color: #666;
  font-size: 14px;
  border-top: 1px solid #e0d6e3;
}
.site-footer .social-icons {
  margin-top: 15px;
  margin-bottom: 15px;
}

.site-footer .social-icons a {
  margin: 0 10px;
  font-size: 22px;
  color: #333;
  transition: color 0.3s ease;
}

.site-footer .social-icons a:hover {
  color: #ff3399;
}

.politique{
    text-decoration: none;
    color: #555;
}
.politique:hover{
    color: #ff3399;
}
#icons {
    display: none; /* par défaut on cache sur desktop */
}

/*___________________________________________________________________________________________________*/
/* pour le css lorsque le site raptéssis*/
@media (max-width: 668px) {
    #site-header {
        flex-direction: column-reverse; /* image en haut, texte en bas */
        text-align: center;
    }

    .image-container img {
        max-width: 100%;
    }

    .site-content {
        margin-left: 0;
        margin-right: 0;
    }
    
    #icons {
        display: block;
        font-size: 28px;
        cursor: pointer;
        z-index: 10001;
        position: relative;
    }
    #icons:before{
        content: "\2630";
    }

    nav {
        position: fixed;
        top: 0; /* juste en dessous du header/logo */
        left: -150%;
        width: 100%;
        z-index: 9999; /* au-dessus de toutes les images */
    }
    
    nav ul {
        display: flex;
        flex-direction: column;
        background: #ff3399;
        list-style: none;
        margin: 0;
        padding: 120px 0 0 0; /* laisse 120px pour le logo */
        text-align: center;
        transition: 0.3s;
    }

    nav li {
        padding: 3px 0;
    }

    nav.active + #icons:before,
        #icons.active:before {
        content: "\2715"; /* ✕ croix */
    }
    nav.active {
        left: 0;
    }

    
}