/**
 * LPO Vendée — effets d'interface (R36, 03/09/2026).
 * Fichier à part, chargé en front uniquement (functions.php → `primefsechild-effets`).
 *
 *  1. Boutons pleins (B) : soulèvement 2 px + ombre de la couleur du bouton + flèche
 *     qui glisse. Le clic renfonce.
 *  2. Reflet sur tous les boutons : une bande de lumière traverse le bouton en
 *     diagonale, une fois par survol. Boutons en contour (D) : le contour se
 *     remplit en plus.
 *  3. Axes du projet associatif (`lpo-apparition`) : apparition en cascade à
 *     l'entrée dans l'écran (160 ms d'écart, 0,8 s par axe), léger zoom au survol.
 *  5. Cartes actus (Bannière dans une boucle) : soulèvement, ombre, zoom de l'image,
 *     lien couvrant posé par le script.
 *  6. Cartes de la home (`lpo-cartes` sur la grille : Au cœur de l'asso, hero) :
 *     soulèvement, ombre, zoom de l'image s'il y en a une.
 *  4. Chiffres clés (`lpo-compteurs`) : les compteurs sont pilotés par effets.js ;
 *     ici, seulement des chiffres tabulaires pour éviter le tremblement.
 *
 * Tout est débrayable : retirer la classe utilitaire dans l'éditeur (Avancé →
 * Classe CSS additionnelle) désactive l'effet, le contenu reste intact.
 * « Réduire les animations » du système désactive l'ensemble.
 * Les positions animées utilisent `translate` (propriété séparée) pour ne pas
 * entrer en conflit avec le `transform: scale()` du survol.
 */

/* === 1. Boutons ============================================================ */
.wp-block-button__link {
	position: relative;
	overflow: hidden;
	transition:
		transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 0.25s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}

/* Ombre colorée : couleur du fond du bouton (classes de palette WordPress),
   neutre sinon. */
.wp-block-button__link { --lpo-ombre: rgba(25, 25, 25, 0.22); }
.wp-block-button__link.has-lpo-blue-background-color   { --lpo-ombre: rgba(0, 135, 205, 0.55); }
.wp-block-button__link.has-lpo-orange-background-color,
.wp-block-button__link.has-lpo-orange-border-color     { --lpo-ombre: rgba(245, 95, 25, 0.55); }
.wp-block-button__link.has-lpo-paper-background-color:not(.has-border-color) { --lpo-ombre: rgba(25, 25, 25, 0.18); }

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -10px var(--lpo-ombre);
}
.wp-block-button__link:active {
	transform: translateY(0);
	transition-duration: 0.08s;
}

/* Flèche « → » : effets.js l'enveloppe dans <span class="lpo-fleche"> quand elle
   termine le libellé. Sans JS, la flèche reste simplement immobile. */
.lpo-fleche {
	display: inline-block;
	transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wp-block-button__link:hover .lpo-fleche,
.wp-block-button__link:focus-visible .lpo-fleche {
	transform: translateX(4px);
}

/* --- Boutons en contour (bordure de palette) : remplissage (D) ---------------
   `!important` nécessaire : les classes de palette WordPress en portent un. */
.wp-block-button__link.has-lpo-orange-border-color:hover,
.wp-block-button__link.has-lpo-orange-border-color:focus-visible {
	background-color: var(--wp--preset--color--lpo-orange) !important;
	color: var(--wp--preset--color--lpo-paper) !important;
}

/* --- Reflet : une bande claire traverse en diagonale, une fois par survol -----
   Sur TOUS les boutons (pleins et contours) — retour user du 03/09. */
.wp-block-button__link::after {
	content: "";
	position: absolute;
	top: -30%;
	bottom: -30%;
	left: -40%;
	width: 35%;
	/* Intensité 0,28 et bords fondus (retour user 04/09 : « ça flash un peu trop ») */
	background: linear-gradient(105deg, transparent 0, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0.12) 70%, transparent 100%);
	transform: translateX(-120%) skewX(-18deg);
	pointer-events: none;
	z-index: 1;
}
.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after {
	transform: translateX(460%) skewX(-18deg);
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Le mega menu avait déjà sa propre transition de survol (style-custom.css) :
   on l'aligne sur celle-ci pour éviter deux durées. */
.lpo-megamenu .lpo-megamenu__cta .wp-block-button__link {
	transition:
		transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 0.25s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}

/* === 3. Axes du projet associatif (`lpo-apparition`) ========================= */
/* Chaque axe direct = un Group (rangée numéro + texte). */
.lpo-apparition > .wp-block-group {
	position: relative;
	transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
	transform-origin: 50% 50%;
}
/* Léger zoom au survol ; l'axe survolé passe au-dessus de ses voisins. */
.lpo-apparition > .wp-block-group:hover {
	transform: scale(1.02);
	z-index: 1;
}
@media (hover: none) {
	.lpo-apparition > .wp-block-group:hover { transform: none; }
}

/* Filet dessiné en bleu par-dessus le filet gris (border-top du bloc). */
.lpo-apparition > .wp-block-group::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	height: 1px;
	width: 0;
	background: var(--wp--preset--color--lpo-blue);
	pointer-events: none;
}

/* État « prêt » posé par effets.js seulement si la section est encore sous
   l'écran : rien n'est caché tant que le script n'a pas décidé d'animer. */
.lpo-apparition--prete > .wp-block-group,
.lpo-apparition--prete > .wp-block-group > p:first-child {
	opacity: 0;
}

/* État « vue » : la cascade. `both` (pas `forwards`) : l'état de départ s'applique
   aussi pendant le délai, sinon un axe en attente est visible puis disparaît d'un coup. 160 ms entre deux axes,
   durées allongées (retour user 04/09 : « ralentis et ajoute un léger delay »). */
.lpo-apparition { --lpo-latence: 0ms; --lpo-pas: 160ms; } /* latence 250 ms essayée puis retirée le 04/09 */
.lpo-apparition--vue > .wp-block-group {
	animation: lpo-apparait 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--lpo-latence) + var(--lpo-i, 0) * var(--lpo-pas));
}
.lpo-apparition--vue > .wp-block-group > p:first-child {
	animation: lpo-glisse 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--lpo-latence) + var(--lpo-i, 0) * var(--lpo-pas) + 150ms);
}
.lpo-apparition--vue > .wp-block-group::before {
	animation: lpo-trait 1s ease both;
	animation-delay: calc(var(--lpo-latence) + var(--lpo-i, 0) * var(--lpo-pas) + 80ms);
}
.lpo-apparition > .wp-block-group:nth-child(1) { --lpo-i: 0; }
.lpo-apparition > .wp-block-group:nth-child(2) { --lpo-i: 1; }
.lpo-apparition > .wp-block-group:nth-child(3) { --lpo-i: 2; }
.lpo-apparition > .wp-block-group:nth-child(4) { --lpo-i: 3; }
.lpo-apparition > .wp-block-group:nth-child(5) { --lpo-i: 4; }
.lpo-apparition > .wp-block-group:nth-child(6) { --lpo-i: 5; }
.lpo-apparition > .wp-block-group:nth-child(7) { --lpo-i: 6; }
.lpo-apparition > .wp-block-group:nth-child(8) { --lpo-i: 7; }

@keyframes lpo-apparait {
	from { opacity: 0; translate: 0 14px; }
	to   { opacity: 1; translate: 0 0; }
}
@keyframes lpo-glisse {
	from { opacity: 0; translate: -8px 0; }
	to   { opacity: 1; translate: 0 0; }
}
@keyframes lpo-trait {
	from { width: 0; }
	to   { width: 100%; }
}

/* === 4. Chiffres clés (`lpo-compteurs`) ====================================== */
.lpo-compteurs h3 {
	font-variant-numeric: tabular-nums;
}

/* === 5. Cartes actus (bloc Bannière dans une boucle de publications) ==========
   Essai demandé le 04/09 : même famille que les boutons — la carte se soulève,
   son ombre s'étire, l'image zoome doucement. S'applique partout où une boucle
   (home, archive des actus) rend ses publications en Bannière : `.wp-block-post >
   .wp-block-cover`. L'actu épinglée (Groupe, pas Bannière) n'est pas concernée. */
.wp-block-post-template .wp-block-post > .wp-block-cover {
	overflow: hidden; /* le zoom de l'image reste dans les coins arrondis */
	transition:
		transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 0.3s ease;
}
.wp-block-post-template .wp-block-post > .wp-block-cover > .wp-block-cover__image-background {
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* `!important` : le preset d'ombre du bloc (`shadow: 2-xl`) est un style INLINE. */
.wp-block-post-template .wp-block-post:hover > .wp-block-cover,
.wp-block-post-template .wp-block-post:focus-within > .wp-block-cover {
	transform: translateY(-4px);
	box-shadow: 0 22px 36px -16px rgba(25, 25, 25, 0.5) !important;
}
.wp-block-post-template .wp-block-post:hover > .wp-block-cover > .wp-block-cover__image-background,
.wp-block-post-template .wp-block-post:focus-within > .wp-block-cover > .wp-block-cover__image-background {
	transform: scale(1.04);
}

/* Lien couvrant posé par effets.js (`.lpo-carte-lien`) : toute la carte mène à
   l'article, le titre reste le lien accessible (l'overlay est aria-hidden). Il se
   glisse entre l'image (z 0) et le contenu (z 1, plus tard dans le DOM). */
.wp-block-post-template .wp-block-post > .wp-block-cover > .lpo-carte-lien,
.lpo-mois-tuiles > .wp-block-cover > .lpo-carte-lien {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* === 6. Cartes de la home (`lpo-cartes` sur une grille : « Au cœur de l'asso »,
   cartes du hero) ==================================================================
   Chaque enfant direct de la grille est une carte. Au survol : soulèvement + ombre ;
   si la carte contient une Image (Au cœur), elle zoome dans son cadre. `overflow:hidden`
   sur la carte (coins) ET sur la figure (l'image agrandie ne doit pas déborder sur
   le texte). */
.lpo-cartes > .wp-block-group {
	overflow: hidden;
	transition:
		transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 0.3s ease;
}
.lpo-cartes > .wp-block-group .wp-block-image {
	overflow: hidden;
}
.lpo-cartes > .wp-block-group .wp-block-image img {
	display: block;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* `!important` : le preset d'ombre (`shadow: md`) est un style inline. */
.lpo-cartes > .wp-block-group:hover,
.lpo-cartes > .wp-block-group:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 22px 36px -16px rgba(25, 25, 25, 0.35) !important;
}
.lpo-cartes > .wp-block-group:hover .wp-block-image img,
.lpo-cartes > .wp-block-group:focus-within .wp-block-image img {
	transform: scale(1.05);
}

/* === Réduire les animations ================================================= */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.lpo-fleche,
	.wp-block-post-template .wp-block-post > .wp-block-cover,
	.wp-block-post-template .wp-block-post > .wp-block-cover > .wp-block-cover__image-background,
	.lpo-cartes > .wp-block-group,
	.lpo-cartes > .wp-block-group .wp-block-image img,
	.lpo-megamenu .lpo-megamenu__cta .wp-block-button__link,
	.lpo-apparition > .wp-block-group {
		transition: none;
	}
	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible,
	.lpo-apparition > .wp-block-group:hover,
	.wp-block-post-template .wp-block-post:hover > .wp-block-cover,
	.wp-block-post-template .wp-block-post:hover > .wp-block-cover > .wp-block-cover__image-background,
	.lpo-cartes > .wp-block-group:hover,
	.lpo-cartes > .wp-block-group:hover .wp-block-image img {
		transform: none;
	}
	.wp-block-button__link::after { display: none; }
	.lpo-apparition--prete > .wp-block-group,
	.lpo-apparition--prete > .wp-block-group > p:first-child { opacity: 1; }
	.lpo-apparition--vue > .wp-block-group,
	.lpo-apparition--vue > .wp-block-group > p:first-child,
	.lpo-apparition--vue > .wp-block-group::before { animation: none; }
	.lpo-apparition > .wp-block-group::before { width: 100%; }
}