/* css/global.css */

/* Variables pour les couleurs */
:root {
	--color-background: hsl(0, 0%, 100%);
	--color-text: hsl(0, 0%, 0%);
	--color-link-dark: hsl(0, 0%, 0%);
	--color-link-light: hsl(0, 0%, 100%);
	--color-border: hsl(0, 0%, 50%);
	--color-border-dark: hsl(0, 0%, 0%);
	--color-shadow-dark: hsl(0, 0%, 0%);
	--color-button-bg: transparent;
	--color-button-bg-hover: hsl(0, 0%, 85%);
	--color-button-text: hsl(0, 0%, 50%);
	--color-button-text-hover: hsl(0, 0%, 25%);
	--color-button-shadow: hsl(0, 0%, 0%);
	--color-danger-bg: hsl(0, 100%, 80%);
	--color-danger-text: hsl(0, 100%, 15%);
	--color-danger-bg-hover: hsl(0, 100%, 50%);
	--color-alert-bg: hsl(60, 100%, 80%);
	--color-alert-text: hsl(60, 100%, 15%);
	--color-alert-bg-hover: hsl(60, 100%, 50%);
	--color-success-bg: hsl(120, 100%, 80%);
	--color-success-text: hsl(120, 100%, 15%);
	--color-success-bg-hover: hsl(120, 100%, 50%);
	--color-edit-bg: hsl(220, 100%, 80%);
	--color-edit-text: hsl(220, 100%, 15%);
	--color-edit-bg-hover: hsl(220, 100%, 50%);
	--color-dark-bg: hsl(0, 0%, 25%);
	--color-dark-text: hsl(0, 0%, 95%);
	--color-grey-text: hsl(0, 0%, 50%);
	--color-lightgrey-text: hsl(0, 0%, 65%);
	--color-light-text: hsl(0, 0%, 95%);
	--color-grey-background: hsl(0, 0%, 95%);
	--font-family-space-mono: "Space Mono", monospace;
	--font-weight-regular: 400;
	--font-weight-bold: 700;
	--font-style-normal: normal;
	--font-style-italic: italic;
}



body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}


body {
    font-family: Arial, sans-serif;
    background-color: var(--color-background);
    color: var(--color-text);
}

h1{margin-top: 0}

.button, button {
    display: inline-block;
    padding: 5px 10px;
    margin: 0;
    text-decoration: none;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    border: 1px solid var(--color-border);
	font-size: 1em;
	font-family: var(--font-family-space-mono);
	font-weight: bold;
}

.button:hover, button:hover {
    background-color: var(--color-button-bg-hover);
    box-shadow: 4px 4px var(--color-button-shadow);
    color: var(--color-button-text-hover);
    cursor: pointer;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.full-width {
    width: 100%;
    display: block;
    box-sizing: border-box;
}

p {
    margin: 0 0 0.5em 0;
    padding: 0;
}

p.danger, p.alert, p.edit, p.success {
	padding: 0.5em;
}

.danger {
    background-color: var(--color-danger-bg) !important;
    color: var(--color-danger-text) !important;
}

.danger span {
    color: var(--color-danger-text);
    font-weight: bold;
}

.button.danger:hover,
button.danger:hover {
    background-color: var(--color-danger-bg-hover);
    box-shadow: 4px 4px var(--color-danger-text);
}

.alert {
    background-color: var(--color-alert-bg) !important;
    color: var(--color-alert-text) !important;
}

.alert span {
    color: var(--color-alert-text);
    font-weight: bold;
}

.button.alert:hover,
button.alert:hover {
    background-color: var(--color-alert-bg-hover);
    box-shadow: 4px 4px var(--color-alert-text);
}

.success {
    background-color: var(--color-success-bg) !important;
    color: var(--color-success-text) !important;
}

.success span {
    color: var(--color-success-text);
    font-weight: bold;
}

.success span,
.success-text {
    color: var(--color-success-bg);
    font-weight: bold;
}

.button.success:hover,
button.success:hover {
    background-color: var(--color-success-bg-hover);
    box-shadow: 4px 4px var(--color-success-text);
}

.edit {
    background-color: var(--color-edit-bg) !important;
    color: var(--color-edit-text) !important;
}

.edit span {
    color: var(--color-edit-text);
    font-weight: bold;
}

.button.edit:hover,
button.edit:hover {
    background-color: var(--color-edit-bg-hover);
    box-shadow: 4px 4px var(--color-edit-text);
}

.no-shadow:hover{
    box-shadow: none;
}

.dark {
    background: var(--color-dark-bg);
    color: var(--color-dark-text);
}

.button.fixed-bottom-right {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.button.fixed-top-left {
    position: fixed;
    top: 20px;
    left: 20px;
}

.button.primary {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-border);
}

.button.primary:hover {
    background-color: var(--color-success-bg-hover);
    color: var(--color-success-text);
    box-shadow: 4px 4px var(--color-success-text);
}


.show-password {
	width: 33px; /* Définir la largeur du bouton pour qu'il soit carré */
	height: 33px; /* Définir la hauteur du bouton pour qu'il soit carré */
	border: none !important; /* Supprimer les bordures par défaut */
	cursor: pointer; /* Changer le curseur pour indiquer qu'il est cliquable */
	background: url('../icons/hide.svg') no-repeat center center; /* Ajouter l'image SVG en arrière-plan */
	background-size: contain; /* Supprimer l'arrière-plan par défaut */
}

.show-password.hide-password{
	background-image: url('../icons/show.svg');
}

.visually-hidden {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.align-center {
    text-align: center;
}

/* Styles des formulaires */

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-group {
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
}

.form-group input {
    padding: 8px;
    border: 1px solid var(--color-border);
    width: 100%;
    box-sizing: border-box;
}

/* Chrome, Firefox, Opera, Safari */
input::placeholder {
    color: var(--color-light-text); /* Définir la couleur du placeholder */
    opacity: 1;  /* Pour certains navigateurs, l'opacité est par défaut plus faible */
}

/* Internet Explorer 10-11 */
input:-ms-input-placeholder {
    color: var(--color-lightgrey-text);
}

/* Microsoft Edge */
input::-ms-input-placeholder {
    color: var(--color-lightgrey-text);
}

/* Pour améliorer l'accessibilité */
input::placeholder {
    color: var(--color-lightgrey-text);
    opacity: 1;
}


@media (min-width: 768px) {
    .form {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .form-group {
        flex-direction: row;
        align-items: center;
        margin: 8px 16px;
        width: auto;
    }

    .form-group label {
        margin-bottom: 0;
        margin-right: 8px;
        width: auto;
    }

    .form-group input {
        width: auto;
    }
}

.no-border {
	border: none !important;
}

ol li,
ol.list-number li {list-style-type: number;}

.circle2 {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: transparent;
	text-align: center;
	line-height: inherit;
    font-size: inherit;
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.circle {
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    text-align: center;
    line-height: inherit;
    font-size: inherit;
    border: 1px solid var(--color-border);
    align-items: center;
    justify-content: center;
    margin-left: 5px; /* Ajustez la marge pour un espacement correct */
}

.popup.help {
	cursor: help;
}


.popup-box {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--color-background);
	padding: 20px;
    border: 1px solid var(--color-border);
    box-shadow: 4px 4px var(--color-button-shadow);
    box-sizing: border-box;
	z-index: 1000;
}
.close-popup {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	font-size: 20px;
}


#loadingMessage {
    display: none;
    text-align: center;
}

.loader {
    border: 16px solid var(--color-success-bg);
    border-radius: 50%;
    border-top: 16px solid var(--color-success-text);
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}