/* ── Registration-specific overrides ────────────────────────────────────────
   Inherits all variables and base rules from company-login.css.
   ─────────────────────────────────────────────────────────────────────────── */

/* Wider card to accommodate more fields */
.cr-card-wide {
    max-width: 1020px;
}

/* Right panel: scrollable so tall forms stay accessible on small screens */
.cr-form-panel-scroll {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cr-form-inner {
    padding: 8px 0;
}

/* Section label (Company / Manager) */
.cr-section-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--cl-primary);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin: 22px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--cl-border);
}

/* Two-column grid for first / last name */
.cr-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 500px) {
    .cr-two-col {
        grid-template-columns: 1fr;
    }
}

/* Textarea field (address) */
.cr-textarea {
    height: auto !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    resize: vertical;
    min-height: 52px;
}

/* Native select styled like text inputs */
.cr-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.cr-select-wrap::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cl-muted);
    pointer-events: none;
}

/* Password strength hint */
.cr-hint {
    font-size: .68rem;
    color: var(--cl-muted);
    margin-top: 2px;
    display: block;
}

/* Submit button — full width, same style as login */
.cr-btn-submit {
    margin-top: 24px;
    width: 100%;
}

/* Already have account link */
.cr-login-link {
    text-align: center;
    margin-top: 18px;
    font-size: .83rem;
    color: var(--cl-muted);
}

    .cr-login-link a {
        color: var(--cl-primary);
        font-weight: 600;
        margin-left: 4px;
        text-decoration: none;
        transition: var(--cl-transition);
    }

        .cr-login-link a:hover {
            color: var(--cl-cyan);
            text-decoration: underline;
        }

/* Validation messages (make visible when MVC adds them) */
.field-validation-error {
    display: block;
    font-size: .72rem;
    color: var(--cl-danger);
    font-weight: 500;
    margin-top: 3px;
}

.input-validation-error {
    border-color: var(--cl-danger) !important;
}

/* ── Champ téléphone avec préfixe ───────────────────────────────── */
.cr-phone-wrap {
    display: flex;
    align-items: stretch;
}

.cr-phone-prefix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 0 10px;
    background: var(--cl-surface);
    border: 1.5px solid var(--cl-border);
    border-right: none;
    border-radius: var(--cl-radius-sm) 0 0 var(--cl-radius-sm);
    color: var(--cl-muted);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: var(--cl-transition);
    user-select: none;
}

.cr-phone-prefix--active {
    background: var(--cl-light-blue);
    color: var(--cl-primary);
    border-color: var(--cl-primary);
    min-width: 58px;
}

.cr-phone-input {
    border-radius: 0 var(--cl-radius-sm) var(--cl-radius-sm) 0 !important;
    padding-left: 14px !important; /* override icône gauche — pas d'icône ici */
}

.cr-phone-wrap:focus-within .cr-phone-prefix {
    border-color: var(--cl-primary);
    background: var(--cl-light-blue);
    color: var(--cl-primary);
}

.input-validation-error + .cr-phone-prefix,
.cr-phone-wrap:has(.input-validation-error) .cr-phone-prefix {
    border-color: var(--cl-danger);
}

html, body {
    height: 100%;
    font-family: 'DM Sans', sans-serif;
    background: #0D82C8;
    color: var(--cl-text);
    -webkit-font-smoothing: antialiased;
}

    /* ── Fond animé ── */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
    }
/* ===== GLOBAL LAYOUT ===== */
.cr-card-wide {
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== FORM CONTAINER (CENTRÉ + LIMITÉ) ===== */
.cr-form-inner {
    max-width: 900px; /* 🔥 largeur idéale */
    margin: 0 auto;
    width: 100%;
}

/* ===== SPLIT ENTREPRISE / MANAGER ===== */
.cr-form-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr; /* léger déséquilibre esthétique */
    gap: 28px;
    align-items: start;
}

/* Colonnes */
.cr-form-column {
    min-width: 0;
}

/* ===== CHAMPS ===== */
.cl-field {
    width: 100%;
    margin-bottom: 18px;
}

/* ===== DEUX CHAMPS (nom/prénom etc) ===== */
.cr-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ===== BOUTON ===== */
.cr-btn-submit {
    margin-top: 24px;
    width: 100%;
}

/* ===== TITRES SECTIONS ===== */
.cr-section-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: #3b5b7a;
    border-bottom: 1px solid #e5edf5;
    padding-bottom: 6px;
}

/* ===== INPUT STYLE AMÉLIORÉ ===== */
.cl-field-input {
    width: 100%;
    height: 44px;
    border-radius: 8px;
}

/* textarea */
.cr-textarea {
    min-height: 70px;
    resize: vertical;
}

/* ===== RESPONSIVE ===== */

/* Tablette */
@media (max-width: 1100px) {
    .cr-form-inner {
        max-width: 95%;
    }
}

/* Mobile */
@media (max-width: 900px) {
    .cr-form-split {
        grid-template-columns: 1fr; /* 🔥 passe en 1 colonne */
        gap: 16px;
    }

    .cr-form-inner {
        max-width: 100%;
        padding: 0 16px;
    }
}

/* Petit mobile */
@media (max-width: 600px) {
    .cr-two-col {
        grid-template-columns: 1fr;
    }
}