.bloc-champ-edition {
		border-bottom: 1px solid #ccc; /* Remplace le <hr> */
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
	.bloc-first-edition {
		border-bottom: 1px solid #ccc; /* Remplace le <hr> */
		padding-bottom: 15px;
		margin-bottom: 15px;
	}

	/* Optionnel : pour ne pas mettre de ligne sous le tout dernier champ de la section */
	.bloc-champ-edition:last-of-type {
		border-bottom: none;
	}

	.box {
	  display: grid;
	  grid-template-columns: repeat(auto-fill,minmax(220px, 1fr));
	}
	#container_section {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
		grid-gap: 30px;
		justify-content: center; 
		justify-items: center; 
		
		margin: 20px auto;
		width: 100%; /* On passe à 100% */
		
		/* On force une marge interne à gauche et à droite */
		padding-left: 20px;
		padding-right: 20px;
		
		/* Sécurité pour que le padding ne fasse pas dépasser le container de l'écran */
		box-sizing: border-box; 
		max-width: 1600px; 
	}
	#container_section h1 {
		grid-column: 1 / -1;
		width: 100%;
		text-align: center;
	}
	/* État initial caché */
	.modal {
		display: none; 
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5); /* Fond semi-transparent */
	}

	/* L'état que ton JS déclenche */
	.modal.show {
		display: block !important;
	}
	/* --- Fenêtre de la modale --- */
	.modal-content {
		background-color: white;
		max-width: 450px;
		margin: 10vh auto; /* Donne un peu d'air par rapport au haut de l'écran */
		position: relative;
		border-radius: 8px; /* Angles arrondis élégants */
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); /* Ombre douce pour décoller la modale du fond */
		overflow: hidden; /* Empêche les enfants de dépasser des arrondis */
		font-family: 'Roboto', sans-serif;
	}

	/* --- Bouton de fermeture (Croix) --- */
	.modal-close {
		position: absolute;
		top: 15px;
		right: 15px;
		cursor: pointer;
		font-size: 18px;
		color: #999;
		transition: color 0.2s ease, transform 0.2s ease;
		line-height: 1;
		font-weight: 300;
	}

	.modal-close:hover {
		color: #333;
		transform: scale(1.1); /* Léger effet de zoom au survol */
	}

	/* --- En-tête de la modale --- */
	.modal-header {
		padding: 20px; /* Plus d'espace pour respirer */
		border-bottom: 1px solid #eee;
		background-color: #fafafa; /* Léger fond pour structurer le titre */
	}

	.modal-header p {
		margin: 0; /* Supprime les marges par défaut du paragraphe */
		font-size: 18px; /* Titre plus affirmé */
		font-weight: 500; /* Poids moyen pour le style "titre" */
		color: #333;
	}

	/* --- Corps de la modale --- */
	.modal-body {
		padding: 24px 20px; /* Plus d'espace autour du formulaire */
		max-height: 70vh;
		overflow-y: auto;
	}

	/* Style rapide pour harmoniser votre select avec le nouveau look */
	.modalform {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 14px;
		color: #333;
		background-color: #fff;
		outline: none;
		margin-top: 8px;
	}

	/* --- Pied de la modale --- */
	.modal-footer {
		padding: 15px 20px;
		border-top: 1px solid #eee;
		text-align: right;
		background-color: #fff;
	}

	.btn{
		padding: 5px;
		background-color: darkcyan;
		color: white;
		text-decoration: none;
	}

	.btn-close{
		background-color: red;
	}
	.hidden {
		display: none;
		height: 0;
		overflow: hidden;
	}
	.btn-modal {
	  padding: 5px 10px;
	  border-radius: 5px;
	  border: none;
	  color: #fff;
	  background-color: #0f766e;
	  outline: none;
	  cursor: pointer;
	  font-family: 'Roboto', sans-serif;
	  font-size: 15px;
	  text-decoration: none; /* Supprime le soulignement */
	  margin: 0; /* Supprime les marges par défaut */
	  display: inline-block; /* Simule un bouton */
	}


	a.btn-modal:link {
	  outline: none;
	  text-decoration: none;
	  color: #fff;
	}

	a.btn-modal:visited {
	  outline: none;
	  text-decoration: none;
	  color: #fff;
	}

	a.btn-modal:focus {
	  outline: none;
	  text-decoration: none;
	  color: #fff;
	}

	a.btn-modal:hover{
	  outline: none;
	  text-decoration: none;
	  color: #fff;
	}

	a.btn-modal:active{
		outline: none;
		color: #fff;
	}
	/* L'apparence de l'élément "fantôme" qui reste à la place d'origine */
	.sortable-ghost {
		opacity: 0.3;
		background-color: #f0f0f0 !important;
		border: 2px dashed #ccc !important;
	}

	/* Optionnel : change le curseur quand on survole la poignée */
	.drag-handle {
		cursor: grab;
	}
	.drag-handle:active {
		cursor: grabbing;
	}
	html {
	  scroll-behavior: smooth;
	}
	#scrollToTopButton {
	  display: block;
	  z-index: 99;
	  transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
	  opacity: 0;
	  visibility: hidden;
	  position: fixed;
	  bottom: 20px;
	  right: 30px;
	  border: none;
	  border-radius: 4px;
	  outline: none;
	  width: 50px;
	  height: 50px;
	  padding: 8px;
	  background-color: #333333bf;
	}
	#scrollToTopButton i {
	  color: white;
	}
	#scrollToTopButton:hover,
	#scrollToTopButton:focus,
	#scrollToTopButton:focus-within {
	  cursor: pointer;
	  background-color: #0078b4;
	}