/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/**
   * reset of default margins and paddings.
   */
* {
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

:root {
  --primary: #dee9ba;
  --secondary: #282551;
  --light-primary: #f7fcd1;
  --tag-radius: 20px;
  --select-container-height: clamp(2.7rem, 2.343rem + 0.952vw, 3.2rem);
  --select-tag-space-between: clamp(0.6rem, 0.314rem + 0.762vw, 1rem);
  --font-family-tags: "Quicksand", Helvetica, Arial, Lucida, sans-serif;
  --font-family-title: "anca", sans-serif;
  --font-size-title: clamp(1.2rem, 0.986rem + 0.571vw, 1.5rem);
  --font-size-tags: clamp(1rem, 0.857rem + 0.381vw, 1.2rem);
  --container-margin-bot: 2.5rem;

  --audio-item-min-width: 360px;
}

.dca-invisible {
  display: none !important;
}

.dca-invisible-smooth {
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s,
    opacity 1s ease-in;
}
.dca-visible-smooth {
  visibility: visible;
  opacity: 1;
}

.flex-centered {
  justify-content: center;
  align-items: center;
}

.blurred-filter {
  filter: blur(23px) !important;
}

a.click-off {
  pointer-events: none;
}

h1,
h2,
h3,
h4,
h5,
img,
span,
p,
select,
h1,
div {
  caret-color: transparent;
}

#dca-grid-container {
  max-width: 1400px !important;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-tags);
  margin-bottom: var(--container-margin-bot);
}

#dca-audio-grid,
.dca-pack-audios {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--audio-item-min-width), 1fr)
  );
  gap: 3rem;
}

#dca-grid-container #audio-select-container {
  margin-bottom: 1.563em;
  min-height: var(--select-container-height);
  gap: 1.25em !important;
}

#dca-grid-container #audioTagsSelect,
#audioTagsSelect option {
  border: 3px solid var(--primary);
  border-radius: 5px;
  background-color: var(--light-primary);
  color: var(--secondary);
  font-family: var(--font-family-tags);
  font-size: var(--font-size-tags);
  padding: clamp(0.2rem, -0.014rem + 0.571vw, 0.5rem) 0.625em;
  cursor: pointer;
  outline: none;
  /* Transition douce pour le changement de couleur de fond */
  transition: background-color 0.3s ease;

  /* Style au survol */
  &:hover {
    background-color: var(--primary);
  }
}

#dca-grid-container #audioTagsSelect option {
  margin: 0.5em;
}

#audio-select-container .audio-tag {
  padding-right: 5px !important;
  padding-left: var(--select-tag-space-between) !important;
  font-size: var(--font-size-tags);
  display: flex;
  align-items: center;
}

#dca-grid-container .audio-remove-tag {
  cursor: pointer;
  margin-left: var(--select-tag-space-between);
  background-color: var(--primary);
  padding: 0.1em 0.6em;
  border-radius: 50%;
}

#dca-audio-grid .audio-item,
.dca-pack-audios .audio-item {
  background-color: var(--primary);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

a.jbox-link {
  position: relative;
  display: inline-block;
  height: clamp(11rem, 6.714rem + 11.429vw, 17rem);
  text-decoration: none;
}

.audio-img-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--light-primary);
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 15px black;
  /* text-shadow:
        -1px -1px 0 var(--primary),
        1px -1px 0 var(--primary),
        -1px 1px 0 var(--primary),
        1px 1px 0 var(--primary); */
  /* Contour blanc */
  font-size: var(--font-size-tags);
  font-family: var(--font-family-tags);
  font-weight: bold;
}

#dca-audio-grid .audio-image,
.dca-pack-audios .audio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid var(--secondary);
}

#dca-audio-grid .audio-text-container,
.dca-pack-audios .audio-text-container {
  padding: clamp(0.8rem, 0.657rem + 0.381vw, 1rem);
}

#dca-grid-container .audio-tag-container,
.dca-pack-audios .audio-tag-container {
  display: flex;
  gap: 0.6em;
  flex-wrap: wrap;
}

#dca-grid-container .audio-tag-container .audio-tag,
.dca-pack-audios .audio-tag-container .audio-tag {
  font-size: var(--font-size-tags);
  background-color: var(--light-primary);
  border-radius: var(--tag-radius);
  padding-bottom: 0.188em;
  padding-top: 0.188em;
  padding-left: 0.625em;
  padding-right: 0.625em;
  font-family: var(--font-family-tags);
}

#dca-grid-container .audio-tag-container .parent-tag,
.dca-pack-audios .audio-tag-container .parent-tag {
  background-color: var(--secondary) !important;
  color: white !important;
}

#dca-audio-grid .audio-title,
.dca-pack-audios .audio-title {
  margin: 0.625em;
  font-size: var(--font-size-title) !important;
  font-family: var(--font-family-title) !important;
  color: var(--secondary);
  text-align: center;
}

#dca-audio-grid .audio-description,
.dca-pack-audios .audio-description {
  font-size: 1rem;
  color: var(--secondary);
  text-align: justify;
  margin-bottom: 1em;
  margin-top: 1em;
  padding-inline-start: 0.2em;
}

#audio-no-result-msg {
  text-align: center;
  margin: 5em;
}

/* Style du Player */
#dca-audio-grid .audio-player,
.dca-pack-audios .audio-player {
  width: 96%;
  margin: 2%;
}

/* Boutons de téléchargement (variante audio item : packs achetés) */
/* Les DL sont injectés DANS le player -> on le laisse wrapper */
.audio-player-container {
  flex-wrap: wrap;
}

.audio-downloads {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4em 1.6em; /* moins vertical, plus horizontal */
  margin-top: 0.4em;
}

/* Lien discret : icône download + texte, en bleu (--secondary) */
.audio-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--secondary, #282551);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.audio-dl-btn:hover {
  opacity: 0.7;
  color: var(--secondary, #282551);
  text-decoration: underline;
}

.audio-dl-icon {
  flex-shrink: 0;
}