Katya - Bibliothèque de composants graphiques MAIF

Liens Utiles

Librairies

Projets MAIF

Maquettes HTML

Composants React

Librairie React-UI

Composants Email

Librairie Email

Autres Liens utiles

Liste des projets

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

Light 300
Portez ce vieux whisky au juge blond qui fume
Regular 400
Portez ce vieux whisky au juge blond qui fume
Medium 500
Portez ce vieux whisky au juge blond qui fume
Bold 700
Portez ce vieux whisky au juge blond qui fume
Black 800
Portez ce vieux whisky au juge blond qui fume

Police de caractères Arial

Regular 400
Portez ce vieux whisky au juge blond qui fume
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	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	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	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	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	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	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

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>

Ressources

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.

Il faut créer une nouvelle branche à partir du projet presentation-builder ou de votre projet front-xxx-presentation.
Modifiez la liste d'icônes présent dans le fichier presentation-settings.json (section sprite puis src) se trouvant à la racine du projet.
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:

Créez une Pull Request pour faire valider le ou les changements effectués dans presentation-builder.
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.
Pensez a bien faire un npm install pour mettre à jour cette dépendance.
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é.

Aucun résultat

.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

Bienvenue sur KATYA