/* 
 * Styles CSS pour la fonctionnalité d'upload de fichiers PDF
 * Ce fichier contient tous les styles pour les formulaires d'upload et les messages de statut
 */

/* Conteneur pour chaque section d'upload */
.upload-section {
    /* Crée une boîte avec des bordures arrondies */
    border: 2px solid #e0e0e0;           /* Bordure grise claire */
    border-radius: 10px;                  /* Coins arrondis */
    padding: 20px;                        /* Espacement intérieur */
    margin-bottom: 20px;                  /* Espacement entre les sections */
    background-color: #f9f9f9;           /* Fond gris très clair */
    
    /* Transition pour les effets hover */
    transition: border-color 0.3s ease;
}

/* Effet au survol de la section */
.upload-section:hover {
    border-color: #007bff;               /* Change la couleur de bordure au survol */
}

/* Style du titre de chaque section */
.upload-section h3 {
    color: #333;                         /* Couleur du texte foncée */
    margin-bottom: 15px;                 /* Espacement sous le titre */
    font-size: 1.2em;                   /* Taille de police légèrement plus grande */
    font-weight: bold;                   /* Texte en gras */
}

/* Style pour les inputs de fichier */
.file-input {
    /* Style personnalisé pour l'input file */
    width: 100%;                         /* Prend toute la largeur disponible */
    padding: 10px;                       /* Espacement intérieur */
    border: 2px dashed #ccc;            /* Bordure en pointillés */
    border-radius: 5px;                  /* Coins légèrement arrondis */
    background-color: white;             /* Fond blanc */
    cursor: pointer;                     /* Curseur pointer au survol */
    
    /* Transition pour l'animation */
    transition: border-color 0.3s ease, background-color 0.3s ease;
    
    /* Styles pour le texte */
    font-size: 14px;                     /* Taille de police */
    color: #666;                         /* Couleur de texte grise */
}

/* Effet au survol de l'input file */
.file-input:hover {
    border-color: #007bff;               /* Bordure bleue au survol */
    background-color: #f8f9ff;          /* Fond légèrement bleuté */
}

/* Effet quand l'input file est focus (sélectionné) */
.file-input:focus {
    outline: none;                       /* Supprime l'outline par défaut */
    border-color: #007bff;               /* Bordure bleue */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* Ombre bleue subtile */
}

/* Style pour les messages de statut */
.upload-status {
    /* Positionnement et espacement */
    margin-top: 10px;                    /* Espacement au-dessus */
    padding: 10px;                       /* Espacement intérieur */
    border-radius: 5px;                  /* Coins arrondis */
    
    /* Style du texte */
    font-weight: bold;                   /* Texte en gras */
    text-align: center;                  /* Centré */
    
    /* Animation d'apparition */
    transition: opacity 0.3s ease;
    
    /* Masqué par défaut */
    min-height: 20px;                    /* Hauteur minimum pour éviter le "jumping" */
}

/* Style pour les messages de succès */
.upload-status.success {
    background-color: #d4edda;           /* Fond vert clair */
    color: #155724;                      /* Texte vert foncé */
    border: 1px solid #c3e6cb;          /* Bordure verte */
}

/* Style pour les messages d'erreur */
.upload-status.error {
    background-color: #f8d7da;           /* Fond rouge clair */
    color: #721c24;                      /* Texte rouge foncé */
    border: 1px solid #f5c6cb;          /* Bordure rouge */
}

/* Animation pour l'apparition des messages */
.upload-status:not(:empty) {
    animation: fadeIn 0.3s ease-in;     /* Animation d'apparition */
}

/* Définition de l'animation fadeIn */
@keyframes fadeIn {
    from {
        opacity: 0;                      /* Commence transparent */
        transform: translateY(-10px);    /* Commence légèrement plus haut */
    }
    to {
        opacity: 1;                      /* Finit opaque */
        transform: translateY(0);        /* Finit à sa position normale */
    }
}

/* Style pour les formulaires d'upload */
.upload-section form {
    display: flex;                       /* Layout flexbox */
    flex-direction: column;              /* Éléments en colonne */
    gap: 15px;                          /* Espacement entre les éléments */
}

/* Responsive design pour les petits écrans */
@media (max-width: 768px) {
    .upload-section {
        padding: 15px;                   /* Moins de padding sur mobile */
        margin-bottom: 15px;             /* Moins d'espacement entre sections */
    }
    
    .upload-section h3 {
        font-size: 1.1em;               /* Titre un peu plus petit sur mobile */
    }
    
    .file-input {
        padding: 8px;                    /* Moins de padding pour l'input */
        font-size: 13px;                /* Police plus petite */
    }
}

/* Style pour désactiver les boutons pendant l'upload */
.button:disabled {
    opacity: 0.6;                       /* Réduit l'opacité */
    cursor: not-allowed;                /* Curseur "interdit" */
    pointer-events: none;               /* Désactive les interactions */
}

/* Animation de pulsation pour indiquer un chargement */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Applique l'animation de pulsation aux boutons désactivés */
.button:disabled {
    animation: pulse 1.5s ease-in-out infinite; /* Animation infinie */
}

/* Style pour les messages globaux de statut */
#status-messages {
    margin-bottom: 20px;                /* Espacement en bas */
}

/* Style pour les messages de statut globaux */
#status-messages .message {
    padding: 15px;                      /* Espacement intérieur */
    border-radius: 5px;                 /* Coins arrondis */
    margin-bottom: 10px;                /* Espacement entre messages */
    font-weight: bold;                  /* Texte en gras */
}

/* Style pour les messages de succès globaux */
#status-messages .message.success {
    background-color: #d4edda;          /* Fond vert clair */
    color: #155724;                     /* Texte vert foncé */
    border: 1px solid #c3e6cb;         /* Bordure verte */
}

/* Style pour les messages d'erreur globaux */
#status-messages .message.error {
    background-color: #f8d7da;          /* Fond rouge clair */
    color: #721c24;                     /* Texte rouge foncé */
    border: 1px solid #f5c6cb;         /* Bordure rouge */
}