/* Nos axes — cahier §8.0, maquette Axes.dc.html. Mobile first. */

.axes-grid { display: grid; grid-template-columns: 1fr; gap: 32px 24px; }

.axe-card { position: relative; display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon); transition: box-shadow 200ms; }
.axe-card:hover { box-shadow: var(--ombre); }
.axe-card:focus-within { outline: 2px solid var(--vert-texte); outline-offset: 2px; }
.axe-card .media { border-radius: var(--rayon) var(--rayon) 0 0; }

.axe-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 0 20px 24px; }
/* Pastille à cheval : remontée de la moitié de sa hauteur sur l'image (position relative pour passer au-dessus du .media positionné). */
.axe-card__icon {
	position: relative; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; margin: -28px 0 6px; border: 3px solid var(--blanc); border-radius: 50%; background: var(--teinte-verte); color: var(--vert-principal);
}
.axe-card__icon .icon { width: 26px; height: 26px; stroke-width: 1.5; }
.axe-card__title { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.axe-card__link { color: var(--encre); }
.axe-card__link:focus-visible { outline: none; }
.axe-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.axe-card:hover .axe-card__link { color: var(--vert-texte); text-decoration: none; }
.axe-card__text { margin: 0; font-size: 16px; line-height: 1.6; }
.axe-card .link-arrow { margin-top: auto; padding-top: 6px; }

@media (min-width: 768px) {
	.axes-grid { grid-template-columns: repeat(2, 1fr); }
	.axe-card__body { padding: 0 28px 28px; }
}