body {
    margin: 0;
    background: #111 url(https://lllona.fr/background/auto-Canal2_Cam%C3%A9ra1_192.168.1.14_20170313213449_5793346.jpg) center center / cover no-repeat;
    background-attachment: fixed; /* Assure-toi que cette ligne fonctionne correctement */
    font-family: Arial, sans-serif;
    text-align: center;
    color: white;
    height: 98vh;
    background-size: cover;
    background-position: center;
    transition: background-image 1s ease-in-out;
}


/* .dashboard-container avec un fond plus clair */
.dashboard-container {
    max-width: 1200px;
    margin: 1rem auto;
    background: none;  /* Gris foncé mais moins intense: rgba(40, 40, 40, 0.8); */
    border-radius: none; /* 30px; */
    display: flex;
    flex-direction: row;
    padding: 2rem;
    gap: 2rem;
    border: none;  /* Bordure légère pour faire ressortir: 2px solid rgba(255, 255, 255, 0.2); */
    box-shadow: none;  /* Ombre portée pour ajouter de la profondeur: 0px 4px 10px rgba(0, 0, 0, 0.3); */
}



@keyframes pulseSubtleGreenAlways {
    0% {
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.1), 0 0 12px rgba(92, 184, 92, 0.4); /* Lumière douce */
    }
    50% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.2), 0 0 18px rgba(92, 184, 92, 0.8); /* Lumière un peu plus forte */
    }
    100% {
        box-shadow: 0 0 6px rgba(255, 255, 255, 0.1), 0 0 12px rgba(92, 184, 92, 0.4); /* Retour à l'état initial */
    }
}

/* Animation subtile de pulsation (en arrière-plan) */
@keyframes pulseSubtleGreen {
    0% {
        box-shadow: 0 0 8px rgba(92, 184, 92, 0.4), 0 0 15px rgba(92, 184, 92, 0.5);
    }
    50% {
        box-shadow: 0 0 16px rgba(92, 184, 92, 0.6), 0 0 30px rgba(92, 184, 92, 0.7);
    }
    100% {
        box-shadow: 0 0 8px rgba(92, 184, 92, 0.4), 0 0 15px rgba(92, 184, 92, 0.5);
    }
}

/* Animation au survol du bouton */
@keyframes pulseHoverGreen {
    0% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 0 0 24px rgba(92, 255, 92, 0.4);
    }
    50% {
        box-shadow: 0 0 28px rgba(255, 255, 255, 1), 0 0 50px rgba(92, 255, 92, 0.8);
    }
    100% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 0 0 24px rgba(92, 255, 92, 0.4);
    }
}

.toggle-btn {
    background-color: rgba(92, 184, 92, 0.42); /* Vert translucide */
    color: white;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    width: auto;

    /* Effets visuels */
    -webkit-backdrop-filter: blur(6px); /* Safari 9+ */
    backdrop-filter: blur(6px);         /* Autres navigateurs */
    box-shadow: 0 0 6px rgba(92, 184, 92, 0.3);

    /* Transitions et animations */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    animation: pulseSubtleGreen 3s infinite;
}


.toggle-btn:hover {
    background-color: rgba(92, 184, 92, 1);  /* Couleur verte plus forte au survol */
    transform: scale(1.05);  /* Agrandissement léger */
    animation: pulseHoverGreen 1s infinite;  /* Animation au survol */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);  /* Ombre douce au survol */
}

.toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.6);  /* Halo léger autour du bouton */
}

.toggle-btn:active {
    transform: scale(1.05);
}

.toggle-btn i {
    margin-right: 10px;  /* Espacement entre l'icône et le texte */
    font-size: 20px;  /* Taille de l'icône */
}


.hidden {
    display: none;
}

.overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* fond sombre translucide */
    -webkit-backdrop-filter: blur(5px);  /* pour Safari */
    backdrop-filter: blur(5px);          /* pour les autres */
    z-index: 999;
}


/* Animation subtile de pulsation (en arrière-plan) */
@keyframes pulseSubtleGreen {
    0% {
        box-shadow: 0 0 12px rgba(92, 184, 92, 0.5), 0 0 20px rgba(92, 184, 92, 0.7);
    }
    50% {
        box-shadow: 0 0 24px rgba(92, 184, 92, 0.7), 0 0 40px rgba(92, 184, 92, 0.9);
    }
    100% {
        box-shadow: 0 0 12px rgba(92, 184, 92, 0.5), 0 0 20px rgba(92, 184, 92, 0.7);
    }
}

/* Animation au survol du bouton */
@keyframes pulseHoverGreen {
    0% {
        box-shadow: 0 0 18px rgba(255, 255, 255, 0.8), 0 0 30px rgba(92, 255, 92, 0.6);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 255, 255, 1), 0 0 70px rgba(92, 255, 92, 0.9);
    }
    100% {
        box-shadow: 0 0 18px rgba(255, 255, 255, 0.8), 0 0 30px rgba(92, 255, 92, 0.6);
    }
}

/* Style du petit bouton */
.toggle-btn-small {
    background-color: rgba(92, 184, 92, 0.67);  /* Vert avec transparence */
    color: white;
    padding: 0.2rem 0.4rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    margin-top: -1px;
    display: inline-block;

    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    animation: pulseSubtleGreen 2.5s infinite;  /* Animation subtile en permanence */
}

/* Effet au survol du bouton */
.toggle-btn-small:hover {
    background-color: #4cae4c;  /* Couleur verte plus forte au survol */
    transform: scale(1.1);  /* Agrandissement léger au survol */
    animation: pulseHoverGreen 1.5s infinite;  /* Animation plus forte au survol */
}

/* Effet de focus du bouton */
.toggle-btn-small:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.6);  /* Halo autour du bouton */
}

/* Effet au clic du bouton */
.toggle-btn-small:active {
    transform: scale(1.05);  /* Effet de rétrécissement léger lors du clic */
}

.toggle-btn-small {
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.6);  /* Lueur blanche subtile au départ */
    }
    50% {
        box-shadow: 0 0 16px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.85);  /* Lueur blanche plus intense */
    }
    100% {
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.6);  /* Retour à l'état initial */
    }
}

/* Conteneur wrapper avec l'effet lumineux autour du cadre */
.add-link-sidebar-wrapper {
    position: relative;
    display: inline-block;        /* Ne prend que l'espace du cadre interne */
    padding: 0px;                 /* Ajout d'un léger espace autour pour l'effet lumineux */
    margin: 0 auto;               /* Centre horizontalement */
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3), 0 0 24px rgba(255, 255, 255, 0.6);  /* Lueur blanche et verte */
    animation: pulseGlow 2s infinite;  /* Animation de lueur pulsée */
    border-radius: 15px;
    max-width: 500px;
    width: 100%;
}

/* Cadre principal */
.add-link-sidebar {
    width: 100%;                /* Le cadre prend toute la largeur de son parent */
    max-width: 500px;           /* Limite la largeur du cadre */
    padding: 0px;
    border-radius: 15px;
    background: rgba(40, 40, 40, 0.75);  /* Gris foncé avec transparence */
    margin-top: 0rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);  /* Ombre légère */
    border: 2px solid transparent;  /* Bordure transparente pour ne pas interférer avec l'effet de lueur */
    position: relative;            /* Permet d'ajouter un effet sur l'élément */
    z-index: 1;                   /* S'assure que le contenu du cadre soit au-dessus de la lueur */
}

/* Pseudo-élément pour appliquer l'effet lumineux autour du cadre */
.add-link-sidebar-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 15px;        /* Bordure arrondie pour correspondre au cadre */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.5);  /* Lueur blanche pulsée */
    animation: pulseGlow 2s infinite;  /* Animation de lueur pulsée */
    pointer-events: none;        /* Empêche ce pseudo-élément d'interférer avec l'interaction */
    z-index: -1;                 /* Placer le pseudo-élément derrière le cadre */
}


/* Optionnel: Animation de lueur au survol du bouton */
@keyframes pulseHoverGreen {
    0% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 0 0 24px rgba(92, 255, 92, 0.4);
    }
    50% {
        box-shadow: 0 0 28px rgba(255, 255, 255, 1), 0 0 50px rgba(92, 255, 92, 0.8);
    }
    100% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 0 0 24px rgba(92, 255, 92, 0.4);
    }
}


/* Optionnel: Bouton "Ajouter" */
.add-link-sidebar button {
    background-color: #007BFF;
    color: white;
    padding: 0.7rem 1.2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: 1rem;
    width: 8%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-link-sidebar button:hover {
    background-color: #4cae4c;
    transform: scale(1.1);
    animation: pulseHoverGreen 1.5s infinite;
}

/* Optionnel: Animation de lueur au survol du bouton */
@keyframes pulseHoverGreen {
    0% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 0 0 24px rgba(92, 255, 92, 0.4);
    }
    50% {
        box-shadow: 0 0 28px rgba(255, 255, 255, 1), 0 0 50px rgba(92, 255, 92, 0.8);
    }
    100% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 0 0 24px rgba(92, 255, 92, 0.4);
    }
}





aside.add-link-sidebar h2 {
    color: white;
    margin-top: 0;
    font-size: 1.5rem;
    text-align: center;
}

aside.add-link-sidebar .message,
aside.add-link-sidebar .error,
aside.add-link-sidebar .errors {
    color: #fff;
    margin-bottom: 1rem;
    padding: 0.8rem;
    border-radius: 5px;
}

aside.add-link-sidebar .message {
    background-color: rgba(0, 128, 0, 0.6);
    border: 1px solid green;
}

aside.add-link-sidebar .error {
    background-color: rgba(255, 0, 0, 0.6);
    border: 1px solid red;
}

aside.add-link-sidebar .errors {
    background-color: rgba(255, 165, 0, 0.6);
    border: 1px solid orange;
}

aside.add-link-sidebar .add-link-form.vertical {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

aside.add-link-sidebar .add-link-form.vertical .input-group {
    display: flex;
    flex-direction: column;
}

/* Styles des labels */
aside.add-link-sidebar .add-link-form.vertical label {
    color: #8BC34A;  /* Utilisation d'un gris foncé pour améliorer la visibilité sur fond blanc */
    font-size: 1rem;  /* Taille de police un peu plus grande */
    margin-bottom: 0.3rem;
    font-weight: bold;  /* Mettre le texte des labels en gras pour plus de clarté */
}

/* Styles pour les champs de texte */
aside.add-link-sidebar .add-link-form.vertical input[type="text"],
aside.add-link-sidebar .add-link-form.vertical input[type="url"],
aside.add-link-sidebar .add-link-form.vertical select,
aside.add-link-sidebar .add-link-form.vertical input[type="file"] {
    padding: 0.5rem;
    border: 1px solid #ccc;  /* Bordure claire pour mieux délimiter les champs */
    border-radius: 5px;
    background: #fff;  /* Fond blanc pour les champs */
    color: #333;  /* Texte en gris foncé pour le contraste */
    box-sizing: border-box;
    width: 100%;
}

/* Styles de focus pour améliorer l'interaction */
aside.add-link-sidebar .add-link-form.vertical input[type="text"]:focus,
aside.add-link-sidebar .add-link-form.vertical input[type="url"]:focus,
aside.add-link-sidebar .add-link-form.vertical select:focus,
aside.add-link-sidebar .add-link-form.vertical input[type="file"]:focus {
    border-color: #007bff;  /* Bordure bleue au focus pour attirer l'attention */
    outline: none;  /* Enlever l'outline par défaut pour éviter le double contour */
}

/* Animation subtile de pulsation (en arrière-plan) */
@keyframes pulseSubtleGreen {
    0% {
        box-shadow: 0 0 8px rgba(92, 184, 92, 0.4), 0 0 15px rgba(92, 184, 92, 0.5);
    }
    50% {
        box-shadow: 0 0 16px rgba(92, 184, 92, 0.6), 0 0 30px rgba(92, 184, 92, 0.7);
    }
    100% {
        box-shadow: 0 0 8px rgba(92, 184, 92, 0.4), 0 0 15px rgba(92, 184, 92, 0.5);
    }
}

/* Animation au survol du bouton */
@keyframes pulseHoverGreen {
    0% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 0 0 24px rgba(92, 255, 92, 0.4);
    }
    50% {
        box-shadow: 0 0 28px rgba(255, 255, 255, 1), 0 0 50px rgba(92, 255, 92, 0.8);
    }
    100% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 0 0 24px rgba(92, 255, 92, 0.4);
    }
}

/* Styles du bouton Ajouter */
aside.add-link-sidebar .add-link-form.vertical button {
    background-color: #007BFF;  /* Bleu de fond */
    color: white;  /* Texte en blanc */
    padding: 0.7rem 1.2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    margin-top: -2rem;
    width: 100%;
    font-weight: bold;
    display: inline-flex;  /* Permet d'ajouter l'icône et le texte sur la même ligne */
    align-items: center;  /* Centrer verticalement l'icône et le texte */
    justify-content: center;
}

/* Ajout de l'icône et du texte */
aside.add-link-sidebar .add-link-form.vertical button i {
    margin-right: 10px;  /* Espace entre l'icône et le texte */
    font-size: 20px;  /* Taille de l'icône */
}

/* Animation au survol */
aside.add-link-sidebar .add-link-form.vertical button:hover {
    background-color: #4cae4c;  /* Couleur verte au survol */
    transform: scale(1.1);  /* Agrandissement du bouton */
    animation: pulseHoverGreen 1.5s infinite;  /* Effet lumineux au survol */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);  /* Ombre douce au survol */
}

aside.add-link-sidebar .add-link-form.vertical button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(92, 184, 92, 0.6);  /* Halo vert autour du bouton */
}

aside.add-link-sidebar .add-link-form.vertical button:active {
    transform: scale(1.05);  /* Rétrécissement léger lors du clic */
}



aside.add-link-sidebar .logout-form {
    text-align: center;
    margin-top: 2rem;
}

aside.add-link-sidebar .logout-form button {
    background-color: #d9534f;
    color: white;
    padding: 0.7rem 1.2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    width: 100%;
}

aside.add-link-sidebar .logout-form button:hover {
    background-color: #c9302c;
}



@keyframes glowLinkContainer {
    0% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.15), 0 0 20px rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.85);
    }
    100% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.15), 0 0 20px rgba(255, 255, 255, 0.2);
    }
}

main.link-container {
    flex-grow: 1;
    padding: 0rem;
    border-radius: 25px;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    color: white;

    animation: glowLinkContainer 4s ease-in-out infinite;
    transition: box-shadow 0.5s ease;
}


.link-list {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 0rem;
    flex-wrap: wrap;
}

.link-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}


.bubble {
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease;
    cursor: pointer;
    margin-bottom: 0.3rem;
}

.bubble:hover {
    transform: scale(2.4);
}

.bubble {
    background: none !important;
    border: none !important;
}

.bubble img {
    background: none !important;
    border-radius: 50%;
}

.ui-sortable-helper {
    background: transparent !important;
    border: none !important;
}

.link-list li a {
    text-decoration: none;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;  /* Activer les clics sur les liens */
}

.link-name {
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

/* Bouton corbeille */
.delete-button {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 5px;
    font-size: 1rem;
    display: none;
    z-index: 10;
    font-size: 0.9em;
    width: 20px;
    height: 20px;
    padding: 0;
    z-index: 20;  /* Assurez-vous que la corbeille est bien au-dessus du lien */
    pointer-events: auto;  /* Activer les clics sur le bouton de suppression */
    
    /* Ajoutez ces règles pour enlever l'arrière-plan et la bordure */
    background: rgba(0, 0, 0, 0.2); /* Fond transparent */  /* Aucun fond: none */
    border: none;  /* Aucune bordure */
    box-shadow: none;  /* Aucun ombrage */
    transition: background 0.3s ease, opacity 0.3s ease; /* Ajoute une transition douce */
    opacity: 0.6; /* Transparence par défaut */
}

/* Lorsque la corbeille est affichée */
.show-delete-button .delete-button {
    display: block;
}

/* Optionnel: si vous avez une icône ou un symbole, vous pouvez ajuster son apparence */
.delete-button:hover {
    background: rgba(0, 0, 0, 0.8); /* Fond plus foncé au survol */
    opacity: 1; /* Moins transparent au survol */
}



/* Conteneur centré */
.button-container {
    display: flex;
    justify-content: center;  /* Centrage horizontal */
    align-items: center;
    gap: 20px;                /* Espace entre les boutons */
    margin-top: 30px;
}

@keyframes pulseSubtleRed {
    0% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.3), 0 0 20px rgba(255, 0, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.5), 0 0 40px rgba(255, 0, 0, 0.7);
    }
    100% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.3), 0 0 20px rgba(255, 0, 0, 0.5);
    }
}

/* Contrôle permanent par classe "pulse-red" */
.pulse-red {
    animation: pulseSubtleRed 2.5s infinite;
    font-size: 30px;
    color: red;
    transition: transform 0.2s ease;
}

/* Optionnel : hover plus fort */
.pulse-red:hover {
    transform: scale(1.1);
}

#trash-btn {
    all: unset; /* supprime tous les styles natifs du bouton */
    display: inline-block;
    cursor: pointer;
}

#trash-btn i {
    font-size: 22px;
    color: red;
    filter: drop-shadow(0 0 0 transparent);
    transition: filter 0.3s ease, transform 0.2s ease;
}

#trash-btn:hover i {
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.9));
    transform: scale(1.1);
}



.initial-letter {
    width: 40px;
    height: 40px;
    background-color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: white;
    border-radius: 50%;
    margin-bottom: 0.3rem;
}

.container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 1.5rem;
}


.success-message {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.error-list {
    color: #721c24;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.error-list li {
    list-style-type: disc;
}

.registration-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.submit-button {
    background-color: #007bff;
    color: white;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #0056b3;
}

.submit-button:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

h1 {
    color: white;
}

.add-shortcut-section {
    max-width: 1200px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.link-list li.dragging {
    opacity: 0.5;
    border: 2px dashed #aaa;

}

.link-list li[draggable="true"] {
    cursor: move;
    z-index: 10;  /* S'assurer que les liens sont au-dessus */
}

#orbs li {
    cursor: move;
    transition: transform 0.2s ease-in-out;
}

#orbs li.dragging {
    opacity: 0.5;
}

#orbs li.placeholder {
    background-color: #f0f0f0;
    border: 2px dashed #ccc;
    height: 50px;
}

/* Ajout du style pour le #sortable */
#sortable {
    list-style-type: none;
    padding: 0;
}

#sortable li {
    margin: 5px;  /* Supprime la marge entre les éléments */
    padding: 10px; /* Réduit l'espace intérieur de chaque élément */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Transition douce pour la réorganisation */
    touch-action: none;  /* Désactive les comportements par défaut du toucher pour éviter les conflits */
}

}

/* Style de l'élément pendant le déplacement */
#sortable li:active {
    opacity: 0.7;  /* Réduit l'opacité pour donner l'impression que l'élément est déplacé */
    transform: scale(1.05);  /* Agrandit légèrement l'élément pour le mettre en évidence */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  /* Ajoute une ombre portée pour un effet de flottement */
    z-index: 10000;  /* S'assure que l'élément est au-dessus des autres */
}

.sortable-item {
    cursor: grab;        /* Changer le curseur pour indiquer que l'élément peut être déplacé */
    z-index: 1001;       /* Assurer que les éléments peuvent être cliqués ou déplacés */
}


.icon-list {
    margin-top: 10px;
}

.icon-list img {
    margin: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* Bouton de déconnexion */
.logout-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    background-color: #d9534f;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.logout-btn:hover {
    background-color: #c9302c;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Bouton de déconnexion */
.home-btn {
    position: absolute;
    top: 5px;
    right: 30px;
    background-color: #3498db;
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Cibler la page d'accueil */
body.home .accueil-link {
    background-color: rgb(14, 236, 17); /* Vert vif */
    color: white; /* Texte blanc pour un bon contraste */
}

body.home .accueil-link:hover {
    background-color: rgb(10, 200, 14); /* Une nuance un peu plus foncée au survol */
}


/* Espacement pour le message de bienvenue sous le bouton */
.user-info {
    margin-top: 60px;  /* Augmente cet espacement pour descendre un peu plus bas sous le bouton */
    font-size: 16px;
    color: white;
}

/* Donne un fond jaune si l'utilisateur n'a pas rempli un champ obligatoire */
input:invalid, select:invalid {
    border-color: red;
}

input:valid, select:valid {
    border-color: green;
}

.shortcut-help {
    position: absolute;
    top: 80px;
    left: 15px;
    background-color: transparent;  /* Fond transparent comme la corbeille */
    border: 2px solid #ccc;  /* Bordure grise comme la corbeille */
    border-radius: 50%;  /* Forme ronde */
    padding: 8px;
    cursor: pointer;
    transition: all 0.3s ease;  /* Ajout d'une transition pour fluidifier les changements */
}

.shortcut-help a {
    text-decoration: none;
    color: #555;  /* Couleur de l'icône du point d'interrogation assortie à la corbeille */
    font-size: 1.6em;
}

.shortcut-help:hover {
    background-color: #f2f2f2;  /* Fond de survol similaire à la corbeille */
    border-color: #999;  /* Bordure plus claire au survol */
}

.shortcut-help a:hover {
    color: #e74c3c;  /* Couleur rouge de l'icône au survol, comme la corbeille */
}

@keyframes pulseGlowTextOnly {
  0%, 100% {
    text-shadow:
      0 0 4px rgba(255, 255, 255, 0.6),
      0 0 8px rgba(255, 255, 255, 0.4),
      0 0 12px rgba(255, 255, 255, 0.2);
  }
  50% {
    text-shadow:
      0 0 10px rgba(255, 255, 255, 0.9),
      0 0 20px rgba(255, 255, 255, 0.7),
      0 0 30px rgba(255, 255, 255, 0.5);
  }
}

.welcome-message {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    margin-left: center;

    animation: pulseGlowTextOnly 2.5s infinite ease-in-out;
    background-color: transparent !important;
    padding: 0;
    display: inline-block;
}


@keyframes pulseGlowRed {
    0%, 100% {
        text-shadow: 0 0 10px rgba(255, 50, 50, 0.6), 0 0 20px rgba(255, 50, 50, 0.4);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 50, 50, 1), 0 0 30px rgba(255, 50, 50, 0.8);
    }
}
.welcome-message.guest {
    color: #ff3333;
    animation: pulseOpacity 2s infinite, pulseGlowRed 2s infinite;
}

/* Message de succès */
.alert.success {
    background-color: #28a745; /* Vert pour le succès */
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 16px;
    display: inline-block;
    width: 100%; /* Largeur à 100% pour occuper toute la ligne */
    text-align: center; /* Centrer le texte */
    white-space: nowrap; /* Empêcher la coupure du texte */
    animation: fadeOut 5s forwards; /* Animation de disparition après 5 secondes */
}

/* Message d'erreur */
.alert.error {
    background-color: #dc3545; /* Rouge pour l'erreur */
    color: white;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 16px;
    display: inline-block;
    width: 100%; /* Largeur à 100% pour occuper toute la ligne */
    text-align: center; /* Centrer le texte */
    white-space: nowrap; /* Empêcher la coupure du texte */
    animation: fadeOut 5s forwards; /* Animation de disparition après 5 secondes */
}

/* Animation pour faire disparaître le message */
@keyframes fadeOut {
    0% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; display: none; }
}