Bienvenue sur KATYA

Site des intégrateurs regroupant les composants HTML & les informations nécessaires pour le développement des sites MAIF.

Liens Utiles

Librairies

Projets MAIF

Maquettes HTML

Composants React

Librairie React-UI

Composants Email

Librairie Email

Autres Liens utiles

Système de grilles Bootstrap/MAIF

Ces grilles sont basées sur le framework Bootstrap 4 et comporte "une surcouche" MAIF.
Le tableau ci-dessous comporte les différentes informations à connaître pour travailler de "manière responsive" avec ce système de grilles basé sur 12 colonnes.

XS
Mobile
<576px
SM
Mobile Landscape
≥576px et <768px
MD
Tablette Portrait
≥768px et <992px
LG
Desktop Large
≥992px et <1200px
XL
Desktop Extra Large
≥1200px
Largeur max du container 100% de la largeur 540px 768px 980px 1140px
Préfixe des classes html .col- .col-sm- .col-md- .col-lg- .col-xl-
Espacement des colonnes 10px de padding de chaque coté. C'est à dire 20px entre 2 colonnes.

Conception CSS

Voici différentes règles de conception CSS :

CSS CAP

CAP est une convention de nommage qui signifie : Composant / Alternative / Part, cela va nous permettre d’éviter des effets de bords.

  • C : Représente simplement un composant.
  • A : Désigne une alternative de composant, un état ou de sous-partie de composant.
  • P : Est une sous-partie d’un composant.

Dans notre CSS nous allons utiliser les concepts C et A. Le P ne nous interesse pas car via scss les sous-parties d'un composant sont imbriquées dans le composant (article complémentaire).

Typographies

2 polices de caractères sont utilisées sur les sites MAIF:

  • Arial ($font-base: Arial, sans-serif)
  • Maif ($font-primary: 'maif', 'ArialReplace', sans-serif;)

Police de caractères MAIF

  1. Light 300

    Portez ce vieux whisky au juge blond qui fume

  2. Regular 400

    Portez ce vieux whisky au juge blond qui fume

  3. Medium 500

    Portez ce vieux whisky au juge blond qui fume

  4. Bold 700

    Portez ce vieux whisky au juge blond qui fume

  5. Black 800

    Portez ce vieux whisky au juge blond qui fume

Police de caractères Arial

  1. Regular 400

    Portez ce vieux whisky au juge blond qui fume

  2. Bold 700

    Portez ce vieux whisky au juge blond qui fume

Couleurs

Création d’une arborescence des couleurs utilisées sur le site avec les classes correspondantes selon les usages et éléments principaux. Nouveau principe de nommage des styles de couleur : $color-element--usage-couleur-opacité

Les couleurs de titres et de textes

Couleurs utilisées pour la création d’interface MAIF client.
Ces couleurs de texte ont été choisies grâce à un critère de contraste d’accessibilité RGAA. Ce dernier doit dépasser les 4.5:1 par rapport à son arrière plan.

Variable CSS Hexa Couleur Usage (non exhaustif)
$color-typo--title-1 #000000
Couleur utilisée pour les titres
$color-typo--title-1-64 #5c5c5c
Couleur utilisée pour les titres en disabled
$color-typo--title-2 #fffff
Couleur utilisée pour les titres sur des fonds foncés
$color-typo--title-3 #c62222
Couleur utilisée pour les mises en avant dit “highlight” dans les titres principaux
$color-typo--text-1 #000000
Couleur primaire - textes de labeur - champ - input
$color-typo--text-1-35 #a7a7a7
Pagination : sinistre (carte des réparateurs partenaires), solution éducative
$color-typo--text-1-46 #8a8a8a
Couleur utilise pour le context dans Formule
$color-typo--text-1-64 #5c5c5c
Couleur tertiaire pour le texte de labeur de moindre importance tel que - citation (éditorial)- mention - légende - annotation (bas de page) - récapitulatif - tableau : service, ...
$color-typo--text-1-80 #333333
Couleur secondaire pour le texte de labeur légèrement plus clair pour poser une hiérarchie d’information et pour un confort visuel entre les paragraphes et les titres - texte de labeur des pages dites éditoriales
$color-typo--text-2 #FFFFFF
Couleur utilisée pour écrire sur des fonds foncés
$color-typo--text-5 #525b85
Couleur utilisée pour les chiffres des barres d’étapes

A DEPRECIER :

❌ $color-typo--text-6 #2e404f
Vente-croisée, bloc résultat authentification

Les couleurs de fond

Fonds de lame, de section, de composant, de filet décoration titre. 👉 Les fonds clairs sont à privilégier

Variable CSS Hexa Couleur Usage (non exhaustif)
$color-background--bg-1-02 #f9f9f9
Couleur à privilégier pour alterner avec les lames de fond blanc afin de conserver une légèreté dans la page - lame - ligne de tableau - fond du contenu de collapse
$color-background--bg-1-06 #f0f0f0
Couleur à associer avec le blanc pour structurer les composants - lame à alterner avec les lames de fond blanc afin de conserver une légèreté dans la page - rond des chiffres de la barre d’étapes pour les étapes en cours - fond de titre de collapse - fond de composants tel que tuile
$color-background--bg-1-19 #cfcfcf
lame- filet/tiret de décoration sous le label-sup - fond de titre de collapse
$color-background--bg-1-35 #a7a7a7
filet, séparateur, switch
$color-background--bg-1-64 #5c5c5c
ligne produit - ligne option horizontale
$color-background--bg-1-77 #3b3b3b
- footer fond clair
$color-background--bg-1-80 #333333
footer fond moyen - message entreprise type message maintenance sur la home
$color-background--bg-1-83 #2b2b2b
footer fond foncé
$color-background--bg-2 #ffffff
Couleur principale des fonds de lame. À utiliser en alternance (1 sur 2) avec une autre couleur de fond pour rythmer le contenu de l’information
$color-background--bg-3 #c62222
filet/tiret de décoration sous les titres (edition)- barre de progression - lame “militant” sur la home
$color-background--bg-5 #525b85
Couleur utilisée pour le rond des chiffres de la barre d’étapes pour les étapes en cours
$color-background--bg-6 #2E404F
Header de tableau simple
$color-background--bg-7 #f1f4fa
Couleur utilisée pour lame B2B, amorce
$color-background--bg-8 #fdf9f1
Couleur utilisée pour lame B2B, amorce
$color-background--bg-8-10 #FDF9F2
Couleur utilisée pour lame B2B (mood-8), amorce, conseil-push
$color-background--bg-8-20 #FBF3E4
Couleur utilisée pour lame B2B (mood-8), amorce, conseil-push
$color-background--bg-9 #dce6e5
Couleur utilisée pour lame B2B, amorce
$color-background--bg-9-10 #F3F5F4
Couleur utilisée pour lame B2B (mood-9), amorce, conseil-push
$color-background--bg-9-20 #E6ECE9
Couleur utilisée pour lame B2B (mood-9), amorce, conseil-push
$color-background--bg-10 #f7ebf2
Couleur utilisée pour lame B2B, amorce
$color-background--bg-10-10 #FCF0F3
Couleur utilisée pour lame B2B (mood-10), amorce, conseil-push
$color-background--bg-10-20 #F9E1E6
Couleur utilisée pour lame B2B (mood-10), amorce, conseil-push
$color-background--bg-11 #f8f3f6
Couleur utilisée pour lame B2B, amorce
$color-background--bg-11-10 #F9F3F6
Couleur utilisée pour lame B2B (mood-11), amorce, conseil-push
$color-background--bg-11-20 #F2E7EE
Couleur utilisée pour lame B2B (mood-11), amorce, conseil-push
$color-background--bg-12 #ecf4f6
Couleur utilisée pour lame B2B, amorce
$color-background--bg-12-10 #ECF4F6
Couleur utilisée pour lame B2B, amorce, conseil-push
$color-background--bg-12-20 #D9E9EE
Couleur utilisée pour lame B2B, amorce, conseil-push
$color-background--bg-13 #f6e0db
Couleur utilisée pour - le fond simulateur avec une opacité 6% - la peau des personnages des illustrations PMS
$color-background--bg-13-10 #FAF2F0
Couleur utilisée pour lame B2B, amorce, conseil-push
$color-background--bg-13-20 #F5E5E0
Couleur utilisée pour lame B2B, amorce, conseil-push
$color-background--bg-14 #194867
⚠️ Lame PÉGASE : message d'information sur les intempéries
$color-background--bg-14-90 #2f5c7a
⚠️ Lame PÉGASE : message d'information sur les intempéries
$color-background--bg-16 #fbdfe7
.form-check-details
$color-background--bg-17 #42303b
.lg-1

A DEPRECIER :

❌ $color-background--bg-15 #E1E7EF
Couleur utilisée pour le rond des chiffres de la barre d’étapes pour les étapes précédentes

Les dégradés

Ces couleurs sont utilisées pour les fonds

Variable CSS Hexa Couleur
$color-background--bg-gradient-1 linear-gradient(90deg, #f0cbd9 0%, #f2eaeb 100%)
$color-background--bg-gradient-2 linear-gradient(90deg, #f5e8ec 0%, #e9e9e9 100%)
$color-background--bg-gradient-3 linear-gradient(90deg, #e2d5e2 0%, #f3f0f4 100%)
$color-background--bg-gradient-4 linear-gradient(90deg, #ecebf0 0%, #dde1e3 100%)
$color-background--bg-gradient-5 linear-gradient(90deg, #e6d7d3 0%, #ddd3d2 100%)
$color-background--bg-gradient-6 linear-gradient(130.36deg, #55677f 6.56%, #3f1b38 82.57%)
$color-background--bg-gradient-7 linear-gradient(180deg, #fff 0%, #f0f0f0 100%)
$color-background--bg-gradient-8 linear-gradient(180deg, #fdf9f2 0%, #fff 100%)
$color-background--bg-gradient-9 linear-gradient(180deg, #f3f5f4 0%, #fff 100%)
$color-background--bg-gradient-10 linear-gradient(180deg, #fcf0f3 0%, #fff 100%)
$color-background--bg-gradient-11 linear-gradient(180deg, #f9f3f6 0%, #fff 100%)
$color-background--bg-gradient-12 linear-gradient(180deg, #ecf4f6 0%, #fff 100%)
$color-background--bg-gradient-13 linear-gradient(180deg, #faf2f0 0%, #fff 100%)

Les couleurs des icones

Ces couleurs ont été choisies grâce à un critère de contraste d’accessibilité RGAA. Ce dernier doit dépasser les 3.1 par rapport à son arrière plan.

Variable CSS Hexa Couleur Usage (non exhaustif)
$color-icon--icon-1 #000000
Couleur utilisée en association avec les textes
$color-icon--icon-1-19 #cfcfcf
Couleur utilisée en association avec les textes - solo / check list variante status - Liste flexible (liste avec une notion de niveau)
$color-icon--icon-1-35 #a7a7a7
Chevrons pagination
$color-icon--icon-1-64 #5c5c5c
Couleur utilisée en association avec les textes
$color-icon--icon-1-80 #333333
Couleur utilisée en association avec les textes
$color-icon--icon-2 #ffffff
Picto filaire sur des fonds foncés notamment dans les boutons
$color-icon--icon-3 #c62222
chevron “lien capital” associé avec du texte noir - chevron du collapse - icon de liste, élément de décoration en introduction de liste - picto filaire dans les boutons “promote”- picto filaire appelé en maificon pour illustrer des notions
$color-icon--icon-5 #525b85
Icone bouton ouverture modal, action modal

A DEPRECIER :

❌ $color-icon--icon-6 #2e404f
ancien bouton radio actif

Les couleurs liens et des boutons

Regroupe les règles des éléments demandant une action

Variable CSS Hexa Couleur Usage (non exhaustif)
$color-button-link--text-1 #000000 labels des boutons sur des fonds clairs
$color-button-link--text-1-35 #a7a7a7 Bouton radio disabled
$color-button-link--text-1-64 #5c5c5c Bouton radio disabled
$color-button-link--text-1-80 #333333 Bouton interface
$color-button-link--text-2 #ffffff labels des boutons sur des fonds foncés
$color-button-link--text-3 #c62222 liens hypertextes (hover)- liens de navigation (hover)
$color-button-link--text-5 #525b85 mots/termes contenant une définition (distinction des mots contenant une définition dans une modale “definition-modal”)
$color-button-link--bg-1 #000000 Couleur utilisée pour callback mobile
$color-button-link--bg-1-02 #f9f9f9 Fond des mod-text-accordéon
$color-button-link--bg-1-06 #f0f0f0 Couleur utilisée pour bouton interface : en état hover
$color-button-link--bg-1-19 #cfcfcf Bouton interface
$color-button-link--bg-1-64 #5c5c5c Couleur utilisée pour callback
$color-button-link--bg-2 #ffffff Couleur utilisée pour bouton primaire sur fond foncé : default, hover et focus- bouton interface : default- bouton promote primaire : default, hover
$color-button-link--bg-3 #c62222 Couleur utilisée pour les CTA primaires sur fond clair : default, hover et focus - bouton promote secondary- callback
$color-button-link--bg-5 #525b85 Couleur utilisée pour le tag
$color-button-link--bg-6 #2e404f Couleur utilisée pour bouton tunnel (utilisé dans les parcours)
$color-button-link--border-1 #000000 Couleur utilisée pour les bordures des boutons secondaires “fantômes” sur des fonds clairs : default, hover et focus
$color-button-link--border-1-02 #f9f9f9 ...
$color-button-link--border-1-06 #f0f0f0 Couleur utilisée pour les bordures des boutons secondaire “fantômes” sur des fonds foncés
$color-button-link--border-1-19 #cfcfcf Bouton radio disabled
$color-button-link--border-1-35 #a7a7a7 Bouton radio disabled
$color-button-link--border-1-64 #5c5c5c Bouton radio disabled
$color-button-link--border-2 #ffffff Reverse
$color-button-link--border-3 #c62222 Promote
$color-button-link--border-5 #525B85 Couleur utilisée pour form-check-details checkbox (border de préconisation)
$color-button-link--border-6 #2e404f Liste étape

A DEPRECIER :

❌ $color-button-link--text-6 #2e404f radio authentification
❌ $color-button-link--bg-15 #e1e7ef Couleur utilisée pour les tertiaires
❌ $color-button-link--border-15 #e1e7ef ...

Les couleurs des bordures

Variable CSS Hexa Couleur Usage (non exhaustif)
$color-border--border-1 #000000
bloc
$color-border--border-1-02 #f9f9f9
...
$color-border--border-1-06 #f0f0f0
tableau- filet / séparateur de ligne de tableau - cellule de tableau
$color-border--border-1-19 #cfcfcf
tableau- filet / séparateur de ligne de tableau- cellule de tableau- radios/checkbox- tuile
$color-border--border-1-35 #a7a7a7
tableau
$color-border--border-1-46 #8a8a8a
$color-border--border-1-64 #5c5c5c
collapse- champ / input
$color-border--border-2 #ffffff
Sur fond foncé-filet / séparateur de ligne de tableau- cellule de tableau
$color-border--border-6 #2e404f
bloc-beneficiaire- tuile recapitulatif- vente croisée

A DEPRECIER :

❌ $color-border--border-15 #e1e7ef
...

Les couleurs du feedback

Variable CSS Hexa Couleur Usage (non exhaustif)
$color-feedback--success-1 #2d871d
Message de confirmation ou de bon déroulement d'opération.
Utilisation : background rond bouton radio / case à cocher / icon décorative (ex: tuile Sujet 2), élément de décoration / check dans tableau, liste avec statut (check-list state) / switch-checkbox
$color-feedback--success-2 #eaf3e8
Couleur de fond success
$color-feedback--success-3 #02300c
Couleur pour l'affichage d'un message de confirmation ou de bon déroulement d'opération.
$color-feedback--warning-1 #b38405
Message important mais non bloquant.
Utilisation : icon décorative - bordure (champ de saisie) - text de message (champ de saisie ATTENTION pas accessible) - liste avec statut (check-list state)
$color-feedback--warning-2 #fff6de
Couleur de fond warning
$color-feedback--warning-3 #563a04
Couleur pour un message important mais non bloquant
$color-feedback--danger-1 #a60e15
Message d'erreur.
Utilisation : icone décorative - liste avec statut (check-list state) - bordure (champ de saisie, rond bouton radio / case à cocher) - texte erreur (champ de saisie)
$color-feedback--danger-2 #fae9e9
Message d'erreur.
Utilisation : background des radios, cases à cocher
$color-feedback--danger-3 #520105
Couleur pour l'affichage d'une erreur
$color-feedback--default-1 #525b85
Message générique et par défaut
Utilisation : bordure (champ de saisie) - bulle nombre + texte pour la notification (de devis) dans la tuile sujet - liste avec statut (check-list state) - switch-checkbox
$color-feedback--default-2 #ebeefa
Message générique et par défaut
$color-feedback--default-3 #232b4f
Couleur pour l'ensemble du contenu (titre, texte, bouton, lien, picto...) des messages génériques neutre ou minimize
$color-feedback--neutral-1 #5c5c5c
Couleur pour les messages génériques neutre ou de moindre importance.
Utilisation : liste avec statut (check-list state)
$color-feedback--neutral-2 #f0f0f0
Couleur pour les messages génériques neutre ou de moindre importance.
$color-feedback--neutral-3 #333
Couleur pour l'ensemble du contenu (titre, texte, bouton, lien, picto...) des messages génériques neutre ou minimize.

Émojis

RGAA ok

Pour restituer correctement un émoji, nous utilisons une balise i avec l'attribut aria-hidden="true".
Nous ajoutons la classe class="emoji" pour rétablir la propriété CSS font-style: normal.
L'emoji est purement décoratif, il peut compléter un propos mais pas remplacer un mot.

Exemple

Ceci est la documentation sur les émojis .

<p>Ceci est la documentation sur les émojis <i aria-hidden="true" class="emoji">📖</i>.</p>

Icônes

Mise à jour du fichier sprite-icons.svg

Lorsque l'on souhaite afficher une icone via le css avec à l'aide d'un pseudo-élément ::before & ::after, on utilise la mixin svg-sprite-icon qui permet d'aller chercher un fragment sprite à l'intérieur de ce fichier.

En fonction du projet sur lequel on souhaite intervenir 2 cas de figure sont possibles:

  • Soit par défaut le projet utilise celui qui est généré par le projet presentation-builder.
    Chaque projet presentation importe la dépendance "@maiffr/presentation-builder" à partir du fichier package.json.
  • Soit un fichier spécifique est généré dans le projet front-xxx-presentation. sur lequel on souhaite effectuer la modification.

Pour savoir dans quel cas de figure vous vous trouvez, c'est simple, il vous suffit de regarder à l'intérieur du fichier presentation-settings.json se trouvant à la racine de votre projet.

Si vous voyez une section sprite / src où il est renseigné juste en dessous une liste d'icône, alors le projet a son propre fichier sprite-icons.svg.

Par défaut le fichier est généré dans le dossier : /presentation/maquette/dist/img/rwd/sprites.

Quelque soit votre cas de figure il faut suivre la documentation suivante.

  1. Il faut créer une nouvelle branche à partir du projet presentation-builder ou de votre projet front-xxx-presentation.
  2. Modifiez la liste d'icônes présent dans le fichier presentation-settings.json (section sprite puis src) se trouvant à la racine du projet.
  3. Pensez à renseigner le fichier changelog (si cleui-ci existe) pour notifier le ou les changements effectués.

Si vous travaillez dans un projet front-xxx-presentation vous pouvez directement effectuer des changements dans votre css puis créer une Pull Request. Pour vous c'est terminé!

Si c'est le fichier par défaut généré par le projet presentation-builder qui est utilisé, alors il faut suivre les instructions suivantes:

  1. Créez une Pull Request pour faire valider le ou les changements effectués dans presentation-builder.
  2. Une fois cette PR validée, il vous faut modifier le numéro de version de la dépendance "@maiffr/presentation-builder" du fichier package.json par celle fraîchement générée dans le projet où vous souhaitez utiliser les modifications effectuées précédemment.
  3. Pensez a bien faire un npm install pour mettre à jour cette dépendance.
  4. A partir de là, on retombe sur un fonctionnement standard concernant le "reste du travail à faire".

Voilà a quoi ressemble le fichier sprite-icons.svg issu du projet presentation-builder au mois de novembre 2024:

Impact d'un changement d'icônes

La liste des icônes ci-dessous est à l'image de la version déployée en production, ou allant l'être (au prochain package de chaque projet).
Tout remplacement d'une ou plusieurs icônes impacte directement les projets liés à la lib-presentation (espace perso, maif.fr, les tunnels conversationnels, etc...)

Il est nécessaire de faire une communication AVANT une mise à jour d'icônes à l'ensemble des équipes projets impactées.

Liste des icônes(visuels et classes correspondantes)

Les classes d'icônes grisées ne doivent plus être utilisées. Ces classes « alias » sont conservées pour une rétrocompatibilité.


  • .maificon
    .maificon-2adultes-1enfant-volant


  • .maificon
    .maificon-a-fleche-plus


  • .maificon
    .maificon-accessibilite


  • .maificon
    .maificon-aem


  • .maificon
    .maificon-alerte


  • .maificon
    .maificon-ambulance


  • .maificon
    .maificon-ampoule
    .maificon-conseil_1
    .maificon-conseil


  • .maificon
    .maificon-ancre


  • .maificon
    .maificon-antenne-ondes


  • .maificon
    .maificon-appareil-photo-raquette


  • .maificon
    .maificon-arrow-bottom


  • .maificon
    .maificon-arrow-left
    .maificon-fleche-prev
    .maificon-left


  • .maificon
    .maificon-arrow-right
    .maificon-fleche-next
    .maificon-right


  • .maificon
    .maificon-arrow-right-solid


  • .maificon
    .maificon-arrow-top


  • .maificon
    .maificon-ars-ajout-capital


  • .maificon
    .maificon-ars-capital


  • .maificon
    .maificon-ars-defisc


  • .maificon
    .maificon-ars-etudesenfants


  • .maificon
    .maificon-ars-patrimoine


  • .maificon
    .maificon-ars-placements


  • .maificon
    .maificon-ars-retraite


  • .maificon
    .maificon-ars-securite


  • .maificon
    .maificon-ars-souplesse


  • .maificon
    .maificon-auto
    .maificon-cc-voiture
    .maificon-automobile


  • .maificon
    .maificon-auto-electric


  • .maificon
    .maificon-auto-face-taxi


  • .maificon
    .maificon-auto-feuille-pack-auto-responsable
    .maificon-auto-feuille--pack-auto-responsable


  • .maificon
    .maificon-auto-main-vehicule-remplacement
    .maificon-auto-main--vehicule-remplacement


  • .maificon
    .maificon-auto-phare-feu


  • .maificon
    .maificon-auto-toit-ouvrant


  • .maificon
    .maificon-auto-toit-panoramique


  • .maificon
    .maificon-auto-utilitaire-BtoB


  • .maificon
    .maificon-autre-accident


  • .maificon
    .maificon-autres


  • .maificon
    .maificon-avion


  • .maificon
    .maificon-avispage


  • .maificon
    .maificon-bague-eclat


  • .maificon
    .maificon-balance-assistance-juridique


  • .maificon
    .maificon-banque-fleche-virement


  • .maificon
    .maificon-bateau-barque


  • .maificon
    .maificon-bateau-fluvial
    .maificon-bateau2


  • .maificon
    .maificon-bateau-jauge-alademande


  • .maificon
    .maificon-bateau-jauge-tiers


  • .maificon
    .maificon-bateau-jauge-tousrisques


  • .maificon
    .maificon-bateau-jetski


  • .maificon
    .maificon-bateau-moteur


  • .maificon
    .maificon-bateau-peniche-habitable


  • .maificon
    .maificon-bateau-pneumatique


  • .maificon
    .maificon-bateau-timonier


  • .maificon
    .maificon-bateau-vedette


  • .maificon
    .maificon-bateau-voilier-monocoque
    .maificon-bateau-navi-generique


  • .maificon
    .maificon-bateau-voilier-multicoque


  • .maificon
    .maificon-batiment-ecole


  • .maificon
    .maificon-batiment-entreprise


  • .maificon
    .maificon-berline
    .maificon-vehicule


  • .maificon
    .maificon-biens-sport


  • .maificon
    .maificon-billeterie


  • .maificon
    .maificon-bolt


  • .maificon
    .maificon-bouclier-biberon


  • .maificon
    .maificon-bouclier-check


  • .maificon
    .maificon-bouclier-pro


  • .maificon
    .maificon-break


  • .maificon
    .maificon-bris-de-glace


  • .maificon
    .maificon-bulle


  • .maificon
    .maificon-bulle-question


  • .maificon
    .maificon-bureaux-personnages-coworking
    .maificon-bureaux-personnages--coworking


  • .maificon
    .maificon-bus


  • .maificon
    .maificon-buste-cc-plus


  • .maificon
    .maificon-buste-check


  • .maificon
    .maificon-buste-ordi-mug-travailleur-independant


  • .maificon
    .maificon-buste-policier


  • .maificon
    .maificon-buste-pro-bouclier


  • .maificon
    .maificon-buste-soutenu-main


  • .maificon
    .maificon-buste-volant-2pieces-euro


  • .maificon
    .maificon-bustes-batiment-entreprise


  • .maificon
    .maificon-cabriolet


  • .maificon
    .maificon-cadenas


  • .maificon
    .maificon-calculatrice-cercle


  • .maificon
    .maificon-calendar


  • .maificon
    .maificon-calendrier-cc-A


  • .maificon
    .maificon-calendrier-euro


  • .maificon
    .maificon-call
    .maificon-rappel
    .maificon-contact2


  • .maificon
    .maificon-camera


  • .maificon
    .maificon-camping-car-accessoires


  • .maificon
    .maificon-camping-car-cc-euro


  • .maificon
    .maificon-camping-car-jauge-01


  • .maificon
    .maificon-camping-car-jauge-02


  • .maificon
    .maificon-camping-car-jauge-03


  • .maificon
    .maificon-camping-car-jauge-04


  • .maificon
    .maificon-camping-car-objets-transport


  • .maificon
    .maificon-campingcar
    .maificon-capucine


  • .maificon
    .maificon-canape


  • .maificon
    .maificon-capital


  • .maificon
    .maificon-caravane


  • .maificon
    .maificon-carrosserie


  • .maificon
    .maificon-carte-domicile


  • .maificon
    .maificon-carte-euros


  • .maificon
    .maificon-carte-france-evenement


  • .maificon
    .maificon-carte-id


  • .maificon
    .maificon-carte-rib


  • .maificon
    .maificon-carton-diable-demenagement


  • .maificon
    .maificon-cd


  • .maificon
    .maificon-cercle-triangle-icon-nav


  • .maificon
    .maificon-changement-formule


  • .maificon
    .maificon-changevoiture


  • .maificon
    .maificon-chariot


  • .maificon
    .maificon-check
    .maificon-recommandation


  • .maificon
    .maificon-check-cercle
    .maificon-check2
    .maificon-check-circle


  • .maificon
    .maificon-check-cercle-small


  • .maificon
    .maificon-check-round


  • .maificon
    .maificon-check-round-small


  • .maificon
    .maificon-cheque


  • .maificon
    .maificon-chiffre-01


  • .maificon
    .maificon-chiffre-02


  • .maificon
    .maificon-chiffre-03


  • .maificon
    .maificon-chiffre-04


  • .maificon
    .maificon-circle
    .maificon-form-radio


  • .maificon
    .maificon-circle-border


  • .maificon
    .maificon-cle-anglaise-cocarde


  • .maificon
    .maificon-clock


  • .maificon
    .maificon-clock-round


  • .maificon
    .maificon-co-emprunteur


  • .maificon
    .maificon-coeur


  • .maificon
    .maificon-collectivite


  • .maificon
    .maificon-comparer


  • .maificon
    .maificon-conducteur


  • .maificon
    .maificon-conseiller-finance


  • .maificon
    .maificon-conseiller-tel
    .maificon-conseiller


  • .maificon
    .maificon-contact


  • .maificon
    .maificon-contrat-adapte


  • .maificon
    .maificon-conv-vir-left


  • .maificon
    .maificon-conv-vir-right


  • .maificon
    .maificon-coupe


  • .maificon
    .maificon-couple


  • .maificon
    .maificon-crayon


  • .maificon
    .maificon-crayon-edit


  • .maificon
    .maificon-credit-card
    .maificon-cb


  • .maificon
    .maificon-cross
    .maificon-close


  • .maificon
    .maificon-cross-cercle
    .maificon-fermer-cercle
    .maificon-croix
    .maificon-croix1


  • .maificon
    .maificon-cross-cercle-small


  • .maificon
    .maificon-cross-round


  • .maificon
    .maificon-cross-round-small


  • .maificon
    .maificon-cyclomoteur


  • .maificon
    .maificon-deconnexion


  • .maificon
    .maificon-delegation-maif


  • .maificon
    .maificon-dent


  • .maificon
    .maificon-depanneuse


  • .maificon
    .maificon-devis


  • .maificon
    .maificon-dir


  • .maificon
    .maificon-doc


  • .maificon
    .maificon-doc-2pages-schema-bilan


  • .maificon
    .maificon-document


  • .maificon
    .maificon-draisienne-electric


  • .maificon
    .maificon-edit-cercle


  • .maificon
    .maificon-emotion_insatisfait


  • .maificon
    .maificon-emotion_neutre


  • .maificon
    .maificon-emotion_satisfait


  • .maificon
    .maificon-emotion_tresinsatisfait


  • .maificon
    .maificon-emotion_tressatisfait


  • .maificon
    .maificon-emprunteur


  • .maificon
    .maificon-engins-speciaux


  • .maificon
    .maificon-engrenage


  • .maificon
    .maificon-enseignant


  • .maificon
    .maificon-envelope


  • .maificon
    .maificon-enveloppe-mail


  • .maificon
    .maificon-euro-cc-check


  • .maificon
    .maificon-euro-douanier


  • .maificon
    .maificon-evenement


  • .maificon
    .maificon-evenement_1


  • .maificon
    .maificon-exclamation-cercle


  • .maificon
    .maificon-exclamation-cercle-small


  • .maificon
    .maificon-exclamation-round


  • .maificon
    .maificon-exclamation-round-small


  • .maificon
    .maificon-expert-auto


  • .maificon
    .maificon-extension


  • .maificon
    .maificon-exterieur


  • .maificon
    .maificon-eye


  • .maificon
    .maificon-eye-no


  • .maificon
    .maificon-facebook


  • .maificon
    .maificon-facebook-round


  • .maificon
    .maificon-facebook-round-b


  • .maificon
    .maificon-famille
    .maificon-ars-solidarite


  • .maificon
    .maificon-fauteuil-roulant-motorise


  • .maificon
    .maificon-fax


  • .maificon
    .maificon-femme


  • .maificon
    .maificon-filtre


  • .maificon
    .maificon-final-enligne


  • .maificon
    .maificon-finition


  • .maificon
    .maificon-fiscalite


  • .maificon
    .maificon-fleche-augmentation


  • .maificon
    .maificon-fleche-diagonale


  • .maificon
    .maificon-fleche-first
    .maificon-fleche1


  • .maificon
    .maificon-fleche-ligne


  • .maificon
    .maificon-fleche-retour


  • .maificon
    .maificon-fleche-return


  • .maificon
    .maificon-fleche-thin-ring


  • .maificon
    .maificon-form-check


  • .maificon
    .maificon-formulaire
    .maificon-reclamation


  • .maificon
    .maificon-formulaire-4cases-2checks


  • .maificon
    .maificon-formulaire-4cases-4checks


  • .maificon
    .maificon-fourchette-couteau


  • .maificon
    .maificon-fourgon


  • .maificon
    .maificon-franchise


  • .maificon
    .maificon-fusee


  • .maificon
    .maificon-gateau-bougies-small


  • .maificon
    .maificon-grip


  • .maificon
    .maificon-groupe


  • .maificon
    .maificon-gyropode


  • .maificon
    .maificon-gyroroue


  • .maificon
    .maificon-habitation-jauge1


  • .maificon
    .maificon-habitation-jauge2


  • .maificon
    .maificon-habitation-jauge3


  • .maificon
    .maificon-homepage


  • .maificon
    .maificon-homme


  • .maificon
    .maificon-homme-mort


  • .maificon
    .maificon-hopital


  • .maificon
    .maificon-hoverboard


  • .maificon
    .maificon-illustration-assurance-multirisque


  • .maificon
    .maificon-immat


  • .maificon
    .maificon-immeuble
    .maificon-appartement


  • .maificon
    .maificon-immeuble-groupe


  • .maificon
    .maificon-immeubles-fleche


  • .maificon
    .maificon-independant-jauge-01


  • .maificon
    .maificon-independant-jauge-02


  • .maificon
    .maificon-information-cercle
    .maificon-info


  • .maificon
    .maificon-information-cercle-small


  • .maificon
    .maificon-information-round


  • .maificon
    .maificon-information-round-small


  • .maificon
    .maificon-infos


  • .maificon
    .maificon-instagram


  • .maificon
    .maificon-integral


  • .maificon
    .maificon-internet


  • .maificon
    .maificon-interrogation


  • .maificon
    .maificon-jauge-contenu


  • .maificon
    .maificon-jauge-etat-01


  • .maificon
    .maificon-jauge-etat-02


  • .maificon
    .maificon-jauge-etat-03


  • .maificon
    .maificon-jauge-etat-04


  • .maificon
    .maificon-jauge-vide


  • .maificon
    .maificon-justice


  • .maificon
    .maificon-laptop


  • .maificon
    .maificon-le


  • .maificon
    .maificon-lettre


  • .maificon
    .maificon-levier-vitesse


  • .maificon
    .maificon-linkedin


  • .maificon
    .maificon-list


  • .maificon
    .maificon-lit-bebe-mobile


  • .maificon
    .maificon-livre-cc-A


  • .maificon
    .maificon-livrets


  • .maificon
    .maificon-local-groupe


  • .maificon
    .maificon-local-maif-buste


  • .maificon
    .maificon-logement


  • .maificon
    .maificon-logement-inconnu


  • .maificon
    .maificon-logo-site-event


  • .maificon
    .maificon-loi-de-finance


  • .maificon
    .maificon-loupe
    .maificon-search


  • .maificon
    .maificon-lud


  • .maificon
    .maificon-lunette-machine-laver-smartphone-lampe


  • .maificon
    .maificon-lunettes-de-vue


  • .maificon
    .maificon-machine-laver


  • .maificon
    .maificon-machine-laver-lampe


  • .maificon
    .maificon-mail


  • .maificon
    .maificon-mail-round


  • .maificon
    .maificon-mail-round-b


  • .maificon
    .maificon-maillet-socle-justice-jauge-01


  • .maificon
    .maificon-maillet-socle-justice-jauge-02


  • .maificon
    .maificon-main-3etoiles


  • .maificon
    .maificon-main-bulletin-fente


  • .maificon
    .maificon-main-coeur


  • .maificon
    .maificon-main-eclair-bolt


  • .maificon
    .maificon-main-feuille


  • .maificon
    .maificon-main-papier-braille


  • .maificon
    .maificon-main-pouce-like
    .maificon-main-pouce--like


  • .maificon
    .maificon-main-sous


  • .maificon
    .maificon-mains-bulle-langue-signes
    .maificon-mains-bulle--langue-signes


  • .maificon
    .maificon-mains-maison


  • .maificon
    .maificon-mains-poignee-employeur


  • .maificon
    .maificon-mairie


  • .maificon
    .maificon-maison
    .maificon-cc-maison


  • .maificon
    .maificon-maison-a-louer


  • .maificon
    .maificon-maison-boite-aux-lettres


  • .maificon
    .maificon-maison-co-habitants


  • .maificon
    .maificon-maison-feu


  • .maificon
    .maificon-maison-habitant


  • .maificon
    .maificon-maison-main


  • .maificon
    .maificon-maison-parasol-transat


  • .maificon
    .maificon-maison-vagues


  • .maificon
    .maificon-masques


  • .maificon
    .maificon-mfleche-off


  • .maificon
    .maificon-mfleche-on


  • .maificon
    .maificon-mobilhome


  • .maificon
    .maificon-mobilite


  • .maificon
    .maificon-moins


  • .maificon
    .maificon-monoparentale


  • .maificon
    .maificon-monospace


  • .maificon
    .maificon-moto


  • .maificon
    .maificon-moto-collection


  • .maificon
    .maificon-motor-home


  • .maificon
    .maificon-motorisation


  • .maificon
    .maificon-newsletter


  • .maificon
    .maificon-nuage-eclair-pluie-vent


  • .maificon
    .maificon-objets-transp


  • .maificon
    .maificon-oeil


  • .maificon
    .maificon-ome


  • .maificon
    .maificon-optionmodif


  • .maificon
    .maificon-ordi-curseur-enligne


  • .maificon
    .maificon-ordi-ecran-buste-2rectangles


  • .maificon
    .maificon-ordi-interrogation


  • .maificon
    .maificon-oreille


  • .maificon
    .maificon-oreille-barree


  • .maificon
    .maificon-papier-buste-crayon


  • .maificon
    .maificon-papier-cases-check-cc-A


  • .maificon
    .maificon-papier-crayon-signature


  • .maificon
    .maificon-papier-dechirure


  • .maificon
    .maificon-papier-lignes-cocarde


  • .maificon
    .maificon-papier-lignes-triangle


  • .maificon
    .maificon-papier-loupe


  • .maificon
    .maificon-parapluie


  • .maificon
    .maificon-pdf


  • .maificon
    .maificon-perso-seul
    .maificon-person-1
    .maificon-person-2


  • .maificon
    .maificon-photo


  • .maificon
    .maificon-pieces-monnaie-empilees-2tas-euro


  • .maificon
    .maificon-pin


  • .maificon
    .maificon-pin-around


  • .maificon
    .maificon-pin-fill


  • .maificon
    .maificon-pins-chemin


  • .maificon
    .maificon-pions-echec-jeux-de-societe


  • .maificon
    .maificon-piscine


  • .maificon
    .maificon-plan-de-masse


  • .maificon
    .maificon-plan-de-masse-3bustes


  • .maificon
    .maificon-plan-de-masse-buste


  • .maificon
    .maificon-plane


  • .maificon
    .maificon-plaque-immatriculation


  • .maificon
    .maificon-plus
    .maificon-plus-d
    .maificon-plus-d1


  • .maificon
    .maificon-plus-cercle
    .maificon-plus-first
    .maificon-plus-round
    .maificon-round-plus


  • .maificon
    .maificon-poids-lourd


  • .maificon
    .maificon-poignee-slider


  • .maificon
    .maificon-pompe-essence


  • .maificon
    .maificon-porte-voiture
    .maificon-nbre-portes


  • .maificon
    .maificon-praxis


  • .maificon
    .maificon-presse


  • .maificon
    .maificon-print


  • .maificon
    .maificon-profile


  • .maificon
    .maificon-protect-personne


  • .maificon
    .maificon-quad


  • .maificon
    .maificon-question
    .maificon-form-question


  • .maificon
    .maificon-quote-close


  • .maificon
    .maificon-quote-open


  • .maificon
    .maificon-rc-exploitation


  • .maificon
    .maificon-rc-local-pro


  • .maificon
    .maificon-rdv


  • .maificon
    .maificon-remorque


  • .maificon
    .maificon-reparateur


  • .maificon
    .maificon-residence-retraite


  • .maificon
    .maificon-retroviseur


  • .maificon
    .maificon-roller-electric


  • .maificon
    .maificon-rose


  • .maificon
    .maificon-round-moins
    .maificon-minus-round
    .maificon-moins-plein


  • .maificon
    .maificon-sante


  • .maificon
    .maificon-sante-jauge-01


  • .maificon
    .maificon-sante-jauge-02


  • .maificon
    .maificon-sante-jauge-03


  • .maificon
    .maificon-sante-jauge-04


  • .maificon
    .maificon-sante-jauge-05


  • .maificon
    .maificon-scooter125


  • .maificon
    .maificon-signature


  • .maificon
    .maificon-simple-bolt


  • .maificon
    .maificon-simplicite


  • .maificon
    .maificon-skater-electric


  • .maificon
    .maificon-smartphone


  • .maificon
    .maificon-smartphone-apn


  • .maificon
    .maificon-smartphone-gyrophare


  • .maificon
    .maificon-smartphone-ordi-curseur-enligne


  • .maificon
    .maificon-stethoscope


  • .maificon
    .maificon-suv


  • .maificon
    .maificon-symbole-recyclage


  • .maificon
    .maificon-tablette-cartable


  • .maificon
    .maificon-tarif


  • .maificon
    .maificon-tasse-cafe-chaud


  • .maificon
    .maificon-tchat
    .maificon-bulles


  • .maificon
    .maificon-telecharger


  • .maificon
    .maificon-telephone


  • .maificon
    .maificon-terrain-nu


  • .maificon
    .maificon-tete-masque-vol-vandalisme
    .maificon-tete-masque--vol-vandalisme


  • .maificon
    .maificon-tiktok


  • .maificon
    .maificon-tipi


  • .maificon
    .maificon-touches-calculatrice


  • .maificon
    .maificon-tracteur


  • .maificon
    .maificon-trash


  • .maificon
    .maificon-trash-cercle


  • .maificon
    .maificon-travail


  • .maificon
    .maificon-travaux


  • .maificon
    .maificon-travaux2


  • .maificon
    .maificon-trombone


  • .maificon
    .maificon-trombone-grd


  • .maificon
    .maificon-trottinette


  • .maificon
    .maificon-tv


  • .maificon
    .maificon-upload


  • .maificon
    .maificon-usagepro


  • .maificon
    .maificon-utilitaire


  • .maificon
    .maificon-valeur-20


  • .maificon
    .maificon-valeur-neuf


  • .maificon
    .maificon-valid-RGAA


  • .maificon
    .maificon-vam-nvei


  • .maificon
    .maificon-van


  • .maificon
    .maificon-vehicule-amenage


  • .maificon
    .maificon-vehicule-collection


  • .maificon
    .maificon-vehicule-inconnu


  • .maificon
    .maificon-velo-electrique


  • .maificon
    .maificon-velo-mecanique


  • .maificon
    .maificon-vie-pratique


  • .maificon
    .maificon-visite
    .maificon-rdv-delegue


  • .maificon
    .maificon-voitureplus


  • .maificon
    .maificon-voiturette


  • .maificon
    .maificon-warning


  • .maificon
    .maificon-warning-filled


  • .maificon
    .maificon-wcb


  • .maificon
    .maificon-wifi


  • .maificon
    .maificon-x
    .maificon-twitter


  • .maificon
    .maificon-x-ring
    .maificon-twitter-round-b


  • .maificon
    .maificon-x-round
    .maificon-twitter-round


  • .maificon
    .maificon-yourte


  • .maificon
    .maificon-youtube


  • .maificon
    .maificon-zero-km