/*polices*/

@import url('https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@300;600&family=Grenze:wght@300;600&family=Merriweather:wght@400;700&display=swap');

/* -------------
   LES COULEURS :
 ----------------*/


/* Utilisation des couleurs :
	--bg-color: 			couleur d'arrière-plan de la page
	--first-color: 			couleur principale (barre de titre, bouton, surlignage)
	--first-color-lighter: 	couleur principale éclairée (pour passage de la souris dessus)
	--first-color-to-text: 	couleur principale adapatée au mode jour/nuit (liens)
	--second-color:			couleur secondaire (celle de la page ouverte par exemple)
	--second-color-lighter: couleur secondaire éclairée
	--third-color: 			couleur tertiaire (pied de page)
	--text-color:			couleur du texte par défaut
	--text-color-opposite: 	couleur du texte complémentaire de celle par défaut
	--text-color-light:		couleur du texte blanche
	--text-color-dark: 		couleur du texte noire
	--box-color: 			couleur de fond des boîtes/pop-up (eg les membres)
	--box-color-lighter:	couleur de fond des boîtes éclairée
*/

html {
	/*couleurs claires*/
	--bg-color: #d7c3a5;
	--gray: #CECECE;
	--first-color: #872d0c;
	--first-color-lighter: #99330e;
	--first-color-to-text: #872d0c;
	/*#6b2309;*/
	--second-color: #e5ac39;
	--second-color-lighter: #fabc40;
	--third-color: #daa846;
	--text-color: #000000;
	--text-color-opposite: #f2f2f2;
	--text-color-light: #f2f2f2;
	--text-color-dark: #101010;
	--box-color: #d6b98d;
	--box-color-lighter: #ddbf94;
}

html.dark {
	/*couleurs sombres*/
	--bg-color: #161b2c;
	--gray: #454a4d;
	--first-color: #094992;
	--first-color-lighter: rgb(12, 91, 182);
	--first-color-to-text: #6fb2ff;
	--second-color: #ca9834;
	--second-color-lighter: #e2aa3b;
	--third-color: #0f2d50;
	--text-color: #E0E0E0;
	--text-color-opposite: #101010;
	--text-color-light: #FAFAFA;
	--text-color-dark: #000000;
	--box-color: #0b2d53;
	--box-color-lighter: #0d3766;
}

.dark img {
	filter: grayscale(0.2);
	-webkit-filter: grayscale(0.2);
}


/*------------------------
  ASPECT GENERAL DU SITE
  ----------------------*/


/*
html {
	/*paramètre technique (pour fixer le pied de page)
	height: 100%;
}*/

body {
	/*Aspect général de la page*/
	background: url('/cerflock/data/bg-light.png');
	background-color: var(--bg-color);
	background-repeat: repeat;
	background-attachment: fixed;
	color: var(--text-color);
	font-family: 'Merriweather', serif;
	/*Aspect technique*/
	margin: 0px;
	min-height: 100vh;
	padding: 0;
}

.dark body {
	background: url('/cerflock/data/bg-dark.png');
	background-color: var(--bg-color);
	background-repeat: repeat;
	background-attachment: fixed;
}

main {
	/*contenu de la page (hors en-tête, pied de page, etc...)*/
	padding: 4rem 50px;
	margin: 0 auto;
	max-width: 1200px;
}

h1,
h2,
h3,
h4 {
	font-family: 'grenze', serif;
	line-height: 1em;
	margin: 0;
	margin-top: 0.2em;
	margin-bottom: 0.4em;
}

h1 {
	/*titres de niveau 1*/
	font-family: 'Grenze Gotisch', 'Grenze', serif;
	font-size: 4rem;
}

h2 {
	/*titres de niveau 2*/
	font-size: 2.3rem;
}

h3 {
	/*titres de niveau 3*/
	font-size: 2rem;
}

h4 {
	/*titres de niveau 3*/
	font-size: 1.5rem;
}

@media screen and (max-width:500px) {
	/*on réduit les marges quand l'écran est tout petit*/
	main {
		padding-left: 20px;
		padding-right: 20px;
	}
	h1 {
		font-size: 3.5rem;
	}
}

ul {
	list-style-type: square;
}

li {
	margin-bottom: 0.3em;
}

a {
	color: var(--first-color-to-text);
}

@media (hover: hover) {
	a {
		text-decoration: none;
	}
	a:hover {
		/*liens hypertextes quand on passe la souris dessus*/
		text-decoration: underline;
	}
}

a.hidden {
	padding: 0;
	text-decoration: none;
	color: unset;
}

i {
	margin-right: 0.2em;
}

button {
	padding: 0.5rem;
	margin: 0;
	border: none;
	border-radius: 0.3em;
	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
	background-color: var(--first-color);
	color: var(--text-color-light);
	fill: var(--text-color-light);
	cursor: pointer;
	align-items: center;
	display: inline-flex;
	height: 2rem;
	font-family: 'Merriweather', serif;
	transition: transform 0.5s;
	backface-visibility: hidden;
	-webkit-transition: transform 0.5s;
	-moz-transition: transform 0.5s;
	-ms-transition: transform 0.5s;
	-o-transition: transform 0.5s;
}

@media (hover: hover) {
	button:hover {
		background-color: var(--text-color-light);
		color: var(--first-color);
		fill: var(--first-color);
		border: 2px solid var(--first-color);
		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
		transform: scale(1.1);
		font-weight: bold;
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-o-transform: scale(1.1);
	}
}

::selection {
	/*couleur du texte quand on le sélectionne à la souris*/
	background-color: var(--first-color);
	color: var(--text-color-light);
}

.titlefont {
	font-family: 'Grenze Gotisch', 'Grenze', serif;
}

.box {
	border: solid;
	border-width: 1px;
	border-radius: 10px;
	border-color: var(--text-color-dark);
	background: var(--box-color);
	box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	padding: 1rem;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

@media (hover:hover) {
	.box:hover {
		background-color: var(--box-color-lighter);
		box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);
	}
}

details summary {
	display: flex;
	list-style: none;
}

details summary::-webkit-details-marker {
	display: none;
}

details summary:focus {
	outline: none;
}


/*------------------------ 
  PIED DE PAGE
  ------------------*/

footer {
	/*le bandeau de bas de page*/
	background-color: var(--third-color);
	padding: 1rem 50px;
	/*margin-top: 5rem;*/
	/*padding-right: calc(4.5rem + 20px);*/
}

@media screen and (max-width:500px) {
	/*on réduit les marges quand l'écran est tout petit*/
	footer {
		padding-left: 20px;
	}
}

footer #piedDePage {
	/*le pied de page en soit*/
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}

footer #footerlogo {
	/*logo Cerflock*/
	height: 16rem;
	padding: 0;
	margin: 0;
}

footer #footertext {
	/*texte du pied de page*/
	display: flex;
	height: min-content;
	padding: 0;
}

footer #footertext div {
	padding: 0 0 0 2rem;
}

@media screen and (max-width:800px) {
	footer #piedDePage {
		align-items: start;
	}
	footer #footerlogo {
		height: 9rem;
		float: right;
	}
	footer #footertext {
		display: block;
		float: left;
	}
}

@media screen and (max-width: 360px) {
	footer #footerlogo {
		display: none;
	}
}

footer #footer2 h2 {
	white-space: nowrap;
	margin-bottom: 1rem;
}

footer #footer2 p {
	line-height: 2.3rem;
}

footer #footer2 button svg,
footer #footer2 button img {
	overflow: visible;
	/*images des réseaux sociaux*/
	height: 1.5em;
	width: 1.5em;
	/*translate: 0 0.4em;*/
	margin-right: 0.5em;
}

footer #footer2 button:hover {
	filter: brightness(130%);
	-webkit-filter: brightness(130%);
}


/*------------------
  BOUTON ENIGME
  -----------------*/


/*
#boutonEnigme {
	/*paramètresduboutonrondd'énigmes*/


/*apparence*/


/*background-color: var(--first-color);
	*/


/*
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 200px;
	/*box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
	*/


/*position*/


/*
	padding: 0;
	bottom: 20px;
	right: 20px;
	position: fixed;
	z-index: 3;
	display: flex;
	justify-content: center;
	align-items: center;
	/*animations*/


/*
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
}

#boutonEnigme:hover {
	/*quandonpasselasourissurleboutond'énigmes*/


/*box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
	background-color: var(--first-color-lighter);
	*/


/*
	transform: rotate(360deg) scale(1.1);
	border-width: 3px;
	-webkit-transform: rotate(360deg) scale(1.1);
	-moz-transform: rotate(360deg) scale(1.1);
	-ms-transform: rotate(360deg) scale(1.1);
	-o-transform: rotate(360deg) scale(1.1);
}

#boutonEnigme:focus {
	outline: none;
}

#boutonEnigme svg {
	/*paramètres de l'image du bouton énigme (le point d'interrogation)*/


/*
	width: 50px;
	margin: auto;
}

#popup {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 2;
	background-color: rgba(0, 0, 0, 0.8);
}

#popup .box {
	width: 70%;
	max-width: 1200px;
	min-width: 300px;
	height: 70%;
	margin: auto;
	display: block;
	overflow: auto;
	border-radius: 10%;
}
*/


/* CHANGER LA BARRE DE DEFILEMENT */


/*
html {
	scrollbar-color: var(--first-color) rgba(0, 0, 0, 0);
	scroll-behavior: smooth;
	scrollbar-width: auto;
}

html::-webkit-scrollbar {
	width: 0.65rem;
	background-color: rgba(0, 0, 0, 0);
}

html::-webkit-scrollbar-thumb {
	background: var(--first-color);
	cursor: -webkit-grab;
	cursor: grab;
	border-radius: 6px;
}

html::-webkit-scrollbar-thumb:focus {
	cursor: -webkit-grabbing;
	cursor: grabbing;
	background: var(--first-color-lighter);
}

html::-webkit-scrollbar-thumb:hover {
	background: var(--first-color-lighter);
}*/