/*
Habillage du bloc Accordéon (core/accordion).

Le markup vient de WordPress et n'est pas touché : tout se joue sur les classes
qu'il pose déjà, dont .is-open que l'API Interactivity bascule sur l'élément.

Les effets sont des bonus : sans JavaScript, sans :has() ou sans @starting-style,
l'accordéon reste parfaitement lisible et utilisable.
*/

.wp-block-accordion {
	--accordion-rayon: 14px;
	--accordion-accent: var(--wp--preset--color--lime, #d6ee18);
	--accordion-ombre: 0 1px 2px rgb(32 36 43 / 0.06), 0 8px 24px rgb(32 36 43 / 0.08);
	--accordion-ombre-ouvert: 0 2px 4px rgb(124 50 137 / 0.12),
		0 18px 40px rgb(124 50 137 / 0.22);
}

/* ------------------------------------------------------------- Les cartes */

.wp-block-accordion-item {
	position: relative;
	border-radius: var(--accordion-rayon);
	overflow: clip;
	/* Pas de fond ici : l'en-tête a le sien et le panneau prend le blanc à
	   l'ouverture. Un fond sur la carte se verrait dans son propre padding,
	   sous le bandeau, comme un liseré blanc. */
	box-shadow: var(--accordion-ombre);
	transition:
		box-shadow 0.35s ease,
		translate 0.35s ease;
}

.wp-block-accordion-item:hover {
	translate: 0 -2px;
	box-shadow: var(--accordion-ombre-ouvert);
}

.wp-block-accordion-item.is-open {
	box-shadow: var(--accordion-ombre-ouvert);
}

/* ------------------------------------------------------------- L'en-tête */

.wp-block-accordion-heading {
	margin: 0;
}

/* Le bloc core pose overflow:hidden sur le bouton, ce qui rogne la pastille dès
   qu'elle grossit. Le halo n'a pas besoin de ce clip : il est posé en inset:0,
   et la carte se charge déjà de couper aux coins arrondis. */
.wp-block-accordion-heading .wp-block-accordion-heading__toggle {
	position: relative;
	width: 100%;
	border: 0;
	cursor: pointer;
	overflow: visible;
	transition: letter-spacing 0.35s ease;
}

/* Halo qui suit le curseur. Les coordonnées viennent de assets/js/accordion.js ;
   sans lui, le halo reste centré et l'effet se contente d'apparaître. */
.wp-block-accordion-heading__toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		18rem circle at var(--accordion-x, 50%) var(--accordion-y, 50%),
		rgb(255 255 255 / 0.18),
		transparent 45%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.wp-block-accordion-heading__toggle:hover::after,
.wp-block-accordion-heading__toggle:focus-visible::after {
	opacity: 1;
}

.wp-block-accordion-heading__toggle:focus-visible {
	outline: 3px solid var(--accordion-accent);
	outline-offset: -3px;
}

.wp-block-accordion-heading__toggle-title {
	position: relative;
	transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Le bloc core souligne le titre au survol : le décalage et le halo suffisent,
   la sélection porte sur .wp-block-accordion-heading pour passer devant lui. */
.wp-block-accordion-heading .wp-block-accordion-heading__toggle:hover
	.wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading .wp-block-accordion-heading__toggle:focus
	.wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading .wp-block-accordion-heading__toggle:focus-visible
	.wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	translate: 6px 0;
}

/* ------------------------------------------------------------- L'icône

   Le « + » de WordPress devient une croix par simple rotation, posée dans une
   pastille qui s'allume à l'ouverture. */

.wp-block-accordion-heading__toggle-icon {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 auto;
	border-radius: 50%;
	background-color: rgb(255 255 255 / 0.14);
	font-size: 1.1em;
	line-height: 1;
	transition:
		rotate 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.3s ease,
		color 0.3s ease;
}

/* Pas de grossissement au survol : selon le padding réglé sur le bouton, la
   pastille peut toucher le bord de la carte, qui la rognerait. Le changement
   de fond suffit à marquer le survol. */
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon {
	background-color: rgb(255 255 255 / 0.26);
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
	rotate: 135deg;
	background-color: var(--accordion-accent);
	color: var(--wp--preset--color--aubergine, #3e2043);
}

/* ------------------------------------------------------------- Le panneau */

/* Fermé, le panneau garde sa boîte : hidden="until-found" masque son contenu
   sans le sortir du flux. Tout ce qui occupe de la place ne vaut donc que
   panneau ouvert, sans quoi une bande blanche reste sous chaque carte.
   :where() garde une spécificité nulle : un padding réglé dans l'éditeur
   l'emporte toujours sur ce repli. */
:where(.wp-block-accordion-item.is-open .wp-block-accordion-panel) {
	padding-inline: var(--wp--preset--spacing--40, 1.5rem);
	padding-block: var(--wp--preset--spacing--20, 0.5rem)
		var(--wp--preset--spacing--40, 1.5rem);
}

.wp-block-accordion-item.is-open .wp-block-accordion-panel {
	background-color: var(--wp--preset--color--snow, #fff);
}

/* L'ouverture est gérée par WordPress (attribut hidden) : on accompagne
   l'apparition du contenu, ce qui suffit à donner le mouvement.
   @starting-style est ignoré par les navigateurs qui ne le connaissent pas. */
.wp-block-accordion-item.is-open .wp-block-accordion-panel > * {
	animation: accordion-apparition 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Chaque élément entre légèrement après le précédent. */
.wp-block-accordion-item.is-open .wp-block-accordion-panel > :nth-child(2) {
	animation-delay: 0.06s;
}

.wp-block-accordion-item.is-open .wp-block-accordion-panel > :nth-child(3) {
	animation-delay: 0.12s;
}

.wp-block-accordion-item.is-open .wp-block-accordion-panel > :nth-child(n + 4) {
	animation-delay: 0.18s;
}

@keyframes accordion-apparition {
	from {
		opacity: 0;
		translate: 0 -8px;
	}
}

/* --------------------------------------------- Entrée en cascade au défilement

   La classe est posée par assets/js/accordion.js. Sans elle, rien ne bouge. */

.wp-block-accordion-item.sixclicks-accordion--entre {
	animation: accordion-entree 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
	animation-delay: var(--accordion-retard, 0s);
}

@keyframes accordion-entree {
	from {
		opacity: 0;
		translate: 0 18px;
		scale: 0.98;
	}
}

/* ------------------------------------------------------------- Sobriété */

@media (prefers-reduced-motion: reduce) {
	.wp-block-accordion-item,
	.wp-block-accordion-heading__toggle-title,
	.wp-block-accordion-heading__toggle-icon {
		transition: none;
	}

	.wp-block-accordion-item.sixclicks-accordion--entre,
	.wp-block-accordion-item.is-open .wp-block-accordion-panel > * {
		animation: none;
	}

	.wp-block-accordion-item:hover {
		translate: none;
	}
}