/**
 * Page « Cabinet du gouverneur » — Gouvernorat de Kinshasa
 *
 * Chargée par page--cabinet-du-gouverneur.html.twig, via la bibliothèque
 * gouvernoratkin/cabinet, qui dépend de gouvernoratkin/composants.
 *
 * Le corps reste le contenu saisi dans l'éditeur. Cette feuille reprend les
 * classes de ce contenu, jusqu'ici habillées par asset_injector.css.
 * cabinet_du_gouverneur, et les remet sur la charte.
 */

.cab-corps {
  padding: 0 0 4.5rem;
}

/* ==========================================================================
   Mot du directeur de cabinet
   ========================================================================== */

/* Le fond était un dégradé blanc → cyan → blanc à pleine largeur, qui tirait
   l'œil bien au-delà de ce que le bloc raconte et jurait avec le reste du
   site. Il devient la section claire employée partout ailleurs. */
.cab-corps #presentation {
  background: #f6f8fc;
  padding: 3.5rem 0;
  margin-bottom: 3.5rem;
}

.cab-corps .presentation-content {
  background-color: var(--whiteColor);
  border-radius: 14px;
  padding: 2.25rem 2rem;
  box-shadow: 0 10px 26px rgba(9, 36, 46, 0.08);
}

.cab-corps .presentation-content h2 {
  font-family: var(--fontFamily-heading);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 700;
  color: var(--mainColor);
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.cab-corps .presentation-content p {
  font-family: var(--fontFamily-body);
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--paragraphColor);
}

/* Le portrait du directeur imposait 300 px carrés quelle que soit la place
   disponible. Il suit désormais la colonne, borné en hauteur. */
.cab-corps .director-img-container {
  width: 100%;
  max-width: 280px;
  height: auto;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background-color: #dfe5ee;
  margin: 0 auto 1.25rem;
}

.cab-corps .director-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 0;
}

/* ==========================================================================
   Membres du cabinet
   ========================================================================== */

.cab-corps #membres {
  padding: 0;
  background-color: transparent;
}

.cab-corps #membres h2 {
  font-family: var(--fontFamily-heading);
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  font-weight: 700;
  color: var(--mainColor);
  text-align: center;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.cab-corps #membres h2::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: 0.9rem auto 2rem;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--secondaryColor) 0%,
    var(--highlightColor) 50%,
    var(--accentColor) 100%
  );
}

.cab-corps .membre-card {
  position: relative;
  height: 100%;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--whiteColor);
  box-shadow: 0 10px 26px rgba(9, 36, 46, 0.09);
  transition: transform var(--transition), box-shadow var(--transition);
}

.cab-corps .membre-card:hover,
.cab-corps .membre-card:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(9, 36, 46, 0.16);
}

.cab-corps .membre-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(
    90deg,
    var(--secondaryColor) 0%,
    var(--highlightColor) 50%,
    var(--accentColor) 100%
  );
}

/* Hauteur bornée plutôt que 250 px fixes, et cadrage décalé vers le haut pour
   garder les visages dans le cadre. Le conteneur centre aussi l'icône
   générique affichée quand un membre n'a pas encore de portrait. */
.cab-corps .card-img-top-container {
  width: 100%;
  height: clamp(200px, 22vw, 260px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: #dfe5ee;
}

.cab-corps .card-img-top-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 0;
}

.cab-corps .card-img-top-container > svg,
.cab-corps .card-img-top-container > i {
  font-size: 4.5rem;
  color: #b9c4d4;
}

.cab-corps .card-title {
  font-family: var(--fontFamily-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mainColor);
  margin-bottom: 0.35rem;
  text-wrap: balance;
}

/* La fonction était en cyan italique : 3,42:1 sur blanc, sous le seuil WCAG
   de 4,5:1 pour du petit texte. Elle passe au cyan assombri de la charte,
   en romain. */
.cab-corps .card-subtitle {
  font-family: var(--fontFamily-body);
  font-size: 0.92rem;
  font-weight: 600;
  font-style: normal;
  color: var(--secondaryColorDark, #00719A);
  margin-bottom: 0.85rem;
}

.cab-corps .card-text {
  font-family: var(--fontFamily-body);
  font-size: 0.95rem;
  line-height: 1.7;
  font-weight: 400;
  color: var(--paragraphColor);
  margin-bottom: 0;
}

/* ==========================================================================
   Adaptations
   ========================================================================== */

@media (max-width: 991.98px) {
  .cab-corps #presentation {
    padding: 2.25rem 0;
    margin-bottom: 2.5rem;
  }

  .cab-corps .presentation-content {
    padding: 1.6rem 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cab-corps .membre-card:hover,
  .cab-corps .membre-card:focus-within {
    transform: none;
  }
}