/* ==========================================================================
   SANISERVE — Formulaire de devis pompe à chaleur (multi-étapes)
   S'appuie sur variables.css. Page : /devis/pompe-a-chaleur/
   ========================================================================== */

.pac-app { margin-top: var(--space-md); }

/* --- Progression --- */
.pac-progress { margin-bottom: var(--space-md); scroll-margin-top: 90px; }
.pac-progress-text { font-weight: 700; color: var(--color-primary); margin: 0 0 0.5rem; font-size: var(--fs-small); }
:root[data-theme="dark"] .pac-progress-text { color: var(--color-on-primary); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pac-progress-text { color: var(--color-on-primary); }
}
.pac-bar { height: 8px; border-radius: 999px; background: var(--color-surface-tint); overflow: hidden; }
.pac-bar > span { display: block; height: 100%; width: 0; background: var(--color-copper); border-radius: 999px; transition: width 0.3s ease; }
.pac-dots { display: none; margin: 0.9rem 0 0; padding: 0; list-style: none; gap: 0.4rem; }
.pac-dots li { flex: 1 1 0; min-width: 0; }
.pac-dot {
  width: 100%; min-width: 0; display: flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-ink-faint);
  font: inherit; font-size: 0.8rem; font-weight: 700; text-align: left; cursor: default;
}
.pac-dot b {
  flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-tint); color: var(--color-ink-soft); font-size: 0.75rem;
}
.pac-dot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pac-dot.is-done { cursor: pointer; color: var(--color-ink); }
.pac-dot.is-done b { background: var(--color-success); color: #fff; }
.pac-dot.is-done:hover { border-color: var(--color-primary); }
.pac-dot.is-current { border-color: var(--color-copper); color: var(--color-ink); }
.pac-dot.is-current b { background: var(--color-copper); color: #fff; }
@media (min-width: 900px) { .pac-dots { display: flex; } }

/* --- Étapes --- */
.pac-step { animation: pac-in 0.25s ease; }
.pac-step[hidden] { display: none; }
@keyframes pac-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pac-step { animation: none; } .pac-bar > span { transition: none; } }
.pac-step-title { font-size: var(--fs-h2); margin: 0 0 0.4rem; outline: none; scroll-margin-top: 90px; }
.pac-step-intro { color: var(--color-ink-soft); margin-top: 0; }

/* --- Questions --- */
.pac-q {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); padding: var(--space-sm) var(--space-sm) 0.4rem;
  margin: 0 0 var(--space-sm); min-width: 0;
}
.pac-q[hidden] { display: none; }
.pac-q legend { font-weight: 700; padding: 0 0.4rem; font-size: 1rem; line-height: 1.35; max-width: 100%; }
.pac-num { color: var(--color-copper); }
.pac-req { color: var(--color-error); }
.pac-hint { margin: 0.2rem 0 0.7rem; font-size: var(--fs-small); color: var(--color-ink-faint); }
.pac-note { margin: 0.8rem 0; font-size: var(--fs-small); color: var(--color-ink-soft); }
.pac-error { color: var(--color-error); font-size: var(--fs-small); font-weight: 700; margin: 0.3rem 0 0.6rem; }
.pac-error[hidden] { display: none; }
.pac-q.has-error { border-color: var(--color-error); }
.pac-q input.is-invalid, .pac-q .is-invalid { border-color: var(--color-error); }
.pac-subq { margin-top: 0.4rem; }
.pac-sublabel { font-weight: 700; font-size: var(--fs-small); margin: 0 0 0.4rem; }

/* --- Cases à cocher / boutons radio présentés en tuiles --- */
.pac-choices { display: grid; gap: 0.55rem; grid-template-columns: 1fr; margin-bottom: 0.6rem; }
@media (min-width: 620px) {
  .pac-choices { grid-template-columns: 1fr 1fr; }
  .pac-choices.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .pac-choices.cols-4 { grid-template-columns: repeat(4, 1fr); }
}
.pac-choice {
  position: relative; display: flex; align-items: center; gap: 0.7rem;
  margin: 0; padding: 0.7rem 0.8rem; min-height: 48px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); cursor: pointer;
  font-weight: 400; font-size: 0.98rem; line-height: 1.3; color: var(--color-ink);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pac-choice:hover { border-color: var(--color-primary); }
.pac-choice input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; pointer-events: none;
}
.pac-box {
  flex: none; width: 22px; height: 22px; border-radius: 5px;
  border: 2px solid var(--color-border-strong); background: var(--color-surface);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pac-box::after {
  content: ""; width: 6px; height: 11px; margin-top: -2px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0);
  transition: transform 0.12s ease;
}
.pac-choice input:checked ~ .pac-box { background: var(--color-copper); border-color: var(--color-copper); }
.pac-choice input:checked ~ .pac-box::after { transform: rotate(45deg) scale(1); }
.pac-choice:has(input:checked) { border-color: var(--color-copper); background: rgba(182, 112, 47, 0.09); }
.pac-choice input:focus-visible ~ .pac-box { outline: 3px solid var(--color-primary-light); outline-offset: 2px; }

/* --- Photos --- */
.pac-photo { padding: 0.7rem 0; border-top: 1px dashed var(--color-border); }
.pac-photo:first-of-type { border-top: 0; }
.pac-photo-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.pac-photo-label { font-weight: 700; font-size: 0.95rem; }
.pac-photo-btn { margin: 0; padding: 0.5rem 0.9rem; font-size: 0.9rem; }
.pac-file { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pac-file:focus-visible + * , .pac-photo-btn:focus-within { outline: 3px solid var(--color-primary-light); }
.pac-photo-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.pac-photo-list:empty { display: none; }
.pac-photo-list li {
  display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%;
  background: var(--color-surface-tint); border-radius: 999px; padding: 0.2rem 0.3rem 0.2rem 0.7rem; font-size: 0.85rem;
}
.pac-photo-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; }
.pac-photo-list button {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--color-surface); color: var(--color-ink); font-size: 1rem; line-height: 1;
}
.pac-photo-list button:hover { background: var(--color-error); color: #fff; }

/* --- Navigation --- */
.pac-nav { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: space-between; margin-top: var(--space-md); }
.pac-nav .btn { justify-content: center; min-height: 48px; }
.pac-nav .btn[hidden] { display: none; }
#pac-next, #pac-submit { margin-left: auto; }
@media (max-width: 520px) {
  .pac-nav { flex-direction: column-reverse; }
  .pac-nav .btn { width: 100%; }
  #pac-next, #pac-submit { margin-left: 0; }
}
.pac-final-note { margin-top: 0.9rem; }
.pac-final-note[hidden] { display: none; }
.pac-form-error { margin-top: var(--space-sm); }
.pac-form-error p { margin: 0; }

.pac-section .form-success { margin-top: var(--space-md); }

/* --- Infobulle d'arrivée (redirection depuis /devis/) --- */
.pac-banner {
  display: flex; gap: 0.8rem; align-items: flex-start;
  margin-top: var(--space-sm); padding: 0.9rem 1rem;
  border: 1px solid var(--color-info); border-left-width: 5px; border-radius: var(--radius-md);
  background: rgba(25, 77, 98, 0.08);
}
.pac-banner[hidden] { display: none; }
.pac-banner p { margin: 0; }
.pac-banner-icon {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--color-info); color: #fff; font-weight: 700; font-style: italic;
  display: inline-flex; align-items: center; justify-content: center;
}
:root[data-theme="dark"] .pac-banner-icon { background: var(--color-primary-light); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pac-banner-icon { background: var(--color-primary-light); }
}