/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
*/
/*
    Created on : Mar 28, 2023, 8:52:49 AM
    Author     : ykonoclast
*/


:root
{
	/*layout*/
	--cols: 3;
	--col-gap: 2vw;
	--row-gap: 4vh;
	/*largeur colonne = la largeur de l'écran divisée par le nombre de colonnes, ajusté par les gaps entre les colonnes */
	--grid-column-width: calc((100% / var(--cols)) - ((var(--col-gap) * (var(--cols) - 1)) / var(--cols)) );
	--ecart-bords: 1rem;

	/*couleurs textes et fonds*/
	--text-heavy:#c93c3c;
	--text-light:#e06c6c;
	--texte-inactif:#888;
	--dark:rgb(63, 16, 16);
	--dark-alpha:rgb(63, 16, 16,0.2);
	--fond-clair:#fffcf0;
	--fond-moyen:#fff6e4;
	--fond-fonce:#fbe2c5;
	--fond-moyen-inactif:whitesmoke;
	--fond-fonce-inactif:gainsboro;
	/*ci-dessous non utilisé mais pourrait être joli avec une ombre interne de la forme : box-shadow: 0 0 25px var(--outline) inset;*/
	/*--outline:#fbb4577e;*/

	/*ombres*/
	--blur-radius:0.2rem;
	--shadow-offset:0.1rem;
}

@font-face
{
	font-family: "EBGaramond";
	src: url("../fonts/EBGaramond-Italic.otf");
	font-style: italic, oblique;
}

@font-face
{
	font-family: "EBGaramond";
	src: url("../fonts/EBGaramond-SemiBold.otf");
	font-weight: bold;
}

@font-face
{
	font-family: "EBGaramond";
	src: url("../fonts/EBGaramond-Regular.otf");
}


/*Garamond pour absolument tout le monde*/
*
{
	font-family: EBGaramond;
}

body,header
{
	background-color: var(--fond-clair);
}

body
{
	margin: 0;
}

header
{
	box-shadow:0 var(--shadow-offset) var(--blur-radius) var(--dark-alpha);
	position:sticky;/*sticky va fixer en position même si scroll mais va tout de même laisser dans le flow, contrairement à fixed*/
	top:0;/*nécessaire car sticky : doit avoir un point d'ancrage relatif au parent, avec cela ça colle en haut*/
	font-size:1.4rem;/*comme le reste des polices est doublé, celle du header est un peu augmentée pour rester assez grande*/
	z-index:10;/*pour passer au-dessus des sections*/
}

main
{
	font-size:2rem;/*toutes polices du contenu sont doublées*/
	z-index:1;/*on le définit ici car le z-index est par rapport au parent : si on le mettait dans les sections çá ne changerait pas la hauteur du main par rapport au header*/
}

/*zone avec les inventaires, dans le main*/
.Inv_Area
{
	display:grid;
	grid-template-columns: repeat(var(--cols), var(--grid-column-width));/*template calculé dynamiquement en fonction du nombre de colonnes et de leur écartement, lui-même calculé dynamiquement dans :root*/
	column-gap: var(--col-gap);
	row-gap: var(--row-gap);/*permet que ce soit petit sur PC et grand en portrait mobile (car relatif à la hauteur du viewport)*/
	margin: var(--ecart-bords);/*on écarte un peu du bord*/
}

h1, h3, h4
{
	color:var(--text-heavy);
}

h1, h3
{
	text-align:center;
	font-variant: small-caps;
	margin-top: 0;
}

h1
{
	margin-bottom : 2rem;
}

h3
{
	margin-top: 0;
	margin-bottom : 0.1rem;
}

.Inactive_Section h3
{
	color:dimgrey;
}

section
{
	border-radius: 1%;
	/*on padde à gauche et en bas car c'est là que les lignes de table vont percuter le bord de la section, à droite il y a la colonne semi-vide de suppression et en haut le heading et ses propres marges'*/
	padding-left : 0.3rem;
	padding-bottom : 0.3rem;
	position:relative;/*on se met en relative SANS spécifier de décalage afin de ne pas être en position par défaut, permettant à la checkbox d'être en position absolute (qui est relative au premier parent positionné non par défaut)'*/
}


.Active_Section, .Main_Recap
{
	background-color:var(--fond-moyen);
}

.Active_Section
{
	box-shadow: var(--shadow-offset) var(--shadow-offset) var(--blur-radius) var(--dark-alpha);
}

.Active_Section:hover
{
	box-shadow: var(--shadow-offset) var(--shadow-offset) var(--blur-radius) 0.15rem var(--dark-alpha);
}

.Inactive_Section
{
	background-color:var(--fond-moyen-inactif);
}



input[type=checkbox]
{
	position:absolute;/*absolute retire du flow, comme cela le h3 de la section restera centré*/
	top:1rem;
	left:1rem;
	transform: scale(2.8);
	accent-color:var(--text-heavy);
}

table
{
	width: 100%;/*prend la largeur du container, la section*/
	overflow-wrap: break-word;
	table-layout: fixed;/*sans cela le break-word ne suffira pas car les colonnes se redimmensioneront*/
}

/*toutes les lignes paires de la table, permet de ne pas prendre la ligne des titres de colonnes*/
tr:nth-child(even)
{
    background: var(--fond-fonce);
}

.Inactive_Section tr:nth-child(even)
{
    background: var(--fond-fonce-inactif);
}

th
{
	color: var(--text-light);
}

.Inactive_Section th, .Inactive_Section .Sec_Recap
{
	color:var(--texte-inactif)
}

.Col_Obj
{
	width:72%;
}

.Col_Enc
{
	width:20%;
	text-align:center;
}

td.Col_Obj
{
	padding-left: 0.5rem;
}

.Col_Del,.Col_Del_Head
{
	width:8%;
	color:darkred;
	text-align:center;
	background-color: var(--fond-moyen);
}

.Col_Del
{
	padding-bottom: 0.15rem;
}

.Active_Section .Col_Del:hover
{
	color:red;
	cursor:pointer;
}

.Inactive_Section td
{
	cursor: not-allowed;
}


.Inactive_Section .Col_Del,.Inactive_Section .Col_Del_Head/*l'espace signifie "n'importe quel descendant" par opposition au > qui n'est que pour les enfants directs"'*/
{
	color:darkgrey;
	background-color: var(--fond-moyen-inactif);
}


/*:empty pseduo-classe : signifie si l'élément est vide : ainsi on ne targette que les cellules non remplies (les headers de tables le sont donc ne seront pas concernés)*/
/*::before pseudo-élément : ajoute un élément devenant le premier élément de l'élément : utilisé en conjonction avec content pour injecter du contenu */
.Col_Obj:empty::before,.Col_Enc:empty::before,.Inactive_Section .Col_Obj, .Inactive_Section .Col_Enc
{
	color:var(--texte-inactif);
}

.Col_Obj:empty::before,.Col_Enc:empty::before
{
	font-style: italic;
}

.Col_Obj:empty::before
{
	content: "Entrer nom objet...";
}

.Col_Enc:empty::before
{
	content: "#";
}


.Sec_Recap
{
	margin-top:1.5rem;
}

.Main_Recap
{
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	overflow-wrap: break-word;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	padding-left:var(--ecart-bords);
	padding-right:var(--ecart-bords);
	box-shadow:0 calc(-1 * var(--shadow-offset)) var(--blur-radius) var(--dark-alpha);

	font-size: 1.8rem;
}

.Inactive_Section .Main_Recap
{
	color:var(--texte-inactif)
}

/*tous les enfants de type h4 d'un div lui-même enfant de la classe Main_Recap'*/
.Main_Recap > div > h4
{
	display: inline;/*de base les h4 sont block: donc on va à la ligne après et là on veut afficher le texte à la suite, donc inline*/
}

.result
{
	color:var(--text-light);
}

/*seulement pour lecture à l'écran et taille doit être proche de tablette portrait ou smartphone paysage*/
@media only screen and (max-width: 900px)
{
	:root
	{
		--cols: 2;
	}

	header
	{
		font-size:1.2rem;
	}

	.Main_Recap
	{
		font-size: 1.25rem;
	}

	main
	{
		font-size:1.8rem;
	}

	input[type=checkbox]
	{
		transform: scale(2.2);
	}
}

/*seulement pour lecture à l'écran et taille doit être proche de smartphone portrait*/
@media only screen and (max-width: 600px)
{
	:root
	{
		--cols: 1;
	}

	/*tailles de polices sont héritées du bloc paysage car 600px EST <=900px*/
}