/**
 * Page « Notre histoire » — Asonha (direction « Canopy », palette Bleu & Vert).
 *
 * Portage fidèle du prototype (classes ip-head / iph-* → cn-histoire-*).
 * 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
 * (ServerSideRender).
 */

/* NB : on ne recadre pas `.wrap` sur --maxw ici. Le prototype laisse
 * `.wrap { max-width: none }` : la largeur n'est bornée que par ses marges
 * latérales (clamp(20px,4vw,56px)). Ajouter `max-width:--maxw` + `margin-inline:auto`
 * centrait le bloc dans la feuille et ajoutait ~46 px morts de chaque côté,
 * soit un retrait deux fois plus grand que la maquette. */

/* 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 histoire uniquement, on la repasse en `overflow:clip` : même clipping
 * (coins arrondis + débordement plein-bord du panneau vert) mais SANS conteneur de
 * défilement → le panneau « raison d'être » collant redevient fonctionnel.
 * Ciblé via :has() pour n'impacter que cette page (voir aussi mission.css). */
.cn-sheet:has(.cn-histoire) { overflow: clip; }

/* =============================== En-tête ============================== */
.cn-histoire-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-histoire-head {
	padding-top: clamp(28px, 4.4vw, 56px);
}
.cn-histoire-head .kicker {
	justify-content: center;
	color: var(--muted);
}
.cn-histoire-head .kicker::before { background: var(--muted); }
.cn-histoire-head h1 {
	font-size: clamp(2.2rem, 4.6vw, 3.5rem);
	margin-top: 14px;
}
.cn-histoire-head .lede {
	margin: 16px auto 0;
	max-width: 60ch;
}

/* ============================ Deux colonnes ========================== */
/* Dans le prototype cette section repose sur le fond beige de la page, ce qui
 * détache la frise de l'en-tête (blanc) juste au-dessus. Ici le contenu vit dans
 * la « feuille » Canopy, blanche : on teinte donc explicitement, comme le fait
 * déjà `.cn-legal-band` sur les pages légales. */
.cn-histoire-split {
	padding: 0;
	background: var(--bg);
}
.cn-histoire-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 0;
	align-items: stretch;
}

/* ---------------------- Panneau « raison d'être » -------------------- */
.cn-histoire-raison {
	background: var(--forest);
	color: #eef3e9;
	align-self: stretch;
	/* Le panneau vert déborde vers la gauche jusqu'au bord de la page (technique
	 * « full-bleed » du prototype) : la marge négative sort de la gouttière du
	 * `.wrap`, le padding de même valeur remet le texte à sa place. Le débord est
	 * ensuite rogné par `.cn-sheet` (overflow:clip, cf. haut de fichier), donc le
	 * panneau s'arrête proprement au bord de la feuille Canopy. */
	margin-left: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
}
/* Collé en haut de la fenêtre pendant que la frise (colonne de droite) défile.
 * Le panneau parent, en `align-self:stretch`, est aussi haut que la frise : c'est
 * la zone dans laquelle ce contenu collant peut « voyager », et il se décolle une
 * fois la dernière étape atteinte (son bas, plus long qu'un écran de portable,
 * redevient alors visible — inutile donc de borner sa hauteur).
 * PRÉREQUIS : `.cn-sheet` doit être en `overflow:clip` (pas `hidden`), sinon il
 * crée un conteneur de défilement qui neutralise ce collage (voir haut de fichier). */
.cn-histoire-raison-inner {
	position: sticky;
	top: 0;
	padding: clamp(28px, 3vw, 42px) clamp(28px, 3vw, 44px) clamp(40px, 5vw, 64px);
}
.cn-histoire-raison .kicker { color: #fff; }
.cn-histoire-raison .kicker::before { background: var(--lime); }
.cn-histoire-raison h2 {
	color: #fff;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	letter-spacing: -.02em;
	margin-top: 14px;
}
.cn-histoire-raison-lead {
	color: rgba(238, 243, 233, .86);
	font-size: 1.02rem;
	line-height: 1.6;
	margin-top: 16px;
}
.cn-histoire-raison-list {
	list-style: none;
	margin: 24px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .16);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.cn-histoire-raison-list b {
	display: block;
	color: #fff;
	font-size: 1.02rem;
}
.cn-histoire-raison-list b::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 3px;
	border-radius: 3px;
	background: #fff;
	vertical-align: middle;
	margin-right: 9px;
}
.cn-histoire-raison-list span {
	display: block;
	color: rgba(238, 243, 233, .72);
	font-size: .92rem;
	line-height: 1.55;
	margin-top: 6px;
	padding-left: 23px;
}

/* ------------------------- Frise chronologique ----------------------- */
.cn-histoire-timeline {
	padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 8vw, 100px);
	padding-left: clamp(30px, 4vw, 64px);
}
.cn-histoire-tl-title {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	letter-spacing: -.01em;
	margin-bottom: clamp(24px, 3vw, 36px);
}
.cn-histoire-tl-list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
.cn-histoire-tl-list::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--line);
}
.cn-histoire-tl-item {
	position: relative;
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 16px;
	padding-bottom: 28px;
}
.cn-histoire-tl-item:last-child { padding-bottom: 0; }
.cn-histoire-tl-marker { position: relative; z-index: 1; }
.cn-histoire-tl-dot {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--forest);
	margin-top: 5px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--forest) 18%, transparent);
}
.cn-histoire-tl-year {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--forest);
	display: block;
}
.cn-histoire-tl-body p {
	font-size: .98rem;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 6px 0 0;
}
.cn-histoire-tl-item.has-logo .cn-histoire-tl-body {
	background: linear-gradient(120deg, rgba(106, 135, 43, .1), rgba(13, 101, 130, .08));
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 18px 20px;
	margin-top: -2px;
}
.cn-histoire-tl-logo-row {
	display: flex;
	flex-wrap: wrap; /* le texte passe SOUS le logo si la carte est étroite (éditeur, mobile) */
	align-items: center;
	gap: 12px 18px; /* écart horizontal du prototype ; l'écart vertical ne sert qu'au retour à la ligne */
	margin-top: 10px;
}
/* Scopé (2 classes) pour battre le reset `img` de l'éditeur Gutenberg
   (.editor-styles-wrapper img { height:auto }) qui écraserait sinon height:52px. */
.cn-histoire-tl-body .cn-histoire-tl-logo-row img {
	height: 52px;
	width: auto;
	max-width: 100%;
	flex: 0 0 auto;
	/* Filet vertical séparant le logo du texte (prototype). Retiré quand la ligne
	 * passe à la ligne suivante : le filet n'aurait alors plus rien à séparer. */
	padding-right: 18px;
	border-right: 1px solid var(--line);
}
/* Le texte garde une largeur lisible ; sous ~240px dispo il passe à la ligne
   suivante (pleine largeur) au lieu de s'écraser en un mot par ligne. */
.cn-histoire-tl-logo-row p {
	margin: 0;
	flex: 1 1 240px;
	min-width: 0;
}
.cn-histoire-tl-item.has-logo .cn-histoire-tl-year {
	color: var(--forest);
	font-size: 1.15rem;
}

/* ============================== Responsive =========================== */
@media (max-width: 860px) {
	.cn-histoire-grid { grid-template-columns: 1fr; gap: 0; }
	/* Panneau vert plein cadre (bord à bord) au-dessus de la frise. */
	.cn-histoire-raison {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		padding-left: calc(50vw - 50%);
		padding-right: calc(50vw - 50%);
	}
	.cn-histoire-raison-inner { position: static; }
	.cn-histoire-timeline { padding-left: 0; }
}