@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grey+Qo&family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* body css */
body{
    font-family: 'Hanken Grotesk', sans-serif;
    background-color:#1f2235 !important;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--white-smoke)!important;
    scroll-behavior: smooth;
}

/* li */
li{
    list-style: none!important;
}

/* nav css */
.navbar{
    padding: 32px 0;
    position: absolute!important;
    top: 0;
    width: 100vw;
}

.font-playfair-display {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
  }

.font-grey-qo-regular {
    font-family: "Grey Qo", cursive;
    font-weight: 400;
    font-style: normal;
  }
  
:root{
    --primary: #3155e7;
    --primary-dark: #2045d6;
    --black : #13151F;
    --gray-1: #788190;
    --white : #ffffff;
    --white-smoke: whitesmoke;
    --body: #fefefe;
    --yellow: #ffc576;
}

.gold{
    color: var(--yellow)
}

.mini{
    font-size: 17px;
}
.mini-mini{
    font-size: 15px;
}

.btn-gold{
    background-color: #313552 !important;
    font-size: 12px;
    color: #ffc576;
    text-transform: uppercase;
    font-weight:500;
    border: 1.2px solid var(--yellow) !important;
    padding: 7px 30px;
    border-radius: 2px 2px 2px 2px;
}

.btn-gold:hover{
    background-color: #ffc576 !important;
    color: #313552;
}

/* ---------------------------
all section 
------------------------------ */

section{
    min-height: 100vh;
    padding: 100px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px !important;
}

/* color */

.yellow{
    color:var(--yellow)!important;
    font-size: 2rem !important;
    font-weight: bold !important;
}

/* link */
.divLink{
    line-height: 30px;
    padding: 15px 0;
    position: relative;
    font-weight: 600;
    color: var(--gray-1);
    text-transform: uppercase;
    background: none;
    font-size: .9rem;
    display: block;
    transition: color 0.3s ease;
    text-decoration: none;
}

.divLink::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color:var(--yellow);
    transition: width 0.3s ease;
}

.divLink:hover {
    color:var(--yellow); /* Changement de couleur du texte */
}

.divLink:hover::after {
    width: 100%;
}

/* section one background */

.section_one{
    background: url('/img/bg_section_one.png'); /* URL de l'image PNG */
    background-size:initial; /* Ajuste la taille de l'image pour couvrir l'élément */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
    background-position: left bottom; /* Centre l'image de fond */
}

/* text section */

.text_hello_section{
    color: var(--yellow);
    font-size: 2em;
    font-weight: 500;
}

.text_title_section{
    font-size: 100px;
    line-height: 1;
    font-weight: 600;
    margin: 8px 0 16px;
    max-width: 640px;
}

.text_job_section{
    font-size: 1.25em;
    font-weight: 500;
}

 /* section service */

#service{
    min-height: 40vh !important;
    background: #313552;
}

.border-gold{
    border: solid var(--yellow) 1px;
    transition: box-shadow 0.3s ease;
}

.border-gold .title{
    transition: color 0.3s ease;
}

.border-gold:hover{
    box-shadow: 0 0 0 1.3px var(--yellow);
}

/* Changement de couleur de l'enfant (p) au survol du parent */
.border-gold:hover .title {
    color: var(--yellow);
}

/* partie projet carousel */

.projet{
    background: #313552;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 0 0 rgba(255, 197, 118, .75);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: box-shadow .3s;

}

.projet:hover{
    box-shadow: 0 4px 0 0 rgba(255, 197, 118, .75);
}

.projet_img{
    border-radius: 8px;
    flex: none;
    height: auto;
    overflow: hidden;
}

.projet_img  img{
    display: block;
    opacity: 1;
    transition: .5s;
    will-change: transform;
    cursor: pointer;
}

.projet_img img:hover{
    opacity: .5;
    transform: scale(1.2)
}


/* partie réseaux social */

#social{
    min-height: 50vh !important;
    background: #313552;
}

#blockreseaux{
    border-radius: 10px;
    border: solid var(--yellow) 1px;
    transition: .5s;
}


#blockreseaux:hover{
    background: #ffc576;
}

#blockreseaux:hover .blocktitle{
    color:#313552 !important;
}

#blockreseaux:hover .blocktext{
    color:#313552 !important;
}


/* Contact Me  */

#contact{
    min-height: 50vh !important;
    
}


/* slick */

.slick-carousel .slick-slide {
  margin-right: 25px; /* espace entre les slides */
}

/* Optionnel : retirer l'espace après le dernier slide */
.slick-carousel .slick-track {
  display: flex !important;
}

.slick-slide{
    padding: 10px;
    box-sizing: border-box;
}