/* Style général pour le corps de la page */
body {
    background-color: #0060a8; /* Remplacement du fond vert par le bleu */
    color: #000; /* Couleur du texte en noir */
    font-family: "DIN Next", Arial, Helvetica, sans-serif; /*Arial, sans-serif; */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*
    height: 100vh;
    */
    min-height: 100vh;
    width: auto;
}


	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer/afficher les éléments  */

	.u-mobile {          
        display: block;          
        display: revert !important; /* affichage des éléments */        
    }        
    .u-no-mobile {          
        display: none !important; /* masquage des éléments */        }
	
	/* Un message personnalisé */

	body:before {
		/* content: "Version mobile du site"; */
		display: block;
		text-align: center;
		font-style: italic;
		color: #777;
	}


/* Style pour le conteneur principal */
.container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 400px;
    width: calc(100% - 40px); /* 20px de chaque côté */
    box-sizing: border-box;
    text-align: center;
    margin: 0 20px; /* Marges de 20px à droite et à gauche */
}

/* Style pour le titre h2 */
h2 {
    font-size: 50px; /* Augmentation de la taille du titre */
    margin-bottom: 20px;
    padding: 50px;
    text-align: center;
}

/* Style pour les paragraphes de succès et d'erreur */
.success {
    color: rgb(4, 83, 4);
    font-weight: bold;
}

.error {
    background-color: rgb(180, 180, 74);
    padding: 10px;
    text-align: center;
    color: rgb(109, 56, 56);
    font-weight: bold;
}

/* Style pour le formulaire */
form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Style pour les labels */
label {
    font-size: 50px;
    margin-bottom: 5px;
}
div[type="debut"] {
    padding: 10px;
    border: 5px solid #f07171;
    border-radius: 25px;
    font-size: 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;   
}
div[type="suite"] {
    padding: 10px;
    border: 3px solid #fff;
    border-radius: 25px;
    font-size: 50px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;   
}
div[type="info"] {
    text-align: center; 
    font-size: 20px;
    color: #fff;
    padding: 10px;

}
/* Style pour les champs de formulaire */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 25px;
    font-size: 50px;
    width: 100%;
    box-sizing: border-box;
}

/* Style pour le bouton de soumission */
button[type="submit"],
button[type="onclic"] {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 25px;
    font-size: 50px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


button[type="submit"]:hover {
    background-color: #333;
}

/* Style pour les liens */
a {
    color: #fff; /* Couleur des liens */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


table {
    width: 90%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 50px;
    width: 100%;
    box-sizing: border-box;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 10px;
    text-align: center;            
    border: 1px solid #ddd;
    padding: 8px;
    width: 50%;
    box-sizing: border-box;
    word-wrap: break-word;
    font-size: 50px;
}

th,tr {
    background-color: #0060a8;
    color: white;
}


button:hover {
    background-color: #004080;
}

.scrollable {
    height: 300px; /* Définir la hauteur du conteneur */
    overflow-y: scroll; /* Activer le défilement vertical */
    border: 1px solid #ccc; /* Optionnel : ajouter une bordure pour voir les limites */
}

@media (max-width: 640px) {}
	* {
		box-sizing: border-box;
	}
@media (max-device-width:768px) and (orientation: landscape) {
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    }

.narrow {
    white-space: nowrap;
}
.data-table-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.message-ribbon {
    background-color: yellow;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

.spacer {
    height: 20px; /* Définit la hauteur de l'espaceur */
}