/* =============================================================================
 * Révélation progressive (« Voir plus ») — Composants Ipedis
 * Feuille AUTONOME : ne dépend ni de blog.css ni de formation.css (ce composant peut
 * être posé sur n'importe quelle page). Chargée uniquement si un conteneur marqué est
 * présent. Dépend de tokens.css pour la palette.
 * ========================================================================== */

/* 1. Pré-affichage (anti-flash) : les items au-delà du 6e sont masqués AVANT l'exécution du JS
 *    (évite le flash « tout visible → repli »). CHAQUE règle est conditionnée par
 *    `:not([data-ipdc-reveal-init])` : le JS pose cet attribut sur le conteneur dès son
 *    initialisation, ce qui DÉSACTIVE automatiquement le pré-affichage — la visibilité est
 *    ensuite pilotée uniquement par `ipdc-reveal__hidden`. Ce garde-fou est indispensable, car
 *    le conteneur peut être identifié par l'id/la classe du site, que le composant ne doit pas
 *    modifier (sans lui, les items resteraient masqués et infocusables après révélation).
 *    Sélecteurs volontairement explicites : conteneur direct + enveloppe de colonnes Kadence
 *    (jamais de sélecteur de descendant générique, qui masquerait du contenu dans les cartes). */
.ipdc-reveal:not([data-ipdc-reveal-init]) > :nth-child(n + 7),
.ipdc-reveal:not([data-ipdc-reveal-init]) > .kt-row-column-wrap > :nth-child(n + 7),
.ipd-trainer-list:not([data-ipdc-reveal-init]) > :nth-child(n + 7),
.ipd-trainer-list:not([data-ipdc-reveal-init]) > .kt-row-column-wrap > :nth-child(n + 7),
#ipd-trainer:not([data-ipdc-reveal-init]) > :nth-child(n + 7),
#ipd-trainer:not([data-ipdc-reveal-init]) > .kt-row-column-wrap > :nth-child(n + 7) {
	display: none;
}
/* Variantes de seuil (classes `ipdc-reveal--first-N`) pour d'autres sections. */
.ipdc-reveal--first-3:not([data-ipdc-reveal-init]) > :nth-child(n + 4),
.ipdc-reveal--first-3:not([data-ipdc-reveal-init]) > .kt-row-column-wrap > :nth-child(n + 4) { display: none; }
.ipdc-reveal--first-4:not([data-ipdc-reveal-init]) > :nth-child(n + 5),
.ipdc-reveal--first-4:not([data-ipdc-reveal-init]) > .kt-row-column-wrap > :nth-child(n + 5) { display: none; }
.ipdc-reveal--first-8:not([data-ipdc-reveal-init]) > :nth-child(n + 9),
.ipdc-reveal--first-8:not([data-ipdc-reveal-init]) > .kt-row-column-wrap > :nth-child(n + 9) { display: none; }
.ipdc-reveal--first-9:not([data-ipdc-reveal-init]) > :nth-child(n + 10),
.ipdc-reveal--first-9:not([data-ipdc-reveal-init]) > .kt-row-column-wrap > :nth-child(n + 10) { display: none; }
.ipdc-reveal--first-12:not([data-ipdc-reveal-init]) > :nth-child(n + 13),
.ipdc-reveal--first-12:not([data-ipdc-reveal-init]) > .kt-row-column-wrap > :nth-child(n + 13) { display: none; }

/* 2. Visibilité pilotée par le JS (aucun style inline). */
.ipdc-reveal__hidden {
	display: none !important;
}

/* 3. Apparition douce des items révélés (neutralisée en mouvement réduit). */
@keyframes ipdc-reveal-enter {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
.ipdc-reveal__enter {
	animation: ipdc-reveal-enter 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
	animation-delay: var(--ipdc-enter-delay, 0ms);
}

/* 4. Bouton « Voir plus » : même langage visuel que « Afficher plus » du catalogue
 *    (pastille navy, texte crème en capitales, icône encadrée qui pivote au survol). */
.ipdc-reveal-more {
	display: flex;
	justify-content: center;
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.ipdc-reveal-more[hidden] {
	display: none;
}
.ipdc-reveal-more__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	/* Cible tactile ≥ 44 px (exigence d'accessibilité du projet, WCAG 2.5.8 largement dépassé). */
	min-height: 44px;
	padding: 8px 14px 8px 8px;
	border: 2px solid var(--ipdc-navy, #04162f);
	border-radius: 8px;
	background: var(--ipdc-navy, #04162f);
	color: var(--ipdc-cream, #fffded);
	font-family: inherit;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.ipdc-reveal-more__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px;
	border-radius: 4px;
	background: var(--ipdc-cream, #fffded);
	color: var(--ipdc-navy, #04162f);
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.ipdc-reveal-more__ico svg {
	display: block;
	width: 1em;
	height: 1em;
}
.ipdc-reveal-more__btn:hover,
.ipdc-reveal-more__btn:focus-visible {
	background: var(--ipdc-cream, #fffded);
	color: var(--ipdc-navy, #04162f);
}
.ipdc-reveal-more__btn:hover .ipdc-reveal-more__ico,
.ipdc-reveal-more__btn:focus-visible .ipdc-reveal-more__ico {
	background: var(--ipdc-navy, #04162f);
	color: var(--ipdc-cream, #fffded);
	transform: rotate(45deg);
}
.ipdc-reveal-more__btn:focus-visible {
	outline: 3px solid var(--ipdc-navy, #04162f);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.ipdc-reveal__enter { animation: none; }
	.ipdc-reveal-more__btn,
	.ipdc-reveal-more__ico { transition: none !important; }
	.ipdc-reveal-more__btn:hover .ipdc-reveal-more__ico,
	.ipdc-reveal-more__btn:focus-visible .ipdc-reveal-more__ico { transform: none; }
}