.quote-bubble {
  --quote-bubble-bg: #3d93ae;
  --quote-bubble-meta-text: #0d3440;
  --quote-bubble-title: #0d3440;
  --quote-bubble-quote-icon: #77b1c4;
}
.quote-bubble--blue {
  --quote-bubble-bg: #3d93ae;
  --quote-bubble-meta-text: #0d3440;
  --quote-bubble-title: #0d3440;
  --quote-bubble-quote-icon: #77b1c4;
}
.quote-bubble--purple {
  --quote-bubble-bg: #715b8b;
  --quote-bubble-meta-text: #0b0413;
  --quote-bubble-title: #0b0413;
  --quote-bubble-quote-icon: #9b8bad;
}
.quote-bubble--orange {
  --quote-bubble-bg: #bf8228;
  --quote-bubble-meta-text: #130d04;
  --quote-bubble-title: #130d04;
  --quote-bubble-quote-icon: #bf9c69;
}
.quote-bubble--pink {
  --quote-bubble-bg: #cf5959;
  --quote-bubble-meta-text: #2c0a0a;
  --quote-bubble-title: #2c0a0a;
  --quote-bubble-quote-icon: #c59191;
}
.quote-bubble--green {
  --quote-bubble-bg: #5f9567;
  --quote-bubble-meta-text: #092922;
  --quote-bubble-title: #092922;
  --quote-bubble-quote-icon: #91be98;
}

.quote-bubbles
  > .quote-bubble:not(.quote-bubble--blue):not(.quote-bubble--red):not(
    .quote-bubble--purple
  ):not(.quote-bubble--green):not(.quote-bubble--yellow):not(
    .quote-bubble--orange
  ):not(.quote-bubble--pink):nth-child(4n + 1) {
  --quote-bubble-bg: #3d93ae;
  --quote-bubble-meta-text: #0d3440;
  --quote-bubble-title: #0d3440;
  --quote-bubble-quote-icon: #77b1c4;
}
.quote-bubbles
  > .quote-bubble:not(.quote-bubble--blue):not(.quote-bubble--red):not(
    .quote-bubble--purple
  ):not(.quote-bubble--green):not(.quote-bubble--yellow):not(
    .quote-bubble--orange
  ):not(.quote-bubble--pink):nth-child(4n + 2) {
  --quote-bubble-bg: #715b8b;
  --quote-bubble-meta-text: #0b0413;
  --quote-bubble-title: #0b0413;
  --quote-bubble-quote-icon: #9b8bad;
}
.quote-bubbles
  > .quote-bubble:not(.quote-bubble--blue):not(.quote-bubble--red):not(
    .quote-bubble--purple
  ):not(.quote-bubble--green):not(.quote-bubble--yellow):not(
    .quote-bubble--orange
  ):not(.quote-bubble--pink):nth-child(4n + 3) {
  --quote-bubble-bg: #bf8228;
  --quote-bubble-meta-text: #130d04;
  --quote-bubble-title: #130d04;
  --quote-bubble-quote-icon: #bf9c69;
}
.quote-bubbles
  > .quote-bubble:not(.quote-bubble--blue):not(.quote-bubble--red):not(
    .quote-bubble--purple
  ):not(.quote-bubble--green):not(.quote-bubble--yellow):not(
    .quote-bubble--orange
  ):not(.quote-bubble--pink):nth-child(4n + 4) {
  --quote-bubble-bg: #5f9567;
  --quote-bubble-meta-text: #092922;
  --quote-bubble-title: #092922;
  --quote-bubble-quote-icon: #91be98;
}

.quote-bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--gap-quote-bubbles);
  --gap-quote-bubbles: 5px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.quote-bubble {
  position: relative;
  padding-bottom: 20px; /*espace necessaire pour la queue de la bulle*/
  position: relative;
  height: fit-content;
  max-width: 300px;
  min-width: 200px;
  margin: 0 auto;
  /*Dans le cas où il n'y a qu'une bulle donc pas de conteneur global :
  alors la bulle doit être centrée avec margin: 0 auto;*/
}

.quote-bubbles .quote-bubble {
  margin: 0;
  /*Dans le cas où on a un groupe de plusieurs bulles, donc dans un conteneur quote-bubbles :
  il faut enlever le margin: 0 auto; qui sert à centrer horizontalement une bulle seule.
  sinon ça perturbe les espaces flex entre les bulles selon leur nombre
  */
}

.quote-bubbles:has(> :nth-child(2)) > .quote-bubble {
  flex: 1 0 calc(50% - (var(--gap-quote-bubbles) / 2));
}

.quote-bubbles:has(> :nth-child(3):last-child) > .quote-bubble {
  flex: 1 0 calc((100% - (var(--gap-quote-bubbles) * 2)) / 3);
}
.quote-bubbles:has(> :nth-child(4)) > .quote-bubble {
  flex: 1 0 calc((100% - (var(--gap-quote-bubbles) * 3)) / 4);
}

.quote-bubble--short {
  min-width: 140px;
  max-width: 250px;
}

/*
- un quote bubble ne peux pas faire moins de 200px de large dans tous les cas, 
sauf si il a peu de caractères et prend automatiquement la classe .quote-bubble--short
- Si .quote-bubbles contient au moins 2 enfants directs, 
alors chaque .quote-bubble à l’intérieur prend une base de largeur correspondant 
à la moitié de la ligne, en tenant compte du gap (on enlève la moitié du gap à chaque item).
- Si .quote-bubbles contient exactement 3 enfants directs, 
alors chaque .quote-bubble prend un tiers de la ligne, 
en retranchant l’équivalent de deux gaps répartis sur les trois items.
- Si .quote-bubbles contient au moins 4 enfants directs, 
alors chaque .quote-bubble prend un quart de la ligne, 
en retranchant l’équivalent de trois gaps répartis sur les quatre items
→ flex-grow: 1 permet d’étirer les bulles pour remplir l’espace disponible,
→ flex-shrink: 0 empêche le rétrécissement si ça manque de place,
→ flex-basis fixe une largeur de départ à 50% moins la moitié du gap.
Donc deux bulles s’étirent pour remplir la ligne, sans jamais se réduire
.*/

.quote-bubble::before {
  content: "";
  z-index: 2;
  display: inline-block;
  position: absolute;
  left: 0px;
  transform: rotate(-4deg);
  top: 0;
  width: 46px;
  aspect-ratio: 4 / 3;
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-simple/quotes.svg") center / 100% 100%
    no-repeat;
  background-color: var(--quote-bubble-quote-icon);
}

.quote-bubble__content {
  width: 100%;
  /*aspect-ratio: 696.47 / 537.55;*/
  box-sizing: border-box;
  /* Corps de bulle : on autorise la deformation pour couvrir le conteneur. */
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/corps-bulle.svg") center / 100% 100%
    no-repeat;
  background: url("../images/img-quote-bubbles/texture-bulles.png") repeat;
  background-blend-mode: overlay;
  background-size: 60%;
  background-color: var(--quote-bubble-bg);
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.quote-bubble--short .quote-bubble__content {
  padding: 18px;
}

.quote-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20%;
  display: block;
  width: 50px;
  aspect-ratio: 50 / 32;
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/queue-bulle.svg") center / 100% 100%
    no-repeat;
  background: url("../images/img-quote-bubbles/texture-bulles.png") repeat;
  background-blend-mode: overlay;
  background-size: 60%;
  background-color: var(--quote-bubble-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.quote-bubble__title {
  margin-bottom: 10px;
  font-family: prequelregular, "Open Sans", sans-serif, Arial, Helvetica;
  font-size: 14px;
  width: 80%;
  font-variant-ligatures: none;
  color: var(--quote-bubble-title);
  padding-bottom: 3px;
  border-bottom: 2px dotted;
}
.quote-bubble__text {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
  text-align: left;
  text-indent: 20px;
}
.quote-bubble--short .quote-bubble__text {
  text-indent: 29px;
  hyphens: auto;
}

.quote-bubble__meta {
  align-self: flex-end;
  margin-top: 10px;
  padding-left: 20%;
  text-align: right;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  font-size: 10px;
  line-height: 1.6;
  color: var(--quote-bubble-meta-text);
}

.quote-bubble__divider {
  display: inline-block;
  vertical-align: middle;
  height: 1px;
  width: 8px;
  background-color: var(--quote-bubble-meta-text);
}

.quote-bubbles > .quote-bubble:nth-child(5n + 1) .quote-bubble__content {
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/corps-bulle.svg") center / 100% 100%
    no-repeat;
}
.quote-bubbles > .quote-bubble:nth-child(5n + 2) .quote-bubble__content {
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/corps-bulle-2.svg") center / 100% 100%
    no-repeat;
}
.quote-bubbles > .quote-bubble:nth-child(5n + 3) .quote-bubble__content {
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/corps-bulle-3.svg") center / 100% 100%
    no-repeat;
}
.quote-bubbles > .quote-bubble:nth-child(5n + 4) .quote-bubble__content {
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/corps-bulle-4.svg") center / 100% 100%
    no-repeat;
}
.quote-bubbles > .quote-bubble:nth-child(5n + 5) .quote-bubble__content {
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/corps-bulle-5.svg") center / 100% 100%
    no-repeat;
}

.quote-bubbles > .quote-bubble:nth-child(5n + 1)::after {
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/queue-bulle.svg") center / 100% 100%
    no-repeat;
  transform: none;
  left: 20%;
}
.quote-bubbles > .quote-bubble:nth-child(5n + 2)::after {
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/queue-bulle-2.svg") center / 100% 100%
    no-repeat;
  transform: scaleX(-1);
  left: 50%;
}
.quote-bubbles > .quote-bubble:nth-child(5n + 3)::after {
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/queue-bulle-3.svg") center / 100% 100%
    no-repeat;
  transform: none;
  left: 20%;
}
.quote-bubbles > .quote-bubble:nth-child(5n + 4)::after {
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/queue-bulle-4.svg") center / 100% 100%
    no-repeat;
  transform: scaleX(-1);
  left: 60%;
}
.quote-bubbles > .quote-bubble:nth-child(5n + 5)::after {
  mask: url("https://www.tourdumondiste.com/wp-content/plugins/shortcodes-articles/images/img-quote-bubbles/queue-bulle-5.svg") center / 100% 100%
    no-repeat;
  transform: scaleX(-1);
  left: 60%;
}