/* =============================================================================
   Configurateur intelligent
   Même langage que le reste du site : bleu nuit, bleu technique, traits fins.
   Ce n'est pas une fenêtre de discussion posée sur une page — c'est un outil,
   et il doit en avoir la tenue.
   ============================================================================= */
.cfg{padding:clamp(var(--sp-6),4vw,var(--sp-8)) 0 var(--sp-8); background:
  linear-gradient(var(--c-blueprint-soft) 1px,transparent 1px) 0 0/72px 72px,
  linear-gradient(90deg,var(--c-blueprint-soft) 1px,transparent 1px) 0 0/72px 72px,
  var(--c-bg)}
.cfg__head{max-width:60ch; margin-bottom:var(--sp-6)}
.cfg__head h1{font-size:clamp(1.9rem,3vw,2.6rem); line-height:1.12}
.cfg__avis{
  border:1px solid var(--c-line-strong); border-left:3px solid var(--c-accent);
  background:#fff; border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-sm); max-width:70ch; margin:0 0 var(--sp-5);
}
.cfg__grid{display:grid; gap:var(--sp-6); grid-template-columns:minmax(0,1fr) 23rem; align-items:start}

/* --- Conversation ----------------------------------------------------------- */
.cfg__main{
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:clamp(var(--sp-4),2.5vw,var(--sp-6)); box-shadow:var(--shadow);
}
.cfg__fil{display:grid; gap:var(--sp-4); max-height:26rem; overflow-y:auto; padding-right:var(--sp-2)}
.cfg__msg{max-width:52ch; font-size:var(--fs-sm); line-height:1.6}
.cfg__msg p{margin:0 0 var(--sp-2)}
.cfg__msg p:last-child{margin:0}
.cfg__msg--bot{
  border-left:2px solid var(--c-accent); padding-left:var(--sp-4); color:var(--c-body);
}
.cfg__msg--user{
  justify-self:end; text-align:right; border-right:2px solid var(--c-line-strong);
  padding-right:var(--sp-4); color:var(--c-ink); font-weight:500;
}
.cfg__exemple{color:var(--c-muted); font-size:var(--fs-xs)}

/* --- Question guidée --------------------------------------------------------- */
.cfg__question{margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--c-line)}
.cfg__question h2{font-size:var(--fs-base); margin-bottom:var(--sp-3)}
.cfg__choix{display:flex; flex-wrap:wrap; gap:var(--sp-2)}
.cfg__chip{
  font:inherit; font-size:var(--fs-sm); cursor:pointer;
  background:#fff; color:var(--c-body);
  border:1px solid var(--c-line-strong); border-radius:var(--r-full);
  padding:.42rem .9rem; transition:border-color var(--t), color var(--t), background var(--t);
}
.cfg__chip:hover{border-color:var(--c-accent); color:var(--c-accent-dark); background:var(--c-accent-soft)}
.cfg__chip[data-neutre]{color:var(--c-muted); border-style:dashed}

/* --- Saisie ------------------------------------------------------------------ */
.cfg__saisie{
  display:flex; gap:var(--sp-2); align-items:flex-end; margin-top:var(--sp-5);
  border:1px solid var(--c-line-strong); border-radius:var(--r-lg); padding:var(--sp-2);
  transition:border-color var(--t), box-shadow var(--t);
}
.cfg__saisie:focus-within{border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-soft)}
.cfg__saisie textarea{
  flex:1 1 auto; min-width:0; border:0; resize:none; font:inherit; font-size:var(--fs-base);
  padding:.7rem .8rem; color:var(--c-ink); background:transparent; line-height:1.5;
}
.cfg__saisie textarea:focus{outline:none}
.cfg__confidentialite{
  font-size:var(--fs-xs); color:var(--c-muted); margin:var(--sp-3) 0 0; max-width:66ch;
}

/* --- Carte projet ------------------------------------------------------------ */
.cfg__aside{position:sticky; top:88px; display:grid; gap:var(--sp-4)}
.cfg__carte{background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:var(--sp-5)}
.cfg__carte-tete{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  margin-bottom:var(--sp-4)}
.cfg__carte h2{font-size:var(--fs-base); margin:0}
.cfg__etape{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; color:var(--c-accent-dark);
  background:var(--c-accent-soft); border:1px solid #cfe0ff; border-radius:var(--r-full);
  padding:.15rem .6rem; white-space:nowrap;
}
.cfg__resume{font-size:var(--fs-sm); gap:var(--sp-2) var(--sp-4)}
.cfg__resume dt{color:var(--c-muted)}
.cfg__resume dd{margin:0; color:var(--c-ink); font-weight:550}
.cfg__replier{display:none}

/* --- Résultats --------------------------------------------------------------- */
.cfg__resultats{display:grid; gap:var(--sp-3)}
.cfg__resultats h2{font-size:var(--fs-base); margin:0 0 var(--sp-1)}
.cfg__provisoire{font-size:var(--fs-xs); color:var(--c-muted); margin:0 0 var(--sp-2)}
.cfg__fab{
  display:block; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-md);
  padding:var(--sp-4); text-decoration:none; color:inherit;
  transition:border-color var(--t), box-shadow var(--t), transform var(--t);
}
.cfg__fab:hover{border-color:var(--c-line-strong); box-shadow:var(--shadow-lift); transform:translateY(-1px)}
.cfg__fab--fondateur{box-shadow:inset 3px 0 0 var(--c-navy)}
.cfg__fab-nom{font-weight:700; color:var(--c-ink); font-size:var(--fs-base); margin:0}
.cfg__fab-lieu{font-size:var(--fs-xs); color:var(--c-muted); margin:.15rem 0 var(--sp-2)}
.cfg__niveau{
  display:inline-block; font-size:var(--fs-xs); font-weight:650; border-radius:var(--r-sm);
  padding:.12rem .5rem; background:var(--c-bg-tint); color:var(--c-navy); margin-bottom:var(--sp-2);
}
.cfg__niveau[data-n="forte"]{background:#e7f5ee; color:var(--c-ok)}
.cfg__pourquoi{list-style:none; margin:var(--sp-2) 0 0; padding:0; display:grid; gap:.2rem}
.cfg__pourquoi li{font-size:var(--fs-xs); color:var(--c-body); padding-left:1.1em; position:relative}
.cfg__pourquoi li::before{content:"✓"; position:absolute; left:0; color:var(--c-ok); font-weight:700}
.cfg__aucun{
  border:1px solid var(--c-line); border-radius:var(--r-md); background:var(--c-bg-soft);
  padding:var(--sp-4); font-size:var(--fs-sm); color:var(--c-body);
}

/* --- Modale de mise en relation ---------------------------------------------- */
.cfg__modale{
  position:fixed; inset:0; z-index:90; background:rgba(10,23,41,.55);
  display:grid; place-items:center; padding:var(--sp-4); overflow-y:auto;
}
/* display:grid l'emporterait sur la règle [hidden] du navigateur : sans ce
   rappel, la modale s'afficherait dès le chargement. Même précaution pour les
   autres blocs pilotés par l'attribut. */
.cfg [hidden], .cfg__modale[hidden]{display:none !important}
.cfg__modale-in{
  position:relative; background:#fff; border-radius:var(--r-lg); width:min(100%,34rem);
  padding:clamp(var(--sp-5),3vw,var(--sp-7)); box-shadow:var(--shadow-lift);
}
.cfg__fermer{
  position:absolute; top:var(--sp-3); right:var(--sp-3); width:36px; height:36px;
  border:1px solid var(--c-line); background:#fff; border-radius:var(--r-sm);
  font-size:1.3rem; line-height:1; cursor:pointer; color:var(--c-muted);
}
.cfg__fermer:hover{border-color:var(--c-ink); color:var(--c-ink)}
.cfg__erreur{
  background:#fdecea; border:1px solid #f3c4bf; color:#8c1d18; border-radius:var(--r-sm);
  padding:var(--sp-3); font-size:var(--fs-sm); margin:0;
}

@media (max-width:1023px){
  .cfg__grid{grid-template-columns:1fr}
  .cfg__aside{position:static}
  /* Sur mobile la carte projet se replie : elle informe, elle ne doit pas
     repousser la conversation hors de l'écran. */
  .cfg__replier{
    display:block; width:100%; font:inherit; font-size:var(--fs-sm); text-align:left;
    background:none; border:0; border-top:1px solid var(--c-line); padding:var(--sp-3) 0 0;
    color:var(--c-accent); cursor:pointer;
  }
  .cfg__resume{display:none}
  .cfg__carte[data-ouvert="true"] .cfg__resume{display:grid}
}
@media (prefers-reduced-motion:reduce){ .cfg__fab:hover{transform:none} }