@charset "utf-8";

html {
	--light-beffroi: url("./images/beffroi-light.svg");
	--light-arcade: url("./images/arcade-light.svg");
	--light-nuage1: url("./images/nuages1-light.svg");
	--light-nuage2: url("./images/nuages2-light.svg");
	--light-nuage3: url("./images/nuages3-light.svg");
	--light-snowman: url("./images/snowman-light.svg");
	--light-xmastree: url("./images/xmastree-light.svg");
	--dark-beffroi: url("./images/beffroi-dark.svg");
	--dark-arcade: url("./images/arcade-dark.svg");
	--dark-nuage1: url("./images/nuages1-dark.svg");
	--dark-nuage2: url("./images/nuages2-dark.svg");
	--dark-nuage3: url("./images/nuages3-dark.svg");
	--dark-snowman: url("./images/snowman-dark.svg");
	--dark-xmastree: url("./images/xmastree-dark.svg");

	--light-astuce: #A8D277;
	--light-avertissement: #EC555A;
	--light-conseil: #A8D277;
	--light-decharge: #EC555A;	
	--light-important: #FFB240;
	--light-prerequis: #FFB240;
	--light-remarque: #5DB2FF;
	--light-spoiler: #5DB2FF;
	
	--dark-astuce: #A8D27760;
	--dark-avertissement: #EC555A60;
	--dark-conseil: #A8D27760;
	--dark-decharge: #EC555A60;
	--dark-important: #FEB24060;
	--dark-prerequis: #FEB24060;
	--dark-remarque: #5DB2FF60;
	--dark-spoiler: #5DB2FF60;
}

html, [data-theme=light] {
	--beffroi: var(--light-beffroi);
	--arcade: var(--light-arcade);
	--nuage1: var(--light-nuage1);
	--nuage2: var(--light-nuage2);
	--nuage3: var(--light-nuage3);
	--snowman: var(--light-snowman);
	--xmastree: var(--light-xmastree);

	--astuce: var(--light-astuce);
	--avertissement: var(--light-avertissement);
	--conseil: var(--light-conseil);
	--decharge: var(--light-decharge);
	--important: var(--light-important);
	--prerequis: var(--light-prerequis);
	--remarque: var(--light-remarque);
	--spoiler: var(--light-spoiler);							 
	color-scheme: light;
}
@media (prefers-color-scheme:dark) {
	html {
	--beffroi: var(--dark-beffroi);
	--arcade: var(--dark-arcade);
	--nuage1: var(--dark-nuage1);
	--nuage2: var(--dark-nuage2);
	--nuage3: var(--dark-nuage3);
	--snowman: var(--dark-snowman);
	--xmastree: var(--dark-xmastree);

	--astuce: var(--dark-astuce);
	--avertissement: var(--dark-avertissement);
	--conseil: var(--dark-conseil);
	--decharge: var(--dark-decharge);
	--important: var(--dark-important);
	--prerequis: var(--dark-prerequis);
	--remarque: var(--dark-remarque);
	--spoiler: var(--dark-spoiler);	  
	color-scheme: dark;
	}
}
[data-theme=dark] {
	--beffroi: var(--dark-beffroi);
	--arcade: var(--dark-arcade);
	--nuage1: var(--dark-nuage1);
	--nuage2: var(--dark-nuage2);
	--nuage3: var(--dark-nuage3);
	--snowman: var(--dark-snowman);
	--xmastree: var(--dark-xmastree);
	--astuce: var(--dark-astuce);
	--avertissement: var(--dark-avertissement);
	--conseil: var(--dark-conseil);
	--decharge: var(--dark-decharge);
	--important: var(--dark-important);
	--prerequis: var(--dark-prerequis);
	--remarque: var(--dark-remarque);
	--spoiler: var(--dark-spoiler);							  
	color-scheme: dark;
}

/** Main blocks **/
.site_logo {
	background-image: url("./images/site_logo.svg");
	background-repeat: no-repeat;
	width: 114px;
	height: 76px;
}
ul.navlinks {
	border-top: 0;
}

/* Customize bbcodes */
.button.bbcode-aller,
.button.bbcode-ancre,
.button.bbcode-astuce,
.button.bbcode-avertissement,
.button.bbcode-c,
.button.bbcode-conseil,
.button.bbcode-decharge,
.button.bbcode-fa,
.button.bbcode-important,
.button.bbcode-prerequis,
.button.bbcode-remarque,
.button.bbcode-revelation,
.button.bbcode-s,
.button.bbcode-spoiler,
.button.bbcode-tabulation { 
	font-size: 0;
}
.button[class*="bbcode-"]:before,
.button[class*="bbcode-"]:after {
	content: '';
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 1.3em;
	font-variant: normal;
	padding: 0 0 0 2px;
}
.button[class*="bbcode-"]:after {
	padding: 0 2px 0 0;
}
.button.bbcode-aller:before {
	content: '\f064'; /*fa-share*/
}
.button.bbcode-aller:after {
	content: '\f13d'; /*fa-anchor*/
}
.button.bbcode-ancre:before {
	content: '\f13d'; /*fa-anchor*/
}
.button.bbcode-astuce:before {
	content: '\f0eb'; /*fa-lightbulb-o*/
}
/*.h4, .h5, .h6, .h7 {
Color: var(--color01);
}*/
.astuce-head {
	background: var(--astuce);
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--color13);
	font-size: 12px;
	font-weight: bold;
	margin: 1em 0 0;
	padding: 5px 10px; }
.astuce-content {
	background: var(--color02);
	border: 1px solid var(--astuce);
	border-radius: 0 0 var(--radius) var(--radius);
	color: var(--color13);
	margin: 0 0 1em;
	padding: 5px 10px; 
}
.button.bbcode-avertissement:before {
	content: '\f071'; /*fa-exclamation-triangle*/
}
.avertissement-head {
	background: var(--avertissement);
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--color13);
	font-size: 12px;
	font-weight: bold;
	margin: 1em 0 0;
	padding: 5px 10px; }
.avertissement-content {
	background: var(--color02);
	border: 1px solid var(--avertissement);
	border-radius: 0 0 var(--radius) var(--radius);
	color: var(--color13);
	margin: 0 0 1em;
	padding: 5px 10px; 
}
.button.bbcode-c:before {
	content: 'c';
}
.c {
	background: var(--color02);
	border: 1px solid var(--color05);
	color: green;
	display: inline-block;
	font-family: Monaco, "Andale Mono", "Courier New", Courier, monospace;
	line-height: 1.4em;
	padding: 0 5px;
	font-size: 1em;
	/*margin: 1em 0 1.2em 0;*/
	word-wrap: normal;
}
.button.bbcode-conseil:before {
	content: '\f05a'; /*fa-info-circle*/
}
.conseil-head {
	background: var(--conseil);
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--color13);
	font-size: 12px;
	font-weight: bold;
	margin: 1em 0 0;
	padding: 5px 10px; }
.conseil-content {
	background: var(--color02);
	border: 1px solid var(--conseil);
	border-radius: 0 0 var(--radius) var(--radius);
	color: var(--color13);
	margin: 0 0 1em;
	padding: 5px 10px; 
}
.button.bbcode-decharge:before {
	content: '\f071'; /*fa-exclamation-triangle*/
}
.decharge-head {
	background: var(--decharge);
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--color13);
	font-size: 12px;
	font-weight: bold;
	margin: 1em 0 0;
	padding: 5px 10px; }
.decharge-content {
	background: var(--color02);
	border: 1px solid var(--decharge);
	border-radius: 0 0 var(--radius) var(--radius);
	color: var(--color13);
	margin: 0 0 1em;
	padding: 5px 10px; 
}
.button.bbcode-fa:before {
	content: '\f024'; /*fa-flag*/
}
.button.bbcode-important:before {
	content: '\f06a'; /*fa-exclamation-circle*/
}
.important-head {
	background: var(--important);
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--color13);
	font-size: 12px;
	font-weight: bold;
	margin: 1em 0 0;
	padding: 5px 10px;
}
.important-content {
	background: var(--color02);
	border: 1px solid var(--important);
	border-radius: 0 0 var(--radius) var(--radius);
	color: var(--color13);
	margin: 0 0 1em;
	padding: 5px 10px; 
}
.button.bbcode-prerequis:before {
	content: '\f14a';
}
.prerequis-head {
	background: var(--prerequis);
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--color13);
	font-size: 12px;
	font-weight: bold;
	margin: 1em 0 0;
	padding: 5px 10px; }
.prerequis-content {
	background: var(--color02);
	border: 1px solid var(--prerequis);
	border-radius: 0 0 var(--radius) var(--radius);
	color: var(--color13);
	margin: 0 0 1em;
	padding: 5px 10px; 
}
.button.bbcode-remarque:before {
	content: '\f14b'; /*fa-pencil-square*/
}
.remarque-head {
	background: var(--remarque);
	border-radius: var(--radius) var(--radius) 0 0;
	color: var(--color13);
	font-size: 12px;
	font-weight: bold;
	margin: 1em 0 0;
	padding: 5px 10px;
}
.remarque-content {
	background: var(--color02);
	border: 1px solid var(--remarque);
	border-radius: 0 0 var(--radius) var(--radius);
	color: var(--color13);
	margin: 0 0 1em;
	padding: 5px 10px; 
}
.button.bbcode-s:before {
	content: '\f0cc';
}
.button.bbcode-spoiler:before {
	content: '\f2d0'; /*fa-window-maximize*/
}
.spoiler-full {
	background: var(--spoiler);
	border-radius: var(--radius);
	color: var(--color13);
}
.spoiler-head {
	font-size: 12px;
	font-weight: bold;
	line-height: 30px;
}
.spoiler-full .button {
	margin: 1px 2px;
	padding: 1px 5px;
}
.spoiler-head i {
	margin: 2px 0;
	padding: 5px 10px;
}
.spoiler-content {
	background: var(--color02);
	border: 1px solid var(--spoiler);
	border-radius: 0 0 var(--radius) var(--radius);
	color: var(--color13);
	line-height: normal;
	margin: 0 0 1em;
	padding: 5px 10px; 
}
.button.bbcode-tabulation:before {
	content: '\f03c'; /*fa-indent*/
}
.tabulation {
	margin: 1em 0 1em 2em;
}

/* navbar at bottom when sall content */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#page-header .navbar {
	border-radius: 0 0 var(--radius) var(--radius);
	margin-bottom: 4px;
}
#page-footer .navbar {
	border-radius: var(--radius) var(--radius) 0 0;
}
.wrap {
	display: flex; /* navbar at bottom when small content */
	flex-direction: column; /* navbar at bottom when small content */
	min-height: 100%; /* navbar at bottom when small content */
}
.wrap {
	border-radius: var(--radius);
	margin: 0 auto;
	padding: 0 15px;
}
.page-body {
	flex: 1; /* navbar at bottom when sall content */
}

/* SVG backgrounds */
html, body, .wrap {
	background-color: transparent;
	border-color: transparent;
}
body {
	background-attachment: /*fixed, fixed,*/ fixed, fixed, fixed, fixed, fixed;
	background-color: var(--color02);
	background-image: /*var(--snowman), var(--xmastree),*/ var(--beffroi), var(--arcade), var(--nuage1), var(--nuage2), var(--nuage3);
	background-position: /*left bottom, right bottom,*/ center bottom, center bottom, center top, center top, center top;
	background-repeat: /*no-repeat, no-repeat,*/ no-repeat, repeat-x, repeat-x, repeat-x, repeat-x;
	background-size: /*430px 460px, 430px 602px,*/ 960px 1440px, 960px 444px, 3000px 200px, 2000px 356px, 1000px 386px;
}
@media (max-width: 700px) {
    body {
	background-attachment: fixed, fixed, fixed, fixed;
	background-color: var(--color02);
	background-image: var(--arcade), var(--nuage1), var(--nuage2), var(--nuage3);
	background-position: center bottom, center top, center top, center top;
	background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
	background-size: 960px 444px, 3000px 200px, 2000px 356px, 1000px 386px;    }
}

/* Stat-block */
.headerspace {
    margin-top: 8px;
}
.stat-block {
	background-color: var(--color03);
	border-radius: var(--radius);
	margin-bottom: 4px;
	padding: 5px;
}
.stat-block h3, .stat-block h3 a {
	color: var(--color13);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	line-height: 1.6em;
	margin: 0;
	padding: 2px 0;
	text-transform: uppercase;
}
.stat-block h3 a:hover {
	color: var(--color11);
}
.stat-block p, .headerspace .quick-login {
	margin: 2px 0;
	min-height: 30px;
	padding: 8px 0 6px 55px;
	position: relative;
}
.stat-block p:hover, .headerspace .quick-login:hover {
	border-radius: var(--radius);
	background-color: var(--color04);
}
.stat-block p:before, .headerspace .quick-login:before {
 	background-color: var(--color05);
	border-radius: 50%;
	font-family: 'FontAwesome';
	font-size: 16px;
	font-variant: normal;
	height: 32px;
	left: 10px;
	line-height: 32px;
	position: absolute;
	text-align: center;
	text-rendering: auto;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
}
.headerspace .quick-login:before {
  content: "\f011";
}
.stat-block.online-list p:before {
  content: "\f007";
}
.stat-block.birthday-list p:before {
  content: "\f1fd"; 
}
.stat-block.statistics p:before {
  content: "\f080";
}
.stat-block.permissions p:before {
  content: "\f013";
}
@media (max-width: 700px) {
	.stat-block, .headerspace {
		border-radius: 0;
		margin-left: -5px;
		margin-right: -5px;
	}
	.stat-block h3, .stat-block h3 a {
		font-size: 1.2em;
		text-align: center;
		text-transform: none;
	}
	.stat-block h3 a {
		font-size: 1em;
	}
	.postprofile .no-avatar img {
		width: auto !important;
		height: auto !important;
		max-height: 35px;
	}
}

/* copyright */
.footer-row {
    display: inline-flex;
    padding: 0;
    margin: 0;
}

/*** Extension compatibility ***/
/** Extension Board Annoucements 1.3.0 ( https://www.phpbb.com/customise/db/extension/boardannouncements/ ) **/
/*.proflat .phpbb_announcement {
	background-color: var(--color09);
}
.proflat .phpbb_announcement div {
	color: var(--color12);
}*/
/** Extension Board Rules 3.0.1 ( https://www.phpbb.com/customise/db/extension/boardrules/ ) **/
/*.proflat .boardrules-container .content,
.proflat .boardrules-categories .mini-panel {
	background-color: var(--color06);
}
.proflat .boardrules-container .content:hover,
.proflat .boardrules-categories .mini-panel:hover {
	background-color: var(--color08);
}
.proflat .boardrules-categories .mini-panel h3 {
	color: var(--color12);
}
.proflat .boardrules-menu {
	border-top: 1px solid var(--color10);
}
.proflat .highlight {
	background-color: var(--color08);
	color: var(--color12);
}*/
/** Extension Collapsible Forum Categories 2.0.1 ( https://www.phpbb.com/customise/db/extension/collapsible_forum_categories/ ) **/
/*.proflat .collapse-btn {
	margin: 0;
}
.proflat .collapse-btn .fa-minus-square,
.proflat .collapse-btn .fa-plus-square {

	padding: 2px 8px;

	line-height: 1.4;
	text-align: center;
	vertical-align: middle;

	cursor: pointer;

}
.proflat .collapse-btn .fa-minus-square:hover,
.proflat .collapse-btn .fa-plus-square:hover {
  	background-color: var(--color02);
	background-image: none;
	border-color: var(--color02);
	color: var(--color04);
	filter: none;
	text-shadow: none;
}

.proflat .collapse-btn .fa-minus-square:before,
.proflat .collapse-btn .fa-plus-square:before {
	color: var(--color04);
}*/