/*
Theme Name:   Rénovation Rodier
Theme URI:    https://framegenesis.com
Description:  Rénovation Rodier (site n°2, couverture/toiture) — Child theme based on Frost
Author:       FrameGenesis
Author URI:   https://framegenesis.com
Template:     frost
Version:      1.2.0
Text Domain:  renovation-rodier
*/

/* ==========================================================================
   Rénovation Rodier — fully custom design system
   Frost supplies FSE plumbing only; nothing below reuses Frost's own look.
   Design tokens, layout rhythm and component classes (fr-*) copied verbatim
   from the site n°1 child theme (clients/franck-rodier/) per client-approved
   charte: same client, same look, but a separate WP install, distinct
   domain, entirely distinct content. Service taxonomy inspiration only from
   renovgessien.com (see brief), no code/text/visuals reused from it.
   Multi-page site (not a one-pager like site n°1): Accueil / Services /
   Réalisations / Zone d'intervention / À propos / Avis / Contact.
   ========================================================================== */

:root {
	--fr-primary: #123c6b;
	--fr-primary-dark: #0c2a4c;
	--fr-secondary: #3e8fcc;
	--fr-bg: #ffffff;
	--fr-bg-alt: #f4f7fa;
	--fr-text: #2b333a;
	--fr-accent-light: #dcebf7;
	--fr-route: #d64545;
	--fr-white: #ffffff;
	--fr-border: #e3eaf1;
	--fr-shadow-card: 0 4px 20px rgba(18, 60, 107, 0.08);
	--fr-shadow-card-hover: 0 12px 32px rgba(18, 60, 107, 0.14);
	--fr-radius: 12px;
	--fr-radius-sm: 8px;
	--fr-header-h: 84px;
	--fr-font-heading: "Poppins", "Inter", sans-serif;
	--fr-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--fr-container: 1280px;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family: var(--fr-font-body);
	color: var(--fr-text);
	background: var(--fr-bg);
}

body.wp-block-template-part.site-header,
.site-header {
	margin: 0;
	padding: 0;
}

/* Anchor targets sit under the sticky header (still used within a single
   page, e.g. the homepage's own sections; cross-page nav uses real URLs) */
#accueil,
#services,
#realisations,
#zone,
#a-propos,
#avis,
#faq,
#contact {
	scroll-margin-top: var(--fr-header-h);
}

.fr-container {
	max-width: var(--fr-container);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Typography helpers ---------- */

.fr-eyebrow {
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fr-secondary);
	margin: 0 0 12px;
}

.fr-section h2 {
	font-family: var(--fr-font-heading);
	font-weight: 700;
	color: var(--fr-primary);
	margin: 0 0 16px;
	line-height: 1.2;
}

.fr-section__head {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}

.fr-section__intro {
	font-size: 18px;
	color: #55606b;
	margin: 0;
}

.fr-muted {
	color: #6c7885;
	font-size: 15px;
}

/* ---------- Buttons ---------- */

.fr-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--fr-radius-sm);
	padding: 15px 28px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}

.fr-btn--primary {
	background: var(--fr-primary);
	color: var(--fr-white);
}

.fr-btn--primary:hover {
	background: var(--fr-secondary);
	color: var(--fr-white);
	transform: translateY(-1px);
}

.fr-btn--outline {
	background: transparent;
	color: var(--fr-primary);
	border-color: var(--fr-primary);
}

.fr-btn--outline:hover {
	background: var(--fr-primary);
	color: var(--fr-white);
}

.fr-btn--ghost {
	background: rgba(255, 255, 255, 0.12);
	color: var(--fr-white);
	border-color: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(2px);
}

.fr-btn--ghost:hover {
	background: var(--fr-white);
	color: var(--fr-primary);
	border-color: var(--fr-white);
}

.fr-btn--white {
	background: var(--fr-white);
	color: var(--fr-primary);
}

.fr-btn--white:hover {
	background: var(--fr-accent-light);
	transform: translateY(-1px);
}

.fr-btn--lg {
	padding: 17px 34px;
	font-size: 16px;
}

/* ---------- Checklist / chips ---------- */

.fr-check-list {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: grid;
	gap: 12px;
}

.fr-check-list li {
	position: relative;
	padding-left: 30px;
	font-weight: 500;
	text-align: left;
}

.fr-check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--fr-accent-light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='%23123C6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.fr-check-list--inline {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 560px;
	margin-left: auto;
	margin-right: auto;
}

.fr-chip {
	display: inline-block;
	background: var(--fr-accent-light);
	color: var(--fr-primary);
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 14px;
	padding: 9px 18px;
	border-radius: 999px;
	margin: 0 8px 8px 0;
}

/* ---------- Placeholder media ---------- */

.fr-placeholder-img {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 220px;
	border-radius: var(--fr-radius);
	background: linear-gradient(135deg, var(--fr-accent-light) 0%, #eef4fa 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--fr-secondary);
	border: 1px dashed #b9d2e8;
}

.fr-placeholder-img span {
	font-size: 13px;
	font-weight: 600;
	color: #5d7a92;
}

.fr-placeholder-img--portrait {
	aspect-ratio: 3 / 4;
	min-height: 0;
}

/* ---------- Real photo media (Pexels — see assets/images/CREDITS.json) ---------- */

.fr-photo-img {
	position: relative;
	width: 100%;
	border-radius: var(--fr-radius);
	overflow: hidden;
	box-shadow: var(--fr-shadow-card);
	background: var(--fr-bg-alt);
}

.fr-photo-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fr-photo-img--portrait {
	aspect-ratio: 3 / 4;
}

.fr-photo-img--4-3 {
	aspect-ratio: 4 / 3;
}

figure.fr-photo-img {
	margin: 0;
}

figure.fr-photo-img figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 28px 16px 14px;
	background: linear-gradient(0deg, rgba(9, 24, 43, 0.82) 0%, rgba(9, 24, 43, 0) 100%);
	color: var(--fr-white);
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 13.5px;
	letter-spacing: 0.01em;
}

.fr-map-placeholder {
	width: 100%;
	height: 100%;
	min-height: 320px;
	border-radius: var(--fr-radius);
	background: var(--fr-bg-alt);
	border: 1px dashed #c3d3e0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--fr-secondary);
}

.fr-map-placeholder span {
	font-size: 13px;
	font-weight: 600;
	color: #5d7a92;
}

/* ==========================================================================
   Header
   ========================================================================== */

.fr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--fr-border);
	height: var(--fr-header-h);
	display: flex;
	align-items: center;
	transition: box-shadow 0.2s ease;
}

.fr-header.is-scrolled {
	box-shadow: 0 4px 20px rgba(18, 60, 107, 0.08);
}

.fr-header__inner {
	width: 100%;
	max-width: var(--fr-container);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.fr-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.fr-logo__img {
	display: block;
	height: 40px;
	width: auto;
	max-width: 44vw;
}

/* Logo réel (assets/images/rodier-renov-logo.png), fourni par le client
   le 2026-09-07 — remplace le logotype texte provisoire précédent. */
.fr-footer__brand .fr-logo__img {
	height: 34px;
}

.fr-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
}

.fr-nav a:not(.fr-btn):not(.fr-phone) {
	text-decoration: none;
	color: var(--fr-text);
	font-weight: 500;
	font-size: 15px;
	transition: color 0.2s ease;
}

.fr-nav a:not(.fr-btn):not(.fr-phone):hover {
	color: var(--fr-secondary);
}

.fr-nav__actions-mobile {
	display: none;
}

/* Sous-menu "Services" (9 pages dédiées, C7) — retour client 2026-09-07 :
   menu déroulant listant toutes les prestations au survol. */
.fr-nav .has-submenu {
	position: relative;
}

.fr-nav .submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 901px) {
	/* Panneau large en 2 colonnes, positionné en `fixed` et centré sur le
	   viewport (pas ancré au lien "Services" lui-même) : ne peut donc jamais
	   dépasser l'écran ni se couper, quelle que soit la largeur de fenêtre. */
	.fr-nav .submenu {
		position: fixed;
		top: var(--fr-header-h);
		left: 50%;
		width: min(640px, calc(100vw - 48px));
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px;
		background: var(--fr-white);
		border: 1px solid var(--fr-border);
		border-radius: var(--fr-radius);
		box-shadow: var(--fr-shadow-card-hover);
		padding: 14px;
		opacity: 0;
		visibility: hidden;
		transform: translateX(-50%) translateY(6px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	}

	.fr-nav .has-submenu:hover .submenu,
	.fr-nav .has-submenu:focus-within .submenu {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%) translateY(0);
	}

	.fr-nav .submenu li {
		display: block;
	}

	.fr-nav .submenu a {
		display: block;
		padding: 12px 14px;
		border-radius: 6px;
		font-size: 14.5px;
		white-space: normal;
		line-height: 1.35;
	}

	.fr-nav .submenu a:hover {
		background: var(--fr-bg-alt);
	}
}

@media (max-width: 900px) {
	.fr-nav .submenu {
		padding-left: 16px;
		border-left: 2px solid var(--fr-border);
	}

	.fr-nav .submenu a {
		border-bottom: 1px solid var(--fr-border);
		padding: 12px 4px;
		font-size: 15.5px;
	}
}

.fr-header__actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

.fr-phone {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--fr-primary);
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 15px;
	transition: color 0.2s ease;
}

.fr-phone:hover {
	color: var(--fr-secondary);
}

.fr-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	border: none;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}

.fr-nav-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--fr-primary);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.fr-nav-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.fr-nav-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.fr-nav-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Page hero (inner pages: Services, Réalisations, Zone, À propos, Avis, Contact)
   Home keeps the full rotating .fr-hero, inner pages get a short banner.
   ========================================================================== */

.fr-page-hero {
	background: linear-gradient(135deg, var(--fr-primary) 0%, var(--fr-primary-dark) 100%);
	padding: clamp(56px, 8vw, 88px) 0 clamp(40px, 6vw, 64px);
	text-align: center;
}

.fr-page-hero__inner {
	max-width: 760px;
}

.fr-page-hero .fr-eyebrow {
	color: var(--fr-accent-light);
	justify-content: center;
}

.fr-page-hero h1 {
	font-family: var(--fr-font-heading);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 44px);
	color: var(--fr-white);
	margin: 0 0 14px;
	line-height: 1.15;
}

.fr-page-hero p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   Services — 9 sections alternées photo/texte (teaser accueil + hub /services/)
   Remplace l'ancienne grille de cartes à icônes (retour client 2026-09-07 :
   une vraie photo par prestation plutôt qu'un pictogramme).
   ========================================================================== */

.fr-service-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 40px 0;
	border-bottom: 1px solid var(--fr-border);
}

.fr-service-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.fr-service-row:first-child {
	padding-top: 0;
}

.fr-service-row__media {
	border-radius: var(--fr-radius);
	overflow: hidden;
	box-shadow: var(--fr-shadow-card);
	aspect-ratio: 4 / 3;
}

.fr-service-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fr-service-row h3 {
	font-family: var(--fr-font-heading);
	font-weight: 700;
	color: var(--fr-primary);
	font-size: 22px;
	margin: 0 0 12px;
}

.fr-service-row p {
	color: #4a545e;
	font-size: 15.5px;
	line-height: 1.6;
	margin: 0 0 18px;
}

/* Alternance : rangées paires, image à droite */
.fr-service-row:nth-child(even) .fr-service-row__media {
	order: 2;
}

@media (max-width: 760px) {
	.fr-service-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding: 28px 0;
	}

	.fr-service-row:nth-child(even) .fr-service-row__media {
		order: 0;
	}
}

.fr-service-card {
	background: var(--fr-white);
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow-card);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.fr-service-card:hover {
	box-shadow: var(--fr-shadow-card-hover);
	transform: translateY(-3px);
}

.fr-service-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--fr-accent-light);
	color: var(--fr-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
	flex-shrink: 0;
}

.fr-service-card h3 {
	font-family: var(--fr-font-heading);
	font-weight: 700;
	color: var(--fr-primary);
	font-size: 20px;
	margin: 0 0 12px;
}

.fr-service-card p {
	font-size: 15px;
	color: #4a545e;
	line-height: 1.6;
	margin: 0 0 14px;
}

.fr-service-card .fr-feature-list {
	margin-bottom: 18px;
}

.fr-service-card .fr-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* ---------- Services detail sections (full Services page) ---------- */

.fr-service-detail {
	padding: 44px 0;
}

.fr-service-detail + .fr-service-detail {
	border-top: 1px solid var(--fr-border);
}

.fr-service-detail__head {
	max-width: 760px;
	margin: 0 0 24px;
}

.fr-service-detail__head h2 {
	font-size: clamp(24px, 2.8vw, 32px);
	margin: 0 0 12px;
}

.fr-service-detail__head p {
	font-size: 16.5px;
	color: #4a545e;
	line-height: 1.7;
	margin: 0;
}

.fr-service-detail__list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 32px;
	max-width: 900px;
}

.fr-service-detail__list li {
	font-size: 15px;
	color: #4a545e;
	line-height: 1.55;
	padding-left: 22px;
	position: relative;
}

.fr-service-detail__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fr-secondary);
}

.fr-service-detail__list strong {
	color: var(--fr-primary);
}

/* ==========================================================================
   Dépannage / intervention rapide banner
   ========================================================================== */

.fr-depannage {
	background: linear-gradient(120deg, var(--fr-primary) 0%, var(--fr-primary-dark) 100%);
	padding: clamp(40px, 5vw, 56px) 0;
}

.fr-depannage__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.fr-depannage__text {
	flex: 1 1 380px;
}

.fr-depannage .fr-eyebrow {
	color: var(--fr-accent-light);
}

.fr-depannage h2 {
	color: var(--fr-white);
	font-size: clamp(22px, 2.6vw, 30px);
	margin: 0 0 10px;
}

.fr-depannage p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 15.5px;
	margin: 0;
}

.fr-depannage__cases {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
}

.fr-depannage__cases li {
	color: var(--fr-white);
	font-size: 14px;
	font-weight: 500;
	position: relative;
	padding-left: 20px;
}

.fr-depannage__cases li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fr-secondary);
}

.fr-depannage__action {
	flex: 0 0 auto;
}

.fr-depannage__phone {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--fr-white);
	color: var(--fr-primary);
	font-family: var(--fr-font-heading);
	font-weight: 700;
	font-size: 20px;
	text-decoration: none;
	border-radius: var(--fr-radius);
	padding: 18px 28px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.fr-depannage__phone:hover {
	background: var(--fr-accent-light);
	transform: translateY(-1px);
}

/* ==========================================================================
   Réalisations — avant/après cards (placeholders until real jobsite photos)
   ========================================================================== */

.fr-avant-apres {
	position: relative;
}

.fr-avant-apres__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 1;
	display: flex;
	gap: 6px;
}

.fr-avant-apres__badge span {
	background: rgba(9, 24, 43, 0.72);
	color: var(--fr-white);
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
}

.fr-avant-apres__caption {
	padding: 14px 4px 0;
}

.fr-avant-apres__caption h3 {
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--fr-primary);
	margin: 0 0 4px;
}

.fr-avant-apres__caption p {
	font-size: 13px;
	color: #6c7885;
	margin: 0;
}

/* ==========================================================================
   Avis — empty state (no fabricated reviews, see CLAUDE.md)
   ========================================================================== */

.fr-avis-empty {
	max-width: 620px;
	margin: 0 auto;
	text-align: center;
	background: var(--fr-white);
	border: 1px dashed #c3d3e0;
	border-radius: var(--fr-radius);
	padding: 48px 32px;
}

.fr-avis-empty p {
	font-size: 16px;
	color: #4a545e;
	margin: 0 0 20px;
}

.fr-avis-empty p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.fr-hero {
	position: relative;
	height: calc(100vh - var(--fr-header-h));
	height: calc(100dvh - var(--fr-header-h));
	min-height: 560px;
	max-height: 820px;
	overflow: hidden;
	background: var(--fr-primary-dark);
}

.fr-hero__slides {
	position: relative;
	width: 100%;
	height: 100%;
}

.fr-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease;
	display: flex;
	align-items: center;
}

.fr-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Fond photo réel par slide (retour client 2026-09-07 : un dégradé bleu
   plaqué sur une photo créait un mélange de couleurs qui jurait — fond
   neutre, la photo porte toute la couleur). */
.fr-hero__bg {
	position: absolute;
	inset: 0;
	background: #0b1720;
}

.fr-hero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fr-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(6, 14, 23, 0.75) 0%, rgba(6, 14, 23, 0.35) 45%, rgba(6, 14, 23, 0.55) 100%);
}

.fr-hero__content {
	position: relative;
	z-index: 2;
	max-width: var(--fr-container);
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
	color: var(--fr-white);
}

.fr-hero__content > * {
	max-width: 640px;
}

.fr-hero .fr-eyebrow {
	color: var(--fr-accent-light);
}

.fr-hero__title {
	font-family: var(--fr-font-heading);
	font-weight: 700;
	font-size: clamp(34px, 5vw, 58px);
	line-height: 1.12;
	margin: 0 0 20px;
	color: var(--fr-white);
}

.fr-hero__subtitle {
	font-size: clamp(16px, 2vw, 19px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	margin: 0 0 32px;
}

.fr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.fr-hero__dots {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 10px;
}

.fr-hero__dots button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	background: transparent;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.fr-hero__dots button.is-active {
	background: var(--fr-white);
	transform: scale(1.2);
}

.fr-hero__scroll {
	position: absolute;
	right: 32px;
	bottom: 34px;
	z-index: 3;
	color: rgba(255, 255, 255, 0.85);
	display: flex;
	animation: fr-bounce 2.2s ease-in-out infinite;
}

@keyframes fr-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */

.fr-section {
	padding: clamp(64px, 8vw, 108px) 0;
	background: var(--fr-bg);
}

.fr-section--alt {
	background: var(--fr-bg-alt);
}

/* ---------- About ---------- */

.fr-about {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 64px;
	align-items: center;
}

.fr-about__text p {
	font-size: 17px;
	line-height: 1.7;
	color: #4a545e;
}

.fr-about__text h2 {
	font-size: clamp(28px, 3vw, 40px);
}

/* ---------- Services ---------- */

.fr-service-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	padding: 40px 0;
}

.fr-service-block + .fr-service-block {
	border-top: 1px solid var(--fr-border);
}

.fr-service-block--reverse .fr-service-block__media {
	order: 2;
}

.fr-service-block--reverse .fr-service-block__text {
	order: 1;
}


.fr-service-block__num {
	display: inline-block;
	font-family: var(--fr-font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--fr-secondary);
	background: var(--fr-accent-light);
	border-radius: 999px;
	padding: 6px 14px;
	margin-bottom: 14px;
}

.fr-service-block__text h3 {
	font-family: var(--fr-font-heading);
	font-weight: 700;
	color: var(--fr-primary);
	font-size: clamp(22px, 2.4vw, 28px);
	margin: 0 0 14px;
}

.fr-service-block__text > p {
	font-size: 17px;
	color: #4a545e;
	margin: 0 0 20px;
}

.fr-feature-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.fr-feature-list li {
	font-size: 15px;
	color: #4a545e;
	line-height: 1.55;
	padding-left: 22px;
	position: relative;
}

.fr-feature-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fr-secondary);
}

.fr-feature-list strong {
	color: var(--fr-primary);
}

.fr-reassurance {
	color: var(--fr-secondary);
	font-size: 15px;
	margin: 0 0 22px;
}

/* ---------- Gallery ---------- */

.fr-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.fr-gallery__item {
	cursor: default;
}

/* ---------- Itinerary cards (stylised route maps) ---------- */

.fr-itinerary-card {
	margin: 0;
	border-radius: var(--fr-radius);
	overflow: hidden;
	background: var(--fr-white);
	box-shadow: var(--fr-shadow-card);
}

.fr-itinerary-card__map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.fr-itinerary-card__iframe {
	display: block;
	position: absolute;
	/* Volontairement plus grand que la carte, débordement rogné par le
	   overflow:hidden du parent : pousse les widgets Google (lien "ouvrir
	   dans Maps", pavé de zoom, bouton satellite) hors de la zone visible.
	   L'agrandissement est symétrique donc le centre géographique affiché
	   ne bouge pas, les repères/trait dessinés par-dessus restent alignés. */
	top: -60px;
	left: -60px;
	right: -60px;
	bottom: -60px;
	width: calc(100% + 120px);
	height: calc(100% + 120px);
	border: 0;
	/* Carte figée volontairement : pas de scroll ni de zoom, purement illustrative. */
	pointer-events: none;
}

.fr-itinerary-card__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.fr-itinerary-card__line {
	position: absolute;
	height: 0;
	border-top: 3px dashed var(--fr-route);
	transform-origin: 0 0;
}

.fr-itinerary-card__pin {
	position: absolute;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var(--fr-white);
	border: 3px solid var(--fr-primary);
	box-shadow: 0 1px 4px rgba(9, 24, 43, 0.35);
}

.fr-itinerary-card__pin--end {
	border-color: var(--fr-route);
}

.fr-itinerary-card__caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 18px 16px;
	border-top: 1px solid var(--fr-border);
}

.fr-itinerary-card__route {
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 15px;
	color: var(--fr-primary);
}

.fr-itinerary-card__arrow {
	color: var(--fr-route);
}

.fr-itinerary-card__dept {
	font-size: 12.5px;
	color: #5d7a92;
}

/* ---------- Trust bar ---------- */

.fr-trust-bar {
	background: var(--fr-primary);
	padding: 20px 0;
}

.fr-trust-bar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 36px;
}

.fr-trust-bar__list li {
	position: relative;
	padding-left: 26px;
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--fr-white);
	white-space: nowrap;
}

.fr-trust-bar__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* ---------- Why us (benefit cards) ---------- */

.fr-benefit-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.fr-benefit-card {
	background: var(--fr-white);
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow-card);
	padding: 30px 26px;
}

.fr-benefit-card__num {
	display: inline-block;
	font-family: var(--fr-font-heading);
	font-weight: 700;
	font-size: 13px;
	color: var(--fr-secondary);
	margin-bottom: 12px;
}

.fr-benefit-card h3 {
	font-family: var(--fr-font-heading);
	font-weight: 700;
	color: var(--fr-primary);
	font-size: 18px;
	margin: 0 0 10px;
}

.fr-benefit-card p {
	font-size: 15px;
	color: #4a545e;
	line-height: 1.6;
	margin: 0;
}

/* ---------- Experience / journey ---------- */

.fr-journey {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.fr-journey__step,
.fr-journey__result {
	flex: 1 1 200px;
	max-width: 240px;
	background: var(--fr-bg-alt);
	border-radius: var(--fr-radius);
	padding: 26px 20px;
	text-align: center;
}

.fr-journey__result {
	background: var(--fr-primary);
	color: var(--fr-white);
}

.fr-journey__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--fr-primary);
	color: var(--fr-white);
	font-family: var(--fr-font-heading);
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 12px;
}

.fr-journey__num--result {
	background: var(--fr-white);
	color: var(--fr-primary);
}

.fr-journey__step h3,
.fr-journey__result h3 {
	font-family: var(--fr-font-heading);
	font-weight: 700;
	font-size: 17px;
	margin: 0 0 8px;
	color: var(--fr-primary);
}

.fr-journey__result h3 {
	color: var(--fr-white);
}

.fr-journey__step p,
.fr-journey__result p {
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
	color: #4a545e;
}

.fr-journey__result p {
	color: rgba(255, 255, 255, 0.88);
}

.fr-journey__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fr-route);
	font-size: 22px;
	font-weight: 700;
	flex: 0 0 auto;
}

.fr-journey__promise {
	text-align: center;
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 18px;
	color: var(--fr-primary);
	margin: 0;
}

/* ---------- About quote ---------- */

.fr-about__quote {
	margin: 0 0 20px;
	padding: 16px 20px;
	border-left: 3px solid var(--fr-secondary);
	background: var(--fr-bg-alt);
	border-radius: 0 var(--fr-radius-sm) var(--fr-radius-sm) 0;
}

.fr-about__quote p {
	margin: 0;
	font-style: italic;
	color: var(--fr-primary);
	font-size: 15.5px;
	line-height: 1.6;
}

/* ---------- Testimonials trust chips ---------- */

.fr-trust-chips {
	margin-top: 20px;
	text-align: center;
}

/* ---------- FAQ ---------- */

.fr-faq {
	max-width: 780px;
	margin: 0 auto;
	display: grid;
	gap: 12px;
}

.fr-faq__item {
	background: var(--fr-white);
	border: 1px solid var(--fr-border);
	border-radius: var(--fr-radius-sm);
	padding: 6px 22px;
}

.fr-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 30px 16px 0;
	position: relative;
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 16px;
	color: var(--fr-primary);
}

.fr-faq__item summary::-webkit-details-marker {
	display: none;
}

.fr-faq__item summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 14px;
	font-size: 22px;
	font-weight: 400;
	color: var(--fr-secondary);
}

.fr-faq__item[open] summary::after {
	content: "−";
}

.fr-faq__item p {
	margin: 0 0 18px;
	font-size: 15px;
	color: #4a545e;
	line-height: 1.6;
}

/* ---------- Zone ---------- */

.fr-zone {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 64px;
	align-items: stretch;
}

.fr-zone__text h2 {
	font-size: clamp(26px, 3vw, 36px);
}

.fr-zone__text > p {
	font-size: 17px;
	color: #4a545e;
	line-height: 1.7;
	margin: 0 0 20px;
}

.fr-zone__chips {
	margin-bottom: 10px;
}

.fr-zone__map {
	min-height: 480px;
}

.fr-map-iframe {
	width: 100%;
	height: 100%;
	min-height: 480px;
	border: 0;
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow-card);
}

/* ---------- Testimonials ---------- */

.fr-testimonials {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.fr-testimonial-card {
	display: flex;
	flex-direction: column;
	background: var(--fr-white);
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow-card);
	padding: 32px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.fr-testimonial-card:hover {
	box-shadow: var(--fr-shadow-card-hover);
	transform: translateY(-3px);
}

.fr-stars {
	display: flex;
	gap: 4px;
	color: #f0b429;
	margin-bottom: 14px;
}

.fr-testimonial-card__quote {
	font-size: 15.5px;
	line-height: 1.65;
	color: #4a545e;
	margin: 0 0 24px;
	flex-grow: 1;
}

.fr-testimonial-card__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}

.fr-testimonial-card__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.fr-testimonial-card__name {
	font-family: var(--fr-font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--fr-primary);
	margin: 0;
	line-height: 1.3;
}

.fr-testimonial-card__city {
	font-size: 13px;
	color: #6c7885;
	margin: 0;
	line-height: 1.3;
}

/* ---------- CTA final ---------- */

.fr-cta-final {
	background: linear-gradient(135deg, var(--fr-primary) 0%, var(--fr-primary-dark) 100%);
	padding: clamp(64px, 8vw, 100px) 0;
	text-align: center;
}

.fr-cta-final__inner {
	max-width: 760px;
}

.fr-cta-final h2 {
	color: var(--fr-white);
	font-size: clamp(26px, 3.4vw, 38px);
	margin: 0 0 16px;
}

.fr-cta-final p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 17px;
	margin: 0 0 32px;
}

.fr-cta-final .fr-check-list--inline li {
	color: var(--fr-white);
}

.fr-cta-final .fr-check-list--inline li::before {
	background: rgba(255, 255, 255, 0.16);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.5l3 3 7-7' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.fr-cta-final .fr-check-list--inline {
	margin-bottom: 36px;
}

/* ---------- Contact ---------- */

.fr-contact {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 56px;
	align-items: start;
}

.fr-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 18px;
}

.fr-contact__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 16px;
	color: var(--fr-text);
}

.fr-contact__list svg {
	color: var(--fr-secondary);
	flex-shrink: 0;
}

.fr-contact__list a {
	color: var(--fr-text);
	text-decoration: none;
	font-weight: 500;
}

.fr-contact__list a:hover {
	color: var(--fr-secondary);
}

.fr-form {
	background: var(--fr-white);
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow-card);
	padding: 36px;
	display: grid;
	gap: 20px;
}

.fr-form__row {
	display: grid;
	gap: 8px;
}

.fr-form__row--split {
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.fr-form__row--split > div {
	display: grid;
	gap: 8px;
}

.fr-form label {
	font-weight: 600;
	font-size: 14px;
	color: var(--fr-primary);
}

.fr-form input,
.fr-form select,
.fr-form textarea {
	font-family: var(--fr-font-body);
	font-size: 15px;
	color: var(--fr-text);
	border: 1.5px solid var(--fr-border);
	border-radius: var(--fr-radius-sm);
	padding: 12px 14px;
	background: var(--fr-bg);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fr-form input:focus,
.fr-form select:focus,
.fr-form textarea:focus {
	outline: none;
	border-color: var(--fr-secondary);
	box-shadow: 0 0 0 3px rgba(62, 143, 204, 0.15);
}

.fr-form button {
	justify-self: start;
}

.fr-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fr-form__notice {
	margin: 0;
	padding: 14px 16px;
	border-radius: var(--fr-radius-sm);
	font-size: 14.5px;
	font-weight: 500;
}

.fr-form__notice--success {
	background: #e5f6ec;
	color: #1c6b3f;
}

.fr-form__notice--error {
	background: #fdeaea;
	color: #a3271f;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.fr-footer {
	background: var(--fr-primary-dark);
	color: rgba(255, 255, 255, 0.75);
	padding: 72px 0 0;
}

.fr-footer__inner {
	max-width: var(--fr-container);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
}

.fr-footer h3 {
	font-family: var(--fr-font-heading);
	color: var(--fr-white);
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 18px;
}

.fr-footer p {
	font-size: 14.5px;
	line-height: 1.7;
	margin: 0 0 12px;
}

.fr-footer__legal em {
	color: rgba(255, 255, 255, 0.5);
}

.fr-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.fr-footer a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	font-size: 14.5px;
	transition: color 0.2s ease;
}

.fr-footer a:hover {
	color: var(--fr-white);
}

.fr-footer__brand .fr-logo {
	margin-bottom: 18px;
}

.fr-footer__bottom {
	margin-top: 56px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 16px;
}

.fr-footer__bottom p {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}

.fr-footer__credit a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fr-footer__credit a:hover {
	color: var(--fr-white);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.fr-about,
	.fr-zone,
	.fr-contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.fr-about__media {
		max-width: 320px;
	}

	.fr-service-block {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.fr-service-block--reverse .fr-service-block__media,
	.fr-service-block--reverse .fr-service-block__text {
		order: initial;
	}

	.fr-service-block__media .fr-photo-img {
		aspect-ratio: 16 / 9;
	}

	.fr-gallery,
	.fr-testimonials {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fr-benefit-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fr-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fr-service-detail__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.fr-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 860px) {
	.fr-nav {
		position: fixed;
		inset: var(--fr-header-h) 0 0 0;
		background: var(--fr-white);
		padding: 32px 24px;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
	}

	.fr-nav.is-open {
		transform: translateX(0);
	}

	.fr-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.fr-nav a {
		font-size: 18px;
	}

	.fr-nav__actions-mobile {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: 32px;
		padding-top: 32px;
		border-top: 1px solid var(--fr-border);
	}

	.fr-header__actions {
		display: none;
	}

	.fr-nav-toggle {
		display: flex;
	}

	.fr-journey {
		flex-direction: column;
		align-items: stretch;
	}

	.fr-journey__step,
	.fr-journey__result {
		max-width: none;
	}

	.fr-journey__arrow {
		transform: rotate(90deg);
	}
}

@media (max-width: 640px) {
	.fr-btn {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}

	.fr-form__row--split {
		grid-template-columns: minmax(0, 1fr);
	}

	.fr-gallery,
	.fr-testimonials,
	.fr-services-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.fr-benefit-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.fr-depannage__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.fr-depannage__action {
		width: 100%;
	}

	.fr-depannage__phone {
		width: 100%;
		justify-content: center;
	}

	.fr-check-list--inline {
		grid-template-columns: minmax(0, 1fr);
	}

	.fr-footer__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.fr-hero__scroll {
		display: none;
	}

	.fr-hero {
		min-height: 460px;
	}

	.fr-logo__img {
		height: 32px;
	}

	.fr-form {
		padding: 24px 20px;
	}

	.fr-hero__actions .fr-btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.fr-zone__map,
	.fr-map-iframe {
		min-height: 340px;
	}

	:root {
		--fr-header-h: 64px;
	}
}

/* ==========================================================================
   Mobile call bar — fixed bottom bar, phone always one tap away on mobile.
   Playbook §7.2 : "le canal de conversion n°1 pour un artisan", flagged as
   quasi toujours absent sur un premier audit ; protocole M1 (BLOQUANT).
   Desktop keeps the header's inline phone link instead (no fixed bar there).
   ========================================================================== */
.fr-callbar {
	display: none;
}

/* ---------- Grilles génériques (réalisations, blog) ---------- */

.fr-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 900px) {
	.fr-grid-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Réalisations (CPT "realisation", édité par le client) ---------- */

.fr-realisation-card {
	background: var(--fr-white);
	border: 1px solid var(--fr-border);
	border-radius: var(--fr-radius);
	overflow: hidden;
	box-shadow: var(--fr-shadow-card);
}

.fr-realisation-card__media {
	aspect-ratio: 4 / 3;
	background: var(--fr-accent-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fr-primary);
	overflow: hidden;
}

.fr-realisation-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fr-realisation-card__body {
	padding: 22px;
}

.fr-realisation-card h3 {
	font-size: 18px;
	margin: 0 0 8px;
	color: var(--fr-primary);
}

.fr-realisation-card p {
	color: #4a545e;
	font-size: 14.5px;
	margin: 0;
}

/* ---------- Blog (articles WP natifs, voir templates/home.html) ---------- */

.fr-blog-pagination {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 48px;
	font-family: var(--fr-font-heading);
	font-weight: 600;
}

.fr-blog-pagination a,
.fr-blog-pagination .page-numbers {
	color: var(--fr-primary);
	text-decoration: none;
}

.fr-blog-pagination .current {
	color: var(--fr-secondary);
}

.fr-article__meta {
	color: var(--fr-secondary);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.04em;
	margin: 8px 0 28px;
}

.fr-article .wp-block-post-title {
	font-family: var(--fr-font-heading);
	font-weight: 700;
	color: var(--fr-primary);
	font-size: clamp(26px, 3.4vw, 36px);
	line-height: 1.2;
}

.fr-article .wp-block-post-featured-image {
	margin: 0 0 32px;
}

.fr-article .wp-block-post-featured-image img {
	width: 100%;
	border-radius: 12px;
}

.fr-article .wp-block-post-content {
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--fr-text);
	max-width: 760px;
}

.fr-article .wp-block-post-content h2 {
	font-family: var(--fr-font-heading);
	color: var(--fr-primary);
	font-size: 24px;
	margin-top: 40px;
}

.fr-article .wp-block-post-content h3 {
	font-size: 19px;
	margin-top: 28px;
}

.fr-article .wp-block-post-content a {
	color: var(--fr-secondary);
}

/* Page Mentions légales — sections empilées, lecture longue. */
.fr-legal {
	max-width: 760px;
}

.fr-legal h2 {
	margin-top: 2em;
}

.fr-legal h2:first-child {
	margin-top: 0;
}

.fr-legal p {
	line-height: 1.7;
}

/* Fil d'Ariane — protocole C9 / F6. Icônes Lucide (maison + chevron),
   présentation en petites capsules plutôt qu'un texte brut séparé par "/".
   Bande pleine largeur + .fr-container interne (voir rr_breadcrumb() dans
   functions.php) : corrige un alignement collé au bord gauche du viewport
   et un vide visuel avant le hero, signalés par le client (2026-09-07). */
.fr-breadcrumb {
	background: var(--fr-bg-alt);
	border-bottom: 1px solid var(--fr-border);
}

.fr-breadcrumb .fr-container {
	padding-top: 12px;
	padding-bottom: 12px;
}

.fr-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.85rem;
}

.fr-breadcrumb li {
	display: flex;
	align-items: center;
}

.fr-breadcrumb a,
.fr-breadcrumb li[aria-current="page"] span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 8px;
	border-radius: 999px;
	line-height: 1;
}

.fr-breadcrumb a {
	color: var(--fr-text);
	opacity: 0.65;
	text-decoration: none;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.fr-breadcrumb a:hover {
	opacity: 1;
	background: var(--fr-bg-alt);
	text-decoration: none;
}

.fr-breadcrumb a svg {
	flex-shrink: 0;
}

.fr-breadcrumb__sep-item {
	color: var(--fr-border);
}

.fr-breadcrumb__sep {
	display: inline-flex;
}

.fr-breadcrumb li[aria-current="page"] span {
	color: var(--fr-primary);
	font-weight: 600;
	background: var(--fr-accent-light);
}

/* Page prestation individuelle (patterns/service-content.php). */
.fr-service-page {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 40px;
	align-items: start;
}

.fr-service-page__media {
	margin: 0;
}

.fr-service-page__media img {
	width: 100%;
	height: auto;
	border-radius: var(--fr-radius);
	box-shadow: var(--fr-shadow-card);
	display: block;
}

.fr-photo-credit {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--fr-text);
	opacity: 0.6;
}

.fr-photo-credit a {
	color: inherit;
}

.fr-service-page__lead {
	font-size: 18px;
	font-weight: 500;
	color: var(--fr-text);
	margin: 0 0 16px;
}

.fr-feature-list--check {
	display: grid;
	gap: 10px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.fr-feature-list--check li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0;
	font-size: 15px;
	color: #4a545e;
	line-height: 1.5;
}

.fr-feature-list--check li svg {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--fr-secondary);
}

.fr-service-page__related {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--fr-border);
}

.fr-service-page__related h2 {
	font-size: 18px;
	margin: 0 0 12px;
}

.fr-service-page__related ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.fr-service-page__related a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--fr-bg-alt);
	color: var(--fr-primary);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

.fr-service-page__related a:hover {
	background: var(--fr-accent-light);
}

@media (max-width: 860px) {
	.fr-service-page {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.fr-callbar {
		display: flex;
		position: fixed;
		z-index: 40;
		left: 0;
		right: 0;
		bottom: 0;
		gap: 1px;
		background: var(--fr-border);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
	}

	.fr-callbar a {
		flex: 1 1 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 14px 12px;
		font-weight: 600;
		text-decoration: none;
		background: var(--fr-primary);
		color: var(--fr-white);
	}

	.fr-callbar a.fr-callbar__devis {
		background: var(--fr-secondary);
	}

	/* Leaves room at the bottom of the viewport so the fixed bar never
	   covers the footer's own content (e.g. the last footer column). */
	body {
		padding-bottom: 64px;
	}
}