/* =====================================================================
   Yafoye — questionnaire guidé. V101.225.

   Les choix sont des boutons pleine largeur, pas un menu déroulant
   natif : sur mobile, un <select> ouvre un tiroir système qui masque
   la question, et l'on choisit sans plus voir ce qu'on nous demande.
   Des boutons visibles gardent la question et la réponse ensemble.
   ===================================================================== */
.yq{display:grid;gap:14px;min-width:0;max-width:100%}
.yq *{box-sizing:border-box}

.yq-piste{height:4px;border-radius:99px;background:#e6eef6;overflow:hidden}
.yq-jauge{height:100%;background:linear-gradient(90deg,#00d4ff,#1565a0);
  border-radius:99px;transition:width .28s ease}

/* --- Réponses déjà données --- */
.yq-faites{display:grid;gap:8px}
/* Les réponses données tiennent sur une ligne : libellé à gauche,
   valeur à droite. Deux lignes par réponse repoussaient la question
   en cours vers le bas au fil du parcours. */
.yq-fait{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;text-align:left;padding:7px 11px;border:1px solid #e6eef6;border-radius:10px;
  background:#f7fbfd;cursor:pointer;transition:.16s;font-family:Manrope,system-ui,sans-serif}
.yq-fait:hover{border-color:#9fe4ef;background:#fff}
.yq-fait small{flex:none;font-size:10.5px;font-weight:700;color:#8095aa;white-space:nowrap}
.yq-fait span{flex:1;text-align:right;font-size:12px;font-weight:800;color:#071a32;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yq-fait i{flex:none;color:#c3d0dd;font-size:10px}

/* --- Question en cours --- */
.yq-active h3{margin:2px 0 9px;font:800 15px/1.3 Sora,Manrope,system-ui,sans-serif;
  color:#071a32;letter-spacing:-.3px}
/* V101.227: deux colonnes dès le mobile, et des boutons plus bas.
   Une liste d'options en pleine largeur poussait « Trouver pour moi »
   hors de l'écran — le client faisait défiler pour un bouton qu'il
   aurait dû voir tout de suite. */
/* V101.228: `minmax(0,1fr)` et non `1fr`.
   Dans une grille, une colonne `1fr` ne descend jamais sous la largeur
   de son contenu : un libellé long comme « Électricité (compteur) »
   élargissait donc la colonne, et la grille débordait hors du cadre.
   C'est le défaut le plus courant des grilles CSS, et il ne se voit
   qu'avec du texte long — d'où son apparition à la question des
   équipements. */
.yq-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.yq-choix > *{min-width:0}
.yq-option{width:100%;text-align:left;min-height:42px;padding:9px 12px;
  border:1px solid #dbe6f1;border-radius:11px;background:#fff;color:#0b2540;
  font:700 12.5px/1.3 Manrope,system-ui,sans-serif;cursor:pointer;transition:.14s;
  /* Un libellé trop long revient à la ligne au lieu de pousser le
     bouton hors du cadre. */
  overflow-wrap:anywhere;hyphens:auto}
.yq-option:hover{border-color:#00d4ff;background:#f2fdff;transform:translateX(2px)}
.yq-option:active{transform:translateX(0) scale(.995)}

@media(min-width:620px){
  /* Trois colonnes sur écran large : les listes de neuf catégories
     tiennent alors sans défilement. */
  .yq-choix{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:340px){
  /* Très petits écrans : une colonne, sinon les libellés se coupent. */
  .yq-choix{grid-template-columns:minmax(0,1fr)}
}

/* --- Fin du parcours --- */
.yq-fini{display:flex;align-items:flex-start;gap:11px;padding:14px 16px;
  border:1px solid #bfe9d5;border-radius:15px;background:#f1fbf6}
.yq-fini i{color:#07966d;font-size:17px;margin-top:2px}
.yq-fini b{display:block;font:800 13.5px Sora,Manrope,system-ui,sans-serif;color:#05603f}
.yq-fini span{display:block;margin-top:3px;font-size:12px;line-height:1.55;color:#4a7a66}

/* --- Bouton de recherche --- */
.yq-lancer{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:50px;border:0;border-radius:16px;
  background:linear-gradient(135deg,#031b3a,#073568);color:#fff;
  font:800 15px Manrope,system-ui,sans-serif;cursor:pointer;transition:.18s;
  box-shadow:0 14px 32px rgba(3,27,58,.24)}
.yq-lancer:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 18px 38px rgba(3,27,58,.3)}
.yq-lancer:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;font-size:13px}

@media (prefers-reduced-motion: reduce){
  .yq-jauge,.yq-option,.yq-lancer{transition:none}
  .yq-option:hover,.yq-lancer:hover:not(:disabled){transform:none}
}

/* --- Choix multiple. V101.226 ---
   Les critères d'équipement s'additionnent : forcer à n'en retenir
   qu'un donnerait une image fausse du besoin. La coche est visible à
   gauche, l'état coché franc — sur mobile, une nuance de fond ne se
   distingue pas au soleil. */
.yq-aide{margin:-6px 0 11px;font-size:12px;line-height:1.5;color:#8095aa}
/* V101.227: la coche rétrécit avec les boutons, sans perdre en
   lisibilité — c'est le seul repère de l'état sélectionné. */
.yq-coche{display:flex;align-items:center;gap:8px;min-width:0}
.yq-coche span{min-width:0;overflow-wrap:anywhere}
.yq-coche i{width:16px;height:16px;flex:none;display:grid;place-items:center;
  border:1.5px solid #cbd9e6;border-radius:6px;background:#fff;
  color:transparent;font-size:10px;transition:.14s}
.yq-coche.est-coche{border-color:#031b3a;background:#f2fdff}
.yq-coche.est-coche i{background:#031b3a;border-color:#031b3a;color:#fff}
.yq-valider{width:100%;min-height:44px;margin-top:9px;border:1px solid #dbe6f1;
  border-radius:14px;background:#f7fbfd;color:#0b2540;
  font:800 13px Manrope,system-ui,sans-serif;cursor:pointer;transition:.14s}
.yq-valider:hover{border-color:#9fe4ef;background:#fff}


/* V101.227 — l'ancienne conversation disparaît de l'accueil.
   L'attribut `hidden` ne suffisait pas : ces blocs portent chacun un
   `display` en CSS, qui l'emporte sur lui. Le questionnaire pose déjà
   la question des catégories et recueille le besoin ; garder une
   saisie libre en dessous donnait deux chemins pour la même chose, et
   allongeait la page sans rien apporter. */
.yf-chat-identity[hidden],
.yf-assistant-dialogue[hidden],
.yf-search-category-shortcuts[hidden],
.search-area[hidden]{display:none!important}

/* V101.229 : le bouton « Retour » et le compteur « Question 4 sur 11 »
   sont retirés — voir js/yafoye-questionnaire.js pour le raisonnement.
   Les réponses données restent cliquables au-dessus : c'est le retour,
   et il permet de viser directement la bonne question. */

/* --- Champs libres du questionnaire de publication. V101.236 ---
   Le quartier, le titre, le prix ne peuvent pas être des listes :
   personne ne devinerait « Riviera Anono » dans un menu. Ils gardent
   la même présentation qu'un choix — une question, une réponse — mais
   se saisissent. */
.yq-saisie{width:100%;box-sizing:border-box;min-height:50px;
  border:1px solid #dbe6f1;border-radius:13px;padding:13px 15px;
  font:600 14px Manrope,system-ui,sans-serif;color:#071a32;background:#fff}
.yq-saisie:focus{outline:0;border-color:#64cad9;box-shadow:0 0 0 4px rgba(0,212,255,.13)}
.yq-saisie-long{min-height:104px;resize:vertical;line-height:1.6}
.yq-passer{width:100%;min-height:40px;margin-top:7px;border:0;background:transparent;
  color:#8095aa;font:700 12px Manrope,system-ui,sans-serif;cursor:pointer}
.yq-passer:hover{color:#031b3a;text-decoration:underline}

/* --- Capture de la position. V101.237 --- */
.yq-gps{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:52px;border:1px solid #bfe9ee;border-radius:14px;
  background:#f2fdff;color:#06627a;font:800 13.5px Manrope,system-ui,sans-serif;
  cursor:pointer;transition:.16s}
.yq-gps:hover{border-color:#00d4ff;background:#e8fbff}
.yq-gps-etat{min-height:18px;margin-top:8px;font-size:12px;font-weight:700;color:#6f8290}

/* --- Photos et bouton unique. V101.238 --- */
.yq-photos{display:grid;gap:10px;margin-bottom:4px}
.yq-photos .cc-media-drop{width:100%;box-sizing:border-box}
.yq-valider:disabled{opacity:.45;cursor:not-allowed}
.yq-valider.est-passer{background:transparent;border-color:transparent;color:#8095aa;font-weight:700}
.yq-valider.est-passer:hover{color:#031b3a;text-decoration:underline}

/* --- Engagement avant publication. V101.239 --- */
.yq-engagement{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;
  border:1px solid #dbe6f1;border-radius:14px;background:#f7fbfd;cursor:pointer}
.yq-engagement input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:#031b3a;cursor:pointer}
.yq-engagement span{font-size:12.5px;line-height:1.55;font-weight:700;color:#0b2540}
.yq-lancer:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}

/* =====================================================================
   V101.242 — plus rien ne sort du cadre.

   Le débordement revenait sur les questions à libellés longs — meublé,
   équipements, « Pour quand ? » — et sur les boutons d'action. La
   cause n'était pas la grille, corrigée en V101.228, mais le CONTENEUR :
   il n'imposait aucune limite à ses enfants, et un mot long élargissait
   toute la colonne.

   On borne donc à la racine plutôt qu'au cas par cas : chaque nouvelle
   question héritera de la contrainte sans qu'on y pense.
   ===================================================================== */
.yq,.yq-active,.yq-choix,.yq-faites{max-width:100%;min-width:0}
.yq-active > *,.yq-faites > *{max-width:100%;min-width:0}
.yq button,.yq input,.yq textarea,.yq label{max-width:100%;box-sizing:border-box}
.yq-option,.yq-lancer,.yq-valider,.yq-fait,.yq-gps{
  overflow-wrap:anywhere;word-break:normal;white-space:normal;
}
.yq-lancer{padding:0 14px;line-height:1.25}
.yq-aide{overflow-wrap:anywhere}

/* Le conteneur hôte lui-même : sur l'accueil comme dans l'espace pro,
   il ne doit jamais pousser la page en largeur. */
.yf-questionnaire-hote,
.cc-publication-questionnaire{max-width:100%;min-width:0;overflow-x:hidden}

/* =====================================================================
   V101.303 — affiner après les résultats, et le bouton progressif.

   Le bloc d'affinage vient APRÈS la liste : la personne a vu ce qu'on
   a, elle sait pourquoi elle répond. Avant les résultats, une question
   est un péage ; après, c'est un outil.

   Il reste discret — bordure légère, pas de couleur d'appel. Ce n'est
   pas l'action principale : consulter les biens l'est.
   ===================================================================== */
.yf-affiner{margin:20px 0 8px;padding:16px 18px;border:1px solid #e6eef6;
  border-radius:16px;background:#f8fbfd}
.yf-affiner > b{display:flex;align-items:center;gap:9px;
  font:800 13.5px Sora,Manrope,system-ui,sans-serif;color:#071a32}
.yf-affiner > b i{font-size:12px;color:#087f96}
.yf-affiner > span{display:block;margin:5px 0 13px;font-size:11.5px;color:#8095aa}
.yf-affiner-options{display:flex;flex-wrap:wrap;gap:8px}
.yf-affiner-options button{min-height:40px;padding:0 15px;
  border:1px solid #dbe6f1;border-radius:11px;background:#fff;color:#071a32;
  font:700 12.5px Manrope,system-ui,sans-serif;cursor:pointer;transition:.14s}
.yf-affiner-options button:hover{border-color:#00d4ff;background:#f2fdff}

/* La note sous le bouton de recherche : elle dit qu'on peut partir
   maintenant, et ce qu'on gagne à rester. */
.yq-lancer-note{margin:9px 0 0;text-align:center;font-size:11.5px;
  line-height:1.5;color:#8095aa}

/* =====================================================================
   V101.306 — les critères de recherche, modifiables.

   Le bandeau montre ce que le client a choisi. Chaque pastille porte un
   crayon : sans lui, rien ne dit qu'on peut cliquer, et la
   fonctionnalité reste invisible.

   Le crayon apparaît en gris et se colore au survol — présent sans
   être bruyant. Ces pastilles sont d'abord un rappel de ce qu'on a
   demandé ; la modification vient en second.
   ===================================================================== */
.chip-modifiable{display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:7px 14px;background:rgba(255,255,255,.08);color:#fff;
  font:700 12px Manrope,system-ui,sans-serif;cursor:pointer;transition:.14s}
.chip-modifiable:hover{background:rgba(255,255,255,.16);border-color:#64cad9}
.chip-modifiable i{font-size:9px;opacity:.5;transition:.14s}
.chip-modifiable:hover i{opacity:1;color:#64cad9}

/* Le choix actuel se distingue dans la fenêtre de modification. */
.yi-motif-liste button.est-actuel{border-color:#031b3a;background:#f2fdff;font-weight:800}
.yi-motif-liste button.est-actuel::after{content:'actuel';margin-left:auto;
  padding:2px 8px;border-radius:999px;background:#eef7ff;color:#1565a0;
  font-size:10px;font-weight:800}

/* =====================================================================
   V101.311 — les actions dans un résultat vide.

   « Chercher ailleurs » domine : quelqu'un qui découvre qu'il n'y a
   rien dans sa ville veut d'abord essayer autre chose. « Me prévenir »
   reste disponible, en second — c'est le choix de celui qui n'a pas
   d'autre idée, pas celui qu'on met en avant.
   ===================================================================== */
.yf-vide-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.yf-vide-principal,.yf-vide-secondaire{display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 17px;border-radius:13px;cursor:pointer;
  font:800 12.5px Manrope,system-ui,sans-serif;transition:.14s}
.yf-vide-principal{border:0;background:#031b3a;color:#fff}
.yf-vide-principal:hover{background:#073568}
.yf-vide-secondaire{border:1px solid #bfe9ee;background:#fff;color:#06627a}
.yf-vide-secondaire:hover{border-color:#00d4ff;background:#f2fdff}
.yf-vide-principal i,.yf-vide-secondaire i{font-size:11px}
@media(max-width:520px){
  .yf-vide-actions{flex-direction:column}
  .yf-vide-principal,.yf-vide-secondaire{width:100%;justify-content:center}
}

/* =====================================================================
   V101.410 — la sélection multiple des équipements.

   Un choix simple avance au clic ; ici on coche, et il faut voir ce
   qu'on a coché. Sans marque visible, on reclique par doute et on
   décoche ce qu'on venait de choisir.
   ===================================================================== */
.yq-choix-multiple{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-height:46vh;overflow-y:auto;
  padding-right:4px;
}
.yq-choix-multiple .yq-option{
  min-height:46px;padding:9px 12px;
  font-size:13px;line-height:1.25;
}
/* Coché : le bleu Yafoye plein, avec la coche. Un simple fond clair se
   confond avec l'état survolé sur les écrans peu contrastés — ceux des
   téléphones vendus ici, en plein jour. */
.yq-choix-multiple .yq-option.est-choisi{
  border-color:#0099e6;
  background:linear-gradient(135deg,#00c3ff,#0099e6);
  color:#fff;font-weight:800;
}
.yq-choix-multiple .yq-option.est-choisi::after{
  content:"\2713";margin-left:7px;font-weight:900;
}

@media (min-width:1024px){
  .yq-choix-multiple{grid-template-columns:repeat(3,minmax(0,1fr));max-height:40vh}
}

/* =====================================================================
   V101.428 — la saisie du budget.

   Les tranches obligeaient à se reconnaître dans un intervalle qui
   n'était pas le sien. Le champ demande le montant réel, avec les
   espaces de milliers écrits pendant la frappe.
   ===================================================================== */
.yq-saisie{
  width:100%;
  padding:16px 18px;
  border:2px solid rgba(3,27,58,.14);
  border-radius:16px;
  background:#fff;
  font:800 22px/1.2 Sora,Manrope,sans-serif;
  color:#031b3a;
  letter-spacing:-.01em;
  text-align:center;
}
.yq-saisie:focus{
  outline:none;
  border-color:#0099e6;
  box-shadow:0 0 0 4px rgba(0,153,230,.12);
}
.yq-saisie::placeholder{
  font-weight:600;font-size:17px;
  color:rgba(3,27,58,.32);
  letter-spacing:0;
}
/* Validé à vide : on le signale sans message, le champ parle de
   lui-même une fois le regard ramené dessus. */
.yq-saisie-vide{
  border-color:#e0524b;
  box-shadow:0 0 0 4px rgba(224,82,75,.10);
}

/* V101.488 — le panneau de complétion, ouvert avant de publier un
   besoin. Il réutilise le questionnaire tel quel : le client reconnaît
   l'écran sur lequel il vient de répondre, il ne découvre pas un
   formulaire. */
.yq-publication-fond{
  position:fixed;inset:0;z-index:12000;
  display:flex;align-items:flex-end;justify-content:center;
  background:rgba(3,20,40,.58);
  overflow:auto;padding:0;
}
@media(min-width:760px){
  .yq-publication-fond{align-items:center;padding:24px}
}
.yq-publication-carte{
  width:100%;max-width:640px;max-height:92vh;overflow:auto;
  background:#fff;border-radius:22px 22px 0 0;
}
@media(min-width:760px){
  .yq-publication-carte{border-radius:22px}
}
.yq-publication-tete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 20px 6px;
}
.yq-publication-tete small{
  display:block;font-size:10px;font-weight:800;letter-spacing:.12em;color:#0b6fa8;
}
.yq-publication-tete h2{margin:4px 0 6px;font-size:19px;color:#031b3a}
.yq-publication-tete p{margin:0;font-size:13px;line-height:1.45;color:#5b6675}
.yq-publication-fermer{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(3,27,58,.12);background:#fff;
  font-size:20px;line-height:1;color:#5b6675;
}
.yq-publication-corps{padding:0 20px 22px}