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

/* ------------------------------------ *\
  Radios
\* ------------------------------------ */

/**
 * 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 {
  /**
   * 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
   *//**
   * Modificateur pour la taille sm
   */
}

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

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

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

.fr-radio-group:last-child input[type="radio" i] + label[style*='background-image:'],
.fr-radio-group:last-child input[type="radio" i] + label[class^="fr-ifi-"],
.fr-radio-group:last-child input[type="radio" i] + label[class*=" fr-ifi-"] {
  margin-bottom: 1.5rem;
}

.fr-radio-group input[type="radio" i] {
  position: absolute;
  opacity: 0;
  /**
     * 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" i] + label {
  position: relative;
  padding: 0.75rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
  -webkit-tap-highlight-color: transparent;
  display: grid;
  display: -ms-grid;
  grid-row: 1;
  -ms-grid-row: 2;
  grid-column: 2;
  -ms-grid-column: 2;
  align-items: center;
  -ms-align-items: center;
  grid-template-columns: 1fr 2rem;
  -ms-grid-columns: 1fr 2rem;
  text-align: left;
  direction: rtl;
  /**
       * 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" i] + label,
.fr-radio-group input[type="radio" i] + label > * {
  unicode-bidi: plaintext;
}

.fr-radio-group input[type="radio" i] + label .fr-hint-text {
  margin: 0;
  grid-row: 2;
  grid-column: 1;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}

.fr-radio-group input[type="radio" i] + label::before {
  display: inline-block;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
  border: 1px solid;
  border-radius: 50%;
  transform-origin: center;
  grid-row: 1;
  -ms-grid-row: 1;
  grid-column: 2;
  -ms-grid-column: 2;
  align-items: center;
  -ms-align-items: center;
  transition: transform 0.3s;
}

.fr-radio-group input[type="radio" i]:checked + label {
  /**
         * Cas du radio riche
         */
}

.fr-radio-group input[type="radio" i]:checked + label[style*='background-image:'],
.fr-radio-group input[type="radio" i]:checked + label[class^="fr-ifi-"],
.fr-radio-group input[type="radio" i]:checked + label[class*=" fr-ifi-"] {
  width: 100%;
}

.fr-radio-group--sm input[type="radio" i] + label::before {
  width: 1rem;
  height: 1rem;
}

.fr-radio-rich input[type="radio"] + .fr-label {
  padding-left: 3.5rem;
  min-height: 5.5rem;
  width: 100%;
  height: 1px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 6.5rem;
  background-position: calc(100% - 0.25rem) center;
  background-size: 5rem 5rem;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  /**
      * On applique la taille sm pour le bouton radio riche
      *//**
      * On délimite l'espace pour l'image de droite et une icône illustrative par défaut
      */
}

.fr-radio-rich input[type="radio"] + .fr-label::before {
  width: 1rem;
  height: 1rem;
  position: absolute;
  left: 1.75rem;
}

.fr-radio-rich input[type="radio"] + .fr-label::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  margin: 0.25rem;
  padding-left: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.25rem;
  height: 5rem;
  vertical-align: middle;
}

.fr-radio-rich__icon {
  width: 5rem;
  height: 5rem;
  position: absolute;
  right: 0.25rem;
  object-fit: cover;
  border-left: 1px solid var(--g300);
}

/**
 * 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: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-hint-text + .fr-fieldset__content .fr-radio-rich:first-child input[type="radio"] + label {
  margin-top: 1.5rem;
}

.fr-radio-group {
  /**
   * On cache l'input de type radio pour le styler via le label
   *//**
   * Modificateur pour la taille sm
   */
}

.fr-radio-group input[type="radio" i] {
  /**
     * On applique les styles au pseudo élément before du label quand l'input présente
     * un état check
     *//**
     * Mixins pour appliquer les styles correspondant au focus ainsi qu'à l'état disabled
     */
}

.fr-radio-group input[type="radio"]:checked + label::before {
  box-shadow: inset 0 0 0 5px var(--w);
  background-color: var(--bf500);
  border: 1px solid var(--bf500);
}

.fr-radio-group input[type="radio"][disabled] + label,
.fr-radio-group input[type="radio"]:disabled + label {
  color: var(--g600-g400);
  filter: grayscale(1);
}

.fr-radio-group input[type="radio"][disabled] + label::before,
.fr-radio-group input[type="radio"]:disabled + label::before {
  background-color: var(--g200);
  border: 1px solid var(--g400);
}

.fr-radio-group input[type="radio"][disabled] + label::after,
.fr-radio-group input[type="radio"]:disabled + label::after {
  background-color: transparent;
}

.fr-radio-group--sm input[type="radio" i]:checked + label::before {
  box-shadow: inset 0 0 0 3px var(--w);
}

.fr-radio-rich input[type="radio"] + .fr-label::after {
  border-left: 1px solid var(--g300);
}

.fr-radio-rich input[type="radio"]:not(:checked) + label {
  box-shadow: inset 0 0 0 1px var(--g300);
  background-color: var(--w);
}

.fr-radio-rich input[type="radio"]:checked + label {
  background-color: var(--w);
  box-shadow: inset 0 0 0 1px var(--bf500);
}

.fr-radio-rich input[type="radio"]:checked + label::before {
  box-shadow: inset 0 0 0 3px var(--w);
}
