/* Character counter styling */
#char-counter.text-warning { color: #f7a600 !important; }
#char-counter.text-danger { color: #dc3545 !important; }

/* Simplified, readable lists for INCI results (override heavy soins styles) */
#inci-result .soins-section-content ul,
#inci-result .soins-section-content ol {
    margin: 1rem 0 1rem 0rem;
    padding-left: 1.25rem;
}
#inci-result .soins-section-content .list-marked {
    list-style: disc outside;
    padding-left: 1.25rem;
}
#inci-result .soins-section-content .list-marked li {
    background: transparent;
    border: 0;
    border-left: 0;
    border-radius: 0;
    padding: 0;
    margin: 0.5rem 0;
    position: static;
    box-shadow: none;
}

#inci-result .soins-section-content .list-marked li::before { content: none !important; }

#inci-result .soins-section-content .list-numbered {
    list-style: none;
    counter-reset: step-counter;
    padding-left: 0;
}
#inci-result .soins-section-content .list-numbered li {
    counter-increment: step-counter;
    background: rgba(255,255,255,.8);
    border: 2px solid var(--light-pink);
    border-radius: 20px;
    padding: 25px 30px;
    margin-bottom: 30px;
    position: relative;
    transition: all .3s ease;
    box-shadow: 0 2px 2px rgba(255,107,157,.08);
}
#inci-result .soins-section-content .list-numbered li::before { 
    content: counter(step-counter);
    position: absolute;
    top: -15px;
    left: 25px;
    background: linear-gradient(135deg,var(--primary-pink),var(--accent-pink));
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(255,107,157,.3);
}

#inci-result .soins-section-content .list-marked li:hover,
#inci-result .soins-section-content .list-numbered li:hover {
    transform: none;
    border-color: var(--primary-pink);
    background: inherit;
}

/* Lighten headings spacing a bit inside result */
.inci-head h2 { padding: .2rem 0 0 0; font-size: 1.3rem; margin-bottom: .2rem !important;}
.category-details h2 { font-size: 1.05rem; }
#inci-result .soins-section-content h3 { padding: 0rem 0 1.5rem; padding-left: 0; }
#inci-result .soins-section-content h3::before { display: none; }
#inci-result .soins-section-content h3::after { left: 0; width: 40px; }
.inci-summary p em {
    font-weight: 600;
    font-style: italic;
}
.badge { text-align:left; white-space: normal; word-wrap: break-word; overflow-wrap: break-word;}
.soins-section-content p:has(strong):last-of-type, .soins-section-content p.is-info-beaute { all: unset; } 
@media (max-width: 768px) {
.soins-section-content p:first-of-type {
    all: unset; 
}
}
@media (max-width: 480px) {
.soins-institut-card {
    padding: 10px;
}
#inci-result .soins-section-content .list-numbered li {
    padding: 20px 15px;
}
}
/* Mise en forme de la ligne d'ingrédient enrichie */
.inci-item .inci-head {
    margin-bottom: .95rem;
}
.inci-item .inci-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .35rem;
}
.inci-origin {
    margin: .5rem 0;
    border:1px solid var(--dark-blue);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(93, 173, 226, 0.1), rgba(52, 152, 219, 0.15));
    padding:.5rem;
    font-weight: 500;
    font-size: 0.75rem;
}

/* Jauge allergènes */
.inci-gauge { margin-top: .25rem; }
.inci-gauge .gauge-track {
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,.08);
    border-radius: 999px;
    overflow: hidden;
    margin-top:10px;
}
.inci-gauge .gauge-fill {
    height: 100%;
    width: 0;
    transition: width .3s ease, background-color .3s ease;
    background: transparent !important;
}

/* Niveaux: largeur + couleur (success / warning / primary) */
.gauge-allergen.level-1 .gauge-fill {
    width: 33%;
    background-color: var(--primary-green) !important;    /* très faible = success */
}
.gauge-allergen.level-2 .gauge-fill {
    width: 66%;
    background-color: var(--gold-accent) !important;      /* moyen = warning */
}
.gauge-allergen.level-3 .gauge-fill {
    width: 100%;
    background-color: var(--primary-pink) !important;     /* élevé = primary/marque */
}

.inci-gauge .gauge-text {
    display: inline-block;
    margin-top: 6px;
    font-size: .8rem;
    color: #555;
}
.inci-head .small { font-size: .75rem; }
#inci-image + small.text-muted.small { font-size: 0.65rem !important; }
.cosing-badge { 
position: relative;
  bottom: -18px;
  left: 90%;
  background-color: var(--primary-pink);
  color: var(--primary-pink);
  border-radius: 5px;
  font-weight: 700;
  font-size: .7rem;
  padding: 1px 10px;
  max-width: 100px;
} 
.cosing-badge a { 
color: var(--cream);
} .cosing-badge i { 
color: var(--cream);
} 

/* Bloc de scoring INCI */
.inci-scoring {
position: relative;
border-radius: 10px;
padding: 1rem 1rem 0.75rem;
box-shadow: 0 2px 6px rgba(0,0,0,.04);
background: linear-gradient(135deg,#d7d7d7 0%,#e8e8e8 100%);
font-size: 1.2rem;
}

/* Icônes et badges */
.inci-scoring .bi {
vertical-align: -0.125em;
}

/* Icônes et badges */
.inci-scoring .sup {
font-size: 0.55rem;
margin-bottom: -2px;
margin-left: -4px;
}

.inci-scoring .badge {
display: inline-flex;
align-items: center;
gap: .35rem;
font-weight: 600;
letter-spacing: .01em;
margin-right: .35rem;
margin-bottom: .35rem;
line-height: 1.15;
}

.inci-scoring .number-xl {
font-size: 1.5rem;
}
.inci-scoring .number-lg {
font-size: 1rem;
}

/* Espace entre la ligne principale et les sous-scores */
.inci-scoring .mb-2 {
margin-bottom: .6rem !important;
}

/* Badges principaux (CosméScore / NaturoScore) : même largeur + centrés */
.inci-scoring .inci-main-badges {
  width: 100%;
}

.inci-scoring .inci-main-badge {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Mobile: un badge par ligne */
@media (max-width: 480px) {
  .inci-scoring .inci-main-badges {
    flex-direction: column;
    align-items: stretch;
  }
  .inci-scoring .inci-main-badge {
    width: 100%;
  }
}

/* Label sous la note (ne touche pas les autres labels) */
.inci-scoring .main-score-label {
  font-size: .7rem;
  line-height: 1.1;
}

/* Petites adaptations responsive */
@media (max-width: 480px) {
.inci-scoring {
    padding: .85rem .85rem .65rem;
}
.inci-scoring .badge {
    font-size: .92rem;
}
}

/* Mobile: sous-scores plus compacts + 2 par ligne */
@media (max-width: 480px) {
  .inci-scoring .inci-subscore-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
  }

  .inci-scoring .inci-subscore-badges .badge {
    flex: 0 0 calc(50% - .15rem);
    margin-right: 0 !important; /* neutralise me-1 */
    margin-bottom: 0 !important;
    padding: .28rem .4rem;
    font-size: .68rem;
    line-height: 1.05;
    justify-content: center;
    text-align: center;
  }

  .inci-scoring .inci-subscore-badges .number-lg {
    font-size: .82rem;
  }

  .inci-scoring .inci-subscore-badges .sup {
    font-size: .5rem;
    margin-left: -3px;
  }
}
.accordion-header {
  border: 2px solid var(--light-pink);
}
.accordion-body {
  border: 2px solid var(--light-pink);
}
.accordion-item .alert-light{
  background: #fffcf9;
  border: 2px solid var(--light-pink);
  border-left: 4px solid var(--light-pink);
}
.category-details .badge.bg-light {
  background: #fffdfb !important;
  font-weight: 600;
  color: #848484 !important;
  letter-spacing: .02rem;
  border: 1px solid #e1e1e1 !important;
}
.inci-scoring .main-score-title {
  font-size: 1.1rem;
  font-weight: 800;      /* bolder, mais plus contrôlé */
  letter-spacing: 1.1px;
  text-transform: uppercase; /* optionnel, mais cohérent avec ton texte */
}