/* DEBERGH.IMMO — aide à la saisie (aide-saisie.js, 24/10/2026) : suggestions à toucher, en groupes l'un sous l'autre
   (maquette « Contact — v15 ») : titre du groupe à gauche, suggestions à droite ; l'un sous l'autre quand c'est étroit
   (téléphone, fenêtre « Vous avez ce bien ? », conversation de la fiche d'un bien). Charte B : arrondi 4 px, jamais de
   pilule ; choisie = contour et fond cuivre doux (jamais de texte barré). Mode clair uniquement. Les onglets du jeu
   « bien » (estimation) restent dans formulaire.css. Chargée avec formulaire.css et sur les pages des biens. */
.db-aide-groupes { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; min-width: 0; }
.db-aide-intro { margin: 0; font-size: 14px; line-height: 1.5; color: #5B6470; }
.db-aide-intro[hidden] { display: none; }
.db-aide-corps { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.db-aide-g { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px 14px; align-items: start; min-width: 0; }
.db-aide-t { margin: 10px 0 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: #5B6470; }
.db-aide-puces { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.db-aide-puce {
  display: inline-flex; align-items: center; min-height: 40px; max-width: 100%; margin: 0; padding: 6px 14px;
  border: 1px solid #D5D8DB; border-radius: 4px; background: #FFFFFF;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; color: #17191B; text-align: left;
  overflow-wrap: anywhere; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, background-color .2s;
  animation: db-aide-apparait .22s cubic-bezier(.2, .7, .2, 1) both;
}
.db-aide-puce:hover { border-color: #17191B; }
.db-aide-puce:focus-visible { outline: 2px solid #008776; outline-offset: 2px; }
.db-aide-puce[aria-pressed="true"] { border-color: #008776; background: #FFFFFF; color: #008776; box-shadow: inset 0 0 0 1px #008776; }
/* Groupe sans titre visible (précision d'une seule ligne) : les suggestions seules */
.db-aide-sans-titres .db-aide-g { grid-template-columns: minmax(0, 1fr); }
.db-aide-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; }
/* Étroit (zone de moins de 500 px, posé par le script) et téléphone : titre au-dessus des suggestions */
.db-aide-etroit .db-aide-g { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.db-aide-etroit .db-aide-t { margin: 0; }
@media (max-width: 639px) {
  .db-aide-g { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .db-aide-t { margin: 0; }
}
/* Tuiles à pictogramme, « Autres caractéristiques », champ libre (maquette Contact du 31/10/2026) : titres au-dessus */
.db-aide-avec-tuiles .db-aide-corps { gap: 16px; }
.db-aide-avec-tuiles .db-aide-g { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.db-aide-avec-tuiles .db-aide-t { margin: 0; font-size: 15px; font-weight: 600; color: #17191B; }
.db-aide-tuiles-ic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.db-aide-tuiles-ic.db-aide-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Quatre par rangée : coche dans le coin, le libellé garde toute la largeur (jamais coupé au milieu d'un mot) */
.db-aide-tuiles-ic.db-aide-n4 .db-aide-tuile { gap: 10px; padding: 8px 12px; }
.db-aide-tuiles-ic.db-aide-n4 .db-aide-ck { top: 6px; right: 6px; width: 16px; height: 16px; margin-top: 0; }
.db-aide-tuile {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; min-width: 0; margin: 0; padding: 8px 40px 8px 16px;
  border: 1px solid #D5D8DB; border-radius: 4px; background: #FFFFFF;
  font: inherit; font-size: 15px; font-weight: 500; line-height: 1.25; color: #17191B; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s, background-color .2s, box-shadow .2s;
  animation: db-aide-apparait .22s cubic-bezier(.2, .7, .2, 1) both;
}
.db-aide-tuile:hover { border-color: #17191B; }
.db-aide-tuile:focus-visible { outline: 2px solid #008776; outline-offset: 2px; }
.db-aide-ic { flex: none; width: 26px; height: 26px; color: #33383C; }
.db-aide-tuile-nom { min-width: 0; overflow-wrap: normal; hyphens: manual; }
.db-aide-ck { position: absolute; right: 12px; top: 50%; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: #008776; color: #FFFFFF; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.db-aide-tuile[aria-pressed="true"] { border-color: #008776; background: #FFFFFF; box-shadow: inset 0 0 0 1px #008776; }
.db-aide-tuile[aria-pressed="true"] .db-aide-ic { color: #008776; }
.db-aide-tuile[aria-pressed="true"] .db-aide-ck { opacity: 1; transform: none; }
.db-aide-plus-bt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: flex-start; min-height: 44px; min-width: 240px; margin: 0; padding: 0 18px; border: 1px solid #D5D8DB; border-radius: 4px; background: #FFFFFF; font: inherit; font-size: 14px; font-weight: 500; color: #17191B; cursor: pointer; transition: border-color .2s; }
.db-aide-plus-bt:hover { border-color: #17191B; }
.db-aide-plus-bt:focus-visible { outline: 2px solid #008776; outline-offset: 2px; }
.db-aide-plus-signe { font-size: 18px; line-height: 1; transition: transform .3s; }
.db-aide-plus-bt[aria-expanded="true"] .db-aide-plus-signe { transform: rotate(45deg); }
.db-aide-plus { display: flex; flex-direction: column; gap: 14px; }
.db-aide-plus[hidden] { display: none; }
.db-aide-saisie { width: 100%; box-sizing: border-box; min-height: 44px; margin: 0; padding: 8px 14px; border: 1px solid #D5D8DB; border-radius: 4px; background: #FFFFFF; font: inherit; font-size: 16px; color: #17191B; }
.db-aide-saisie:focus { outline: none; border-color: #17191B; box-shadow: 0 0 0 3px rgba(23, 25, 27, .06); }
@media (max-width: 639px) {
  .db-aide-tuiles-ic, .db-aide-tuiles-ic.db-aide-n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .db-aide-g-tuiles:first-child .db-aide-tuiles-ic.db-aide-n3 { grid-template-columns: minmax(0, 1fr); }
  .db-aide-tuile { gap: 10px; min-height: 46px; padding: 6px 34px 6px 12px; font-size: 14px; }
  .db-aide-ic { width: 22px; height: 22px; }
  .db-aide-ck { right: 8px; }
  .db-aide-plus-bt { align-self: stretch; }
}
/* Pas à pas (31/10/2026, choix de Vincent) : une question à la fois, traits d'avancement, question en titre */
.db-aide-en-pas .db-aide-g { grid-template-columns: minmax(0, 1fr); gap: 8px; }   /* titre masqué : jamais de colonne vide à gauche */
.db-aide-en-pas .db-aide-t { margin: 0; font-size: 15px; font-weight: 600; color: #17191B; }
.db-aide-en-pas .db-aide-corps { gap: 12px; animation: db-aide-apparait .25s cubic-bezier(.2, .7, .2, 1) both; }
.db-aide-pas-ligne { display: flex; align-items: center; gap: 14px; }
.db-aide-pas-traits { flex: 1 1 auto; display: flex; gap: 6px; min-width: 0; }
.db-aide-pas-traits span { flex: 1; height: 3px; border-radius: 2px; background: #DDE0E2; transition: background .3s; }
.db-aide-pas-traits span.fait, .db-aide-pas-traits span.ici { background: #008776; }
.db-aide-pas-traits span.ici { opacity: .55; }
.db-aide-pas-q { margin: 0; font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-weight: 360; font-size: 24px; line-height: 1.2; color: #17191B; }
.db-aide-pas-n { flex: none; order: 2; font-size: 12px; color: #5B6470; font-variant-numeric: tabular-nums; }
.db-aide-pas-q { margin-top: 2px; }
.db-aide-en-pas .db-aide-tuiles-ic .db-aide-tuile { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 88px; padding: 14px 34px 12px 14px; }
.db-aide-en-pas .db-aide-tuiles-ic .db-aide-ic { width: 28px; height: 28px; }
.db-aide-en-pas .db-aide-tuiles-ic .db-aide-ck { top: 12px; margin-top: 0; }
.db-aide-en-pas .db-aide-tuiles-ic.db-aide-n4 .db-aide-ck { top: 8px; right: 8px; }
.db-aide-pas-nav { display: contents; }
.db-aide-pas-prec { order: 1; }
.db-aide-pas-suiv { order: 3; }
.db-aide-pas-prec, .db-aide-pas-suiv { flex: none; min-height: 32px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: #5B6470; cursor: pointer; }
.db-aide-pas-suiv { color: #008776; }
.db-aide-pas-prec:hover { color: #17191B; }
.db-aide-pas-suiv:hover { color: #006F61; }
.db-aide-pas-prec[hidden], .db-aide-pas-suiv[hidden] { display: none; }
@media (max-width: 639px) {
  .db-aide-pas-q { font-size: 21px; }
  .db-aide-en-pas .db-aide-tuiles-ic .db-aide-tuile { min-height: 76px; }
}
@keyframes db-aide-apparait { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .db-aide-puce, .db-aide-tuile, .db-aide-en-pas .db-aide-corps { animation: none; transition: none; }
}