/* Bricoleur IA — exantrix.com
   Feuille complète : reprise de agent.css + blocs sécurité et outils. */

:root {
  --diag-accent: #FF6600;        /* couleur du bouton guide */
  --diag-accent-hover: #e55a00;
  --diag-lien: #0a58ca;
}

#diag-form,
#diag-resultats { margin: 1.5rem 15%; }


/* ---------- états ---------- */
.diag-chargement {
  padding: 1.5rem;
  text-align: center;
  color: #666;
  font-style: italic;
}
.diag-erreur {
  padding: .8rem;
  background: #fdecea;
  border-left: 4px solid #d32f2f;
  border-radius: 4px;
}

/* ---------- résultats ---------- */
.diag-intro {
  padding: 1rem;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 1rem;
  line-height: 1.55;
}

.diag-securite {
  padding: .9rem 1rem;
  background: #fff6e5;
  border-left: 4px solid #e8a33d;
  border-radius: 4px;
  margin-bottom: 1.2rem;
  font-size: .93rem;
  line-height: 1.5;
}

/* domaine réglementé : gaz, tableau, mur porteur, amiante, plomb, hauteur */
.diag-reserve {
  padding: 1rem;
  background: #fdecea;
  border-left: 4px solid #d32f2f;
  border-radius: 4px;
  margin-bottom: 1.2rem;
  line-height: 1.5;
}
.diag-reserve strong {
  display: block;
  margin-bottom: .35rem;
  color: #b71c1c;
  font-size: .95rem;
}
.diag-reserve p { margin: 0; font-size: .92rem; }

/* outils et EPI, affichés avant les pièces */
.diag-outils {
  border: 1px solid #e3e3e3;
  border-left: 4px solid var(--diag-lien);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.light .diag-outils { background-color: #fff; }
.dark .diag-outils { background-color: #3a3a3a; }

.diag-outils h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.diag-outils ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.diag-outils li {
  font-size: .87rem;
  padding: .28rem .65rem;
  border-radius: 20px;
  background: #eef2fb;
  color: #23408e;
}
.dark .diag-outils li { background: #2b3a5c; color: #cfe0ff; }

.diag-bloc {
  border: 1px solid #e3e3e3;
  border-left-width: 4px;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.light .diag-bloc { background-color: #fff; }
.dark .diag-bloc { background-color: #3a3a3a; }

.diag-bloc h3 {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.urgence-haute { border-left-color: #d32f2f; }
.urgence-moyenne { border-left-color: #e8a33d; }
.urgence-basse { border-left-color: #999; }

.diag-badge {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: .2rem .55rem;
  border-radius: 20px;
}
.urgence-haute .diag-badge { background: #fdecea; color: #b71c1c; }
.urgence-moyenne .diag-badge { background: #fff6e5; color: #8a5a00; }
.urgence-basse .diag-badge { background: #efefef; color: #555; }

.diag-raison { margin: 0 0 .8rem; color: #555; font-size: .92rem; line-height: 1.5; }

.diag-avert {
  font-size: .88rem;
  color: #979797;
  padding: .5rem .7rem;
  border-radius: 4px;
  margin: 0 0 .7rem 1.2rem;
  font-style: italic;
}

.diag-pieces { list-style: none; margin: 0; padding: 0; }
.diag-pieces li { border-top: 1px solid #eee; }
.diag-pieces a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .65rem .3rem;
  text-decoration: none;
  color: inherit;
}
.diag-pieces a:hover { background: #f7f9fc; }
.diag-pieces img {
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: #f0f0f0;
}
.diag-titre { flex: 1 1 60%; font-weight: 500; }
.diag-prix { font-weight: 700; }

.diag-vide {
  font-size: .9rem;
  color: #666;
  background: #fafafa;
  padding: .8rem;
  border-radius: 4px;
  margin: 0;
}
.diag-vide a { color: var(--diag-lien); }

.diag-guide-btn {
  width: 200px;
  height: 36px;
  border: 0;
  border-radius: 5px;
  background: #03c600;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  margin-top: 10px;
  transition: background .15s;
}
.diag-guide-btn:hover { background: var(--diag-accent-hover); }
.diag-guide-btn:disabled { opacity: .55; cursor: wait; }

/* liste d'outils en tête de guide */
.guide-outils {
  margin: .6rem 0 1rem;
  padding: 0 0 0 1.1rem;
  font-size: .9rem;
  color: #555;
  line-height: 1.6;
}
.dark .guide-outils { color: #bbb; }

.diag-note {
  margin-top: 1.5rem;
  font-size: .82rem;
  color: #888;
  text-align: center;
  line-height: 1.5;
}

/* ---------- animations ---------- */
@keyframes diagFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.diag-apparait { opacity: 0; animation: diagFadeUp .45s ease forwards; }

@keyframes guideReveal {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.guide-apparait { opacity: 0; animation: guideReveal .4s ease forwards; }

@keyframes diagBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
#diag-txt::after {
  content: "▌";
  animation: diagBlink 1s step-end infinite;
  color: var(--diag-lien);
  margin-left: 1px;
}
#diag-txt.fini::after { content: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  #diag-form,
  #diag-resultats { margin: 1.5rem 5%; }
}

@media (max-width: 520px) {
  .diag-titre { flex-basis: 100%; }
  .diag-guide-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .diag-apparait,
  .guide-apparait { opacity: 1; animation: none; }
  #diag-txt::after { animation: none; }
}