/*
Theme Name: Mon Portfolio
Theme URI: http://votresite.com
Author: Votre Nom
Author URI: http://votresite.com
Description: Un thème WordPress personnalisé pour mon portfolio.
Version: 1.0
*/

/* Fond global du site */
body {
    background-color: #00021C; /* Couleur de fond */
    color: #ffffff; /* Couleur par défaut du texte (si nécessaire) */
    margin: 0; /* Supprime les marges par défaut */
    padding: 0; /* Supprime les paddings par défaut */
    box-sizing: border-box; /* S'assure que les paddings/marges sont inclus dans la largeur */
}

/* Header fixe et pleine largeur */
.site-header {
    background-color: #0C0029; /* Fond du header */
    padding: 10px 20px;
    color: #ffffff; /* Couleur du texte */
    position: fixed; /* Fixe le header en haut */
    top: 0; /* Colle le header en haut */
    left: 0; /* Colle le header sur le côté gauche */
    width: 100%; /* Occupe toute la largeur de l'écran */
    z-index: 1000; /* Assure qu'il reste au-dessus des autres éléments */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* (Optionnel) Ajoute une ombre pour le style */
}

/* Ajuste le container pour aligner le contenu */
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Largeur maximale du contenu */
    margin: 0 auto;
    padding: 0 20px; /* Espacement interne des côtés */
}

/* Logo */
.logo img {
    display: block;
    max-height: 50px; /* Ajustez la hauteur si nécessaire */
    width: auto; /* Garde la proportion du SVG */
}




/* Menu Desktop */
.main-menu .menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Flexbox pour l'alignement horizontal */
    gap: 40px; /* Augmentez cette valeur pour plus d'espace */
    justify-content: flex-end; /* Aligne le menu à droite */
}

.main-menu .menu-items li {
    margin-right: 30px; /* Ajoute de l'espace après chaque élément */
}

/* Supprime l'espace après le dernier élément */
.main-menu .menu-items li:last-child {
    margin-right: 0;
}

/* Éléments du menu */
.main-menu .menu-items li {
    display: inline-block; /* Affiche chaque élément sur une seule ligne */
}

/* Liens du menu */
.main-menu .menu-items a {
    text-decoration: none; /* Supprime le soulignement */
    color: #ffffff; /* Couleur des liens */
    font-weight: bold;
    font-family: 'Righteous', sans-serif; /* Utilise la police Righteous */
    font-size: 16px;
    transition: color 0.3s ease; /* Animation au survol */
}

/* Hover sur les liens */
.main-menu .menu-items a:hover {
    color: #F5A623; /* Change la couleur au survol */
}

/* Hamburger Menu Styles */
.hamburger-menu {
    display: none; /* Cacher par défaut sur desktop */
}

.hamburger-menu button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hamburger-menu button span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

/* Menu mobile */
.main-menu {
    transition: all 0.3s ease;
}

.main-menu.menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 40px;
}

.main-menu.menu-open {
    display: block;
    position: absolute;
    top: 100%; /* Affiche sous le header */
    left: 0;
    background-color: #0C0029;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    justify-content: center; /* Centre verticalement */
    align-items: center; /* Centre horizontalement */
}

/* Responsive styles */
@media (max-width: 768px) {
    .hamburger-menu {
        display: flex; /* Affiche le menu hamburger sur mobile */
    }

    .main-menu {
        display: none; /* Cacher le menu par défaut */
        flex-direction: column;
    }

    .main-menu.menu-open {
        display: flex; /* Afficher le menu quand il est ouvert */
    }

    .main-menu .menu-items {
        flex-direction: column; /* Les éléments du menu s'empilent */
        gap: 50px; /* Ajout d'espace entre les liens */
    }
}

/* Reset global */
body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Footer */
.site-footer {
    background-color: #0C0029; /* Fond du footer */
    color: #ffffff; /* Couleur du texte */
    padding: 20px 40px; /* Ajoute un espacement de 40px sur les côtés et 20px en haut/bas */
    font-family: 'Righteous', sans-serif; /* Applique la police Righteous */
    width: 100%; /* Assure la largeur complète */
    box-sizing: border-box; /* Inclut les marges/paddings dans la largeur */
}

/* Container principal du footer */
.site-footer .container {
    display: flex;
    justify-content: space-between; /* Logo à gauche, menu à droite */
    align-items: center;
    width: 100%; /* Prend toute la largeur */
    padding: 0; /* Supprime les paddings internes du container */
}

/* Logo */
.footer-logo {
    text-align: left; /* Aligne le logo à gauche */
    margin-left: 0; /* Supprime tout espace externe */
}

.footer-logo img {
    max-height: 40px; /* Taille du logo */
    width: auto;
    display: block;
    margin: 0; /* Supprime tout espace autour du logo */
}

/* Menu du footer */
.footer-menu {
    text-align: right; /* Aligne le menu à droite */
    margin-right: 0; /* Supprime tout espace externe */
}

.footer-menu .footer-menu-items {
    list-style: none; /* Supprime les puces */
    padding: 0;
    margin: 0;
    display: flex; /* Aligne horizontalement */
    gap: 40px; /* Ajoute un espacement de 40px entre les liens */
    justify-content: flex-end; /* Assure l'alignement à droite */
}

.footer-menu .footer-menu-items li {
    display: inline-block;
    margin-right: 30px; /* Ajoute de l'espace après chaque élément */

}

.footer-menu .footer-menu-items a {
    text-decoration: none; /* Supprime le soulignement */
    color: #ffffff; /* Couleur des liens */
    font-weight: bold;
    transition: color 0.3s ease;
    font-size: 16px; /* Ajustez la taille de la police si nécessaire */
}

.footer-menu .footer-menu-items a:hover {
    color: #F5A623; /* Couleur au survol */
}

/* Copyright */
.footer-copyright {
    margin-top: 20px; /* Espacement avec le contenu principal */
    font-size: 14px;
    color: #ffffff;
    text-align: center;
}

/* Responsive Footer pour mobile */
@media (max-width: 768px) {
    .site-footer .container {
        flex-direction: column; /* Empile les éléments verticalement */
        text-align: center; /* Centre le texte */
        gap: 20px; /* Ajoute un espace entre les éléments */
    }

    .footer-logo {
        margin-bottom: 10px; /* Ajoute un petit espacement sous le logo */
    }

    .footer-menu {
        text-align: center; /* Centre le menu */
        margin: 0; /* Supprime la marge */
    }

    .footer-menu .footer-menu-items {
        flex-direction: column; /* Affiche les éléments du menu verticalement */
        gap: 10px; /* Réduit l'espacement entre les liens */
    }

    .footer-copyright {
        margin-top: 20px; /* Maintient un espacement avec le reste du contenu */
    }
}

/* Section principale */
.qui-suis-je-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px; /* Ajoute un espacement sous le header */
    color: #ffffff;
    font-family: 'Righteous', sans-serif;
}

/* Titre principal */
.qui-suis-je-page .title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
}

/* Conteneur principal */
.qui-suis-je-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* Image de profil */
.qui-suis-je-image img {
    width: 100%;
    max-width: 400px; /* Ajustez la taille maximale */
    height: auto;
    display: block;
}

/* Texte */
.qui-suis-je-text {
    flex: 1;
    font-size: 1rem;
    line-height: 1.8;
}

.qui-suis-je-text p {
    margin-bottom: 20px;
}

/* Liens sociaux */
.qui-suis-je-socials {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}

.qui-suis-je-socials a img {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
}

.qui-suis-je-socials a img:hover {
    transform: scale(1.1);
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .qui-suis-je-container {
        flex-direction: column;
        text-align: center;
    }

    .qui-suis-je-image img {
        margin-bottom: 20px;
    }
}

/* Section Expériences et Formations */
.experiences-formations {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 50px;
    color: #ffffff;
}

.experience,
.formation {
    flex: 1;
    min-width: 300px;
}

/* Titres */
.experiences-formations h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #89CFF0; /* Bleu clair */
    text-transform: uppercase;
}

/* Contenu des expériences et formations */
.experience-item,
.formation-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
}

.experience-icon img,
.formation-icon img {
    width: 80px; /* Taille des icônes */
    height: auto;
    display: block;
}

.experience-content h3,
.formation-content h3 {
    margin: 0;
    font-size: 1.2rem;
}

.experience-content p,
.formation-content p {
    margin: 5px 0;
    font-size: 1rem;
    line-height: 1.5;
}

.experience-content ul {
    margin: 0;
    padding-left: 20px;
}

.experience-content ul li {
    margin-bottom: 5px;
    font-size: 1rem;
}


/* Page Contact */
.contact-page {
    max-width: 800px;
    margin: 80px auto; /* Espace sous le header */
    padding: 20px;
    color: #ffffff;
    font-family: 'Righteous', sans-serif;
}

/* Titre */
.contact-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
}

/* Texte d'introduction */
.contact-intro {
    text-align: center;
    line-height: 1.6;
    margin-bottom: 40px;
    font-size: 1rem;
}

/* Formulaire */
.contact-form form {
    background-color: #0C0029; /* Fond violet */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Champs du formulaire */
.contact-form label {
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 1rem;
    color: #000;
    background-color: #ffffff;
    border: none;
    border-radius: 5px;
}

.contact-form textarea {
    resize: none;
}

/* Bouton Envoyer */
.btn-send {
    display: block;
    width: 100%;
    background-color: #4B8BFF; /* Bleu clair */
    color: #ffffff;
    padding: 10px;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-send:hover {
    background-color: #3A6ECC; /* Bleu foncé */
}

/* Message de succès - vert */
.success-message {
    background-color: #d4edda; /* Vert clair */
    color: #155724; /* Vert foncé */
    border: 1px solid #c3e6cb;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

/* Message d'erreur - rouge */
.error-message {
    background-color: #f8d7da; /* Rouge clair */
    color: #721c24; /* Rouge foncé */
    border: 1px solid #f5c6cb;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-weight: bold;
}


/* Hero Section */

/* Hero Background : Vidéo ou Image */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Derrière le contenu */
    object-fit: cover; /* S'assure que la vidéo/image couvre tout */
    background-size: cover;
    background-position: center;
}


/* Logo SVG */
.hero-logo {
    margin-bottom: 20px; /* Espacement sous le logo */
}

.hero-logo img {
    width: 100px; /* Taille du logo */
    height: auto;
    display: block;
    margin: 0 auto; /* Centre le logo horizontalement */
}

/* Section Hero */
.hero-section {
    position: relative;
    height: 80vh;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre verticalement */
    align-items: center; /* Centre horizontalement */
    text-align: center;
    overflow: hidden;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Texte animé */
.animated-greeting {
    font-size: 3rem;
    margin: 0;
    font-family: 'Righteous', sans-serif;
    color: #4B8BFF;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #4B8BFF;
    animation: typewriter 3s steps(20) forwards, blink 0.7s infinite;
    margin-bottom: 20px; /* Espacement entre le texte animé et le reste */
}

@keyframes typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

/* Contenu centré */
.hero-content {
    margin-top: 20px; /* Ajuste l'espacement sous le texte animé */
}

.hero-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-family: 'Righteous', sans-serif;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center; /* Centre les boutons horizontalement */
}

.btn {
    background-color: #4B8BFF;
    color: #ffffff;
    font-family: 'Righteous', sans-serif;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.btn:hover {
    background-color: #3A6ECC;
    transform: scale(1.05);
}

.btn-secondary {
    background-color: #ffffff;
    color: #00021C;
}

.btn-secondary:hover {
    background-color: #e5e5e5;
}

@media (max-width: 768px) {
    .hero-logo img {
        width: 70px; /* Réduit la taille du logo */
    }

    .animated-greeting {
        font-size: 2rem;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .btn {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}
@media (max-width: 480px) {
    .animated-greeting {
        font-size: 1.6rem; /* Réduit encore la taille pour mobiles */
    }

    .hero-title {
        font-size: 1.2rem;
    }
}

/* Section Qui suis-je */
.qui-suis-je {
    background-color: #00021C;
    color: #ffffff;
    text-align: center;
    padding: 50px 20px; /* Espacement autour */
}

.qui-suis-je h2 {
    font-size: 1.5rem;
    margin-bottom: 40px;
    font-family: 'Righteous', sans-serif;
    color: #ffffff;
}

/* Conteneur des icônes */
.qui-suis-je-icons {
    display: flex;
    justify-content: center;
    gap: 40px; /* Espacement entre les boîtes */
    flex-wrap: wrap; /* Passage à la ligne si nécessaire */
}

/* Boîtes uniformes */
.icon-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px; /* Largeur fixe */
    height: 125px; /* Hauteur fixe */
    border: 2px solid #4B8BFF; /* Bordure bleue */
    border-radius: 30px; /* Coins arrondis */
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(75, 139, 255, 0.2); /* Ombre légère */
    background-color: transparent;
    text-align: center;
}

/* Effet au survol */
.icon-box:hover {
    transform: scale(1.05); /* Zoom léger */
    box-shadow: 0 8px 12px rgba(75, 139, 255, 0.4); /* Ombre plus marquée */
}

/* Icônes */
.icon-box img {
    width: 80px; /* Taille uniforme des icônes */
    height: auto;
    margin-bottom: 10px; /* Espacement sous l'icône */
}

/* Texte dans les boîtes */
.icon-box p {
    font-size: 1.2rem;
    color: #ffffff;
    font-family: 'Righteous', sans-serif;
    margin: 0; /* Supprime les marges par défaut */
    font-weight: bold; /* Rend le texte plus lisible */
}

/* Section Mes Compétences */
.mes-competences {
    background-color: #00021C;
    color: #ffffff;
    text-align: center;
    padding: 50px 20px;
    overflow: hidden; /* Cache le débordement horizontal */
}

.mes-competences h2 {
    font-size: 1.5rem;
    margin-bottom: 30px;
    font-family: 'Righteous', sans-serif;
}

/* Container principal du carousel */
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 600px; /* Largeur fixe pour desktop */
    margin: 0 auto; /* Centre le carousel */
    overflow: hidden; /* Empêche le débordement */
}

/* Piste des éléments */
.carousel-track {
    display: flex;
    gap: 30px; /* Espacement entre les icônes */
    width: calc(100px * 20 + 30px * 19); /* Largeur totale pour les 10 icônes dupliquées */
    animation: scrollIcons 15s linear infinite; /* Animation fluide et infinie */
}

/* Duplique les éléments pour un effet continu */
.carousel-track .carousel-item {
    flex: 0 0 100px; /* Taille fixe des éléments */
    text-align: center;
}

.carousel-item img {
    width: 100px; /* Taille des icônes */
    height: 100px;
    border-radius: 10px;
    background-color: #00021C;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.carousel-item img:hover {
    transform: scale(1.1); /* Zoom léger au survol */
}

/* Animation pour faire défiler les icônes */
@keyframes scrollIcons {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Déplace de la moitié des éléments */
    }
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .carousel-container {
        max-width: 100%;
    }
    .carousel-track {
        animation-duration: 20s; /* Animation plus lente sur mobile */
    }
}

/* Conteneur principal pour les projets */
.projets-page {
    max-width: 1200px; /* Largeur maximale de la page */
    margin: 0 auto; /* Centre le contenu horizontalement */
    padding: 80px 20px;
    font-family: 'Righteous', sans-serif;
    text-align: center; /* Centre le titre et les filtres */
}

.projet-links {
    margin: 20px 0;
    display: flex;
    gap: 15px;
}

.projet-button {
    display: inline-block;
    margin-left: 30px;

    padding: 10px 20px;
    background-color: #4B8BFF;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-family: 'Righteous', sans-serif;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.projet-button:hover {
    background-color: #3A6ECC;
    transform: scale(1.05);
}


/* Titre principal */
.page-title {
    text-align: center;
    font-size: 2.5rem; /* Taille du titre agrandie */
    margin-bottom: 40px;
    color: white;
}

/* Boutons de filtres */
.projet-filters {
    text-align: center; /* Centre les boutons */
    margin-bottom: 20px;
}

.projet-filters a {
    background-color: #4B8BFF;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    margin: 0 10px;
    display: inline-block;
    border-radius: 5px;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
}

.projet-filters a:hover,
.projet-filters a.active {
    background-color: #ffffff;
    color: #4B8BFF;
    border: 1px solid #4B8BFF;
}

/* Conteneur des cartes */
.projets-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Agrandit les cartes */
    gap: 40px; /* Espacement entre les cartes */
    justify-content: center; /* Centre les cartes horizontalement */
}

/* Style des cartes */
.projet-card {
    background-color: #00021C;
    color: #ffffff;
    border: 2px solid #4B8BFF;
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.projet-card:hover {
    transform: scale(1.05);
}

.projet-card a {
    text-decoration: none;
    color: inherit;
}

/* Image dans les cartes */
.projet-image img {
    width: 100%;
    height: 250px; /* Taille fixe pour l'image */
    object-fit: cover; /* Assure que l'image remplit correctement l'espace */
    display: block;
}

/* Informations des cartes */
.projet-info {
    padding: 20px;
    text-align: left;
}

.projet-info h3 {
    margin: 0;
    font-size: 1.8rem;
    color: #4B8BFF;
}

.projet-info p {
    font-size: 1rem;
    color: #cccccc;
}


/* Page d'un projet individuel */
.single-projet {
    max-width: 100%;
    margin: 0 auto;
    padding: 40px 0px;
    font-family: 'Righteous', sans-serif;
    color: #ffffff;
}

.single-projet h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    text-align: center;
}

.projet-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.projet-section {
    padding: 40px 30px;

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

/* Ajuste les images pour occuper la moitié de l'espace */
.projet-image {
    flex: 1; /* Prend 50% de l'espace */
    max-width: 100%; /* Contrôle la largeur maximale */
}

.projet-image img {
    width: 100%; /* Occupe la largeur maximale du conteneur */
    height: auto;
    border-radius: 10px;
    display: block;
}

.projet-text {
    flex: 1; /* Prend 50% de l'espace */
    font-size: 1.1rem;
    line-height: 1.7;
    text-align: left; /* Aligne le texte à gauche */
    margin: 0;
}

/* Version inversée pour alterner l'image et le texte */
.projet-section.inverse {
    flex-direction: row-reverse; /* Inverse l'image et le texte */
}

/* Responsive Design */
@media (max-width: 768px) {
    .single-projet {
        padding: 20px 10px; /* Réduit le padding sur les côtés */
    }

    .single-projet h1 {
        font-size: 2rem; /* Réduit la taille du titre */
        margin-bottom: 20px;
    }

    .projet-content {
        gap: 20px; /* Réduit l'espacement entre les sections */
    }

    .projet-section {
        flex-direction: column; /* Passe l'image et le texte en colonne */
        gap: 15px; /* Réduit l'espacement */
        text-align: center; /* Centre le texte pour les petits écrans */
    }

    .projet-section.inverse {
        flex-direction: column; /* Même style pour les sections inversées */
    }

    .projet-image {
        flex: none; /* Ajuste la largeur */
        width: 100%; /* L'image occupe toute la largeur */
        max-width: 100%;
    }

    .projet-image img {
        width: 100%; /* Assure que l'image remplit son conteneur */
        height: auto;
        border-radius: 10px;
    }

    .projet-text {
        flex: none;
        font-size: 1rem; /* Réduit la taille de la police */
        line-height: 1.4; /* Ajuste l'espacement des lignes */
        text-align: left; /* Garde le texte aligné à gauche */
        padding: 0 10px; /* Ajoute un peu de padding */
    }
}

@media (max-width: 480px) {
    .single-projet h1 {
        font-size: 1.8rem; /* Encore plus petit pour les très petits écrans */
    }

    .projet-text {
        font-size: 0.9rem; /* Texte plus petit */
    }
}


/* Extrait */
.projet-excerpt {
    text-align: left;
    padding: 0px 30px;
    font-size: 1.0rem;
    line-height: 1.6;
    color: grey;
    margin-bottom: 30px;
    font-family: 'Righteous', sans-serif;
}

/* Image à la une en pleine largeur */
.projet-thumbnail-fullwidth {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Évite tout dépassement */
}

.projet-thumbnail-img {
    width: 100%; /* Prend toute la largeur */
    height: auto; /* Garde les proportions */
    display: block;
    object-fit: cover; /* Coupe proprement l'image si nécessaire */
    max-height: 500px; /* Limite la hauteur pour éviter qu'elle soit trop grande */
}

/* Titre du projet */
.single-projet h1 {
    text-align: left;
    padding: 0px 30px;
    font-size: 2.5rem;
    margin: 20px 0;
    font-family: 'Righteous', sans-serif;
    color: #ffffff;
}


/* Conteneur des projets réduits */
.small-projets-cards {
    justify-content: center; /* Centre les cartes horizontalement */
    display: grid;
    grid-template-columns: repeat(auto-fit, 330px); /* Cartes toujours de 200px de large */
    gap: 15px;
    margin: 20px 0;
}

/* Section projets */
.section-projets-reduits {
    padding: 40px 20px;
    text-align: center;
    background-color: #00021C;
    color: #ffffff;
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: white;
    font-family: 'Righteous', sans-serif;
}

/* Style des boutons de filtre */
.projet-filters {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-button {
    padding: 10px 15px;
    background-color: #4B8BFF;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.filter-button.active,
.filter-button:hover {
    background-color: #ffffff;
    color: #4B8BFF;
}

/* Style des boutons */
.projet-filters {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.filter-button {
    background-color: #4B8BFF;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    font-family: 'Righteous', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.filter-button:hover,
.filter-button.active {
    background-color: #ffffff;
    color: #4B8BFF;
}

/* Grid des projets */
.small-projets-cards {
    gap: 20px;
}

/* Cartes des projets */
.small-projet-card {
    background-color: #0C0029;
    border: 1px solid #4B8BFF;
    border-radius: 8px;
    text-align: center;
    padding: 10px;
    transition: transform 0.3s ease;
}

.small-projet-card a {
    text-decoration: none;
    color: inherit;
}

.small-projet-card:hover {
    transform: scale(1.05);
}

.small-projet-image img {
    width: 100%;
    border-radius: 5px;
}

.small-projet-info h4 {
    color: #ffffff;
    margin-top: 10px;
    font-size: 1rem;
    font-family: 'Righteous', sans-serif;
}

.projet-excerpt {
    font-size: 0.9rem;
    color: #cccccc;
    margin-top: 8px;
    line-height: 1.4;
}

/* Section Intéressé */
.interesse-section {
    text-align: center;
    padding: 60px 20px;
    background-color: #00021C; /* Fond sombre */
    color: #ffffff;
    font-family: 'Righteous', sans-serif;
}

.interesse-title {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #ffffff;
}

.interesse-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.interesse-buttons .btn {
    background-color: #4B8BFF;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Righteous', sans-serif;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.interesse-buttons .btn:hover {
    transform: scale(1.05);
    background-color: #3A6ECC;
}

.interesse-buttons .btn-secondary {
    background-color: #ffffff;
    color: #4B8BFF;
}

.interesse-buttons .btn-secondary:hover {
    background-color: #e5e5e5;
}