/* ==========================================================================
   Breizh Dog 56 — feuille de style principale
   Éducateur canin & dog sitter, Vannes (56)

   CSS natif, aucun framework.

   ⚠️ CONTRAINTES ELEMENTOR — à ne pas « nettoyer » (voir a_faire_attention.json) :
   1. Les containers Elementor sont ciblés par leur `id` (`#hero`, `[id^="carte-"]`),
      jamais par une classe custom : `_css_classes` est ignoré sur un container.
   2. Tout display grid/flex sur un container passe par `--display: … !important`,
      sinon le fichier post-{id}.css généré par Elementor (chargé après) reprend la main.
   3. Les containers sont en `content_width: full` : il n'y a PAS de `.e-con-inner`.
      On pose donc grid-template-columns / gap directement sur le sélecteur du container.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Polices auto-hébergées (pas de CDN Google — cf. functions.php)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('../fonts/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/instrumentsans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/instrumentsans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Tokens
   Palette dérivée des couleurs réelles du logo (relevées au pixel) et des
   dominantes des photos du client. Chaque valeur porte sa contrainte de contraste.
   -------------------------------------------------------------------------- */
:root {
	/* L'or du logo. Décoratif uniquement : 1,64:1 sur blanc, il ne peut JAMAIS
	   porter de texte ni délimiter seul un composant interactif. */
	--or:             #E8C92E;
	--or-fonce:       #C9A81B;   /* hover / active du CTA or */
	--or-pale:        #FBF0C4;   /* une seule bande par page (l'offre) */
	/* La forme TEXTE de l'or : 6,12:1 sur blanc, 5,67:1 sur sable. */
	--or-encre:       #7A5E0A;

	/* Le noir du logo, relevé au pixel. Noir chaud, jamais #000. */
	--encre:          #12100F;
	--encre-douce:    #241F1C;

	/* Secondaire dérivée des photos (ciels et mer du golfe du Morbihan). */
	--ardoise:        #17323F;
	--ardoise-clair:  #E8EEF2;

	--texte:          #33302C;   /* 13,13:1 sur blanc */
	--texte-doux:     #5E584F;   /* 7,04:1 sur blanc */
	--texte-tenu:     #7A7269;

	--blanc:          #FFFFFF;   /* sections de lecture */
	--sable:          #FAF6EE;   /* sections de respiration */
	--sable-profond:  #F2EBDD;   /* cartes posées sur sable */
	--ligne:          #E3DACA;   /* filets décoratifs uniquement */

	/* Alias de compatibilité avec la nomenclature interne des widgets */
	--jaune:          var(--or);
	--jaune-fonce:    var(--or-fonce);
	--jaune-clair:    var(--or-pale);
	--fond:           var(--blanc);
	--fond-creme:     var(--sable);
	--fond-sable:     var(--sable-profond);
	--trait:          var(--ligne);

	/* Rayons, ombres, rythme */
	--r-xs: 8px;
	--r-sm: 12px;
	--r-md: 18px;
	--r-lg: 26px;
	--r-pill: 999px;

	--ombre-1: 0 1px 2px rgba(18, 16, 15, .05), 0 2px 8px rgba(18, 16, 15, .04);
	--ombre-2: 0 2px 6px rgba(18, 16, 15, .06), 0 12px 32px rgba(18, 16, 15, .08);
	--ombre-3: 0 4px 12px rgba(18, 16, 15, .08), 0 24px 56px rgba(18, 16, 15, .12);

	--gouttiere: clamp(18px, 4vw, 40px);
	--largeur: 1180px;
	--section-y: clamp(56px, 8vw, 104px);

	/* Typographie
	   Fraunces plafonnée à 700 : au-delà, associée à un or saturé, elle glisse
	   vers un registre « brasserie artisanale » hors sujet ici. */
	--f-titre: 'Fraunces', Georgia, 'Times New Roman', serif;
	--f-corps: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--h1: clamp(2.05rem, 1.35rem + 2.8vw, 3.4rem);
	--h2: clamp(1.55rem, 1.15rem + 1.7vw, 2.35rem);
	--h3: clamp(1.15rem, 1rem + .6vw, 1.4rem);
	--corps: clamp(1.02rem, .98rem + .2vw, 1.12rem);

	/* Signature visuelle — le bandeau Gwenn ha Du.
	   Le drapeau breton du logo n'est pas repris en image mais en STRUCTURE :
	   ses 9 bandes (5 noires, 4 blanches) deviennent 9 segments encre/or.
	   C'est ce qui fait exister le noir du logo sur un site à dominante claire
	   sans jamais poser une seule grande surface sombre. */
	--gwenn-ha-du: linear-gradient(90deg,
		var(--encre) 0 11.111%, var(--or) 11.111% 22.222%,
		var(--encre) 22.222% 33.333%, var(--or) 33.333% 44.444%,
		var(--encre) 44.444% 55.555%, var(--or) 55.555% 66.666%,
		var(--encre) 66.666% 77.777%, var(--or) 77.777% 88.888%,
		var(--encre) 88.888% 100%);
}

/* --------------------------------------------------------------------------
   2. Réinitialisation ciblée
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.bd56 {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	font-family: var(--f-corps);
	font-size: var(--corps);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.bd-noscroll { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; }

/* Filet de sécurité : un <svg> inline sans dimensions s'étire dans un contexte
   flex/grid. Les icônes qui doivent être plus grandes portent une classe dédiée. */
svg { width: 1em; height: 1em; vertical-align: -.14em; flex-shrink: 0; }

a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--f-titre);
	color: var(--encre);
	line-height: 1.1;
	letter-spacing: -.015em;
	margin: 0 0 .5em;
	font-weight: 700;
}
h1 { font-size: var(--h1); font-weight: 700; line-height: 1.08; letter-spacing: -.015em; }
h2 { font-size: var(--h2); font-weight: 700; line-height: 1.15; }
h3 { font-size: var(--h3); font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

strong { color: var(--encre); font-weight: 700; }

::selection { background: var(--jaune); color: var(--encre); }

/* Indicateur de focus a double anneau : lisible sur TOUS les fonds du site.
   L'or donne 8,20:1 sur --ardoise et 11,59:1 sur --encre ; l'anneau --encre
   exterieur assure le contraste sur les fonds clairs (18,97:1 sur blanc), ou
   l'or seul serait invisible. Un anneau simple en --ardoise tombait a 1,00:1
   sur le bloc CTA final, qui a exactement cette couleur de fond. */
:where(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--or);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--encre);
	border-radius: 4px;
}

.bd-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--encre);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--r-sm) 0;
	text-decoration: none;
	font-weight: 600;
}
.bd-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. En-tête
   -------------------------------------------------------------------------- */
.bd-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .93);
	backdrop-filter: saturate(160%) blur(12px);
	transition: box-shadow .2s ease;
}
.bd-header.is-compact { box-shadow: var(--ombre-1); }

/* Signature : le bandeau Gwenn ha Du ferme l'en-tête.
   Emplois autorisés, et AUCUN autre — au-delà, il redevient une frise décorative :
   1. sous le header · 2. haut du bloc offre · 3. haut du bloc sombre de fin
   4. haut du footer · 5. sous le hero des pages service. */
.bd-header::after,
.bd-footer::before,
#offre-bloc::before,
#cta-final::after,
#cta-service::after,
#hero-service::after {
	content: "";
	display: block;
	position: absolute;
	left: 0; right: 0;
	height: 6px;
	background: var(--gwenn-ha-du);
	pointer-events: none;
}
.bd-header::after { position: static; }
.bd-footer { position: relative; }
.bd-footer::before { top: 0; }
#offre-bloc::before { top: 0; z-index: 2; }
#cta-final, #cta-service, #hero-service { position: relative; }
#cta-final::after, #cta-service::after, #hero-service::after { top: 0; }

@media (max-width: 700px) {
	.bd-header::after,
	.bd-footer::before,
	#offre-bloc::before,
	#cta-final::after,
	#cta-service::after,
	#hero-service::after { height: 4px; }
}

.bd-header__inner {
	max-width: var(--largeur);
	margin: 0 auto;
	padding: 12px var(--gouttiere);
	display: flex;
	align-items: center;
	gap: 16px;
}

.bd-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	margin-right: auto;
	min-width: 0;
}
.bd-brand__mark {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	overflow: hidden;
	flex: 0 0 auto;
	box-shadow: 0 0 0 1px var(--trait), var(--ombre-1);
	transition: transform .2s ease;
}
.bd-header.is-compact .bd-brand__mark { width: 44px; height: 44px; }
.bd-brand:hover .bd-brand__mark { transform: rotate(-3deg) scale(1.03); }
.bd-brand__mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bd-brand__text { display: flex; flex-direction: column; min-width: 0; }
.bd-brand__name {
	font-family: var(--f-titre);
	font-weight: 700;
	font-size: 1.18rem;
	color: var(--encre);
	letter-spacing: -.02em;
	line-height: 1.1;
	white-space: nowrap;
}
.bd-brand__tag {
	font-size: .76rem;
	color: var(--texte-tenu);
	letter-spacing: .01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bd-nav__list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
}
.bd-nav__list a {
	display: block;
	padding: 9px 14px;
	border-radius: var(--r-pill);
	text-decoration: none;
	font-weight: 500;
	font-size: .94rem;
	color: var(--texte);
	white-space: nowrap;
	transition: background .18s ease, color .18s ease;
}
.bd-nav__list a:hover { background: var(--fond-sable); color: var(--encre); }
.bd-nav__list .current-menu-item > a,
.bd-nav__list .current_page_item > a {
	background: var(--encre);
	color: #fff;
}

.bd-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	border-radius: var(--r-pill);
	background: var(--jaune);
	color: var(--encre);
	font-weight: 700;
	font-size: .96rem;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: inset 0 0 0 2px var(--encre), 0 2px 0 var(--encre);
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.bd-header__cta svg { width: 18px; height: 18px; }
.bd-header__cta:hover { transform: translateY(-1px); background: var(--or-fonce); box-shadow: inset 0 0 0 2px var(--encre), 0 4px 0 var(--encre); }
.bd-header__cta:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px var(--encre), 0 1px 0 var(--encre); }

.bd-burger {
	display: none;
	width: 46px; height: 46px;
	border: 1px solid var(--trait);
	background: #fff;
	border-radius: var(--r-sm);
	cursor: pointer;
	padding: 0;
	position: relative;
	order: 3;
}
.bd-burger span {
	position: absolute;
	left: 13px;
	width: 20px; height: 2px;
	background: var(--encre);
	border-radius: 2px;
	transition: transform .22s ease, opacity .18s ease;
}
.bd-burger span:nth-child(1) { top: 16px; }
.bd-burger span:nth-child(2) { top: 22px; }
.bd-burger span:nth-child(3) { top: 28px; }
.bd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.bd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.bd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1040px) {
	.bd-brand__tag { display: none; }
	.bd-nav__list a { padding: 9px 10px; font-size: .9rem; }
}

@media (max-width: 900px) {
	.bd-burger { display: block; }
	.bd-header__cta span { display: none; }
	.bd-header__cta { padding: 12px; }
	.bd-header__cta svg { width: 20px; height: 20px; }

	.bd-nav {
		position: fixed;
		inset: 72px 0 0;
		background: #fff;
		padding: 24px var(--gouttiere) 40px;
		transform: translateY(-12px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
		overflow-y: auto;
		border-top: 1px solid var(--trait);
	}
	.bd-nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
	.bd-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.bd-nav__list a {
		padding: 16px 18px;
		border-radius: var(--r-sm);
		font-size: 1.08rem;
		font-weight: 600;
		border-bottom: 1px solid var(--trait);
	}
}

/* --------------------------------------------------------------------------
   4. Boutons (widgets Elementor — `_css_classes` fonctionne sur les widgets)
   -------------------------------------------------------------------------- */
.bd-btn .elementor-button,
a.bd-btn,
.bd-btn a.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	border-radius: var(--r-pill);
	font-family: var(--f-corps);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.2;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}

/* CTA or.
   ⚠️ Le contour --encre de 2px est STRUCTUREL, pas décoratif : l'or #E8C92E
   n'atteint que 1,64:1 sur blanc, il échouerait au critère WCAG 2.2 SC 1.4.11
   (3:1 pour la frontière d'un composant) sans lui. Heureux hasard, c'est
   exactement la construction du logo, dont les lettres or sont cernées de noir.
   Ne jamais retirer ce contour. Le libellé --encre sur --or est à 11,59:1 (AAA). */
.bd-btn--primary .elementor-button,
a.bd-btn--primary {
	background-color: var(--or);
	color: var(--encre);
	box-shadow: inset 0 0 0 2px var(--encre), 0 3px 0 var(--encre);
}
.bd-btn--primary .elementor-button:hover,
a.bd-btn--primary:hover {
	background-color: var(--or-fonce);
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 2px var(--encre), 0 5px 0 var(--encre), var(--ombre-2);
}
.bd-btn--primary .elementor-button:active,
a.bd-btn--primary:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--encre), 0 1px 0 var(--encre); }

.bd-btn--dark .elementor-button,
a.bd-btn--dark {
	background-color: var(--encre);
	color: #fff;
	box-shadow: var(--ombre-1);
}
.bd-btn--dark .elementor-button:hover,
a.bd-btn--dark:hover { background: var(--encre-douce); transform: translateY(-2px); box-shadow: var(--ombre-2); }

.bd-btn--ghost .elementor-button,
a.bd-btn--ghost {
	background-color: transparent;
	color: var(--encre);
	box-shadow: inset 0 0 0 2px var(--encre);
}
.bd-btn--ghost .elementor-button:hover,
a.bd-btn--ghost:hover { background: var(--encre); color: #fff; }

/* Les boutons Elementor portent une marge par défaut dans certains contextes */
.bd-btn.elementor-widget { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   5. Blocs de texte communs (widgets)
   -------------------------------------------------------------------------- */
.bd-eyebrow p,
.bd-eyebrow {
	font-family: var(--f-corps);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--or-encre);
	margin: 0 0 .6rem;
}

.bd-lead p { font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem); color: var(--texte-doux); }

.bd-center { text-align: center; }
.bd-center p { margin-left: auto; margin-right: auto; }

.bd-mesure p { max-width: 62ch; }
.bd-center.bd-mesure p { margin-left: auto; margin-right: auto; }

/* Listes à puces custom */
.bd-liste ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}
.bd-liste li {
	position: relative;
	padding-left: 32px;
	line-height: 1.55;
}
.bd-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .38em;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--jaune-clair);
	box-shadow: inset 0 0 0 2px var(--jaune);
}
.bd-liste li::after {
	content: "";
	position: absolute;
	left: 5px;
	top: .62em;
	width: 8px;
	height: 5px;
	border-left: 2px solid var(--jaune-fonce);
	border-bottom: 2px solid var(--jaune-fonce);
	transform: rotate(-45deg);
}

/* Pastilles */
.bd-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: var(--r-pill);
	background: var(--fond-sable);
	color: var(--encre);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   6. Containers Elementor — largeur et rythme
   Elementor gère `--display` : toute surcharge passe par la variable.
   -------------------------------------------------------------------------- */
.elementor-widget { margin-bottom: 0; }
.elementor-widget-container { margin: 0; }

/* Gabarit standard d'une section : pleine largeur, contenu centré à 1180px */
/* ⚠️ Les sections de l'ACCUEIL sont scopées sous .bd56--accueil : une page service
   peut porter une ancre de même nom (#methode sur l'éducation canine) et hériterait
   sinon d'une double gouttière. */
.bd56--accueil :is(#trust, #hero, #offre, #services, #preuve, #methode, #zone, #faq, #avis, #cta-final, #apropos),
#hero-service, #tarif, #faq-service, #cta-service {
	--display: block !important;
	width: 100%;
	padding-left: var(--gouttiere);
	padding-right: var(--gouttiere);
}

/* --------------------------------------------------------------------------
   7. Bandeau de confiance
   -------------------------------------------------------------------------- */
#trust {
	padding-top: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ligne);
}
#trust-liste {
	--display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 28px;
	max-width: var(--largeur);
	margin: 0 auto;
}
#trust-liste .elementor-widget-text-editor p {
	margin: 0;
	font-size: .88rem;
	font-weight: 500;
	color: var(--texte-doux);
	position: relative;
	padding-left: 22px;
}
#trust-liste .elementor-widget-text-editor p::before {
	content: "";
	position: absolute;
	left: 0; top: .44em;
	width: 11px; height: 6px;
	border-left: 2px solid var(--or-encre);
	border-bottom: 2px solid var(--or-encre);
	transform: rotate(-45deg);
}
#trust-liste .elementor-widget-text-editor strong { color: var(--encre); font-weight: 700; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
#hero {
	position: relative;
	background:
		radial-gradient(1100px 520px at 88% -10%, rgba(232, 201, 46, .20) 0%, transparent 62%),
		var(--sable);
	padding-top: clamp(40px, 6vw, 76px);
	padding-bottom: clamp(48px, 7vw, 88px);
	overflow: hidden;
}

#hero-inner {
	--display: grid !important;
	grid-template-columns: 1.02fr .98fr;
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	max-width: var(--largeur);
	margin: 0 auto;
	width: 100%;
}

#hero-texte { --display: block !important; }
#hero-texte h1 { margin-bottom: .45em; }
#hero-texte h1 em {
	font-style: normal;
	background: linear-gradient(180deg, transparent 62%, var(--jaune) 62%, var(--jaune) 92%, transparent 92%);
	padding: 0 .08em;
}

#hero-actions {
	--display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 26px;
}

#hero-badges {
	--display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 22px;
}

#hero-visuel { --display: block !important; position: relative; }
#hero-visuel .elementor-widget-image img {
	width: 100%;
	border-radius: var(--r-lg);
	box-shadow: var(--ombre-3);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 28%;
}

/* Étiquette flottante posée sur la photo du hero */
#hero-etiquette {
	--display: flex !important;
	align-items: center;
	gap: 12px;
	position: absolute;
	left: -14px;
	bottom: 26px;
	max-width: 74%;
	background: #fff;
	border-radius: var(--r-md);
	padding: 14px 18px;
	box-shadow: var(--ombre-3);
	border: 1px solid var(--trait);
}
#hero-etiquette .elementor-widget-text-editor p { margin: 0; font-size: .88rem; line-height: 1.4; }
#hero-etiquette .bd-ico svg { width: 26px; height: 26px; color: var(--jaune-fonce); }

@media (max-width: 900px) {
	#hero-inner { --display: block !important; }
	#hero-visuel { display: none; }
	#hero-actions .bd-btn .elementor-button,
	#hero-actions a.bd-btn { width: 100%; }
	#hero-actions { gap: 10px; }
}

/* --------------------------------------------------------------------------
   9. Sections génériques
   -------------------------------------------------------------------------- */
.bd56--accueil :is(#services, #preuve, #methode, #zone, #faq, #avis, #cta-final, #apropos),
#tarif, #faq-service, #cta-service {
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}

/* Séquence de fonds — blanc = lecture, sable = respiration, ardoise = LE seul bloc sombre. */
.bd56--accueil :is(#apropos, #preuve, #zone) { background: var(--sable); }
.bd56--accueil :is(#services, #methode, #avis, #faq) { background: var(--blanc); }
.bd56--accueil #trust { background: var(--sable-profond); }
#faq-service { background: var(--sable); }

/* Têtes de section. ⚠️ Ciblées par l'ID et non par une classe : une classe posée
   dans `_css_classes` d'un container Elementor n'est jamais rendue. */
[id$="-tete"] {
	--display: block !important;
	max-width: 720px;
	margin: 0 auto clamp(30px, 4vw, 52px);
	text-align: center;
}
[id$="-tete"] .elementor-widget-text-editor p { color: var(--texte-doux); }

/* --------------------------------------------------------------------------
   10. Grille de cartes de services
   -------------------------------------------------------------------------- */
#services-grille {
	--display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	max-width: var(--largeur);
	margin: 0 auto;
	align-items: stretch;
}

[id^="carte-"] {
	--display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	background: #fff;
	border: 1px solid var(--trait);
	border-radius: var(--r-md);
	padding: 28px 24px 26px;
	position: relative;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
[id^="carte-"]::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--jaune);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s ease;
}
[id^="carte-"]:hover {
	transform: translateY(-4px);
	box-shadow: var(--ombre-2);
	border-color: var(--jaune);
}
[id^="carte-"]:hover::before { transform: scaleX(1); }

[id^="carte-"] .bd-ico {
	width: 52px;
	height: 52px;
	border-radius: 15px;
	background: var(--jaune-clair);
	color: var(--jaune-fonce);
	display: grid;
	place-items: center;
	margin-bottom: 18px;
}
[id^="carte-"] .bd-ico svg { width: 26px; height: 26px; }

[id^="carte-"] h3 { margin: 0 0 8px; }
[id^="carte-"] .elementor-widget-text-editor p { color: var(--texte-doux); font-size: .97rem; }
[id^="carte-"] .bd-prix p {
	margin-top: 14px;
	font-family: var(--f-titre);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--encre);
}
[id^="carte-"] .bd-carte-lien { margin-top: auto; padding-top: 18px; }
[id^="carte-"] .bd-carte-lien a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	font-size: .94rem;
	color: var(--encre);
	text-decoration: none;
	border-bottom: 2px solid var(--jaune);
	padding-bottom: 2px;
	transition: gap .18s ease;
}
[id^="carte-"] .bd-carte-lien a::after {
	content: "";
	width: 7px; height: 7px;
	border-top: 2px solid var(--or-encre);
	border-right: 2px solid var(--or-encre);
	transform: rotate(45deg);
	transition: transform .18s ease;
}
[id^="carte-"] .bd-carte-lien a:hover { gap: 12px; }
[id^="carte-"] .bd-carte-lien a:hover::after { transform: rotate(45deg) translate(2px, -2px); }

/* --------------------------------------------------------------------------
   11. Bloc offre — 1re heure offerte
   -------------------------------------------------------------------------- */
#offre-bloc {
	--display: grid !important;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: clamp(20px, 3vw, 44px);
	max-width: var(--largeur);
	margin: 0 auto;
	background: var(--encre);
	color: #fff;
	border-radius: var(--r-lg);
	padding: clamp(28px, 4vw, 48px);
	position: relative;
	overflow: hidden;
}
#offre-bloc::after {
	content: "";
	position: absolute;
	right: -80px;
	top: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(245, 179, 1, .22) 0%, transparent 68%);
	pointer-events: none;
}
#offre-bloc h2 { color: #fff; margin-bottom: .35em; }
#offre-bloc h2 em { font-style: normal; color: var(--jaune); }
#offre-bloc .elementor-widget-text-editor p { color: rgba(255, 255, 255, .8); margin: 0; }
#offre-bloc .bd-eyebrow p { color: var(--jaune); }

@media (max-width: 820px) {
	#offre-bloc { --display: block !important; text-align: left; }
	#offre-bloc .bd-btn { display: block; margin-top: 22px; }
	#offre-bloc .bd-btn .elementor-button { width: 100%; }
}

/* --------------------------------------------------------------------------
   12. Chiffres / preuves
   -------------------------------------------------------------------------- */
#chiffres {
	--display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 14px;
	max-width: var(--largeur);
	margin: 0 auto;
}
[id^="chiffre-"] {
	--display: block !important;
	text-align: center;
	background: var(--fond-creme);
	border: 1px solid var(--trait);
	border-radius: var(--r-md);
	padding: 26px 18px;
}
[id^="chiffre-"] .bd-nombre p {
	font-family: var(--f-titre);
	font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.7rem);
	font-weight: 700;
	line-height: 1;
	color: var(--encre);
	margin: 0 0 8px;
}
[id^="chiffre-"] .bd-nombre em { font-style: normal; color: var(--jaune-fonce); }
[id^="chiffre-"] .elementor-widget-text-editor p { font-size: .9rem; color: var(--texte-doux); margin: 0; }

/* --------------------------------------------------------------------------
   13. Méthode / étapes
   -------------------------------------------------------------------------- */
#methode-grille {
	--display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(16px, 2vw, 26px);
	max-width: var(--largeur);
	margin: 0 auto;
	counter-reset: etape;
}
[id^="etape-"] {
	--display: block !important;
	position: relative;
	padding: 30px 22px 24px;
	background: #fff;
	border: 1px solid var(--trait);
	border-radius: var(--r-md);
}
[id^="etape-"]::before {
	counter-increment: etape;
	content: counter(etape);
	position: absolute;
	top: -18px;
	left: 22px;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--or);
	color: var(--encre);
	box-shadow: inset 0 0 0 2px var(--encre), var(--ombre-1);
	font-family: var(--f-corps);
	font-weight: 700;
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
	display: grid;
	place-items: center;
}
[id^="etape-"] h3 { margin-top: 12px; }
[id^="etape-"] .elementor-widget-text-editor p { color: var(--texte-doux); font-size: .96rem; }

/* --------------------------------------------------------------------------
   14. Section « deux colonnes » texte + image
   -------------------------------------------------------------------------- */
[id^="duo-"] {
	--display: grid !important;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(26px, 4vw, 60px);
	max-width: var(--largeur);
	margin: 0 auto;
}
[id^="duo-"] .elementor-widget-image img {
	width: 100%;
	border-radius: var(--r-lg);
	box-shadow: var(--ombre-2);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
[id^="duo-"].bd-duo--inverse { direction: rtl; }
[id^="duo-"].bd-duo--inverse > * { direction: ltr; }

@media (max-width: 860px) {
	[id^="duo-"] { --display: block !important; }
	[id^="duo-"] .elementor-widget-image { margin-bottom: 24px; }
}

/* --------------------------------------------------------------------------
   15. Avis
   -------------------------------------------------------------------------- */
#avis-grille {
	--display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(16px, 2vw, 24px);
	max-width: var(--largeur);
	margin: 0 auto;
	align-items: start;
}
[id^="temoignage-"] {
	--display: block !important;
	background: #fff;
	border: 1px solid var(--trait);
	border-radius: var(--r-md);
	padding: 26px 24px;
	position: relative;
}
[id^="temoignage-"]::before {
	content: "“";
	position: absolute;
	top: 6px;
	right: 20px;
	font-family: var(--f-titre);
	font-size: 4.2rem;
	line-height: 1;
	color: var(--jaune);
	opacity: .38;
	pointer-events: none;
}
[id^="temoignage-"] .bd-avis-texte p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--texte);
	position: relative;
	z-index: 1;
}
[id^="temoignage-"] .bd-avis-auteur p {
	margin-top: 16px;
	font-size: .86rem;
	font-weight: 700;
	color: var(--texte-tenu);
}
[id^="temoignage-"] .bd-avis-auteur em { font-style: normal; display: block; font-weight: 500; color: var(--texte-tenu); }

#avis-visuel .elementor-widget-image img {
	width: 100%;
	max-width: 420px;
	border-radius: var(--r-lg);
	box-shadow: var(--ombre-2);
}

/* --------------------------------------------------------------------------
   16. Zone d'intervention
   -------------------------------------------------------------------------- */
#zone-inner {
	--display: grid !important;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(26px, 4vw, 56px);
	align-items: center;
	max-width: var(--largeur);
	margin: 0 auto;
}
#zone-villes {
	--display: flex !important;
	flex-wrap: wrap;
	gap: 10px;
}
#zone-villes .elementor-widget-text-editor p {
	margin: 0;
	background: #fff;
	border: 1px solid var(--trait);
	border-radius: var(--r-pill);
	padding: 9px 18px;
	font-weight: 600;
	font-size: .93rem;
	color: var(--encre);
}
@media (max-width: 860px) { #zone-inner { --display: block !important; } #zone-villes { margin-top: 24px; } }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
#faq-liste, #faq-service-liste {
	--display: block !important;
	max-width: 840px;
	margin: 0 auto;
}
[id^="faq-item-"] {
	--display: block !important;
	background: #fff;
	border: 1px solid var(--trait);
	border-radius: var(--r-sm);
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}
[id^="faq-item-"]:hover { border-color: var(--jaune); }

[id^="faq-item-"] .bd-faq-q h3 {
	margin: 0;
	padding: 20px 52px 20px 24px;
	font-family: var(--f-corps);
	font-size: 1.04rem;
	font-weight: 700;
	color: var(--encre);
	cursor: default;
	position: relative;
}
[id^="faq-item-"] .bd-faq-r { padding: 0 24px 22px; }
[id^="faq-item-"] .bd-faq-r p { color: var(--texte-doux); margin: 0; }

/* --------------------------------------------------------------------------
   18. CTA final
   -------------------------------------------------------------------------- */
#cta-final, #cta-service {
	background: linear-gradient(140deg, var(--encre) 0%, var(--encre-douce) 100%);
	color: #fff;
	text-align: center;
	position: relative;
	overflow: hidden;
}
#cta-final::before, #cta-service::before {
	content: "";
	position: absolute;
	inset: auto 50% -160px auto;
	transform: translateX(50%);
	width: 620px;
	height: 320px;
	background: radial-gradient(ellipse at center, rgba(245, 179, 1, .18) 0%, transparent 70%);
	pointer-events: none;
}
#cta-final h2, #cta-service h2 { color: #fff; }
#cta-final .elementor-widget-text-editor p,
#cta-service .elementor-widget-text-editor p { color: rgba(255, 255, 255, .78); }
#cta-final-inner, #cta-service-inner {
	--display: block !important;
	max-width: 680px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
/* Le numéro de téléphone n'est JAMAIS composé en Fraunces : ses chiffres
   elzéviriens descendent sous la ligne de base et rendent un numéro pénible
   à relever. Instrument Sans 700 + tabular-nums. */
#cta-final .bd-tel p, #cta-service .bd-tel p {
	font-family: var(--f-corps);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	color: var(--or);
	margin: 18px 0 0;
}
#cta-final .bd-tel a, #cta-service .bd-tel a { text-decoration: none; }

/* --------------------------------------------------------------------------
   19. Pages de service — hero compact
   -------------------------------------------------------------------------- */
#hero-service {
	background:
		radial-gradient(900px 420px at 92% -12%, var(--jaune-clair) 0%, transparent 62%),
		var(--fond-creme);
	padding-top: clamp(38px, 5vw, 68px);
	padding-bottom: clamp(38px, 5vw, 68px);
}
#hero-service-inner {
	--display: grid !important;
	grid-template-columns: 1.08fr .92fr;
	gap: clamp(26px, 4vw, 56px);
	align-items: center;
	max-width: var(--largeur);
	margin: 0 auto;
}
#hero-service-inner .elementor-widget-image img {
	width: 100%;
	border-radius: var(--r-lg);
	box-shadow: var(--ombre-3);
	aspect-ratio: 5 / 4;
	object-fit: cover;
}
@media (max-width: 900px) {
	#hero-service-inner { --display: block !important; }
	#hero-service-inner .elementor-widget-image { margin-top: 26px; }
}

/* Fil d'Ariane maison */
.bd-fil p {
	font-size: .86rem;
	color: var(--texte-doux);
	margin: 0 0 14px;
}
.bd-fil a {
	color: var(--or-encre);
	text-decoration: underline;
	text-decoration-color: var(--or);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.bd-fil a::after {
	content: "";
	display: inline-block;
	width: 5px; height: 5px;
	margin: 0 4px 1px 9px;
	border-top: 1.5px solid var(--texte-tenu);
	border-right: 1.5px solid var(--texte-tenu);
	transform: rotate(45deg);
	vertical-align: middle;
}
.bd-fil a:hover { color: var(--encre); text-decoration-color: var(--encre); }

/* Bloc tarif d'une page service */
#tarif-bloc {
	--display: grid !important;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(18px, 3vw, 36px);
	max-width: 940px;
	margin: 0 auto;
	background: var(--jaune-clair);
	border: 2px solid var(--jaune);
	border-radius: var(--r-lg);
	padding: clamp(24px, 3vw, 36px);
}
#tarif-bloc .bd-montant p {
	font-family: var(--f-titre);
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
	font-weight: 700;
	line-height: 1;
	color: var(--encre);
	margin: 0;
	white-space: nowrap;
}
#tarif-bloc .bd-montant em { font-style: normal; font-size: .42em; font-weight: 700; color: var(--texte-doux); }
#tarif-bloc .elementor-widget-text-editor p { margin: 0; font-size: .95rem; color: var(--texte); }
@media (max-width: 800px) { #tarif-bloc { --display: block !important; text-align: center; } #tarif-bloc .bd-btn { margin-top: 18px; } }

/* --------------------------------------------------------------------------
   20. Mentions légales & fallback
   -------------------------------------------------------------------------- */
.bd-legal, .bd-fallback { padding: clamp(40px, 6vw, 80px) var(--gouttiere); background: var(--fond-creme); }
.bd-legal__inner, .bd-fallback__inner {
	max-width: 780px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--trait);
	border-radius: var(--r-lg);
	padding: clamp(26px, 4vw, 52px);
}
.bd-legal h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); }
.bd-legal h2 {
	font-size: 1.22rem;
	margin-top: 2.2em;
	padding-top: 1.1em;
	border-top: 1px solid var(--trait);
}
.bd-legal h2:first-of-type { border-top: 0; padding-top: 0; }
.bd-legal p { color: var(--texte-doux); }
.bd-legal a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--jaune); text-decoration-thickness: 2px; }
.bd-legal__updated { font-size: .86rem; color: var(--texte-tenu); margin-bottom: 2rem; }
.bd-legal__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: .93rem;
	color: var(--texte-doux);
	text-decoration: none;
	margin-bottom: 26px;
	padding: 9px 16px 9px 12px;
	border-radius: var(--r-pill);
	background: var(--fond-sable);
	transition: background .18s ease, color .18s ease;
}
.bd-legal__back:hover { background: var(--jaune); color: var(--encre); }
.bd-legal__back svg { width: 17px; height: 17px; }
.bd-legal__cta {
	margin-top: 2.4em;
	padding: 20px 24px;
	background: var(--fond-creme);
	border-radius: var(--r-md);
	font-weight: 600;
	color: var(--encre);
}
.bd-legal__cta a { font-weight: 700; }

/* --------------------------------------------------------------------------
   21. Pied de page
   -------------------------------------------------------------------------- */
.bd-footer { background: var(--encre); color: rgba(255, 255, 255, .74); }
.bd-footer__inner {
	max-width: var(--largeur);
	margin: 0 auto;
	padding: clamp(44px, 6vw, 72px) var(--gouttiere) clamp(28px, 4vw, 44px);
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	gap: clamp(26px, 3vw, 48px);
}
.bd-footer__title {
	font-family: var(--f-corps);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--jaune);
	margin: 0 0 16px;
}
.bd-brand--footer .bd-brand__name { color: #fff; }
.bd-brand--footer { margin-bottom: 16px; }
.bd-footer__pitch { font-size: .93rem; line-height: 1.6; margin-bottom: 16px; }
.bd-footer__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-footer__badges .bd-chip { background: rgba(255, 255, 255, .08); color: #fff; font-size: .8rem; }
.bd-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bd-footer__list a { text-decoration: none; font-size: .95rem; transition: color .16s ease; }
.bd-footer__list a:hover { color: var(--jaune); }
.bd-footer__zone { font-size: .93rem; line-height: 1.7; }
.bd-footer__zone span { color: rgba(255, 255, 255, .5); font-size: .86rem; }
.bd-footer__tel {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--f-corps);
	font-size: 1.3rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	color: var(--or);
	text-decoration: none;
	margin-bottom: 8px;
}
.bd-footer__tel svg { width: 20px; height: 20px; }
.bd-footer__tel:hover { color: #fff; }
.bd-footer__hours { font-size: .9rem; margin-bottom: 16px; }
.bd-footer__social { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.bd-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .08);
	text-decoration: none;
	font-size: .86rem;
	font-weight: 600;
	color: #fff;
	transition: background .16s ease, color .16s ease;
}
.bd-footer__social a:hover { background: var(--jaune); color: var(--encre); }
.bd-footer__social svg { width: 16px; height: 16px; }

.bd-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	max-width: var(--largeur);
	margin: 0 auto;
	padding: 20px var(--gouttiere) 28px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
	font-size: .84rem;
	color: rgba(255, 255, 255, .55);
}
.bd-footer__bottom p { margin: 0; }
.bd-footer__bottom a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.bd-footer__bottom a:hover { color: var(--jaune); }

@media (max-width: 900px) { .bd-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bd-footer__inner { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   22. Barre d'appel collante mobile
   L'objectif n°1 du site est l'appel : un seul bouton, pas de second CTA
   qui viendrait diluer l'action (il n'y a de toute façon aucun formulaire).
   -------------------------------------------------------------------------- */
.bd-sticky {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 120;
	display: none;
	align-items: center;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--trait);
	box-shadow: 0 -6px 24px rgba(20, 17, 15, .1);
	transform: translateY(110%);
	visibility: hidden;
	transition: transform .24s ease, visibility 0s linear .24s;
}
.bd-sticky.is-visible { transform: none; visibility: visible; transition-delay: 0s; }
.bd-sticky__btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 20px;
	border-radius: var(--r-pill);
	background: var(--jaune);
	color: var(--encre);
	font-weight: 700;
	font-size: 1.02rem;
	text-decoration: none;
	box-shadow: inset 0 0 0 2px var(--encre), 0 3px 0 var(--encre);
}
.bd-sticky__btn svg { width: 19px; height: 19px; }
.bd-sticky__note {
	flex: 0 0 auto;
	font-size: .8rem;
	font-weight: 700;
	color: var(--texte-doux);
	line-height: 1.2;
	text-align: center;
	max-width: 88px;
}

@media (max-width: 900px) {
	.bd-sticky { display: flex; }
	body.bd-has-sticky { padding-bottom: 82px; }
}

/* --------------------------------------------------------------------------
   23. Révélation au scroll
   -------------------------------------------------------------------------- */
/* ⚠️ Ecrire `transform: none` sur l'etat final annulerait le survol des cartes
   (meme specificite, declare plus bas). On ne pose donc transform QUE sur
   l'etat initial. */
@media (prefers-reduced-motion: no-preference) {
	.bd-reveal:not(.is-in) { opacity: 0; transform: translateY(18px); }
	.bd-reveal { transition: opacity .55s ease, transform .55s ease; }
}

/* --------------------------------------------------------------------------
   24. Impression
   -------------------------------------------------------------------------- */
@media print {
	.bd-header, .bd-sticky, .bd-footer__social, .bd-burger { display: none !important; }
	body.bd56 { color: #000; }
	a[href^="tel:"]::after { content: " (" attr(href) ")"; }
}

/* ==========================================================================
   25. Traitement des photos
   Les photos du client sont FROIDES (gris-bleus #90B5DC / #A9BDCE sur les
   plages, verts olive sur la pension) alors que la palette est chaude.
   Sans correction, le sable et l'or paraissent sales à côté des ciels.
   Le grade chaud n'est donc pas un effet de style, c'est une mise d'accord.
   ========================================================================== */
.elementor-widget-image img,
.bd-photo img {
	filter: saturate(1.04) contrast(1.03) sepia(.06);
}

/* Le disque est réservé aux VISAGES (règle tirée du logo, qui est un médaillon) ;
   le rectangle au contexte. Double anneau encre + or : c'est la construction
   exacte du logo rejouée à l'échelle de la page. */
.bd-photo--rond img,
.bd-photo--rond .elementor-widget-image img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--encre), 0 0 0 9px var(--or), var(--ombre-2);
	filter: saturate(1.04) contrast(1.03) sepia(.06);
}

/* ==========================================================================
   26. Bloc ardoise — UN SEUL par page, jamais deux.
   Deux blocs sombres suffisent à rompre la promesse de dominante claire
   validée avec le client, qui a explicitement rejeté les sites sombres.
   ========================================================================== */
#cta-final, #cta-service {
	background: linear-gradient(150deg, var(--ardoise) 0%, #0E212B 100%);
}

/* Encadré d'information neutre (conditions de déplacement, minimum 4 chiens…).
   Usage rare et fonctionnel : jamais comme fond de section. */
.bd-note p {
	margin: 0;
	background: var(--ardoise-clair);
	border-left: 3px solid var(--ardoise);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	padding: 14px 18px;
	font-size: .95rem;
	color: var(--ardoise);
}

/* ==========================================================================
   27. Le bloc offre reprend l'or pâle, jamais l'encre.
   Une seule bande par page, 140px de haut maximum.
   ========================================================================== */
#offre { background: var(--blanc); padding-top: 0; padding-bottom: 0; }
#offre-bloc {
	background: var(--or-pale);
	color: var(--texte);
	border-radius: 0;
	max-width: none;
	padding-left: var(--gouttiere);
	padding-right: var(--gouttiere);
	padding-top: clamp(26px, 3vw, 34px);
	padding-bottom: clamp(26px, 3vw, 34px);
}
#offre-bloc::after { display: none; }
#offre-bloc h2 { color: var(--encre); font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem); }
#offre-bloc h2 em { color: var(--or-encre); }
#offre-bloc .elementor-widget-text-editor p { color: var(--texte); }
#offre-bloc .bd-eyebrow p { color: var(--or-encre); }
#offre-inner {
	--display: grid !important;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: clamp(18px, 3vw, 40px);
	max-width: var(--largeur);
	margin: 0 auto;
}
@media (max-width: 820px) { #offre-inner { --display: block !important; } #offre-inner .bd-btn { margin-top: 18px; display: block; } }

/* ==========================================================================
   28. Liens en or : le soulignement utilise --or, la couleur du texte --or-encre.
   ========================================================================== */
.bd-lien-or a,
.elementor-widget-text-editor a {
	color: var(--or-encre);
	text-decoration: underline;
	text-decoration-color: var(--or);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	font-weight: 600;
}
.bd-lien-or a:hover,
.elementor-widget-text-editor a:hover { text-decoration-color: var(--or-fonce); color: var(--encre); }

/* ==========================================================================
   29. Pages service — conteneurs internes
   Les sections portent un id arbitraire (ancre choisie par le rédacteur) :
   leur fond et leurs marges viennent des réglages natifs Elementor posés par
   l'injecteur. Ici on ne gère que la boîte de contenu interne.
   ========================================================================== */
[id^="inner-"] {
	--display: block !important;
	max-width: var(--largeur);
	margin: 0 auto;
	padding-left: var(--gouttiere);
	padding-right: var(--gouttiere);
}
[id^="inner-"] > .elementor-widget-heading { margin-bottom: .2em; }
[id^="inner-"] > .elementor-widget-text-editor + .elementor-widget-text-editor { margin-top: .6rem; }

/* Grilles de cartes des pages service */
[id^="grille-"] {
	--display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(14px, 2vw, 22px);
	margin-top: clamp(22px, 3vw, 34px);
}

/* Badges des heros de service */
[id^="badges-"] {
	--display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
[id^="badges-"] .elementor-widget-text-editor p {
	margin: 0;
	background: #fff;
	border: 1px solid var(--ligne);
	border-radius: var(--r-pill);
	padding: 8px 16px;
	font-size: .87rem;
	font-weight: 600;
	color: var(--encre);
}

/* Barre d'action des heros de service */
[id^="hero-actions-"] {
	--display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 24px;
}

/* Badges du hero d'accueil : même traitement */
#hero-badges .elementor-widget-text-editor p {
	margin: 0;
	background: #fff;
	border: 1px solid var(--ligne);
	border-radius: var(--r-pill);
	padding: 8px 16px;
	font-size: .87rem;
	font-weight: 600;
	color: var(--encre);
}

/* Note sous le CTA (numéro + horaires) */
.bd-tel-note p {
	margin: 0;
	font-size: .9rem;
	color: var(--texte-doux);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
	[id^="hero-actions-"] .bd-btn .elementor-button,
	#hero-actions .bd-btn .elementor-button { width: 100%; }
}

/* ==========================================================================
   30. VERROU — reprise de la cascade face au kit Elementor
   ==========================================================================

   Elementor genere, dans le CSS de CHAQUE page, des regles globales par type
   de widget, alimentees par les variables du kit :

     .elementor-widget-heading .elementor-heading-title {
         font-family: var(--e-global-typography-primary-font-family);
         color: var(--e-global-color-primary);
     }
     .elementor-widget-text-editor { font-family: …; color: var(--e-global-color-text); }
     .elementor-widget-button .elementor-button { background-color: var(--e-global-color-accent); }

   Sur un kit laisse aux valeurs d'usine, ces regles rendent le site en Roboto
   cyan #6EC1E4 avec des boutons vert #61CE70, quelle que soit la qualite du
   reste de la feuille. Le correctif de FOND est la configuration du kit
   (elementor/configurer-kit.php) : c'est elle qui fait que ces memes regles
   resolvent desormais vers Fraunces / #12100F / #E8C92E.

   Ce bloc est le SECOND verrou, au cas ou quelqu'un reinitialiserait le Design
   System depuis le panneau Elementor.

   ⚠️ Le prefixe `body.bd56` n'est pas decoratif : main.css est charge AVANT
   post-{id}.css. A specificite egale (0,2,0) la regle d'Elementor, declaree
   plus tard, gagnerait. `body.bd56` porte le selecteur a (0,3,1) et reprend
   la main sans recourir a !important. Ne pas le retirer.
   -------------------------------------------------------------------------- */

body.bd56 .elementor-widget-heading .elementor-heading-title {
	font-family: var(--f-titre);
	color: var(--encre);
	font-weight: 700;
}
body.bd56 .elementor-widget-heading h3.elementor-heading-title { font-weight: 600; }

/* Blocs sombres : titres en blanc */
body.bd56 #cta-final .elementor-widget-heading .elementor-heading-title,
body.bd56 #cta-service .elementor-widget-heading .elementor-heading-title { color: #fff; }

/* Titres de FAQ : sans-serif, pas Fraunces (lisibilite en liste) */
body.bd56 [id^="faq-item-"] .bd-faq-q .elementor-heading-title {
	font-family: var(--f-corps);
	font-weight: 700;
}

body.bd56 .elementor-widget-text-editor {
	font-family: var(--f-corps);
	color: var(--texte);
	font-weight: 400;
}
body.bd56 #cta-final .elementor-widget-text-editor,
body.bd56 #cta-service .elementor-widget-text-editor { color: rgba(255, 255, 255, .78); }
body.bd56 #trust-liste .elementor-widget-text-editor { color: var(--texte-doux); }

body.bd56 .elementor-widget-button .elementor-button {
	font-family: var(--f-corps);
	font-weight: 700;
}
body.bd56 .bd-btn--primary .elementor-button { background-color: var(--or); }
body.bd56 .bd-btn--primary .elementor-button:hover { background-color: var(--or-fonce); }
body.bd56 .bd-btn--dark .elementor-button    { background-color: var(--encre); }
body.bd56 .bd-btn--ghost .elementor-button   { background-color: transparent; }
body.bd56 .bd-btn--ghost .elementor-button:hover { background-color: var(--encre); }

/* Elementor pose un espacement par defaut entre widgets ; le rythme vertical
   est gere par le theme. */
body.bd56 .elementor-widget:not(:last-child) { --kit-widget-spacing: 0; }

/* Titres de colonnes du pied de page : balises <p> et non <h2> (ils polluaient
   le plan de titres de chaque page), apparence conservee. */
.bd-footer__title { font-family: var(--f-corps); }

/* Le hero garde sa photo sur mobile en DOM mais elle est masquee : seul le
   widget image l'est, pour que l'etiquette de reassurance reste visible. */
@media (max-width: 900px) {
	#hero-visuel { display: block; }
	#hero-visuel .elementor-widget-image { display: none; }
	#hero-etiquette {
		position: static;
		max-width: none;
		margin-top: 20px;
		left: auto;
		bottom: auto;
	}
}