:root {
	--bg:#fafafa;
	--fg: #222222;
	--acc: #d8c46c;
	--card:#fff;
	--bd:#aaa8a8;
	--font-body:'Cambria','Gelasio',Georgia,serif;
	--font-title:'Concert One', system-ui, sans-serif;
	--color-title: #e97e00;
	--size-body: 17px;
	--color-body: #222222;
	--color-body-light: #555555;
	--navbar-height: 60px;
}

* {
	box-sizing:border-box
}

html {
	background-color: #f1f1f1;
}

body {
	margin:0;
	font-family:var(--font-body);
	font-size:var(--size-body);
	line-height:1.55;
	color:var(--color-body);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
}

h1 {
	color: var(--color-title);
	font-family:var(--font-title);
	line-height:1.2;
}

h1.page-title {
	font-size: 32px;
	text-align: center;
	margin-bottom: 20px;
}

h2 {
	color: var(--color-title);
	font-family:var(--font-title);
	font-size:26px;
	line-height:1.2;
	margin:0
}

h2 small {
	color:var(--color-body-light);
}

h3 {
	color: var(--color-title);
	font-family:var(--font-title);
	font-size:22px;
	line-height:1.2;
	margin:0
}

h3 small {
	color:var(--color-body-light);
}

p.indented {
	text-indent: 20px;
}

main {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 50px;
	align-items:center;
	flex: 1;
}

fieldset {
	border:1px solid var(--bd);
	border-radius:8px;
	margin:10px 0;
	padding:10px 14px
}

legend {
	font-weight:600;
	padding:0 6px
}

label {
	display:block;
	padding:4px 0;
	font-size:14px
}


/* ############### Classes dédiées à la mise en page ############### */
.center-elements-horizontal {
	display:flex;
	justify-content:center;
	align-items:center
}

.center-elements-vertical {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	flex: 1;
}


/* ############### Classes des infobulles ############### */
#ordering-win-closed {
	background:#fff3cd;
	border-color: #ffe69c;
}

#ordering-win-opened {
	background:#d8f9d6;
	border-color: rgb(181, 224, 177);
}

.notice p {
  margin-block-start: 0.25em;
  margin-block-end: 0.25em;
}

/* ############### Liens et boutons ############### */
a {
	color:#c634c9;
	text-decoration:none;
	font-family:var(--font-body);
	font-weight:100;
}

a:hover {
	text-decoration:underline;
	color:var(--color-title);
	cursor: pointer;
}

a.button {
	padding:8px 14px;
	background:#f2efded7;
	border:1px solid #acabab;
	border-radius:20px;
	text-decoration:none;
	font-size:14px;
	font-weight:990;
	cursor:pointer;
	width:fit-content;
	color:var(--color-body);
	font-family:var(--font-body);
}

a.button:hover {
	background:rgba(146, 143, 143, 0.7);
	color:var(--color-body);
}

button {
	padding:8px 14px;
	background:#f2efded7;
	border:1px solid #acabab;
	border-radius:20px;
	font-size:14px;
	font-weight:300;
	cursor:pointer;
	width:fit-content;
	color:var(--color-body);
	font-family:var(--font-body);
}

button:hover {
	background:var(--bd);
}

button[disabled] {
	background:#aaa;
	cursor:not-allowed
}

.back {
	display:inline-block;
	margin-bottom:10px;
	color:var(--color-body-light);
	text-decoration:none;
	font-size:14px
}

#backToTop {
	width: 50px;
	height: 50px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: auto;
  border: none;
  border-radius: 50%;
  background: #dfd98a;
  color: black;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
}

#backToTop:hover {
  background: #c2bb5d;
}

/* ############### Container ############### */
.container {
	width: 100%;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	padding: 0;
	align-items:center;
	justify-content:center;
	flex: 1;
}

.beautiful-container {
	background:#fff;
	border:1px solid var(--bd);
	border-radius:10px;
	padding:16px;
}

/* ############### Contrôle de redirection interne ############### */

.scrolling-stop {
	scroll-margin-top: calc(var(--navbar-height) + 10px);
}


/* ############### Mobile ############### */
@media (max-width: 700px) {
	:root {
		--size-body: 14px;
	}

	main {
		padding: 12px 15px;
	}

	h1.page-title {
		font-size: 28px;
		margin-bottom: 14px;
	}

	h2 {
		font-size:22px;
	}

	h3 {
		font-size:18px;
	}

	.beautiful-container {
		padding: 12px;
	}

	a.button, button {
		padding: 8px 13px;
		font-size: 12px;
	}

	fieldset {
		padding: 10px;
	}
}