/* CSS adapté avec le thème vert */
.site {
  --vert-pale: #e6f5ee;
  --vert-fonce: #1a5d3a;
  --vert-tres-fonce: #0d3521;
  --vert-emeraude: #2e8b57;
  --vert-clair: #8cbe9a;
}

.site .views-view-responsive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 20px;
  font-family: 'Inter'
}

.site .views-view-responsive-grid__item-inner {
  background: white;
  border: 2px solid var(--vert-emeraude);
  border-radius: 12px;
  min-height: 580px; /* Hauteur minimale plus généreuse */
  height: auto; /* Permet l'expansion selon le contenu */
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
  overflow: hidden; /* Important : cache le débordement pour préserver le border-radius */
}

.site .views-view-responsive-grid__item:hover .views-view-responsive-grid__item-inner {
  transform: translateY(-5px);
}

/* Container de l'image avec hauteur fixe */
.site .views-field-field-image-de-couverture {
  height: 300px !important; /* Force la hauteur */
  min-height: 300px; /* Hauteur minimale */
  max-height: 300px; /* Hauteur maximale */
  overflow: hidden;
  position: relative;
  background-color: var(--vert-clair);
  flex-shrink: 0; /* Empêche la compression */
  border-radius: 10px 10px 0 0; /* Border-radius seulement en haut */
}

/* Image avec hauteur uniforme garantie */
.site .views-field-field-image-de-couverture img {
  width: 100% !important;
  height: 300px !important; /* Force la hauteur à 300px */
  min-height: 300px; /* Hauteur minimale */
  max-height: 300px; /* Hauteur maximale */
  object-fit: cover; /* Recadre l'image pour remplir l'espace */
  object-position: center; /* Centre l'image lors du recadrage */
  display: block;
  border: none;
  outline: none;
}

.site .views-field-title {
  padding: 15px 15px 5px;
  border-bottom: 1px solid var(--vert-clair);
  margin: 0 10px;
  flex-shrink: 0; /* Empêche la compression */
  text-align: center;
  color: var(--vert-tres-fonce);
  font-size: 18px;
  text-decoration: none;
  font-weight: 600;
  display: block;
}

.site .views-field-title a:hover {
  color: var(--vert-fonce);
}

.site .views-field-body {
  padding: 0 15px 10px;
  flex-grow: 1; /* Prend l'espace restant */
  overflow: visible; /* S'assure que le contenu n'est pas coupé */
}

.site .views-field-body .field-content {
  color: #445544;
  font-size: 14px;
  line-height: 1.4;
}

.site .views-field-field-activites {
  padding: 0 15px 15px;
  flex-shrink: 0; /* Empêche la compression */
}

.site .views-field-field-activites .field-content {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.site .views-field-field-activites h2 {
  margin: 0;
}

.site .views-field-field-activites a {
  font-size: 11px;
  background-color: var(--vert-clair);
  color: var(--vert-tres-fonce);
  padding: 3px 8px;
  text-decoration: none;
  display: inline-block;
  border-radius: 12px;
}

.site .views-field-field-activites a:hover {
  background-color: var(--vert-fonce);
  color: white;
}

@media (max-width: 768px) {
  .site .views-view-responsive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Ajustement de la hauteur des images sur tablette */
  .site .views-field-field-image-de-couverture,
  .site .views-field-field-image-de-couverture img {
    height: 250px !important;
    min-height: 250px;
    max-height: 250px;
  }
  
  .site .views-view-responsive-grid__item-inner {
    min-height: 520px; /* Hauteur minimale ajustée pour tablette */
    height: auto;
  }
}

@media (max-width: 480px) {
  .site .views-view-responsive-grid {
    grid-template-columns: 1fr;
  }
  
  /* Ajustement de la hauteur des images sur mobile */
  .site .views-field-field-image-de-couverture,
  .site .views-field-field-image-de-couverture img {
    height: 220px !important;
    min-height: 220px;
    max-height: 220px;
  }
  
  .site .views-view-responsive-grid__item-inner {
    min-height: 480px; /* Hauteur minimale ajustée pour mobile */
    height: auto;
  }
}

/* Bouton Explorer - CSS */
.site .btn-explorer {
  background-color: var(--vert-fonce);
  color: white;
  padding: 8px 20px;
  border-radius: 30px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--vert-fonce);
  letter-spacing: 1px;
  text-decoration: none;
  margin: auto !important;
  margin-bottom: 10px !important;
}

.site .btn-explorer:hover {
  background-color: white;
  color: var(--vert-fonce);
  transform: translateY(-3px);
}