Section Accueil

Image alt text

Titre de page sur deux ou trois ligness

Train rapide du mythique Trans-Europ-Express, le Mistral assure la liaison Paris-Nice de 1950 jusqu'en 1982.

Découvrir

Liens

Par défaut

Au survol

Inactif

Focus clavier

Lien interne Lien interne Lien interne Lien interne
Lien interne Lien interne Lien interne Lien interne

Typographies

Avenir Black 42 px

Avenir Black 36 px

Avenir Black 30 px

Avenir Black 24 px

Avenir Black 20 px

Avenir Black 18 px

Avenir Black 16 px

Avenir Black 14 px

Fil d'arianne

Boutons

par defaut

hover

active

focus

disabled

par defaut

hover

active

focus

disabled

par defaut

hover

active

focus

disabled

par defaut

hover

active

focus

disabled

par defaut

hover

active

focus

disabled

par defaut

hover

active

focus

disabled

par defaut

hover

active

focus

disabled

par defaut

hover

active

focus

disabled

Pagination

Pictographies

  • Ouverture
  • Fermeture
  • Précédent
  • Suivant / Lien interne
  • Lien externe
  • Lien / Ressource
  • Téléchargement
  • Import
  • Menu
  • Recherche
  • Réglages
  • Info-bulle
  • Mon compte
  • Alerte
  • Mon panier
  • Impression
  • Suppression
  • Statistiques
  • CTA "Envoyer"
  • Contact
  • Conversation
  • Facebook
  • Instagram
  • Twitter
  • Premier
  • Dernier
  • Check
  • Plus
  • Fermer

Tags

  • Tag 16px
  • Tag 14px
  • Tag 12px
  • Tag uppercase 16px
  • Tag uppercase 14px
  • Tag uppercase 12px
  • Tag 16px
  • Tag 14px
  • Tag 12px
  • Tag uppercase 16px
  • Tag uppercase 14px
  • Tag uppercase 12px
  • Tag 16px
  • Tag 14px
  • Tag 12px
  • Tag uppercase 16px
  • Tag uppercase 14px
  • Tag uppercase 12px
  • Tag 16px
  • Tag 14px
  • Tag 12px
  • Tag uppercase 16px
  • Tag uppercase 14px
  • Tag uppercase 12px
  • Tag 16px
  • Tag 14px
  • Tag 12px
  • Tag uppercase 16px
  • Tag uppercase 14px
  • Tag uppercase 12px
  • Tag 16px
  • Tag 14px
  • Tag 12px
  • Tag uppercase 16px
  • Tag uppercase 14px
  • Tag uppercase 12px
  • Tag 16px
  • Tag 14px
  • Tag 12px
  • Tag uppercase 16px
  • Tag uppercase 14px
  • Tag uppercase 12px

Accordéons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus sit gravida dictumst integer hac. Quis tempor iaculis at eu lobortis. Non felis scelerisque risus quam enim eu turpis quis integer. Mi sagittis lacus, volutpat ipsum praesent risus elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus sit gravida dictumst integer hac. Quis tempor iaculis at eu lobortis. Non felis scelerisque risus quam enim eu turpis quis integer. Mi sagittis lacus, volutpat ipsum praesent risus elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus sit gravida dictumst integer hac. Quis tempor iaculis at eu lobortis. Non felis scelerisque risus quam enim eu turpis quis integer. Mi sagittis lacus, volutpat ipsum praesent risus elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus sit gravida dictumst integer hac. Quis tempor iaculis at eu lobortis. Non felis scelerisque risus quam enim eu turpis quis integer. Mi sagittis lacus, volutpat ipsum praesent risus elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus sit gravida dictumst integer hac. Quis tempor iaculis at eu lobortis. Non felis scelerisque risus quam enim eu turpis quis integer. Mi sagittis lacus, volutpat ipsum praesent risus elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus sit gravida dictumst integer hac. Quis tempor iaculis at eu lobortis. Non felis scelerisque risus quam enim eu turpis quis integer. Mi sagittis lacus, volutpat ipsum praesent risus elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus sit gravida dictumst integer hac. Quis tempor iaculis at eu lobortis. Non felis scelerisque risus quam enim eu turpis quis integer. Mi sagittis lacus, volutpat ipsum praesent risus elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus sit gravida dictumst integer hac. Quis tempor iaculis at eu lobortis. Non felis scelerisque risus quam enim eu turpis quis integer. Mi sagittis lacus, volutpat ipsum praesent risus elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus sit gravida dictumst integer hac. Quis tempor iaculis at eu lobortis. Non felis scelerisque risus quam enim eu turpis quis integer. Mi sagittis lacus, volutpat ipsum praesent risus elit.

Recherche

Select Listes

par défaut

au focus

désactivé

Switchs

Checkbox & Radios

Cards

Double contenu

Premier exemple : image à gauche, fond "vert d'eau"

Image alt text

Titrage H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus sit gravida dictumst integer hac. Quis tempor iaculis at eu lobortis. Non felis scelerisque risus quam enim eu turpis quis integer. Mi sagittis lacus, volutpat ipsum praesent risus elit.


Deuxième exemple : image à droite, fond "bleu horizon"

Image alt text

Titrage H2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lectus sit gravida dictumst integer hac. Quis tempor iaculis at eu lobortis. Non felis scelerisque risus quam enim eu turpis quis integer. Mi sagittis lacus, volutpat ipsum praesent risus elit.

Ratios

1/1
5/4
4/3
7/5
3/2
16/10
5/3
16/9
2/1
21/9
1/1Landscape
4/5Landscape
3/4Landscape
5/7Landscape
2/3Landscape
10/16Landscape
3/5Landscape
9/16Landscape
1/2Landscape
9/21Landscape
Image alt text
Image alt text
Image alt text

Colorimétrie

ambre

#EED484

100% 100%

#f9f0d5

25% + léger

#e5bd43

25% renforcé

#112b7b

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

safran

#DAAA00

100% 100%

#FFCB12

25% + léger

#AE8800

25% renforcé

#2555FF

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

modore

#4a412a

100% 100%

#5d5135

25% + léger

#3b3422

25% renforcé

#b5bed5

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

peche

#FDBE87

100% 100%

#fff2e6

25% + léger

#fc953b

25% renforcé

#024178

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

ocre

#DC582A

100% 100%

#e58462

25% + léger

#b4441e

25% renforcé

#23a7d5

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

chocolat

#4F2910

100% 100%

#633314

25% + léger

#3f210d

25% renforcé

#b0d6ef

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

nude

#f8c1b8

100% 100%

#ffffff

25% + léger

#F07C69

25% renforcé

#073e47

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

corail

#F2827F

100% 100%

#fbd4d3

25% + léger

#eb413c

25% renforcé

#0d7d80

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

burgundy

#622032

100% 100%

#7a283f

25% + léger

#4e1a28

25% renforcé

#9ddfcd

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

dragee

#EFBAE1

100% 100%

#ffffff

25% + léger

#df75c3

25% renforcé

#10451e

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

vieux-rose

#F59BBB

100% 100%

#fef6f9

25% + léger

#ee528a

25% renforcé

#0a6444

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

aubergine

#3F2A56

100% 100%

#4f356c

25% + léger

#322245

25% renforcé

#c0d5a9

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

parme

#C7B2DE

100% 100%

#faf8fc

25% + léger

#9e7ac6

25% renforcé

#384d21

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

lavande

#6558B1

100% 100%

#8f85c6

25% + léger

#4f4391

25% renforcé

#9aa74e

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

bleu-marine

#00205B

100% 100%

#002872

25% + léger

#001a49

25% renforcé

#ffdfa4

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

bleu-horizon

#A4C8E1

100% 100%

#edf4f9

25% + léger

#69a5ce

25% renforcé

#5b371e

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

ceruleen

#0084D4

100% 100%

#0aa3ff

25% + léger

#006aaa

25% renforcé

#ff7b2b

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

cobalt

#003865

100% 100%

#00467e

25% + léger

#002d51

25% renforcé

#ffc79a

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

vert-d-eau

#A1D6CA

100% 100%

#e2f2ef

25% + léger

#6dbfad

25% renforcé

#5e2935

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

menthe

#00B388

100% 100%

#00e0aa

25% + léger

#008f6d

25% renforcé

#ff4c77

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

foret

#154734

100% 100%

#1a5941

25% + léger

#11392a

25% renforcé

#eab8cb

Inversée

5%

10%

30%

50%

70%

80%

5%

20%

40%

50%

70%

80%

rouge

#D52B1E

bleu

#0088BE

blanc

#FFFFFF

noir

#000000

gris

#D9D9D9

carbone

#333333

carbone-inverse

#CCCCCC

carbone-dark

#111111

COOL GRAY 11

#4D4F53

COOL GRAY 9

#747678

COOL GRAY 7

#A0A0A0

COOL GRAY 5

#B9B9B9

COOL GRAY 4

#CCCCCC

COOL GRAY 3

#D7D7D7

COOL GRAY 0

#F4F5F6

inverse

#262626