@font-face {
    font-family: 'Bebas';
    src: url('/fonts/bebas/BebasNeue-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Bebasttf';
    src: url('/fonts/bebas/BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

body {
    background-color: #ffffff;
    color: #333;
    line-height: 1.6;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    background-color: #fff;
}

.logo {
    font-size: 35px;
    font-weight: bold;
    font-family: Bebas;
}

.logo a {
    font-size: 35px;
    font-weight: bold;
    font-family: 'Bebas', sans-serif;
    text-decoration: none;
    color: #333;
    display: inline-block;
    position: relative;
    transition: transform 0.3s ease, color 0.3s ease;
}

.logo a:hover {
    transform: translateY(-5px); /* Le logo bouge vers le haut de 5px */
    color: #333; /* La couleur reste inchangée, ajustez si nécessaire */
}

.logo a:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    left: 0;
    bottom: -5px; /* Positionner la ligne juste en dessous du logo */
    transition: transform 0.3s ease;
    transform: scaleX(0);
    transform-origin: right;
}

.logo a:hover:after {
    transform: scaleX(1); /* La ligne s'étend au survol */
    transform-origin: left;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav ul li a {
    font-family: 'Bebas', sans-serif;
    font-size: 25px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    display: inline-block;
    position: relative;
    transition: transform 0.3s ease, color 0.3s ease;
}

nav ul li a:hover {
    transform: translateY(-5px); /* Le texte bouge vers le haut de 5px */
    color: #333; /* Changez la couleur ici si vous le souhaitez */
}

nav ul li a:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #333;
    position: absolute;
    left: 0;
    bottom: -5px; /* Positionner la ligne juste en dessous du texte */
    transition: transform 0.3s ease;
    transform: scaleX(0);
    transform-origin: right;
}

nav ul li a:hover:after {
    transform: scaleX(1); /* La ligne s'étend au survol */
    transform-origin: left;
}

.hero {
    text-align: center;
    padding: 100px 20px;
    background-color: #fff;
}

.hero h1 {
    font-size: 60px;
    font-weight: 700;
    color: black;
    font-family: Bebas;
}

.hero p {
    margin-top: 20px;
    font-size: 18px;
}


/*------------------------------- PORTFOLIO --------------------------------------------- */


.portfolio {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 10px 50px;
    margin-top: 100px; /* Ajustez cette valeur selon vos besoins */
}

.portfolio-item {
    overflow: hidden;
}

.portfolio-item img {
    width: 100%;
    height: 842px;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    display: block;
    object-fit: cover;
}

.portfolio-item a {
    display: block;
    text-decoration: none;
}

.portfolio-item img:hover {
    transform: scale(1.05); /* Agrandir légèrement l'image */
    filter: brightness(0.8); /* Assombrir l'image pour un effet stylisé */
}

.portfolio-item {
    position: relative;
    overflow: hidden;
}

.category-label {
    position: absolute;
    bottom: 40%; /* Place la bande au milieu verticalement */
    left: 0;
    width: 100%;
    transform: translateY(10%);
    background-color: rgba(83, 83, 83, 0.137); /* Bande semi-transparente noire */
    color: #fff; /* Couleur du texte blanc */
    font-family: 'Bebas', sans-serif;
    font-size: 30px;
    text-align: center;
    padding: 70px 0;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.portfolio-item:hover .category-label {
    background-color: rgba(59, 59, 59, 0.671); /* Assombrir la bande au survol */
    transform: translateY(0%) scale(1.05); /* Agrandir légèrement la bande et la déplacer vers le haut */
}


.portfolio2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 20px 50px;
}

.portfolio2-item.full-width {
    grid-column: 1 / -1;
}

.portfolio2-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.portfolio2-item img:hover {
    transform: scale(1.05);
    filter: brightness(0.8);
}



/*------------------------------- SCROLLBAR --------------------------------------------- */

/* Appliquer le style à la barre de défilement pour les navigateurs Webkit (Chrome, Safari, etc.) */
::-webkit-scrollbar {
    width: 8px; /* Largeur de la barre de défilement */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Couleur de l'arrière-plan de la piste */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Couleur de la poignée (le thumb) */
    border-radius: 10px; /* Arrondi de la poignée */
    border: 2px solid #f1f1f1; /* Espacement autour de la poignée pour ajouter une marge */
}

/* Changer la couleur de la poignée lorsque la souris est dessus */
::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Couleur de la poignée lors du survol */
}


/*------------------------------- GALLERY --------------------------------------------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes de taille égale */
    gap: 10px; /* Espace entre les images */
    padding: 20px 50px;
    margin-top : 200px;
}

.gallery-item {
    overflow: hidden;
}

.gallery-item-large {
    grid-column: span 2; /* Occupe deux colonnes */
    grid-row: span 2; /* Occupe deux lignes */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    display: block;
}

.gallery-item-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item img:hover {
    transform: scale(1.05); /* Agrandit légèrement l'image au survol */
    filter: brightness(0.8); /* Assombrit l'image pour un effet stylisé */
}

/*-------------------------------CONTACT SECTION --------------------------------------------- */
.contact-section {
    max-width: 320px;
    margin: 0 auto; /* Centrer la section sur la page horizontalement */
    font-family: Arial, sans-serif; /* Remplacez par la police que vous préférez */
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre le contenu horizontalement */
    height: 200px;
    margin-top : 50px;
    height : 1000px;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligne les icônes à gauche */
    margin-bottom: 20px;
    width: 100%; /* S'assurer que chaque contact-item occupe toute la largeur du conteneur */
}

.contact-icon {
    width: 40px; /* Taille des icônes */
    height: 40px;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
}

.contact-item p {
    font-size: 18px;
    margin: 0;
    text-align: left; /* Alignement du texte à gauche pour qu'il s'aligne avec l'icône */
    flex-grow: 1; /* Permet au texte de prendre tout l'espace disponible */
}

.contact-item a {
    text-decoration: none;
    color: inherit; /* Garde la couleur du texte telle qu'elle est définie dans le p */
}

.contact-item a:hover {
    text-decoration: underline; /* Ajoute un soulignement au survol, si souhaité */
}

.image-container img {
    margin-bottom: 100px;
}

/*------------------------------- WORKS SECTION --------------------------------------------- */
.works-section {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    min-height: 100vh; /* La section prend toute la hauteur de la fenêtre */
    padding: 20px;
    box-sizing: border-box;
}

.image-container {
    text-align: center;
}

.image-container img {
    height: auto; /* Conserve les proportions de l'image */
    display: block;
}

/*------------------------------- TITLE SECTION --------------------------------------------- */


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px); /* Le texte commence légèrement décalé vers le haut */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Le texte se place à sa position normale */
    }
}

.animated-title {
    font-size: 60px;
    font-weight: bold;
    font-family: 'Bebas', sans-serif;
    color: #333;
    animation: fadeIn 2s ease-out; /* Animation d'apparition initiale */
    text-align: center; /* Centre le texte horizontalement */
    margin-top: 20px; /* Ajustez si nécessaire */
    transition: transform 1s ease-in-out, color 1s ease-in-out; /* Transition fluide de 1 seconde */
    cursor: pointer;

}

.animated-title:hover {
    transition-delay: 1s; /* Délai d'une seconde avant de déclencher la transition */
    transform: scale(1.1); /* Légère augmentation de la taille */
    color: #555; /* Change la couleur du texte */
}