/*
 * "L'association", the pastel direction, plus the motion the designer asked for.
 *
 * The banner, index grid, scrolling word strip and closing band are in pastel.css,
 * loaded alongside this.
 *
 * Motion contract: assets/js/motion.js sets data-ageca-motion on <html> before it
 * does anything else, and every rule that hides something is gated on that flag.
 * A blocked, failed or reduced-motion visit therefore leaves the page fully
 * visible rather than blank. Never write a hiding rule here without that gate.
 */

/*
 * This frame sets the page title in Black where Nos espaces uses Extra Bold, so the
 * weight is corrected here rather than in the shared sheet.
 */
.ageca-xhero__title {
	font-weight: 900;
}

/* ------------------------------------------------------------ mission block */

.ageca-arow {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--60);
	max-width: var(--ageca-x-content);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--130) var(--ageca-x-inset);
}

@media (min-width: 1000px) {

	/* 500px card against the rest of the 1052px inner column, as the frame draws. */
	.ageca-arow {
		grid-template-columns: 31.25rem 1fr;
	}
}

.ageca-arow__side {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

.ageca-amission {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--100);
	border-radius: 2.1875rem;
	background-color: var(--wp--preset--color--navy);
}

.ageca-amission__icon,
.ageca-aacc__icon,
.ageca-atl__icon {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	animation: ageca-float 4s ease-in-out infinite;
}

.ageca-amission__icon svg,
.ageca-aacc__icon svg,
.ageca-atl__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ageca-amission__icon { color: var(--wp--preset--color--yellow); }
.ageca-aacc__icon { color: var(--wp--preset--color--white); }
.ageca-atl__icon { color: var(--wp--preset--color--ink); }

@keyframes ageca-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {

	.ageca-amission__icon,
	.ageca-aacc__icon,
	.ageca-atl__icon {
		animation: none;
	}
}

.ageca-amission__title {
	margin: 0;
	color: var(--wp--preset--color--yellow);
	font-size: clamp(1.5rem, 1.1rem + 1.7vw, 1.75rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

.ageca-amission__text {
	max-width: 27.125rem;
	margin: 0;
	color: var(--wp--preset--color--rose);
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: 0;
}

/*
 * Set larger than the sentence around it, so the line-height has to hold it.
 *
 * The width is fixed at the final digit count and the digits are tabular, so every
 * value on the way up occupies the same box and the sentence never reflows. It is
 * exactly that many characters wide, so there is no gap beside the finished number.
 */
.ageca-amission__figure {
	display: inline-block;
	min-width: calc(var(--ageca-digits, 2) * 1ch);
	color: var(--wp--preset--color--yellow);
	font-size: 1.375rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/*
 * The figures sit at the foot of the card. margin-top: auto is what pushes them
 * there and takes up the slack when the mission sentence is short.
 */
.ageca-amission__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.ageca-astat {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 1rem;
}

.ageca-astat__n {
	display: block;
	color: var(--wp--preset--color--yellow);
	font-size: 1.75rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.ageca-astat__l {
	display: block;
	margin-top: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--rose);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 300;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- values card */

.ageca-avalues {
	padding: var(--wp--preset--spacing--90);
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 2.1875rem;
}

.ageca-avalues__title {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.ageca-avalues__list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ageca-avalues__list li {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	line-height: 1.5;
	transition: color 200ms ease;
}

.ageca-avalues__list li::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--navy);
}

.ageca-avalues__list li:hover {
	color: var(--wp--preset--color--navy);
}

/* ---------------------------------------------------------------- photo card */

.ageca-aphoto {
	position: relative;
	display: block;
	overflow: hidden;
	flex: 1;
	min-height: 12.3rem;
	border-radius: 2.1875rem;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.ageca-aphoto__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 12.3rem;
	object-fit: cover;
	transform: scale(1.05);
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ageca-aphoto:hover .ageca-aphoto__img,
.ageca-aphoto:focus-visible .ageca-aphoto__img {
	transform: scale(1);
}

/* Keeps the caption legible whatever the photograph is doing behind it. */
.ageca-aphoto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 60%);
}

.ageca-aphoto__caption {
	position: absolute;
	bottom: var(--wp--preset--spacing--50);
	left: var(--wp--preset--spacing--50);
	z-index: 1;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.ageca-aphoto__caption::after {
	content: " →";
}

@media (prefers-reduced-motion: reduce) {

	.ageca-aphoto__img {
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------------ timeline */

.ageca-atl {
	max-width: var(--ageca-x-content);
	margin: 0 auto;
	padding: 0 var(--ageca-x-inset) var(--wp--preset--spacing--130);
}

.ageca-atl__head {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	padding-top: var(--wp--preset--spacing--120);
	border-top: 2px solid var(--wp--preset--color--ink);
}

.ageca-atl__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.ageca-atl__body {
	position: relative;
	margin-top: var(--wp--preset--spacing--120);
	padding-left: var(--wp--preset--spacing--60);
}

/*
 * The line draws itself downward once the section is in view. It is decoration, so
 * it starts at full height whenever the motion flag is absent.
 */
.ageca-atl__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3.5px;
	border-radius: 999px;
	background-color: var(--wp--preset--color--navy);
}

html[data-ageca-motion] .ageca-atl__line {
	animation: ageca-draw 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ageca-draw {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

html[data-ageca-motion] .ageca-atl__line {
	transform-origin: top;
}

.ageca-atl__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ageca-atl__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	position: relative;
	padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--wp--preset--color--rose);
}

@media (min-width: 700px) {

	.ageca-atl__row {
		grid-template-columns: 6.875rem 1fr;
		gap: var(--wp--preset--spacing--50);
		align-items: center;
	}
}

.ageca-atl__dot {
	position: absolute;
	top: var(--wp--preset--spacing--50);
	/*
	 * Centred on the line: back across the row's padding, back half the dot's full
	 * 21px (17px plus the 2px border either side), forward half the line's 3.5px.
	 * Change the size or the border and these numbers have to move with it.
	 */
	left: calc(var(--wp--preset--spacing--60) * -1 - 10.5px + 1.75px);
	width: 17px;
	height: 17px;
	border: 2px solid var(--wp--preset--color--ink);

	/* The frame's radius is exactly half the box on both markers, so: circles. */
	border-radius: 50%;
}

.ageca-atl__dot--yellow { background-color: var(--wp--preset--color--yellow); }
.ageca-atl__dot--sky { background-color: var(--wp--preset--color--sky); }

.ageca-atl__year {
	color: var(--wp--preset--color--navy);
	font-size: clamp(1.125rem, 0.9rem + 0.9vw, 1.25rem);
	font-weight: 900;
	letter-spacing: -0.02em;
}

.ageca-atl__text {
	color: var(--wp--preset--color--muted);
	line-height: 1.6;
}

@media (min-width: 700px) {

	.ageca-atl__text {
		padding-left: var(--wp--preset--spacing--50);
		border-left: 1px solid var(--wp--preset--color--rose);
	}
}

/* ------------------------------------------------------------ accompagnement */

.ageca-aacc {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	align-items: flex-start;
	max-width: var(--ageca-x-content);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--120) var(--ageca-x-inset);
	color: var(--wp--preset--color--white);
}

.ageca-aacc__title {
	max-width: 38rem;
	margin: 0;
	font-size: clamp(1.75rem, 1.05rem + 3vw, 2.28rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

.ageca-aacc__text {
	max-width: 35rem;
	margin: 0;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: 0;
}

/* Colour and size only; the wipe and the arrow come from .ageca-wipe. */
.ageca-abtn {
	padding: 1rem 2rem;
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body-small);
	font-weight: 800;
	letter-spacing: 0.15em;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ partners */

.ageca-apartners {
	max-width: var(--ageca-x-content);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--130) var(--ageca-x-inset);
}

.ageca-apartners__title {
	margin: 0 0 var(--wp--preset--spacing--100);
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.ageca-apartners__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 800px) {

	.ageca-apartners__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ageca-apartner {
	display: flex;
	min-height: 4.75rem;
}

/*
 * The face fills the whole tile so the coloured block is the click target rather
 * than just the name, and so the lift moves everything the reader sees.
 */
.ageca-apartner__face {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border: 2px solid var(--wp--preset--color--ink);
	color: inherit;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 250ms ease, box-shadow 250ms ease, filter 250ms ease;
}

.ageca-apartner__face:hover,
.ageca-apartner__face:focus-visible {
	position: relative;
	z-index: 1;
	transform: translateY(-4px) scale(1.015);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
	filter: brightness(1.04);
	text-decoration: none;
}

.ageca-apartner__face--sky { background-color: var(--wp--preset--color--sky); }
.ageca-apartner__face--white { background-color: var(--wp--preset--color--white); }
.ageca-apartner__face--rose { background-color: var(--wp--preset--color--rose); }
.ageca-apartner__face--yellow { background-color: var(--wp--preset--color--yellow); }
.ageca-apartner__face--navy { background-color: var(--wp--preset--color--navy); }
.ageca-apartner__face--black { background-color: var(--wp--preset--color--black); }
.ageca-apartner__face--periwinkle { background-color: var(--wp--preset--color--periwinkle); }

.ageca-apartner__face.is-dark {
	color: var(--wp--preset--color--white);
}

/*
 * A logo sits inside the tile at a fixed height, whatever its proportions, so a
 * square emblem and a wide wordmark read at the same weight side by side.
 */
.ageca-apartner__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: 4.5rem;
	object-fit: contain;
}

/*
 * The logos are dark on transparent. Only the navy and black tiles turn them
 * white: sky counts as dark for the tiles' text, but a dark logo reads better on it
 * than a white one does.
 */
.ageca-apartner__face--navy .ageca-apartner__logo,
.ageca-apartner__face--black .ageca-apartner__logo {
	filter: brightness(0) invert(1);
}