/*
 * Styles spécifiques à chaque gabarit (Home, Catalogue, Fiche formation, pages stub).
 * Breakpoint desktop : 1100px, cohérent avec assets/css/components.css (voir docs/decisions.md).
 */

/* ==================== HOME ==================== */

/* ---------- Hero ---------- */
.home-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-40) var(--space-48);
	background-color: var(--color-bg-light);
}

.home-hero__halo {
	position: absolute;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	filter: blur(80px);
	pointer-events: none;
}

.home-hero__halo--mint {
	top: -120px;
	right: -120px;
	background: var(--color-mint-500);
	opacity: 0.12;
}

.home-hero__halo--navy {
	bottom: -160px;
	left: -160px;
	background: var(--color-navy-900);
	opacity: 0.08;
}

.home-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-20);
	text-align: center;
}

.home-hero__eyebrow {
	display: inline-flex;
	padding: var(--space-6) var(--space-14);
	border-radius: var(--radius-full);
	background-color: rgba(42, 35, 106, 0.1);
	color: var(--color-navy-900);
	font-weight: 600;
	font-size: var(--text-mobile-eyebrow-size);
}

.home-hero__title {
	font-size: var(--text-mobile-h1-size);
	line-height: var(--text-mobile-h1-line);
	max-width: 358px;
}

.home-hero__subtitle {
	color: var(--color-gray-700);
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-base-line);
	max-width: 358px;
}

.home-hero__search {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	width: 100%;
	max-width: 358px;
}

.home-hero__search-input {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	height: 56px;
	padding-inline: var(--space-20) var(--space-24);
	background-color: var(--color-white);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-search-mobile);
	color: var(--color-gray-700);
}

.home-hero__search-input input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	font-size: var(--text-body-base-size);
	color: var(--color-navy-900);
}

.home-hero__search-input input::placeholder {
	color: var(--color-gray-600);
}

.home-hero__search-submit {
	width: 100%;
}

.home-hero__stats {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: var(--space-12);
	width: 100%;
	max-width: 358px;
}

.home-hero__stat {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.home-hero__stat-value {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--text-mobile-stat-size);
	line-height: var(--text-mobile-stat-line);
}

.home-hero__stat-label {
	color: var(--color-gray-700);
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-line);
	text-align: center;
}

.home-hero__stat-divider {
	width: 1px;
	height: 32px;
	background-color: var(--color-gray-200);
	flex-shrink: 0;
}

@media (min-width: 1100px) {
	.home-hero {
		padding-block: var(--space-96);
	}

	.home-hero__inner {
		gap: var(--space-24);
	}

	.home-hero__eyebrow {
		font-size: var(--text-eyebrow-size);
	}

	.home-hero__title {
		font-size: var(--text-h1-size);
		line-height: var(--text-h1-line);
		max-width: 880px;
	}

	.home-hero__subtitle {
		font-size: var(--text-body-lg-size);
		max-width: 680px;
	}

	.home-hero__search {
		flex-direction: row;
		align-items: center;
		width: auto;
		max-width: none;
		gap: var(--space-8);
		padding: var(--space-8) var(--space-8) var(--space-8) var(--space-24);
		background-color: var(--color-white);
		border-radius: var(--radius-full);
		box-shadow: var(--shadow-search);
	}

	.home-hero__search-input {
		height: auto;
		padding: 0;
		box-shadow: none;
		background: transparent;
	}

	.home-hero__search-input input {
		width: 360px;
	}

	.home-hero__search-submit {
		width: auto;
	}

	.home-hero__stats {
		max-width: none;
		gap: var(--space-32);
	}

	.home-hero__stat {
		flex: none;
		flex-direction: row;
		align-items: baseline;
		gap: 6px;
	}

	.home-hero__stat-value {
		font-size: 18px;
		line-height: normal;
	}

	.home-hero__stat-label {
		font-size: var(--text-body-sm-size);
	}

	.home-hero__stat-divider {
		height: 20px;
	}
}

/* ---------- Domains ---------- */
.home-domains {
	padding-block: var(--space-48);
}

.home-domains__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

@media (min-width: 1100px) {
	.home-domains {
		padding-block: var(--space-64);
	}

	.home-domains__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px 20px;
	}
}

/* ---------- Featured ---------- */
.home-featured {
	padding-block: var(--space-48);
}

.home-featured__grid {
	display: none;
}

.home-featured__carousel {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.home-featured__carousel .carousel__track {
	padding-inline: 0;
}

.home-featured__carousel .carousel__item:first-child,
.home-featured__carousel .carousel__item:last-child {
	margin-inline: 0;
}

@media (min-width: 1100px) {
	.home-featured {
		padding-block: var(--space-64);
	}

	.home-featured__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-24);
	}

	.home-featured__carousel {
		display: none;
	}
}

/* ---------- Organismes ---------- */
.home-organismes {
	background-color: var(--color-white);
	border-block: 1px solid var(--color-gray-200);
	padding-block: var(--space-48);
}

.home-organismes__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.home-organismes__eyebrow {
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1.56px;
	color: var(--color-gray-700);
}

.home-organismes__title {
	font-size: var(--text-mobile-h2-size);
	line-height: var(--text-mobile-h2-line);
}

.home-organismes__description {
	color: var(--color-gray-700);
	line-height: 1.55;
}

.home-organismes__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	padding-top: var(--space-8);
}

.home-organismes__link {
	font-weight: 600;
	color: var(--color-navy-900);
}

@media (min-width: 1100px) {
	.home-organismes {
		padding-block: var(--space-64);
	}

	.home-organismes__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-32);
	}

	.home-organismes__text {
		max-width: 720px;
	}

	.home-organismes__title {
		font-size: var(--text-h2-size);
		line-height: var(--text-h2-line);
	}

	.home-organismes__actions {
		flex-shrink: 0;
	}

	.home-organismes__actions .button {
		width: 263px;
	}
}

/* ---------- Founders ---------- */
.home-founders {
	padding-block: var(--space-48);
}

.home-founders__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
}

.home-founders__title {
	font-size: var(--text-mobile-h2-size);
	line-height: var(--text-mobile-h2-line);
	margin-bottom: var(--space-16);
}

.home-founders__description {
	color: var(--color-gray-700);
	line-height: 1.6;
	margin-bottom: var(--space-24);
}

.home-founders__authors {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.home-founders__author-name {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 18px;
}

.home-founders__author-role {
	color: var(--color-gray-700);
	font-size: 13px;
}

.home-founders__support {
	padding: var(--space-24) var(--space-24) var(--space-24);
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-top: 4px solid var(--color-mint-500);
	border-radius: var(--radius-md);
}

.home-founders__support-title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 18px;
	margin-bottom: var(--space-12);
}

.home-founders__support-text {
	color: var(--color-gray-700);
	font-size: var(--text-body-sm-size);
	margin-bottom: var(--space-16);
}

.home-founders__support-link {
	font-weight: 600;
	color: var(--color-navy-900);
}

@media (min-width: 1100px) {
	.home-founders {
		padding-block: var(--space-64);
	}

	.home-founders__grid {
		flex-direction: row;
		gap: 80px;
	}

	.home-founders__text {
		flex: 1;
	}

	.home-founders__support {
		flex-shrink: 0;
		width: 320px;
	}
}

/* ==================== CATALOGUE ==================== */

.catalog-header {
	background-color: var(--color-white);
	padding-block: var(--space-32);
}

.catalog-header__title {
	font-size: var(--text-mobile-h1-size);
	line-height: var(--text-mobile-h1-line);
	margin-bottom: var(--space-8);
}

.catalog-header__intro {
	color: var(--color-gray-700);
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-base-line);
}

.catalog-section {
	padding-block: var(--space-32) var(--space-64);
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

/* ---------- Filtres ---------- */
.catalog-filters__list {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-10);
	overflow-x: auto;
	padding-bottom: var(--space-8);
	-webkit-overflow-scrolling: touch;
}

.catalog-filters__chip {
	display: flex;
	align-items: center;
	height: 40px;
	padding-inline: var(--space-16);
	border-radius: var(--radius-full);
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	color: var(--color-navy-900);
	font-weight: 600;
	font-size: var(--text-chip-size);
	white-space: nowrap;
}

.catalog-filters__chip.is-active {
	background-color: var(--color-navy-900);
	border-color: var(--color-navy-900);
	color: var(--color-white);
	box-shadow: var(--shadow-chip-active);
}

.catalog-grid__count {
	color: var(--color-gray-700);
	font-size: var(--text-body-sm-size);
}

.catalog-grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.catalog-grid__empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
	padding: var(--space-32);
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	color: var(--color-gray-700);
}

@media (min-width: 1100px) {
	.catalog-header {
		padding-block: var(--space-64);
	}

	.catalog-header__title {
		font-size: 38px;
		line-height: normal;
	}

	.catalog-section {
		padding-block: var(--space-32) var(--space-96);
		gap: var(--space-32);
	}

	.catalog-filters__list {
		flex-wrap: wrap;
		overflow-x: visible;
		padding-bottom: 0;
	}

	.catalog-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-24);
	}
}

/* ==================== FICHE FORMATION ==================== */

.formation-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--color-white);
	padding-block: var(--space-24) var(--space-32);
}

.formation-hero__halo {
	position: absolute;
	top: -140px;
	right: -140px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: var(--color-mint-500);
	opacity: 0.1;
	filter: blur(80px);
	pointer-events: none;
}

.formation-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.formation-hero__tags {
	display: flex;
	align-items: center;
	gap: var(--space-10);
}

.formation-hero__title {
	font-size: var(--text-mobile-h1-size);
	line-height: var(--text-mobile-h1-line);
}

.formation-hero__excerpt {
	color: var(--color-gray-700);
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-base-line);
	max-width: 720px;
}

.formation-hero__facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-16) var(--space-12);
	padding-top: var(--space-4);
}

.formation-hero__fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.formation-hero__fact--organisme {
	grid-column: 1 / -1;
}

.formation-hero__fact-label {
	color: var(--color-gray-700);
	font-size: var(--text-caption-size);
}

.formation-hero__fact-value {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-mobile-fact-size);
	line-height: var(--text-mobile-fact-line);
}

.formation-hero__cta {
	margin-top: var(--space-8);
}

@media (min-width: 1100px) {
	.formation-hero {
		padding-block: var(--space-32) var(--space-64);
	}

	.formation-hero__inner {
		gap: var(--space-20);
	}

	.formation-hero__title {
		font-size: 40px;
		line-height: normal;
		max-width: 760px;
	}

	.formation-hero__excerpt {
		font-size: 17px;
	}

	.formation-hero__facts {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-32);
		padding-top: var(--space-12);
	}

	.formation-hero__fact-value {
		font-size: 18px;
		line-height: normal;
	}

	.formation-hero__cta {
		align-self: flex-start;
	}
}

/* ---------- Body ---------- */
.formation-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
	padding-block: var(--space-32) var(--space-48);
}

.formation-body__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
}

.formation-body__heading {
	font-size: 22px;
	margin-bottom: var(--space-16);
}

.formation-body__content {
	color: var(--color-gray-700);
	line-height: 1.6;
}

.formation-body__content > * + * {
	margin-top: var(--space-16);
}

.formation-body__programme {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.formation-body__programme li {
	position: relative;
	padding-left: var(--space-20);
	color: var(--color-navy-900);
}

.formation-body__programme li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--color-navy-900);
}

.formation-body__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.formation-infos {
	position: relative;
	padding: var(--space-24);
	padding-top: calc(var(--space-24) + 4px);
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-panel);
	overflow: hidden;
}

.formation-infos::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background-color: var(--color-mint-500);
}

.formation-infos__title {
	font-size: 18px;
	margin-bottom: var(--space-16);
}

.formation-infos__rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.formation-infos__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-16);
	font-size: var(--text-body-sm-size);
}

.formation-infos__row dt {
	color: var(--color-gray-700);
}

.formation-infos__row dd {
	font-weight: 600;
	color: var(--color-navy-900);
	text-align: right;
}

@media (min-width: 1100px) {
	.formation-body {
		flex-direction: row;
		align-items: flex-start;
		gap: 64px;
		padding-block: var(--space-64);
	}

	.formation-body__main {
		flex: 1;
		min-width: 0;
	}

	.formation-body__sidebar {
		flex: 0 0 340px;
	}
}

/* ---------- Related ---------- */
.formation-related {
	padding-block: var(--space-48);
}

.formation-related__grid {
	display: none;
}

@media (min-width: 1100px) {
	.formation-related {
		padding-block: var(--space-64);
	}

	.formation-related__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-24);
	}

	.formation-related__carousel {
		display: none;
	}
}

/* ==================== PAGES SIMPLES ==================== */

.page-content {
	padding-block: var(--space-48) var(--space-64);
	max-width: 760px;
}

.page-content__title {
	font-size: var(--text-mobile-h1-size);
	line-height: var(--text-mobile-h1-line);
	margin-bottom: var(--space-24);
}

.page-content__body {
	color: var(--color-gray-700);
	line-height: 1.7;
}

.page-content__body > * + * {
	margin-top: var(--space-16);
}

@media (min-width: 1100px) {
	.page-content__title {
		font-size: var(--text-h2-size);
		line-height: var(--text-h2-line);
	}
}

/* ---------- Organisme ---------- */
.organisme-page {
	padding-block: var(--space-48) var(--space-64);
}

.organisme-page__header {
	display: flex;
	align-items: center;
	gap: var(--space-16);
	margin-bottom: var(--space-24);
}

.organisme-page__logo,
.organisme-page__avatar {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: var(--radius-full);
}

.organisme-page__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-mint-100);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 24px;
	color: var(--color-navy-900);
}

.organisme-page__title {
	font-size: var(--text-mobile-h1-size);
	line-height: var(--text-mobile-h1-line);
}

.organisme-page__type {
	color: var(--color-gray-700);
}

.organisme-page__body {
	max-width: 760px;
	color: var(--color-gray-700);
	line-height: 1.7;
	margin-bottom: var(--space-16);
}

.organisme-page__site {
	margin-bottom: var(--space-48);
}

.organisme-page__site a {
	font-weight: 600;
	color: var(--color-navy-900);
}

.organisme-page__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

@media (min-width: 1100px) {
	.organisme-page__title {
		font-size: var(--text-h2-size);
		line-height: var(--text-h2-line);
	}

	.organisme-page__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-24);
	}
}

/* ---------- Annuaire des organismes ---------- */
.organismes-archive__header {
	padding-block: var(--space-32);
}

.organismes-archive__title {
	font-size: var(--text-mobile-h1-size);
	line-height: var(--text-mobile-h1-line);
	margin-bottom: var(--space-16);
}

.organismes-archive__intro {
	color: var(--color-gray-700);
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-base-line);
}

.organismes-archive__section {
	padding-block: var(--space-32) var(--space-64);
}

.organismes-archive__grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.organismes-archive__empty {
	color: var(--color-gray-700);
}

@media (min-width: 1100px) {
	.organismes-archive__header {
		padding-block: var(--space-64);
	}

	.organismes-archive__title {
		font-size: 40px;
		line-height: normal;
	}

	.organismes-archive__section {
		padding-block: var(--space-32) var(--space-96);
	}

	.organismes-archive__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-24);
	}
}

/* ==================== FICHE FORMATION — POINT D'ENTRÉE ORGANISME ==================== */
/* Figma 171:8199 (desktop) / 171:8467 (mobile). */
.organisme-cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-20);
	background-color: var(--color-bg-light);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-card-mobile);
}

.organisme-cta__maj {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	padding-bottom: var(--space-12);
	border-bottom: 1px solid var(--color-gray-200);
	font-size: var(--text-meta-size);
	line-height: var(--text-meta-line);
	color: var(--color-gray-600);
}

.organisme-cta__maj .icon {
	flex-shrink: 0;
}

.organisme-cta__title {
	font-size: var(--text-body-lg-size);
	line-height: var(--text-h4-line);
	font-weight: 600;
}

.organisme-cta__text {
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	color: var(--color-gray-700);
}

.organisme-cta__signaler {
	font-size: var(--text-meta-size);
	line-height: var(--text-meta-line);
	color: var(--color-gray-700);
}

.organisme-cta__signaler a {
	font-weight: 600;
	color: var(--color-navy-900);
	text-decoration: underline;
}

@media (min-width: 1100px) {
	.organisme-cta {
		padding: var(--space-24);
		border-radius: var(--radius-lg);
	}
}

/* ==================== REVENDIQUER MON ORGANISME ==================== */
/* Figma « Ready to dev » 171:8133 (modes B/C) et 178:9491 (mode A) — voir docs/figma-map.md.
   Points de rupture : 768px (mise en page interne du formulaire : champs sur 2 colonnes,
   Champ Modifié horizontal, marges desktop de la carte) ; 1100px (hero et fil d'Ariane
   desktop, comme le reste du thème) ; 1200px (2 colonnes + carte de progression sticky). */

/* Variantes de contenu par mode : A = non revendiqué sans modification de formation,
   B = non revendiqué avec modification, C (.is-claimed) = fiche déjà revendiquée. */
.revendiquer.is-claimed .only-unclaimed,
.revendiquer.is-claimed .only-a,
.revendiquer.is-claimed .only-b,
.revendiquer:not(.is-claimed) .only-claimed,
.revendiquer:has(#action-modifier:checked) .only-a,
.revendiquer:not(:has(#action-modifier:checked)) .only-b {
	display: none;
}

/* Fond de page blanc (frames 171:8218 / 171:8302 / 178:9493 : neutral/white), le body du
   thème étant en bg-light. */
.revendiquer {
	background-color: var(--color-white);
}

/* ---------- Hero ---------- */
.revendiquer-hero {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding-block: var(--space-32) var(--space-8);
}

.revendiquer-hero__crumbs--desktop {
	display: none;
}

.revendiquer-hero__crumbs--mobile {
	display: flex;
	gap: var(--space-8);
	font-size: var(--text-meta-size);
	line-height: var(--text-meta-line);
	color: var(--color-gray-700);
}

.revendiquer-hero__crumbs--mobile a {
	color: inherit;
	text-decoration: underline;
}

.revendiquer-hero__title {
	font-size: var(--text-mobile-h1-size);
	line-height: var(--text-mobile-h1-line);
}

.revendiquer-hero__intro {
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-base-line);
	color: var(--color-gray-700);
}

@media (min-width: 1100px) {
	.revendiquer-hero {
		gap: var(--space-16);
		padding-block: var(--space-56) var(--space-16);
	}

	.revendiquer-hero__crumbs--desktop {
		display: block;
	}

	.revendiquer-hero__crumbs--mobile {
		display: none;
	}

	.revendiquer-hero__title {
		font-size: var(--text-page-title-size);
		line-height: var(--text-page-title-line);
	}

	.revendiquer-hero__intro {
		max-width: 760px;
		font-size: var(--text-body-lg-size);
		line-height: var(--text-body-lg-line);
	}
}

/* ---------- Mise en page ---------- */
.revendiquer-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding-block: var(--space-24) var(--space-48);
}

.revendiquer-content__main {
	min-width: 0;
}

@media (min-width: 1200px) {
	.revendiquer-content {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-48);
		padding-block: var(--space-56) var(--space-96);
	}

	.revendiquer-content__main {
		flex: 1;
	}
}

/* ---------- Carte formulaire ---------- */
.revendiquer-form,
.revendiquer-envoye {
	display: flex;
	flex-direction: column;
	gap: var(--space-28);
	padding: var(--space-24) var(--space-20);
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-card-mobile);
	box-shadow: var(--shadow-panel);
}

.revendiquer-form__divider {
	height: 1px;
	margin: 0;
	border: 0;
	background-color: var(--color-gray-200);
}

.revendiquer-form__notice {
	padding: var(--space-12) var(--space-16);
	background-color: var(--color-bg-light);
	border-radius: var(--radius-field);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	color: var(--color-gray-700);
}

.revendiquer-form__banner {
	display: flex;
	align-items: flex-start;
	gap: var(--space-12);
	padding: var(--space-14);
	background-color: var(--color-mint-100);
	border-radius: var(--radius-field);
	color: var(--color-navy-900);
}

.revendiquer-form__banner .icon {
	flex-shrink: 0;
}

.revendiquer-form__banner-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	color: var(--color-gray-700);
}

.revendiquer-form__banner-text strong {
	font-size: var(--text-body-md-size);
	line-height: var(--text-body-md-line);
	font-weight: 600;
	color: var(--color-navy-900);
}

/* Récapitulatif des erreurs (non maquetté — voir decisions.md). */
.form-errors {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-16) var(--space-20);
	background-color: var(--color-error-bg);
	border-left: 4px solid var(--color-error);
	border-radius: var(--radius-field);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	color: var(--color-navy-900);
}

.form-errors:focus-visible {
	outline: 3px solid var(--color-navy-900);
	outline-offset: 2px;
}

.form-errors__title {
	font-family: var(--font-body);
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-base-line);
	font-weight: 600;
	color: var(--color-error);
}

.form-errors__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-left: var(--space-20);
	list-style: disc;
}

.form-errors__list a {
	color: var(--color-navy-900);
	text-decoration: underline;
}

/* ---------- Étapes ---------- */
.revendiquer-step {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	scroll-margin-top: var(--space-24);
}

.revendiquer-step--vous {
	gap: var(--space-20);
}

.revendiquer-step__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.revendiquer-step__grid {
	display: grid;
	gap: var(--space-16);
}

.revendiquer-step__intro {
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	color: var(--color-gray-700);
}

.revendiquer-step__options {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin-top: var(--space-4);
}

.revendiquer-step__message {
	margin-top: var(--space-8);
}

/* Étape 1 : organisme sélectionné ou sélecteur (repli sans JS / recherche). */
.org-field,
.formation-field {
	margin-top: var(--space-8);
}

.org-field__selected,
.formation-field__selected {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.formation-field {
	margin-top: 0;
}

.formation-field__selected {
	gap: var(--space-8);
}

.org-field__picker,
.org-field__autre,
.formation-field__picker {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.org-field__autre {
	display: none;
}

.org-field:has(#mo-organisme option[value="autre"]:checked) .org-field__autre {
	display: flex;
}

.formation-field:not(.has-formations) .formation-field__select,
.formation-field.has-formations .formation-field__titre {
	display: none;
}

/* Bloc de détail de la modification : révélé quand « Modifier une formation » est cochée. */
.modif-detail {
	display: none;
	flex-direction: column;
	gap: var(--space-16);
	padding: var(--space-4) 0 var(--space-8) var(--space-16);
	border-left: 2px solid var(--color-mint-500);
}

.revendiquer-form:has(#action-modifier:checked) .modif-detail {
	display: flex;
}

.modif-detail__champs {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.modif-detail__champs legend {
	margin-bottom: var(--space-8);
	padding: 0;
}

.modif-detail__champs.is-error .chip {
	border-color: var(--color-error);
}

.modif-detail__champs .form-field__error {
	margin-top: var(--space-8);
}

.modif-detail__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.modif-detail .champ-modifie {
	display: none;
}

.revendiquer-form:has(#chip-tarif:checked) #champ-tarif,
.revendiquer-form:has(#chip-sessions:checked) #champ-sessions,
.revendiquer-form:has(#chip-duree:checked) #champ-duree,
.revendiquer-form:has(#chip-format:checked) #champ-format,
.revendiquer-form:has(#chip-lien:checked) #champ-lien,
.revendiquer-form:has(#chip-description:checked) #champ-description,
.revendiquer-form:has(#chip-arretee:checked) #champ-arretee {
	display: flex;
}

/* ---------- Envoi ---------- */
.revendiquer-form__envoi {
	display: flex;
	flex-direction: column-reverse; /* mobile : bouton pleine largeur au-dessus de la mention */
	gap: var(--space-16);
}

.revendiquer-form__mention {
	font-size: var(--text-meta-size);
	line-height: var(--text-meta-line);
	color: var(--color-gray-700);
}

.revendiquer-form__mention a {
	font-weight: 600;
	color: var(--color-navy-900);
	text-decoration: underline;
}

.revendiquer-form__submit {
	width: 100%;
}

@media (min-width: 768px) {
	.revendiquer-form,
	.revendiquer-envoye {
		gap: var(--space-36);
		padding: var(--space-40);
		border-radius: var(--radius-lg);
	}

	.revendiquer-form__banner {
		padding: var(--space-14) var(--space-16);
	}

	.revendiquer-step__head {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.revendiquer-form__legend {
		text-align: right;
	}

	.revendiquer-step__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-20);
	}

	.modif-detail {
		margin-left: 30px; /* retrait « Indentation » du frame 171:8248 */
		padding: var(--space-8) 0 var(--space-12) var(--space-24);
	}

	.revendiquer-form__envoi {
		flex-direction: row;
		align-items: center;
		gap: var(--space-24);
	}

	.revendiquer-form__mention {
		flex: 1;
	}

	.revendiquer-form__submit {
		width: auto;
	}
}

/* ---------- Écran après envoi (non maquetté) ---------- */
.revendiquer-envoye {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-16);
}

.revendiquer-envoye__icon {
	display: flex;
	flex-shrink: 0;
	padding-top: var(--space-4);
	color: var(--color-mint-500);
}

.revendiquer-envoye__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-base-line);
	color: var(--color-gray-700);
}

/* ---------- Colonne latérale ---------- */
.revendiquer-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.progress-card {
	display: none;
}

@media (min-width: 1200px) {
	.revendiquer-sidebar {
		position: sticky;
		top: var(--space-24);
		flex: 0 0 400px;
	}

	.progress-card {
		display: flex;
		flex-direction: column;
		gap: var(--space-16);
		padding: var(--space-32) var(--space-32) var(--space-16);
		background-color: var(--color-bg-light);
		border-radius: var(--radius-lg);
	}

	.steps-card {
		display: none;
	}
}

.progress-card__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--space-10) var(--space-16);
}

.progress-card__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-panel-title-size);
	line-height: var(--text-panel-title-line);
	color: var(--color-navy-900);
}

.progress-card__counter {
	font-size: var(--text-meta-size);
	line-height: var(--text-meta-line);
	font-weight: 600;
	color: var(--color-gray-700);
}

.progress-card__bar {
	grid-column: 1 / -1;
	display: block;
	height: 6px;
	overflow: hidden;
	border-radius: var(--radius-bar);
	background-color: var(--color-gray-200);
}

.progress-card__fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: var(--radius-bar);
	background-color: var(--color-mint-500);
	transition: width 0.3s ease;
}

.progress-card[data-done="1"] .progress-card__fill {
	width: calc(100% / 3);
}

.progress-card[data-done="2"] .progress-card__fill {
	width: calc(200% / 3);
}

.progress-card[data-done="3"] .progress-card__fill {
	width: 100%;
}

.progress-card__steps {
	padding-top: var(--space-8);
}

.progress-card__list {
	display: flex;
	flex-direction: column;
}

.progress-card__separator {
	display: flex;
	align-items: center;
	gap: var(--space-10);
	font-size: var(--text-badge-size);
	line-height: var(--text-badge-line);
	font-weight: 600;
	letter-spacing: 0.88px;
	text-transform: uppercase;
	color: var(--color-gray-600);
}

.progress-card__separator::before,
.progress-card__separator::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--color-gray-200);
}

/* « Comment ça se passe ? » (mobile / tablette) */
.steps-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	padding: var(--space-24);
	background-color: var(--color-bg-light);
	border-radius: var(--radius-card-mobile);
}

@media (min-width: 1200px) {
	.steps-card {
		display: none;
	}
}

.steps-card__title {
	font-size: var(--text-mobile-h3-size);
	line-height: var(--text-mobile-h3-line);
	font-weight: 600;
}

.steps-card__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.steps-card__step {
	display: flex;
	align-items: flex-start;
	gap: var(--space-14);
}

.steps-card__numero {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-full);
	background-color: var(--color-white);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-sm-line);
	color: var(--color-navy-900);
}

.steps-card__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	color: var(--color-gray-700);
}

.steps-card__step-title {
	font-size: var(--text-body-md-size);
	font-weight: 600;
	color: var(--color-navy-900);
}

/* Carte « Gratuit et indépendant » */
.engagement-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-24);
	background-color: var(--color-navy-900);
	border-radius: var(--radius-card-mobile);
	color: var(--color-white);
}

.engagement-card__eyebrow {
	font-size: var(--text-caption-size);
	line-height: var(--text-caption-line);
	font-weight: 600;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: var(--color-mint-200); /* mint-500 dans Figma : texte sur navy → mint-200 (règle projet) */
}

.engagement-card__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-mobile-h3-size);
	line-height: var(--text-mobile-h3-line);
}

.engagement-card__text {
	font-size: var(--text-body-md-size);
	line-height: var(--text-body-md-relaxed-line);
	opacity: 0.85;
}

@media (min-width: 1200px) {
	.engagement-card {
		padding: var(--space-32);
		border-radius: var(--radius-lg);
	}

	.engagement-card__title {
		font-size: var(--text-panel-title-size);
		line-height: var(--text-panel-title-line);
	}
}

.revendiquer-aide {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding-inline: var(--space-8);
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	color: var(--color-gray-700);
}

.revendiquer-aide a {
	align-self: flex-start;
	font-weight: 600;
	color: var(--color-navy-900);
}

.revendiquer-aide a:hover {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.progress-card__fill {
		transition: none;
	}
}

/* ==========================================================================
   Page Contact — Figma « Ready to dev » 182:10248 (desktop) / 182:10533 (mobile)
   Points de rupture : 768 px (intérieur du formulaire, sidebar en 2 colonnes), 1100 px
   (hero desktop, comme le reste du thème), 1200 px (formulaire | sidebar).
   ========================================================================== */

.contact {
	background-color: var(--color-white); /* frames neutral/white, body du thème en bg-light */
}

/* ---------- Hero (182:10250 / 182:10535) ---------- */
.contact-hero {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding-block: var(--space-32) var(--space-8);
}

.contact-hero .breadcrumb__list {
	line-height: normal; /* Breadcrumbs 156:6358 : interligne automatique (17 px) */
}

.contact-hero__title {
	font-size: var(--text-mobile-h1-size);
	line-height: var(--text-mobile-h1-line);
}

.contact-hero__intro {
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-base-line);
	color: var(--color-gray-700);
}

@media (min-width: 1100px) {
	.contact-hero {
		gap: var(--space-16);
		padding-block: var(--space-56) var(--space-16);
	}

	.contact-hero__title {
		font-size: var(--text-page-title-size);
		line-height: var(--text-page-title-line);
	}

	.contact-hero__intro {
		max-width: 760px;
		font-size: var(--text-body-lg-size);
		line-height: var(--text-body-lg-line);
	}
}

/* ---------- Mise en page (182:10254 / 182:10539) ---------- */
.contact-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding-block: var(--space-24) var(--space-48);
}

.contact-content__main {
	min-width: 0;
}

@media (min-width: 1200px) {
	.contact-content {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-48);
		padding-block: var(--space-56) var(--space-96);
	}

	.contact-content__main {
		flex: 1;
	}
}

/* ---------- Carte formulaire (182:10255 / 182:10540) ---------- */
.contact-form,
.contact-success {
	display: flex;
	flex-direction: column;
	gap: var(--space-28);
	padding: var(--space-24) var(--space-20);
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-card-mobile);
	box-shadow: var(--shadow-panel);
}

.contact-form__divider {
	height: 1px;
	margin: 0;
	border: 0;
	background-color: var(--color-gray-200);
}

.contact-form__sujet {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.contact-sujet {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.contact-sujet > legend {
	float: left; /* legend dans le flux flex du fieldset */
	width: 100%;
	padding: 0;
	line-height: normal; /* 182:10257 : interligne automatique */
}

.contact-sujet__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.contact-sujet.is-error .choice-chip {
	border-color: var(--color-error);
}

/* Encart organisme (182:10265) : fond mint-100, lien navy souligné (12,1:1). */
.contact-encart {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: var(--space-16);
	background-color: var(--color-mint-100);
	border-radius: var(--radius-field);
	font-size: var(--text-body-sm-size);
	line-height: normal; /* 182:10265 : interligne automatique */
	color: var(--color-gray-700);
}

.contact-encart__title {
	font-size: var(--text-body-md-size);
	font-weight: 600;
	color: var(--color-navy-900);
}

.contact-encart__link {
	align-self: flex-start;
	font-weight: 600;
	color: var(--color-navy-900);
	text-decoration: underline;
}

.contact-form__champs {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.contact-form__row {
	display: grid;
	gap: var(--space-20);
}

/* « Lien vers la formation » : affiché seulement pour « Proposer une formation » et
   « Signaler une erreur », en CSS pur. Sans prise en charge de :has(), il reste visible
   (facultatif, ignoré côté serveur pour les autres sujets). */
@supports selector(:has(*)) {
	.contact-form .contact-form__lien {
		display: none;
	}

	.contact-form:has(#sujet-formation:checked, #sujet-erreur:checked) .contact-form__lien {
		display: flex;
	}
}

.contact-form__envoi {
	display: flex;
	flex-direction: column; /* mobile : bouton pleine largeur au-dessus de la mention */
	gap: var(--space-16);
}

.contact-form__submit {
	order: -1;
	width: 100%;
}

.contact-form__mention {
	font-size: var(--text-meta-size);
	line-height: var(--text-meta-line);
	color: var(--color-gray-700);
}

.contact-form__mention a {
	font-weight: 600;
	color: var(--color-navy-900);
	text-decoration: underline;
}

@media (min-width: 768px) {
	.contact-form,
	.contact-success {
		gap: var(--space-36);
		padding: var(--space-40);
		border-radius: var(--radius-lg);
	}

	.contact-sujet__choices {
		gap: var(--space-10);
	}

	.contact-encart {
		padding: var(--space-16) var(--space-20);
	}

	.contact-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.contact-form__envoi {
		flex-direction: row;
		align-items: center;
		gap: var(--space-24);
	}

	.contact-form__mention {
		flex: 1;
	}

	.contact-form__submit {
		order: 0;
		width: auto;
	}
}

/* ---------- Écran après envoi (non maquetté) ---------- */
.contact-success {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-16);
}

.contact-success__icon {
	display: flex;
	flex-shrink: 0;
	padding-top: var(--space-6);
	color: var(--color-mint-500); /* pictogramme non textuel ; l'état est porté par le titre */
}

.contact-success__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-base-line);
	color: var(--color-gray-700);
}

.contact-success__title {
	font-weight: 600;
	font-size: var(--text-panel-title-size);
	line-height: var(--text-panel-title-line);
}

.contact-success__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
}

/* ---------- Colonne latérale (182:10281 / 182:10566) ---------- */
.contact-sidebar {
	display: grid;
	gap: var(--space-24);
}

.contact-shortcuts {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
	padding: var(--space-24);
	background-color: var(--color-bg-light);
	border-radius: var(--radius-card-mobile);
}

.contact-shortcuts__title {
	font-weight: 600;
	font-size: var(--text-mobile-h3-size);
	line-height: var(--text-mobile-h3-line);
}

.contact-shortcuts__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-20);
}

.contact-shortcut {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-14);
}

.contact-shortcut__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-card-mobile);
	font-family: var(--font-heading);
	font-size: var(--text-body-base-size);
	line-height: var(--text-body-sm-line);
	font-weight: 600;
	color: var(--color-navy-900);
}

.contact-shortcut__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	min-width: 0;
	line-height: var(--text-body-sm-line);
}

.contact-shortcut__link {
	font-size: var(--text-body-md-size);
	font-weight: 600;
	color: var(--color-navy-900);
	text-decoration: underline;
}

/* Lien étendu à toute la ligne (pastille et description comprises). */
.contact-shortcut__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.contact-shortcut:has(.contact-shortcut__link:focus-visible) {
	outline: 3px solid var(--color-navy-900);
	outline-offset: 4px;
	border-radius: var(--radius-checkbox);
}

.contact-shortcut__link:focus-visible {
	outline: none;
}

.contact-shortcut:hover .contact-shortcut__icon {
	border-color: var(--color-gray-400);
}

.contact-shortcut__description {
	font-size: var(--text-body-sm-size);
	color: var(--color-gray-700);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	/* Tablette (interpolation, voir decisions.md) : « Avant de nous écrire » | « Délai de
	   réponse » + aide. */
	.contact-sidebar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.contact-shortcuts {
		grid-row: span 2;
	}
}

@media (min-width: 1200px) {
	.contact-sidebar {
		flex: 0 0 400px;
	}

	.contact-shortcuts {
		padding: var(--space-32);
		border-radius: var(--radius-lg);
	}

	.contact-shortcuts__title {
		font-size: var(--text-panel-title-size);
		line-height: var(--text-panel-title-line);
	}
}

/* ==========================================================================
   Page À propos — Figma « Ready to dev » 193:10790 (desktop) / 193:11067 (mobile)
   Points de rupture : 768 px (cartes membres Horizontal, cartes CTA côte à côte), 900 px
   (engagements en 3 colonnes, cartes desktop), 1100 px (typographie et marges desktop, comme
   les héros du thème), 1200 px (récit | En bref, cartes membres en 2 colonnes).
   ========================================================================== */

.about {
	background-color: var(--color-white); /* frames neutral/white, body du thème en bg-light */
}

/* ---------- Titres et en-têtes de section communs ---------- */
.about-heading {
	font-size: var(--text-mobile-h2-size);
	line-height: var(--text-mobile-h2-line);
}

.about-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.about-section-head__intro {
	color: var(--color-gray-700);
}

@media (min-width: 1100px) {
	.about-heading {
		font-size: var(--text-heading-h2-size);
		line-height: var(--text-heading-h2-line);
	}

	.about-section-head {
		gap: var(--space-12);
	}

	.about-section-head__intro {
		font-size: var(--text-body-lg-size);
		line-height: var(--text-body-lg-line);
	}
}

/* ---------- Notre histoire (193:10796 / 193:11073) ---------- */
.about-story__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-32);
	padding-block: var(--space-48);
}

.about-story__recit {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	min-width: 0;
}

.about-story__eyebrow {
	font-weight: 500;
	font-size: var(--text-body-sm-size);
	line-height: var(--text-body-sm-line);
	letter-spacing: var(--text-kicker-tracking);
	text-transform: uppercase;
	color: var(--color-gray-700);
}

.about-story__lead,
.about-story__text {
	color: var(--color-gray-700);
}

@media (min-width: 1100px) {
	.about-story__inner {
		padding-block: var(--space-96);
	}

	.about-story__recit {
		gap: var(--space-20);
	}

	.about-story__lead {
		font-size: var(--text-body-lg-size);
		line-height: var(--text-body-lg-line);
	}
}

@media (min-width: 1200px) {
	.about-story__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--space-80);
	}

	.about-story__recit {
		flex: 1;
	}

	.about-story__aside {
		flex: 0 0 var(--width-aside);
	}
}

/* ---------- Nos engagements (193:10815 / 193:11092) ---------- */
.about-commitments {
	background-color: var(--color-bg-light);
}

.about-commitments__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding-block: var(--space-48);
}

.about-commitments__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

.about-commitments__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-24);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
	background-color: var(--color-white);
}

.about-commitments__head {
	display: flex;
	align-items: center;
	gap: var(--space-12);
}

.about-commitments__badge {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--size-step-badge-mobile);
	height: var(--size-step-badge-mobile);
	border-radius: var(--radius-full);
	background-color: var(--color-mint-100);
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--text-mobile-fact-size);
	line-height: var(--text-mobile-fact-line);
}

.about-commitments__title {
	font-weight: 600;
	font-size: var(--text-mobile-h3-size);
	line-height: var(--text-mobile-h3-line);
	min-width: 0;
}

.about-commitments__text {
	color: var(--color-gray-700);
}

@media (min-width: 900px) {
	.about-commitments__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-24);
	}

	.about-commitments__card {
		gap: var(--space-16);
		padding: var(--space-32);
	}

	.about-commitments__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-16);
	}

	.about-commitments__badge {
		width: var(--size-step-badge);
		height: var(--size-step-badge);
		font-size: var(--text-h4-size);
		line-height: var(--text-h4-line);
	}

	.about-commitments__title {
		font-size: var(--text-heading-h3-size);
		line-height: var(--text-heading-h3-line);
	}
}

@media (min-width: 1100px) {
	.about-commitments__inner {
		gap: var(--space-40);
		padding-block: var(--space-88) var(--space-96);
	}
}

/* ---------- Qui sommes-nous ? (193:10835 / 193:11115) ---------- */
.about-team__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	padding-block: var(--space-48);
}

.about-team__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.about-team__item {
	display: flex; /* cartes de même hauteur sur une ligne */
}

.about-team__item > .member-card {
	flex: 1;
}

@media (min-width: 1100px) {
	.about-team__inner {
		gap: var(--space-40);
		padding-block: var(--space-96);
	}
}

@media (min-width: 1200px) {
	.about-team__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Participer (193:10852 / 193:11121) : pas de marge haute ---------- */
.about-cta__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding-bottom: var(--space-48);
}

@media (min-width: 768px) {
	.about-cta__inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-24);
	}
}

@media (min-width: 1100px) {
	.about-cta__inner {
		padding-bottom: var(--space-96);
	}
}