/* /assets/css/auth/register.css */


/* --- DÉPLACÉ ICI --- */
/* Hériter des styles de login.css (masquage menus/panels, styles de base auth) */
@import url('../assets.php?file=css/auth/login.css');
/* --- FIN DU DÉPLACEMENT --- */


/* Cibler spécifiquement la page d'inscription */
.register-page .tpl-nvc-alpha-panel-main {
    padding: 0 ; /* Retirer le padding interne du panel main, on le mettra dans le container enfant */
    overflow: hidden; /* EMPÊCHE LE PANEL MAIN LUI-MÊME DE SCROLLER */

    display: flex;
    justify-content: center; /* Centre horizontalement le form-container */
    align-items: center; /* Centre verticalement le form-container */
    height: calc(100% - 2 * var(--tpl-nvc-alpha-gap-double)); /* Prend la hauteur dispo moins les marges */
}

.register-form-container {
    width: 100%;
    max-width: 700px; /* Garde la largeur max */
    height: 100%; /* Prend toute la hauteur du panel main */
    padding: var(--tpl-nvc-alpha-gap-double); /* Réduire légèrement le padding */
    margin: 0 auto; /* Plus besoin de marges verticales ici */
    box-sizing: border-box;
    overflow-y: auto; /* PERMET AU CONTENEUR DU FORMULAIRE DE SCROLLER */
    overflow-x: hidden; /* Empêche le scroll horizontal */
    /* Cacher la barre de scroll visuellement */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}
.register-form-container::-webkit-scrollbar {
    display: none; /* Webkit */
    width: 0;
    height: 0;
}


/* S'assurer que le formulaire utilise bien l'espace */
.register-form-container .tpl-nvc-alpha-form {
    max-width: 100%;
    overflow: visible; /* OK */
    /* Ajouter un peu d'espace en bas pour ne pas coller au bord lors du scroll */
    padding-bottom: var(--tpl-nvc-alpha-gap-double);
}

.register-form-container .tpl-nvc-alpha-title {
    font-size: var(--tpl-nvc-alpha-font-size-xlarge);
    margin-bottom: var(--tpl-nvc-alpha-gap-triple);
}


.auth-subtitle {
    color: var(--tpl-nvc-alpha-font-color);
    opacity: 0.8;
    margin-bottom: var(--tpl-nvc-alpha-gap-double);
    font-size: var(--tpl-nvc-alpha-font-size-normal);
}


/* Styles pour les lignes de formulaire (prénom/nom, date/pays, etc.) */
.form-row {
    display: flex;
    flex-wrap: wrap; /* Permettre le passage à la ligne sur petit écran */
    gap: var(--tpl-nvc-alpha-gap-double); /* Espace entre les colonnes */
    margin-bottom: 0; /* Géré par les form-group internes */
}

.form-group-half {
    flex: 1 1 calc(50% - var(--tpl-nvc-alpha-gap-standard)); /* 50% moins la moitié du gap */
    min-width: 250px; /* Empêcher d'être trop petit */
}

.tpl-nvc-alpha-form .tpl-nvc-alpha-form-group {
    margin-bottom: var(--tpl-nvc-alpha-gap-double);
    text-align: left;
}

/* Style pour les labels */
.tpl-nvc-alpha-label {
    margin-bottom: 8px; /* Un peu plus d'espace sous le label */
}

/* Style pour les hints sous les champs */
.field-hint {
    display: block;
    font-size: var(--tpl-nvc-alpha-font-size-small);
    color: var(--tpl-nvc-alpha-font-color);
    opacity: 0.7;
    margin-top: 5px;
}

/* Barre de force du mot de passe */
#password-strength-container { /* cibler par ID */
    margin-top: 8px;
}

.tpl-nvc-alpha-progress {
    height: 5px;
    background-color: var(--tpl-nvc-alpha-bg-dark-25);
    border-radius: var(--tpl-nvc-alpha-radius-small);
    overflow: hidden;
    /* margin-top: 5px; */ /* Déplacé vers le conteneur */
}

.tpl-nvc-alpha-progress-bar {
    height: 100%;
    background-color: var(--tpl-nvc-alpha-color-5); /* Rouge par défaut (faible) */
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: var(--tpl-nvc-alpha-radius-small);
}

/* Couleurs de la barre de force */
.tpl-nvc-alpha-progress-bar.strength-weak { background-color: var(--tpl-nvc-alpha-color-5); } /* Rouge */
.tpl-nvc-alpha-progress-bar.strength-medium { background-color: var(--tpl-nvc-alpha-color-7); } /* Orange */
.tpl-nvc-alpha-progress-bar.strength-strong { background-color: var(--tpl-nvc-alpha-color-3); } /* Vert */

/* Sélection du rôle */
.role-selection .radio-group {
    display: flex;
    gap: var(--tpl-nvc-alpha-gap-double);
    margin-top: 10px;
}

/* Champs conditionnels */
.conditional-fields {
    border-left: 3px solid var(--tpl-nvc-alpha-color-2); /* Ligne bleue indicative */
    padding-left: var(--tpl-nvc-alpha-gap-standard);
    margin-top: var(--tpl-nvc-alpha-gap-double);
    margin-bottom: var(--tpl-nvc-alpha-gap-double);
    border-radius: var(--tpl-nvc-alpha-radius-small);
}

/* Grilles de sélection (Matières / Niveaux) */
.tpl-nvc-alpha-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--tpl-nvc-alpha-gap-standard);
    padding: var(--tpl-nvc-alpha-gap-standard);
    background-color: var(--tpl-nvc-alpha-bg-light-25);
    border-radius: var(--tpl-nvc-alpha-radius-small);
    margin-top: 5px;
    border: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.tpl-nvc-alpha-grid.is-invalid {
    border-color: var(--tpl-nvc-alpha-color-5);
    box-shadow: 0 0 5px var(--tpl-nvc-alpha-color-5);
}

/* Style de base pour les items cliquables */
.tpl-nvc-alpha-grid-item {
    background-color: var(--tpl-nvc-alpha-bg-dark-75); /* Fond légèrement plus visible */
    color: var(--tpl-nvc-alpha-font-color);
    border: 1px solid var(--tpl-nvc-alpha-bg-dark-100);
    padding: 8px 12px; /* Plus de padding pour un look bouton */
    border-radius: var(--tpl-nvc-alpha-radius-small);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    text-align: left; /* Alignement du texte */
    font-size: var(--tpl-nvc-alpha-font-size-small);
    display: inline-flex; /* Pour aligner icône et texte */
    align-items: center;
    width: 100%; /* S'assurer qu'il remplit la cellule de la grille */
    box-sizing: border-box; /* Inclure padding/border dans la largeur */
    font-family: var(--tpl-nvc-alpha-font-family); /* Hériter la police */
}

.tpl-nvc-alpha-grid-item:hover {
    background-color: var(--tpl-nvc-alpha-bg-light-50);
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--tpl-nvc-alpha-bg-dark-100);
}

.tpl-nvc-alpha-grid-item:active {
    transform: scale(0.98); /* Léger effet d'appui */
}

/* Style pour l'item sélectionné */
.tpl-nvc-alpha-grid-item.is-selected {
    background-color: var(--tpl-nvc-alpha-color-2); /* Fond bleu */
    border-color: var(--tpl-nvc-alpha-bg-light-100); /* Bordure bleue */
    color: var(--tpl-nvc-alpha-bg-dark-100); /* Texte sombre pour contraste */
}
/* Ajuster le filtre de l'icône quand sélectionné */
.tpl-nvc-alpha-grid-item.is-selected .subject-icon {
     filter: brightness(0) saturate(100%); /* Icône noire */
}



.tpl-nvc-alpha-icon.subject-icon {
    filter: none; /* Garder ce style pour l'état non sélectionné */
    opacity: 0.9;
    vertical-align: middle;
    transition: filter 0.2s ease; /* Ajouter transition pour le filtre */
}

.tpl-nvc-alpha-grid-item:hover .subject-icon {
    filter: brightness(0) saturate(100%);
}

/* Groupe Termes & Conditions */
.terms-group .tpl-nvc-alpha-checkbox-wrapper {
    margin-bottom: 0; /* Pas de marge basse si c'est le seul élément */
}
.terms-group .tpl-nvc-alpha-checkbox-label {
    font-size: var(--tpl-nvc-alpha-font-size-small);
}
.terms-group .tpl-nvc-alpha-link {
    font-size: var(--tpl-nvc-alpha-font-size-normal);
    text-decoration: underline;
    color: var(--tpl-nvc-alpha-color-4);
}
.terms-group .tpl-nvc-alpha-link:hover {
     color: var(--tpl-nvc-alpha-color-7);
}

/* Messages d'erreur */
.tpl-nvc-alpha-input-error {
    color: white;
    font-size: var(--tpl-nvc-alpha-font-size-small);
    text-shadow: 2px 2px 4px red;
    margin-top: 5px;
    min-height: 1.2em; /* Réserver l'espace même si vide */
    display: block; /* Assurer qu'il prend de la place */
}
.subjects-error, .levels-error {
    display: block; /* Assurer que l'erreur de grille est visible */
    width: 100%;
    margin-top: 5px;
     /* Hérite des styles de .tpl-nvc-alpha-input-error */
    color: var(--tpl-nvc-alpha-color-5);
    font-size: var(--tpl-nvc-alpha-font-size-small);
    font-weight: bold;
    min-height: 1.2em;
}

/* Cacher les conteneurs d'inputs cachés */
#hidden-subjects-inputs,
#hidden-levels-inputs {
    display: none;
}

.tpl-nvc-alpha-input.is-invalid,
.tpl-nvc-alpha-select.is-invalid,
.tpl-nvc-alpha-textarea.is-invalid {
    border-color: var(--tpl-nvc-alpha-color-5) !important; /* Rouge */
}
.tpl-nvc-alpha-checkbox.is-invalid + .tpl-nvc-alpha-checkbox-label::before,
.tpl-nvc-alpha-radio.is-invalid + .tpl-nvc-alpha-radio-label::before {
     border: 1px solid var(--tpl-nvc-alpha-color-5) !important;
     box-shadow: 0 0 5px var(--tpl-nvc-alpha-color-5); /* Effet lumineux d'erreur */
}

.button-block {
    width: 100%;
    padding: 12px 16px;
    font-weight: bold;
}

.auth-footer-link {
    margin-top: var(--tpl-nvc-alpha-gap-triple);
    text-align: center;
    font-size: var(--tpl-nvc-alpha-font-size-normal);
    /* Ajouter un padding pour éviter la proximité avec le bas */
    padding-bottom: var(--tpl-nvc-alpha-gap-standard);
}

.auth-footer-link p {
    margin: 0;
    color: var(--tpl-nvc-alpha-font-color);
    opacity: 0.9;
}

/* Styles pour feedback pending */
.tpl-nvc-alpha-pending-feedback {
    color: var(--tpl-nvc-alpha-color-2); /* Bleu pour pending */
    font-size: var(--tpl-nvc-alpha-font-size-small);
    margin-top: 5px;
    font-style: italic;
    min-height: 1.2em; /* Réserver l'espace */
    display: block;
}
.tpl-nvc-alpha-input.is-pending {
    border-color: var(--tpl-nvc-alpha-color-2) !important;
}

/* Style pour bouton désactivé */
.tpl-nvc-alpha-button.button-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--tpl-nvc-alpha-bg-dark-25); /* Fond plus sombre */
    outline-color: grey; /* Contour gris */
}


/* Style pour les champs valides */
.tpl-nvc-alpha-input.is-valid,
.tpl-nvc-alpha-select.is-valid,
.tpl-nvc-alpha-textarea.is-valid {
    border-color: var(--tpl-nvc-alpha-color-3) !important; /* Vert */
}


.tpl-nvc-alpha-checkbox.is-valid + .tpl-nvc-alpha-checkbox-label::before,
.tpl-nvc-alpha-radio.is-valid + .tpl-nvc-alpha-radio-label::before {
     border: 1px solid var(--tpl-nvc-alpha-color-3) !important; /* Contour vert */
}

/* S'assurer que le style invalide prime sur le valide si les deux sont présents (ne devrait pas arriver mais par sécurité) */
.tpl-nvc-alpha-input.is-invalid,
.tpl-nvc-alpha-select.is-invalid,
.tpl-nvc-alpha-textarea.is-invalid {
    border-color: var(--tpl-nvc-alpha-color-5) !important; /* Rouge */
}
.tpl-nvc-alpha-checkbox.is-invalid + .tpl-nvc-alpha-checkbox-label::before,
.tpl-nvc-alpha-radio.is-invalid + .tpl-nvc-alpha-radio-label::before {
     border: 1px solid var(--tpl-nvc-alpha-color-5) !important;
}


/* Assurer que les messages d'erreur pour les grilles sont bien affichés */
.tpl-nvc-alpha-input-error.subjects-error,
.tpl-nvc-alpha-input-error.levels-error {
    display: block; /* Force l'affichage */
    width: 100%;
    margin-top: 5px;
    /* Styles hérités de .tpl-nvc-alpha-input-error */
}

/* Responsive pour petits écrans */
@media (max-width: 600px) {
    .form-group-half {
        flex: 1 1 100%; /* Prend toute la largeur sur petit écran */
    }
    .form-row {
        gap: 0; /* Pas de gap horizontal */
    }
    .register-form-container {
        max-width: 100%; /* Prend toute la largeur dispo */
        padding: var(--tpl-nvc-alpha-gap-standard); /* Padding encore réduit */
    }
    .tpl-nvc-alpha-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile */
    }
}