#projet-filtres li {
  text-transform: capitalize;
}

.main-projet-client {
  color: #fff;
  background-color: var(--dark-blue);
  text-align: center;
  padding-inline: clamp(16px, 4vw, 40px); /* marges fluides */
  box-sizing: border-box;
}

/* Retarde visuellement le footer sans toucher aux cartes */
.projet-grid-section { min-height: 60vh; }

/* ===== Filtres ===== */
.projet-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}
.projet-filtres li {
  background-color: rgba(255,255,255,0.08);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 0.95rem;
  user-select: none;
}
.projet-filtres li.active,
.projet-filtres li:hover {
  background-color: var(--yellow);
  color: var(--white);
}

/* ===== Grille projets ===== */
.projet-grid-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem clamp(16px, 4vw, 40px); /* respiration latérale fluide */
  border-radius: 12px;
  background: linear-gradient(45deg, var(--dark-blue), var(--light-blue), var(--dark-blue));
  background-size: 200% 200%;
  animation: realGradientShift 8s ease infinite;
  box-shadow: var(--box-shadow-default);
}
@keyframes realGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.projet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 1024px) {
  .projet-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .projet-grid { grid-template-columns: 1fr; }
}

/* ===== Cartes projet avec overlay ===== */
.projet-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  background-color: rgba(0,0,0,0.4);
  box-shadow: var(--box-shadow-default);
  /* pas de transition ici → AOS + hover gèrent */
}
.projet-card a {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.projet-card img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px 10px 0 0;
}

/* Overlay */
.projet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(39, 47, 64, 0.75);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  pointer-events: none;
  border-radius: 10px;
}
.projet-card:hover .projet-overlay {
  opacity: 1;
}
.projet-overlay h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
}
.projet-overlay p {
  margin: 0.4rem 0;
  font-size: 1rem;
  opacity: 0.9;
}
.projet-overlay .projet-business { font-weight: bold; }
.projet-location { font-style: italic; }
.projet-overlay .projet-date {
  font-size: 0.9rem;
  opacity: 0.7;
}

/* ===== Pagination ===== */
.pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  padding: 2rem 0;
}
.pagination li { transition: transform 0.3s ease; }
.pagination li a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--white);
  background-color: transparent;
  border: 1px solid var(--white);
  border-radius: 5px;
  text-decoration: none;
  transition: color 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.pagination li a:hover {
  background-color: var(--white);
  color: var(--dark-blue);
}
.pagination li.active a {
  background-color: var(--yellow);
  color: var(--white);
  font-weight: 700;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

/* ===============================
   Hover fluide comme Services
================================= */
.projet-card > a {
  display: block;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--box-shadow-default);
  transform: translateZ(0);
  will-change: transform, box-shadow;
  transition: transform .30s cubic-bezier(.22,.61,.36,1),
              box-shadow .30s cubic-bezier(.22,.61,.36,1);
}
.projet-card:hover > a {
  transform: translate3d(0, -5px, 0);
  box-shadow: var(--ombre-bleue);
}
.projet-card img {
  transform: translateZ(0);
  will-change: transform;
  transition: transform .30s cubic-bezier(.22,.61,.36,1);
}
.projet-card:hover img {
  transform: scale(1.05);
}

/* Cas rare : carte sans <a> */
.projet-card:not(:has(> a)) {
  transform: translateZ(0);
  will-change: transform, box-shadow;
  transition: transform .30s cubic-bezier(.22,.61,.36,1),
              box-shadow .30s cubic-bezier(.22,.61,.36,1);
}
.projet-card:not(:has(> a)):hover {
  transform: translate3d(0, -5px, 0);
  box-shadow: var(--ombre-bleue);
}

/* --- Projet-client : neutraliser chevron + bande sous les cartes --- */
.main-projet-client .projet-card::before,
.main-projet-client .projet-card::after,
.main-projet-client .projet-card > a::before,
.main-projet-client .projet-card > a::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Afficher l’overlay en permanence sur mobile/tactile */
@media (hover: none), (pointer: coarse) {
  .projet-card .projet-overlay { opacity: 1; }
  .projet-card:hover .projet-overlay { opacity: 1; } /* neutralise le hover */
}