.container-registration {
    background-color: #005;
    display: grid; 
    grid-template-columns: 4.7% 9.7% 11.7% 10.7% 3.7% 7.7% 3.7% 7.7% 3.7% 10.7% 11.7% 9.7% 4.7%;
    gap: 0px 0px; 
    margin: 0;
    padding: 0;
    border: thick double #006;
    border-width: 0.4em;
}
.container-registration:hover { 
    background-color: #004;
    border: thick double #009;
    border-width: 0.4em;
}

@media only screen and (max-width: 700px) {
    .container-registration {
        border-radius: 350px;
        grid-template-rows: 40px 60px 10px 10px 10px 130px 40px 130px 40px 320px 40px 220px 40px 220px 40px 60px 40px 400px 40px 130px 130px 130px 130px 40px 60px 60px 60px 60px; 
        grid-template-areas: 
        ". . . . . . . . . . . . ."
        ". . . title-registration title-registration title-registration title-registration title-registration title-registration title-registration . . ."
        ". . . . . . . . . . . . ."
        ". . . . . notification-registration notification-registration notification-registration . . . . ."
        ". . . . . . . . . . . . ."
        ". firstname-registration firstname-registration firstname-registration firstname-registration firstname-registration . lastname-registration lastname-registration lastname-registration lastname-registration lastname-registration ."
        ". . . . . . . . . . . . ."
        ". email-registration email-registration email-registration email-registration email-registration . password-registration password-registration password-registration password-registration password-registration ."
        ". . . . . . . . . . . . ."
        ". user-profile-image user-profile-image user-profile-image user-profile-image user-profile-image user-profile-image user-profile-image user-profile-image user-profile-image user-profile-image user-profile-image ."
        ". . . . . . . . . . . . ."
        ". user-category user-category user-category user-category user-category user-category user-category user-category user-category user-category user-category ."
        ". . . . . . . . . . . . ."
        ". user-comment-registration user-comment-registration user-comment-registration user-comment-registration user-comment-registration user-comment-registration user-comment-registration user-comment-registration user-comment-registration user-comment-registration user-comment-registration ."
        ". . . . . . . . . . . . ."
        ". . user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation . ."
        ". . . . . . . . . . . . ."
        ". map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps ."
        ". . . . . . . . . . . . ."
        ". user-lng user-lng user-lng user-lng user-lng user-lng user-lat user-lat user-lat user-lat user-lat ."
        ". user-address user-address user-address user-address user-address user-address user-address user-address user-address user-address user-address ."
        ". user-region user-region user-region user-region user-region user-region user-codePostal user-codePostal user-codePostal user-codePostal user-codePostal ."
        ". user-town user-town user-town user-town user-town user-town user-country user-country user-country user-country user-country ."
        ". . . . . . . . . . . . ."
        ". . agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration . . ."
        ". . . submit-registration submit-registration submit-registration submit-registration submit-registration submit-registration submit-registration . . ."
        ". . . . . . . . . . . . ."
        ". . already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration . ."; 
    }
}

@media only screen and (min-width: 700px) {
    .container-registration {
        border-radius: 35%;
        grid-template-rows: 40px 60px 10px 10px 10px 130px 40px 130px 40px 220px 40px 60px 40px 400px 40px 130px 130px 130px 40px 60px 60px 60px 60px; 
        grid-template-areas: 
        ". . . . . . . . . . . . ."
        ". . . title-registration title-registration title-registration title-registration title-registration title-registration title-registration . . ."
        ". . . . . . . . . . . . ."
        ". . . . . notification-registration notification-registration notification-registration . . . . ."
        ". . . . . . . . . . . . ."
        ". . firstname-registration firstname-registration firstname-registration firstname-registration . lastname-registration lastname-registration lastname-registration lastname-registration . ."
        ". . . . . . . . . . . . ."
        ". email-registration email-registration email-registration . user-profile-image user-profile-image user-profile-image . password-registration password-registration password-registration ."
        ". . . . . user-profile-image user-profile-image user-profile-image . . . . ."
        ". user-category user-category user-category . user-profile-image user-profile-image user-profile-image . user-comment-registration user-comment-registration user-comment-registration ."
        ". . . . . . . . . . . . ."
        ". . user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation . ."
        ". . . . . . . . . . . . ."
        ". map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps map-gps ."
        ". . . . . . . . . . . . ."
        ". user-lng user-lng user-lng user-lng user-lng user-lng user-lat user-lat user-lat user-lat user-lat ."
        ". user-address user-address user-address user-address user-address user-address user-address user-codePostal user-codePostal user-codePostal user-codePostal ."
        ". user-town user-town user-town user-town user-region user-region user-region user-region user-region user-country user-country ."
        ". . . . . . . . . . . . ."
        ". . . agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration . . ."
        ". . . . submit-registration submit-registration submit-registration submit-registration submit-registration . . . ."
        ". . . . . . . . . . . . ."
        ". . already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration . ."; 
    }
} 

@media only screen and (min-width: 1200px) {
    .container-registration {
        border-radius: 50%;
        grid-template-rows: 40px 60px 10px 10px 10px 130px 40px 130px 40px 220px 40px 60px 40px 130px 130px 130px 40px 60px 60px 60px 60px; 
        grid-template-areas: 
        ". . . . . . . . . . . . ."
        ". . . . title-registration title-registration title-registration title-registration title-registration . . . ."
        ". . . . . . . . . . . . ."
        ". . . . . notification-registration notification-registration notification-registration . . . . ."
        ". . . . . . . . . . . . ."
        ". . . firstname-registration firstname-registration firstname-registration . lastname-registration lastname-registration lastname-registration . . ."
        ". . . . . . . . . . . . ."
        ". . email-registration email-registration . user-profile-image user-profile-image user-profile-image . password-registration password-registration . ."
        ". . . . . user-profile-image user-profile-image user-profile-image . . . . ."
        ". user-category user-category user-category . user-profile-image user-profile-image user-profile-image . user-comment-registration user-comment-registration user-comment-registration ."
        ". . . . . . . . . . . . ."
        ". . . user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation user-title-localisation . . ."
        ". . . . . . . . . . . . ."
        ". map-gps map-gps map-gps map-gps map-gps . user-lng user-lng user-lng user-lat user-lat ."
        ". map-gps map-gps map-gps map-gps map-gps . user-address user-address user-address user-codePostal user-codePostal ."
        ". map-gps map-gps map-gps map-gps map-gps . user-town user-town user-region user-region user-country ."
        ". . . . . . . . . . . . ."
        ". . . agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration agree-terms-registration . . ."
        ". . . . . submit-registration submit-registration submit-registration . . . . ."
        ". . . . . . . . . . . . ."
        ". . already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration already-registered-registration . ."; 
    }
}

.title-registration { 
    grid-area: title-registration;
    background-color: #004;
    border-radius: 50%;
    border: thick double #006;
    border-width: 0.4em;
}
.title-registration:hover { 
    background-color: #007;
    border: thick double #009;
    border-width: 0.4em;
}
.notification-registration { 
    grid-area: notification-registration;
    color: #f90;
    font-size: 25px;
    text-align: center; 
}
.notification-registration:hover { 
    color: #009;
}
.firstname-registration { 
    grid-area: firstname-registration;
    background-color: #000055;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid #000099;
}
.firstname-registration:hover { 
    background-color: #000066;
    border: 1px solid #0000aa;
}
.firstname-registration .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.firstname-registration .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.firstname-registration .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.lastname-registration { 
    grid-area: lastname-registration;
    background-color: #000055;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid #000099;
}
.lastname-registration:hover { 
    background-color: #000066;
    border: 1px solid #0000aa;
}
.lastname-registration .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.lastname-registration .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.lastname-registration .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.email-registration { 
    grid-area: email-registration; 
    background-color: #000055;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid #000099;
}
.email-registration:hover { 
    background-color: #000066;
    border: 1px solid #0000aa;
}
.email-registration .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.email-registration .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.email-registration .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.user-profile-image { 
    grid-area: user-profile-image;
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-radius: 25px;
}
.user-profile-image:hover { 
    background-color: #000066;
    border: 1px solid #0000aa;
}
.user-profile-image .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.user-profile-image .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.user-profile-image .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.password-registration { 
    grid-area: password-registration; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-radius: 25px;
}
.password-registration:hover { 
    background-color: #000066;
    border: 1px solid #0000aa;
}
.password-registration .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.password-registration .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.password-registration .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.user-category {
    grid-area: user-category;
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-radius: 25px;
}
.user-category:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.user-category-form {
    background-color: #008;
    padding: 16px;
    height: 148px;
    border: none;
    border-radius: 15px;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.user-category-item {
    width: 100px;
    height: 100px;
}
.user-category-item input[type="radio"] {
    position: relative;
    z-index: 2;
    width: 35px;
    height: 35px;
}
.user-category-label {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #000088;
    font-size: 12px;
    color: #000055;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
    cursor: pointer;
}
.user-category-label:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.user-category-icon {
    width: 100%;
    height: 100%;
}
.user-category-text {
    background-color: #ff9000;
    width: 100%;
    height: 40%;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.user-comment-registration { 
    grid-area: user-comment-registration; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    border-radius: 25px;
}
.user-comment-registration:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.user-comment-registration .form-label {
    color: #f90;
    font-weight: bold;
    text-align: center !important;
    display: block;
    width: 100%;
}
.user-comment-registration .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
    height: 129px;
    max-height: 180px;
}
.user-comment-registration .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.user-title-localisation { 
    grid-area: user-title-localisation; 
    background-color: #007;
    border-radius: 50%;
    border: thick double #006;
    border-width: 0.4em;
    text-align: center;
}
.user-title-localisation:hover {
    background-color: #006;
    border: thick double #009;
    border-width: 0.4em;
}
.map-gps { 
    grid-area: map-gps; 
    background-color: #000055;
    padding: 16px;
    border-radius: 25px;
    border: 1px solid #000099;
}
.map-gps:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.user-lat { 
    grid-area: user-lat; 
    background-color: #000055;
    padding: 16px;
    border-top-right-radius: 25px;
    border: 1px solid #000099;
}
.user-lat:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.user-lat .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.user-lat .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.user-lat .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.user-lng { 
    grid-area: user-lng; 
    background-color: #000055;
    padding: 16px;
    border-top-left-radius: 25px;
    border: 1px solid #000099;
}
.user-lng:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.user-lng .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.user-lng .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.user-lng .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.user-address { 
    grid-area: user-address;
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
}
.user-address:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.user-address .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.user-address .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.user-address .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.user-town { 
    grid-area: user-town; 
    background-color: #000055;
    padding: 16px;
    border-bottom-left-radius: 25px;
    border: 1px solid #000099;
}
.user-town:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.user-town .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.user-town .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.user-town .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.user-codePostal { 
    grid-area: user-codePostal; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
    white-space: nowrap; 
    overflow: hidden; 
}
.user-codePostal:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.user-codePostal .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.user-codePostal .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.user-codePostal .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.user-region { 
    grid-area: user-region; 
    background-color: #000055;
    padding: 16px;
    border: 1px solid #000099;
}
.user-region:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.user-region .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.user-region .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.user-region .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.user-country { 
    grid-area: user-country; 
    background-color: #000055;
    padding: 16px;
    border-bottom-right-radius: 25px;
    border: 1px solid #000099;
}
.user-country:hover {
    background-color: #000066;
    border: 1px solid #0000aa;
}
.user-country .form-label {
    color: #f90;
    font-weight: bold;
    margin-bottom: 8px;
    text-align: center !important;
    display: block;
    width: 100%;
}
.user-country .form-control {
    background-color: #000077;
    border: 1px solid #000099;
    border-radius: 15px;
    color: #f90;
    padding: 12px;
}
.user-country .form-control:focus {
    background-color: #000088;
    border-color: #0000ff;
    color: #f90;
    box-shadow: 0 0 0 0.2rem rgba(0, 0, 255, 0.25);
}
.agree-terms-registration { 
    grid-area: agree-terms-registration;
    font-size: 25px;
    color: #f90;
}
.submit-registration { 
    grid-area: submit-registration; 
}
.submit-registration-form {
    background-color: #f90;
    height: 50px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 25px;
    text-align: center;
    color: #005;
    border: thick double #fc6;
    border-width: 0.2em;
    border-radius: 50px;
    transition: 0.2s;
    overflow: hidden;
}
.submit-registration-form:hover {
    background-color: #00c;
    color: #f90;
    border: thick double #006;
    border-width: 0.3em;
    cursor: pointer;
}
.already-registered-registration { 
    grid-area: already-registered-registration;
    background-color: #007;
    width: 105%;
    margin-left: -3%;
    padding: 16px;
    font-size: 25px;
    text-align: center;
    color: #f90;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top: thick double #006;
    border-bottom: thick double #006;
    border-width: 0.4em;
    cursor: pointer;
}
.already-registered-registration:hover {
    background-color: #006;
    border-top: thick double #009;
    border-bottom: thick double #007;
    border-width: 0.4em;
}

/* Styles pour la prévisualisation de l'image de profil */
.profile-image-preview-container {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
}

.profile-image-preview {
    position: relative;
    display: inline-block;
    margin: 5px;
    border: 2px solid #000099;
    border-radius: 8px;
    overflow: hidden;
    background: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-image-preview-img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    display: block;
}

.delete-profile-image-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(255, 153, 0, 0.8);
    color: #009;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    z-index: 10;
}

.delete-profile-image-btn:hover {
    background-color: rgba(0, 0, 153, 1);
    transform: scale(1.1);
    color: #f90;
}