@media (max-width: 640px) {
	.nobile {
		display: none;
	}
/* 
	body {
		width: auto;
		margin: 0;
		padding: 0;
	}
 */
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */
/* 
	img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
		max-width: 100%;
	}
 */
	/* conserver le ratio des images */
/* 
	img {
		height: auto;
	}
 */
	/* gestion des mots longs */
/* 
	textarea, table, td, th, code, pre, samp {
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word;
	}
 */
	/* passage à la ligne spécifique pour les éléments à châsse fixe */
/* 
	code, pre, samp {
		white-space: pre-wrap;
	}
 */
}
@media (max-device-width:768px) and (orientation: landscape) {
/* 
	html {
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
 */
}
:root {
	--line: 32px;
	--height: 374px;
	--width: 300px;
	
	--color-background: #eee;
	--color-foreground: #fff;
	--color-modal-border: yellow;
	--color-text: #000;
	--shadow: 0 0 30px hsl(0, 0%, 40%);
}

@media (prefers-color-scheme: dark) {

	:root {
		--color-background: #303134;
		--color-foreground: #404040;
		--color-modal-border: white;
		--color-text: #ddd;
		--shadow: 0 0 10px white;
	}

}

html {
	background-color: var(--color-background);
	color: var(--color-text);
}

a:any-link {
	color: inherit;
}

body > header {
	position: relative;
	left: -150px;
	margin: 24px 50px;
	text-align: center;
	height: var(--height);
}

body > header > span {
	position: absolute;
	height: var(--height);
}

body > header .society {
	position: absolute;
	top: 0;
	left: 0;
	font-size: var(--line);
	font-style: oblique;
}

body > header img {
	height: var(--width);
}


body > header .catch {
	position: absolute;
	bottom: var(--line);
	left: 0;
	width: var(--width);
	font-size: 20px;
	color: #666;
}

body > header .contact {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 20px;
	color: #666;
}

body {
	padding-bottom: 70px;
}

footer {
	position: fixed;
	bottom: 0px;
	font-size: 18px;
	height: 18px;
	width: 100%;
	padding: 5px;
	background: var(--color-background);
	color: var(--color-text);
	display: flex;
	justify-content: space-around;
	z-index: 999;
}

footer div {
	color: var(--color-text);
	text-decoration: none;
	cursor: pointer;
}
@media (min-width: 650px) {
footer div:hover {
	transition: transform 0.3s ease-in;
	transform: scale(2, 2) translate(0, -8px);
}
}

#plan_of_site {
	display: none;
	position: absolute;
	bottom: 34px;
	background: conic-gradient(from 180deg, darkgray, var(--color-background), darkgray);
	background-color: darkgray;
	border-radius: 6px;
	box-shadow: var(--shadow);
}

#plan_of_site span {
	position: absolute;
	height: 20px;
	width: 20px;
	bottom: -11px;
    transform: rotateZ(45deg);
    background: darkgray;
    background: linear-gradient(45deg, hsl(0, 0%, 64%), darkgray, hsl(0, 0%, 64%));
}

#plan_of_site_shadow {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

#plan_of_site section {
	display: inline-block;
	margin: 0 30px;
	vertical-align: top;
}

#plan_of_site ul {
	list-style-type: none;
	padding: 0;
}

#plan_of_site li {
	border-radius: 6px;
	padding: 2px 8px;
}

#plan_of_site li:hover {
	background: var(--color-text);
	color: var(--color-background);
}

#plan_of_site a:any-link {
	text-decoration: none;
}