/*
 * DEBERGH.IMMO — formulaire en étapes (Contact Form 7). Lot B · B8.
 * Charte B du site (17/10/2026, wordpress/agents/AGENTS.md § 1) pour TOUS les formulaires (recherche, estimation,
 * contact) : action cuivre #9F4427 (survol #873A23), aucun bleu, focus et progression cuivre, bouton grisé #A9AEB2
 * lisible, cartes blanches bordées, arrondis 4 px sans bascule au survol, cases-boutons au niveau des tuiles v12
 * (fond blanc, contour qui fonce au survol, contour cuivre une fois choisi ; jamais de pilule), icônes au trait du
 * Cockpit, champ oublié en rouge avec « À renseigner », mode clair uniquement.
 * Adresse du bien (25/10/2026) : champ, « Je suis sur place », suggestions et vue aérienne de l'IGN (.db-adresse…, .db-repere…).
 * Polices : titres et étapes en Newsreader (var(--dbh-titre), posée par accueil.css sur les pages v12), texte Manrope.
 */
.db-form {
  --db-action: #9F4427;
  --db-action-survol: #873A23;
  --db-action-doux: #F7ECE7;
  --db-action-rgb: 159, 68, 39;
  --db-encre: #17191B;
  --db-texte: #33383C;
  --db-gris: #5B6470;
  --db-aide: #8A9096;
  --db-trait: #E4E6E7;
  --db-trait-case: #D5D8DB;
  --db-trait-pale: #F0F1F1;
  --db-fond: #F7F7F6;
  --db-mineral: #F3F4F4;
  --db-grise: #A9AEB2;
  --db-rouge: #B42318;
  --db-vert: #2F7D57;
  --db-terra: #C15A34;
  --db-titre: var(--dbh-titre, 'Newsreader', Georgia, 'Times New Roman', serif);
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 18px;
  background: #fff;
  border: 1px solid var(--db-trait);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(23, 25, 27, .04);
  color: var(--db-texte);
  box-sizing: border-box;
}
.db-form *, .db-form *::before, .db-form *::after { box-sizing: border-box; }
@media (min-width: 640px) { .db-form { padding: 28px 32px 24px; } }

/* Progression : « Étape 2 sur 4 » et barre fine */
.db-progression { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 12px; color: var(--db-gris); }
.db-progression-texte { white-space: nowrap; }
.db-progression-texte b { font-weight: 600; color: var(--db-encre); }
.db-progression-barre { flex: 1; height: 4px; background: var(--db-trait-pale); border-radius: 999px; overflow: hidden; }
.db-progression-barre i { display: block; height: 100%; width: 25%; background: var(--db-action); border-radius: 999px; transition: width .35s cubic-bezier(.2, .7, .2, 1); }

/* Étapes */
.db-etape { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.db-etape.db-active { display: block; animation: db-entree .28s cubic-bezier(.2, .7, .2, 1); }
@keyframes db-entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Changement d'étape : l'étape glisse dans le sens du parcours, ses champs arrivent l'un après l'autre */
.db-etape.db-active.db-vers-avant { animation: db-glisse-avant .34s cubic-bezier(.2, .7, .2, 1); }
.db-etape.db-active.db-vers-arriere { animation: db-glisse-arriere .34s cubic-bezier(.2, .7, .2, 1); }
@keyframes db-glisse-avant { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes db-glisse-arriere { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.db-etape.db-active > .db-champ, .db-etape.db-active > .db-ligne, .db-etape.db-active > .db-surfaces, .db-etape.db-active > .db-recap { animation: db-monte .4s cubic-bezier(.2, .7, .2, 1) both; }
.db-etape.db-active > :nth-child(3) { animation-delay: .04s; } .db-etape.db-active > :nth-child(4) { animation-delay: .08s; }
.db-etape.db-active > :nth-child(5) { animation-delay: .12s; } .db-etape.db-active > :nth-child(6) { animation-delay: .16s; }
.db-etape.db-active > :nth-child(n+7) { animation-delay: .2s; }
@keyframes db-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.db-etape legend { display: block; width: 100%; padding: 0; margin: 0 0 6px; font-family: var(--db-titre); font-size: 1.6rem; font-weight: 360; line-height: 1.2; color: var(--db-encre); letter-spacing: -.02em; }
.db-intro-etape { margin: 0 0 16px; font-size: .9rem; color: var(--db-gris); }

.db-champ { position: relative; margin: 0 0 14px; min-width: 0; }
/* Le champ en cours de saisie passe devant les suivants : sa liste de suggestions n'est jamais recouverte
   (les champs animés forment chacun leur propre plan d'affichage). */
.db-champ:focus-within, .db-sous-champ:focus-within, .db-champ.db-liste-ouverte { z-index: 30; }
.db-champ > label, .db-libelle { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--db-gris); }
.db-champ small { font-weight: 400; color: var(--db-aide); }
.db-sous-champ { position: relative; min-width: 0; margin-bottom: 10px; }
.db-sous-champ > label { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--db-gris); }
.db-sous-champ input[type="range"] { margin: 11px 0; }
.db-ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.db-aide { margin: -6px 0 14px; font-size: 12px; color: var(--db-aide); }

/* Champs */
.db-form input[type="text"], .db-form input[type="email"], .db-form input[type="tel"],
.db-form input[type="number"], .db-form select, .db-form textarea {
  display: block; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px;
  font: inherit; font-size: 16px; color: var(--db-encre);
  background: #fff; border: 1px solid var(--db-trait-case); border-radius: 4px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.db-form select { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235B6470' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.db-form textarea { min-height: 72px; resize: vertical; field-sizing: content; max-height: 240px; }
.db-form input::placeholder, .db-form textarea::placeholder { color: var(--db-aide); }
.db-form input:focus, .db-form select:focus, .db-form textarea:focus { outline: none; border-color: var(--db-action); box-shadow: 0 0 0 3px rgba(var(--db-action-rgb), .16); }
.db-form .wpcf7-form-control-wrap { display: block; position: relative; }

/* Cases-boutons (choix unique ou multiple), au niveau des tuiles v12 : fond blanc, arrondi 4 px, contour qui fonce au
   survol (rien ne bouge), contour cuivre doublé une fois choisi ; le rond ou la case de gauche dit « un » ou « plusieurs ». */
.db-form .wpcf7-radio, .db-form .wpcf7-checkbox { display: grid; gap: 8px; }
.db-choix-2 .wpcf7-radio, .db-choix-2 .wpcf7-checkbox { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.db-choix-5 .wpcf7-radio { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.db-choix-5 .wpcf7-list-item-label { justify-content: center; padding: 10px 6px; }
.db-choix-5 .wpcf7-list-item-label::before { display: none; }
.db-form .wpcf7-list-item { display: block; margin: 0; }
.db-form .wpcf7-list-item label { display: block; margin: 0; cursor: pointer; }
.db-form .wpcf7-list-item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.db-form .wpcf7-list-item-label {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px;
  font-size: .95rem; font-weight: 500; line-height: 1.3; color: var(--db-encre);
  background: #fff; border: 1px solid var(--db-trait-case); border-radius: 4px;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.db-form .wpcf7-list-item-label::before {
  content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--db-grise); border-radius: 50%; background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.db-form .wpcf7-checkbox .wpcf7-list-item-label::before { border-radius: 4px; }
.db-form .wpcf7-list-item label:hover .wpcf7-list-item-label { border-color: var(--db-encre); }
.db-form .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { outline: 2px solid var(--db-action); outline-offset: 2px; }
.db-form .wpcf7-list-item input:checked + .wpcf7-list-item-label { background: #fff; border-color: var(--db-action); box-shadow: inset 0 0 0 1px var(--db-action); color: var(--db-encre); font-weight: 600; }
.db-form .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
  border-color: var(--db-action); background: var(--db-action);
  box-shadow: inset 0 0 0 3px #fff;
}
.db-form .wpcf7-checkbox input:checked + .wpcf7-list-item-label::before {
  box-shadow: none;
  background: var(--db-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
/* Grille compacte de cases-boutons (délai, particularités) : jamais de pilule, même arrondi 4 px que les autres choix */
.db-grille .wpcf7-radio, .db-grille .wpcf7-checkbox { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; }
.db-grille .wpcf7-list-item-label { min-height: 40px; padding: 8px 12px; font-size: .88rem; gap: 8px; }
.db-grille .wpcf7-list-item-label::before { width: 15px; height: 15px; }
@media (max-width: 480px) { .db-grille .wpcf7-radio, .db-grille .wpcf7-checkbox { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.db-precision { margin-top: 10px; }
/* Icônes au trait du Cockpit dans les cases-boutons (formulaire.js, 17/10/2026 après-midi, à la place des aquarelles) :
   20 px, grises au repos, cuivre une fois choisi ; le libellé suit, le rond ou la case de choix reste à gauche. */
.db-form .wpcf7-list-item-label .db-picto { flex: none; display: block; width: 20px; height: 20px; color: var(--db-gris); transition: color .2s; }
.db-form .wpcf7-list-item label:hover .db-picto { color: var(--db-encre); }
.db-form .wpcf7-list-item input:checked + .wpcf7-list-item-label .db-picto { color: var(--db-action); }
/* Grilles compactes à icône (délai, « Comment m'avez-vous connu ? ») : l'icône et le contour cuivre disent le choix,
   le rond laisse sa place au libellé */
.db-form .db-grille .db-avec-ico .wpcf7-list-item-label::before { display: none; }
@media (max-width: 480px) {
  /* Mot long (« rafraîchissements ») à côté d'une icône : coupé proprement plutôt que de déborder à 390 px */
  .db-form .wpcf7-list-item-label { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
  /* Case à icône en deux colonnes : l'icône et le contour cuivre disent déjà le choix, le rond laisse la place au texte */
  .db-form .db-choix-2 .db-avec-ico .wpcf7-list-item-label::before { display: none; }
  .db-form .db-avec-ico .wpcf7-list-item-label { gap: 8px; padding-left: 12px; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .db-form .wpcf7-list-item-label .db-picto { transition: none; } }

/* Petite coche qui « claque » au choix */
.db-form .wpcf7-list-item input:checked + .wpcf7-list-item-label::before { animation: db-choisi .28s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes db-choisi { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
.db-case-seule .wpcf7-list-item-label { font-weight: 400; font-size: .88rem; align-items: flex-start; }
.db-case-seule .wpcf7-list-item-label::before { margin-top: 1px; }

/* Curseur (surface, rayon) : piste fine, partie remplie et poignée cuivre */
.db-curseur { margin: 2px 0 10px; }
.db-form input[type="range"] {
  --db-rempli: 0%;
  display: block; width: 100%; height: 24px; margin: 0; padding: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.db-form input[type="range"], .db-form input[type="range"]:focus, .db-form input[type="range"]:focus-visible, .db-form input[type="range"]:active {
  outline: none !important; border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0;
}
.db-form input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--db-action) var(--db-rempli), var(--db-trait) var(--db-rempli));
}
.db-form input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: var(--db-trait); }
.db-form input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--db-action); }
.db-form input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8px;
  border-radius: 50%; background: #fff; border: 2px solid var(--db-action); box-shadow: 0 1px 3px rgba(23, 25, 27, .15);
  transition: transform .15s;
}
.db-form input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--db-action); box-shadow: 0 1px 3px rgba(23, 25, 27, .15);
}
.db-form input[type="range"]:hover::-webkit-slider-thumb, .db-form input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.db-form input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(var(--db-action-rgb), .18); }
.db-form input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(var(--db-action-rgb), .18); }
.db-form input[type="range"].db-curseur-vide::-webkit-slider-thumb { border-color: var(--db-grise); }
.db-form input[type="range"].db-curseur-vide::-moz-range-thumb { border-color: var(--db-grise); }
.db-curseur-bornes { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11.5px; color: var(--db-aide); }

/* Surfaces du formulaire d'estimation (25/10/2026, « qu'on ne puisse pas confondre les deux ») : deux blocs sur fond
   très pâle (pas de boîte dans la boîte), pictogramme au trait, titre et « à l'intérieur » / « à l'extérieur », aide
   courte, curseur, champ avec son unité. Côte à côte quand les deux s'affichent et que la place le permet (un bloc
   masqué sort de la grille), empilés sur téléphone. Curseur haut de 44 px pour le doigt, poignée inchangée. */
.db-surfaces { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr)); gap: 12px; margin: 0 0 14px; }
.db-surfaces > .db-champ { margin: 0; }
.db-surface-bloc { padding: 12px 14px 12px; background: var(--db-fond); border-radius: 4px; }
.db-form .db-surface-bloc > label {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-items: center; margin: 0 0 6px;
  font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--db-encre);
}
.db-surf-picto { grid-row: 1 / span 2; width: 28px; height: 28px; color: var(--db-gris); transition: color .2s; }
.db-surface-bloc.is-rempli .db-surf-picto { color: var(--db-action); }
.db-surf-titre { min-width: 0; }
.db-surf-ou { min-width: 0; font-size: 12px; font-weight: 500; color: var(--db-gris); }
.db-surf-aide { margin: 0 0 4px; font-size: 12px; line-height: 1.45; color: var(--db-aide); }
.db-surface-bloc .db-curseur { margin: 0 0 8px; }
.db-form .db-surface-bloc input[type="range"] { height: 44px; margin: -4px 0 -10px; }
.db-surf-saisie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.db-surf-champ { position: relative; display: block; flex: 0 1 150px; min-width: 112px; }
.db-form .db-surf-champ input[type="number"] { padding-right: 40px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.db-form .db-surf-champ input[type="number"]::-webkit-outer-spin-button, .db-form .db-surf-champ input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.db-surf-unite { position: absolute; right: 12px; top: 22px; transform: translateY(-50%); font-size: 15px; color: var(--db-gris); pointer-events: none; }
.db-surf-equivalent { min-width: 0; font-size: 14px; font-weight: 600; color: var(--db-encre); font-variant-numeric: tabular-nums; }
.db-surf-equivalent:empty { display: none; }
.db-surface-bloc .db-raccourcis .db-tuile { padding: 8px 10px; font-size: 13.5px; }
/* Adresse du bien (25/10/2026) : champ et « Je suis sur place » sur une ligne (le bouton passe dessous s'il manque de
   place), suggestions sous le champ (nom en 500, code postal et commune en petit), puis la vue aérienne de l'IGN où
   l'on touche sa maison ; repère cuivre, mention © IGN dans le coin (style commun d'ambiance.css). */
.db-adresse-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; min-width: 0; }
.db-adresse-champ { position: relative; flex: 1 1 240px; min-width: 0; }
.db-adresse-champ .db-suggestions li { display: flex; flex-direction: column; gap: 1px; min-height: 44px; justify-content: center; }
.db-adresse-champ .db-suggestions small { font-size: 12px; color: var(--db-gris); }
.db-adresse-nom { font-weight: 500; color: var(--db-encre); }
.db-sur-place {
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; margin: 0; padding: 0 14px;
  border: 1px solid var(--db-trait-case); border-radius: 4px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--db-encre); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: border-color .15s, color .15s;
}
.db-sur-place:hover { border-color: var(--db-encre); }
.db-sur-place:focus-visible { outline: 2px solid var(--db-action); outline-offset: 2px; }
.db-sur-place[disabled] { color: var(--db-gris); cursor: progress; }
.db-sur-place .db-picto { width: 18px; height: 18px; color: var(--db-action); }
.db-adresse-etat { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--db-gris); }
.db-adresse-etat:empty { display: none; }
.db-repere { margin: 10px 0 0; }
.db-repere[hidden] { display: none; }
.db-repere-aide { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--db-encre); }
.db-repere-carte { height: 260px; border: 1px solid var(--db-trait); border-radius: 4px; overflow: hidden; background: var(--db-mineral); z-index: 0; cursor: crosshair; }
@media (max-width: 560px) { .db-repere-carte { height: 220px; } }
.db-form .db-repere-carte .leaflet-bar { border-radius: 4px; }
.db-form .db-repere-carte .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 20px; color: var(--db-encre); }
.db-form .db-repere-carte .leaflet-bar a:first-child { border-radius: 4px 4px 0 0; }
.db-form .db-repere-carte .leaflet-bar a:last-child { border-radius: 0 0 4px 4px; }
.db-repere-icone { background: none; border: 0; }
.db-repere-icone svg { display: block; width: 34px; height: 42px; filter: drop-shadow(0 2px 3px rgba(23, 25, 27, .35)); }
.db-repere-icone path { fill: var(--db-action, #9F4427); stroke: #fff; stroke-width: 2; }
.db-repere-icone circle { fill: #fff; }
.db-repere-etat { margin: 6px 0 0; font-size: 12.5px; color: var(--db-gris); }
.db-repere-etat:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .db-sur-place { transition: none; } }
/* Avertissement doux sous les deux blocs : jamais bloquant, jamais rouge */
.db-surf-avis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 14px; padding: 10px 12px; border-left: 3px solid var(--db-terra); background: var(--db-action-doux); border-radius: 4px; font-size: 13px; line-height: 1.45; color: var(--db-texte); animation: db-apparait .22s cubic-bezier(.2, .7, .2, 1) both; }
.db-surf-avis[hidden] { display: none; }
.db-surf-avis > span { flex: 1 1 220px; min-width: 0; }
.db-surf-avis .db-tuile { font-size: 13.5px; }
@media (prefers-reduced-motion: reduce) {
  .db-surf-picto { transition: none; }
  .db-surf-avis { animation: none; }
  .db-form .db-surface-bloc input[type="range"]::-webkit-slider-thumb { transition: none; }
  .db-form .db-surface-bloc input[type="range"]:hover::-webkit-slider-thumb, .db-form .db-surface-bloc input[type="range"]:active::-webkit-slider-thumb { transform: none; }
}

/* Communes choisies : petites étiquettes retirables (fond blanc bordé, ≈ 30 px) */
.db-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.db-puces:empty { display: none; }
.db-puce {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; max-width: 100%;
  border: 1px solid var(--db-trait); border-radius: 4px; background: #fff; color: var(--db-encre);
  font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s;
}
.db-puce span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-puce svg { width: 10px; height: 10px; flex: none; stroke: var(--db-gris); stroke-width: 1.6; stroke-linecap: round; }
.db-puce:hover { border-color: var(--db-encre); }

/* Secteur recherché (comme le formulaire acheteur du Cockpit) : commune, rayon, carte, communes proches */
.db-secteur-ligne { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 560px) { .db-secteur-ligne { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.db-rayon-valeur { font-weight: 600; color: var(--db-encre); font-variant-numeric: tabular-nums; }
.db-carte { height: 250px; margin: 4px 0 6px; border: 1px solid var(--db-trait); border-radius: 4px; overflow: hidden; background: #F3F5F6; z-index: 0; }
@media (max-width: 560px) { .db-carte { height: 210px; } }
/* Carte « simplifiée » (charte du 17/10/2026) : fond OpenStreetMap adouci, le cuivre du secteur ressort */
.db-carte .leaflet-tile-pane, .db-contact-carte-zone .leaflet-tile-pane { filter: grayscale(.85) contrast(.92) brightness(1.04); }
.db-carte .leaflet-bar a, .db-contact-carte-zone .leaflet-bar a { color: var(--db-encre, #17191B); }
.db-carte .leaflet-bar, .db-contact-carte-zone .leaflet-bar { border-radius: 4px; }
.db-carte .leaflet-bar a:first-child, .db-contact-carte-zone .leaflet-bar a:first-child { border-radius: 4px 4px 0 0; }
.db-carte .leaflet-bar a:last-child, .db-contact-carte-zone .leaflet-bar a:last-child { border-radius: 0 0 4px 4px; }
/* 25/10/2026 : plus de transition sur le tracé (d) : Leaflet redessine les cercles quand la carte se recentre, et le
   rond de sélection glissait depuis l'ancienne position (retour de Vincent sur la carte de Ma recherche). */
.db-aide-ligne { margin: 0 0 12px; font-size: 12px; color: var(--db-aide); }
.db-proches { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.db-proche {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 8px; max-width: 100%;
  border: 1px solid var(--db-trait-case); border-radius: 4px; background: #fff; color: #33383C;
  font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  animation: db-apparait .25s cubic-bezier(.2, .7, .2, 1) both;
}
.db-proche::before { content: "+"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #F1F3F5; color: var(--db-gris); font-size: .8rem; font-weight: 700; line-height: 1; transition: background .15s, color .15s; }
.db-proche small { font-size: .7rem; color: var(--db-aide); }
.db-proche:hover { border-color: var(--db-encre); }
.db-proche:focus-visible { outline: 2px solid var(--db-action); outline-offset: 2px; }
.db-proche.db-choisie { background: #fff; border-color: var(--db-action); box-shadow: inset 0 0 0 1px var(--db-action); color: var(--db-encre); font-weight: 600; }
.db-proche.db-choisie::before { content: "✓"; background: var(--db-action); color: #fff; font-size: .65rem; }
.db-proche[hidden] { display: none; }
.db-proches-plus { height: 30px; padding: 0 8px; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 600; color: var(--db-action-survol); cursor: pointer; }
.db-proches-plus:hover { text-decoration: underline; }
@keyframes db-apparait { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.db-puce { animation: db-apparait .22s cubic-bezier(.2, .7, .2, 1) both; }

/* Budget : ce que coûte vraiment l'achat, calculé en direct */
.db-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 2px 0 0; padding: 9px 12px; border-radius: 4px; background: var(--db-fond); font-size: .85rem; color: var(--db-gris); }
.db-total[hidden] { display: none; }
.db-total small { font-size: 11px; color: var(--db-aide); white-space: nowrap; }
.db-total b { font-size: .95rem; font-weight: 600; color: var(--db-encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-frais { position: relative; margin: 6px 0 0; font-size: 12.5px; color: var(--db-gris); }
.db-frais summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--db-action); font-weight: 600; list-style: none; }
.db-frais summary::-webkit-details-marker { display: none; }
.db-frais summary::before { content: ""; width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 50%; background: radial-gradient(circle, currentColor 1.5px, transparent 2px) center 3px / 3px 3px no-repeat, linear-gradient(currentColor, currentColor) center 6px / 1.5px 5px no-repeat; box-sizing: border-box; }
/* Le détail s'ouvre en infobulle, par-dessus la suite : rien ne bouge dans le formulaire */
.db-frais-bulle {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 8px); width: min(420px, 100%);
  padding: 12px 14px; background: #fff; border: 1px solid var(--db-trait); border-radius: 4px;
  box-shadow: 0 16px 40px rgba(23, 25, 27, .14); color: var(--db-texte);
  transform-origin: 18px 0; animation: db-bulle .2s cubic-bezier(.2, .7, .2, 1) both;
}
.db-frais-bulle::before { content: ""; position: absolute; top: -6px; left: 14px; width: 10px; height: 10px; background: #fff; border-left: 1px solid var(--db-trait); border-top: 1px solid var(--db-trait); transform: rotate(45deg); }
.db-frais-bulle p { margin: 0 0 6px; line-height: 1.5; }
.db-frais-bulle p:last-child { margin-bottom: 0; }
.db-frais-bulle b { font-weight: 600; color: var(--db-encre); }
@keyframes db-bulle { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }

/* E-mail : fin d'adresse proposée, faute de frappe signalée */
.db-email-aide { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 12px; color: var(--db-gris); }
.db-email-aide:empty { display: none; }
.db-email-aide button {
  height: 30px; padding: 0 10px; border: 1px solid var(--db-trait-case); border-radius: 4px; background: #fff; color: #33383C;
  font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; transition: border-color .2s;
  animation: db-apparait .2s cubic-bezier(.2, .7, .2, 1) both;
}
.db-email-aide button:hover { border-color: var(--db-encre); }
.db-email-aide .db-correction { border-color: var(--db-action); color: var(--db-action-survol); font-weight: 600; }

/* Commune : suggestions */
.db-suggestions { display: none; position: absolute; animation: db-apparait .16s ease-out; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--db-trait); border-radius: 4px; box-shadow: 0 16px 40px rgba(23, 25, 27, .12); }
.db-suggestions li { padding: 9px 10px; border-radius: 4px; font-size: .95rem; cursor: pointer; }
.db-suggestions li:hover, .db-suggestions li.db-actif { background: var(--db-action-doux); }

/* Champ oublié : contour rouge, légère secousse, « À renseigner » */
.db-oubli input, .db-oubli select, .db-oubli textarea, .db-oubli .wpcf7-list-item-label { border-color: var(--db-rouge) !important; }
.db-a-renseigner, .db-form .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--db-rouge); }
.db-form .wpcf7-not-valid { border-color: var(--db-rouge) !important; }
.db-secousse, .db-form .db-etape.db-active .db-secousse { animation: db-secousse .32s ease-in-out; animation-delay: 0s; }
@keyframes db-secousse { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* Récapitulatif */
.db-recap { margin: 2px 0 16px; border-top: 1px solid var(--db-trait-pale); }
.db-recap-ligne { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--db-trait-pale); font-size: .9rem; }
.db-recap-libelle { font-size: 12px; color: var(--db-gris); }
.db-recap-valeur { font-weight: 500; color: var(--db-encre); overflow-wrap: anywhere; }
.db-etape.db-active .db-recap-ligne { animation: db-monte .35s cubic-bezier(.2, .7, .2, 1) both; }
.db-recap-ligne:nth-child(2) { animation-delay: .05s !important; } .db-recap-ligne:nth-child(3) { animation-delay: .1s !important; } .db-recap-ligne:nth-child(4) { animation-delay: .15s !important; }
.db-recap-modifier { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--db-action); cursor: pointer; }
.db-recap-modifier:hover { color: var(--db-action-survol); text-decoration: underline; text-underline-offset: 3px; }

.db-mention { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--db-aide); }
.db-mention a { color: var(--db-action); text-underline-offset: 2px; }
.db-mention a:hover { color: var(--db-action-survol); }

/* Navigation et envoi */
.db-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--db-trait-pale); }
.db-envoi { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.db-precedent { padding: 10px 4px; border: 0; background: none; font: inherit; font-size: .95rem; font-weight: 600; color: var(--db-gris); cursor: pointer; }
.db-precedent:hover { color: var(--db-encre); }
.db-suivant, .db-form input[type="submit"] {
  min-height: 46px; padding: 11px 22px; border: 1px solid var(--db-action); border-radius: 4px;
  background: var(--db-action); color: #fff; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.db-suivant:hover, .db-form input[type="submit"]:hover { background: var(--db-action-survol); border-color: var(--db-action-survol); color: #fff; }
.db-suivant:focus-visible, .db-form input[type="submit"]:focus-visible { outline: 2px solid var(--db-action); outline-offset: 3px; }
/* Étape incomplète : gris de la charte, texte toujours lisible ; un appui signale ce qui manque */
.db-suivant.db-grise, .db-form input[type="submit"].db-grise,
.db-suivant.db-grise:hover, .db-form input[type="submit"].db-grise:hover { background: var(--db-grise); border-color: var(--db-grise); color: var(--db-encre); box-shadow: none; opacity: 1; }
/* L'étape est complète : le bouton s'allume d'un petit halo */
.db-suivant.db-pret, .db-form input[type="submit"].db-pret { animation: db-halo .7s ease-out; }
@keyframes db-halo { 0% { box-shadow: 0 0 0 0 rgba(var(--db-action-rgb), .35); } 100% { box-shadow: 0 0 0 10px rgba(var(--db-action-rgb), 0); } }
.db-form .wpcf7-spinner { margin: 0 0 0 8px; }

/* Champs cachés de Contact Form 7 : pas de cadre de « fieldset » visible */
.wpcf7 form:has(.db-form) .hidden-fields-container { display: none; border: 0; margin: 0; padding: 0; }

/* Champ piège pour les robots (invisible pour les personnes) */
.db-pot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Messages de Contact Form 7 (placés par CF7 après le bloc du formulaire) */
.wpcf7 form:has(.db-form) > .wpcf7-response-output { max-width: 640px; margin: 12px auto 0 !important; padding: 10px 12px !important; border: 1px solid #E4E6E7 !important; border-radius: 4px; font-size: .88rem; color: #33383C; background: #fff; }
.wpcf7 form.invalid:has(.db-form) > .wpcf7-response-output, .wpcf7 form.failed:has(.db-form) > .wpcf7-response-output, .wpcf7 form.spam:has(.db-form) > .wpcf7-response-output { border-color: #B42318 !important; }
.wpcf7 form.sent:has(.db-form) > .wpcf7-response-output,
.wpcf7 form.init:has(.db-form) > .wpcf7-response-output,
.wpcf7 form.submitting:has(.db-form) > .wpcf7-response-output,
.wpcf7 form.resetting:has(.db-form) > .wpcf7-response-output,
.wpcf7 form:has(.db-form) > .wpcf7-response-output:empty { display: none; }

/* Merci : coche dessinée */
.db-merci { text-align: center; padding: 18px 4px 6px; }
.db-merci svg { width: 56px; height: 56px; margin: 0 auto 10px; display: block; }
.db-merci circle { fill: none; stroke: var(--db-vert); stroke-width: 2; opacity: .25; }
.db-merci path { fill: none; stroke: var(--db-vert); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.db-merci.db-visible path { animation: db-coche .5s .15s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes db-coche { to { stroke-dashoffset: 0; } }
.db-merci h3 { margin: 0 0 8px; font-family: var(--db-titre); font-size: 1.7rem; font-weight: 360; letter-spacing: -.02em; line-height: 1.2; color: var(--db-encre); }
.db-merci p { margin: 0 auto; max-width: 440px; color: var(--db-gris); font-size: .95rem; }
.db-merci .db-absence { display: flex; gap: 8px; align-items: flex-start; max-width: 440px; margin: 12px auto 0; padding: 10px 12px; border: 1px solid #E4E6E7; border-radius: 4px; background: #fff; color: #33383C; font-size: .88rem; text-align: left; }
.db-merci .db-absence::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: #B7791F; }

@media (prefers-reduced-motion: reduce) {
  .db-form *, .db-form *::before, .db-form *::after { animation: none !important; transition: none !important; }
  .db-merci path, .db-connu-merci svg { stroke-dashoffset: 0; }
}

/* « Comment m'avez-vous connu ? » : cases-boutons à icône au trait du Cockpit (posées par formulaire.js, comme les
   autres choix), une relance adaptée au choix, un merci */
.db-connu-pourquoi { margin: -2px 0 8px; font-size: 12px; color: var(--db-aide); }
.db-connu-precision { margin-top: 8px; animation: db-monte .3s cubic-bezier(.2, .7, .2, 1) both; }
.db-connu-precision[hidden] { display: none; }
.db-connu-precision label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--db-gris); }
.db-connu-merci { display: flex; align-items: center; gap: 6px; min-height: 0; margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--db-vert); }
.db-connu-merci:empty { display: none; }
.db-connu-merci svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: db-coche .45s .05s cubic-bezier(.2, .7, .2, 1) forwards; }

/* En-tête des pages de formulaire (éléments du builder : sur-titre .db-surtitre, titre .db-titre, chapeau .db-chapo).
   Plus doux que les titres des autres pages, accordé au formulaire : sur-titre cuivre entre deux traits qui se dessinent,
   titre un peu plus petit qui monte, chapeau gris dans la police du texte. */
.db-surtitre { margin-bottom: 0 !important; }
.db-surtitre p {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9F4427;
  animation: db-entete .5s cubic-bezier(.2, .7, .2, 1) both;
}
.db-surtitre p::before, .db-surtitre p::after {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55;
  transform: scaleX(0); animation: db-trait .6s .25s cubic-bezier(.2, .7, .2, 1) forwards;
}
.db-surtitre p::before { transform-origin: right; }
.db-surtitre p::after { transform-origin: left; }
.uk-text-left.db-surtitre p::before, .db-surtitre:not(.uk-text-center) p::before { display: none; }
.db-titre {
  margin-top: 10px !important; font-family: var(--dbh-titre, 'Newsreader', Georgia, serif) !important; font-weight: 360 !important;
  font-size: clamp(1.85rem, 1.35rem + 1.9vw, 2.55rem) !important; line-height: 1.15 !important; letter-spacing: -.02em; color: #17191B;
  animation: db-entete .55s .06s cubic-bezier(.2, .7, .2, 1) both;
}
.db-chapo { max-width: 560px; margin-left: auto !important; margin-right: auto !important; margin-top: 12px !important; animation: db-entete .55s .14s cubic-bezier(.2, .7, .2, 1) both; }
.db-chapo, .db-chapo p { font-family: inherit !important; font-size: 1rem !important; font-weight: 400 !important; line-height: 1.6; color: #5B6470 !important; letter-spacing: 0; }
/* Titres des pages de formulaire : Newsreader, jamais la police de titre du thème */
.db-titre :where(h1, h2), h1.db-titre { font-family: inherit; font-weight: inherit; letter-spacing: inherit; }
.db-chapo p { margin: 0; }
@keyframes db-entete { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes db-trait { to { transform: scaleX(1); } }
@media (max-width: 560px) { .db-chapo, .db-chapo p { font-size: .95rem !important; } }
@media (prefers-reduced-motion: reduce) {
  .db-surtitre p, .db-titre, .db-chapo { animation: none; }
  .db-surtitre p::before, .db-surtitre p::after { animation: none; transform: none; }
}

/* Réponses retrouvées d'une visite précédente, critères repris de la page Acheter (« Déjà rempli ») : au niveau des
   notes v12, une ligne sur fond minéral, icône au trait cuivre, texte gris, geste en lien cuivre. Jamais de bandeau
   coloré : ce n'est pas une alerte. */
.db-repris, .db-acheter { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 16px; padding: 11px 14px; border-radius: 4px; background: var(--db-mineral, #F3F4F4); font-size: 13px; line-height: 1.5; color: var(--db-gris, #5B6470); animation: db-monte .3s cubic-bezier(.2, .7, .2, 1) both; }
.db-repris { flex-wrap: wrap; align-items: center; }
.db-note-ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--db-action, #9F4427); }
.db-repris > span { flex: 1 1 220px; min-width: 0; }
.db-repris button { min-height: 32px; margin-left: auto; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--db-action, #9F4427); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(159, 68, 39, .35); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.db-repris button:hover { color: var(--db-action-survol, #873A23); text-decoration-color: currentColor; }
.db-repris button:focus-visible { outline: 2px solid var(--db-action, #9F4427); outline-offset: 2px; }
.db-acheter div { min-width: 0; }
.db-acheter p { margin: 0; overflow-wrap: anywhere; }
.db-acheter .db-acheter-titre { font-weight: 600; color: var(--db-encre, #17191B); }
.db-acheter p + p { margin-top: 2px; }

/* « En savoir plus » : la page s'ouvre dans un panneau, le formulaire reste en place */
.db-panneau { width: min(680px, calc(100vw - 24px)); max-height: min(80vh, 760px); padding: 0; border: 1px solid #E4E6E7; border-radius: 4px; background: #fff; color: #26292C; box-shadow: 0 24px 70px rgba(23, 25, 27, .22); overflow: hidden; }
.db-panneau[open] { display: flex; flex-direction: column; animation: db-panneau .26s cubic-bezier(.2, .7, .2, 1); }
.db-panneau::backdrop { background: rgba(23, 25, 27, .35); }
@keyframes db-panneau { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.db-panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #F0F1F1; }
.db-panneau-tete strong { font-size: 1rem; font-weight: 700; color: #17191B; }
.db-panneau-tete button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: #5B6470; cursor: pointer; }
.db-panneau-tete button:hover { background: #F0F1F1; border-color: #E4E6E7; }
.db-panneau-tete svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.db-panneau-corps { padding: 6px 18px 18px; overflow: auto; font-size: .92rem; }
.db-panneau-attente { color: #8A9096; }
@media (max-width: 560px) { .db-panneau { width: 100vw; max-width: 100vw; max-height: 88vh; margin: auto 0 0; border-radius: 4px 4px 0 0; } }
@media (prefers-reduced-motion: reduce) { .db-panneau[open], .db-repris, .db-acheter { animation: none; } }

/* Page Contact : [debergh_contact] (hors du formulaire : couleurs écrites en clair) */
.db-contact { max-width: 880px; margin: 0 auto; white-space: normal; }   /* l'élément HTML de YOOtheme garde les retours à la ligne : sans ça, une ligne vide décale le formulaire */
.db-contact-infos { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.db-contact-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .db-contact:not(.db-contact-deux) .db-contact-cartes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.db-contact-secteur { grid-column: 1 / -1; }
@media (max-width: 479px) {
  .db-contact-large { grid-column: 1 / -1; }   /* e-mail et horaires lisibles d'un trait sur téléphone */
  .db-contact-boutons .db-bouton { flex: 1 1 100%; justify-content: center; }
}
/* Avec le formulaire : deux colonnes sur grand écran, toute la largeur du conteneur de la page. */
.db-contact-deux { max-width: none; display: grid; gap: 28px; }
.db-contact-deux .db-form { max-width: none; margin: 0; }
/* Haut du formulaire aligné sur les cartes : aucune marge héritée du thème (UIkit « * + … ») ni de Contact Form 7. */
.db-contact-formulaire > *, .db-contact-formulaire .wpcf7 > form, .db-contact-formulaire form > * { margin-top: 0 !important; }
.db-contact-formulaire .hidden-fields-container { display: none; }
/* Zone de lecture d'écran de Contact Form 7 : invisible et hors du flux (sinon la marge UIkit de sa liste, 20 px,
   « traverse » le bloc et décale le formulaire sous les cartes ; constaté le 14/10/2026). */
.wpcf7 .screen-reader-response { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); border: 0; }
.wpcf7 { display: flow-root; }
@media (min-width: 960px) {
  .db-contact-deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
  .db-contact-formulaire { position: sticky; top: 96px; }
}
.db-contact-carte {
  display: flex; flex-direction: column; gap: 2px; padding: 16px; min-width: 0;
  background: #fff; border: 1px solid #E4E6E7; border-radius: 4px; box-shadow: 0 1px 2px rgba(23, 25, 27, .04);
  color: #33383C; text-decoration: none; transition: border-color .2s;
}
a.db-contact-carte:hover { border-color: #17191B; color: #33383C; }
.db-contact-carte svg { width: 22px; height: 22px; margin-bottom: 8px; fill: none; stroke: #9F4427; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.db-contact-lib { font-size: 12px; color: #5B6470; }
.db-contact-carte b { font-size: .98rem; font-weight: 600; color: #17191B; overflow-wrap: anywhere; }
.db-contact-geste { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #9F4427; }
.db-contact-texte { margin-top: 4px; font-size: 12.5px; color: #5B6470; }
.db-contact-absent .db-contact-texte { color: #9F4427; font-weight: 600; }
.db-contact-carte-zone { height: 240px; margin-top: 12px; border: 1px solid #E4E6E7; border-radius: 4px; overflow: hidden; background: #F3F5F6; z-index: 0; }
.db-contact-carte-zone[hidden] { display: none; }
.db-contact-boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.db-contact-boutons.db-centre { justify-content: center; }
/* Boutons écrits dans les contenus ([debergh_contact], pages des communes…) : une action pleine cuivre ; secondaire en
   contour charbon (charte du site, une seule action pleine par zone) */
.db-bouton { display: inline-flex; align-items: center; min-height: 46px; padding: 11px 22px; border: 1px solid #9F4427; border-radius: 4px; background: #9F4427; color: #fff !important; font-weight: 600; text-decoration: none !important; transition: background .2s, border-color .2s, color .2s; }
.db-bouton:hover { background: #873A23; border-color: #873A23; }
.db-bouton:focus-visible { outline: 2px solid #9F4427; outline-offset: 3px; }
.db-bouton-second { background: #fff; border-color: #17191B; color: #17191B !important; }
.db-bouton-second:hover { background: #F3F4F4; border-color: #17191B; }
@media (prefers-reduced-motion: reduce) { .db-contact-carte, .db-bouton { transition: none; } }

/* Pages légales (codes courts [debergh_mentions], [debergh_honoraires], [debergh_confidentialite]) */
.db-legal { max-width: 760px; color: #33383C; }
.db-legal h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.db-legal h2:first-child { margin-top: 0; }
.db-legal p, .db-legal li { line-height: 1.6; }
.db-legal .db-bareme { max-width: 560px; }
.db-legal .db-bareme td:last-child, .db-legal .db-bareme th:last-child { text-align: right; }
.db-a-completer { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; background: #fff; border: 1px solid #E4E6E7; border-radius: 4px; color: #33383C; font-size: .9em; }
.db-a-completer::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #B7791F; }

/* Repères de prix d'une commune : [debergh_marche] */
.db-marche { margin: 8px 0; }
.db-marche-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.db-marche-tuile { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: #fff; border: 1px solid #E4E6E7; border-radius: 4px; }
.db-marche-tuile b { font-family: var(--dbh-titre, 'Newsreader', Georgia, serif); font-size: 1.5rem; font-weight: 300; letter-spacing: -.02em; color: #17191B; font-variant-numeric: tabular-nums; }
.db-marche-tuile span { font-size: 12.5px; color: #5B6470; }
.db-marche-note { margin: 10px 0 0; font-size: 12.5px; color: #5B6470; line-height: 1.6; }

/* Second menu d'une rubrique : [debergh_sous_menu] (14/10/2026). Onglets soulignés, défilement horizontal sur téléphone. */
.db-sous-menu { border-bottom: 1px solid #E4E6E7; }
.db-sous-liens { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; justify-content: center; }
.db-sous-liens::-webkit-scrollbar { display: none; }
.db-sous-liens a { flex: 0 0 auto; padding: 14px 2px 12px; font-size: 13.5px; color: #4A4F53; text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap; }
.db-sous-liens a:hover { color: #17191B; border-bottom-color: #E4E6E7; }
.db-sous-liens a.db-sous-actif { color: #17191B; border-bottom-color: #C15A34; }
@media (max-width: 760px) { .db-sous-liens { justify-content: flex-start; gap: 20px; padding: 0 16px; } }

/* ── Formulaire d'estimation en trois étapes (parcours, 16/10/2026, docs/specs/parcours-estimation.md) ──────────
   Progression discrète, zones masquées, bloc « Ce que j'ai compris de votre projet », choix à modifier sur place,
   question « Votre bien se trouve-t-il à … ? ». Couleurs par les variables du formulaire (cuivre sur la page v12,
   posé par pages/estimation.css). Le bloc peut vivre hors du formulaire (colonne de gauche) : couleurs de repli. */
.db-masque { display: none !important; }
.db-pas { display: flex; gap: 6px 18px; flex-wrap: wrap; margin: 0 0 20px; padding: 0 0 12px; list-style: none; border-bottom: 1px solid var(--db-trait-pale); font-size: 12.5px; color: var(--db-aide); counter-reset: dbpas; }
.db-pas li { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; counter-increment: dbpas; }
.db-pas li::before { content: counter(dbpas); display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--db-trait); border-radius: 50%; font-size: 11px; font-weight: 600; color: var(--db-gris); background: #fff; transition: background .25s, border-color .25s, color .25s; }
.db-pas li + li::after { content: ""; position: absolute; left: -14px; top: 50%; width: 10px; height: 1px; background: var(--db-trait); }
.db-pas li.is-active { color: var(--db-encre); font-weight: 600; }
.db-pas li.is-active::before { border-color: var(--db-action); color: var(--db-action); }
.db-pas li.is-faite { color: var(--db-gris); }
.db-pas li.is-active::before { background: var(--db-action); border-color: var(--db-action); color: #fff; }
.db-pas li.is-faite::before { content: "✓"; background: #fff; border-color: #2F7D57; color: #2F7D57; font-weight: 700; }
.db-recap-prov { display: block; font-size: 11.5px; font-weight: 400; color: var(--db-aide); }
.db-compris-md { margin-left: 8px; font-size: 11.5px; font-weight: 500; color: var(--db-action, #9F4427); }
.db-merci .db-merci-efface { margin-top: 8px; font-size: .88rem; color: var(--db-aide); }
.db-merci .db-merci-note { margin-top: 14px; font-family: 'Caveat', 'Segoe Script', cursive; font-size: 26px; line-height: 1.1; color: var(--db-action); }
.db-intro-parcours { margin: 0 0 16px; font-size: .92rem; line-height: 1.55; color: var(--db-gris); }
.db-intro-change { animation: db-monte .4s cubic-bezier(.2, .7, .2, 1); }
.db-texte-echange { margin: 6px 0 0; font-size: .9rem; line-height: 1.55; color: var(--db-texte); }
.db-form .wpcf7-exclusive-checkbox .wpcf7-list-item-label::before { border-radius: 50%; }
.db-form .wpcf7-exclusive-checkbox input:checked + .wpcf7-list-item-label::before { background: var(--db-action); box-shadow: inset 0 0 0 3px #fff; }

/* Boutons de choix (Oui / Une autre commune, choix d'une réponse à modifier) : jamais de pilule */
.db-oui-non { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.db-choix-reponse { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; margin: 8px 0 4px; }
.db-choix-bouton {
  min-height: 44px; padding: 8px 12px; border: 1px solid var(--db-trait-case, #D5D8DB); border-radius: 4px; background: #fff;
  font: inherit; font-size: .9rem; font-weight: 500; line-height: 1.3; color: var(--db-encre, #17191B); text-align: left; cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.db-choix-bouton:hover { border-color: var(--db-encre, #17191B); }
.db-choix-bouton:focus-visible { outline: 2px solid var(--db-action, #9F4427); outline-offset: 2px; }
.db-choix-bouton[aria-pressed="true"] { border-color: var(--db-action, #9F4427); background: #fff; box-shadow: inset 0 0 0 1px var(--db-action, #9F4427); font-weight: 600; }

/* « Ce que j'ai compris de votre projet » */
.db-compris { margin: 0 0 18px; color: var(--db-texte, #33383C); font-size: .9rem; }
.db-compris summary { display: block; cursor: pointer; list-style: none; }
.db-compris summary::-webkit-details-marker { display: none; }
.db-compris-titre { display: block; padding-bottom: 10px; border-bottom: 1px solid var(--db-encre, #17191B); font-family: var(--dbh-titre, 'Newsreader', Georgia, serif); font-weight: 400; font-size: 1.2rem; letter-spacing: -.01em; color: var(--db-encre, #17191B); }
.db-compris-ligne { display: none; }
.db-compris-liste { margin: 0; }
.db-compris-rep { padding: 10px 0; border-bottom: 1px solid var(--db-trait, #E4E6E7); }
.db-compris-rep dt { font-size: 12px; color: var(--db-gris, #5B6470); }
.db-compris-valeur { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 2px 0 0; font-weight: 600; color: var(--db-encre, #17191B); }
.db-compris-modifier, .db-recap-modifier { flex: none; min-height: 32px; padding: 0 2px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--db-action, #9F4427); cursor: pointer; }
.db-compris-modifier:hover { text-decoration: underline; }
.db-compris-choix { display: none; margin: 0; }
.db-compris-rep.is-ouvert .db-compris-choix { display: block; animation: db-monte .3s cubic-bezier(.2, .7, .2, 1) both; }
.db-compris-rep.is-ouvert .db-choix-reponse { grid-template-columns: minmax(0, 1fr); }
.db-compris-commune { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--db-gris, #5B6470); }
/* Téléphone, ou page sans colonne de gauche : une ligne dépliable entre deux filets */
.db-compris-memoire { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--db-aide, #8A9096); }
.db-compris.is-ligne { margin: 0 0 20px; border-top: 1px solid var(--db-encre, #17191B); border-bottom: 1px solid var(--db-trait, #E4E6E7); }
.db-compris.is-ligne summary { padding: 8px 0; }
.db-compris.is-ligne .db-compris-titre { display: none; }
.db-compris.is-ligne .db-compris-ligne { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 40px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--db-encre, #17191B); }
.db-compris.is-ligne .db-compris-ligne span { flex: 1; min-width: 0; }
.db-compris.is-ligne .db-compris-ligne u { flex: none; text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--db-action, #9F4427); }
.db-compris.is-ligne > :not(summary) { margin-bottom: 0; }
.db-compris.is-ligne .db-compris-memoire { margin-bottom: 14px; }
.db-compris.is-ligne .db-compris-rep.is-ouvert .db-choix-reponse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* Récapitulatif du parcours : une ligne par réponse, choix dépliés sur place */
.db-recap-parcours .db-recap-ligne { grid-template-columns: 104px minmax(0, 1fr) auto; }
.db-recap-choix { grid-column: 1 / -1; display: none; }
.db-recap-ligne.is-ouvert .db-recap-choix { display: block; }
@media (max-width: 480px) { .db-recap-parcours .db-recap-ligne { grid-template-columns: 86px minmax(0, 1fr) auto; gap: 8px; } }
/* Téléphone : la progression tient sur une ligne (seule l'étape en cours garde son nom), le bouton ne se coupe pas */
.db-form-parcours .db-suivant { margin-left: auto; white-space: nowrap; }
@media (max-width: 480px) {
  .db-pas { flex-wrap: nowrap; gap: 14px; }
  .db-pas li:not(.is-active) { font-size: 0; gap: 0; }
  .db-pas li:not(.is-active)::before { font-size: 11px; }
  .db-form-parcours .db-precedent[style*="hidden"] { display: none; }
  .db-form-parcours .db-suivant { padding: 11px 16px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .db-intro-change, .db-compris-rep.is-ouvert .db-compris-choix { animation: none; } .db-pas li::before { transition: none; } }

/* ── Aide au clic (17/10/2026, retour de Vincent : « le maximum en cliquant, pas en tapant, surtout sur téléphone ») ──
   Petites tuiles à 4 px (charte B), jamais de pilule, cibles de 44 px, retour à la ligne propre sur téléphone. Communes
   fréquentes, ordres de grandeur, suggestions de « Racontez-moi votre bien » rangées par thème (onglets soulignés)
   AVANT le champ qui reçoit la phrase (retour du 17/10 après-midi), micro de dictée dans le coin du champ. */
.db-raccourcis { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.db-tuile {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; margin: 0; padding: 8px 12px;
  border: 1px solid var(--db-trait-case, #D5D8DB); border-radius: 4px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--db-encre, #17191B); text-align: left;
  overflow-wrap: anywhere; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, background .15s, color .15s;
}
.db-tuile:hover { border-color: var(--db-encre, #17191B); }
.db-tuile:focus-visible { outline: 2px solid var(--db-action, #9F4427); outline-offset: 2px; }
.db-tuile[aria-pressed="true"] { border-color: var(--db-action, #9F4427); background: #fff; box-shadow: inset 0 0 0 1px var(--db-action, #9F4427); font-weight: 600; }
.db-tuile[aria-pressed="true"]::before {
  content: ""; flex: none; width: 14px; height: 14px; background: var(--db-action, #9F4427);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%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' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: db-choisi .28s cubic-bezier(.3, 1.6, .5, 1);
}

/* « Racontez-moi votre bien » : thèmes en onglets soulignés (un seul ouvert : compact sur téléphone), tuiles dessous */
.db-aide-redac { margin: 0 0 10px; min-width: 0; }
.db-aide-redac-titre { margin: 0 0 4px; font-size: 12.5px; line-height: 1.45; color: var(--db-gris, #5B6470); }
.db-aide-redac-titre[hidden] { display: none; }
.db-aide-onglets {
  display: flex; gap: 18px; margin: 0 0 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--db-trait-pale, #F0F1F1);
}
.db-aide-onglets::-webkit-scrollbar { display: none; }
.db-aide-onglet {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 -1px; padding: 10px 0 8px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--db-gris, #5B6470); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.db-aide-onglet:hover { color: var(--db-encre, #17191B); }
.db-aide-onglet[aria-selected="true"] { color: var(--db-encre, #17191B); border-bottom-color: var(--db-action, #9F4427); }
.db-aide-onglet:focus-visible { outline: 2px solid var(--db-action, #9F4427); outline-offset: -2px; }
.db-aide-nb { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--db-action, #9F4427); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.db-aide-tuiles { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.db-aide-tuiles .db-tuile { animation: db-apparait .22s cubic-bezier(.2, .7, .2, 1) both; }
.db-aide-redac.is-attente .db-aide-onglets, .db-aide-redac.is-attente .db-aide-tuiles { display: none; }
/* Page Contact (tours de parole en colonne) : les suggestions restent avant le champ ; la phrase sur la dictée passe
   sous la ligne d'état du message */
.dbh-ct-champ > .db-micro-info { order: 1; }
.dbh-ct-champ > .db-aide-redac { margin-bottom: 4px; }

/* Dictée : micro au trait dans le coin bas-droit du champ ; écoute = pulsation cuivre et « Je vous écoute… » */
.db-dictee { position: relative; display: block; }
.db-dictee > textarea { min-height: 88px; }
.db-form .db-dictee textarea.db-avec-micro { padding-right: 56px; }
.db-form .db-dictee:has(.is-ecoute) textarea.db-avec-micro { padding-bottom: 44px; }
.db-micro {
  position: absolute; right: 5px; bottom: 5px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--db-gris, #5B6470); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color .15s, background .15s;
}
.db-micro:hover { color: var(--db-action, #9F4427); background: var(--db-action-doux, #F7ECE7); }
.db-micro:focus-visible { outline: 2px solid var(--db-action, #9F4427); outline-offset: 1px; }
.db-micro svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.db-micro.is-ecoute { color: #fff; background: var(--db-action, #9F4427); animation: db-ecoute 1.4s ease-out infinite; }
@keyframes db-ecoute { 0% { box-shadow: 0 0 0 0 rgba(159, 68, 39, .42); } 100% { box-shadow: 0 0 0 12px rgba(159, 68, 39, 0); } }
.db-micro-etat { position: absolute; right: 56px; bottom: 17px; z-index: 2; padding: 0 4px; background: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: #9F4427; pointer-events: none; }
.db-micro-etat:empty { display: none; }
.db-micro-info { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--db-aide, #8A9096); }
/* Dictée « libellé » (data-dictee="libelle", page Contact, maquette « Contact — v15 ») : bouton « Dicter » en toutes
   lettres à droite du libellé ; en écoute, texte et contour cuivre, micro qui respire. */
.db-libelle-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; min-width: 0; }
.db-libelle-ligne > label { margin: 0; }
.db-dicter {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 14px;
  border: 1px solid var(--db-trait-case, #D5D8DB); border-radius: 4px; background: #fff;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--db-encre, #17191B); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: border-color .15s, color .15s;
}
.db-dicter:hover { border-color: var(--db-encre, #17191B); }
.db-dicter:focus-visible { outline: 2px solid var(--db-action, #9F4427); outline-offset: 2px; }
.db-dicter svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.db-dicter.is-ecoute { border-color: var(--db-action, #9F4427); color: var(--db-action, #9F4427); }
.db-dicter.is-ecoute svg { animation: db-respire 1.2s ease-in-out infinite; }
@keyframes db-respire { 50% { opacity: .35; } }
.db-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  .db-tuile, .db-micro, .db-dicter { transition: none; }
  .db-micro.is-ecoute { box-shadow: 0 0 0 3px rgba(159, 68, 39, .28); }
  .db-dicter.is-ecoute svg { animation: none; }
}
.db-aide-onglets.is-apres { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.db-aide-onglets.is-avant { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
.db-aide-onglets.is-avant.is-apres { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

/* « Recevoir le guide par e-mail » (pages guides, 29/10/2026) : un écran, champ et bouton sur une ligne. Le bouton est
   secondaire (blanc, contour charbon) : l'action pleine de la zone reste « Télécharger le guide ». */
.db-guide-mail { max-width: 520px; }
.db-guide-question { display: block; margin: 0 0 8px; font-weight: 600; font-size: 15px; color: var(--db-encre); }
.db-guide-question small { font-weight: 400; color: var(--db-aide); }
.db-guide-ligne { display: flex; gap: 8px; align-items: stretch; }
.db-guide-ligne .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; }
.db-form.db-guide-mail input[type="submit"] { flex: none; min-height: 44px; margin: 0; padding: 10px 16px; background: #fff; color: var(--db-encre); border: 1px solid var(--db-encre); box-shadow: none; }
.db-form.db-guide-mail input[type="submit"]:hover { background: var(--db-encre); border-color: var(--db-encre); color: #fff; }
.db-guide-mail .db-case-seule { margin-top: 12px; }
.db-guide-mail .db-mention { margin-top: 8px; }
.db-guide-merci { text-align: left; padding: 0; }
.db-guide-merci svg { width: 36px; height: 36px; }
@media (max-width: 479px) { .db-guide-ligne { flex-direction: column; } .db-form.db-guide-mail input[type="submit"] { width: 100%; } }