body { 
		font-family: sans-serif; 
		background: #fff; 
		margin: 0; 
	}
    .wrapper {
       /* background-color: #e6e6fa; /* light purple / lavender */
       background-color: #f7e7ce; /* champagne */
       padding: 20px;
    }
    header {
		background-color: #4a90e2; /* couleur agréable (bleu doux) */
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
		flex-wrap: wrap;
	}

	.footer {
		background-color: #4a90e2; /* couleur agréable (bleu doux) */
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;
		flex-wrap: wrap;
	}
    #customPopup {
        display: none;
        position: fixed;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: white;
        padding: 20px;
        border: 2px solid #444;
        border-radius: 10px;
        z-index: 9999;
        box-shadow: 0 0 10px rgba(0,0,0,0.3);
        font-size: 16px;
        max-width: 90%;
        text-align: center;
    }
    #customPopup button {
        margin-top: 10px;
        padding: 6px 12px;
        font-size: 14px;
        cursor: pointer;
    }
   .title {
		font-size: 20px;
		font-weight: bold;
	}
	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
	}
	nav li {
		position: relative;
	}
	nav > ul > li {
		margin-left: 15px;
	}
	nav a {
		display: block;
		padding: 10px 14px;
		color: white;
		text-decoration: none;
	}
	nav li:hover > a {
		background-color: #444;
	}
	nav ul ul {
		position: absolute;
		top: 100%;
		left: 0;
		display: none;
		min-width: 150px;
		background-color: #444;
		z-index: 999;
	}
	nav li:hover > ul {
		display: block;
	}
	nav ul ul li a:hover {
		background-color: #555;
	}
	
	/* proportionnalité entre colonnes */
	.calendrier {
		width: 100%;
		overflow-x: auto;
		padding: 10px;
		box-sizing: border-box;
	}

	.calendrier table {
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed; /* Force les colonnes à se répartir également */
	}

	.calendrier th{
		border: 1px solid #ccc;
		padding: 8px;
		text-align: center;
		word-wrap: break-word;
		overflow: hidden;
		white-space: normal;
		font-size: 14px;
		height:auto;
	}
	
	.calendrier td {
		border: 1px solid #ccc;
		padding: 8px;
		border-bottom: 1px solid purple; /* barre purple en bas */
		text-align: center;
		word-wrap: break-word;
		overflow: hidden;
		white-space: normal;
		font-size: 10px;
		height:auto;
	}

	/* Colonne Heure : largeur fixe */
	.calendrier th.col-heure {
		width: 80px;
		background-color: #f4f4f4;
		font-weight: bold;
		position: sticky;
		left: 0;
		z-index: 2;
	}
	.calendrier td.col-heure {
		width: 80px;
		background-color: #f4f4f4;
		border-bottom: 1px solid purple; /* barre purple en bas */
		font-weight: bold;
		position: sticky;
		left: 0;
		z-index: 2;
	}

	/* Colonnes de salles : auto-ajustées */
	.calendrier th[class^="col-salle-"],
	.calendrier td[class^="col-salle-"] {
		/* Pas de largeur fixe pour éviter de bloquer la dernière colonne */
		background-color: #fff;
	}

	/* Cellule réservée */
	.booked {
		/*background-color: #ccffcc !important;*/
		/*font-weight: bold;*/
	}
/*
	td.booked {
        background-color: #90ee90;
        cursor: default;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
*/	
	/* Salle non accessible */
	.not-accessible {
		background-color: #f8f8f8;
		color: #aaa;
		cursor: not-allowed;
	}

	/* Alternance des lignes horaires vides */
	.calendrier tr:nth-of-type(even) td:not(.booked):not(.not-accessible):not(.col-heure) {
		background-color: #f9f9f9;
	}

	.calendrier tr:nth-of-type(odd) td:not(.booked):not(.not-accessible):not(.col-heure) {
		background-color: #efefef;
	}

	/* Salle non modifiable (interdite) */
	.salle-interdite {
		background-color: red !important;
		color: white;
		font-weight: bold;
	}


	.login-container {
		max-width: 400px;
		margin: 60px auto;
		padding: 30px;
		background: white;
		border-radius: 8px;
		box-shadow: 0 0 10px rgba(0,0,0,0.1);
	}
	.login-container h2 {
		margin-top: 0;
	}
	.login-container input[type="text"],
	.login-container input[type="password"] {
		width: 100%;
		padding: 12px;
		margin: 12px 0;
		border: 1px solid #ccc;
		border-radius: 6px;
		font-size: 16px;
	}
	.login-container button {
		width: 100%;
		padding: 12px;
		background: #4a90e2;
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 18px;
		cursor: pointer;
	}
	.login-container button:hover {
		background: #357ABD;
	}
	.error {
		color: red;
		margin: 10px 0;
		text-align: center;
	}
	@media (max-width: 480px) {
		.login-container {
			margin: 20px;
			padding: 20px;
		}
	}