/* CSS Document */
body {margin:0; padding:10px 40px; background:#ffd; font-size: 1.3em; font-family: comic sans ms;}
textarea {width:90%; overflow:hidden; font-size: 1em; font-family: comic sans ms; background-color: rgba(0, 0, 0, 0);  padding: 0em 1em; text-align: justify;}
.titreh1 { display:inline-block; text-align: left; text-shadow: 12px 12px 6px Silver;}
article h1 {font-size:2em;}
a:visited  { color:blue;}
a:link { color:blue;}
#menu_horizontal li{display:inline-block; padding: 0.5em 1em;}

.conteneur {display:flex; justify-content:space-around;}
.element_1 {width:100%; background:#dff;}
.element_2 {width:45%; background:#dff;}
.element_2 img{width:100%;}
.element_2 figure img{width:32%;}
.element_3 {width:30%; background:#dff;}
.element_4 {width:24%; background:#dff;}
.sous_titre  {margin-top:30px; margin-bottom:15px; text-align: left;}
.sous_titre h2, .sous_titre  h5 {display:inline-block; margin-left: 2%;}	/*Pour mettre sur la meme ligne le retour haut de page*/
.sous_titre  h5 {text-shadow: 12px 12px 6px #819FF7;}
.sous_titre h2 {text-shadow: 12px 12px 6px Silver;}
.retrait {margin-left: 1.7%; margin-right: 1.7%; text-align:justify;}
article p {width: 90%; text-align: justify; margin-left:auto; margin-right:auto;}/*centrer avec marge les paragraphes*/


/*Cours sur la police*/
.xx-small {font-size: xx-small;}
.x-small {font-size: x-small;}
.small {font-size: small;}
.medium  {font-size: medium;}
.large  {font-size: large;}
.x-large  {font-size: x-large;}
.xx-large {font-size: xx-large;}
.font-size {font-size: 1.8em;}

/*Cours sur la police*/
.arial {font-family: arial;}
.arial_black {font-family: arial black;}
.comic_sans_ms {font-family: comic sans ms;}
.courier_new {font-family: courier new }
.georgia {font-family: georgia;}
.impact {font-family: impact;}
.times_new_roman {font-family: times new roman;}
.trebuchet_ms {font-family: trebuchet ms;}
.verdana {font-family: verdana;}

/*Cours sur le style*/
.italic {font-style:italic;}
.oblique {font-style:oblique;}
.bold {font-weight:bold;}
.underline {text-decoration:underline;}
.line_through {text-decoration:line-through;}
.overline {text-decoration:overline;}
.blink {text-decoration:blink;}
.normal {font-style:normal; font-weight:normal; text-decoration:none}

/*Cours sur l'alignement du texte*/
.left {text-align:left; display:block;}
.center {text-align:center; display:block;}
.right {text-align:right; display:block;}
.justify {text-align:justify; display:block;}

/*Cours sur le floating*/
.image_flottante_gauche {float: left; height:4em;}
.image_flottante_droite {float: right; height:4em;}
.stop_float{ clear:both;}

/*Cours sur les couleurs*/
.white {color: white;}
.silver {color: silver;}
.gray {color: gray;}
.black {color: black;}
.red {color: red;}
.maroon {color: maroon;}
.lime {color: lime;}
.green {color: green;}
.yellow {color: yellow;}
.olive {color: olive;}
.blue {color: blue;}
.navy {color: navy;}
.fuchsia {color: fuchsia;}
.purple {color: purple;}
.aqua {color: aqua;}
.teal {color: teal;}

/*Cours sur l'arrière plan*/
.arriere_plan {background: url("images/soleil.png") no-repeat top right, url("images/pattern.png") fixed;}
.arriere_plan_couleur {background-color: #A9A9F5;}

/*Cours sur la transparence*/
.transparence  {background-color: black; color: white; opacity: 0.4;}
.transparence2 {background-color: rgba(200, 200, 200, 0.4);}

/*Cours sur les bordures*/
.solid {border: 3px blue solid; border-radius: 35px / 15px;}
.dotted {border: 3px blue dotted;}
.dashed {border: 3px blue dashed;}
.double {border-top: none; border-right: 6px double blue; border-bottom: 6px double red;border-left: 6px double blue; border-radius: 35px / 10px 35px 0px 0px;}
.groove {border: 12px red groove; border-radius: 35px;}
.ridge {border: 12px red ridge;}
.inset {border: 12px red inset;}
.outset {border: 12px red outset;}

/*Cours sur les ombres*/
.ombre{box-shadow: -8px 8px 16px black;}
.ombre_inset{box-shadow: -6px -4px 12px black inset;}
.ombre_texte{text-shadow: 8px 8px 4px black;}

/*Cours sur l'apparences dynamiques*/
/*par défaut (non survolés)*/
.dynamiques a{ color: red; font-style: italic;}
.dynamiques p{ color: olive;}

/*Apparence au survol*/
.dynamiques a:hover{ text-decoration: underline; color: green;}
.dynamiques p:hover{ text-decoration: underline; color: teal; background-color: rgba(0, 255, 0, 0.2);}

/* Apparence lors du clic actif */
.dynamiques a:active,.dynamiques p:active{ text-decoration: none; color: lime;}

/* Apparence lien séléctioné */
.dynamiques a:focus{}
/* Apparence lien visité */
.dynamiques a:visited{}