HTML
            


            
PUG
            
.recapitulatif
  header
    label.label-sup Récapitulatif
    button.btn.btn-interface.picto-mobile
      span
        i.maificon.maificon-crayon-edit(aria-hidden="true")
        span Modifier
  .lowlight
    p.subtitle
      strong Protection de vos biens (avec gras)
    .line
      i.maificon.maificon-franchise(aria-hidden='true')
      .description
        .label Lorem ipsum dolor 
        .option XXX,XX €
    .line
      img.img-fluid(src=fakeimg+'/32x32/' alt='')
      .description
        .label Lorem ipsum dolor 
        .option XXX,XX €
    .line
      i.maificon.maificon-canape(aria-hidden='true')
      .description
        .label Lorem ipsum 
        .option Jusqu'à XX XXX €
    p.subtitle Protection de vos biens (sans gras)
    .line
      i.maificon.maificon-bague-eclat(aria-hidden='true')
      .description
        .label Lorem ipsum dolor sit 
        .option Jusqu'à XXX XXX €
    .line
      .description
        .label Propriétaire : 
        .option prénom et nom
    .line
      .description
        .label Tél. : 
        .option 00 00 00 00 00
    .line
      .description
        .label Tél. : 
        .option 00 00 00 00 00
      .information.warning
        p.sr-only Attention
        i.maificon.maificon-exclamation-round-small(aria-hidden="true")
        .content
          .title
            h2 Titre H2/H3/H4 et picto (facultatifs) WARNING
          p Toutes les déclinaisons de séverités du information-default sont possibles mais pas de lien ni de bouton
    .line
      .description
        .label E-mail : 
        .option prenom.nom@email.com
    .line.tarif
      i.maificon.maificon-tv(aria-hidden='true')
      .description
        .label
          strong Lorem ipsum dolor
          .more 
            | 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.
            a(aria-expanded="false" data-toggle="collapse" href="#collapseExample") 
            span.collapse#collapseExample Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              a.close(aria-expanded="false" data-toggle="collapse" href="#collapseExample")
      button.btn.btn-interface.picto-mobile(data-toggle='modal' data-target='#modal-inline-1')
        span
          i.maificon.maificon-crayon-edit(aria-hidden="true")
          span Modifier
    .collapse-container.line.tarif
      button(type="button" data-target="#collapse-devis-recap-234" data-toggle="collapse" aria-controls="collapse-devis-recap-234")
        i.maificon.maificon-aem(aria-hidden='true')
        .description
          .label
            strong Lorem ipsum dolor
            p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      .collapse#collapse-devis-recap-234
        .lowlight
          .line
            i.maificon.maificon-rc-local-pro(aria-hidden='true')
            .description.reverse
              .label Lorem ipsum dolor 
              .option
                button.collapse-handler(data-toggle='modal' data-target='#modal-inline-1')
          .line
            i.maificon.maificon-rc-local-pro(aria-hidden='true')
            .description.reverse
              .label Lorem ipsum dolor
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
              .option
                button.collapse-handler(data-toggle='modal' data-target='#modal-inline-1')
          .line.tarif
            i.maificon.maificon-rc-local-pro(aria-hidden='true')
            .description
              .label Lorem ipsum dolor
                p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    .line.tarif
      i.maificon.maificon-rc-local-pro(aria-hidden='true')
      .description
        .label
          strong Lorem ipsum dolor
          p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    .line.reverse
      .description.reverse
        .label 
          strong Lorem ipsum dolor sit amet, 
            span.price (X,xx/mois)
        .option
          button.collapse-handler(data-toggle="collapse" data-target="#recap-collapse-1" aria-expanded="false" aria-controls="recap-collapse-1")
      .recap-collapse#recap-collapse-1.collapse.in
        .collapse-content
          p Lorem ipsum dolor sit amet
  .highlight
    .line
      .description
        .label 
          | Lorem ipsum dolor 
          br/ 
          .anotation (Lorem ipsum dolor sit amet, consectetur adipiscing)
        .option Oui
    .line
      .description
        .label Lorem ipsum dolor 
        .option Oui

    .line
      .description
        .label Tél. : 
        .option 00 00 00 00 00
      .information.reverse.default
        p.sr-only Attention
        i.maificon.maificon-exclamation-round-small(aria-hidden="true")
        .content
          .title
            h2 Titre H2/H3/H4 et picto (facultatifs) DEFAULT
          p Toutes les déclinaisons de séverités du information-default reverse sauf sont possibles sauf border et pas de lien ni de bouton
    .line.reverse
      .description.reverse
        .label 
          strong Lorem ipsum dolor sit amet, 
            span.price (X,xx/mois)
        .option  
          button.collapse-handler(data-toggle="collapse" data-target="#recap-collapse-4" aria-expanded="false" aria-controls="recap-collapse-4")
      .recap-collapse#recap-collapse-4.collapse.in
        .collapse-content
          p Lorem ipsum dolor sit amet
  .highlight
    button(ype='button' data-target='#collapse-devis-recap-1' data-toggle='collapse' aria-controls='collapse-devis-recap-1').title
      strong Autres garanties incluses
    .collapse.collapse-container#collapse-devis-recap-1
      .collapse-content
        .line
          i.maificon.maificon-bague-eclat(aria-hidden='true')
          .description
            .label Lorem ipsum dolor sit 
            .option Jusqu'à XXX XXX €
        .line
          .description
            .label Propriétaire : 
            .option prénom et nom
        .line
          .description
            .label Tél. : 
            .option
              strong 00 00 00 00 00
        .line
          .description
            .label E-mail : 
            .option prenom.nomemail.com
        .line.tarif
          i.maificon.maificon-tv(aria-hidden='true')
          .description
            .label 
              strong Lorem ipsum dolor 18px
              p 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        .line
          .description
            .label 
              | Lorem ipsum dolor 
              br/ 
              .anotation (Lorem ipsum dolor sit amet, consectetur adipiscing)
            .option Oui
        .line
          .description
            .label Lorem ipsum dolor 
            .option Oui
        .line
          .description
            .label Lorem ipsum dolor 
            .option Non
        .line
          .description
            .label Lorem ipsum dolor 
            .option Oui

.recapitulatif
  .highlight.bg-content-light
    button(type='button' data-target='#collapse-devis-recap-2' data-toggle='collapse' aria-control="collapse-devis-recap-2").title
      strong Détail et montant des garanties et des franchises (contenu sur fond blanc)
    .collapse.collapse-container#collapse-devis-recap-2
      .collapse-content
        .line
          i.maificon.maificon-bague-eclat(aria-hidden='true')
          .description
            .label Lorem ipsum dolor sit 
            .option Jusqu'à XXX XXX €
        .line
          .description
            .label Propriétaire : 
            .option prénom et nom
        .line
          .description
            .label Tél. : 
            .option
              strong 00 00 00 00 00
        .line
          .description
            .label E-mail : 
            .option prenom.nomemail.com
        .line.tarif
          i.maificon.maificon-tv(aria-hidden='true')
          .description
            .label 
              strong Lorem ipsum dolor 18px
              p 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
        .line
          .description
            .label 
              | Lorem ipsum dolor 
              br/ 
              .anotation (Lorem ipsum dolor sit amet, consectetur adipiscing)
            .option Oui
        .line
          .description
            .label Lorem ipsum dolor 
            .option Oui
        .line
          .description
            .label Lorem ipsum dolor 
            .option Non
        .line
          .description
            .label Lorem ipsum dolor 
            .option Oui
  
.recapitulatif
  .highlight
    button(type='button' data-target='#collapse-devis-recap-3' data-toggle='collapse' aria-controls='collapse-devis-recap-3').title.title-2 Détail et montant des garanties et des franchises
    .collapse.collapse-container#collapse-devis-recap-3
      .collapse-content
        .line
          .description
            .label 
              dl
                div
                  dt Souscripteur :
                  dd #[b M.Jean Dujardin, né le 01/05/1990]
                div
                  dt E-mail : 
                  dd #[b monadress@mail.fr]
                div
                  dt N° de téléphone : 
                  dd #[b 01 02 03 04 05]
          button.btn.btn-interface.picto-mobile(data-toggle='modal' data-target='#modal-inline-1')
            span
              i.maificon.maificon-crayon-edit(aria-hidden="true")
              span Modifier

.recapitulatif
  .highlight.bg-content-light
    button(type='button' data-target='#collapse-devis-recap-4' data-toggle='collapse' aria-controls='collapse-devis-recap-4').title.title-2 Détail et montant des garanties et des franchises (contenu sur fond blanc)
    .collapse.collapse-container#collapse-devis-recap-4
      .collapse-content
        .line
          .description
            .label 
              dl
                div
                  dt Souscripteur :
                  dd #[b M.Jean Dujardin, né le 01/05/1990]
                div
                  dt E-mail : 
                  dd #[b monadress@mail.fr]
                div
                  dt N° de téléphone : 
                  dd #[b 01 02 03 04 05]
          button.btn.btn-interface.picto-mobile(data-toggle='modal' data-target='#modal-inline-1')
            span
              i.maificon.maificon-crayon-edit(aria-hidden="true")
              span Modifier