/* ============================================
   Project Cards — Galerie projets sans photo
   ============================================
   Cartes design avec pictogramme Bootstrap Icons,
   gradient catégoriel et hover élégant.

   Polish principles applied (make-interfaces-feel-better) :
   - Layered shadows (no border)
   - Specific transitions (no transition: all)
   - Natural cubic-bezier easings
   - Subtle hover micro-interactions
   - text-wrap balance/pretty
   - tabular-nums on badges
   - antialiased font smoothing
   - will-change sparingly on transform-only
*/

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 290px;
  padding: 1.75rem;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--card-bg-1) 0%, var(--card-bg-2) 100%);
  overflow: hidden;
  cursor: default;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Layered shadow : 3 layers de profondeur + 1 inset highlight subtil */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.05),
    0 12px 28px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Specific transitions — never transition: all */
  transition-property: transform, box-shadow;
  transition-duration: 0.32s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 12px 24px rgba(15, 23, 42, 0.10),
    0 24px 48px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.project-card:focus-visible {
  outline: none;
  transform: translateY(-4px);
  box-shadow:
    0 0 0 3px var(--card-bg-1),
    0 0 0 5px var(--card-accent),
    0 12px 24px rgba(15, 23, 42, 0.10);
}

/* Pictogramme XL en arrière-plan — optical alignment via offsets */
.project-card__icon {
  position: absolute;
  top: -10px;
  right: -14px;
  font-size: 7.5rem;
  line-height: 1;
  opacity: 0.13;
  color: var(--card-accent);
  transform: rotate(-8deg);
  transform-origin: 70% 30%;
  pointer-events: none;
  z-index: 1;
  will-change: transform;

  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.project-card:hover .project-card__icon {
  opacity: 0.20;
  transform: rotate(-4deg) scale(1.04);
}

/* Pastille décorative bas-droite */
.project-card__decoration {
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--card-accent);
  opacity: 0.08;
  z-index: 1;
  pointer-events: none;
  will-change: transform;

  transition-property: transform, opacity;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.project-card:hover .project-card__decoration {
  transform: scale(1.25);
  opacity: 0.11;
}

/* Corps du contenu */
.project-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.55rem;
}

/* Pastille catégorie — concentric (999px = pill, indépendant du parent) */
.project-card__category {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--card-accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
}

.project-card__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0.5rem 0 0.1rem;
  color: var(--card-title);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.project-card__location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.94rem;
  color: var(--card-meta);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.project-card__location i {
  color: var(--card-accent);
  font-size: 0.95rem;
  /* Optical adjustment — geo pin reads heavier on top, nudge down */
  transform: translateY(0.5px);
}

.project-card__description {
  font-size: 0.9rem;
  color: var(--card-meta);
  margin: 0.25rem 0 0;
  line-height: 1.5;
  flex: 1;
  text-wrap: pretty;
}

/* Badges des lots techniques — concentric : 16px outer card, ~24px padding équivalent → 8px inner */
.project-card__lots {
  display: flex;
  gap: 0.4rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.lot-badge {
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--card-title);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);

  transition-property: background-color, box-shadow, transform;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.project-card:hover .lot-badge {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ============================================
   Variantes catégorielles (palettes par type ERP)
   ============================================ */

/* EHPAD / établissement médico-social — vert sage chaleureux */
.project-card--ehpad {
  --card-bg-1: #f0f7f4;
  --card-bg-2: #d4e7dd;
  --card-title: #1a3d2c;
  --card-meta: #4a6b5a;
  --card-accent: #2d8659;
}

/* Bureaux modernes — bleu corporate */
.project-card--bureaux {
  --card-bg-1: #f3f5f9;
  --card-bg-2: #d8dfeb;
  --card-title: #1c2e3f;
  --card-meta: #4a5a6e;
  --card-accent: #3d5a80;
}

/* Théâtre / salle spectacle — rouge bordeaux velours */
.project-card--theatre {
  --card-bg-1: #fdf3f1;
  --card-bg-2: #f5d8d2;
  --card-title: #3a1a18;
  --card-meta: #6e3530;
  --card-accent: #a8392f;
}

/* Gare ferroviaire — bleu acier SNCF */
.project-card--gare {
  --card-bg-1: #eef5fa;
  --card-bg-2: #cce0f0;
  --card-title: #0f2840;
  --card-meta: #3a5878;
  --card-accent: #1d5a99;
}

/* École / établissement scolaire — ocre doré académique */
.project-card--ecole {
  --card-bg-1: #fbf7ef;
  --card-bg-2: #f0e4cc;
  --card-title: #3d2f1a;
  --card-meta: #74604a;
  --card-accent: #b8862e;
}

/* Université / pôle enseignement supérieur — pourpre érudit */
.project-card--universite {
  --card-bg-1: #f3eef7;
  --card-bg-2: #ddc7e8;
  --card-title: #34204a;
  --card-meta: #67517b;
  --card-accent: #7d3fa3;
}

/* Tramway / transport urbain — vert RATP */
.project-card--tramway {
  --card-bg-1: #eef5f1;
  --card-bg-2: #cce0d2;
  --card-title: #11331f;
  --card-meta: #3d6049;
  --card-accent: #2c7a4f;
}

/* Mixte / construction urbaine — anthracite contemporain */
.project-card--mixte {
  --card-bg-1: #f1f3f5;
  --card-bg-2: #d3d9e0;
  --card-title: #1a2530;
  --card-meta: #4a5868;
  --card-accent: #495873;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 991px) {
  .project-card {
    min-height: 260px;
  }
}

@media (max-width: 575px) {
  .project-card {
    min-height: 220px;
    padding: 1.5rem;
  }
  .project-card__icon {
    font-size: 5.5rem;
    top: -6px;
    right: -10px;
  }
  .project-card__title {
    font-size: 1.2rem;
  }
}

/* ============================================
   Reduced motion — respect prefers-reduced-motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-card__icon,
  .project-card__decoration,
  .lot-badge {
    transition-duration: 0.01ms !important;
    will-change: auto;
  }
  .project-card:hover {
    transform: none;
  }
  .project-card:hover .project-card__icon,
  .project-card:hover .project-card__decoration {
    transform: rotate(-8deg);
  }
}