/**
 * Styles pour le formulaire d'inscription public, alignés avec le design du catalogue.
 */

/* Appliquer les variables de thème du catalogue au body de la page d'inscription */
.page-template-default, 
.page { /* Cibles communes pour une page WordPress */
    background-color: var(--phcla-bg, #f4f7f6);
}

.phcla-registration-form-wrapper {
    max-width: 600px;
    margin: 2rem auto;
    background: var(--phcla-bg-card, #fff); /* Fond blanc de la carte */
    border-radius: var(--phcla-border-radius, 8px);
    box-shadow: var(--phcla-shadow, 0 4px 15px rgba(0, 0, 0, 0.1));
    overflow: hidden; /* Important pour les coins arrondis des en-têtes */
    border: 1px solid var(--phcla-border, #e0e0e0);
    transition: background-color 250ms, border-color 250ms;
}

.phcla-form {
    padding: 0;
}

/* [CORRIGÉ] Style des en-têtes de section (similaire à la sidebar) */
.phcla-form h2 {
    background-color: var(--phcla-primary, #2ecc71);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 12px;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
html.phcla-dark-mode .phcla-form h2 {
    background-color: var(--phcla-primary-dark);
}

.phcla-form p.description {
    margin: 0;
    padding: 0 25px 1.5rem 25px;
    color: var(--phcla-text-secondary, #666);
    font-size: 0.9rem;
}

.phcla-form-fields {
    padding: 25px; /* Espace pour les champs */
}

.phcla-form-group {
    margin-bottom: 1.5rem;
}
.phcla-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--phcla-text, #444);
}
.phcla-form-group input[type="text"],
.phcla-form-group input[type="email"],
.phcla-form-group input[type="tel"],
.phcla-form-group input[type="password"],
.phcla-form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--phcla-border, #ccc);
    border-radius: 4px;
    font-size: 1rem;
    background-color: var(--phcla-bg, #fff);
    color: var(--phcla-text, #333);
    transition: border-color 0.2s, background-color 250ms;
}
.phcla-form-group input:focus,
.phcla-form-group textarea:focus {
    outline: none;
    border-color: var(--phcla-primary, #2ecc71);
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.2);
}

.phcla-required {
    color: #e74c3c;
}

.phcla-form-error {
    color: #e74c3c;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: block;
    min-height: 1em;
}

.phcla-password-strength {
    height: 5px;
    width: 0%;
    background: #ddd;
    margin-top: 5px;
    border-radius: 5px;
    transition: width 0.3s, background-color 0.3s;
    font-size: 0.7rem;
    color: white;
    text-align: right;
    padding-right: 5px;
    line-height: 1.2;
}
.phcla-password-strength.is-weak { width: 33%; background-color: #e74c3c; }
.phcla-password-strength.is-medium { width: 66%; background-color: #f39c12; }
.phcla-password-strength.is-strong { width: 100%; background-color: #2ecc71; }


.phcla-form-group--checkbox {
    display: flex;
    align-items: center;
}

.phcla-form-group--checkbox input {
    margin-right: 0.5rem;
}

.phcla-form-group--checkbox label {
    margin-bottom: 0;
    font-weight: 400;
}

.phcla-form-submit {
    margin-top: 2rem;
    padding: 0 25px 25px 25px;
}

.phcla-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.phcla-btn-primary { background-color: #2ecc71; color: white; width: 100%; }
.phcla-btn-primary:hover { background-color: #27ae60; }
.phcla-btn:active { transform: scale(0.98); }

.phcla-form-login-link { text-align: center; padding-bottom: 25px; margin-top: 1.5rem; font-size: 0.9rem; }

.phcla-notice {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
    border-left: 4px solid;
}
.phcla-notice--error {
    background-color: #fbeae5;
    border-color: #e74c3c;
    color: #c0392b;
}

.phcla-success-page {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    text-align: center;
    background-color: #f0fff4;
    border: 1px solid #2ecc71;
    border-radius: 8px;
}

/* [NOUVEAU] Styles pour la page de succès */
.phcla-success-page-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 2rem;
}

.phcla-success-card {
    background: var(--phcla-bg-card, #fff);
    border-radius: var(--phcla-border-radius, 8px);
    box-shadow: var(--phcla-shadow, 0 4px 15px rgba(0, 0, 0, 0.1));
    overflow: hidden;
    border: 1px solid var(--phcla-border, #e0e0e0);
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.phcla-success-header {
    background-color: var(--phcla-primary, #2ecc71);
    color: #fff;
    padding: 15px;
}
.phcla-success-header h2 {
    margin: 0;
    font-size: 22px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
html.phcla-dark-mode .phcla-success-header {
    background-color: var(--phcla-primary-dark);
}

.phcla-success-body {
    padding: 25px;
    color: var(--phcla-text-secondary, #666);
    line-height: 1.6;
}
.phcla-success-body p {
    margin: 0 0 15px;
}
.phcla-success-body p:last-child {
    margin-bottom: 0;
}

.phcla-success-footer {
    padding: 25px;
    border-top: 1px solid var(--phcla-border, #e0e0e0);
}