@layer reset, defaults, components, utilities, inputs, sizes, spacing;

:root {
	--bg-footer: #F8F9FA;
	--link:#0071e3;
	--font-size: 12pt;
	--menu-font-min: 8pt;
	--menu-font-max: 12pt;
	--border-color: #CED4DA;
	--border-radius: 5px;
	--line-height: 1.5rem;
	--menu-bg: #F8F9FA;
	--menu-bg-hover: #dfdfdf;
	--menu-font-color: #000;
	--menu-border-color: #dcdcdc;
	--submenu-bg: #F8F9FA;
	--submenu-bg-hover: #c8c8c8;
	--submenu-font-color: #000;
}

/* RESET */
@layer reset {
	html {
		box-sizing: border-box;
	}
	*, *:before, *:after {
		box-sizing: inherit;
	}
	body, h1, h2, h3, h4, h5, h6, p, ol, ul {
		margin: 0;
		padding: 0;
		font-size: var(--font-size);
		font-weight: normal;
	}
	p, li, figcaption {
		text-wrap: pretty;
	}
	ol, ul {
		line-height: 1.4;
		margin-left: 3rem;
		margin-bottom: 1rem;
	}
	img {
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
	}
	figcaption {
		font-size: 90%;
		color: #777;
		margin-top: 0;
		margin-bottom: 0.5rem;
	}
}

 /* Ajuste les tags selon mes besoins */
 @layer defaults {
	body {
		font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", System-ui, Helvetica, Arial, sans-serif;
		background-color: #FFF;
		line-height: var(--line-height);
		color: #000;
	}
	h1, h2, h3, h4, h5, h6 {
		font-weight: 300;
		margin-bottom: 1.5rem;
		line-height: 1.1;
		text-wrap: balance;
	}

	h1 {font-size: 2.0rem;}
	h2 {font-size: 1.9rem;}
	h3 {font-size: 1.7rem;}
	h4 {font-size: 1.5rem;}
	h5 {font-size: 1.3rem;}
	h6 {font-size: 1.1rem;}

	p, a {
		font-size: var(--font-size);
		font-weight: 400;
		margin-bottom: 1rem;
	}
	a, a:hover {
		color: var(--link);
		text-decoration: none;
	}
	a > i {
		color: #000;
	}
	hr {
		height: 0;
		margin: 1rem 0;
		overflow: hidden;
		border-top: 1px solid rgba(0, 0, 0, 0.175);
		opacity: 0.5;
	}
	q {
		font-size: 110%;
		color: #333;
		font-style: italic;
		letter-spacing: 1px;
	}
}

/* Titre, container et footer  */
@layer components {
	.title-bar {
		display: grid;
		grid-template-columns: repeat(3, auto);
		background-color: #333;
		color: #FFF;
		text-align: center;
		padding: 1rem 0;
	}

	/* Container */
	.container {
		width: 94%;
		min-width: 320px;
		max-width: 1300px;
		margin: 0 auto;
	}
	.container-full {
		width: 94%;
		margin: 0 auto;
	}

	footer {
		background-color: var(--bg-footer);
		color: #666;
		text-align: center;
		padding: 30px 0;
		margin-top: 80px;
	}
}

/* Utilitaires de texte */
@layer utilities {
	.text-left {
		text-align: left;
	}
	.text-center {
		text-align: center;
	}
	.text-right {
		text-align: right;
	}
	.text-uppercase {
		text-transform: uppercase;
	}
	.text-nowrap {
		text-wrap: nowrap;
	}
	.required::before {
		content: "* ";
		color: red;
	}

	/* Frame */
	.frame {
		padding: 1rem;
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
	}

	/* Cards (voir Grid ci-dessous pour la classe Cards) */
	.card {
		background-color: #FFF;
		color: #000;
		padding: 1rem;
		border: 1px solid #DDD;
		border-radius: 5px;
		display: flex;
		flex: 1 1 0;
		flex-direction: column;
		min-width: 200px;
	}
	.card-body {
		flex: 1;
	}

	/* Grid/Cards system - based on 12 columns */
	.grid, .cards {
		display: grid;
		gap: 1rem;
		overflow-x: auto;
	}
	.grid-col-auto {
		grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	}
	.grid-col-2, .grid-col-3-3 {
		grid-template-columns: repeat(2, minmax(25px, 1fr));
	}
	.grid-col-3 {
		grid-template-columns: repeat(3, minmax(25px, 1fr));
	}
	.grid-col-4 {
		grid-template-columns: repeat(4, minmax(25px, 1fr));
	}
	.grid-col-5 {
		grid-template-columns: repeat(5, minmax(25px, 1fr));
	}
	.grid-col-6 {
		grid-template-columns: repeat(6, minmax(25px, 1fr));
	}
	.grid-col-7 {
		grid-template-columns: repeat(7, minmax(25px, 1fr));
	}
	.grid-col-8 {
		grid-template-columns: repeat(8, minmax(25px, 1fr));
	}
	.grid-col-9 {
		grid-template-columns: repeat(9, minmax(25px, 1fr));
	}
	.grid-col-10 {
		grid-template-columns: repeat(10, minmax(25px, 1fr));
	}
	.grid-col-11 {
		grid-template-columns: repeat(11, minmax(25px, 1fr));
	}
	.grid-col-12 {
		grid-template-columns: repeat(12, minmax(25px, 1fr));
	}
	/* colonnes span */
	.grid-span-2 {
		grid-column: span 2;
	}
	.grid-span-3 {
		grid-column: span 3;
	}
	.grid-span-4 {
		grid-column: span 4;
	}
	.grid-span-5 {
		grid-column: span 5;
	}
	.grid-span-6 {
		grid-column: span 6;
	}
	.grid-span-7 {
		grid-column: span 7;
	}
	.grid-span-8 {
		grid-column: span 8;
	}
	.grid-span-9 {
		grid-column: span 9;
	}
	.grid-span-10 {
		grid-column: span 10;
	}
	.grid-span-11 {
		grid-column: span 11;
	}
	/* Grid gaps */
	.gap-1, .grid-gap-1 {
		gap: 1rem;
	}
	.gap-2, .grid-gap-2 {
		gap: 2rem;
	}
	.gap-3, .grid-gap-3 {
		gap: 3rem;
	}
	.gap-4, .grid-gap-4 {
		gap: 4rem;
	}

	@media only screen and (max-width: 600px) {
		.grid-col-2, .grid-col-3, .grid-col-4, .grid-col-5, .grid-col-6,
		.grid-col-7, .grid-col-8, .grid-col-9, .grid-col-10, .grid-col-11, .grid-col-12 {
			grid-template-columns: auto;
		}
		.grid-span-2, .grid-span-3, .grid-span-4, .grid-span-5, .grid-span-6,
		.grid-span-7, .grid-span-8, .grid-span-9, .grid-span-10, .grid-span-11 {
			grid-column: span 1;
		}
	 }

	/* Borders */
	.border, .border-top {
		border-top: 1px solid var(--border-color);
	}
	.border, .border-right {
		border-right: 1px solid var(--border-color);
	}
	.border, .border-bottom {
		border-bottom: 1px solid var(--border-color);
	}
	.border, .border-left {
		border-left: 1px solid var(--border-color);
	}
	.border-radius {
		border-radius: var(--border-radius);
	}

	/* Tout ce qui touche les tables */
	caption {
		font-size: 120%;
		font-weight: 500;
		margin-bottom: 0.75rem;
	}
	/* .table-container {
		text-wrap: nowrap;
	} */
	@media only screen and (max-width: 800px) {
		.table-container {
			width: 100%;
			overflow: auto;
			/* text-wrap: nowrap; */
		}
	}
	table {
		min-width: 800px;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	table, thead, tbody {
		width: 100%;
	}
	table, th, td {
		border-bottom: 1px solid #DEE2E6;
		border-collapse: collapse;
	}
	th, td {
		padding: 12px 8px;
		text-align: left;
	}
	th {
		cursor: pointer;
	}
	.table-bordered table, .table-bordered th, .table-bordered td {
		border: 1px solid #c8c8c8;
	}
	.table-no-border table, .table-no-border th, .table-no-border td {
		border: none;
	}
	.table-roomy th, .table-roomy td {
		padding: 20px 8px;
	}
	.table-separator th, .table-separator td {
		border-bottom: 2px solid #212529;
	}
	.table-scrollable {
		table-layout: fixed;
	}

	/* Pour TSmartTable */
	.st-selected {
		background-color: #F9F9F9;
	}
	.st-sortedUp::after {
		content: " \2191";
	}
	.st-sortedDown::after {
		content: " \2193";
	}
	.st-align-left {
		text-align: left;
	}
	.st-align-center {
		text-align: center;
	}
	.st-align-right {
		text-align: right;
	}
	.st-currency::after {
		content: " $";
	}
	.st-string, .st-currency, .st-number, .st-date {
		font-family: Arial;
	}

	/* Alert system */
	.alert-note, .alert-warning, .alert-danger, .alert-neutral {
		padding: 16px 16px;
		border-radius: var(--border-radius);
		margin: 1.5rem 0;
	}
	.alert-note {
		color:  #0f5132;
		background-color: #d1e7dd;
		border: 1px solid #badbcc;
	}
	.alert-warning {
		color: #664d03;
		background-color: #fff3cd;
		border: 1px solid  #ffecb5;
	}
	.alert-danger {
		color: #842029;
		background-color: #f8d7da;
		border: 1px solid  #f5c2c7;
	}
	.alert-neutral {
		color: #000;
		background-color: #F9F9F9;
		border: 1px solid  #DDD;
	}
}

/* INPUT SYSTEM */
@layer inputs {
	/* Paires label et controle adaptative */
	form {
		container-name: form-container;
		container-type: inline-size;
	}
	.input-vert {
		width: minmax(200px, 100%);
		margin-bottom: 1rem;

		& label {
			text-align: left;
			margin-top: 0;
			margin-bottom: 0.5rem;
		}
	}
	.input-horz {
		display: grid;
		margin-bottom: 1rem;
		grid-template-columns: minmax(100px, 300px) minmax(100px, 700px);
		align-items: center;
		gap: 1rem;

		& label {
			margin-top: 0;
			margin-bottom: 0;
			text-align: right;
		}
	}
	@container form-container (width < 600px) {
		.input-horz {
			grid-template-columns: 1fr;
			gap: 0rem;
			margin-bottom: 1rem;

			& label {
				text-align: left;
				margin-top: 0;
				margin-bottom: 0.5rem;
			}
		}
	}
	/* Form */
	fieldset {
		padding: 1rem 1.5rem;
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
	}
	legend {
		font-size: 110%;
		padding: 0 8px;
	}
	label {
		display: block;
		font-weight: 600;
		margin: 0.75rem 0;
	}
	/* Boutons */
	.button,	button, input[type="submit"],	input[type="reset"],	input[type="button"] {
		display: inline-block;
		line-height: inherit;
		font-size: var(--font-size);
		padding: 4px 16px;
		color: #555;
		text-align: center;
		font-weight: 600;
		text-decoration: none;
		white-space: nowrap;
		background-color: #F8F8F8;
		border-radius: var(--border-radius);
		border: 1px solid #bbb;
		cursor: pointer;
	}
	.button:hover,	button:hover, input[type="submit"]:hover, input[type="reset"]:hover,	input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
		color: #333;
		border-color: #888;
		outline: 0;
	}
	.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
		color: #FFF;
		background-color: #33C3F0;
		border-color: #33C3F0;
	}
	.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover,
	.button.button-primary:focus, button.button-primary:focus,	input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus {
		color: #FFF;
		background-color: #1EAEDB;
		border-color: #1EAEDB;
	}
	.button > a, button > a, input[type="submit"] > a, input[type="reset"] > a,  input[type="button"]  > a {
		font-weight: 600;
		color: #555;
	}
	/* Inputs */
	textarea {
		padding-top: 8px;
		padding-bottom: 8px;
		resize: vertical;
		min-height: 8rem;
		line-height: 1.3;
	}

	input[type="email"], input[type="number"], input[type="date"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
		font-size: var(--font-size);
		width: 100%;
		padding: 8px 10px;
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		background-color: #FFF;
	}
	/* Removes awkward default styles on some inputs for iOS */
	input[type="email"], input[type="number"], input[type="date"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {
	  -webkit-appearance: none;
		  -moz-appearance: none;
				 appearance: none;
	}
	input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
	  border: 1px solid #33C3F0;
	  outline: 0;
	}
	input[type="email"]:disabled, input[type="number"]:disabled, input[type="date"]:disabled, input[type="search"]:disabled, input[type="text"]:disabled, input[type="tel"]:disabled, input[type="url"]:disabled, input[type="password"]:disabled, textarea:disabled, select:disabled {
		background: #d9d9d9;
		color: #888;
	}
	select {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: right 0.75rem center;
		background-size: 16px 12px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	input:required, textarea:required, select:required {
		/* background-color: #fffbee; */
		border-color: #ebb969;
	}

	/* Chrome, Safari, Edge, Opera */
	input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	/* Firefox */
	input[type=number] {
		appearance: none;
		-moz-appearance: textfield;
	}
	input[type="file"] {
		font-size: var(--font-size);
	}
	input[type="file"]::selection {
		background-color:transparent;
	}
	input[type="file"]::file-selector-button {
		font-size: var(--font-size);
		border: 1px solid var(--border-color);
		border-radius: var(--border-radius);
		padding: 8px 10px;
		background-color: #FFF;
		cursor: pointer;
	}
	/* Checkbox */
	.checkbox-group {
		margin-bottom: 1.25rem;
	}
	.checkbox-group label {
		display: inline;
	}
	input[type='checkbox'] {
		transform: scale(1.4);
		margin-left: 8px;
		margin-right: 16px;
	}

	/* Radio */
	.radio-group {
		display: flex;
		gap: 0.5rem;
		flex-wrap: wrap;
		margin-bottom: 1.25rem;
	}
	input[type=radio] {
		display: none;
	}
	input[type=radio] + label {
		margin: 0 4px;
		cursor: pointer;
		display: inline-block;
		font-size: var(--font-size);
		font-weight: normal;
		padding: 4px 8px;
		border: 1px solid #bbb;
		border-radius: var(--border-radius);
		background-color: #FFF;
	}
	input[type=radio] + label:hover {
		border-color: #888;
		outline: 0;
	}
	input[type=radio]:checked + label {
		border: 1px solid #0962e0;
		background-color: #CCC;
	}
}

/* Tailles des inputs */
@layer sizes {
	.size-xs {
		width: 100px;
	}
	.size-zip {
		width: 125px;
	}
	.size-s, .size-date {
		width: 150px;
	}
	.size-phone, .size-number {
		width: 200px;
	}
	.size-m {
		width: 250px;
	}
	.size-l {
		width: 350px;
	}
	.size-xl {
		width: 400px;
	}
}

/* Tailles des inputs */
@layer spacing {
	/* Marges et Padding */
	.mx-auto {
		margin-left: auto;
		margin-right: auto;
	}
	.m-0 {
		margin: 0;
	}
	.mt-05, .my-05 {
		margin-top: 0.5rem;
	}
	.mt-1, .my-1 {
		margin-top: 1rem;
	}
	.mt-2, .my-2 {
		margin-top: 2rem;
	}
	.mt-3, .my-3 {
		margin-top: 3rem;
	}
	.mb-1, .my-1 {
		margin-bottom: 1rem;
	}
	.mb-2, .my-2 {
		margin-bottom: 2rem;
	}
	.mb-3, .my-3 {
		margin-bottom: 3rem;
	}
	.ml-1, .mx-1 {
		margin-left: 1rem;
	}
	.ml-2, .mx-2 {
		margin-left: 2rem;
	}
	.ml-3, .mx-3 {
		margin-left: 3rem;
	}
	.mr-1, .mx-1 {
		margin-right: 1rem;
	}
	.mr-2, .mx-2 {
		margin-right: 2rem;
	}
	.mr-3, .mx-3 {
		margin-right: 3rem;
	}

	.p-0 {
		padding: 0;
	}
	.p-1 {
		padding: 1rem;
	}
	.p-2 {
		padding: 2rem;
	}
	.pt-1, .py-1 {
		padding-top: 1rem;
	}
	.pt-2, .py-2 {
		padding-top: 2rem;
	}
	.pt-3, .py-3 {
		padding-top: 3rem;
	}
	.pb-1, .py-1 {
		padding-bottom: 1rem;
	}
	.pb-2, .py-2 {
		padding-bottom: 2rem;
	}
	.pb-3, .py-3 {
		padding-bottom: 3rem;
	}
	.pl-1, .px-1 {
		padding-left: 1rem;
	}
	.pl-2, .px-2 {
		padding-left: 2rem;
	}
	.pl-3, .px-3 {
		padding-left: 3rem;
	}
	.pr-1, .px-1 {
		padding-right: 1rem;
	}
	.pr-2, .px-2 {
		padding-right: 2rem;
	}
	.pr-3, .px-3 {
		padding-right: 3rem;
	}

	/* Classes utilitaires générales */
	.flex {
		display: flex;
	}
	.flex-wrap {
		flex-wrap: wrap;
	}
	.flex-nowrap {
		flex-wrap: nowrap;
	}
	.block {
		display: block;
	}
	.inline {
		display: inline;
	}
	.inline-block {
		display: inline-block;
	}
	.hidden {
		display: none;
	}
	.no-list, .list-unstyled {
		list-style: none;
		padding-left: 0;
		margin-left: 0;
	}
	.scrollable {
		overflow: auto;
	}
}