/* ---------- Styles généraux ---------- */
body {
  background-color: #121212;
  color: #e0e0e0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 1rem;
}

/* ---------- En-tête bandeau ---------- */
.header-bar {
  background-color: #1f1f1f;
  flex-wrap: nowrap;
}

.header-bar h2 {
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
}

/* ---------- Boîtes de contenu ---------- */
.box {
  background-color: #2c2c2c;
  border-left: 5px solid #198754;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.title-box {
  background-color: #198754;
  padding: 20px;
  border-radius: 10px;
  color: white;
  margin-bottom: 30px;
  text-align: center;
}

.title-box-light {
  background-color: #343a40;
  padding: 20px;
  border-radius: 10px;
  color: #e0e0e0;
  margin-bottom: 30px;
  text-align: center;
}

/* ---------- Boutons de fiche ---------- */
.btn-reflex {
  font-size: 1.3rem;
  padding: 1rem 1.5rem;
  border-width: 2px;
  width: 100%;
  text-align: center;
  border-radius: 10px;
  transition: none;
}

/* Couleurs des boutons (Bootstrap utilise déjà ces classes, on ne surcharge que si besoin) */
.btn-success, .btn-warning, .btn-danger, .btn-info {
  color: white;
}

/* ---------- Téléphone et liens ---------- */
a.btn-link {
  font-weight: bold;
  text-decoration: none;
}

a.btn-link:hover {
  text-decoration: underline;
  color: #0dcaf0;
}

a[href^="tel:"] {
  font-weight: bold;
  color: #0dcaf0;
}

a[href^="tel:"]:hover {
  color: #31d2f2;
  text-decoration: underline;
}

/* ---------- Listes déroulantes ---------- */
ul.collapse {
  padding-left: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}

ul ul {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 20px;
  list-style-type: circle;
}

/* ---------- Divers ---------- */
.container {
  padding: 40px 20px;
}

#loading {
  text-align: center;
  padding-top: 150px;
  font-size: 1.2rem;
  color: #cccccc;
}
/* ---------- Styles généraux ---------- */
body {
  background-color: #121212;
  color: #e0e0e0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4 {
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 1rem;
}

/* ---------- En-tête bandeau ---------- */
.header-bar {
  background-color: #1f1f1f;
  flex-wrap: nowrap;
}

.header-bar h2 {
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
}

/* ---------- Boîtes de contenu ---------- */
.box {
  background-color: #2c2c2c;
  border-left: 5px solid #198754;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.title-box {
  background-color: #198754;
  padding: 20px;
  border-radius: 10px;
  color: white;
  margin-bottom: 30px;
  text-align: center;
}

.title-box-light {
  background-color: #343a40;
  padding: 20px;
  border-radius: 10px;
  color: #e0e0e0;
  margin-bottom: 30px;
  text-align: center;
}


/* ---------- Boutons de fiche ---------- */
.btn-reflex {
  font-size: 1.3rem;
  padding: 1.2rem;
  width: 100%;
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* Supprimer effets de survol trop marqués pour le mobile */
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-info {
  border-width: 2px;
}

.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-info:focus,
.btn-outline-info:active {
  background-color: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------- Téléphone et liens ---------- */
a.btn-link {
  font-weight: bold;
  text-decoration: none;
}

a.btn-link:hover {
  text-decoration: underline;
  color: #0dcaf0;
}

a[href^="tel:"] {
  font-weight: bold;
  color: #0dcaf0;
}

a[href^="tel:"]:hover {
  color: #31d2f2;
  text-decoration: underline;
}

/* ---------- Listes déroulantes ---------- */
ul.collapse {
  padding-left: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}

ul ul {
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 20px;
  list-style-type: circle;
}

/* ---------- Divers ---------- */
.container {
  padding: 40px 20px;
}

#loading {
  text-align: center;
  padding-top: 150px;
  font-size: 1.2rem;
  color: #cccccc;
}
.checklist {
  list-style-position: inside;
  padding-left: 0;
}

.checklist input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
  accent-color: #198754; /* Couleur verte */
}
.checklist li:nth-child(odd) {
  background-color: #1e1e1e;
}

.checklist li:nth-child(even) {
  background-color: #2a2a2a;
}

.checklist li {
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 6px;
}

/* ---------- Fix boutons transparents sur mobile ---------- */
@media (hover: none) {
  .btn-outline-success.btn-reflex {
    background-color: #198754 !important;
    color: #fff !important;
    border-color: #198754 !important;
  }

  .btn-outline-warning.btn-reflex {
    background-color: #ffc107 !important;
    color: #212529 !important;
    border-color: #ffc107 !important;
  }

  .btn-outline-danger.btn-reflex {
    background-color: #dc3545 !important;
    color: #fff !important;
    border-color: #dc3545 !important;
  }

  .btn-outline-info.btn-reflex {
    background-color: #0dcaf0 !important;
    color: #212529 !important;
    border-color: #0dcaf0 !important;
  }
}