:root
{
	--couleur1-foncee: 							#15202e;
	--couleur1: 								#162b46;
	--couleur1-legere: 							#314b6d;
	--couleur1-tres-legere: 					#3c5b83;
	--couleur1-inverse: 						#ecf5ff;
	--couleur1-inverse-legere: 					#afc8e4;
	--couleur-accent-foncee: 					#e016d0;
	--couleur-accent: 							#e43ed6;
	--couleur-accent-legere: 					#e76edd;

	--couleur-negative: 						#CC2222;
	--couleur-positive: 						#22CC22;

	--fond1: 									#202020;
	--fond2: 									#333333;
	--fond-focus: 								#575757;

	--bordure-legere: 							#303030;
	--bordure-normale: 							#646464;
	--bordure-foncee: 							#707070;
	--bordure-focus: 							#0188f7;

	--texte-normal: 							#e2e2e2;
	--texte-leger: 								#c7c7c7;
	--texte-inverse: 							#292929;
	--texte-inverse-leger: 						#444444;
	--texte-lien: 								#02306B;
	--texte-survol-lien: 						#4F74DE;

	--couleur-box-shadow: 						#121212;
	--couleur-box-shadow-foncee: 				#000000;
	--couleur-box-shadow-transparente: 			#C0C1C555;

	--fond-notification: 						#090909;
	--fond-notification-survol: 				#151515;
	--texte-notification: 						var(--text-normal);

	--couleur-bouton-principal: 				var(--couleur1-inverse);
	--couleur-bouton-principal-survol: 			var(--couleur1-inverse-legere);
	--texte-bouton-principal: 					var(--texte-inverse);
	--couleur-bouton-secondaire: 				var(--fond2);
	--couleur-bouton-secondaire-survol: 		var(--fond1);
	--texte-bouton-secondaire: 					var(--texte-normal);

	font-size: 					16px;
	--font-megalarge: 			2rem;
	--font-xxlarge: 			1.6rem;
	--font-xlarge: 				1.3rem;
	--font-large: 				1.2rem;
	--font-normal: 				1rem;		/*	Taille de font-size		*/
	--font-small: 				0.8125rem;
	--font-xsmall: 				0.625rem;

	--font-champ: var(--font-large);
}
html, body
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--font-normal);
	margin: 0 auto;
	padding: 0;
	max-width: 768px;
	color: var(--texte-normal);
	background-color: var(--fond1);
}
*
{
	box-sizing: border-box;
}

h1
{
	margin: 0;
	padding: 24px 0;
	text-align: center;
}

button,
input[type="reset"],
input[type="button"],
input[type="submit"]
{
	padding: 8px 16px;
	font-size: var(--font-normal);
	transition: all 125ms;
	border: 2px solid transparent;
	border-radius: 8px;
	font-weight: bold;
	color: var(--texte-normal);
	cursor: pointer;
	box-shadow: 0px 4px 8px 2px var(--couleur-box-shadow);
}
button.principal,
input[type="reset"].principal,
input[type="button"].principal,
input[type="submit"].principal
{
	background-color: var(--couleur-bouton-principal);
	border-color: var(--couleur-bouton-principal);
	color: var(--texte-bouton-principal);
}
button.principal:hover,
input[type="reset"].principal:hover,
input[type="button"].principal:hover,
input[type="submit"].principal:hover
{
	background-color: var(--couleur-bouton-principal-survol);
	border-color: var(--couleur-bouton-principal-survol);
	box-shadow: 0px 4px 8px 2px var(--couleur-box-shadow-foncee);
}
button.principal:active,
input[type="reset"].principal:active,
input[type="button"].principal:active,
input[type="submit"].principal:active
{
	background-color: var(--couleur-bouton-principal);
	border-color: var(--couleur-bouton-principal);
	box-shadow: 0px 0px 0px 0px var(--couleur-box-shadow-foncee), inset 4px 4px 4px 0px var(--couleur1-foncee);
}
button.secondaire,
input[type="reset"].secondaire,
input[type="button"].secondaire,
input[type="submit"].secondaire
{
	background-color: var(--couleur-bouton-secondaire);
	border-color: var(--couleur-bouton-secondaire);
	color: var(--texte-bouton-secondaire);
}
button.secondaire:hover,
input[type="reset"].secondaire:hover,
input[type="button"].secondaire:hover,
input[type="submit"].secondaire:hover
{
	background-color: var(--couleur-bouton-secondaire-survol);
	border-color: var(--couleur-bouton-secondaire-survol);
	box-shadow: 0px 4px 8px 2px var(--couleur-box-shadow-foncee);
}
button.secondaire:active,
input[type="reset"].secondaire:active,
input[type="button"].secondaire:active,
input[type="submit"].secondaire:active
{
	box-shadow: 0px 0px 0px 0px var(--couleur-box-shadow-foncee), inset 4px 4px 4px 0px var(--couleur-box-shadow);
}
button.texte,
input[type="reset"].texte,
input[type="button"].texte,
input[type="submit"].texte
{
	background-color: transparent;
	box-shadow: none;
}
button.texte:hover,
input[type="reset"].texte:hover,
input[type="button"].texte:hover,
input[type="submit"].texte:hover
{
	color: var(--couleur1-tres-legere);
}
button.texte:active,
input[type="reset"].texte:active,
input[type="button"].texte:active,
input[type="submit"].texte:active
{
	color: var(--couleur1);
}

.ajouter
{
	text-align: center;
	padding: 8px 0;
}
body.saisie-active .ajouter
{
	visibility: hidden;
}

form
{
	display: block;
	margin-top: 16px;
}
body:not(.saisie-active) form
{
	display: none;
}
form > .ligne
{
	display: flex;
	flex-wrap: wrap;
	padding: 8px 0;
	justify-content: space-around;
}
form > .ligne > .champ
{
	flex: 0 0 45%;
	max-width: 160px;
	display: inline-block;
	background-color: var(--fond2);
	padding: 8px;
	border-radius: 4px;
	border: 1px solid var(--bordure-normale);
}
form > .ligne > .champ.date-heure
{
	flex-basis: auto;
	max-width: 208px;
}
form > .ligne > .champ:focus-within
{
	border-color: var(--bordure-focus);
	outline: 1px solid var(--bordure-focus);
	background-color: var(--fond-focus);
}
form > .ligne > .champ > label
{
	display: block;
	font-size: var(--font-small);
	color: var(--texte-leger);
}
form > .ligne > .champ > label > span
{
	display: inline-block;
	margin-left: 16px;
	font-weight: bold;
}
form > .ligne > .champ > input:not([type="submit"])
{
	display: block;
	width: 90%;
	min-width: 0;
	border: none;
	background-color: transparent;
	color: var(--texte-normal);
	font-size: var(--font-champ);
}
body:not(.modification) form > .ligne button.supprimer-saisie
{
	display: none;
}
form > .ligne > .champ > input:focus
{
	outline: none;
}

.graphique
{
	margin: 8vh auto 0;
	padding: 0 24px 0 8px;
}

ul.dernieres-saisies
{
	margin: 48px auto 0;
	padding: 0;
}
ul.dernieres-saisies > li
{
	display: flex;
}
ul.dernieres-saisies > li.titre
{
	text-align: center;
	background-color: var(--fond2);
}
ul.dernieres-saisies > li:not(.titre)
{
	cursor: pointer;
}
ul.dernieres-saisies > li.modification-en-cours,
ul.dernieres-saisies > li:not(.titre):hover
{
	background-color: var(--fond2);
}
ul.dernieres-saisies > li > *
{
	padding: 8px;
}
ul.dernieres-saisies > li > .date
{
	flex: 1 1 auto;
	min-width: 128px;
}
ul.dernieres-saisies > li > .modifier
{
	flex: 0 0 16px;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}
ul.dernieres-saisies > li:not(.titre) > .modifier::before
{
	content: "\f304";	/* fa-pen */
	font: var(--fa-font-solid);
	font-size: 14px;
}
ul.dernieres-saisies > li > .poids,
ul.dernieres-saisies > li > .graisse,
ul.dernieres-saisies > li > .eau,
ul.dernieres-saisies > li > .muscle
{
	flex: 0 0 96px;
	text-align: center;
}
ul.dernieres-saisies > li:not(.titre) > .poids::after,
ul.dernieres-saisies > li:not(.titre) > .graisse::after,
ul.dernieres-saisies > li:not(.titre) > .eau::after,
ul.dernieres-saisies > li:not(.titre) > .muscle::after
{
	padding-left: 8px;
	content: "━";
}
ul.dernieres-saisies > li > .poids.hausse::after,
ul.dernieres-saisies > li > .graisse.hausse::after,
ul.dernieres-saisies > li > .eau.hausse::after,
ul.dernieres-saisies > li > .muscle.hausse::after
{
	font: var(--fa-font-solid);
	content: "\e098";	/* fa-arrow-trend-up */
	content: "\f0d8";	/* fa-carret-up */
}
ul.dernieres-saisies > li > .poids.baisse::after,
ul.dernieres-saisies > li > .graisse.baisse::after,
ul.dernieres-saisies > li > .eau.baisse::after,
ul.dernieres-saisies > li > .muscle.baisse::after
{
	font: var(--fa-font-solid);
	content: "\e097";	/* fa-arrow-trend-down */
	content: "\f0d7";	/* fa-carret-down */
}
ul.dernieres-saisies > li > .poids.hausse::after,
ul.dernieres-saisies > li > .graisse.hausse::after,
ul.dernieres-saisies > li > .eau.baisse::after,
ul.dernieres-saisies > li > .muscle.baisse::after
{
	color: var(--couleur-negative);
}
ul.dernieres-saisies > li > .poids.baisse::after,
ul.dernieres-saisies > li > .graisse.baisse::after,
ul.dernieres-saisies > li > .eau.hausse::after,
ul.dernieres-saisies > li > .muscle.hausse::after
{
	color: var(--couleur-positive);
}
@media only screen and (max-width: 431px)
{
	ul.dernieres-saisies > li > .eau
	{
		display: none;
	}
}
@media only screen and (max-width: 526px)
{
	ul.dernieres-saisies > li > .muscle
	{
		display: none;
	}
}

.sauvegarde
{
	display: flex;
	justify-content: space-around;
	padding: 10vh 0 8px;
	text-align: center;
}
body:not(.donnees-saisies) .sauvegarde > .exporter
{
	display: none;
}

section.alimentation
{
	padding: 16px;
}

footer > .version
{
	font-size: small;
	padding: 24px 0 16px;
	text-align: center;
}

@keyframes entree-notification
{
	0%
	{
		opacity:0;
		transform: translateX(100%);
	}
	60%
	{
		opacity:1;
		transform: translateX(-3%);
	}
	75%
	{
		transform: translateX(1%);
	}
	90%
	{
		transform: translateX(-0.5%);
	}
	100%
	{
		transform: translateX(0);
	}
}
@keyframes sortie-notification
{
	20%
	{
		opacity:1;
		transform: translateX(-2.5%);
	}
	80%
	{
		max-height: 128px;
	}
	100%
	{
		opacity:0;
		max-height: 0;
		transform: translateX(100%);
	}
}
@keyframes expiration-notification
{
	from
	{
		transform: scaleX(1);
	}
	to
	{
		transform: scaleX(0);
	}
}
.notifications
{
	z-index: 1;
	position: fixed;
	width: 320px;
	bottom: 8px;
	right: 16px;
	padding: 16px;
	--largeur-bloc-icone-fermer: 40px;
}
.notifications:empty
{
	visibility: hidden;
}
.notifications > .notification
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
	background-color: var(--fond-notification);
	color: var(--texte-notification);
	animation: 500ms cubic-bezier(.215,.61,.355,1) paused entree-notification;
}
.notifications > .notification:not(:first-child)
{
	margin-top: 8px;
}
.notifications > .notification:hover
{
	background-color: var(--fond-notification-survol);
}
.notifications > .notification:hover::after
{
	filter: grayscale(0);
}
.notifications > .notification.supprime
{
	animation: 500ms ease-out forwards paused sortie-notification;
}
.notifications > .notification > .texte
{
	padding: 16px;
	flex: 0 0 calc(100% - var(--largeur-bloc-icone-fermer));
}
.notifications > .notification > .action
{
	flex: 0 0 var(--largeur-bloc-icone-fermer);
	align-self: center;
	font-size: 16px;
	text-align: center;
}
.notifications > .notification > .progression
{
	flex: 0 0 100%;
	height: 4px;
	background-color: var(--bordure-foncee);
}
.notifications > .notification.expire > .progression
{
	transform-origin: left;
	animation-name: expiration-notification;
	animation-timing-function: linear;
	animation-play-state: paused;
	animation-fill-mode: forwards;
}
.notifications > .notification.erreur > .progression
{
	background-color: var(--couleur-negative);
}