/* Formulaires du simulateur (tableau, rénovation, dépannage) — même design que le formulaire Borne
   (simulateur/borne-irve.html), repris de la page devis des fiches produit. Moteur : /js/sim-wizard.js */

/* Titre de la prestation au-dessus du formulaire (petit titre souligné, remonté vers le logo sur PC) */
.pq-eyebrow-wrap { display: flow-root; background: #f1f1f4; padding: .75rem 1.25rem 0; }
.pq-eyebrow-wrap[hidden] { display: none !important; }
.section-eyebrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; font-size: .875rem; font-weight: 700; letter-spacing: .25em; color: rgba(0,0,0,.4); margin-bottom: 32px; text-align: center; }
.section-eyebrow::after { content: ""; display: block; width: 64px; height: 1px; background: rgba(0,0,0,.2); }
.form-eyebrow { position: relative; z-index: 2; margin-top: 0; }

.pq-wrap { display: flex; gap: 3rem; padding: 0 var(--edg-gutter) 3rem; align-items: flex-start; background: #f1f1f4; }
/* Ratio resserré (demande explicite, retour design, même changement que le simulateur Borne) : 57 % / 43 %
   au lieu de 62 % / 38 %, le configurateur avait trop peu de place face à la photo */
.pq-photo-box { flex: 0 0 57%; position: sticky; top: 120px; height: 760px; background: #e3e3e8; border-radius: 24px; overflow: hidden; }
.pq-photo-box[hidden] { display: none !important; }
.pq-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pq-form-box { flex: 1; min-width: 0; }
/* Panneau détaché en flex-column, hauteur FIXE alignée sur la photo (demande explicite : la photo ne doit
   jamais bouger/changer de taille) — si le contenu d'une étape dépasse, le panneau défile en interne
   (overflow-y:auto) au lieu de grandir et de désaligner les deux colonnes. Bouton "Suivant" collé en bas
   (margin-top:auto) : une étape courte ne laisse pas un vide entre les questions et le bouton, le vide reste
   sous le bouton. Pas touché sur mobile (règle responsive du CLAUDE.md). */
@media (min-width: 901px) {
  .pq-form-box { display: flex; flex-direction: column; height: 760px; overflow-y: auto; background: #fbfbfc; border-radius: 20px; box-shadow: 0 1px 2px rgba(20,20,30,.03), 0 14px 36px rgba(20,20,30,.05); padding: 2rem 2.5rem; }
  .pq-next { margin-top: auto; flex-shrink: 0; }
}

.pq-step { display: none; }
.pq-step.is-current { display: block; }
/* Indicateur de progression (demande explicite, retour design) : "Étape X sur Y" + barre fine, toujours visible */
.pq-progress { margin-bottom: .75rem; }
.pq-progress-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; font-size: .8rem; font-weight: 600; color: #5f5f64; }
.pq-progress-track { height: 4px; border-radius: 999px; background: #e5e5ea; overflow: hidden; }
.pq-progress-fill { height: 100%; border-radius: 999px; background: var(--rub, #178bff); transition: width .4s cubic-bezier(.16,1,.3,1); }
.pq-progress[hidden] { display: none; }
.pq-title { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: #1d1d1f; margin: 0 0 2rem; }
/* Sous-titre d'étape optionnel (cfg.steps[].sub) : remonté sous le titre au lieu de laisser le
   grand espace pensé pour un titre seul. */
.pq-title:has(+ .pq-step-sub) { margin-bottom: .6rem; }
.pq-step-sub { font-size: .95rem; color: #5f5f64; line-height: 1.5; margin: 0 0 1.5rem; }
.pq-block { margin-bottom: 1rem; }
.pq-block[hidden] { display: none !important; }
.pq-label { font-size: 1rem; font-weight: 700; color: #1d1d1f; margin: 0 0 .6rem; }
.pq-hint { font-size: .875rem; color: #5f5f64; line-height: 1.5; margin: -.6rem 0 1rem; }
.pq-options { display: flex; flex-direction: column; gap: .6rem; }
/* Variante "en ligne" : pour des choix courts (Oui/Non/Je ne sais pas, Particulier/Professionnel...)
   qui n'ont pas besoin d'une liste empilée pleine largeur — demande explicite. */
.pq-options-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: .6rem; }
.pq-options-row .pq-opt { width: auto; flex: 1 1 auto; justify-content: center; }
/* Choix multiples (travaux, équipements...) : grille 2 colonnes plutôt qu'une longue colonne empilée
   qui ressemble à une liste déroulante (demande explicite) */
.pq-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem; }
.pq-options-grid .pq-opt { width: auto; }
/* Choix = petites cartes (icône + titre + description + radio) quand une icône est fournie, sinon simple ligne
   texte + radio — lignes ~18 % plus hautes (demande explicite, retour design) */
.pq-opt { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; padding: .6rem .9rem; border-radius: 12px; border: 1.5px solid #d2d2d7; background: #fff; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 500; color: #1d1d1f; transition: border-color .15s ease, background .15s ease; }
.pq-opt[hidden] { display: none !important; }
.pq-opt.is-selected { border-color: #178bff; background: rgba(23,139,255,.07); }
.pq-opt > span:last-child { margin-left: auto; }
.pq-opt-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: #f1f1f4; color: #5f5f64; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; }
.pq-opt-icon svg { width: 21px; height: 21px; }
.pq-opt.is-selected .pq-opt-icon { background: var(--rub, #178bff); color: var(--rub-text, #fff); }
.pq-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.pq-opt-title { font-size: .95rem; font-weight: 700; color: #1d1d1f; }
.pq-opt-desc { font-size: .8rem; font-weight: 400; color: #5f5f64; line-height: 1.4; }
.pq-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #d2d2d7; background: #fff; flex-shrink: 0; transition: border .15s ease; }
.pq-opt.is-selected .pq-radio { border: 5px solid #178bff; }
/* Choix compacts (ex. taille de logement T1-T5) : petits carrés en ligne, comme "murs à percer" sur la fiche
   borne, plutôt qu'une longue liste de lignes empilées pour quelques valeurs courtes (demande explicite) */
.pq-walls { display: flex; gap: .5rem; }
.pq-wall { flex: 1; text-align: center; padding: .9rem 0; border-radius: 12px; border: 1.5px solid #d2d2d7; background: #fff; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; color: #1d1d1f; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.pq-wall[hidden] { display: none !important; }
.pq-wall.is-selected { border-color: #1d1d1f; background: #e8e8ed; }
@media (min-width: 901px) { .pq-block:has(> .pq-walls) { display: flex; flex-direction: column; justify-content: center; flex: 1; min-height: 0; } }
/* Question "texte libre" (ex. décrire un problème "Autre") */
.pq-block > textarea, .pq-block > input[type=number] { width: 100%; padding: .9rem 1.1rem; border: 1.5px solid #d2d2d7; border-radius: 12px; font: inherit; font-size: .9rem; color: #1d1d1f; background: #fff; outline: none; resize: vertical; transition: border-color .15s ease; }
.pq-block > textarea:focus, .pq-block > input[type=number]:focus { border-color: #1d1d1f; }
/* Choix multiples : case carrée au lieu du rond */
.pq-opt[data-multi] .pq-radio { border-radius: 5px; }
.pq-opt[data-multi].is-selected .pq-radio { border: 1.5px solid #178bff; background: #178bff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/12px no-repeat; }
.pq-next.pq-continue { display: none; } /* « Continuer » (choix multiples) : mobile uniquement — le sélecteur double passe devant .pq-next { display: block } */
.pq-back { display: flex; align-items: center; gap: .4rem; background: none; border: none; cursor: pointer; padding: 0; margin-bottom: 1.5rem; font: inherit; font-size: .875rem; font-weight: 600; color: #1d1d1f; }
.pq-back[hidden] { display: none; }

.pq-fields { display: flex; flex-direction: column; gap: .85rem; }
.pq-fields label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .3rem; color: #1d1d1f; }
.pq-fields input[type=text], .pq-fields input[type=tel], .pq-fields input[type=email], .pq-fields textarea { width: 100%; padding: .6rem 1rem; border: 1.5px solid #d2d2d7; border-radius: 6px; font-family: inherit; font-size: .9rem; color: #1d1d1f; background: #fff; outline: none; transition: border-color .15s; }
.pq-fields input:focus, .pq-fields textarea:focus { border-color: #000; }
.pq-row { display: flex; gap: 1rem; }
.pq-row > div { flex: 1; }
.pq-optional { font-weight: 400; color: #5f5f64; }
.pq-address { position: relative; }
.pq-address-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: #fff; border: 1px solid #e5e5ea; border-radius: 6px; max-height: 220px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.pq-address-list[hidden] { display: none; }
.pq-address-list button { display: block; width: 100%; text-align: left; padding: .65rem 1rem; background: none; border: none; cursor: pointer; font: inherit; font-size: .875rem; color: #1d1d1f; }
.pq-address-list button:hover { background: #f1f1f4; }
.pq-consent { display: flex !important; align-items: flex-start; gap: .65rem; cursor: pointer; font-weight: 400 !important; }
.pq-consent input { width: auto; margin-top: 3px; }
.pq-consent span { font-size: .875rem; color: #5f5f64; }
.pq-consent a { text-decoration: underline; color: #1d1d1f; }
.pq-error { font-size: .875rem; color: #c0392b; margin: 0; }
.pq-error:empty { display: none; }
.pq-field-error { font-size: .875rem; color: #c0392b; margin: .35rem 0 0; }
.pq-field-error:empty { display: none; }
.pq-invalid { border-color: #c0392b !important; }
/* Champs obligatoires : astérisque rouge, mention en haut, et ce qui manque sous le bouton Envoyer */
.pq-req { color: #c0392b; font-weight: 700; }
.pq-required-note { font-size: .875rem; color: #5f5f64; margin: 0 0 .25rem; }

.pq-next { display: block; width: 100%; text-align: center; font: inherit; font-size: 1rem; font-weight: 700; padding: 1.15rem 0; background: #178bff; color: #fff; border: none; border-radius: 999px; margin-top: 1.25rem; cursor: pointer; }
.pq-next:disabled { opacity: .5; cursor: not-allowed; }
.pq-next[hidden] { display: none; }

.pq-box { background: #fff; padding: .85rem 1.1rem; border-radius: 12px; margin-bottom: 1rem; }
.pq-box[hidden] { display: none; }
.pq-recap-pre { margin-bottom: 1rem; }
.pq-box-title { font-size: .875rem; font-weight: 600; color: #0071e3; margin: 0 0 .5rem; }
.pq-recap { display: flex; flex-direction: column; gap: .3rem; }
.pq-recap div { display: flex; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.pq-recap span:first-child { color: #5f5f64; }
.pq-recap span:last-child { font-weight: 600; color: #1d1d1f; text-align: right; }
.pq-step[data-step="success"] .pq-title { margin-bottom: 28px; }
.pq-thanks { font-size: 1rem; color: #5f5f64; line-height: 1.6; margin: 0 0 28px; }
.pq-estimate { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .2rem; }
.pq-estimate-value { font-size: 1.15rem; font-weight: 800; color: #1d1d1f; }
.pq-estimate-note { font-size: .875rem; color: #5f5f64; margin: 0; }
.pq-ref { font-size: .875rem; color: #5f5f64; }
.pq-ref[hidden] { display: none; }

@media (max-width: 900px) {
  .form-eyebrow { margin-top: -40px; }
  .section-eyebrow { margin-bottom: 40px; }
  .pq-wrap { flex-direction: column; padding: 0 1.25rem 4rem; gap: 1.5rem; }
  .pq-photo-box { flex: 0 0 auto; position: relative; top: 0; width: 100%; height: 320px; }
  .pq-form-box { width: 100%; }
  .pq-title { font-size: 1.6rem; margin-bottom: 1.25rem; }
  /* Mobile : une question à la fois dans chaque étape ; un choix fait passer à la suivante */
  .pq-step[data-kind="questions"] .pq-block { display: none; margin-bottom: 0; }
  .pq-step[data-kind="questions"] .pq-block.is-current-q { display: block; }
  .pq-form-box.is-questions > .pq-next { display: none; } /* le bouton principal ; « Continuer » (choix multiples) reste visible */
  .pq-next.pq-continue { display: block; margin-top: 1.25rem; }
  /* Choix en petits carrés avec 6 valeurs ou plus (ex. surface « 30 à 50 m² ») : 2 lignes de 3 au lieu d'une seule ligne où le texte est écrasé */
  .pq-walls:has(> .pq-wall:nth-child(6)) { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .pq-walls:has(> .pq-wall:nth-child(6)) .pq-wall { padding: .95rem .25rem; white-space: nowrap; }
}