a:link {color:#cb2718;}
a:visited {color:#cb2718;}
a:hover {color:#cb2718;}
a:active {color:#cb2718;}
body {
			background-color: #cc0c0c;
			font-family: sans-serif;
			margin: 0;
			padding: 0;
		}
.Wp-Corps-P
{
    margin:0.0px 0.0px 12.0px 0.0px; text-align:left; font-weight:400;
}
.Corps-C
{
    font-family:"Verdana", sans-serif; font-size:16.0px; line-height:1.13em;
}
.Corps-L
{
    font-family:"Verdana", sans-serif; font-size:16.0px; line-height:1.13em;
}
.Wp-Corps-artistique-P
{
    margin:0.0px 0.0px 0.0px 0.0px; text-align:left; font-weight:400;
}
.Wp-Normal-P
{
    margin:0.0px 0.0px 0.0px 0.0px; text-align:left; font-weight:400;
}
.Wp-Police-de-paragraphe-par-défaut-C
{
    font-family:"Verdana", sans-serif;
}
.Corps-artistique-C
{
    font-family:"Verdana", sans-serif; font-weight:700; font-size:24.0px; line-height:1.21em;
}
.Corps-artistique-C-C0
{
    font-family:"Verdana", sans-serif; font-weight:700; font-size:16.0px; line-height:1.13em;
}
.Corps-artistique-C-C1
{
    font-family:"Verdana", sans-serif; font-size:16.0px; line-height:1.13em;
}
.Corps-de-tableau-P
{
    margin:0.0px 0.0px 12.0px 0.0px; text-align:center;
}
.Corps-de-tableau-C
{
    font-family:"Arial", sans-serif; font-weight:700; font-size:13.0px; line-height:1.23em;
}
.Corps-de-tableau-C-C0
{
    font-family:"Arial", sans-serif; font-size:16.0px; line-height:1.19em;
}
.Normal-C
{
    font-family:"Arial", sans-serif; font-size:16.0px; line-height:1.19em;
}
.Normal-C-C0
{
    font-family:"Arial", sans-serif; color:#d55246; font-size:16.0px; line-height:1.19em;
}
.Corps-C-C0 {
    font-family: "Verdana", sans-serif;
    font-size: 13.0px;
    line-height: 1.23em;
}
button {  
	background-color: #28a745;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
button:hover {
    background-color: #218838;
}
.ui-widget { font-family: ,serif; font-size: 17.6px; }
.ui-widget .ui-widget { font-size: 16.0px; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: ,serif; font-size: 16.0px; }
.ui-widget-content { border: #aaaaaa; background: #ffffff; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: #aaaaaa; background: #cccccc; color: #222222; }
.ui-widget-header a { color: #222222; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: #aaaaaa; background: #e6e6e6; color: #555555; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: #aaaaaa; background: #dadada; color: #212121; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: #aaaaaa; background: #ffffff; color: #212121; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; }

.bibliotheque {
    margin: 20px;
}

.categorie {
    margin-bottom: 20px;
}

.grille {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start; /* Pour aligner les cartes à gauche */
}

.carte {
    display: flex;
    align-items: center;
    width: 220px; /* Taille fixe */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
	position: relative;
}

.carte-content {
    flex-grow: 1;
    margin-left: 5px; /* Espacement entre l'image et le contenu */
    text-align: left;
}


.carte:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.carte img {
    width: 32px;
    height: 32px;
    border-radius: 5px; /* Facultatif */
}


.carte-content a {
    color: #007BFF;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
}

.carte-content a:hover {
    text-decoration: underline;
}

.tooltip {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    font-size: 0.8em;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s;
    width: auto; /* S'adapte à la taille du texte */
    max-width: 200px; /* Limite si le texte est trop long */
}

.carte:hover .tooltip {
    visibility: visible;
    opacity: 1;
}
 /* Nouvelle charte graphique bibliothèque */
        .fond-blanc {
            background: #fff;
            margin-left: auto;
            margin-right: auto;
			margin-top: 20px;
            width: 840px;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .section {
            background: #f9f9f9;
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        .section h2 {
            font-size: 20px;
            margin-bottom: 10px;
        }
        .form-group {
            margin-bottom: 10px;
        }
        .form-group label {
            display: block;
            font-weight: bold;
        }
        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .actions {
            display: flex;
            gap: 10px;
        }
        .actions button {
            padding: 8px 15px;
            background: #cc0c0c;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .actions button:hover {
            background: #a00;
        }
        .file-list {
            list-style: none;
            padding: 0;
        }
        .file-list li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            background: #fff;
            border: 1px solid #ccc;
            margin-bottom: 5px;
            border-radius: 5px;
        }
        .file-list li span {
            font-weight: bold;
        }
		.file-list .category {
        font-weight: bold;
        margin-top: 10px;
		}
		.file-list .file {
			margin-left: 20px; /* Décalage visuel des fichiers */
		}
		.file-list .file a {
			text-decoration: none;
			color: #007BFF; /* Couleur des liens */
		}
		.file-list .file a:hover {
			text-decoration: underline;
		}
		.champ {
			padding: 8px 15px; /* Espacement intérieur : 10px en haut/bas, 15px à gauche/droite */
			margin: 5px 0; /* Espacement extérieur : espace entre les inputs */
			width: calc(100% - 30px); /* Ajuste la largeur pour tenir compte du padding */
			box-sizing: border-box; /* Inclut le padding dans la largeur totale */
			border: 1px solid #ccc; /* Bordure légère */
			border-radius: 5px; /* Coins arrondis */
		}
		.champ-date {
			width: 100px; /* Largeur ajustée */
			padding: 8px;
			border: 1px solid #ccc;
			border-radius: 5px;
			box-sizing: border-box;
		}
		.actions .btn-link {
			display: inline-block;
			padding: 8px 15px;
			background: #cc0c0c;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			text-decoration: none;
			font-family: inherit;   /* hérite de body => sans-serif */
			font-size: 14px;        /* ajuste si besoin pour coller au bouton */
			line-height: 1.2;
		}
		.actions .btn-link:hover {
			background: #a00;
		}
		.btn-link .icon-excel {
			width: 18px;      /* taille de l’icône */
			height: 18px;
			vertical-align: middle;
			margin-right: 8px; /* espace entre icône et texte */
		}


.fiche-membre {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 12px;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
}

.ligne {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
	align-items: center;
}

.ligneForm {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: none;
	align-items: center;
}

.label {
    font-weight: bold;
    color: #333;
    width: 45%;
	vertical-align: middle;
	padding: 8px 0;
}

.label2 {
    font-weight: bold;
    color: #333;
    width: 50%;
	vertical-align: middle;
	padding: 8px 0;
}

.valeur {
    width: 50%;
    text-align: left;
    color: #555;
}

.btn {
        background-color: #ffffff;
        color: #cc0c0c;
        border: 2px solid #cc0c0c;
        padding: 12px 24px;
        border-radius: 10px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}

.btn:hover {
        background-color: #cc0c0c;
        color: #ffffff;
        transform: scale(1.05);
}

		/* Titre avec message de bienvenue */
		h1 {
			margin-bottom: 10px;
			border-bottom: 2px solid #ccc;
			padding-bottom: 10px;
			font-size: 28px;
			color: #333;
		}

		/* Déconnexion à droite */
		.deconnexion-container {
			position: absolute;
			right: 20px;
			top: 20px;
		}

		/* Menu */
		.menu-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 20px;
			padding-top: 20px;
		}

		/* Chaque tuile */
		.menu-item {
			text-align: center;
			width: 100px;
			max-width: 100%;
			margin-bottom: 20px;
		}

		/* Image dans chaque tuile */
		.menu-item img {
			width: 100%;
			height: auto;
			object-fit: cover;
		}

		/* Titre sous chaque image */
		.menu-title {
			margin-top: 10px;
			font-size: 14px;
			color: #333;
			font-weight: bold;
		}
		
		a {
			text-decoration: none; /* Supprime le soulignement des liens */
			color: inherit; /* Hérite de la couleur du texte parent */
		}

tr[onclick] {
    background-color: #f9f9f9;
}

tr[onclick]:hover {
    background-color: #e3e3e3;
}

input[type="email"], input[type="password"] {
			padding: 10px;
			font-size: 16px;
			border: 1px solid #ccc;
			border-radius: 4px;
			margin-bottom: 10px;
			width: 250px;
}

form {
			display: flex;
			flex-direction: column;
}

.fiche-form {
			padding: 20px;
			border: 1px solid #ccc;
			border-radius: 12px;
			background-color: #f9f9f9;
			font-family: Arial, sans-serif;
			width: 400px;
			margin: 0 auto;
		}

		.fiche-form .label {
			width: 150px;
			font-weight: bold;
			font-size: 16px;
			display: flex;
			align-items: center;
			height: auto; /* on ne fixe plus la hauteur ici */
			min-height: 40px; /* hauteur minimale comme tes autres champs */
			padding-top: 8px; /* petit décalage vertical si tu veux l'ajuster */
		}

		.valeur input {
			width: 100%;
			padding: 8px;
			font-size: 15px;
			height: 40px;
			box-sizing: border-box;
			border: 1px solid #ccc;
			border-radius: 4px;
		}
		
/* Réglage du style du <select> */
.valeur select {
	width: 100%;
	padding: 8px 30px 8px 8px;
	font-size: 15px;
	height: 40px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: white;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	position: relative;
}

/* Réglage du style du <textarea> */
.valeur textarea {
	width: 100%;
	padding: 8px;
	font-size: 15px;
	min-height: 100px; /* ou plus selon tes besoins */
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
	background-color: white;
	resize: vertical; /* autorise le redimensionnement vertical uniquement */
}

/* Triangle uniquement pour les <select> */
.valeur.select-style {
	position: relative;
}

.valeur.select-style::after {
	content: "▼";
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	font-size: 12px;
	color: #666;
}




		.erreur {
			color: red;
			text-align: center;
			margin-top: 15px;
			font-weight: bold;
		}
		
		.retour-mdp {
			text-align: center;
			margin-top: 20px;
		}