/* ---------- page ---------- */
.panne-page,
.panne-liste-page { max-width: 780px; margin: 0 auto; padding: 1.5rem; }

.panne-page h2 { font-size: 1.25rem; margin: 2rem 0 .8rem; }
.panne-page h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.panne-page p { line-height: 1.6; }

/* ---------- résumé ---------- */
.panne-resume {
  padding: 1.1rem;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.panne-courte { margin: 0 0 .8rem; font-size: 1.05rem; }

.panne-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  padding: .25rem .7rem;
  border-radius: 20px;
  border: 1px solid #d5d5d5;
  background: #fff;
  color: #444;
}

.gravite-benin { border-color: #c8c8c8; color:#34c745 }
.gravite-surveiller { border-color: #999; font-weight: 700;float: right; margin-top: -35px; color:#e8a33d }
.gravite-urgent { border-color: #555; background: #444; color: #b50000; }

/* ---------- roulage et risque ---------- */
.panne-roulage {
  padding: 1rem 1.1rem;
  border-left: 5px solid #e8a33d;
  background: #fafafa;
  border-radius: 4px;
  margin-bottom: 1.2rem;
}
.panne-cat{padding: 10px;}
.panne-risque{
  padding: 1rem 1.1rem;
  border-left: 5px solid #d41919;
  background: #fafafa;
  border-radius: 4px;
  margin-bottom: 1.2rem;
}

.panne-roulage h2,
.panne-risque h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.panne-roulage p,
.panne-risque p { margin: 0; }


/* ---------- causes ---------- */
.panne-cause {
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding: 1.1rem;
  margin-bottom: 1.2rem;
}

.panne-cause h3 {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.panne-num {
flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.panne-explication { margin: 0 0 .8rem; color: #555; font-size: .95rem; }

.panne-test {
  background: #fafafa;
  border-radius: 4px;
  padding: .7rem .9rem;
  margin-bottom: .9rem;
  font-size: .92rem;
}
.panne-test strong {
  display: block;
  margin-bottom: .3rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #8a5a00;
}
.panne-test p { margin: 0; }

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

.panne-vide {
  font-size: .9rem;
  color: #666;
  background: #fafafa;
  padding: .7rem .9rem;
  border-radius: 4px;
  margin: 0;
}

/* ---------- coûts ---------- */
.panne-tableau {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.4rem;
  font-size: .95rem;
}
.panne-tableau td {
  padding: .65rem .3rem;
  border-bottom: 1px solid #eee;
}
.panne-tableau td:first-child { color: #666; }
.panne-tableau td:last-child { text-align: right; font-weight: 600; }

.panne-outil-titre { margin: 1.2rem 0 .6rem; font-size: 1rem; }

.panne-outils {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}
.panne-outils li {
  border: 1px solid #ddd;
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .85rem;
  color: #555;
}

/* ---------- faq ---------- */
.panne-question {
  border-top: 1px solid #eee;
  padding: 1rem 0;
}
.panne-question h3 { margin: 0 0 .4rem; font-size: 1rem; }
.panne-question p { margin: 0; color: #555; font-size: .95rem; }

/* ---------- cta ---------- */
.panne-cta {
  text-align: center;
  padding: 1.6rem 1rem;
  background: #f5f7fa;
  border-radius: 8px;
  margin: 2rem 0;
}
.panne-cta p { margin: 0 0 .9rem; }

/* ---------- autres pannes ---------- */
.panne-autres ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.panne-autres li { border-top: 1px solid #eee; }
.panne-autres a {
  display: block;
  padding: .65rem .3rem;
  text-decoration: none;
  color: inherit;
  font-size: .95rem;
}
.panne-autres a:hover { background: #f7f9fc; }

/* ---------- liste alphabétique ---------- */
.panne-alpha {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 1.5rem 0 2rem;
}
.panne-alpha a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  font-size: .88rem;
  font-weight: 600;
}
.panne-alpha a:hover { background: #f0f0f0; }

.panne-groupe { margin-bottom: 2rem; }
.panne-groupe h2 {
  font-size: 1.15rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: .4rem;
  margin: 0 0 .5rem;
}
.panne-groupe ul { list-style: none; margin: 0; padding: 0; }
.panne-groupe li { border-bottom: 1px solid #f0f0f0; }
.panne-groupe a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .7rem .3rem;
  text-decoration: none;
  color: inherit;
}
.panne-groupe a:hover { background: #f7f9fc; }
.panne-liste-titre { font-size: .95rem; }

/* ---------- dark ---------- */
.dark .panne-resume,
.dark .panne-cta { background: #3a3a3a; }
.dark .panne-roulage,
.dark .panne-risque,
.dark .panne-test,
.dark .panne-vide { background: #3a3a3a; border-left-color: #5a5a5a; }
.dark .panne-cause { background: #3a3a3a; border-color: #4a4a4a; }
.dark .panne-num { background: #4a4a4a; color: #eee; }
.dark .panne-badge { background: #4a4a4a; border-color: #5a5a5a; color: #eee; }
.dark .gravite-urgent { background: #eee; color: #333; border-color: #eee; }
.dark .panne-outils li { border-color: #5a5a5a; color: #ccc; }
.dark .panne-alpha a { border-color: #5a5a5a; }
.dark .panne-pieces a:hover,
.dark .panne-autres a:hover,
.dark .panne-groupe a:hover { background: #444; }

/* ---------- responsive ---------- */
@media (max-width: 520px) {
  .panne-page,
  .panne-liste-page { padding: 1rem; }
  .panne-piece-titre { flex-basis: 100%; }
  .panne-tableau td { font-size: .9rem; }
}