/*
Couleurs foncé : #15173D
Couleur violet : #982598
Couleur rose : #E491C9
Couleur clair : #F1E9E9
Police : Poppins Regular / DM Sans
*/

body{font-family: "Poppins", sans-serif; color:#15173D; position: relative;}
h1,h2,h3,h4,h5,h6{font-family: "DM Sans", sans-serif;}
h4{color: #982598;}
a{color:#E491C9}


.container-fluid{padding: 0;}

/*HEADER*/
header img{width: 50%;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);}
header{background: #15173D;position: fixed;width: 100%;z-index:10;top:0;

}
header.row {
  --bs-gutter-x: 0;
}

.nav-pills .nav-link.active, 
.nav-pills .show>.nav-link{background: #E491C9; color:#15173D;}
.nav-link{color: #F1E9E9;}
.nav-link:hover{background:#E491C9; color:#15173D;}


/**CREATION D'UNE CLASS FLEX POUR POSITIONNER LES ICONES*/
.flex{display:flex;flex-direction: column;align-items: center;}

/**PRESENTATION*/
#presentation{background: url(../images/improve-digit.jpg) no-repeat 0 0 scroll #000;
    width: 100%;;color:#f1f1f1; background-size: cover;
    height:100%;position: relative;margin-top: 6.2em;}

#presentation span{color: #982598;}

#presentation h1, #presentation h2, .liens{position: relative;z-index:1 ;}

#presentation .btn-primary {
  display: inline-block;
  margin-top: 0.9em;
  margin-bottom: 2em;
  padding: 14px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, #982598, #E491C9);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#presentation .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(152, 37, 152, 0.35);
}

#presentation h1 {
    min-height: 60px;
    line-height: 1.2;
    margin-top: 30px;
}

/*OVERLAY*/
.overlay::before{
    content:"";
    width: 100%;
    height: 100%;
    background: url(../images/noise.png) repeat 0 0 scroll rgba(0,0,0,0.5);
    position: absolute; top:0;
}

.overlay2::before{
    background:url('../images/noise2.png');
}

/*A PROPOS*/
.about {
  padding: 80px 20px;
  background: #F1E9E9;
}

.about-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
}
.about-photo {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  padding: 6px;
  flex-shrink: 0;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
  background: #fff;
}

.about-content h2 {
  color: #15173D;
  margin-bottom: 16px;
}

.about-content p {
  color: #15173D;
  font-size: 1.05rem;
  margin-bottom: 20px;
}

.about-content ul {
  list-style: none;
  padding: 0;
}

.about-content li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  color: #15173D;
}

.about-content li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #982598;
  font-weight: bold;
}


.icon-titre{background-color: #15173D;width: 4em; height: 4em;
transform:rotate(45deg);display: flex;align-items: center;
justify-content: center;margin: 2em 0;}
.icon-titre i{color:#F1E9E9; transform: rotate(-45deg);
    font-size: 2.3em;}


/*PORTFOLIO*/
#portfolio .col-md-4{
        width: 31.3333333%;
    }
#portfolio img{width: 100%;height: 100%;object-fit: cover;
    transition: transform 0.8s ease; transform-origin: center;}
#portfolio figure{position:relative;padding: 0;
    margin-right: 1em; width: 100%;}
#portfolio figcaption{
    position: absolute;top: 0;display: flex;color:#F1E9E9;
    flex-direction: column;justify-content: center;
    align-items: center;width: 100%;height: 100%;
    background: url(../images/noise1.png) repeat rgba(0,0,0,0.5);
    opacity: 0;transition: all 2s; text-align: center; padding: 1.5rem;
}
#portfolio a:hover img{
    transform:scale(1.2) rotate(3deg);
}
#portfolio a:hover figcaption{opacity: 1;transform:scale(1);}
#portfolio .hover{
    width: 100%;overflow: hidden; height: 250px;
}
#portfolio figcaption h5{font-size: 2em;margin: 0.3em auto;
    max-width: 90%;}
#portfolio figcaption p{font-size: 1.5em;margin: 0.3em auto;
    max-width: 90%;}

/*COMPETENCES*/
.progress{width: 90%;height: 35px;margin: 0.5em;background-color: #15173D;
    position: relative;}
.barre{
    height: 35px;background-color: #E491C9;width: 60%;
    display: flex;justify-content: center;align-items: center;
    animation: barre-animee 5s 1;
}
.barre::after{
    content:"";border-left: 15px solid #E491C9;
    border-bottom: 15px solid transparent;
    border-top : 20px solid transparent;
    position: absolute;top:0;left:60%;
    animation:triangle 5s 1;
}

.barre2::after{animation:triangle2 5s 1;left: 70%;}

.barre3::after{animation:triangle3 5s 1;left: 80%;}

.barre4::after{animation:triangle4 5s 1;left: 90%;}

.barre5::after{animation:triangle5 5s 1;left: 95%;}

.barre6::after{animation:triangle6 5s 1;left: 95%;}

.barre2{width: 70%;animation: barre-animee2 5s 1;}
.barre3{width: 80%;animation: barre-animee3 5s 1;}
.barre4{width: 90%;animation: barre-animee4 5s 1;}
.barre5{width: 95%;animation: barre-animee5 5s 1;}
.barre6{width: 95%;animation: barre-animee6 5s 1;}


.texte{color: #f1f1f1;opacity: 1;animation: barre-texte 5s 1;}

@keyframes barre-animee{
    from{width: 0%;} to{width: 60%;}
}

@keyframes barre-animee2{
    from{width: 0%;} to{width: 70%;}
}

@keyframes barre-animee3{
    from{width: 0%;} to{width: 80%;}
}

@keyframes barre-animee4{
    from{width: 0%;} to{width: 90%;}
}

@keyframes barre-animee5{
    from{width: 0%;} to{width: 95%;}
}

@keyframes barre-animee6{
    from{width: 0%;} to{width: 95%;}
}

@keyframes barre-texte{
    0%{opacity:0}
    50%{opacity: 0.5;}
    100%{opacity: 1;}
}

@keyframes triangle{
    from{left: 0%;}
    to{left: 60%}
}

@keyframes triangle2{
    from{left: 0%;}
    to{left: 70%}
}

@keyframes triangle3{
    from{left: 0%;}
    to{left: 80%}
}

@keyframes triangle4{
    from{left: 0%;}
    to{left: 90%}
}

@keyframes triangle5{
    from{left: 0%;}
    to{left: 95%}
}

@keyframes triangle6{
    from{left: 0%;}
    to{left: 95%}
}

/*COMPTEUR*/
#compteur{background: url(../images/pixel.png) no-repeat fixed 0 0;
background-size: cover;position: relative;padding: 2em 0;}

.icon-compteur{background: none; border: 2px solid #f1f1f1;}
#compteur h4{font-size: 2.5em; color: #E491C9;margin: 0;
position: relative;}
#compteur h5{color: #F1E9E9; text-transform: uppercase;
    position: relative;}


/*MAPS*/
.bandeau{
    background-color: #15173D;text-align: center;
}
.bandeau h6{color: #F1E9E9;font-size: 1.5em;padding: 1.5em;
text-transform: uppercase;}
#map iframe{width: 100%;margin-top:-0.5em;}

/*CONTACT*/
form{width: 75%;}
input.form-control{margin: 1em 0;}
#contact .btn-primary {margin-top: 0.5em;
    --bs-btn-border-color: #F1E9E9;
    --bs-btn-hover-border-color: #F1E9E9;
    display: inline-block;
    padding: 14px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #982598, #E491C9);
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;}

/*FOOTER*/
footer{background-color: #15173D;color: #F1E9E9;
    flex-direction: column;align-items: center;border-top: 5px solid #F1E9E9;}

.etiquette{background-color: #982598;color:#F1E9E9;width: 10em;
padding: 1em; margin-bottom: 2.5em; border-radius: 3%; margin-top: -0.3em;
text-align: center;}

.social{margin: -2em 0 1.5em;}

.social span{width: 2.5em; height: 2.5em; margin:1em;
background-color: #982598;transform: rotate(45deg);
display: flex;justify-content: center;align-items: center;}

.social i{color:#fff;transform: rotate(-45deg);}

.social span a{transform: rotate(-45deg);}

.up{position:fixed;bottom:0;right:0;z-index:10;justify-content:flex-end ;}

.up i{font-size: 3em;}

.footer-links {
    margin-bottom: 30px;
}

.footer-links a {
    color: #f1f1f1;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #d36ad6;
}

.copyright {
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    margin-bottom: 20px;
}

/*POLITIQUE DE CONFIDENTIALITE*/
.politique-confidentialite {
    padding-top: 120px;
}