/**
 * Oguey Widgets — bloc « Savoir-faire ».
 *
 * Valeurs relevées sur le bloc Elementor d'origine et sur la maquette :
 * conteneur 1490 px, trois colonnes égales, écart 20 px, padding 80 px en
 * haut et 120 px en bas. Carte de citation en #082351, 48 px de padding
 * vertical et 40 px horizontal. Bouton encadré 1 px, padding 20 px.
 *
 * Le titre n'est pas mis en capitales : Playfair Display SC produit déjà
 * des petites capitales, et le cumul donnait des capitales pleines.
 */
.oguey-sf {
	padding: 80px 0 120px;
}

.oguey-sf__inner {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
	width: 100%;
	max-width: var(--oguey-container-width, 1550px);
	margin-inline: auto;
	padding-inline: var(--oguey-container-padding, 30px);
}

.oguey-sf__col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* --- Colonne de gauche --------------------------------------------- */
/* Marge latérale retirée : le texte s'aligne sur le bord du conteneur,
   comme le reste du bloc. Le JSON d'origine portait 0 40px 0 30px. */
.oguey-sf__col--texte {
	gap: 24px;
	padding: 0;
}

.oguey-sf__title {
	margin: 0;
	font-family: var(--oguey-font-heading, 'Playfair Display SC'), Georgia, serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	/* Le JSON d'origine portait typography_text_transform: uppercase. Il est
	   abandonné : Playfair Display SC produit déjà des petites capitales, et
	   la règle de casse du client interdit le cumul. La couleur, elle, reste
	   liée à la globale secondaire d'Elementor comme dans le bloc source. */
	text-transform: none;
}

.oguey-sf__text {
	margin: 0 0 50px;
	font-family: var(--oguey-font-body, 'Raleway'), system-ui, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
}

.oguey-sf__text p {
	margin: 0 0 1em;
}

.oguey-sf__text p:last-child {
	margin-bottom: 0;
}

/* --- Colonne centrale ---------------------------------------------- */
.oguey-sf__col--portrait {
	gap: 16px;
	justify-content: flex-end;
}

.oguey-sf__media {
	overflow: hidden;
}

.oguey-sf__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.oguey-sf__caption {
	margin: 0;
	font-family: var(--oguey-font-body, 'Raleway'), system-ui, sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 31.6px;
	text-align: center;
}

/* --- Colonne de droite --------------------------------------------- */
.oguey-sf__col--aside {
	gap: 20px;
	justify-content: flex-end;
	padding: 40px 30px 0 0;
}

.oguey-sf__quote {
	display: flex;
	flex-direction: column;
	/* flex_align_items: flex-start dans le JSON : chaque élément se réduit
	   à son contenu, d'où le guillemet ouvrant calé à gauche. */
	align-items: flex-start;
	gap: 0;
	margin: 0;
	padding: 48px 40px;
	background-color: #082351;
}

/* Trois paragraphes empilés, comme les trois widgets texte du bloc source.
   Marges à zéro : l'écart du conteneur est de 0 dans le JSON, et c'est le
   padding de 48 px qui fait respirer la carte. */
.oguey-sf__quote > * {
	margin: 0;
}

.oguey-sf__quote-mark {
	font-family: var(--oguey-font-body, 'Raleway'), system-ui, sans-serif;
	font-weight: 700;
	font-size: 32px;
	/* Interligne de 24 px dans le JSON : plus court que la police, donc le
	   glyphe déborde de sa ligne. On lui rend sa place sans changer la
	   valeur, sinon le guillemet se retrouve rogné. */
	line-height: 24px;
	display: block;
	min-height: 32px;
	color: #FFFFFF;
}

/* Le guillemet fermant est le même signe, retourné. */
/* Le fermant est le même glyphe, pivoté d'un demi-tour et poussé à droite :
   _transform_rotateZ_effect 180 et _flex_align_self flex-end dans le JSON. */
.oguey-sf__quote-mark--end {
	align-self: flex-end;
	transform: rotate(180deg);
	transform-origin: center;
}

.oguey-sf__quote-text {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	/* Le texte occupe toute la largeur et reste centré, alors que les deux
	   guillemets se réduisent à leur contenu. */
	font-family: var(--oguey-font-body, 'Raleway'), system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #FFFFFF;
	text-align: center;
}

.oguey-sf__btn {
	display: flex;
	align-items: center;
	/* Libellé et flèche centrés ensemble, et non répartis aux extrémités. */
	justify-content: center;
	gap: 12px;
	padding: 20px;
	background: #FFFFFF;
	border: 1px solid currentColor;
	border-radius: 0;
	font-family: var(--oguey-font-body, 'Raleway'), system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.5px;
	text-decoration: none;
	text-transform: none;
	transition: background-color 300ms ease, color 300ms ease;
}

.oguey-sf__btn:hover,
.oguey-sf__btn:focus-visible {
	/* Le contrôle « Couleur du bouton » génère une règle plus spécifique :
	   sans !important, le libellé restait bleu sur fond bleu au survol. */
	color: #FFFFFF !important;
}

.oguey-sf__btn:hover svg,
.oguey-sf__btn:focus-visible svg {
	color: #FFFFFF !important;
}

/* --- Adaptations ---------------------------------------------------- */
@media (max-width: 1024px) {
	.oguey-sf__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.oguey-sf__col--aside {
		grid-column: 1 / -1;
		padding: 0;
	}
	.oguey-sf__col--texte {
		padding: 0;
	}
}

@media (max-width: 767px) {
	.oguey-sf {
		padding: 30px 0;
	}
	.oguey-sf__inner {
		padding-inline: 0;
	}
	.oguey-sf__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.oguey-sf__title {
		font-size: 28px;
	}
	.oguey-sf__text {
		margin-bottom: 24px;
	}
	.oguey-sf__quote {
		padding: 32px 24px;
	}
	.oguey-sf__btn {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oguey-sf__btn {
		transition: none;
	}
}

/* ====================================================================
 * Bloc « Une famille professionnelle »
 *
 * Transposition directe de la maquette HTML validée le 24/08. Aucune
 * réinterprétation : mêmes sélecteurs, mêmes valeurs, même ordre. Les
 * tentatives d'amélioration qui ont suivi (réserve de place, sous-grille,
 * position absolue) ont toutes été abandonnées : elles cassaient un rendu
 * qui était juste.
 * ================================================================== */
.oguey-eq {
	--c1: 25.4%;
	--c2: 22.7%;
	--c3: 26.5%;
	--c4: 21.6%;
	--ecart-x: 1.22%;
	--ecart-y: 20px;
	--menuisier-haut: 205px;
	--ech: 1;
	padding: 80px 0 120px;
}

.oguey-eq__inner {
	width: 100%;
	max-width: 1490px;
	margin-inline: auto;
	padding-inline: 30px;
}

.oguey-eq__grid {
	display: grid;
	grid-template-columns: var(--c1) var(--c2) var(--c3) var(--c4);
	column-gap: var(--ecart-x);
	row-gap: var(--ecart-y);
	align-items: start;
}

.oguey-eq__texte {
	grid-column: 1 / span 2;
	grid-row: 1;
}

.oguey-eq__title {
	margin: 0 0 24px;
	font-family: var(--oguey-font-heading, 'Playfair Display SC'), Georgia, serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	/* Pas de mise en capitales : Playfair Display SC produit déjà des petites
	   capitales, et la règle de casse du client interdit le cumul. */
	text-transform: none;
}

.oguey-eq__text {
	margin: 0;
	font-family: var(--oguey-font-body, 'Raleway'), system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 28px;
}

.oguey-eq__text p { margin: 0 0 1em; }
.oguey-eq__text p:last-child { margin-bottom: 0; }

.oguey-eq__accueil {
	grid-column: 3;
	grid-row: 1;
	align-self: end;
}

.oguey-eq__pile {
	display: flex;
	flex-direction: column;
	gap: var(--ecart-y);
	min-width: 0;
}

.oguey-eq__pile--1 { grid-column: 1; grid-row: 2; }
.oguey-eq__pile--2 { grid-column: 2; grid-row: 2; }
.oguey-eq__pile--3 { grid-column: 3; grid-row: 2; }

.oguey-eq__pile--4 {
	grid-column: 4;
	grid-row: 1 / span 2;
	align-self: start;
	margin-top: var(--menuisier-haut);
}

.oguey-eq__quote {
	--h: 231px;
	grid-column: 3 / span 2;
	grid-row: 2;
	align-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0;
	/* Marges ramenées de 48 à 32 px : le relevé de diagnostic montrait que la
	   carte réclamait 304 px pour 257 disponibles sous la colonne 3, et
	   recouvrait donc le chef d'atelier de 47 px. */
	padding: 32px 40px;
	background-color: #082351;
	border-radius: 0 !important;
}

.oguey-eq__quote > * { margin: 0; }

.oguey-eq__quote-mark {
	display: block;
	font-family: var(--oguey-font-body, 'Raleway'), system-ui, sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 24px;
	min-height: 24px;
	color: #FFFFFF;
}

.oguey-eq__quote-mark--end {
	align-self: flex-end;
	transform: rotate(180deg);
}

.oguey-eq__quote-text {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--oguey-font-body, 'Raleway'), system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
	color: #FFFFFF;
}

/* Les hauteurs sont portées par --h et multipliées par --ech. */
.oguey-eq__tile,
.oguey-eq__quote {
	min-height: calc(var(--h) * var(--ech));
}

.oguey-eq__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding: 20px 20px 24px;
	background-color: #1a1a1a;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 0 !important;
}

.oguey-eq__tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000000;
	opacity: 0.45;
	transition: opacity 300ms ease;
	pointer-events: none;
}

@media (hover: hover) {
	.oguey-eq__tile:hover::before { opacity: 0.5; }
}

.oguey-eq__name,
.oguey-eq__role {
	position: relative;
	z-index: 1;
	margin: 0;
	text-align: center;
	color: #FFFFFF;
	font-family: var(--oguey-font-body, 'Raleway'), system-ui, sans-serif;
}

.oguey-eq__name {
	font-weight: 700;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.5px;
	text-transform: none;
}

.oguey-eq__role {
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
}

@media (max-width: 1024px) {
	.oguey-eq { --ech: 0.78; }
	.oguey-eq__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 17px;
		row-gap: 17px;
	}
	.oguey-eq__texte { grid-column: 1 / span 2; grid-row: auto; }
	.oguey-eq__accueil,
	.oguey-eq__pile--1,
	.oguey-eq__pile--2,
	.oguey-eq__pile--3,
	.oguey-eq__pile--4,
	.oguey-eq__quote {
		grid-column: auto;
		grid-row: auto;
		align-self: auto;
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.oguey-eq { --ech: 0.62; padding: 30px 0; }
	/* Aucune marge propre : le conteneur Elementor qui entoure le widget en
	   applique déjà une. La cumuler éloignait le bloc des bords, alors que
	   le reste de la page s'aligne sur celle du conteneur. */
	.oguey-eq__inner { padding-inline: 0; }
	.oguey-eq__grid { grid-template-columns: minmax(0, 1fr); }
	.oguey-eq__texte { grid-column: auto; }
	.oguey-eq__title { font-size: 28px; }
	.oguey-eq__quote { padding: 32px 24px; min-height: auto; }
	.oguey-eq__tile { min-height: auto; aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
	.oguey-eq__tile::before { transition: none; }
}