/**
 * Page « Notre organisation » — Asonha (direction « Canopy », palette Bleu & Vert).
 *
 * Portage fidèle du prototype (classes ip-head / iorg-* / itm-* → cn-organisation-*).
 * Réutilise les variables et utilitaires (.wrap, .kicker, .lede) de main.css.
 * Style appliqué au front comme à l'aperçu du bloc dans l'éditeur (SSR).
 *
 * Trois sections :
 *   1. en-tête centré (accroche, titre, chapô) sur fond blanc ;
 *   2. organigramme : deux zones (Libreville / Kinguélé Aval), chacune avec un
 *      nœud de direction et une rangée de pôles reliés par des connecteurs CSS ;
 *   3. bandeau défilant (marquee) des personnes qui contribuent au projet.
 */

/* ============================== 1. En-tête ============================== */

.cn-organisation-head {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding: clamp(48px, 8vw, 92px) 0 clamp(30px, 4vw, 44px);
	text-align: center;
}

/* Sous la barre « Retour à La société » (main.css), qui porte déjà l'air du
 * haut de page : on resserre le haut de l'en-tête pour garder le même rythme. */
.cn-back-bar + .cn-organisation-head {
	padding-top: clamp(28px, 4.4vw, 56px);
}

.cn-organisation-head .kicker {
	justify-content: center;
	color: var(--muted);
}

.cn-organisation-head .kicker::before {
	background: var(--muted);
}

.cn-organisation-head h1 {
	font-size: clamp(2.2rem, 4.6vw, 3.5rem);
	margin-top: 14px;
}

.cn-organisation-head .lede {
	max-width: 60ch;
	margin: 16px auto 0;
}

/* ============================ 2. Organigramme =========================== */

/* Le prototype pose l'organigramme et les bandeaux sur le fond beige de la page,
 * l'en-tête restant blanc. Ici le contenu vit dans la « feuille » Canopy, qui est
 * blanche : on rétablit le contraste en teintant ces deux sections, comme le fait
 * déjà `.cn-legal-band` sur les pages légales. */
.cn-organisation-org {
	padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 8vw, 100px);
	background: var(--bg);
}

.cn-organisation-tree {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Zone : bloc arrondi teinté regroupant une direction et ses pôles. La zone
 * « alt » (Kinguélé Aval) reprend la teinte verte au lieu du bleu. */
.cn-organisation-zone {
	position: relative;
	width: 100%;
	border-radius: 26px;
	padding: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 40px);
	background: linear-gradient(160deg, rgba(13, 101, 130, .08), rgba(13, 101, 130, .02));
}

.cn-organisation-zone.is-alt {
	background: linear-gradient(160deg, rgba(106, 135, 43, .1), rgba(106, 135, 43, .02));
}

.cn-organisation-zone-tag {
	position: absolute;
	right: clamp(20px, 3vw, 36px);
	top: clamp(20px, 3vw, 32px);
	font-family: var(--font-display);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(1rem, 1.6vw, 1.3rem);
	color: var(--lime);
	letter-spacing: .02em;
}

.cn-organisation-zone.is-alt .cn-organisation-zone-tag {
	color: var(--forest);
}

.cn-organisation-tier {
	display: flex;
	justify-content: center;
	width: 100%;
}

.cn-organisation-tier-cols {
	gap: clamp(12px, 1.6vw, 20px);
	align-items: stretch;
	flex-wrap: wrap;
}

/* Nœud de direction (haut de zone). */
.cn-organisation-node {
	text-align: center;
	border-radius: 16px;
	padding: 20px 30px;
	min-width: 260px;
	background: var(--lime);
	border: none;
	color: #fff;
	box-shadow: 0 18px 44px -30px rgba(10, 24, 16, .6);
}

.cn-organisation-zone.is-alt .cn-organisation-node {
	background: var(--forest);
}

.cn-organisation-ic {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .28);
	color: #fff;
	margin-bottom: 10px;
}

.cn-organisation-ic svg {
	width: 26px;
	height: 26px;
}

.cn-organisation-node b {
	display: block;
	font-family: var(--font-display);
	font-size: 1.15rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
}

/* -- Connecteurs -------------------------------------------------------- */

/* Trait vertical reliant les deux zones. */
.cn-organisation-conn-1 {
	width: 2px;
	height: 40px;
	background: var(--line);
}

/* Fourche reliant le nœud de direction à la rangée de pôles. */
.cn-organisation-conn-2 {
	position: relative;
	width: 100%;
	height: 38px;
}

.cn-organisation-conn-2 .cn-organisation-vline {
	position: absolute;
	left: 50%;
	top: 0;
	width: 2px;
	height: 19px;
	background: var(--line);
	transform: translateX(-50%);
}

.cn-organisation-conn-2 .cn-organisation-hline {
	position: absolute;
	top: 19px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: var(--line);
}

/* -- Pôles -------------------------------------------------------------- */

.cn-organisation-col {
	flex: 1;
	min-width: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	padding-top: 19px;
}

.cn-organisation-col-stem {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: 19px;
	background: var(--line);
	transform: translateX(-50%);
}

.cn-organisation-dep {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 100%;
	justify-content: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--lime);
	border-radius: 14px;
	padding: 22px 14px;
	text-align: center;
}

.cn-organisation-zone.is-alt .cn-organisation-dep {
	border-top-color: var(--forest);
}

.cn-organisation-dep-ic {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: rgba(13, 101, 130, .1);
	color: var(--lime);
}

.cn-organisation-zone.is-alt .cn-organisation-dep-ic {
	background: rgba(106, 135, 43, .12);
	color: var(--forest);
}

.cn-organisation-dep-ic svg {
	width: 24px;
	height: 24px;
}

.cn-organisation-dep b {
	font-size: .98rem;
	letter-spacing: -.01em;
	color: var(--ink);
}

/* ======================= 3. Bandeau défilant (équipes) ================== */

.cn-organisation-teams {
	padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 100px);
	overflow: hidden;
	background: var(--bg);
}

.cn-organisation-teams-title {
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	letter-spacing: -.01em;
	color: var(--lime);
	margin-bottom: 20px;
}

/* Second bandeau (mise en service) : décliné en vert et détaché du premier. */
.cn-organisation-teams-title.is-alt {
	color: var(--forest);
	margin-top: clamp(36px, 5vw, 56px);
}

/* Dégradé de bord : les cartes apparaissent / disparaissent en fondu. */
.cn-organisation-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* La piste contient DEUX copies de la liste ; la translation de -50 % ramène
 * donc exactement la seconde copie sur la première : la boucle est invisible. */
.cn-organisation-track {
	display: flex;
	gap: 16px;
	width: max-content;
	animation: cn-organisation-scroll 60s linear infinite;
}

/* Le second bandeau défile en sens inverse du premier. */
.cn-organisation-track.is-rev {
	animation-direction: reverse;
}

.cn-organisation-marquee:hover .cn-organisation-track {
	animation-play-state: paused;
}

@keyframes cn-organisation-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.cn-organisation-card {
	flex: none;
	width: 290px;
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--lime);
	border-radius: 14px;
	padding: 16px 18px;
}

.cn-organisation-photo {
	position: relative;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--bg);
	border: 1px solid var(--line);
}

.cn-organisation-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Repli sans photo : pastille teintée portant les initiales. */
.cn-organisation-photo.is-blank {
	display: grid;
	place-items: center;
	background: rgba(13, 101, 130, .1);
	border-color: transparent;
}

.cn-organisation-photo.is-blank span {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .92rem;
	color: var(--lime);
}

.cn-organisation-card.is-alt {
	border-left-color: var(--forest);
}

.cn-organisation-card.is-alt .cn-organisation-photo.is-blank {
	background: rgba(106, 135, 43, .14);
}

.cn-organisation-card.is-alt .cn-organisation-photo.is-blank span {
	color: var(--forest);
}

.cn-organisation-info {
	min-width: 0;
}

.cn-organisation-card b {
	display: block;
	font-size: 1.02rem;
	letter-spacing: -.01em;
	color: var(--ink);
}

.cn-organisation-card span {
	display: block;
	font-size: .86rem;
	color: var(--muted);
	margin-top: 5px;
	line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
	.cn-organisation-track {
		animation: none;
	}
}

/* ============================== Responsive ============================== */

@media (max-width: 860px) {

	/* L'organigramme passe en colonne : les pôles s'empilent et les traits
	 * horizontaux (fourche, tiges) n'ont plus de sens. */
	.cn-organisation-tier-cols {
		flex-direction: column;
		gap: 0;
	}

	.cn-organisation-zone-tag {
		position: static;
		display: block;
		margin-bottom: 14px;
		font-size: 1.05rem;
	}

	.cn-organisation-zone {
		padding-top: clamp(22px, 4vw, 32px);
	}

	.cn-organisation-col {
		padding-top: 0;
		min-width: 0;
	}

	.cn-organisation-col-stem {
		display: none;
	}

	.cn-organisation-dep {
		margin-top: 12px;
	}

	.cn-organisation-conn-2 .cn-organisation-hline {
		display: none;
	}

	.cn-organisation-conn-2 {
		height: 18px;
	}
}