/**
 * Page « Notre mission » — Asonha (direction « Canopy », palette Bleu & Vert).
 *
 * Portage fidèle du prototype (classes ip-mission3 / ipm3-* → cn-mission-*).
 * Réutilise les variables et utilitaires (.wrap, .kicker) de main.css / home.css.
 * Style appliqué au front comme à l'aperçu du bloc dans l'éditeur (SSR).
 *
 * Disposition : grille 2 colonnes. À gauche une image verticale plein-cadre
 * (aside) collante et assombrie portant l'en-tête ; à droite la liste des
 * missions sous forme de cartes.
 */

/* La « feuille » Canopy enveloppe tout le contenu en `overflow:hidden`, ce qui
 * crée un conteneur de défilement et neutralise `position:sticky` des descendants.
 * Sur la page mission uniquement, on la repasse en `overflow:clip` : même clipping
 * (coins arrondis + débordement horizontal) mais SANS conteneur de défilement →
 * l'aside collant redevient fonctionnel. Ciblé via :has() pour n'impacter que
 * cette page (aucun effet sur l'accueil ni les autres pages). */
.cn-sheet:has(.cn-mission) { overflow: clip; }

/* La « feuille » Canopy est blanche : on teinte la section en beige (le fond de
 * page) pour que la colonne de droite — la liste des missions — repose sur du
 * beige et non du blanc. La colonne de gauche est entièrement recouverte par
 * l'image de l'aside, la teinte n'y est donc jamais visible. */
.cn-mission-sec { padding: 0; background: var(--bg); }

.cn-mission-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: stretch;
}

/* ===================== Colonne gauche : image + en-tête ====================
 * Image collante sur toute la hauteur du viewport (100svh) : elle reste figée
 * pendant que la colonne de droite (les cartes) défile, puis se libère une fois
 * la dernière carte passée. `align-self:start` + hauteur fixe laissent la grille
 * (`align-items:stretch`) donner à l'aside une zone aussi haute que la liste, à
 * l'intérieur de laquelle le sticky peut « voyager ».
 * PRÉREQUIS : `.cn-sheet` doit être en `overflow:clip` (pas `hidden`), sinon il
 * crée un conteneur de défilement qui neutralise ce sticky (voir home.css). */
.cn-mission-aside {
	position: sticky;
	top: 0;
	align-self: start;
	overflow: hidden;
	isolation: isolate;
	height: 100vh; /* repli navigateurs sans svh */
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: clamp(30px, 3vw, 44px);
	/* Débordement plein-bord à gauche (l'image file jusqu'au bord de la feuille). */
	margin-left: calc(50% - 50vw);
	padding-left: calc(50vw - 50% + clamp(30px, 3vw, 44px));
	padding-top: clamp(40px, 6vw, 80px);
	border-radius: 0;
}
.cn-mission-aside-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.cn-mission-aside::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(9, 26, 32, .2), rgba(9, 26, 32, .82));
}
/* Bouton « Retour à La société » (main.css) en tête de l'image : il porte déjà
 * l'air du haut, on resserre donc la marge supérieure de l'aside. Comme l'aside
 * est collant, le bouton reste à portée pendant le défilement des cartes. */
.cn-mission-aside:has(.cn-back) { padding-top: clamp(24px, 3vw, 40px); }
.cn-mission-aside .cn-back {
	display: flex;
	width: fit-content;
	margin-bottom: clamp(28px, 4vw, 48px);
}
.cn-mission-aside .kicker { color: #fff; }
.cn-mission-aside .kicker::before { background: var(--lime); }
.cn-mission-aside h1 {
	color: #fff;
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	letter-spacing: -.02em;
	line-height: 1.02;
	margin-top: 16px;
}
.cn-mission-aside p {
	font-size: 1.05rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, .9);
	margin-top: 20px;
	max-width: 40ch;
}

/* ===================== Colonne droite : liste des missions ================= */
.cn-mission-list {
	list-style: none;
	margin: 0;
	padding: clamp(48px, 7vw, 96px) 0 clamp(48px, 7vw, 96px) clamp(30px, 4vw, 64px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.cn-mission-row {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 24px;
	padding: clamp(24px, 2.4vw, 32px);
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--surface);
}
.cn-mission-ic {
	width: 64px;
	height: 64px;
	border-radius: 18px;
	display: grid;
	place-items: center;
	background: rgba(106, 135, 43, .12);
	color: var(--forest);
	flex: none;
}
.cn-mission-ic svg { width: 38px; height: 38px; }
.cn-mission-body h2 {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	letter-spacing: -.01em;
	line-height: 1.2;
	margin-top: 10px;
}
.cn-mission-body p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--ink-soft);
	margin-top: 10px;
	max-width: 60ch;
}

/* ============================== Responsive =========================== */
@media (max-width: 860px) {
	.cn-mission-grid { grid-template-columns: 1fr; gap: 0; }
	.cn-mission-aside {
		/* Empilé : plus de sticky mais on reste `relative` pour que l'image de fond
		   (position:absolute) soit contenue dans l'aside et non dans toute la feuille. */
		position: relative;
		top: auto;
		height: auto;
		min-height: 60svh;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: calc(50vw - 50% + 24px);
		padding-right: 24px;
		border-radius: 0;
	}
	.cn-mission-list { padding-left: 0; }
	.cn-mission-row { grid-template-columns: 1fr; gap: 14px; }
	.cn-mission-ic { width: 52px; height: 52px; }
	.cn-mission-ic svg { width: 30px; height: 30px; }
}

/* ===================== Aperçu dans l'éditeur (SSR) ===================== *
 * Dans l'éditeur, le bloc est rendu hors de son contexte de page (pas de
 * `.cn-sheet`, pas de défilement) : le collage (sticky) et la hauteur `100svh`
 * n'ont pas de sens et donneraient une image démesurée. On neutralise donc ces
 * effets pour un aperçu compact où l'image épouse la hauteur des cartes.
 * Ne s'applique QUE dans l'éditeur : `.editor-styles-wrapper` est absent du front. */
.editor-styles-wrapper .cn-mission-aside {
	position: relative;
	top: auto;
	align-self: stretch;
	height: auto;
	min-height: 340px;
}