/**
 * Home page of the front of 2026 (openspec redesign-home).
 * Components of https://acadi-site.pages.dev/, on the tokens of style.css; cards and big date in meetings.css.
 */

/* ---------- Identity: the h1 of the page, readable (not the grey label of the mockup) ---------- */

.identite {
	padding-block: 20px;
	border-bottom: 1px solid var(--trait);
}

.identite h1 {
	margin: 0;
	color: var(--encre);
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -.01em;
	line-height: 1.2;
}

/* ---------- Poster of the next meeting ---------- */

.affiche {
	padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 80px);
	overflow: hidden;
	background: var(--brume);
}

.affiche__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
}

.affiche__grid--seule {
	grid-template-columns: minmax(0, 820px);
}

.affiche__etat {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	color: var(--encre);
	font-weight: 700;
}

.affiche__etat::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bleu);
	box-shadow: 0 0 0 4px #0496ff40;
}

.affiche .trait {
	width: min(300px, 80%);
	margin: 10px 0 26px;
}

.affiche__titre {
	margin-bottom: .35em;
	font-size: clamp(1.7rem, 3.2vw, 2.5rem);
	font-weight: 800;
}

.affiche__titre a {
	color: inherit;
	text-decoration: none;
}

.affiche__titre a:hover {
	text-decoration: underline;
	text-decoration-color: var(--bleu);
	text-decoration-thickness: 3px;
}

.affiche__accroche {
	margin-bottom: 1.1em;
	color: var(--gris);
	font-size: 1.2rem;
}

.affiche__infos {
	display: grid;
	gap: 4px;
	margin: 0 0 28px;
	padding: 0;
	font-weight: 600;
	list-style: none;
}

.affiche__infos li {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.affiche__infos svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--bleu-texte);
	transform: translateY(3px);
}

.affiche__visuel {
	position: relative;
	z-index: 0;
}

.affiche__visuel img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 30px 60px -30px #02021c73;
}

.affiche__visuel::before {
	content: "";
	position: absolute;
	inset: -18px 18px 18px -18px;
	z-index: -1;
	border: 3px solid var(--bleu);
	border-radius: 4px;
}

@media (max-width: 900px) {
	.affiche__grid {
		grid-template-columns: 1fr;
	}

	.affiche__visuel {
		order: -1;
		margin: 10px 10px 0 18px;
	}
}

/* ---------- Speakers ---------- */

.temoins {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 34px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.temoins a {
	color: var(--encre);
	font-size: clamp(1.5rem, 3.4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.25;
	text-decoration: none;
}

.temoins a:hover {
	color: var(--bleu-texte);
}

.temoins sup {
	display: inline-block;
	margin: .4em 0 0 5px;
	color: var(--bleu-texte);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	vertical-align: top;
}

.temoins__tous {
	margin: 32px 0 0;
}

/* ---------- Why join ---------- */

.piliers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 56px);
}

.pilier img {
	width: 112px;
	height: auto;
	margin-bottom: 14px;
}

.pilier h3 {
	margin-bottom: .35em;
}

.pilier p {
	margin: 0;
	color: var(--gris);
}

.piliers__video {
	margin: 36px 0 0;
}

/* ---------- Partners ---------- */

.logos--centre {
	justify-content: center;
}

/* ---------- Timeline ---------- */

.frise {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.frise li {
	padding-top: 18px;
	border-top: 3px solid var(--bleu);
}

.frise__annee {
	display: block;
	margin-bottom: 10px;
	font-size: 2rem;
	font-variant-numeric: lining-nums;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1;
}

.frise p {
	margin: 0;
	color: var(--gris);
}

@media (max-width: 760px) {
	.piliers {
		grid-template-columns: 1fr;
	}

	.pilier {
		display: grid;
		grid-template-columns: 80px 1fr;
		gap: 16px;
	}

	.pilier img {
		width: 80px;
	}

	.temoins {
		gap: 0 26px;
	}

	.temoins a {
		display: inline-block;
		padding-block: 8px;
	}

	.frise {
		grid-template-columns: 1fr;
	}
}