@charset "utf-8";
/* Afficher Pages Enfants — grille responsive et accessible (RGAA 4.1) */

/* ---- Grille ---- */
.child-pages-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 44px 20px;              /* row-gap augmenté pour le titre qui déborde sous chaque carte */
	padding-bottom: 26px;        /* réserve la place du débordement de la dernière ligne */
}

/* ---- Carte ---- */
.child-page {
	position: relative;              /* référence de positionnement pour le titre à cheval */
	box-sizing: border-box;
	border: 1px solid #ddd;          /* largeur constante : pas de décalage au survol/focus */
	background-color: #0f8b9c;       /* couleur de repli quand il n'y a pas d'image */
	box-shadow: 0 0 20px #c6c6c6;
	transition: outline-color 0.4s ease-in-out, border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
	list-style: none;
}

/* Carte avec image mise en avant en fond */
.child-page--has-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Voile optionnel pour assombrir l'image (décommenter si besoin de lisibilité) */
/*
.child-page--has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
	pointer-events: none;
}
*/

.child-page__link {
	display: flex;
	flex-direction: column;
	align-items: center;          /* centrage horizontal */
	justify-content: center;      /* image centrée : le titre est positionné en absolu */
	gap: 10px;
	height: 100%;
	min-height: 165px;               /* min-height (et non height) : le contenu n'est pas tronqué au zoom (RGAA 10.4) */
	padding: 15px;
	text-decoration: none;
	color: #fff;
}

.child-page__link img {
	max-width: 100%;
	height: auto;
}

.child-page__title {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	max-width: calc(100% - 10px);
	margin: 0;
	padding: 6px 18px;
	box-sizing: border-box;
	background-color: #fff;
	font-size: clamp(1rem, 4vw, 1.1rem);
	line-height: 1.2;
	color: #0f8b9c;
	text-align: center;
	border: 1px solid;
	width: 80%;
}

/* ---- Survol ---- */
.child-page:hover {
	outline: 6px solid #31728c;
	border-color: #fff;
}

/* ---- Focus clavier visible (RGAA 10.7 / 11.x) ---- */
.child-page__link:focus-visible {
	outline: 3px solid #11324a;      /* contraste sur fond clair ET sur le fond teal */
	outline-offset: -3px;
}
.child-page:has(.child-page__link:focus-visible) {
	outline: 4px solid #11324a;
	outline-offset: 2px;
	border-color: #fff;
}

/* ---- Message « aucune page » ---- */
.child-pages-empty {
	font-style: italic;
}

/* ---- Texte réservé aux lecteurs d'écran ---- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Responsive ---- */
@media (max-width: 980px) {
	.child-pages-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.child-pages-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- Préférence « réduire les animations » (RGAA / WCAG 2.3.3) ---- */
@media (prefers-reduced-motion: reduce) {
	.child-page {
		transition: none;
	}
}

/* ---- Mode contrastes forcés (Windows High Contrast) ---- */
@media (forced-colors: active) {
	.child-page {
		border: 1px solid CanvasText;
	}
	.child-page__link:focus-visible,
	.child-page:has(.child-page__link:focus-visible) {
		outline: 3px solid Highlight;
	}
}