/* =============================================================================
 * Tokens + base a11y — Composants Ipedis (ipd-components)
 * Aliasés sur la palette Kadence (--global-palette*) avec repli en dur.
 * Chargé CONDITIONNELLEMENT (uniquement si un composant ipdc est présent).
 * Réf. valeurs : open-site/docs/content-suite/design-tokens.md.
 * ========================================================================== */
:root {
	/* Valeurs figées sur la maquette : la palette Kadence de ce site place le jaune en
	 * palette1/2 et le navy en palette3/4 — mapper « navy » sur palette1 le rendait JAUNE
	 * (focus, boutons, citations…). On fige donc navy/jaune aux valeurs de la référence design. */
	--ipdc-navy:      #04162F;
	--ipdc-yellow:    #FFCC02;
	--ipdc-purple:    #DFC8FF;
	--ipdc-blue:      #B9E9FF;
	--ipdc-cream:     #FFFDED;
	--ipdc-beige:     #F5F1D8;
	--ipdc-white:     #FFFDED;

	--ipdc-radius-sm: 4px;
	--ipdc-radius-md: 8px;
	--ipdc-radius-lg: 16px;

	--ipdc-tap-min:   44px; /* cible tactile minimale — WCAG 2.5.8 */
}

/* Texte réservé aux lecteurs d'écran. */
.ipdc-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Respect de la préférence « animations réduites » — WCAG 2.3.3 / 2.2.2. */
@media (prefers-reduced-motion: reduce) {
	.ipdc-anim,
	.ipdc-anim * {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* =============================================================================
 * Pré-affichage des grilles filtrables (remplace l'ancienne balise <style> injectée
 * dans le corps de page — AUCUN CSS ne doit être écrit dans le HTML).
 * Le serveur pose `ipdc-prerender` + `data-ipdc-first="N"` sur la grille : seules les N
 * premières cartes sont visibles AVANT l'exécution du JS (aucun flash « tout visible →
 * repli »). Le JS retire la classe dès qu'il a posé sa propre visibilité.
 * ========================================================================== */
.ipdc-prerender[data-ipdc-first="3"]  > :nth-child(n+4),
.ipdc-prerender[data-ipdc-first="4"]  > :nth-child(n+5),
.ipdc-prerender[data-ipdc-first="5"]  > :nth-child(n+6),
.ipdc-prerender[data-ipdc-first="6"]  > :nth-child(n+7),
.ipdc-prerender[data-ipdc-first="7"]  > :nth-child(n+8),
.ipdc-prerender[data-ipdc-first="8"]  > :nth-child(n+9),
.ipdc-prerender[data-ipdc-first="9"]  > :nth-child(n+10),
.ipdc-prerender[data-ipdc-first="10"] > :nth-child(n+11),
.ipdc-prerender[data-ipdc-first="11"] > :nth-child(n+12),
.ipdc-prerender[data-ipdc-first="12"] > :nth-child(n+13),
.ipdc-prerender[data-ipdc-first="15"] > :nth-child(n+16),
.ipdc-prerender[data-ipdc-first="16"] > :nth-child(n+17),
.ipdc-prerender[data-ipdc-first="18"] > :nth-child(n+19),
.ipdc-prerender[data-ipdc-first="20"] > :nth-child(n+21),
.ipdc-prerender[data-ipdc-first="24"] > :nth-child(n+25) {
	display: none;
}

/* Masquage piloté par les composants (filtre, reveal…) : une CLASSE, jamais un style
 * inline — inspectable, surchargeable (impression, media queries) et cohérente entre
 * composants. `!important` car elle doit primer sur un display:flex/grid d'habillage. */
.ipdc-is-hidden {
	display: none !important;
}

/* Intégration dans une colonne Kadence — le composant n'est jamais réduit à sa
 * largeur minimale.
 *
 * Une colonne Kadence réglée sur un alignement horizontal du contenu génère
 * `align-items: flex-start|center|flex-end` sur `.kt-inside-inner-col` (flex column).
 * L'enfant n'est alors plus étiré : il prend sa largeur MINIMALE intrinsèque, celle
 * qu'impose son contenu. Un carrousel ou une liste filtrée dépasse vite la largeur
 * disponible → il déborde à droite et son contenu sort du champ (constaté sous
 * ~700 px de fenêtre). `align-self: stretch` rétablit l'étirement pour le seul
 * composant, sans toucher aux autres éléments de la colonne.
 *
 * `width` reste volontairement à `auto` : une largeur explicite figerait la boîte et
 * annulerait toute marge négative — c'est ce qui neutralisait la disposition
 * « collé au bord droit de l'écran » (`.ipdc-slider--bleed-right`, marge droite
 * négative en ≥1024px). Avec `stretch` + `width:auto`, la marge négative élargit bien
 * la boîte : les deux comportements coexistent. Ne pas y ajouter de `width`. */
.kt-inside-inner-col > .ipdc-slider,
.kt-inside-inner-col > .ipdc-filter {
	align-self: stretch;
}
