/* Images d'ambiance (14/10/2026) : en-têtes et bandeaux à image de fond, texte posé sur une carte claire.
   Les classes sont ajoutées aux sections par wordpress/images-ambiance.php. Mode clair uniquement. */

.db-hero .uk-section,
.db-bandeau-image .uk-section { min-height: 62vh; display: flex; align-items: center; }
.db-bandeau-image .uk-section { min-height: 48vh; }
.db-hero .uk-section .uk-container,
.db-bandeau-image .uk-section .uk-container { width: 100%; }

/* La première colonne devient une carte claire, légèrement translucide, angles de 4 px (charte B).
   Une colonne seule est centrée et limitée en largeur ; la seconde colonne garde son propre style (citation…). */
.db-hero .tm-grid-expand > div:first-child,
.db-bandeau-image .tm-grid-expand > div:first-child {
  padding: 36px 40px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 4px;
  box-shadow: 0 18px 48px rgba(23, 25, 27, .16);
  animation: db-monte .7s cubic-bezier(.2, .7, .2, 1) both;
}
.db-hero .tm-grid-expand > div + div { animation: db-monte .7s .15s cubic-bezier(.2, .7, .2, 1) both; }

/* Le thème met le texte en clair sur une image de fond (classe uk-light de la colonne) : sur la carte claire,
   tout redevient foncé, sauf les boutons qui gardent leurs couleurs. */
.db-hero .tm-grid-expand > div:first-child :where(*):not(.uk-button, .uk-button *),
.db-bandeau-image .tm-grid-expand > div:first-child :where(*):not(.uk-button, .uk-button *) { color: var(--db-texte, #26292C) !important; }
.db-hero .tm-grid-expand > div:first-child :is(h1, h2, h3, h4, .el-title),
.db-bandeau-image .tm-grid-expand > div:first-child :is(h1, h2, h3, h4, .el-title) { color: var(--db-encre, #17191B) !important; }
.db-hero .tm-grid-expand > div:first-child .uk-button-default,
.db-bandeau-image .tm-grid-expand > div:first-child .uk-button-default { color: var(--db-encre, #17191B) !important; border-color: var(--db-trait, #E4E6E7) !important; background: #fff !important; }
.db-hero .tm-grid-expand > div:only-child,
.db-bandeau-image .tm-grid-expand > div:only-child { max-width: 760px; margin-inline: auto; }

/* Grille de l'en-tête : sans gouttière UIkit (elle serait dans le fond de la carte), écart propre entre cartes.
   Une colonne vide laisse voir la photo : en-tête asymétrique, carte à gauche. */
.db-hero .tm-grid-expand, .db-bandeau-image .tm-grid-expand { margin-left: 0; }
.db-hero .tm-grid-expand > div, .db-bandeau-image .tm-grid-expand > div { padding-left: 0; }
@media (min-width: 960px) {
  .db-hero .tm-grid-expand { flex-wrap: nowrap; gap: 32px; align-items: center; }
  .db-hero .tm-grid-expand > div { flex: 1 1 0; width: auto; }
}

/* Image d'une section en deux colonnes (texte d'un côté, image de l'autre). */
.db-image-section img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; box-shadow: 0 14px 36px rgba(23, 25, 27, .12); }

/* Cartes avec image (micro-zones) : léger zoom au survol. */
.db-carte-image img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.db-carte-image:hover img { transform: scale(1.04); }

@keyframes db-monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .db-hero .uk-section { min-height: 0; }
  .db-hero .tm-grid-expand > div:first-child,
  .db-bandeau-image .tm-grid-expand > div:first-child { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .db-hero .tm-grid-expand > div, .db-bandeau-image .tm-grid-expand > div { animation: none; }
  .db-carte-image img { transition: none; }
}

/* Avis des visiteurs : action cuivre sur le site public (charte du 14/10/2026, aucun bleu côté client). */
body .av-form, body .av-carte, body .av-merci { --av-action: #9F4427; --av-action-survol: #873A23; --av-action-doux: #F7EDE9; }

/* ── Bouton « Estimer mon bien » du menu (17/10/2026, retour de Vincent) ────────────────────────────────────────
   Entrée navbar-cta (menu-estimation.php) : toujours un bouton plein cuivre, jamais souligné, même page en cours.
   Prend le pas sur la règle du LESS personnalisé de YOOtheme (contour, fond pâle et trait cuivre de la page active),
   sans toucher aux réglages. Sur /estimation/, l'entrée devient « 07 82 93 00 00 » (Debergh_Cockpit::appelSurEstimation). */
html body .uk-navbar-nav > li.navbar-cta > a,
html body .uk-nav > li.navbar-cta > a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #9F4427 !important; color: #fff !important; border: 1px solid #9F4427 !important;
  border-radius: 4px !important; text-decoration: none !important; box-shadow: none !important;
  font-weight: 600; text-transform: none; transform: none !important;
  transition: background .3s, border-color .3s;
}
html body .uk-navbar-nav > li.navbar-cta > a:hover, html body .uk-navbar-nav > li.navbar-cta > a:focus-visible,
html body .uk-nav > li.navbar-cta > a:hover, html body .uk-nav > li.navbar-cta > a:focus-visible {
  background: #873A23 !important; border-color: #873A23 !important; color: #fff !important;
}
html body .uk-navbar-nav > li.navbar-cta > a::before, html body .uk-navbar-nav > li.navbar-cta > a::after,
html body .uk-nav > li.navbar-cta > a::before, html body .uk-nav > li.navbar-cta > a::after { content: none !important; display: none !important; }
html body .uk-nav > li.navbar-cta > a { display: flex; }
/* Sur /estimation/ : bouton d'appel, pictogramme téléphone devant le numéro */
html body li.navbar-cta-tel > a { font-variant-numeric: tabular-nums; white-space: nowrap; }
html body .uk-navbar-nav > li.navbar-cta-tel > a::before, html body .uk-nav > li.navbar-cta-tel > a::before {
  content: "" !important; display: block !important; position: static; flex: none; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A18 18 0 0 1 3 5a2 2 0 0 1 2-2z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A18 18 0 0 1 3 5a2 2 0 0 1 2-2z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Hauteur de bouton dans la barre (même si la règle du LESS personnalisé manque) ; menu mobile : pleine largeur */
html body .uk-navbar-nav > li.navbar-cta { display: flex; align-items: center; margin-left: 12px; background: none !important; padding: 0 !important; }
html body .uk-navbar-nav > li.navbar-cta > a { min-height: 0; height: 42px; padding: 0 18px; }
html body .uk-nav > li.navbar-cta > a { margin-top: 10px; min-height: 46px; padding: 0 16px; }
@media (prefers-reduced-motion: reduce) { html body li.navbar-cta > a { transition: none; } }

/* ── Mot-marque de l'en-tête (17/10/2026) : celui du Cockpit, posé dans le texte du logo YOOtheme par logo-site.php ──
   « DEBERGH.IMMO » en Archivo Black, point identité #C15A34, « IMMO » en Manrope 300 à .955em ; dessous, le trait
   cuivre effilé (64 × 3 px). Polices hébergées sur le site (chargerAmbiance), repli Arial Black. */
.uk-logo .db-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1; text-decoration: none; }
.uk-logo .db-logo__mot {
  font-family: 'Archivo Black', 'Arial Black', Arial, sans-serif; font-weight: 400; font-style: normal;
  font-size: 22px; line-height: 1.05; letter-spacing: -.03em; text-transform: none; white-space: nowrap; color: #17191B;
}
.uk-logo .db-logo__mot span { color: #C15A34; }
.uk-logo .db-logo__mot em { font-style: normal; font-family: 'Manrope', Arial, sans-serif; font-weight: 300; letter-spacing: 0; font-size: .955em; line-height: 1; }
.uk-logo .db-logo__regle { display: block; width: 64px; height: 3px; background: #C15A34; clip-path: polygon(0 0, 100% 44%, 100% 56%, 0 100%); }
.uk-logo:hover .db-logo__mot { color: #17191B; }
@media (max-width: 639px) {
  .uk-logo .db-logo__mot { font-size: 19px; }
  .uk-logo .db-logo__regle { width: 54px; }
}

/* Garde-fou : une section v12 (dbh-s) ne reçoit jamais la hauteur d'en-tête des anciennes pages (db-hero, 62 vh,
   texte centré verticalement), qui laissait un grand vide sous le menu. */
.dbh-s.db-hero .uk-section, .dbh-s .db-hero .uk-section { min-height: 0; display: block; }

/* ── Classes ponctuelles d'arrondis (charte du 17/10/2026) ─────────────────────────────────────────────────────────
   La règle du site est l'arrondi léger régulier de 4 px (charte B). Pour un élément choisi, Vincent saisit l'une de ces
   classes dans YOOtheme : élément (Image, Bouton, Panneau, Grille, Galerie, Colonne…) › onglet Avancé › « Classe CSS ».
   Elle vaut pour l'élément lui-même ET pour ses images, boutons, cartes et cadres intérieurs.
     dbh-3-coins          trois coins arrondis, coin droit en haut à gauche   (0 r r r)
     dbh-3-coins-bas      trois coins arrondis, coin droit en bas à gauche    (r r r 0)
     dbh-2-coins          deux coins arrondis en diagonale (haut droit, bas gauche)  (0 r 0 r)
     dbh-2-coins-inverse  l'autre diagonale (haut gauche, bas droit)          (r 0 r 0)
     dbh-2-coins-haut     les deux coins du haut                              (r r 0 0)
     dbh-coins-grand      à ajouter (après un espace) : r = 12 px au lieu de 8 px, pour les grandes images (≥ 480 px)
   r = --dbh-r (8 px par défaut ; surchargeable). Le cadre blanc intérieur des photos prend la moitié de r.
   Spécificité : « :not(#dbh-coins) » compte comme un identifiant (aucun élément ne porte cet id), ce qui l'emporte sur
   les règles de classes de la charte B sans !important. Les ronds (uk-border-circle) restent ronds ; jamais de pilule. */
:is(.dbh-3-coins, .dbh-3-coins-bas, .dbh-2-coins, .dbh-2-coins-inverse, .dbh-2-coins-haut) {
  --dbh-ra: var(--dbh-r, 8px); --dbh-ri: calc(var(--dbh-r, 8px) / 2);
}
.dbh-coins-grand { --dbh-r: 12px; }
.dbh-3-coins { --dbh-coins: 0 var(--dbh-ra) var(--dbh-ra) var(--dbh-ra); --dbh-coins-int: 0 var(--dbh-ri) var(--dbh-ri) var(--dbh-ri); }
.dbh-3-coins-bas { --dbh-coins: var(--dbh-ra) var(--dbh-ra) var(--dbh-ra) 0; --dbh-coins-int: var(--dbh-ri) var(--dbh-ri) var(--dbh-ri) 0; }
.dbh-2-coins { --dbh-coins: 0 var(--dbh-ra) 0 var(--dbh-ra); --dbh-coins-int: 0 var(--dbh-ri) 0 var(--dbh-ri); }
.dbh-2-coins-inverse { --dbh-coins: var(--dbh-ra) 0 var(--dbh-ra) 0; --dbh-coins-int: var(--dbh-ri) 0 var(--dbh-ri) 0; }
.dbh-2-coins-haut { --dbh-coins: var(--dbh-ra) var(--dbh-ra) 0 0; --dbh-coins-int: var(--dbh-ri) var(--dbh-ri) 0 0; }
/* L'élément lui-même (sauf une section entière) et ce qu'il contient : images, boutons, cartes, cadres du site */
:is(.dbh-3-coins, .dbh-3-coins-bas, .dbh-2-coins, .dbh-2-coins-inverse, .dbh-2-coins-haut):not(#dbh-coins):not([class*="uk-section"], .uk-border-circle),
:is(.dbh-3-coins, .dbh-3-coins-bas, .dbh-2-coins, .dbh-2-coins-inverse, .dbh-2-coins-haut):not(#dbh-coins)
  :is(.el-image, img, picture, video, iframe, .uk-button, .uk-card, .uk-tile, .el-item, .uk-inline-clip, .uk-cover-container,
      .dbh-bouton, .dbh-cadre, .dbh-tuile, .cadre-photo, .dbh-a-cadre, .dbh-ap-img, .dbh-ap-etape-img, .dbh-ap-photo,
      .dbh-ea-image, .dbh-eq-ph, .dbh-sc-photo, .dbh-sc-cadre, .dbh-est-photo, .dbh-lieu-img):not(.uk-border-circle) {
  border-radius: var(--dbh-coins);
}
/* Cartes : leur image suit la forme de la carte (la carte la découpe) */
:is(.dbh-3-coins, .dbh-3-coins-bas, .dbh-2-coins, .dbh-2-coins-inverse, .dbh-2-coins-haut).uk-card:not(#dbh-coins),
:is(.dbh-3-coins, .dbh-3-coins-bas, .dbh-2-coins, .dbh-2-coins-inverse, .dbh-2-coins-haut):not(#dbh-coins) .uk-card { overflow: hidden; }
:is(.dbh-3-coins, .dbh-3-coins-bas, .dbh-2-coins, .dbh-2-coins-inverse, .dbh-2-coins-haut):not(#dbh-coins)
  :is(.uk-card-media-top, .uk-card-media-bottom, .uk-card-media-left, .uk-card-media-right):not(.uk-border-circle),
:is(.dbh-3-coins, .dbh-3-coins-bas, .dbh-2-coins, .dbh-2-coins-inverse, .dbh-2-coins-haut):not(#dbh-coins)
  :is(.uk-card-media-top, .uk-card-media-bottom, .uk-card-media-left, .uk-card-media-right) :is(img, .el-image, picture):not(.uk-border-circle) { border-radius: 0; }
/* Cadre blanc intérieur des photos du site */
:is(.dbh-3-coins, .dbh-3-coins-bas, .dbh-2-coins, .dbh-2-coins-inverse, .dbh-2-coins-haut):not(#dbh-coins):is(.dbh-cadre, .cadre-photo, .dbh-a-cadre, .dbh-ap-img, .dbh-ap-etape-img, .dbh-ea-image, .dbh-eq-ph, .dbh-sc-photo, .dbh-sc-cadre)::after,
:is(.dbh-3-coins, .dbh-3-coins-bas, .dbh-2-coins, .dbh-2-coins-inverse, .dbh-2-coins-haut):not(#dbh-coins)
  :is(.dbh-cadre, .cadre-photo, .dbh-a-cadre, .dbh-ap-img, .dbh-ap-etape-img, .dbh-ea-image, .dbh-eq-ph, .dbh-sc-photo, .dbh-sc-cadre)::after {
  border-radius: var(--dbh-coins-int);
}

/* ── Second menu de rubrique : barre d'onglets sous le menu principal (17/10/2026, retour de Vincent) ──────────────
   Rendue par Debergh_Cockpit::barreOnglets() et glissée dans .uk-navbar-container de l'en-tête (collante avec lui).
   44 px, fond blanc, filet en bas ; liens Manrope 14 px gris, page en cours en charbon avec le trait cuivre du menu
   principal. Alignée sur le bord gauche du conteneur de l'en-tête (même largeur que le menu). Trop d'onglets :
   défilement horizontal sans barre, fondu au bord, flèches discrètes (souris seulement ; au doigt, on fait glisser). */
.db-onglets { position: relative; z-index: 1; background: #fff; border-top: 1px solid #F0F1F1; border-bottom: 0;   /* le filet du bas est celui de l'en-tête (17/10 : double filet) */ font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.db-onglets .db-onglets-in { display: flex; }
.db-onglets-cadre { position: relative; flex: 1 1 auto; min-width: 0; }
.db-onglets-liste {
  --db-fg: 0px; --db-fd: 0px;
  position: relative; display: flex; gap: 28px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-padding-inline: 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--db-fg), #000 calc(100% - var(--db-fd)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--db-fg), #000 calc(100% - var(--db-fd)), transparent 100%);
}
.db-onglets-liste::-webkit-scrollbar { display: none; }
.db-onglets-g .db-onglets-liste { --db-fg: 48px; }
.db-onglets-d .db-onglets-liste { --db-fd: 48px; }
/* Onglets centrés (17/10/2026) ; marges automatiques plutôt que justify-content : quand la liste déborde, elle part bien du début. */
.db-onglets-liste > a:first-child { margin-left: auto; }
.db-onglets-liste > a:last-child { margin-right: auto; }
html body .db-onglets-liste a {
  position: relative; flex: none; display: flex; align-items: center; height: 44px; padding: 0 1px; margin: 0;
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none;
  color: #5B6470; text-decoration: none; white-space: nowrap; transition: color .2s;
}
.db-onglets-liste a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: transparent; transition: background-color .2s; }
html body .db-onglets-liste a:hover { color: #17191B; text-decoration: none; }
html body .db-onglets-liste a.db-onglet-actif { color: #17191B; }
.db-onglets-liste a.db-onglet-actif::after { background: #C15A34; }
.db-onglets-liste a:focus-visible { outline: 2px solid #9F4427; outline-offset: -2px; border-radius: 4px; }
/* Flèches : seulement avec une souris, et seulement du côté où il reste des onglets */
.db-onglets-fl {
  position: absolute; z-index: 2; top: 0; bottom: 0; display: none; align-items: center; justify-content: center;
  width: 30px; padding: 0; margin: 0; border: 0; border-radius: 4px; background: #fff; color: #5B6470; cursor: pointer;
  transition: color .2s;
}
.db-onglets-fl:hover { color: #17191B; }
.db-onglets-fl-g { left: 0; }
.db-onglets-fl-d { right: 0; }
@media (hover: hover) and (pointer: fine) {
  .db-onglets-g .db-onglets-fl-g, .db-onglets-d .db-onglets-fl-d { display: flex; }
}
@media (max-width: 639px) {
  .db-onglets-liste { gap: 22px; }
  .db-onglets-g .db-onglets-liste { --db-fg: 32px; }
  .db-onglets-d .db-onglets-liste { --db-fd: 32px; }
}
/* Dans un en-tête transparent (posé sur une image), la barre garde son fond blanc */
.uk-navbar-transparent .db-onglets { background: #fff; }
/* Trait cuivre de l'onglet actif posé sur le filet de l'en-tête, comme celui du menu principal (24/10/2026, retour de
   Vincent) : la marge basse du conteneur de l'en-tête (15 px) ne s'ajoute plus sous la barre ; elle passe entre le filet
   et la première section (--db-sous-onglets, plus bas). */
html body .uk-navbar-container:has(> .db-onglets) { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .db-onglets-liste a, .db-onglets-liste a::after, .db-onglets-fl { transition: none; }
}
/* L'ancienne section du second menu, au milieu des pages, ne prend plus aucune place (la barre est dans l'en-tête).
   Seulement la section : sur Acheter, la classe est portée par un élément de l'en-tête de page, qui reste affiché. */
.uk-section.db-sous-menu-section, [class*="uk-section"].db-sous-menu-section { display: none !important; }

/* ── Mention d'OpenStreetMap sur les cartes (24/10/2026) ──────────────────────────────────────────────────────────
   Retour de Vincent : plus de légende « Fond de carte © OpenStreetMap » sous les cartes. La licence ODbL d'OpenStreetMap
   impose pourtant une mention sur la carte : elle reste, dans le coin bas droit de CHAQUE carte (contrôle d'attribution
   de Leaflet, « © OpenStreetMap » lié à openstreetmap.org/copyright ; .db-osm-mention pour la carte-décor de Contact),
   discrète (11 px, gris, fond blanc translucide) mais lisible. Ne jamais la masquer. Seule règle du site pour la
   mention : les feuilles des pages n'en ont plus. « html body » : l'emporte sur leaflet.css, chargé après. */
html body .leaflet-container .leaflet-control-attribution, html body .db-osm-mention {
  margin: 0; padding: 1px 6px; border-radius: 4px 0 0 0; background: rgba(255, 255, 255, .78);
  font-family: 'Manrope', system-ui, sans-serif; font-size: 11px; font-weight: 400; line-height: 16px; letter-spacing: 0; text-transform: none; color: #5B6470;
}
html body .leaflet-container .leaflet-control-attribution a, html body a.db-osm-mention { color: #5B6470; text-decoration: none; }
html body .leaflet-container .leaflet-control-attribution a:hover, html body a.db-osm-mention:hover { color: #17191B; text-decoration: underline; }

/* ── Fils d'Ariane : retirés partout (décision de Vincent, 17 puis 24/10/2026) ───────────────────────────────────────
   Les scripts de gabarit n'en posent plus et retirent ceux des pages déjà construites (dbh_retirer_ariane, lib-builder.php,
   lancé par « page.sh <gabarit> appliquer »). Filet de sécurité : tout élément *-ariane reste invisible, et l'élément HTML
   du builder qui ne contenait que lui ne garde pas sa marge. Le BreadcrumbList JSON-LD (debergh-seo.php) reste. */
[class$="-ariane"], [class*="-ariane "] { display: none !important; }
.dbh-html:has(> [class$="-ariane"]:only-child), .dbh-html:has(> [class*="-ariane "]:only-child) { display: none !important; }

/* ── Espace sous la barre d'onglets (24/10/2026, retour de Vincent : ~70 px de trop sur /ma-recherche/) ────────────
   body.db-avec-onglets : posé par Debergh_Cockpit (body_class) et par le script de la barre. La première section de la
   page (celle qui porte dbh-page-<page>) commence à 40 px sous la barre sur ordinateur, 32 px sur tablette, 24 px sur
   téléphone, la même pour tous les gabarits : la marge de la section, de sa première rangée et de son premier élément
   ne s'y ajoute pas. Exception : la carte plein cadre de Le secteur (dbh-sc-carte), collée à la barre. Fiche d'un bien :
   même écart au-dessus de son en-tête (.dbh-b-tete). */
/* 24/10/2026 (2e retour) : +16 px, l'espace qui séparait le trait cuivre de l'onglet actif du filet de l'en-tête */
body.db-avec-onglets { --db-sous-onglets: 56px; }
@media (max-width: 959px) { body.db-avec-onglets { --db-sous-onglets: 48px; } }
@media (max-width: 639px) { body.db-avec-onglets { --db-sous-onglets: 40px; } }
html body.db-avec-onglets .dbh-s[class*="dbh-page-"]:not(.dbh-sc-carte),
html body.db-avec-onglets .dbh-s[class*="dbh-page-"]:not(.dbh-sc-carte) > .uk-section { padding-top: 0; margin-top: 0; }
html body.db-avec-onglets .dbh-s[class*="dbh-page-"]:not(.dbh-sc-carte) > .uk-container,
html body.db-avec-onglets .dbh-s[class*="dbh-page-"]:not(.dbh-sc-carte) > .uk-section > .uk-container { padding-top: var(--db-sous-onglets); }
html body.db-avec-onglets .dbh-s[class*="dbh-page-"]:not(.dbh-sc-carte) .uk-container > .uk-grid:first-child,
html body.db-avec-onglets .dbh-s[class*="dbh-page-"]:not(.dbh-sc-carte) .uk-container > .uk-grid:first-child > * > :first-child { margin-top: 0; }
html body.db-avec-onglets.dbh-page-bien .dbh-b-tete { padding-top: var(--db-sous-onglets); }
/* Éléments vides en tête de colonne (bouton d'appel masqué sur ordinateur, décor d'Acheter) : leur marge basse UIkit
   (20 px) s'ajoutait à l'écart, d'où les ~70 px constatés sur /ma-recherche/ */
html body.db-avec-onglets .dbh-s[class*="dbh-page-"] .dbh-a-haut { margin-bottom: 0; }
@media (min-width: 960px) {
  html body.db-avec-onglets .dbh-s[class*="dbh-page-"] :is(.dbh-mr-appel-zone, .dbh-est-appel-zone) { margin: 0 !important; }
}

/* ── En-tête : l'icône Facebook ne passe plus sous le menu (24/10/2026, capture de /ma-recherche/ à 1440 px) ─────────
   Le menu principal tient sur une ligne : entrées resserrées par paliers de largeur, jamais de retour à la ligne dans la
   barre ; l'icône des réseaux reste au bout du menu tant qu'elle tient, sinon elle est retirée de la barre (classe
   db-sans-reseaux posée par Debergh_Cockpit::SCRIPT_ENTETE, qui mesure). Elle reste dans l'en-tête téléphone et au pied
   de page. Bouton « Estimer mon bien » (navbar-cta) inchangé. */
@media (min-width: 960px) {
  html body .tm-header .uk-navbar-nav > li:not(.navbar-cta) > a { padding-left: 11px; padding-right: 11px; white-space: nowrap; }
  .tm-header .uk-navbar-item:has(.uk-icon-link, .uk-icon-button, a[href*="facebook.com"]) { padding-left: 14px; padding-right: 0; }
}
@media (min-width: 1200px) {
  /* À partir de 1200 px, tout tient sur une ligne (1280, 1366, 1440, 1920 vérifiés) : plus de retour à la ligne dans la barre */
  .tm-header .uk-navbar-left, .tm-header .uk-navbar-right, .tm-header [class*="uk-navbar-center"], .tm-header .uk-navbar-nav { flex-wrap: nowrap; }
  html body .tm-header .uk-navbar-nav > li:not(.navbar-cta) > a { padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 1400px) { html body .tm-header .uk-navbar-nav > li:not(.navbar-cta) > a { padding-left: 18px; padding-right: 18px; } }
@media (min-width: 1700px) { html body .tm-header .uk-navbar-nav > li:not(.navbar-cta) > a { padding-left: 24px; padding-right: 24px; } }
.tm-header.db-sans-reseaux .uk-navbar-item:has(.uk-icon-link, .uk-icon-button, a[href*="facebook.com"]) { display: none !important; }

/* Textes selon le nombre réel de biens et de recherches (24/10/2026). Chaque variante est un élément YOOtheme ordinaire
   (modifiable, traduisible par Falang) qui porte une classe dbh-si-… ; les classes du corps (Debergh_Biens::classesCorps,
   pages Nos biens et Ils cherchent) disent laquelle montrer. */
.dbh-recherches-0 .dbh-si-recherches,
body:not(.dbh-recherches-0) .dbh-si-aucune-recherche,
body:not(.dbh-recherches-1) .dbh-si-une-recherche,
body:not(.dbh-recherches-n) .dbh-si-plusieurs-recherches,
body:not(.dbh-recherches-montrees) .dbh-si-recherches-montrees,
.dbh-recherches-montrees .dbh-si-recherches-peu,
.dbh-biens-0 .dbh-si-biens,
body:not(.dbh-biens-0) .dbh-si-aucun-bien { display: none !important; }

/* ── Réseaux sociaux hors de l'en-tête (24/10/2026, retour de Vincent : le « f » dans la barre de menu ne va pas) ───────
   Ordinateur et téléphone : l'icône n'est plus dans l'en-tête ; elle reste au pied de page. Les règles de mesure
   ci-dessus (db-sans-reseaux) n'ont plus d'effet visible. */
.tm-header .uk-navbar-item:has(a[href*="facebook.com"], a[href*="instagram.com"], a[href*="linkedin.com"]):not(:has(.uk-navbar-nav)),
.tm-header-mobile .uk-navbar-item:has(a[href*="facebook.com"], a[href*="instagram.com"], a[href*="linkedin.com"]):not(:has(.uk-navbar-nav)) { display: none !important; }

/* ── Bloc « curiosité » (25/10/2026) : Vendre et Le secteur. Colonne étroite centrée, filet cuivre en tête, note
   manuscrite de signature décalée à droite. Éléments YOOtheme natifs (modifiables, traduisibles). */
.dbh-s.dbh-curiosite > .uk-container, .dbh-s.dbh-curiosite > .uk-section > .uk-container { padding-top: 44px; padding-bottom: 44px; }
.dbh-curiosite .dbh-curiosite-col { max-width: 720px; margin: 0 auto; padding-top: 26px; border-top: 2px solid #9F4427; }
/* Sur ordinateur, même largeur que les autres sections (29/10/2026, retour de Vincent : « plein centre, petite, fait bizarre ») :
   sur-titre et titre à gauche, texte, bouton et note à droite */
@media (min-width: 960px) {
  .dbh-curiosite .dbh-curiosite-col { max-width: none; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 72px; grid-auto-flow: row dense; align-items: start; padding-top: 32px; }
  .dbh-curiosite .dbh-curiosite-col > * { grid-column: 2; margin-top: 0 !important; margin-bottom: 18px !important; }
  .dbh-curiosite .dbh-curiosite-col > .dbh-k, .dbh-curiosite .dbh-curiosite-col > .dbh-t { grid-column: 1; }
  .dbh-curiosite .dbh-curiosite-col > .dbh-t { grid-row: 2 / span 3; }
  .dbh-curiosite .dbh-curiosite-col > .dbh-t, .dbh-curiosite .dbh-curiosite-col > .dbh-t :where(h2) { font-size: clamp(34px, 3vw, 46px); line-height: 1.12; }
  .dbh-curiosite .dbh-curiosite-note-el { text-align: left; }
}
.dbh-curiosite .dbh-curiosite-col .dbh-p p { font-size: 18px; line-height: 1.65; max-width: none; }
.dbh-curiosite .dbh-curiosite-note-el { margin-top: 6px !important; text-align: right; }
.dbh-curiosite .dbh-curiosite-note { display: inline-block; margin: 0; font-family: 'Caveat', cursive; font-size: 26px; line-height: 1.1; color: #9F4427; transform: rotate(-2deg); }
@media (max-width: 639px) {
  .dbh-s.dbh-curiosite > .uk-container, .dbh-s.dbh-curiosite > .uk-section > .uk-container { padding-top: 40px; padding-bottom: 40px; }
  .dbh-curiosite .dbh-curiosite-note { font-size: 22px; }
}

/* ── Pied de page : le village découpe le haut du pied (demande de Vincent, 29/10/2026) ─────────────────────────
   Le contour haut du dessin de Vincent est la limite : dessous, la couleur du pied (--dbh-pied) ; dessus, la couleur
   du bas de la page (--dbh-avant), donc la découpe s'adapte à toute section. Les deux couleurs sont mesurées par
   Debergh_Cockpit::scriptPied (blanc et charbon par défaut). Partie basse entièrement foncée, sans trait (29/10/2026). Hauteur proportionnelle à la largeur (2128 × 243), au moins 900 px
   de large sur téléphone (les bords sont alors coupés). Forme : village-forme.svg (masque net) ; liseré : village-lisere.svg.
   Sous une section sombre, la bande du village passe en clair (scriptPied). */
footer.dbh-pied-village { position: relative; --dbh-pied: #17191B; --dbh-avant: #fff; --dbh-village-l: max(100vw, 900px); --dbh-village-h: calc(var(--dbh-village-l) * 243 / 2128 * .75);   /* 25 % moins haut (29/10/2026, retour de Vincent), même dessin */
  padding-top: var(--dbh-village-h);
  background: linear-gradient(var(--dbh-avant), var(--dbh-avant)) center top / 100% calc(var(--dbh-village-h) - 2px) no-repeat; }
footer.dbh-pied-village::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--dbh-village-h); pointer-events: none; }
footer.dbh-pied-village::before { background: var(--dbh-pied);
  -webkit-mask: url("village-forme.svg?v=3") center bottom / var(--dbh-village-l) var(--dbh-village-h) no-repeat;
          mask: url("village-forme.svg?v=3") center bottom / var(--dbh-village-l) var(--dbh-village-h) no-repeat; }
/* Liseré blanc fin en retrait du contour, comme le cadre intérieur des photos. Retour à cette version sans fondu
   (29/10/2026, demande de Vincent : « on remet l'ancien footer sans flouté ») */
footer.dbh-pied-village::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--dbh-village-h); pointer-events: none; opacity: .5;
  background: url("village-lisere.svg?v=3") center bottom / var(--dbh-village-l) var(--dbh-village-h) no-repeat; }
/* La découpe touche la dernière section : sa marge basse ne laisse pas de bande blanche entre les deux */
footer.dbh-pied-village > .uk-section:first-child { margin-top: -1px; }
/* Texte du pied rapproché de la découpe (29/10/2026, retour de Vincent) */
html body footer.dbh-pied-village .uk-section:first-of-type { padding-top: 16px !important; }
@media (max-width: 639px) { html body footer.dbh-pied-village .uk-section:first-of-type { padding-top: 12px !important; } }

/* ── Boussole des cartes (29/10/2026) : style de la page Acheter, l'aiguille oscille doucement ── */
@keyframes dbh-bss-oscille { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.dbh-bss-carte .dbh-bss-aiguille { transform-box: fill-box; transform-origin: 50% 50%; animation: dbh-bss-oscille 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dbh-bss-carte .dbh-bss-aiguille { animation: none; } }