:root {
  --vert: #51b7aae6;   /* Vert */
  --vert-fonce: #51b7aa4d;  /* Vert foncer */
  --danger-color: #e74c3c;    /* Rouge */
  --text-dark: #2c3e50;       /* Noir bleuté */
  --text-light: #ecf0f1;      /* Blanc cassé */
}

/* Styles pour les filtres */
.projet-filters { text-align: center; margin-bottom: 1rem; padding: 1rem; background: #f8f9fa; }
.projet-filters .filter-btn { border-radius: 20px; }
.projet-filters .filter-btn { border-radius: 10px; background: white; border: 2px solid #dee2e6; color: #495057; padding: 12px 24px; margin: 5px; border-radius: 25px; cursor: pointer; transition: all 0.3s ease; font-weight: 500; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.filter-btn:hover { background: #e9ecef; border-color: #adb5bd; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.filter-btn.active { background: var(--vert); border-color: var(--vert); color: white; transform: translateY(-2px); box-shadow: 0 4px 8px var(--vert-fonce); }
/* Compteur de projets */
.projet-count { text-align: center; font-weight: 500; color: #6c757d; font-size: 14px; }
/* Animation pour le filtrage */
.projet-item { transition: all 0.4s ease; transform-origin: center; }
.projet-item.hidden { opacity: 0; transform: scale(0.8); pointer-events: none; }
.projet-item.filtering { transition: all 0.2s ease; }
/* Styles pour le lazy loading */
.image-container { position: relative; overflow: hidden; border-radius: 8px 8px 0 0; }
.lazy-load { opacity: 0; transition: opacity 0.5s ease; width: 100%; height: 200px; object-fit: cover; }
.lazy-load.loaded { opacity: 1; }
.lazy-load.loading { opacity: 0.3; }

/* Spinner de chargement */
.loading-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border: 3px solid #f3f3f3; border-top: 3px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; opacity: 0; transition: opacity 0.3s ease; }
.loading-spinner.show { opacity: 1; }

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

/* Placeholder pour les images manquantes */
.no-image-placeholder { width: 100%; height: 200px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; color: #adb5bd; font-size: 14px; border-radius: 8px 8px 0 0; }

/* Styles pour les cartes de projet */
.projet-card { background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; overflow: hidden; }
.projet-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); }
.projet-titre { padding: 1rem; }
.projet-titre-content { font-weight: 600; color: #333; margin-bottom: 0.5rem; }
.projet-type-badge { display: inline-block; background: #e9ecef; color: #495057; padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; }

/* Responsive */
@media (max-width: 768px) {
    .filter-btn { padding: 10px 16px; font-size: 13px; margin: 3px; }
    .projet-filters { padding: 0.5rem; }
}

/* Conteneur principal des projets */
.projet-container { margin: 3rem 0; }
.projet-card { position: relative; height: 250px; overflow: hidden; cursor: pointer; }
.projet-card img { width: 100%; height: 100%; object-fit: cover; }
.projet-titre { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; max-height: 80px; overflow-y: auto; background-color: rgba(81, 183, 170, 0.9); color: white; padding: 0 10px; font-size: 1rem; line-height: 1.2em; box-shadow: none; transition: all 0.3s ease-in-out; opacity: 0; }
.projet-card:hover .projet-titre { height: 60px !important; opacity: 1 !important; padding: 10px !important; }
.projet-card:hover { box-shadow: 1px 1px 4px #333; }
.projet-titre-content { padding-top: 10px; }