@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

[v-cloak] {
  display: none;
}

/*
[v-cloak] .loading-message {
  display: block;
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
  color: #555;
}
*/

body {
	font-family: 'Avenir LT pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	padding: 20px 0;
}

.calendar-container {
	background: white;
	border-radius: 5px;
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
	overflow: hidden;
	width:1300px;
	margin: 0 auto;
}

.calendar-table {
	margin-bottom: 0;
	font-size: 0.7rem;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	width: 100%;
	border:solid 1px #555;
}

.day-header,
.day-number {
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	font-weight: 600;
	text-align: center;
	width: 40px; min-width: 40px; max-width: 40px;
	padding: 4px;
	border: 1px solid #dee2e6;
	color: #495057;
	font-size: 0.75rem;
}

.day-number {
	padding: 8px 4px;
}

.month-header {
	background: #246E46 !important;/*linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);*/
	color: white !important;
	text-align: center;
	font-weight: 600;
	padding: 10px 4px;
	font-size: 0.75rem;
	border: 1px solid #dee2e6;
	text-shadow: 0 1px 2px rgba(0,0,0,0.1);
/*	position: relative;
	overflow: hidden;
	width: 96px;*/
}
/*
.month-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
	animation: shine 3s infinite;
}
*/
/*
@keyframes shine {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}*/


.day-cell {
	width: 96px;
	min-width: calc((100% - 40px) / 12);
	max-width: calc((100% - 40px) / 12);
	height: 22px;
	border: 1px solid #dee2e6;
	position: relative;
	vertical-align: top;
	transition: all 0.2s ease;
	/*background: white;*/
	overflow: hidden;
	padding: 3px;
}

.day-cell.ramOm {
	background:#999 !important;
}

.day-cell.ramTri {
	background:#FC0 !important;
}

.day-cell.ramOm.ramTri {
	background: linear-gradient(45deg, #999 65%, #FC0 50%) !important;
}

.day-cell:hover {
	background: #f8f9ff;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.day-cell img,
.legende img {
	height: 22px;
	transform: scale(1.1);
	margin-left:10px;
}


.day-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	padding: 1px /*3px*/;
}

.day-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
}

.day-main {
	display: flex;
	align-items: center;
	gap: 3px;
	position: relative;
}

.ramOm .day-num {
	color:#FFF;
}

.day-num {
	font-weight: 600;
	font-size: 0.65rem;
	color: #2c3e50;
	padding: 1px 3px;
	min-width: 12px;
	/*background: #e8f4f8;
	border-radius: 3px;
	text-align: center;*/
}

.ramOm .day-letter {
	color:#FFF;
}

.day-letter {
	font-weight: 500;
	font-size: 0.65rem;
	color: #34495e;
}

.ferie-text {
	font-size: 0.5rem;
	color: #e74c3c;
	/*background: #ffeaa7;*/
	font-weight: 500;
	line-height: 1;
	max-width: 70px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	padding: 1px 2px;
	border-radius: 2px;
}

.icons {
	display: flex;
	/*flex-direction: column;*/
	gap: 1px;
	align-items: center;
}

/* Couleurs pour weekends et jours fériés */
.weekend {
	background: linear-gradient(135deg, #e8f4f8 0%, #d1ecf1 100%) !important;
}

.ferie {

/*	background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%) !important;*/
/*	border-left: 4px solid #e17055 !important;*/
}


/*.weekend.ferie .day-num {
	background: rgba(255,255,255,0.2) !important;
}*/

.numSem {
	position: absolute;
	
	top: 50%; left: 50px;
  transform: translate(-50%, -50%);
  font-size: 1.8rem; 
  color: rgba(0, 0, 0, 0.1); 
  z-index: 0;
  pointer-events: none;
	/*
	margin:0px 0 0 10px;
	color:#BBB;
	transform:scale(1.6);
	z-index:100;
	*/
}

.vac {
	border-left: 4px solid #e17055 !important;
	padding-left:5px !important;
}

.legende {
	/*border-top: solid 1px #555;*/
	padding:6px;
	font-size:10pt;
}

.disabled-overlay {
	pointer-events: none; /* empêche l'interaction */
	opacity: 0.6;         /* effet visuel de désactivation */
	position: relative;
}


/* Impression */
@page {
	size: A4 landscape;
	margin: 5mm;
}

@media print {
	body {
		background: white !important;
		padding: 0 !important;
	}
	.btn {
		display: none !important;
	}
	.calendar-container {
		box-shadow: none !important;
		border-radius: 0 !important;
		max-width: none !important;
	}
	.calendar-table {
		font-size: 0.6rem !important;
		page-break-inside: avoid;
		table-layout: fixed !important;
		width: 100% !important;
	}
	.day-header,
	.day-number {
		width: 25mm !important;
	}
	.month-header,
	.day-cell {
		width: calc((100% - 25mm) / 12) !important;
		height: 4mm !important;
	}
	.ferie-text {
		font-size: 0.4rem !important;
	}
	.day-cell:hover {
		transform: none !important;
		box-shadow: none !important;
	}
	.month-header::before {
		display: none !important;
	}
}