/* ========================
   Boutons
   ======================== */

.btn, .btn-funky {
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s ease;
	border: none;
	text-align:center;
	margin: 5px;
}

.btn-big {
	font-weight: 600;
	font-size: 18px;
	padding: 16px 32px;
}


.btn {
	background-color: var(--blue);
}

.btn:hover {
	background-color: var(--funky-blue);
	color:var(--white);
}


.btn-funky {
	background-color: var(--funky-blue);
}

.btn-funky:hover {
	background-color: var(--blue);
	color:var(--white);
}


/* ========================
   Forms
   ======================== */

input[type="text"],
input[type="tel"],
input[type="email"]{
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #ccc;
	width: 100%;
	box-sizing: border-box;
	margin : 10px 0px;
}

	
input[type="file" i] {
	display:none;
}


/* ========================
   Cards
   ======================== */
.card {
	background: var(--light-blue);
	border-radius: var(--border-radius);
	border: 1px solid #e6e9f0;
	padding: 20px;
	width: 32%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* --- Tablette (2 vignettes côte à côte) --- */
@media (max-width: 1024px) {
  .card {
    width: 48%;
  }
}

/* --- Mobile (1 vignette) --- */
@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}


.card:hover {
	background: var(--white);
	transform: translateY(-5px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}