body {
            font-family: "Arial";
        }

        .list {
            background-color: #c2ccf4;
            padding: 60px 30px 50px 30px;
            width: 100%;
            max-width: 535px;
        }

        .list ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .list ul li {
            height: 92px;
            padding: 16px;
            background-color: #ffffff;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            margin-bottom: 16px;
            font-size: 24px;
            font-weight: 700;
            text-transform: uppercase;
            color: #001A82;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .list ul li.active {
            color: #ffffff;
            background-color: #001A82;
            background-image: url(../img/flowbite_arrow-right-alt-solid.png);
            background-repeat: no-repeat;
            background-position: 99.2% center;
        }

        .list ul li.active svg path {
            fill: #ffffff;
        }

        .list ul li svg {
            margin-right: 12px;
            width: 60px;
            min-width: 60px;
        }

        .hour-item {
            display: flex;
            gap: 16px;
            margin-bottom: 5px;
        }

        .hour-item span {
            background-color: #001A82;
            color: #ffffff;
            font-weight: 600;
            width: 187px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .first-section {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }
   * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial;
        }

        .section-wrapper {
            max-width: 1300px;
            margin: 0 auto;
            max-width: fit-content;
            text-align: center;
            padding: 32px;
            background-color: #c2ccf4;
        }

        .row-wrapper,
        .row-head {
            display: flex;
            gap: 25px;
        }

        .row-wrapper {
            margin-bottom: 16px;
        }
		.user-info .user-checkbox{
			margin-right: 10px;
			margin-top: 5px;
		}
		.user-info.active{
		 border: 1px solid #C40081;
		}
        .row-wrapper>div {
            border: 1px solid #001A82;
            padding: 8px;
            height: 100px;
            background-color: #FFFFFF;
        }

        .atelier-hour {
            width: 148px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

        .atelier-hour svg {
            height: 50px;
        }
		.user-info-all > span{
            font-size: 14px;
            color: #001A82;
            font-weight: 700;
            text-align: left;
        }
        .user-info {
            width: 380px;
            display: flex;
            align-items: center;
        }

        .user-info-all {
            display: flex;
            flex-direction: column;
        }

        .user-info-all>span {
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .user-info-all>span svg {
            width: 24px;
            margin-right: 8px;
        }
		.user-info.active .user-info-all span svg path {
			fill: #C40081
		}
		.number.active{
		background-color:#C40081;
		}
		.user-info .number{
			cursor:pointer
		}
        .number {
            background-color: #001A82;
            color: #FFFFFF;
            width: 30px;
            height: 30px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
        }

        /*.row-head>div {
            text-transform: uppercase;
            font-weight: 600;
            color: #001A82;
            padding: 0 0 20px 0;
            text-align: start;
        }*/

        .name {
            width: 300px;
        }

        .atelier-hour.nothing {
            background-color: #001A82;
            color: #001A82;
        }
		* {
            box-sizing: border-box;
        }

        body {
            font-family: Arial;
        }

        .section-wrapper {
            max-width: 1260px;
            margin: 0 auto;
            text-align: center;
            padding: 70px;
            background-color: #c2ccf4;
            width: fit-content;
            min-width: 1260px;
        }

        .row-wrapper,
        .row-head {
            display: flex;
            gap: 16px;
        }

        .row-wrapper {
            margin-bottom: 16px;
        }

        .row-wrapper>div {
            border: 1px solid #001A82;
            padding: 15px;
            height: 133px;
            background-color: #FFFFFF;
        }

        .atelier-hour {
            font-size: 20px;
            width: 186px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            font-family: Arial;
            color: #001A82;
            font-weight: 700;
        }

        .atelier-hour svg {
            height: 57px;
        }

        .user-info {
            width: 415px;
            display: flex;
            align-items: center;
        }

        .user-info-all {
            display: flex;
            flex-direction: column;
            font-size: 14px;
        }

        .user-info-all>span {
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .user-info-all>span svg {
            width: 24px;
            margin-right: 8px;
        }

        .number {
            background-color: #001A82;
            color: #FFFFFF;
            width: 30px;
            height: 30px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
        }

        .row-head {
            align-items: center;
            margin-bottom: 16px;
        }

        .row-head>div {
            text-transform: uppercase;
            font-weight: 600;
            color: #001A82;
            text-align: start;
        }

        .name {
            width: 300px;
        }

        .atelier-hour.nothing {
            background-color: #001A82;
            color: #001A82;
        }

        .search-bar {
            font-size: 13px;
            font-family: Arial;
            margin-left: auto;
            height: 40px;
            width: 300px!important;
            padding: 12px!important;
            border-radius:4px!important;
            border: 1px solid #001A82!important;
        }
/* Masquer la checkbox native */
.user-checkbox input[type="checkbox"] {
	width: 20px;
    height: 20px;
    appearance: none;
    border: 2px solid #C028B9;
    border-radius: 4px;
    background-color: transparent;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Quand la checkbox est cochée */
.user-checkbox input[type="checkbox"]:checked {
	    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23FFFFFF"%3E%3Cpath d="M7.629 10.709l4.847-4.847 1.118 1.118-6.1 6.1-2.694-2.694 1.118-1.118 1.576 1.575z"/%3E%3C/svg%3E');
    background-size: 200%;
    background-repeat: no-repeat;
    background-color: #C028B9;
    background-position: 41% 50%;
}

/* Ajouter la coche en bleu foncé avec un SVG */
.user-checkbox input[type="checkbox"]:checked::after {
}