:root {
	--off-white: #f8f8e9;
	--beige: #d1bc8a;
	--dark-beige: #ab986b;
	--light-grey: #c7c7c7;
	--grey: #787878;
}

.text-color-off-white {
	color: #fefee2;
}

.text-color-beige {
	color: #d1bc8a;
}

.text-color-dark-beige {
	color: #ab986b;
}

.text-color-light-grey {
	color: #c7c7c7;
}

.text-color-grey {
	color: #787878;
}

.bg-color-off-white {
	background-color: #f8f8e9;
}

.bg-color-beige {
	background-color: #d1bc8a;
}

.bg-color-dark-beige {
	background-color: #ab986b;
}

.bg-color-light-grey {
	background-color: #c7c7c7;
}

.bg-color-grey {
	background-color: #787878;
}

.bg-color-white {
	background-color: #ffffff;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: var(--off-white);
	font-family: 'EB Garamond', serif;
}

html {
	font-size: 100%;
	scroll-padding-top: 60px;
}

section {
	padding: 70px 0;
}

#section_mentions_legales {
	padding: 140px 0 0px 0;
	height: 100%;
	min-height: 1050px;
}

#section_mentions_legales div {
	height: 100%;
}

#section_login {
	height: 100%;
	min-height: 500px;
}

#section_post_message, #section_edit_post {
	height: 100%;
	min-height: 1500px;
}

.container {
	max-width: 800px;
	padding-top: 20px;
	padding-bottom: 20px;
}

#accueil {
	padding-bottom: 0;
}

#accueil>div div:nth-child(2) {
	padding-bottom: 70px;
}

#accueil,
#service,
#service p {
	color: var(--bg-black);
}


/* SECTION HEADINGS, P */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: 'EB Garamond', serif;
	font-weight: 500;
	line-height: 1.1;
	text-align: center;
	margin-bottom: 40px;

}

h1 {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	word-wrap: break-word;
}

h2 {
	font-size: 1.7rem;
	font-weight: 100;
	letter-spacing: 2px;
	text-transform: uppercase;
}

h3 {
	font-size: 1.17rem;
	font-weight: 600;
	letter-spacing: 1px;
}

h4 {
	font-size: 1rem;
	font-weight: 600;
}

p {
	line-height: 28px;
	color: var(--bg-golden-feather);
	text-align: justify;
}

ul {
	list-style-type: none;
}

/* LINKS, BUTTONS */

li a {
	color: var(--off-white);
}

a {
	display: inline-block;
	text-decoration: none;
}

nav a {
	display: inline;
}

a:hover,
a:focus {
	color: var(--grey);
	text-decoration: none;
	/* border-bottom: 1px solid var(--grey); */
	outline: 0;
}

#button, .button {
	margin: 20px auto 20px;
	padding: 10px 20px;
	/* background-color: #5C6079; */
	background-color: var(--beige);
	border: 2px solid #ffffff;
	border-radius: 3px;
	color: var(--off-white);
	width: 160px;
	text-align: center;
}

#button:hover, .button:hover {
	/* background-color: #82A09A; */
	background-color: var(--dark-beige);
	color: white;
}

#button-logout {
	margin: 20px auto 20px;
	padding: 10px 20px;
	background-color: var(--beige);
	border-radius: 3px;
	color: var(--off-white);
	width: 100%;
	text-align: center;
}

#button-logout:hover {
	background-color: var(--dark-beige);
	color: white;
}

/* ==========================================================================
   ALL SECTIONS
   ========================================================================== */

#text-next-logo {
	margin-top: 11px;
}

#text-next-logo p {
	font-size: 1.1rem;
	font-weight: 400;
	text-align: start;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin: 0;
	padding-top: 0;
	height: 17px;
}

#text-next-logo p:nth-of-type(2) {
	font-size: 0.7rem;
}

#palais {
	background-image: url("../img/mawas-avocat-palais-de-justice.jpg");
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	z-index: 6;
}

.locaux {
	background-image: url("../img/mawas-avocat-locaux.jpg");
	background-size: cover;
	background-position: center;
	/* width: 100%; */
	/* height: 100%; */
}

.img-palais-bg {
	background: var(--grey);
	opacity: 0.5;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.text-palais-bg {
	width: 100%;
	height: 100%;
	top: 55%;
	left: 0;
	z-index: 2;
	color: white;
}

.text-locaux-bg {
	width: 100%;
	height: 100%;
	left: 0;
	z-index: 1;
	color: white;
}


#accueil div div {
	padding-bottom: 70px;
}

#accueil div div:nth-of-type(2) {
	padding-top: 90px;
}

#accueil div div:nth-of-type(2) div:nth-of-type(2) {
	padding-top: 0;
}

#biography {
	background: white;
	width: 80%;
}

.expertise-bg-img1 {
	background-image: linear-gradient(to right,
			rgba(0, 0, 0, 0.5),
			rgba(199, 199, 199, 0.5)), url("../img/mawas-avocat-droit-penal-general.jpg");
	background-size: cover;
	background-position: center;
	filter: grayscale(100%);
}

.expertise-bg-img2 {
	background-image: linear-gradient(to right,
			rgba(0, 0, 0, 0.5),
			rgba(199, 199, 199, 0.5)), url("../img/mawas-avocat-droit-penal-routier.jpg");
	background-size: cover;
	background-position: center;
	filter: grayscale(100%);
}

.expertise-bg-grey p {
	background-color: rgba(228, 228, 228, 0.6);

}

/* JS articles */
.article-div,
#article {
	background: white;
	height: 40%;
	width: 60%;
	margin: 20px auto;
	padding: 40px;
	box-shadow: 1px 1px 5px rgb(141, 141, 141);
}

.article-div2,
#article>div {
	display: flex;
	flex-direction: column;
}

.article-title,
#article h4 {
	margin-bottom: 0;
	vertical-align: middle;
	text-align: left;
}

.article-link,
#article a {
	margin-bottom: 20px;
}

.article-div3,
#article div:nth-of-type(2) {
	text-align: center;
}

.article-thumbnail,
#article div:nth-of-type(2) img {
	margin: 10px auto;
	height: 80%;
	width: 70%;
}


footer a {
	color: white;
}

#footer-login-page {
	/* position: fixed; */
	/* bottom: 0; */
	width: 100%;
}

/* ==========================================================================
	MENU 
   ========================================================================== */
header {
	display: flex;
	justify-content: space-between;
	background-color: white;
}

#fixed {
	height: 90px;
	width: 100%;
	position: fixed;
	z-index: 10;
	border-bottom: 2px solid #eeeeee;
}

#phone-stickyScroll {
	height: 35px;
	width: 200px;
	bottom: 15px;
	right: 20px;
	position: fixed;
	background: white;
	border-radius: 3px;
	box-shadow: 2px 2px 5px rgb(141, 141, 141);
	padding-top: 4px;
	z-index: 5;
}

#phone-stickyScroll p {
	text-align: center !important;
	vertical-align: bottom;
}

header img {
	width: 70px;
	margin: 10px;
}

header p {
	position: absolute;
	top: 30%;
	left: 40%;
	text-align: center;
}

/* BURGER MENU */

a {
	color: inherit;
}

#burger {
	width: 30px;
	height: 2px;
	background: var(--grey);
	display: inline-block;
	position: relative;
	top: 30%;
	right: 30px;
}

#burger::before,
#burger::after {
	content: '';
	width: 30px;
	height: 2px;
	background: var(--grey);
	display: inline-block;
	position: absolute;
	transform-origin: center;
	/* transition: all 0.3s ease; */
}

#burger::before {
	top: -7px;
}

#burger::after {
	top: 7px;
}

#burger.open {
	background: transparent;
}

#burger.open::before {
	transform: rotate(45deg);
	top: 0;
}

#burger.open::after {
	transform: rotate(-45deg);
	top: 0;
}

nav ul {
	position: absolute;
	width: 200px;
	right: 0;
	top: 90%;
	padding: 10px 0;
	/* transform: scaleY(0); */
	display: none;
	transform-origin: center top;
	transition: all 0.3s ease;
}

ul.open {
	/* transform: scaleY(1); */
	display: block;
}

nav ul li {
	padding: 10px 0;
	text-align: center;
	background-color: var(--light-grey);
}

ul li a {
	color: var(--off-white);
}

/* BURGER MENU END */

#accueil img {
	margin: 0 auto;
}

#accueil ul {
	margin-right: 25px;
}

#honoraire {
	text-align: justify;
}

/* FORM */

#contact {
	padding-bottom: 40px;
}

form {
	max-width: 800px;
	padding: 0 5px;
	margin: 0 auto;
}

#form-write_edit_post {
	max-width: 1200px;
}

#login_form {
	padding-bottom: 170px;
}

#login_p {
	padding-top: 100px;
	padding-bottom: 230px;
}

/* Limiter la taille des images dans l'éditeur TinyMCE pour éviter qu'elles débordent */


p>label {
	display: block;
}

input[type=text],
input[type=email],
input[type=number],
textarea,
fieldset {
	/* requis pour composer de manière appropriée les éléments
	 de formulaire sur les navigateurs fondés sur WebKit */
	-webkit-appearance: none;

	width: 100%;
	border: 1px solid var(--grey);
	padding: 5px;
	border-radius: 3px;
	margin: 0;

	font-family: inherit;
	font-size: 90%;

	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

input:invalid {
	/* box-shadow: 0 0 1px 1px red; */
}


input:focus:invalid {
	outline: none;
}

input:valid {
	box-shadow: none;
}

input:focus,
textarea:focus {
	outline-color: var(--beige);
}

/* form successfully sent */
.success-message {
	position: fixed;
	top: 105px;
	right: 15px;
	z-index: 11;
}

/* Bootstrap CSS for alert-dismissible overwritten*/
.alert-dismissible {
	padding-right: 1rem;
}

/* FORM END */

footer p {
	color: var(--off-white);
}

footer img {
	margin: 0 auto;
}

#logo-and-text {
	width: 100%;
	display: flex;
	align-items: center;

}

#logo-and-text p {
	position: initial;
	width: 100%;
	font-size: 1rem;
}

@media screen and (min-width: 769px) {

	#logo-and-text {
		width: 50%;
	}

	nav {
		width: 65%;
	}

	#burger {
		display: none;
	}

	header p {
		position: relative;
		left: 0;
		text-align: center;
		padding-top: 27px;
	}

	nav ul {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		top: 0;
		width: 100%;
		transform: none;
		transition: all 0.1s ease;
		margin-bottom: 0;
	}

	nav ul li {
		padding-top: 20px;
		padding-bottom: 0;
		background-color: white;
	}

	nav ul li a {
		color: var(--grey);
	}

	.img-portrait {
		max-width: 400px;
	}

	.img-palais {
		margin: 0 auto;
		width: 100vw;
	}
}

@media screen and (min-width: 1201px) {

	#expertise div {
		width: 100%;
	}

	#expertise img {
		width: 50%;
		object-fit: contain;
		margin: 40px;
	}

	#service div div {
		width: 100%;
	}

	#service img {
		margin: 40px;
	}

}

@media screen and (max-width: 768px) {
	#text-next-logo {
		margin-right: 2.1rem;
	}

	#section_mentions_legales {
		height: 1170px;
	}

	#section_post_message, #section_edit_post {
		height: 1500px;
	}

	#button-logout {
		display: inline-block;
		margin: 0;
		padding: 10px 20px;
		background-color: var(--beige);
		border-radius: 3px;
		color: var(--off-white);
		width: 100%;
		text-align: center;
	}
	
	#button-logout:hover {
		background-color: var(--dark-beige);
		color: white;
	}

	nav ul li:first-child {
		padding: 0;
	}
}