/* ==========================================================================
   MFA Travaux — Réalisations (vitrine chantiers / portfolio)
   Scoped under .mfa-real — réutilise tokens / hero / boutons de mfa-actualites.css
   Palette : #285A9E / #122A4D / #DC0B15 / #EAF2FB / #5B6472
   ========================================================================== */

.post-type-archive-realisation #Content,
.single-realisation #Content {
	padding-top: 0;
}

.post-type-archive-realisation #Subheader,
.single-realisation #Subheader {
	display: none !important;
}

.post-type-archive-realisation .content_wrapper,
.single-realisation .content_wrapper {
	max-width: none;
	width: 100%;
}

.mfa-real {
	--mfa-blue: #285A9E;
	--mfa-navy: #122A4D;
	--mfa-red: #DC0B15;
	--mfa-soft: #EAF2FB;
	--mfa-muted: #5B6472;
	--mfa-border: #E2E8F0;
	--mfa-radius: 24px;
}

/* ---------- Intro archive ---------- */

.mfa-real-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 40px 0 20px;
	text-align: center;
	max-width: none;
	width: 100%;
}

.mfa-real-intro__lead {
	margin: 0;
	max-width: 46rem;
	font-size: clamp(1.125rem, 2.4vw, 1.375rem);
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: -0.015em;
	color: var(--mfa-navy);
}

.mfa-real-intro__count {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mfa-muted);
	opacity: 0.85;
}

/* ---------- Grille portfolio ---------- */

.mfa-real-grid-wrap {
	padding: 12px 0 56px;
}

/* ---------- Pagination archive ---------- */

.mfa-real-pagination {
	margin-top: 40px;
	padding-top: 8px;
}

.mfa-real-pagination .navigation.pagination,
.mfa-real-pagination .mfa-real-pagination__nav {
	margin: 0;
}

.mfa-real-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.mfa-real-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	min-height: 42px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1.5px solid var(--mfa-border);
	background: #fff;
	color: var(--mfa-navy);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mfa-real-pagination a.page-numbers:hover {
	border-color: var(--mfa-blue);
	color: var(--mfa-blue);
	background: var(--mfa-soft);
}

.mfa-real-pagination .page-numbers.current {
	border-color: var(--mfa-blue);
	background: var(--mfa-blue);
	color: #fff;
	cursor: default;
}

.mfa-real-pagination .page-numbers.dots {
	border: none;
	background: transparent;
	min-width: auto;
	padding: 0 4px;
	color: var(--mfa-muted);
	font-weight: 500;
}

.mfa-real-pagination .page-numbers.prev,
.mfa-real-pagination .page-numbers.next {
	padding: 0 18px;
}

.mfa-real-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--mfa-blue);
	outline-offset: 2px;
}

.mfa-real-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px) {
	.mfa-real-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

/* Cards plus grandes qu’Actualités (2 cols desktop, pas 3) */
@media (min-width: 1100px) {
	.mfa-real-grid {
		gap: 28px;
	}
}

/* Related : même grille portfolio */
.mfa-real .mfa-related .mfa-real-grid,
.mfa-related .mfa-real-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px) {
	.mfa-real .mfa-related .mfa-real-grid,
	.mfa-related .mfa-real-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.mfa-real .mfa-related .mfa-real-grid,
	.mfa-related .mfa-real-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- Card chantier (image + overlay) ---------- */

.mfa-real-card {
	position: relative;
	border-radius: var(--mfa-radius);
	overflow: hidden;
	background: var(--mfa-navy);
	isolation: isolate;
}

.mfa-real-card__link {
	display: block;
	position: relative;
	color: #fff;
	text-decoration: none;
	outline: none;
}

.mfa-real-card__link:focus-visible {
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--mfa-blue);
}

.mfa-real-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: linear-gradient(145deg, #1a3358 0%, #122A4D 100%);
}

.mfa-real-card__media img {
	/* !important : neutralise la règle globale BeTheme `img:not([src$=".svg"]){height:auto}`
	   (be.css, chargé après ce fichier) qui a la même spécificité (0,1,1) et écrasait
	   height:100%, cassant object-fit:cover sur les visuels portrait/hauts. */
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.45s ease;
}

.mfa-real-card:hover .mfa-real-card__media img,
.mfa-real-card__link:focus-visible .mfa-real-card__media img {
	transform: scale(1.05);
}

.mfa-real-card__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	padding: 22px 22px 24px;
	background: linear-gradient(
		180deg,
		rgba(18, 42, 77, 0) 28%,
		rgba(18, 42, 77, 0.55) 58%,
		rgba(14, 34, 71, 0.92) 100%
	);
	pointer-events: none;
}

.mfa-real-card__tag {
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(234, 242, 251, 0.95);
	color: var(--mfa-blue);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.35;
}

.mfa-real-card__title {
	margin: 0;
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mfa-real-card__place {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	color: #d7dee9;
}

.mfa-real-card__place svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mfa-real-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	opacity: 0.92;
	transition: gap 0.2s ease, opacity 0.2s ease;
}

.mfa-real-card:hover .mfa-real-card__cta,
.mfa-real-card__link:focus-visible .mfa-real-card__cta {
	gap: 10px;
	opacity: 1;
}

@media (max-width: 639px) {
	.mfa-real-card__media {
		aspect-ratio: 5 / 4;
	}

	.mfa-real-card__overlay {
		padding: 18px 18px 20px;
	}
}

/* ---------- Single fiche chantier ---------- */

.mfa-real .mfa-real-facts {
	margin: 28px 0 8px;
}

/* Les fiches chantier ont 2 à 4 facts : `auto-fit` remplit toujours toute la
   largeur (3 colonnes égales quand 3 cards) au lieu de la grille 4 colonnes
   fixe qui laissait un vide à droite. */
@media (min-width: 640px) {
	.mfa-real .mfa-real-facts {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

.mfa-real .mfa-real-content {
	padding-top: 8px;
}

/* Chapô éditorial (premier <p class="mfa-real-chapo"> du contenu) : lead assumé,
   distinct des sections H2 en dessous. Barre verticale accent (même bleu que les
   facts cards / icônes) + texte aéré, sans encart ni fond — reste discret et
   cohérent avec le reste du single. */
.mfa-real .mfa-real-content .mfa-real-chapo {
	position: relative;
	margin: 0 0 1.8em;
	padding: 0.05em 0 0.05em 20px;
	border-left: 3px solid var(--mfa-blue);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.3rem);
	line-height: 1.65;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--mfa-navy);
}

@media (max-width: 480px) {
	.mfa-real .mfa-real-content .mfa-real-chapo {
		padding-left: 16px;
	}
}

.single-realisation .mfa-actu__container {
	padding-bottom: 56px;
}

@media (min-width: 960px) {
	.single-realisation .mfa-actu__container {
		padding-top: 8px;
	}
}

/* ==========================================================================
   Homepage — slider derniers chantiers (plus visuel que le teaser Actualités)
   ========================================================================== */

.mfa-home-real {
	width: 100%;
	font-family: "Plus Jakarta Sans", sans-serif;
}

/* Shell + flèches : même motif que .mfa-reviews-list (look partagé dans style.css). */
.mfa-home-real__shell {
	position: relative;
	display: block;
}

.mfa-home-real__viewport {
	min-width: 0;
	overflow: hidden;
}

.mfa-home-real__track {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 2px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 2px 10px;
}

.mfa-home-real__track::-webkit-scrollbar {
	display: none;
	height: 0;
}

.mfa-home-real__slide {
	flex: 0 0 calc(50% - 10px);
	max-width: calc(50% - 10px);
	min-width: 0;
	scroll-snap-align: start;
}

/* Peu de slides : le track ne remplit pas le viewport (ex. 1 seul chantier sur
   une fiche prestation). Par défaut le flex colle la/les carte(s) à gauche avec
   un grand vide à droite : on centre à la place. Le centrage n'est appliqué que
   hors défilement (classe .is-centered posée par le JS quand il n'y a pas
   d'overflow) pour ne jamais rogner le début des cartes en mode carousel. */
.mfa-home-real__track.is-centered {
	justify-content: center;
}

/* Repli initial (avant exécution du JS) pour le cas 1 seule carte, afin
   d'éviter tout flash « carte collée à gauche ». */
.mfa-home-real--single .mfa-home-real__track {
	justify-content: center;
}

.mfa-home-real__slide .mfa-real-card {
	height: 100%;
}

.mfa-home-real__slide .mfa-real-card__media {
	aspect-ratio: 16 / 11;
}

.mfa-home-real__btn {
	display: none;
}

@media (min-width: 768px) {
	.mfa-home-real__shell {
		padding-inline: 56px;
	}

	.mfa-home-real__btn {
		display: grid;
		place-items: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
	}

	.mfa-home-real__btn--prev {
		left: 0;
	}

	.mfa-home-real__btn--next {
		right: 0;
	}

	.mfa-home-real__btn:active:not(:disabled) {
		transform: translateY(-50%) scale(0.96);
	}

	.mfa-home-real__track {
		padding-inline: 8px;
	}
}

.mfa-home-real__cta-wrap {
	margin: 32px 0 0;
	text-align: center;
}

.mfa-home-real__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border: 2px solid var(--mfa-blue, #285A9E);
	border-radius: 38px;
	background: #fff;
	color: var(--mfa-blue, #285A9E);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mfa-home-real__cta:hover {
	background: var(--mfa-blue, #285A9E);
	border-color: var(--mfa-blue, #285A9E);
	color: #fff;
}

/* Desktop large : ~2.4 cartes (peek) pour marquer le slider */
@media (min-width: 1100px) {
	.mfa-home-real__slide {
		flex: 0 0 calc(42% - 10px);
		max-width: calc(42% - 10px);
	}
}

@media (max-width: 767px) {
	.mfa-home-real__shell {
		padding-inline: 0;
	}

	.mfa-home-real__track {
		gap: 16px;
		padding: 0 0 6px;
	}

	.mfa-home-real__slide {
		flex: 0 0 82%;
		width: 82%;
		max-width: 82%;
	}

	.mfa-home-real__cta-wrap {
		margin-top: 28px;
	}
}

/* Elementor wrapper autour du shortcode */
.elementor-element-homerealrow.mfa-home-real-wrap > .elementor-container,
.elementor-element-homerealrow.mfa-home-real-wrap .elementor-widget-wrap {
	gap: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.elementor-element-homerealrow.mfa-home-real-wrap .elementor-widget-shortcode {
	width: 100%;
}

@media (max-width: 767px) {
	.elementor-element-homerealrow.mfa-home-real-wrap > .elementor-container > .elementor-column {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* ---------- Contenu chantier : puces à icône check ----------
   BeTheme réinitialise `list-style` sur les <ul> du contenu ; on restaure
   des puces visibles (check bleu MFA), scoppées à la fiche réalisation. */
.mfa-real .mfa-real-content ul {
	list-style: none;
	margin: 0 0 1.4em;
	padding-left: 0;
}

.mfa-real .mfa-real-content ul li {
	position: relative;
	margin-bottom: 0.55em;
	padding-left: 30px;
}

.mfa-real .mfa-real-content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23EAF2FB'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 8.5' fill='none' stroke='%23285A9E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Les <ol> gardent leur numérotation native mais alignée. */
.mfa-real .mfa-real-content ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}

/* ==========================================================================
   Fiche prestation — strate « Nos réalisations » (auto-injectée dans
   `the_content` juste avant la section FAQ Elementor, cf. realisations.php).
   Réutilise le slider .mfa-home-real (mêmes cartes / nav / swipe) ; on n'ajoute
   ici que l'habillage de section.
   ========================================================================== */

.mfa-prestation-real {
	--mfa-blue: #285A9E;
	--mfa-navy: #122A4D;
	--mfa-red: #DC0B15;
	--mfa-soft: #EAF2FB;
	--mfa-muted: #5B6472;
	box-sizing: border-box;
	background: var(--mfa-soft);
	font-family: "Plus Jakarta Sans", sans-serif;
}

/* Injecté en HTML brut dans `the_content` (pas un vrai widget/section
   Elementor), la strate n'hérite donc pas automatiquement du comportement
   « full width » natif des sections Elementor (ex. témoignages juste
   au-dessus). On sort le fond du conteneur boxed (`.entry-content`) via la
   technique classique 100vw/marge négative pour un fond edge-to-edge, tout
   en recadrant le contenu interne (titre + slider + CTA) à la même largeur
   boxed que la home via `.mfa-prestation-real__inner` (cf. plus bas). Scopé
   à `.mfa-prestation-real` : ne touche ni `.mfa-home-real` (slider partagé
   avec la home) ni la home elle-même. */
.mfa-prestation-real {
	width: 100vw;
	max-width: 100vw;
	margin-top: 0;
	margin-bottom: 48px;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 56px 0 60px;
}

.mfa-prestation-real__inner {
	box-sizing: border-box;
	width: calc(100% - 60px);
	max-width: 1270px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
}

.mfa-prestation-real__head {
	max-width: 720px;
	margin: 0 auto 36px;
	text-align: center;
}

.mfa-prestation-real__eyebrow {
	color: var(--mfa-red);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.mfa-prestation-real__title {
	color: var(--mfa-navy);
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.2;
	margin: 0 0 14px;
}

.mfa-prestation-real__intro {
	color: var(--mfa-muted);
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0;
}

/* La strate porte déjà les tokens : le teaser interne (.mfa-real) reste
   inchangé, mais on neutralise sa marge propre pour un rythme homogène. */
.mfa-prestation-real .mfa-home-real {
	width: 100%;
}

@media (max-width: 767px) {
	.mfa-prestation-real {
		/* Ne pas toucher margin-left/right (calc breakout) : shorthand
		   `margin` interdit ici, sinon écrase le full-bleed en mobile. */
		margin-bottom: 36px;
		padding: 40px 0 44px;
	}

	.mfa-prestation-real__inner {
		width: calc(100% - 36px);
		padding: 0 18px;
	}

	.mfa-prestation-real__head {
		margin-bottom: 28px;
	}

	/* Le slider doit toucher les bords comme sur la home : `__inner` ajoute
	   36px d'inset de chaque côté (18px de marge auto issus de la largeur
	   réduite + 18px de padding). On fait ressortir uniquement le slider de
	   cet inset (titre/CTA restent boxed) — même largeur bord à bord que
	   `.mfa-card-row.mfa-home-real-wrap` sur la home (style.css ~L2417). */
	.mfa-prestation-real .mfa-home-real {
		width: auto;
		margin-left: -36px;
		margin-right: -36px;
	}
}