/* CSS Document */
html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

body {
    background-color: #8C7853;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 14px;
    color: #000066;
}

#headerzone {
	height: 45px;
	z-index: 300;
}

/* position du logo page de démarrage */
#logostart {
    position: relative;
    width: 100%;
    margin-top: -125px;
    text-align: center;
    z-index: 20;
}

#logostart img {
    display: block;
    margin: 0 auto;
    width: 300px;      /* adapte à la largeur souhaitée */
    height: auto;
}

.photo-appartement{
    width:100%;
    height:auto;
    border-radius:12px;
}

/*remplacement de leer.gif pour faire des espaces */
.section-appartement{
    padding-top:25px;
}

/*nouveau formatage écriture*/
.titre-annonce {
    margin: 0 0 15px;
    color: #0D2D48;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 1.3;
}





.titre-accueil {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin: 30px 0;
}

.tablelogostart {
	position: relative;
	width: 100%;
	margin-top: -15px;
	margin-left:auto;
	margin-right:auto;
}


/* bande brune page de démarrage */
#braunzone {
	position: relative;
	width: 100%;
	min-height: 150px;
	background-color: #dfcda2;
	border-top: 4px solid #AD8B3A;
	border-bottom: 4px solid #AD8B3A;
}


/* disposition texte page de démarrage */	
#text {
    position: relative;
    width: 100%;
    margin-top: 10px;
}

/* tabelle startseite  */
.tablestartseite {
    position: relative;
    width: 90%;
    max-width: 1300px;
    height: auto;
    margin: 0 auto;
}

.tablebraunzonesite {
	position: relative;
	margin-top: 1px;
	margin-left:auto;
	margin-right:auto;
}

/* position du logo dans le site */
#logo {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 200;
  margin-top: 0;
}

.tablelogo {
	position: relative;
	width: 100%;
	margin-top: -15px;
	margin-left:auto;
	margin-right:auto;
}

/* disposition titre dans les pages */	
.titrepage {
    margin: 0;
    padding: 12px 10px 0;
    font-family: "Times New Roman", Times, serif;
    font-size: 24px;
    font-weight: bold;
    font-variant: small-caps;
    color: #AD8B3A;
}



/* disposition texte dans le site */	
#textsite {
	position: relative;
	top: 240px;
	left: 100px;
	width: 100%;
}


/* formatage de la navigation */
.navig{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	color: #000066;
	font-weight: bold;
}

/* lien pour les langues */
a:link, .language {
	color: #AD8B3A;
	text-decoration: none;
}
a:visited, .language {
	color: #AD8B3A;
	text-decoration: none;
}
a:hover, .language {
	color: #AD8B3A;
	text-decoration: underline;
}
a:active, .language {
	color: #AD8B3A;
	text-decoration: underline;
}

/* zone de contenu */
#contentzone {
    position: relative;
    width: 100%;
    min-height: 100%;
    z-index: 100;
}

/* bande brune dans le site */

#braunzonesite {
	position: absolute;
	margin-top: -43px;
	top: 0px;
	height: 150px;
	width: 100%;
	background-color: #dfcda2;
	z-index: 15;
	border-bottom-width: 4px;
	border-bottom-style: solid;
	border-bottom-color: #AD8B3A;
	border-top-width: 4px;
	border-top-style: solid;
	border-top-color: #AD8B3A;

}

/* titre dans la zone brune */
.titlecontent {
	position: relative;
	font-family: "Times New Roman", Times, serif;
	font-size: 24px;
	color: #AD8B3A;
	text-decoration: none;
	font-variant: small-caps;
	font-weight: bold;
	left: 10px;
	top: 0px;
}

.starttextcontent {
	position: relative;
	left: 320px;
	width: 470px;
	line-height: 14px;
	margin-top: 150px;

}
/* disposition texte */
#tabletext {
	position: absolute;
	height: 500px;
	width: 70%;
	overflow: auto;
	margin-top: 60px;
	left: 311px;
	top: 310px;
	background-color: #ffffff;
	border: 3px solid #dfcda2;
	visibility: visible;
}

.textcontent {
	position: relative;
	left: 10px;
	width: 470px;
	margin-top: 10px;
}

.starttext2 {
	font-family: "Times New Roman", Times, serif;
	font-size:36px;
	font-weight:bold;
	color: #000066;
}


.textcontent2 {
	position: relative;
	left: 320px;
	width: 470px;
	line-height: 20px;
	top: 0;
}

.textcontact {
	line-height: 20px;
	font-size: 12px;
	
}


.textgoldfett {
	font-family: 		arial;
	font-size: 		    12px;
	color: 			    #AD8B3A;
	font-weight:		bold;
}

.textbronzefett {
	font-family: 		arial;
	font-size: 		    18px;
	color: 			    #8C7853;
	font-weight:		bold;
}
.textblaufett {
	font-family: 		arial;
	font-size: 		    20px;
	color: 			    #0D2D48;
	font-weight:		bold;
}

.titre-piece{
    color:#000066;
    font-size:15px;
    margin-top:35px;
    margin-bottom:15px;
}

/* tabelle startseite  */
.tablecontent {
	position: relative;
	left: 250px;
	margin-top: 100px;
}


/* date du contenu */
.datecontent {
	position: absolute;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
	color: #000066;
	margin: 0;
	padding: 0;
}
/* navigation */
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
	color: #8C7853;
	font-weight: bold;
	font-size: 14px;
	display: block;
}
#menu {
    position: absolute;
    top: 150px;
    left: 0;
    width: 140px;
    min-height: calc(100vh - 150px);
    margin: 0;
    padding: 20px 10px;
    background-color: #dfcda2;
    border-top: 1px solid #AD8B3A;
    border-right: 1px solid #AD8B3A;
    border-bottom: 1px solid #AD8B3A;
    z-index: 500;
}

#menu dt {
	cursor: pointer;
	text-align: left;
	padding-left: 10px;
	margin-left: 0px;
	line-height: 20px;
}
#menu dd {
	position: absolute;
	
}
#menu ul {
	position: absolute;
	margin-top: -20px;
	margin-left: 0;
	left: 140px;
	z-index: 100;
	background-color: #000066;

	border: 1px solid #AD8B3A;
	border-left: none;
}

#menu li {
	position: relative;
	margin-left: 0px;
	padding-left: 10px;
	line-height: 20px;
	width: 120px;
	text-align: left;
}

#menu li a, #menu dt a {
	color: #8C7853;
	text-decoration: none;
	display: block;
}
#menu li a:hover, #menu dt a:hover {
	text-decoration: underline;
} 

/* Réglages généraux */
* {
	box-sizing: border-box;
}


img {
	max-width: 100%;
	height: auto;
	display: block;
}

@media screen and (max-width: 768px) {

    #logo,
    #logostart {
        position: relative;
        margin-top: 0px;
        z-index: 20;
    }
/* Réserve de la place avant le menu des pages intérieures */
#logo {
    margin-bottom: 42px;
}

#logo img,
#logostart img {
    display: block;
    width: 250px;
    max-width: 85%;
    height: auto;
    margin: 0 auto;
}

#menu {
    position: relative;
    top: auto;
    left: auto;

    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr 1fr;
    grid-template-areas:
        "home appartements contact webmaster"
        ". appartement1 . webmaster";

    width: 100%;
    height: auto;
    min-height: 0;

    margin: 8px 0 0;       /* descend légèrement le menu */
    padding: 3px 5px 4px;  /* bande moins haute */

    column-gap: 3px;
    row-gap: 0;

    border-right: none;
    border-bottom: 3px solid #AD8B3A;
}

#menu dt {
    position: static !important;
    width: auto;
    height: auto;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center;
    line-height: 1.05;
}

#menu dt a {
    display: block;
    padding: 1px 0;
    font-size: 14px;
}

.menu-home {
    grid-area: home;
}

.menu-appartements {
    grid-area: appartements;
}

.menu-appartement1 {
    grid-area: appartement1;
    margin-top: -1px !important;
}

.menu-contact {
    grid-area: contact;
}

.menu-webmaster {
    grid-area: webmaster;

    position: static !important;
    align-self: center;

    font-size: 11px;
}

.menu-webmaster span,
.menu-webmaster small {
    display: block;
}

.menu-webmaster small {
    margin: 2px 0 0;
    font-size: 10px;
}

#menu dt a {
    display: block;
    padding: 2px 0;
    font-size: 14px;
}

	#tabletext,
#tableappartement,
#textsite {
	position: relative;
	top: auto;
	left: auto;
	width: calc(100% - 30px);
	max-width: 100%;
	height: auto;
	margin: 20px auto;
	min-height: auto;
	overflow: visible;
}

	.titlecontent,
	.titrepage {
    padding: 12px 10px 0;
    font-size: 22px;
}

	.tablestartseite,
.tablestartseite tbody,
.tablestartseite tr,
.tablestartseite td {
    display: block;
    width: 100%;
}

.tablestartseite td {
    margin-bottom: 20px;
    text-align: center;
}

.tablestartseite td img {
    display: block;
    margin: 0 auto;
}
}
@media screen and (min-width: 769px) {

    #menu {
        padding: 150px 10px 20px;
    }

    #menu dt {
        margin: 0;
        padding-left: 10px;
        line-height: 20px;
    }

    .menu-home {
        margin-bottom: 35px !important;
    }

    .menu-appartements {
        margin-bottom: 5px !important;
    }

    .menu-appartement1 {
        margin-bottom: 35px !important;
    }

    .menu-contact {
        margin-bottom: 75px !important;
    }

    .menu-webmaster {
        line-height: 16px !important;
    }

    .menu-webmaster span,
    .menu-webmaster small {
        display: block;
    }

    .menu-webmaster small {
        margin-left: 5px;
        font-size: 10px;
    }
}