html,body { height: 100%; margin: 0; padding: 0; background-color: #fff; color: #000; font-family: Montserrat, sans-serif; font-size: 16px; }

/* Pour les ancres */
#boutique, #portrait, #reseaux, #actu, #galerie { position: relative; top: -80px; }

div.ligne { display: flex; justify-content: center; }

a { text-decoration: none; padding: 0; transition: all .2s ease-in; }
a:link, a:active, a:visited { color: #704214; }
a:hover { color: #000; }

header { width: 100%; top: 0; position: fixed; z-index: 998;/*shadowbox est à 999*/ font-family: Lobster, cursive; background-color: #26170a; color: #fff;/* border-bottom: 1px solid #000;*/ }
header a:link, header a:active, header a:visited { color: #fff; }
header a:hover { color: #fff; }
header div.header { display: flex; justify-content: space-between; width: 100%; max-width: 800px; margin: auto; }
header div.titre, header ul.rubriques { align-self: center; }
header ul.rubriques { display: inline-block; padding: 0; list-style: none; }
header ul.rubriques li { display: inline-block; margin-left: 10px; }
header h1 { margin: 0; padding: 0; }
header img.logo { width: 100%; max-width: 280px; height: auto; }

#page { width: 100%; max-width: 800px; margin: auto; }
#page h1, #page h2 { padding: 5px; font-family: Lobster, cursive; text-align: center; }
#page h2 { width: 50%; margin-left: auto; margin-right: auto; color: #26170a; border-bottom: 2px solid #26170a; }
#page div.titre { /*background-color: #26170a; color: #fff; border-radius: 20px 20px 0 0; */}
#page div.titregauche { /*background-color: #26170a; color: #fff; border-radius: 20px 0 0 0; */}
#page div.titredroite { /*background-color: #26170a; color: #fff; border-radius: 0 20px 0 0; */}
#page div.colonne { display: flex; flex-direction: column; width: 100%; }
#page hr { width: 50%; margin: 50px auto; height: 2px; /*color: #26170a; background-color: #26170a; */border: none; }
#page img.icon { width: 100%; max-width: 128px; height: auto; transition: all .2s ease-in; }
#page img.icon:hover { opacity: .7; }

#page div.intro { display: flex; justify-content: center; padding: 100px 0 20px 0; }
#page p { margin: 0; padding: 0 15px; text-align: justify; align-self: center; }
#page p.intro { line-height: 1.6em; }
#page img.avatar { width: 100%; max-width: 128px; height: auto; padding: 0 5px; border-radius: 50%; align-self: center; }
#page span.nom { font-weight: bold; }

#page div.boutique, #page div.portrait, #page div.galerie { padding: 0 0 20px 0; }
#page div.images { display: flex; justify-content: space-between; width: 100%; text-align: center; }
#page figure { width: 100%; margin: 0; padding: 0; }
#page img.produit, #page img.image { width: 80%; max-width: 256px; height: auto; /*border-radius: 10%; */transition: all .2s ease-in; }
#page img.produit:hover { opacity: .7; }
#page figcaption { width: 80%; margin: 10px auto 0 auto; text-align: center; font-style: italic; }
#page figcaption span.soustitre { font-style: normal; font-size: .7em; }

#page div.reseauxactu { display: flex; padding: 0 0 20px 0; }
#page img.reseausocial { display: block; margin: 20px auto; transition: all .2s ease-in; }
#page img.reseausocial:hover { opacity: .7; }
#page div.actu { margin-top: 20px; text-align: center; }

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

header { position: static; top: auto; }
header div.header { display: block; }
header div.titre, header ul.rubriques { display: block; text-align: center; }
header ul.rubriques li { display: inline; }

#page div.reseauxactu { display: block; }

}