/* =====================================================
   PAGE « À PROPOS »
   Uniquement ce qui est propre à cette page. Réutilise :
   - reusable-components.css : .has-inset-hero / .inset-hero-card, .section-inner, .section-bg-light, .display-*, .large, .mb-*, .mt-*
   - button-style.css : .btn-large (boutons)
   - sliders/home-experts-slider.css (+ JS) : carrousel des experts, identique à celui de l'accueil
   Ordre : 1. largeur des blocs · 2. encart d'introduction · 3. image + texte + liste · 4. équipe · 5. « Pourquoi choisir Fitzy ? »
   Breakpoints : tablette 769–1024px, mobile ≤768px.
   ===================================================== */
/* -----------------------------------------------------
   1. Largeur des blocs : alignés sur l'encart d'introduction (1330px max, mêmes gouttières)
   ----------------------------------------------------- */
.page-id-32 {
	--about-gutter: calc(var(--spacing-2xl) * 2);
}

@media (max-width: 1024px) {
	.page-id-32 {
		--about-gutter: calc(var(--spacing-lg) * 2);
	}

}

@media (max-width: 768px) {
	.page-id-32 {
		--about-gutter: calc(var(--spacing-md) * 2);
	}

}

.page-id-32 .section-inner {
	width: calc(100% - var(--about-gutter));
	max-width: 1330px !important;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/* -----------------------------------------------------
   2. Encart d'introduction (composant .inset-hero-card, fond défini dans l'éditeur)
   ----------------------------------------------------- */
.page-id-32 .about-intro-card {
	padding-bottom: 3rem;
}

.page-id-32 .about-intro-card h2 {
	max-width: 24em;
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}

.page-id-32 .about-intro-card p {
	max-width: 46rem;
	margin-left: auto;
	margin-right: auto;
}

/* -----------------------------------------------------
   3. À propos de Fitzy : image à gauche, texte et liste à puces flèche à droite
   ----------------------------------------------------- */
.page-id-32 .about-intro {
	gap: 4rem;
	margin-bottom: 0;
}

.page-id-32 .about-photo {
	margin: 0;
}

.page-id-32 .about-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1.15 / 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.page-id-32 .about-intro .wp-block-column > p.large {
	margin-bottom: var(--spacing-lg);
}

.page-id-32 .about-intro h3 {
	margin: 0 0 var(--spacing-md);
}

@media (max-width: 781px) {
	.page-id-32 .about-intro {
		gap: 2rem;
	}

}

/* -----------------------------------------------------
   4. Une équipe engagée : bande grise (le carrousel est celui de l'accueil)
   ----------------------------------------------------- */
.page-id-32 .about-team {
	padding: 4rem 0 3.5rem;
}

.page-id-32 .about-team .title-narrow {
	max-width: 54rem;
	text-wrap: pretty;
}

@media (max-width: 768px) {
	.page-id-32 .about-team {
		padding: 3rem 0 2.5rem;
	}

}

/* -----------------------------------------------------
   5. « Pourquoi choisir Fitzy ? » : carte sombre (couleurs définies dans l'éditeur)
   ----------------------------------------------------- */
.page-id-32 .about-cta {
	padding: 4rem 3rem;
	border-radius: var(--radius-md);
	text-align: center;
}

.page-id-32 .about-cta h2 {
	color: inherit;
}

.page-id-32 .about-cta p {
	max-width: 50rem;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 768px) {
	.page-id-32 .about-cta {
		padding: 2.5rem 1.5rem;
		border-radius: var(--radius-sm);
	}

}

/* -----------------------------------------------------
   6. Tailles de texte (maquette, 1440px)
   ----------------------------------------------------- */
.page-id-32 .section-inner > h2,
.page-id-32 .about-cta h2 {
	font-size: 2.2rem;
	line-height: 1.2;
	font-weight: 800;
}

.page-id-32 .about-intro-card h2 {
	font-size: 1.9rem;
	line-height: 1.25;
	margin-bottom: 1rem;
}

.page-id-32 .about-intro-card p.large,
.page-id-32 .about-team p.large,
.page-id-32 .about-cta p.large {
	font-size: 1.05rem;
	line-height: 1.7;
}

.page-id-32 .about-intro .wp-block-column > p.large {
	font-size: 1.1rem;
}

.page-id-32 .about-intro h3 {
	font-size: 1.15rem;
}

.page-id-32 .arrow-list li {
	font-size: 1.05rem;
}

@media (max-width: 768px) {
	.page-id-32 .section-inner > h2,
	.page-id-32 .about-cta h2 {
		font-size: 1.75rem;
	}

	.page-id-32 .about-intro-card h2 {
		font-size: 1.45rem;
	}

}

/* -----------------------------------------------------
   7. Espaces
   ----------------------------------------------------- */
/* GeneratePress ajoute 100px de padding au conteneur interne des blocs Groupe */
.site-main .about-cta > .wp-block-group__inner-container {
	padding: 0;
	max-width: none;
}

.page-id-32 .about-intro-card p.large {
	margin-bottom: 0;
}

.page-id-32 .about-intro-card .wp-block-buttons,
.page-id-32 .about-cta .wp-block-buttons {
	margin-top: 1.75rem !important;
}

.page-id-32 .about-cta p.large {
	margin-bottom: 0;
}

/* -----------------------------------------------------
   8. Flèches du carrousel : chevron (le CSS de l'accueil met l'icône logo) + alignements mobile
   ----------------------------------------------------- */
@media (max-width: 768px) {
	.page-id-32 .about-intro h3,
	.page-id-32 .about-team p.large {
		text-align: left;
	}

}


/* -----------------------------------------------------
   6bis. Carrousel d'experts (celui de l'accueil) : espaces propres à cette page
   ----------------------------------------------------- */
/* moins de vide entre le texte et les photos */
.page-id-32 .about-team .experts-slider {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* le rôle peut passer sur plusieurs lignes (il était coupé sur mobile) */
.page-id-32 .about-team .experts-slider__role {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
}

/* GeneratePress ajoute 100px de padding au conteneur interne du groupe : pas ici */
.site-main .about-team .experts-slider > .wp-block-group__inner-container {
	padding: 0;
	max-width: none;
}

/* mobile : le carrousel déborde de la marge de la page jusqu'aux bords de l'écran, pour que les experts voisins (option .experts-slider--peek, voir home-experts-slider.css) soient visibles à moitié */
@media (max-width: 480px) {
	.page-id-32 .about-team .experts-slider--peek {
		width: calc(100% + var(--about-gutter)) !important;
		margin-left: calc(var(--about-gutter) / -2) !important;
	}
}