/* CSS Global */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Fredoka', sans-serif !important;
}


body:has(.main-container.signup) {
    background: #0B172D;
}

main.main-content {
    padding: 20px;
    width: 100%;
}


.main-content form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 25px;
}


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

.form-group label {
    font-weight: 500;
    font-size: 17px;
    line-height: 100%;
    padding-bottom: 8px;
    color: #0B172D;
}

    .form-group input, .form-group textarea {
        color: #0B172D;
        font-family: 'Fredoka', sans-serif;
        font-weight: 400;
        font-size: 13px;
        line-height: 100%;
        padding: 10px 23px;
        border-radius: 9px;
        border: 2px solid #EAF1FF;
        background: #EAF1FF;
        width: 100%;
    }

        .form-group input:focus-visible, .form-group textarea:focus-visible {
            outline: none !important;
        }


form input::placeholder {
    color: rgb(0 0 0 / 20%);
}

.actions {
    width: 100%;
    display: flex;
    gap: 10px;
    flex-direction: row;
    padding-top: 30px;
}

/* Fin CSS Global */


/* CSS Création compte utilisateur */
main.main-container.signup {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    justify-content: center;
}

div.logo {
    text-align: center;
    padding-bottom: 50px;
}

div.logo img{
width: 233px;
}

div.form {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 40px 65px;
}

.welcome-text {
    text-align: center;
}

.welcome-text h1 {
    font-weight: 600;
    font-size: 25px;
    line-height: 100%;
    color: #0B172D;
    margin: 0;
}

.welcome-text span {
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
    color: #0B172D;
}

.form-wrapper {
    padding-top: 40px;
}

form.signup-form .form-group {
    padding-bottom: 20px;
}

.login-link p {
    color: #0B172D;
    font-weight: 400;
    font-size: 11px;
    line-height: 100%;
}

.submit-btn {
    position: relative;
    z-index: 1;
    padding: 20px 72px 30px 72px;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    overflow: visible;
    background: linear-gradient(91.19deg, #F8A600 0.69%, #F92773 99.76%);
    margin-top: 15px;
}

button.submit-btn::after {
    content: " ";
    width: 285px;
    height: 67px !important;
    display: inline-block;
    position: absolute;
    z-index: -1;
    top: -5px;
    left: -5px;
    border-radius: 9px;
    background-color: #0B172D;
}


.login-link a {
    color: #F8A600;
    font-weight: 500;
    font-size: 11px;
    line-height: 100%;
    text-decoration: none;
}

.login-link {
    text-align: center;
    padding-top: 24px;
}

/* Fin CSS Création compte utilisateur */


/* CSS topbar et sidebar */
.container {
  display: flex;
}


.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 77px;
  padding: 0 38px;
  background-color: #0B172D;
  color: #fff;
  margin-left: 283px;
}

.search-bar {
    display: flex;
    align-items: center;
}

.search-bar input {
    background: #536880;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
    padding: 10px 17px 10px 44px;
    width: 336px;
    border-radius: 37px;
}

.search-bar input::placeholder {
    color: #FFFFFF52;
}

.search-bar img {
     width: 14px;
    height: 14px;
    z-index: 1;
    right: -30px;
    position: relative;
  
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-details {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

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

.user-name {
    color: #fff;
    font-weight: 500;
    font-size: 17px;
    line-height: 100%;
}

.user-role {
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
    color: #F8A600;
    padding-top: 5px;
}

.dropdown-icon {
    padding: 0px 17px 0px 2px;
    margin-top: -10px;
}

.dropdown-icon img {
  width: 12px;
  height: 12px;
}

.logout-button {
  background: none;
  border: none;
  cursor: pointer;
}

.logout-button img {
  width: 26px;
  height: 26px;
}

.dropdown {
    position: relative;
}
.dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    list-style: none;
    padding: 10px 0;
    margin: 10px 0 0 0;
    z-index: 1000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    width: 200px;
}

    .dropdown-menu li {
        padding: 0;
    }

        .dropdown-menu li a,
        .logout-link {
            text-decoration: none;
            color: #222;
            display: block;
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            cursor: pointer;
            font-family: 'Outfit', sans-serif;
            font-size: 15px;
            padding: 10px 20px;
            
            transition: background-color 0.2s ease, color 0.2s ease;
        }

            .dropdown-menu li a:hover,
            .logout-link:hover {
                background-color: #D0E3FF; /* Bleu doux mais plus visible */
                color: #003366; /* Texte bien contrasté */
                font-weight: 500;
                border-radius:unset !important;
            }
        .dropdown-menu li a,
        .logout-link {
            display: flex;
            align-items: center;
            gap: 10px; /* espace entre icône et texte */
        }

.dropdown-icon-img {
    width: 18px;
    height: 18px;
    opacity: 0.85;
}

.sidebar {
    background-color: #0B172D;
    color: white;
    display: flex;
    flex-direction: column;
    padding: 55px 0px;
    margin-top: -77px;
    z-index: 9;
    min-height: 100vh;
}

.sidebar-logo {
  margin-bottom: 50px;
  text-align: center;
}

.sidebar-logo img {
  max-width: 100%;
  height: auto;
}

.sidebar-menu ul {
  list-style: none;
}

nav.sidebar-menu ul li {
    position: relative;
    margin-bottom: 1px;
}

a.active-menu:before {
    content: "";
    width: 5px;
    height: 37px;
    display: inline-block;
    background: linear-gradient(182.12deg, #F8A600 6.27%, #F92971 95.34%);
    position: absolute;
    top: 50%;
    transform: translate(-40px, -50%);
}

a.active-menu svg path {
    fill: url(#myGradient);
}

.sidebar-menu a {
    width: 280px;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    gap: 12px;
    padding: 18px 40px;
    transition: background 0.3s;
    position: relative;
}

    .sidebar-menu a:not(.submenu-link):hover, a.active-menu {
        background-color: #FFFFFF24;
    }

.has-submenu a.active-menu {
    background: linear-gradient(90deg, rgba(252, 111, 0, 0.14) 0%, rgba(249, 39, 115, 0.14) 100%);
}

.sidebar-menu img {
    width: 20px;
    height: 20px;
}

.sidebar-menu span {
    font-weight: 600;
    font-size: 17px;
    line-height: 100%;
}


ul.submenu {
    border-left: 1px solid #FFFFFF;
    margin-left: 46px;
    margin-top: -7px;
    margin-bottom: 40px;
}

.sidebar-menu ul.submenu a {
    padding: 18px 0px 2px 22px;
}

a.submenu-link {
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    width: fit-content;
}

    a.submenu-link.active, a.submenu-link:hover {
        background: linear-gradient(94.2deg, #F8AA00 0%, #F92971 110.35%);
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

/* Fin CSS topbar et sidebar */


/* CSS Mon profil */
.user-profile-page .page-container, .user-profile-page .page-sub-container, .user-settings-page .page-container  {
    border: 2px solid #EEEEEE;
    border-radius: 13px;
    border-width: 2px;
    padding: 30px 35px;
}

.page-header {
    display: flex;
    gap: 17px;
    padding-bottom: 30px;
}

a.tab-link {
    padding: 12px 32px;
    color: #fff;
    text-decoration: none;
    background: #0b172d;
    border-radius: 8px;
    display: flex;
    gap: 6px;
    align-items: center;
    position: relative;
}

.tab-link span {
    font-weight: 500;
    font-size: 13px;
    line-height: 100%;
}

a.tab-link.active::before{
    content: " ";
    height: 5px;
    width: 50px;
    display: inline-block;
    position: absolute;
    background: linear-gradient(182.12deg, #F8A600 6.27%, #F92971 95.34%);
    border-radius: 0px 0px 2px 2px;
    top: -30px;
    left: 50%;
    transform: translate(-50%, 0px);
}

a.tab-link.active {
    background: linear-gradient(90deg, #FC6F00 0%, #F9217E 100%) !important;
}

.user-overview {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding-bottom: 50px;
    justify-content: space-between; /* ✅ pousse les actions à droite */
    width: 100%;
}

.user-overview__avatar img {
    width: 98px;
    height: 98px;
    border-radius: 50%;
}

.user-overview__info {
    display: flex;
    flex-direction: column;
}

.user-overview__info .user-name {
    color: #0B172D !important;
}

.user-overview__info .user-role, .user-overview__info .user-address {
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
    color: #0B172D;
    padding-top: 5px;
}

form.user-form .form-group {
    width: 30%;
}

.actions button{
    padding: 10px 17px;
    min-width: 142px;
    border: 1px solid #0B172D;
    border-radius: 37px;
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
    cursor:pointer;

}

button.btn-actions {
    background: #0B172D;
    color: #fff;
}

button.btn-actions-icon{
    background:  #fff ;
    color:#0B172D;
}

.actions .btn-actions-icon img {
    vertical-align: sub;
    padding-right: 2px;
}

/* Fin CSS Mon profil */


/* CSS Paramétrage Utilisateur */

.page-list-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 35px;
}

.user-settings-page .search-bar input {
    background: #EAF1FF;
    border: none;
    outline: none;
    color: #0B172D;
    font-size: 14px;
    padding: 10px 17px 10px 44px;
    width: 230px;
    border-radius: 37px;
}

.user-settings-page .search-bar input::placeholder{
color: #00000052;
}

ul.user-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    /*min-height: 550px;*/
    align-content: flex-start;
}

li.user-list__item {
    list-style: none;
    background: #EAF1FF;
    border-radius: 9px;
    padding: 14px 20px;
    width: 100%;
    min-width: 300px;
    display: flex;
}

ul.user-list .user-overview{
    padding-bottom: 0px !important;
    gap: 0px;
}
ul.user-list .user-overview__avatar{
    padding-right: 20px;
}

ul.user-list .user-overview__avatar img {
    width: 80px;
    height: 80px;
    
}

ul.user-list .user-overview__info .user-name{
font-size: 14px;
}

ul.user-list span.user-email {
    font-weight: 400;
    font-size: 10px;
    line-height: 100%;
    padding-top: 4px;
}

ul.user-list span.user-role {
    font-weight: 500 !important;
    font-size: 10px !important;
    line-height: 100%;
}

ul.user-list span.user-password {
    font-weight: 400;
    font-size: 10px;
    line-height: 100%;
    padding-top: 4px;
    color: #00000052;
}

.user-overview__actions {
    align-self: flex-start;
}

.user-settings-page .actions button{
min-width: 166px;
}
.action-buttons-group {
    display: flex;
    align-items: center;
    gap: 2px; /* ✅ Réduction maximale sans coller */
    margin-left: auto;
    font-size: 15px;
}



.btn-emoji {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 14px;
    text-decoration: none;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    position: relative;
    line-height: 1;
    margin:0;
}

 

    .btn-emoji:focus {
        outline: none;
    }

    .btn-emoji[title]::after {
        content: attr(title);
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        background: #0B172D;
        color: white;
        font-size: 11px;
        padding: 3px 6px;
        border-radius: 4px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        z-index: 10;
    }

    .btn-emoji:hover::after {
        opacity: 1;
    }
li.user-list__item {
    width: 320px; /* ou 100%, ou une valeur fixe uniforme selon design */
    height: 110px; /* ✅ fixe la hauteur uniforme */

    
}


/* Fin CSS Paramétrage Utilisateur */

/*  CSS Paramétrage Rôle */
.page-role-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 35px;
}

ul.role-list__items {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 550px;
}

    ul.role-list__items li {
        list-style: none;
    }

.role-overview {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    border: 2px solid #EEEEEE;
    padding: 20px 30px;
    border-radius: 9px;
}

.role-overview__info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: 25%;
}

.role-overview__permissions {
    width: 70%;
    align-self: center;
}

.role-overview__actions {
    width: 5%;
    display: flex;
    justify-content: center;
}

span.role-user {
    font-weight: 500;
    font-size: 17px;
    line-height: 100%;
}

span.role-user-count {
    display: flex;
    font-weight: 500;
    font-size: 13px;
    line-height: 100%;
    align-items: center;
    padding: 7px 14px;
    border-radius: 15px;
    gap: 10px;
}


.role-overview__info svg {
    width: 16px;
    height: 12px;
}

span.role-user-count.admin {
    color: #F8A600 !important;
    background: #F8A60026;
}

span.role-user-count.conseiller {
    color: #F92971 !important;
    background: #F9297126;
}

span.role-user-count.beneficiaire {
    color: #3EC3FF !important;
    background: #3EC3FF26;
}
span.role-user-count.prescripteur {
    color: #D97706 !important;
    background: #D9770626;
}
span.role-user-count.prestataire {
    color: #10B981 !important;
    background: #10B98126;
}

.role-user-count.admin path {
    fill: #F8A600 !important;
}

.role-user-count.conseiller path {
    fill: #F92971 !important;
}

.role-user-count.beneficiaire path {
    fill: #3EC3FF !important;
}
.role-user-count.prescripteur path {
    fill: #D97706 !important;
}
.role-user-count.prestataire path {
    fill: #10B981 !important;
}

form.role-permissions-form label {
    font-weight: 400;
    font-size: 10px;
    line-height: 100%;
}

.form-checkbox {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    color: #0B172D;
    gap: 8px;
    width: 30%;
}

    .form-checkbox input[type="checkbox"] {
        display: none;
    }

    .form-checkbox label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
    }

        .form-checkbox label::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 9px;
            height: 10px;
            border: 2px solid #F8A600;
            border-radius: 3px;
            background: white;
        }

    .form-checkbox input[type="checkbox"]:checked + label::after {
        content: "";
        position: absolute;
        left: 3px;
        top: 50%;
        transform: translateY(-50%);
        width: 7px;
        height: 7px;
        background: #F8A600;
    }

/* Fin CSS Paramétrage Rôle */


/* CSS Page Coaching (Long) */

.coaching-page form {
    display: flex !important;
    flex-direction: column;
    gap: 37px;
}

.coaching-page .form-header, .row.satisfaction-feedback {
    background: #0B172D;
    padding: 25px 30px;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #fff !important;
    align-items: center;
}

.coaching-page h1 {
    font-weight: 600;
    font-size: 25px;
    line-height: 26px;
    text-transform: uppercase;
}

.form-breadcrumb span {
    font-weight: 400;
    font-size: 13px;
    line-height: 26px;
    text-transform: uppercase;
    color: #FC6F00;
}

.coaching-page .form-header .form-group label {
    color: #fff !important;
}

.coaching-page .form-header .form-column {
    width: 72%;
}

.coaching-page .form-header .form-group input, .coaching-page .form-header .form-group select {
    color: #fff;
    border: none;
    background: #536880;
}

.coaching-page .form-group select {
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
    padding: 10px 23px;
    border-radius: 9px;
    border: 2px solid #EAF1FF;
    background: #EAF1FF;
    width: 100%;
}

    .coaching-page .form-group select:focus-visible {
        outline: none;
    }

.coaching-page h2, .formulaire-solution h2 {
    font-family: Fredoka;
    font-weight: 600;
    font-size: 25px;
    line-height: 100%;
    text-transform: uppercase;
    color: #0B172D;
}

.row.satisfaction-feedback h2 {
    color: #fff;
}

.coaching-page hr, .formulaire-solution hr {
    border-top: 1px solid #0B172D;
    margin-bottom: 5px;
}

.coaching-page section, .formulaire-solution section {
    padding: 30px;
    border: 2px solid #F5F5F5;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.coaching-page .row, .formulaire-solution .row {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.form-group.col1 {
    width: 50% !important;
}

.coaching-page .form-column, .formulaire-solution .form-column {
    display: flex;
    flex-direction: row;
    gap: 23px;
}

.coaching-page .form-group, .formulaire-solution .form-group {
    width: -webkit-fill-available;
}

    .coaching-page .form-group.fit-content {
        width: fit-content;
    }

.row.satisfaction-feedback {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: 50px;
}

.satisfaction-feedback .form-group label {
    padding: 8px 0px;
    color: #fff;
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
}

.coaching-page option {
   /* background: #0b172d;*/
    color: black;
}

.coaching-page .form-group label span {
    font-family: Fredoka;
    font-weight: 300;
    font-size: 12px;
    line-height: 100%;
    color: #3EC3FF;
}

.coaching-page .sub-form-group {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

input[type="number"] {
   /* width: 50px;
    appearance: none;
    padding: 0px;*/
    text-align: center;
}

.toggle-radio-group {
    display: flex;
    background: #eef4ff;
    border-radius: 10px;
    width: 240px;
    height:40px;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
}

    .toggle-radio-group input[type="radio"] {
        display: none;
    }

    .toggle-radio-group label {
        border-radius: 6px;
        cursor: pointer;
        background-color: transparent;
        transition: all 0.3s ease;
        width: 110px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0;
        font-weight: 400;
        font-size: 13px;
        line-height: 100%;
    }

    .toggle-radio-group input[type="radio"]:checked + label {
        background-color: #3dcaff;
        color: white;
    }

.coaching-page .actions {
    justify-content: flex-end;
}

    .coaching-page .actions button.btn-actions {
        border: 1px solid #0B172D;
        font-weight: 500;
        font-size: 17px;
        line-height: 100%;
        text-transform: uppercase;
        background: #fff;
        color: #0B172D;
    }

        .coaching-page .actions button.btn-actions.save {
            background: linear-gradient(90deg, #FC6F00 0%, #F9217E 100%);
            color: #fff;
            border: none;
            min-width: 178px;
        }



/*page NOTFOUND*/
.not-found-container {
    text-align: center;
    padding: 80px 20px;
    font-family: 'Outfit', sans-serif;
}

    .not-found-container h1 {
        font-size: 3rem;
        color: #D9534F;
    }

    .not-found-container p {
        margin-top: 20px;
        font-size: 1.2rem;
    }

.btn-retour {
    display: inline-block;
    margin-top: 30px;
    padding: 10px 20px;
    background-color: #004080;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.notfound-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* hauteur totale de la fenêtre */
    background: linear-gradient(to bottom right, #0B172D, #0066cc);
    font-family: 'Outfit', 'Host Grotesk', sans-serif;
    color: white;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.notfound-content {
    max-width: 600px;
}

.notfound-logo {
    height: 60px;
    margin-bottom: 30px;
}

.notfound-title {
    font-size: 6rem;
    margin: 0;
    font-weight: 800;
    line-height: 1;
}

.notfound-subtitle {
    font-size: 1.5rem;
    margin-top: 20px;
    margin-bottom: 40px;
}

.btn-retour {
    background-color: #ffffff;
    color: #004080;
    text-decoration: none;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 10px;
    transition: background-color 0.3s, color 0.3s;
}

    .btn-retour:hover {
        background-color: #E6F0FF;
        color: #003366;
    }
    .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom right, #0B172D, #0066cc);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.modal-404 {
    background: #fff;
    color: #0B172D;
    border-radius: 16px;
    padding: 40px 30px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    animation: fadeIn 0.5s ease-out;
}

.modal-404 h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #0066cc;
}

.modal-404 p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #333;
}

.btn-retour {
    display: inline-block;
    padding: 10px 24px;
    background-color: #0066cc;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-retour:hover {
    background-color: #004080;
}

.logo-container img {
    width: 150px;
    margin-bottom: 20px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/*fin page NOTFOUND*/
/*  CSS  popup succes/echec... */
.alert {
    background: #fff;
    padding: 17px 20px;
    border-width: 0px 0px 5px 5px;
    border-style: solid;
    border-radius: 10px;
    margin: 20px;
    display: flex;
    gap: 14px;
    flex-direction: row;
    align-items: center;
    box-shadow: 2px -1px 4px 0px #00000040;
    width: 314px;
    justify-content: space-between;
    /* Ajoute ceci : */
    position: fixed;
    top: 50px;
    right: 0px;
    z-index: 9999;
}

    .alert.alert-success {
        border-color: #38E64D;
    }

    .alert.alert-delete-success {
        border-color: #F8A600;
    }

    .alert.alert-error {
        border-color: #F91717;
    }

.alert-content span {
    color: #0B172D;
}

span.alert-title {
    font-weight: 600;
    font-size: 17px;
    line-height: 100%;
    display: block;
}

span.alert-message {
    font-weight: 400;
    font-size: 13px;
    line-height: 100%;
}

.alert-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.close-icon {
    cursor: pointer;
}

/*  Fin CSS  popup succes/echec... */