/* Importation de la police "Great Vibes" pour un style cursive fluide */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

@font-face {
    font-family: 'Thuressia';
    src: url('fonts/Thuressia.ttf');
}

/* Général : S'assurer que la page occupe toute la hauteur de l'écran */
html,
body {
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #fbe8d4;
}

@media (max-width: 1100px) {

    /* Conteneur du carrousel */
    .maintenance-main {
        width: 80%;
        margin: 10px auto;
        position: relative;
        height: 80%;
        /* Définir une hauteur fixe pour le carrousel */
        overflow: hidden;
        /* Pour masquer toute partie de la vidéo qui dépasse */
        display: flex;
        /* Utiliser flexbox pour centrer le contenu */
        justify-content: center;
        /* Centrer horizontalement */
        align-items: center;
        /* Centrer verticalement */
        padding: 20px;
    }
}

/* Style pour le bandeau de cookies */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 1.0rem;
    z-index: 99999;
    display: none;
    /* Affiché uniquement si l'utilisateur n'a pas encore donné son consentement */
    box-sizing: border-box;
    /* S'assurer que padding est pris en compte dans la largeur */
    word-wrap: break-word;
    /* Permet au texte de s'ajuster et de passer à la ligne si nécessaire */
    overflow-wrap: break-word;
    /* Pour garantir que le texte long s'ajuste */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centrer horizontalement */
    justify-content: center;
    /* Centrer verticalement si nécessaire */
}

/* Style pour le texte dans le bandeau */
#cookie-banner span {
    max-width: 90%;
    /* Largeur maximale du texte pour éviter qu'il ne prenne trop de place */
    word-wrap: break-word;
}

/* Style pour les boutons sous le texte */
#cookie-banner button {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #b2602a;
    color: #fff;
    cursor: pointer;
    border-radius: 20px;
    border: none;
    margin-left: 5px;
    /* Espacement entre les boutons */
}

#cookie-banner button:first-child {
    margin-left: 0;
    /* Pas de marge à gauche pour le premier bouton */
}


#cookie-banner button:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

/* Section FAQ */
#faq {
    margin: 100px auto 10px;
    padding: 20px;
    max-width: 80%;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#faq h1 {
    font-size: 1.0em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-question {
    position: relative;
    background-color: white;
    color: #b2602a;
    border: 2px solid #b2602a;
    padding: 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.0rem;
    margin: 0;
    transition: background-color 0.3s ease;
}

.faq-question::after {
    content: "\f078";
    /* Icône de flèche (FontAwesome) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 10px;
    transition: transform 0.3s ease;
}

.faq-question.open::after {
    transform: rotate(180deg);
    /* Retourne la flèche */
}

.faq-question:hover {
    background-color: #b2602a;
    color: white;
}

.faq-answer {
    display: none;
    padding: 15px;
    background-color: #f9f9f9;
    border-left: 3px solid #b2602a;
    border-radius: 5px;
    margin-top: 10px;
    transition: max-height 0.3s ease-in-out;
}

.faq-answer.active {
    display: block;
}

/* Responsivité */
@media (max-width: 768px) {
    #faq {
        margin: 100px auto 10px;
    }

    header nav ul li {
        display: block;
        margin: 10px 0;
    }

    .faq-question::after {
        bottom: 10px;
    }
}

/* Conteneur des notifications */
#notification-container {
    position: fixed;
    max-width: 80%;
    top: 80px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Espacement entre les notifications */
    z-index: 99999;
}

/* Style des notifications (ajout effet d'entrée) */
.notification {
    background-color: white;
    color: #923e14;
    border: 2px solid #b2602a;
    padding: 10px 15px;
    border-radius: 5px;
    opacity: 0;
    /* Largeur max à 30% de l'écran */
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    text-align: center;
    display: inline-block;
    /* Adapte la taille au contenu */
    width: fit-content;
    /* Adapte la largeur au texte */
    min-height: auto;
    /* Permet à chaque notification d'avoir sa propre hauteur */
    transform: translateX(-100%);
    /* Commence hors écran à gauche */
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Animation d'apparition */
.notification.show {
    opacity: 1;
    transform: translateX(0);
    /* Revient à sa position normale */
}

/* Animation de disparition (balayage vers la gauche) */
.notification.fade-out {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* Barre de navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #923e14;
    color: #fff;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.navbar .logo {
    margin-left: 10%;
}

.navbar .logo img {
    height: 40px;
    margin-left: 10%;
}

.navbar .buttons {
    display: flex;
    gap: 10px;
    margin-right: 10%;
}

.navbar .buttons .btn-navbar {
    text-decoration: none;
    color: #fff;
    background-color: #b2602a;
    padding: 12px 18px;
    border-radius: 20px;
    transition: background-color 0.3s ease;
    font-weight: bold;
    border: none;
}

.navbar .buttons .btn-navbar:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

/* Hamburger icon */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    margin-right: 15%;
}

.hamburger .bar {
    width: 25px;
    height: 3px;
    background-color: #fef4e8;
    border-radius: 5px;
}

.index-header {
    display: flex;
    align-items: center;
    /* Assurez-vous que les éléments enfants s'étendent sur toute la hauteur */
    justify-content: space-between;
    width: 80%;
    margin: 60px auto 30px;
    gap: 20px;
    /* Réduit l'espace entre les deux sections */
}

.header-left {
    flex: 1;
    text-align: center;
}

.header-left h1 {
    font-size: 2rem;
    color: #612811;
    /* brun doux */
    margin-bottom: 0px;
}

.header-left p {
    font-size: 1.1rem;
    color: #150000;
    /* terre cuite clair */
    margin-top: 5px;
    margin-bottom: 10px;
}

.download-btn {
    padding: 10px 20px;
    background-color: #b2602a;
    /* orange doux */
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

.download-btn:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

.download-counter {
    margin-top: 5px;
    font-size: 0.8rem !important;
    /* Utilisation de !important pour forcer l'application du style */
}

.header-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centre l'image verticalement et horizontalement */
    position: relative;
    overflow: hidden;
}

.header-img {
    width: 300px;
    /* L'image s'ajuste à la largeur disponible */
    height: 300px;
    /* L'image occupe toute la hauteur de son conteneur */
    object-fit: contain;
    /* Ajuste l'image pour qu'elle reste proportionnée sans être coupée */
    border-radius: 20px;
    background-color: #fef4e8;
}

/* Media query pour les petits écrans (mobile ou tablettes en mode portrait) */
@media screen and (max-width: 768px) {
    .index-header {
        flex-direction: column;
        /* Empile les sections verticalement */
        gap: 10px;
        /* Réduit l'espace entre les sections */
    }

    .header-left {
        text-align: center;
        /* Assurez-vous que le texte soit centré sur les petits écrans */
        margin-bottom: 0px;
        /* Ajoute un espace sous la première section */
    }

    .header-right {
        flex: 0;
        /* Réduit la taille du conteneur droit pour mieux s'adapter */
        margin-top: 0px;
        /* Ajoute un espace au-dessus de l'image */
    }

    .header-img {
        width: 100%;
        /* L'image occupe 100% de la largeur du conteneur */
        height: auto;
        /* Ajuste la hauteur proportionnellement */
        max-width: 400px;
        /* Limite la largeur maximale de l'image */
    }
}

.index-main {
    text-align: left;
    background-color: #fef4e8;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 50px;
    padding-right: 50px;
    border-radius: 8px;
    margin: 0px auto 20px;
    width: 80%;
}

.index-main hr {
    border: 1px solid #b2602a;
    width: 50%;
    margin-bottom: 40px;
    margin-top: 40px;
}

.index-main h2 {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 20px;
    color: #612811;
}

.index-main h3 {
    font-size: 1.0rem;
    color: #612811;
}

.index-main p {
    font-size: 0.8rem;
    color: #7A6B5E;
}

.content-item-left,
.content-item-right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Répartit l'espace entre l'image et le texte */
}

/* Ajustement pour que l'image et le texte aient la même largeur */
.content-image-left,
.content-image-right {
    width: 40%;
    height: auto;
    border-radius: 8px;
    cursor: zoom-in;
    transition: transform 0.3s ease-in-out;
}

/* Style pour l'image en plein écran */
.fullscreen-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.fullscreen-image img {
    max-width: 90%;
    max-height: 90%;
    cursor: zoom-out;
    border-radius: 10px;
}

/* Texte équilibré */
.content-text-right,
.content-text-left {
    width: 40%;
    text-align: center;
}

@media screen and (max-width: 1100px) {
    .index-main {
        max-width: 80%;
        /* S'étendre sur toute la largeur en dessous de 1100px */
        padding: 20px;
        /* Réduire le padding pour éviter le débordement */
    }

    .index-main hr {
        border: 1px solid #b2602a;
        width: 50%;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .content-item-left,
    .content-item-right {
        flex-direction: column;
        /* Les éléments s'empilent verticalement */
        text-align: center;
    }

    .content-item-right {
        flex-direction: column-reverse;
        /* Change l'ordre : image au-dessus */
    }

    .content-image-left,
    .content-image-right,
    .content-text-left,
    .content-text-right {
        width: 100%;
        /* Prendre toute la largeur disponible */
    }
}

/* Container pour la section */
.stats-container {
    text-align: center;
    background-color: none;
    padding: 20px;
    border-radius: 8px;
    /* box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.4); */
    margin: 0px auto;
    width: 80%;
}

/* Titre (h1) avec des effets spéciaux */
.stats-container h1 {
    font-size: 1.2rem;
    color: #333;
    position: relative;
    display: inline-block;
    /* Police cursive attachée */
    background: #b2602a;
    -webkit-background-clip: text;
    color: transparent;
    text-transform: uppercase;
}

.stats-container h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: #b2602a;
    transform: scaleX(0);
    transform-origin: bottom right;
    animation: underline 5s ease-out forwards;
}

@keyframes underline {
    to {
        transform: scaleX(1);
        transform-origin: bottom left;
    }
}

/* Container pour les statistiques en 4 colonnes */
.stats-container .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
    /* Centrer les éléments horizontalement */
    align-items: center;
    /* Centrer les éléments verticalement */
    height: 100%;
    /* Permet de remplir toute la hauteur du parent */
}

/* Chaque élément de la stat */
.stats-container .stat-item {
    text-align: center;
    font-size: 18px;
    color: #555;
}

.stats-container .stat-item .counter {
    font-weight: bold;
    color: #b2602a;
    font-size: 40px;
    transition: all 1s ease;
    margin-bottom: 10px;
    /* Ajouter un petit espace sous le chiffre */
}

/* Texte des stat's */
.stats-container .stat-item p {
    font-size: 16px;
    color: #777;
    line-height: 1.4;
    margin-top: 0;
}

/* Texte spécial (dernier p) */
.stats-container .special-text {
    font-size: 0.75rem;
    /* Police cursive attachée */
    color: #b2602a;
    position: relative;
    display: inline-block;
    letter-spacing: 1px;
    font-weight: bold;
}

.stats-container .special-text::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    background: #b2602a;
    transform: scaleX(0);
    animation: underlineSpecialText 5s ease-out forwards;
}

@keyframes underlineSpecialText {
    to {
        transform: scaleX(1);
    }
}

/* Si l'écran est petit (responsive), passer à 2 colonnes */
@media (max-width: 768px) {
    .stats-container .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-container h1 {
        font-size: 1.0rem;
    }

    .stats-container .special-text {
        font-size: 0.6rem;
    }
}

/* Si l'écran est encore plus petit, passer à 1 seule colonne */
@media (max-width: 480px) {
    .stats-container .stats-grid {
        grid-template-columns: 1fr;
    }

    .stats-container h1 {
        font-size: 1.0rem;
    }

    .stats-container .special-text {
        font-size: 0.6rem;
    }
}

/* Page contact */
.message-principal {
    width: 20%;
    background-color: #fff;
    box-shadow: 4px 4px 4px 4px rgba(0, 0, 0, 0.4);
    margin: 100px auto 30px;
    padding: 20px;
    border-radius: 8px;
}

.message-container {
    flex-grow: 1;
}

.message-container h2 {
    font-size: 0.8em;
    color: black;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

/* Style des étiquettes */
.message-container .input-label {
    display: block;
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.8em;
    color: #333;
    text-align: center;
    width: 100%;
    /* Assure que le label est de la même largeur que l'input */
    margin-left: auto;
    /* Centrer horizontalement par rapport à l'input */
    margin-right: auto;
    /* Centrer horizontalement par rapport à l'input */
}

/* Style des champs d'entrée */
.message-container .input-field {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #b2602a;
    border-radius: 5px;
    display: block;
    margin-left: auto;
    /* Centrer horizontalement */
    margin-right: auto;
    /* Centrer horizontalement */
    background-color: #FFF8F0;
}

.message-container .modal-button {
    padding: 8px 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #b2602a;
    display: block;
    margin: auto;
}

.message-container .modal-button:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

/* Page mon compte */
.account-principal {
    width: 40%;
    background-color: #fef4e8;
    margin: 60px auto 10px;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #b2602a;
}

.account-container {
    flex-grow: 1;
    /* Permet à l'account-container de s'étirer */
}

.account-container h2 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.account-container .account-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9em;
}

.account-container .account-table th {
    border: 1px solid #b2602a;
    padding: 10px;
    text-align: left;
}

.account-container .account-table td {
    border: 1px solid #b2602a;
    padding: 10px;
    text-align: right;
}

.account-container .account-table td.account-value {
    text-align: left;
    margin-left: 2px;
    font-weight: bold;
}

.account-container .account-table td.account-input {
    text-align: center;
}

.account-container .account-table td.table-button {
    text-align: center;
}

.account-container .account-table th {
    background-color: #b2602a;
    color: #fff;
}

.account-container .account-table td {
    background-color: none;
}

.account-container .account-table td input {
    width: 80%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #b2602a;
    border-radius: 5px;
    background-color: #FFF8F0;
}

/* Séparateur */
.account-container hr {
    border: 1px solid #b2602a;
    margin: 20px 0;
}

.account-container .modal-button2 {
    padding: 8px 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #b2602a;
}

.account-container .modal-button2:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

/* Responsivité */
@media (max-width: 768px) {
    .account-principal {
        width: 80%;
    }

    .account-container .account-table td input {
        width: 80%;
        font-size: 0.9em;
    }

    /* Page contact */
    .message-principal {
        width: 80%;
    }
}

/* Page mon mariage */
.mymariage-container {
    display: flex;
    align-items: flex-start;
    /* Alignement en haut */
    gap: 1%;
    /* Espacement entre les éléments */
    margin-top: 50px;
    padding: 10px;
    position: relative;
}

/* Formulaire qui prend 20% de l'espace */
.mymariage-container .mymariage-form-container {
    background-color: #fef4e8;
    flex: 0 0 22%;
    /* Ne grandit pas, largeur fixe de 20% */
    border-radius: 8px;
    border: 1px solid #b2602a;
}

.mymariage-container .mymariage-form-container h2 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.mymariage-container .mymariage-form-container p {
    font-size: 0.9rem;
    text-align: center;
}

.mymariage-container .mymariage-form-container .p-label {
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.8em;
    color: #333;
    text-align: center;
}

.mymariage-container .mymariage-form-container form {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.mymariage-container .mymariage-form-container form input {
    margin-bottom: 10px;
    padding: 10px;
    font-size: 1.2em;
    border: 1px solid #b2602a;
    border-radius: 5px;
    background-color: #FFF8F0;
}

.mymariage-container .mymariage-form-container form .input-label {
    display: block;
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.8em;
    color: #333;
    text-align: left;
    width: 100%;
    /* Assure que le label est de la même largeur que l'input */
    margin-left: auto;
    /* Centrer horizontalement par rapport à l'input */
    margin-right: auto;
    /* Centrer horizontalement par rapport à l'input */
}

.mymariage-container .mymariage-form-container .modal-button {
    padding: 8px 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #b2602a;
}

.mymariage-container .mymariage-form-container .modal-button:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

.mariage-gestion-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    gap: 10px;
    justify-content: center;
    padding: 10px;
}

.mariage-gestion-container .modal-button2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    background: none;
    border: 1px solid #b2602a;
    color: #333;
    border-radius: 6px;
    transition: 0.3s;
    font-size: 0.8rem;
}

.mariage-gestion-container .modal-button2 img {
    width: 30px;
    /* Taille de l'icône */
    height: 30px;
    margin-bottom: 5px;
}

.mariage-gestion-container .modal-button2:hover {
    background-color: #b2602a;
    color: white;
}

.mariage-gestion-container .modal-button2.active {
    background-color: #b2602a;
    color: white;
    text-decoration: underline;
}

/* Container pour les informations sur le mariage */
.mymariage-container .mymariage-form-container .mariage-info-container {
    position: relative;
    background-image: url('https://my-mariage.com/img/mymariageimg.png');
    background-size: cover;
    background-position: center;
    text-align: center;
    height: 250px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    /* Permet de répartir les éléments verticalement */
}

/* Conteneur des prénoms avec le cœur */
.mymariage-container .mymariage-form-container .mariage-info-container .mariage-names {
    height: 70%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 2.0rem;
    font-weight: bold;
    font-family: 'Thuressia';
    color: #ffffff;
    /* Ajouter un contour au texte */
    text-shadow:
        2px 2px 2px rgba(0, 0, 0, 1),
        /* Ombre à droite et en bas */
        -2px -2px 2px rgba(0, 0, 0, 1),
        /* Ombre à gauche et en haut */
        2px -2px 2px rgba(0, 0, 0, 1),
        /* Ombre à gauche et en haut */
        -2px 2px 2px rgba(0, 0, 0, 1);
    /* Ombre à droite et en bas */
}

#countdown {
    height: 30%;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    /* Organise en colonne */
    justify-content: center;
    align-items: center;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    color: white;
    padding: 5px 0px 5px 0px;
    /* Ajustement du padding */
}

/* Style pour la date du mariage */
.mariage-date {
    font-size: 1.0rem;
    font-style: italic;
    text-align: center;
    width: 100%;
    font-weight: bold;
}

#countdown hr {
    border: 1px solid white;
    width: 10%;
}

/* Conteneur des blocs de compte à rebours */
.countdown-items {
    display: flex;
    justify-content: center;
    gap: 2px;
    /* Espacement réduit pour éviter le débordement */
    width: 80%;
}

/* Style des éléments du compte à rebours */
.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    /* Utilisation de % pour s’adapter à la largeur */
    min-width: 60px;
    /* Empêche de devenir trop petit */
    flex: 1 1 auto;
    /* Permet aux éléments de s’adapter */
}

/* Réduction de la taille du texte sur les petits écrans */
.countdown-item span {
    text-align: center;
}

.countdown-item #days,
.countdown-item #hours,
.countdown-item #minutes,
.countdown-item #seconds {
    font-size: 1.1rem;
}

.unit {
    font-size: 0.7rem;
    margin-top: 3px;
}

/* Ajout de media queries pour une meilleure adaptation */
@media screen and (max-width: 400px) {
    .countdown-item {
        width: 40px;
        /* Réduction de la largeur sur très petits écrans */
    }

    .countdown-item #days,
    .countdown-item #hours,
    .countdown-item #minutes,
    .countdown-item #seconds {
        font-size: 1rem;
    }

    .unit {
        font-size: 0.6rem;
    }
}

.mymariage-container #mymariage-main-container {
    background-color: #fef4e8;
    flex: 0 0 65%;
    position: relative;
    /* Nécessaire pour que le bouton soit positionné par rapport à ce conteneur */
    border-radius: 8px;
    border: 1px solid #b2602a;
}

#mymariage-main-container #container-toggle h2 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

#mymariage-main-container #container-toggle {
    width: 90%;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 8px;
    background: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    /* Permet aux items de passer à la ligne si besoin */
    gap: 10px;
    /* Espacement entre les éléments */
    justify-content: flex-start;
    /* Aligner les items au début */
    border: 1px solid #b2602a;
}

#mymariage-main-container #container-toggle #mariageSections {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Alignement à gauche */
    width: 100%;
    /* Prend toute la largeur */
}

#mymariage-main-container #container-toggle h2 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    width: 100%;
}

#mymariage-main-container #container-toggle .toggle-section {
    width: 100%;
    /* Pour que chaque section prenne toute la largeur */
    border-bottom: 1px solid rgba(185, 128, 48, 0.5);
}

#mymariage-main-container #container-toggle .toggle-section span {
    margin-left: 5px;
}

#mymariage-main-container #container-toggle .toggle-button {
    cursor: pointer;
    padding: 10px;
}

#mymariage-main-container #container-toggle .invites-columns-intoggle {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: auto;
    padding: 10px;
}

/* Conteneur principal */
#mymariage-main-container #container-toggle .total-invites-container-toggle {
    max-width: 90%;
    width: 50%;
    margin: 20px auto 0 auto;
    padding: 10px;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Espace entre les éléments */
    background-color: transparent;
}

/* Barre de progression */
#mymariage-main-container #container-toggle .total-invites-container-toggle .progress-bar-container {
    width: 100%;
    height: 5px;
    background-color: #333;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    margin: 0px 0;
}

/* Barre verte pour les invités confirmés */
#mymariage-main-container #container-toggle .total-invites-container-toggle .progress-bar {
    height: 100%;
    transition: width 0.5s ease-in-out;
}

#mymariage-main-container #container-toggle .total-invites-container-toggle .confirmed {
    background-color: rgb(0, 128, 0);
}

#mymariage-main-container #container-toggle .total-invites-container-toggle .not-confirmed {
    background-color: rgb(255, 0, 0);
}

/* Texte sous la barre de progression */
#mymariage-main-container #container-toggle .total-invites-container-toggle .progress-text {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: bold;
}

#mymariage-main-container #container-toggle .total-invites-container-toggle .total-confirmed {
    color: rgb(0, 128, 0);
    text-align: left;
}

#mymariage-main-container #container-toggle .total-invites-container-toggle .total-invites {
    color: black;
    text-align: center;
}

#mymariage-main-container #container-toggle .total-invites-container-toggle .total-not-confirmed {
    color: rgb(255, 0, 0);
    text-align: right;
}

/* 🔹 Responsive Design */
@media screen and (max-width: 800px) {
    #mymariage-main-container #container-toggle .total-invites-container-toggle {
        width: 95%;
    }

    #mymariage-main-container #container-toggle .total-invites-container-toggle .progress-bar-container {
        height: 5px;
    }

    #mymariage-main-container #container-toggle .total-invites-container-toggle .total-confirmed,
    #mymariage-main-container #container-toggle .total-invites-container-toggle .total-invites,
    #mymariage-main-container #container-toggle .total-invites-container-toggle .total-not-confirmed {
        font-size: 0.7rem;
    }
}

#mymariage-main-container #container-toggle #mycategories-list-intoggle {
    width: 70%;
    padding: 10px;
    border-radius: 8px;
    background: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    /* Permet aux items de passer à la ligne si besoin */
    gap: 10px;
    /* Espacement entre les éléments */
    justify-content: flex-start;
    /* Aligner les items au début */
    margin-bottom: 10px;
}

/* Élément de catégorie */
#mymariage-main-container #container-toggle #mycategories-list-intoggle .category-item-intoggle {
    display: flex;
    align-items: center;
    background: none;
    border-radius: 8px;
    transition: background 0.3s ease;
    padding: 10px;
    flex: 1 1 calc(33.33% - 10px);
    /* Largeur de 3 colonnes par ligne avec gap */
    max-width: calc(33.33% - 10px);
    /* Empêcher les éléments de dépasser */
    box-sizing: border-box;
    border: 1px solid #b2602a;
}

/* Nom de la catégorie */
#mymariage-main-container #container-toggle #mycategories-list-intoggle .category-name-intoggle {
    font-weight: bold;
    color: #333;
    flex-grow: 1;
    /* Permet d'occuper l'espace restant */
    font-size: 0.9rem;
    max-width: 90%;
    padding: 10px;
    text-align: center;
}

#mymariage-main-container #container-toggle #tables-container-intoggle {
    width: 80%;
    padding: 10px;
    border-radius: 8px;
    background: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    /* Permet aux items de passer à la ligne si besoin */
    gap: 10px;
    /* Espacement entre les éléments */
    justify-content: flex-start;
    /* Aligner les items au début */
    max-height: 600px;
    overflow: auto;
}

/* Conteneur principal de l'article */
#mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle {
    display: flex;
    flex-direction: column;
    background: none;
    border-radius: 8px;
    padding: 15px;
    position: relative;
    box-sizing: border-box;
    flex: 1 1 calc(33.33% - 10px);
    max-width: calc(33.33% - 10px);
    border: 1px solid #b2602a;
}

/* Nom de l'article en haut à gauche */
#mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle .article-categorie-intoggle {
    font-weight: bold;
    color: #333;
    font-size: 0.9rem;
    position: absolute;
    top: 10px;
    left: 10px;
}

/* Conteneur des prix et fournisseur */
#mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle .article-info-intoggle {
    display: flex;
    flex-direction: column;
    /* Pour éviter de superposer avec le titre et les boutons */
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Style des éléments de la liste */
#mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle .article-details-intoggle,
#mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle .article-price-intoggle,
#mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle .article-totalprice-intoggle,
#mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle .article-acompte-intoggle,
#mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle .article-fournisseur-intoggle {
    font-size: 0.9rem;
    margin-top: 5px;
    color: #555;
}

/* Nom de l'article en haut à gauche */
#mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle .article-status-intoggle {
    font-weight: bold;
    color: #333;
    font-size: 0.9rem;
    position: absolute;
    bottom: 10px;
    left: 10px;
}

@media (max-width: 1600px) {
    #mymariage-main-container #container-toggle #tables-container-intoggle {
        width: 80%;
        padding: 5px;
    }

    /* Conteneur principal de l'article */
    #mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle {
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        padding: 15px;
        position: relative;
        box-sizing: border-box;
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    /* Nom de l'article en haut à gauche */
    #mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle .article-categorie-intoggle {
        font-weight: bold;
        color: #333;
        font-size: 0.9rem;
        position: absolute;
        top: 10px;
        left: 10px;
    }
}

@media (max-width: 1100px) {
    #mymariage-main-container #container-toggle #tables-container-intoggle {
        width: 90%;
        padding: 5px;
    }

    #mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Nom de l'article en haut à gauche */
    #mymariage-main-container #container-toggle #tables-container-intoggle .articles-item-intoggle .article-categorie-intoggle {
        font-weight: bold;
        color: #333;
        font-size: 0.9rem;
        position: absolute;
        top: 10px;
        left: 10px;
    }
}

/* Conteneur des tâches */
#mymariage-main-container #container-toggle #mytaches-list-intoggle {
    width: 70%;
    padding: 10px;
    border-radius: 8px;
    background: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    /* Permet aux éléments de passer à la ligne si besoin */
    gap: 15px;
    /* Espacement entre les éléments */
    justify-content: center;
    /* Centrer les éléments horizontalement */
    max-height: 600px;
    overflow: auto;
    word-break: break-all;
    margin-bottom: 10px;
}

/* Éléments de tâche */
#mymariage-main-container #container-toggle #mytaches-list-intoggle .tache-item-intoggle {
    display: flex;
    flex-direction: column;
    background: none;
    border-radius: 8px;
    transition: background 0.3s ease;
    padding: 15px;
    width: calc(50% - 15px);
    /* 3 tâches par ligne avec espacement */
    position: relative;
    /* Permet de positionner les boutons */
    box-sizing: border-box;
    border: 1px solid #b2602a;
}

#mymariage-main-container #container-toggle #mytaches-list-intoggle .tache-priority-intoggle {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 0.8rem;
}

/* Style du calendrier */
#mymariage-main-container #container-toggle #mytaches-list-intoggle .calendar-intoggle {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 60px;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* En-tête du calendrier (mois) */
#mymariage-main-container #container-toggle #mytaches-list-intoggle .calendar-header-intoggle {
    background: #b2602a;
    color: white;
    font-weight: bold;
    padding: 5px 0;
    font-size: 0.8rem;
}

/* Corps du calendrier */
#mymariage-main-container #container-toggle #mytaches-list-intoggle .calendar-body-intoggle {
    background: white;
    padding: 5px 0;
}

/* Jour */
#mymariage-main-container #container-toggle #mytaches-list-intoggle .calendar-day-intoggle {
    font-size: 1.0rem;
    font-weight: bold;
    color: black;
}

/* Année */
#mymariage-main-container #container-toggle #mytaches-list-intoggle .calendar-year-intoggle {
    font-size: 0.8rem;
    color: gray;
}

/* Nom de la tâche (centré) */
#mymariage-main-container #container-toggle #mytaches-list-intoggle .tache-title-intoggle {
    position: absolute;
    top: 35px;
    left: 15px;
    font-weight: bold;
    color: #333;
    font-size: 1rem;
    margin-bottom: 5px;
    /* Espacement avec les détails */
}

/* Détails de la tâche (en dessous) */
#mymariage-main-container #container-toggle #mytaches-list-intoggle .tache-details-intoggle {
    color: #666;
    text-align: center;
    /* Centrage du texte */
    font-size: 0.9rem;
    margin-bottom: 30px;
}

#mymariage-main-container #container-toggle #mytaches-list-intoggle .tache-item-intoggle .tache-actions2-intoggle {
    font-weight: bold;
    color: #333;
    font-size: 0.9rem;
    position: absolute;
    bottom: 10px;
    left: 10px;
}

@media (max-width: 1100px) {

    /* Conteneur des tâches */
    #mymariage-main-container #container-toggle #mytaches-list-intoggle {
        width: 90%;
    }

    /* Éléments de tâche */
    #mymariage-main-container #container-toggle #mytaches-list-intoggle .tache-item-intoggle {
        width: 100%;
    }

    /* Nom de la tâche (centré) */
    #mymariage-main-container #container-toggle #mytaches-list-intoggle .tache-title-intoggle {
        font-size: 0.85rem;
        margin-bottom: 5px;
        /* Espacement avec les détails */
    }

    #mymariage-main-container #container-toggle #mytaches-list-intoggle .tache-details-intoggle {
        /* Espacement avec les détails */
        margin-bottom: 30px;
    }
}

/* Conteneur des tâches */
#mymariage-main-container #container-toggle #myplannings-list-intoggle {
    width: 50%;
    padding: 10px;
    border-radius: 8px;
    background: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    /* Permet aux éléments de passer à la ligne si besoin */
    gap: 15px;
    /* Espacement entre les éléments */
    justify-content: center;
    /* Centrer les éléments horizontalement */
    max-height: 600px;
    overflow: auto;
}

/* Éléments de tâche */
#mymariage-main-container #container-toggle #myplannings-list-intoggle .planning-item-intoggle {
    display: flex;
    flex-direction: column;
    background: none;
    border-radius: 8px;
    transition: background 0.3s ease;
    padding: 15px;
    width: 100%;
    /* 3 tâches par ligne avec espacement */
    position: relative;
    /* Permet de positionner les boutons */
    box-sizing: border-box;
    word-break: break-all;
    border: 1px solid #b2602a;
}

/* Style du calendrier */
#mymariage-main-container #container-toggle #myplannings-list-intoggle .calendar-intoggle {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 60px;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* En-tête du calendrier (mois) */
#mymariage-main-container #container-toggle #myplannings-list-intoggle .calendar-header-intoggle {
    background: #b2602a;
    color: white;
    font-weight: bold;
    padding: 5px 0;
    font-size: 0.8rem;
}

/* Corps du calendrier */
#mymariage-main-container #container-toggle #myplannings-list-intoggle .calendar-body-intoggle {
    background: white;
    padding: 5px 0;
}

/* Jour */
#mymariage-main-container #container-toggle #myplannings-list-intoggle .calendar-hour-intoggle {
    font-size: 1.0rem;
    font-weight: bold;
    color: black;
}


/* Nom de la tâche (centré) */
#mymariage-main-container #container-toggle #myplannings-list-intoggle .planning-details-intoggle {
    color: #666;
    text-align: center;
    /* Centrage du texte */
    font-size: 0.9rem;
    margin-top: 70px;
}

@media (max-width: 1100px) {

    /* Conteneur des planning */
    #mymariage-main-container #container-toggle #myplannings-list-intoggle {
        width: 90%;
    }

    /* Éléments de tâche */
    #mymariage-main-container #container-toggle #myplannings-list-intoggle .planning-item-intoggle {
        width: 100%;
    }
}

#mymariage-main-container #container-toggle #mystats-intoggle {
    width: 70%;
    padding: 10px;
    border-radius: 8px;
    background: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: auto;
    margin-bottom: 10px;
}

/* Réduire l'espacement dans le conteneur des cercles */
#mymariage-main-container #container-toggle #mystats-intoggle .progress-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    /* Espacement réduit entre les cercles */
    flex-wrap: wrap;
    /* Permet le retour à la ligne si nécessaire */
    margin: 0;
    /* Supprime la marge autour du conteneur */
}

/* Réduire l'espacement des éléments contenant les cercles */
#mymariage-main-container #container-toggle #mystats-intoggle .progress-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 5px;
    /* Réduit l'espacement sous chaque élément */
}

/* Style général des cercles */
#mymariage-main-container #container-toggle #mystats-intoggle .progress-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Progression des invités */
#mymariage-main-container #container-toggle #mystats-intoggle .progress-circle {
    background: conic-gradient(green 0% calc(var(--confirmes) * 1%),
            red calc(var(--confirmes) * 1%) 100%);
}

/* Progression des tâches */
#mymariage-main-container #container-toggle #mystats-intoggle .progress-circle.tasks {
    background: conic-gradient(green 0% calc(var(--done) * 1%),
            red calc(var(--done) * 1%) 100%);
}

/* Cercle intérieur */
#mymariage-main-container #container-toggle #mystats-intoggle .progress-circle::before {
    content: "";
    position: absolute;
    width: 85px;
    height: 85px;
    background: #b2602a;
    border-radius: 50%;
}

/* Texte au centre des cercles */
#mymariage-main-container #container-toggle #mystats-intoggle .progress-circle .progress-text {
    position: absolute;
    flex-direction: column;
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 2;
}

/* Texte sous chaque cercle */
#mymariage-main-container #container-toggle #mystats-intoggle .progress-label {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

/* Réduire l'espacement dans les sections statistiques */
#mymariage-main-container #container-toggle #mystats-intoggle .stats-section {
    width: 100%;
    padding: 5px 0;
    /* Réduit l'espace autour de chaque section */
    text-align: center;
    margin: 0;
    /* Supprime les marges de la section */
}

/* Marges sous les titres dans les sections */
#mymariage-main-container #container-toggle #mystats-intoggle .stats-title {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

/* Espacement entre le contenu et le séparateur */
#mymariage-main-container #container-toggle #mystats-intoggle .separator {
    width: 60%;
    border: 1px solid #b2602a;
    /* Couleur de la ligne */
    margin: 0px auto;
    /* Réduit l'espacement autour du séparateur */
}

/* Espacement entre les éléments dans la légende */
#mymariage-main-container #container-toggle #mystats-intoggle .stats-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    /* Espacement réduit entre les éléments */
    width: 100%;
    padding: 5px 0;
    /* Réduit l'espacement entre les éléments */
    margin-bottom: 0;
}

/* Ajout d'une marge nulle pour les divs dans la légende */
#mymariage-main-container #container-toggle #mystats-intoggle .stats-legend div {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    white-space: nowrap;
    /* Empêche les textes de se couper */
    margin: 0;
    /* Supprime la marge entre les éléments */
}

#mymariage-main-container #container-toggle #mystats-intoggle .stats-legend span.color-box {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
}

/* Couleurs pour chaque catégorie */
#mymariage-main-container #container-toggle #mystats-intoggle .confirmed .color-box {
    background-color: green;
}

#mymariage-main-container #container-toggle #mystats-intoggle .non-confirmed .color-box {
    background-color: red;
}

#mymariage-main-container #container-toggle #mystats-intoggle .total .color-box {
    background-color: #b2602a;
}

/* Couleurs */
#mymariage-main-container #container-toggle #mystats-intoggle .done .color-box {
    background-color: green;
}

#mymariage-main-container #container-toggle #mystats-intoggle .remaining .color-box {
    background-color: red;
}

#mymariage-main-container #container-toggle #mystats-intoggle .total .color-box {
    background-color: #b2602a;
}

/* Tableau qui prend 70% de l'espace */
.mymariage-container #mymariage-table-container {
    background-color: #fef4e8;
    flex: 0 0 65%;
    position: relative;
    /* Nécessaire pour que le bouton soit positionné par rapport à ce conteneur */
    border-radius: 8px;
    border: 1px solid #b2602a;
}

.mymariage-container #mymariage-table-container .plusbutton {
    width: 40px;
    /* Taille du bouton */
    height: 40px;
    border-radius: 50%;
    /* Rend le bouton parfaitement rond */
    background-color: #b2602a;
    /* Couleur orange */
    color: #fff;
    font-size: 1.0rem;
    /* Taille du "+" */
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;

    /* Positionnement en bas à droite */
    position: absolute;
    top: 20px;
    right: 20px;
}

.mymariage-container #mymariage-table-container .plusbutton:hover {
    background-color: #b2602a;
    /* Orange plus foncé au survol */
    opacity: 0.8;
}

.mymariage-container #mymariage-table-container h2 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.mymariage-container #mymariage-table-container .form-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    /* Permet aux éléments de se placer sur plusieurs lignes */
    text-align: center;
    margin-top: 20px;
}

.mymariage-container #mymariage-table-container .form-row .input-label {
    display: block;
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.8em;
    color: #333;
    text-align: center;
    width: 100%;
    /* Assure que le label est de la même largeur que l'input */
    margin-left: auto;
    /* Centrer horizontalement par rapport à l'input */
    margin-right: auto;
    /* Centrer horizontalement par rapport à l'input */
}

.mymariage-container #mymariage-table-container .input-group {
    flex: 1;
}

.mymariage-container #mymariage-table-container label {
    font-size: 1rem;
    margin-bottom: 5px;
}

.mymariage-container #mymariage-table-container .form-row .input-group input,
.mymariage-container #mymariage-table-container .form-row select {
    width: 75%;
    padding: 10px;
    font-size: 1em;
    border: 1px solid #b2602a;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #FFF8F0;
}

.mymariage-container #mymariage-table-container .form-row select {
    margin-top: -10px;
}

.mymariage-container #mymariage-table-container button.modal-button2 {
    display: block;
    padding: 8px 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #b2602a;
    margin: 10px auto;
    /* Centre horizontalement */
    text-align: center;
}

.mymariage-container #mymariage-table-container button.modal-button2:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

.mymariage-container #mymariage-table-container .search-filter {
    display: flex;
    flex-direction: column;
    /* Aligne les éléments verticalement */
    align-items: center;
    /* Centre les éléments horizontalement */
    gap: 10px;
    /* Espace entre le titre et les champs */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    text-align: center;
}

.mymariage-container #mymariage-table-container .search-inputs {
    display: flex;
    justify-content: center;
    gap: 20px;
    /* Espace entre le champ de recherche et le filtre */
    width: 100%;
}

.mymariage-container #mymariage-table-container #search-bar {
    padding: 10px;
    font-size: 1rem;
    text-align: center;
    border: 1px solid #b2602a;
    border-radius: 5px;
    width: 60%;
    /* Largeur du champ de recherche */
    background-color: #FFF8F0;
}

.mymariage-container #mymariage-table-container #status-filter {
    padding: 10px;
    font-size: 1rem;
    text-align: center;
    border: 1px solid #b2602a;
    border-radius: 5px;
    width: 30%;
    /* Largeur du filtre */
    background-color: #FFF8F0;
}

.mymariage-container #mymariage-table-container #total-container {
    width: 30%;
    margin: 20px auto;
    padding: 10px;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background-color: transparent;
}

.mymariage-container #mymariage-table-container #total-container p {
    margin: 0;
    padding: 2px 0;
    /* Diminue encore l'espacement interne */
    font-size: 0.80rem;
    line-height: 1.2;
    /* Réduit l'espacement vertical */
}

.mymariage-container #mymariage-table-container #total-container .progress-bar-container {
    width: 60%;
    height: 5px;
    background-color: #333;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    margin: 0;
    /* Supprime tout espacement supplémentaire */
}

.mymariage-container #mymariage-table-container #total-container .progress-bar {
    height: 100%;
    transition: width 0.5s ease-in-out;
}

.mymariage-container #mymariage-table-container #total-container .remaining {
    background-color: rgb(255, 0, 0);
    /* Rouge pour l'argent restant */
}

.mymariage-container #mymariage-table-container #total-container .remaining-price {
    color: rgb(255, 0, 0);
}

.mymariage-container #mymariage-table-container #category-buttons {
    margin-top: 20px;
    text-align: center;
}

.mymariage-container #mymariage-table-container #category-buttons #category-dropdown-container {
    text-align: center;
    margin-top: 20px;
}

.mymariage-container #mymariage-table-container #category-buttons #category-dropdown {
    padding: 10px;
    font-size: 1rem;
    border-radius: 6px;
    border: 1px solid #b2602a;
    background-color: #FFF8F0;
}

.mymariage-container #mymariage-table-container .category-button .count {
    color: white;
}

.mymariage-container #mymariage-table-container #tables-container {
    width: 80%;
    margin-top: 40px;
    padding: 10px;
    border-radius: 8px;
    background: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    /* Permet aux items de passer à la ligne si besoin */
    gap: 10px;
    /* Espacement entre les éléments */
    justify-content: flex-start;
    /* Aligner les items au début */
    border: none;
    max-height: 600px;
    overflow: auto;
}

/* Centrer le titre h2 au-dessus des articles */
.mymariage-container #mymariage-table-container #tables-container h2 {
    width: 100%;
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

/* Conteneur principal de l'article */
.mymariage-container #mymariage-table-container #tables-container .articles-item {
    display: flex;
    flex-direction: column;
    background: none;
    border-radius: 8px;
    padding: 15px;
    position: relative;
    box-sizing: border-box;
    flex: 1 1 calc(33.33% - 10px);
    max-width: calc(33.33% - 10px);
    border: 1px solid #b2602a;
}

/* Nom de l'article en haut à gauche */
.mymariage-container #mymariage-table-container #tables-container .articles-item .article-details {
    font-weight: bold;
    color: #333;
    font-size: 0.9rem;
    position: absolute;
    top: 10px;
    left: 10px;
}

.mymariage-container #mymariage-table-container #tables-container .articles-item hr {
    border: 1px solid #b2602a;
    width: 50%;
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .contact-buttons {
    width: 100%;
    margin-top: 10px;
    display: flex;
    gap: 5px;
    /* Espace entre les boutons */
    justify-content: center;
    /* Centre les boutons horizontalement */
    align-items: center;
    /* Centre les boutons verticalement */
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .contact-button {
    padding: 10px 20px;
    background-color: #b2602a;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    /* Aligner l'icône et le texte en colonne */
    align-items: center;
    /* Centrer le texte sous l'icône */
    flex-grow: 1;
    /* Permet aux boutons de prendre la même largeur */
    justify-content: center;
    /* Centre l'icône et le texte à l'intérieur du bouton */
    height: 50px;
    /* Fixer la hauteur de chaque bouton */
    max-width: 25%;
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .contact-button i {
    font-size: 1.2rem;
    margin-bottom: 5px;
    /* Espace entre l'icône et le texte */
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .button-text {
    font-size: 0.8rem;
    text-transform: capitalize;
    /* Mettre la première lettre en majuscule */
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .contact-button:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .facture-buttons {
    width: 100%;
    display: flex;
    gap: 5px;
    /* Espace entre les boutons */
    justify-content: center;
    /* Centre les boutons horizontalement */
    align-items: center;
    /* Centre les boutons verticalement */
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .facture-button {
    padding: 10px 20px;
    background-color: #b2602a;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    /* Aligner l'icône et le texte en colonne */
    align-items: center;
    /* Centrer le texte sous l'icône */
    flex-grow: 1;
    /* Permet aux boutons de prendre la même largeur */
    justify-content: center;
    /* Centre l'icône et le texte à l'intérieur du bouton */
    height: 50px;
    /* Fixer la hauteur de chaque bouton */
    max-width: 25%;
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .facture-button i {
    font-size: 1.2rem;
    margin-bottom: 5px;
    /* Espace entre l'icône et le texte */
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .facture-button:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

@media (max-width: 1600px) {
    .mymariage-container #mymariage-table-container #tables-container {
        width: 80%;
        padding: 5px;
    }

    /* Conteneur principal de l'article */
    .mymariage-container #mymariage-table-container #tables-container .articles-item {
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        padding: 15px;
        position: relative;
        box-sizing: border-box;
        flex: 1 1 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    /* Nom de l'article en haut à gauche */
    .mymariage-container #mymariage-table-container #tables-container .articles-item .article-details {
        font-weight: bold;
        color: #333;
        font-size: 0.9rem;
        position: absolute;
        top: 10px;
        left: 10px;
    }
}

@media (max-width: 1100px) {
    .mymariage-container #mymariage-table-container #tables-container {
        width: 90%;
        padding: 5px;
    }

    .mymariage-container #mymariage-table-container #tables-container .articles-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Nom de l'article en haut à gauche */
    .mymariage-container #mymariage-table-container #tables-container .articles-item .article-details {
        font-weight: bold;
        color: #333;
        font-size: 0.9rem;
        position: absolute;
        top: 40px;
        left: 10px;
    }
}

/* Boutons d'action en haut à droite */
.mymariage-container #mymariage-table-container #tables-container .articles-item .article-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

/* Conteneur des prix et fournisseur */
.mymariage-container #mymariage-table-container #tables-container .articles-item .article-info {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    /* Pour éviter de superposer avec le titre et les boutons */
}

/* Style des éléments de la liste */
.mymariage-container #mymariage-table-container #tables-container .articles-item .article-price,
.mymariage-container #mymariage-table-container #tables-container .articles-item .article-totalprice,
.mymariage-container #mymariage-table-container #tables-container .articles-item .article-acompte,
.mymariage-container #mymariage-table-container #tables-container .articles-item .article-fournisseur,
.mymariage-container #mymariage-table-container #tables-container .articles-item .article-fournisseur-mail,
.mymariage-container #mymariage-table-container #tables-container .articles-item .article-fournisseur-telephone {
    font-size: 0.9rem;
    margin-top: 5px;
    color: #555;
}

/* Boutons */
.mymariage-container #mymariage-table-container #tables-container .articles-item .article-actions button {
    border: none;
    background: none;
    cursor: pointer;
    padding: 5px 5px;
    font-size: 1rem;
    transition: transform 0.2s;
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .article-actions button.edit-button i {
    color: #36A2EB;
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .article-actions button.remove-button i {
    color: red;
}

.mymariage-container #mymariage-table-container #tables-container .articles-item .article-actions button:hover {
    transform: scale(1.2);
}

/* Conteneur des prix et fournisseur */
.mymariage-container #mymariage-table-container #tables-container .articles-item .article-info select {
    width: 120px;
    margin-top: 10px;
}

/* Bord rouge pour le select si "Pas fait" */
.mymariage-container #mymariage-table-container #tables-container .articles-item select.not-done {
    border: 2px solid red;
    border-radius: 8px;
    padding: 2px;
    color: red;
    /* Applique la couleur rouge à la sélection */
}

/* Bord vert pour le select si "Fait" */
.mymariage-container #mymariage-table-container #tables-container .articles-item select.done {
    border: 2px solid green;
    border-radius: 8px;
    padding: 2px;
    color: green;
    /* Applique la couleur verte à la sélection */
}

/* Lorsqu'un select est focusé, il conserve la couleur de son état */
.mymariage-container #mymariage-table-container #tables-container .articles-item select.not-done:focus {
    border: 2px solid red;
    /* Garde la bordure rouge lors du focus */
    outline: none;
    /* Enlève l'outline par défaut */
}

.mymariage-container #mymariage-table-container #tables-container .articles-item select.done:focus {
    border: 2px solid green;
    /* Garde la bordure verte lors du focus */
    outline: none;
    /* Enlève l'outline par défaut */
}

/* Styles pour les articles marqués comme "done" */
.articles-item.done {
    background: rgba(0, 128, 0, 0.1) !important;
    transition: all 0.3s ease-in-out;
    /* Animation fluide */
    position: relative;
}

/* Barrer tout le texte */
.articles-item.done .article-details,
.articles-item.done .article-price,
.articles-item.done .article-totalprice,
.articles-item.done .article-acompte,
.articles-item.done .article-fournisseur,
.articles-item.done .article-fournisseur-mail,
.articles-item.done .article-fournisseur-telephone {
    color: #666;
    /* Texte grisé */
    text-decoration: line-through;
    /* Texte barré */
}

.mymariage-container #mymariage-categories-container {
    background-color: #fef4e8;
    flex: 0 0 65%;
    position: relative;
    /* Nécessaire pour que le bouton soit positionné par rapport à ce conteneur */
    border-radius: 8px;
    border: 1px solid #b2602a;
}

.mymariage-container #mymariage-categories-container .plusbutton {
    width: 40px;
    /* Taille du bouton */
    height: 40px;
    border-radius: 50%;
    /* Rend le bouton parfaitement rond */
    background-color: #b2602a;
    /* Couleur orange */
    color: #fff;
    font-size: 1.0rem;
    /* Taille du "+" */
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;

    /* Positionnement en bas à droite */
    position: absolute;
    top: 20px;
    right: 20px;
}

.mymariage-container #mymariage-categories-container .plusbutton:hover {
    /* Le bouton grossit au survol */
    background-color: #b2602a;
    /* Orange plus foncé au survol */
    opacity: 0.8;
}

/* Titres */
.mymariage-container #mymariage-categories-container h2,
.mymariage-container #mymariage-categories-container h3 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.mymariage-container #mymariage-categories-container #new-category,
.mymariage-container #mymariage-categories-container #edit-name-category {
    width: 40%;
    /* Largeur ajustable */
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #b2602a;
    font-size: 14px;
    text-align: center;
}

.mymariage-container #mymariage-categories-container .modal-button2 {
    padding: 8px 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #b2602a;
}

.mymariage-container #mymariage-categories-container .modal-button2:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

/* Liste des catégories */
#mymariage-categories-container #mycategories-list {
    width: 70%;
    margin-top: 40px;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 8px;
    background: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    /* Permet aux items de passer à la ligne si besoin */
    gap: 10px;
    /* Espacement entre les éléments */
    justify-content: flex-start;
    /* Aligner les items au début */
    border: none;
}

/* Élément de catégorie */
#mymariage-categories-container #mycategories-list .category-item {
    display: flex;
    align-items: center;
    background: none;
    border-radius: 8px;
    transition: background 0.3s ease;
    padding: 10px;
    flex: 1 1 calc(33.33% - 10px);
    /* Largeur de 3 colonnes par ligne avec gap */
    max-width: calc(33.33% - 10px);
    /* Empêcher les éléments de dépasser */
    box-sizing: border-box;
    border: 1px solid #b2602a;
}

/* Nom de la catégorie */
.mymariage-container #mymariage-categories-container #mycategories-list .category-name {
    font-weight: bold;
    color: #333;
    flex-grow: 1;
    /* Permet d'occuper l'espace restant */
    font-size: 0.9rem;
    max-width: 90%;
    padding: 10px;
}

/* Boutons d'action */
.mymariage-container #mymariage-categories-container #mycategories-list button.delete-category,
.mymariage-container #mymariage-categories-container #mycategories-list button.edit-category {
    border: none;
    cursor: pointer;
    padding: 10px 4px;
    border-radius: 4px;
    font-size: 1.0rem;
    transition: 0.3s;
    margin-right: 5px;
    background: none;
}

.mymariage-container #mymariage-categories-container #mycategories-list button.delete-category i {
    color: red;
}

.mymariage-container #mymariage-categories-container #mycategories-list button.edit-category i {
    color: #36A2EB;
}

.mymariage-container #mymariage-categories-container #mycategories-list button.delete-category:hover,
.mymariage-container #mymariage-categories-container #mycategories-list button.edit-category:hover {
    transform: scale(1.2);
    transition: transform 0.2s;
}

/* Style de la barre de défilement */
#mymariage-categories-container ::-webkit-scrollbar {
    width: 10px;
    /* Largeur de la barre de défilement */
}

/* Style de la "thumb" (la partie glissante de la barre) */
#mymariage-categories-container ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #b2602a, #923e14);
    /* Couleur de la "thumb" */
    border-radius: 10px;
    /* Bord arrondi pour la "thumb" */
    border: 3px solid #fff;
    /* Bordure blanche autour de la "thumb" */
}

/* Style de la "track" (la piste de la barre de défilement) */
#mymariage-categories-container ::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* Couleur de la piste */
    border-radius: 10px;
    /* Bord arrondi pour la piste */
}

/* Style de la barre de défilement au survol */
#mymariage-categories-container ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #b2602a, #923e14);
    /* Couleur plus foncée au survol */
}

.mymariage-container #mymariage-invites-container {
    background-color: #fef4e8;
    flex: 0 0 65%;
    /* Ne grandit pas, largeur fixe de 70% */
    position: relative;
    /* Nécessaire pour que le bouton soit positionné par rapport à ce conteneur */
    border-radius: 8px;
    border: 1px solid #b2602a;
}

.mymariage-container #mymariage-invites-container .plusbutton {
    width: 40px;
    /* Taille du bouton */
    height: 40px;
    border-radius: 50%;
    /* Rend le bouton parfaitement rond */
    background-color: #b2602a;
    /* Couleur orange */
    color: #fff;
    font-size: 1.0rem;
    /* Taille du "+" */
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;

    /* Positionnement en bas à droite */
    position: absolute;
    top: 20px;
    right: 20px;
}

.mymariage-container #mymariage-invites-container .plusbutton:hover {
    /* Le bouton grossit au survol */
    background-color: #b2602a;
    /* Orange plus foncé au survol */
    opacity: 0.8;
}

/* Titres */
.mymariage-container #mymariage-invites-container h2,
.mymariage-container #mymariage-invites-container h3 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.mymariage-container #mymariage-invites-container .search-invites-filter {
    display: flex;
    flex-direction: column;
    /* Aligne les éléments verticalement */
    align-items: center;
    /* Centre les éléments horizontalement */
    gap: 10px;
    /* Espace entre le titre et les champs */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    text-align: center;
}

.mymariage-container #mymariage-invites-container .search-inputs {
    display: flex;
    justify-content: center;
    gap: 20px;
    /* Espace entre le champ de recherche et le filtre */
    width: 100%;
}

.mymariage-container #mymariage-invites-container #search-invite {
    padding: 10px;
    font-size: 1rem;
    text-align: center;
    border: 1px solid #b2602a;
    border-radius: 5px;
    width: 60%;
    /* Largeur du champ de recherche */
    background-color: #FFF8F0;
}

.mymariage-container #mymariage-invites-container #filter-status {
    padding: 10px;
    font-size: 1rem;
    text-align: center;
    border: 1px solid #b2602a;
    border-radius: 5px;
    width: 30%;
    /* Largeur du filtre */
    background-color: #FFF8F0;
}

/* Style des étiquettes */
.mymariage-container #newinviteModal .input-label {
    display: block;
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.8em;
    color: #333;
    text-align: center;
    width: 80%;
    /* Assure que le label est de la même largeur que l'input */
    margin-left: auto;
    /* Centrer horizontalement par rapport à l'input */
    margin-right: auto;
    /* Centrer horizontalement par rapport à l'input */
}

.mymariage-container #newinviteModal input,
.mymariage-container #newinviteModal select {
    width: 50%;
    /* Largeur ajustable */
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #b2602a;
    font-size: 14px;
    text-align: center;
    background-color: #FFF8F0;
}

.mymariage-container #newinviteModal .modal-button2 {
    padding: 8px 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #b2602a;
}

.mymariage-container #newinviteModal .modal-button2:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

/* Style des colonnes d'invités */
.mymariage-container .invites-columns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 40px auto;
    padding: 10px;
}

.mymariage-container .invites-column {
    width: 100%;
    /* Vous pouvez ajuster la largeur selon vos besoins */
    padding: 10px;
    border-radius: 5px;
    background-color: none;
    text-align: center;
    border: 1px solid #b2602a;
}

.mymariage-container .invites-column .invites-column-height {
    height: 450px;
    overflow: auto;
}

.mymariage-container .invites-column ul {
    display: flex;
    flex-wrap: wrap;
    /* Permet le retour à la ligne si l’espace est insuffisant */
    gap: 5px;
    /* Espace entre les éléments */
    justify-content: space-between;
    /* Répartit les éléments uniformément */
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.mymariage-container .invites-column li {
    position: relative;
    flex: 1 1 calc(50% - 5px);
    max-width: calc(50% - 5px);
    display: flex;
    flex-direction: column;
    /* Empile les éléments verticalement */
    justify-content: flex-start;
    /* Aligne le contenu en haut */
    align-items: flex-start;
    /* Aligne le contenu à gauche */
    padding: 10px;
    border-radius: 5px;
    color: black;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.8rem;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid #ddd;
    height: 90px;
}

@media (max-width: 1300px) {
    .mymariage-container .invites-column li {
        flex: 1 1 100%;
        /* Un seul élément par ligne */
        max-width: 100%;
        text-align: left;
        font-size: 0.8rem;
    }
}

.mymariage-container .invites-column li select {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.mymariage-container .invites-column li .fairepart-text {
    display: block;
    font-size: 0.8rem;
    /* Taille de texte plus petite */
    margin-top: 2px;
    margin-bottom: 5px;
    /* Espacement entre le nom de l'invité et le texte */
    cursor: pointer;
}

.mymariage-container .invites-column li .fairepart-text i {
    font-size: 0.6rem;
}

.mymariage-container .invites-column li:last-child {
    border-bottom: none;
    /* Supprime la bordure pour le dernier élément */
}

.mymariage-container .invites-column .button-container {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 2px;
    margin-left: auto;
    /* Pousse le container des boutons vers la droite */
}

.mymariage-container .invites-column button.edit-invite,
.mymariage-container .invites-column button.delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
}

.mymariage-container .invites-column button.edit-invite i {
    color: #36A2EB;
}

.mymariage-container .invites-column button.delete-btn i {
    color: red;
}

.mymariage-container .invites-column button:hover {
    transform: scale(1.2);
    transition: transform 0.2s;
}

/* Bord rouge pour le select si "Pas fait" */
.mymariage-container .invites-column select.not-confirmed {
    border: 2px solid red;
    border-radius: 8px;
    padding: 2px;
    color: red;
    /* Applique la couleur rouge à la sélection */
}

/* Bord vert pour le select si "Fait" */
.mymariage-container .invites-column select.confirmed {
    border: 2px solid green;
    border-radius: 8px;
    padding: 2px;
    color: green;
    /* Applique la couleur verte à la sélection */
}

/* Lorsqu'un select est focusé, il conserve la couleur de son état */
.mymariage-container .invites-column select.not-confirmed:focus {
    border: 2px solid red;
    /* Garde la bordure rouge lors du focus */
    outline: none;
    /* Enlève l'outline par défaut */
}

.mymariage-container .invites-column select.confirmed:focus {
    border: 2px solid green;
    /* Garde la bordure verte lors du focus */
    outline: none;
    /* Enlève l'outline par défaut */
}

/* CSS pour désactiver les événements sur le bouton */
.disabled-button {
    pointer-events: none;
    /* Empêche les clics pendant la désactivation */
    opacity: 0.5;
    /* Rendre le bouton visuellement désactivé */
}

/* Style de la barre de défilement */
.mymariage-container ::-webkit-scrollbar {
    width: 10px;
    /* Largeur de la barre de défilement */
}

/* Style de la "thumb" (la partie glissante de la barre) */
.mymariage-container ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #b2602a, #923e14);
    /* Couleur de la "thumb" */
    border-radius: 10px;
    /* Bord arrondi pour la "thumb" */
    border: 3px solid #fff;
    /* Bordure blanche autour de la "thumb" */
}

/* Style de la "track" (la piste de la barre de défilement) */
.mymariage-container ::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* Couleur de la piste */
    border-radius: 10px;
    /* Bord arrondi pour la piste */
}

/* Style de la barre de défilement au survol */
.mymariage-container ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #b2602a, #923e14);
    ;
    /* Couleur plus foncée au survol */
}

/* Conteneur principal */
#mymariage-invites-container .total-invites-container {
    max-width: 90%;
    width: 30%;
    margin: 20px auto 0 auto;
    padding: 10px;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Espace entre les éléments */
    background-color: transparent;
}

/* Barre de progression */
#mymariage-invites-container .total-invites-container .progress-bar-container {
    width: 100%;
    height: 5px;
    background-color: #333;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    margin: 0px 0;
}

/* Barre verte pour les invités confirmés */
#mymariage-invites-container .total-invites-container .progress-bar {
    height: 100%;
    transition: width 0.5s ease-in-out;
}

#mymariage-invites-container .total-invites-container .confirmed {
    background-color: rgb(0, 128, 0);
}

#mymariage-invites-container .total-invites-container .not-confirmed {
    background-color: rgb(255, 0, 0);
}

/* Texte sous la barre de progression */
#mymariage-invites-container .total-invites-container .progress-text {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: bold;
}

#mymariage-invites-container .total-invites-container .total-confirmed {
    color: rgb(0, 128, 0);
    text-align: left;
}

#mymariage-invites-container .total-invites-container .total-invites {
    color: black;
    text-align: center;
}

#mymariage-invites-container .total-invites-container .total-not-confirmed {
    color: rgb(255, 0, 0);
    text-align: right;
}

@media screen and (max-width: 1550px) {
    #mymariage-invites-container .total-invites-container {
        width: 50%;
    }
}

/* 🔹 Responsive Design */
@media screen and (max-width: 800px) {
    #mymariage-invites-container .total-invites-container {
        width: 95%;
    }

    #mymariage-invites-container .total-invites-container .progress-bar-container {
        height: 5px;
    }

    #mymariage-invites-container .total-invites-container .total-confirmed,
    #mymariage-invites-container .total-invites-container .total-invites,
    #mymariage-invites-container .total-invites-container .total-not-confirmed {
        font-size: 0.7rem;
    }
}

.mymariage-container #mymariage-invites-container .modal-content {
    max-width: 80%;
    max-height: 80%;
    overflow: auto;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    align-items: center;
}

.mymariage-container #mymariage-invites-container .modal-content h2 {
    margin-top: 80px;
}

.mymariage-container #mymariage-invites-container .modal-content .contact-buttons {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    /* Pour aligner les boutons horizontalement */
    gap: 5px;
    /* Espace entre les boutons */
}

.mymariage-container #mymariage-invites-container .modal-content .contact-button {
    padding: 10px 20px;
    background-color: #b2602a;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    /* Aligner l'icône et le texte en colonne */
    align-items: center;
    /* Centrer le texte sous l'icône */
    flex-grow: 1;
    /* Permet aux boutons de prendre la même largeur */
    justify-content: center;
    /* Centre l'icône et le texte à l'intérieur du bouton */
    height: 50px;
    /* Fixer la hauteur de chaque bouton */
}

.mymariage-container #mymariage-invites-container .modal-content .contact-button i {
    font-size: 1.2rem;
    margin-bottom: 5px;
    /* Espace entre l'icône et le texte */
}

.mymariage-container #mymariage-invites-container .modal-content .button-text {
    font-size: 0.8rem;
    text-transform: capitalize;
    /* Mettre la première lettre en majuscule */
}

.mymariage-container #mymariage-invites-container .modal-content .contact-button:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

.mymariage-container #newmariagedateModal input {
    margin-bottom: 10px;
    padding: 10px;
    font-size: 1.2em;
}

/* Style pour la gestion des tables */
.mymariage-container #mymariage-tables-container {
    background-color: #fef4e8;
    flex: 0 0 65%;
    /* Ne grandit pas, largeur fixe de 70% */
    position: relative;
    /* Nécessaire pour que le bouton soit positionné par rapport à ce conteneur */
    border-radius: 8px;
    border: 1px solid #b2602a;
}

.mymariage-container #mymariage-tables-container h2 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.mymariage-container #mymariage-tables-container p {
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.8em;
    color: #333;
    text-align: center;
}

.mymariage-container #mymariage-tables-container #workspace {
    width: 1000px;
    height: 1000px;
    position: relative;
    margin: auto;
    background-color: #f5f5f5;
}

/* Écran large 4K / WQHD */
@media (min-width: 1921px) {
    .mymariage-container #mymariage-tables-container #workspace {
        width: 1000px;
        height: 1000px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-button {
        position: absolute;
        width: 100%;
        top: 0%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translate(-50%, -0%);
        background-color: transparent;
        /* Fond semi-transparent pour visibilité */
        border: none;
        cursor: pointer;
        font-weight: bold;
        font-size: 1.2rem;
        color: white;
        padding: 5px 8px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id {
        position: absolute;
        width: 100%;
        top: 20%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.9rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id-rectangle2 {
        position: absolute;
        width: 100%;
        top: 35%;
        /* Placé en haut de la table */
        left: 0%;
        transform: rotate(90deg);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.9rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }
}

/* Full HD (1920x1080) et inférieur */
@media (max-width: 1920px) and (max-height: 1080px) {
    .mymariage-container #mymariage-tables-container #workspace {
        width: 800px;
        height: 800px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-button {
        position: absolute;
        width: 100%;
        top: 0%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translate(-50%, -0%);
        background-color: transparent;
        /* Fond semi-transparent pour visibilité */
        border: none;
        cursor: pointer;
        font-weight: bold;
        font-size: 1.0rem;
        color: white;
        padding: 5px 8px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id {
        position: absolute;
        width: 100%;
        top: 20%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.8rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id-rectangle2 {
        position: absolute;
        top: 35%;
        /* Placé en haut de la table */
        left: 0%;
        transform: rotate(90deg);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.8rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }
}

/* Ordinateurs portables et tablettes en mode paysage */
@media (max-width: 1600px) {
    .mymariage-container #mymariage-tables-container #workspace {
        width: 700px;
        height: 700px;
    }
}

/* Ordinateurs portables standards et petits écrans */
@media (max-width: 1366px) {
    .mymariage-container #mymariage-tables-container #workspace {
        width: 625px;
        height: 625px;
    }
}

/* Tablettes (iPad, Samsung Tab, etc.) */
@media (max-width: 1024px) {
    .mymariage-container #mymariage-tables-container #workspace {
        width: 650px;
        height: 650px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-button {
        position: absolute;
        width: 100%;
        top: 0%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translate(-50%, -0%);
        background-color: transparent;
        /* Fond semi-transparent pour visibilité */
        border: none;
        cursor: pointer;
        font-weight: bold;
        font-size: 0.9rem;
        color: white;
        padding: 5px 8px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id {
        position: absolute;
        width: 100%;
        top: 20%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.7rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id-rectangle2 {
        position: absolute;
        top: 35%;
        /* Placé en haut de la table */
        left: 0%;
        transform: rotate(90deg);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.7rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }
}

/* Mobiles larges (iPhone Plus, Samsung Galaxy, etc.) */
@media (max-width: 768px) {
    .mymariage-container #mymariage-tables-container #workspace {
        width: 600px;
        height: 600px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-button {
        transform: translate(-50%, -30%);
        font-size: 0.8rem;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-button {
        position: absolute;
        width: 100%;
        top: 0%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translate(-50%, -0%);
        background-color: transparent;
        /* Fond semi-transparent pour visibilité */
        border: none;
        cursor: pointer;
        font-weight: bold;
        font-size: 0.9rem;
        color: white;
        padding: 5px 8px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id {
        position: absolute;
        width: 100%;
        top: 20%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.6rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id-rectangle2 {
        position: absolute;
        top: 35%;
        /* Placé en haut de la table */
        left: 0%;
        transform: rotate(90deg);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.6rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }
}

/* Mobiles standards */
@media (max-width: 500px) {
    .mymariage-container #mymariage-tables-container #workspace {
        width: 375px;
        height: 375px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-button {
        position: absolute;
        width: 100%;
        top: 0%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translate(-50%, -20%);
        background-color: transparent;
        /* Fond semi-transparent pour visibilité */
        border: none;
        cursor: pointer;
        font-weight: bold;
        font-size: 0.8rem;
        color: white;
        padding: 5px 8px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id {
        position: absolute;
        width: 100%;
        top: 20%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.40rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id-rectangle2 {
        position: absolute;
        top: 35%;
        /* Placé en haut de la table */
        left: 0%;
        transform: rotate(90deg);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.40rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }
}

/* Petits mobiles */
@media (max-width: 360px) {
    .mymariage-container #mymariage-tables-container #workspace {
        width: 275px;
        height: 275px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-button {
        position: absolute;
        width: 100%;
        top: 0%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translate(-50%, -20%);
        background-color: transparent;
        /* Fond semi-transparent pour visibilité */
        border: none;
        cursor: pointer;
        font-weight: bold;
        font-size: 0.8rem;
        color: white;
        padding: 5px 8px;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id {
        position: absolute;
        width: 100%;
        top: 20%;
        /* Placé en haut de la table */
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.40rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }

    .mymariage-container #mymariage-tables-container #workspace .options-id-rectangle2 {
        position: absolute;
        top: 35%;
        /* Placé en haut de la table */
        left: 0%;
        transform: rotate(90deg);
        background-color: transparent;
        border: none;
        font-weight: bold;
        font-size: 0.40rem;
        color: black;
        text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px white;
    }
}

.mymariage-container #mymariage-tables-container .toolbar {
    display: flex;
    gap: 15px;
    /* Espacement entre les boutons */
    justify-content: center;
    /* Centre les boutons */
    flex-wrap: wrap;
}

.mymariage-container #mymariage-tables-container .toolbar .table-button {
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: none;
    border: 1px solid #b2602a;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.mymariage-container #mymariage-tables-container .toolbar .table-button img {
    width: 50px;
    /* Taille de l'image */
    height: 50px;
    margin-bottom: 5px;
    /* Espacement entre l'image et le texte */
}

.mymariage-container #mymariage-tables-container .toolbar .table-button span {
    font-size: 0.8rem;
    font-weight: bold;
    color: #333;
}

.mymariage-container #mymariage-tables-container .toolbar .table-button:hover {
    transform: scale(1.05);
    /* Effet au survol */
}

.mymariage-container #mymariage-tables-container .save-button-pdf {
    display: block;
    /* Pour qu'il soit en-dessous */
    margin: 10px auto;
    /* Centrer horizontalement */
}

.mymariage-container #mymariage-tables-container .table {
    position: absolute;
    cursor: grab;
    transition: opacity 0.2s ease, transform 0.2s ease;
    background: none;
    /* Retirer le fond pour ne garder que l'image */
    width: 100%;
}

/* Exemple de table avec une image de bois pour le rectangle */
/* .rectangle {
    width: 185px;
    height: 100px;
} */

/* .rectangle2 {
    width: 100px;
    height: 185px;
} */

/* Exemple de table carrée avec une image */
/* .square {
    width: 125px;
    height: 125px;
} */

/* Exemple de table ronde avec une image */
/* .circle {
    width: 125px;
    height: 125px;
    border-radius: 50%;
} */

.mymariage-container #mymariage-tables-container .menu-invite-table-option:hover {
    background-color: #b2602a;
    color: #fff;
}

.mymariage-container .modal .guest-container {
    min-height: 200px;
    max-height: 200px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
    overflow-y: auto;
}

.mymariage-container .modal .guest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f1f1f1;
    margin: 5px 0;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #333;
    transition: background 0.3s ease;
    font-size: 0.9rem;
    padding: 10px;
    border: 1px solid #ddd;
}

.mymariage-container .modal .remove-btn {
    cursor: pointer;
    color: red;
    font-size: 18px;
    transition: transform 0.2s ease, color 0.2s ease;
}

.mymariage-container .modal .remove-btn:hover {
    transform: scale(1.2);
    transition: transform 0.2s;
}

#progress-articles-container {
    width: 28%;
    margin: auto;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    margin-top: 20px;
}

@media (max-width: 1500px) {
    #progress-articles-container {
        width: 35%;
    }
}

@media (max-width: 1250px) {
    #progress-articles-container {
        width: 40%;
    }
}

@media (max-width: 800px) {
    #progress-articles-container {
        width: 48%;
    }
}

@media (max-width: 700px) {
    #progress-articles-container {
        width: 50%;
    }
}

@media (max-width: 650px) {
    #progress-articles-container {
        width: 58%;
        font-size: 0.7rem;
    }
}

@media (max-width: 500px) {
    #progress-articles-container {
        width: 64%;
        font-size: 0.7rem;
        margin: 20px;
    }
}

@media (max-width: 450px) {
    #progress-articles-container {
        width: 68%;
        font-size: 0.65rem;
        margin: 20px;
    }
}

@media (max-width: 400px) {
    #progress-articles-container {
        width: 65%;
        font-size: 0.6rem;
        margin: 20px;
    }
}

@media (max-width: 400px) {
    #progress-articles-container {
        width: 65%;
        font-size: 0.55rem;
        margin: 20px;
    }
}

@media (max-width: 350px) {
    #progress-articles-container {
        width: 65%;
        font-size: 0.50rem;
        margin: 20px;
    }
}

.progress-articles-bar-background {
    width: 100%;
    background-color: #FFF8F0;
    border-radius: 25px;
    overflow: hidden;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centre le texte */
    border: 2px solid #b2602a;
}

#progress-articles-bar {
    height: 100%;
    background-color: #b2602a;
    width: 0%;
    /* Commence vide */
    transition: width 0.5s ease-in-out;
    position: absolute;
    left: 0;
    top: 0;
}

#progress-articles-text {
    position: relative;
    /* Plus besoin de absolute ! */
    font-weight: bold;
    color: #000;
    z-index: 2;
}

/* Style pour la gestion des taches */
.mymariage-container #mymariage-taches-container {
    background-color: #fef4e8;
    flex: 0 0 65%;
    /* Ne grandit pas, largeur fixe de 70% */
    position: relative;
    /* Nécessaire pour que le bouton soit positionné par rapport à ce conteneur */
    border-radius: 8px;
    border: 1px solid #b2602a;
}

.mymariage-container #mymariage-taches-container .plusbutton {
    width: 40px;
    /* Taille du bouton */
    height: 40px;
    border-radius: 50%;
    /* Rend le bouton parfaitement rond */
    background-color: #b2602a;
    /* Couleur orange */
    color: #fff;
    font-size: 1.0rem;
    /* Taille du "+" */
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;

    /* Positionnement en bas à droite */
    position: absolute;
    top: 20px;
    right: 20px;
}

.mymariage-container #mymariage-taches-container .plusbutton:hover {
    /* Le bouton grossit au survol */
    background-color: #b2602a;
    /* Orange plus foncé au survol */
    opacity: 0.8;
}

.mymariage-container #mymariage-taches-container h2 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.mymariage-container #mymariage-taches-container .search-taches-filter {
    display: flex;
    flex-direction: column;
    /* Aligne les éléments verticalement */
    align-items: center;
    /* Centre les éléments horizontalement */
    gap: 10px;
    /* Espace entre le titre et les champs */
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    text-align: center;
}

.mymariage-container #mymariage-taches-container .search-inputs {
    display: flex;
    justify-content: center;
    gap: 20px;
    /* Espace entre le champ de recherche et le filtre */
    width: 100%;
}

.mymariage-container #mymariage-taches-container #search-tache {
    padding: 10px;
    font-size: 1rem;
    text-align: center;
    border: 1px solid #b2602a;
    border-radius: 5px;
    width: 60%;
    /* Largeur du champ de recherche */
    background-color: #FFF8F0;
}

.mymariage-container #mymariage-taches-container #filter-priority {
    padding: 10px;
    font-size: 1rem;
    text-align: center;
    border: 1px solid #b2602a;
    border-radius: 5px;
    width: 30%;
    /* Largeur du filtre */
    background-color: #FFF8F0;
}

.mymariage-container #mymariage-taches-container #filter-taches-status {
    padding: 10px;
    font-size: 1rem;
    text-align: center;
    border: 1px solid #b2602a;
    border-radius: 5px;
    width: 30%;
    /* Largeur du filtre */
    background-color: #FFF8F0;
}

.mymariage-container #mymariage-taches-container p {
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.8em;
    color: #333;
    text-align: center;
}

.mymariage-container #mymariage-taches-container button.modal-button2 {
    display: block;
    padding: 8px 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #b2602a;
    margin: 10px auto;
    /* Centre horizontalement */
    text-align: center;
}

.mymariage-container #mymariage-taches-container button.modal-button2:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

.mymariage-container #mymariage-taches-container #newtacheModal select,
.mymariage-container #mymariage-taches-container #edittacheModal select {
    width: 50%;
    /* Largeur ajustable */
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #b2602a;
    font-size: 14px;
    text-align: center;
    background-color: #FFF8F0;
}

/* Conteneur des tâches */
.mymariage-container #mymariage-taches-container #mytaches-list {
    width: 70%;
    margin-top: 40px;
    padding: 10px;
    border-radius: 8px;
    background: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    /* Permet aux éléments de passer à la ligne si besoin */
    gap: 15px;
    /* Espacement entre les éléments */
    justify-content: center;
    /* Centrer les éléments horizontalement */
    max-height: 600px;
    overflow: auto;
    word-break: break-all;
}

/* Éléments de tâche */
.mymariage-container #mymariage-taches-container #mytaches-list .tache-item {
    display: flex;
    flex-direction: column;
    background: none;
    border-radius: 8px;
    transition: background 0.3s ease;
    padding: 15px;
    width: calc(50% - 15px);
    /* 3 tâches par ligne avec espacement */
    position: relative;
    /* Permet de positionner les boutons */
    box-sizing: border-box;
    border: 1px solid #b2602a;
}

/* Style du calendrier */
.mymariage-container #mymariage-taches-container #mytaches-list .calendar {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 60px;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* En-tête du calendrier (mois) */
.mymariage-container #mymariage-taches-container #mytaches-list .calendar-header {
    background: #b2602a;
    color: white;
    font-weight: bold;
    padding: 5px 0;
    font-size: 0.8rem;
}

/* Corps du calendrier */
.mymariage-container #mymariage-taches-container #mytaches-list .calendar-body {
    background: white;
    padding: 5px 0;
}

/* Jour */
.mymariage-container #mymariage-taches-container #mytaches-list .calendar-day {
    font-size: 1.0rem;
    font-weight: bold;
    color: black;
}

/* Année */
.mymariage-container #mymariage-taches-container #mytaches-list .calendar-year {
    font-size: 0.8rem;
    color: gray;
}

/* Nom de la tâche (centré) */
.mymariage-container #mymariage-taches-container #mytaches-list .tache-title {
    position: absolute;
    top: 35px;
    left: 15px;
    font-weight: bold;
    color: #333;
    font-size: 1rem;
    margin-bottom: 5px;
    /* Espacement avec les détails */
}

/* Détails de la tâche (en dessous) */
.mymariage-container #mymariage-taches-container #mytaches-list .tache-details {
    color: #666;
    text-align: center;
    /* Centrage du texte */
    font-size: 0.9rem;
    margin-bottom: 30px;
}

/* Boutons (placés en haut à droite) */
.mymariage-container #mymariage-taches-container #mytaches-list .tache-item .tache-actions {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

.mymariage-container #mymariage-taches-container #mytaches-list .tache-item .tache-actions2 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 5px;
}

/* Boutons d'action */
.mymariage-container #mymariage-taches-container #mytaches-list button.delete-tache,
.mymariage-container #mymariage-taches-container #mytaches-list button.edit-tache {
    border: none;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 1rem;
    transition: 0.3s;
    background: transparent;
}

/* Bord rouge pour le select si "Pas fait" */
.mymariage-container #mymariage-taches-container #mytaches-list select.not-done {
    border: 2px solid red;
    border-radius: 8px;
    padding: 2px;
    color: red;
    /* Applique la couleur rouge à la sélection */
}

/* Bord vert pour le select si "Fait" */
.mymariage-container #mymariage-taches-container #mytaches-list select.done {
    border: 2px solid green;
    border-radius: 8px;
    padding: 2px;
    color: green;
    /* Applique la couleur verte à la sélection */
}

/* Lorsqu'un select est focusé, il conserve la couleur de son état */
.mymariage-container #mymariage-taches-container #mytaches-list select.not-done:focus {
    border: 2px solid red;
    /* Garde la bordure rouge lors du focus */
    outline: none;
    /* Enlève l'outline par défaut */
}

.mymariage-container #mymariage-taches-container #mytaches-list select.done:focus {
    border: 2px solid green;
    /* Garde la bordure verte lors du focus */
    outline: none;
    /* Enlève l'outline par défaut */
}

/* Icônes */
.mymariage-container #mymariage-taches-container #mytaches-list button.delete-tache i {
    color: red;
}

.mymariage-container #mymariage-taches-container #mytaches-list button.edit-tache i {
    color: #36A2EB;
}

/* Effet au survol */
.mymariage-container #mymariage-taches-container #mytaches-list button.delete-tache:hover,
.mymariage-container #mymariage-taches-container #mytaches-list button.edit-tache:hover {
    transform: scale(1.2);
    transition: transform 0.2s;
}

/* Style quand une tâche est terminée */
.mymariage-container #mymariage-taches-container #mytaches-list .tache-item.completed {
    background: rgba(0, 128, 0, 0.1) !important;
    /* Forcer la couleur de fond */
}

.mymariage-container #mymariage-taches-container #mytaches-list .tache-item.completed .tache-title,
.mymariage-container #mymariage-taches-container #mytaches-list .tache-item.completed .tache-details,
.mymariage-container #mymariage-taches-container #mytaches-list .tache-item.completed .tache-priority {
    text-decoration: line-through;
    /* Texte barré */
}

.mymariage-container #mymariage-taches-container #mytaches-list .tache-priority {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 0.8rem;
}

.mymariage-container #mymariage-taches-container p {
    text-align: center;
}

.mymariage-container #mymariage-taches-container .save-button-pdf {
    display: block;
    /* Pour qu'il soit en-dessous */
    margin: 10px auto;
    /* Centrer horizontalement */
}

/* Style pour la gestion du planning */
.mymariage-container #mymariage-plannings-container {
    background-color: #fef4e8;
    flex: 0 0 65%;
    /* Ne grandit pas, largeur fixe de 70% */
    position: relative;
    /* Nécessaire pour que le bouton soit positionné par rapport à ce conteneur */
    border-radius: 8px;
    border: 1px solid #b2602a;
}

.mymariage-container #mymariage-plannings-container .plusbutton {
    width: 40px;
    /* Taille du bouton */
    height: 40px;
    border-radius: 50%;
    /* Rend le bouton parfaitement rond */
    background-color: #b2602a;
    /* Couleur orange */
    color: #fff;
    font-size: 1.0rem;
    /* Taille du "+" */
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;

    /* Positionnement en bas à droite */
    position: absolute;
    top: 20px;
    right: 20px;
}

.mymariage-container #mymariage-plannings-container .plusbutton:hover {
    /* Le bouton grossit au survol */
    background-color: #b2602a;
    /* Orange plus foncé au survol */
    opacity: 0.8;
}

.mymariage-container #mymariage-plannings-container h2 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.mymariage-container #mymariage-plannings-container p {
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.8em;
    color: #333;
    text-align: center;
}

.mymariage-container #mymariage-plannings-container button.modal-button2 {
    display: block;
    padding: 8px 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #b2602a;
    margin: 10px auto;
    /* Centre horizontalement */
    text-align: center;
}

.mymariage-container #mymariage-plannings-container button.modal-button2:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

.mymariage-container #mymariage-plannings-container .time-field {
    width: 30%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #b2602a;
    border-radius: 5px;
    display: block;
    margin-left: auto;
    /* Centrer horizontalement */
    margin-right: auto;
    /* Centrer horizontalement */
    background-color: #FFF8F0;
}

/* Conteneur des tâches */
.mymariage-container #mymariage-plannings-container #myplannings-list {
    width: 50%;
    margin-top: 40px;
    padding: 10px;
    border-radius: 8px;
    background: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    /* Permet aux éléments de passer à la ligne si besoin */
    gap: 15px;
    /* Espacement entre les éléments */
    justify-content: center;
    /* Centrer les éléments horizontalement */
    max-height: 600px;
    overflow: auto;
}

/* Éléments de tâche */
.mymariage-container #mymariage-plannings-container #myplannings-list .planning-item {
    display: flex;
    flex-direction: column;
    background: none;
    border-radius: 8px;
    transition: background 0.3s ease;
    padding: 15px;
    width: 100%;
    /* 3 tâches par ligne avec espacement */
    position: relative;
    /* Permet de positionner les boutons */
    box-sizing: border-box;
    word-break: break-all;
    border: 1px solid #b2602a;
}

/* Style du calendrier */
.mymariage-container #mymariage-plannings-container #myplannings-list .calendar {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 60px;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* En-tête du calendrier (mois) */
.mymariage-container #mymariage-plannings-container #myplannings-list .calendar-header {
    background: #b2602a;
    color: white;
    font-weight: bold;
    padding: 5px 0;
    font-size: 0.8rem;
}

/* Corps du calendrier */
.mymariage-container #mymariage-plannings-container #myplannings-list .calendar-body {
    background: white;
    padding: 5px 0;
}

/* Jour */
.mymariage-container #mymariage-plannings-container #myplannings-list .calendar-hour {
    font-size: 1.0rem;
    font-weight: bold;
    color: black;
}


/* Nom de la tâche (centré) */
.mymariage-container #mymariage-plannings-container #myplannings-list .planning-details {
    color: #666;
    text-align: center;
    /* Centrage du texte */
    font-size: 0.9rem;
    margin-top: 70px;
}

/* Boutons (placés en haut à droite) */
.mymariage-container #mymariage-plannings-container #myplannings-list .planning-item .planning-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

/* Boutons d'action */
.mymariage-container #mymariage-plannings-container #myplannings-list button.delete-planning,
.mymariage-container #mymariage-plannings-container #myplannings-list button.edit-planning {
    border: none;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 1rem;
    transition: 0.3s;
    background: transparent;
}

/* Icônes */
.mymariage-container #mymariage-plannings-container #myplannings-list button.delete-planning i {
    color: red;
}

.mymariage-container #mymariage-plannings-container #myplannings-list button.edit-planning i {
    color: #36A2EB;
}

/* Effet au survol */
.mymariage-container #mymariage-plannings-container #myplannings-list button.delete-planning:hover,
.mymariage-container #mymariage-plannings-container #myplannings-list button.edit-planning:hover {
    transform: scale(1.2);
    transition: transform 0.2s;
}

.mymariage-container #mymariage-plannings-container p {
    text-align: center;
}

.mymariage-container #mymariage-plannings-container .save-button-pdf {
    display: block;
    /* Pour qu'il soit en-dessous */
    margin: 10px auto;
    /* Centrer horizontalement */
}

/* Conteneur principal (on ne change pas son style) */
.mymariage-container #mymariage-photos-livreaudio-space-container {
    background-color: #fef4e8;
    flex: 0 0 65%;
    position: relative;
    border-radius: 8px;
    border: 1px solid #b2602a;
}

.mymariage-container #mymariage-photos-livreaudio-space-container h2 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.mymariage-container #mymariage-photos-livreaudio-space-container p {
    text-align: center;
}

.mymariage-container #mymariage-photos-livreaudio-space-container button {
    display: block;
    /* Pour qu'il soit en-dessous */
    margin: 10px auto;
    /* Centrer horizontalement */
}

.mymariage-container #mymariage-photos-livreaudio-space-container img {
    display: block;
    /* Pour qu'il soit en-dessous */
    margin: 10px auto;
    /* Centrer horizontalement */
}

/* Nouveau conteneur qui contient les deux divs */
#photo-livre-container {
    display: flex;
    justify-content: space-between;
    /* Espacement entre les divs */
    align-items: flex-start;
    flex-wrap: wrap;
    /* Permet d'adapter aux petits écrans */
    gap: 20px;
    /* Espacement entre les colonnes */
    padding: 10px;
}

/* Style des deux divs */
#photo-space-content,
#livreaudio-space-content {
    width: 48%;
    /* Chaque div prend environ la moitié */
    max-width: 48%;
    box-sizing: border-box;
    /* Évite que le padding agrandisse la div */
    padding: 20px;
    background-color: none;
    border: 1px solid #b2602a;
    border-radius: 8px;
}

/* Responsive : Les divs passent en colonne sur écran étroit */
@media (max-width: 768px) {
    #photo-livre-container {
        flex-direction: column;
        /* Passe en colonne */
        align-items: center;
        /* Centre les divs */
    }

    #photo-space-content,
    #livreaudio-space-content {
        width: 100%;
        /* Prend toute la largeur sur mobile */
        max-width: 100%;
    }
}

.mymariage-container #mymariage-photos-livreaudio-space-container #photo-space-content .input-label,
.mymariage-container #mymariage-photos-livreaudio-space-container #livreaudio-space-content .input-label {
    display: block;
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.8em;
    color: #333;
    text-align: center;
    width: 100%;
    /* Assure que le label est de la même largeur que l'input */
    margin-left: auto;
    /* Centrer horizontalement par rapport à l'input */
    margin-right: auto;
    /* Centrer horizontalement par rapport à l'input */
}

.mymariage-container #mymariage-photos-livreaudio-space-container #photo-space-content hr,
.mymariage-container #mymariage-photos-livreaudio-space-container #livreaudio-space-content hr {
    border: 1px solid #b2602a;
    width: 50%;
}

.mymariage-container #mymariage-photos-livreaudio-space-container #photo-space-content .photo-gallery {
    width: 90%;
    max-height: 200px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 20px auto 20px;
    padding: 20px;
}

.mymariage-container #mymariage-photos-livreaudio-space-container #photo-space-content .photo-gallery img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: zoom-in;
    border: 1px solid #ddd;
}

.mymariage-container #mymariage-photos-livreaudio-space-container #livreaudio-space-content .audio-gallery {
    width: 90%;
    max-height: 200px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 20px auto 20px;
    padding: 20px;
}

.mymariage-container #mymariage-photos-livreaudio-space-container #livreaudio-space-content .audio-gallery audio {
    width: 40%;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.mymariage-container #mymariage-photos-livreaudio-space-container #livreaudio-space-content #downloadAllAudioCompileButton:disabled {
    opacity: 0.5;
    /* Réduire l'opacité */
    cursor: not-allowed;
    /* Modifier le curseur pour indiquer que c'est désactivé */
}

/* Conteneur du spinner et du texte */
.loading-spinner-container {
    display: flex;
    flex-direction: column;
    /* Afficher le spinner et le texte verticalement */
    justify-content: center;
    align-items: center;
    height: 100px;
}

/* Spinner de chargement */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    /* Fixer la hauteur du spinner */
    width: 40px;
    /* Fixer la largeur du spinner */
    margin-bottom: 10px;
    /* Ajout d'espace entre le spinner et le texte */
    border-radius: 50%;
    /* Rendre le spinner rond */
    border: 5px solid #f3f3f3;
    /* Couleur de fond */
    border-top: 5px solid #923e14;
    /* Couleur du spinner */
    animation: spin 1s linear infinite;
}

/* Animation du spinner */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Texte du chargement */
.loading-spinner-container span {
    font-size: 14px;
    /* Taille du texte */
    color: #333;
    /* Couleur du texte */
    text-align: center;
}

/* Personnalisation de la div .upload_photos */
.upload_photos {
    min-width: 20%;
    max-width: 60%;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: auto;
    text-align: center;
}

.upload_photos h2 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.upload_photos button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    /* Change le curseur pour indiquer que le bouton est désactivé */
}

/* Style de la barre de défilement */
.upload_photos ::-webkit-scrollbar {
    width: 10px;
    /* Largeur de la barre de défilement */
}

/* Style de la "thumb" (la partie glissante de la barre) */
.upload_photos ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #b2602a, #923e14);
    /* Couleur de la "thumb" */
    border-radius: 10px;
    /* Bord arrondi pour la "thumb" */
    border: 3px solid #fff;
    /* Bordure blanche autour de la "thumb" */
}

/* Style de la "track" (la piste de la barre de défilement) */
.upload_photos ::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* Couleur de la piste */
    border-radius: 10px;
    /* Bord arrondi pour la piste */
}

/* Style de la barre de défilement au survol */
.upload_photos ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #b2602a, #923e14);
    /* Couleur plus foncée au survol */
}

.upload_photos .preview-wrapper {
    position: relative;
    display: inline-block;
    margin: 10px;
}

.upload_photos .delete-button {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.upload_photos .delete-button:hover {
    opacity: 0.8;
}

/* Personnalisation du container du champ de fichier */
.upload_photos .file-input-container {
    position: relative;
    margin-bottom: 20px;
}

/* Masquer le champ de fichier par défaut */
.upload_photos .file-input {
    display: none;
}

/* Style du label qui servira de bouton personnalisé pour choisir une photo */
.upload_photos .file-label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #36A2EB;
    color: white;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    transition: background-color 0.3s;
}

/* Changer la couleur du bouton lorsque l'on survole le label */
.upload_photos .file-label:hover {
    opacity: 0.8;
}

.upload_photos .preview-container {
    width: 90%;
    max-height: 200px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 20px auto 20px;
}

.upload_photos .preview-container img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: zoom-in;
}

/* Personnalisation de la div .upload_photos */
.upload_audio {
    min-width: 20%;
    max-width: 60%;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: auto;
    text-align: center;
}

.upload_audio h2 {
    font-size: 0.8em;
    color: black;
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.upload_audio .start-button {
    border: 1px solid black;
    padding: 6px;
    background: #b2602a;
    color: red;
    font-size: 1.2rem;
    border-radius: 2px;
}

.upload_audio .stop-button {
    border: 1px solid black;
    padding: 6px;
    background: #b2602a;
    color: #ffffff;
    font-size: 1.2rem;
    border-radius: 2px;
}

.upload_audio .start-button:hover,
.upload_audio .stop-button:hover {
    cursor: pointer;
    opacity: 0.8;
}

.upload_audio .start-button:disabled,
.upload_audio .stop-button:disabled,
.upload_audio #upload-audio:disabled {
    opacity: 0.5;
    /* Réduire l'opacité */
    cursor: not-allowed;
    /* Modifier le curseur pour indiquer que c'est désactivé */
}

/* Timer */
.upload_audio .timer {
    font-size: 1.2em;
    margin-top: 10px;
    font-weight: bold;
}

/* Barre de progression */
.upload_audio #progress-bar-container {
    width: 100%;
    background: #f3f3f3;
    margin-top: 10px;
}

.upload_audio #progress-bar {
    width: 0;
    height: 5px;
    background: #b2602a;
}

/* Interface de lecture audio */
.upload_audio #audio-player {
    margin-top: 20px;
}

.upload_audio #audio-preview {
    width: 100%;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#progress-taches-container {
    width: 34%;
    margin: auto;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    margin-top: 20px;
}

@media (max-width: 1500px) {
    #progress-taches-container {
        width: 40%;
    }
}

@media (max-width: 1250px) {
    #progress-taches-container {
        width: 45%;
    }
}

@media (max-width: 800px) {
    #progress-taches-container {
        width: 48%;
    }
}

@media (max-width: 700px) {
    #progress-taches-container {
        width: 50%;
    }
}

@media (max-width: 650px) {
    #progress-taches-container {
        width: 58%;
        font-size: 0.7rem;
    }
}

@media (max-width: 500px) {
    #progress-taches-container {
        width: 64%;
        font-size: 0.7rem;
        margin: 20px;
    }
}

@media (max-width: 450px) {
    #progress-taches-container {
        width: 68%;
        font-size: 0.65rem;
        margin: 20px;
    }
}

@media (max-width: 400px) {
    #progress-taches-container {
        width: 65%;
        font-size: 0.6rem;
        margin: 20px;
    }
}

@media (max-width: 400px) {
    #progress-taches-container {
        width: 65%;
        font-size: 0.55rem;
        margin: 20px;
    }
}

@media (max-width: 350px) {
    #progress-taches-container {
        width: 65%;
        font-size: 0.50rem;
        margin: 20px;
    }
}

.progress-taches-bar-background {
    width: 100%;
    background-color: #FFF8F0;
    border-radius: 25px;
    overflow: hidden;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centre le texte */
    border: 2px solid #b2602a;
}

#progress-taches-bar {
    height: 100%;
    background-color: #b2602a;
    width: 0%;
    /* Commence vide */
    transition: width 0.5s ease-in-out;
    position: absolute;
    left: 0;
    top: 0;
}

#progress-taches-text {
    position: relative;
    /* Plus besoin de absolute ! */
    font-weight: bold;
    color: #000;
    z-index: 2;
}

.payment-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    margin: 50px auto;
    flex-wrap: wrap;
}

.have-offer-premium {
    width: 45%;
    padding: 10px;
    background: #fef4e8;
    border-radius: 8px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.offer-details {
    width: 35%;
    min-height: 250px;
    padding: 20px;
    background: #fef4e8;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border: 1px solid #b2602a;
}

/* Titre de l'offre */
.offer-details h2 {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 0px;
}

.offer-details span {
    font-size: 0.8rem;
    margin-bottom: 5px;
}

/* Prix de l'offre */
.offer-price {
    font-size: 1.4rem;
    font-weight: bold;
    color: #b2602a;
    margin-top: 5px;
}

/* Stylisation du ul dans offer-details */
.offer-details ul {
    list-style-type: none;
    padding: 0;
    margin-top: 5px;
    background: none;
    border: 1px solid #b2602a;
}

/* Stylisation des li dans offer-details */
.offer-details li {
    font-size: 0.9rem;
    margin: 5px 0;
    padding: 10px;
    border-radius: 5px;
    text-align: left;
}

/* Styles généraux pour centrer les boutons PayPal */
#paypal-button-container-Basique,
#paypal-button-container-Premium {
    width: 80%;
    /* Ou une largeur spécifique */
    display: flex;
    /* Flexbox pour le centrage */
    justify-content: center;
    /* Centrage horizontal */
    align-items: center;
    /* Centrage vertical */
    margin: 0 auto;
    /* Centrage automatique */
}

/* Adaptation mobile */
@media (max-width: 768px) {
    .payment-container {
        flex-direction: column;
        width: 100%;
    }

    .offer-details,
    .have-offer-premium {
        width: 80%;
        margin: auto;
    }

    #paypal-button-container-Basique,
    #paypal-button-container-Premium {
        width: 100%;
    }
}

.header-mur_maries {
    width: 80%;
    background-color: #fef4e8;
    margin: 60px auto 30px;
    padding: 10px;
    border-radius: 8px;
    position: relative;
    border: 1px solid #b2602a;
}

.header-mur_maries .input-field {
    width: 20%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #b2602a;
    border-radius: 5px;
    display: block;
    margin-left: auto;
    /* Centrer horizontalement */
    margin-right: auto;
    /* Centrer horizontalement */
    background-color: #FFF8F0;
}

.header-mur_maries h2 {
    font-size: 0.8em;
    color: black;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.header-mur_maries .image-checkbox-container {
    justify-content: center;
    /* Centre les éléments horizontalement */
    flex-wrap: wrap;
    /* Permet le retour à la ligne */
    gap: 5px;
    /* Espacement régulier entre tous les éléments */
    width: 50%;
    /* Utilisation maximale de la largeur */
    margin: auto;
}

.header-mur_maries .image-checkbox {
    position: relative;
    display: block;
    cursor: pointer;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
    flex-basis: calc(20% - 4px);
    /* Ajustement avec gap pour garantir 5 éléments alignés */
    box-sizing: border-box;
    /* Inclut le padding et la bordure dans la largeur */
}

.header-mur_maries .image-checkbox input[type="checkbox"] {
    display: none;
    /* Cache la checkbox réelle */
}

.header-mur_maries .image-checkbox img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    display: block;
    border: none;
    /* Retirer la bordure entre l'image et le texte */
}

.header-mur_maries .image-checkbox p {
    position: absolute;
    /* Position absolue pour centrer le texte sur l'image */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centrage vertical et horizontal */
    padding: 5px;
    /* Supprime le padding autour du texte */
    margin: 0;
    color: white;
    /* Couleur du texte blanche pour la visibilité */
    background-color: rgba(0, 0, 0, 0.5);
    /* Ajout d'un fond transparent pour améliorer la lisibilité */
    width: 100%;
    /* Prendre toute la largeur de l'image */
    text-align: center;
    /* Centrer le texte */
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 0;
}

.header-mur_maries .image-checkbox-container label:nth-child(4n+1) {
    margin-left: auto;
}

.header-mur_maries .image-checkbox-container label:nth-child(4n) {
    margin-right: auto;
}

.header-mur_maries .image-checkbox input[type="checkbox"]:checked+.image-content {
    border-color: #b2602a;
    /* Couleur quand c'est coché */
}

.header-mur_maries .image-content {
    padding: 0;
    /* Supprimer le padding interne */
    position: relative;
    /* Nécessaire pour le positionnement absolu du texte */
}

.header-mur_maries .image-checkbox input[type="checkbox"]:checked+.image-content p {
    color: #b2602a;
    /* Change la couleur du texte quand c'est coché */
}

.header-mur_maries .image-checkbox:hover {
    border-color: #b2602a;
}

/* Style de la page mur_maries */
.main-mur_maries {
    width: 80%;
    background-color: #fef4e8;
    margin: 0px auto 30px;
    padding: 10px;
    border-radius: 8px;
    position: relative;
    border: 1px solid #b2602a;
}

.main-mur_maries h2 {
    font-size: 0.8em;
    color: black;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.main-mur_maries .plusbutton {
    width: 40px;
    /* Taille du bouton */
    height: 40px;
    border-radius: 50%;
    /* Rend le bouton parfaitement rond */
    background-color: #b2602a;
    /* Couleur orange */
    color: #fff;
    font-size: 1.0rem;
    /* Taille du "+" */
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;

    /* Positionnement en bas à droite */
    position: absolute;
    top: 20px;
    right: 20px;
}

.main-mur_maries .plusbutton:hover {
    background-color: #b2602a;
    /* Orange plus foncé au survol */
    opacity: 0.8;
}

.main-mur_maries .container {
    width: 50%;
    padding: 10px;
    border-radius: 8px;
    background: none;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    /* Permet aux éléments de passer à la ligne si besoin */
    gap: 10px;
    /* Espacement entre les éléments */
    justify-content: center;
    /* Centrer les éléments horizontalement */
    overflow: auto;
    word-break: break-all;
    margin-bottom: 10px;
}

/* Style des cartes */
.main-mur_maries .container .sujet-card {
    background: none;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 100%;
    /* 2 cartes par ligne */
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
    justify-content: space-between;
    height: auto;
    border: 1px solid #b2602a;
    padding: 10px;
}

.no-sujet {
    height: 40%;
    /* La div occupe 40% de la hauteur */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.no-sujet i {
    font-size: 80%;
    /* Icône à 80% de la taille parent (ou augmenter si nécessaire) */
    font-size: 6rem;
    /* Ou une valeur en "rem" pour s'assurer d'une bonne lisibilité */
    margin-bottom: 10px;
    /* Ajouter un espace entre l'icône et le texte */
    color: #b2602a;
}

.no-sujet p {
    text-align: center;
    /* Centrer le texte */
    font-size: 0.8rem;
    /* Taille du texte ajustée */
}

/* Catégorie en haut à droite */
.main-mur_maries .container .sujet-card .categorie {
    font-size: 0.9rem;
    color: #b2602a;
    font-weight: bold;
    background: #fff3e0;
    padding: 5px 10px;
    border-radius: 5px;
    align-self: flex-start;
}

/* Titre en haut à gauche */
.main-mur_maries .container .sujet-card .titre {
    font-size: 0.9rem;
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    margin-bottom: 5px;
    align-self: flex-start;
}

.main-mur_maries .container .sujet-card .contenu {
    align-self: flex-start;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

/* Localisation en bas */
.main-mur_maries .container .sujet-card .localisation,
.main-mur_maries .container .sujet-card .auteur,
.main-mur_maries .container .sujet-card .date {
    align-self: flex-end;
    font-size: 0.8rem;
    color: #777;
}

.main-mur_maries .container .sujet-card .sujet-images {
    display: grid;
    gap: 5px;
    width: 100%;
    margin-top: 10px;
}

.main-mur_maries .container .sujet-card .sujet-image {
    width: 100%;
    /* Ajustez la taille selon vos besoins */
    max-height: 300px;
    object-fit: cover;
    /* Pour éviter la déformation */
    border-radius: 5px;
    cursor: pointer;
}

.main-mur_maries .container .sujet-card .menu-container {
    position: relative;
    display: inline-block;
}

.main-mur_maries .container .sujet-card .menu-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #b2602a;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
    float: right;
}

.main-mur_maries .container .sujet-card .menu-popup {
    display: none;
    position: absolute;
    top: 30px;
    right: 0;
    background: white;
    border: 1px solid #b2602a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 5px;
    border-radius: 5px;
}

.main-mur_maries .container .sujet-card .menu-popup button {
    background: none;
    border: none;
    color: red;
    font-weight: bold;
    padding: 5px 10px;
    cursor: pointer;
    width: 100%;
}

.main-mur_maries .container .sujet-card .menu-popup button:hover {
    color: black;
}

.main-mur_maries .container .sujet-card .nb-comments {
    align-self: flex-end;
    margin-top: 10px;
    color: #b2602a;
    font-weight: bold;
}

.main-mur_maries .container .sujet-card .nb-comments:hover {
    color: #000;
    text-decoration: underline;
    cursor: pointer;
}

.main-mur_maries #comments-modal .modal-content {
    width: 30%;
    height: 80%;
    overflow: auto;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    align-items: center;
}

/* Style du conteneur des commentaires */
#comments-container {
    margin-top: 20px;
    max-height: calc(100% - 90px);
    /* Réduit l'espace occupé par l'input fixe */
    overflow-y: auto;
    /* Ajoute un scroll aux commentaires */
    padding-right: 10px;
    /* Légère marge pour éviter que le texte touche les bords */
}

.no-comment {
    height: 40%;
    /* La div occupe 40% de la hauteur */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.no-comment i {
    font-size: 80%;
    /* Icône à 80% de la taille parent (ou augmenter si nécessaire) */
    font-size: 6rem;
    /* Ou une valeur en "rem" pour s'assurer d'une bonne lisibilité */
    margin-bottom: 10px;
    /* Ajouter un espace entre l'icône et le texte */
    color: #b2602a;
}

.no-comment p {
    text-align: center;
    /* Centrer le texte */
    font-size: 0.8rem;
    /* Taille du texte ajustée */
}

/* Style des commentaires individuels */
.comment {
    margin: 0px auto;
    position: relative;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

/* Style pour le pseudo (auteur) du commentaire */
.comment .comment-auteur {
    font-size: 0.9rem;
    font-weight: bold;
    color: #333;
    text-align: left;
}

/* Style pour le contenu du commentaire dans une bulle */
.comment .comment-contenu {
    background-color: #b2602a;
    /* Couleur de la bulle */
    color: #fff;
    /* Couleur du texte dans la bulle */
    padding: 10px;
    padding-right: 25px;
    /* Ajouté pour la marge à droite du texte */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: left;
    margin-bottom: 5px;
    /* Espacement entre la bulle et la date */
    position: relative;
    /* Permet le positionnement relatif */
}

/* Style pour les trois petits points (supprimer) */
.comment .delete-options {
    font-size: 1.0rem;
    cursor: pointer;
    color: #fff;
    position: absolute;
    top: 28px;
    /* Positionné en haut de l'élément parent */
    right: 10px;
    /* Positionné à droite de l'élément parent */
}

/* Style pour les trois petits points (supprimer) */
.comment .delete-options:hover {
    color: black;
}

/* Style pour la date du commentaire */
.comment .comment-date {
    font-size: 12px;
    color: #888;
    text-align: right;
}

/* Conteneur pour l'input et le bouton d'envoi */
.comment-input-container {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    display: flex;
    background-color: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    z-index: 999;
    /* Pour que le formulaire soit toujours au-dessus des commentaires */
    padding: 10px;
    box-sizing: border-box;
    /* Pour inclure la bordure dans le calcul de la largeur */
}

/* Style pour le textarea (zone de texte pour écrire un commentaire) */
#comment-input {
    width: 100%;
    /* Réduire légèrement la largeur de l'input pour faire de la place pour la flèche */
    min-height: 40px;
    /* Hauteur minimale de l'input */
    border-radius: 8px;
    border: 1px solid #b2602a;
    font-size: 14px;
    resize: none;
    /* Désactive le redimensionnement manuel */
    overflow-y: hidden;
    /* Empêche le défilement interne */
    transition: height 0.2s ease;
    background-color: #FFF8F0;
}

/* Conteneur pour le bouton d'envoi */
.comment-button-container {
    position: absolute;
    bottom: 0;
    /* Déplacer le bouton à 10px du bas */
    right: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    /* Aligne le bouton à droite */
    align-items: flex-end;
    /* Aligne le bouton au bas du conteneur */
    background-color: #fff;
    z-index: 999;
    /* Pour que le bouton soit toujours au-dessus des commentaires */
    box-sizing: border-box;
    /* Pour inclure la bordure dans le calcul de la largeur */
    margin-bottom: 10px;
}

/* Style pour le bouton d'envoi (flèche) */
#comment-submit {
    background-color: transparent;
    /* Même couleur que la bulle */
    color: #b2602a;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background-color 0.3s ease;
    margin-right: 10px;
}

#comment-submit:hover {
    color: #000;
    /* Effet au survol de la flèche */
}

@media (max-width: 1600px) {
    .header-mur_maries .image-checkbox-container {
        width: 70%;
        /* Utilisation maximale de la largeur */
    }
}

@media (max-width: 1100px) {
    .header-mur_maries .image-checkbox-container {
        width: 80%;
        /* Utilisation maximale de la largeur */
    }
}

@media (max-width: 800px) {
    .header-mur_maries {
        width: 90%;
    }

    .header-mur_maries .input-field {
        width: 50%;
    }

    .header-mur_maries .image-checkbox-container {
        width: 100%;
        /* Utilisation maximale de la largeur */
        gap: 5px;
        /* Espacement régulier entre tous les éléments */
    }

    .header-mur_maries .image-checkbox {
        flex-basis: calc(33% - 5px);
        /* Ajustement avec gap pour garantir 5 éléments alignés */
    }

    .header-mur_maries .image-checkbox-container label:nth-child(1n+1) {
        margin-left: auto;
    }

    .header-mur_maries .image-checkbox-container label:nth-child(1n) {
        margin-right: auto;
    }

    .main-mur_maries {
        width: 90%;
    }
}

/* Écrans moyens (tablettes) */
@media (max-width: 1300px) {
    .main-mur_maries .container {
        width: 80%;
    }

    .main-mur_maries .container .sujet-card {
        width: 100%;
        /* 1 carte par ligne */
    }

    .main-mur_maries .container {
        justify-content: center;
        /* Centrer les cartes */
    }

    .main-mur_maries #comments-modal .modal-content {
        width: 50%;
    }
}

/* Petits écrans (mobiles) */
@media (max-width: 600px) {
    .main-mur_maries .container {
        width: 90%;
        gap: 5px;
        /* Réduction de l’espace */
        margin-top: 40px;
    }

    .main-mur_maries .container .sujet-card {
        width: 100%;
        padding: 10px;
    }

    .main-mur_maries .container .sujet-card .categorie {
        font-size: 0.8rem;
    }

    .main-mur_maries .container .sujet-card .titre {
        font-size: 0.9rem;
    }

    .main-mur_maries .container .sujet-card .localisation,
    .main-mur_maries .container .sujet-card .auteur,
    .main-mur_maries .container .sujet-card .date {
        font-size: 0.7rem;
    }

    .main-mur_maries #comments-modal .modal-content {
        width: 80%;
    }
}

.main-mur_maries .post-box {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    width: 80%;
    margin: 10px auto;
    background-color: #FFF8F0;
}

.main-mur_maries .post-box .post-content {
    height: 150px;
    /* Hauteur minimale */
    border: none;
    outline: none;
    font-size: 16px;
    text-align: left;
    /* Alignement à gauche */
    padding: 5px;
    /* Ajout d'un léger padding pour éviter que le texte colle aux bords */
    resize: none;
    background-color: #FFF8F0;
}

.main-mur_maries .post-box .post-content:empty:before {
    content: attr(data-placeholder);
    color: rgba(0, 0, 0, 0.4);
    font-style: italic;
    text-align: left;
    /* Alignement à gauche du placeholder */
    display: block;
    /* Assure que le placeholder prend bien toute la largeur */
}

.main-mur_maries .post-box .attached-images {
    display: grid;
    gap: 5px;
    width: 100%;
    max-width: 500px;
    /* Ajuste la largeur max */
    margin-top: 10px;
    max-height: 300px;
    /* Limite la hauteur du conteneur des images */
    overflow-y: auto;
    /* Ajoute un défilement si le contenu est trop grand */
}

/* Style de la barre de défilement */
.main-mur_maries ::-webkit-scrollbar {
    width: 10px;
    /* Largeur de la barre de défilement */
}

/* Style de la "thumb" (la partie glissante de la barre) */
.main-mur_maries ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #b2602a, #923e14);
    /* Couleur de la "thumb" */
    border-radius: 10px;
    /* Bord arrondi pour la "thumb" */
    border: 3px solid #fff;
    /* Bordure blanche autour de la "thumb" */
}

/* Style de la "track" (la piste de la barre de défilement) */
.main-mur_maries ::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    /* Couleur de la piste */
    border-radius: 10px;
    /* Bord arrondi pour la piste */
}

/* Style de la barre de défilement au survol */
.main-mur_maries ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #b2602a, #923e14);
    /* Couleur plus foncée au survol */
}

.main-mur_maries .post-box .attached-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.main-mur_maries .post-box .attached-images .image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.main-mur_maries .post-box .attached-images .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: red;
    color: white;
    border: none;
    font-size: 12px;
    width: 24px;
    height: 24px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
}

.main-mur_maries .post-box .post-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 10px;
}

.main-mur_maries .post-box .add-text {
    font-size: 14px;
    color: #65676b;
    font-weight: 500;
}

.main-mur_maries .post-box .add-image-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: #45bd62;
    /* Couleur verte de Facebook */
}

.main-mur_maries .post-box .add-image-btn:hover {
    color: #36a420;
}

/* Style des popups */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    min-width: 20%;
    max-width: 80%;
    max-height: 80%;
    text-align: center;
    border: 2px solid #b2602a;
    position: relative;
    /* Ajouté pour permettre le positionnement absolu du bouton */
}

.modal-content .modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: white;
    background: red;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    width: 25px;
    /* Taille du bouton */
    height: 25px;
    /* Taille du bouton */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.modal-content .modal-close:hover {
    opacity: 0.5;
}

.modal-content img {
    width: 75px;
}

.modal-content h2 {
    font-size: 0.8em;
    color: black;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

/* Style des étiquettes */
.modal-content .input-label {
    display: block;
    margin-bottom: 3px;
    font-weight: bold;
    font-size: 0.8em;
    color: #333;
    text-align: center;
    width: 100%;
    /* Assure que le label est de la même largeur que l'input */
    margin-left: auto;
    /* Centrer horizontalement par rapport à l'input */
    margin-right: auto;
    /* Centrer horizontalement par rapport à l'input */
}

/* Style des champs d'entrée */
.modal-content .input-field {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #b2602a;
    border-radius: 5px;
    display: block;
    margin-left: auto;
    /* Centrer horizontalement */
    margin-right: auto;
    /* Centrer horizontalement */
    background-color: #FFF8F0;
}

.modal-content .input-color {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70px;
    height: 35px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    margin-bottom: 10px;
}

.modal-content .file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    border: 2px dashed #b2602a;
    border-radius: 10px;
    background-color: #FFF8F0;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 80%;
    margin: 10px auto;
}

.modal-content .file-upload:hover {
    background-color: #F5E8D2;
}

/* Texte affichant le nom du fichier */
.modal-content #file-name {
    font-size: 16px;
    color: #333;
    font-weight: bold;
}

/* Texte affichant le nom du fichier */
.modal-content #file-name {
    font-size: 14px;
    color: #666;
}

/* Conteneur du slider */
.modal-content .range-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin: 10px auto;
    font-family: Arial, sans-serif;
}

/* 🌟 Conteneur du slider */
.modal-content .range-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 10px auto;
    font-family: Arial, sans-serif;
}

/* 🎨 Personnalisation de la barre */
.modal-content .input-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(to right, #b2602a 100%, #ddd 100%);
    outline: none;
    cursor: pointer;
    transition: background 0.3s;
    border: 1px solid #b2602a;
}

/* 🔥 Curseur personnalisé */
.modal-content .input-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
    background: radial-gradient(circle, #f1c27d 40%, #b2602a 80%);
    border: 2px solid #b2602a;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
    margin-top: -7px;
}

/* 🔄 Pour Firefox */
.modal-content .input-range::-moz-range-thumb {
    width: 0;
    height: 0;
    opacity: 0;
    background: radial-gradient(circle, #f1c27d 40%, #b2602a 80%);
    border: 2px solid #b2602a;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.modal-content .input-range::-moz-range-thumb:hover {
    transform: scale(1.3);
}

/* 💡 Affichage dynamique de la valeur */
.modal-content #opacityValue {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 8px;
    background: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid #b2602a;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.modal-button {
    padding: 8px 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #b2602a;
}

.modal-button:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

.modal-button2 {
    padding: 8px 10px;
    text-align: center;
    font-size: 1.0rem;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #b2602a;
}

.modal-button2:hover {
    background-color: #b2602a;
    opacity: 0.8;
}

.modal-content .modal-links {
    margin-top: 10px;
    /* Espacement de 10px entre le bouton et les liens */
    display: flex;
    flex-direction: column;
    /* Les liens s'empilent verticalement */
    align-items: center;
    /* Centrer les liens horizontalement */
    gap: 5px;
    /* Espacement de 5px entre les liens */
}

.modal-content .modal-links a {
    text-decoration: none;
    color: #b2602a;
    font-size: 0.9em;
    transition: color 0.3s ease;
    text-align: center;
    /* Assure que le texte est centré */
}

.modal-content .modal-links a:hover {
    color: #000;
    /* Couleur au survol */
}

/* Footer */
footer {
    background-color: #923e14;
    color: white;
    text-align: center;
    padding: 10px 0;
    margin-top: auto;
    /* Le footer va se coller en bas */
    width: 100%;
    position: relative;
}

/* Rendre le footer flexible pour qu'il se place en bas */
.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-section {
    flex: 1;
    min-width: 250px;
    max-width: 350px;
}

.footer-bottom {
    margin-top: 30px;
    font-size: 0.9rem;
    color: #fff;
}

.footer-section h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #fff;
}

.footer-section p {
    margin-bottom: 10px;
    line-height: 1.5;
}

.footer-section a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: #000;
}

/* Section des liens dans le footer */
.footer-section.links .links-list {
    display: flex;
    flex-direction: column;
    /* Pour afficher les liens les uns sous les autres */
    gap: 10px;
    /* Espace entre les liens */
    padding: 0;
    /* Retirer les marges ou padding indésirables */
}

.footer-section.links a {
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    transition: color 0.3s;
}

.footer-section.links a:hover {
    color: #000;
    /* Changer la couleur au survol */
}

.footer-bottom {
    margin-top: 30px;
    font-size: 0.9rem;
    color: #fff;
}

.footer-bottom p {
    margin: 0;
}

/* Responsive styles */
@media (max-width: 1100px) {
    .navbar .buttons {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 64px;
        right: 0px;
        background-color: #923e14;
        border-radius: 0px 0px 10px 10px;
        padding: 10px;
        gap: 10px;
    }

    .navbar .buttons.active {
        display: flex;
    }

    .hamburger {
        display: flex;
    }

    .hero-text {
        position: absolute;
        /* Positionner le texte par-dessus l'image */
        top: 50%;
        /* Centrer verticalement */
        left: 50%;
        /* Centrer horizontalement */
        transform: translate(-50%, -50%);
        /* Centrage parfait */
        text-align: center;
        /* Centrer le texte */
        color: white;
        /* Texte en blanc */
        background-color: rgba(0, 0, 0, 0.4);
        /* Fond semi-transparent */
        padding: 20px;
        border-radius: 10px;
        width: 80%;
    }

    /* Style pour le titre */
    .hero-text h2 {
        font-size: 1.0rem;
        margin: 0;
    }

    /* Style pour le paragraphe */
    .hero-text p {
        font-size: 0.8rem;
        margin-top: 10px;
    }

    .feature-boxes {
        grid-template-columns: 1fr;
        /* Une seule colonne sur les petits écrans */
        gap: 30px;
        /* Augmenter l'espace entre les boîtes */
    }

    .feature-box {
        max-width: 70%;
        /* Les boîtes prennent toute la largeur du conteneur */
        padding: 15px;
        /* Réduire le padding pour les petits écrans */
    }

    .feature-boxes p {
        font-size: 0.9em;
        /* Réduire la taille du texte dans les boîtes pour les petits écrans */
    }

    .modal-content {
        width: 80%;
        max-height: 80%;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-section {
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-bottom {
        font-size: 1rem;
    }

    /* Conteneur du carrousel */
    .carousel {
        width: 80%;
        margin: 10px auto;
        position: relative;
        height: 80%;
        /* Définir une hauteur fixe pour le carrousel */
        overflow: hidden;
        /* Pour masquer toute partie de la vidéo qui dépasse */
        display: flex;
        /* Utiliser flexbox pour centrer le contenu */
        justify-content: center;
        /* Centrer horizontalement */
        align-items: center;
        /* Centrer verticalement */
        padding: 20px;
    }

    /* Vidéo */
    .carousel-item {
        width: 50%;
        /* Largeur de la vidéo comme dans votre code initial */
        height: 100%;
        /* La vidéo occupe toute la hauteur du conteneur */
        object-fit: contain;
        /* Assurer que la vidéo reste visible sans être coupée, et qu'elle s'adapte à l'espace sans déformation */
        z-index: 1;
        /* Assurer que la vidéo soit devant les images */
        border-radius: 20px;
        max-width: 100%;
        /* La vidéo ne dépassera pas la largeur de son conteneur */
        max-height: 100%;
        /* La vidéo ne dépassera pas la hauteur du conteneur */
    }


    /* Images à gauche et à droite */
    .carousel-side-img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /* Centrer verticalement */
        width: 20%;
        /* Largeur des images à gauche et à droite (ajuster selon besoin) */
        height: 80%;
        /* Hauteur automatique pour respecter les proportions */
        z-index: 2;
        /* Assurer que les images soient devant la vidéo */
        opacity: 0.2;
        /* Réglage de l'opacité (ajuste cette valeur) */
    }

    .mymariage-container {
        flex-direction: column;
        align-items: center;
        /* Centre les éléments */
        gap: 20px;
        /* Espacement vertical entre les éléments */
        margin-top: 30px;
    }

    .mymariage-container .mymariage-form-container {
        /* Occupe presque toute la largeur */
        width: 100%;
        margin-bottom: 20px;
    }

    .mymariage-container #mymariage-table-container,
    .mymariage-container #mymariage-main-container,
    .mymariage-container #mymariage-categories-container,
    .mymariage-container #mymariage-invites-container,
    .mymariage-container #mymariage-taches-container,
    .mymariage-container #mymariage-plannings-container,
    .mymariage-container #mymariage-tables-container,
    .mymariage-container #mymariage-photos-livreaudio-space-container {
        /* Occupe presque toute la largeur */
        width: 100%;
        margin-bottom: 20px;
    }

    .mymariage-container .stats-button {
        top: 10px;
    }

    /* Liste des catégories */
    .mymariage-container #mymariage-categories-container #mycategories-list {
        width: 90%;
        max-height: 400px;
        overflow-y: auto;
    }

    #mymariage-categories-container #mycategories-list .category-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* Style des colonnes d'invités */
    .mymariage-container .invites-columns {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Permet de placer les colonnes les unes sous les autres */
        gap: 20px;
        /* Espace entre les colonnes */
        width: 90%;
        margin: 40px auto;
    }

    /* Liste des catégories */
    #mymariage-main-container #container-toggle #mycategories-list-intoggle {
        width: 90%;
        max-height: 400px;
        overflow-y: auto;
    }

    #mymariage-main-container #container-toggle #mycategories-list-intoggle .category-item-intoggle {
        flex: 1 1 100%;
        max-width: 100%;
        height: 60px;
    }

    /* Style des colonnes d'invités */
    #mymariage-main-container #container-toggle #mycategories-list-intoggle .category-name-intoggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Permet de placer les colonnes les unes sous les autres */
        gap: 20px;
        /* Espace entre les colonnes */
        width: 90%;
        margin: 40px auto;
    }

    /* Style des colonnes d'invités */
    #mymariage-main-container #container-toggle .invites-columns-intoggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Permet de placer les colonnes les unes sous les autres */
        gap: 20px;
        /* Espace entre les colonnes */
        width: 90%;
        margin: auto;
    }

    .mymariage-container .invites-column .button-container {
        display: flex;
        gap: 2px;
        /* Espacement entre les boutons */
    }

    .mymariage-container .invites-column button.delete-btn {
        font-size: 0.8rem;
    }

    .mymariage-container #mymariage-table-container .form-row {
        flex-direction: column;
    }

    .mymariage-container #mymariage-table-container #total-container {
        width: 70%;
        font-size: 0.9rem;
    }

    .mymariage-container #mymariage-table-container .search-filter {
        width: 90%;
    }

    .mymariage-container #mymariage-invites-container .search-invites-filter {
        width: 90%;
    }

    .mymariage-container #mymariage-taches-container .search-taches-filter {
        width: 90%;
    }

    .mymariage-container #mymariage-table-container #status-filter {
        text-align: left;
        width: 40%;
        /* Largeur du filtre */
    }

    .mymariage-container #mymariage-invites-container #filter-status {
        text-align: left;
        width: 40%;
        /* Largeur du filtre */
    }

    .mymariage-container #mymariage-taches-container #search-invite {
        width: 30%;
    }

    .mymariage-container #mymariage-taches-container #filter-priority {
        text-align: left;
        width: 35%;
    }

    .mymariage-container #mymariage-taches-container #filter-taches-status {
        text-align: left;
        width: 35%;
    }

    /* Conteneur des tâches */
    .mymariage-container #mymariage-taches-container #mytaches-list {
        width: 90%;
    }

    /* Éléments de tâche */
    .mymariage-container #mymariage-taches-container #mytaches-list .tache-item {
        width: 100%;
    }

    /* Nom de la tâche (centré) */
    .mymariage-container #mymariage-taches-container #mytaches-list .tache-title {
        font-size: 1.0rem;
        margin-bottom: 5px;
        /* Espacement avec les détails */
    }

    .mymariage-container #mymariage-taches-container #mytaches-list .tache-details {
        /* Espacement avec les détails */
        margin-bottom: 30px;
    }

    /* Boutons d'action */
    .mymariage-container #mymariage-taches-container #mytaches-list button.delete-tache,
    .mymariage-container #mymariage-taches-container #mytaches-list button.edit-tache {
        padding: 2px 4px;
    }

    /* Conteneur des planning */
    .mymariage-container #mymariage-plannings-container #myplannings-list {
        width: 90%;
    }

    /* Éléments de tâche */
    .mymariage-container #mymariage-plannings-container #myplannings-list .planning-item {
        width: 100%;
    }

    .mymariage-container #mymariage-plannings-container h2 {
        margin-top: 10px;
    }
}

@media (max-height: 800px) {
    .modal-content {
        max-height: 80%;
        overflow-y: auto;
    }

    .mymariage-container #mymariage-table-container .form-row {
        flex-direction: column;
    }

    .mymariage-container #mymariage-table-container .form-row .input-group input,
    .mymariage-container #mymariage-table-container .form-row select {
        width: 90%;
        padding: 10px;
        font-size: 1em;
        border-radius: 5px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .mymariage-container #mymariage-table-container .form-row select {
        margin-top: -10px;
    }
}