/* =============================================================================
   DÉPLIANTS — base partagée (Formations adultes, Entreprises, FAQ).

   <details name="…"> natif : ouverture au clavier et au clic, état annoncé
   par les lecteurs d'écran, un seul ouvert à la fois (attribut `name`), et
   recherche du navigateur (Ctrl+F) qui ouvre le bon panneau. Zéro script.

   Animation d'ouverture : `::details-content` + `interpolate-size`. Les
   navigateurs qui ne les connaissent pas ouvrent sans animation — rien ne
   casse.
   ============================================================================= */

:root {
	interpolate-size: allow-keywords;
}

.cci-depliant__item > summary {
	list-style: none;
	cursor: pointer;
}

.cci-depliant__item > summary::-webkit-details-marker {
	display: none;
}

.cci-depliant__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.6s var(--ease-out), content-visibility 0.6s allow-discrete;
}

.cci-depliant__item[open]::details-content {
	block-size: auto;
}

/* Signe plus / moins : deux pictos superposés, l'un tourne pendant que
   l'autre apparaît. */
.cci-depliant__signe {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--blanc);
	color: var(--rouge);
	flex: none;
	transition: background-color 0.25s ease, transform 0.5s var(--ease-out);
}

.cci-depliant__signe .icon {
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	transition: transform 0.5s var(--ease-out), opacity 0.3s ease;
}

.cci-depliant__signe .icon + .icon,
[open] > summary .cci-depliant__signe .icon:first-child {
	opacity: 0;
	transform: rotate(-90deg);
}

[open] > summary .cci-depliant__signe .icon + .icon {
	opacity: 1;
	transform: none;
}

.cci-depliant__item > summary:hover .cci-depliant__signe {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.cci-depliant__item::details-content {
		transition: none;
	}
}