/*
 * Cartes des outils, sur la page d'accueil « Échecs à l'aveugle » : colonnes avec la classe
 * CSS additionnelle ac-carte-outil et un lien sur leur titre. Le lien couvre toute la carte ;
 * la carte se soulève au survol, avec la bordure dorée des cartes de la page d'accueil du site.
 * Feuille chargée seulement sur les pages qui contiennent cette classe (ac-echecs-aveugle.php).
 */

.ac-carte-outil {
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* La couleur de la bordure est dans l'attribut style du bloc : !important pour la changer. */
.ac-carte-outil:hover,
.ac-carte-outil:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(26, 60, 52, 0.12);
	border-color: #c4a35a !important;
}

/* Le lien du titre s'étend à toute la carte. */
.ac-carte-outil h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
}

/* Titre à la couleur des titres, souligné d'or au survol. Le CSS du site souligne tous les
   liens du contenu (avec !important) : sélecteurs plus précis pour l'emporter. */
.ac-carte-outil h3 a,
body .entry-content .ac-carte-outil h3 a:not(.wp-block-button__link) {
	color: inherit !important;
	text-decoration: none !important;
}

.ac-carte-outil:hover h3 a,
body .entry-content .ac-carte-outil:hover h3 a:not(.wp-block-button__link) {
	text-decoration: underline !important;
	text-decoration-color: #c4a35a !important;
	text-underline-offset: 4px;
}

/* Clavier : le contour entoure la carte entière, pas seulement le titre. */
.ac-carte-outil h3 a:focus-visible {
	outline: none;
}

.ac-carte-outil:has(a:focus-visible) {
	outline: 3px solid #c4a35a;
	outline-offset: 3px;
}

/* Plus de bouton sous le texte : pas de marge sous le dernier paragraphe, ni au-dessus du
   titre (le CSS du site en ajoute une à tous les titres), pour un cadre égal en haut et en bas. */
.ac-carte-outil > p:last-child,
body .entry-content .ac-carte-outil > p:last-child {
	margin-bottom: 0 !important;
}

.ac-carte-outil > h3:first-child,
body .entry-content .ac-carte-outil > h3:first-child {
	margin-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.ac-carte-outil {
		transition: none;
	}

	.ac-carte-outil:hover,
	.ac-carte-outil:focus-within {
		transform: none;
	}
}