:root {
    --bg-brown-0:#d9dca0;
    --bg-brown-1: none; /*#c4c79436;*/
    --bg-brown-2: none 	;/*#06c;*/
    --bg-gray: #ddd;

	/* GLOBAL */
	--bg-global: #d9dca0;

    /* NAVBAR */
    --bg-navbar-item: rgba(0,0,0,0.6); /*rgb(75, 153, 58)*/
    --bg-navbar-item-hover: rgba(40,40,40,0.6); /* rgba(19, 111, 0, 0.84) */

    --bg-navbar-sub-menu: rgba(0,0,0,0.3);
    --bg-navbar-sub-menu-hover: rgba(0,0,0,0.6);

    --fg-navbar-item: white;
    --fg-navbar-item-hover: white;
    --fg-navbar-sub-menu: white;


    /* CONTACT */
	--fg-contact-head: black;

    --bg-contact-item: rgba(0,0,0,0.6);
    --fg-contact-item: white;

    --bg-contact-item-hover: rgba(40,40,40,0.6);
    --fg-contact-item-hover: black;

    /* TEXT SECTION */
    --bg-text-section-header: lightgray; /* #448c30 */
    --bg-text-section-body: white;

    --fg-text-section-header: black;
    --fg-text-section-body: black;

    /* MODAL */
    --bg-modal-header-title: none;
    --fg-modal-header-title: black;

	--bg-modal-header-price-field: none;
	--fg-modal-header-price-field: black;
}


/* STYLE 2 */
:root{
	/* GLOBAL */
	--bg-global: #e7f2f2;

    /* NAVBAR */
    --bg-navbar-item: rgba(65, 155, 45, 0.84);
    --bg-navbar-item-hover: rgba(19, 111, 0, 0.84);


    --bg-navbar-sub-menu: #6de16d; /*rgba(65, 155, 45, 0.84);*/
    --bg-navbar-sub-menu-hover: rgba(19, 111, 0, 0.84);

    --fg-navbar-item: white;
    --fg-navbar-item-hover: white;
    --fg-navbar-sub-menu: white;

    --bg-navbar-df: #e7f2f2;
    --fg-navbar-df: #68380d;
    --border-navbar-df: #68380d;

    /* CONTACT */
	--fg-contact-head: black;

    --bg-contact-item: rgba(65, 155, 45, 0.84);
    --fg-contact-item: white;

    --bg-contact-item-hover: rgba(19, 111, 0, 0.84);
    --fg-contact-item-hover: black;

    /* TEXT SECTION */
    --bg-text-section-header: #448c30;
    --bg-text-section-body: white;

    --fg-text-section-header: white;
    --fg-text-section-body: black;

    /* MODAL */
    --bg-modal-header-title: rgba(45, 213, 31, 0.79);
    --fg-modal-header-title: white;

	--bg-modal-header-price-field: lightblue;
	--fg-modal-header-price-field: black;
}




.text-section-header {
	border: 1px solid black;
	border-radius: 10px 10px 0 0;

	/* COLOR THEME */
	background-color: var(--bg-text-section-header);
	color: var(--fg-text-section-header);
}
.text-section-body {
	border: 1px solid black;
	border-top: none;
	border-radius: 0 0 10px 10px;
	font-size: 0.8em;

	/* COLOR THEME */
	background-color: var(--bg-text-section-body);
	color: var(--fg-text-section-body);
}



html {
	background-color: var(--bg-global);
}

body {
	max-width:1280px;
	background-color:var(--bg-global);
	padding: 0 !important;
}
main{
	background-color:var(--bg-global);
	min-height: 500px;
	height: 100%;
}

footer{
	align-self: end;
}

header {
	/*background-image: url("../img/ressources/headerImg.jpg");*/
	height: 0;
}

/*RESET CSS*/
* {
	margin:0;
	padding:0;
	font-family:Avenir, sans-serif;
}

/*TO PUT IN MODALS*/

.modal-header {
	margin:0;
	display:flex;
	align-items:center;
	font-size:1.2em;
}
.modal-header h3 {
	margin:2px;
	padding:4px;
	border:1px solid rgb(120,120,120);
	border-radius:3px;
	text-align:center;
	font-weight: lighter;
	font-size:0.9em;
	color: var(--fg-modal-header-title);
	background-color: var(--bg-modal-header-title);
}
.modal-header .price-field {
	margin:2px;
	padding:2px;
	border:1px solid gray;
	border-radius:6px;
	text-align:center;
	font-weight: lighter;

	background-color: var(--bg-modal-header-price-field);
	color: var(--fg-modal-header-price-field);
}
.modal-header .adress-field {
	margin:2px;
	padding:2px;
	border:1px solid rgb(195,195,195);
	border-radius:3px;
	background-color:rgb(230,230,230);
	text-align:center;
}

/**/

.modal-body {
	padding:0;
	display:flex;
	justify-content: center;
}
.modal-body img {
	margin:4px;
	border-radius:15px;
	width:80%;
}

/**/

.modal-footer {
	
}
.modal-footer table {
	font-size:0.8em;
}

.modal-footer table tbody {

}

.modal-footer table tbody tr{
	
}

.modal-footer table tbody tr td {
	padding:2px;
	margin:0;
}

/*GLOBAL CSS FORMATS*/


article {
	/*
		Used for informatives articles
		You can find it on thoses pages : options.html
	*/
	/*border: 1px solid brown;
	border-radius: 5px;*/
	margin: 5px;
	padding: 5px;
	height: 100%;
	border-radius: 45px;
}

article h4 {
	font-size: 0.9em;
}

article img {
	/*margin-top: 8px;*/
	margin-bottom: 10px;

}

article p {
	margin: auto;
	font-size: 0.8em;
}


.p-infos {
	padding: 16px;

	border: 1px solid black;
	line-height: 1.5rem;

	border-radius: 10px;

	background-color: var(--bg-gray);
}

.cursor:hover{
	cursor: pointer;
}