/**
 * Voici une feuille de style type, bien entendu vous pouvez ajouter
 * ou supprimer des propriétés CSS en fonction de vos besoins.
 */

/**
 * Éléments principaux
 */

/* Fond du site */
body {
}

/* Site */
#site {
  margin:0px auto !important;
  max-width:1200px !important;
}

/* Bannière */
header {
}

/* Titre de la bannière */
header span {
}

/* Menu */
nav {
}

/* Items du menu */
nav a {
}

/* Items au survol du menu */
nav a:hover {
}

/* Item courant du menu */
nav a.active {
}

/* Bas de page */
footer {
	height:400px !important;

}

footer #footersite, #footerbody {
}

/* Liens du bas de page */
footer #footersite, #footerbody a {
}

/* footer bloc gauche */
footer #footersiteLeft, #footerbodyLeft  {
  font-size:16px;
}

/* footer bloc central */
footer #footersiteCenter, #footerbodyCenter {
  vertical-align: bottom;
}

/* footer bloc droite */
footer #footersiteRight, #footerbodyRight {
}

/**
 * Éléments de contenu
 */

/* Titres */
h1 {
 font-size: ; 
 color: ; 
 }
h2 {
 font-size: 18; 
 color: #5e4eff; 
 }
h3 {
 font-size: 16; 
 color: white; 
 }
h4 {
 font-size: 14; 
 color: white; 
 }

/* Liens */
a {
}

/* Liens au survol */
a:hover {
}

/* Liens au clic */
a:active {
}

/* Boutons */
.button,
button[type='submit'],
.pagination a {
}

/* Boutons au survol */
.button:hover,
button[type='submit']:hover,
.pagination a:hover {
}

/* Boutons au clic */
.button:active,
button[type='submit']:active,
.pagination a:active {
}

/* Cases à cocher */
input[type='checkbox']:checked + label:before {
}

/* Cases à cocher au survol */
input[type='checkbox']:not(:active):checked:hover + label:before,
input[type='checkbox']:active + label:before {
}

/* Champs de formulaire */
input[type='text'],
input[type='password'],
.inputFile,
select,
textarea {
}

/* Champs de formulaire au survol */
input[type='text']:hover,
input[type='password']:hover,
.inputFile:hover,
select:hover,
textarea:hover {
}
/* Capsule : Emplacement */
.wrapper {
  float: right;
  /* padding-left: 450px; */
}

/* Capsule : structure  */
.capsule {
  display: table;
  font-size: 1.2em;
}

.capsule__btn,
.capsule__body {
  display: table-cell;
  border: 3px solid;
  vertical-align: middle;
}
.capsule--top .capsule__btn, .capsule--top
.capsule__body {
  vertical-align: middle;
}
.capsule--bottom .capsule__btn, .capsule--bottom
.capsule__body {
  vertical-align: bottom;
}

.capsule__btn {
  border-right: none;
  padding: 8px;
  padding-left: 20px;
}
.capsule__btn--rev .capsule__btn {
  float: right;
}

.capsule__body {
  overflow: hidden;
}

/* Capsule : Styling */
.brand-style .capsule__body,
.brand-style .capsule__btn {
  border-color: #FA45C0;
}

.brand-style .capsule__btn {
  background: #FA45C0;
  Color: #FFFFFF;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
.brand-style .capsule__body {
  background: #fff;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  padding: 8px;
  padding-right: 20px;
}

/* Hauteur minimum du site */
section {
	min-height: 700px;
}
/* Zoom sur images */
<div class=zoom><style>.zoom {
width: 100px;
height: 100px;
}
.image {
width: 100%;
height: 100%; 
}
.image img {
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
/* L'image est doublée */
-webkit-transform:scale(1.25); /* Safari et Chrome */
-moz-transform:scale(1.25; /* Firefox */
-ms-transform:scale(1.25; /* Internet Explorer 9 */
-o-transform:scale(1.25; /* Opera */
transform:scale(1.25;
}</style>