/*
 * =============================================================================
 * GOLDOPIX - FEUILLE DE STYLE COMPLÈTE AVEC COMMENTAIRES ULTRA-DÉTAILLÉS
 * =============================================================================
 * 
 * Ce fichier contient TOUS les styles CSS du projet GoldoPix.
 * Chaque règle est commentée pour être compréhensible par un débutant.
 * 
 * ORGANISATION :
 * 1. STYLES GLOBAUX ET DE BASE
 * 2. STYLES DE LA PAGE DE VISUALISATION DES IMAGES  
 * 3. STYLES SPÉCIFIQUES À LA PAGE D'ACCUEIL
 * 4. STYLES RESPONSIVE (ADAPTATION MOBILE)
 * 
 * =============================================================================
 */




/* =============================================================================
 * 1. STYLES GLOBAUX ET DE BASE
 * =============================================================================
 * Ces styles s'appliquent sur toutes les pages du site
 */

/* Règle universelle pour que les tailles incluent les bordures et padding */
* { 
    box-sizing: border-box; /* Les largeurs/hauteurs incluent bordure et padding */
}

/* Style par défaut du body (corps de la page) */
body { 
    /* Police système moderne qui s'adapte à l'OS de l'utilisateur */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Suppression des marges par défaut du navigateur */
    margin: 0; 
    
    /* Espacement interne autour du contenu */
    padding: 20px; 
    
    /* Couleur de fond gris-bleu clair pour les pages de visualisation */
    background: #f5f7fa;
}

/* Conteneur principal qui centre le contenu */
.container { 
    /* Largeur maximale pour ne pas étendre sur tout l'écran */
    max-width: 800px; 
    
    /* Centrage horizontal automatique */
    margin: 0 auto; 
    
    /* Fond blanc pour faire ressortir le contenu */
    background: white; 
    
    /* Coins arrondis pour un look moderne */
    border-radius: 12px; 
    
    /* Espacement interne généreux */
    padding: 30px; 
    
    /* Ombre portée subtile pour donner de la profondeur */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Titre principal de niveau 1 */
h1 { 
    /* Centrage du texte */
    text-align: center; 
    
    /* Couleur bleu-gris foncé */
    color: #2c3e50; 
    
    /* Espacement en bas du titre */
    margin-bottom: 30px; 
}




/* =============================================================================
 * 2. STYLES DE LA PAGE DE VISUALISATION DES IMAGES
 * =============================================================================
 * Ces styles s'appliquent quand on visualise une image uploadée
 */

/* Messages d'erreur (image non trouvée, expirée, etc.) */
.error { 
    /* Couleur rouge pour signaler l'erreur */
    color: #e74c3c; 
    
    /* Centrage du texte d'erreur */
    text-align: center; 
    
    /* Taille de police plus grande pour la visibilité */
    font-size: 18px; 
}

/* Conteneur qui centre l'image visualisée */
.image-container { 
    /* Centrage du contenu */
    text-align: center; 
    
    /* Espacement en bas */
    margin-bottom: 30px; 
}

/* L'image elle-même dans le conteneur */
.image-container img { 
    /* L'image prend maximum 100% de la largeur disponible */
    max-width: 100%; 
    
    /* La hauteur s'ajuste proportionnellement */
    height: auto; 
    
    /* Coins arrondis sur l'image */
    border-radius: 8px; 
    
    /* Ombre portée pour faire ressortir l'image */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

/* Bloc des métadonnées de l'image (taille, date, etc.) */
.metadata { 
    /* Fond gris très clair */
    background: #f8f9fa; 
    
    /* Espacement interne */
    padding: 20px; 
    
    /* Coins arrondis */
    border-radius: 8px; 
    
    /* Espacement vertical autour du bloc */
    margin: 20px 0; 
}

/* Titre du bloc métadonnées */
.metadata h3 { 
    /* Suppression de la marge haute par défaut */
    margin-top: 0; 
    
    /* Couleur bleu-gris */
    color: #2c3e50; 
}

/* Chaque ligne d'information dans les métadonnées */
.metadata-item { 
    /* Affichage en ligne flexible */
    display: flex; 
    
    /* Espacement entre le label et la valeur */
    justify-content: space-between; 
    
    /* Espacement vertical entre chaque ligne */
    margin: 10px 0; 
}

/* Le label (nom du champ) dans chaque ligne de métadonnées */
.metadata-label { 
    /* Texte en gras */
    font-weight: bold; 
    
    /* Couleur gris moyen */
    color: #7f8c8d; 
}

/* Bouton de téléchargement de l'image */
.download-btn { 
    /* Couleur de fond bleue */
    background: #3498db; 
    
    /* Texte blanc */
    color: white; 
    
    /* Espacement interne du bouton */
    padding: 12px 24px; 
    
    /* Suppression de la bordure par défaut */
    border: none; 
    
    /* Coins arrondis */
    border-radius: 6px; 
    
    /* Suppression du soulignement du lien */
    text-decoration: none; 
    
    /* Affichage comme un bloc en ligne */
    display: inline-block; 
    
    /* Espacement au-dessus */
    margin-top: 20px; 
    
    /* Transition fluide pour l'effet survol */
    transition: background 0.3s; 
}

/* Effet au survol du bouton de téléchargement */
.download-btn:hover { 
    /* Couleur plus foncée au survol */
    background: #2980b9; 
}

/* Lien de retour à l'accueil */
.back-link { 
    /* Couleur bleue */
    color: #3498db; 
    
    /* Pas de soulignement par défaut */
    text-decoration: none; 
}

/* Effet au survol du lien de retour */
.back-link:hover { 
    /* Soulignement au survol */
    text-decoration: underline; 
}




/* =============================================================================
 * 3. STYLES SPÉCIFIQUES À LA PAGE D'ACCUEIL (UPLOAD)
 * =============================================================================
 * Ces styles ne s'appliquent QUE sur la page d'accueil avec le formulaire
 */

/* Sous-titre de la page d'accueil */
.homepage-subtitle {
    /* Centrage du texte */
    text-align: center; 
    
    /* Couleur gris moyen */
    color: #7f8c8d; 
    
    /* Espacement en bas */
    margin-bottom: 30px;
}

/* Exigences pour les fichiers (formats acceptés, taille max) */
.file-requirements {
    /* Espacement au-dessus */
    margin-top: 15px; 
    
    /* Couleur orange pour attirer l'attention */
    color: #e67e22; 
    
    /* Texte en gras pour la visibilité */
    font-weight: bold;
}

/* Body spécifique à la page d'accueil (avec classe homepage-body) */
.homepage-body { 
    /* Dégradé coloré en arrière-plan au lieu d'uni */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
    
    /* Hauteur minimale de 100% de l'écran */
    min-height: 100vh;
}

/* Conteneur sur la page d'accueil (plus petit que sur les autres pages) */
.homepage-body .container { 
    /* Largeur plus petite pour le formulaire d'upload */
    max-width: 600px; 
    
    /* Ombre plus prononcée sur le fond coloré */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
}

/* Zone de téléchargement par glisser-déposer */
.upload-zone { 
    /* Bordure pointillée grise */
    border: 3px dashed #bdc3c7; 
    
    /* Coins arrondis */
    border-radius: 12px; 
    
    /* Espacement interne généreux */
    padding: 40px 20px; 
    
    /* Contenu centré */
    text-align: center; 
    
    /* Fond gris très clair */
    background: #f8f9fa; 
    
    /* Espacement en bas */
    margin-bottom: 20px; 
    
    /* Transitions fluides pour les animations */
    transition: all 0.3s ease; 
    
    /* Curseur pointeur pour indiquer la zone cliquable */
    cursor: pointer; 
}

/* Animation quand on survole la zone avec un fichier */
.upload-zone.dragover { 
    /* Bordure devient bleue */
    border-color: #3498db; 
    
    /* Fond devient bleu très clair */
    background: #e3f2fd; 
    
    /* Légère augmentation de taille */
    transform: scale(1.02); 
}

/* Cache l'input file HTML par défaut (pas joli) */
.upload-zone input[type="file"] { 
    display: none; 
}

/* Icône dans la zone d'upload (📸) */
.upload-icon { 
    /* Taille de l'icône */
    font-size: 48px; 
    
    /* Espacement en bas */
    margin-bottom: 20px; 
    
    /* Couleur grise */
    color: #7f8c8d; 
}

/* Texte principal dans la zone d'upload */
.upload-text { 
    /* Taille de police */
    font-size: 18px; 
    
    /* Couleur sombre */
    color: #2c3e50; 
    
    /* Espacement en bas */
    margin-bottom: 10px; 
    
    /* Poids de police moyennement gras */
    font-weight: 500; 
}

/* Texte secondaire dans la zone d'upload */
.upload-subtext { 
    /* Couleur grise */
    color: #7f8c8d; 
    
    /* Taille plus petite */
    font-size: 14px; 
}

/* Conteneur pour chaque groupe de champs du formulaire */
.form-group { 
    /* Espacement vertical */
    margin: 20px 0; 
}

/* Labels des champs de formulaire */
.form-group label { 
    /* Affichage en bloc (prend toute la largeur) */
    display: block; 
    
    /* Espacement en bas */
    margin-bottom: 8px; 
    
    /* Texte en gras */
    font-weight: bold; 
    
    /* Couleur sombre */
    color: #2c3e50; 
}

/* Espacement pour les selects et checkboxes */
.form-group select, 
.form-group input[type="checkbox"] { 
    margin-bottom: 10px; 
}

/* Styling des listes déroulantes (select) */
select { 
    /* Prend toute la largeur disponible */
    width: 100%; 
    
    /* Espacement interne */
    padding: 12px; 
    
    /* Bordure grise */
    border: 2px solid #e0e0e0; 
    
    /* Coins arrondis */
    border-radius: 6px; 
    
    /* Taille de police */
    font-size: 16px; 
    
    /* Fond blanc */
    background: white; 
    
    /* Transition fluide pour le focus */
    transition: border-color 0.3s; 
}

/* Effet quand on clique sur une liste déroulante */
select:focus { 
    /* Supprime le contour par défaut du navigateur */
    outline: none; 
    
    /* Bordure devient bleue */
    border-color: #3498db; 
}

/* Conteneur pour les checkboxes avec leur label */
.checkbox-group { 
    /* Disposition en ligne flexible */
    display: flex; 
    
    /* Alignement vertical centré */
    align-items: center; 
    
    /* Espacement entre checkbox et label */
    gap: 8px; 
}

/* Styling spécifique des checkboxes */
.checkbox-group input[type="checkbox"] { 
    /* Dimensions fixes */
    width: 18px; 
    height: 18px; 
}

/* Bouton principal de soumission */
.submit-btn { 
    /* Prend toute la largeur */
    width: 100%; 
    
    /* Couleur de fond bleue */
    background: #3498db; 
    
    /* Texte blanc */
    color: white; 
    
    /* Pas de bordure */
    border: none; 
    
    /* Espacement interne généreux */
    padding: 15px; 
    
    /* Coins arrondis */
    border-radius: 6px; 
    
    /* Taille de police */
    font-size: 18px; 
    
    /* Poids du texte */
    font-weight: 600; 
    
    /* Curseur pointeur */
    cursor: pointer; 
    
    /* Transition fluide pour les effets */
    transition: background 0.3s; 
}

/* Effet au survol du bouton (sauf s'il est désactivé) */
.submit-btn:hover:not(:disabled) { 
    /* Couleur plus foncée */
    background: #2980b9; 
    
    /* Léger déplacement vers le haut */
    transform: translateY(-1px); 
}

/* Style du bouton quand il est désactivé (pendant l'upload) */
.submit-btn:disabled { 
    /* Couleur grise */
    background: #bdc3c7; 
    
    /* Curseur interdit */
    cursor: not-allowed; 
}

/* Messages de succès ou d'erreur */
.message { 
    /* Espacement interne */
    padding: 15px; 
    
    /* Coins arrondis */
    border-radius: 6px; 
    
    /* Espacement vertical */
    margin: 20px 0; 
    
    /* Texte centré */
    text-align: center; 
    
    /* Texte en gras */
    font-weight: 500; 
}

/* Messages de succès (fond vert) */
.message.success { 
    /* Fond vert clair */
    background: #d4edda; 
    
    /* Texte vert foncé */
    color: #155724; 
    
    /* Bordure verte */
    border: 1px solid #c3e6cb; 
}

/* Messages d'erreur (fond rouge) */
.message.error { 
    /* Fond rouge clair */
    background: #f8d7da; 
    
    /* Texte rouge foncé */
    color: #721c24; 
    
    /* Bordure rouge */
    border: 1px solid #f5c6cb; 
}

/* Conteneur des messages */
#messageContainer { 
    /* Espacement en bas par défaut */
    margin-bottom: 30px; 
}

/* Supprime l'espacement quand le conteneur est vide */
#messageContainer:empty { 
    margin-bottom: 0; 
}

/* Conteneur des liens générés après upload */
.links-container { 
    /* Fond gris clair */
    background: #f8f9fa; 
    
    /* Espacement interne */
    padding: 20px; 
    
    /* Coins arrondis */
    border-radius: 8px; 
    
    /* Espacement au-dessus */
    margin-top: 20px; 
    
    /* Bordure grise */
    border: 1px solid #e9ecef; 
}

/* Chaque ligne de lien */
.link-item { 
    /* Disposition en ligne flexible */
    display: flex; 
    
    /* Alignement vertical centré */
    align-items: center; 
    
    /* Espacement vertical */
    margin: 10px 0; 
    
    /* Espacement entre les éléments */
    gap: 10px; 
}

/* Label de chaque type de lien */
.link-item label { 
    /* Largeur minimale fixe */
    min-width: 100px; 
    
    /* Texte en gras */
    font-weight: bold; 
    
    /* Couleur sombre */
    color: #2c3e50; 
    
    /* Taille de police */
    font-size: 14px; 
}

/* Champ de saisie contenant le lien */
.link-item input { 
    /* Prend l'espace restant */
    flex: 1; 
    
    /* Espacement interne */
    padding: 8px; 
    
    /* Bordure grise */
    border: 1px solid #ddd; 
    
    /* Coins arrondis */
    border-radius: 4px; 
    
    /* Police à espacement fixe pour les liens */
    font-family: monospace; 
    
    /* Taille de police plus petite */
    font-size: 12px; 
    
    /* Fond gris clair */
    background: #f8f9fa; 
}

/* Boutons "Copier" pour chaque lien */
.copy-btn { 
    /* Fond vert */
    background: #27ae60; 
    
    /* Texte blanc */
    color: white; 
    
    /* Pas de bordure */
    border: none; 
    
    /* Espacement interne */
    padding: 8px 12px; 
    
    /* Coins arrondis */
    border-radius: 4px; 
    
    /* Curseur pointeur */
    cursor: pointer; 
    
    /* Taille de police */
    font-size: 12px; 
    
    /* Poids du texte */
    font-weight: 600; 
    
    /* Transition fluide */
    transition: background 0.3s; 
}

/* Effet au survol des boutons copier */
.copy-btn:hover { 
    /* Vert plus foncé */
    background: #229954; 
}

/* Style quand le bouton affiche "Copié!" */
.copy-btn.copied { 
    /* Couleur orange pour indiquer le succès */
    background: #f39c12; 
}

/* Barre de progression pendant l'upload */
.progress { 
    /* Prend toute la largeur */
    width: 100%; 
    
    /* Hauteur fine */
    height: 6px; 
    
    /* Fond gris */
    background: #e0e0e0; 
    
    /* Coins arrondis */
    border-radius: 3px; 
    
    /* Cache le débordement */
    overflow: hidden; 
    
    /* Espacement vertical */
    margin: 20px 0; 
    
    /* Cachée par défaut */
    display: none; 
}

/* La barre bleue qui progresse */
.progress-bar { 
    /* Même hauteur que le conteneur */
    height: 100%; 
    
    /* Couleur bleue */
    background: #3498db; 
    
    /* Largeur initiale à 0 */
    width: 0%; 
    
    /* Animation fluide de la largeur */
    transition: width 0.3s; 
}




/* =============================================================================
 * 4. STYLES RESPONSIVE (ADAPTATION MOBILE)
 * =============================================================================
 * Ces styles s'appliquent sur les écrans de moins de 600px de large
 */

@media (max-width: 600px) {
    
    /* Réduction du padding sur mobile */
    body { 
        padding: 10px; 
    }
    
    /* Conteneur s'adapte à la taille d'écran */
    .container { 
        /* Marge réduite */
        margin: 10px; 
        
        /* Padding réduit */
        padding: 20px; 
        
        /* Coins moins arrondis */
        border-radius: 8px; 
    }
    
    /* Zone d'upload adaptée au mobile */
    .upload-zone { 
        /* Padding vertical réduit */
        padding: 30px 15px; 
    }
    
    /* Icône plus petite sur mobile */
    .upload-icon { 
        font-size: 36px; 
    }
    
    /* Texte d'upload adapté */
    .upload-text { 
        font-size: 16px; 
    }
    
    /* Réorganisation des liens en colonne sur mobile */
    .link-item { 
        /* Passage en colonne */
        flex-direction: column; 
        
        /* Étirement sur toute la largeur */
        align-items: stretch; 
        
        /* Espacement réduit */
        gap: 5px; 
    }
    
    /* Labels des liens sur mobile */
    .link-item label { 
        /* Suppression de la largeur minimale */
        min-width: auto; 
        
        /* Espacement en bas */
        margin-bottom: 5px; 
    }
    
    /* Champs de liens plus grands sur mobile */
    .link-item input { 
        /* Taille de police plus grande */
        font-size: 14px; 
        
        /* Plus de padding pour les doigts */
        padding: 10px; 
    }
    
    /* Boutons copier adaptés au tactile */
    .copy-btn { 
        /* Plus de padding pour faciliter le clic */
        padding: 10px 15px; 
        
        /* Taille de police plus grande */
        font-size: 14px; 
    }
    
    /* Bouton de soumission adapté au mobile */
    .submit-btn { 
        /* Taille de police légèrement plus petite */
        font-size: 16px; 
        
        /* Plus de padding vertical pour les doigts */
        padding: 18px; 
    }
    
    /* Métadonnées en colonne sur mobile */
    .metadata-item { 
        /* Passage en colonne */
        flex-direction: column; 
        
        /* Alignement à gauche */
        align-items: flex-start; 
        
        /* Texte aligné à gauche */
        text-align: left; 
    }
    
    /* Labels des métadonnées avec espacement */
    .metadata-label { 
        /* Espacement en bas */
        margin-bottom: 5px; 
    }
}


/*
 * =============================================================================
 * FIN DU FICHIER CSS
 * =============================================================================
 * 
 * RÉSUMÉ DE L'ORGANISATION :
 * 
 * - Styles globaux : s'appliquent partout (body, container, h1...)
 * - Page visualisation : pour voir les images uploadées  
 * - Page accueil : formulaire d'upload avec drag & drop
 * - Responsive : adaptations pour mobile
 * 
 * COULEURS PRINCIPALES UTILISÉES :
 * - #3498db : Bleu principal (boutons, liens)
 * - #2c3e50 : Bleu-gris foncé (textes importants)
 * - #7f8c8d : Gris moyen (textes secondaires)
 * - #f8f9fa : Gris très clair (fonds)
 * - #e74c3c : Rouge (erreurs)
 * - #27ae60 : Vert (succès, boutons copier)
 * - #e67e22 : Orange (avertissements)
 * 
 * POINTS CLÉS POUR MODIFIER LE DESIGN :
 * 
 * 1. Pour changer les couleurs : remplacer les codes hex (#3498db etc.)
 * 2. Pour modifier les espacements : changer les valeurs de margin/padding
 * 3. Pour les animations : modifier les propriétés transition
 * 4. Pour la responsivité : ajuster les valeurs dans la partie @media
 * 
 * =============================================================================
 */