body { font-family: 'Arial', sans-serif; background-color: #f4f4f4; color: #333; } .logo-container img { height: 50px; /* Ajuster la taille du logo */ } .categories a { color: white; text-decoration: none; padding: 10px 15px; transition: background-color 0.3s; } .categories a:hover { background-color: rgba(255, 255, 255, 0.2); /* Effet au survol */ } /* Section principale */ main { padding: 20px; } h2 { margin-bottom: 20px; color: #0f431f; /* Couleur bleu */ } /* Table */ table { width: 100%; border-collapse: collapse; margin-bottom: 20px; background: white; /* Fond de la table */ border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } th, td { padding: 12px; text-align: left; border-bottom: 1px solid #dddddd; /* Bordure des cellules */ } th { background-color: #0f431f; /* Couleur des en-têtes */ color: white; } tr:hover { background-color: #f1f1f1; /* Effet au survol des lignes */ } /* Boutons */ button { background-color: #0f431f; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; margin-right: 5px; /* Espacement entre les boutons */ } button:hover { background-color: #082d13; /* Couleur au survol */ } /* Styles pour le pop-up */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); padding-top: 60px; } .modal-content { background-color: #fff; margin: 5% auto; padding: 20px; border: 1px solid #888; width: 70%; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } /* Formulaire */ form { display: flex; flex-direction: column; } label { margin: 10px 0 5px; /* Espacement autour des labels */ } input[type="text"], input[type="date"] { padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; /* Espacement entre les champs */ } input[type="text"]:focus, input[type="date"]:focus { border-color: #0f431f; /* Couleur de bordure au focus */ outline: none; /* Enlève le contour par défaut */ }