/* =========================================================
   bootstrap_barrio_giguellerie — 49-cartes.css
   Composant « cartes », rangée de cartes d'entrée.
   Reprend le motif des trois cartes de la page d'accueil
   (voir 41-frontpage.css, bloc #parcours).

   Le lien est posé sur le texte du bas et étendu à toute la
   carte par la classe Bootstrap stretched-link. La carte
   elle-même reste un <div>, parce que CKEditor n'accepte pas
   qu'un lien contienne des blocs.
   ========================================================= */

.cartes {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.carte {
  position: relative;
  flex: 1 1 280px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  text-align: center;
  color: var(--bs-body-color);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

@media (min-width: 992px) {
  .cartes {
    flex-wrap: nowrap;
  }

  .carte {
    flex: 1;
    min-width: 0;
  }
}

/* Le survol porte sur la carte, puisque le lien la recouvre */

.carte:hover,
.carte:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
  border-color: rgba(0, 0, 0, .12);
}

.carte:focus-within {
  outline: 2px solid color-mix(in srgb, var(--bs-primary) 55%, transparent);
  outline-offset: 3px;
}

.carte .stretched-link:focus {
  outline: none;
}

/* Exergue : un chiffre, un mot court */

.carte-exergue {
  font-family: var(--font-headings, inherit);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--bs-primary);
  letter-spacing: -.02em;
  margin-bottom: .75rem;
}

/* Icône : le cercle vert clair de l'accueil */

.carte-icone {
  margin: 0 auto .9rem;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(107, 161, 32, .08);
  color: var(--bs-primary);
  font-size: 1.9rem;
}

.carte-libelle {
  font-size: 1rem;
  line-height: 1.55;
}

.carte-precision {
  font-size: .88rem;
  line-height: 1.5;
  margin-top: .4rem;
  color: var(--bs-secondary-color, var(--bootstrap_barrio_giguellerie-gris-moyen));
  flex-grow: 1;
}

.carte-lien {
  margin-top: 1.25rem;
}

.carte-lien a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--bs-link-color);
  text-decoration: none;
}

.carte:hover .carte-lien a,
.carte:focus-within .carte-lien a {
  color: var(--bs-link-hover-color);
}

/* Appel à l'action sous la rangée */

.cartes-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.cartes-cta p {
  margin: 0;
  line-height: 1.65;
  color: var(--bs-secondary-color, var(--bootstrap_barrio_giguellerie-gris-fonce));
}

@media (max-width: 575.98px) {
  .carte {
    padding: 1.5rem 1.25rem;
    min-width: 0;
    flex-basis: 100%;
  }

  .carte-exergue {
    font-size: 2.1rem;
  }

  .cartes-cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}