:root {
	--color-accent: #F15922; /* Orange  rgb(241, 89, 34) */
	--color-accent-tint: #F79B7A; /* LighterOrange  rgb(247, 155, 122) */
	--color-accent-pale: #FBCDBC; /* LightOrange  rgb(251, 205, 188) */
	--color-gray: #58585A; /* DarkGray  rgb( 88, 88, 90) */
	--color-silver: #A7A9AC; /* Gray  rgb(167, 169, 172) */
	--color-white: #FBFDFF; /* AlmostWhite  rgb(251, 253, 255) */
}

::selection {
	background-color: var(--color-accent-tint, #F79B7A);
	color: var(--color-white, #FBFDFF);
}

html {
	background-color: var(--color-gray);
}
body {
	font-family: Muli, sans-serif;
	font-weight: 400;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	margin: 0px;
	background-color: var(--color-white);
	/* background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50" width="200px" height="50px"><path d="M 5 34 C 100 -32 118 60 195 20 C 117 80 100 -10 5 34 Z"></path></svg>'); */
	/* background-repeat: repeat; */
}



/*──────────────────────┐
│ MARK: utils
├───────────────────────┤
│ Content for different |
| elements accross all  |
| pages                 │
└──────────────────────*/
img, video {
	width: 100%;
}

:is(p, h1, h2, h3, h4, a):not(.ns) {
	/* display: flex;
	flex-wrap: wrap; */

	>*+*:not(.ns)::before {
		content: "\00a0";
	}
	>*+a:not(.ns)::before {
		display: inline-block;
		line-height: .5em;
	}
}

.hidden{
	display: none !important;
}
.invisible{
	visibility: hidden !important;
}

.cta {
	cursor: pointer;
	padding: .62em 1em;
	margin: .85em .5ch 1.38em;
	border: 0;
	border-radius: 2px;

	&.primary { color: var(--color-white); background-color: var(--color-accent-tint) }
	&.secondary { color: var(--color-gray); background-color: var(--color-accent-pale) }
	&.tertiary { color: var(--color-accent) }
	&:not(:hover) { filter: grayscale(.2) }
}



/*──────────────────────┐
│ MARK: emojis and icons
├───────────────────────┤
│ Handle the span with  |
| the Material Icons and|
| their fallback emojis |
└──────────────────────*/
[data-emoji]::before {
	content: var(--icon, attr(data-emoji));
	font-family: "Material Symbols";
}
[data-emoji]:hover::before {
	color: var(--color-accent-tint);
}
[data-emoji="↔️"] { --icon: "filter_list_off" /* or collapse_content */ }
[data-emoji="↕️"] { --icon: "filter_list" /* or expand_content */ }
[data-emoji="🔂"] { --icon: "control_point_duplicate" /* or file_copy */ }
[data-emoji="➕"] { --icon: "add_box" }
[data-emoji="🗑️"] { --icon: "delete_forever" }
[data-emoji="🛒"] { --icon: "shopping_cart" }
[data-emoji="📧"] { --icon: "outgoing_mail" }
[data-emoji="💬"] { --icon: "chat" }

[data-emoji="📧"] { position: absolute; top: 28px; lefT: 7px; }


/*─────────────────┐
│ MARK: page header
├──────────────────┤
│ Top of the page  │
└─────────────────*/
body > header {
	background-color: #FFFFFF;
	background-image: url("/common/bg-body.jpg");
	background-position: 120px 10px;
	background-repeat: repeat-x;
	height: 125px;
	contain: content;

	> a {
		cursor: alias;
		display: flex;
		flex-direction: column;
		position: absolute;
		text-decoration: none;
	}
	img {
		background-clip: content-box;
		background-color: rgba(255, 255, 255, 0.35);
		border-bottom-right-radius: 50%;
		border-top-right-radius: 20%;
	}
	img+h5 {
		color: transparent;
		cursor: help;
		margin: 0px;
		&:hover {
			color: var(--color-silver);
		}
	}

	h1 {
		color: var(--color-gray);
		display: block;
		font-size: 44px;
		margin: 0px auto;
		padding-top: 32px;
		text-shadow: 0px 0px 2px var(--color-silver);
		width: 770px;
	}

	> h5 {
		color: grey;
		position: absolute;
		bottom: 0;
		right: 0;
		margin: 0px;
		margin-right: 1ch;
		>a.material-icons {
			text-decoration: none;
			font-size: 18px;
			vertical-align: sub;
			color: darkblue;
		}
	}
}



/*──────────────────┐
│ MARK: header's nav
├───────────────────┤
│ Header's appendix │
└──────────────────*/
body > header+nav {
	display: flex;
	justify-content: space-around;

	&::before {
		content: "";
		position: absolute;
		background-color: var(--color-accent);
		box-shadow: 0px 2px 3px -1px var(--color-accent-tint);
		display: block;
		height: 4px;
		margin-bottom: -4px;
		width: 100%;
		z-index: 100;
	}

	> a {
		background-color: var(--color-silver);
		border: none;
		border-bottom-left-radius: 14px;
		border-bottom-right-radius: 14px;
		box-shadow: 6px 3px 5px -1px rgba(0, 0, 0, 0.25);
		box-sizing: border-box;
		color: var(--color-white);
		display: inline-block;
		font-weight: bold;
		height: 30px;
		line-height: /*same as this.height*/30px;
		min-width: 180px;
		padding: 0px 10px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		z-index: 110;

		transition: color 175ms linear;
	}
	> a.shiny {
		background-color: var(--color-silver);
		background-image: repeating-linear-gradient(-35deg,
			transparent, transparent 5px,
			var(--color-gray) 5px, var(--color-gray) 6px);
	}
	> a:hover {
		border: 2px outset var(--color-silver);
		color: var(--color-accent);
		line-height: 26px;

		transition: color 175ms linear;
	}
	> a:active {
		border-color: var(--color-accent);
		color: var(--color-accent-tint);
	}
}



/*─────────────────┐
│ MARK: page footer
├──────────────────┤
│ End of the page  │
└─────────────────*/
body > footer {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;

	background-color: var(--color-gray);
	box-shadow: inset 0px 14px 12px -14px black;
	margin-top: 10px;
	padding-top: 2px;

	> * {
		color: var(--color-accent);
		margin: 10px;
		margin-bottom: 4px;
		text-align: center;

		font-size: 12px;
		line-height: 12px;
		@media (max-width: 800px) {
			font-size: 11px;
			line-height: 11px;
		}
		@media (max-width: 340px) {
			font-size: 10px;
			line-height: 10px;
		}
	}
}



/*────────────────────────────┐
│ MARK: page central area
├─────────────────────────────┤
│ Default for the central     |
| section of almost all pages │
└────────────────────────────*/
main {
	display: block;
	margin: 40px auto;
	min-width: 800px;
	&.delimited {
		background-color: #FFFFFF;
		border: thin solid grey;
		border-radius: 6px;
		box-shadow: 0px 0px 9px -4px var(--color-gray);
		box-sizing: border-box;
		margin-top: 50px;
		padding: 12px;
		&:not(#configurator) {
			font-size: 18px;
		}
	}
}



/*──────────────────────────┐
│ MARK: Errors modal area
├───────────────────────────┤
│ Related to top right hand |
| corner notification       |
| (and a modal on /prices)  │
└──────────────────────────*/
#errors {
	height: 65%;
	overflow-x: visible;
	overflow-y: visible;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 2px;
	.alert
	{
		box-shadow: 0px 0px 4px 0px var(--color-gray);
		float: right;
		width: 240px;
	}
}

.alert
{
	border: 1px solid;
	border-radius: 4px;
	cursor: crosshair;
	margin: 5px;
	min-width: 80px;
	max-width: 360px;
	max-height: 400px;
	overflow: hidden;
	padding: 15px;

	&.hidden
	{
		max-height: 0px;
		max-width: 0px;
		opacity: 0;
		transform: scale(0);
		padding: 0px;
	
		transition: opacity 1800ms cubic-bezier(0.4, 0, 0, 1.5) 0ms,
			transform 1800ms cubic-bezier(0.4, 0, 0, 1.5) 0ms,
			max-width 10ms linear 500ms,
			max-height 10ms linear 500ms,
			padding 10ms linear 500ms;
	}

	&.error		{ background-color: #F2DEDE; color: #A94442} /* valeurs à modifier un peu */
	&.warning	{ background-color: #FCF8E3; color: #8A6D3B} /* valeurs à modifier un peu */
	&.success	{ background-color: #DFF0D8; color: #3C763D} /* valeurs à modifier un peu */
	&.info		{ background-color: #D9EDF5; color: #42708C}
	&.sober		{ background-color: var(--color-white); color: var(--color-gray)}
}