/**
 * Blocs editoriaux IFP : encadre, FAQ, tableau comparatif, cartes formation
 * et cartes article.
 *
 * Tout est construit sur les variables du theme (--color-*, --spacing-*,
 * --radius-*), donc le mode nuit ([data-theme="dark"]) est suivi
 * automatiquement, sans regle dediee.
 */

/* ==================================================================
   Encadre
   ================================================================== */

.ifp-callout {
	--ifp-callout-accent: var(--color-primary, #1e3a8a);

	display: flex;
	gap: var(--spacing-3, .75rem);
	margin: var(--spacing-6, 1.5rem) 0;
	padding: var(--spacing-4, 1rem);
	background: var(--color-bg-secondary, #f9fafb);
	border: 1px solid var(--color-border, #e5e7eb);
	border-left: 4px solid var(--ifp-callout-accent);
	border-radius: var(--radius-md, 6px);
	color: var(--color-text, #1a1a1a);
}

@supports (background: color-mix(in srgb, red 8%, transparent)) {
	.ifp-callout {
		background: color-mix(in srgb, var(--ifp-callout-accent) 7%, var(--color-bg, #fff));
	}
}

.ifp-callout--info      { --ifp-callout-accent: var(--color-primary, #1e3a8a); }
.ifp-callout--conseil   { --ifp-callout-accent: var(--color-success, #10b981); }
.ifp-callout--attention { --ifp-callout-accent: var(--color-warning, #f59e0b); }
.ifp-callout--retenir   { --ifp-callout-accent: var(--color-accent, #f59e0b); }
.ifp-callout--temoin    { --ifp-callout-accent: var(--color-text-muted, #9ca3af); }

.ifp-callout__icon {
	flex: 0 0 auto;
	color: var(--ifp-callout-accent);
	font-size: 20px;
	width: 20px;
	height: 20px;
	line-height: 1;
	margin-top: 2px;
}

.ifp-callout__body {
	min-width: 0;
	flex: 1 1 auto;
}

.ifp-callout__title {
	margin: 0 0 var(--spacing-1, .25rem);
	font-weight: var(--font-weight-bold, 700);
	font-size: var(--font-size-sm, .875rem);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ifp-callout-accent);
}

.ifp-callout__content > *:first-child { margin-top: 0; }
.ifp-callout__content > *:last-child  { margin-bottom: 0; }

.ifp-callout--temoin .ifp-callout__content {
	font-style: italic;
}

/* ==================================================================
   FAQ accordeon
   ================================================================== */

.ifp-faq {
	margin: var(--spacing-6, 1.5rem) 0;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-md, 6px);
	overflow: hidden;
	background: var(--color-bg, #fff);
}

.ifp-faq__title {
	margin: 0;
	padding: var(--spacing-3, .75rem) var(--spacing-4, 1rem);
	background: var(--color-bg-secondary, #f9fafb);
	border-bottom: 1px solid var(--color-border, #e5e7eb);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-text, #1a1a1a);
}

.ifp-faq__item + .ifp-faq__item {
	border-top: 1px solid var(--color-border, #e5e7eb);
}

.ifp-faq__question {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-2, .5rem);
	padding: var(--spacing-3, .75rem) var(--spacing-4, 1rem);
	cursor: pointer;
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-text, #1a1a1a);
	list-style: none;
	transition: background var(--transition-fast, .15s);
}

.ifp-faq__question::-webkit-details-marker { display: none; }

.ifp-faq__question::before {
	content: "";
	flex: 0 0 auto;
	width: .5em;
	height: .5em;
	margin-top: .45em;
	border-right: 2px solid var(--color-primary, #1e3a8a);
	border-bottom: 2px solid var(--color-primary, #1e3a8a);
	transform: rotate(-45deg);
	transition: transform var(--transition-fast, .15s);
}

.ifp-faq__item[open] > .ifp-faq__question::before {
	transform: rotate(45deg);
}

.ifp-faq__question:hover {
	background: var(--color-bg-secondary, #f9fafb);
}

.ifp-faq__question:focus-visible {
	outline: 2px solid var(--color-primary, #1e3a8a);
	outline-offset: -2px;
}

.ifp-faq__answer {
	padding: 0 var(--spacing-4, 1rem) var(--spacing-4, 1rem) calc(var(--spacing-4, 1rem) + 1em);
	color: var(--color-text-secondary, #6b7280);
}

.ifp-faq__answer > *:first-child { margin-top: 0; }
.ifp-faq__answer > *:last-child  { margin-bottom: 0; }

/* ==================================================================
   Tableau comparatif
   ================================================================== */

.ifp-compare {
	margin: var(--spacing-6, 1.5rem) 0;
	overflow-x: auto;
}

.ifp-compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-sm, .875rem);
	background: var(--color-bg, #fff);
}

.ifp-compare__caption {
	caption-side: top;
	text-align: left;
	padding-bottom: var(--spacing-2, .5rem);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-text-secondary, #6b7280);
}

.ifp-compare__table th,
.ifp-compare__table td {
	padding: var(--spacing-3, .75rem);
	border: 1px solid var(--color-border, #e5e7eb);
	text-align: left;
	vertical-align: top;
}

.ifp-compare__table thead th {
	background: var(--color-primary, #1e3a8a);
	color: var(--color-text-inverse, #f5f5f5);
	font-weight: var(--font-weight-semibold, 600);
	border-color: var(--color-primary, #1e3a8a);
}

.ifp-compare__table tbody th[scope="row"] {
	background: var(--color-bg-secondary, #f9fafb);
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-text, #1a1a1a);
}

.ifp-compare__table tbody tr:nth-child(even) td {
	background: var(--color-bg-secondary, #f9fafb);
}

.ifp-compare__table .is-highlighted {
	background: var(--color-bg-tertiary, #f3f4f6);
}

.ifp-compare__table thead .is-highlighted {
	background: var(--color-accent, #f59e0b);
	color: #1a1a1a;
	border-color: var(--color-accent, #f59e0b);
}

.ifp-compare__bool {
	font-size: 1.1em;
	line-height: 1;
}

.ifp-compare__bool--yes { color: var(--color-success, #10b981); }
.ifp-compare__bool--no  { color: var(--color-text-muted, #9ca3af); }

/* Sur mobile, chaque cellule reprend le libelle de sa colonne. */
@media (max-width: 640px) {
	.ifp-compare__table,
	.ifp-compare__table tbody,
	.ifp-compare__table tr,
	.ifp-compare__table td,
	.ifp-compare__table th {
		display: block;
		width: auto;
	}

	.ifp-compare__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.ifp-compare__table tr {
		margin-bottom: var(--spacing-4, 1rem);
		border: 1px solid var(--color-border, #e5e7eb);
		border-radius: var(--radius-md, 6px);
		overflow: hidden;
	}

	.ifp-compare__table td,
	.ifp-compare__table th {
		border: 0;
		border-bottom: 1px solid var(--color-border, #e5e7eb);
	}

	.ifp-compare__table tr > *:last-child {
		border-bottom: 0;
	}

	.ifp-compare__table td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: var(--font-size-xs, .75rem);
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--color-text-muted, #9ca3af);
		margin-bottom: 2px;
	}
}

/* ==================================================================
   Cartes formation / cartes article
   ================================================================== */

.ifp-formations-cards,
.ifp-article-cards {
	margin: var(--spacing-8, 2rem) 0;
}

.ifp-formations-cards__title,
.ifp-article-cards__title {
	margin: 0 0 var(--spacing-4, 1rem);
	font-weight: var(--font-weight-bold, 700);
	font-size: var(--font-size-lg, 1.125rem);
	color: var(--color-text, #1a1a1a);
}

.ifp-formations-cards__grid,
.ifp-article-cards__grid {
	display: grid;
	gap: var(--spacing-4, 1rem);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ifp-fcard,
.ifp-acard {
	display: flex;
	flex-direction: column;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: var(--radius-lg, 10px);
	overflow: hidden;
	transition: border-color var(--transition-fast, .15s), transform var(--transition-fast, .15s);
}

.ifp-fcard:hover,
.ifp-acard:hover {
	border-color: var(--color-primary, #1e3a8a);
	transform: translateY(-2px);
}

.ifp-fcard__media,
.ifp-acard__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-bg-secondary, #f9fafb);
}

.ifp-fcard__media img,
.ifp-acard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ifp-fcard__body,
.ifp-acard__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2, .5rem);
	padding: var(--spacing-4, 1rem);
	flex: 1 1 auto;
}

.ifp-fcard__level {
	align-self: flex-start;
	padding: 2px 8px;
	border-radius: var(--radius-full, 999px);
	background: var(--color-bg-tertiary, #f3f4f6);
	color: var(--color-text-secondary, #6b7280);
	font-size: var(--font-size-xs, .75rem);
	font-weight: var(--font-weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.ifp-fcard__title,
.ifp-acard__title {
	margin: 0;
	font-size: var(--font-size-base, 1rem);
	font-weight: var(--font-weight-semibold, 600);
	line-height: 1.35;
}

.ifp-fcard__title a,
.ifp-acard__title a {
	color: var(--color-text, #1a1a1a);
	text-decoration: none;
}

.ifp-fcard__title a:hover,
.ifp-acard__title a:hover {
	color: var(--color-primary, #1e3a8a);
}

.ifp-fcard__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-1, .25rem) var(--spacing-3, .75rem);
	font-size: var(--font-size-xs, .75rem);
	color: var(--color-text-secondary, #6b7280);
}

.ifp-fcard__meta li {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ifp-fcard__meta li::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-accent, #f59e0b);
}

.ifp-acard__excerpt {
	margin: 0;
	font-size: var(--font-size-sm, .875rem);
	color: var(--color-text-secondary, #6b7280);
	line-height: 1.5;
}

.ifp-fcard__cta {
	margin-top: auto;
	align-self: flex-start;
	padding: var(--spacing-2, .5rem) var(--spacing-4, 1rem);
	background: var(--color-primary, #1e3a8a);
	color: var(--color-text-inverse, #f5f5f5);
	border-radius: var(--radius-md, 6px);
	font-size: var(--font-size-sm, .875rem);
	font-weight: var(--font-weight-semibold, 600);
	text-decoration: none;
	transition: background var(--transition-fast, .15s);
}

.ifp-fcard__cta:hover {
	background: var(--color-primary-hover, #1e40af);
	color: var(--color-text-inverse, #f5f5f5);
}

/* ==================================================================
   Message d'erreur (visible des editeurs uniquement)
   ================================================================== */

.ifp-widget-error {
	margin: var(--spacing-4, 1rem) 0;
	padding: var(--spacing-3, .75rem);
	border: 1px dashed #d63638;
	border-radius: var(--radius-md, 6px);
	background: rgba(214, 54, 56, .06);
	color: #d63638;
	font-size: var(--font-size-sm, .875rem);
}

/* ==================================================================
   Lien interne au fil du texte ([ifp_link])
   ================================================================== */

.ifp-link {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Cible pas encore publiee. Ce marqueur n'est rendu que pour les
 * utilisateurs qui peuvent editer : le visiteur, lui, ne recoit que
 * le texte nu, sans balise ni style.
 */
.ifp-link--pending {
	text-decoration: underline dotted;
	text-decoration-color: #d63638;
	cursor: help;
}