/* -----------------------------------------
----                                    ----
----  EN MODE DE FONCTIONNEMENT COMMUN  ----
----                                    ----
--------------------------------------------
*/

main {
    margin-top: 0;
    padding: 10px 10px;
}

/* Ce style n'est pas utilisé sur la page mais conservé pour cohérence */
.container {
    max-width: 1000px;
    margin: 90px auto;
    padding: 20px;
    padding-top: 80px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 25px;
    margin-top: 80px;
}

.header-title {
    color: #1f2937;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 20px 0 0;
    text-align: center;
}

.back-link {
    color: #0cb166;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1rem;
    padding-left: 30px;
    white-space: nowrap;
    /* Empêche le lien de passer à la ligne */
}

.back-link:hover {
    text-decoration: underline;
}

.stats-container {
    margin-bottom: 40px;
    padding: 15px;
    border-radius: 15px;
    /*background-color: #f3f4f6;*/
    background-color: #f3f4f6;
    border: 1px solid #c8cdd7;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;

}

.peson-list {
    padding: 15px;
    border-radius: 20px;
    background-color: #f3f4f6;
    border: 1px solid #c8cdd7;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    padding-bottom: 90px;
}

.stat-card {
    background-color: white;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 7px solid;
    flex-direction: column;

    /* MODIFICATION CLÉ 1: Retirer l'alignement central général */
    display: flex;
    flex-direction: column;
    /* align-items: center; <-- SUPPRIMÉ POUR DÉCALER LE FOOTER */
    justify-content: center;
    height: 100px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    max-width: 160px;

}

.stat-footer {
    /* MODIFICATION CLÉ 2: Aligner le contenu à gauche */
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: end;
    justify-content: flex-start;
    /* Aligner l'icône et le texte à gauche */
    width: 100%;
    /* S'assurer qu'il prend toute la largeur */
    padding-left: 5px;
    /* Ajouter un padding pour l'alignement visuel */
    padding-bottom: 10px;
}


.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.stat-content {
    /* Le contenu (nombre + libellé) est maintenant dans une colonne */
    line-height: 1.1;
}

.stat-value {
    /* Le nombre est en haut */
    color: #1f2937;
    margin-bottom: 5px;
}

.stat-value-large {
    /* MODIFICATION CLÉ 3: Recentrer explicitement le chiffre */
    font-size: 2em;
    padding-bottom: 10px;
    width: 100%;
    /* Pour que le text-align fonctionne */
    text-align: center;
    /* Recentrer le nombre */
    padding-top: 10px;

}


.stat-label {
    /* Le libellé est en bas et prend moins de place */
    margin-bottom: 0;
}

/* --- Style spécifique à la carte TOTALE (pleine largeur) --- */
.stat-total-full {
    border-left-color: #4f46e5;
    /* Bleu */
    --total-color: #4f46e5;

}

/* NOUVEAU: Style pour la carte "Ajouter" */
.stat-add {
    border-left-color: #0cb166;
    --stat-color: #0cb166;
    text-decoration: none;
    /* Supprimer le soulignement du lien */
}

.stat-add .stat-value-large,
.stat-add .stat-footer i {
    color: var(--stat-color);
}

.stat-add .stat-label {
    color: #374151;
    /* Couleur standard des libellés */
}


.stat-total-full .stat-content {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1;
}

.stat-total-full .stat-value-large {
    color: var(--total-color);
    /* Utilisation de la couleur de bordure */
}

.stat-total-full .stat-footer i {
    color: var(--total-color);
}

.stat-uncontrolled .stat-value-large {
    font-size: 2rem;
}


/* --- Couleurs spécifiques aux stats (Bordure, Icône, Nombre) --- */

/* OK (Vert) */
.stat-ok {
    border-left-color: #10b981;
    --stat-color: #10b981;
    /* Définition de la variable couleur */
}

/* NOUVEAU: Applique la couleur de bordure au nombre et à l'icône */
.stat-ok .stat-value-large,
.stat-ok .stat-footer i {
    /* CORRIGÉ: Cible l'icône <i> enfant de stat-footer */
    color: var(--stat-color);
}


/* KO (Rouge) */
.stat-ko {
    border-left-color: #ef4444;
    --stat-color: #ef4444;
}

/* NOUVEAU: Applique la couleur de bordure au nombre et à l'icône */
.stat-ko .stat-value-large,
.stat-ko .stat-footer i {
    /* CORRIGÉ: Cible l'icône <i> enfant de stat-footer */
    color: var(--stat-color);

}

/* --- Contrôles de tri (Liste des pesons) --- */
.sort-controls {
    font-size: 0.8em;
    margin-left: 15px;
    vertical-align: middle;
    font-weight: normal;
}

.sort-icon {
    text-decoration: none;
    color: #9ca3af; /* Gris (inactif) */
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sort-icon:last-child {
    margin-right: 0;
}

.sort-icon.active {
    color: #4f46e5; /* Violet (actif) */
}

.sort-icon:hover {
    color: #10b981; /* Violet clair au survol */
}

.fa-warehouse {
    font-size: 1.4rem;
}

.fa-times-circle {
    font-size: 1.4rem;
}

.fa-tools {
    font-size: 1.4rem;
}

.fa-check-circle {
    font-size: 1.4rem;
}

.fa-eye-slash {
    font-size: 1.4rem;
}

.fa-plus,
.fa-weight-hanging {
    font-size: 1.5rem;
}

/* Réparation (Orange) */
.stat-repair {
    border-left-color: #f59e0b;
    --stat-color: #f59e0b;
}

/* NOUVEAU: Applique la couleur de bordure au nombre et à l'icône */
.stat-repair .stat-value-large,
.stat-repair .stat-footer i {
    /* CORRIGÉ: Cible l'icône <i> enfant de stat-footer */
    color: var(--stat-color);

}



/* Non Contrôlé (Gris) */
.stat-uncontrolled {
    border-left-color: #6b7280;
    --stat-color: #6b7280;
}

/* NOUVEAU: Applique la couleur de bordure au nombre et à l'icône */
.stat-uncontrolled .stat-value-large,
.stat-uncontrolled .stat-footer i {
    /* CORRIGÉ: Cible l'icône <i> enfant de stat-footer */
    color: var(--stat-color);

}

/* Non Trouvé (Marron/Orange) */
.stat-not-found {
    border-left-color: #0876e3;
    --stat-color: #0876e3;
}

.stat-not-found .stat-value-large,
.stat-not-found .stat-footer i {
    color: var(--stat-color);
}

.stat-not-found .stat-footer i {
    font-size: 1.4rem;
}



/* --------------------
3. GRILLE DES PESONS DÉTAILLÉE
-------------------- */

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* Permet de passer à la ligne sur mobile */
    gap: 15px;
    margin-bottom: 15px;
}

.list-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #000000;
    text-align: center;
    margin: 0;
    /* Retirer les marges par défaut */
    flex-grow: 1;
    /* Permet au titre de prendre de la place */
}

/* NOUVEAU: Styles pour la recherche */
.search-container {
    display: flex;
    justify-content: flex-end;
}

.search-input-wrapper {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.search-input {
    padding: 8px 12px 8px 35px;
    /* Espace à gauche pour l'icône */
    border-radius: 20px;
    border: 1px solid #d1d5db;
    font-size: 0.9rem;
    width: 400px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.no-peson-found {
    grid-column: 1 / -1;
    padding: 20px;
    text-align: center;
    color: #6b7280;
    background-color: #f7f7f7;
    border-radius: 8px;
}

.peson-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-height: 90px;
    min-height: 80px;
    /* Hauteur minimale pour l'alignement */
    border-radius: 12px;
    color: white;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s, box-shadow 0.2s;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 5px;
}

.peson-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    padding-bottom: 5px;
    padding-top: 5px;
}

/* Contenu du détail (gauche) */
.peson-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-right: 10px;
}

.peson-site {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.8;
}

.peson-sn {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 2px 0 2px 0;
}

.peson-info {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    opacity: 0.9;
}

.peson-info span {
    margin-top: 3px;
}

.peson-info i {
    margin-right: 0px;
}

/* NOUVEAU: Badge pour l'historique multiple */
.history-badge {
    background-color: rgba(255, 255, 255, 0.25); /* Fond semi-transparent */
    color: white;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Section de l'action (droite) */
.peson-action {
    background: rgba(0, 0, 0, 0.15);
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    width: 80px;
    height: 70px;
    margin-right: 20px;
    transition: background 0.2s;
    border: 1px solid #fca5a5;
}

.peson-action i {
    font-size: 1.3rem;
    margin-bottom: 3px;
}

.action-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0.8;
}

.action-button-text {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-top: 2px;
}

/* Bordure latérale de statut */
.card-border {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* --- Couleurs de Statut des Pesons --- */
.status-non-controle {
    background-color: #4b5563;
}

.status-non-controle-border {
    background-color: #6b7280;
}

.status-ok {
    background-color: #10b981;
}

.status-ok-border {
    background-color: #059669;
}

.status-ko {
    background-color: #ef4444;
}

.status-ko-border {
    background-color: #dc2626;
}

.status-repair {
    background-color: #81532494;
}

.status-repair-border {
    background-color: #d97706;
}

/* NOUVEAU: Bordure Marron pour Réparation seule */
.status-repair-brown-border {
    background-color: #81532494;
}

/* NOUVEAU: Statut Non Trouvé */
.status-not-found {
    background-color: #0876e3; /* Nouveau Bleu plus clair */
}

.status-not-found-border {
    background-color: #054a91; /* Bleu plus foncé */
}

/* NOUVEAU: Statut Réformé */
.status-reforme {
    background-color: #272727; /* Noir */
    color: white;
}

.status-reforme-border {
    background-color: #000000; /* Noir */
}

/* --- Couleurs d'Action --- */
.action-default {
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.action-ok {
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.action-ko {
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* NOUVEAU: Classes d'action avec couleurs forcées pour les combinaisons */
.action-green {
    background-color: #10b981; /* Vert */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.action-red {
    background-color: #ef4444; /* Rouge */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.action-orange {
    background-color: #f59e0b; /* Orange */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.action-brown {
    background-color: #81532494; /* Marron */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.action-blue {
    background-color: #054a91; /* Bleu foncé */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.action-reforme {
    background-color: #000000; /* Noir */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Classes génériques pour compatibilité */
.action-repair { background-color: #81532494; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.action-warning { background-color: #f59e0b; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.action-not-found { background-color: #054a91; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.action-reforme { background-color: #000000; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* NOUVEAU: Stat Card Réformé (Noir) */
.stat-reforme {
    border-left-color: #272727;
    --stat-color: #272727;
}
.stat-reforme .stat-value-large,
.stat-reforme .stat-footer i {
    color: var(--stat-color);
}

/* --------------------
4. STYLES DES MODALES
-------------------- */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

/* Assurer que les modales de confirmation apparaissent au-dessus des autres */
#confirmDeleteControlModal,
#confirmControlModal {
    z-index: 1001;
}

.modal-content {
    background-color: #d1d1d1;
    /*margin: 10% auto;*/
    padding: 25px;
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width:767.98px) {
    .modal-content {
        margin: 10% auto;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Aligner la croix en haut */
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.modal-title-container {
    flex-grow: 1;
    /* Le conteneur prend la place, pas le h2 */
}

.modal-header h2 {
    text-align: center;
    /* Centre le texte du titre */
    margin: 0;
    font-size: 1.5rem;
}

#detailsSubtitle {
    display: block;
    text-align: left;
    font-weight: 600;
    font-size: 1.2rem;
    color: #1f2937;
    margin-top: 5px;
}

/* NOUVEAU: Conteneur pour les actions en haut de la modale (poubelle) */
.modal-actions-header {
    position: absolute;
    top: 25px;
    left: 25px;
}

/* NOUVEAU: Style commun pour les icônes d'action en haut (poubelle, crayon) */
.header-action-icon {
    color: #6b7280;
    font-size: 1.2rem;
    text-decoration: none;
    transition: color 0.2s;
}

.header-action-icon:hover {
    color: #1f2937;
}

/* NOUVEAU: Conteneur pour le titre de section et l'icône de modification */
.details-section-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    /* 3 colonnes: icône, titre, espace vide */

    align-items: center;
    gap: 10px;
    /* Ajouter un espace entre l'icône et le titre */
    margin-bottom: 10px;
}

.details-section-header h4 {
    text-align: center;
    /* Centre le titre dans sa colonne */
    padding-right: 20px;
}

/* NOUVEAU: Style pour les lignes d'historique cliquables */
.history-row {
    cursor: pointer;
    transition: background-color 0.2s;
}

.history-row:hover {
    background-color: #e5e7eb !important; /* Gris clair au survol */
}

/* Style pour la section des modèles dans la modale de détails */
.details-model-info {
    text-align: left;
}


.close-btn {
    color: #931515;
    font-size: 32px;
    /* Taille augmentée pour une meilleure visibilité */
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #333;
}

/* Modale Contrôle */
#controlForm textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    resize: vertical;
    min-height: 100px;
    margin-bottom: 20px;
    font-size: 1rem;
}

.peson-info-box {
    background-color: #f3f4f6;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.peson-info-details strong {
    font-size: 1.1rem;
    color: #1f2937;
    display: block;
    margin-bottom: 3px;
}

.peson-info-details span {
    font-size: 0.85rem;
    color: #6b7280;
    display: block;
}

.peson-info-icon i {
    font-size: 2rem;
    color: #9ca3af;
}

.control-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.control-buttons button {
    flex-grow: 1;
    padding: 12px 5px;
    border: 2px solid;
    /* La bordure est maintenant toujours présente */
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: white;
    width: 50px;
    font-size: 75%;
    /* Fond blanc par défaut pour les non-sélectionnés */
}

.control-buttons button:hover {
    transform: translateY(-1px);
}

/* Styles spécifiques aux boutons de résultat */
.btn-ok {
    border-color: #10b981;
    color: #10b981;
}

.btn-ko {
    border-color: #ef4444;
    color: #ef4444;
}

.btn-repair {
    border-color: #81532494;
    color: #81532494;
}

/* NOUVEAU: Style pour le bouton REPA+VP (Bleu) */
.btn-repair-ok {
    border-color: #f59e0b;
    color: #f59e0b;
}
.btn-repair-ok.active-result {
    background-color: #f59e0b;
}

/* Style du bouton sélectionné */
.active-result {
    color: white !important;
    /* Le texte redevient blanc */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Remplissage du fond pour le bouton actif */
.btn-ok.active-result {
    background-color: #10b981;
}

.btn-ko.active-result {
    background-color: #ef4444;
}

.btn-repair.active-result {
    background-color: #81532494;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
}

.action-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.btn-reset,
.btn-validate {
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-reset {
    background-color: #e5e7eb;
    color: #4b5563;
}

.btn-validate {
    background-color: #4f46e5;
    color: white;
}

.btn-validate:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

.btn-validate:not(:disabled):hover {
    background-color: #4338ca;
}

/* Message API (Succès/Erreur) */
#apiMessage {
    font-weight: 600;
    font-size: 0.95rem;
}

#apiMessage i {
    margin-right: 8px;
}

/* Styles pour la section Localisation de la modale de détails */
.details-localisation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 30px;
    /* 10px vertical, 30px horizontal */
}

.details-localisation-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    white-space: nowrap;
    overflow: hidden;
}

@media (max-width: 500px) {

    /* Breakpoint pour la modale */
    .details-localisation-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0px 0px;

    }
}

/* Styles pour la modale de localisation (Vertical et centré sur tous les écrans) */
.loc-list {
    display: flex;
    flex-direction: column;
    list-style: none; 
    padding: 0; 
    font-size: 1rem;
    text-align: center;
}    
.loc-item {
    width: 100%;
    display: flex; 
    flex-direction: column; /* Vertical partout */
    justify-content: center;
    text-align: center;
    align-items: center; 
    margin-bottom: 12px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 8px;
}
.loc-label {
   color: #4f46e5;
    margin-bottom: 4px;
    font-weight: bold;
}
.loc-value {
    color: #374151;
}

/* --------------------------------------------
----                                       ----
----  EN MODE DE FONCTIONNEMENT TELEPHONE  ----
----                                       ----
-----------------------------------------------
*/

@media screen and (max-width:767.98px) {
    .stats-header-grid {
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(2, 1fr);
    }

    .peson-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    /* NOUVEAU: Rendre la barre de recherche pleine largeur sur mobile */
    .search-container,
    .search-form {
        width: 100%;
    }

    .search-input {
        width: 100%;
        box-sizing: border-box; /* Assure que padding et bordure sont inclus dans la largeur totale */
    }

    /* NOUVEAU: Empiler icône et texte dans les boutons de contrôle sur mobile */
    .control-buttons button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 2px;
    }

    .control-buttons button i {
        margin: 0 0 4px 0; /* Marge en bas pour séparer l'icône du texte */
        display: block; /* FORCE L'ICÔNE À PRENDRE SA PROPRE LIGNE */
        margin: 0 auto 4px auto; /* Centre l'icône et ajoute une marge en bas */
    }
}

/* Styles responsives pour les très petits écrans (smartphones) */
@media (max-width: 500px) {
    .peson-card {
        padding: 5px 8px;
        /* Réduire le padding horizontal */
    }

    .peson-details {
        padding-right: 5px;
        /* Réduire l'espace entre les détails et l'action */
    }

    .peson-action {
        width: 70px;
        /* Réduire la largeur du bloc action */
        height: 65px;
        /* Hauteur automatique pour s'adapter au contenu */
        padding: 6px 4px;
        /* Réduire le padding interne */
        margin-right: 10px;
        /* Réduire la marge droite */
    }

    .action-label {
        font-size: 0.6rem;
        /* Réduire légèrement la taille du texte du statut */
    }
}


/* -----------------------------------------
----                                    ----
----  EN MODE DE FONCTIONNEMENT PC      ----
----                                    ----
--------------------------------------------
*/

@media screen and (min-width:768px) {
    .stats-header-grid {
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(6, 1fr);
    }

    .peson-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }
}

#genericConfirmationModal {
    display: none; /* Caché par défaut */
    position: fixed;
    z-index: 2000; /* Au-dessus de tout le reste */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6); /* Fond noir semi-transparent */
    backdrop-filter: blur(3px); /* Effet de flou */
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease-out;
}

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

#genericConfirmationModal .modal-content {
    background-color: #ffffff; /* Fond blanc pour la lisibilité */
    margin: auto;
    padding: 25px 20px; /* Padding réduit pour mobile */
    border-radius: 12px;
    width: 85%; /* Largeur ajustée pour mobile */
    max-width: 450px; /* Max-width légèrement réduite */
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    text-align: center;
    position: relative;
    transform: scale(0.95);
    animation: zoomIn 0.3s ease-out forwards;
}

/* Media query pour les écrans plus grands */
@media (min-width: 500px) {
    #genericConfirmationModal .modal-content {
        padding: 30px 40px; /* Padding plus large sur PC */
    }

    #genericConfirmationModal .modal-btn-cancel,
    #genericConfirmationModal #confirmActionButton {
        width: auto; /* Reprend sa taille naturelle sur PC */
        min-width: 150px;
        padding: 12px 25px;
    }
}

@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#genericConfirmationModal #modalConfirmationMessage {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.5;
}

#genericConfirmationModal #modalConfirmationMessage strong {
    color: #dc3545; /* Rouge pour le nom de l'élément */
    font-weight: 700;
}

#genericConfirmationModal .modal-footer {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

#genericConfirmationModal .modal-btn-cancel,
#genericConfirmationModal #confirmActionButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px; /* Padding légèrement réduit pour mobile */
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    width: 100%; /* Pleine largeur sur mobile, pour qu'ils s'empilent */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#genericConfirmationModal .modal-btn-cancel:active,
#genericConfirmationModal #confirmActionButton:active {
    transform: translateY(1px);
}

#genericConfirmationModal .modal-btn-cancel {
    background-color: #6c757d;
    color: white;
    order: 1; /* Bouton "Non" à gauche */
}

#genericConfirmationModal .modal-btn-cancel:hover {
    background-color: #5a6268;
}

#genericConfirmationModal #confirmActionButton {
    background-color: #dc3545;
    color: white;
    order: 2; /* Bouton "Oui" à droite */
}

#genericConfirmationModal #confirmActionButton:hover {
    background-color: #c82333;
}

/* =================================== */
/* NOUVEAU: BOUTON RETOUR EN HAUT      */
/* =================================== */

.scroll-to-top-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background-color: #eb8923; /* Violet, comme les autres éléments d'action */
    color: white;
    border: none;
    border-radius: 50%;
    text-align: center;
    font-size: 22px;
    line-height: 50px; /* Aligne l'icône verticalement */
    cursor: pointer;
    z-index: 998; /* Juste en dessous des modales (qui sont à 1000+) */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top-btn:hover {
    background-color: #a75500; /* Un violet plus foncé au survol */
    transform: scale(1.1) translateY(0); /* Assure que le scale n'interfère pas avec le translate */
}