HTML
            


            
PUG
            
.recapitulatif-version2
  .wrapper-head
    .title
      h4 Récapitulatif (hN)
    button.chip.-icon.-icon-with-text-md(type='button')
      i.maificon.maificon-crayon-edit(aria-hidden="true")
      span Modifier
  .group
    .subtitle
      h5
        strong Protection de vos biens (avec gras)
    dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right
      .item
        dt
          i.maificon.maificon-franchise(aria-hidden='true')
          span Lorem ipsum dolor 
        dd 123,45 €
      .item
        dt
          img.img-fluid(src=fakeimg+'/32x32/' alt='')
          span Lorem ipsum dolor 
        dd 123,45 €
      .item
          dt
            i.maificon.maificon-canape(aria-hidden='true')
            strong Tilya SUHPYC
          dd 1/3
          dd 
            p né(e) me 03/01/2010 à Niort #[br] demeurant ANDRE ROUSSIN 13480, CABRIES
              button.action-modal(type='button' data-toggle='modal' data-target='#modal-inline-1')
                i.maificon.maificon-information-cercle(aria-hidden='true')
                span.sr-only Informations sur XXX
              br/
              span.more à défault le(s) bénéficiaire(s) suivant(s) en cas de décès ou de renonciation : 
            ul.bullet-list.no-color
              li #[strong Juliette PLANTIER] #[br] #[span.more né(e) le 06/09/1965 à 79000, BESSINES ]
              li #[strong Juliette PLANTIER] #[br] #[span.more né(e) le 06/09/1965 à 79000, BESSINES ]
            p.more à défault me(s) héritiers.
            .information.warning
              p.sr-only Attention
              i.maificon.maificon-exclamation-round-small(aria-hidden="true")
              .content
                .title
                  h6 Titre H2/H3/H4 et picto (facultatifs) Avertissement
                p Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton
      .item
          dt
            i.maificon.maificon-canape(aria-hidden='true')
            strong Lorem ipsum dolor
          dd Lorem ipsum dolor
          dd 
            p Lorem ipsum dolor 
              br/
              span.more Lorem ipsum dolor

      .item
          dt
            i.maificon.maificon-enveloppe-mail(aria-hidden='true')
            span Adresse Email
          dd prenom.nompersonne@clubinternet.com
      .item
          dt
            i.maificon.maificon-canape(aria-hidden='true')
            span.more Lorem ipsum dolor
          dd Jusqu'à 123 45 €
  .group
    .subtitle
      h5 Protection de vos biens (sans gras) (hn)
    dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right
      .item
        dt
          i.maificon.maificon-bague-eclat(aria-hidden='true')
          span Lorem ipsum dolor sit
        dd Jusqu'à 123 456 €
      .item
        dt Propriétaire :
        dd prénom et nom
      .item
        dt Tél. :
        dd 01 23 45 67 89
      .item
        dt Tél. :
        dd 01 23 45 67 89
        dd
          .information.warning
            p.sr-only Attention
            i.maificon.maificon-exclamation-round-small(aria-hidden="true")
            .content
              .title
                h6 Titre H2/H3/H4 et picto (facultatifs) Avertissement
              p Toutes les déclinaisons de séverités du information-standard sont possibles mais pas de lien ni de bouton
    dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right
      .item
        dt E-mail : 
        dd prenom.nom@email.com
    ul.flex-list
      li.item
        i.maificon.maificon-tv(aria-hidden='true')
        .item-content
          p.item-title Lorem ipsum dolor
          p.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.chip.-icon.-icon-with-text-md(type='button' data-toggle='modal' data-target='#modal-inline-1')
          i.maificon.maificon-crayon-edit(aria-hidden="true")
          span Modifier
      li.item
        .title
          h4
            button(type="button" data-target="#collapse-tjzlta" data-toggle="collapse" aria-controls="collapse-tjzlta" aria-expanded="false")
              i.maificon.maificon-aem(aria-hidden='true')
              span.item-content
                span.title Lorem ipsum dolor
                span.more Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        .collapse-container.collapse#collapse-tjzlta
          .collapse-content
            .group
              ul.flex-list
                li.item
                  i.maificon.maificon-rc-local-pro(aria-hidden='true')
                  .item-content
                    p.item-title Lorem ipsum dolor 
                  .information.light
                    p.sr-only Information
                    .wrapper-collapse
                      .title
                        button(type='button' data-toggle='modal' data-target='#modal-inline-1')
                          span.sr-only Titre modal
                li.item
                  i.maificon.maificon-rc-local-pro(aria-hidden='true')
                  .item-content
                    p Prise en charge du vol isolé d'accessoires :
                    ul
                      li
                        strong intégrés 
                        | (selle, batterie, roue),
                      li
                        strong fixés au vélo
                        | (non démontables sans outils : sacoche, remorque, GPS),
                      li
                        strong de sécurité 
                        | (casque, antivol agréé, siège enfant).
                    p
                      strong Déclarez bien la valeur de vos biens.
                  .information.light
                    p.sr-only Information
                    .wrapper-collapse
                      .title
                        button(type='button' data-toggle='modal' data-target='#modal-inline-1')
                          span.sr-only Titre modal
                li.item
                  i.maificon.maificon-rc-local-pro(aria-hidden='true')
                  .item-content
                    p.item-title Lorem ipsum dolor
                    p.more Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                  .information.light
                    p.sr-only Information
                    .wrapper-collapse
                      .title
                        button(type='button' data-toggle='modal' data-target='#modal-inline-1')
                          span.sr-only Titre modal
      li.item.warning
        i.maificon.maificon-rc-local-pro(aria-hidden='true')
        .item-content
          p.item-title Lorem ipsum dolor
          p.more Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      li.item
        .item-content
          p.
            #[strong Lorem ipsum dolor sit amet,] #[span.price (X,xx/mois)]
        button.collapse-handler(type='button' data-toggle="collapse" data-target="#recap-collapse-1" aria-expanded="false" aria-controls="recap-collapse-1")
          span.sr-only Informations sur XXX
        .collapse-container.collapse#recap-collapse-1
          p Lorem ipsum dolor sit amet
  .group.-highlight
    dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right
      .item
        dt
          span.
            Lorem ipsum dolor #[br]
            #[span.more (Lorem ipsum dolor sit amet, consectetur adipiscing)]
        dd Oui
      .item
        dt Lorem ipsum dolor 
        dd Oui
      .item
        dt Tél. : 
        dd 01 23 45 67 89
    .information.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-standard reverse sauf sont possibles sauf border et pas de lien ni de bouton
    .flex-list
      .item
        .item-content.
          #[strong Lorem ipsum dolor sit amett,] #[span.price (1,23 €/mois)]
        button.collapse-handler(type='button' data-toggle="collapse" data-target="#collapse-jxgnwo" aria-expanded="false" aria-controls="collapse-jxgnwo")
          span.sr-only Informations sur XXX
        .collapse#collapse-jxgnwo
          p Lorem ipsum dolor sit amet
      .item
        button.collapse-handler.-alternate(type='button' data-toggle="collapse" data-target="#collapse-qmoiqm" aria-expanded="false" aria-controls="collapse-qmoiqm")
          .item-content.
            #[strong Lorem ipsum dolor sit amett,] #[span.price (1,23 €/mois)]
        .collapse-container.collapse#collapse-qmoiqm
          .collapse-content
            p Lorem ipsum dolor sit amet
  .group.-highlight
    .title
      h5
        button(type='button' data-target='#collapse-devis-recap-1' data-toggle='collapse' aria-controls='collapse-devis-recap-1' aria-expanded='false')
          strong Autres garanties incluses (hN)
    .collapse-container.collapse#collapse-devis-recap-1
      .collapse-content
        .group
          dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right
            .item
              dt
                i.maificon.maificon-bague-eclat(aria-hidden='true')
                span Lorem ipsum dolor sit
              dd Jusqu'à 123 456 €
            .item 
              dt Propriétaire : 
              dd prénom et nom
            .item
              dt Tél. : 
              dd 01 23 45 67 89
            .item
              dt E-mail : 
              dd prenom.nomemail.com
          .flex-list
            .item
              i.maificon.maificon-tv(aria-hidden='true')
              .item-content
                p.item-title Lorem ipsum dolor 18px
                p.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#[br]
                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right
            .item
                dt.
                  Lorem ipsum dolor #[br]
                  #[span.more (Lorem ipsum dolor sit amet, consectetur adipiscing)]
                dd Oui
            .item
              dt Lorem ipsum dolor 
              dd Oui
            .item
              dt Lorem ipsum dolor 
              dd Non
            .item
              dt Lorem ipsum dolor
              dd Oui

.recapitulatif-version2
  .group.-highlight
    .title
      h5
        button(type='button' data-target='#collapse-devis-recap-2' data-toggle='collapse' aria-controls="collapse-devis-recap-2" aria-expanded='false')
          strong Détail et montant des garanties et des franchises (contenu sur fond blanc)
    .collapse-container.collapse#collapse-devis-recap-2
      .collapse-content
        .group
          dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right
            .item
              dt.
                #[i.maificon.maificon-bague-eclat(aria-hidden='true')]  Lorem ipsum dolor sit
              dd Jusqu'à 123 456 €
            .item
              dt Propriétaire :
              dd prénom et nom
            .item
              dt Tél. :
              dd
                strong 01 23 45 67 89
            .item
              dt E-mail :
              dd prenom.nomemail.com
          .flex-list
            .item
              i.maificon.maificon-tv(aria-hidden='true')
              .item-content
                  p.
                    #[strong Lorem ipsum dolor 18px] #[br]
                    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.
          dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right
            .item
              dt.
                Lorem ipsum dolor #[br]
                #[span.more (Lorem ipsum dolor sit amet, consectetur adipiscing)]
              dd Oui
            .item
              dt Lorem ipsum dolor 
              dd Oui
            .item
              dt Lorem ipsum dolor 
              dd Non
            .item
              dt Lorem ipsum dolor 
              dd Oui

.recapitulatif-version2
  .group.-highlight
    .title.-alternative
      h5
        button(type='button' data-target='#collapse-devis-recap-3' data-toggle='collapse' aria-controls='collapse-devis-recap-3' aria-expanded="false") Détail et montant des garanties et des franchises
    .collapse-container.collapse#collapse-devis-recap-3
      .collapse-content
        .group
          .flex-list
            .item
              .item-content
                dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right
                  div.item
                    dt Souscripteur :
                    dd #[b M.Jean Dujardin, né le 01/05/1990]
                  div.item
                    dt E-mail :
                    dd #[b monadress@mail.fr]
                  div.item
                    dt N° de téléphone :
                    dd #[b 01 02 03 04 05]
              button.chip.-icon.-icon-with-text-md(data-toggle='modal' data-target='#modal-inline-1')
                i.maificon.maificon-crayon-edit(aria-hidden="true")
                span Modifier

.recapitulatif-version2
  .group
    .title.-alternative
      h5
        button(type='button' data-target='#collapse-devis-recap-4' data-toggle='collapse' aria-controls='collapse-devis-recap-4' aria-expanded="false") Détail et montant des garanties et des franchises (contenu sur fond blanc)
    .collapse-container.collapse#collapse-devis-recap-4
      .collapse-content
        .group
          .flex-list
            .item
              .item-content
                p Lorem ipsum dolor sit amet
                dl.definition-list-version2.-column.-column-definition-width-4.-column-definition-text-align-right
                  div.item
                    dt Souscripteur :
                    dd #[b M.Jean Dujardin, né le 01/05/1990]
                  div.item
                    dt E-mail :
                    dd #[b monadress@mail.fr]
                  div.item
                    dt N° de téléphone :
                    dd #[b 01 02 03 04 05]
              button.chip.-icon.-icon-with-text-md(type='button' data-toggle='modal' data-target='#modal-inline-1')
                i.maificon.maificon-crayon-edit(aria-hidden="true")
                span Modifier