/* ==========================================================================
   Configurateur de projet — grandes cartes cliquables, pensé d'abord pour le mobile
   ========================================================================== */

.cfg { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--section); }
.cfg-wrap { max-width: calc(880px + var(--gutter) * 2); }
.cfg-head .headline { font-size: clamp(1.875rem, 1.4rem + 2vw, 3rem); }
.cfg-lead { margin-top: var(--s2); color: var(--muted); font-size: var(--fs-lead); max-width: 44ch; }

/* ---- Barre de progression */
.cfg-progress { margin-top: var(--s5); height: 4px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.cfg-progress-bar { height: 100%; width: 16.66%; border-radius: 4px; background: var(--grad-gres); transition: width 420ms var(--ease-out); }
.cfg-progress-label { margin-top: var(--s1); font-size: var(--fs-small); font-weight: 500; color: var(--muted); }

/* ---- Étapes */
.cfg-form { margin-top: var(--s4); }
.cfg-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.cfg-step[hidden] { display: none; }
.cfg-legend { padding: 0; margin-bottom: var(--s1); }
.cfg-step-title { font-family: var(--font-display); font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.cfg-step-title:focus { outline: none; }
.cfg-hint { color: var(--muted); font-size: var(--fs-small); margin-bottom: var(--s4); }
.cfg-optional { font-weight: 400; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .cfg-step:not([hidden]) { animation: cfg-in 380ms var(--ease-out); }
}
@keyframes cfg-in { from { opacity: 0; transform: translateY(10px); } }

/* ---- Grandes cartes (choix multiples) */
.cfg-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .cfg-cards { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 900px) { .cfg-cards { grid-template-columns: repeat(4, 1fr); } }
/* Groupes de l'étape 1 : même cartes, un espace plus large entre chaque groupe */
.cfg-groups { display: grid; gap: 32px; }
/* « Suivant » désactivé tant que l'étape 1 n'a pas de réponse */
.cfg-nav [data-cfg-next]:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; transform: none; }
.cfg-card { position: relative; display: block; cursor: pointer; }
.cfg-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cfg-card-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 118px;
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg);
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.cfg-icon { width: 32px; height: 32px; color: var(--gres); flex: none; }
.cfg-card-label { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; color: var(--ink); }
.cfg-check {
  position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--bg); color: transparent;
  transition: background-color 180ms, border-color 180ms, color 180ms;
}
.cfg-check .icon { width: 14px; height: 14px; }
.cfg-card:hover .cfg-card-in { border-color: #aeaeb2; }
.cfg-card input:checked + .cfg-card-in { border-color: var(--gres); background: #fbf4f2; box-shadow: 0 0 0 1px var(--gres); }
.cfg-card input:checked + .cfg-card-in .cfg-check { background: var(--gres); border-color: var(--gres); color: #fff; }
.cfg-card input:focus-visible + .cfg-card-in { outline: 3px solid var(--focus); outline-offset: 2px; }
.cfg-card:active .cfg-card-in { transform: scale(0.98); }

.cfg-cards[hidden], .cfg-card[hidden], .cfg-sub[hidden], .cfg-note[hidden] { display: none; }

/* Petites cartes (styles préférés) */
.cfg-cards--sm .cfg-card-in { min-height: 96px; gap: 10px; padding: 14px 12px; }
.cfg-cards--sm .cfg-icon { width: 28px; height: 28px; }

/* Cartes de choix unique (étapes 3 et 5) : icône à gauche, texte, coche ronde à droite */
.cfg-cards--choice { grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 480px) { .cfg-cards--choice { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cfg-cards--choice { grid-template-columns: repeat(3, 1fr); } }
.cfg-cards--choice .cfg-card-in { flex-direction: row; align-items: center; min-height: 64px; padding: 12px 44px 12px 14px; gap: 12px; }
.cfg-cards--choice .cfg-icon { width: 26px; height: 26px; }
.cfg-cards--choice .cfg-check { top: 50%; transform: translateY(-50%); }
@media (min-width: 480px) { .cfg-cards--three { grid-template-columns: repeat(3, 1fr); } }

/* Pastille de texte à la place d'une icône (ex. « Anah ») */
.cfg-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; height: 32px;
  color: var(--gres);
  font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: 0.02em; line-height: 1;
}

/* Précisions de l'étape 1 (type de bâtiment, transformation) */
.cfg-detail {
  margin-top: var(--s4); padding: var(--s3); border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line-soft);
}
.cfg-detail[hidden], [data-cfg-not-audit][hidden], [data-cfg-audit-vente][hidden], .cfg-q-sub[hidden] { display: none; }
.cfg-detail + .cfg-detail { margin-top: var(--s2); }
.cfg-detail--link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; font-size: var(--fs-small); color: var(--ink-2); }
.cfg-detail--link[hidden] { display: none; }
.cfg-detail .cfg-card-in { background: var(--bg); }
.cfg-q-sub { margin: var(--s3) 0 var(--s1); font-size: var(--fs-small); color: var(--muted); }
.cfg-q-title + .cfg-q-sub { margin-top: calc(var(--s1) * -1); }
@media (prefers-reduced-motion: no-preference) {
  .cfg-detail:not([hidden]) { animation: cfg-in 380ms var(--ease-out); }
}

/* Note contextuelle (ex. rénovation énergétique) */
.cfg-note {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: var(--s3); padding: 14px 16px;
  border-radius: 14px; background: #fbf4f2; color: var(--ink-2); font-size: var(--fs-small);
}
.cfg-note .icon { width: 22px; height: 22px; color: var(--gres); flex: none; margin-top: 1px; }

/* ---- Styles (étiquettes) et pastilles (choix unique) */
.cfg-sub { margin-top: var(--s5); }
.cfg-sub-title, .cfg-q-title { font-weight: 600; margin-bottom: var(--s2); }
.cfg-tags, .cfg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cfg-chips[hidden] { display: none; }
.cfg-tag, .cfg-chip { position: relative; cursor: pointer; }
.cfg-tag input, .cfg-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cfg-tag span, .cfg-chip span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); font-size: 0.9375rem; font-weight: 500; color: var(--ink-2);
  transition: background-color 180ms, color 180ms, border-color 180ms;
}
.cfg-tag:hover span, .cfg-chip:hover span { border-color: #aeaeb2; }
.cfg-tag input:checked + span, .cfg-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.cfg-tag input:focus-visible + span, .cfg-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.cfg-chip-icon { width: 18px; height: 18px; }
.cfg-q + .cfg-q { margin-top: var(--s4); }

/* ---- Adresse + carte */
.cfg-address { position: relative; }
.cfg .field input:not([type='checkbox']), .cfg .field textarea {
  width: 100%; min-height: 52px; padding: 0.8rem 1rem; font-size: 1rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
}
.cfg .field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.cfg .field input:focus-visible, .cfg .field textarea:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px rgba(142, 52, 36, 0.15); }
.cfg .field { display: grid; gap: 0.4rem; margin-bottom: var(--s3); }
.cfg .field[hidden] { display: none; }
.cfg .field label { font-size: var(--fs-small); font-weight: 600; }
.cfg-suggest {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin-top: 4px; padding: 6px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.3);
}
.cfg-suggest[hidden] { display: none; }
.cfg-suggest li {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 8px 12px; border-radius: 10px; cursor: pointer; font-size: 0.9375rem;
}
.cfg-suggest li .icon { width: 18px; height: 18px; color: var(--gres); flex: none; }
.cfg-suggest li[aria-selected='true'], .cfg-suggest li:hover { background: var(--surface); }
.cfg-suggest small { color: var(--muted); }
.cfg-map { height: 260px; margin-top: var(--s2); border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft); }
.cfg-map[hidden] { display: none; }
.cfg-source { margin-top: var(--s2); font-size: var(--fs-xs); color: var(--muted); }
.cfg-pin {
  width: 22px; height: 22px; border-radius: 50% 50% 50% 0;
  background: var(--gres); border: 3px solid #fff; transform: rotate(-45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* ---- Récapitulatif « Voici votre projet » */
.cfg-recap { border: 1px solid var(--line-soft); border-radius: 20px; background: var(--surface); overflow: hidden; margin-bottom: var(--s4); }
.cfg-recap-block { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-soft); }
.cfg-recap-block:last-child { border-bottom: 0; }
.cfg-recap-title { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.cfg-recap-value { grid-column: 1; font-weight: 500; overflow-wrap: anywhere; }
.cfg-recap-value.is-empty { color: var(--muted); font-weight: 400; font-style: italic; }
.cfg-recap-edit {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  min-height: 44px; padding: 0 12px; border: 0; background: none;
  color: var(--gres); font-weight: 600; font-size: var(--fs-small); cursor: pointer;
}
.cfg-recap-edit:hover { text-decoration: underline; }

/* ---- Photos */
.cfg-photos { margin-bottom: var(--s4); }
.cfg-photos .cfg-hint { margin-bottom: var(--s2); }
.cfg-drop {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 72px; padding: 16px; border: 1.5px dashed #aeaeb2; border-radius: 16px;
  font-weight: 600; color: var(--ink-2); cursor: pointer; transition: border-color 180ms, background-color 180ms;
}
.cfg-drop:hover { border-color: var(--gres); background: #fbf4f2; }
.cfg-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cfg-drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.cfg-drop-icon { width: 22px; height: 22px; color: var(--gres); }
.cfg-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: var(--s2); }
.cfg-thumbs li { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--surface); }
.cfg-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.cfg-thumbs .is-loading { display: grid; place-items: center; font-size: var(--fs-xs); color: var(--muted); }
.cfg-thumb-remove {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer;
}
.cfg-thumb-remove .icon { width: 16px; height: 16px; }

/* ---- Navigation (Précédent / Suivant), collée en bas de l'écran sur mobile */
.cfg-nav {
  display: flex; gap: 10px; justify-content: space-between; align-items: center;
  margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line-soft);
}
.cfg-nav [data-cfg-next], .cfg-nav [data-cfg-submit] { margin-left: auto; }
.cfg-nav .btn[hidden] { display: none; }
.cfg-nav .is-skip { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
@media (max-width: 639px) {
  .cfg-nav {
    position: sticky; bottom: 0; z-index: 5;
    margin-inline: calc(var(--gutter) * -1); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .cfg-nav .btn--lg { min-height: 52px; padding-inline: 1.25rem; }
  .cfg-nav [data-cfg-next], .cfg-nav [data-cfg-submit] { flex: 1; }
}