app/static/css/style.css

/* Réinitialisation de base et variables de couleur */
:root {
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Cormorant Garamond', serif;
    --color-text: #333333; /* Un gris foncé doux */
    --color-primary: #0A0A0A; /* Presque noir pour l'élégance */
    --color-secondary: #B08D57; /* Un doré/bronze doux */
    --color-background: #FDFDFD; /* Blanc cassé très clair */
    --color-light-gray: #e9e9e9;
    --color-border: #d1d1d1;
}

body {
    font-family: var(--font-secondary); /* Police principale pour le corps */
    line-height: 1.7;
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    font-weight: 400; /* Poids standard pour Cormorant Garamond */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary); /* Police pour les titres */
    font-weight: 500; /* Un peu plus affirmé */
    color: var(--color-primary);
}

header {
    background: var(--color-primary);
    color: var(--color-background);
    padding: 2rem 1rem; /* Plus d'espace */
    text-align: center;
    border-bottom: 3px solid var(--color-secondary);
}

header h1 {
    font-weight: 300; /* Léger pour le titre principal */
    letter-spacing: 2px; /* Espacement des lettres */
    font-size: 2.5em;
    color: var(--color-background); /* S'assurer que le h1 hérite bien */
}

main {
    padding: 30px;
    max-width: 900px; /* Un peu plus large */
    margin: 30px auto;
    background: #ffffff; /* Blanc pur pour le contenu principal */
    box-shadow: 0 5px 25px rgba(0,0,0,0.05); /* Ombre subtile */
    border-radius: 8px;
}

section {
    margin-bottom: 30px;
    padding: 25px;
    border: 1px solid var(--color-light-gray);
    border-radius: 5px;
}

h2 {
    font-size: 1.8em;
    font-weight: 400;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-light-gray);
    color: var(--color-primary);
}

input[type="file"] {
    font-family: var(--font-primary);
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 20px; /* Plus d'espace */
    display: block; /* Pour prendre toute la largeur */
    width: calc(100% - 22px); /* Ajuster pour le padding et la bordure */
}

button[type="submit"] {
    font-family: var(--font-primary);
    background: var(--color-secondary);
    color: white;
    border: none;
    padding: 12px 25px;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase; /* Lettres capitales pour les boutons */
    font-weight: 500;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
    background: #9c7b4d; /* Un doré un peu plus foncé au survol */
}

#message-area {
    margin-bottom: 15px;
    padding: 15px;
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: 0.95em;
}

#message-area.success {
    background-color: #e6f4ea; /* Vert pastel */
    color: #3d8b50;
    border: 1px solid #c3e0c9;
}

#message-area.error {
    background-color: #f8d7da; /* Rouge pastel */
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* L'ancienne #file-list n'est plus directement utilisée pour les résultats */
#file-list {
    padding-left: 0; /* Pas de puces par défaut */
}
#file-list li {
    list-style: none;
    padding: 10px;
    border-bottom: 1px var(--color-light-gray) dashed;
    font-size: 0.9em;
    font-family: var(--font-secondary); /* Police élégante pour les items */
}
#file-list li:last-child {
    border-bottom: none;
}

footer {
    text-align: center;
    padding: 20px;
    background: var(--color-primary);
    color: var(--color-light-gray);
    margin-top: 40px;
    font-family: var(--font-primary);
    font-size: 0.9em;
    font-weight: 300;
}

/* Styles pour la barre de progression */
#progress-container {
    margin-top: 20px;
    font-family: var(--font-primary);
}

#progress-text {
    text-align: center;
    margin-bottom: 10px;
    color: var(--color-text);
}

.progress-bar-wrapper {
    width: 100%;
    background-color: var(--color-light-gray);
    border-radius: 5px;
    padding: 3px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.progress-bar-fill {
    height: 20px;
    background-color: var(--color-secondary);
    border-radius: 3px;
    width: 0%; /* Initialement à 0% */
    /* La transition par défaut est courte, pour les changements rapides (ex: init, fin) */
    transition: width 0.3s ease-out; 
    text-align: center;
    color: white;
    font-size: 0.8em;
    line-height: 20px; /* Centrer le texte verticalement */
}

/* Classe pour l'animation de progression pendant le traitement "long" */
.progress-bar-fill.processing-animation {
    /* Transition plus longue pour simuler la progression pendant le traitement IA */
    /* Ajustez la durée (ex: 5s, 10s, 15s) pour correspondre approximativement au temps de traitement serveur. */
    /* La largeur cible sera définie par JavaScript (ex: 90%) */
    transition: width 10s cubic-bezier(0.25, 0.1, 0.25, 1); 
}

/* La classe .determinate est principalement pour la sémantique JS, 
   assure que la transition est celle de base (courte) pour le 100% final.
   Elle n'a pas besoin de styles spécifiques si .progress-bar-fill a déjà la transition courte.
*/
.progress-bar-fill.determinate {
    /* Assure que la transition est rapide pour le passage à 100% ou 0% si besoin de surcharger .processing-animation */
    transition: width 0.3s ease-out; 
}


/* Styles pour l'ancien Spinner / Chargeur (conservé au cas où) */
#progress-indicator {
    /* text-align: center; */
}

.loader-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    min-height: 100px;
    font-family: var(--font-primary); /* Police pour le texte du loader */
}

.spinner {
    border: 6px solid var(--color-light-gray); /* Contour du spinner */
    border-top: 6px solid var(--color-secondary); /* Couleur "active" du spinner (doré) */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}