/* =========================================================================
   David Bois — feuille de style principale.
   Le CSS critique (variables, header, hero) est inline dans header.php ;
   ce fichier couvre le reste du site. Mobile-first.
   ========================================================================= */

/* ---- Typographie & prose ------------------------------------------------ */
h1, h2, h3, h4 {
	font-family: var(--display);
	color: var(--petrole);
	line-height: 1.18;
	letter-spacing: .005em;
}
h2 { font-size: clamp(1.55rem, 3.4vw, 2.15rem); font-weight: 800; margin: 0 0 .6em; }
h3 { font-size: 1.22rem; font-weight: 700; margin: 0 0 .4em; }
p  { margin: 0 0 1.1em; }
.narrow { max-width: 960px; }
.narrow-lg { max-width: 1180px; }

/* Toutes les pages sauf l'accueil : contenu sur 1400px (ordinateur) */
body:not(.home) { --container: 1400px; }
/* Header, footer et barre de réassurance : même largeur (1400px) sur toutes les pages,
   accueil compris, pour éviter le saut de largeur en changeant de page. */
.site-header .container, .site-footer .container, .reassurance .container { max-width: 1400px; }
body:not(.home) .narrow,
body:not(.home) .narrow-lg { max-width: 1400px; }
.text-link { font-weight: 700; color: var(--terre-fonce); text-decoration: none; border-bottom: 2px solid var(--ciel); }
.text-link:hover, .text-link:focus-visible { color: var(--petrole); border-color: var(--terre); }
:focus-visible { outline: 3px solid var(--terre); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--ciel); color: var(--marine); }

/* ---- Sections ----------------------------------------------------------- */
.section { padding-block: 56px; }
.section-intro { padding-top: 64px; }
.eyebrow { margin: 0 0 6px; }
.page-hero {
	background: var(--petrole);
	color: var(--blanc);
	padding: 44px 0 52px;
	background-image:
		radial-gradient(ellipse 90% 120% at 100% 0%, rgba(143, 182, 201, .10), transparent 55%),
		radial-gradient(ellipse 70% 100% at 0% 100%, rgba(166, 91, 51, .12), transparent 60%);
}
.page-hero h1 {
	color: var(--blanc);
	font-size: clamp(1.75rem, 4.6vw, 2.7rem);
	font-weight: 800;
	margin: 8px 0 10px;
}
.page-hero .h1-sub { display: block; color: var(--ciel-clair); font-size: .58em; font-weight: 700; margin-top: .25em; }
.page-hero .lede { font-size: 1.12rem; opacity: .94; max-width: 720px; margin-bottom: 22px; }
.page-hero .hero-actions { justify-content: flex-start; }

/* ---- Fil d'Ariane ------------------------------------------------------- */
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; padding: 0; font-size: .88rem; }
.breadcrumb li { opacity: .85; }
.breadcrumb li:not(:last-child)::after { content: "›"; margin: 0 4px 0 8px; color: var(--ciel-clair); }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--ciel-clair); }
.page-hero .breadcrumb { color: var(--sable); }

/* ---- Bandeau de réassurance --------------------------------------------- */
.reassurance { background: var(--terre); color: var(--blanc); }
.reassurance-inner { display: flex; align-items: center; gap: 14px; padding-block: 14px; }
.reassurance p { margin: 0; font-size: 1rem; line-height: 1.45; }
.leaf-banner { flex: 0 0 auto; width: 26px; height: 34px; color: var(--blanc); opacity: .9; }

/* ---- Séparateur signature : trait + feuilles de chêne ------------------- */
.divider { display: flex; align-items: center; gap: 16px; max-width: 420px; margin: 4px auto; padding: 8px 20px; }
.divider-line { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--ciel)); border-radius: 2px; }
.divider-line:last-child { background: linear-gradient(90deg, var(--ciel), transparent); }
.divider-leaves { display: flex; align-items: flex-end; gap: 4px; color: var(--petrole); }
.divider .leaf { width: 20px; height: 26px; }
.divider .leaf-sm { width: 14px; height: 19px; opacity: .75; }

/* ---- Cartes ------------------------------------------------------------- */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 26px 0; }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.card {
	background: var(--blanc);
	border: 1px solid rgba(46, 89, 114, .22);
	border-radius: var(--radius);
	padding: 24px 22px;
	box-shadow: 0 2px 10px rgba(34, 48, 63, .05);
	transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(34, 48, 63, .11); }
.card-icon { display: inline-flex; color: var(--terre); margin-bottom: 12px; }
.card-picto { width: 56px; height: 56px; margin-bottom: 12px; }
.card h3 { color: var(--petrole); }
.card p { margin-bottom: 0; }
.card-photo { padding: 0; overflow: hidden; }
.card-photo img { width: 100%; height: auto; }
.photo-cards .card-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.photo-cards-portrait .card-photo img { aspect-ratio: 3 / 4; }
.photo-banner { margin: 1.4em 0 2em; border-radius: var(--radius); overflow: hidden; }
.photo-banner img { width: 100%; height: auto; display: block; }
.photo-banner figcaption { padding: 10px 4px 0; font-size: .92rem; color: var(--petrole); }
.card-photo figcaption { padding: 12px 16px; font-size: .92rem; color: var(--petrole); }

/* ---- Listes à feuilles -------------------------------------------------- */
.leaf-list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.leaf-list li { position: relative; padding-left: 30px; margin-bottom: .7em; }
.leaf-list li::before {
	content: "";
	position: absolute; left: 0; top: .3em;
	width: 15px; height: 15px;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--petrole) 0 55%, var(--terre) 55% 100%);
}

/* ---- Section bois (fond chaud) ------------------------------------------ */
.section-wood {
	background:
		linear-gradient(180deg, rgba(46, 89, 114, .10), rgba(46, 89, 114, .04)),
		repeating-linear-gradient(90deg, transparent 0 34px, rgba(46, 89, 114, .05) 34px 36px);
	border-block: 1px solid rgba(46, 89, 114, .18);
}

/* ---- Mise en page en 2 colonnes ----------------------------------------- */
.split { display: grid; gap: 34px; align-items: center; }
@media (min-width: 800px) { .split { grid-template-columns: 1.1fr .9fr; } }
.split-media img { border-radius: var(--radius); box-shadow: 0 14px 34px rgba(34, 48, 63, .16); }

/* ---- Carte (iframe injectée par tarteaucitron après consentement) -------- */
.map-embed iframe,
.map-embed .googlemaps_embed,
.map-embed .tac_activate {
	width: 100% !important;
	border: 1px solid rgba(36, 78, 100, .3);
	border-radius: var(--radius);
	display: block;
}
.map-embed iframe { height: 320px; }
.map-alt { margin: 8px 0 0; font-size: .92rem; }
.map-alt a { color: var(--terre-fonce); font-weight: 600; text-decoration: none; }
.map-alt a:hover, .map-alt a:focus-visible { text-decoration: underline; }

/* ---- Grille des zones de livraison -------------------------------------- */
.section-zones { background: var(--petrole); color: var(--sable); }
.section-zones h2, .section-zones .eyebrow { color: var(--blanc); }
.section-zones .eyebrow { color: var(--ciel-clair); }
.zones-grid {
	list-style: none; margin: 24px 0 0; padding: 0;
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.zones-grid a {
	display: flex; align-items: center; gap: 10px;
	min-height: 48px; padding: 10px 14px;
	background: rgba(255, 253, 249, .06);
	border: 1px solid rgba(143, 182, 201, .3);
	border-radius: 11px;
	color: var(--sable); text-decoration: none; font-weight: 600;
	transition: background .15s ease, transform .15s ease;
}
.zones-grid a:hover, .zones-grid a:focus-visible { background: rgba(143, 182, 201, .18); transform: translateY(-2px); color: #fff; }
.zones-grid .leaf-xs { width: 14px; height: 19px; color: var(--ciel); flex: 0 0 auto; }
.zones-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zones-inline a {
	display: inline-block; padding: 8px 14px; min-height: 44px; line-height: 28px;
	background: rgba(143, 182, 201, .12);
	border-radius: 999px; text-decoration: none; font-weight: 600; color: inherit;
	border: 1px solid rgba(143, 182, 201, .35);
}
.zones-inline a:hover, .zones-inline a:focus-visible { background: var(--ciel); color: var(--marine); }

/* ---- Méga-menu Villes ---------------------------------------------------- */
.menu-item-mega { position: relative; }
.mega-toggle {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 14px;
	background: none; border: 0; cursor: pointer;
	color: var(--texte); font: inherit; font-weight: 600;
	border-radius: 10px;
}
.mega-toggle:hover, .mega-toggle:focus-visible,
.mega-toggle[aria-expanded="true"] { background: rgba(46, 89, 114, .1); color: var(--petrole); }
.mega-toggle svg { transition: transform .2s ease; }
.mega-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mega-panel[hidden] { display: none !important; }
.mega-panel {
	position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 95;
	width: min(680px, calc(100vw - 32px));
	background: var(--marine);
	border: 1px solid rgba(143, 182, 201, .3);
	border-radius: var(--radius);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .4);
	padding: 20px 22px;
}
.mega-title {
	margin: 0 0 12px;
	font-family: var(--display); font-weight: 700;
	color: var(--ciel); font-size: .95rem;
	text-transform: uppercase; letter-spacing: .1em;
}
.main-nav .mega-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 14px;
}
.main-nav .mega-grid li { min-width: 0; }
.main-nav .mega-grid a {
	display: block; padding: 7px 8px; min-height: 40px;
	white-space: normal; overflow-wrap: break-word;
	color: var(--sable); text-decoration: none; font-weight: 500; font-size: .94rem;
	border-radius: 8px; line-height: 1.3;
}
.main-nav .mega-grid a:hover, .main-nav .mega-grid a:focus-visible { background: rgba(143, 182, 201, .16); color: var(--ciel); }
@media (max-width: 860px) {
	.menu-item-mega { position: static; }
	.mega-panel {
		position: static; width: auto; transform: none;
		border: 0; border-radius: 10px;
		box-shadow: none; background: rgba(255, 253, 249, .05);
		margin: 4px 0 8px; padding: 14px 14px 16px;
		max-height: 46vh; overflow-y: auto;
	}
	.mega-toggle { width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 1.1rem; color: #fff; }
	.mega-toggle:hover, .mega-toggle:focus-visible,
	.mega-toggle[aria-expanded="true"] { background: rgba(183, 208, 221, .14); color: var(--sable); }
	.main-nav .mega-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Bloc CTA ------------------------------------------------------------ */
.cta-block {
	background: linear-gradient(135deg, var(--petrole), var(--marine));
	color: var(--sable);
	border-radius: var(--radius);
	padding: 40px 28px;
	text-align: center;
	margin: 40px 0;
	background-size: 100% 100%, auto;
}
.cta-block h2 { color: var(--blanc); }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.cta-block .btn-outline { color: var(--ciel); border-color: var(--ciel); }
.cta-block .btn-outline:hover, .cta-block .btn-outline:focus-visible { background: var(--ciel); color: var(--marine); }

/* ---- Pages villes -------------------------------------------------------- */
.ville-content h2 { margin-top: 1.6em; }
.ville-voisines { margin-top: 40px; padding-top: 24px; border-top: 2px solid rgba(46, 89, 114, .25); }

/* ---- FAQ ----------------------------------------------------------------- */
.faq-item {
	background: var(--blanc);
	border: 1px solid rgba(46, 89, 114, .22);
	border-radius: 12px;
	margin-bottom: 12px;
	overflow: hidden;
}
.faq-item summary {
	cursor: pointer;
	padding: 16px 20px;
	font-weight: 700;
	font-family: var(--display);
	color: var(--petrole);
	list-style: none;
	position: relative;
	min-height: 48px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--terre); font-size: 1.4rem; font-weight: 800; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 20px 16px; margin: 0; }

/* ---- Étapes numérotées --------------------------------------------------- */
.steps { counter-reset: etape; list-style: none; margin: 0 0 1.4em; padding: 0; }
.steps li { counter-increment: etape; position: relative; padding: 0 0 18px 58px; }
.steps li::before {
	content: counter(etape);
	position: absolute; left: 0; top: -2px;
	width: 40px; height: 40px;
	display: grid; place-items: center;
	background: var(--ciel); color: var(--marine);
	border-radius: 50%;
	font-family: var(--display); font-weight: 800; font-size: 1.15rem;
}
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 42px; bottom: 2px; width: 2px; background: rgba(143, 182, 201, .4); }

/* ---- Galerie & lightbox --------------------------------------------------- */
.gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gallery-item { display: block; border-radius: 12px; overflow: hidden; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .25s ease; }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.04); }
.lightbox[hidden] { display: none; }
.lightbox {
	position: fixed; inset: 0; z-index: 200;
	display: grid; place-items: center;
	background: rgba(34, 48, 63, .92);
	padding: 24px;
}
.lightbox-figure { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: 100%; }
.lightbox img { max-width: min(1100px, 100%); max-height: 80vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lightbox img.is-switching { opacity: 0; transform: scale(.98); }
.lightbox img { transition: opacity .18s ease, transform .18s ease; }
.lightbox-caption { color: var(--sable); font-size: .95rem; text-align: center; max-width: 70ch; margin: 0; }
.lightbox-caption:empty { display: none; }
.lightbox-count { position: absolute; top: 24px; left: 24px; margin: 0; color: var(--ciel-clair); font-weight: 600; font-size: .95rem; letter-spacing: .04em; }
.lightbox-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 54px; height: 54px; border-radius: 50%;
	border: 0; cursor: pointer;
	background: rgba(246, 243, 238, .12); color: var(--blanc);
	font-size: 2.2rem; line-height: 1;
	transition: background .15s ease;
}
.lightbox-nav:hover, .lightbox-nav:focus-visible { background: var(--terre); }
.lightbox-nav:focus-visible, .lightbox-close:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-nav[disabled] { opacity: .3; cursor: default; }
@media (max-width: 700px) {
	.lightbox { padding: 16px; }
	.lightbox-nav { width: 44px; height: 44px; font-size: 1.8rem; bottom: 18px; top: auto; transform: none; }
	.lightbox-prev { left: 16px; }
	.lightbox-next { right: 16px; }
	.lightbox img { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { .lightbox img { transition: none; } }
.lightbox-close {
	position: absolute; top: 14px; right: 16px;
	width: 48px; height: 48px;
	background: var(--terre); color: #fff;
	border: 0; border-radius: 50%;
	font-size: 1.7rem; line-height: 1; cursor: pointer;
}

/* ---- Formulaire de contact ------------------------------------------------ */
.contact-split { align-items: start; }
.phone-xl a {
	font-family: var(--display);
	font-size: clamp(1.9rem, 6vw, 2.7rem);
	font-weight: 800;
	color: var(--terre-fonce);
	text-decoration: none;
}
.phone-xl a:hover { color: var(--petrole); }
.contact-form-wrap { background: var(--blanc); border: 1px solid rgba(46, 89, 114, .22); border-radius: var(--radius); padding: 14px 20px; }
.contact-form p { margin: 0 0 8px; }
.contact-form br { display: none; } /* retours à la ligne ajoutés par Contact Form 7 */
.contact-form label { display: block; font-weight: 700; margin-bottom: 2px; color: var(--petrole); }
.contact-form input, .contact-form select, .contact-form textarea {
	width: 100%;
	padding: 7px 12px;
	min-height: 40px;
	border: 1.5px solid #7B8792;
	border-radius: 10px;
	font: inherit;
	background: var(--sable);
	color: var(--texte);
}
.contact-form textarea { min-height: 84px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 3px solid var(--ciel); outline-offset: 1px; border-color: var(--petrole); }
.form-row { display: grid; gap: 0 12px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.hp-field { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }
.form-privacy { font-size: .85rem; opacity: .75; }
.form-consent label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .95rem; }
.form-consent input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; margin-top: 3px; flex: 0 0 auto; accent-color: var(--petrole); }
.form-notice { border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; }
.form-notice-ok { background: rgba(143, 182, 201, .18); border: 1.5px solid var(--petrole); }
.form-notice-err { background: rgba(166, 91, 51, .14); border: 1.5px solid var(--terre); }
.contact-note { font-size: .95rem; background: rgba(166, 91, 51, .1); border-left: 4px solid var(--terre); padding: 12px 16px; border-radius: 0 10px 10px 0; }

/* ---- Footer ---------------------------------------------------------------- */
.site-footer { background: var(--marine); color: var(--sable); margin-top: 40px; }
.footer-grid { display: grid; gap: 34px; padding-block: 48px 34px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.1fr .8fr 1.4fr; } }
.footer-logo { margin: 0 0 14px; }
.footer-logo img { max-width: 210px; height: auto; }
.footer-logo .brand-david { color: var(--terre); font-weight: 700; }
.footer-logo .brand-bois { color: var(--ciel); font-weight: 800; }
.footer-title { font-family: var(--display); font-size: 1.02rem; font-weight: 700; color: var(--ciel); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 10px; }
.footer-col + .footer-col .footer-title:not(:first-child) { margin-top: 22px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { color: var(--sable); text-decoration: none; display: inline-block; padding: 5px 0; min-height: 32px; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--ciel); }
.footer-zones .zones-inline a { border-color: rgba(143, 182, 201, .3); color: var(--sable); font-size: .92rem; min-height: 40px; line-height: 24px; }
.footer-bottom { border-top: 1px solid rgba(247, 242, 233, .12); }
.footer-bottom-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 20px 22px; font-size: .88rem; text-align: center; }
.footer-bottom p { margin: 0; opacity: .8; }
.footer-legal { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 0; padding: 0; }
@media (max-width: 720px) {
	.footer-legal { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
}
.footer-legal a { color: var(--sable); }
.footer-madeby { margin-top: 8px; }
.footer-credit { display: inline-flex; align-items: center; text-decoration: none; }
.footer-credit img { height: 36px; width: auto; opacity: .95; }
.footer-credit:hover img, .footer-credit:focus-visible img { opacity: 1; }

/* ---- Barre d'appel mobile --------------------------------------------------- */
.mobile-call-bar { display: none; }
@media (max-width: 720px) {
	.mobile-call-bar {
		display: flex;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
		background: var(--terre);
		box-shadow: 0 -4px 18px rgba(34, 48, 63, .35);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.mobile-call-bar a {
		flex: 1;
		display: flex; align-items: center; justify-content: center; gap: 10px;
		min-height: 56px;
		color: #fff; text-decoration: none;
		font-family: var(--display); font-weight: 800; font-size: 1.12rem;
	}
	.mobile-call-bar .mobile-whatsapp { background: #0F7A3F; }
	body { padding-bottom: 60px; }
}

/* ---- Reveal au scroll (désactivé si prefers-reduced-motion) ------------------- */
@media (prefers-reduced-motion: no-preference) {
	.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
	.reveal.is-visible { opacity: 1; transform: none; }
}

/* ---- Avis Google (Trustindex + bouton) ----------------------------------- */
/* Le carrousel sort du conteneur étroit pour afficher 3 avis de front. */
.ti-widget {
	width: min(1100px, calc(100vw - 40px)) !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-block: 12px 20px;
}
.btn-review {
	display: inline-flex; align-items: center; gap: 11px;
	padding: 14px 24px;
	background: var(--blanc);
	color: var(--petrole);
	border: 1.5px solid rgba(34, 48, 63, .18);
	border-radius: 999px;
	font-family: var(--display); font-weight: 700; font-size: 1.05rem;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(34, 48, 63, .12);
	transition: transform .15s ease, box-shadow .15s ease;
}
.btn-review:hover, .btn-review:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(34, 48, 63, .2);
	color: var(--petrole);
}
.btn-review svg { flex: 0 0 auto; }
.review-stars { color: #FBBC05; letter-spacing: 2px; font-size: .95rem; }
.avis-cta { margin-top: 18px; }

/* ---- Divers -------------------------------------------------------------------- */
.avis-note { background: rgba(143, 182, 201, .12); border-radius: 10px; padding: 14px 18px; font-size: .95rem; }
.prose h2 { margin-top: 1.5em; }
.prose ul { padding-left: 1.2em; }
@media print {
	.site-header, .site-footer, .mobile-call-bar, .hero-actions, .cta-block { display: none !important; }
}

/* ---- Compteurs de preuve ------------------------------------------------ */
.section-counters { padding-block: 34px; background: var(--blanc); }
.counters-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: center; }
.counter-value { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4.5vw, 2.9rem); color: var(--petrole); margin: 0; line-height: 1.1; }
.counter-label { margin: 6px auto 0; max-width: 240px; color: var(--texte); font-size: .98rem; }
@media (max-width: 700px) {
	.counters-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- Comparateur avant / après ------------------------------------------ */
.ba-slider { margin: 1.2em 0 2em; }
.ba-frame { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 10; box-shadow: 0 14px 36px rgba(34, 48, 63, .16); --ba: 50%; }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-clip { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--ba); width: 3px; background: var(--blanc); transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(34, 48, 63, .15); }
.ba-handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: var(--blanc); box-shadow: 0 4px 14px rgba(34, 48, 63, .3); }
.ba-handle span::before, .ba-handle span::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 6px solid transparent; transform: translateY(-50%); }
.ba-handle span::before { left: 6px; border-right-color: var(--petrole); }
.ba-handle span::after { right: 6px; border-left-color: var(--petrole); }
.ba-tag { position: absolute; top: 12px; padding: 4px 12px; border-radius: 20px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blanc); background: rgba(34, 48, 63, .72); }
.ba-tag-avant { left: 12px; }
.ba-tag-apres { right: 12px; background: var(--terre); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: none; }
.ba-range:focus-visible ~ .ba-handle span,
.ba-frame:has(.ba-range:focus-visible) .ba-handle span { outline: 3px solid var(--terre); outline-offset: 2px; }
.ba-slider figcaption { padding: 10px 4px 0; font-size: .92rem; color: var(--petrole); }

/* ---- WhatsApp ----------------------------------------------------------- */
.btn-whatsapp { background: #0F7A3F; color: #fff; gap: 9px; }
.btn-whatsapp:hover, .btn-whatsapp:focus-visible { background: #0B5E30; color: #fff; }

/* ---- Tarteaucitron aux couleurs du site --------------------------------- */
#tarteaucitronRoot,
#tarteaucitronRoot * { font-family: var(--body) !important; }
#tarteaucitronRoot .tarteaucitronH1,
#tarteaucitronRoot .tarteaucitronH2,
#tarteaucitron .tarteaucitronH1,
#tarteaucitron .tarteaucitronH3 { font-family: var(--display) !important; color: var(--petrole) !important; font-weight: 700; }

/* Fenêtres : coins arrondis de la charte */
#tarteaucitronRoot #tarteaucitronAlertBig,
#tarteaucitronRoot #tarteaucitron { border-radius: var(--radius) !important; }
#tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel { border-radius: 0 var(--radius) 0 0 !important; background: var(--petrole) !important; color: var(--blanc) !important; }

/* Boutons d'action : accepter = terracotta, refuser = marine, autres = pétrole */
#tarteaucitronRoot .tarteaucitronCTAButton,
#tarteaucitronRoot .tarteaucitronAllow,
#tarteaucitronRoot .tarteaucitronDeny,
#tarteaucitronRoot #tarteaucitronCloseAlert,
#tarteaucitronRoot #tarteaucitronPrivacyUrl {
	border-radius: 10px !important;
	font-weight: 700 !important;
	border: 0 !important;
}
#tarteaucitronRoot .tarteaucitronAllow { background: var(--terre) !important; color: var(--blanc) !important; }
#tarteaucitronRoot .tarteaucitronAllow:hover,
#tarteaucitronRoot .tarteaucitronAllow:focus-visible { background: var(--terre-fonce) !important; }
#tarteaucitronRoot .tarteaucitronDeny { background: var(--marine) !important; color: var(--sable) !important; }
#tarteaucitronRoot .tarteaucitronDeny:hover,
#tarteaucitronRoot .tarteaucitronDeny:focus-visible { background: var(--petrole-fonce) !important; }
#tarteaucitronRoot #tarteaucitronCloseAlert { background: transparent !important; color: var(--petrole) !important; text-decoration: underline; }

/* États sélectionnés dans le panneau (vert/rouge natifs conservés mais adoucis) */
#tarteaucitronRoot .tarteaucitronIsAllowed .tarteaucitronAllow { background: var(--terre-fonce) !important; }
#tarteaucitronRoot .tarteaucitronIsDenied .tarteaucitronDeny { background: var(--petrole-fonce) !important; }

/* Liens et crédits */
#tarteaucitronRoot a { color: var(--petrole) !important; }
#tarteaucitronRoot #tarteaucitronAlertBig a { color: var(--petrole) !important; }

/* Barre de progression et encart d'activation de la carte */
#tarteaucitronPercentage { background: var(--terre) !important; box-shadow: none !important; }
.tac_activate {
	background: var(--marine) !important;
	color: var(--sable) !important;
	display: flex !important; align-items: center; justify-content: center;
	border-radius: var(--radius);
}
.tac_activate .tac_float { text-align: center; }
.tac_activate, .tac_activate * { color: var(--sable) !important; }
.tac_activate .tarteaucitronAllow { background: var(--terre) !important; border-radius: 10px !important; margin-top: 10px; }
#tarteaucitronRoot .tarteaucitronSelfLink,
#tarteaucitronRoot a.tarteaucitronSelfLink { color: rgba(52, 52, 52, .45) !important; background: transparent !important; }

/* ---- Widget d'accessibilité Sienna aux couleurs du site ------------------ */
/* La couleur d'accent passe par la variable --asw-primary (les déclinaisons
   faint/subtle en dérivent via color-mix). L'inline !important est posé sur
   .asw-menu, on redéfinit donc la variable sur ses descendants. */
.asw-widget, .asw-menu-btn, .asw-menu > * { --asw-primary: var(--petrole) !important; }
.asw-menu-btn { background: var(--petrole) !important; box-shadow: 0 6px 18px rgba(34, 48, 63, .35) !important; }
.asw-menu-btn:hover, .asw-menu-btn:focus-visible { background: var(--petrole-fonce) !important; }
.asw-widget, .asw-widget * { --asw-font-family: var(--body); }


/* ---- Accessibilité (RGAA) ------------------------------------------------ */
.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%); overflow: hidden;
	white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- Grille des comparateurs avant/après (page Réalisations) ------------- */
.ba-grid { display: grid; gap: 26px; margin: 1.2em 0 2.2em; }
@media (min-width: 860px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
.ba-grid .ba-slider { margin: 0; }
.ba-grid .ba-frame { aspect-ratio: 4 / 3; }
.ba-portrait .ba-frame, .ba-grid .ba-portrait .ba-frame { aspect-ratio: 3 / 4; }
.wp-block-group.ba-grid { margin: 1.2em 0 2.2em; }

/* ---- Page 404 « le carreau manquant » ------------------------------------ */
.error-404 { padding-top: 56px; }
.error-grid { display: grid; gap: 40px; align-items: center; margin-bottom: 48px; }
@media (min-width: 860px) { .error-grid { grid-template-columns: 440px 1fr; gap: 56px; } }
.error-tiles { width: 100%; max-width: 460px; height: auto; display: block; filter: drop-shadow(0 18px 40px rgba(34, 48, 63, .25)); }
.error-text h1 { margin-top: 0; }
.error-links { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.error-links a {
	display: inline-block;
	color: var(--petrole);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--ciel);
	padding-bottom: 2px;
	transition: border-color .15s, color .15s;
}
.error-links a:hover, .error-links a:focus-visible { color: var(--terre-fonce); border-color: var(--terre); }


/* ---- Avant/après vedette (photos portrait, section pleine largeur) ------- */
.ba-feature { background: var(--marine); padding-block: 56px 64px; }
.ba-feature-title {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(1.4rem, 3vw, 2rem);
	color: var(--blanc);
	text-align: center;
	margin: 0 0 28px;
}
.ba-feature .ba-slider { max-width: 620px; margin: 0 auto; }
.ba-feature .ba-frame { aspect-ratio: 3 / 4; box-shadow: 0 26px 70px rgba(0, 0, 0, .45); }
.ba-feature figcaption { color: var(--ciel-clair); text-align: center; }
@media (min-width: 700px) { .ba-feature .ba-frame { aspect-ratio: 4 / 5; } }


/* ---- Galerie masonry (page Réalisations) --------------------------------- */
.gallery-masonry {
	display: block;
	columns: 3;
	column-gap: 16px;
}
.gallery-masonry li {
	break-inside: avoid;
	margin: 0 0 16px;
}
.gallery-masonry .gallery-item {
	position: relative;
	border-radius: var(--radius);
	box-shadow: 0 10px 26px rgba(34, 48, 63, .14);
}
.gallery-masonry .gallery-item img {
	aspect-ratio: auto;
	height: auto;
	display: block;
}
.gallery-caption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 34px 14px 12px;
	font-size: .88rem;
	line-height: 1.35;
	color: var(--blanc);
	background: linear-gradient(180deg, rgba(34, 48, 63, 0) 0%, rgba(34, 48, 63, .82) 78%);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .22s ease, transform .22s ease;
	pointer-events: none;
}
.gallery-masonry .gallery-item:hover .gallery-caption,
.gallery-masonry .gallery-item:focus-visible .gallery-caption {
	opacity: 1;
	transform: none;
}
@media (max-width: 900px) { .gallery-masonry { columns: 2; } }
@media (max-width: 560px) { .gallery-masonry { columns: 1; } }
@media (prefers-reduced-motion: reduce) {
	.gallery-caption { transition: none; transform: none; }
}
/* Sur écran tactile : légendes toujours visibles */
@media (hover: none) {
	.gallery-caption { opacity: 1; transform: none; }
}


/* ---- Carrousel avis Travaux.com ------------------------------------------ */
.tvx-section { background: var(--sable); }
.tvx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: 28px; }
.tvx-head h2 { margin: 0 0 12px; }
.tvx-source { display: flex; align-items: center; gap: 14px; margin: 0; }
.tvx-source img { height: 22px; width: auto; }
.tvx-stars { color: var(--terre); letter-spacing: 3px; font-size: 1.05rem; }
.tvx-head-actions { display: flex; align-items: center; gap: 20px; }
.tvx-link { color: var(--petrole); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid rgba(36, 78, 100, .3); padding-bottom: 2px; transition: color .15s, border-color .15s; }
.tvx-link:hover, .tvx-link:focus-visible { color: var(--terre-fonce); border-color: var(--terre); }
.tvx-arrows { display: flex; gap: 8px; }
.tvx-nav {
	width: 44px; height: 44px; border-radius: 50%;
	display: grid; place-items: center;
	border: 1.5px solid rgba(36, 78, 100, .35);
	background: transparent; color: var(--petrole);
	cursor: pointer; transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.tvx-nav:hover, .tvx-nav:focus-visible { background: var(--petrole); border-color: var(--petrole); color: var(--blanc); }
.tvx-nav:focus-visible { outline: 2px solid var(--terre); outline-offset: 2px; }
.tvx-nav[disabled] { opacity: .3; cursor: default; background: transparent; color: var(--petrole); border-color: rgba(36, 78, 100, .35); }

.tvx-carousel {
	list-style: none;
	margin: 0 -4px; padding: 4px 4px 10px;
	display: flex; gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 4px;
	scrollbar-width: none;
}
.tvx-carousel::-webkit-scrollbar { display: none; }
.tvx-carousel:focus-visible { outline: 2px solid var(--terre); outline-offset: 4px; border-radius: 16px; }
.tvx-card {
	position: relative;
	flex: 0 0 calc((100% - 40px) / 3);
	min-width: 300px;
	scroll-snap-align: start;
	display: flex; flex-direction: column;
	padding: 26px 26px 22px;
	background: var(--blanc);
	border: 1px solid rgba(36, 78, 100, .12);
	border-radius: 14px;
	overflow: hidden;
}
/* Grand guillemet en filigrane */
.tvx-card::before {
	content: "\201C";
	position: absolute; top: -26px; right: 16px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 9rem; line-height: 1;
	color: var(--ciel); opacity: .22;
	pointer-events: none;
}
.tvx-card-stars { margin: 0 0 14px; color: var(--terre); letter-spacing: 2px; font-size: .95rem; }
.tvx-card blockquote {
	position: relative;
	margin: 0 0 20px; padding: 0; border: 0;
	font-size: 1rem; line-height: 1.6; color: var(--texte);
}
.tvx-card blockquote p { margin: 0; }
.tvx-card-meta { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(36, 78, 100, .1); }
/* Pastille d'initiale : les 4 couleurs du logo, en alternance */
.tvx-avatar {
	flex: 0 0 38px; height: 38px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--petrole); color: var(--blanc);
	font-family: var(--display); font-weight: 700; font-size: .95rem;
}
.tvx-card:nth-child(4n+2) .tvx-avatar { background: #5E666A; }
.tvx-card:nth-child(4n+3) .tvx-avatar { background: var(--terre); }
.tvx-card:nth-child(4n+4) .tvx-avatar { background: var(--ciel-clair); color: var(--marine); }
.tvx-who { display: flex; flex-direction: column; line-height: 1.3; font-size: .92rem; }
.tvx-who strong { color: var(--petrole); }
.tvx-who span { color: #5F666B; font-size: .85rem; }

@media (max-width: 900px) {
	.tvx-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 700px) {
	.tvx-head { align-items: flex-start; }
	.tvx-head-actions { width: 100%; justify-content: space-between; }
	.tvx-card { flex-basis: 86%; min-width: 0; }
}

/* ---- Contact Form 7 : raccord avec le style du formulaire maison --------- */
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form .wpcf7-list-item { margin: 0; }
.contact-form .wpcf7-acceptance label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.contact-form .wpcf7-not-valid-tip { display: block; margin-top: 4px; font-size: .85rem; color: #A03123; }
.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0; padding: 14px 18px;
	border: 0; border-left: 5px solid var(--ciel);
	border-radius: 10px;
	background: var(--blanc);
	box-shadow: 0 10px 26px rgba(34, 48, 63, .12);
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: #2E7D46; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-left-color: var(--terre); }
.wpcf7-spinner { margin: 0 0 0 12px; }


/* ---- Mobile : widgets flottants au-dessus de la barre Appeler / WhatsApp - */
@media (max-width: 720px) {
	#tarteaucitronRoot #tarteaucitronIcon,
	#tarteaucitronRoot .tarteaucitronIconBottomLeft { bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
	.asw-menu-btn { --asw-off-y: calc(66px + env(safe-area-inset-bottom)) !important; }
	.asw-menu { bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
	/* Menu ouvert : on efface les widgets flottants pour laisser la place */
	body.nav-open #tarteaucitronRoot #tarteaucitronIcon,
	body.nav-open .asw-menu-btn,
	body.nav-open .mobile-call-bar { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
}

/* ---- Blog -------------------------------------------------------------- */
.blog-intro { margin: 0 auto 34px; }
.post-grid { display: grid; gap: 26px; }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card {
	background: var(--blanc);
	border: 1px solid rgba(46, 89, 114, .16);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 10px 26px rgba(34, 48, 63, .08);
	transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(34, 48, 63, .16); }
.post-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.post-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.post-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.post-card-meta { margin: 0 0 8px; font-size: .84rem; color: #6B7075; }
.post-card-cat { color: var(--terre); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.post-card-title { font-size: 1.18rem; line-height: 1.3; margin: 0 0 10px; color: var(--petrole); }
.post-card-excerpt { margin: 0 0 16px; font-size: .96rem; line-height: 1.55; color: var(--texte); }
.post-card-more { margin-top: auto; font-weight: 700; color: var(--terre-fonce); }
.post-card:hover .post-card-more { text-decoration: underline; text-underline-offset: 3px; }
.post-pagination ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 36px 0 0; padding: 0; }
.post-pagination a, .post-pagination .current { display: inline-block; padding: 10px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; color: var(--petrole); background: var(--sable); }
.post-pagination .current { background: var(--petrole); color: var(--blanc); }

.page-hero .hero-sub { margin: 10px 0 0; font-size: 1.08rem; color: var(--ciel-clair); max-width: 60ch; }
.post-eyebrow { margin: 0 0 6px; color: var(--ciel-clair); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.page-hero .post-meta { margin: 10px 0 0; color: var(--ciel-clair); font-size: .95rem; }
.post-single { padding-top: 34px; }
.post-figure { margin: 0 0 30px; }
.post-figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: 0 18px 44px rgba(34, 48, 63, .18); }
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; padding: 0; }
.post-tags a { display: inline-block; padding: 6px 12px; border-radius: 20px; background: var(--sable); color: var(--petrole); font-size: .85rem; font-weight: 600; text-decoration: none; }
.post-tags a:hover, .post-tags a:focus-visible { background: var(--ciel-clair); }
.post-nav { display: grid; gap: 14px; margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(46, 89, 114, .18); }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav a { display: block; padding: 16px 18px; border-radius: 10px; background: var(--sable); color: var(--petrole); font-weight: 700; text-decoration: none; line-height: 1.35; }
.post-nav a span { display: block; font-size: .8rem; font-weight: 600; color: var(--terre-fonce); margin-bottom: 4px; }
.post-nav-next { text-align: right; }
.post-nav a:hover, .post-nav a:focus-visible { background: var(--ciel-clair); }

/* ---- Cloudflare Turnstile (Contact Form 7) ------------------------------ */
.contact-form .form-turnstile { margin: 4px 0 10px; }
.contact-form .wpcf7-turnstile, .contact-form .cf-turnstile { display: block; width: 100%; min-height: 65px; }


/* =========================================================================
 * Filigranes — les galets du logo redessinés au trait, en très faible
 * opacité, débordant des sections. Un seul motif, décliné partout.
 * ====================================================================== */
:root {
	--galets-sombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23244E64' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M4 22 C4 8 10 2 22 2 L40 2 C46 2 49 5 52 10 L66 36 C70 43 70 51 67 56 C64 61 59 63 53 66 L40 72 C31 76 25 83 20 90 L16 96 C13 99 8 99 6 96 C4 93 4 90 4 86 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M53 2 L84 2 C94 2 98 7 98 16 L98 31 C98 37 94 39 88 37 L78 34 C72 32 69 29 66 25 L53 8 C50 4 50 2 53 2 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M70 47 C74 42 81 40 84 43 C87 47 86 53 83 58 C80 62 74 63 69 63 C66 63 65 60 66 57 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M91 42 L98 42 L98 80 C98 86 95 88 90 87 L84 86 C79 85 77 81 78 76 L79 71 C80 66 83 63 87 60 C91 57 91 52 89 48 C87 44 88 42 91 42 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M22 98 C27 88 35 81 46 78 C57 75 68 76 77 80 C84 83 89 89 92 95 L93 98 Z'/%3E%3C/g%3E%3C/svg%3E");
	--galets-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23B7D0DD' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M4 22 C4 8 10 2 22 2 L40 2 C46 2 49 5 52 10 L66 36 C70 43 70 51 67 56 C64 61 59 63 53 66 L40 72 C31 76 25 83 20 90 L16 96 C13 99 8 99 6 96 C4 93 4 90 4 86 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M53 2 L84 2 C94 2 98 7 98 16 L98 31 C98 37 94 39 88 37 L78 34 C72 32 69 29 66 25 L53 8 C50 4 50 2 53 2 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M70 47 C74 42 81 40 84 43 C87 47 86 53 83 58 C80 62 74 63 69 63 C66 63 65 60 66 57 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M91 42 L98 42 L98 80 C98 86 95 88 90 87 L84 86 C79 85 77 81 78 76 L79 71 C80 66 83 63 87 60 C91 57 91 52 89 48 C87 44 88 42 91 42 Z'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M22 98 C27 88 35 81 46 78 C57 75 68 76 77 80 C84 83 89 89 92 95 L93 98 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.page-hero, .section-zones, .cta-block, .site-footer { position: relative; isolation: isolate; overflow: hidden; }
.hero::before, .page-hero::after, .section-zones::before, .cta-block::before, .site-footer::before {
	content: "";
	position: absolute;
	z-index: -1;
	aspect-ratio: 1;
	background: center / contain no-repeat;
	pointer-events: none;
}
.hero::before { z-index: 0; }

/* Accueil : grand galet sous le titre, qui s'échappe par le bas */
.hero::before {
	width: min(580px, 80vw);
	left: -110px; bottom: -300px;
	background-image: var(--galets-sombre);
	opacity: .11;
	transform: rotate(-8deg);
}
/* En-têtes de pages : le motif en contre-jour à droite */
.page-hero::after {
	width: 860px;
	right: 40px; top: 50%;
	transform: translateY(-50%) rotate(-4deg);
	background-image: var(--galets-clair);
	opacity: .13;
}
/* Zones d'intervention */
.section-zones::before {
	width: 580px;
	right: -150px; bottom: -200px;
	background-image: var(--galets-clair);
	opacity: .12;
}
/* Bloc devis */
.cta-block::before {
	width: 320px;
	left: -80px; top: -110px;
	background-image: var(--galets-clair);
	opacity: .11;
	transform: rotate(14deg);
}
/* Pied de page */
.site-footer::before {
	width: 540px;
	right: -110px; bottom: -150px;
	background-image: var(--galets-clair);
	opacity: .06;
}
/* Listel du logo en haut du pied de page : 4 carreaux, joints marine */
.site-footer::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--petrole) 0 24.8%, var(--marine) 24.8% 25.2%,
		#5E666A 25.2% 49.8%, var(--marine) 49.8% 50.2%,
		var(--terre) 50.2% 74.8%, var(--marine) 74.8% 75.2%,
		var(--ciel) 75.2% 100%);
}

/* Carreau décalé : liseré terracotta derrière les photos principales */
.hero-media, .split-media { position: relative; isolation: isolate; }
.hero-media::before, .split-media::before {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	z-index: -1;
	border: 1.5px solid rgba(156, 85, 45, .42);
	border-radius: calc(var(--radius) + 4px);
	pointer-events: none;
}

@media (max-width: 720px) {
	.hero::before { width: 460px; left: -170px; bottom: -200px; opacity: .08; }
	.page-hero::after { width: 560px; right: -90px; opacity: .12; }
	.section-zones::before { width: 380px; right: -150px; bottom: -150px; }
	.site-footer::before { width: 380px; right: -150px; bottom: -120px; }
	.hero-media::before, .split-media::before { inset: 12px -10px -12px 10px; }
}
@media print {
	.hero::before, .page-hero::after, .section-zones::before, .cta-block::before, .site-footer::before,
	.hero-media::before, .split-media::before { display: none; }
}


/* =========================================================================
 * Accessibilité RGAA — corrections de l'audit (v1.7.0)
 * ====================================================================== */
/* 10.7 — indicateur de focus visible et cohérent sur tout le site */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--terre);
	outline-offset: 3px;
}
:where(.page-hero, .section-zones, .cta-block, .site-footer, .ba-feature, .lightbox, .mobile-call-bar) :where(a, button, input, [tabindex]):focus-visible {
	outline-color: var(--sable);
}
/* Menu : fond blanc sur ordinateur, marine dans le panneau mobile */
@media (max-width: 860px) {
	.main-nav :where(a, button):focus-visible { outline-color: var(--sable); outline-offset: -3px; }
}
/* 10.11 / 10.12 — les colonnes peuvent rétrécir, le grand numéro peut passer à la ligne */
.split > *, .contact-split > * { min-width: 0; }
.phone-xl a { overflow-wrap: anywhere; }
/* 10.6 — liens dans le texte identifiables autrement que par la couleur */
.prose a, .blog-intro a, .form-consent a, .form-privacy a { text-decoration: underline; text-underline-offset: 3px; }
/* 11.10 — mention des champs obligatoires */
.form-required-note { margin: 0 0 12px; font-size: .9rem; color: #5F666B; }
/* Plan du site */
.sitemap { columns: 2 260px; column-gap: 40px; }
.sitemap-group { break-inside: avoid; margin: 0 0 28px; }
.sitemap-group h2 { font-size: 1.2rem; margin: 0 0 10px; }
.sitemap-group ul { margin: 0; padding-left: 1.1em; }
.sitemap-group li { margin: 0 0 6px; }

/* Mobile : marges latérales un peu plus généreuses */
@media (max-width: 720px) {
	.container { padding-inline: 24px; }
}

/* Grille avant / après : dernier chantier centré quand leur nombre est impair */
@media (min-width: 860px) {
	.ba-grid > .ba-slider:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 13px); justify-self: center; }
}

/* =========================================================================
 * Contenu des articles et des pages : typographie imposée par la charte
 * (le contenu est saisi sans mise en forme, voir inc/blog-admin.php).
 * ====================================================================== */
.prose { line-height: 1.75; }
.prose p { margin: 0 0 1em; }
.prose h2, .prose h3 { font-family: var(--display); line-height: 1.25; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.7rem); color: var(--petrole); margin: 1.8em 0 .55em; }
.prose h3 { font-size: 1.22rem; color: var(--marine); margin: 1.5em 0 .4em; }
.post-single .prose h2::before { content: ""; display: block; width: 36px; height: 3px; background: var(--terre); border-radius: 2px; margin-bottom: .55em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin: 0 0 .4em; }
.prose ul li::marker { color: var(--terre); }
.prose ol li::marker { color: var(--petrole); font-weight: 700; }
.prose blockquote {
	margin: 1.8em 0; padding: 16px 22px;
	border-left: 4px solid var(--terre);
	background: var(--sable);
	border-radius: 0 var(--radius) var(--radius) 0;
	color: var(--marine); font-size: 1.1rem;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose a { color: var(--petrole); }
.prose a:hover { color: var(--terre-fonce); }
.prose strong { color: var(--marine); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose .wp-caption { max-width: 100% !important; margin: 1.8em 0; }
.prose .wp-caption img { display: block; }
.prose .wp-caption-text { margin: .6em 0 0; font-size: .9rem; color: #5F666B; text-align: center; }
.prose .aligncenter { display: block; margin-inline: auto; }
.prose img.aligncenter, .prose img.alignnone { margin-block: 1.6em; }
@media (min-width: 700px) {
	.prose .alignleft { float: left; margin: .3em 1.6em 1em 0; max-width: 50%; }
	.prose .alignright { float: right; margin: .3em 0 1em 1.6em; max-width: 50%; }
	.prose::after { content: ""; display: table; clear: both; }
}