:root
{
	--couleur-fond1: #242428;
	--couleur-fond2: #2a2e3b;
	--couleur1: #552c96;
	--couleur1-legere: #552c9654;
	--couleur1-tres-legere: #552c9678;
	--couleur-texte-normal: #e4e4e4;
	--couleur-texte-leger: #686868;
	--couleur-bordure-normale: #4e4e4e;

	--couleur-fond-champ-texte: #4e4e4e;
	--couleur-bordure-champ-texte: #6d6d6d;
	--couleur-texte-champ-texte: #FFFFFF;

	--couleur-fond-bouton-principal: #535353;
	--couleur-bordure-bouton-principal: #181818;
	--couleur-texte-bouton-principal: #f3f3f3;
	--couleur-fond-bouton-principal-survol: #636363;
	--couleur-fond-bouton-principal-clic: #353535;

	--couleur-point-perte: #d64a4a;
	--couleur-point-douleur: #346eda;
	--couleur-point-digestion: #f185f1;
	--couleur-point-commentaire: #EFEFEF;
	--couleur-point-rapport-sexuel: #888888;

	--couleur-categorie-douleur1: #2056b9;
	--couleur-categorie-douleur2: #346eda;
	--couleur-categorie-douleur3: #628cda;
	--couleur-categorie-douleur4: #9cb0d4;

	--couleur-rapport-sexuel1: #888888;
	--couleur-rapport-sexuel2: #585858;


	/*	Ce sont les valeurs des propriétés margin-block, qu'on remplacera par des padding	*/
	--padding-block-h1: 		0.67em;
	--padding-block-h2: 		0.83em;
	--padding-block-h3: 		1em;
	--padding-block-h4: 		1.33em;
	--padding-block-h5: 		1.67em;
	--padding-block-h6: 		2.33em;
}

html, body
{
	font-family: Arial, Helvetica, sans-serif;
	color: var(--couleur-texte-normal);
	background-color: var(--couleur-fond1);
	margin: 0;
	padding: 0;
}

/* On définit la propriété margin-block à padding-block, plus logique quand on met des couleurs de fond */
h1
{
	margin-block: 0;
	padding-block: var(--padding-block-h1);
}
h2
{
	margin-block: 0;
	padding-block: var(--padding-block-h2);
}
h3
{
	margin-block: 0;
	padding-block: var(--padding-block-h3);
}
h4
{
	margin-block: 0;
	padding-block: var(--padding-block-h4);
}
h5
{
	margin-block: 0;
	padding-block: var(--padding-block-h5);
}
h6
{
	margin-block: 0;
	padding-block: var(--padding-block-h6);
}

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

textarea
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: larger;
	padding: 8px;
	border-radius: 8px;
	border: 1px solid var(--couleur-bordure-champ-texte);
	background-color: var(--couleur-fond-champ-texte);
	color: var(--couleur-texte-champ-texte);
}

button
{
	padding: 8px 16px;
	background-color: var(--couleur-fond-bouton-principal);
	border: 1px solid var(--couleur-bordure-bouton-principal);
	color: var(--couleur-texte-bouton-principal);
	border-radius: 8px;
	cursor: pointer;
}
button:hover
{
	background-color: var(--couleur-fond-bouton-principal-survol);
}
button:active
{
	background-color: var(--couleur-fond-bouton-principal-clic);
}






h1
{
	text-align: center;
}
h1 > i
{
	display: inline-block;
	padding-right: 16px;
}

nav
{
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid var(--couleur-bordure-normale);
	border-bottom: 1px solid var(--couleur-bordure-normale);
}
nav > *
{
	box-sizing: border-box;
	flex: 1 1 auto;
	padding: 12px 0 8px;
	border-bottom: 4px solid transparent;
	text-align: center;
	cursor: pointer;
}
nav > *:nth-child(1)
{
	border-right: 1px solid var(--couleur-bordure-normale);
}
nav > *:hover
{
	background-color: var(--couleur1-tres-legere);
}
nav > *.selected
{
	border-color: var(--couleur1);
	background-color: var(--couleur1-legere);
}

main
{
	padding: 24px 0 16px;
}
main > :not(.actif)
{
	display: none;
}

section.saisie,
section.calendrier,
section.semaine,
section.export
{
	max-width: 696px;
	margin: 0 auto;
	padding: 24px 16px;
}
section.saisie:not(.actif) + section.calendrier
{
	margin-top: 48px;
}
@media only screen and (max-width: 416px)
{
	section.saisie,
	section.calendrier,
	section.semaine
	{
		padding: 24px 0;
	}
}
section.calendrier > .titre,
section.semaine > .titre
{
	display: flex;
	align-items: center;
	padding: 0 16px 16px;
}
section.calendrier > .titre > .action,
section.semaine > .titre > .action
{
	flex: 0 0 48px;
	padding: 8px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1em;
	font-size: larger;
	border-radius: 8px;
	border: 1px solid var(--couleur-bordure-normale);
	cursor: pointer;
}
section.calendrier > .titre > .action.precedent::before,
section.semaine > .titre > .action.precedent::before
{
	content: "◀";
}
section.calendrier > .titre > .action.suivant::before,
section.semaine > .titre > .action.suivant::before
{
	content: "▶";
}
section.calendrier > .titre > .action:hover,
section.semaine > .titre > .action:hover
{
	background-color: var(--couleur-fond2);
}
section.calendrier > .titre > h3,
section.semaine > .titre > h3
{
	flex: 1 1 auto;
	padding: 0;
	text-align: center;
}

ul.noms-jours,
ul.calendrier
{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}
ul.noms-jours > li
{
	padding: 0 0 4px 0;
	text-align: center;
	color: var(--couleur-texte-leger);
}
ul.calendrier > li
{
	border: 1px solid var(--couleur-bordure-normale);
	cursor: pointer;
}
ul.calendrier > li.aujourdhui
{
	background-color: var(--couleur1-legere);
}
ul.calendrier > li.different
{
	color: var(--couleur-texte-leger);
}
ul.calendrier > li.selected
{
	background-color: var(--couleur1);
}
ul.calendrier > li:not(.selected):hover
{
	background-color: var(--couleur-fond2);
}
ul.calendrier > li.aujourdhui:not(.selected):hover
{
	background-color: var(--couleur1-tres-legere);
}
ul.calendrier > li > .jour
{
	padding: 8px;
}
ul.calendrier > li > ul
{
	height: 24px;
	padding: 0 4px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
ul.calendrier > li > ul > li
{
	--taille-point: 6px;
	flex: 0 0 var(--taille-point);
}
ul.calendrier > li > ul > li.selected::before
{
	content: "";
	display: block;
	width: var(--taille-point);
	height: var(--taille-point);
	border-radius: 50%;
}
ul.calendrier > li > ul > li.pertes.selected::before
{
	background-color: var(--couleur-point-perte);
}
ul.calendrier > li > ul > li.douleurs.selected::before
{
	background-color: var(--couleur-point-douleur);
}
ul.calendrier > li > ul > li.digestions.selected::before
{
	background-color: var(--couleur-point-digestion);
}
ul.calendrier > li > ul > li.rapports-sexuels.selected::before
{
	background-color: var(--couleur-point-rapport-sexuel);
}
ul.calendrier > li > ul > li.commentaire.selected::before
{
	background-color: var(--couleur-point-commentaire);
}

section.saisie:not(.actif)
{
	display: none;
}
section.saisie > h3
{
	text-align: center;
}
section.saisie > ul.types-saisies
{
	display: flex;
	justify-content: space-around;
}
section.saisie > ul.types-saisies > li
{
	box-sizing: border-box;
	flex: 0 0 64px;
	height: 64px;
	padding: 8px 0;
	text-align: center;
	border: 1px solid var(--couleur-bordure-normale);
	border-radius: 50%;
	cursor: pointer;
}
section.saisie > ul.types-saisies > li:hover
{
	background-color: var(--couleur1-tres-legere);
}
section.saisie > ul.types-saisies > li.selected
{
	background-color: var(--couleur1);
}
section.saisie > ul.types-saisies > li > i
{
	font-size: x-large;
}
section.saisie > ul.types-saisies > li[data-type-saisie="pertes"] > i
{
	color: var(--couleur-point-perte);
}
section.saisie > ul.types-saisies > li[data-type-saisie="douleurs"] > i
{
	color: var(--couleur-point-douleur);
}
section.saisie > ul.types-saisies > li[data-type-saisie="digestion"] > i
{
	color: var(--couleur-point-digestion);
}
section.saisie > ul.types-saisies > li[data-type-saisie="rapports-sexuels"] > i
{
	color: var(--couleur-point-rapport-sexuel);
}
section.saisie > ul.types-saisies > li[data-type-saisie="commentaire"] > i
{
	color: var(--couleur-point-commentaire);
}
section.saisie > ul.types-saisies > li > div
{
	padding: 8px 0 0;
	font-size: x-small;
}
section.saisie > .saisie
{
	padding: 16px 0;
}
section.saisie > .saisie > ul.pertes,
section.saisie > .saisie > ul.digestion,
section.saisie > .saisie > ul.douleurs,
section.saisie > .saisie > ul.rapports-sexuels,
section.saisie > .complement-saisie > ul
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
section.saisie > .saisie > ul.pertes:not(.visible),
section.saisie > .saisie > ul.digestion:not(.visible),
section.saisie > .saisie > ul.douleurs:not(.visible),
section.saisie > .saisie > ul.rapports-sexuels:not(.visible),
section.saisie > .complement-saisie > ul:not(.visible),
section.saisie > .saisie > .commentaire:not(.visible)
{
	display: none;
}
section.saisie > .saisie > ul.pertes > li,
section.saisie > .saisie > ul.digestion > li,
section.saisie > .saisie > ul.douleurs > li,
section.saisie > .saisie > ul.rapports-sexuels > li,
section.saisie > .complement-saisie > ul > li
{
	box-sizing: border-box;
	flex: 0 0 96px;
	max-width: 96px;
	margin: 8px 0 0;
	padding: 8px;
	border-radius: 8px;
	text-align: center;
	border: 1px solid var(--couleur-bordure-normale);
	cursor: pointer;
}
section.saisie > .complement-saisie > ul > li
{
	max-width: none;
	min-width: 72px;
}
section.saisie > .saisie > ul.pertes > li:hover,
section.saisie > .saisie > ul.digestion > li:hover,
section.saisie > .saisie > ul.douleurs > li:hover,
section.saisie > .saisie > ul.rapports-sexuels > li:hover,
section.saisie > .complement-saisie > ul > li:hover
{
	background-color: var(--couleur1-tres-legere);
}
section.saisie > .saisie > ul.pertes > li.selected,
section.saisie > .saisie > ul.digestion > li.selected,
section.saisie > .saisie > ul.douleurs > li.selected,
section.saisie > .saisie > ul.rapports-sexuels > li.selected,
section.saisie > .complement-saisie > ul > li.selected
{
	background-color: var(--couleur1);
}
section.saisie > .saisie > ul.douleurs > li
{
	flex: 0 0 72px;
	height: 72px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: small;
	border: 1px solid var(--couleur-bordure-normale);
	border-radius: 50%;
	cursor: pointer;
}
section.saisie > .saisie > ul.douleurs > li.saisie-renseignee:not(.selected)
{
	background-color: var(--couleur1-legere);
}
section.saisie > .saisie > ul.douleurs > li:hover,
section.saisie > .saisie > ul.douleurs > li.saisie-renseignee:hover
{
	background-color: var(--couleur1-tres-legere);
}
section.saisie > .saisie > ul.douleurs > li.categorie:not(.afficher-details) > ul
{
	display: none;
}
section.saisie > .saisie > ul.douleurs > li > ul > li
{
	padding: 8px 8px 8px 8px;
	border-radius: 8px;
	border: 1px solid var(--couleur-bordure-normale);
}
section.saisie > .saisie > ul.douleurs > li > ul > li:hover
{
	background-color: var(--couleur1-tres-legere);
}
section.saisie > .saisie > .commentaire > textarea
{
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 80px;
	resize: vertical;
}
section.saisie > .fermer
{
	flex-basis: 100%;
	margin: 0 auto;
	padding: 24px 0;
	border-bottom: 2px solid var(--couleur-bordure-normale);
	text-align: center;
}

section.export
{
	text-align: center;
}

.stats > ul
{
	padding: 16px 0 0;
	display: flex;
	justify-content: space-around;
}
.stats > ul > li
{
	flex: 1 1 auto;
	padding: 8px;
	text-align: center;
	border-radius: 8px;
	cursor: pointer;
}
.stats > ul > li:hover
{
	background-color: var(--couleur1-tres-legere);
}
.stats > ul > li.selected
{
	background-color: var(--couleur1);
}
.stats > div
{
	margin: 48px auto 0;
	max-width: 95%;
}

footer
{
	padding: 24px 0 8px;
	text-align: center;
	font-size: small;
}