@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Montserrat:wght@400;700&display=swap');

:root {
	/* Couleurs accentuation */
	--couleur-accent-1: #F8BA35;
	--couleur-accent-2: #628BC2;
	--couleur-accent-3: #818F6A;
	--couleur-danger: #be322d;
	--couleur-accepter: #24aa57;
	
	/* Couleurs éléments */
	--container-fond: white;
	--input-fond: #eceee9;
	--input-contour: #eceee9;
	--placeholder:#949690;
	--texte-sombre:black;
	--texte-clair:white;
	--focus:#848c6c;
	--rayon-bordure: 0.45rem;
	--separateur: #C3C3C3;

	/* Polices */
	--police-titres: 'Caveat Brush', cursive;
	--police-corps: 'Montserrat', sans-serif;
}

/* Styles généraux */
*{
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
	box-sizing: border-box;
}

::selection {
	background: var(--couleur-accent-1);
	color: var(--texte-clair);
}

html {
    font-size: 0.9rem; /* Taille globale */
}


body, input, select, textarea {
	font-family: var(--police-corps);
	font-size: 1rem;
	color: var(--texte-sombre);
	margin: 0;
	padding: 0;
}

a {
	color: var(--texte-sombre);
	text-decoration: none;
}

/* Soulignement par défaut au survol, sauf pour les liens de navigation */
a:hover:not(.navbar a):not(.nav-item a) { text-decoration: underline; }
a.centre { text-align: center; }

legend {
	font-size: 1.125rem;
	font-weight: 700;
	padding: 0 8px 0 8px;
	margin-bottom: 4px;
}

h1 {
	color: var(--couleur-accent-1);
	font-family: var(--police-titres);
	font-size: clamp(2.5rem,6vw,4.2rem);
	font-weight: 700;
	text-align: center;
	margin: 0;
}

/* Pointillés sous le titre */
h1::after {
	content: '';
	width: 100%;
	margin: 0.8rem 0 0.8rem 0;
	display: block;
	background: radial-gradient(var(--separateur) 15%, transparent 16%), radial-gradient(var(--separateur) 15%, transparent 16%);
	background-size: 15px 15px;
	height: 25px;
	position: relative;
	left: -4px;
}



h2 {
	font-size: clamp(0.75rem,5vw,1.5rem);
	font-weight: 700;
	margin: 0;
}

p {
	line-height: 24px;
	text-align: justify;
	
	/* permet les césures */
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Champs */
select, input, search, textarea {
	min-width: 200px; 
	width: 100%;
	padding: 0.75rem;
	border: none;
	border-radius: var(--rayon-bordure);
	background-color: var(--input-fond);
	border: none;
	cursor: pointer;
}

input[type='number'] { 
	min-width: 60px; 
	width: auto;
	flex-grow: 0;
}

/* Fieldset contenant des inputs number */
fieldset:has(input[type='number']) {
	flex: 1 1 auto;
	min-width: fit-content;
	flex-wrap: nowrap;
}

/* Select dans les fieldset avec input number */
fieldset:has(input[type='number']) select {
	min-width: 80px !important;
	width: auto;
	flex: 1 0 0;
}


textarea { 
	resize: vertical;
	white-space: pre-wrap;
	word-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto; 
}
input:placeholder-shown { border-color: var(--placeholder); }
input:not(:placeholder-shown) { color: var(--texte-sombre); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--focus); }

input:read-only, textarea:read-only, select:disabled { /*  Masque la flèche du dropdown si désactivé */
	background-image: none;
	appearance: none;
	outline: none;
	opacity: 100%;
	user-select: text; 
	cursor: text;
}

input[readonly]:not([type="text"]), input[type="datetime-local"][readonly] { pointer-events: none; }


fieldset {
	border-radius: calc(var(--rayon-bordure)* 2);
	border: 2px solid var(--input-contour);
	display: inline-flex;
	gap: 10px;
	max-width: fit-content;
	margin: 0px;
}

/* Cadenas affiché sur les champs verrouillés sauf pour les fieldset contenant des boutons radio */
fieldset:has(input:disabled):not(:has(input[type="radio"]))::after,
fieldset:has(textarea:disabled):not(:has(input[type="radio"]))::after,
fieldset:has(select[data-editmode="locked"]):not(:has(input[type="radio"]))::after {
	content: "lock";
	font-family: 'Material Symbols Rounded';
	font-size: 1.25rem;
	color: var(--placeholder);
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-60%);
}


/* Supprimer les icônes de cadenas dans le modal des détails utilisateur */
#modal-details-utilisateur fieldset:has(input:disabled)::after,
#modal-details-utilisateur fieldset:has(input[readonly])::after,
#modal-details-utilisateur fieldset:has(textarea:disabled)::after,
#modal-details-utilisateur fieldset:has(textarea[readonly])::after,
#modal-details-utilisateur fieldset:has(select:disabled)::after,
#modal-details-utilisateur fieldset:has(select[data-editmode="locked"])::after {
	display: none;
}

/* Icône lien externe sur les boutons-liens */
fieldset a {
	display: block;
	width: 100%;
	text-decoration: none;
}

fieldset a .bouton-lien {
	width: 100%;
	display: block;
	text-align: left;
}
.container-wrap fieldset:has(.bouton-lien) { min-width: clamp(270px, 30vw, 500px) }
fieldset:has(.bouton-lien)::after {
	content: "open_in_new";
	font-family: 'Material Symbols Rounded';
	font-size: 1.25rem;
	color: var(--placeholder);
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-60%);
	pointer-events: none;
}

fieldset:has(input:disabled), fieldset:has(textarea:disabled), fieldset:has(select:disabled), fieldset:has(.bouton-lien) { position: relative; }
fieldset:has(textarea:disabled) textarea, fieldset:has(input:disabled) input[type="datetime-local"], fieldset:has(.bouton-lien) input { padding-right: 40px; }

/* Style pour le sujet */
.input-sujet {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 16px 10px;
	width: 100%;
}
.input-sujet label {
	font-size: clamp(0.75rem,5vw,1.875rem);
	font-weight: 700;
	color: var(--texte-sombre);
	margin: 0 8px 0 0;
	white-space: nowrap;
}
.input-sujet input[type="text"] {
	font-size: clamp(0.75rem,5vw,1.875rem);
	font-weight: 700;
	color: var(--texte-sombre);
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	width: fit-content;
	min-width: 0px;
	border-radius: 0;
	border-bottom: 2px solid transparent;
	max-width: 60vw;
	overflow: auto;
}
.input-sujet input[type="text"]:focus:not([readonly]):not([disabled]) {
	outline: none;
	border: none;
	border-bottom: 2px solid var(--texte-sombre);
	box-shadow: none;
	background: none;
}

.input-sujet {
	position: relative;
}

.input-sujet:has(input[type="text"]:not([readonly]):not([disabled]))::after {
	content: "border_color";
	font-family: 'Material Symbols Rounded';
	margin-left: 8px;
	color: var(--texte-sombre);
	font-size: clamp(0.75rem,5vw,1.875rem);
	vertical-align: middle;
	pointer-events: none;
}

.obligatoire::after{
	content: " *";
	color: var(--couleur-danger);
}

/* champs de texte qui prend toute la largeur du container */
.champs-large {
	display: grid;
	width: 100%;
	max-width: 100%;
}

.champs-large > textarea {
	resize: none;
	overflow: hidden;
}

/* Containers */
.container-principal {
	background-color: var(--container-fond);
	box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
	border-radius: 25px;
	max-width: 1200px;
	width: 100%;
	margin: 40px auto;
	padding: clamp(10px,4vw,40px);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.container-principal.micro { max-width: 450px; }
.container-principal.mini { max-width: 550px; }
.container-principal.petit { max-width: 720px; }
.container-principal.moyen { max-width: 1000px;}
.container-principal.large { max-width: 1400px !important; }

.container-wrap {
	gap: 1.2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	align-items: stretch; /* flex-end */
}

.container-wrap.centre {
	justify-content: center;
	width: 100%;
}

/* Cache le container-wrap si tous ses enfants directs sont en display: none */
.container-wrap:has(> *:not([style*="display: none"])) { display: flex; }
.container-wrap:not(:has(> *:not([style*="display: none"]))) { display: none; }

.container-wrap > h1 { flex: 1 1 100%; }

/* .container-wrap fieldset {
	flex: 1 1 auto;
	min-width: fit-content;
	max-width: 500px;
} */

.container-wrap fieldset {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: fit-content;
	max-width: 500px;
}


.container-wrap .champs-large { max-width: 100%; }

/* Spécifique pour les groupes email/mot de passe côte à côte */
.container-wrap input[type="email"],
.container-wrap input[type="email-confirmation"] {
	flex: 1 1 220px;
	min-width: 0;
	max-width: 100%;
}

form.container-wrap { gap: 1.2rem; }

.container-vertical {
	gap: 1.2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

.container-checkboxes {
	gap: 0.2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Checkboxes */
.wrapper-checkbox {
	display: inline-flex;
	gap: 0.5rem;
	/* padding: 0.375rem; */
	padding: 0rem;
	align-items: center;
}

input[type="checkbox"] {
	appearance: none;
	border-radius: 3px;
	border: solid 2px var(--placeholder);
	position: relative;
	padding: 0.44rem;
	width: fit-content;
	min-width: fit-content;
	cursor: pointer;
}

input[type="checkbox"]::before {
	font-family: 'Material Symbols Rounded';
	font-size: 1.25rem;
	content: "check";
	color: var(--placeholder);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
}

input[type="checkbox"]:checked::before {
	display: block;
}

/* Radio buttons */
input[type="radio"] {
	appearance: none;
	border-radius: 3px;
	border: solid 2px var(--placeholder);
	position: relative;
	padding: 0.44rem;
	width: fit-content;
	min-width: fit-content;
	cursor: pointer;
	background-color: var(--input-fond);
}

input[type="radio"]::before {
	font-family: 'Material Symbols Rounded';
	font-size: 1.25rem;
	content: "check";
	color: var(--placeholder);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
}

input[type="radio"]:checked::before {
	display: block;
}

/* Labels contenant des radio buttons */
label:has(input[type="radio"]) {
	padding: 0.75rem;
	border-radius: var(--rayon-bordure);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* Fieldset contenant des radio buttons - ajustement à la largeur du contenu */
fieldset:has(input[type="radio"]) {
	width: fit-content;
	max-width: fit-content;
	min-width: fit-content;
}

/* Boutons */
button {
	align-items: center; 
	justify-content: center; 
	display:inline-flex;
	gap: 5px;
	background-color: var(--couleur-accent-1);
	color: var(--texte-clair);
	font-family: var(--police-titres);
	padding: 0.47rem 0.94rem;
	border: none;
	border-radius: 100px;
	font-size: 1.25rem;
	text-align: center;
	cursor: pointer;
	user-select: none;
	height: fit-content;
	width: fit-content;
}

button:hover { filter: hue-rotate(-10deg) brightness(1.1); }

.bouton-retour { background-color: var(--couleur-accent-2); }
.bouton-danger { background-color: var(--couleur-danger); }
.bouton-accepter { background-color: var(--couleur-accepter); }
.bouton-secondaire { background-color: var(--couleur-accent-3); }
.material-symbols-rounded { 
	font-size: 1.4rem;
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
}

/* Icônes Material Symbols dans les boutons */
button .material-symbols-rounded {
	font-size: 1.4rem;
}

/* Filtre par période */
.filtre-periode {
	display: flex;
	gap: 10px; /* pour espacer les inputs */
	flex-wrap: wrap;
}

.filtre-periode input {
	flex: 1 1 180px; /* permet à l'input de grandir et de rétrécir en respectant un minimum de 180px */
	min-width: 180px;
	width: 180px;
	box-sizing: border-box;
}

/* Barre recherche */
.barre-recherche {
	align-items: center; 
	justify-content: center;
	display: flex;
	width: 100%;
}

.barre-recherche input {
	flex: 1;
	width: auto;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	z-index: 2;
	height: 100%;
}

.barre-recherche button {
	border-radius: var(--rayon-bordure);
	background-color: var(--input-fond);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding: 0 0.625rem 0 0.625rem;
	height: 100%;
}

.barre-recherche button:hover { filter: brightness(0.9); }

.barre-recherche .material-symbols-rounded {
	color: var(--placeholder);
	font-size: 1.4rem !important;
}



.barre-recherche input::-webkit-search-cancel-button{ color: var(--placeholder); }

fieldset:has(.barre-recherche) { flex-grow: 100; }

/* Barre mot de passe */
.barre-mot-de-passe {
	align-items: stretch; 
	justify-content: center;
	display: flex;
	flex: 1 1 auto;
	min-width: 200px;
}

.barre-mot-de-passe input {
	flex: 1;
	width: auto;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	z-index: 2;
}

.barre-mot-de-passe button {
	border-radius: var(--rayon-bordure);
	background-color: var(--input-fond);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding: 0 0.625rem;
	height: auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.barre-mot-de-passe button:hover { filter: brightness(0.9); }
.barre-mot-de-passe .material-symbols-rounded { color: var(--placeholder); }

/* Messages d'erreur et d'aide */
.message-erreur {
	color: var(--couleur-danger);
	margin-top: 8px;
	font-size: 0.875rem;
}

.message-aide {
	font-size: 0.75rem;
	color: var(--placeholder);
	margin-top: 5px;
}

@media screen and (max-width: 1200px) { 
	.container-principal { box-shadow: none; }
	.input-sujet { margin: 0px; }
}

@media screen and (min-width: 1200px) {
	main {
		padding: 0px 15px 0px 15px;
		box-sizing: border-box;
	}
}

/* Animation pour les icônes en cours de chargement */
.en-cours-chargement .material-symbols-rounded {
	animation: rotation 1s linear infinite;
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* Curseur de chargement pour les interactions utilisateur */
.cursor-loading {
	cursor: wait !important;
}

.cursor-loading * {
	cursor: wait !important;
}