body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #ece6d8;
    font-family: Arial, sans-serif;
}

/* HEADER */

.top-header {
    height: 110px;
    background: white;
    border-bottom: 1px solid #9dc7d7;
    color: #0f7e84;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    padding: 0 30px;
}

.return-link {
    color: #0f7e84;
    text-decoration: none;
    font-size: 18px;
}

.logo {
    height: 80px;
}

.header-left {
    justify-self: start;
}

.header-center {
    justify-self: center;
}

.header-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-right a {
    color: #0f7e84 !important;
    text-decoration: none !important;
    text-align: end;
}

.header-right a:focus,
.header-right a:visited {
    color: #0f7e84;
    text-decoration: none;
    text-align: end;
}

.top-header {
    height: 110px;
    background: white;
    border-bottom: 1px solid #9dc7d7;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 30px;
}

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}


/* FORM */

.register-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem
}

.register-card {
    width: 480px;
    background: #f7f7f7;
    border: 1px solid #999;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.register-card h1 {
    text-align: center;
    color: #0f7e84;
    font-size: 48px;
    margin: 20px 0;
    border-bottom: 1px solid #9dc7d7;
    padding-bottom: 10px;
}

.intro {
    margin: 20px;
    color: #444;
    font-style: italic;
}

.field {
    margin: 18px 20px;
}

.field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.field input {

    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #bdbdbd;
    font-size: 14px;
}

button {
    background: #0f7e84;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin: 20px;
}

button:hover {
    opacity: .9;
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 45px;
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;

    transform: translateY(-50%);

    cursor: pointer;
    color: #666;
    font-size: 18px;
}

.toggle-password:hover {
    color: #0f7e84;
}

.form-errors {
    margin: 15px 20px;
    padding: 10px;

    background: #ffeaea;
    border: 1px solid #ffb3b3;

    color: #c62828;
    border-radius: 8px;
}

.form-errors p {
    margin: 5px 0;
}

/* Style pour les messages d'erreurs sous les champs */
.field-error-text {
    color: #d32f2f;
    font-size: 12px;
    margin-top: 5px;
    display: block;
    font-weight: 500;
}

/* Style pour la boîte d'alerte globale en haut du formulaire */
.global-errors {
    background-color: #ffebee;
    border: 1px solid #ffcdd2;
    color: #b71c1c;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 13px;
}

.global-errors p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Bouton REGISTER aux couleurs de la maquette */
.btn-submit-register {
    width: 100%;
    background-color: #b18237; /* Couleur or/miel de Lioness */
    color: white;
    border: none;
    padding: 12px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.2s;
}

.btn-submit-register:hover {
    background-color: #926922;
}

/* FOOTER */

footer {
    background: #0f7e84;
    color: white;
    padding: 20px 0;
    text-align: center;
}

footer a {
    color: white;
    text-decoration: none;
    font-size: 13px;
}

//* ==========================================================================
    SECTION : Langues
   ========================================================================== */

.select-language {
    position: relative;
    display: inline-block;
}

/* Texte de la langue actuelle (ex: "EN") */
.current-language {
    color: #04757D;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Petite flèche Font Awesome / Bootstrap Icons */
.style-arrow {
    color: #04757D;
    font-size: 12px;
    pointer-events: none;
}

/* Le rectangle/menu déroulant contenant les options */
.language-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 1050;
    font-weight: bold;
    background: #04757D;
    border-radius: 8px;          /* Remis pour de jolis angles arrondis */
    padding: 5px 0;
    min-width: 75px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;            /* Empêche le fond du bouton de dépasser des arrondis */
}

/* Ouverture au survol */
.select-language:hover .language-options {
    display: block;
}

/* Style des boutons "FR" et "EN" à l'intérieur */
.language-options button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;          /* Écrase les 20px de marge globale */
    padding: 8px 0 !important;      /* Centre verticalement avec un espace propre */
    background: transparent !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;  /* Centre parfaitement FR et EN au milieu */
    border: none !important;
    border-radius: 0 !important;    /* Pas d'arrondis individuels pour les boutons */
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Effet au survol d'une option (FR ou EN) */
.language-options button:hover {
    background-color: rgba(255, 255, 255, 0.2) !important; /* Effet de survol translucide élégant */
    color: white !important;
}