/* ==========================================================================
   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.
	   Une alternance de bandes encre/or (reprise du Gwenn ha Du) a été écartée :
	   à petite hauteur, un rayé noir et jaune se lit comme un ruban de chantier.
	   Deux signatures la remplacent :
	   - la bande à empreintes, uniquement sous l'en-tête
	   - le filet or dégradé, partout ailleurs (respiration, pas balisage) */
	--filet-or: linear-gradient(90deg,
		transparent 0, var(--or) 18%, var(--or) 82%, transparent 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); }

/* Bande à empreintes : elle ferme l'en-tête, et NULLE PART ailleurs.
   Hauteur bornée à 26px (le client a demandé 1 cm maximum). Le fond or vient
   du CSS et les empreintes du SVG : la couleur reste pilotée par les tokens. */
.bd-header::after {
	content: "";
	display: block;
	height: 26px;
	background-color: var(--or);
	background-image: url('../img/pattern-pattes.svg');
	background-repeat: repeat-x;
	background-position: center;
	background-size: auto 100%;
	border-bottom: 1px solid var(--or-fonce);
}

/* Filet or dégradé : marque une transition sans jamais faire barrage. */
.bd-footer::before,
#offre-bloc::before,
#cta-final::after,
#cta-service::after,
#hero-service::after {
	content: "";
	display: block;
	position: absolute;
	left: 0; right: 0;
	top: 0;
	height: 3px;
	background: var(--filet-or);
	pointer-events: none;
}
.bd-footer { position: relative; }
#offre-bloc::before { z-index: 2; }
#cta-final, #cta-service, #hero-service { position: relative; }

@media (max-width: 700px) {
	.bd-header::after { height: 20px; }
}

.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: 78px;   /* 52px avant le 2026-10-12 : logo agrandi à la demande de David */
	height: 78px;
	border-radius: 18px;
	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: 58px; height: 58px; }
.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);
	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), var(--ombre-1); }
.bd-header__cta:active { transform: none; box-shadow: inset 0 0 0 2px 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-brand__mark { width: 64px; height: 64px; border-radius: 16px; }
	.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: 84px 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);
	/* Le contour de 2px reste : sans lui l'or échoue au critère WCAG 2.2 SC 1.4.11
	   (1,64:1 sur blanc). Le débord foncé sous le bouton, lui, a été retiré :
	   il donnait un rendu « cartoon ». */
	box-shadow: inset 0 0 0 2px 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), var(--ombre-2);
}
.bd-btn--primary .elementor-button:active,
a.bd-btn--primary:active { transform: translateY(1px); box-shadow: inset 0 0 0 2px 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, #pension, #offre, #services, #preuve, #methode, #zone, #faq, #avis, #cta-final, #apropos, #galerie),
#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(#pension, #services, #preuve, #methode, #zone, #faq, #avis, #cta-final, #apropos, #galerie),
#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(#pension, #services, #methode, #avis, #faq) { background: var(--blanc); }
.bd56--accueil #galerie { background: var(--sable-profond); }
.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. */
body.bd56 [id$="-tete"]{
	--display: block !important;
	max-width: 720px;
	margin: 0 auto clamp(30px, 4vw, 52px);
	text-align: center;
}
body.bd56 [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;
}

body.bd56 [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;
}
body.bd56 [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;
}
body.bd56 [id^="carte-"]:hover{
	transform: translateY(-4px);
	box-shadow: var(--ombre-2);
	border-color: var(--jaune);
}
body.bd56 [id^="carte-"]:hover::before{ transform: scaleX(1); }

body.bd56 [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;
}
body.bd56 [id^="carte-"] .bd-ico svg{ width: 26px; height: 26px; }

body.bd56 [id^="carte-"] h3{ margin: 0 0 8px; }
body.bd56 [id^="carte-"] .elementor-widget-text-editor p{ color: var(--texte-doux); font-size: .97rem; }
body.bd56 [id^="carte-"] .bd-prix p{
	margin-top: 14px;
	font-family: var(--f-titre);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--encre);
}
body.bd56 [id^="carte-"] .bd-carte-lien{ margin-top: auto; padding-top: 18px; }
body.bd56 [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;
}
body.bd56 [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;
}
body.bd56 [id^="carte-"] .bd-carte-lien a:hover{ gap: 12px; }
body.bd56 [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;
}
body.bd56 [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;
}
body.bd56 [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;
}
body.bd56 [id^="chiffre-"] .bd-nombre em{ font-style: normal; color: var(--jaune-fonce); }
body.bd56 [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;
}
body.bd56 [id^="etape-"]{
	--display: block !important;
	position: relative;
	padding: 30px 22px 24px;
	background: #fff;
	border: 1px solid var(--trait);
	border-radius: var(--r-md);
}
body.bd56 [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);
	font-family: var(--f-corps);
	font-weight: 700;
	font-size: 1.1rem;
	font-variant-numeric: tabular-nums;
	display: grid;
	place-items: center;
}
body.bd56 [id^="etape-"] h3{ margin-top: 12px; }
body.bd56 [id^="etape-"] .elementor-widget-text-editor p{ color: var(--texte-doux); font-size: .96rem; }

/* --------------------------------------------------------------------------
   14. Section « deux colonnes » texte + image
   -------------------------------------------------------------------------- */
body.bd56 [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;
}
body.bd56 [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;
}
body.bd56 [id^="duo-"].bd-duo--inverse{ direction: rtl; }
body.bd56 [id^="duo-"].bd-duo--inverse > *{ direction: ltr; }

@media (max-width: 860px) {
body.bd56 [id^="duo-"]{ --display: block !important; }
body.bd56 [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;
}
body.bd56 [id^="temoignage-"]{
	--display: block !important;
	background: #fff;
	border: 1px solid var(--trait);
	border-radius: var(--r-md);
	padding: 26px 24px;
	position: relative;
}
body.bd56 [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;
}
body.bd56 [id^="temoignage-"] .bd-avis-texte p{
	font-size: 1rem;
	line-height: 1.6;
	color: var(--texte);
	position: relative;
	z-index: 1;
}
body.bd56 [id^="temoignage-"] .bd-avis-auteur p{
	margin-top: 16px;
	font-size: .86rem;
	font-weight: 700;
	color: var(--texte-tenu);
}
body.bd56 [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;
}
body.bd56 [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;
}
body.bd56 [id^="faq-item-"]:hover{ border-color: var(--jaune); }

body.bd56 [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;
}
body.bd56 [id^="faq-item-"] .bd-faq-r{ padding: 0 24px 22px; }
body.bd56 [id^="faq-item-"] .bd-faq-r p{ color: var(--texte-doux); margin: 0; }

/* --------------------------------------------------------------------------
   18. CTA final
   -------------------------------------------------------------------------- */
#cta-final, #cta-service {
	background: var(--ardoise);
	color: #fff;
	text-align: center;
	position: relative;
	overflow: hidden;
}
/* Halo retiré en même temps que le dégradé : le bloc est d'une seule teinte. */
#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-pale);
	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-brand--footer .bd-brand__mark { width: 84px; height: 84px; border-radius: 18px; }
.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);
}
.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.
   ========================================================================== */
/* Fond uni : le dégradé faisait une tache plus claire en haut de bloc. */
#cta-final, #cta-service { background: var(--ardoise); }

/* 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.
   ========================================================================== */
body.bd56 [id^="inner-"]{
	--display: block !important;
	max-width: var(--largeur);
	margin: 0 auto;
	padding-left: var(--gouttiere);
	padding-right: var(--gouttiere);
}
body.bd56 [id^="inner-"] > .elementor-widget-heading{ margin-bottom: .2em; }
body.bd56 [id^="inner-"] > .elementor-widget-text-editor + .elementor-widget-text-editor{ margin-top: .6rem; }

/* Grilles de cartes des pages service */
body.bd56 [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 */
body.bd56 [id^="badges-"]{
	--display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
body.bd56 [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 */
body.bd56 [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;
	}
}

/* ==========================================================================
   31. CENTRAGE DES CONTENEURS — par les variables d'Elementor
   ==========================================================================

   Elementor applique les marges et les gouttières de ses conteneurs ainsi :

     .e-con { margin-inline-start: var(--margin-inline-start);
              padding-inline-start: var(--padding-inline-start); … }

   avec `--margin-inline-start: var(--margin-left)`. Sur un conteneur qui n'est
   pas de premier niveau, `--margin-left` n'est pas défini : la déclaration
   devient invalide et retombe sur `0`. Résultat, un `margin: 0 auto` posé par
   le thème sur un sélecteur d'attribut (0,1,0) perdait face à `.e-con` (0,1,0)
   déclarée plus tard — les sections des pages service se collaient à gauche.

   Plutôt que de se battre en spécificité entre propriétés physiques et
   logiques (dont la résolution dépend du moteur), on ALIMENTE les variables
   qu'Elementor consomme. Le calcul se fait alors chez lui, sans conflit
   possible, et le réglage reste lisible dans l'éditeur.
   -------------------------------------------------------------------------- */

body.bd56 [id^="inner-"],
body.bd56 [id$="-tete"],
body.bd56 [id^="duo-"],
body.bd56 [id^="grille-"] {
	--margin-left: auto;
	--margin-right: auto;
}

body.bd56 [id^="inner-"] {
	--padding-left: var(--gouttiere);
	--padding-right: var(--gouttiere);
}

/* ==========================================================================
   32. Pension itinérante mise en avant + galerie photos (accueil)
   Demandes de David du 2026-10-12. La section #pension réutilise la grille
   [id^="duo-"] (section 14) ; la galerie est centrée par [id^="grille-"] (31).
   ========================================================================== */
#pension .bd-prix p {
	margin: 4px 0 0;
	font-weight: 700;
	color: var(--encre);
}
#pension-actions {
	--display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
	margin-top: 22px;
}
#pension-actions .bd-carte-lien p { margin: 0; }

#grille-galerie {
	--display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 1.6vw, 18px);
	max-width: var(--largeur);
}
#grille-galerie .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--r-md);
	box-shadow: var(--ombre-1);
	transition: transform .2s ease, box-shadow .2s ease;
}
#grille-galerie .elementor-widget-image a { display: block; border-radius: var(--r-md); }
#grille-galerie .elementor-widget-image a:hover img,
#grille-galerie .elementor-widget-image a:focus-visible img {
	transform: scale(1.02);
	box-shadow: var(--ombre-2);
}
@media (max-width: 700px) {
	#grille-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Photo verticale dans un cadre 4/3 : on garde le chien dans le champ. */
#duo-preuve .elementor-widget-image img { object-position: 50% 64%; }