/*
 * DSFR v1.0.0-rc1.0 | restricted use
 */
@charset "UTF-8";

/* ------------------------------------ *\
  BUTTONS
\* ------------------------------------ */

.fr-btn,
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class*="fr-fi-"]),
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"],
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*="fr-fi-"],
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*="fr-fi-"] {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.fr-btn[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  border: none;
}

.fr-btn,
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class*="fr-fi-"]),
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"],
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*="fr-fi-"],
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*="fr-fi-"] {
  overflow: hidden;
  z-index: 1;
}

.fr-btn,
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class*="fr-fi-"]),
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"],
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*="fr-fi-"],
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*="fr-fi-"] {
  font-size: 1rem;
  line-height: 1.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 1.5rem;
}

.fr-btn--sm, .fr-btns-group--sm .fr-btn:not([class*="fr-fi-"]),
.fr-btns-group--sm:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"],
.fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"],
.fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"] {
  font-size: 0.875rem;
  line-height: 1.5rem;
  min-height: 2rem;
  padding: 0.25rem 1rem;
}

.fr-btn--lg, .fr-btns-group--lg .fr-btn:not([class*="fr-fi-"]),
.fr-btns-group--lg:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"],
.fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"],
.fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"] {
  font-size: 1.25rem;
  line-height: 2rem;
  min-height: 3.5rem;
  padding: 0.75rem 2rem;
}

.fr-btn:not([class*="btn--icon-"])[class^="fr-fi-"],
.fr-btn:not([class*="btn--icon-"])[class*=" fr-fi-"],
.fr-btns-group--sm:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"],
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"],
.fr-btns-group--lg:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"] {
  flex-direction: row;
  max-width: 2.5rem;
  max-height: 2.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.fr-btn[class^="fr-fi-"]:not([class*="btn--icon-"])::before,
.fr-btn[class*=" fr-fi-"]:not([class*="btn--icon-"])::before,
.fr-btns-group--sm:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"]::before,
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"]::before,
.fr-btns-group--lg:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"]::before {
  margin-left: 0;
  margin-right: 0.5rem;
  font-size: 1.5rem;
}

.fr-btn--sm:not([class*="btn--icon-"])[class^="fr-fi-"],
.fr-btn--sm:not([class*="btn--icon-"])[class*=" fr-fi-"],
.fr-btns-group--sm:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"] {
  flex-direction: row;
  max-width: 2rem;
  max-height: 2rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.fr-btn--sm[class^="fr-fi-"]:not([class*="btn--icon-"])::before,
.fr-btn--sm[class*=" fr-fi-"]:not([class*="btn--icon-"])::before,
.fr-btns-group--sm:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"]::before {
  margin-left: 0;
  margin-right: 0.5rem;
  font-size: 1rem;
}

.fr-btn--lg:not([class*="btn--icon-"])[class^="fr-fi-"],
.fr-btn--lg:not([class*="btn--icon-"])[class*=" fr-fi-"],
.fr-btns-group--lg:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"] {
  flex-direction: row;
  max-width: 3.5rem;
  max-height: 3.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.fr-btn--lg[class^="fr-fi-"]:not([class*="btn--icon-"])::before,
.fr-btn--lg[class*=" fr-fi-"]:not([class*="btn--icon-"])::before,
.fr-btns-group--lg:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"]::before {
  margin-left: 0;
  margin-right: 0.75rem;
  font-size: 2rem;
}

.fr-btn--icon-left[class^="fr-fi-"], .fr-btn--icon-left[class*=" fr-fi-"],
.fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"],
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*="fr-fi-"],
.fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"] {
  flex-direction: row;
}

.fr-btn--icon-left[class^="fr-fi-"]::before,
.fr-btn--icon-left[class*=" fr-fi-"]::before,
.fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"]::before,
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*="fr-fi-"]::before,
.fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"]::before {
  margin-left: -0.25rem;
  margin-right: 0.5rem;
  font-size: 1rem;
}

.fr-btn--sm.fr-btn--icon-left[class^="fr-fi-"],
.fr-btn--sm.fr-btn--icon-left[class*=" fr-fi-"],
.fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"] {
  flex-direction: row;
}

.fr-btn--sm.fr-btn--icon-left[class^="fr-fi-"]::before,
.fr-btn--sm.fr-btn--icon-left[class*=" fr-fi-"]::before,
.fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"]::before {
  margin-left: -0.25rem;
  margin-right: 0.5rem;
  font-size: 1rem;
}

.fr-btn--lg.fr-btn--icon-left[class^="fr-fi-"],
.fr-btn--lg.fr-btn--icon-left[class*=" fr-fi-"],
.fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"] {
  flex-direction: row;
}

.fr-btn--lg.fr-btn--icon-left[class^="fr-fi-"]::before,
.fr-btn--lg.fr-btn--icon-left[class*=" fr-fi-"]::before,
.fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"]::before {
  margin-left: -0.375rem;
  margin-right: 0.5rem;
  font-size: 1.5rem;
}

.fr-btn--icon-right[class^="fr-fi-"], .fr-btn--icon-right[class*=" fr-fi-"],
.fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"],
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*="fr-fi-"],
.fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"] {
  flex-direction: row-reverse;
}

.fr-btn--icon-right[class^="fr-fi-"]::before,
.fr-btn--icon-right[class*=" fr-fi-"]::before,
.fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"]::before,
.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*="fr-fi-"]::before,
.fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"]::before {
  margin-right: -0.25rem;
  margin-left: 0.5rem;
  font-size: 1rem;
}

.fr-btn--sm.fr-btn--icon-right[class^="fr-fi-"],
.fr-btn--sm.fr-btn--icon-right[class*=" fr-fi-"],
.fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"] {
  flex-direction: row-reverse;
}

.fr-btn--sm.fr-btn--icon-right[class^="fr-fi-"]::before,
.fr-btn--sm.fr-btn--icon-right[class*=" fr-fi-"]::before,
.fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"]::before {
  margin-right: -0.25rem;
  margin-left: 0.5rem;
  font-size: 1rem;
}

.fr-btn--lg.fr-btn--icon-right[class^="fr-fi-"],
.fr-btn--lg.fr-btn--icon-right[class*=" fr-fi-"],
.fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"] {
  flex-direction: row-reverse;
}

.fr-btn--lg.fr-btn--icon-right[class^="fr-fi-"]::before,
.fr-btn--lg.fr-btn--icon-right[class*=" fr-fi-"]::before,
.fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"]::before {
  margin-right: -0.375rem;
  margin-left: 0.5rem;
  font-size: 1.5rem;
}

.fr-btn {
  --is-link: false;
  margin: 0;
}

.fr-btns-group {
  --is-list: false;
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin-right: 0;
  margin-left: 0;
  /**
  * fr-btns-group--inline : aligne les boutons horizontalement dans tout les cas
  * fr-btns-group--inline-(sm/md/lg) : permet de passer en horizontal à partir de la valeur du breakpoint appliqué (sm, md, lg)
  *//**
  * fr-btns-group--left : (Défaut) aligne les boutons sur la gauche (en lecture L-t-R)
  *//**
  * fr-btns-group--right : aligne les boutons sur la droite
  *//**
  * fr-btns-group--center : aligne les boutons au centre du conteneur
  *//**
  * fr-btns-group--equisized : Fixe la largeur des boutons à celle du plus grand. Géré en grande partie en JS.
  *//**
  * fr-btns-group--sm : Fixe les boutons à la taille SM
  *//**
  * fr-btns-group--md : (défaut) Fixe les boutons à la taille MD
  *//**
  * fr-btns-group--lg : Fixe les boutons à la taille LG (sans modfifieur => MD)
  */
}

.fr-btns-group > li {
  width: 100%;
  max-width: 100%;
}

.fr-btns-group .fr-btn {
  width: 100%;
  margin-right: 0;
  margin-left: 0;
}

.fr-btns-group .fr-btn {
  margin-bottom: 1rem;
  justify-content: center;
}

.fr-btns-group--inline {
  width: calc(100% + 1rem);
}

.fr-btns-group--inline .fr-btn {
  width: auto;
  margin-right: 1rem;
  max-width: 100%;
}

.fr-btns-group--inline > li {
  display: inline-flex;
  max-width: 100%;
  width: auto;
}

.fr-btns-group--inline > li::before {
  content: none;
}

.fr-btns-group--inline.fr-btns-group--right {
  margin-left: -1rem;
}

.fr-btns-group--inline.fr-btns-group--right .fr-btn {
  margin-right: 0;
  margin-left: 1rem;
}

.fr-btns-group--inline.fr-btns-group--right.fr-btns-group--inline-reverse {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.fr-btns-group--inline.fr-btns-group--center,
.fr-btns-group--inline.fr-btns-group--left {
  margin-right: -1rem;
}

.fr-btns-group--inline.fr-btns-group--center .fr-btn,
.fr-btns-group--inline.fr-btns-group--left .fr-btn {
  margin-right: 1rem;
  margin-left: 0;
}

.fr-btns-group--left, .fr-btns-group--left li {
  justify-content: flex-start;
  text-align: left;
}

.fr-btns-group--right, .fr-btns-group--right li {
  justify-content: flex-end;
  text-align: right;
}

.fr-btns-group--center, .fr-btns-group--center li {
  justify-content: center;
  text-align: center;
}

.fr-btns-group--equisized .fr-btn {
  justify-content: center;
}

.fr-btns-group--sm .fr-btn:not([class*="fr-fi-"]) {
  max-width: none;
  max-height: none;
}

.fr-btns-group--sm:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"] {
  justify-content: flex-start;
}

.fr-btns-group--sm.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"] {
  max-width: none;
  max-height: none;
}

.fr-btns-group--sm.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"] {
  max-width: none;
  max-height: none;
}

.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg) .fr-btn:not([class*="fr-fi-"]) {
  max-width: none;
  max-height: none;
}

.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg):not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"] {
  justify-content: flex-start;
}

.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-left .fr-btn[class*="fr-fi-"] {
  max-width: none;
  max-height: none;
}

.fr-btns-group:not(.fr-btns-group--sm):not(.fr-btns-group--lg).fr-btns-group--icon-right .fr-btn[class*="fr-fi-"] {
  max-width: none;
  max-height: none;
}

.fr-btns-group--lg .fr-btn:not([class*="fr-fi-"]) {
  max-width: none;
  max-height: none;
}

.fr-btns-group--lg:not([class*="fr-btns-group--icon-"]) .fr-btn[class*="fr-fi-"] {
  justify-content: flex-start;
}

.fr-btns-group--lg.fr-btns-group--icon-left .fr-btn[class*="fr-fi-"] {
  max-width: none;
  max-height: none;
}

.fr-btns-group--lg.fr-btns-group--icon-right .fr-btn[class*="fr-fi-"] {
  max-width: none;
  max-height: none;
}

.fr-btn {
  background-color: var(--bf500);
  color: var(--w-bf500);
}

:root:not([data-fr-theme="dark" i]) .fr-btn {
  --color-hover: rgba(0, 0, 221, 0.5);
  --color-active: rgba(41, 41, 255, 0.5);
}

:root:not([data-fr-theme="dark" i]) [class*="fr-scheme-light"] .fr-btn,
:root:not([data-fr-theme="dark" i]) [class*="--scheme-light-"] .fr-btn {
  --color-hover: rgba(0, 0, 221, 0.5);
  --color-active: rgba(41, 41, 255, 0.5);
}

:root:not([data-fr-theme="dark" i]) [class*="fr-scheme-dark"] .fr-btn,
:root:not([data-fr-theme="dark" i]) [class*="--scheme-dark-"] .fr-btn {
  --color-hover: rgba(71, 71, 255, 0.5);
  --color-active: rgba(0, 0, 243, 0.5);
}

:root[data-fr-theme="dark" i] .fr-btn {
  --color-hover: rgba(71, 71, 255, 0.5);
  --color-active: rgba(0, 0, 243, 0.5);
}

button.fr-btn[disabled], a.fr-btn:not([href]) {
  color: var(--g600-g400);
  background-color: var(--g200);
}

.fr-btn--secondary {
  background-color: var(--t-plain);
  color: var(--bf500);
  box-shadow: inset 0 0 0 1px var(--bf500);
}

:root:not([data-fr-theme="dark" i]) .fr-btn--secondary {
  --color-hover: var(--block-color-hover);
  --color-active: var(--block-color-active);
}

:root:not([data-fr-theme="dark" i]) [class*="fr-scheme-light"] .fr-btn--secondary,
:root:not([data-fr-theme="dark" i]) [class*="--scheme-light-"] .fr-btn--secondary {
  --color-hover: var(--block-color-hover);
  --color-active: var(--block-color-active);
}

:root:not([data-fr-theme="dark" i]) [class*="fr-scheme-dark"] .fr-btn--secondary,
:root:not([data-fr-theme="dark" i]) [class*="--scheme-dark-"] .fr-btn--secondary {
  --color-hover: var(--block-color-hover);
  --color-active: var(--block-color-active);
}

:root[data-fr-theme="dark" i] .fr-btn--secondary {
  --color-hover: var(--block-color-hover);
  --color-active: var(--block-color-active);
}

button.fr-btn--secondary[disabled], a.fr-btn--secondary:not([href]) {
  color: var(--g600-g400);
  box-shadow: inset 0 0 0 1px var(--g400);
  background-color: var(--t-plain);
}

@media (min-width: 36em) {
  .fr-btns-group--inline-sm {
    width: calc(100% + 1rem);
  }

  .fr-btns-group--inline-sm .fr-btn {
    width: auto;
    margin-right: 1rem;
    max-width: 100%;
  }

  .fr-btns-group--inline-sm > li {
    display: inline-flex;
    max-width: 100%;
    width: auto;
  }

  .fr-btns-group--inline-sm > li::before {
    content: none;
  }

  .fr-btns-group--inline-sm.fr-btns-group--right {
    margin-left: -1rem;
  }

  .fr-btns-group--inline-sm.fr-btns-group--right .fr-btn {
    margin-right: 0;
    margin-left: 1rem;
  }

  .fr-btns-group--inline-sm.fr-btns-group--right.fr-btns-group--inline-reverse {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .fr-btns-group--inline-sm.fr-btns-group--center,
  .fr-btns-group--inline-sm.fr-btns-group--left {
    margin-right: -1rem;
  }

  .fr-btns-group--inline-sm.fr-btns-group--center .fr-btn,
  .fr-btns-group--inline-sm.fr-btns-group--left .fr-btn {
    margin-right: 1rem;
    margin-left: 0;
  }
}

@media (min-width: 48em) {
  .fr-btns-group--inline-md {
    width: calc(100% + 1rem);
  }

  .fr-btns-group--inline-md .fr-btn {
    width: auto;
    margin-right: 1rem;
    max-width: 100%;
  }

  .fr-btns-group--inline-md > li {
    display: inline-flex;
    max-width: 100%;
    width: auto;
  }

  .fr-btns-group--inline-md > li::before {
    content: none;
  }

  .fr-btns-group--inline-md.fr-btns-group--right {
    margin-left: -1rem;
  }

  .fr-btns-group--inline-md.fr-btns-group--right .fr-btn {
    margin-right: 0;
    margin-left: 1rem;
  }

  .fr-btns-group--inline-md.fr-btns-group--right.fr-btns-group--inline-reverse {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .fr-btns-group--inline-md.fr-btns-group--center,
  .fr-btns-group--inline-md.fr-btns-group--left {
    margin-right: -1rem;
  }

  .fr-btns-group--inline-md.fr-btns-group--center .fr-btn,
  .fr-btns-group--inline-md.fr-btns-group--left .fr-btn {
    margin-right: 1rem;
    margin-left: 0;
  }
}

@media (min-width: 62em) {
  .fr-btns-group--inline-lg {
    width: calc(100% + 1rem);
  }

  .fr-btns-group--inline-lg .fr-btn {
    width: auto;
    margin-right: 1rem;
    max-width: 100%;
  }

  .fr-btns-group--inline-lg > li {
    display: inline-flex;
    max-width: 100%;
    width: auto;
  }

  .fr-btns-group--inline-lg > li::before {
    content: none;
  }

  .fr-btns-group--inline-lg.fr-btns-group--right {
    margin-left: -1rem;
  }

  .fr-btns-group--inline-lg.fr-btns-group--right .fr-btn {
    margin-right: 0;
    margin-left: 1rem;
  }

  .fr-btns-group--inline-lg.fr-btns-group--right.fr-btns-group--inline-reverse {
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .fr-btns-group--inline-lg.fr-btns-group--center,
  .fr-btns-group--inline-lg.fr-btns-group--left {
    margin-right: -1rem;
  }

  .fr-btns-group--inline-lg.fr-btns-group--center .fr-btn,
  .fr-btns-group--inline-lg.fr-btns-group--left .fr-btn {
    margin-right: 1rem;
    margin-left: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .fr-btn:not(a):not(:disabled):hover, a.fr-btn[href]:hover {
    background-image: linear-gradient(0deg, var(--color-hover), var(--color-hover));
  }

  .fr-btn:not(a):not(:disabled):active, a.fr-btn[href]:active {
    background-image: linear-gradient(0deg, var(--color-active), var(--color-active));
  }
}
