/* =====================================================
   PAGE « NOTRE EXPERTISE »
   Uniquement ce qui est propre à cette page. Réutilise :
   - reusable-components.css : .has-inset-hero / .inset-hero-card, .section-inner, .section-bg-dark/-light, .grid-cols-3, .card, .photo-band
   - title-with-line.css : trait vert sous les titres
   - sliders/home-experts-slider.css (+ JS) : slider des experts ; testimonials-slider.css : cartes de témoignages
   Ordre : 1. encart d'introduction · 2. experts · 3. pédagogie · 4. témoignages · 5. « Une question ? »
   Breakpoints : tablette 769–1024px, mobile ≤768px.
   ===================================================== */

.page-id-34 {
	--expertise-card-width: min(860px, 88%); /* largeur des cartes du carrousel experts */
	--expertise-gutter: calc(var(--spacing-2xl) * 2); /* marges gauche + droite de l'encart */
	/* largeur de la bannière d'en-tête (voir reusable-components.css), sur laquelle sont alignés les blocs de contenu */
	--expertise-content-width: min(calc((100% - var(--expertise-gutter)) * 0.8), 1120px);
}

/* petit desktop : pédagogie et témoignages ont la largeur de l'encart d'en-tête */
@media (min-width: 1025px) and (max-width: 1204px) {
	.page-id-34 {
		--expertise-content-width: calc(100% - var(--expertise-gutter));
	}
}

@media (max-width: 1024px) {
	.page-id-34 {
		--expertise-gutter: calc(var(--spacing-lg) * 2);
		--expertise-content-width: calc((100% - var(--expertise-gutter)) * 0.92);
	}
}

@media (max-width: 768px) {
	.page-id-34 {
		--expertise-gutter: calc(var(--spacing-md) * 2);
		--expertise-content-width: calc(100% - var(--expertise-gutter));
	}
}

/* Blocs de contenu : même largeur que la bannière d'en-tête (maquette : bannière et cartes de pédagogie ont la même largeur) */
.page-id-34 .section-inner {
	width: var(--expertise-content-width);
	max-width: none !important;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

.page-id-34 .section-inner h2.wp-block-heading {
	font-size: 2rem;
	margin-bottom: 1.5rem;
}

/* -----------------------------------------------------
   1. Encart d'introduction : logo + texte, alignés à gauche
   ----------------------------------------------------- */
.inset-hero-card--split,
.inset-hero-card--split > .wp-block-group__inner-container {
	text-align: left;
}

.page-id-34 .inset-hero-card--split {
	display: flex;
	align-items: center;
	padding-top: calc(var(--inset-hero-height) / 2 + 3rem);
	padding-bottom: 3rem;
}

/* blocs Image + Groupe (titre, paragraphe) en flex qui passe à la ligne ; la largeur est celle de la maquette (~61% de l'écran) */
.page-id-34 .inset-hero-card--split .inset-hero-split {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem 3rem;
	width: 100%;
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

.page-id-34 .inset-hero-card--split .inset-hero-split__logo {
	flex: 0 0 11rem;
	width: 11rem;
	margin: 0;
}

.page-id-34 .inset-hero-card--split .inset-hero-split__text {
	flex: 1 1 20rem;
	min-width: 0;
}

/* conteneurs internes ajoutés par GeneratePress : pas de padding, pleine largeur */
.page-id-34 .inset-hero-card--split > .wp-block-group__inner-container {
	width: 100%;
}

.site-main .inset-hero-split__text > .wp-block-group__inner-container {
	padding: 0;
	max-width: none;
}

/* le plugin d'images entoure le logo d'un <picture> qui reçoit la taille : on le laisse remplir la figure ; le PNG est déjà dans la bonne orientation */
.page-id-34 .inset-hero-card--split .inset-hero-split__logo picture {
	display: block;
	width: 100% !important;
	height: auto !important;
}

.page-id-34 .inset-hero-card--split .inset-hero-split__logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* pas de saut de ligne dans le texte : la césure est gérée par le navigateur */
.page-id-34 .inset-hero-card--split h2 {
	font-size: 1.85rem;
	line-height: 1.25;
	margin: 0 0 0.6rem;
	max-width: 18.5em;
}

.page-id-34 .inset-hero-card--split p {
	max-width: none;
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.6;
	text-wrap: pretty;
}

@media (min-width: 769px) and (max-width: 1024px) {
	.page-id-34 .inset-hero-card--split .inset-hero-split h2,
	.page-id-34 .inset-hero-card--split .inset-hero-split p {
		text-align: left;
	}
}

@media (max-width: 768px) {
	.page-id-34 .inset-hero-card--split .inset-hero-split {
		flex-direction: column;
		text-align: center;
	}
	.page-id-34 .inset-hero-card--split .inset-hero-split h2,
	.page-id-34 .inset-hero-card--split .inset-hero-split p {
		text-align: center;
	}
	/* logo réduit (voir reusable-components.css) : sa boîte prend la taille du logo pour qu'il soit centré */
	.page-id-34 .inset-hero-card--split .inset-hero-split__logo {
		flex: none;
		width: auto;
	}
	.page-id-34 .inset-hero-card--split .inset-hero-split__logo picture {
		width: auto !important;
	}
	/* en colonne, la base flex du texte s'applique à la hauteur : on la neutralise */
	.page-id-34 .inset-hero-card--split .inset-hero-split__text {
		flex: 0 1 auto;
	}
}

/* -----------------------------------------------------
   2. Slider des experts — variante « biographie »
   ----------------------------------------------------- */

/* conteneur : même largeur que l'encart d'en-tête, pour que les cartes voisines aillent jusqu'à ses bords */
.page-id-34 .section-inner:has(.experts-slider--bio) {
	width: calc(100% - var(--expertise-gutter)) !important;
	max-width: 1330px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.page-id-34 .experts-slider--bio,
.site-main .experts-slider--bio > .wp-block-group__inner-container {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.page-id-34 .experts-slider--bio {
	overflow: hidden;
}

/* la piste laisse de la place à l'anneau du logo */
.page-id-34 .experts-slider--bio .splide__track {
	overflow: hidden !important;
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

/* largeur imposée aux slides ET à leur carte (Splide ne doit pas la faire varier) */
.page-id-34 .experts-slider--bio .splide__slide,
.page-id-34 .experts-slider--bio .experts-slider__slide {
	width: var(--expertise-card-width) !important;
	flex: 0 0 var(--expertise-card-width) !important;
	max-width: var(--expertise-card-width) !important;
}

.page-id-34 .experts-slider--bio .experts-slider__card {
	flex-direction: row !important;
	align-items: center !important;
	gap: 3rem;
	width: 100% !important;
	max-width: none !important;
	min-height: 417px;
	padding: 2.5rem 3.5rem;
	box-sizing: border-box;
	background-color: var(--base-3);
	border-radius: var(--radius-md);
	text-align: left !important;
}

/* cartes de même hauteur ; pas de réduction d'échelle des voisines (Splide mesure la carte réduite et la décentre) */
.page-id-34 .experts-slider--bio .splide__list {
	align-items: stretch !important;
}

.page-id-34 .experts-slider--bio .splide__slide {
	display: flex;
	transform: none !important;
	opacity: 1 !important;
}

.page-id-34 .experts-slider--bio .experts-slider__card {
	flex-grow: 1;
}

/* voisines estompées, carte active pleine */
.experts-slider--bio .splide__slide:not(.is-active) .experts-slider__card {
	opacity: 0.45;
}

/* portrait rond + logo Fitzy en fond (même principe que les chiffres clés de l'accueil) */
.page-id-34 .experts-slider--bio .experts-slider__img-wrap {
	position: relative;
	flex: 0 0 215px;
	width: 215px !important;
	height: 215px !important;
	margin-bottom: 0 !important;
	overflow: visible !important;
	background: none !important;
	border-radius: 0 !important;
	box-shadow: none;
	outline: 0;
}

.page-id-34 .experts-slider--bio .experts-slider__img-wrap::before {
	content: "";
	position: absolute;
	inset: -5.56%; /* la photo occupe 90 % du cercle, comme .bloc-chiffre-inner sur l'accueil */
	z-index: 0;
	border-radius: 50%; /* cercle dont le logo est l'image de fond, comme .bloc-chiffre-logo */
	background: url('../img/logo_FITZY-SYMBOLE_rvb.png') center / cover no-repeat !important;
}

.page-id-34 .experts-slider--bio .experts-slider__img-wrap .wp-block-post-featured-image {
	position: relative;
	z-index: 1;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	overflow: hidden;
	border: 0;
	border-radius: 50%;
	box-sizing: border-box;
}

.experts-slider--bio .experts-slider__content {
	align-items: flex-start !important;
}

.page-id-34 .experts-slider--bio .experts-slider__name {
	font-size: 1.65rem !important;
	text-align: left !important;
}

.page-id-34 .experts-slider--bio .experts-slider__bio {
	margin: 0;
	color: var(--contrast);
	font-size: 1.1rem;
	line-height: 1.6;
}

/* flèches : disque bleu nuit + chevron blanc (même design que la pagination), sur les bords extérieurs de la carte */
.page-id-34 .experts-slider--bio .splide__arrow {
	width: 44px !important;
	height: 44px !important;
	background-color: var(--contrast) !important;
	border-radius: 50% !important;
	opacity: 1 !important;
	transition: transform 0.2s ease;
}

.page-id-34 .experts-slider--bio .splide__arrow svg {
	display: none !important;
}

.page-id-34 .experts-slider--bio .splide__arrow::after {
	content: "" !important;
	display: block;
	width: 30px !important;
	height: 30px !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 3.5L16.5 12 8 20.5' stroke='white' stroke-width='4.5'/%3E%3C/svg%3E") center / contain no-repeat !important;
	transform: none !important;
}

.page-id-34 .experts-slider--bio .splide__arrow--prev::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 3.5L7.5 12 16 20.5' stroke='white' stroke-width='4.5'/%3E%3C/svg%3E") !important;
}

.page-id-34 .experts-slider--bio .splide__arrow--prev {
	left: calc(50% - min(430px, 44%) - 22px) !important;
}

.page-id-34 .experts-slider--bio .splide__arrow--next {
	right: calc(50% - min(430px, 44%) - 22px) !important;
}

.page-id-34 .experts-slider--bio .splide__arrow:hover {
	transform: translateY(-50%) scale(1.08);
	box-shadow: none !important;
}

/* puces : vertes pleines, la puce active est un anneau */
.experts-slider--bio .splide__pagination {
	position: static;
	margin-top: var(--spacing-md);
}

.experts-slider--bio .splide__pagination__page {
	width: 12px;
	height: 12px;
	margin: 0 4px;
	background: var(--accent);
	border: 2px solid var(--accent);
	opacity: 1;
	transform: none;
}

.experts-slider--bio .splide__pagination__page.is-active {
	background: transparent;
	transform: none;
}

@media (max-width: 768px) {
	.page-id-34 .experts-slider--bio .experts-slider__card {
		flex-direction: column !important;
		gap: 1.5rem;
		min-height: 0;
		padding: 2rem 1.75rem;
		text-align: center !important;
	}
	/* flèches sur les bords gauche et droit de la carte, comme sur desktop : la carte fait 88% (JS), la flèche
	   est centrée sur son bord, sans sortir du conteneur (overflow: hidden) sur les petits écrans */
	.page-id-34 .experts-slider--bio .splide__arrow {
		width: 36px !important;
		height: 36px !important;
	}
	.page-id-34 .experts-slider--bio .splide__arrow::after {
		width: 24px !important;
		height: 24px !important;
	}
	.page-id-34 .experts-slider--bio .splide__arrow--prev {
		left: max(2px, calc(6% - 18px)) !important;
	}
	.page-id-34 .experts-slider--bio .splide__arrow--next {
		right: max(2px, calc(6% - 18px)) !important;
	}
	/* puces sous la carte, avec le style des puces du desktop (le CSS partagé les grise à ce breakpoint) */
	.page-id-34 .experts-slider--bio .splide__pagination {
		position: static !important;
		padding: 0 !important;
	}
	.page-id-34 .experts-slider--bio .splide__pagination__page {
		width: 12px !important;
		height: 12px !important;
		background: var(--accent) !important;
		border: 2px solid var(--accent) !important;
	}
	.page-id-34 .experts-slider--bio .splide__pagination__page.is-active {
		background: transparent !important;
		transform: none !important;
	}
	/* portrait toujours rond, même dans une carte étroite */
	.page-id-34 .experts-slider--bio .experts-slider__img-wrap {
		flex: none;
		width: min(215px, 62%) !important;
		height: auto !important;
		aspect-ratio: 1;
	}
	.page-id-34 .experts-slider--bio .experts-slider__content,
	.page-id-34 .experts-slider--bio .experts-slider__name {
		align-items: center !important;
		text-align: center !important;
	}
}

/* -----------------------------------------------------
   3. La pédagogie Fitzy : cartes blanches sur fond bleu nuit
   ----------------------------------------------------- */
.page-id-34 .expertise-pedagogy {
	padding: 3.5rem 0 4rem;
}

.page-id-34 .expertise-pedagogy h2 {
	color: var(--base);
}

.page-id-34 .expertise-pedagogy h2.wp-block-heading {
	margin-bottom: 3.2rem;
}

.expertise-pedagogy .grid-cols-3 {
	display: block;
}

.expertise-pedagogy .grid-cols-3 > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3rem;
}

.page-id-34 .expertise-pedagogy .card,
.expertise-pedagogy .card > .wp-block-group__inner-container {
	max-width: none;
	color: var(--contrast);
}

.expertise-pedagogy .card > .wp-block-group__inner-container {
	padding: 0;
}

.page-id-34 .expertise-pedagogy .card {
	gap: 0;
	padding: 1.4rem 1.4rem 2.2rem;
	border-radius: var(--radius-md);
}

.expertise-pedagogy .card:hover {
	transform: none;
}

.expertise-pedagogy .card img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: 1.8rem;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.page-id-34 .expertise-pedagogy .card h3 {
	font-size: 1.65rem;
	line-height: 1.2;
	margin: 0 0 1rem;
}

.page-id-34 .expertise-pedagogy .card p {
	font-size: 1.15rem;
	line-height: 1.6;
	margin: 0;
}

/* tablette : 2 colonnes, la 3e carte centrée sur la ligne du dessous */
@media (max-width: 1024px) {
	.page-id-34 .expertise-pedagogy .grid-cols-3 > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}
	.page-id-34 .expertise-pedagogy .card:nth-child(3):last-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc(50% - 1rem);
	}
}

@media (max-width: 768px) {
	.page-id-34 .expertise-pedagogy .grid-cols-3 > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
	}
	.page-id-34 .expertise-pedagogy .card:nth-child(3):last-child {
		width: 100%;
	}
}

/* -----------------------------------------------------
   4. « Ils ont transformé leur pratique… » : largeur propre à cette page (le bloc lui-même —
   vidéo, photo de la personne qui témoigne, puces — est défini une seule fois dans
   sliders/testimonials-slider.css, commun à l'accueil, aux pages produit et à cette page)
   ----------------------------------------------------- */
/* desktop : le bloc a la largeur de la bannière d'en-tête (plus étroite que la largeur par défaut) */
@media (min-width: 1025px) {
	.page-id-34 .gb-container-te-wrap-001 {
		width: var(--expertise-content-width) !important;
		max-width: none !important;
	}
}

/* tablette / mobile : vidéo et carrousel alignés sur les marges de la bannière plutôt que sur celles, par défaut, de la page */
@media (max-width: 1024px) {
	.page-id-34 .testimonials-slider__video,
	.page-id-34 .testimonials-slider__carousel {
		width: var(--expertise-content-width);
		max-width: 640px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* -----------------------------------------------------
   5. « Une question ? » : mêmes tailles et espaces que « Nous sommes là pour vous aider ! » (page Financer)
   ----------------------------------------------------- */
.page-id-34 .section-bg-light {
	padding: 4.6rem 0 3rem;
}

.page-id-34 .section-bg-light h2 {
	font-size: 2.3rem;
	margin-bottom: 1.6rem;
}

.page-id-34 .section-bg-light p.large {
	max-width: 34em;
	margin: 0 auto !important;
	font-size: 1.3rem;
}

.page-id-34 .section-bg-light .wp-block-buttons {
	position: static;
	margin-top: 1.4rem !important;
	margin-bottom: 1.5rem;
}