/* -------------------- */
/* RESET */
/* -------------------- */

*{
box-sizing:border-box;
margin:0;
padding:0;
text-decoration: none;
}

body{
background:#fef6f4;
font-family:'Inter',sans-serif;
color:#1c1c1c;
width:100%;
max-width:1400px;
margin:auto;
}

/* -------------------- */
/* HEADER */
/* -------------------- */

.header{
display:flex;
justify-content:space-between;
align-items:center;

padding:20px 4vw;
border-bottom:2px solid #1c1c1c;
}

.logonom{
display:flex;
align-items:center;
gap:20px;
}

.logo{
width:55px;
}

.logo img{
width:100%;
}

h1{
font-family:'Fraunces',serif;
font-weight:700;
font-size:clamp(20px,2.5vw,30px);
}


/* -------------------- */
/* NAVIGATION */
/* -------------------- */

/* .nav{
display:flex;
align-items:center;
position:relative;
}

.menu{
display:flex;
gap:40px;
}

.menu a{
text-decoration:none;
color:#1c1c1c;
font-weight:400;
} */

.mail{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.mail img{
    width: 2em;
}



/* -------------------- */
/* BURGER */
/* -------------------- */

/* .burger{
display:none;
flex-direction:column;
cursor:pointer;
gap:6px;
}

.burger span{
width:25px;
height:2px;
background:black;
display:block;
} */

/* -------------------- */
/* MAIN LAYOUT */
/* -------------------- */

.main{
display:flex;
gap:4vw;
padding:2vw 5vh;
}

.left,
.right{
flex:1;
min-width:0;
}

.divider{
margin:0 30px;
}

/* -------------------- */
/* TITRES */
/* -------------------- */

.section-title,
.hero h2,
.skills h3{
font-family:'Fraunces',serif;
}

.section-title{
font-size:20px;
margin-bottom:10px;
margin-left: 1rem;
}

.hero h2{
font-size:clamp(24px,3vw,32px);
margin-bottom:20px;
}

/* -------------------- */
/* INTRO */
/* -------------------- */

.intro{
display:flex;
gap:3vw;
margin-bottom:50px;
width:100%;
font-size:0.8rem;
line-height:1.6;
}

.intro img{
width:auto;
height:12rem;
  justify-content: center;
}

/* -------------------- */
/* TRAIT HORIZONTAL */
/* -------------------- */

.horizontal{
width:100%;
border:1px solid black;
margin-bottom:40px;
}

/* -------------------- */
/* SKILLS */
/* -------------------- */

.skills ul{
margin-top:20px;
padding-left:20px;
}

.skills li{
margin-bottom:12px;
}

/* -------------------- */
/* CAROUSEL */
/* -------------------- */

.containerprojects{
position:relative;
width:100%;
}

.carousel{
/* padding:2rem; */
margin-top: 2rem;
height:60vh;
overflow-y:auto;
}

.carousel::-webkit-scrollbar{
display:none;
}

/* -------------------- */
/* PROJECT */
/* -------------------- */

.containerprojects{
position:relative;
}

.project{
display:flex;
gap:30px;
margin-bottom:20px;
align-items:flex-start;
}

.imgproject{
width:60%;
max-width:260px;
}

.project img{
width:100%;
height:auto;
}

.project p{
font-size:14px;
line-height:1.4;
}

/* -------------------- */
/* SCROLL INDICATOR */
/* -------------------- */

.scroll-indicator{
position:absolute;
bottom:0;
width:100%;
height:60px;

display:flex;
justify-content:center;
align-items:center;

background:#fef6f4;
opacity: 0.7;
transition:opacity 0.3s ease;
}

.scroll-indicator.hidden{
opacity:0;
pointer-events:none;
}

.arrow{
width:25px;
height:25px;

border-left:3px solid black;
border-bottom:3px solid black;

transform:rotate(-45deg);
}


.footermail{
    display: flex;
    align-items: center;
    justify-content: center;
}



/* -------------------- */
/* TABLETTE */
/* -------------------- */

@media (max-width:1000px){

.main{
    display: flex;
flex-direction: column;
margin: 3em;
}

.divider{
display:none;
}
.horizontal {
    display: none;
}

.left{
order:2;
width: 100%;
}

.right{
order:1;
display:flex;
flex-direction:row;
gap:5em;
}

.herointro{
display: flex;
flex-direction: column;
width: 80%;
}



.skills{
    margin-top: 5rem ;
    width: 40%;
}

.scroll-indicator {
    display: none;
}

/* .carousel{
height:400px;
} */
.containerprojects{
    width: 100%;
    height: 100%;
}

}

/* -------------------- */
/* MOBILE */
/* -------------------- */

@media (max-width:700px){

.main{
flex-direction:column;
margin:1em;
}
.mail img{
 width: 2.5em;
}

.divider{
display:none;
}

.horizontal{
display:none;
}

.left{
order:2;
width:100%;
}

.right{
order:1;
display:flex;
flex-direction:column;
width:100%;
gap: 0;
}

.herointro{
width:100%;
margin-bottom: 0px;
  }
  
  .intro{
  display:flex;
    flex-direction:column;
  }
  
 .intro img{
height: auto;
width: 80%;
   justify-content:center;
}
  
.skills{
    margin-top: 0px;
    width: 100%;
}

.containerprojects{
width:100%;
height:auto;
}
  .project{
  display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5em;
  }
  .imgproject {
  width: 100%;
    height: auto;
  }
  
  .nomprojet p{
    margin-left: 1em;
  font-size: 0.8em;
    margin-left: 0.5em
  }

}