/*
Auteur : Loïc Guistel
Date : Mars 2025
Version: 1.1
*/






/*============================================================================*/
/*=====  SETUP ===============================================================*/
/*============================================================================*/



/*-----------------------------------------------*/
/*----- RESET -----------------------------------*/
/*-----------------------------------------------*/
*{box-sizing:border-box;}

html, body {
	border: none;
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,address,big,cite,code,em,font,img,small,strike,
sub,sup,li,ol,ul,fieldset,form,label,legend,table,caption,tr,th,td,i {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}
blockquote::before, blockquote::after {content: "";}
button {all: unset;box-sizing:border-box;}














/*============================================================================*/
/*=====  FLEX ================================================================*/
/*============================================================================*/
.flex{
	position:relative;
	display:flex;
  flex-direction:column;
	justify-content: center;
	align-items: center;
}
.debug .flex{border:1px solid red;}
.flex.wrap{flex-wrap: wrap;}

/*-----------------------------------------------*/
/*----- ALIGNEMENTS -----------------------------*/
/*-----------------------------------------------*/
.flex.row{flex-direction: row;}
.flex.fill{flex:1;}
.flex.fill-2{flex:2;}

.flex.row.top{align-items: flex-start;}
.flex:not(.row).top{justify-content: flex-start;}
.flex.row.bottom{align-items: flex-end;}
.flex:not(.row).bottom{justify-content: flex-end;}

.flex.row.left{justify-content: flex-start;}
.flex:not(.row).left{align-items: flex-start;}
.flex.row.right{justify-content: flex-end;}
.flex:not(.row).right{align-items: flex-end;}

.flex.fit-container{align-self: stretch;}

/*-----------------------------------------------*/
/*----- WRAPPERS --------------------------------*/
/*-----------------------------------------------*/
.box-container{padding:20px;}
.row-container{padding-left:20px;padding-right:20px;}
.column-container{padding-top:20px;padding-bottom:20px;}


/*-----------------------------------------------*/
/*----- ESPACEMENTS -----------------------------*/
/*-----------------------------------------------*/
.gap-small{gap:10px;}
.gap{gap:20px;}
.gap-large{gap:40px;}











/*============================================================================*/
/*=====  MENU ================================================================*/
/*============================================================================*/
.menu{
	display:flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap:wrap;
}

/*-----------------------------------------------*/
/*----- ITEMS -----------------------------------*/
/*-----------------------------------------------*/
.menu-item{
	list-style: none;
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

/*-----------------------------------------------*/
/*----- LINKS -----------------------------------*/
/*-----------------------------------------------*/
.menu-link{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap:10px;
	color:inherit;
	text-decoration: none;
	font-weight: normal;
}

/*-----------------------------------------------*/
/*----- TITLE -----------------------------------*/
/*-----------------------------------------------*/


















/*============================================================================*/
/*=====  LINKS ===============================================================*/
/*============================================================================*/
.button,
.button-link{
	cursor:pointer;
	text-decoration: none;

	display:flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap:10px;

	color:inherit;
}

.button:hover:hover{color:var(--color-action);}

/*-----------------------------------------------*/
/*----- COULEURS --------------------------------*/
/*-----------------------------------------------*/
.button.action{color:var(--color-action);}
.button.dark{color:var(--color-dark);}
.button.light{color:var(--color-light);}




/*============================================================================*/
/*=====  BUTTONS =============================================================*/
/*============================================================================*/
.button-link{
	height:var(--field-height);
	min-width:var(--field-height);

	padding:0 20px;
	border:1px solid var(--color-dark);
	border-radius: var(--border-radius);

	position:relative;
	scale:1;
	transition: scale 0.3s;
}

.button-link:hover{
	scale:1.1;
}

/*-----------------------------------------------*/
/*----- COULEURS --------------------------------*/
/*-----------------------------------------------*/
.button-link.action{border:1px solid var(--color-action);}
.button-link.light{border:1px solid var(--color-light);}

.button-link.fill{color:var(--color-light);border:none;}
.button-link.fill.action{background-color: var(--color-action);}
.button-link.fill.light{background-color: var(--color-light);}
.button-link.fill.dark{background-color: var(--color-dark);}


/*---------------------------------------------------*/
/*---- TAG ------------------------------------------
.tag{
	display:flex;
	flex-direction: row;
	gap:10px;
	padding:4px 10px;
	font-size: 0.8em;
	border:1px solid var(--color-dark);
	border-radius: var(--border-radius);
}*/


















/*============================================================================*/
/*=====  IMAGES ==============================================================*/
/*============================================================================*/





/*============================================================================*/
/*=====  ICONES ==============================================================*/
/*============================================================================*/
.icon-button{font-size: 30px;}













/*==============================================================================
================================================================================
		TABLE
================================================================================
==============================================================================*/
table{
	border-collapse: collapse;
	table-layout: auto;
	width:100%;
	font-size: 0.9em;
}

/*-----------------------------------------------*/
/*----- HEADER ----------------------------------*/
/*-----------------------------------------------*/


/*-----------------------------------------------*/
/*----- CELLULES --------------------------------*/
/*-----------------------------------------------*/



/*-----------------------------------------------*/
/*----- COLONNES --------------------------------*/
/*-----------------------------------------------*/
table .col.designation{font-weight: bold;}
table .col.center{text-align: center;}
table .col.right{text-align: right;}




table tr{
	min-height:var(--field-height);
	border-top:1px solid var(--color-border);
}
table th, table td{
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	padding:10px;
}
table th{font-size: 1.2em;text-transform: uppercase;}

/*table .col{padding:0 10px;}*/
/*tfoot .col{padding:10px;}*/










/*==============================================================================
================================================================================
		FORMAULAIRE
================================================================================
==============================================================================*/
input{
	border:1px solid var(--color-border);
	background-color: var(--color-background);
	color:var(--color-dark);
	border-radius:var(--border-radius);
	padding:0 10px;
	height:var(--field-height);
	width:100%;
	font-size: 0.8em;
}
input[type="text"]{min-width:240px;}
input::placeholder{
	color:rgba(0,0,0,0.4);
	font-style: italic;
}
input:focus{
	outline: none;
	border:1px solid var(--color-headline);
}

textarea{
	border:1px solid var(--color-border);
	background-color: var(--color-background);
	color:var(--color-dark);
	border-radius:var(--border-radius);
	padding:0 10px;
	resize: vertical;
	width:100%;
	font-size: 0.8em;
}

select{
	border:1px solid var(--color-border);
	background-color: var(--color-background);
	color:var(--color-dark);
	border-radius:var(--border-radius);
	padding:0 10px;
	min-height:var(--field-height);
	width:100%;
	font-size: 0.8em;
}

option{
	padding:5px 0;
	font-size: 0.8em;
}
label{font-size: 0.8em;font-weight: bold;margin-bottom: 3px;}




/*
.select{
	background-color: var(--color-light);
	position:relative;
	display: flex;
	width:100%;
}
.select .header{
	border:1px solid var(--color-border);
	background-color: var(--color-background);
	color:var(--color-dark);
	border-radius:var(--border-radius);
	font-size: 1em;
	width:100%;
	height:var(--field-height);
	display: flex;
	flex-direction: row;
	align-items: center;
	width:100%;
	overflow: hidden;
}
.select .header .title{
	flex:1;
	padding:0 10px;
}
.select .header button{
	display: flex;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	border-left: 1px solid var(--color-border);
	background-color: var(--color-light);
	padding:0 10px;
}
.select .content{
	display:none;
	flex-direction: column;
	border-radius:var(--border-radius);
	overflow: hidden;
	width:100%;
	position:absolute;
	top:45px;
	border:1px solid var(--color-border);
	background-color: var(--color-background);
}
.select .row{
	display:flex;
	flex-direction: row;
	align-items: center;
	padding: 0 10px;
	gap:10px;
	height:var(--field-height);
}
.select .row:not(:first-child){border-top: 1px solid var(--color-border);}
.select .row:hover{font-weight: bold;}
.select .row.selected{background-color: var(--color-background);}

.toggled .hideIfToggled{display:none;}

.toggled .showIfToggled{display:flex;}
.showIfToggled{display:none;}
*/



















.hidden{display:none;}