/**
 * Bloc « Rejoignez la communauté ».
 * Emplacement : assets/css/components/cta-communaute.css
 */

.cta-communaute {
	background-color: var(--e4y-white);
}

.cta-communaute__media {
	line-height: 0;
}

.cta-communaute__img {
	width: 100%;
	height: clamp(240px, 41vw, 587px); /* Figma borne haute : 587 px pleine largeur */
	object-fit: cover;
	object-position: center;
}

.cta-communaute__inner {
	display: grid;
	gap: var(--space-6);
	padding-block: var(--space-7);
}

.cta-communaute__title {
	max-width: 14ch;
	margin-block-end: var(--space-4);
	font-size: var(--fs-h1); /* Figma : 48 px = borne haute de --fs-h1 */
	line-height: var(--lh-tight); /* Figma : 1.0 — pas de token exact, --lh-tight = 1.10 */
	color: var(--e4y-green);
}

.cta-communaute__text {
	max-width: 52ch;
	margin-block-end: var(--space-5);
	font-size: var(--fs-body);       /* Figma : 16 px */
	line-height: var(--lh-heading);  /* Figma : 1.28 — --lh-heading = 1.25, écart 0.03 */
	color: var(--color-text);        /* Figma : #35726a = var(--e4y-green) */
}

.cta-communaute__aside-title {
	margin-block-end: var(--space-1);
	font-family: var(--font-body);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	color: var(--e4y-green);
}

.cta-communaute__adresse {
	margin-block-end: var(--space-4);
	font-size: 12px;
	color: var(--color-text-body);
}

.cta-communaute__whatsapp {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);            /* Figma : 5–7 px — --space-2 = 8 px, écart ~1 px */
	min-height: var(--space-7);     /* Figma : 49 px — --space-7 = 48 px, écart 1 px */
	padding-inline: var(--space-3) var(--space-2); /* Figma : 10 px / 7 px */
}

/* Séparateur vertical entre l'icône et le libellé. */
.cta-communaute__whatsapp span {
	padding-inline-start: var(--space-2); /* Figma : 7 px — --space-2 = 8 px, écart 1 px */
	border-inline-start: 1px solid var(--color-border);
}

.cta-communaute__whatsapp .btn__icon {
	width: 21px;   /* Figma : 21 px — pas de token exact */
	height: 21px;
	flex-shrink: 0;
}

.cta-communaute__whatsapp .btn__icon--arrow {
	width: 17px;   /* Figma : 17×13 px — pas de token exact */
	height: 13px;
	flex-shrink: 0;
}


@media (min-width: 900px) {

	.cta-communaute__inner {
		grid-template-columns: minmax(0, 9fr) minmax(0, 2fr); /* Figma : gauche 72.5 % / droite 27.5 % */
		gap: var(--space-8);
		align-items: end;
		position: relative;            /* stacking au-dessus de l'image */
		margin-block-start: -6.5vw;  /* Figma : titre 132 px au-dessus du bas image sur 1440 px */
		padding-block-start: 0;
		padding-block-end: var(--space-8);
	}

	.cta-communaute__title {
		max-width: 30ch; /* Figma : boîte titre 731 px sur colonne 900+ px */
	}

	/* --fs-h1 est un clamp() : pas de surcharge desktop nécessaire. */
}


/* ============================================================
   Mobile — la photo déborde, le formulaire s'empile

   Relevé sur 01_MOB (nodes 102:358 à 102:384) : la photo fait 684 px de
   large pour une page de 402 — elle est agrandie et rognée sur les côtés,
   là où nous l'affichions à la largeur d'écran, plus petite et cernée de
   blanc. Le champ et son bouton passent l'un sous l'autre, et un filet
   sépare le formulaire de l'adresse.
   ============================================================ */

@media (max-width: 767px) {

	.cta-communaute__media {
		overflow: hidden;
	}

	/* 170 % : les 684 px de la maquette rapportés à ses 402 de page. */
	.cta-communaute__img {
		width: 170%;
		height: 279px;             /* Figma */
	}

	/* Figma ne laisse que 6 px entre la photo et le titre. */
	.cta-communaute__inner {
		padding-block-start: var(--space-1);
	}

	.cta-communaute__title {
		max-width: none;           /* Figma : 341 px, soit toute la colonne */
		font-size: var(--fs-hero); /* Figma : ~34 px, contre 30 pour --fs-h1 */
	}

	/* Champ et bouton l'un sous l'autre, chacun à sa largeur de maquette. */
	.form-newsletter {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);       /* Figma : 18 px entre les deux */
	}

	.form-newsletter__input {
		flex: none;
		width: 100%;
		min-height: 49px;          /* Figma */
	}

	/* Figma pose un filet entre le formulaire et l'adresse. */
	.cta-communaute__aside {
		padding-block-start: var(--space-5);
		border-block-start: 1px solid var(--color-border);
	}

}