/* Variables de couleur pour les thèmes (identiques aux précédents) */
:root {
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* Thème Clair */
    --bg-color-light: #f4f7fc; --text-color-light: #333; --header-bg-light: #ffffff; --card-bg-light: #ffffff; --border-color-light: #e0e0e0; --input-bg-light: #fff; --input-readonly-bg-light: #e9ecef; --input-border-light: #ced4da; --input-focus-border-light: #80bdff; --primary-color-light: #007bff; --primary-text-light: #ffffff; --secondary-color-light: #6c757d; --action-button-bg-light: #28a745; --action-button-text-light: #ffffff; --shadow-light: 0 2px 10px rgba(0,0,0,0.1); --button-hover-bg-light: #0056b3; --action-button-hover-bg-light: #218838; --label-color-light: #495057; --divider-color-light: #dee2e6; --section-title-border-light: #007bff30;

    /* Thème Sombre */
    --bg-color-dark: #1a1a2e; --text-color-dark: #e0e0e0; --header-bg-dark: #162447; --card-bg-dark: #1f4068; --border-color-dark: #40405f; --input-bg-dark: #2c3e50; --input-readonly-bg-dark: #253342; --input-border-dark: #40405f; --input-focus-border-dark: #1e90ff; --primary-color-dark: #1e90ff; --primary-text-dark: #ffffff; --secondary-color-dark: #7f8c8d; --action-button-bg-dark: #2ecc71; --action-button-text-dark: #1a1a2e; --shadow-dark: 0 2px 10px rgba(0,0,0,0.3); --button-hover-bg-dark: #0073e6; --action-button-hover-bg-dark: #25a25a; --label-color-dark: #bdc3c7; --divider-color-dark: #40405f; --section-title-border-dark: #1e90ff30;
    /* Logo */
    --logo-filter-dark: invert(95%) sepia(5%) saturate(150%) hue-rotate(180deg) brightness(100%) contrast(90%);
        /* Pour rendre un logo sombre visible sur fond sombre */
}

body {font-family: var(--font-family); margin: 0; transition: background-color 0.3s, color 0.3s;}
body.light-mode {background-color: var(--bg-color-light); color: var(--text-color-light);}
body.dark-mode {background-color: var(--bg-color-dark); color: var(--text-color-dark);}
.page-container {display: flex; flex-direction: column; min-height: 100vh;}

/* --- Header (inchangé) --- */
.header {display: flex; align-items: center; justify-content: space-between; padding: 15px 25px; position: sticky; top: 0; z-index: 1000;}
body.light-mode .header {background-color: var(--header-bg-light); border-bottom: 1px solid var(--border-color-light); box-shadow: var(--shadow-light);}
body.dark-mode .header {background-color: var(--header-bg-dark); border-bottom: 1px solid var(--border-color-dark); box-shadow: var(--shadow-dark);}
.header .logo img {height: 80px;/*filter: var(--logo-filter-dark);*/}
.header h1 {font-size: 1.5em; margin: 0; text-align: center; flex-grow: 1;}
.header .header-actions {display: flex; align-items: center;}
.header .header-actions button {margin-left: 10px; padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; font-weight: 500;}
body.light-mode .header .header-actions button {background-color: var(--secondary-color-light); color: var(--primary-text-light);}
body.dark-mode .header .header-actions button {background-color: var(--secondary-color-dark); color: var(--text-color-dark);}
body.light-mode .header .header-actions button.back-button {background-color: var(--primary-color-light);}
body.dark-mode .header .header-actions button.back-button {background-color: var(--primary-color-dark);}
body.light-mode .header .header-actions button:hover, body.dark-mode .header .header-actions button:hover {opacity: 0.9;}


/* --- Content Area --- */
.content-area {padding: 20px; flex-grow: 1; display: flex; justify-content: center; align-items: flex-start;}

/* --- Registration Form --- */
.registration-form {
    width: 100%;
    max-width: 800px;
    padding: 25px;
    border-radius: 8px;
}
body.light-mode .registration-form {background-color: var(--card-bg-light); border: 1px solid var(--border-color-light); box-shadow: var(--shadow-light);}
body.dark-mode .registration-form {background-color: var(--card-bg-dark); border: 1px solid var(--border-color-dark); box-shadow: var(--shadow-dark);}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes par défaut */
    gap: 15px 20px; /* Espace vertical et horizontal */
}

.form-group {display: flex; flex-direction: column;}
.form-group.form-group-full {grid-column: 1 / -1;} /* Pour les champs pleine largeur */

.form-group label, .gender-group legend {
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.9em;
}
body.light-mode .form-group label, body.light-mode .gender-group legend {color: var(--label-color-light);}
body.dark-mode .form-group label, body.dark-mode .gender-group legend {color: var(--label-color-dark);}



.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="date"],
.form-group input[type="email"],
.form-group select,
.form-group input[type="file"] {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid;
    box-sizing: border-box;
    font-size: 0.95em;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
body.light-mode .form-group input, body.light-mode .form-group select {
    background-color: var(--input-bg-light);
    border-color: var(--input-border-light);
    color: var(--text-color-light);
}
body.dark-mode .form-group input, body.dark-mode .form-group select {
    background-color: var(--input-bg-dark);
    border-color: var(--input-border-dark);
    color: var(--text-color-dark);
}

body.light-mode .form-group input:focus, body.light-mode .form-group select:focus {
    border-color: var(--input-focus-border-light);
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
body.dark-mode .form-group input:focus, body.dark-mode .form-group select:focus {
    border-color: var(--input-focus-border-dark);
    box-shadow: 0 0 0 0.2rem rgba(30,144,255,.25);
}

/* Style pour le groupe de boutons radio Genre */
.gender-group {
    grid-column: 1 / -1; /* Prend toute la largeur dans la grille */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 0; /* Le gap de la grille gère l'espacement */
}
body.light-mode .gender-group {border: 1px solid var(--input-border-light);}
body.dark-mode .gender-group {border: 1px solid var(--input-border-dark);}

.gender-group legend {
    font-size: 0.9em;
    font-weight: 500;
    padding: 0 5px; /* Pour ne pas couper la bordure du fieldset */
    margin-left: 5px;
}
.radio-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Espace entre les options radio */
    padding-top: 5px;
}
.radio-option {
    display: flex;
    align-items: center;
}
.radio-option input[type="radio"] {
    margin-right: 6px;
    width: auto; /* Rétablir la largeur auto pour les radios */
    accent-color: var(--primary-color-light); /* Couleur de la coche pour thème clair */
}
body.dark-mode .radio-option input[type="radio"] {
    accent-color: var(--primary-color-dark); /* Couleur de la coche pour thème sombre */
}
.radio-option label {
    margin-bottom: 0; /* Annuler le margin-bottom des labels généraux */
    font-weight: normal;
    font-size: 0.95em;
}

/* Style pour input[type="file"] (similaire aux pages précédentes) */
.form-group input[type="file"] { padding: 7px; }
body.light-mode .form-group input[type="file"]::file-selector-button {
    padding: 6px 10px; border: 1px solid var(--input-border-light); border-radius: 4px;
    background-color: #e9ecef; color: var(--text-color-light); cursor: pointer; transition: background-color .15s ease-in-out;
}
body.dark-mode .form-group input[type="file"]::file-selector-button {
    padding: 6px 10px; border: 1px solid var(--input-border-dark); border-radius: 4px;
    background-color: #34495e; color: var(--text-color-dark); cursor: pointer; transition: background-color .15s ease-in-out;
}
body.light-mode .form-group input[type="file"]::file-selector-button:hover { background-color: #dde2e6; }
body.dark-mode .form-group input[type="file"]::file-selector-button:hover { background-color: #4a6278; }

/* Style pour select (similaire aux pages précédentes) */
.form-group select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%236c757d%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}
body.dark-mode .form-group select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%23bdc3c7%22%2F%3E%3C%2Fsvg%3E');
}

/* Actions du formulaire */
.form-actions {
    grid-column: 1 / -1; /* Assure que le bouton prend toute la largeur si à l'intérieur de la grille */
    margin-top: 25px;
    text-align: center;
}
.submit-button {
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
    width: auto; /* ou une largeur spécifique si désiré */
    min-width: 150px;
}
body.light-mode .submit-button {background-color: var(--primary-color-light); color: var(--primary-text-light);}
body.dark-mode .submit-button {background-color: var(--primary-color-dark); color: var(--primary-text-dark);}
body.light-mode .submit-button:hover {background-color: var(--button-hover-bg-light);}
body.dark-mode .submit-button:hover {background-color: var(--button-hover-bg-dark);}


/* --- Responsive Design --- */
@media (max-width: 768px) {
    .header {padding: 10px 15px; flex-direction: column; gap: 10px;}
    .header h1 {font-size: 1.3em; order: -1;} /* Met le titre en premier si le logo est petit */
    .header .header-actions {width: 100%; justify-content: space-around;}
    .content-area {padding: 15px; align-items: flex-start;} /* Aligner en haut pour voir le début du formulaire */
    .registration-form {padding: 20px;}
    .form-grid {grid-template-columns: 1fr;} /* Une seule colonne sur mobile */
    .form-group.form-group-full {grid-column: 1 / -1;} /* Redondant si déjà 1 colonne, mais garde la cohérence */
    .gender-group {grid-column: 1 / -1;}
}

@media (max-width: 480px) {
    .registration-form h2 {font-size: 1.4em;} /* Si vous ajoutez un H2 au formulaire */
    .form-group input, .form-group select, .radio-option label {font-size: 0.9em;}
    .submit-button {padding: 10px 25px; font-size: 1em; width: 100%;}
}