/* :---------------------------------: */
/* : CSS BIJOUTERIE SORAYN'OR  : */
/* :---------------------------------: */

/* RESET NOUVELLES BALISES */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
{
	display:block;
}
/* RESET NOUVELLES BALISES - FIN */

html
{
	background-image: url(../img/fondsweb/fond-sombre.png);
    background-attachment: fixed; /* Le fond restera fixe */
}

#logo
{
    clear:both;
}

/* MISE EN PAGE DE L'ENTETE AU DESSUS DU LOGO */

#horaires-entete
{
	font-family: 'Copse', serif;
	color: #999;
	height: 62px;
	margin-bottom: -60px;
}

#entete-gauche
{
	float: left;
	text-align: left;
	height: 62px;
	margin-bottom: -60px;
}

#entete-droite
{
	text-align: right;
	height: 62px;
	margin-bottom: -60px;
}

/* FIN - MISE EN PAGE DE L'ENTETE AU DESSUS DU LOGO */

img.logo
{
	height: 44%;
	width: 44%;
}

/* TEST MENU */

#menu-deroulant, #menu-deroulant ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
#menu-deroulant {
/* on centre le menu dans la page */
    text-align: center;
}
#menu-deroulant li {
/* on place les liens du menu horizontalement */
    display: inline-block;
}
#menu-deroulant ul li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}
#menu-deroulant a {
    text-decoration: none;
    display: block;
}
#menu-deroulant ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
    text-align: left;
    z-index: 1000;
}
#menu-deroulant li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
}

.sous-menu
{
	margin-top: -2px;
	margin-left: -27px;
	text-align: center;
	height: 28px;
	background-image: url(../img/fondsweb/straws.png);
	padding: 2px 4px;
	border: 1px solid orange;
}

.sous-menu-bas
{
	margin-top: -2px;
	margin-left: -27px;
	text-align: center;
	height: 28px;
	background-image: url(../img/fondsweb/black_paper.png);
	padding: 2px 4px;
	border: 1px solid orange;
}

/* .ul-sous-menu
{
    
    margin:auto;
    padding: 4px;	
} */

/* FIN TEST */

h1
{
	font-family: 'Copse', serif;
	margin-bottom: 20px;
    font-size: 2em;
	font-weight: normal;
	line-height: 2.5em; /* hauteur des titres */
	color: #666;	
}

.h1-index
{
    line-height: 100%;	
}

.petit-texte-h1 /* H1 */
{
	text-align: center;
	font-family: 'Copse', serif;
/* 	margin-top: -35px; */
    font-size: 0.7em;
	font-weight: normal;
/* 	line-height: 0em; */
	color: #999;
}

h2
{
	font-family: 'Copse', serif;
	margin-bottom: 20px;
    font-size: 1.5em;
	font-weight: normal;
	line-height: 2.5em; /* hauteur des titres */
	color: #666;	
}

h3
{
	font-family: 'Copse', serif;
    font-size: 1.5em;  /* 1.2em */
	font-weight: normal;
	color: #555;	
}

.fondweb
{
	background-image: url(../img/fondsweb/straws.png);
}

header
{
	text-align: center;
}

/* GERER NAVIGATION - LISTES-LIENS - IMAGES-LIENS*/

nav#navigation
{
	font-family: 'Copse', serif;
	font-size: 1em;
	font-weight: normal;
	color: #555;
}

a.haut-de-page
{
	font-size: 0.8em;
	color: #666;
	margin: auto;
    height: auto;
	width: 220px;
	background-color: #fff;
	border: 1px solid #999;
}

/* ul{
	display: inline;
    list-style-type: none;
} */

.images-accueil
{
	height: auto;
	width: auto;
}

/* FIN GERER NAVIGATION - LISTES LIENS */

/* LOGOS */

#logo-orient
{
	margin: 50px auto 20px auto;
	height: auto;
	width: 220px;
}

img.logo-orient
{
	height: 114px;
	width: 220px;
}

#logo-bayard
{
	margin: 50px auto 20px auto;
	height: 74px;
	width: 220px;
}

img.logo-bayard
{
	height: 74px;
	width: 220px;
}

/* FIN LOGOS */

#footer
{
	background-image: url(../img/fondsweb/black_paper.png);
	color: red;
	border-top: 1px solid black;
}

a {text-decoration: none;}
a.actif:link{color: #999; text-shadow: 0.02em 0.02em 0.2em #999;}
a:link{color: #999;}
a:visited{color: #999;}
a:hover{color: orange; text-shadow: 0.01em 0.01em 0.1em orange;}

body
{
	text-align: center;
	margin: 30px auto 70px auto;
	max-width: 880px;
	background-color: #fff;
    background-image: url(../img/fondsweb/straws.png);
	border: 1px solid #666;
}

#main
{
	text-align: center;
    margin: auto;
}

.accueil
{
	background-color: #fff;
	margin: auto auto 30px auto;
	padding: 1px; 
	max-width: 680px;
	border: 1px solid #999;
	box-shadow: 3px 3px 10px #888;
}

.accueil-page-creations
{
	background-color: #fff;
	margin: 20px auto 30px auto;
	padding: 1px; 
	max-width: 680px;
	border: 1px solid #999;
	box-shadow: 3px 3px 10px #888;
}

.page-bijouterie
{
	margin: auto;	
}

.bijouterie
{
	background-color: #fff;
	height: auto;
	width: auto;
	margin: 30px auto o auto;
	border: 1px solid #888;
}

.agrandissement
{
 	height: 100%;
	width: 100%;
}

.entourage
{
	max-height: 507px;
	max-width: 651px;
}

/* A REMPLACER */

.entourage-collier-grappe
{
	max-height: 1105px;
	max-width: 651px;
}

/* A REMPLACER FIN */

.mtm
{
	margin: auto;
}

.legende
{
    margin: 5% 4% 20% 4%;
	font-family: 'Copse', serif;
	font-size: 0.8em;
	color: #555;
}

.description
{
	font-family: 'Copse', serif;
}

.prix-barre
{
	text-decoration: line-through;
	color: orangered;
}

.texte-gras
{
	font-weight: bold;
}

.texte-vert
{
	font-size: 1.3em;
	font-weight: 900;
	color: #00A030;
}

.texte-orangered
{
	cursor: help;
	font-weight: normal;
	color: orangered;
	border: 1px solid orangered;
}

.or
{
	color: #ecaf63;
    text-shadow: 0.03em 0.03em 0.03em #B59D50;
}

img
{
	width:680px;
	height: 529px;
}

.figcaption
{
	width: auto;
	margin: 0 0 10px 0;
	padding: 5px;
	text-align: left;
	border: 1px dotted #999;
}

.fond-bayard
{
	color: BurlyWood;
	background-color: black;
	background-image: url(../img/fondsweb/leather_brown.png);	
}

.fond-orient
{
	background-color: black;
	background-image: url(../img/fondsweb/binding_dark.png);
}



.fond-orient-homme
{
	color: #999;
	background-color: black;
	background-image: url(../img/fondsweb/binding_dark.png);
}



.fond-orient-femme
{
	color: #999;
	background-color: black;
	background-image: url(../img/fondsweb/starring.jpg);
}

.montres-enfant
{
	color: #666666;
    background-color: #E6E6FA;
	background-image: url(../img/fondsweb/???);
}

.montres-femme
{
	color: #666666;
	background-image: url(../img/fondsweb/light_grey_floral_motif.png);
}

.div-figcaption
{
	width: auto;
	margin:-6px;
	padding: 5px;
	text-align: left;
	border: 1px dotted #999;
	border-bottom: 6px double orangered;
}

/* #horaires
{
	height: auto;
} */

/* .avant-logo-gauche
{
	text-align: justify;
	font-family: 'Copse', serif;
	margin: 0 auto -63px auto;
    font-size: 1em;
	font-weight: normal;
	color: #999;
}

.avant-logo-droite
{
	text-align: right;
	font-family: 'Copse', serif;
	margin: 0 auto -50px auto;
    font-size: 1em;
	font-weight: normal;
	color: #999;
} */

 /* TEXTE DES HAUTS DE PAGE SOUS LE TITRE */

.texte-entete
{
	padding: 0 8.2% 20px 8.2%;
}

.petit-texte-entete
{
	text-align: justify;
	font-family: 'Copse', serif;
	margin: 10px;
    font-size: 0.9em;
	font-weight: normal;
	color: #999;
}

.petit-texte-entete-gras /* Texte des hauts de page couleur or*/
{
	color: #b88c30;
	font-weight: normal;
}

.texte-rouge-covid19
{
	font-size: 1.2em;
	color: #e54c4c;
	font-weight: 600;	
}

 /* FIN TEXTE DES HAUTS DE PAGE SOUS LE TITRE */

.petit-texte-titres
{
	text-align: center;
	font-family: 'Copse', serif;
	margin-top: -35px;
    font-size: 1.2em;
	font-weight: normal;
	line-height: 0em;
	color: #999;
}

.petit-texte-entete-mentions
{
	text-align: justify;
	font-family: 'Copse', serif;
	margin: 10px;
    font-size: 0.9em;
	font-weight: 600;
	color: #b88c30;
}

.petit-texte-titres-grandes-images
{
	text-align: center;
	font-family: 'Copse', serif;
	margin: -35px auto 35px auto;
    font-size: 1.2em;
	font-weight: normal;
	line-height: 0em;
	color: #999;
}

.petit-texte /* Texte dans le pied de page */
{
	text-align: justify;
	font-family: 'Copse', serif;
	margin: 10px;
    font-size: 0.8em;
	font-weight: normal;
	color: #999;
}

.petit-texte-footer /* Texte dans le pied de page */
{
	text-align: center;
	font-family: 'Copse', serif;
	margin: 10px;
    font-size: 1em;
	font-weight: normal;
	color: #999;
}

.petit-texte2 /* Texte sous les logos ORIENT et BAYARD*/
{
	text-align: justify;
	font-family: 'Copse', serif;
	margin: 10px;
    font-size: 0.8em;
	font-weight: normal;
	color: #555;
}

.petit-texte3
{
	text-align: justify;
	font-family: 'Copse', serif;
	margin: 10px;
    font-size: 1em;
	font-weight: normal;
	color: #00A030;
}

.line-height
{
	line-height: 0.9em;
}

.formulaire
{
	background-image: url(../img/black-paper.png);
}

.texte-formulaire
{
	text-align: center;
	font-family: 'Copse', serif;
	margin-bottom: 10px;
    font-size: 0.9em;
	font-weight: normal;
	color: #555;
}



/* Gérer les images zoomées */

.twAudessus {
  /* La trame de fond */
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  display: none;
  background: rgba(0,0,0,0.7);
}

.twAudessus a {
  /* Le truc pour centrer l’image */
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}

.twAudessus img {
  /* Le contour de l’image */
  max-width:1200px;
  padding: 10px;
  background: #ffffff;
}

/* Selecteur « target pour afficher l’image » */
.twAudessus:target { display: table; }

.twAudessus2 {
  /* La trame de fond */
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  display: none;
  background: rgba(0,0,0,0.7);
}

.twAudessus2 a {
  /* Le truc pour centrer l’image */
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}

.twAudessus2 img {
  /* Le contour de l’image */
  max-width:1200px;
/*   padding: 3px;
  background: black; */
}

/* Selecteur « target pour afficher l’image » */
.twAudessus2:target { display: table; }


figcaption { color: #555; background-color: #fff; width: 500px; margin: auto;}

.logo_facebook
{
	height: 32px;
	width: 40px;
}

img.logo_facebook
{
	margin-bottom: 25px;
}


/* INFOBULLE */

a.info {
   position: relative;
   color: black;
   text-decoration: none;
   /* border-bottom: 1px gray dotted; */ /* On souligne le texte. */
}
a.info span {
   display: none; /* On masque l'infobulle. */
}
a.info:hover {
   background: none; /* Correction d'un bug d'Internet Explorer. */

   z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */

   cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
}
a.info:hover span {
   display: inline; /* On affiche l'infobulle. */
   position: absolute;
   z-index: 100;

   white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */

   top: 80px; /* On positionne notre infobulle. */
   left: -10px;
   font-family: 'Copse', serif;
   background: #555;
   color: #fff;
   padding: 3px;
   border: 1px solid gray;
   border-left: 1px solid gray;
}

/* §§§§§§§§§ */
/* DIAPORAMA */
/* §§§§§§§§§ */

#id-diaporama
{
    width: 700px;
    height: 263px;
	padding: 0;
	margin: 0 auto 50px auto;
/* 		margin: auto; */

}

.diaporama{
/* 	position:relative; */
	width:660px;
	height:263px;
	
}

.diaporama li{
	list-style-type:none;
	overflow:hidden;
	position:absolute;
}

.imgdiapo
{
	width:660px;
	height:263px;
/* 	margin-left: -40px; */
	border: 20px solid black;
}

/* .diaporama_controls{
	width:512px;
	margin:3px 0;
	padding:5px;
	clear:both;
	overflow:hidden;
} */

/* .diaporama_controls .btns{
	float:left;
	margin-left: 150px;
}
 */
/* .diaporama_controls a{
	font-weight:normal;
	width:10px;
	height:13px;
	text-indent:-9999px;
	display:inline-block;
	margin:0 3px;
} */

/* .diaporama_controls .prev{
	background:url(../img/diapo/fleches_diapo.png) no-repeat top right;
}

.diaporama_controls .next{
	background:url(../img/diapo/fleches_diapo.png) no-repeat top left;
}

.diaporama_controls .pause{
	background:url(../img/diapo/fleches_diapo.png) no-repeat bottom right;
}

.diaporama_controls .play{
	background:url(../img/diapo/fleches_diapo.png) no-repeat bottom left;
} */

/* FIN DIAPORAMA */



/* MENTIONS LEGALES */

hr
{
	color: #666;
	background-color: #444;
}

a.lien-mentions
{
	color: #b88c30;
}

.gras-mentions
{
	color: DodgerBlue;
}








/* FORMULAIRE DE CONTACT */


fieldset { border: 1px dashed blue; margin:auto;}
legend {	display: block; width: 100%;
    font-family: 'Copse', serif;
    font-size: 1.5em;
	font-weight: normal;
	color: #fff;
	background-color: #E88391;
	margin-top:10px;
	border: 1px dashed #E83149;}
label { font-family: 'Copse', serif;
font-size: 1.2em;
color:#666;
line-height:10px;
}
#nomprenom {margin: 8px auto auto -62px;}
#nom {margin-left: 10px;}
#objet,#email,#message {margin-left: 10px;}
#envoyer {	color:white; font-family: 'Copse', serif; background-color: #457DBB; margin-top: 20px;}
input,textarea { background-color: pink; border: 1px dashed blue;}
#question_antispam {font-family: 'Copse', serif;
font-size: 1.2em;
color: #000;}
.questionantispam { color: black;}
#antispam { color: black; background-color: #9CBDEF;}
#envoyer {font-size: 1.5em; margin: 30px auto 30px auto;}