/* ===========================
   Styles de base
=========================== */

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    font-family: 'Asap', sans-serif;
}

p, a, label, input, textarea, button {
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    font-weight: 400;
    color: #4C423F;
}

/* ===========================
   Style général pour <main>
=========================== */

main {
    max-width: 1200px;      /* Limite la largeur à 1200px */
    margin: 0 auto;         /* Centre horizontalement */
    padding: 20px;          /* Ajoute un peu d’espace autour du contenu */
    box-sizing: border-box; /* Pour inclure le padding dans la largeur totale */
}

/* Responsive: adapte la mise en page pour les petits écrans */
@media (max-width: 768px) {
    main {
        padding: 15px;      /* Réduit le padding sur mobile */
    }
}

/* ===========================
   Header
=========================== */

header {
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.site-name {
    font-size: 2em;
    font-weight: bold;
    text-decoration: none;
    color: #46586E;
}

.main-header {
    display: flex;
    width: 100%;
}

.header-container {
    display: flex;
    width: 100%;
}

.header-left {
    background-color: #C2CFDC;
    width: 25%;
    padding: 12px 12px;
    box-sizing: border-box;
}

.header-left a {
    text-decoration: none;
    color: #46586E;
    display: flex;
    align-items: center;
}

.header-left .logo img {
    width: 100px;
    margin-right: 20px;
}

.header-left .site-name {
    font-size: 1.2em;
    font-weight: bold;
    margin-right: 20px;
}

.header-right {
    background-color: #46586E;
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    box-sizing: border-box;
}

.header-right .page-title {
    font-size: 1.8em;
    font-weight: 500;
    color: #F0F0F0;
}

/* Header responsive */
@media (max-width: 768px) {
    .header-left {
        width: 100%;
        justify-content: center;
    }

    .header-left .site-name {
        display: none;
    }

    .header-right {
        width: 100%;
    }

    .header-right .page-title {
        font-size: 1.5em;
    }
}

/* ===========================
   Navigation
=========================== */

nav .main-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

nav .main-menu li {
    display: inline-block;
}

nav .main-menu li a {
    text-decoration: none;
    font-weight: 600;
    color: #333;
}

nav .main-menu li a:hover {
    color: #007bff;
}

/* ===========================
   Conteneur principal
=========================== */

.content-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
}

.featured-image img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

/* ===========================
   Footer
=========================== */

footer {
    background-color: #46586E;
    color: #F0F0F0;
    padding: 20px 0;
    text-align: center;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-message {
    font-size: 1.2em;
    margin-bottom: 10px;
    font-weight: bold;
    color: #F0F0F0;
}

.footer-copyright {
    font-size: 1em;
    margin-bottom: 20px;
    color: #F0F0F0;
}

.footer-social {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-top: 10px;
}

.footer-social a {
    display: inline-block;
    width: 30px;
    height: 30px;
    color: #F0F0F0;
    text-decoration: none;
}

.footer-social a img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.footer-social a:hover img {
    transform: scale(1.1);
}

/* Footer responsive */
@media (max-width: 768px) {
    .footer-message {
        font-size: 1em;
    }

    .footer-social a {
        width: 25px;
    }
}

/* ===========================
   Galerie
=========================== */

.gallery {
    display: flex;
    justify-content: center;
    padding: 2em;
}

.gallery-title h2 {
   text-align: center;
   color : #46586E;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
    width: 100%;
    max-width: 1200px;
}

.gallery-item {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 0.3s ease;
    position: relative; 
    border-radius: 15px;
}

.gallery-item-link {
    display: block;
    text-decoration: none;
}

.gallery-item-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease-in-out; /* Effet zoom */
}

.gallery-item img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}


@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===========================
   Projet personnel (général)
=========================== */

#new-mmi-project, #mmi-projects {
    padding: 20px 5%;
    max-width: 1200px;
    margin: auto;
}

.project-container {
    background-color: #C2CFDC; /* Fond doux pour le bloc */
    border-radius: 20px;       /* Coins arrondis */
    margin-bottom: 10px;       /* Espacement global entre les projets */
    overflow: hidden;          /* Contenu arrondi proprement */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère */
    display: flex;
    flex-direction: column;
    padding: 0;                /* Aucune marge intérieure */
}

.projects-banner {
    background-color: #46586E;
    color: #F0F0F0;
    padding: 10px;
    text-align: center;
    border-radius: 20, 0, 20, 0;
}

/* ===========================
   Projet personnel (conteneur et titre)
=========================== */

.projects-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    gap: 20px; /* Espacement entre les cartes */
    justify-items: center; /* Centre les cartes horizontalement */
    padding: 20px;
    margin: 0 auto;
    max-width: 1200px; /* Largeur maximale */
}

/* ===========================
   Contenu du projet (galerie et description)
=========================== */

.project-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 10px;
}

.projet-intro {
    font-size: 1.2em;
    margin-top: 10px;
    text-align: center;
    color :#C2CFDC;
}

.projects-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(700px, 1fr));
    gap: 20px;
    padding: 20px;
}

.project-card {
    position: relative;
    width: 100%;
    max-width: 300px; /* Taille maximale des cartes */
    height: 250px; /* Hauteur fixe des cartes */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px #46586E;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
}

.project-card-thumbnail {
    width: 100%;
    height: 100%;
}

.project-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image remplit le conteneur */
    transition: transform 0.3s ease; /* Ajoute un léger zoom */
}

/* Overlay avec effet glissant */
.project-card-overlay {
    position: absolute;
    bottom: -100%; /* Débute en bas, complètement invisible */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #46586ed6; /* Filtre sombre */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* L'overlay est invisible au début */
    transition: bottom 0.4s ease, opacity 0.2s ease; /* Animation fluide */
}

.project-card-details {
    text-align: center;
    color: #F0F0F0;
    padding: 10px;
}

.project-card-details h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.project-card-details p {
    font-size: 0.9rem;
    margin: 0;
    color: #F0F0F0;
}

/* Effets au survol */
.project-card:hover .project-card-overlay {
    bottom: 0; /* L'overlay glisse vers le haut */
    opacity: 1; /* L'overlay devient visible */
}

.project-card:hover img {
    transform: scale(1.05); /* Zoom léger sur l'image */
}

/* Responsive Design */
@media (max-width: 1024px) {
    .projects-container {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
    }
}

@media (max-width: 768px) {
    .projects-container {
        grid-template-columns: 1fr; /* 1 colonne sur mobile */
    }
}

.post-thumbnail img {
   display: none;
}

/* ========================== 
   Galerie d'images - Avec bords arrondis et marges
========================== */

.gallery-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Colonnes adaptatives */
    gap: 20px; /* Espacement entre les images */
    margin: 20px; /* Ajoute un espace entre la galerie et le bord bleu */
    padding: 10px; /* Ajoute de l'espace intérieur au conteneur */
    background-color: #C2CFDC; /* Bleu clair pour harmoniser avec le design */
    border-radius: 15px; /* Arrondit les coins du conteneur bleu */
}

.gallery-item {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Empêche les débordements */
    border-radius: 15px; /* Ajoute des bords arrondis aux images */
    padding: 5px;
}

.gallery-item img {
    width: 100%; /* Les images occupent toute la largeur de leur colonne */
    height: auto; /* Respectent le ratio d'aspect */
    border-radius: 15px; /* Coins arrondis pour les images */
    cursor: pointer; /* Les images restent cliquables */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Effet de survol fluide */
}

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


/* ==========================
   Lightbox
========================== */

.lightbox {
    display: none; /* Cachée par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fond noir semi-transparent */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lightbox-image {
    max-width: 90%;
    max-height: 80%;
    border: 5px solid #F0F0F0; /* Contour blanc */
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

.close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #F0F0F0;
    font-size: 2em;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #ffffff;
}

/* ===========================
   Projet personnel (description)
=========================== */

.project-description {
    background-color: #F0F0F0;
    padding: 20px;
    margin: 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.project-description p {
    margin: 0;
    line-height: 1.6;
    font-size: 1.1em;
}

.editable-description {
    border: 1px dashed #ccc;
    padding: 1em;
}

/* ===========================
   Projet personnel
=========================== */ 
/* Section d'introduction */
.projects-intro {
    background-color: #46586E;
    color: #F0F0F0;
    text-align: left;
    padding: 50px 20px;
}

.projects-intro h1 {
    font-size: 3em;
    margin-bottom: 10px;
}

.projects-intro p {
    font-size: 1.2em;
    line-height: 1.6;
}

/* Galerie des projets */
.projects-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 40px 20px;
}

.project-item {
    background-color: #C2CFDC;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-item:hover {
    transform: scale(1.02);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}

.project-thumbnail img {
    width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.project-thumbnail img:hover {
    transform: scale(1.05);
}

.project-details {
    padding: 20px;
    text-align: center;
}

.project-details h2 {
    font-size: 1.5em;
    color: #4C423F;
    margin-bottom: 10px;
}

.project-description {
    font-size: 1em;
    color: #4C423F;
    margin-bottom: 20px;
}

.btn-view-project {
    display: inline-block;
    background-color: #46586E;
    color: #F0F0F0;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-view-project:hover {
    background-color: #4C423F;
}


/* ===========================
   Formulaires d'ajout et de modification
=========================== */

.new-project-form, .edit-project-form, .edit-site-form, .add-site-form {
    background-color: #C2CFDC;
    padding: 40px;
    border-radius: 20px;
    max-width: 800px;
    margin: 20px auto;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.new-project-form h1, .edit-project-form h1, .edit-site-form h1, .add-site-form h1 {
    text-align: center;
    color: #46586E;
    margin: 30px;
}

.new-project-form label, .edit-project-form label, .edit-site-form label, .add-site-form label {
    display: block;
    font-weight: bold;
    margin-top: 20px;
    color: #4C423F;
}

/* Mise à jour des champs input et textarea */
.new-project-form input[type="text"],
.new-project-form textarea,
.new-project-form input[type="url"],
.edit-project-form textarea,
.edit-project-form input[type="url"],
.edit-site-form input[type="text"],
.edit-site-form textarea,
.edit-site-form input[type="url"],
.add-site-form input[type="text"],
.add-site-form textarea,
.add-site-form input[type="url"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #46586E;
    border-radius: 10px;
    background-color: #F0F0F0;
    margin-top: 5px;
    font-size: 1em;
    resize: none; /* Empêche le redimensionnement manuel */
}

/* Champs textarea spécifiques */
.new-project-form textarea,
.edit-project-form textarea,
.edit-site-form textarea,
.add-site-form textarea {
    height: auto; /* Ajuste la hauteur automatiquement */
    min-height: 150px; /* Définit une hauteur minimale */
    max-height: none; /* Supprime la limite de hauteur */
    overflow-y: visible; /* Supprime la barre de défilement */
}


.new-project-form button[type="submit"],
.edit-project-form button[type="submit"],
.edit-site-form button[type="submit"],
.add-site-form button[type="submit"] {
    display: block;
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: #46586E;
    color: #F0F0F0;
    font-size: 1.2em;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.new-project-form button[type="submit"]:hover,
.edit-project-form button[type="submit"]:hover,
.edit-site-form button[type="submit"]:hover,
.add-site-form button[type="submit"]:hover {
    background-color: #4C423F;
}

/* ===========================
   Boutons généraux
=========================== */

.btn-add-project, .edit-button, .btn-add, .btn-edit {
    display: inline-block;
    background-color: #46586E;
    color: #F0F0F0;
    margin: 30px;
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-add-project:hover, .edit-button:hover, .btn-add:hover, .btn-edit:hover {
    background-color: #4C423F;
    color: #F0F0F0; /* Assure que le texte reste blanc */
}

/* Conteneur pour centrer les boutons Modifier et Ajouter */
.admin-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

/* ==========================
   Lightbox
========================== */

.lightbox {
    display: none; /* Cachée par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fond noir semi-transparent */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.lightbox-image {
    max-width: 90%;
    max-height: 80%;
    border: 5px solid #F0F0F0; /* Contour blanc */
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

.close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #F0F0F0;
    font-size: 2em;
    font-weight: bold;
    cursor: pointer;
}

.close:hover {
    color: #ffffff;
}

/* ===========================
   Projet personnel
=========================== */

/* Général */
#projet-perso {
    font-family: 'Roboto', sans-serif;
    color: #4C423F;
}

/* Section titre */
.projet-title-section {
    background-color: #46586E;
    color: #F0F0F0;
    padding: 50px 20px;
    text-align: center;
    animation: fadeIn 1.5s ease-in-out;
}

.projet-title-section h1 {
    font-family: 'Asap', sans-serif;
    font-size: 3em;
    margin: 0;
}

.projet-title-section .projet-intro {
    font-size: 1.2em;
    margin-top: 10px;
}

/* Section images */
.projet-images-section {
    background-color: #C2CFDC;
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.projet-images-section img {
    width: 100%;
    max-width: 800px;
    border-radius: 20px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease;
}

.projet-images-section img:hover {
    transform: scale(1.05);
}

/* Section description */
.projet-description-section {
    background-color: #F0F0F0;
    padding: 50px 20px;
}

.projet-description-section h2 {
    font-family: 'Asap', sans-serif;
    color: #46586E;
    font-size: 2.5em;
}

.projet-description-section p {
    margin-top: 20px;
    font-size: 1.1em;
    line-height: 1.6;
}

/* Section réseaux */
.projet-reseaux-section {
    background-color: #C2CFDC;
    padding: 50px 20px;
    text-align: center;
}

.projet-reseaux-section .reseaux-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #46586E;
    color: #F0F0F0;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.projet-reseaux-section .reseaux-link:hover {
    background-color: #4C423F;
}

/* Section annonces */
.projet-annonces-section {
    background-color: #F0F0F0;
    padding: 50px 20px;
}

.projet-annonces-section h2 {
    font-family: 'Asap', sans-serif;
    color: #46586E;
}

.projet-annonces-section p {
    margin-top: 10px;
    font-size: 1.1em;
    line-height: 1.6;
}

/* Bouton Éditer */
.edit-button-container {
    text-align: center;
    margin: 40px 0;
}

.btn-edit {
    background-color: #46586E;
    color: #F0F0F0;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.btn-edit:hover {
    background-color: #4C423F;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0px 0;
    border-radius: 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel {
    display: flex;
    gap: 20px;
    scroll-behavior: smooth;
    overflow-x: scroll;
    overflow: hidden;
    scroll-snap-type: x mandatory;
    width: 100%;
}

.carousel-item {
    flex: none;
    scroll-snap-align: center;
    background-color: #C2CFDC;
    border-radius: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    width: fit-content;
}

.carousel-item .site-title a {
    font-family: 'Asap', sans-serif;
    font-size: 2em;
    font-weight: bold;
    color: #46586E;
    text-decoration: none;
    display: block;
    margin: 0 auto;
}

.carousel-item .site-title a:hover {
    color: #4C423F;
}

.images-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes */
    gap: 20px;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
}

.images-container div {
    text-align: center;
}

.images-container img {
    width: 80%;
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.site-description {
    margin-top: 20px;
    color: #4C423F;
    font-size: 1.1em;
    line-height: 1.6;
    text-align: left;
    max-width: 800px;
    margin: 20px auto;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #46586E;
    color: #F0F0F0;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.carousel-arrow.left-arrow {
    left: 20px;
}

.carousel-arrow.right-arrow {
    right: 20px;
}

.carousel-arrow:hover {
    background-color: #4C423F;
}



/* Boutons Admin */
.admin-buttons {
    text-align: center;
    margin-top: 20px;
}

.admin-buttons a {
    display: inline-block;
    background-color: #46586E;
    color: #F0F0F0;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.admin-buttons a:hover {
    background-color: #4C423F;
}

/* ==========================
   Page CV - Archive CV
========================== */

.cv-container {
    display: grid;
    height: 100vh;
    width: 100vw;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    max-width: 1200px;
}

.cv-embed {
    width: 100%; /* Occupe toute la largeur de l'écran */
    height: 100%; /* Hauteur dynamique pour occuper presque tout l'écran */
    border: none;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Ombre légère */
    border-radius: 10px; /* Coins arrondis */
    place-self: center;
}

@media (max-width: 768px) {
    .cv-embed {
        width: 100%; /* Toujours toute la largeur sur mobile */
        height: 100%; /* Hauteur réduite pour les petits écrans */
    }
}

/* ============================
   Style des Travaux Personnels
============================ */

.travaux-perso-menu {
    border-radius: 0px 12px 12px 0px;
    position: fixed;
    left: 0;
    transform: translateY(-50%);
    background-color: #C2CFDC;
    border: 4px solid #46586E;
    padding: 2rem 0.75rem 2rem 2rem;
    z-index: 1;
    transform: translateX(-75%);
    transition: all 0.175s ease-in-out;
    display: flex;
    align-items: center;
    display: none;
}

.travaux-perso-menu svg {
    scale: 1.5;
    left: 10px;
    margin-left: 20px;
    rotate: 180deg;
    transition: all 0.25s ease-in-out;
    color: #46586E
}

.travaux-perso-menu:hover svg {
    rotate: 0deg;
}

.travaux-perso-menu ul {
    visibility: hidden;
    transition: 0.175s ease-in-out;
    margin: 0;
    padding: 0;
    list-style: none;
}

.travaux-perso-menu:hover ul {
    visibility: visible;
}

.travaux-perso-menu:hover {
    transform: translateX(-2%);
}


.travaux-perso-menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #46586E;
}

.travaux-perso-menu a:active {
    color: #F0F0F0;
    background-color: #46586E;
    border-radius: 5px;
    font-weight: bold;
}

.travaux-perso-menu a:hover {
    color: #F0F0F0;
    background-color: #46586E;
    font-weight: bold;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}


@media (max-width: 200px) {
    .travaux-perso-menu {
        height: 100vh;
    }
}

/* Conteneur principal */
#travaux-perso-page .travaux-perso-container {
    padding: 20px;
    scroll-behavior: smooth;
}

.travaux-perso-category-title {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #46586E;
    position: relative;
}

/* Titre du texte */
.travaux-perso-category-title-text {
    flex-shrink: 0; /* Empêche le texte de se redimensionner */
    margin-right: 10px; /* Espace entre le texte et la ligne */
}

/* Ligne bleue */
.travaux-perso-category-line {
    flex-grow: 1; /* Remplit tout l'espace restant */
    height: 3px;
    background-color: #46586E; /* Bleu foncé */
    border-radius: 2px; /* Coins arrondis */
}

/* Galerie */
.travaux-perso-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Carte individuelle */
.travaux-perso-gallery-item {
    position: relative;
    background-color: #C2CFDC;
    border-radius: 15px 80px 15px 80px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



/* Image dans la carte */
.travaux-perso-gallery-img {
    width: 100%;
    height: 400px;
    object-fit: cover; /* Assure que l'image remplit l'espace de manière uniforme */
}

/* Description */
.travaux-perso-description {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #46586E;
    padding: 15px 20px;
    font-family: 'Roboto', sans-serif;
}

/* Titre dans la carte */
.travaux-perso-description h3 {
    font-size: 1.2rem;
    font-style: italic;
    margin: 0;
    color: #F0F0F0;
}

/* Texte dans la carte */
.travaux-perso-description p {
    padding-left: 30px;
    font-size: 0.9rem;
    margin: 5px 0 0;
    text-align: right;
    color: #C2CFDC;
}

/* Texte pour aucune catégorie */
.travaux-perso-no-articles,
.travaux-perso-category-missing {
    font-size: 1rem;
    color: #46586E;
    text-align: center;
    margin-top: 20px;
}

/* ============================
   Menu mobile
============================ */

/* Icône du menu */
.mobile-menu-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #46586E;
    color: #F0F0F0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: none;
}

.mobile-menu-icon:hover {
    background-color: #4C423F;
}

/* Menu mobile */
.mobile-menu {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    background-color: #46586E;
    color: #F0F0F0;
    border-radius: 10px 10px 0 0;
    padding: 20px;
    display: none;
    flex-direction: column;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1001;
}

.mobile-menu.open {
    display: flex;
}

/* Liste des liens dans le menu */
.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-list li {
    margin-bottom: 15px;
}

.mobile-menu-link {
    color: #F0F0F0;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
}

.mobile-menu-link:hover {
    color: #C2CFDC;
}

/* Bouton de fermeture */
.close-mobile-menu {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #F0F0F0;
    font-size: 2rem;
    cursor: pointer;
}

/* Overlay pour cliquer à l'extérieur */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.mobile-menu-overlay.visible {
    display: block;
}

/* Afficher le menu desktop pour les écrans larges (desktop) */
@media (min-width: 769px) {
    .travaux-perso-menu {
        display: flex; /* Affiche le menu desktop */
    }
}

/* Afficher le menu mobile pour les écrans petits et tablettes */
@media (max-width: 768px) {
    .mobile-menu-icon {
        display: flex; /* Affiche le menu mobile */
    }
}

/* ============================
   Styles pour Modifier Travail Perso
============================ */

.edit-container {
    max-width: 1200px;
    padding: 30px;
}

.edit-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
    background-color: #C2CFDC;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.edit-form label {
    font-weight: bold;
    font-size: 1.1rem;
    color: #46586E;
}

.edit-form input[type="text"] {
    width: 90%;
    padding: 10px;
    border: 1px solid #46586E;
    border-radius: 8px;
    font-size: 1rem;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1) inset;
}

.edit-form .wp-editor-container {
    border: 1px solid #46586E;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1) inset;
}

.edit-form textarea {
    border-radius: 8px;
    font-size: 1rem;
}

.add-work-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.edit-form button[type="submit"],
.btn-add,
.btn-add-work {
    align-self: center;
    background-color: #46586E;
    color: #F0F0F0;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 10px 30px;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.edit-form button[type="submit"]:hover,
.btn-add:hover,
.btn-add-work:hover {
    background-color: #4C423F;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}