body{
  margin:0;
  padding:0;
  font-family:sans-serif;
}


.sidebar-contact{
  position:fixed;
  top:50%;
  left:-350px;
  transform:translateY(-50%);
  width:350px;
  height:auto;
  padding:40px;
  background:#fff;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  box-sizing:border-box;
  transition:0.5s;
}
.sidebar-contact.active{
  left:0;
}
.sidebar-contact input,
.sidebar-contact textarea{
  width:100%;
  height:36px;
  padding:5px;
  margin-bottom:10px;
  box-sizing:border-box;
  border:1px solid rgba(0,0,0,.5);
  outline:none;
}
.sidebar-contact h2{
  margin:0 0 20px;
  padding:0;
}
.sidebar-contact textarea{
  height:60px;
  resize:none;
}
.sidebar-contact input[type="submit"]{
  background:#00bcd4;
  color:#fff;
  cursor:pointer;
  border:none;
  font-size:18px;
}
.toggle{
  position:absolute;
  height:48px;
  width:48px;
  text-align:center;
  cursor:pointer;
  background:#f00;
  top:0;
  right:-48px;
  line-height:48px;
}
.toggle:before{
  content:'\f003';
  font-family:fontAwesome;
  font-size:18px;
  color:#fff;
}
.toggle.active:before{
  content:'\f00d';
}
@media(max-width:768px)
{
  .sidebar-contact{
    width:100%;
    height:100%;
    left:-100%;
  }
  .sidebar-contact .toggle{
    top:50%;
    transform:translateY(-50%);
    transition:0.5s;
  }
  .sidebar-contact.active .toggle
  {
    top:0;
    right:0;
    transform:translateY(0);
  }
  .scroll{
    width:100%;
    height:100%;
    overflow-y:auto;
  }
  .content{
    padding:50px 50px;
  }
/*
Ce code CSS définit le style visuel de certains éléments de la page web. Voici une explication de chaque règle CSS :

body: applique les styles suivants au corps de la page :

margin:0: supprime les marges par défaut.
padding:0: supprime les marges intérieures par défaut.
font-family:sans-serif;: définit la police de caractères à utiliser pour le texte.
.sidebar-contact: applique les styles suivants à un élément de la page avec la classe "sidebar-contact" :

position:fixed;: positionne l'élément de manière fixe par rapport à la fenêtre du navigateur.
top:50%;: définit la position verticale de l'élément à 50% de la hauteur de la fenêtre.
left:-350px;: définit la position horizontale de l'élément à l'extérieur de la fenêtre sur le côté gauche.
transform:translateY(-50%);: centre l'élément verticalement.
width:350px;: définit la largeur de l'élément à 350 pixels.
height:auto;: définit la hauteur de l'élément automatiquement en fonction de son contenu.
padding:40px;: ajoute des marges intérieures de 40 pixels à l'élément.
background:#fff;: définit la couleur de fond de l'élément en blanc.
box-shadow: 0 20px 50px rgba(0,0,0,.5);: ajoute une ombre à l'élément.
box-sizing:border-box;: inclut les bordures et les marges dans la taille totale de l'élément.
transition:0.5s;: ajoute une transition de 0,5 seconde pour une animation fluide.
.sidebar-contact.active: applique les styles suivants à l'élément avec la classe "sidebar-contact" lorsqu'elle est active :

left:0;: déplace l'élément complètement sur le côté gauche de la fenêtre.
.sidebar-contact input, .sidebar-contact textarea: applique les styles suivants aux éléments d'entrée de texte dans l'élément avec la classe "sidebar-contact" :

width:100%;: définit la largeur à 100% de l'élément parent.
height:36px;: définit la hauteur à 36 pixels.
padding:5px;: ajoute des marges intérieures de 5 pixels à l'élément.
margin-bottom:10px;: ajoute des marges inférieures de 10 pixels à l'élément.
box-sizing:border-box;: inclut les bordures et les marges dans la taille totale de l'élément.
border:1px solid rgba(0,0,0,.5);: ajoute une bordure d'un pixel avec une couleur de noir semi-transparent.
outline:none;: supprime la bordure de focus par défaut.....


__________________________________________________________  +++++ Important +++  _______________________________________________________

Ce code définit également un sélecteur de classe .toggle, 
qui est utilisé pour définir le bouton de basculement pour afficher ou masquer la barre latérale de contact. 

Le bouton est positionné en haut à droite de la fenêtre avec position:absolute et top:0 et right:-48px. 

Le background est défini sur #f00 (rouge) et le texte dans le bouton est centré verticalement et horizontalement 
avec text-align:center et line-height:48px. 

Le bouton a un pseudo-élément :before qui affiche une icône en utilisant la police d'icônes Font Awesome. 
L'icône est un symbole «hamburger» qui est affiché lorsque la barre latérale est masquée 
et un symbole «croix» qui est affiché lorsque la barre latérale est affichée. 
Le bouton a également une classe .active qui est ajoutée ou supprimée avec .toggleClass() en même temps que la classe .active de 
la barre latérale de contact.

Finalement, le code utilise une règle @media pour les écrans plus petits d'une largeur maximale de 768px. 
Dans cette règle, la largeur de la barre latérale est définie sur 100% avec width:100% et la position est 
définie sur la gauche de la fenêtre avec left:-100%. 

__________________________________________________________  +++++ Important +++  _______________________________________________________

La classe .toggle est également modifiée pour qu'elle apparaisse au milieu de la fenêtre avec top:50% et transform:translateY(-50%). 
Lorsque la barre latérale est affichée, la classe .active est ajoutée à la classe .toggle, 
et la position du bouton est modifiée pour qu'il apparaisse en haut à droite de 
la barre latérale avec top:0, right:0, et transform:translateY(0). 

Enfin, une classe .scroll est définie pour permettre le défilement vertical de la fenêtre lorsqu'elle est affichée sur 
un écran plus petit, et la classe .content est ajustée pour éviter que 
le contenu principal ne soit caché derrière la barre latérale.








/**,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}*/
/*.button {
    margin-left:242px;
    margin-top:260px;
} */
/*#formulaire {
    position:absolute;
    height:260px;
    width:240px;
    box-shadow:7px 11px 15px -3px #000000;
    margin-top:7%;
}*/