/*!
 * VILLAGE v0.0.3 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
 */
@charset "UTF-8";

/* ¯¯¯¯¯¯¯¯¯ *\
  CALLOUT
\* ˍˍˍˍˍˍˍˍˍ */
.village-callout {
  position: relative;
  padding: 1.5rem;

  --title-spacing: 0 0 0.5rem;
  --text-spacing: 0;
  margin: 0 0 1.5rem;
  background-size: 0.25rem 100%;
  background-position: 0 0;
  background-repeat: no-repeat;

  /**
   * Inclusion de l'icône (optionnel)
   */

  /**
   * Ajout de marge quand on inclut un bouton (optionnel)
   */
  background-color: var(--background-contrast-grey);

  --idle: transparent;
  --hover: var(--background-contrast-grey-hover);
  --active: var(--background-contrast-grey-active);
  background-image: linear-gradient(0deg, var(--border-default-village-primary), var(--border-default-village-primary));
}

.village-callout[class^=village-icon-]::before,
.village-callout[class*=" village-icon-"]::before,
.village-callout[class^=village-fi-]::before,
.village-callout[class*=" village-fi-"]::before {
  display: block;
  margin: -0.5rem 0 0.5rem;
}

.village-callout__title {
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.75rem;
  color: var(--text-title-grey);
}

.village-callout__text {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.village-callout .village-btn {
  margin-top: 1rem;
}

.village-callout::before {
  color: var(--text-title-grey);
}

.village-callout--village-color3 {
  background-image: linear-gradient(0deg, var(--border-default-village-color3), var(--border-default-village-color3));
  background-color: var(--background-contrast-village-color3);

  --idle: transparent;
  --hover: var(--background-contrast-village-color3-hover);
  --active: var(--background-contrast-village-color3-active);
}

.village-callout--village-color4 {
  background-image: linear-gradient(0deg, var(--border-default-village-color4), var(--border-default-village-color4));
  background-color: var(--background-contrast-village-color4);

  --idle: transparent;
  --hover: var(--background-contrast-village-color4-hover);
  --active: var(--background-contrast-village-color4-active);
}

.village-callout--village-color5 {
  background-image: linear-gradient(0deg, var(--border-default-village-color5), var(--border-default-village-color5));
  background-color: var(--background-contrast-village-color5);

  --idle: transparent;
  --hover: var(--background-contrast-village-color5-hover);
  --active: var(--background-contrast-village-color5-active);
}

.village-callout--village-color6 {
  background-image: linear-gradient(0deg, var(--border-default-village-color6), var(--border-default-village-color6));
  background-color: var(--background-contrast-village-color6);

  --idle: transparent;
  --hover: var(--background-contrast-village-color6-hover);
  --active: var(--background-contrast-village-color6-active);
}

.village-callout--village-color7 {
  background-image: linear-gradient(0deg, var(--border-default-village-color7), var(--border-default-village-color7));
  background-color: var(--background-contrast-village-color7);

  --idle: transparent;
  --hover: var(--background-contrast-village-color7-hover);
  --active: var(--background-contrast-village-color7-active);
}

.village-callout--village-color8 {
  background-image: linear-gradient(0deg, var(--border-default-village-color8), var(--border-default-village-color8));
  background-color: var(--background-contrast-village-color8);

  --idle: transparent;
  --hover: var(--background-contrast-village-color8-hover);
  --active: var(--background-contrast-village-color8-active);
}

.village-callout--village-color9 {
  background-image: linear-gradient(0deg, var(--border-default-village-color9), var(--border-default-village-color9));
  background-color: var(--background-contrast-village-color9);

  --idle: transparent;
  --hover: var(--background-contrast-village-color9-hover);
  --active: var(--background-contrast-village-color9-active);
}

.village-callout--village-color10 {
  background-image: linear-gradient(0deg, var(--border-default-village-color10), var(--border-default-village-color10));
  background-color: var(--background-contrast-village-color10);

  --idle: transparent;
  --hover: var(--background-contrast-village-color10-hover);
  --active: var(--background-contrast-village-color10-active);
}

.village-callout--village-color11 {
  background-image: linear-gradient(0deg, var(--border-default-village-color11), var(--border-default-village-color11));
  background-color: var(--background-contrast-village-color11);

  --idle: transparent;
  --hover: var(--background-contrast-village-color11-hover);
  --active: var(--background-contrast-village-color11-active);
}

.village-callout--village-color12 {
  background-image: linear-gradient(0deg, var(--border-default-village-color12), var(--border-default-village-color12));
  background-color: var(--background-contrast-village-color12);

  --idle: transparent;
  --hover: var(--background-contrast-village-color12-hover);
  --active: var(--background-contrast-village-color12-active);
}

.village-callout--village-color13 {
  background-image: linear-gradient(0deg, var(--border-default-village-color13), var(--border-default-village-color13));
  background-color: var(--background-contrast-village-color13);

  --idle: transparent;
  --hover: var(--background-contrast-village-color13-hover);
  --active: var(--background-contrast-village-color13-active);
}

.village-callout--village-color14 {
  background-image: linear-gradient(0deg, var(--border-default-village-color14), var(--border-default-village-color14));
  background-color: var(--background-contrast-village-color14);

  --idle: transparent;
  --hover: var(--background-contrast-village-color14-hover);
  --active: var(--background-contrast-village-color14-active);
}

.village-callout--village-color15 {
  background-image: linear-gradient(0deg, var(--border-default-village-color15), var(--border-default-village-color15));
  background-color: var(--background-contrast-village-color15);

  --idle: transparent;
  --hover: var(--background-contrast-village-color15-hover);
  --active: var(--background-contrast-village-color15-active);
}

.village-callout--village-color16 {
  background-image: linear-gradient(0deg, var(--border-default-village-color16), var(--border-default-village-color16));
  background-color: var(--background-contrast-village-color16);

  --idle: transparent;
  --hover: var(--background-contrast-village-color16-hover);
  --active: var(--background-contrast-village-color16-active);
}

.village-callout--village-color17 {
  background-image: linear-gradient(0deg, var(--border-default-village-color17), var(--border-default-village-color17));
  background-color: var(--background-contrast-village-color17);

  --idle: transparent;
  --hover: var(--background-contrast-village-color17-hover);
  --active: var(--background-contrast-village-color17-active);
}

.village-callout--village-color18 {
  background-image: linear-gradient(0deg, var(--border-default-village-color18), var(--border-default-village-color18));
  background-color: var(--background-contrast-village-color18);

  --idle: transparent;
  --hover: var(--background-contrast-village-color18-hover);
  --active: var(--background-contrast-village-color18-active);
}

.village-callout--village-color19 {
  background-image: linear-gradient(0deg, var(--border-default-village-color19), var(--border-default-village-color19));
  background-color: var(--background-contrast-village-color19);

  --idle: transparent;
  --hover: var(--background-contrast-village-color19-hover);
  --active: var(--background-contrast-village-color19-active);
}

@media (min-width: 36em) {
  /*! media sm */
}

@media (min-width: 48em) {
  /*! media md */
  .village-callout {
    padding: 2rem 3rem;
  }

  .village-callout[class^=village-icon-]::before,
  .village-callout[class*=" village-icon-"]::before,
  .village-callout[class^=village-fi-]::before,
  .village-callout[class*=" village-fi-"]::before {
    margin: -1rem 0 1rem -2rem;
  }

  .village-callout__title {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 62em) {
  /*! media lg */
}

@media (min-width: 78em) {
  /*! media xl */
}