/* styleMed.css - Optimisation Moderne 2026 pour AlgoFacile */

:root {
  --primary: #6222cc;
  --secondary: #fba504;
  --algo-green: #62bf22;
  --comp-orange: #f49022;
  --py-blue: #1300f9;
  --glass-bg: rgba(255, 255, 255, 0.8);
}

/* --- Barre de Pourcentage Ultra-Moderne --- */
#target_content .progress {
  height: 14px !important;
  background: #e9ecef !important;
  border-radius: 50px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  overflow: visible !important;
  margin: 20px 0 !important;
}

#target_content .progress-bar {
  border-radius: 50px !important;
  background: linear-gradient(90deg, var(--primary), #9d6df5) !important;
  position: relative;
  box-shadow: 0 4px 10px rgba(98, 34, 204, 0.3);
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Indicateur de pourcentage flottant */
#target_content .progress-bar::after {
  content: attr(aria-valuenow) "%";
  position: absolute;
  right: 0;
  top: -25px;
  font-size: 11px;
  font-weight: 900;
  color: var(--primary);
  background: white;
  padding: 2px 6px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* --- Modernisation de vos conteneurs MY --- */

/* On libère la largeur maximale pour coller à la bannière */
.containerMY,
.containerMYALGO,
.containerMYCOMPR,
.containerMYPYTH {
  max-width: 100% !important; /* On passe de 1100px à 100% */
  width: 100% !important;
  margin: 20px 0 !important; /* On enlève le centrage auto pour coller aux bords */
  padding: 40px 5% !important; /* On garde le 5% de marge interne comme la bannière */
  border-radius: 0 !important; /* Optionnel : enlever l'arrondi pour un look plus "bannière" */
}

/* Si vous voulez que le contenu ne soit pas TROP collé sur les écrans géants */
@media (min-width: 1600px) {
  .containerMY,
  .containerMYALGO,
  .containerMYCOMPR,
  .containerMYPYTH {
    padding: 40px 10% !important;
  }
}

/* Ajout d'une ligne d'accent élégante sur le côté au lieu de la bordure totale */
.containerMYALGO {
  border-left: 10px solid var(--algo-green) !important;
}
.containerMYCOMPR {
  border-left: 10px solid var(--comp-orange) !important;
}
.containerMYPYTH {
  border-left: 10px solid var(--py-blue) !important;
}

.containerMYALGO:hover,
.containerMYCOMPR:hover,
.containerMYPYTH:hover {
  transform: translateY(-5px);
}

/* --- Items et Questions --- */
.itemMY {
  background: #f8f9fa !important;
  border: 1px solid #eee !important;
  border-radius: 12px !important;
  padding: 15px 20px !important;
  margin: 8px !important;
  font-weight: 500;
  color: #444;
  transition: 0.2s all;
}

.itemMY:hover {
  background: var(--primary) !important;
  color: white !important;
  cursor: grab;
}

/* --- Tables de Résultats --- */
.algo-table {
  border-spacing: 0 10px !important;
  border-collapse: separate !important;
}

.algo-table tr {
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  border-radius: 12px;
}

.algo-table td {
  padding: 18px !important;
  border: none !important;
}

/* Effet de survol premium pour vos cartes */
.service-item,
.feature-item {
  transition: all 0.3s ease-in-out;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.service-item:hover,
.feature-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(98, 34, 204, 0.1) !important;
  border-color: var(--primary);
}

/* Style des badges d'état */
.badge.bg-success {
  background-color: #2ecc71 !important;
  font-weight: 500;
}

.badge.bg-info {
  background-color: #3498db !important;
}