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

:root {
   --main-color: #0056b3;
   --red: #e74c3c;
   --orange: #f39c12;
   --light-color: #888;
   --light-bg: #eee;
   --black: #2c3e50;
   --white: #fff;
   --border: .1rem solid rgba(0, 0, 0, .2);
   --green: #2ecc71; /* Ajout d'une couleur verte pour les employés pointés */
}

body {
    font-family: 'Nunito', sans-serif;
    margin: 20px;
    padding: 0;
    background-color: var(--white);
    color: var(--black);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

.product {
    border: var(--border);
    border-radius: 25px;
    padding: 20px;
    text-align: center;
    background-color: var(--light-bg);
}

.pointed {
    background-color: var(--green); /* Utilisation de la couleur verte pour les employés pointés */
    color: var(--white);
}

.not-pointed {
    background-color: var(--light-bg);
}

button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: var(--main-color);
    color: var(--white);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
}

button:hover {
    background-color: var(--orange);
}