@charset "UTF-8";

/* CSS kilométrage – Version V1.5 - 2026
	Script, créé par sync - Boulette (V7.0.0)
	© 2026 Feuille d’heures Angélique
*/

*{
	box-sizing:border-box;
	margin:0;
	padding:0;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
body{
	background:linear-gradient(171deg,#9D4E6C,#3836F7) 100%;
	padding:10px;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	min-height:100vh;
}
html, body { user-select: none; -webkit-user-select: none; -ms-user-select: none;}
.container{
	background:#336666;
	color:#fff;
	border-radius:16px;
	box-shadow:0 10px 30px rgba(0,0,0,0.4);
	padding:14px;
	width:100%;
	max-width:510px;
	backdrop-filter:blur(6px);
}
h2{
	font-size:1.4rem;
	margin-bottom:3px;
	text-align:center;
}
h3{
	font-size:0.7rem;
	opacity:0.8;
	margin-bottom:5px;
	text-align:center;
}
.identite{
	margin:10px;
}
.identite input{
	max-width: 100%; flex:1;
	width:30%;
	margin-top:5px;
	padding:3px;
	border-radius:5px;
	border:none;
}

.ligne {
	display: flex;
	gap: 15px;
	flex-wrap: wrap; /* permet aux inputs de descendre sur mobile */
	justify-content: center;
}
.identite input {
	flex: 1 1 100px; /* s’adapte automatiquement entre 100px et max 30-45% */
	text-align: center;
}
.nav-semaine{
	text-align:center;
	margin-bottom:15px;
	font-size:0.9rem;
}
.nav-semaine a{
	color:#FFEB3B;
	text-decoration:none;
	margin:0 5px;
	cursor:pointer;
	font-weight:bold;
}
.jour{
	background:rgba(255,255,255,0.15);
	padding:10px;
	border-radius:10px;
	margin-top:10px;
}
.jour.inactif{
	opacity:0.5;
}
.jour label{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:10px;
	margin:4px;
}

.jour label span{
	flex:1;
}

.jour input[type=km]{
	width:60px;
}

label{
	font-size:0.8rem;
	margin-bottom:5px;
	text-align:center;
}
.info input{
	width:95%;
	margin-top:3px;
	padding:6px;
	border-radius:6px;
	border:none;
}
input{
	font-size:13px;
}
.total_display{
	margin-top:15px;
	font-weight:bold;
	font-size:1rem;
	text-align:center;
	color:#000;
}
#tarif_km{
	text-align:center;
	margin-top:5px;
	font-size:0.8rem;
}
button{
	width:100%;
	padding:12px;
	margin-top:15px;
	border-radius:8px;
	border:none;
	font-weight:bold;
	font-size:14px;
	cursor:pointer;
	background:#007bff;
	color:#fff;
	box-shadow:0 4px 6px rgba(0,0,0,0.2);
}
.btn-back{
	background:rgba(0,0,0,0.3);
	margin-top:10px;
}
.actif_km{
	/* Transition pour un effet fluide lors du changement de couleur */
	accent-color:#FF3300;
	transition:accent-color 7s ease;
}


#info_urssaf{
	text-align:center;
	margin-top:5px;
	font-size:0.85rem;
}

.h4{
	font-size:0.65rem;
	opacity:0.65;
	align-items:center;
	justify-content:center;
	gap:10px;
	margin:6px;
	margin-bottom:14px;
	text-align:center;
}
/* Style global pour tous les hr */
hr {
	border: none; /* supprime la bordure par défaut */
	height: 1px; /* épaisseur de la ligne */
	background-color: rgba(255, 255, 255, 0.4); /* couleur semi-transparente blanche */
	 /*margin: 3px 0; espace vertical avant/après */
	opacity:0.5;
}
/** block prints **/
@media print{
	.jour.inactif{
		display:none;
	}
	button{
		display:none;
	}
	input.actif{
		display:none;
	}
	div.back_print, .changeWeek, #back_print{
		display:none;
	}
	input.back_print{
		display:none;
	}
}
@media print{
	body{
		display:block;
	}
}
@media print{
	body{
		transform:scale(1.3); /** zoom print **/
		transform-origin:top center;
	}
}

.ligne {
	display: flex;
	gap: 15px; /* 15 origine */
	justify-content: center;
}

.ligne input, .ligne label {
	flex: 1;
	text-align: center;
}

/* Labels au-dessus bien alignés */
.labels {
	margin-bottom: 2px; /* 5 origine */
	border;1.4px;
}
.ligne.labels {
	border: 1.4px solid #999999; /* ou #000 pour impression */
	border-radius: 3px; /* optionnel pour arrondir */
	padding: 3px;
}

/* Ajustement spécifique pour 2 colonnes */
.identite:nth-child(2) .ligne input, .identite:nth-child(2) .ligne label {
	flex: 1; 
}
hr {
	width: 97%;
	margin: 5px auto; /* centre horizontalement */
}
/* FIN de CSS */