/* Indicateur de difficulté commun aux aventures Escape Nice. */
.difficulty-meter{
  --difficulty-accent:#ff4d12;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  width:max-content;
  max-width:100%;
  box-sizing:border-box;
  padding:7px 10px;
  border:1.5px solid rgba(21,43,75,.13);
  border-radius:999px;
  background:rgba(255,255,255,.82);
  color:#152b4b;
  font-family:Arial,sans-serif;
  font-size:11px;
  font-weight:900;
  line-height:1;
  letter-spacing:.025em;
  text-transform:uppercase;
  white-space:nowrap;
}

.difficulty-meter__dots{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  color:var(--difficulty-accent);
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:900;
  letter-spacing:1px;
  line-height:1;
}

.difficulty-meter__dot{
  display:block;
  width:8px;
  height:8px;
  box-sizing:border-box;
  border:1.5px solid currentColor;
  border-radius:50%;
  opacity:.38;
}

.difficulty-meter__dot.is-filled{
  border-color:var(--difficulty-accent);
  background:var(--difficulty-accent);
  opacity:1;
}

.difficulty-meter__score{font-size:11px;letter-spacing:0}

.difficulty-meter--card{margin:-1px 0 0}

.difficulty-meter--hero{
  --difficulty-accent:#ffa80b;
  padding:7px 10px;
  border-color:#152b4b;
  background:#152b4b;
  color:#fff;
  box-shadow:0 4px 0 rgba(21,43,75,.12);
}

.difficulty-meter--dark{
  --difficulty-accent:#ffa80b;
  margin-top:4px;
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.1);
  color:#fff;
}

.difficulty-meter--switch{
  gap:5px;
  margin-top:3px;
  padding:2px 0 0;
  border:0;
  background:transparent;
  color:inherit;
  font-size:9px;
}

.difficulty-meter--switch .difficulty-meter__dot{width:7px;height:7px}
.difficulty-meter--switch .difficulty-meter__score{font-size:9px}

.switch-btn:hover .difficulty-meter--switch,
.switch-btn.is-current .difficulty-meter--switch{--difficulty-accent:#fff}

/* Message rassurant pour Le Vol Mystérieux, utilisé à la place d'une note de difficulté. */
.experience-note{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  box-sizing:border-box;
  padding:7px 11px;
  border:1.5px solid rgba(21,43,75,.13);
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:#152b4b;
  font-family:"Gabarito",Arial,sans-serif;
  font-size:12px;
  font-weight:900;
  line-height:1.15;
  letter-spacing:0;
  text-transform:none;
  white-space:normal;
}

.experience-note--card{margin:-1px 0 0}

.experience-note--hero{
  border-color:#152b4b;
  background:#152b4b;
  color:#fff;
  box-shadow:0 4px 0 rgba(21,43,75,.12);
}

.experience-note--dark{
  margin-top:4px;
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.1);
  color:#fff;
}

.experience-note--switch{
  justify-content:flex-start;
  margin-top:3px;
  padding:2px 0 0;
  border:0;
  background:transparent;
  color:inherit;
  box-shadow:none;
  font-size:10px;
}

/* Les métadonnées existantes ajoutent des séparateurs aux spans : on les
   neutralise à l'intérieur de notre composant. */
.pc-meta .difficulty-meter span::before,
.school-hero-badge .difficulty-meter span::before,
.school-hero-badge > .difficulty-meter::before{
  content:none!important;
  display:none!important;
}

.school-hero-badge > .difficulty-meter{white-space:nowrap}

.pc-meta .experience-note::before,
.school-hero-badge .experience-note::before,
.school-hero-badge > .experience-note::before{
  content:none!important;
  display:none!important;
}

@media(max-width:620px){
  .difficulty-meter{gap:6px;padding:6px 9px;font-size:10px}
  .difficulty-meter__dot{width:7px;height:7px}
  .difficulty-meter__score{font-size:10px}
  .difficulty-meter--switch{padding:2px 0 0;font-size:9px}
  .difficulty-meter--switch .difficulty-meter__score{font-size:9px}
  .experience-note{padding:6px 9px;font-size:11px}
  .experience-note--switch{padding:2px 0 0;font-size:9px}
}