html, body { width: 100%; min-height: 100%; margin: 0; padding: 0; font-family: Chewy, cursive; color: #060; font-size: 16px; background: url('/images/fond_grille.png') repeat center fixed, url('/images/romainpetit_180520061230d_1920-1080_looks.jpg') no-repeat center fixed; background-size: auto, cover; background-color: #cc0; }

div.ligne, ul.ligne { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: inline-flex; flex-flow: row wrap; width: 100%; }
div.ct1a { width: 49%; margin: 0 1% 0 0; }
div.ct1b { width: 49%; margin: 0 0 0 1%; }
div.ct1c { width: 48%; margin: 0 1% 0 1%; }
div.ct2a { width: 32%; margin: 0 1% 0 0; }
div.ct2b { width: 32%; margin: 0 1% 0 1%; }
div.ct2c { width: 32%; margin: 0 0 0 1%; }
div.ct3a { width: 22%; margin: 0 3% 0 0; }
div.ct3b { width: 22%; margin: 0 2% 0 1%; }
div.ct3c { width: 22%; margin: 0 1% 0 2%; }
div.ct3d { width: 22%; margin: 0 0 0 3%; }
div.ct4a { width: 66%; margin: 0 1% 0 0; }
div.ct4b { width: 66%; margin: 0 0 0 1%; }

a:link, a:active, a:visited { color: #090; text-decoration: none; border-bottom: #090 dashed 1px; }
a:hover { color: #d60; text-decoration: none; border-bottom: #d60 solid 1px; }
hr { visibility: hidden; margin: 0; }
ul { padding-left: 2em; margin-left: 0px; margin-top: 2px; margin-bottom: 2px; }
ul.rss { padding-left: .5em; list-style: none; font-size: .8em; }
h1, h2 { font-size: 1.4em; margin: 2px; padding: 0; text-align: center; }
blockquote { margin: 5px; padding: 5px; border: #090 dotted 1px; font-family: 'Special Elite', cursive; text-align: justify; color: #000; background-color: #eee; }

.lienvershautdepage { font-size: .7em; font-style: italic; text-align: right; }
a.lienexterne:after { content: url('/images/lienexterne.png'); }
a.lienexterne:hover:after { content: url('/images/lienexternehover.png'); }
a.lienexterneurl:after { content: ' (' attr(href) ')'; }
a.lienexterneurl:hover:after { content: ' (' attr(href) ')'; }
a.lienforum:after { content: ' [FORUM]'; }
a.lienforum:hover:after { content: ' [FORUM]'; }
span.underline { text-decoration: underline; }
span.linethrough { text-decoration: line-through; }
span.italic { font-style: italic; }
span.bold { font-weight: bold; }
img.sansbordure { border: none; }
img.avecbordure { border-width: 2px; border-style: solid; }
img.avecbordureetespace { border-width: 2px; border-style: solid; margin: 10px; }

p { margin: .5em 0; }
p.presentation, p.paragraphe { margin-left: auto; margin-right: auto; padding: 5px; text-align: justify; text-indent: 40px; }
p.gauche { text-align: left; }
p.milieu { text-align: center; }
p.droite { text-align: right; }
p.disclaimer { padding: 5px; margin-left: auto; margin-right: auto; text-align: justify; text-indent: 40px; font-size: .7em; font-style: italic; }

#tout, #entete { width: 90%; max-width: 1550px; margin: 0 auto; padding: 0; }

#entete { top: 0; position: fixed; z-index: 998;/*shadowbox est à 999*/ font-size: .7em; background-color: #fff; border-bottom: #d60 solid 1px; /*box-shadow: 0 0 2px #ddd; */}
#entete img.logo { width: 100%; max-width: 120px; height: auto; margin-bottom: -8px; }
#entete div.logo { padding: 5px; font-style: italic; font-size: 1.4em; color: #060; }
#entete div.rubriques { padding: 5px 5px 0 0; text-align: left; text-transform: uppercase; font-size: 2em; color: #fff; background-color: #060; }
#entete ul, #entete li { display: inline; list-style: none; margin: 0; padding: 0 5px; }
#entete a:link, #entete a:active, #entete a:visited { color: #060; text-decoration: none; border-bottom: none; }
#entete a:hover { color: #d60; text-decoration: none; border-bottom: none; }
#entete a.rubrique:link, #entete a.rubrique:active, #entete a.rubrique:visited { color: #fff; text-decoration: none; border-bottom: none; }
#entete a.rubrique:hover { color: #d60; text-decoration: none; border-bottom: none; }
#entete span.date { font-size: .6em; color: #000; /*vertical-align: super; line-height: normal; */}

#page { width: 60%; min-height: 800px; margin: 100px 0 0 auto; background-color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.8); }

#pieddepage { margin: 0; padding: 10px; background-color: rgb(0, 102, 0); background-color: rgba(0, 102, 0, 0.8); color: #ff0; text-align: center; border-top: #dd0 solid 3px; }
#pieddepage a:link, #pieddepage a:active, #pieddepage a:visited { color: #dd0; text-decoration: none; border-bottom: #dd0 dashed 1px; }
#pieddepage a:hover { color: #d60; text-decoration: none; border-bottom: #d60 solid 1px; }
#copyright { padding: 20px; font-size: .9em; text-align: center; }
#menu { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 900px; margin: 0 auto 0 auto; text-align: left; font-size: .6em; }
#menu ul.colonne { display: block; width: 20%; }
#menu ul { list-style: none; }

#commentaires form { width: 90%; margin-left: auto; margin-right: auto; font-size: .8em; }
#commentaires fieldset { background-color: #eee; border: 2px solid grey; }
#commentaires textarea, #commentaires input[type=text], #commentaires select  { width: 98%; }
#commentaires input[type=submit] { padding: 2px 20px; background-color: white; border: 1px solid grey; text-transform: uppercase; cursor:pointer; }
#commentaires input[type=submit]:hover { background-color: #ddd; }
#commentaires p.avertissement { width: 90%; margin-left: auto; margin-right: auto; padding: 20px 0; color: white; background-color: red; font-size: 1.6em; text-align: center; }
#commentaires div.ct2a { text-align: right; }

#pagesommaire { margin-left: auto; margin-right: auto; padding: 0 5px; }
#pagesommaire { text-align: right; }

div.autrespages { text-align: center; }
div.autrespages ul { display: inline-block; margin: 10px; padding: 5px; font-size: .9em; text-align: center; font-weight: bold; text-transform: uppercase; font-size: .8em; }
div.autrespages li { display: inline-block; padding: 10px; border: 1px solid darkgreen !important; }
div.autrespages li.lien:hover { border: 1px solid black; background-color: lightgreen; }
div.autrespages li.pageencours { background-color: darkgreen; color: #fff; }
div.autrespages a { padding: 10px; text-decoration: none; border-bottom: none !important; color: #090; }
div.autrespages a.pageencours { color: #d60; }

#accueil ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 664px; height: auto; margin: auto; padding: 0; list-style-type: none; text-align: left; }
#accueil li { display: inline; margin: 0; padding: 0; top: 0; }
#accueil span { display: block; width: 150px; margin-top: 0; font-size: 1.2em; padding: 5px; color: #060; background-color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.6); border-bottom: #d60 solid 1px; }
#accueil a { display: block; margin: 2px; background: url('/images/accueil_tiles_sprite.jpg') top left no-repeat; width: 160px; height: 120px; border: 1px solid #060; }
#accueil a:hover { border-color: #d60; opacity: 0.8; }
#accueil a.tile1 { background-position: 0 0; }
#accueil a.tile2 { background-position: -160px 0; }
#accueil a.tile3 { background-position: -320px 0; }
#accueil a.tile4 { background-position: -480px 0; }
#accueil a.tile5 { background-position: 0 -120px; }
#accueil a.tile6 { background-position: -160px -120px; }
#accueil a.tile7 { background-position: -320px -120px; }
#accueil a.tile8 { background-position: -480px -120px; }
#accueil a.tile9 { background-position: 0 -240px; }
#accueil a.tile10 { background-position: -160px -240px; }
#accueil a.tile11 { background-position: -320px -240px; }
#accueil a.tile12 { background-position: -480px -240px; }
#accueil a.tile13 { background-position: 0 -360px; }
#accueil a.tile14 { background-position: -160px -360px; }
#accueil a.tile15 { background-position: -320px -360px; }
#accueil a.tile16 { background-position: -480px -360px; }

div.ligne.titre { padding: 5px 0; color: #fff; background-color: #060; border-bottom: #d60 dotted 1px; }

#accueil div.ct3a, #accueil div.ct3b, #accueil div.ct3c, #accueil div.ct3d { background-color: #fff; margin-bottom: 10px; }

#artistique div.fiche { width: 98%; margin: 0 1%; background-color: #fff; }
#artistique img.image { width: 100%; max-width: 640px; height: auto; }
#artistique img.imageportrait { width: 100%; max-width: 480px; height: auto; }
#artistique img.tn { width: 98%; max-width: 160px; height: auto; }
#artistique ul { padding: 5px; text-align: center; list-style: none; }
#artistique ul.references { text-align: left; font-size: .9em; }
#blog div.item { width: 48%; margin: 0 1%; background-color: #fff; margin-bottom: 10px; }
#galerie div.item { width: 23%; margin: 0 1%; background-color: #fff; margin-bottom: 10px; }
#emmb div.edition { width: 92%; margin: 0 4%; background-color: #fff; margin-bottom: 10px; }
#blog p { padding: 0 10px; }
#blog div.billet { background-color: #fff; }
#accueil p.titre, #blog p.titre, #galerie p.titre, #artistique p.titre, #emmb p.titre { margin-top: 0; font-size: 1.1em; padding: 5px 10px 10px 10px; color: #fff; background-color: #060; border-bottom: #d60 solid 2px; }
#accueil p.titre a, #blog p.titre a, #galerie p.titre a, #artistique.titre a, #emmb p.titre a { color: #fff; border-bottom-color: #fff; }
#blog p.texte, #blog p.manuscrit, #artistique p.texte, #emmb p.texte { text-align: justify; text-indent: 5%; }
#blog p.manuscrit { font-family: 'Indie Flower', cursive; font-weight: bold; }
#emmb p.texte { padding: 0 5px; }
#blog p.signature, #artistique p.signature { text-align: right; font-style: italic; font-size: .8em; }
#accueil p.image, #blog p.image, #galerie p.image, #artistique p.image, #emmb p.image { text-align: center; }
#blog div.images { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: inline-flex; flex-flow: row wrap; width: 100%; text-align: center; }
#blog p.forum { text-align: right; font-style: italic; font-size: .8em; }
#blog span.titre { font-weight: bold; }
#blog span.titre, #blog span.titrevo { font-style: italic; }
#blog figure.images1, #blog figure.images2, #blog figure.images3, #blog figure.images4 { margin: 5px auto; text-align: center; }
#blog figure.images1 { width: 100%; }
#blog figure.images2 { width: 50%; }
#blog figure.images3 { width: 33%; }
#blog figure.images4 { width: 25%; }
#accueil img, #blog img, #galerie img, #artistique img.tn, #emmb img { border: 1px solid #060; }
#accueil a.illustration, #blog a.illustration, #galerie a.illustration, #artistique a.illustration, #emmb a.illustration { text-decoration: none; border-bottom: none; }
#blog a:link img, #blog a:active img, #blog a:visited img, #galerie a:link img, #galerie a:active img, #galerie a:visited img { border-color: #090; }
#blog a:hover img, #galerie a:hover img { border-color: #d60; }
#blog img.illustration, #blog img.photo, #galerie img.photo { width: 96%; max-width: 640px; height: auto; }
#galerie img.photoportrait { width: 96%; max-width: 432px; height: auto; }
#galerie video { width: 96%; max-width: 640px; height: auto; background-color: #000; }
#blog img.tn, #galerie img.tn { width: 96%; max-width: 160px; height: auto; }
#emmb img.tn { width: 96%; max-width: 75px; margin: 5px; height: auto; }
#accueil img.tn:hover, #blog img.illustration:hover, #galerie img.illustration:hover, #galerie img.tn:hover { opacity: .8; }
#blog img.transparent { width: auto; height: auto; border: none; }
#galerie ul { list-style: none; }
#galerie div.image { padding: 5px; background-color: #fff; text-align: center; }
#emmb div.introduction { padding: 5px; }
#emmb div.ct4b { text-align: center; }
#emmb ul { list-style: none; }
#emmb ul.fiche { padding-left: 0; }
#emmb p.droite { padding: 0 5px; }
#emmb img.photo { width: 98%; max-width: 266px; }

#dicoboule { font-family: 'Special Elite', cursive; color: #000; background-color: #fff; }
#dicoboule ul { text-align: justify; list-style: none; padding: 0; margin: 0; }
#dicoboule li { display: block; width: 31%; margin: 5px 1%; }

#jeudepaires { margin-left: auto; margin-right: auto; background-color: #fff; padding: 5px; text-align: center; }
#jeudepaires img.carte { width: 14%; max-width: 160px; height: auto; margin: 5px 1%; border: none; cursor: pointer; transition: transform 0.3s ease; }
#jeudepaires a.carte:link, #jeudepaires a.carte:active, #jeudepaires a.carte:visited, #jeudepaires a.carte:hover { border: none; text-decoration: none; }
#jeudepaires .carte:hover {  transform: scale(1.05); }
#message { text-align: center; font-weight: bold; margin-bottom: 10px; }
button#reset { display: block; margin: 0 auto; padding: 8px 16px; }

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

html, body { font-size: 14px; background-image: none; }

#tout, #entete { width: 100%; max-width: 640px; }

#entete { top: auto; position: static; }
#entete img.logo { width: 40px; height: auto; margin-bottom: -6px; }
#entete div.logo, #entete div.rubriques { font-size: .9em; }
#entete li { padding: 0 2px; }

#page { width: 100%; min-height: auto; margin-top: 5px; background-color: #eee; }

#pieddepage { margin-top: 5px; padding: 2px; background-color: rgb(0, 102, 0); }
#copyright { padding: 5px; font-size: .8em; }
#menu { display: block; width: 100%; }
#menu ul.colonne { display: block; width: 20%; margin: 0 auto; }

#accueil ul { display: block; width: auto; }
#accueil span { display: block; width: auto; }
#accueil a { display: block; background: none; width: auto; height: auto; }

#blog div.item { width: 98%; }
#galerie div.item { width: 48%; }
#blog figure.images1, #blog figure.images2, #blog figure.images3, #blog figure.images4 { width: 100%; }

div.autrespages li.hidden { display: none !important; }

#dicoboule li { width: 98%; }

}