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

/* ¯¯¯¯¯¯¯¯¯ *\
  RADIO
\* ˍˍˍˍˍˍˍˍˍ */

/**
 * L'input de type radio avec son label est contenu dans un groupe
 * Ce groupe contient également le texte d'aide (optionnels)
 */
.fr-radio-group {
  position: relative;

  /**
   * Dans le cas d'un groupe de radios, on supprime l'espacement du premier groupe
   */

  /**
   * Dans le cas d'un groupe de radios, on supprime l'espacement du dernier groupe
   */

  /**
   * On cache l'input de type radio pour le styler via le label
   */
  /**
  * On cache l'input de type radio pour le styler via le label
  */
}

.fr-radio-group:first-child {
  margin-top: -0.75rem;
}

.fr-radio-group:first-child input[type=radio] + label {
  margin-top: 0;
}

.fr-radio-group:last-child {
  margin-bottom: -0.75rem;
}

.fr-radio-group input[type=radio] {
  position: absolute;
  margin: 0;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);

  /**
   * On applique un display grid sur le label afin de gérer le positionnement des élements
   */
  /**
  * On applique les styles au pseudo élément before du label quand l'input présente
  * un état check
  */
}

.fr-radio-group input[type=radio] + label {
  position: relative;
  padding: 0.75rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: 2rem;

  /**
   * Style du texte d'aide dans le label
   */

  /**
   * On utilise un pseudo element before pour customiser l'aspect du bouton radio
   */
}

.fr-radio-group input[type=radio] + label .fr-hint-text {
  margin: 0;
  width: 100%;
}

.fr-radio-group input[type=radio] + label::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: -2rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.75rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--border-action-high-grey), inset 0 0 0 12px var(--background-default-grey), inset 0 0 0 12px var(--background-action-high-blue-france);
}

/**
 * Modificateur pour la taille sm
 */
.fr-radio-group--sm input[type=radio] + label::before {
  width: 1rem;
  height: 1rem;
  margin-top: 1rem;
  box-shadow: inset 0 0 0 1px var(--border-action-high-grey), inset 0 0 0 8px var(--background-default-grey), inset 0 0 0 8px var(--background-action-high-blue-france);
}

.fr-radio-rich {
  position: relative;
}

.fr-radio-rich input[type=radio] + label {
  padding-left: 3.5rem;
  margin-left: 0;
  min-height: 5.5rem;
  width: 100%;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 6.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  /**
    * On applique la taille sm pour le bouton radio riche
    */
  box-shadow: inset 0 0 0 1px var(--border-default-grey);
  background-color: var(--background-default-grey);

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

.fr-radio-rich input[type=radio] + label::before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 50%;
  left: 1.75rem;
  margin-top: -0.5rem;
  box-shadow: inset 0 0 0 1px var(--border-action-high-grey), inset 0 0 0 8px var(--background-default-grey), inset 0 0 0 8px var(--background-action-high-blue-france);
}

.fr-radio-rich input[type=radio] + label .fr-hint-text {
  margin-left: 0;
}

.fr-radio-rich input[type=radio]:disabled ~ .fr-radio-rich__img,
.fr-radio-rich input[type=radio][disabled] ~ .fr-radio-rich__img {
  filter: grayscale(1);
}

.fr-radio-rich input[type=radio]:not(:disabled) ~ label {
  --hover-tint: var(--hover);
  --active-tint: var(--active);
}

.fr-radio-rich input[type=radio]:not(:disabled) ~ label:hover {
  background-color: var(--hover-tint);
}

.fr-radio-rich input[type=radio]:not(:disabled) ~ label:active {
  background-color: var(--active-tint);
}

.fr-radio-rich input[type=radio]:not(:disabled) ~ label:hover ~ .fr-radio-rich__img {
  --brightness: calc(100% + var(--brighten) * 10%);
}

.fr-radio-rich input[type=radio]:not(:disabled) ~ label:active ~ .fr-radio-rich__img {
  --brightness: calc(100% + var(--brighten) * 20%);
}

.fr-radio-rich__img {
  filter: brightness(var(--brightness));
  padding-left: 0.25rem;
  width: 5.25rem;
  height: 5rem;
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  display: flex;
  flex-direction: row;
  pointer-events: none;
  box-shadow: inset 1px 0 0 0 var(--border-default-grey);
}

.fr-radio-rich__img img,
.fr-radio-rich__img svg {
  max-width: 5rem;
  object-fit: cover;
}

/**
 * Style spécifique des radios intégrés dans un fiedset
 */
.fr-fieldset {
  /**
   * Modificateur pour afficher les radios en ligne
   */
}

.fr-fieldset .fr-radio-rich:first-child input[type=radio] + label {
  margin-top: 0.75rem;
}

.fr-fieldset .fr-radio-rich input[type=radio] + label {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.fr-fieldset .fr-radio-rich:last-child input[type=radio] + label {
  margin-bottom: 1.75rem;
}

.fr-fieldset--inline {
  /**
   * Écart entre le text d'aide et les radios riches dans le cas des radios inline
   */
}

.fr-fieldset--inline .fr-radio-rich:not(:last-child) input[type=radio] + label {
  margin-right: 0.75rem;
  margin-bottom: 0.5rem;
}

.fr-fieldset--inline .fr-radio-rich:not(:last-child) .fr-radio-rich__img {
  right: 1rem;
}

.fr-fieldset--inline .fr-radio-rich:last-child {
  margin-bottom: 0;
}

.fr-fieldset--inline .fr-radio-rich:last-child input[type=radio] + label {
  margin-bottom: 0.75rem;
}

.fr-fieldset--inline .fr-radio-rich:first-child .fr-radio-rich__img {
  top: 1rem;
}

.fr-fieldset--inline .fr-radio-rich__img {
  top: 0.75rem;
}

.fr-fieldset--inline .fr-hint-text + .fr-fieldset__content .fr-radio-rich:first-child input[type=radio] + label {
  margin-top: 1.5rem;
}

/**
 * Modificateur pour la taille sm
 */

.fr-radio-group input[type=radio]:disabled + label::before {
  box-shadow: inset 0 0 0 1px var(--border-disabled-grey), inset 0 0 0 12px var(--background-default-grey), inset 0 0 0 12px var(--text-disabled-grey);
}

.fr-radio-group input[type=radio]:checked + label::before {
  box-shadow: inset 0 0 0 1px var(--border-action-high-grey), inset 0 0 0 6px var(--background-default-grey), inset 0 0 0 12px var(--background-action-high-blue-france);
}

.fr-radio-group input[type=radio]:checked:disabled + label::before {
  box-shadow: inset 0 0 0 1px var(--border-disabled-grey), inset 0 0 0 6px var(--background-default-grey), inset 0 0 0 12px var(--text-disabled-grey);
}

.fr-radio-group--sm input[type=radio]:disabled + label::before {
  box-shadow: inset 0 0 0 1px var(--border-disabled-grey), inset 0 0 0 8px var(--background-disabled-grey), inset 0 0 0 8px var(--text-disabled-grey);
}

.fr-radio-group--sm input[type=radio]:checked + label::before {
  box-shadow: inset 0 0 0 1px var(--border-action-high-grey), inset 0 0 0 4px var(--background-default-grey), inset 0 0 0 8px var(--background-action-high-blue-france);
}

.fr-radio-group--sm input[type=radio]:checked:disabled + label::before {
  box-shadow: inset 0 0 0 1px var(--border-disabled-grey), inset 0 0 0 4px var(--background-disabled-grey), inset 0 0 0 8px var(--text-disabled-grey);
}

.fr-radio-rich input[type=radio]:disabled + label::before {
  box-shadow: inset 0 0 0 1px var(--border-disabled-grey), inset 0 0 0 8px var(--background-default-grey), inset 0 0 0 8px var(--text-disabled-grey);
}

.fr-radio-rich input[type=radio]:checked + label {
  box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france);
}

.fr-radio-rich input[type=radio]:checked + label::before {
  box-shadow: inset 0 0 0 1px var(--border-action-high-grey), inset 0 0 0 4px var(--background-default-grey), inset 0 0 0 8px var(--background-action-high-blue-france);
}

.fr-radio-rich input[type=radio]:checked:disabled + label {
  box-shadow: inset 0 0 0 1px var(--text-disabled-grey);
}

.fr-radio-rich input[type=radio]:checked:disabled + label::before {
  box-shadow: inset 0 0 0 1px var(--border-disabled-grey), inset 0 0 0 4px var(--background-default-grey), inset 0 0 0 8px var(--text-disabled-grey);
}
@media (min-width: 36em) {
  /*! media sm */
}
@media (min-width: 48em) {
  /*! media md */
}
@media (min-width: 62em) {
  /*! media lg */
}
@media (min-width: 78em) {
  /*! media xl */
}