/*
 * Section « Le Groupe » — page « Qui sommes nous ? » (templates/equipe.php)
 * -------------------------------------------------------------------------
 * Fichier CSS autonome, chargé uniquement sur ce template (voir functions.php),
 * et non compilé depuis src/sass : reconstruire dist/app.min.css imposerait un
 * npm install (absent en local, dépendances épinglées en "latest") sur un site
 * de production sans versionnement. Même parti pris que material-symbols.css.
 *
 * ATTENTION : le thème pose html { font-size: 62.5% }, donc 1rem = 10px.
 *
 * Charte : design system France Ermitage / groupe Asteria (src/sass/conf/colors.scss).
 * Chaque entité reçoit sa couleur de marque via [data-entity="<slug>"], le slug
 * étant produit par sanitize_title(nom) côté template. Toute entité non listée
 * retombe sur le navy par défaut.
 */

.group_section {
  padding: 5rem 0 6rem;
}

.group_section__head {
  max-width: 78rem;
  margin-bottom: 4rem;
}

.group_section__title {
  margin-bottom: 1.2rem;
}

.group_section__text {
  color: #63666e;
  font-size: 1.8rem;
  line-height: 1.5;
  margin-bottom: 2.8rem;
}

.group_section__text p:last-child {
  margin-bottom: 0;
}

/* Sur-titre « LES ENTITÉS DU GROUPE » précédé d'un filet doré. */
.group_section__eyebrow {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  color: #7e818b;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.group_section__eyebrow-rule {
  display: block;
  width: 4.8rem;
  height: 1px;
  background: #c7b29b;
}

/* Grille des cartes : 4 colonnes en desktop, dégradé jusqu'à 1 en mobile. */
.group_section__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.group_card {
  display: flex;
}

.group_card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  width: 100%;
  min-height: 18rem;
  padding: 3.2rem 2rem;
  text-align: center;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid #e7e7e9;
  border-radius: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.group_card__link:hover,
a.group_card__link:focus-visible {
  transform: translateY(-4px);
  border-color: #d6d7da;
  box-shadow: 0 1.2rem 3rem rgba(1, 10, 43, 0.08);
}

/* Carte « logo » : l'image (vignette complète de l'entité) est centrée dans la
   carte, plafonnée à 240px de large, sans style texte ajouté. */
.group_card--logo .group_card__link {
  overflow: hidden;
}

.group_card__logo {
  display: block;
  width: 100%;
  max-width: 24rem; /* 240px (html { font-size: 62.5% } => 1rem = 10px) */
  height: auto;
}

.group_card__name {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 2.8rem;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Navy par défaut ; surchargé par entité ci-dessous. */
  color: #010a2b;
}

.group_card__rule {
  display: block;
  width: 4rem;
  height: 2px;
  background: currentColor;
  color: #c7b29b;
  opacity: 0.9;
}

.group_card__category {
  color: #7e818b;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* Couleurs de marque (charte Asteria). Le filet reprend la couleur du nom. */
.group_card[data-entity="paris-rental"] .group_card__name,
.group_card[data-entity="paris-rental"] .group_card__rule {
  color: #24320b;
}
.group_card[data-entity="anb-capital"] .group_card__name,
.group_card[data-entity="anb-capital"] .group_card__rule {
  color: #97360c;
}
.group_card[data-entity="optireal"] .group_card__name,
.group_card[data-entity="optireal"] .group_card__rule {
  color: #7d2b5a;
}
.group_card[data-entity="manestel"] .group_card__name,
.group_card[data-entity="manestel"] .group_card__rule {
  color: #513c01;
}

/* Lien « En savoir plus sur le groupe » centré sous la grille. */
.group_section__more {
  margin: 4rem 0 0;
  text-align: center;
}

.group_section__more-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: #010a2b;
  font-weight: 600;
  font-size: 1.6rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.group_section__more-link:hover,
.group_section__more-link:focus-visible {
  color: #0a1b5c;
}

.group_section__more-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.group_section__more-link:hover .group_section__more-arrow,
.group_section__more-link:focus-visible .group_section__more-arrow {
  transform: translateX(4px);
}

@media (max-width: 1080px) {
  .group_section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .group_section {
    padding: 3.5rem 0 4.5rem;
  }

  .group_section__head {
    margin-bottom: 3rem;
  }

  .group_card__name {
    font-size: 2.4rem;
  }
}

@media (max-width: 479px) {
  .group_section__grid {
    grid-template-columns: 1fr;
  }

  .group_card__link {
    min-height: 0;
    padding: 2.8rem 2rem;
  }
}