HTML
            


            
PUG
            
.form-group(role="radiogroup" aria-labelledby="form-group-details-radio")
  p#form-group-details-radio.field-label .form-check-details radio
  .field-item.form-check-details
    .item
      input#form-check-details-radio-input-0(type='radio', name="form-check-details-radio-input")
      .presentation
        .icon
        .wrapper
          .content
            label(for='form-check-details-radio-input-0').extend-click.field-label Label bold 18px

    .item
      input#form-check-details-radio-input-10(type='radio', name="form-check-details-radio-input")
      .presentation
        .icon
        .wrapper
          .content
            label(for='form-check-details-radio-input-10').extend-click.field-label Label bold 18px + Definition List en dessous
            dl.definition-list
              .item
                dt IBAN: 
                dd XX XXXX XXXXXXXXXXX 
              .item
                dt BIC:
                dd XXXXXXXXXXXXX 
              .item
                dt Nom de la Banque: 
                ddd Crédit Mutuel

    .item
      input#form-check-details-radio-input-1(type='radio', name="form-check-details-radio-input", aria-describedby="described-form-check-details-radio-1")
      .presentation
        .icon
        .wrapper
          .content
            .wrapper-img
              img(src=fakeimg+'/100x100/', alt='')
            label(for='form-check-details-radio-input-1').extend-click.field-label Label bold 18px
            p#described-form-check-details-radio-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod. 
              br/ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          .wrapper-img-md
            img(src=fakeimg+'/100x100/', alt='')
    .item
      input#form-check-details-radio-input-2(type='radio', name="form-check-details-radio-input", aria-describedby="described-form-check-details-radio-2")
      .presentation
        .icon
        .wrapper
          .content
            label(for='form-check-details-radio-input-2').extend-click.field-label
              span.highlight 
                span Label reg 24px
                | Label bold 24px
              .tarif-version2
                span
                  span
                    | 22
                    span ,61 €
                      sub /mois
                  span.text-left 
                    | Soit 
                    strong 355,93 € 
                    | /an
       
            p#described-form-check-details-radio-2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              br/ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    .item
      input#form-check-details-radio-input-3(type='radio', name="form-check-details-radio-input", aria-describedby="described-form-check-details-radio-3")
      .presentation
        .icon
        .wrapper
          .content
            .wrapper-img
              img(src=fakeimg+'/100x100/', alt='')
            label(for='form-check-details-radio-input-3').extend-click.field-label
              span.highlight 
                span Label reg 24px
                | Label bold 24px
            p#described-form-check-details-radio-3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              br/ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          .wrapper-img-md.bg-color-28
            img(src=fakeimg+'/100x100/', alt='')
          .collapse-container
            button.collapse-handler(data-toggle="collapse", data-target="#collapse-savoir-plus", aria-expanded="false") En savoir plus
            .collapse#collapse-savoir-plus
              .collapse-content
                ul.check-list 
                  li Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  li Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    .item
      input#form-check-details-radio-input-4(type='radio', name="form-check-details-radio-input", aria-describedby="described-form-check-details-radio-4 advice-form-check-details-checkbox-1")
      .presentation
        .icon 
        .wrapper
          .content
            .wrapper-img
              img(src=fakeimg+'/100x100/', alt='')
            label(for='form-check-details-radio-input-4').extend-click.field-label Label if checked new input
            p#described-form-check-details-radio-4 Vous souhaitez maintenir le niveau de vie de vos proches à la suite de votre décès ou à votre incapacité permanente absolue.
            p.advice#advice-form-check-details-checkbox-1
              span.highlight Préconisation MAIF :
              |  nous vous recommandons de souscrire au moins 3 ans de perte de revenus pour maintenir le niveau de vie.
            .additional-field.if-checked
              .form-group
                label(for="additional-field-field-text-1").field-label Précisez le nombre d’années de perte de revenus que vous désirez couvrir avec votre capital :
                .row
                  .col-md-6
                    .field-item
                      input(type='number')#additional-field-field-text-1
          .wrapper-img-md.bg-color-29
            img(src=fakeimg+'/100x100/', alt='')
    .item
      input#form-check-details-radio-input-5(type='radio', name="form-check-details-radio-input", aria-describedby="described-form-check-details-radio-4 advice-form-check-details-checkbox-2")
      .presentation
        .icon 
        .wrapper
          .content
            .wrapper-img
              img(src=fakeimg+'/100x100/', alt='')
            label(for='form-check-details-radio-input-5').extend-click.field-label Label if checked new input
            p#described-form-check-details-radio-4 Vous souhaitez maintenir le niveau de vie de vos proches à la suite de votre décès ou à votre incapacité permanente absolue.
            p.advice#advice-form-check-details-checkbox-2
              span.highlight Préconisation MAIF :
              |  nous vous recommandons de souscrire au moins 3 ans de perte de revenus pour maintenir le niveau de vie.
            .additional-field
              .form-group
                label(for="additional-field-field-text-2").field-label Lorem ipsum, dolor sit amet consectetur adipisicing elit
                .row
                  .col-md-6
                    .field-item
                      input(type='number')#additional-field-field-text-2
          .wrapper-img-md.bg-color-30
            img(src=fakeimg+'/100x100/', alt='')

.form-group.has-error(role="radiogroup" aria-labelledby="form-group-details-radio-2 group-checkbox-error-1")
  p#form-group-details-radio-2.field-label .form-check-details radio erreur
  .field-item.form-check-details
    .item
      input#form-check-details-radio-input-1-1(type='radio', name="form-check-details-radio-input-11", aria-describedby="described-form-check-details-radio-1-1")
      .presentation
        .icon
        .wrapper
          .content
            label(for='form-check-details-radio-input-1-1').extend-click.field-label Label
            p#described-form-check-details-radio-1-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    .item
      input#form-check-details-radio-input-1-2(type='radio', name="form-check-details-radio-input-11", aria-describedby="described-form-check-details-radio-1-2")
      .presentation
        .icon
        .wrapper
          .content
            label(for='form-check-details-radio-input-1-2').extend-click.field-label Label
            p#described-form-check-details-radio-1-2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  p#group-checkbox-error-1.help-block Une sélection est obligatoire avec le formulaire checkbox

.form-group(role="radiogroup" aria-labelledby="form-group-details-radio-3")
  p#form-group-details-radio-3.field-label .form-check-details radio disabled
  .field-item.form-check-details
    .item
      input#form-check-details-radio-input-2-1(type='radio', name="form-check-details-radio-input-21", aria-describedby="described-form-check-details-radio-2-1", disabled)
      .presentation
        .icon
        .wrapper
          .content
            label(for='form-check-details-radio-input-2-1').extend-click.field-label Label
            p#described-form-check-details-radio-2-1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    .item
      input#form-check-details-radio-input-2-2(type='radio', name="form-check-details-radio-input-21", aria-describedby="described-form-check-details-radio-2-2", disabled)
      .presentation
        .icon
        .wrapper
          .content
            label(for='form-check-details-radio-input-2-2').extend-click.field-label Label
            p#described-form-check-details-radio-2-2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.