/* ¯¯¯¯¯¯¯¯¯ *\
   KEY FIGURE
 \* ˍˍˍˍˍˍˍˍˍ */
 .fr-key-figure {
    position: relative;
    display: flex;
    flex-direction: column;

    --text-spacing: 0;
    --title-spacing: 0 0 0.25rem;
    background-size: 100% 1px, 1px 100%, 1px 100%, 100% 1px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: 0 100%, 0 0, 100% 0, 100% 0;
    padding: 2rem 2rem 2.25rem;
    text-align: center;
    background-color: var(--background-default-grey);

    --idle: transparent;
    --hover: var(--background-default-grey-hover);
    --active: var(--background-default-grey-active);
  }

  .fr-grid-row .fr-key-figure {
    height: 100%;
  }

  .fr-key-figure__header {
    order: 1;
    margin-bottom: 1rem;
  }

  .fr-key-figure__content {
    flex-direction: column;
    align-items: center;
    height: 100%;
  }

  .fr-key-figure__body {
    height: 100%;
    order: 2;
    flex: 1 1 auto;
  }

  .fr-key-figure__title {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
    order: 2;
    color: var(--text-title-grey);
  }

  .fr-key-figure__title::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-position: 0 100%;
    background-size: 100% 0.25rem;
    background-repeat: no-repeat;
    background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey));
  }

  .fr-key-figure__title a::before {
    background-position: 0 100%;
    background-size: 100% 0.25rem;
    background-repeat: no-repeat;
    background-image: linear-gradient(0deg, var(--border-active-blue-france), var(--border-active-blue-france));
  }

  .fr-key-figure__title a::after {
    flex: 0 0 auto;
    /*display: inline-block;*/
    vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
    background-color: currentColor;
    width: var(--icon-size);
    height: var(--icon-size);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-image: url("../../icons/system/arrow-right-line.svg");
    mask-image: url("../../icons/system/arrow-right-line.svg");
    --icon-size: 1.5rem;
    content: "";
  }

  .fr-key-figure__title [target=_blank]::after {
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
    background-color: currentColor;
    width: var(--icon-size);
    height: var(--icon-size);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-image: url("../../icons/system/external-link-line.svg");
    mask-image: url("../../icons/system/external-link-line.svg");
    content: "";
  }

  .fr-key-figure__desc {
    font-size: 1rem;
    line-height: 1.5rem;
    flex: 1 1 auto;
    order: 3;
  }

  .fr-key-figure--sm {
    padding: 1.5rem 1.5rem 1.75rem;
  }

  .fr-key-figure--sm .fr-key-figure__title {
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 0.25rem;
  }

  .fr-key-figure--sm .fr-key-figure__title a::after {
    --icon-size: 1rem;
  }

  .fr-key-figure--sm .fr-key-figure__desc {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  .fr-key-figure--sm .fr-key-figure__start {
    margin-bottom: 0.5rem;
  }

  .fr-key-figure--horizontal {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
  }

  .fr-key-figure--horizontal .fr-key-figure__content {
    align-items: flex-start;
  }

  .fr-key-figure--horizontal:not(.fr-key-figure--no-icon) .fr-key-figure__detail {
    padding-right: 2rem;
    margin-bottom: -2.5rem;
    margin-top: 1.25rem;
  }

  .fr-key-figure--horizontal:not(.fr-key-figure--no-icon) .fr-key-figure__content {
    padding-bottom: 2.5rem;
  }

  .fr-key-figure--horizontal:not(.fr-key-figure--no-icon).fr-key-figure--sm .fr-key-figure__detail {
    padding-right: 2rem;
    margin-bottom: -2rem;
    margin-top: 0.75rem;
  }

  .fr-key-figure--horizontal:not(.fr-key-figure--no-icon).fr-key-figure--sm .fr-key-figure__content {
    padding-bottom: 2rem;
  }

  .fr-key-figure:not(.fr-key-figure--no-border):not(.fr-key-figure--shadow) {
    background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey)), linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey));
  }

  .fr-key-figure--grey {
    background-color: var(--background-contrast-grey);

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

  .fr-key-figure--shadow {
    z-index: calc(var(--ground) + 500);
    background-color: var(--background-raised-grey);

    --idle: transparent;
    --hover: var(--background-raised-grey-hover);
    --active: var(--background-raised-grey-active);
    filter: drop-shadow(var(--raised-shadow));
  }

  .fr-key-figure--shadow.fr-key-figure--grey {
    background-color: var(--background-contrast-raised-grey);

    --idle: transparent;
    --hover: var(--background-contrast-raised-grey-hover);
    --active: var(--background-contrast-raised-grey-active);
  }

  .fr-key-figure--no-background {
    background-color: transparent;

    --hover: inherit;
    --active: inherit;
  }

  .fr-key-figure__title:disabled,
  a.fr-key-figure__title:not([href]) {
    color: var(--text-disabled-grey);
    background-color: var(--background-disabled-grey);

    --idle: transparent;
    --hover: var(--background-disabled-grey-hover);
    --active: var(--background-disabled-grey-active);
  }

  .fr-key-figure__title a {
    color: var(--text-action-high-blue-france);
  }

  .fr-key-figure__title a:not([href]) {
    color: var(--text-disabled-grey);
  }

  .fr-key-figure__title a:not([href])::before {
    background-image: linear-gradient(0deg, var(--border-disabled-grey), var(--border-disabled-grey));
  }

  .fr-key-figure__body > .fr-key-figure__desc {
    padding-bottom: 2.5rem;
  }

  .fr-key-figure--horizontal .fr-key-figure__img {
    width: 3rem;
    height: 3rem;
    margin: 0 1.5rem 0 0;
  }
  @media (min-width: 36em) {
    /*! media sm */

    /*! media sm */
  }
  @media (min-width: 48em) {
    /*! media md */
    .fr-key-figure__title {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }

    .fr-key-figure--vertical\@md {
      flex-direction: column;
      text-align: center;
      align-items: center;
    }

    .fr-key-figure--vertical\@md .fr-key-figure__header {
      margin-bottom: 1rem;
      margin-right: 0 !important;
    }

    .fr-key-figure--vertical\@md .fr-key-figure__pictogram {
      width: 5rem;
      height: 5rem;
    }

    .fr-key-figure--vertical\@md .fr-key-figure__content {
      align-items: center;
    }

    .fr-key-figure--vertical\@md .fr-key-figure__detail {
      margin-top: 0.75rem;
    }

    .fr-key-figure--vertical\@md.fr-enlarge-link:not(.fr-key-figure--no-icon) .fr-key-figure__content {
      padding-bottom: 2.5rem;
    }

    .fr-key-figure--vertical\@md.fr-enlarge-link:not(.fr-key-figure--no-icon) .fr-key-figure__detail {
      margin-bottom: 0;
      padding-right: 0;
    }

    .fr-key-figure--horizontal .fr-key-figure__img {
      width: 5rem;
      height: 5rem;
      margin: 0 2rem 0 0;
    }

    /*! media md */
  }
  @media (min-width: 62em) {
    /*! media lg */
    .fr-key-figure--vertical\@lg {
      flex-direction: column;
      text-align: center;
      align-items: center;
    }

    .fr-key-figure--vertical\@lg .fr-key-figure__header {
      margin-bottom: 1rem;
      margin-right: 0 !important;
    }

    .fr-key-figure--vertical\@lg .fr-key-figure__pictogram {
      width: 5rem;
      height: 5rem;
    }

    .fr-key-figure--vertical\@lg .fr-key-figure__content {
      align-items: center;
    }

    .fr-key-figure--vertical\@lg .fr-key-figure__detail {
      margin-top: 0.75rem;
    }

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

    /*! media xl */
  }
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /**
    * Correctif de la largeur du texte dans la tuile
    */
    .fr-key-figure--download .fr-key-figure__body,
    .fr-key-figure--horizontal .fr-key-figure__body {
      flex-basis: 100%;
    }

    .fr-key-figure__body,
    .fr-key-figure__body > * {
      max-width: 100%;
    }

    .fr-key-figure__title {
      margin: 0 0 0.5rem;
      max-width: 100%;
      color: #161616;
    }

    .fr-key-figure__title a::after {
      background-color: transparent;
      background-size: 100%;
      background-repeat: no-repeat;
      background-image: url("../../icons/system/arrow-right-line.svg");
      width: 1rem;
      height: 1rem;
    }

    .fr-key-figure__title [target=_blank]::after {
      background-color: transparent;
      background-size: 100%;
      background-repeat: no-repeat;
      background-image: url("../../icons/system/external-link-line.svg");
      width: 1rem;
      height: 1rem;
    }

    .fr-key-figure__desc {
      margin: 0;
      max-width: 100%;
    }

    .fr-key-figure__start,
    .fr-key-figure__detail {
      max-width: 100%;
    }

    .fr-key-figure--sm .fr-key-figure__title a::after {
      width: 1rem;
      height: 1rem;
    }

    .fr-key-figure {
      background-color: #fff;
    }

    .fr-key-figure:not(.fr-key-figure--no-border):not(.fr-key-figure--shadow) {
      background-image: linear-gradient(0deg, #ddd, #ddd), linear-gradient(0deg, #ddd, #ddd), linear-gradient(0deg, #ddd, #ddd), linear-gradient(0deg, #ddd, #ddd);
    }

    .fr-key-figure--grey {
      background-color: #eee;
    }

    .fr-key-figure--shadow {
      z-index: 500;
      background-color: #fff;
    }

    .fr-key-figure--shadow.fr-key-figure--grey {
      background-color: #eee;
    }


    .fr-key-figure__title:disabled,
    a.fr-key-figure__title:not([href]) {
      color: #929292;
      background-color: #e5e5e5;
    }

    .fr-key-figure__title::before {
      background-image: linear-gradient(0deg, #3a3a3a, #3a3a3a);
    }

    .fr-key-figure__title a {
      color: #000091;
    }

    .fr-key-figure__title a::before {
      background-image: linear-gradient(0deg, #000091, #000091);
    }

    .fr-key-figure__title a:not([href]) {
      color: #929292;
    }

    .fr-key-figure__title a:not([href])::before {
      background-image: linear-gradient(0deg, #e5e5e5, #e5e5e5);
    }
  }
  @media (-ms-high-contrast: none) and (min-width: 48em), (-ms-high-contrast: active) and (min-width: 48em) {
    .fr-key-figure--download.fr-key-figure--vertical\@md .fr-key-figure__body,
    .fr-key-figure--horizontal.fr-key-figure--vertical\@md .fr-key-figure__body {
      flex-basis: auto;
    }
  }
  @media (-ms-high-contrast: none) and (min-width: 62em), (-ms-high-contrast: active) and (min-width: 62em) {
    .fr-key-figure--download.fr-key-figure--vertical\@lg .fr-key-figure__body,
    .fr-key-figure--horizontal.fr-key-figure--vertical\@lg .fr-key-figure__body {
      flex-basis: auto;
    }
  }

  .fr-key-figure--green-tilleul-verveine {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-green-tilleul-verveine);
     background-color: var(--background-contrast-green-tilleul-verveine);

     --idle: transparent;
     --hover: var(--background-contrast-green-tilleul-verveine-hover);
     --active: var(--background-contrast-green-tilleul-verveine-active);
   }

   .fr-key-figure--green-bourgeon {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-green-bourgeon);
     background-color: var(--background-contrast-green-bourgeon);

     --idle: transparent;
     --hover: var(--background-contrast-green-bourgeon-hover);
     --active: var(--background-contrast-green-bourgeon-active);
   }

   .fr-key-figure--green-emeraude {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-green-emeraude);
     background-color: var(--background-contrast-green-emeraude);

     --idle: transparent;
     --hover: var(--background-contrast-green-emeraude-hover);
     --active: var(--background-contrast-green-emeraude-active);
   }

   .fr-key-figure--green-menthe {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-green-menthe);
     background-color: var(--background-contrast-green-menthe);

     --idle: transparent;
     --hover: var(--background-contrast-green-menthe-hover);
     --active: var(--background-contrast-green-menthe-active);
   }

   .fr-key-figure--green-archipel {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-green-archipel);
     background-color: var(--background-contrast-green-archipel);

     --idle: transparent;
     --hover: var(--background-contrast-green-archipel-hover);
     --active: var(--background-contrast-green-archipel-active);
   }

   .fr-key-figure--blue-ecume {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-blue-ecume);
     background-color: var(--background-contrast-blue-ecume);

     --idle: transparent;
     --hover: var(--background-contrast-blue-ecume-hover);
     --active: var(--background-contrast-blue-ecume-active);
   }

   .fr-key-figure--blue-cumulus {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-blue-cumulus);
     background-color: var(--background-contrast-blue-cumulus);

     --idle: transparent;
     --hover: var(--background-contrast-blue-cumulus-hover);
     --active: var(--background-contrast-blue-cumulus-active);
   }

   .fr-key-figure--blue-france {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-blue-france);
     background-color: var(--background-contrast-blue-france);

     --idle: transparent;
     --hover: var(--background-contrast-blue-france-hover);
     --active: var(--background-contrast-blue-france-active);
   }

   .fr-key-figure--purple-glycine {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-purple-glycine);
     background-color: var(--background-contrast-purple-glycine);

     --idle: transparent;
     --hover: var(--background-contrast-purple-glycine-hover);
     --active: var(--background-contrast-purple-glycine-active);
   }

   .fr-key-figure--pink-macaron {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-pink-macaron);
     background-color: var(--background-contrast-pink-macaron);

     --idle: transparent;
     --hover: var(--background-contrast-pink-macaron-hover);
     --active: var(--background-contrast-pink-macaron-active);
   }

   .fr-key-figure--pink-tuile {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-pink-tuile);
     background-color: var(--background-contrast-pink-tuile);

     --idle: transparent;
     --hover: var(--background-contrast-pink-tuile-hover);
     --active: var(--background-contrast-pink-tuile-active);
   }

   .fr-key-figure--red-marianne {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-red-marianne);
     background-color: var(--background-contrast-red-marianne);

     --idle: transparent;
     --hover: var(--background-contrast-red-marianne-hover);
     --active: var(--background-contrast-red-marianne-active);
   }

   .fr-key-figure--yellow-tournesol {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-yellow-tournesol);
     background-color: var(--background-contrast-yellow-tournesol);

     --idle: transparent;
     --hover: var(--background-contrast-yellow-tournesol-hover);
     --active: var(--background-contrast-yellow-tournesol-active);
   }

   .fr-key-figure--yellow-moutarde {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-yellow-moutarde);
     background-color: var(--background-contrast-yellow-moutarde);

     --idle: transparent;
     --hover: var(--background-contrast-yellow-moutarde-hover);
     --active: var(--background-contrast-yellow-moutarde-active);
   }

   .fr-key-figure--orange-terre-battue {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-orange-terre-battue);
     background-color: var(--background-contrast-orange-terre-battue);

     --idle: transparent;
     --hover: var(--background-contrast-orange-terre-battue-hover);
     --active: var(--background-contrast-orange-terre-battue-active);
   }

   .fr-key-figure--brown-cafe-creme {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-brown-cafe-creme);
     background-color: var(--background-contrast-brown-cafe-creme);

     --idle: transparent;
     --hover: var(--background-contrast-brown-cafe-creme-hover);
     --active: var(--background-contrast-brown-cafe-creme-active);
   }

   .fr-key-figure--brown-caramel {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-brown-caramel);
     background-color: var(--background-contrast-brown-caramel);

     --idle: transparent;
     --hover: var(--background-contrast-brown-caramel-hover);
     --active: var(--background-contrast-brown-caramel-active);
   }

   .fr-key-figure--brown-opera {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-brown-opera);
     background-color: var(--background-contrast-brown-opera);

     --idle: transparent;
     --hover: var(--background-contrast-brown-opera-hover);
     --active: var(--background-contrast-brown-opera-active);
   }

   .fr-key-figure--beige-gris-galet {
     box-shadow: inset 0.25rem 0 0 0 var(--border-default-beige-gris-galet);
     background-color: var(--background-contrast-beige-gris-galet);

     --idle: transparent;
     --hover: var(--background-contrast-beige-gris-galet-hover);
     --active: var(--background-contrast-beige-gris-galet-active);
   }