/*!
 * Module FORMATIONS — feuille de styles DÉDIÉE et INDÉPENDANTE.
 *
 * IMPORTANT : ce fichier est volontairement SÉPARÉ de blog.css. Il ne doit
 * jamais styler d'élément du blog ou des actualités, et ne dépend d'aucune
 * règle de blog.css (il redéclare ses propres variables). Chargé uniquement
 * sur les pages Formations (catalogue + détail) via inc/formation.php.
 *
 * Portée :
 *   1. Filtre déroulant (modèle « select ») + bouton « Afficher plus »
 *   2. Cartes catalogue (.ipf-catalog-card) — entièrement autonomes
 *   3. Page détail (hero, fil d'ariane, layout 2 colonnes, carte latérale)
 *
 * Couleurs = palette globale Kadence (fallbacks en dur). Icônes catalogue =
 * vraies icônes de la médiathèque (assets/icons/formation/*.svg) via CSS mask
 * (recolorables, légères, aucune duplication par carte).
 * ========================================================================== */

:root {
	--ipedis-navy: #04162f;
	--ipedis-yellow: #ffcc02;
	--ipedis-blue: #b9e9ff;
	--ipedis-cream: #fffded;
	--ipedis-beige: #f5f1d8;
	--ipf-badge-alt: #E6D4FF;
	--ipf-filter-pill: #cfe9fb;
	--ipf-container: var(--global-content-width, 1290px);
}

/* =============================================================================
 * 1. Filtre déroulant (modèle « select ») — pastille bleu clair + select blanc.
 *    Scopé à .ipedis-filter--select : n'affecte JAMAIS le filtre à onglets du
 *    blog/actualités (.ipedis-filter__list / .ipedis-filter__tab).
 * ========================================================================== */
.ipedis-filter--select .ipedis-filter__fields { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0 0 32px; }
.ipedis-filter--select .ipedis-filter__prefix { font-weight: 700; color: var(--ipedis-navy); text-transform: uppercase; letter-spacing: 0.5px; font-size: 16px; margin-right: 4px; }
.ipedis-filter--select .ipedis-filter__field { display: inline-flex; align-items: center; gap: 12px; background: #E6D4FF; border-radius: 12px; padding: 6px 6px 6px 16px; }
.ipedis-filter--select .ipedis-filter__field label { font-weight: 700; color: var(--ipedis-navy); font-size: 16px; }
/* Select BLANC + chevron « CaretDown » navy. Cible tactile 44px, focus visible (AA). */
.ipedis-filter--select .ipedis-filter__field select {
	appearance: none; -webkit-appearance: none;
	border: none;
	background-color: var(--ipedis-cream); color: var(--ipedis-navy);
		font: inherit; font-weight: 700; font-size: 16px; min-height: 40px;
	border-radius: 10px; padding: 0 40px 0 14px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2304162f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
	max-width: 220px;
}
.ipedis-filter--select .ipedis-filter__field select:focus-visible { outline: 3px solid var(--ipedis-navy); outline-offset: 2px; }

/* Bouton « Afficher plus » : AUCUN style ici — le composant partagé
 * `.ipedis-loadmore__btn` / `.ipedis-btn-ico` (blog.css via #976, chargé sur les pages
 * formation) fournit le même visuel + comportement que le blog. Ne pas redéfinir. */

@media (max-width: 600px) {
	.ipedis-filter--select .ipedis-filter__fields { flex-direction: column; align-items: stretch; }
	.ipedis-filter--select .ipedis-filter__field { width: 100%; box-sizing: border-box; }
	.ipedis-filter--select .ipedis-filter__field select { flex: 1 1 auto; min-width: 0; }
}

/* =============================================================================
 * 2. Cartes catalogue — 100% AUTONOMES (scopées .ipf-catalog-card). Aucune
 *    dépendance à blog.css : toutes les bases (layout, lien, focus) sont ici.
 * ========================================================================== */
/* Grille du catalogue (scopée .ipedis-filter--select → responsive autonome, aucun
 * impact sur .ipedis-cards-grid du blog qui est en modèle « tab »). */
.ipedis-filter--select .ipedis-cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none; margin: 0; padding: 0; }
.ipedis-filter--select .ipedis-cards-empty { grid-column: 1 / -1; text-align: center; color: var(--ipedis-navy); padding: 2rem; }
@media (max-width: 1024px) { .ipedis-filter--select .ipedis-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ipedis-filter--select .ipedis-cards-grid { grid-template-columns: 1fr; } }

.ipf-catalog-card { position: relative; display: flex; flex-direction: column; background: var(--ipedis-beige); border-radius: 16px; overflow: hidden; }
.ipf-catalog-card .ipedis-card__body { display: flex; flex-direction: column; gap: 16px; padding: 24px; height: 100%; }

/* Badges : 1er = jaune (catégorie principale), suivant(s) = lavande. */
.ipf-catalog-card .ipedis-card__pills--inline { position: static; margin: 0; }
.ipf-catalog-card .ipedis-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.ipf-catalog-card .ipedis-pills li { margin: 0; }
.ipf-catalog-card .ipedis-pill { display: inline-block; padding: 6px 12px; border-radius: 6px; font-size: .8rem; font-weight: 700; line-height: 1.2; color: var(--ipedis-navy); text-decoration: none; white-space: nowrap; }
.ipf-catalog-card .ipedis-pills > li:first-child .ipedis-pill { background: var(--ipedis-yellow); }
.ipf-catalog-card .ipedis-pills > li:nth-child(n+2) .ipedis-pill { background: var(--ipf-badge-alt); }

.ipf-catalog-card .ipedis-card__title { margin: 0; color: var(--ipedis-navy); font-size: 1.5rem; line-height: 1.2; font-weight: 800; }
.ipf-catalog-card .ipedis-card__excerpt { margin: 0; color: var(--ipedis-navy); opacity: .9; line-height: 1.5; font-size: 16px; font-weight: 500; }

/* Méta : vraie icône (mask, recolorable navy) + libellé + valeur.
 * Durée = libellé+valeur en ligne ; Format/Public cible = valeur empilée. */
.ipf-catalog-card .ipedis-card__meta { margin: auto 0 0; display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(4, 22, 47, .18); padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(4, 22, 47, .18); font-size: 16px; }
.ipf-catalog-card .ipedis-card__metarow { display: grid; grid-template-columns: 24px 1fr; column-gap: 14px; row-gap: 2px; margin: 0; align-items: start; }
.ipf-catalog-card .ipedis-card__metaico {
	grid-column: 1; grid-row: 1 / span 2; width: 24px; height: 24px; flex: none;
	background-color: var(--ipedis-navy);
	-webkit-mask: no-repeat center / contain; mask: no-repeat center / contain;
}
.ipf-catalog-card .ipedis-card__metaico--duration { -webkit-mask-image: url(../icons/formation/time.svg); mask-image: url(../icons/formation/time.svg); }
.ipf-catalog-card .ipedis-card__metaico--format { -webkit-mask-image: url(../icons/formation/format.svg); mask-image: url(../icons/formation/format.svg); }
.ipf-catalog-card .ipedis-card__metaico--cible { -webkit-mask-image: url(../icons/formation/cible.svg); mask-image: url(../icons/formation/cible.svg); }
.ipf-catalog-card .ipedis-card__metarow dt { grid-column: 2; grid-row: 1; font-weight: 800; color: var(--ipedis-navy); }
.ipf-catalog-card .ipedis-card__metarow dd { grid-column: 2; grid-row: 2; margin: 0; color: var(--ipedis-navy); opacity: 1; font-weight: 500; line-height: 1.4; }
.ipf-catalog-card .ipedis-card__metarow--inline { grid-template-columns: 24px auto 1fr; align-items: start; }
.ipf-catalog-card .ipedis-card__metarow--inline .ipedis-card__metaico { grid-row: 1; }
.ipf-catalog-card .ipedis-card__metarow--inline dt { grid-column: 2; grid-row: 1; }
.ipf-catalog-card .ipedis-card__metarow--inline dd { grid-column: 3; grid-row: 1; }
dl.ipedis-card__meta dd, dl.ipf-card__list dd {
  word-break: keep-all;
}

/* -----------------------------------------------------------------------------
 * CARTE ENTIÈREMENT CLIQUABLE — motif déjà validé sur le projet (composant
 * `ipdc-card` de `ipd-components/assets/cards.css` et listing blog).
 *
 * ATTENTION : ces règles DOIVENT vivre ici. `blog.css` / la ressource #3071 ne
 * sont PAS chargés sur `/nos-formations/` (ciblage #3071 = home + single +
 * post_type actualite ; le catalogue est une page classique). Sans ce bloc, la
 * carte n'a AUCUNE zone cliquable hors du bouton (constaté : 178×32 px cliquables
 * sur une carte de 412×521 px) et AUCUN anneau de focus.
 *
 * Principe : UN SEUL lien par carte (le bouton CTA) ; son `::after` est étiré sur
 * toute la carte. Le bouton reste en position statique → son `::after` prend pour
 * bloc conteneur `.ipf-catalog-card` (position:relative) et n'est donc PAS rogné
 * par l'`overflow:hidden` du bouton (l'overflow ne rogne pas un élément absolu
 * dont le bloc conteneur est un ancêtre situé au-dessus).
 * -------------------------------------------------------------------------- */
.ipf-catalog-card .ipedis-card__cta::after {
	content: "";
	position: absolute;
	inset: 0;
}
/* Anneau de focus dessiné autour de la CARTE, au clavier UNIQUEMENT (`:has(:focus-visible)`
 * → aucun anneau au clic souris). Offset positif : la gouttière de la grille fait 40 px,
 * l'anneau n'est jamais rogné et se détache du fond crème de la page (navy #04162f sur
 * crème var(--ipedis-cream) ≈ 17:1, très au-delà des 3:1 exigés par WCAG 2.2 § 1.4.11 / 2.4.11).
 * `z-index` : la carte focalisée passe au-dessus de ses voisines. */
.ipf-catalog-card:has(:focus-visible) {
	outline: 3px solid var(--ipedis-navy);
	outline-offset: 2px;
	z-index: 2;
}
/* Le bouton, lui, ne montre JAMAIS son propre anneau : il est `overflow:hidden`,
 * l'anneau y serait rogné et traverserait le texte (constats d'audit 2.4.7).
 *
 * `!important` OBLIGATOIRE ici, et `:focus` autant que `:focus-visible` :
 * `global-head.css` (ressource globale, hors périmètre formation) impose
 * `a:focus, button:focus, … { outline: #04162f solid 3px !important }`. Sans
 * `!important`, l'anneau du bouton se superposait à celui de la carte (constaté :
 * `outline-style: solid 3px` sur le lien malgré `outline: none`). La spécificité
 * de ce sélecteur (0,3,0) l'emporte sur `a:focus` (0,1,1), les deux étant
 * `!important`. Ne PAS retirer ces `!important` sans avoir vérifié que la règle
 * globale a disparu. */
.ipf-catalog-card .ipedis-card__cta:focus,
.ipf-catalog-card .ipedis-card__cta:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
/* Repli pour les moteurs sans `:has()` (aucun navigateur supporté aujourd'hui, mais
 * la suppression ci-dessus ne doit JAMAIS pouvoir laisser un focus invisible) :
 * l'anneau repasse sur le bouton, avec `outline-offset` pour ne pas traverser le texte. */
@supports not selector(:has(*)) {
	.ipf-catalog-card .ipedis-card__cta:focus-visible {
		outline: 3px solid var(--ipedis-navy) !important;
		outline-offset: 3px;
	}
}
/* Le curseur « lien » couvre déjà toute la carte : le `::after` est un pseudo-élément
 * du lien et hérite donc de son `cursor: pointer` (déclaré plus bas). Rien à ajouter. */

/* =============================================================================
 * 3. Page DÉTAIL formation (classes `ipf-*`). Copie de la page de référence.
 * ========================================================================== */
/* Hero */
.ipf-hero { background: var(--ipedis-cream); padding-top: 150px; padding-bottom: 120px; }
.ipf-hero__inner { max-width: var(--ipf-container); margin-inline: auto; padding: 0 30px; width: 100%; box-sizing: border-box; }
.ipf-hero__text--center { text-align: center; max-width: 100%; margin: 0 auto; }
/* Fil d'ariane (scopé au hero formation → séparateurs explicites .kal-crumb-sep).
 * Placé APRÈS le titre + le chapô, comme sur la page de référence.
 * Taille 15.2px = valeur relevée sur la référence (getComputedStyle). */
.ipf-hero .ipedis-breadcrumb { margin-top: clamp(2rem, 7vw, 3.75rem); text-align: start; overflow: visible; }
.ipf-hero .ipedis-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; font-size: 15.2px; color: var(--ipedis-navy); overflow: visible; }
.ipf-hero .ipedis-breadcrumb li { display: flex; align-items: center; gap: .5rem; overflow: visible; }
/* AUDIT 2.4.7 (« l'indicateur de focus du lien du fil d'Ariane n'englobe pas tout le
 * lien, le contour est rogné ») : le lien passe en `display:block` (valeur de la page
 * de référence) → sa boîte englobe tout l'intitulé, l'anneau ne peut plus être rogné
 * ni fragmenté sur deux lignes. Aucun ancêtre ne pose d'`overflow` (vérifié).      */
/* `padding-block` + `margin-block` opposés : la CIBLE du lien passe de 24 à 44px de
 * haut (règle projet « cibles tactiles ≥ 44px », au-delà des 24px exigés par WCAG
 * 2.5.8) SANS déplacer un seul pixel à l'écran — la boîte extérieure reste à 24px. */
.ipf-hero .ipedis-breadcrumb a { display: block; color: var(--ipedis-navy); text-decoration: none; padding-block: 10px; margin-block: -10px; }
.ipf-hero .ipedis-breadcrumb a:hover { text-decoration: underline; }
/* AUDIT 2.4.7 (mineur) : `outline-offset` pour que l'anneau entoure le lien sans
 * traverser les caractères. 3px navy sur fond crème ≈ 17:1 (exigence : 3:1). */
.ipf-hero .ipedis-breadcrumb a:focus-visible { outline: 3px solid var(--ipedis-navy); outline-offset: 2px; border-radius: 2px; }
.ipf-hero .ipedis-breadcrumb [aria-current="page"] { font-weight: 700; }
.ipf-hero .kal-crumb-sep { opacity: .6; }
/* H1 + surbrillance en bloc bleu ciel légèrement incliné (réf.). */
.ipf-hero__title { color: var(--ipedis-navy); font-size: clamp(40px, 5vw, 64px); line-height: 1.5; font-weight: 400; margin: 0; }
.ipf-hero__title-lead { display: inline; }
/* Préfixe du H1 (« Formation », « E-learning ») : dans le flux par défaut (inline).
   Coché « Préfixe sur sa propre ligne » → le préfixe occupe sa ligne, la suite du titre
   passant à la ligne suivante. Piloté par une classe, jamais par un style en ligne. */
.ipf-hero__title-prefix { display: inline; }
.ipf-hero__title--prefix-block .ipf-hero__title-prefix { display: block; }
.ipf-hero__title .highlight { display: block; width: fit-content; margin: 15px auto 0; padding: 4px 12px 12px; border-radius: 8px; background: var(--ipedis-blue); color: var(--ipedis-navy); font-weight: 700; transform: rotate(358deg); }
.ipf-hero__chapo { font-weight: 700; color: var(--ipedis-navy); max-width: 870px; margin: 1.75em auto 0; font-size: 18px; line-height: 1.65; }

/* Layout 2 colonnes : contenu (784px) | carte latérale (536px) — AVANT le More.
 * Valeurs relevées sur la page de référence : grid 784.188px / 535.797px, gap 60px,
 * conteneur 1380px (784 + 60 + 536 = 1380). */
.ipf-layout { display: grid; grid-template-columns: minmax(0, calc(59% - ((60px * 1) / 2))) minmax(0, calc(41% - ((60px * 1) / 2))); gap: 60px; align-items: start; width: min(100% - 60px, 1380px); margin-inline: auto; box-sizing: border-box; }
.ipf-layout--nocol { grid-template-columns: 1fr; }
.ipf-layout__content { min-width: 0; }
/* AUDIT 1.4.10 « Redistribution » : la hauteur du bloc latéral NE DOIT PAS être figée
 * (l'ancienne `max-height: calc(100vh - 145px)` + `overflow-y: auto` créait une zone
 * défilante interne). La référence corrigée est en `max-height: none` / `overflow: visible`
 * → le conteneur s'adapte à la quantité de contenu, à tout niveau de zoom. */
.ipf-layout__aside { position: sticky; top: 125px; max-height: none; overflow: visible; }
.ipf-fullwidth { width: 100%; }

/* Carte latérale : cadre navy + intérieur crème (réf.). */
.ipf-card { background: var(--ipedis-navy); border-radius: 14px; padding: 16px 4px 4px; overflow: hidden; }
.ipf-card__inner { background: var(--ipedis-cream); border-radius: 14px; padding: 32px; color: var(--ipedis-navy); font-size: 18px; line-height: 1.6; }
.ipf-card__block + .ipf-card__block { margin-top: 24px; border-top: 1px solid rgba(4, 22, 47, .3); padding-top: 24px; }
/* Titre du bloc : 24px / line-height 24px / 700, marge 0 (valeurs de la référence).
 * La respiration sous le titre est portée par la note (`.ipf-card__note`) quand elle
 * existe, sinon par `.ipf-card__list` (voir ci-dessous). */
.ipf-card__title { font-size: 24px; line-height: 24px; font-weight: 700; margin: 0; color: var(--ipedis-navy); }
/* Note sous le titre — « Aussi disponible en INTRA » sur la référence (18px / 400). */
.ipf-card__note { font-size: 18px; font-weight: 400; margin: 0 0 10px; color: var(--ipedis-navy); }
.ipf-card__title + .ipf-card__list { margin-top: 10px; }
.ipf-card__list { margin: 0; }
.ipf-card__row { display: grid; grid-template-columns: 24px auto 1fr; align-items: start; column-gap: 20px; row-gap: 2px; margin: 0 0 14px; }
.ipf-card__ico { color: var(--ipedis-navy); display: inline-flex; align-items: center; justify-content: center; }
.ipf-card__ico svg { width: 24px; height: 24px; }
.ipf-card__label { font-weight: 700; color: var(--ipedis-navy); white-space: nowrap; }
.ipf-card__value { margin: 0; color: var(--ipedis-navy); }
/* Sous-titre « Prochaines sessions » — rendu par un vrai titre (h4) : `font-size` et
 * `line-height` PINNÉS pour que le visuel reste celui d'un paragraphe de la carte
 * (sinon la taille par défaut du h4 du thème s'applique et casse la maquette). */
.ipf-card__subtitle { font-size: 18px; line-height: 1.6; font-weight: 700; margin: 24px 0 0; color: var(--ipedis-navy); border-top: 1px solid rgba(4, 22, 47, .3); padding: 24px 0 10px; }
.ipf-card__sessions { margin: 0; padding-left: 36px; }
.ipf-card__sessions li { margin: 0; }

/* Texte réservé aux lecteurs d'écran (forme développée des abréviations, etc.).
 * Déclaré ICI : `formation.css` doit rester autonome (cf. invariant du module) et
 * ne jamais dépendre de `blog.css` / #3071, absents du catalogue. */
.ipf-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Barre d'actions : Estimer + boutons icônes (téléchargement/e-mail). */
.ipf-card__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; border-top: 1px solid rgba(4, 22, 47, .3); padding-top: 24px; }
.ipf-card__iconbtns { display: inline-flex; align-items: center; gap: 10px; }
.ipf-card__btn { display: inline-flex; align-items: center; gap: 7px; background: var(--ipedis-navy); color: var(--ipedis-cream); text-decoration: none; font-weight: 800; font-size: 14.4px; line-height: 1; text-transform: uppercase; min-height: 44px; padding: 4px 12px 4px 4px; border-radius: 4px; border: 1px solid transparent; box-sizing: border-box; }
.ipf-card__btnico { display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--ipedis-cream); color: var(--ipedis-navy); padding: 7px; border-radius: 4px; transition: transform .3s ease-in-out; }
.ipf-card__btnico svg { display: block; width: 14.4px; height: 14.4px; }
.ipf-card__btntext { display: inline-block; padding-block: 5px; }
.ipf-card__btn:hover, .ipf-card__btn:focus-visible { background: var(--ipedis-cream); color: var(--ipedis-navy); border-color: currentColor; }
.ipf-card__btn:hover .ipf-card__btnico, .ipf-card__btn:focus-visible .ipf-card__btnico { transform: rotate(45deg); }
.ipf-card__btn:focus-visible { outline: 3px solid var(--ipedis-navy); outline-offset: 2px; }
.ipf-card__iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; color: var(--ipedis-navy); text-decoration: none; }
.ipf-card__iconbtn svg { width: 24px; height: 24px; }
.ipf-card__iconbtn--yellow { background: var(--ipedis-yellow); }
.ipf-card__iconbtn--blue { background: var(--ipedis-blue); }
.ipf-card__iconbtn:hover, .ipf-card__iconbtn:focus-visible { background: var(--ipedis-navy); color: var(--ipedis-cream); }
.ipf-card__iconbtn:focus-visible { outline: 3px solid var(--ipedis-navy); outline-offset: 2px; }

@media (max-width: 1024px) {
	.ipf-layout { grid-template-columns: 1fr; width: min(100% - 60px, 1380px); }
	.ipf-layout__aside { position: static; max-height: none; overflow: visible; }
	/* La carte d'informations pratiques passe AU-DESSUS du contenu (parité staging). Ordre
	 * DOM inchangé (contenu puis aside) : la lecture et la tabulation restent logiques. */
	.ipf-layout__aside { order: -1; }
    .ipf-hero {padding-top: 100px; padding-bottom: 64px;}
}
/* AUDIT 1.4.10 « Redistribution / Mobile » : à 320px de large, plus aucun texte coupé
 * ni défilement horizontal. Les points de rupture : le titre du hero (mot long non
 * coupé), le libellé `nowrap` des lignes de la carte, et les gouttières du conteneur. */
@media (max-width: 480px) {
	.ipf-hero {padding-top: 100px; padding-bottom: 40px;}
	.ipf-hero__title { font-size: clamp(28px, 8vw, 40px); overflow-wrap: break-word; }
	.ipf-hero__title .highlight { max-width: 100%; overflow-wrap: break-word; }
	.ipf-hero__chapo { font-size: 16px; }
	.ipf-layout { width: min(100% - 60px, 1380px); }
	.ipf-card__inner { padding: 24px; }
	/* Libellé + valeur empilés : « Le tarif » ne force plus la largeur de la colonne. */
	.ipf-card__row { grid-template-columns: 24px 1fr; column-gap: 12px; }
	.ipf-card__label { white-space: normal; grid-column: 2; grid-row: 1; }
	.ipf-card__value { grid-column: 2; grid-row: 2; }
	.ipf-card__sessions { padding-left: 22px; }
	/* Barre d'actions : les deux groupes se répartissent sans débordement. */
	.ipf-card__actions { justify-content: flex-start; gap: 12px; }
	.ipf-card__btn { flex: 1 1 100%; justify-content: center; }
	/* Cartes du catalogue : gouttières intérieures réduites (texte jamais rogné). */
	.ipf-catalog-card .ipedis-card__body { padding: 22px 18px; }
	.ipf-catalog-card .ipedis-card__title { font-size: 1.25rem; overflow-wrap: break-word; }
	.ipf-catalog-card .ipedis-pill { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
	.ipf-card__btnico { transition: none; }
	.ipf-card__btn:hover .ipf-card__btnico, .ipf-card__btn:focus-visible .ipf-card__btnico { transform: none; }
}

/* =============================================================================
 * AUTONOMIE du catalogue : bouton « EN SAVOIR PLUS » des cartes + « Afficher plus ».
 * Ces éléments réutilisent les CLASSES du blog (.ipedis-card__cta / .ipedis-btn-ico /
 * .ipedis-loadmore*) mais blog.css n'est PAS chargé sur les pages Formations : sans les
 * règles ci-dessous, le SVG inline (dimensions retirées, pilotées par CSS) s'affichait
 * en pleine largeur. Tout est scopé `.ipedis-filter--select` → le blog/les actualités ne
 * sont JAMAIS touchés (règle : CSS formation isolé).
 * ========================================================================== */
.ipedis-filter--select .ipedis-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	margin-top: 0.35rem;
	padding-right: 8px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: var(--ipedis-navy);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none !important;
	cursor: pointer;
	overflow: hidden;
	transition: all 0.3s ease;
}
/* Icône encadrée BLEU CLAIR + flèche navy (composant Figma du catalogue). */
.ipedis-filter--select .ipedis-btn-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 7px;
	border-radius: 4px;
	background: #E6D4FF;
	color: var(--ipedis-navy);
	transition: all 0.3s ease;
}
.ipedis-filter--select .ipedis-btn-ico svg {
	display: block;
	width: 1em;
	height: 1em;
}
/* Survol / focus clavier de la carte : bouton plein navy (même langage que le listing blog). */
.ipf-catalog-card:hover .ipedis-card__cta,
.ipf-catalog-card:has(:focus-visible) .ipedis-card__cta {
	border-color: var(--ipedis-navy);
	background: var(--ipedis-navy);
	color: var(--ipedis-cream);
}
.ipf-catalog-card:hover .ipedis-btn-ico,
.ipf-catalog-card:has(:focus-visible) .ipedis-btn-ico {
	background: var(--ipedis-cream);
	color: var(--ipedis-navy);
	transform: rotate(45deg);
}

/* Bouton « Afficher plus » : navy, texte crème, capitales (maquette). */
.ipedis-filter--select .ipedis-loadmore {
	display: flex;
	justify-content: center;
	margin-top: clamp(2rem, 5vw, 3.5rem);
}
/* Fin de liste : le JS pose `hidden` → sans cette règle, le display:flex ci-dessus l'emporterait. */
.ipedis-filter--select .ipedis-loadmore[hidden] {
	display: none;
}
.ipedis-filter--select .ipedis-loadmore__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 38px;
	padding: 6px 10px 6px 6px;
	border: 2px solid var(--ipedis-navy);
	border-radius: 8px;
	background: var(--ipedis-navy);
	color: var(--ipedis-cream);
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s ease;
}
/* Sur le bouton navy, le carré de l'icône passe en crème (contraste). */
.ipedis-filter--select .ipedis-loadmore__btn .ipedis-btn-ico {
	background: var(--ipedis-cream);
	color: var(--ipedis-navy);
}
.ipedis-filter--select .ipedis-loadmore__btn:hover,
.ipedis-filter--select .ipedis-loadmore__btn:focus-visible {
	background: var(--ipedis-cream);
	color: var(--ipedis-navy);
}
.ipedis-filter--select .ipedis-loadmore__btn:hover .ipedis-btn-ico,
.ipedis-filter--select .ipedis-loadmore__btn:focus-visible .ipedis-btn-ico {
	background: var(--ipedis-navy);
	color: var(--ipedis-cream);
	transform: rotate(45deg);
}
.ipedis-filter--select .ipedis-loadmore__btn:focus-visible {
	outline: 3px solid var(--ipedis-navy);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.ipedis-filter--select .ipedis-card__cta,
	.ipedis-filter--select .ipedis-btn-ico,
	.ipedis-filter--select .ipedis-loadmore__btn { transition: none !important; }
	.ipf-catalog-card:hover .ipedis-btn-ico,
	.ipf-catalog-card:has(:focus-visible) .ipedis-btn-ico,
	.ipedis-filter--select .ipedis-loadmore__btn:hover .ipedis-btn-ico { transform: none; }
}

/* =============================================================================
 * Ajustements catalogue (valeurs client) + CHARGEMENT FLUIDE
 * L'animation d'apparition des cartes vit dans blog.css, qui n'est PAS chargé sur
 * les pages Formations : elle est donc redéclarée ici (feuille autonome), à
 * l'identique du listing blog (fondu + léger glissé, en cascade discrète).
 * ========================================================================== */
.ipedis-filter--select .ipedis-filter__field select option,
.ipedis-filter--select .ipedis-filter__field select:focus option {
	color: var(--ipedis-navy);
	font-weight: 500;
	font-size: 16px;
}

/* Survol / focus clavier de la carte : CTA et icône en bleu ciel. */
.ipf-catalog-card:hover .ipedis-card__cta,
.ipf-catalog-card:has(:focus-visible) .ipedis-card__cta {
	border-color: #E6D4FF;
	background: #E6D4FF;
	color: var(--ipedis-navy);
}
.ipf-catalog-card:hover .ipedis-btn-ico,
.ipf-catalog-card:has(:focus-visible) .ipedis-btn-ico {
	background: #E6D4FF;
}
/* Bouton « Afficher plus » : icône crème sur fond navy au survol. */
.ipedis-filter--select .ipedis-loadmore__btn:hover .ipedis-btn-ico,
.ipedis-filter--select .ipedis-loadmore__btn:focus-visible .ipedis-btn-ico {
	background: var(--ipedis-cream);
	color: var(--ipedis-navy);
}

/* --- Chargement fluide (parité listing blog) ------------------------------- */
@keyframes ipedis-card-enter {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}
.ipedis-filter--select .ipedis-card--enter {
	animation: ipedis-card-enter 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
	animation-delay: var(--ipedis-enter-delay, 0ms);
	will-change: opacity, transform;
}
/* Échange de jeu de cartes (changement de filtre) : fondu discret. */
.ipedis-filter--select .ipedis-cards-grid.is-swapping {
	opacity: 0.5;
	transition: opacity 0.12s ease;
}
@media (prefers-reduced-motion: reduce) {
	.ipedis-filter--select .ipedis-card--enter { animation: none; }
	.ipedis-filter--select .ipedis-cards-grid.is-swapping { transition: none; }
}


/* Le thème applique une marge en `em` sur les titres de niveau 4 : on la neutralise par
 * SPÉCIFICITÉ (deux classes), sans `!important`. Valeurs de la maquette staging. */
.ipf-card .ipf-card__subtitle {
	margin: 24px 0 0;
	padding: 24px 0 10px;
}
.ipf-card .ipf-card__row { column-gap: 20px; }
.ipf-card .ipf-card__actions { margin-top: 24px; padding-top: 24px; }
.ipf-card .ipf-card__inner { padding: 32px; }
.ipf-card .ipf-card__iconbtns { gap: 10px; }


/* =============================================================================
 * Fil d'ariane en mobile — MÊME comportement que sur les articles (blog) :
 * le fil passe en flux INLINE et le titre courant se répartit sur plusieurs lignes,
 * au ras de gauche (WCAG 1.4.10). Les règles du blog (style.css) existent déjà mais
 * `.ipf-hero .ipedis-breadcrumb …` est plus spécifique et les écrasait : on les
 * reproduit donc ici, à la même spécificité.
 * Le `padding-block` du lien est conservé : sur un élément inline il agrandit la zone
 * cliquable SANS influencer le flux — la cible tactile reste confortable.
 * ========================================================================== */
@media (max-width: 768px) {
	.ipf-hero .ipedis-breadcrumb ol { display: block; }
	.ipf-hero .ipedis-breadcrumb li { display: inline; gap: 0; }
	.ipf-hero .ipedis-breadcrumb li > a,
	.ipf-hero .ipedis-breadcrumb li > span { display: inline; }
}

/* =============================================================================
 * Titre du hero — variantes de mise en ligne (surbrillance)
 *
 * Défaut (aucune classe) : la surbrillance occupe SA PROPRE LIGNE, centrée — c'est le
 * rendu de la maquette pour la majorité des pages, inchangé pour tout contenu publié.
 *
 * `--hl-inline` (case « Surbrillance dans le flux du titre » cochée) : la surbrillance
 * reste sur la même ligne que le texte qui la précède. La rotation et le fond sont
 * conservés ; seuls le flux et les marges changent.
 *
 * Deux surbrillances (deux termes séparés par une virgule dans la méta) sont rendues
 * par deux `<span class="highlight">` successifs : le comportement ci-dessous s'applique
 * à chacun, sans règle supplémentaire.
 * ========================================================================== */
.ipf-hero__title--hl-inline .highlight {
	display: inline-block;
	width: auto;
	margin: 0 4px;
	padding: 2px 12px 8px;
	vertical-align: baseline;
}


/* Surtitre du bloc e-learning : respiration plus large avant la liste (uniquement ce bloc). */
.ipf-card__block--el .ipf-card__title {
	margin-bottom: 24px;
}