/* ==========================================================================
   Yaye Dia Agro — pages intérieures
   Composants construits avec les jetons de site.css.
   ========================================================================== */

/* --- En-tête de page ----------------------------------------------------- */
.page-hero {
	position: relative;
	isolation: isolate;
	padding-top: calc(var(--header-h) + clamp(28px, 5vw, 72px));
	padding-bottom: clamp(48px, 6vw, 88px);
	overflow: clip;
}
.page-hero__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(42% 60% at 86% 18%, rgb(184 208 79 / .3), transparent 70%),
		radial-gradient(36% 50% at 60% 100%, rgb(0 152 76 / .1), transparent 72%),
		radial-gradient(40% 50% at 4% 8%, rgb(255 255 255 / .9), transparent 70%);
}
.page-hero__grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
.page-hero--media .page-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.page-hero__icon {
	display: grid;
	place-items: center;
	width: 60px; height: 60px;
	margin-bottom: 1.4rem;
	border-radius: 18px;
	background: var(--grad);
	color: #fff;
	box-shadow: 0 14px 30px -14px rgb(0 122 61 / .55);
}
.page-hero__icon .icon { width: 28px; height: 28px; }
.page-hero__title {
	max-width: 17ch;
	font-size: clamp(2.4rem, 1.3rem + 3.8vw, 4.5rem);
	line-height: 1;
	letter-spacing: -.035em;
}
.page-hero__lead { max-width: 38rem; margin-top: 1.5rem; font-size: clamp(1.06rem, .98rem + .35vw, 1.22rem); line-height: 1.6; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.page-hero__media {
	position: relative;
	aspect-ratio: 5 / 4;
	border-radius: var(--r-xl);
	overflow: hidden;
	background: var(--sauge);
	box-shadow: var(--shadow-lift);
}
.page-hero__media picture,
.page-hero__media img { width: 100%; height: 100%; }
.page-hero__media img { object-fit: cover; }
.page-hero__media--art {
	display: grid;
	place-items: center;
	color: var(--pousse);
	background:
		radial-gradient(70% 60% at 90% 0%, rgb(184 208 79 / .28), transparent 70%),
		radial-gradient(60% 50% at 0% 100%, rgb(0 152 76 / .35), transparent 70%),
		var(--foret);
}
.page-hero__media--art .icon {
	width: clamp(120px, 14vw, 200px);
	height: auto;
	stroke-width: .9;
	filter: drop-shadow(0 18px 36px rgb(184 208 79 / .25));
}

/* En-tête sans visuel : titre à gauche, texte à droite (FAQ, Actualités) */
@media (min-width: 1024px) {
	.page-hero--split .page-hero__copy {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		column-gap: clamp(48px, 7vw, 120px);
	}
	.page-hero--split .page-hero__copy > * { grid-column: 1; }
	.page-hero--split .page-hero__title { grid-row: 3 / span 2; }
	.page-hero--split .page-hero__lead { grid-column: 2; grid-row: 3 / span 2; align-self: end; margin-top: 0; }
	.page-hero--split .page-hero__actions { grid-column: 2; }
}

/* --- Visuels illustrés des en-têtes -------------------------------------- */
.page-hero__media--visual {
	container-type: size;
	overflow: visible;
	font-size: clamp(12px, 2.75cqi, 15.5px);
	background:
		radial-gradient(60% 55% at 88% 8%, rgb(184 208 79 / .38), transparent 70%),
		radial-gradient(55% 50% at 8% 96%, rgb(0 152 76 / .14), transparent 70%),
		linear-gradient(160deg, #EEF4EA 0%, var(--sauge) 100%);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7), var(--shadow-soft);
}

.vcard {
	position: relative;
	border-radius: 1.4em;
	background: #fff;
	border: 1px solid rgb(214 224 209 / .6);
	box-shadow: 0 2px 6px rgb(12 37 25 / .05), 0 30px 60px -30px rgb(12 37 25 / .35);
}
.vkicker { color: var(--feuille); font-size: .7em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.vtag {
	padding: .35em .75em;
	border-radius: 999px;
	background: var(--pousse-100);
	color: var(--vert-700);
	font-size: .74em;
	font-weight: 600;
}

/* Pastilles flottantes */
.vchip {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .55em 1.1em .55em .55em;
	border-radius: 999px;
	background: rgb(255 255 255 / .96);
	box-shadow: 0 2px 6px rgb(12 37 25 / .06), 0 22px 44px -22px rgb(12 37 25 / .4);
	color: var(--foret);
	font-size: .86em;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}
.vchip > .icon {
	width: 2.2em; height: 2.2em;
	padding: .5em;
	border-radius: 50%;
	background: var(--vert-50);
	color: var(--feuille);
}
.vchip--note { gap: .75em; padding-right: .9em; border-radius: 1.1em; }
.vchip--note > .icon { background: var(--grad); color: #fff; }
.vchip--note > span:not(.vchip__ok) { font-weight: 500; color: var(--ardoise); }
.vchip--note strong { display: block; color: var(--foret); font-size: 1.04em; font-weight: 650; }
.vchip__ok { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--vert); color: #fff; }
.vchip__ok .icon { width: 1em; height: 1em; }
.vchip--tl { top: 7%; left: -5%; }
.vchip--tr { top: 7%; right: -5%; }
.vchip--bl { bottom: 8%; left: -5%; }
.vchip--br { bottom: 8%; right: -5%; }
.vchip--bc { bottom: -1.4em; left: 50%; translate: -50% 0; }

@media (prefers-reduced-motion: no-preference) {
	.vchip { animation: visual-float 7s ease-in-out infinite; }
	.vchip--br,
	.vchip--bl,
	.vchip--bc { animation-delay: -3.5s; }
}
@keyframes visual-float { 50% { transform: translateY(-8px); } }

/* Comment ça marche : parcours sur téléphone (conversation WhatsApp d'exemple) */
.phone {
	position: absolute;
	left: 50%; top: 50%;
	z-index: 1;
	height: 104cqh;
	aspect-ratio: 9 / 18.5;
	padding: .55em;
	translate: -50% -50%;
	rotate: 2deg;
	border-radius: 2.4em;
	background: linear-gradient(160deg, #1D2A23, var(--foret));
	box-shadow: 0 2px 0 1px rgb(255 255 255 / .06) inset, 0 50px 80px -36px rgb(12 37 25 / .6), 0 20px 40px -24px rgb(12 37 25 / .4);
}
.phone::before {
	content: "";
	position: absolute;
	top: 1em; left: 50%;
	z-index: 2;
	width: 26%; height: .95em;
	translate: -50% 0;
	border-radius: 999px;
	background: #0A120E;
}
.phone__screen { display: flex; flex-direction: column; height: 100%; border-radius: 1.9em; overflow: hidden; background: #EFF3EA; }
.phone__status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .75em 1.3em .25em;
	background: var(--vert-700);
	color: #fff;
	font-size: .66em;
	font-weight: 600;
}
.phone__indicators { display: flex; align-items: center; gap: .35em; }
.phone__indicators svg { width: auto; height: .85em; }
.chat__head { display: flex; align-items: center; gap: .55em; padding: .55em .85em .65em; background: var(--vert-700); color: #fff; }
.chat__avatar { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--grad); }
.chat__avatar .icon { width: 1.1em; height: 1.1em; }
.chat__who { display: grid; min-width: 0; font-size: .7em; line-height: 1.25; color: rgb(255 255 255 / .75); }
.chat__who strong { color: #fff; font-size: 1.2em; font-weight: 650; white-space: nowrap; }
.chat__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 0;
	padding: .3em .7em .6em;
	overflow: hidden;
	background:
		radial-gradient(circle at 20% 15%, rgb(0 152 76 / .05) 0 2px, transparent 3px) 0 0 / 22px 22px,
		#EFF3EA;
}
.chat__msg {
	position: relative;
	flex: none;
	max-width: 86%;
	margin-top: .55em;
	padding: .5em .7em 1.3em;
	border-radius: 1em;
	color: var(--foret);
	font-size: .8em;
	line-height: 1.38;
	box-shadow: 0 1px 1px rgb(12 37 25 / .08);
}
.chat__msg--yda { align-self: flex-start; border-top-left-radius: .25em; background: #fff; }
.chat__msg--client { align-self: flex-end; border-top-right-radius: .25em; background: var(--pousse-100); }
.chat__time { position: absolute; right: .7em; bottom: .3em; color: rgb(12 37 25 / .45); font-size: .76em; }
.chat__msg--client .chat__time { color: var(--feuille); }
.chat__pay { display: flex; align-items: center; gap: .55em; padding: .1em .1em 0 0; }
.chat__pay-icon { display: grid; place-items: center; flex: none; width: 2em; height: 2em; border-radius: .6em; background: var(--vert); color: #fff; }
.chat__pay-icon .icon { width: 1.1em; height: 1.1em; }
.chat__pay strong { display: block; font-size: 1.06em; }
.chat__typing { display: none; }
.chat__composer { display: flex; align-items: center; gap: .45em; padding: .45em .55em .8em; background: #EFF3EA; }
.chat__input { flex: 1; padding: .55em .9em; border-radius: 999px; background: #fff; color: #8C9A92; font-size: .74em; box-shadow: 0 1px 1px rgb(12 37 25 / .06); }
.chat__mic { display: grid; place-items: center; flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--vert); color: #fff; }
.chat__mic svg { width: 1em; height: 1em; }

/* Affiche du produit demandé, posée contre le téléphone */
.phone-product {
	position: absolute;
	left: 5%; bottom: 9%;
	z-index: 2;
	width: 34cqmin;
	padding: .4em .4em .6em;
	border-radius: 1.1em;
	background: #fff;
	box-shadow: 0 2px 6px rgb(12 37 25 / .06), 0 30px 50px -26px rgb(12 37 25 / .45);
	rotate: -5deg;
}
.phone-product img { width: 100%; height: auto; border-radius: .8em; }
.phone-product p { margin-top: .5em; padding-inline: .3em; color: var(--ardoise); font-size: .7em; line-height: 1.3; }
.phone-product strong { display: block; color: var(--foret); font-size: 1.08em; }

@media (prefers-reduced-motion: no-preference) {
	/* Chaque message arrive à son tour ; le conseiller « écrit » une seconde avant de répondre. */
	.chat__msg { animation: msg-in .7s var(--ease) both; animation-delay: calc(.6s + var(--k) * 1.3s); }
	.chat__typing {
		display: flex;
		align-self: flex-start;
		gap: .25em;
		max-height: 0;
		margin-top: 0;
		padding: 0 .8em;
		border-radius: 1em;
		background: #fff;
		opacity: 0;
		overflow: hidden;
		animation: typing-life 1s linear both;
		animation-delay: calc(-.4s + var(--k) * 1.3s);
	}
	.chat__typing span { width: .4em; height: .4em; border-radius: 50%; background: var(--lichen); animation: typing-dot .9s ease-in-out infinite; }
	.chat__typing span:nth-child(2) { animation-delay: .15s; }
	.chat__typing span:nth-child(3) { animation-delay: .3s; }
	.phone-product { animation: visual-float 7s ease-in-out infinite; animation-delay: -2s; }
}
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes typing-life {
	0%, 100% { max-height: 0; margin-top: 0; padding-block: 0; opacity: 0; }
	12%, 88% { max-height: 2.4em; margin-top: .55em; padding-block: .75em; opacity: 1; }
}
@keyframes typing-dot { 50% { transform: translateY(-.25em); opacity: .5; } }

/* Qui sommes-nous : carte d'identité et chiffres clés */
.visual--chiffres { display: grid; align-content: center; gap: .9em; padding: 7% 8%; }
.vcard--dark {
	border-color: transparent;
	background:
		radial-gradient(70% 90% at 100% 0%, rgb(184 208 79 / .3), transparent 65%),
		radial-gradient(60% 80% at 0% 100%, rgb(0 152 76 / .4), transparent 70%),
		var(--foret);
}
.idcard { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.3em 1.5em; }
.idcard img { width: 8.6em; height: auto; }
.idcard__place { display: flex; align-items: center; gap: .4em; color: var(--lichen); font-size: .82em; text-align: right; }
.idcard__place .icon { color: var(--pousse); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9em; }
.stat { display: grid; gap: .35em; align-content: start; padding: 1.1em 1.3em 1.2em; border-radius: 1.2em; }
.stat__value { color: var(--foret); font: 650 2.2em/1 var(--font-display); letter-spacing: -.035em; }
.stat__value::before { content: ""; display: block; width: 1.1em; height: .14em; margin-bottom: .45em; border-radius: 4px; background: var(--grad); }
.stat__label { font-size: .84em; line-height: 1.35; }

/* Devenir membre : carte de membre */
.visual--carte-membre { display: grid; place-items: center; padding: 8%; }
.member {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: min(100%, 23em);
	aspect-ratio: 1.586;
	padding: 1.3em 1.4em;
	border-radius: 1.3em;
	overflow: hidden;
	color: #fff;
	background:
		radial-gradient(80% 90% at 100% 0%, rgb(184 208 79 / .5), transparent 60%),
		radial-gradient(70% 80% at 0% 100%, rgb(0 152 76 / .55), transparent 70%),
		linear-gradient(135deg, var(--canopee), var(--foret));
	box-shadow: 0 46px 80px -34px rgb(12 37 25 / .6), inset 0 0 0 1px rgb(255 255 255 / .1);
	rotate: -5deg;
}
.member::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .16) 48%, transparent 60%);
	translate: -60% 0;
}
.member__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.member__top img { width: 7.4em; height: auto; }
.member__kind { color: var(--pousse); font-size: .64em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.member__chip { display: grid; place-items: center; width: 2.6em; height: 2em; border-radius: .45em; background: linear-gradient(135deg, #EEF4C9, var(--pousse)); color: var(--foret); }
.member__chip .icon { width: 1.1em; height: 1.1em; }
.member__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; }
.member__label { display: block; color: rgb(255 255 255 / .6); font-size: .62em; letter-spacing: .14em; text-transform: uppercase; }
.member__name { display: block; margin-top: .2em; font: 600 1.15em/1.2 var(--font-display); letter-spacing: .01em; }
.member__since { color: var(--lichen); font-size: .76em; }
.visual--carte-membre .vchip--bl { bottom: 6%; }
@media (prefers-reduced-motion: no-preference) {
	.member::before { animation: member-sheen 7s var(--ease) infinite; }
}
@keyframes member-sheen { 0%, 55% { translate: -60% 0; } 85%, 100% { translate: 60% 0; } }


/* Électroménager : affiches en éventail */
.fan { position: absolute; inset: 0; }
.fan__card {
	position: absolute;
	left: 50%; top: 48%;
	width: 54cqmin;
	padding: .4em;
	border-radius: 1.2em;
	background: #fff;
	box-shadow: 0 2px 6px rgb(12 37 25 / .06), 0 34px 60px -30px rgb(12 37 25 / .45);
	translate: calc(-50% + (var(--k) - 1) * 50%) -50%;
	rotate: calc((var(--k) - 1) * 8deg);
}
.fan__card:nth-child(2) { z-index: 1; width: 58cqmin; }
.fan__card img { width: 100%; height: auto; border-radius: .85em; }
@media (prefers-reduced-motion: no-preference) {
	.fan__card { animation: visual-float 7s ease-in-out infinite; animation-delay: calc(var(--k) * -2.3s); }
}

/* Contact : carte du Sénégal et agences */
.senegal { position: absolute; left: 11%; right: 5%; top: 50%; aspect-ratio: 500 / 365; translate: 0 -50%; }
.senegal__map { width: 100%; height: 100%; overflow: visible; }
.senegal__land { fill: #fff; stroke: var(--bord); stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 18px 30px rgb(12 37 25 / .14)); }
.senegal__gambia { fill: var(--sauge); stroke: var(--bord); stroke-width: 1; }
.senegal__route { fill: none; stroke: var(--vert); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; }
.senegal__name { fill: var(--lichen); font: 700 22px var(--font-display); letter-spacing: .32em; }
.senegal__dot { fill: var(--lichen); }
.senegal__town { fill: #8C9A92; font: 500 12px var(--font-body); }
.senegal__pin {
	position: absolute;
	width: 1.15em; height: 1.15em;
	translate: -50% -50%;
	border: .22em solid #fff;
	border-radius: 50%;
	background: var(--vert);
	box-shadow: 0 0 0 .45em rgb(0 152 76 / .18), 0 6px 14px -4px rgb(0 122 61 / .6);
}
.senegal__pin--main { width: 1.4em; height: 1.4em; }
.senegal__label { position: absolute; width: max-content; max-width: 16em; padding: .7em 1em .75em; border-radius: 1em; }
.senegal__label .vkicker { font-size: .74em; }
.senegal__label--0 { translate: -12% 1.3em; }
.senegal__label--1 { translate: 1.2em -50%; }
.senegal__addr { margin-top: .25em; color: var(--foret); font-size: .9em; font-weight: 600; line-height: 1.3; }
.senegal__city { font-size: .86em; line-height: 1.3; }
@media (prefers-reduced-motion: no-preference) {
	.senegal__pin { animation: pin-pulse 2.6s ease-in-out infinite; }
	.senegal__pin + .senegal__label + .senegal__pin { animation-delay: -1.3s; }
	.senegal__route { animation: route-flow 1.6s linear infinite; }
}
@keyframes pin-pulse { 50% { box-shadow: 0 0 0 .9em rgb(0 152 76 / .05), 0 6px 14px -4px rgb(0 122 61 / .6); } }
@keyframes route-flow { to { stroke-dashoffset: -20; } }

@media (max-width: 1023px) {
	.page-hero__media--visual { width: 100%; max-width: 560px; aspect-ratio: 1; margin-inline: auto; }
	.fan__card { width: 44cqmin; }
	.fan__card:nth-child(2) { width: 48cqmin; }
	/* Pastilles à cheval sur les bords du cadre : elles ne masquent plus le contenu. */
	.vchip--tl,
	.vchip--tr { top: -1em; }
	.vchip--bl,
	.vchip--br { bottom: -1em; }
	.visual--vitrine .vchip--bl { top: -1em; bottom: auto; }
	.vchip--tl,
	.vchip--bl { left: 3%; }
	.vchip--tr,
	.vchip--br { right: 3%; }
}

/* --- Fil d'Ariane -------------------------------------------------------- */
.breadcrumbs { margin-bottom: 1.6rem; font-size: .9rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; }
.breadcrumbs li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pousse-2); }
.breadcrumbs a { color: var(--feuille); font-weight: 500; transition: color .4s var(--ease); }
.breadcrumbs a:hover { color: var(--vert-700); }
.breadcrumbs [aria-current] { color: var(--ardoise); }

/* --- Bandeau d'appel ----------------------------------------------------- */
.cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem 2.4rem;
	padding: clamp(28px, 5vw, 64px);
	border-radius: var(--r-xl);
	background:
		radial-gradient(50% 80% at 100% 0%, rgb(184 208 79 / .35), transparent 70%),
		linear-gradient(160deg, var(--vert-50) 0%, var(--sauge) 100%);
}
.cta-band h2 { max-width: 20ch; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); }
.cta-band p { max-width: 34rem; margin-top: .8rem; font-size: 1.05rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- Texte long (pages légales, articles) -------------------------------- */
.prose { max-width: 46rem; font-size: 1.06rem; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.4rem 0 .8rem; font-size: clamp(1.45rem, 1.25rem + .8vw, 1.95rem); }
.prose h3 { margin: 1.8rem 0 .6rem; }
.prose p,
.prose ul,
.prose ol { margin: 0 0 1.05rem; }
.prose ul { padding-left: 1.3rem; list-style: disc; }
.prose ol { padding-left: 1.3rem; list-style: decimal; }
.prose li + li { margin-top: .35rem; }
.prose a { color: var(--feuille); text-decoration: underline; text-decoration-color: rgb(0 122 61 / .35); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { color: var(--foret); }
.prose figure { margin: 2rem 0; }
.prose img { border-radius: var(--r); }
.prose figcaption { margin-top: .6rem; font-size: .9rem; text-align: center; }
.prose .aligncenter { margin-inline: auto; }

.post-cover { margin: 0 0 2rem; border-radius: var(--r-xl); overflow: hidden; }
/* Photo entière (portraits et affiches compris), sans rognage. */
.post-cover img { width: 100%; height: auto; max-height: min(78vh, 760px); object-fit: contain; background: var(--sauge); }
.post-back { margin-top: 2rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.nav-links .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--bord); background: #fff; color: var(--foret); }
.nav-links .page-numbers.current { background: var(--feuille); border-color: var(--feuille); color: #fff; }

/* --- Cartes d'information ------------------------------------------------ */
.card-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.info-card {
	display: grid;
	gap: .55rem;
	align-content: start;
	padding: 1.6rem 1.5rem 1.7rem;
	border-radius: var(--r-lg);
	background: #fff;
	border: 1px solid rgb(214 224 209 / .7);
	box-shadow: var(--shadow-soft);
}
.info-card__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: .35rem; border-radius: 14px; background: var(--vert-50); color: var(--feuille); }
.info-card h3 { font-size: 1.2rem; }
.info-card p { font-size: .97rem; line-height: 1.55; }
a.info-card { transition: transform .8s var(--ease), box-shadow .8s var(--ease), border-color .8s var(--ease); }
a.info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--pousse-2); }
.info-card__more { margin-top: .4rem; }

/* --- Frise sur panneau sombre ------------------------------------------- */
.timeline-panel {
	padding: clamp(28px, 5vw, 64px);
	border-radius: var(--r-xl);
	color: var(--lichen);
	background:
		radial-gradient(50% 60% at 100% 0%, rgb(0 152 76 / .32), transparent 70%),
		radial-gradient(40% 60% at 0% 100%, rgb(184 208 79 / .12), transparent 70%),
		linear-gradient(180deg, var(--canopee) 0%, var(--foret) 70%);
}
.timeline-panel__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(28px, 4vw, 44px); }
.timeline-panel h2 { max-width: 16ch; color: #fff; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem); }
.timeline-panel .link-arrow { color: var(--pousse); }
.timeline-panel :focus-visible { outline-color: var(--pousse); }
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.timeline__step { padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--r); background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .08); }
.timeline__num { display: block; color: var(--pousse); font: 650 2.2rem/1 var(--font-display); letter-spacing: -.03em; }
.timeline__step h3 { margin: .9rem 0 .4rem; color: #fff; font-size: 1.2rem; }
.timeline__step p { font-size: .97rem; }

@media (max-width: 1023px) {
	.card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.card-grid { grid-template-columns: 1fr; }
}

/* --- Texte et image côte à côte ----------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 100px); align-items: center; }
.split__text > :first-child { margin-top: 0; }
.split__text h2 { max-width: 15ch; }
.split__text p { max-width: 34rem; margin-top: 1.2rem; font-size: 1.06rem; }
.split__text h3 { margin-top: 2rem; }
/* Devise de l'entreprise (wolof) et sa traduction */
.motto { margin: 2rem 0 0; padding: 1.1rem 0 .2rem 1.4rem; border-left: 3px solid var(--pousse-2); }
.split__text .motto__text { max-width: none; margin: 0; color: var(--foret); font: 650 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--font-display); letter-spacing: -.02em; }
.split__text .motto__translation { margin-top: .5rem; font-size: .98rem; }
.split__media { aspect-ratio: 5 / 6; border-radius: var(--r-xl); overflow: hidden; background: var(--sauge); box-shadow: var(--shadow-lift); }
.split__media picture { height: 100%; }
.split__media img { width: 100%; height: 116%; object-fit: cover; margin-top: -8%; }
@media (max-width: 1023px) {
	.split { grid-template-columns: 1fr; }
	.split__media { max-width: 620px; }
}

/* Conditions des pages univers, collées à la grille des familles qui suit */
.univers-terms { padding-bottom: clamp(8px, 2vw, 24px); }

/* --- Qui sommes-nous : principes ----------------------------------------- */
.principes__grid {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(40px, 7vw, 110px);
	align-items: start;
}
.principes__head { position: sticky; top: calc(var(--header-h) + 40px); }
.principes__head h2 { max-width: 13ch; }
.principes__lead { max-width: 26rem; margin-top: 1.2rem; font-size: 1.06rem; }
.principes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.principle {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: .7rem 1rem;
	padding: 1.6rem 0 1.9rem;
	border-top: 1px solid var(--bord);
}
.principle__num { grid-column: 1 / -1; color: var(--feuille); font-size: .78rem; font-weight: 700; letter-spacing: .14em; }
.principle__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #fff; color: var(--feuille); box-shadow: var(--shadow-soft); }
.principle h3 { font-size: 1.2rem; }
.principle p { grid-column: 1 / -1; max-width: 30rem; font-size: .97rem; line-height: 1.55; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1023px) {
	.principes__grid { grid-template-columns: 1fr; }
	.principes__head { position: static; }
}

@media (max-width: 640px) {
	.principes__list { grid-template-columns: 1fr; }
	.visual--univers .vchip--tr { display: none; }
	.phone-product,
	.visual--telephone .vchip--br { display: none; }
	.page-hero__media.visual--contact { display: none; }
}

@media (max-width: 1023px) {
	.page-hero--media .page-hero__grid { grid-template-columns: 1fr; }
	.page-hero__media { max-width: 640px; }
}

@media (max-width: 640px) {
	.page-hero__actions .btn { width: 100%; justify-content: space-between; }
	.page-hero__actions .btn-ghost { justify-content: center; }
}

/* --- Visuel d'en-tête « arche » : vraies images Yaye Dia Agro (Nos offres, denrées, salons, véhicules) --- */
.visual--arche { position: relative; }
/* Feuille du logo en filigrane, comme dans la bannière d'accueil (contenue dans le cadre). */
.arche-v__bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.arche-v__leaf {
	position: absolute;
	left: -12cqi;
	top: 50%;
	width: 70cqi;
	height: 70cqi;
	margin-top: -35cqi;
	border-radius: 0 100%;
	transform: rotate(-38deg);
	border: 1px solid rgb(0 122 61 / .16);
	background: radial-gradient(circle, rgb(184 208 79 / .22), transparent 70%);
}
.arche-v__main {
	position: absolute;
	top: 6cqb;
	right: 7cqi;
	height: 88cqb;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 999px 999px 1.4em 1.4em;
	background: var(--sauge);
	box-shadow: 0 2px 6px rgb(12 37 25 / .06), 0 40px 80px -36px rgb(12 37 25 / .5);
}
/* Image horizontale : arche large (haut en anse de panier). */
.arche-v__main--wide {
	top: 50%;
	right: 50%;
	height: auto;
	width: 80cqi;
	aspect-ratio: 4 / 3;
	translate: 50% -50%;
	border-radius: 50% 50% 1.4em 1.4em / 34% 34% 1.4em 1.4em;
}
.arche-v__tile {
	position: absolute;
	z-index: 1;
	width: 32cqi;
	overflow: hidden;
	border: .35em solid #fff;
	border-radius: 1.3em;
	background: var(--sauge);
	box-shadow: 0 2px 6px rgb(12 37 25 / .08), 0 30px 60px -28px rgb(12 37 25 / .5);
}
.arche-v__tile--1 { left: 8cqi; bottom: 10cqb; rotate: -4deg; }
.arche-v__tile--2 { left: 13cqi; top: 9cqb; width: 28cqi; rotate: 3deg; }
.visual--arche picture,
.visual--arche img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
	.arche-v__tile { animation: visual-float 8s ease-in-out infinite; }
	.arche-v__tile--2 { animation-delay: -4s; }
}