/* CSS Document */

body
{
	margin:0px;
	background-color:var(--bg-body);
	/*color:var(--body-color);*//*#1f1c1e;*/
	font-family:"Arial", "sans-serif";
	
	display:flex;
	flex-direction:column;
	gap:8px;

	min-height:100vh;
}
.header
{
	display:block;
	margin:0px;
	
	padding:5px 10px;/*10px 10px;*/
	box-sizing:border-box;

	background:var(--bg-header);
	
	width:100%;
}
.p_font
{
	margin:0px;
	margin-top:5px;
	padding:0px;
	text-align:left;
	color:white;
	font-familiy:sans-serif;
	font-weight:normal;
	font-size:15px;
}
.content
{
	margin:0px auto;
	max-width:750px;
	width:100%;
	
	padding:10px;
	box-sizing:border-box;
	
	background-color:var(--bg-form);
	border:1px solid #eee;
	color:#1f1c1e;
	font-family:"Arial", "sans-serif";
	
	display:flex;
	flex-direction:column;
}
h1
{
	margin:0px auto;/*5px auto;*/
	padding:0px;
	
	max-width:750px;
	
	font-size:30px;
	font-weight:bold;
	color:white;
	
	line-height:17px; 
}
h2
{
	margin:5px auto;
	max-width:750px;
	
	font-size:20px;/*22px;*/
	font-weight:bold;
	color:white;
}
.new_h2
{
	display:block;
	width:100%;
	padding:10px;
	box-sizing:border-box;
	font-size:20px;
	font-weight:bold;
	color:white;
	border:1px solid white;
	background-color:var(--bg-footer);
}

table, tr, td
{
	margin:0px;
	padding:0px;
}

.copywrite
{
	font-size:32px;
	color:white;
	vertical-align:middle;
	font-weight:normal;
}
.proprietaire
{
	font-size:15px;
	color:white;
	vertical-align:middle;
	font-weight:normal;
}

form
{
	margin:0px auto;
	max-width:750px;
	width:100%;
	
	padding:10px;
	box-sizing:border-box;
	
	background-color:var(--bg-form);
	border:1px solid #eee;
	color:#1f1c1e;
	font-family:"Arial", "sans-serif";
	
	display:flex;
	flex-direction:column;
}
h3
{
	margin:0px;
	margin-bottom:10px;
	padding:5px;
	box-sizing:border-box;
	
	font-size:17px;
	font-weight:bold;
	color:white;/*#1f1c1e;*/
	border:1px solid white;/*#1f1c1e;*/
	background-color:var(--bg-footer);
	text-align:center;
}

.p_suppr
{
	margin:0px auto;
	max-width:750px;
	width:100%;
	color:var(--bg-footer);
}
.attention
{
	color:var(--bg-footer);
}

.selectBox 
{
	width:100%;
	height:30px;
	box-sizing:border-box;
	
	border:1px solid #ccc;
	border-radius:7px;
	font-size:15px;
	color:var(--type-text-color);
}
.selectBox:focus
{
	outline:solid 1px var(--type-text-outline);
}

label 
{
    margin-top:7px;
	margin-bottom:3px;
	font-size:15px;
	color:#1f1c1e88;
}
.p_label 
{
    margin-top:7px;
	margin-bottom:3px;
	font-size:15px;
	color:#1f1c1e88;
	text-align:justify;
}

input[type=text], input[type=password], input[type=date], input[type=tel], input[type=email], select
{
    padding:4px;
    border:1px solid #ccc;
    border-radius:7px;
	font-size:15px;
	color:var(--type-text-color);
}
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=tel]:focus, 
input[type=date]:focus, 
select:focus
{
	outline:solid 1px var(--bg-footer);/*var(--type-text-outline);*/
}

input[type=submit]
{
    margin:8px 0px;
    border:1px solid var(--bg-button-border);
	color:var(--bg-button-border);/*#C02117;*/
	
	background-color:var(--bg-body);
	
	padding:8px;
}
input[type=submit]:hover
{
	background-color:var(--bg-button-hover); 
	color:White;
}

/* A HREF TYPE BOUTON */
.a_submit
{
	text-decoration:none;
	text-align:center;
	
    margin:8px 0px;
    border:1px solid var(--bg-button-border);
	color:var(--bg-button-border);/*#C02117;*/
	
	background-color:var(--bg-body);
	
	padding:8px;
}
.a_submit:hover
{
	background-color:var(--bg-button-hover); 
	color:White;
}

/*input[type=checkbox]
{
	width:20px;
	height:20px;
	background-color:red;
}*/

/* Container pour l'input et la case personnalisée */
.checkbox-container 
{
	margin-bottom:10px;
	
	display:flex;
	flex-direction:row;
	gap:5px;
	align-items:center;/*centrage vertical*/
	/*justify-content:center;*//*centrage horizontal*/
	
	/*background-color:var(--bg-form);*/	
		
            /*display: inline-block;
            position: relative;*/
	cursor: pointer;
            /*font-size: 22px;*/
            /*line-height: 22px;*/
	user-select: none; /* Empêche la sélection de texte */
	
	box-sizing:border-box;
}


/*==================================================*//* DEBUT CHECKBOX CUSTOMIZATION */
/* dans le code proposé par ChatGPT, j'ai remplacé 
input[type="checkbox"] par 
.checkbox
*/
/* Masquer la case à cocher originale */
.checkbox 
{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Case personnalisée */
.custom-checkbox 
{
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	background-color: white;
	border: 2px solid #ccc;
	border-radius: 4px;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Changer le style lorsque la case est cochée */
.checkbox:checked + .custom-checkbox 
{
	background-color:var(--bg-button-hover);/* red;*/
	border-color:var(--bg-button-hover);/* red;*/
}

/* Facultatif : Ajouter une coche */
.custom-checkbox::after 
{
	content: "";
	position: absolute;
	display: none;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Afficher la coche lorsque l'entrée est cochée */
.checkbox:checked + .custom-checkbox::after 
{
	display: block;
}

/* Supprimer le style de focus par défaut */
.checkbox-container .checkbox:focus + .custom-checkbox 
{
	outline: none;
}
/*==================================================*//* FIN CHECKBOX CUSTOMIZATION */

.footer
{
	display:block;
	margin:0px;
	margin-top:auto;
	/* toujours en bas de page fonctionne avec body => min-height:100vh; */
	
	padding:5px 5px;/*10px 10px;*/
	box-sizing:border-box;
	
	background-color:var(--bg-footer);
	width:100%;
}