.rideau-block {
  background: #fff;
  border: 1px solid #000;
  border-radius: 6px;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.5rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #000;
  box-shadow: none;
  transition: border-color 0.3s ease;
}

.rideau-block:hover {
  border-color: #444;
  box-shadow: none;
}

.rideau-block h6 {
  font-weight: 500;
  font-size: 1.15rem;
  margin-bottom: 0rem;
  padding-bottom: 0.3rem;
  color: #000;
  letter-spacing: 0.02em;
}

.rideau-block .fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.9rem 1rem;
}

.rideau-block .field label {
  font-size: 0.75rem;
  font-weight: 400;
  color: #333;
  margin-bottom: 0.25rem;
  display: block;
  user-select: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rideau-block .field input[type="text"] {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 0.95rem;
  color: #000;
  background: #fff;
  transition: border-color 0.25s ease;
}

.rideau-block .field input[type="text"]:focus {
  border-color: #000;
  outline: none;
  background: #fff;
}

.rideau-block .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.rideau-block .row .field {
  flex: 1 1 140px;
}

.rideau-block .actions {
  text-align: right;
  margin-top: 0.8rem;
}

.rideau-block .actions button {
  background: #000;
  color: #fff;
  border: none;
  padding: 0.4rem 1.1rem;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease;
  font-size: 0.9rem;
}

.rideau-block .actions button:hover {
  background: #222;
}
#bordereauxContainerUpdate .fields{
	padding-top:1rem;
}
.clients-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(320px, 1fr));
	gap: 1.5rem;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	padding: 1rem 5px;
	margin: 0 auto;
}

.client-card {
	background: #fff;
	border-radius: 12px;
	padding: 1.8rem 2rem;
	box-shadow: 0 3px 6px rgba(50,50,93,0.1), 0 1px 3px rgba(0,0,0,0.07);
	transition: box-shadow 0.35s ease, transform 0.3s ease;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: repeat(6, auto);
	grid-gap: 0.6rem 1.2rem;
	color: #222;
	border: 1px solid #e1e4e8;
}

.client-card:hover {
	box-shadow: 0 8px 20px rgba(50,50,93,0.15), 0 4px 8px rgba(0,0,0,0.10);
	transform: translateY(-3px);
}

.client-label {
	font-weight: 600;
	color: #6b7280; /* gris moyen */
	font-size: 0.75rem;
	user-select: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding-bottom: 2px;
	border-bottom: 1px solid #eaecef;
}

			.client-value {
				font-weight: 500;
				color: #111;
				font-size: 1.05rem;
				overflow-wrap: anywhere;
				padding-bottom: 2px;
			}

			.client-card > .client-label:nth-child(odd),
			.client-card > .client-value:nth-child(odd) {
				grid-column: 1;
			}

			.client-card > .client-label:nth-child(even),
			.client-card > .client-value:nth-child(even) {
				grid-column: 2;
			}

			.client-card .action {
				grid-column: 1 / span 2;
				margin-top: 1.4rem;
				text-align: right;
			}

.detail-button{
	background: #000;
	color: #fff;
	padding: 0.5rem 1.2rem;
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 600;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	display: inline-block;
	user-select: none;
}
			
.detail-button:hover{
	color:#fff!important;
}
			
.delete-button {
	background-color: #e53e3e; /* rouge */
	color: #fff;
	border: none;
	padding: 0.5rem 1.2rem;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	margin-left: 0.8rem;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
	user-select: none;
}

.delete-button:hover {
	background-color: #c53030;
	box-shadow: 0 4px 10px rgba(229, 62, 62, 0.6);
}

.espace-block {
				display: none;
				background: white;
				border: 2px solid #e0e0e0;
				border-radius: 12px;
				box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
				padding: 20px 25px;
				margin-top: 20px;
			  }

			  .espace-block.active {
				display: block;
			  }

			  .espace-block h3 {
				color: #333;
				margin-bottom: 15px;
				font-size: 22px;
			  }

			  .rideau-block {
				background: #f9fafc;
				border: 1px solid #ddd;
				padding: 15px;
				margin: 10px 0;
				border-radius: 8px;
			  }

			  .nav-buttons {
				display: flex;
				gap: 10px;
				justify-content: center;
				margin-top: 30px;
			  }

			  .nav-btn, .add-btn {
				background: #e3eaf3;
				color: #333;
				border: none;
				padding: 10px 20px;
				cursor: pointer;
				font-size: 16px;
				transition: background 0.2s ease;
			  }

			  .nav-btn:hover, .add-btn:hover {
				background: #cdd9e5;
			  }

			  .submit-container {
				text-align: center;
				margin-top: 40px;
			  }

			  .submit-btn {
				background-color: #2e7dff;
				color: white;
				border: none;
				padding: 14px 28px;
				font-size: 18px;
				cursor: pointer;
				transition: background 0.3s ease;
			  }

			  .submit-btn:hover {
				background-color: #1b5fe0;
			  }
			  .rideau-details {
				  display: none;
				  transition: all 0.3s ease;
				}

				.rideau-details.open {
				  display: block;
				}

				.rideau-details.closed {
				  display: none;
				}

				.rideau-header {
				  display: flex;
				  justify-content: space-between;
				  align-items: center;
				  cursor: pointer;
				  padding: 0.5rem 1rem;
				  font-weight: bold;
				  margin-bottom: 0.5rem;
				}


/* Responsive */
@media (max-width: 480px) {
	.client-card {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(12, auto);
	}
	.client-card > .client-label,
	.client-card > .client-value {
		grid-column: 1 !important;
	}
	.client-card .action {
		text-align: center;
	}
}
@media screen and (max-width : 768px){
	#multiStepForm {
		max-width: 100%!important;
		margin: 0!important;
		padding: 2rem!important;
		border-radius: 0px!important;
	}
	#bordereauxContainer .field , .form-buttons > div{
		width : 100%!important;
	}
	.rideau-dimensions button {
		padding: 2px 14px!important;
		font-size: 15px!important;
		margin-top: 0rem!important;
	}
	.rideau-info{
		padding : 1rem!important;
	}
	.signature-fields {
		flex-direction: row!important;
		align-items: start!important;
		justify-content: start!important;
		width : 35%!important;
		float:left!important;
	}
	.clients-grid{
		display: flex!important;
    	flex-direction: column!important;
	}
	.clients-grid .action{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.nav-buttons {
		flex-direction: column-reverse!important;
	}
}