/* Carré arondie responsive contenant les services */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Maximum de 4 colonnes */
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.grid-item {
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.grid-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.grid-item img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}

.grid-item h3 {
    margin: 10px 0 0 0;
    color: #333;
    font-size: 14px;
}

/* Media Queries pour rendre la grille responsive */
@media (max-width: 1200px) {

    .grid-container {
        grid-template-columns: repeat(3, 1fr);
        /* 3 colonnes pour les écrans moyens */
    }
}

@media (max-width: 768px) {

    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        /* 2 colonnes pour les tablettes */
    }

    .grid-item {
        padding: 15px;
    }

    .grid-item img {
        width: 50px;
        height: 50px;
    }

    .grid-item h3 {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .grid-container {
        grid-template-columns: 1fr;
        /* 1 colonne pour les téléphones portables */
    }

    .grid-item {
        padding: 10px;
    }

    .grid-item img {
        width: 40px;
        height: 40px;
    }

    .grid-item h3 {
        font-size: 12px;
    }
}

/* fin test carreau arondie*/


.users {
    min-inline-size: 400px;
}

.user {
    position: relative;
    background-color: #fff;
    display: flex;
    /*justify-content: flex-start;
    align-items: center;
  
    /* max-width: 400px; */
    max-inline-size: 400px;

    /* padding: 1rem 1.75rem; */
    padding-block: 1rem;
    padding-inline: 1.75rem;

    /* margin: 0.75rem auto; */
    margin-block: 0.75rem;
    margin-inline: auto;

    /* border-left: 4px solid; */
    border-inline-start: 4px solid;
}

.users {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

@media(max-width: 1200px) {
    .users {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 900px) {
    .users {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 600px) {
    .users {
        grid-template-columns: 1fr;
    }
}

.user {
    position: relative;
    z-index: 1;
    width: 300px;
    height: 100px;
    /* 350/250 = 1.4 
    aspect-ratio: 1 / 1.4;
    padding: 1rem;*/
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 1px 1px 3px #e2e1e1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 20px;
    box-shadow: 0 0 12px .8px rgba(0, 0, 0, .1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.user:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.user-img {
    border-radius: 100%;
    overflow: hidden;

    /* width: 70px; */
    inline-size: 50px;

    /* height: 70px; */
    block-size: 50px;

    /* margin-right: 1rem; */
    margin-inline-end: 1rem;
    margin-right: 15px;
}

.user-meta {
    flex: 1;
}

.user-name {
    font-size: 1.125rem;
    font-weight: 500;
}

.user-designation {
    font-size: 0.875rem;
    color: #6f707e;
}

.label {
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    color: #fff;

    position: absolute;
    /* top: 0; */
    inset-block-start: 0;

    /* right: 0; */
    inset-inline-end: 0;

    /* padding: 4px 0; */
    padding-block: 3px;

    /* min-width: 75px; */
    min-inline-size: 65px;
}

.label-marketing {
    border-color: coral;
}

.label-marketing .label {
    background-color: coral;
}

.label-sales {
    border-color: #01a001;
}

.h3 {
    margin: 0%;
}

.label-sales .label {
    background-color: darkseagreen;
}

.label-finance {
    border-color: cornflowerblue;
}

.label-finance .label {
    background-color: cornflowerblue;
}

.inne {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

p {
    margin-bottom: 20px;
}

@media (max-width: 768px) {

    .inne {
        margin: 50px 50px;
    }
}

@media (max-width: 480px) {

    .inne {
        margin: 50px 50px;
    }
}

/* fin test carreau arondie*/


@media(max-width: 1200px) {
    .main {
        margin: 50px 50px;
    }
}

@media(max-width: 900px) {
    .main {
        margin: 50px 50px;
    }
}

@media(max-width: 600px) {
    .main {
        margin: 50px 50px;
    }
}