/* =========================================
   VARIABLES GLOBALES
   ========================================= */
:root {
    /* Couleurs de base */
    --bg-right: #fdf7eb;
    --bg-container: #ffffff;
    --color-primary: #000000;
    --color-secondary: #ffffff;
    --color-accent: #fbe6bd;
    --color-divider: #dcdcdc;
    
    /* Couleurs spécifiques (Login) */
    --color-link: #4A89DF;
    --color-text-muted: #555555;

    /* Typographie */
    --font-family: Arial, sans-serif;
    --font-size-title: 50px;
    --font-size-icon: 25px;
    --font-size-large: 18px;
    --font-size-medium: 17px;
    --font-size-base: 16px;
    --font-size-small: 14px;

    /* Arrondis */
    --radius-small: 8px;
    --radius-medium: 15px;
    --radius-large: 25px;
    --radius-xlarge: 30px;

    /* Images de fond */
    --bg-image-signup: url("/images/Signuppage.jpg");
    --bg-image-login: url("/images/Loginpage.jpg");
}

/* =========================================
   RESET ET STRUCTURE GÉNÉRALE
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}

body {
    display: flex;
    height: 100vh;
}

/* =========================================
   CÔTÉ GAUCHE (Images de fond)
   ========================================= */
.left-side {
    width: 50%;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Ajoute la classe 'signup-bg' ou 'login-bg' sur ton élément .left-side en HTML */
.left-side.signup-bg {
    background-image: var(--bg-image-signup);
}

.left-side.login-bg {
    background-image: var(--bg-image-login);
}

/* =========================================
   CÔTÉ DROIT (Conteneur principal)
   ========================================= */
.right-side {
    width: 50%;
    height: 100vh;
    background-color: var(--bg-right);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Boîte blanche (Signup & Login) */
.right-side .container-signup,
.right-side .container-login {
    width: 650px;
    background-color: var(--bg-container);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-medium);
    padding: 70px 50px;
}

/* Titre h1 */
.right-side .container-signup h1,
.right-side .container-login h1 {
    margin: 0 0 35px 0;
    font-size: var(--font-size-title);
    font-weight: 900;
}

/* =========================================
   FORMULAIRES (Inputs & Boutons)
   ========================================= */
.right-side .signup-inputs,
.right-side .login-inputs {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Marges spécifiques aux formulaires */
.right-side .signup-inputs { margin-bottom: 25px; }
.right-side .login-inputs { margin-bottom: 15px; }

/* Champs de texte */
.right-side .signup-inputs input,
.right-side .login-inputs input {
    height: 55px;
    outline: none;
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-small);
    padding: 10px 20px;
    font-size: var(--font-size-base);
}

/* Conteneur des boutons submit */
.right-side .submit-signup,
.right-side .submit-login {
    width: 100%;
}

.right-side .submit-signup {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Boutons Submit */
.right-side .submit-signup button,
.right-side .submit-login button {
    width: 160px;
    height: 45px;
    border: none;
    border-radius: var(--radius-large);
    font-size: var(--font-size-base);
    font-weight: bold;
    text-transform: uppercase;
    color: var(--color-secondary);
    background-color: var(--color-primary);
    cursor: pointer;
}

/* Ligne de séparation */
.right-side hr {
    margin: 35px 0;
    height: 1px;
    border: none;
    background-color: var(--color-divider);
}

/* =========================================
   BOUTONS SOCIAUX / OPTIONS (Google, Apple...)
   ========================================= */
.right-side .signup-options,
.right-side .login-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.right-side .signup-options .option,
.right-side .login-options .option {
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    width: 100%;
    height: 60px;
    padding: 0 25px;   
    position: relative;
    border-radius: var(--radius-xlarge);
}

.right-side .signup-options .option .option-icon,
.right-side .login-options .option .option-icon {
    width: 35px;
    display: flex;
    align-items: center;
    font-size: var(--font-size-icon);
    color: var(--color-primary);
}

.right-side .signup-options .option .option-link,
.right-side .login-options .option .option-link {
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    pointer-events: none;
}

.right-side .signup-options .option .option-link a,
.right-side .login-options .option .option-link a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--font-size-large);
    pointer-events: auto;
}

/* =========================================
   ÉLÉMENTS SPÉCIFIQUES AU LOGIN
   ========================================= */
.right-side .container-login .passwordForgotten {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 30px;
}

.right-side .container-login .passwordForgotten a {
    font-size: var(--font-size-small);
    color: var(--color-link);
    text-decoration: underline;
}

.right-side .login-newUser {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-medium);
}

.right-side .login-newUser p {
    color: var(--color-text-muted);
}

.right-side .login-newUser a {
    color: var(--color-link);
    text-decoration: underline;
}