/* ==========================================================================
   Site4 — page « Nous connaître » (maquette Figma node 129:3519, contenu 1071.58 px)
   Propriétés logiques (inline-start/end) : la mise en page s'inverse d'elle-même en arabe.
   ========================================================================== */

.page-about {
	--ab-ink: #152236;
	--ab-muted: #647080;
	--ab-line: #dde3ea;

	margin-bottom: 87px;
	color: var(--ab-ink);
}

.about-wrap {
	width: min(1071.58px, 100% - 2 * (var(--gutter) + var(--inner-gutter)));
	margin-inline: auto;
}

/* Bandes pleine largeur sur fond gris */
.about-band {
	background: #f5f7fa;
}

/* Sur-titres */
.about-eyebrow {
	font-size: 9.568px;
	font-weight: 700;
	line-height: 14.352px;
	letter-spacing: 1.5308px;
	color: var(--blue);
	text-transform: uppercase;
}

.about-eyebrow--muted {
	color: var(--ab-muted);
}

.about-eyebrow--lg {
	font-size: 12.438px;
	line-height: 23.01px;
}

.about-eyebrow--light {
	color: #acc6ed;
}

/* Photos aux coins arrondis avec dégradé bas */
.about-photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 12.438px;
}

.about-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 25, 47, 0) 55%, rgba(8, 25, 47, 0.55) 100%);
	pointer-events: none;
}

/* ---------- Qui sommes-nous ? ---------- */

.about-intro {
	padding: 91.64px 0 107.16px;
}

.about-intro .breadcrumb ol {
	min-height: 17.22px;
	font-size: 11.481px;
	line-height: 17.222px;
}

.about-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 420.32px) minmax(0, 580.46px);
	justify-content: space-between;
	align-items: center;
	margin-top: 67.83px;
}

.about-intro__text .about-eyebrow {
	font-size: 12.438px;
	line-height: 23.01px;
}

.about-intro__title {
	font-size: 51px;
	font-weight: 600;
	line-height: 63.759px;
	letter-spacing: -2.2006px;
}

.about-intro__title span {
	display: block;
	color: var(--blue);
}

.about-intro__lead {
	padding-top: 30.62px;
	font-size: 17.222px;
	font-weight: 500;
	line-height: 26.694px;
	letter-spacing: -0.3349px;
}

.about-intro__body {
	padding-top: 17.22px;
	font-size: 13.71px;
	line-height: 23.01px;
	color: var(--ab-muted);
}

.about-link {
	display: inline-flex;
	align-items: center;
	gap: 30.62px;
	margin-top: 26.79px;
	padding-bottom: 7.65px;
	border-bottom: 0.957px solid #cad5e7;
	font-size: 12px;
	line-height: 17.222px;
	color: var(--blue);
	transition: border-color 0.25s;
}

.about-link:hover {
	border-color: var(--blue);
}

.about-link img {
	width: 16.27px;
	height: 16.27px;
}

.about-intro__photo {
	height: 511.87px;
}

.about-intro__caption {
	position: absolute;
	z-index: 1;
	inset-inline-start: 26.79px;
	bottom: 24.88px;
	display: flex;
	align-items: center;
	gap: 16.27px;
	color: #fff;
}

.about-intro__num {
	display: grid;
	place-items: center;
	flex: none;
	width: 43.05px;
	height: 43.05px;
	border: 0.957px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	font-size: 10.524px;
	line-height: 15.79px;
}

.about-intro__caption > span:last-child {
	font-size: 11.481px;
	line-height: 17.796px;
}

.about-intro__caption strong {
	display: block;
	font-size: 13.395px;
	font-weight: 500;
}

/* ---------- Gouvernance ---------- */

.about-gov {
	padding: 107px 0 111.97px;
}

.about-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
}

.about-gov__title {
	padding-top: 19.14px;
	font-size: 39px;
	font-weight: 600;
	line-height: 52.24px;
	letter-spacing: -2.2006px;
}

.about-gov__title span {
	display: block;
	padding: 7px 0 6.97px;
	font-family: "Manrope", var(--font);
	font-size: 20.092px;
	font-weight: 400;
	line-height: 28.129px;
	letter-spacing: -0.4784px;
	color: var(--ab-muted);
}

.about-gov__text {
	flex: none;
	width: 432px;
	margin-top: 42px;
	font-size: 12.438px;
	line-height: 23.01px;
	color: var(--ab-muted);
}

/* Organigramme */
.org {
	margin-top: 45.93px;
	padding: 40.18px 34.44px 23.92px;
	border: 0.957px solid var(--ab-line);
	border-radius: 22.962px;
	background: linear-gradient(157deg, #fff 6.17%, #edf2f8 93.83%);
}

.org-board {
	position: relative;
	display: flex;
	align-items: center;
	gap: 22.96px;
	width: min(621.9px, 100%);
	min-height: 181.79px;
	margin: 0 auto;
	padding: 30.62px;
	overflow: hidden;
	border-radius: 13.395px;
	background: var(--blue);
	color: #fff;
}

.org-board__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 61.23px;
	height: 61.23px;
	border: 0.957px solid rgba(255, 255, 255, 0.25);
	border-radius: 12.438px;
	background: rgba(255, 255, 255, 0.1);
}

.org-board__icon img {
	width: 28.7px;
	height: 28.7px;
}

.org-board > div {
	position: relative;
	z-index: 1;
	max-width: 392.28px;
}

.org-board__eyebrow {
	font-size: 7.654px;
	font-weight: 700;
	line-height: 9.185px;
	letter-spacing: 1.2916px;
}

.org-board__title {
	padding-top: 9.57px;
	font-size: 22.006px;
	font-weight: 600;
	line-height: 27.507px;
	letter-spacing: -0.3827px;
}

.org-board__text {
	padding-top: 11.48px;
	font-size: 11.481px;
	line-height: 18.944px;
}

.org-board__watermark {
	position: absolute;
	inset-inline-end: -26px;
	top: 70px;
	width: 138.73px;
	height: auto;
	opacity: 0.07;
	transform: rotate(-12deg);
}

/* Traits reliant l'instance principale aux pôles */
.org-branches {
	position: relative;
	width: min(670.52px, 67%);
	height: 72.71px;
	margin: 0 auto;
	border-bottom: 0.957px solid #b9c9dd;
}

.org-branches::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 0.957px;
	height: 71.76px;
	background: #b9c9dd;
}

.org-branches span {
	position: absolute;
	bottom: -4.79px;
	width: 8.61px;
	height: 8.61px;
	border: 1.914px solid #f5f7fa;
	border-radius: 50%;
	background: var(--blue);
}

.org-branches span:nth-child(1) {
	left: -3.83px;
}

.org-branches span:nth-child(2) {
	left: calc(50% - 4.3px);
}

.org-branches span:nth-child(3) {
	right: -3.83px;
}

.org-poles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 21.05px;
	padding-top: 21.05px;
}

.org-pole {
	position: relative;
	min-height: 251.29px;
	padding: 25.83px 22.96px 36.3px;
	overflow: hidden;
	border: 0.957px solid #dce5f0;
	border-radius: 13.395px;
	background: rgba(255, 255, 255, 0.94);
}

.org-pole::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 76.54px;
	background: linear-gradient(180deg, rgba(237, 242, 248, 0.75), rgba(237, 242, 248, 0));
}

.org-pole > * {
	position: relative;
}

.org-pole__icon {
	display: grid;
	place-items: center;
	width: 49.75px;
	height: 49.75px;
	border-radius: 50%;
	background: #e9f0fa;
}

.org-pole__icon img {
	width: 22.96px;
	height: 22.96px;
}

.org-pole__eyebrow {
	padding-top: 23.92px;
	font-size: 8.611px;
	font-weight: 700;
	line-height: 12.916px;
	letter-spacing: 1.2916px;
	color: var(--blue);
}

.org-pole__title {
	padding-top: 9.57px;
	font-size: 18.179px;
	font-weight: 600;
	line-height: 22.723px;
	letter-spacing: -0.3827px;
}

.org-pole__text {
	padding-top: 11.48px;
	font-size: 11.481px;
	line-height: 18.944px;
	color: var(--ab-muted);
}

.org-pole__num {
	position: absolute;
	inset-inline-end: 15.1px;
	bottom: 12.4px;
	font-size: 23.919px;
	font-weight: 500;
	line-height: 23.919px;
	color: #d7e0ec;
}

.org-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8.61px;
	padding-top: 25.83px;
	font-size: 9.568px;
	line-height: 16.265px;
	color: var(--ab-muted);
	text-align: center;
}

.org-note img {
	flex: none;
	width: 16.27px;
	height: 16.27px;
}

/* ---------- Mission ---------- */

.about-mission {
	display: grid;
	grid-template-columns: minmax(0, 495.13px) minmax(0, 495.13px);
	justify-content: space-between;
	align-items: center;
	padding: 119.6px 0;
	scroll-margin-top: 24px;
}

.about-mission__photo {
	height: 545.36px;
}

.about-mission__photo::after {
	background: linear-gradient(180deg, rgba(8, 25, 47, 0) 60%, rgba(8, 25, 47, 0.55) 100%);
}

.about-mission__caption {
	position: absolute;
	z-index: 1;
	inset-inline-start: 26.79px;
	bottom: 25.83px;
	font-size: 9.568px;
	line-height: 14.352px;
	letter-spacing: 1.3395px;
	color: #fff;
}

.about-mission__title {
	padding-top: 19.14px;
	font-size: 49.752px;
	font-weight: 600;
	line-height: 52.24px;
	letter-spacing: -2.2006px;
}

.about-mission__quote {
	padding-top: 33.49px;
	font-size: 35.401px;
	font-weight: 500;
	line-height: 45.313px;
	letter-spacing: -1.2438px;
}

.about-mission__quote span {
	color: var(--blue);
}

.about-mission__body {
	padding-top: 23.92px;
	font-size: 12.438px;
	line-height: 23.632px;
	color: var(--ab-muted);
}

.about-key {
	display: grid;
	grid-template-columns: 114.81px 1fr;
	align-items: center;
	gap: 21.05px;
	margin-top: 38.27px;
	padding: 21.05px 0;
	padding-inline-start: 23.92px;
	border-inline-start: 1.914px solid var(--blue);
	background: linear-gradient(90deg, #f4f7fb, rgba(244, 247, 251, 0));
}

.about-key strong {
	font-size: 12.438px;
	font-weight: 500;
}

.about-key span {
	font-size: 10.524px;
	line-height: 16.839px;
	color: var(--ab-muted);
}

/* ---------- Vision ---------- */

.about-vision {
	position: relative;
	padding: 104.98px 0 105.3px;
	overflow: hidden;
	background: #10223b;
	color: #fff;
}

/* Halo bleu et cercles décoratifs */
.about-vision::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 39.6% 98.8% at 80% 20%, rgba(62, 114, 197, 0.22) 0%, rgba(62, 114, 197, 0) 100%);
	pointer-events: none;
}

.about-vision::after {
	content: "";
	position: absolute;
	top: -239.45px;
	left: calc(50% + 528.72px);
	width: 478.39px;
	height: 478.39px;
	border: 0.957px solid rgba(144, 178, 227, 0.14);
	border-radius: 50%;
	pointer-events: none;
}

.about-vision__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 378.96px) minmax(0, 587.38px);
	justify-content: space-between;
	align-items: center;
}

.about-vision__title {
	padding-top: 19.14px;
	font-size: 74.628px;
	font-weight: 600;
	line-height: 70.15px;
	letter-spacing: -2.2006px;
}

.about-vision__title span {
	display: block;
	color: #6f9de5;
}

.about-vision__body {
	position: relative;
	padding-inline-start: 52.62px;
	border-inline-start: 0.957px solid rgba(255, 255, 255, 0.2);
}

/* Guillemet décoratif */
.about-vision__body::before {
	content: "“";
	position: absolute;
	top: -19.14px;
	inset-inline-start: 22.96px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 57.406px;
	line-height: normal;
	color: #7ba8ed;
}

.about-vision__quote {
	margin: 0;
	font-family: "Manrope", var(--font);
	font-size: 28.703px;
	font-weight: 400;
	line-height: 44.49px;
	letter-spacing: -0.5741px;
	color: #e8eef7;
}

.about-vision__quote span {
	color: #8bb5f4;
}

.about-vision__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 11.48px;
	padding-top: 36.36px;
}

.about-vision__tags li {
	padding: 9.57px 15.31px;
	border: 0.957px solid rgba(255, 255, 255, 0.16);
	border-radius: 47.84px;
	font-size: 9.568px;
	line-height: 14.352px;
	letter-spacing: 0.7654px;
	color: #bdcadb;
}

/* ---------- Valeurs ---------- */

.about-values {
	display: grid;
	grid-template-columns: minmax(0, 347.76px) minmax(0, 652.07px);
	justify-content: space-between;
	align-items: start;
	padding: 119.6px 0 119.82px;
}

.about-values__eyebrow {
	font-size: 22.006px;
	font-weight: 600;
	line-height: 23.106px;
	letter-spacing: -0.6697px;
	color: var(--blue);
}

.about-values__title {
	padding-top: 19.14px;
	font-size: 45.925px;
	font-weight: 600;
	line-height: 51.436px;
	letter-spacing: -1.9135px;
}

.about-values__text {
	max-width: 287.03px;
	padding-top: 23.92px;
	font-size: 12.438px;
	line-height: 23.01px;
	color: var(--ab-muted);
}

.about-values__tagline {
	display: flex;
	align-items: center;
	gap: 16.27px;
	margin-top: 33.49px;
	padding-top: 23.92px;
	border-top: 0.957px solid var(--ab-line);
	font-size: 10.524px;
	line-height: 18.944px;
	color: var(--ab-muted);
}

.about-values__tagline img {
	flex: none;
	width: 30.62px;
	height: 30.62px;
}

.about-values__tagline strong {
	display: block;
	font-weight: 400;
	color: var(--ab-ink);
}

.about-values__note {
	max-width: 287.03px;
	padding-top: 22.96px;
	font-size: 9.568px;
	line-height: 16.265px;
	color: var(--ab-muted);
}

.about-values__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17.22px;
}

.value-card {
	display: flex;
	flex-direction: column;
	min-height: 272.68px;
	padding: 26.79px;
	border: 0.957px solid var(--ab-line);
	border-radius: 15.308px;
	background: linear-gradient(149deg, #fff 6.17%, #edf2f8 93.83%);
}

.value-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.value-card__icon {
	display: grid;
	place-items: center;
	width: 44.01px;
	height: 44.01px;
	border: 0.957px solid var(--ab-line);
	border-radius: 12.438px;
	background: #fff;
}

.value-card__icon img {
	width: 21.05px;
	height: 21.05px;
}

.value-card__num {
	padding-top: 4.78px;
	font-size: 10.524px;
	line-height: 15.787px;
	letter-spacing: 0.9568px;
	color: var(--ab-muted);
}

.value-card__title {
	padding-top: 30.62px;
	font-size: 21.049px;
	font-weight: 500;
	line-height: 25.47px;
	letter-spacing: -0.5741px;
}

.value-card__text {
	padding-top: 11.48px;
	font-size: 11.481px;
	line-height: 20.666px;
	color: var(--ab-muted);
}

.value-card__dash {
	width: 22.96px;
	height: 1.914px;
	margin-top: 22.96px;
	background: var(--blue);
}

/* 1re valeur mise en avant : fond bleu, contenu blanc */
.value-card--featured {
	border-color: var(--blue);
	background: var(--blue);
	color: #fff;
}

.value-card--featured .value-card__icon {
	border-color: rgba(255, 255, 255, 0.3);
	background: transparent;
}

.value-card--featured .value-card__icon img {
	filter: brightness(0) invert(1);
}

.value-card--featured .value-card__num,
.value-card--featured .value-card__text {
	color: #fff;
}

.value-card--featured .value-card__dash {
	background: #fff;
}

/* ---------- Domaines d'intervention ---------- */

.about-domains {
	padding: 114.81px 0 118.78px;
}

.about-domains__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
}

.about-domains__title {
	padding-top: 19.14px;
	font-size: 49.752px;
	font-weight: 600;
	line-height: 52.24px;
	letter-spacing: -2.2006px;
}

.about-domains__text {
	flex: none;
	width: 344.44px;
	padding-bottom: 3.83px;
	font-size: 12.438px;
	line-height: 23.01px;
	color: var(--ab-muted);
}

.about-domains__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17.22px;
	margin-top: 57.42px;
}

.domain-card {
	position: relative;
	height: 411.41px;
	overflow: hidden;
	border-radius: 11.481px;
	background: #10223b;
	color: #fff;
}

.domain-card__img {
	position: absolute;
	inset: 0;
}

.domain-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 25, 47, 0.08) 20%, rgba(8, 25, 47, 0.88) 100%);
	pointer-events: none;
}

.domain-card__top,
.domain-card__body,
.domain-card__link {
	position: absolute;
	z-index: 1;
}

.domain-card__top {
	top: 23.92px;
	inset-inline: 25.83px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.domain-card__icon {
	display: grid;
	place-items: center;
	width: 40.18px;
	height: 40.18px;
	border: 0.957px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	-webkit-backdrop-filter: blur(7.65px);
	backdrop-filter: blur(7.65px);
}

.domain-card__icon img {
	width: 19.14px;
	height: 19.14px;
}

.domain-card__num {
	font-size: 9.568px;
	line-height: 14.352px;
	letter-spacing: 1.1481px;
}

.domain-card__body {
	bottom: 25.83px;
	inset-inline-start: 25.83px;
	/* Place réservée au bouton rond : sur une carte étroite, le texte ne passe pas dessous. */
	inset-inline-end: calc(25.83px + 36.36px + 16px);
	max-width: 373.14px;
}

.domain-card__title {
	padding-bottom: 12.44px;
	font-size: 23.919px;
	font-weight: 500;
	line-height: 28.7px;
	letter-spacing: -0.6697px;
}

.domain-card__text {
	max-width: 354px;
	font-size: 10.524px;
	line-height: 17.892px;
	color: #d8e0e9;
}

.domain-card__link {
	inset-inline-end: 25.83px;
	bottom: 26.79px;
	display: grid;
	place-items: center;
	width: 36.36px;
	height: 36.36px;
	border-radius: 50%;
	background: #fff;
}

.domain-card__link img {
	width: 15.31px;
	height: 15.31px;
}

/* ==========================================================================
   Tablette
   ========================================================================== */

@media (max-width: 1023px) {
	.about-intro {
		padding-top: 48px;
	}

	.about-intro__grid,
	.about-mission,
	.about-vision__grid,
	.about-values {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.about-intro__photo {
		height: auto;
		aspect-ratio: 580.46 / 511.87;
	}

	.about-head,
	.about-domains__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.about-gov__text,
	.about-domains__text {
		width: auto;
		max-width: 520px;
		margin-top: 0;
	}

	.org-poles {
		grid-template-columns: 1fr;
	}

	/* Cartes empilées : pas de traits d'organigramme, l'écart entre les cartes suffit */
	.org-branches {
		display: none;
	}

	.org-pole {
		min-height: 0;
	}

	.about-mission__photo {
		height: auto;
		aspect-ratio: 495.13 / 545.36;
		max-height: 560px;
	}

	.about-vision__body {
		padding-top: 24px;
	}

	.about-values__text,
	.about-values__note {
		max-width: 520px;
	}
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767px) {
	.page-about {
		margin-bottom: 40px;
	}

	.about-intro {
		padding: 24px 0 64px;
	}

	.about-intro__grid {
		margin-top: 32px;
		gap: 32px;
	}

	.about-intro__title {
		font-size: 40px;
		line-height: 48px;
		letter-spacing: -1.6px;
	}

	.about-gov,
	.about-domains {
		padding: 64px 0;
	}

	.about-gov__title {
		font-size: 32px;
		line-height: 40px;
	}

	.org {
		padding: 20px 16px;
	}

	.org-board {
		flex-direction: column;
		align-items: flex-start;
		padding: 22px;
	}

	.about-mission,
	.about-values {
		padding: 64px 0;
	}

	.about-mission__title,
	.about-domains__title {
		font-size: 36px;
		line-height: 42px;
	}

	.about-mission__quote {
		font-size: 26px;
		line-height: 34px;
	}

	.about-key {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.about-vision {
		padding: 64px 0;
	}

	.about-vision__title {
		font-size: 52px;
		line-height: 52px;
	}

	.about-vision__body {
		padding-inline-start: 24px;
	}

	.about-vision__quote {
		font-size: 22px;
		line-height: 34px;
	}

	.about-values__title {
		font-size: 36px;
		line-height: 42px;
	}

	.about-values__grid,
	.about-domains__grid {
		grid-template-columns: 1fr;
	}

	.value-card {
		min-height: 0;
	}

	.about-domains__grid {
		margin-top: 32px;
	}

	.domain-card {
		height: 360px;
	}
}

/* ==========================================================================
   Animations (réservées aux visiteurs qui n'ont pas demandé à les réduire)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.about-photo img,
	.domain-card__img {
		transition: transform 0.9s var(--ease-out);
	}

	.about-photo:hover img,
	.domain-card:hover .domain-card__img {
		transform: scale(1.05);
	}

	.about-link img,
	.domain-card__link img {
		transition: transform 0.35s var(--ease-out);
	}

	.about-link:hover img,
	.domain-card:hover .domain-card__link img {
		transform: translateX(4px);
	}

	.domain-card__link {
		transition: transform 0.35s var(--ease-out);
	}

	.domain-card:hover .domain-card__link {
		transform: scale(1.08);
	}

	.org-board,
	.org-pole,
	.value-card {
		transition: transform 0.45s var(--ease-out), box-shadow 0.45s;
	}

	.org-pole:hover,
	.value-card:hover {
		box-shadow: 0 14px 30px rgba(16, 34, 59, 0.1);
		transform: translateY(-4px);
	}

	.value-card__dash {
		transition: width 0.45s var(--ease-out);
	}

	.value-card:hover .value-card__dash {
		width: 44px;
	}

	.about-vision__tags li {
		transition: border-color 0.25s, color 0.25s;
	}

	.about-vision__tags li:hover {
		border-color: rgba(255, 255, 255, 0.4);
		color: #fff;
	}

	/* Traits de l'organigramme qui se tracent à l'apparition */
	.js .org[data-reveal] .org-branches {
		clip-path: inset(-10px 50% -10px 50%);
		transition: clip-path 0.9s var(--ease-out) 0.35s;
	}

	.js .org.is-revealed .org-branches {
		clip-path: inset(-10px -10px -10px -10px);
	}
}