/*
Theme Name: AEM
Description: Thème enfant de Twenty Twenty-Five pour l'Association Espérance (Montigny-lès-Cormeilles). Remplace les gabarits Elementor par des templates de thème bloc versionnés dans Git.
Author: Association Espérance
Template: twentytwentyfive
Requires at least: 6.7
Requires PHP: 7.2
Version: 1.0
Text Domain: aem
*/

/* ------------------------------------------------------------------
   Pied de page — repris du gabarit HFE 2562 (post-2562.css).
   Le motif en recouvrement et les survols d'icônes ne s'expriment pas
   en attributs de bloc : ils vivent ici, jamais en style inline.
   ------------------------------------------------------------------ */

.aem-footer {
	position: relative;
	isolation: isolate;
}

/* background-overlay : pattern8, opacité 0.3, mix-blend-mode multiply. */
.aem-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("/wp-content/uploads/2023/02/pattern8-150x150.jpg");
	opacity: 0.3;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.aem-footer__legal a {
	color: #FFFFFF;
	text-decoration: none;
}

.aem-footer__legal a:hover,
.aem-footer__legal a:focus {
	text-decoration: underline;
}

/* icon_size 18px, icon_spacing 4px (10px en mobile), hover "grow". */
.aem-footer__social {
	--wp--style--block-gap: 4px;
	gap: 4px;
}

.aem-footer__social .wp-block-social-link {
	transition: transform 0.3s;
}

.aem-footer__social .wp-block-social-link:hover {
	transform: scale(1.1);
}

.aem-footer__social .wp-block-social-link-anchor svg {
	width: 18px;
	height: 18px;
}

@media (max-width: 767px) {
	.aem-footer {
		padding-left: 20px;
		padding-right: 20px;
	}

	.aem-footer__social {
		--wp--style--block-gap: 10px;
		gap: 10px;
	}
}

/* ------------------------------------------------------------------
   Sections de contenu — classes communes, réutilisables d'une page à
   l'autre. Le contenu vit en base ; seules ces classes portent le
   style, jamais le gabarit ni un attribut inline.
   ------------------------------------------------------------------ */

/* Rythme vertical commun à toutes les sections. */
.aem-section {
	padding-top: var( --wp--preset--spacing--50 );
	padding-bottom: var( --wp--preset--spacing--50 );
}

/* Encarts à icône, titre, texte et bouton.
   Valeurs reprises des widgets elementskit-icon-box : bordure 2px
   #7A7A7A45, rayon 10px, ombre 0 2px 5px rgba(0,0,0,.25), fond blanc,
   padding 35px. */
.aem-encart {
	height: 100%;
	padding: 35px;
	background-color: #FFFFFF;
	border: 2px solid #7A7A7A45;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba( 0, 0, 0, 0.25 );
}

.aem-encart__icone {
	margin-bottom: 20px;
}

.aem-encart__icone img {
	transition: transform 0.3s;
}

.aem-encart:hover .aem-encart__icone img {
	transform: scale( 1.1 );
}

/* Titre : Noto Sans 800, 20px (18px tablette, 16px mobile), #005247. */
.aem-encart__titre {
	color: #005247;
	font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
}

.aem-encart__texte {
	color: #54595F;
	font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

/* Bouton d'encart : #0B8E36, coins droits, survol #6EC1E4. Ce vert
   diffère de l'accent du kit (#008D36) : il est repris tel quel du
   widget d'origine. */
.aem-encart__bouton .wp-block-button__link {
	background-color: #0B8E36;
	border-radius: 0;
	font-weight: 600;
}

.aem-encart__bouton .wp-block-button__link:hover,
.aem-encart__bouton .wp-block-button__link:focus {
	background-color: #6EC1E4;
	color: #FFFFFF;
}

/* Bandeau de chiffres clés, ex-widgets counter. Le comptage animé
   n'est pas reproduit : la valeur finale est affichée directement. */
.aem-chiffres {
	padding: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--30 );
	background-color: #3E004B;
}

.aem-chiffres h2,
.aem-chiffres .aem-chiffre__nombre,
.aem-chiffres .aem-chiffre__titre {
	color: #FFFFFF;
}

.aem-chiffres .aem-chiffre__nombre {
	margin-bottom: 0;
	font-size: 3rem;
	font-weight: 600;
	line-height: 1.2;
}

.aem-chiffres .aem-chiffre__titre {
	margin-top: 0;
	font-size: 1.2rem;
}

/* Grille d'actualités : quatre colonnes, comme le widget posts du
   gabarit 2396 (titre 1.5rem, extrait 0.9rem, lien 1.1rem). */
.aem-actualite__titre {
	margin-top: 0.5em;
	margin-bottom: 0.25em;
	font-size: 1.5rem;
}

.aem-actualite__date {
	color: #787878;
	font-size: 0.85rem;
}

.aem-actualite__extrait {
	font-size: 0.9rem;
}

.aem-actualite__extrait .wp-block-post-excerpt__more-link {
	font-size: 1.1rem;
}

/* Méta d'article : « par Auteur | Le date | Catégorie ». */
.aem-post-meta {
	color: #54595F;
	gap: 7px;
}

.aem-post-meta p,
.aem-post-meta .wp-block-post-date,
.aem-post-meta .wp-block-post-author-name,
.aem-post-meta .wp-block-post-terms {
	margin: 0;
}

/* Colonne latérale « Dernières publications » du gabarit d'article. */
.aem-derniere__meta {
	color: #787878;
	font-size: 0.85rem;
	gap: 5px;
}

.aem-derniere__meta p,
.aem-derniere__meta .wp-block-post-date,
.aem-derniere__meta .wp-block-post-author-name {
	margin: 0;
}

@media (max-width: 1024px) {
	.aem-encart {
		padding: 30px 15px;
	}

	.aem-encart__titre {
		font-size: 18px;
	}

	.aem-encart__texte {
		font-size: 15px;
	}
}

@media (max-width: 767px) {
	.aem-encart__titre {
		font-size: 16px;
	}

	.aem-encart__texte {
		font-size: 14px;
	}

	.aem-chiffres .aem-chiffre__nombre {
		font-size: 2.2rem;
	}
}

/* Galeries issues des carrousels et diaporamas Elementor.
   Les photos d'origine ont des formats très variables (portrait,
   paysage) : sans hauteur contrainte, la grille se décale en
   cascade. On fige une grille régulière et un recadrage. */
.aem-galerie {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 12px;
}

.aem-galerie .wp-block-image {
	margin: 0;
	width: 100%;
}

.aem-galerie .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3;
	display: block;
	border-radius: 4px;
}

@media (max-width: 767px) {
	.aem-galerie {
		grid-template-columns: repeat( 2, 1fr );
		gap: 8px;
	}
}

/* Bouton « haut de page », qui remplace wpfront-scroll-top.
   Reprend ses réglages : pastille ronde de 64px, noir à 50 % dans un
   bouton à 80 % d'opacité, chevron blanc, à 20px du coin inférieur
   droit, apparition après 100px de défilement. Sans JavaScript :
   l'apparition passe par une animation liée au défilement ; les
   navigateurs qui ne la connaissent pas affichent le bouton en
   permanence. */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.aem-haut-de-page {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: rgba( 0, 0, 0, 0.5 );
	opacity: 0.8;
	transition: background-color 0.2s;
}

.aem-haut-de-page::before {
	content: "";
	width: 14px;
	height: 14px;
	margin-top: 8px;
	border-top: 5px solid #fff;
	border-left: 5px solid #fff;
	transform: rotate( 45deg );
}

.aem-haut-de-page:hover,
.aem-haut-de-page:focus-visible {
	background-color: rgba( 0, 0, 0, 0.75 );
}

@supports ( animation-timeline: scroll() ) {
	.aem-haut-de-page {
		animation: aem-haut-de-page linear both;
		animation-timeline: scroll( root );
		animation-range: 0 100px;
	}
}

@keyframes aem-haut-de-page {
	from {
		opacity: 0;
		visibility: hidden;
	}

	to {
		opacity: 0.8;
		visibility: visible;
	}
}

/* Carrousel de l'accueil (bloc HTML repris d'Elementor, octet pour
   octet). Son style fixe une largeur de 100 % et des marges intérieures
   de 3rem, mais ne met « box-sizing: border-box » que sur ses enfants :
   sa largeur réelle dépassait donc son conteneur, et il débordait à
   droite de l'écran. Elementor appliquait border-box à tout ; Twenty
   Twenty-Five non. Corrigé ici plutôt que dans le bloc, que
   l'association peut modifier depuis wp-admin. */
.aem-carousel {
	box-sizing: border-box;
}

/* Masqué depuis le 2026-09-26 : les inscriptions aux cours d'arabe
   qu'il annonçait sont closes, et aucune actualité ne le remplace. Toute
   sa section, pour ne pas laisser de vide en haut de l'accueil. Le bloc
   reste dans la page : retirer cette règle suffit à le réafficher. */
.aem-section:has( > .aem-carousel ) {
	display: none;
}

/* Rangées de quatre encarts ou plus (pôles de « Qui sommes-nous »,
   piliers de « Culte », services de « Contact »). En colonnes de
   largeur égale sur une seule ligne, six encarts ne laissaient que
   74px au texte sur ordinateur : WordPress coupait alors les mots en
   plein milieu (« Techniq-ue »). Grille qui passe à la ligne : deux
   encarts par ligne en mobile, trois en tablette, tous sur une ligne
   au-delà de 1200px, avec un espacement et des marges intérieures
   resserrés. Les rangées de trois encarts gardent la mise en colonnes
   de WordPress. */
.wp-block-columns:has( > .wp-block-column:nth-child( 4 ) > .aem-encart ) {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.wp-block-columns:has( > .wp-block-column:nth-child( 4 ) > .aem-encart ) .aem-encart {
	padding: 24px 12px;
}

@media (min-width: 600px) {
	.wp-block-columns:has( > .wp-block-column:nth-child( 4 ) > .aem-encart ) {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.wp-block-columns:has( > .wp-block-column:nth-child( 4 ) > .aem-encart ) .aem-encart {
		padding: 30px 20px;
	}
}

@media (min-width: 1200px) {
	.wp-block-columns:has( > .wp-block-column:nth-child( 4 ) > .aem-encart ) {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax( 0, 1fr );
	}
}

/* Retour à la ligne équilibré (« balance ») pour les titres et les
   textes centrés : des lignes de longueur voisine plutôt qu'une
   dernière ligne réduite à un mot. */
.wp-block-post-content :is( h1, h2, h3, h4, h5, h6 ),
.wp-block-post-content p.has-text-align-center,
.aem-encart__titre,
.aem-encart__texte {
	text-wrap: balance;
}

/* Vidéos présentées côte à côte (bloc Colonnes de classe aem-videos) :
   titre en haut de chaque colonne, vidéos alignées en bas malgré des
   titres de longueurs différentes. Les colonnes s'empilent en mobile. */
.aem-videos > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.aem-videos .wp-block-embed {
	margin-top: auto;
	margin-bottom: 0;
}