@font-face {
  font-family: 'Phosphate';
  src: url('./fonts/Phosphate-Solid.eot');
  src: url('./fonts/Phosphate-Solid.eot?#iefix') format('embedded-opentype'), url('./fonts/Phosphate-Solid.woff2') format('woff2'), url('./fonts/Phosphate-Solid.woff') format('woff'), url('./fonts/Phosphate-Solid.ttf') format('truetype'), url('./fonts/Phosphate-Solid.svg#Phosphate-Solid') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir-Medium';
  src: url('./fonts/AvenirNext-Medium.eot');
  src: url('./fonts/AvenirNext-Medium.eot?#iefix') format('embedded-opentype'), url('./fonts/AvenirNext-Medium.woff2') format('woff2'), url('./fonts/AvenirNext-Medium.woff') format('woff'), url('./fonts/AvenirNext-Medium.ttf') format('truetype'), url('./fonts/AvenirNext-Medium.svg#AvenirNext-Medium') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AvenirBold';
  src: url('./fonts/AvenirNext-DemiBold.eot');
  src: url('./fonts/AvenirNext-DemiBold.eot?#iefix') format('embedded-opentype'), url('./fonts/AvenirNext-DemiBold.woff2') format('woff2'), url('./fonts/AvenirNext-DemiBold.woff') format('woff'), url('./fonts/AvenirNext-DemiBold.ttf') format('truetype'), url('./fonts/AvenirNext-DemiBold.svg#AvenirNext-DemiBold') format('svg');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'AvenirBolder';
  src: url('./fonts/AvenirNext-Bold.eot');
  src: url('./fonts/AvenirNext-Bold.eot?#iefix') format('embedded-opentype'), url('./fonts/AvenirNext-Bold.woff2') format('woff2'), url('./fonts/AvenirNext-Bold.woff') format('woff'), url('./fonts/AvenirNext-Bold.ttf') format('truetype'), url('./fonts/AvenirNext-Bold.svg#AvenirNext-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
section.main-radios .section-container {
  width: 1100px;
}
section.main-radios .section-container a {
  color: #B3C951;
  margin: 50px;
}
section.main-radios .section-container .search {
  border: 1px solid #B3C951;
  padding: 40px 30px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 50px;
}
section.main-radios .section-container .search h3 {
  color: #FB8814;
  font-family: "AvenirBolder";
}
section.main-radios .section-container .search #search-by-name,
section.main-radios .section-container .search #search-by-location {
  border: 1px solid #FB8814;
  background: transparent;
  border-radius: 30px;
  padding: 5px 25px;
  width: 100%;
}
section.main-radios .section-container .search #search-by-location {
  appearance: none;
  /* Chrome, Firefox */
  -webkit-appearance: none;
  /* Safari, Chrome */
  -moz-appearance: none;
  /* Firefox */
  position: relative;
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 10px;
  opacity: 0.8;
  /* Flèche personnalisée (SVG en base64 orange) */
  background-image: url("data:image/svg+xml,%3Csvg fill='%23FB8814' height='14' viewBox='0 0 10 14' width='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4l5 6 5-6z'/%3E%3C/svg%3E");
}
section.main-radios .section-container .grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-content: center;
}
section.main-radios .section-container .grid article {
  border: 1px solid #B3C951;
}
section.main-radios .section-container .grid article .top {
  border-bottom: 1px solid #B3C951;
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: space-evenly;
}
section.main-radios .section-container .grid article h3 {
  font-size: 14px;
  line-height: 16px;
}
section.main-radios .section-container .grid article .bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
section.main-radios .section-container .grid article .bottom img {
  height: 70px;
}
section.main-radios .section-container .grid article .bottom p {
  margin-top: 10px;
}
section.main-radios .section-container .grid article .bottom p a {
  margin: 0;
  color: #FB8814;
  font-size: 11px;
}
section.main-radios .section-container .grid button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
}
section.main-radios .section-container .grid .radio-loader {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
section#join {
  margin-top: 50px;
}
section#join .section-container {
  max-width: 1000px;
  border: 1px solid #FB8814;
  padding: 40px 2vw 40px 2vw;
  border-top-left-radius: 100px;
  border-bottom-right-radius: 100px;
  text-align: center;
}
section#join .section-container h2 {
  color: #FB8814;
  font-size: 25px;
}
section#join .section-container p {
  text-align: center;
}
section#join .section-container p.contact {
  font-family: 'AvenirBolder';
  font-size: 20px;
  margin-top: 20px;
}
@media screen and (max-width: 1100px) {
  section.main-radios .section-container .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 900px) {
  section.main-radios .section-container a {
    margin: 0px;
  }
  section.main-radios .section-container .search {
    padding: 20px;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
  }
  section.main-radios .section-container .grid {
    grid-template-columns: repeat(3, 1fr);
  }
  section#join {
    margin: 50px 20px;
  }
  section#join .section-container {
    border-radius: initial;
  }
}
@media screen and (max-width: 600px) {
  section.main-radios .section-container .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}