html, body { height: 100%; min-height: 100%; margin: 0; padding: 0; font-family: Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif/*'Alegreya Sans', sans-serif*/; font-size: 18px; }

/* Pour les ancres */
#presentation, #actualite { position: relative; top: -80px; }

div.ligne { width: 100%; overflow: hidden; margin: 0; padding: 0; }
div.col2a { float: left; width: 49%; margin: 0 1% 0 0; }
div.col2b { float: left; width: 49%; margin: 0 0 0 1%; }
div.col3a { float: left; width: 32%; margin: 0 1% 0 0; }
div.col3b { float: left; width: 32%; margin: 0 1% 0 1%; }
div.col3c { float: left; width: 32%; margin: 0 0 0 1%; }
div.col4a, div.col4b, div.col4c, div.col4d { float: left; width: 22%; margin: 0 3% 0 0; color: #fff; border-radius: 10px; }
div.col4a { margin: 0 3% 0 0; }
div.col4b { margin: 0 2% 0 1%; }
div.col4c { margin: 0 1% 0 2%; }
div.col4d { margin: 0 0 0 3%; }
div.col5a, div.col5b, div.col5c, div.col5d, div.col5e { float: left; width: 18%; color: #fff; border-radius: 10px; }
div.col5a { margin: 0 1.5% 0 0; }
div.col5b { margin: 0 1.5% 0 1%; }
div.col5c { margin: 0 1% 0 1%; }
div.col5d { margin: 0 1% 0 1.5%; }
div.col5e { margin: 0 0 0 1.5%; }

div.ligneflex { display: flex; align-items: center; }
div.col6a { width: 38%; margin: 0 2% 0 0; }
div.col6b { width: 58%; margin: 0 0 0 2%; }
div.col6b p { font-size: 1.2em; }
div.col7a { width: 19%; margin: 0 1% 0 0; }
div.col7b { width: 58%; margin: 0 1% 0 1%; }
div.col7c { width: 19%; margin: 0 0 0 1%; }

hr { visibility: hidden; }

span.rouge { color: #ce0000/*b30000*/; }
span.gras { font-weight: bold; }
span.fonction { font-style: italic; font-size: .9em; }

p { text-align: justify; }
p.centre { text-align: center; }
p.droite { text-align: right; }
/*p.gauche { text-align: left; }*/

figure { margin: 0; padding: 0; }
figure.galerie, figure.galeriemed { width: 100%; height: auto; margin: 0 auto; padding: 0; color: #fff; background-color: #333; }
figure.galerie { max-width: 256px; }
figure.galeriemed { max-width: 512px; }
figcaption { padding: 5px 0; font-style: italic; font-size: .8em; }

header, footer { background-color: #7b7b7b; color: #eee; }
header { top: 0; position: fixed; z-index: 998;/*shadowbox est à 999*/ width: 100%; height: auto; margin: 0; padding: 2px 0; border-bottom: 2px solid #ce0000; text-transform: uppercase; }
footer { bottom: 0; position: fixed; z-index: 998;/*shadowbox est à 999*/ width: 100%; height: auto; margin: 0; padding: 20px 0; border-top: 2px solid #ce0000; }
footer p { margin: 2px 0; text-align: center; }
footer span.titre { font-size: 2em; vertical-align: sub; }
footer span.separation { margin: 0 50px; color: #ce0000; }
header a { color: #fff; text-decoration: none; }
footer a { color: #eee; }
header a:hover, footer a:hover { color: #ce0000; }
header ul.rubrique { margin: 0; padding: 0; list-style-type: none; text-align: center; font-weight: bold; letter-spacing: 2px; }
header ul.rubrique li { display: inline-block; margin: 5px; padding: 5px; vertical-align: middle; }
header img.logoheader { width: 100%; max-width: 184px; height: auto; vertical-align: baseline; }

#page { height: 100%; text-align: center; }

div.bg1, div.bg2, div.bg3, div.bg4 { display: table; position: relative; width: 100%; height: 100%; background-attachment: scroll; }
div.bg1 { background: url('/img/fondaleatoire/image-home-1.jpg') no-repeat center fixed; background-size: cover; }
div.bg2 { background: url('/img/fondaleatoire/image-scroll-1.jpg') no-repeat center fixed; background-size: cover; height: 400px; }
div.bg3 { background: url('/img/fondaleatoire/image-scroll-2.jpg') no-repeat center fixed; background-size: cover; height: 400px; }
div.bg4 { background: url('/img/fond/Background_scroll_contacts.jpg') no-repeat center fixed; background-size: cover; height: 400px; }

div.cadre { display: table; width: 100%; height: 100%; }
p.cadre { display: table-cell; vertical-align: middle; text-align: center; }
div.paragraphe, div.prestation { margin: 0 auto; padding: 30px 0; color: #111; background-color: white; text-align: center; }
div.paragraphe { max-width: 960px; }
div.prestation { max-width: 1200px; }
div.paragraphe a:link, div.paragraphe a:active, div.paragraphe a:visited { color: #333; border-bottom: 1px dashed #333; text-decoration: none; }
div.paragraphe a:hover { border-bottom: 1px solid #ce0000; text-decoration: none; }
div.actualite { width: 100%; max-width: 500px; margin: auto; padding: 5px; color: #fff; background-color: #777; border-radius: 5px; text-align: center; }
ul.liste { display: inline-block; margin: auto; list-style-type: square; text-align: left; }

img.logo { display: inline-block; position: relative; width: 100%; max-width: 168px/*212px*/; height: auto; max-height: 200px/*250px*/; margin: auto; padding: 50px; border-radius: 20px; background-color: #fff; background: rgba(255, 255, 255, 0.6); }
/*img.fabricant { width: 30%; max-height: 60px; vertical-align: middle; }*/
img.fabricant1, img.fabricant2, img.fabricant3, img.fabricant4, img.fabricant5 { width: auto; height: 40%; vertical-align: middle; }
img.fabricant1 { max-height: 73.3px; }
img.fabricant2 { max-height: 58.1px; }
img.fabricant3 { max-height: 56.9px; }
img.fabricant4 { max-height: 72.1px; }
img.fabricant5 { max-height: 64.5px; }
br.fabricant { display: inline-block; margin-bottom: 2.3em; }

a.corner { border-bottom: none !important; }
a.corner::before { content: url('/img/corner_before.png'); position: relative; left: -5px; top: -5px; transition: all .2s ease-out 1ms; }
a.corner:hover::before { left: -15px; top: -15px; }
a.corner::after { content: url('/img/corner_after.png'); position: relative; right: -5px; bottom: -10px; transition: all .2s ease-out 1ms; }
a.corner:hover::after { right: -15px; bottom: -20px; }

h1, h2 { padding: 10px; text-transform: uppercase; }
h1 { font-size: 1.5em; }
h2 { font-size: 1.4em; }
h1 span.lower { text-transform: lowercase; }

ul.nuage { margin: 0; padding: 0; list-style-type: none; text-align: center !important; }
ul.nuage li { display: inline-block; margin: 10px; padding: 5px; }
ul.nuage li { border: 1px dashed black; }

p.actuvideos { margin: 0; padding: 0; text-align: center; }

p.technique { font-weight: bold; }
div.img-des ul { list-style-type: none; margin: 0 0; padding: 0; text-align: left; }
div.img-des li.tech { margin-top: 10px; }
div.img-des span.tech { color: #ce0000; }

div.contact { margin-bottom: 80px; }
div.contact div.ligneflex { display: flex; align-items: end; }
div.contact div.cola { width: 24%; margin: 0 1% 0 0; display: flex; flex-flow: row wrap; justify-content: flex-end; }
div.contact div.colb { width: 25%; margin: 0; }
div.contact div.colc { width: 25%; margin: 0; }
div.contact div.cold { width: 24%; margin: 0 0 0 1%; }
div.contact a { border-bottom: none !important; }
div.contact a:hover { opacity: 0.8; }
img.contactbulles { width: 18%; max-width: 240px; }
div.contact img.trombi { width: 90%; max-width: 150px; }
div.contact p { margin: 0; padding: 0; }
div.contact p.titre { color: #ce0000; font-size: 1.4em; font-weight: bold; }
div.contact p.fonction { font-size: 1.1em; }
div.contact p.telephone { font-size: 1.2em; }
div.contact p.email { font-size: 1.2em; }
div.contact div.coor { float: left; width: 48%; margin: 0 2% 0 0; }
div.contact div.carte { float: left; width: 50%; text-align: right; }
ul.contact, ul.rcstva { margin: 0; padding: 0; list-style-type: none; text-align: left; }
ul.contact { font-size: 1.2em; }
ul.rcstva { font-size: 0.9em; }
img.phone { width: 100%; max-width: 25px; height: auto; vertical-align: middle; }
#carte { width: 100%; height: 300px; background: #eee; }

#reseaux { overflow: auto; width: 100%; text-align: right; }
#reseaux ul, #reseaux li { display: inline; margin: 0; padding: 0; }
#reseaux li { float: right; text-align: center; transition: all 1s ease-out 1ms; }
#reseaux li.fb, #reseaux li.in { margin-left: 20px; }
#reseaux ul { font-size: .8em; }
#reseaux a { display: inline-block; width: 100%; height: auto; padding: 10px 0; border: none !important; }
#reseaux img { width: 100%; max-width: 48px; height: auto; transition: all 1s ease-out 1ms; }
#reseaux img:hover { opacity: 0.8; }

img.video { width: 98%; max-width: 260px; height: auto; padding: 1%; background-color: #333; -moz-transition: all 1s ease-out 1ms; -webkit-transition: all 1s ease-out 1ms; -o-transition: all 1s ease-out 1ms; transition: all 1s ease-out 1ms; }
img.video:hover { background-color: #ce0000; opacity: 0.8; }
img.demo { width: 98%; max-width: 800px; height: auto; padding: 1%; transition: all 1s ease-out 1ms; }
img.demo:hover { opacity: 0.9; }
a.img { border: none !important; -moz-transition: all 1s ease-out 1ms; -webkit-transition: all 1s ease-out 1ms; -o-transition: all 1s ease-out 1ms; transition: all 1s ease-out 1ms; }
a.img:hover { color: #ce0000 !important; opacity: 0.8; }

div.pageblanche { margin: 70px auto; }

img.galerie-tn, img.galerie-med, img.produit-tn { width: 98%; height: auto; padding: 1%; vertical-align: middle; -moz-transition: all 1s ease-out 1ms; -webkit-transition: all 1s ease-out 1ms; -o-transition: all 1s ease-out 1ms; transition: all 1s ease-out 1ms; }
img.galerie-tn, img.produit-tn { max-width: 256px; }
img.galerie-med { max-width: 512px; }
img.galerie-tn, img.galerie-med { background-color: #333; }
img.galerie-tn:hover, img.galerie-med:hover/*, img.produit-tn:hover*/ { opacity: 0.8; cursor: pointer; }
img.galerie-tn:hover, img.galerie-med:hover { background-color: #ce0000; }
img.galerie { width: 98%; max-width: 720px; height: auto; padding: 1%; background-color: #333; }
div.img-prec, div.img-suiv { width: 9%; color: #ce0000; text-align: center; font-size: 5em; }
div.img-prec a:link, div.img-prec a:active, div.img-prec a:visited, div.img-suiv a:link, div.img-suiv a:active, div.img-suiv a:visited { color: #ce0000; border-bottom: none; text-decoration: none; }
div.img-prec a:hover, div.img-suiv a:hover { color: #b30000; border-bottom: none; text-decoration: none; }
div.img-prec { margin: 0 1% 0 0; }
div.img-suiv { margin: 0 0 0 1%; }
div.img-des { width: 43%; margin: 0 2% 0 0; align-self: start; }
div.img-des p { margin: 0; padding: 0; }
div.img-photo { width: 35%; align-self: start; text-align: right; }
div.img-photo figure.galerie { margin: 0 0 0 auto; }
img.precsuiv { width: 100%; max-width: 40px; height: auto; }

#autrespages { width: 100%; margin: 0 auto; text-align: center; }
#autrespages a:link, #autrespages a:active, #autrespages a:visited { border-bottom: none; }
#autrespages a:hover { color: #ce0000; border-bottom: none; text-decoration: none; }
#autrespages a.prec::before { content: url('/img/fleche_prec.png'); margin-right: 5px; vertical-align: -25%; }
#autrespages a.suiv::after { content: url('/img/fleche_suiv.png'); margin-left: 5px; vertical-align: -25%; }

#produits { width: 100%; }
#produits div.ligne { display: table; overflow: visible; }
#produits div.img, #produits div.infos { display: table-cell; width: 50%; vertical-align: middle; }
#produits p.nom { text-transform: uppercase; font-weight: bold; font-size: 1.2em; }
#produits div.description p { font-style: italic; }
#produits div.description ul { list-style-type: none; text-align: left; }
#produits p.tarif { font-size: .9em; }
#produits p.lien { text-align: right; font-size: .7em; }

@media all and (max-width: 960px) { /* version mobile */

html,body { font-size: 10px; background-color: #7b7b7b; }

div.bg1, div.bg2, div.bg3, div.bg4 { background-attachment: scroll !important; }

#presentation, #actualite { top: -40px; }

div.col2a, div.col2b { width: 100%; margin: 0; }

footer { position: static; top: auto; bottom: auto; }
footer span.separation { margin: 0; }

header img.logoheader { max-width: 80px; }
header ul.rubrique li { margin: 0; padding: 0 2px; }

img.fabricant1, img.fabricant2, img.fabricant3, img.fabricant4, img.fabricant5 { height: 20%; }
img.fabricant1 { max-height: 37.2px; }
img.fabricant2 { max-height: 29.6px; }
img.fabricant3 { max-height: 29px; }
img.fabricant4 { max-height: 36.6px; }
img.fabricant5 { max-height: 32.8px; }

div.pageblanche { margin: 50px auto 0 auto; }
div.paragraphe { padding: 5px; }
div.actualite { margin: 0; padding: 0; border-radius: 0; }

#reseaux li.fb, #reseaux li.in { margin-left: 5px; }
#reseaux img { max-width: 24px; }

div.contact { margin-bottom: 0; }
div.contact img.trombi { width: 40%; }
div.contact div.ligneflex { flex-flow: row wrap; }
div.contact div.cola { width: 49%; margin: 0 1% 0 0; display: flex; flex-flow: row wrap; justify-content: flex-end; }
div.contact div.colb { width: 50%; margin: 0; text-align: left; }
div.contact div.colc { width: 50%; margin: 0; text-align: right; }
div.contact div.cold { width: 49%; margin: 0 0 0 1%; }

div.contact div.coor { float: left; width: 100%; margin: 0; }
div.contact div.carte { float: left; width: 100%; margin-top: 10px; }

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1366px) { /* version iPad */
div.bg1, div.bg2, div.bg3, div.bg4 { background-attachment: scroll !important; }
}