/* ============================================================
   Page "Évaluer mon potentiel solaire" — styles dédiés
   ============================================================ */

.psf-hero{
  padding: 100px 20px 18px;
  text-align: center;
  background: linear-gradient(160deg, #f7f9fc 0%, #eef2f9 100%);
}
.psf-hero h1{
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: #0D4584;
  margin-bottom: 10px;
}
.psf-hero p{
  color: #4a5568;
  font-size: 0.95rem;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.5;
}

.psf-wrap{
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

/* ── Barre de progression ── */
.psf-progress{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 26px;
  gap: 0;
}
.psf-progress-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 96px;
  gap: 8px;
  position: relative;
  cursor: default;
}
.psf-progress-step.is-clickable{ cursor: pointer; }
.psf-progress-circle{
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d7dee8;
  color: #8a94a6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.psf-progress-step.is-active .psf-progress-circle{
  background: #0D4584;
  border-color: #0D4584;
  color: #fff;
  transform: scale(1.12);
}
.psf-progress-step.is-done .psf-progress-circle{
  background: #efa906;
  border-color: #efa906;
  color: #fff;
}
.psf-progress-label{
  font-size: 12px;
  font-weight: 600;
  color: #8a94a6;
  white-space: nowrap;
}
.psf-progress-step.is-active .psf-progress-label{ color: #0D4584; }
.psf-progress-step.is-done .psf-progress-label{ color: #b8860b; }
.psf-progress-line{
  width: 60px;
  height: 2px;
  background: #d7dee8;
  margin: 17px 6px 0;
  position: relative;
  overflow: hidden;
}
.psf-progress-line::after{
  content: '';
  position: absolute;
  inset: 0;
  background: #efa906;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.psf-progress-line.is-filled::after{ transform: scaleX(1); }

/* ── Carte formulaire ── */
.psf-card{
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(13,69,132,0.08), 0 1px 4px rgba(13,69,132,0.04);
  padding: 28px 32px;
  position: relative;
}

.psf-step-panel{ display: none; }
.psf-step-panel.is-visible{
  display: block;
  animation: psf-fade-in .4s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
@keyframes psf-fade-in{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

.psf-step-title{
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0D4584;
  margin-bottom: 6px;
  text-align: center;
}
.psf-step-sub{
  text-align: center;
  color: #6b7688;
  font-size: 0.92rem;
  margin-bottom: 20px;
}

/* Étape 1 — cartes type de projet */
.psf-cards-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.psf-project-card{
  border: 2px solid #e6eaf1;
  border-radius: 14px;
  padding: 22px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: #fafbfd;
  transition: border-color .25s ease, transform .2s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .25s ease;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  animation: psf-card-in .45s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
@keyframes psf-card-in{
  to{ opacity: 1; transform: translateY(0); }
}
.psf-project-card i{
  font-size: 26px;
  color: #0D4584;
  transition: color .25s ease, transform .25s ease;
}
.psf-project-card svg{
  width: 30px;
  height: 30px;
  color: #0D4584;
  transition: color .25s ease, transform .25s ease;
}
.psf-project-card.is-selected svg{ color: #efa906; transform: scale(1.1); }
.psf-project-card span{
  font-size: 13px;
  font-weight: 600;
  color: #33415c;
}
.psf-project-card:hover{
  border-color: #f3c860;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(239,169,6,0.15);
}
.psf-project-card:active{ transform: translateY(-1px) scale(0.97); }
.psf-project-card.is-selected{
  border-color: #efa906;
  background: #fff8ea;
  box-shadow: 0 8px 20px rgba(239,169,6,0.22);
}
.psf-project-card.is-selected i{ color: #efa906; transform: scale(1.1); }

/* Étape 2 — surface + adresse */
.psf-surface-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.psf-surface-btn{
  border: 2px solid #e6eaf1;
  border-radius: 12px;
  padding: 18px 10px;
  background: #fafbfd;
  font-weight: 700;
  font-size: 14px;
  color: #33415c;
  cursor: pointer;
  transition: border-color .25s ease, transform .2s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .25s ease;
}
.psf-surface-btn:hover{ border-color: #f3c860; transform: translateY(-2px); }
.psf-surface-btn.is-selected{
  border-color: #efa906;
  background: #fff8ea;
  color: #0D4584;
  box-shadow: 0 8px 20px rgba(239,169,6,0.22);
}

/* Champs de formulaire */
.psf-field{
  margin-bottom: 20px;
  position: relative;
}
.psf-field label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #33415c;
  margin-bottom: 6px;
}
.psf-field label .req{ color: #efa906; }
.psf-field input,
.psf-field textarea{
  width: 100%;
  border: 2px solid #e6eaf1;
  border-radius: 10px;
  padding: 13px 16px;
  font-size: 15px;
  font-family: inherit;
  color: #1a2333;
  background: #fafbfd;
  transition: border-color .2s ease, background-color .2s ease;
}
.psf-field input:focus,
.psf-field textarea:focus{
  outline: none;
  border-color: #0D4584;
  background: #fff;
}
.psf-field-error{
  display: none;
  color: #d64545;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}
.psf-field.has-error input,
.psf-field.has-error textarea{ border-color: #d64545; }
.psf-field.has-error .psf-field-error{ display: block; }

/* Autocomplétion adresse (Nominatim), même pattern que la carte ACC */
.autocomplete-list{
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(13,69,132,0.15);
  overflow-y: auto;
  max-height: 220px;
  z-index: 20;
  display: none;
}
.autocomplete-list.visible{ display: block; }
.autocomplete-item{
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
  color: #1a2333;
  transition: background .12s ease;
}
.autocomplete-item:last-child{ border-bottom: none; }
.autocomplete-item:hover{ background: #f4f8ff; }

.psf-row-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Message optionnel repliable */
.psf-message-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0D4584;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 16px;
  background: none;
  border: none;
  padding: 0;
}
.psf-message-toggle i{ transition: transform .25s ease; font-size: 11px; }
.psf-message-toggle.is-open i{ transform: rotate(90deg); }
.psf-message-toggle svg{ width: 14px; height: 14px; transition: transform .25s ease; }
.psf-message-toggle.is-open svg{ transform: rotate(90deg); }
.psf-message-body{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.psf-message-body.is-open{ max-height: 160px; }

/* Honeypot — invisible pour les humains, visible pour les bots */
.psf-honeypot{
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Navigation entre étapes */
.psf-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
}
.psf-btn-back{
  background: none;
  border: none;
  color: #6b7688;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s ease;
}
.psf-btn-back svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.psf-btn-back:hover{ color: #0D4584; }
.psf-btn-primary svg{
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.psf-btn-primary{
  background: #efa906;
  color: #fff;
  border: none;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 30px;
  border-radius: 50px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color .25s ease, transform .2s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow .25s ease;
  box-shadow: 0 8px 20px rgba(239,169,6,0.3);
}
.psf-btn-primary:hover{ background: #c27f08; transform: translateY(-2px); }
.psf-btn-primary:disabled{ opacity: .6; cursor: not-allowed; transform: none; }
.psf-btn-label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.psf-btn-primary .psf-spinner{ display: none; }
.psf-btn-primary.is-loading .psf-spinner{ display: inline-block; }
.psf-btn-primary.is-loading .psf-btn-label{ display: none; }

.psf-spinner{
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: psf-spin .7s linear infinite;
}
@keyframes psf-spin{ to{ transform: rotate(360deg); } }

/* Erreur globale de soumission */
.psf-submit-error{
  display: none;
  background: #fdecec;
  border: 1px solid #f3b8b8;
  color: #a02a2a;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 16px;
}
.psf-submit-error.is-visible{ display: block; }

/* ── État succès ── */
.psf-success{
  display: none;
  text-align: center;
  padding: 20px 0;
}
.psf-success.is-visible{ display: block; }
.psf-success-check{
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #0D4584;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  animation: psf-pop .5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.psf-success-check i{ color: #fff; font-size: 32px; }
.psf-success-check svg{ color: #fff; width: 40px; height: 40px; }
@keyframes psf-pop{
  from{ transform: scale(0); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
.psf-success h2{
  font-family: 'Ubuntu', sans-serif;
  color: #0D4584;
  font-size: 1.4rem;
  margin-bottom: 10px;
}
.psf-success p{ color: #4a5568; font-size: 0.98rem; line-height: 1.6; }

/* ── Bloc réassurance ── */
.psf-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
  text-align: center;
}
.psf-stat-num{
  font-family: 'Ubuntu', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #efa906;
}
.psf-stat-label{
  font-size: 13px;
  color: #6b7688;
  font-weight: 600;
  margin-top: 4px;
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce){
  .psf-step-panel.is-visible,
  .psf-project-card,
  .psf-success-check{
    animation: none !important;
  }
  .psf-project-card{
    opacity: 1 !important;
    transform: none !important;
  }
  .psf-progress-circle,
  .psf-project-card,
  .psf-surface-btn,
  .psf-btn-primary{
    transition: none !important;
  }
}

/* ── Responsive ── */
@media (max-width: 720px){
  .psf-card{ padding: 28px 20px; }
  .psf-cards-grid{ grid-template-columns: repeat(2, 1fr); }
  .psf-surface-grid{ grid-template-columns: 1fr; }
  .psf-row-2{ grid-template-columns: 1fr; }
  .psf-progress-line{ width: 32px; }
  .psf-progress-label{ display: none; }
  .psf-progress-step{ width: auto; }
  .psf-stats{ grid-template-columns: 1fr; gap: 28px; }
  .psf-hero{ padding: 90px 16px 30px; }
  .psf-hero h1{ font-size: 1.6rem; }
  .psf-btn-primary{
    padding: 12px 22px;
    font-size: 14px;
  }
  .psf-btn-primary svg{
    width: 18px;
    height: 18px;
  }
}