@charset "utf-8";
/* ==========================================================================
   Klymair · parcours d'estimation, une question par écran
   Chargé par estimation/index.php par-dessus refonte.css, dont il reprend les
   variables. Écrit pour le pouce d'abord : une colonne, des cibles hautes, une
   action au premier tap. Les paliers élargissent ensuite la mise en page.
   ========================================================================== */

.pq{
  --pq-barre-h:56px;
  --pq-rayon:16px;
  --pq-ombre:0 1px 2px rgba(23,24,28,.05),0 8px 24px -12px rgba(23,24,28,.12);
  --pq-ombre-active:0 2px 4px rgba(46,134,232,.12),0 12px 32px -12px rgba(46,134,232,.35);
  max-width:960px;
  margin:0 auto;
  /* L'en-tête du site est en position fixe : le parcours doit lui laisser sa
     hauteur, puis celle de sa propre barre de progression. */
  padding:calc(var(--tete) + var(--bandeau) + var(--pq-barre-h) + 20px) var(--marge) 64px;
  min-height:70vh;
}

.pq-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- barre de progression ---------- */

.pq-barre{
  position:fixed;
  top:calc(var(--tete) + var(--bandeau));
  left:0;right:0;
  z-index:40;
  display:flex;
  align-items:center;
  gap:12px;
  height:var(--pq-barre-h);
  padding:0 var(--marge);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--filet);
}

.pq-retour{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:36px;height:36px;
  margin-left:-6px;
  padding:0;
  border:0;border-radius:50%;
  background:transparent;
  color:var(--encre);
  cursor:pointer;
  transition:background .18s var(--ease-doux);
}
.pq-retour svg{width:18px;height:18px}
.pq-retour:hover{background:var(--gris)}
.pq-retour[hidden]{display:none}

.pq-barre__piste{
  flex:1 1 auto;
  height:6px;
  border-radius:999px;
  background:var(--filet);
  overflow:hidden;
}

.pq-barre__jauge{
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--bleu-fonce),var(--bleu) 60%,var(--cyan));
  transition:width .45s var(--ease);
}

.pq-barre__compteur{
  flex:0 0 auto;
  font-family:var(--titre);
  font-size:13px;
  font-weight:600;
  color:var(--encre);
  font-variant-numeric:tabular-nums;
}
.pq-barre__total{color:var(--texte);font-weight:500}

/* ---------- l'écran ---------- */

.pq-scene{position:relative}

.pq-ecran{display:none}
.pq-ecran[data-actif]{display:block;animation:pq-entree .38s var(--ease) both}
.pq-ecran[data-sortant]{display:block;animation:pq-sortie .18s var(--ease-doux) both;pointer-events:none}

@keyframes pq-entree{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:none}
}
@keyframes pq-sortie{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translate3d(0,-10px,0)}
}

.pq-ecran__surtitre{
  margin:0 0 8px;
  font-family:var(--titre);
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bleu);
  text-align:center;
}

.pq-ecran__question{
  margin:0 0 10px;
  font-family:var(--titre);
  font-size:clamp(23px,5.6vw,36px);
  font-weight:600;
  line-height:1.22;
  letter-spacing:-.02em;
  text-align:center;
  text-wrap:balance;
}

.pq-ecran__aide{
  margin:0 auto 24px;
  max-width:52ch;
  font-size:15px;
  line-height:1.55;
  color:var(--texte);
  text-align:center;
  text-wrap:pretty;
}

/* ---------- les cartes de réponse ---------- */

.pq-cartes{
  display:grid;
  gap:10px;
  grid-template-columns:1fr;
}

.pq-carte{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:76px;
  padding:12px 44px 12px 12px;
  border:1.5px solid var(--filet);
  border-radius:var(--pq-rayon);
  background:#fff;
  box-shadow:var(--pq-ombre);
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s var(--ease-doux),box-shadow .22s var(--ease-doux),transform .18s var(--ease);
}

.pq-carte:hover{border-color:#C9D6E6}
.pq-carte:active{transform:scale(.985)}
.pq-carte:focus-visible{outline:3px solid rgba(46,134,232,.35);outline-offset:2px}

.pq-carte[aria-checked="true"]{
  border-color:var(--bleu);
  box-shadow:var(--pq-ombre-active);
}

.pq-carte__croquis{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:72px;height:58px;
  border-radius:10px;
  background:var(--gris);
  overflow:hidden;
}
.pq-carte__croquis img{
  width:100%;height:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
}

.pq-carte__texte{display:flex;flex-direction:column;gap:3px;min-width:0}

.pq-carte__label{
  font-family:var(--titre);
  font-size:16px;
  font-weight:600;
  line-height:1.25;
  /* Pas de césure : « plain-pied » coupé en bout de ligne se lit mal. */
  hyphens:none;
  overflow-wrap:break-word;
}

.pq-carte__detail{
  font-size:13.5px;
  line-height:1.45;
  color:var(--texte);
}

.pq-carte__coche{
  position:absolute;
  top:50%;right:14px;
  transform:translateY(-50%) scale(.6);
  display:grid;place-items:center;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--bleu);
  color:#fff;
  opacity:0;
  transition:opacity .18s var(--ease-doux),transform .24s var(--ease);
}
.pq-carte__coche svg{width:14px;height:14px}
.pq-carte[aria-checked="true"] .pq-carte__coche{opacity:1;transform:translateY(-50%) scale(1)}

/* Écran à plus de quatre réponses : deux colonnes, cartes verticales, détail
   réservé aux écrans larges pour ne pas noyer le pouce sous le texte. */
.pq-ecran--dense .pq-cartes{grid-template-columns:repeat(2,1fr);gap:10px}
.pq-ecran--dense .pq-carte{
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-height:0;
  padding:16px 12px 14px;
  text-align:center;
}
.pq-ecran--dense .pq-carte__croquis{width:100%;height:76px;background:transparent}
.pq-ecran--dense .pq-carte__texte{align-items:center}
.pq-ecran--dense .pq-carte__label{font-size:15px}
.pq-ecran--dense .pq-carte__detail{display:none}
.pq-ecran--dense .pq-carte__coche{top:10px;right:10px;transform:scale(.6)}
.pq-ecran--dense .pq-carte[aria-checked="true"] .pq-carte__coche{transform:scale(1)}

/* ---------- la carte à précision (24/09/2026) ----------
   « Plus de 3 pièces », « Plus de 35 m² », « Plus de 2,50 m » : la carte
   ouvre, sous la grille, un champ court suivi de son unité. */

.pq-precision{
  max-width:320px;
  margin:18px auto 0;
}
.pq-precision[hidden]{display:none}
.pq-precision__saisie{
  display:flex;
  align-items:center;
  gap:10px;
}
.pq-precision__saisie input{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--titre);
  font-size:18px;
  font-weight:600;
  text-align:center;
}
.pq-precision__unite{
  flex:0 0 auto;
  font-family:var(--titre);
  font-size:15px;
  font-weight:600;
  color:var(--texte);
}
.pq-precision .pq-bouton{margin-top:14px}

/* ---------- écrans de message (aiguillages) ---------- */

.pq-ecran--message{text-align:center;padding:8px 0}
.pq-message__marque{
  display:grid;place-items:center;
  width:56px;height:56px;
  margin:0 auto 18px;
  border-radius:50%;
  background:rgba(46,134,232,.1);
  color:var(--bleu-fonce);
}
.pq-message__marque svg{width:28px;height:28px}
.pq-message__rassurance{
  max-width:46ch;
  margin:0 auto 26px;
  padding:14px 18px;
  border-radius:12px;
  background:var(--gris);
  font-size:15px;
  color:var(--encre);
}

/* ---------- hors zone (30/09/2026) ----------
   Le parcours s'arrête au premier écran. La liste d'attente se lit comme un
   encadré sous le message, le retour au code postal reste discret. */

.pq-attente{
  max-width:420px;
  margin:22px auto 0;
  padding:18px 18px 16px;
  border-radius:14px;
  background:var(--gris);
  text-align:left;
}
.pq-attente__question{
  margin:0 0 12px;
  font-family:var(--titre);
  font-size:16px;
  font-weight:600;
  color:var(--encre);
}
.pq-attente .pq-bouton{margin-top:14px}
.pq-attente__mention{
  margin:10px 0 0;
  font-size:13px;
  color:var(--texte);
}
.pq-attente__confirmation{
  margin:0;
  font-size:15px;
  color:var(--encre);
}
.pq-attente__confirmation[hidden]{display:none}

/* ---------- saisies ---------- */

.pq-formulaire{
  display:grid;
  gap:14px;
  grid-template-columns:1fr;
  margin-bottom:18px;
}

.pq-champ{display:flex;flex-direction:column;gap:6px}
.pq-champ--large{grid-column:1/-1}

.pq-champ__label{
  font-family:var(--titre);
  font-size:14px;
  font-weight:600;
}
.pq-champ__facultatif{color:var(--texte);font-weight:500}

.pq-champ input,
.pq-champ textarea{
  width:100%;
  padding:14px 16px;
  border:1.5px solid var(--filet);
  border-radius:12px;
  background:#fff;
  font-family:var(--corps);
  font-size:16px; /* 16 px minimum : en dessous, iOS zoome au focus */
  color:var(--encre);
  transition:border-color .18s var(--ease-doux),box-shadow .18s var(--ease-doux);
}
.pq-champ textarea{resize:vertical;min-height:88px}
.pq-champ input:focus,
.pq-champ textarea:focus{
  outline:0;
  border-color:var(--bleu);
  box-shadow:0 0 0 4px rgba(46,134,232,.14);
}
.pq-champ--erreur input{border-color:#D93A3A}

.pq-champ__erreur{
  margin:0;
  font-size:13.5px;
  color:#B3261E;
  min-height:0;
}
.pq-champ__erreur:empty{display:none}
.pq-champ__erreur--serveur{
  margin:12px 0 0;
  padding:12px 14px;
  border-radius:10px;
  background:#FDEDEE;
}
/* La demande est partie par le mail de secours (30/09/2026) : un message
   rassurant, pas une erreur. */
.pq-champ__erreur--recue{
  color:#1B5E20;
  background:#E8F5E9;
}

.pq-ecran--saisie .pq-champ--large:first-of-type{max-width:280px;margin-inline:auto}
.pq-ecran--saisie .pq-formulaire .pq-champ--large{max-width:none;margin-inline:0}

/* Puces de créneau : petites, en ligne, secondaires. */
.pq-puces{display:flex;flex-wrap:wrap;gap:8px}
.pq-puce{
  padding:9px 14px;
  border:1.5px solid var(--filet);
  border-radius:999px;
  background:#fff;
  font-family:var(--corps);
  font-size:14px;
  color:var(--encre);
  cursor:pointer;
  transition:border-color .16s var(--ease-doux),background .16s var(--ease-doux);
}
.pq-puce:hover{border-color:#C9D6E6}
.pq-puce[aria-pressed="true"]{
  border-color:var(--bleu);
  background:rgba(46,134,232,.08);
  font-weight:600;
}

.pq-rgpd{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  font-size:14px;
  line-height:1.5;
  color:var(--texte);
  cursor:pointer;
}
.pq-rgpd input{flex:0 0 auto;width:20px;height:20px;margin-top:1px;accent-color:var(--bleu)}
.pq-rgpd a{color:var(--bleu-fonce)}

.pq-leurre{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- boutons ---------- */

.pq-bouton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:54px;
  margin-top:22px;
  padding:0 24px;
  border:0;
  border-radius:14px;
  font-family:var(--titre);
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:transform .16s var(--ease),box-shadow .22s var(--ease-doux),opacity .18s linear;
}
.pq-bouton--principal{
  background:linear-gradient(135deg,var(--bleu-fonce),var(--bleu));
  color:#fff;
  box-shadow:0 10px 24px -12px rgba(22,96,180,.7);
}
.pq-bouton--principal:hover{box-shadow:0 14px 30px -12px rgba(22,96,180,.8)}
.pq-bouton--principal:active{transform:translateY(1px)}
/* Le retour au code postal de l'écran hors zone (30/09/2026). */
.pq-bouton--secondaire{
  background:transparent;
  color:var(--bleu-fonce);
  border:1.5px solid var(--filet);
}
.pq-bouton--secondaire:hover{border-color:var(--bleu)}
.pq-bouton[disabled]{opacity:.55;cursor:default;transform:none}
.pq-bouton__attente[hidden]{display:none}

.pq-confiance{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:18px;
  font-size:13.5px;
  color:var(--texte);
}
.pq-confiance span{display:flex;align-items:center;gap:8px}
.pq-confiance svg{flex:0 0 auto;width:15px;height:15px;color:var(--bleu-fonce)}

/* ---------- écran de calcul ---------- */

.pq-calcul{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:24px 0 40px;
  animation:pq-entree .4s var(--ease) both;
}
.pq-calcul[hidden]{display:none}

.pq-calcul__anneau{position:relative;width:132px;height:132px;margin-bottom:22px}
.pq-calcul__anneau svg{width:132px;height:132px;transform:rotate(-90deg)}
.pq-calcul__piste{fill:none;stroke:var(--filet);stroke-width:8}
.pq-calcul__jauge{
  fill:none;
  stroke:var(--bleu);
  stroke-width:8;
  stroke-linecap:round;
  transition:stroke-dashoffset .18s linear;
}
.pq-calcul__pourcent{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:var(--titre);
  font-size:24px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

.pq-calcul__titre{
  margin:0 0 8px;
  font-family:var(--titre);
  font-size:clamp(21px,5vw,28px);
  font-weight:600;
}
.pq-calcul__lead{margin:0 0 26px;color:var(--texte)}

.pq-calcul__phases{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  text-align:left;
  max-width:420px;
}
.pq-calcul__phase{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:15px;
  color:var(--texte);
  opacity:.45;
  transition:opacity .3s var(--ease-doux),color .3s var(--ease-doux);
}
.pq-calcul__phase[data-etat="encours"],
.pq-calcul__phase[data-etat="faite"]{opacity:1;color:var(--encre)}
.pq-calcul__puce{
  flex:0 0 auto;
  width:18px;height:18px;
  margin-top:2px;
  border:2px solid var(--filet);
  border-radius:50%;
  transition:border-color .3s var(--ease-doux),background .3s var(--ease-doux);
}
.pq-calcul__phase[data-etat="encours"] .pq-calcul__puce{
  border-color:var(--bleu);
  border-right-color:transparent;
  animation:pq-tourne .8s linear infinite;
}
.pq-calcul__phase[data-etat="faite"] .pq-calcul__puce{
  border-color:var(--bleu);
  background:var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center/12px no-repeat;
}

@keyframes pq-tourne{to{transform:rotate(360deg)}}

/* ---------- paliers ---------- */

@media (min-width:600px){
  .pq{padding-top:calc(var(--tete) + var(--bandeau) + var(--pq-barre-h) + 36px)}
  .pq-ecran__aide{margin-bottom:30px;font-size:16px}
  .pq-cartes{gap:12px}
  .pq-carte{padding:14px 46px 14px 14px;min-height:88px}
  .pq-carte__croquis{width:96px;height:72px}
  .pq-carte__label{font-size:17px}

  .pq-ecran--dense .pq-cartes{grid-template-columns:repeat(3,1fr)}
  .pq-ecran--dense .pq-carte{padding:18px 14px 16px}
  .pq-ecran--dense .pq-carte__croquis{height:96px}
  .pq-ecran--dense .pq-carte__detail{display:block}

  .pq-formulaire{grid-template-columns:1fr 1fr;gap:16px}
  .pq-bouton{width:auto;min-width:260px;display:flex;margin-inline:auto}
  .pq-confiance{flex-direction:row;justify-content:center;gap:22px}
}

@media (min-width:900px){
  .pq{padding-bottom:96px}
  .pq-ecran__question{margin-bottom:12px}
  .pq-cartes{grid-template-columns:repeat(2,1fr)}
  .pq-ecran--dense .pq-cartes{grid-template-columns:repeat(4,1fr)}
}

/* Un parcours qui bouge doit pouvoir cesser de bouger. */
@media (prefers-reduced-motion:reduce){
  .pq-ecran[data-actif],
  .pq-ecran[data-sortant],
  .pq-calcul{animation:none}
  .pq-barre__jauge,
  .pq-carte,
  .pq-carte__coche{transition:none}
  .pq-calcul__phase[data-etat="encours"] .pq-calcul__puce{animation:none}
}