div#carousel_2 * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* div#carousel_2  {
    font-family: system-ui;
    background: #3d76d9;
  } */

div#carousel_2 .visuallyhidden {
  position: absolute;
  z-index: -1;
  right: 0;
  opacity: 0;

}

/* div#carousel_2 h1 {
    color: white;
    text-align: center;
    margin-top: 1em;
  } */

div#carousel_2 .container {
  overflow: hidden;
  padding: 20px;
  margin-top: 2em;
  background: rgba(0, 0, 0, .1)
}

div#carousel_2 .card-carousel a {
  color: #444;
  cursor: help;
}

div#carousel_2 .card-carousel {
  --card-width: 80%;
  --card-max-width: 280px;
  --card-height: 350px;
  --carousel-min-width: 600px;
  z-index: 1;
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: var(--card-height);
  min-width: var(--carousel-min-width);
  transition: filter .3s ease;
}

@media screen and (max-width: 640px) {
  div#carousel_2 .card-carousel {
    margin-left: calc((100vw - var(--carousel-min-width) - 40px) / 2)
  }
}

@media screen and (max-width: 480px) {
  div.modal.cv > div.cv-photo {
    width: 100px;
    /* display: none; */
  }
}

@media screen and (max-width: 340px) {
  div.modal.cv > div.cv-photo {
    display: none;
  }
}

@media only screen and (min-width: 341px) and (max-width: 480px) {
  div.modal.cv#IsabelleMERLY > p.cv-text { font-size: 0.65em; } 
}

div#carousel_2 .card-carousel.smooth-return {
  transition: all .2s ease;
}

div#carousel_2 .card-carousel .card {
  background: whitesmoke;
  width: var(--card-width);
  max-width: var(--card-max-width);
  text-align: center;
  padding: 1em;
  min-width: 250px;
  height: var(--card-height);
  position: absolute;
  margin: 0 auto;
  color: rgba(0, 0, 0, .5);
  transition: inherit;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  border-radius: 1em;
  filter: brightness(.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
}

.card#cardThomasMERLY .image-container {
  background-image: url("../images/membres/Thomas_Mini.jpg?v=1");
}

.card#cardEmelineFERNANDEZ .image-container {
  background-image: url("../images/membres/Emeline_F_Mini.jpg?v=1")
}

.card#cardVincentHALLOT .image-container {
  background-image: url("../images/membres/Vincent_Mini.jpg?v=1")
}

.card#cardAngelinaCALLIGARO .image-container {
  background-image: url("../images/membres/Angelina_Mini.jpg?v=1")
}

.card#cardFranckDAMART .image-container {
  background-image: url("../images/membres/Franck.jpg?v=1")
}

.card#cardIsabelleMERLY .image-container {
  background-image: url("../images/membres/Isabelle_Mini.jpg?v=1")
}

.card#cardLilianGABELLE .image-container {
  background-image: url("../images/membres/Lilian_Mini.jpg?v=1")
}

.card#cardNicolasVANVINCQ .image-container {
  background-image: url("../images/membres/Nicolas_Mini.jpg?v=1")
}

.card#cardPhilippeCOIGNION .image-container {
  background-image: url("../images/membres/Philippe_Mini.jpg?v=1")
}

.card#cardJeanPierreFERNANDEZ .image-container {
  background-image: url("../images/membres/JeanPierre_Mini.jpg?v=1")
}

.card#cardCharlineLEFEBVRE .image-container {
  background-image: url("../images/membres/Charline_Mini.jpg?v=1")
}

.card#cardTemplate .image-container {
  background-image: url("https://www.svgrepo.com/show/492689/avatar-boy.svg")
}

.card#cardTemplateF .image-container {
  background-image: url("https://www.svgrepo.com/show/492684/avatar-girl.svg")
}

div#carousel_2 .image-container {
  width: 8em;
  height: 8em;
  position: relative;
  background-size: cover;
  margin-bottom: 2em;
  border-radius: 100%;
  padding: 1em;
  -webkit-box-shadow: inset 0px 0px 17px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 17px 0px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 17px 0px rgba(0, 0, 0, 0.3);

}

div#carousel_2 .image-container::after {
  content: "";
  display: block;
  width: 120%;
  height: 120%;
  border: solid 3px rgba(0, 0, 0, .1);
  border-radius: 100%;
  position: absolute;
  top: calc(-10% - 3px);
  left: calc(-10% - 3px);
}

div#carousel_2 h2 {
  padding: 1em;
  margin-top: 1em;
  background: rgba(0, 0, 0, .3);
  text-align: center;
  color: white;
  border-radius: .2em;
  display: inline-block;
  transform: translateX(calc((100vw - 100%) / 2))
}

div#carousel_2 h2 a {
  color: #f5b916;
}

div#carousel_2 .carouselDots {
  cursor: pointer;
}

/* Cartes de détail */
div.modal.cv
{
  display:none;
  position:absolute;
  z-index: 20;
  background-color: #ddd;
  border-radius: 5px;
  border: 1px dashed #444;
}

div.modal.cv > div.close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  cursor: pointer;
  font-size: 2em;
  color: red;
}

div.modal.cv > div.cv-photo 
{
  background-position: center;
  background-size: cover;
  height: 100%;
  float: left;
  aspect-ratio: 1 / 1;
  margin-right: 1em;
}

div.modal.cv#ThomasMERLY > div.cv-photo 
{
  background-image: url("../images/membres/Thomas.jpg?v=1");
}

div.modal.cv#IsabelleMERLY > div.cv-photo 
{
  background-image: url("../images/membres/Isabelle.jpg?v=1");
}

div.modal.cv#LilianGABELLE > div.cv-photo 
{
  background-image: url("../images/membres/Lilian.jpg?v=1");
}

div.modal.cv#AngelinaCALLIGARO > div.cv-photo 
{
  background-image: url("../images/membres/Angelina.jpg?v=1");
}

div.modal.cv#VincentHALLOT > div.cv-photo 
{
  background-image: url("../images/membres/Vincent.jpg?v=1");
}

div.modal.cv#PhilippeCOIGNION > div.cv-photo 
{
  background-image: url("../images/membres/Philippe.jpg?v=1");
}

div.modal.cv#FranckDAMART > div.cv-photo 
{
  background-image: url("../images/membres/Franck.jpg?v=1");
}

div.modal.cv#EmelineFERNANDEZ > div.cv-photo 
{
  background-image: url("../images/membres/Emeline_F.jpg");
}

div.modal.cv#NicolasVANVINCQ > div.cv-photo 
{
  background-image: url("../images/membres/Nicolas.jpg");
}

div.modal.cv#JeanPierreFERNANDEZ > div.cv-photo 
{
  background-image: url("../images/membres/JeanPierre.jpg");
}

div.modal.cv#CharlineLEFEBVRE > div.cv-photo 
{
  background-image: url("../images/membres/Charline.jpg");
}

div.modal.cv > .cv-title 
{
  text-align: center;
  font-size: 2em;
  font-weight: bold;
}

div.modal.cv > .cv-text 
{
  text-align: left;
}

.carouselDots {
  text-align: center;
  font-size: 3em;
  cursor: hand;
}