/* --- Variables & Reset --- */
:root {
    --font-sans: 'Inter', sans-serif;
    --font-script: 'Great Vibes', cursive;
    --bg-color: #f8f9fa;
    --text-main: #2d3436;
    --text-muted: #636e72;
    --accent-color: #d68193; /* Ton rose pâle */
    --accent-hover: #b86273;
    --surface-color: #ffffff;
    --radius: 16px;
    --shadow: 0 10px 40px rgba(0,0,0,0.05);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* --- Container Principal --- */
.gallery-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* --- Header --- */
.gallery-header {
    text-align: center;
    margin-bottom: 50px;
}

.gallery-header h1 {
    font-family: var(--font-script);
    font-size: 5rem;
    font-weight: normal;
    color: var(--text-main);
    margin-bottom: 10px;
}

.gallery-header h1 span {
    font-size: 3rem;
    color: var(--accent-color);
}

.gallery-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* --- Upload Section --- */
.upload-section {
    max-width: 600px;
    margin: 0 auto 50px auto;
    background: var(--surface-color);
    padding: 30px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.upload-dropzone {
    border: 2px dashed #dfe6e9;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #fafbfc;
}

.upload-dropzone:hover, .upload-dropzone.dragover {
    border-color: var(--accent-color);
    background-color: #fff5f7;
}

.dropzone-content i {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.dropzone-content h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.dropzone-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.dropzone-content span {
    color: var(--accent-color);
    font-weight: 500;
    text-decoration: underline;
}

.btn-upload {
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.1s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btn-upload:disabled {
    background-color: #b2bec3;
    cursor: not-allowed;
}

.btn-upload:not(:disabled):hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
}

.status-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    display: none;
}

.status-message.info { background: #e3f2fd; color: #1976d2; }
.status-message.success { background: #e8f5e9; color: #2e7d32; }
.status-message.error { background: #ffebee; color: #c62828; }

/* --- Gallery Grid --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 4/5;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-item .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.gallery-item:hover .overlay {
    opacity: 1;
}

.gallery-item .overlay i {
    color: white;
    font-size: 1.5rem;
}

.loader-container {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px;
}

/* --- Lightbox --- */
.lightbox {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
}

.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    object-fit: contain;
}

.btn-download {
    margin-top: 20px;
    padding: 12px 25px;
    background-color: rgba(255,255,255,0.1);
    color: white;
    text-decoration: none;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.btn-download:hover {
    background-color: white;
    color: black;
}

.close-button {
    position: absolute;
    top: 30px;
    right: 40px;
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    transition: transform 0.3s;
}

.close-button:hover {
    transform: rotate(90deg);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .gallery-header h1 { font-size: 3.5rem; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .upload-section { padding: 20px; }
    .close-button { top: 15px; right: 20px; font-size: 2rem; }
}

/* --- Gallery Grid (Style Pinterest / Masonry) --- */
.gallery-grid {
    /* C'est ici que la magie opère pour l'effet Pinterest */
    column-count: 4; /* 4 colonnes sur grand écran */
    column-gap: 20px; /* Espace entre les colonnes */
    width: 100%;
}

.gallery-item {
    break-inside: avoid; /* Empêche l'image d'être coupée entre deux colonnes */
    margin-bottom: 20px; /* Espace vertical entre les images */
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background-color: #eee; /* Petite couleur de fond pendant le chargement */
    transform: translateZ(0); /* Hack de performance pour le hover */
}

.gallery-item img {
    width: 100%;
    display: block; /* Enlève la petite marge fantôme sous l'image */
    height: auto; /* Conserve le ratio original (portrait/paysage) */
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.05); /* Zoom un peu plus léger pour ne pas casser la vue */
}

/* L'overlay noir au survol */
.gallery-item .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 40%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.gallery-item:hover .overlay {
    opacity: 1;
}

.gallery-item .overlay i {
    color: white;
    font-size: 1.5rem;
}

/* --- Loader & Messages --- */
.loader-container, .empty-message, .error-message {
    column-span: all; /* Permet au texte de prendre toute la largeur, pas juste une colonne */
    text-align: center;
    padding: 50px;
}

/* --- Responsive (S'adapte aux écrans) --- */
@media (max-width: 1200px) {
    .gallery-grid { column-count: 3; }
}

@media (max-width: 768px) {
    .gallery-header h1 { font-size: 3.5rem; }
    .upload-section { padding: 20px; }
    .close-button { top: 15px; right: 20px; font-size: 2rem; }
    
    /* 2 colonnes sur tablette/mobile large */
    .gallery-grid { 
        column-count: 2; 
        column-gap: 15px; 
    }
    .gallery-item { 
        margin-bottom: 15px; 
    }
}

@media (max-width: 480px) {
    /* On garde 2 colonnes sur petit mobile (comme Pinterest), 
       mais si les photos sont trop petites, tu peux mettre column-count: 1; */
    .gallery-grid { column-count: 2; column-gap: 10px; }
    .gallery-item { margin-bottom: 10px; border-radius: 8px;}
}

/* --- OVERLAY MAGNIFIQUE & EFFET DE CADRE --- */

/* Le fond du dégradé au survol */
.gallery-item .overlay {
    position: absolute;
    inset: 0;
    /* Un dégradé très doux : sombre en haut/bas, transparent au milieu */
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.2) 0%, 
        rgba(0, 0, 0, 0) 40%, 
        rgba(0, 0, 0, 0) 60%, 
        rgba(0, 0, 0, 0.6) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Le cadre (Frame) qui va s'animer */
.gallery-item .overlay::before {
    content: '';
    position: absolute;
    /* Inset définit la marge du cadre à l'intérieur de l'image */
    inset: 15px; 
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 8px; /* Léger arrondi du cadre interne */
    
    /* État de départ : légèrement plus grand et invisible */
    transform: scale(1.08);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); /* Animation ultra fluide */
}

/* L'icône au centre */
.gallery-item .overlay i {
    color: white;
    font-size: 2rem;
    
    /* État de départ : plus petit et invisible */
    transform: scale(0.5);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.1s; /* Petit délai élégant par rapport au cadre */
    
    /* Ombre pour bien ressortir peu importe la couleur de la photo */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); 
}

/* --- ANIMATIONS AU SURVOL (HOVER) --- */

/* 1. Apparition du dégradé noir */
.gallery-item:hover .overlay {
    opacity: 1;
}

/* 2. Le cadre se met en place (effet focus) */
.gallery-item:hover .overlay::before {
    transform: scale(1);
    opacity: 1;
}

/* 3. L'icône grandit au centre */
.gallery-item:hover .overlay i {
    transform: scale(1);
    opacity: 1;
}

/* Optionnel : Une très fine bordure permanente sur la photo (façon reflet de vitre) */
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    pointer-events: none; /* Empêche de bloquer le clic */
    z-index: 3;
}

/* --- Gallery Grid (Format Carré Parfait) --- */
.gallery-grid {
    display: grid;
    /* Crée automatiquement autant de colonnes de 280px que possible */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background-color: #eee;
    
    /* C'est ici qu'on force le format carré parfait ! */
    aspect-ratio: 1 / 1; 
    transform: translateZ(0); /* Hack de fluidité pour l'animation */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    /* L'image remplit le carré sans être écrasée (elle est centrée et rognée) */
    object-fit: cover; 
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Léger zoom de la photo au survol */
.gallery-item:hover img {
    transform: scale(1.08); 
}

/* --- OVERLAY MAGNIFIQUE & EFFET DE CADRE --- */

.gallery-item .overlay {
    position: absolute;
    inset: 0;
    /* Dégradé subtil pour faire ressortir l'icône et le cadre */
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.2) 0%, 
        rgba(0, 0, 0, 0) 40%, 
        rgba(0, 0, 0, 0) 60%, 
        rgba(0, 0, 0, 0.6) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Le cadre blanc interne (Frame) */
.gallery-item .overlay::before {
    content: '';
    position: absolute;
    inset: 15px; /* Marge interne du cadre */
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    
    /* Effet d'apparition en zoom arrière */
    transform: scale(1.08);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* L'icône de loupe au centre */
.gallery-item .overlay i {
    color: white;
    font-size: 2rem;
    
    /* Effet d'apparition en zoom avant */
    transform: scale(0.5);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.1s; /* Petit décalage élégant */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); 
}

/* --- ANIMATIONS AU SURVOL (HOVER) --- */
.gallery-item:hover .overlay {
    opacity: 1;
}

.gallery-item:hover .overlay::before {
    transform: scale(1);
    opacity: 1;
}

.gallery-item:hover .overlay i {
    transform: scale(1);
    opacity: 1;
}

/* Fine bordure style "Reflet de photo" permanente */
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    pointer-events: none;
    z-index: 3;
}

/* --- Loader & Messages (Centrés sur toute la largeur) --- */
.loader-container, .empty-message, .error-message {
    grid-column: 1 / -1; /* Prend toute la largeur de la grille */
    text-align: center;
    padding: 50px;
}

/* --- Gallery Grid (Style Cadre Premium "Passe-partout") --- */
.gallery-grid {
    display: grid;
    /* On aère un peu plus (gap: 30px) pour laisser respirer les cadres */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px; 
    width: 100%;
}

.gallery-item {
    position: relative;
    cursor: zoom-in;
    
    /* 1. LA MAGIE DU CADRE : Une grosse bordure blanche */
    border: 14px solid #ffffff; 
    
    /* 2. L'ombre premium sous le cadre (effet 3D) */
    box-shadow: 0 15px 35px rgba(0,0,0,0.08), 0 5px 15px rgba(0,0,0,0.03);
    
    /* 3. Les coins légèrement arrondis du cadre extérieur */
    border-radius: 12px; 
    
    background-color: #f8f8f8; /* Couleur pendant le chargement */
    aspect-ratio: 1 / 1; /* Format carré parfait (incluant le cadre) */
    
    /* 4. Cache ce qui dépasse (pour que le zoom de l'image ne morde pas sur le cadre blanc) */
    overflow: hidden; 
    transform: translateZ(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Léger soulèvement du cadre entier au survol */
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.04);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    /* Animation douce du zoom de la photo */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.gallery-item:hover img {
    transform: scale(1.08); /* La photo zoome à l'INTÉRIEUR du cadre blanc */
}

/* --- Liseré intérieur (Effet de profondeur du passe-partout) --- */
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0; /* Se place exactement sur le bord intérieur du cadre blanc */
    border: 1px solid rgba(0, 0, 0, 0.06); /* Ligne grise très fine */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05); /* Petite ombre interne */
    pointer-events: none;
    z-index: 3;
}

/* --- OVERLAY MAGNIFIQUE (Apparaît sur la photo, sous le cadre) --- */
.gallery-item .overlay {
    position: absolute;
    inset: 0; 
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.1) 0%, 
        rgba(0, 0, 0, 0) 40%, 
        rgba(0, 0, 0, 0) 60%, 
        rgba(0, 0, 0, 0.5) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* L'icône de loupe au centre */
.gallery-item .overlay i {
    color: white;
    font-size: 2rem;
    transform: scale(0.5);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); 
}

/* --- ANIMATIONS AU SURVOL --- */
.gallery-item:hover .overlay {
    opacity: 1;
}

.gallery-item:hover .overlay i {
    transform: scale(1);
    opacity: 1;
    transition-delay: 0.1s;
}

/* --- Loader & Messages --- */
.loader-container, .empty-message, .error-message {
    grid-column: 1 / -1; 
    text-align: center;
    padding: 50px;
}

/* --- PREVISUALISATION DES UPLOADS --- */
.preview-container {
    margin-top: 20px;
    width: 100%;
    animation: fadeIn 0.3s ease;
}

.preview-container.hidden {
    display: none;
}

.preview-title {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 10px;
    text-align: left;
    font-weight: 500;
}

/* La piste scrollable horizontalement */
.preview-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 15px; /* Laisse de la place pour la scrollbar */
    /* Empêche le défilement vertical si on glisse un peu de travers */
    overflow-y: hidden; 
    scroll-behavior: smooth;
    /* Pour un défilement doux sur mobile */
    -webkit-overflow-scrolling: touch; 
}

/* Style des miniatures */
.preview-item {
    flex: 0 0 auto; /* Empêche les images de s'écraser */
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 2px solid white;
    transition: transform 0.2s ease;
}

.preview-item:hover {
    transform: translateY(-3px);
}

/* Customisation de la barre de défilement horizontale */
.preview-track::-webkit-scrollbar {
    height: 6px;
}

.preview-track::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.preview-track::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 10px;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- PREVISUALISATION DES UPLOADS --- */
/* ... (garde les classes .preview-container, .preview-title, .preview-track) ... */

/* Conteneur de chaque miniature */
.preview-wrapper {
    position: relative;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    transition: transform 0.2s ease;
}

.preview-wrapper:hover {
    transform: translateY(-3px);
}

/* L'image miniature */
.preview-item {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 2px solid white;
}

/* Le bouton Croix Rouge */
.delete-preview-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: #ff4757; /* Rouge vif */
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: background-color 0.2s, transform 0.2s;
    z-index: 10;
}

.delete-preview-btn:hover {
    background-color: #ff6b81;
    transform: scale(1.15);
}

/* La piste scrollable horizontalement */
.preview-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-top: 10px;    /* NOUVEAU : Laisse de la place en haut */
    padding-bottom: 15px; /* Laisse de la place pour la scrollbar en bas */
    padding-right: 15px;  /* Laisse de la place au bout à droite */
    overflow-y: hidden; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; 
}

/* Le bouton Croix Rouge */
.delete-preview-btn {
    position: absolute;
    /* On change les valeurs négatives en valeurs positives pour la rentrer dans l'image */
    top: 4px;   
    right: 4px; 
    
    background-color: #ff4757;
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px;  /* Légèrement plus petit */
    height: 22px; /* Légèrement plus petit */
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5); /* Ombre plus forte pour qu'elle ressorte sur l'image */
    transition: background-color 0.2s, transform 0.2s;
    z-index: 10;
}

/* --- Variables & Reset --- */
:root {
    --font-sans: 'Inter', sans-serif;
    --font-script: 'Great Vibes', cursive;
    
    /* C'EST ICI : On remplace le gris clair par un beau rose pâle romantique */
    --bg-color: #fff0f3; 
    
    --text-main: #2d3436;
    --text-muted: #636e72;
    --accent-color: #d68193; /* Ton rose principal pour les boutons/icônes */
    --accent-hover: #b86273;
    --surface-color: #ffffff; /* Le blanc des encarts (ne pas changer pour garder le contraste) */
    --radius: 16px;
    --shadow: 0 10px 40px rgba(0,0,0,0.05);
}

/* --- ANIMATION DE CHARGEMENT DROPZONE --- */

/* Empêche de cliquer ou glisser des fichiers pendant l'envoi */
.upload-dropzone.uploading {
    border-color: var(--accent-color);
    background-color: #fff5f7;
    pointer-events: none; 
}

/* Animation de cœur qui bat pour le chargement */
@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

.loading-heart {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    animation: heartbeat 1.5s infinite;
    display: inline-block;
}

.uploading-text {
    color: var(--text-main);
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 5px;
}

.uploading-subtext {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Animation de chargement (Cercle qui tourne) */
.loading-spinner {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    display: inline-block;
}

/* ========================================= */
/* --- ADAPTATION MOBILE ET TABLETTE --- */
/* ========================================= */

/* Écrans moyens (Tablettes et grands téléphones) */
@media (max-width: 768px) {
    /* Raccourcir la taille du titre */
    .gallery-header h1 {
        font-size: 3.5rem;
    }
    .gallery-header h1 span {
        font-size: 2rem;
    }

    /* Réduire les marges de la zone d'upload */
    .upload-section {
        padding: 20px;
        margin: 0 10px 30px 10px;
    }

    /* Grille : On réduit la taille minimum pour forcer au moins 2 colonnes */
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px; /* Moins d'espace vide entre les photos */
    }

    /* On réduit l'épaisseur du cadre blanc pour ne pas manger toute l'image */
    .gallery-item {
        border-width: 8px; 
        border-radius: 8px;
    }

    /* On réduit la taille de la loupe au survol */
    .gallery-item .overlay i {
        font-size: 1.5rem;
    }
}

/* Petits écrans (Smartphones classiques) */
@media (max-width: 480px) {
    /* On force strictement 2 colonnes, peu importe la taille de l'écran */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .gallery-item {
        border-width: 6px; /* Cadre très fin sur mobile */
    }

    /* Ajustement du bouton fermer de la vue plein écran (Lightbox) */
    .close-button {
        top: 15px;
        right: 20px;
        font-size: 2rem;
    }

    /* On adapte la taille des boutons d'envoi et de téléchargement */
    .btn-upload, .btn-download {
        font-size: 0.9rem;
        padding: 12px;
    }
}

/* Animation de chargement personnalisée (Cercle qui tourne) */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.loading-spinner {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    display: inline-block;
    /* C'est cette ligne qui fait tourner l'icône : 1 seconde, vitesse constante, à l'infini */
    animation: spin 1s linear infinite; 
}

.progress-container {
    width: 80%;
    max-width: 300px;
    height: 10px;
    background-color: #ffe0e6; /* Fond rose très clair */
    border-radius: 10px;
    margin: 15px auto;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--accent-color);
    border-radius: 10px;
    transition: width 0.4s ease; /* Animation fluide de remplissage */
}

/* --- État pendant l'envoi (Bloque les miniatures) --- */
.preview-container.is-uploading .delete-preview-btn {
    display: none; /* Fait disparaître la croix rouge */
}

.preview-container.is-uploading .preview-item {
    opacity: 0.6; /* Grise légèrement les photos */
    transform: none; /* Désactive l'effet de survol */
    cursor: not-allowed; /* Change la souris en sens interdit */
}