/* Bridge ERP — Page connexion (bc-) */

/* bridge-connexion.php — masquage Astra */
body.bc-active #masthead,
    body.bc-active .ast-page-header,
    body.bc-active .site-header,
    body.bc-active #colophon,
    body.bc-active .site-footer,
    body.bc-active .entry-header,
    body.bc-active .entry-footer,
    body.bc-active .ast-breadcrumbs-wrapper,
    body.bc-active .breadcrumb {
        display: none !important;
    }
    body.bc-active .site-content,
    body.bc-active #content,
    body.bc-active #primary,
    body.bc-active .ast-container,
    body.bc-active .ast-container-fluid {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    body.bc-active .entry-content {
        margin: 0 !important;
        padding: 0 !important;
    }
    body.bc-active {
        margin: 0 !important;
        padding: 0 !important;
    }
    body.bc-active .bc-page {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

/* bridge-connexion.php — page */
/* ═══════════════════════════════════════════════════════
       PAGE DE CONNEXION — Style cohérent avec home-portail
       ═══════════════════════════════════════════════════════ */

    .bc-page {
        --bc-pub-text: var(--bel-text-strong);
        --bc-pub-muted: var(--bel-text-muted);
        --bc-pub-soft: var(--bel-text-soft);
        --bc-pub-caption: var(--bel-caption);
        --bc-pub-surface: var(--bel-surface);
        --bc-pub-border: var(--bel-divider-soft);
        --bc-pub-divider: var(--bel-divider);
        --bc-pub-panel: var(--bel-surface-muted);
        --bc-pub-label: var(--bel-body);
        --bc-pub-link: var(--bel-link-hover);
        --bc-pub-link-dark: color-mix(in srgb, var(--bel-link-hover) 68%, var(--bel-text-strong));
        --bc-pub-accent: color-mix(in srgb, var(--bridge-accent) 55%, var(--bel-warning-border));
        --bc-pub-shadow: color-mix(in srgb, var(--bel-text-strong) 12%, transparent);
        --bc-pub-shadow-soft: color-mix(in srgb, var(--bel-text-strong) 4%, transparent);
        --bc-pub-input-bd: color-mix(in srgb, var(--bel-border) 85%, var(--bel-text-soft));
        font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
        background: linear-gradient(135deg, var(--bel-surface-muted) 0%, var(--bel-info-bg) 100%);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        color: var(--bc-pub-text);
        width: 100%;
        max-width: 100%;
    }
    .bc-page * { box-sizing: border-box; }
    .bc-page input:focus,
    .bc-page input:focus-visible,
    .bc-page button:focus-visible {
        outline: none !important;
    }

    /* ─── NAVIGATION ─── */
    .bc-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 32px;
        background: var(--bc-pub-surface);
        border-bottom: 1px solid var(--bc-pub-border);
    }
    .bc-nav-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--bc-pub-muted);
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        padding: 8px 14px;
        border-radius: 8px;
        transition: all 0.2s ease;
    }
    .bc-nav-back:hover {
        background: var(--bc-pub-divider);
        color: var(--bc-pub-text);
        gap: 12px;
    }
    .bc-nav-brand {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .bc-nav-logo {
        width: 40px;
        height: 40px;
        object-fit: contain;
        border-radius: 9px;
        background: var(--bc-pub-surface);
        padding: 3px;
    }
    .bc-nav-logo-placeholder {
        background: linear-gradient(135deg, var(--bel-info-bg), color-mix(in srgb, var(--bel-info-border) 55%, var(--bel-surface)));
        border: 2px solid var(--bc-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    .bc-nav-name {
        font-family: 'Playfair Display', serif;
        font-size: 17px;
        font-weight: 700;
        color: var(--bc-pub-text);
    }

    /* ─── CONTENU PRINCIPAL ─── */
    .bc-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 24px;
    }

    .bc-card {
        width: 100%;
        max-width: 460px;
        background: var(--bc-pub-surface);
        border-radius: 22px;
        box-shadow: 0 24px 60px var(--bc-pub-shadow);
        overflow: hidden;
        animation: bcFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    @keyframes bcFadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ─── EN-TÊTE DE LA CARTE ─── */
    .bc-card-header {
        position: relative;
        padding: 36px 32px 32px;
        text-align: center;
        color: var(--bridge-white);
        overflow: hidden;
    }
    .bc-card-pattern {
        position: absolute;
        inset: 0;
        opacity: 0.5;
    }
    .bc-card-pattern svg {
        width: 100%;
        height: 100%;
    }
    .bc-card-header-content {
        position: relative;
        z-index: 2;
    }

    .bc-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 14px;
        background: color-mix(in srgb, var(--bridge-white) 15%, transparent);
        border: 1px solid color-mix(in srgb, var(--bridge-white) 25%, transparent);
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        backdrop-filter: blur(10px);
        margin-bottom: 18px;
    }
    .bc-badge-dot {
        width: 6px;
        height: 6px;
        background: var(--bridge-white);
        border-radius: 50%;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--bridge-white) 30%, transparent);
        animation: bcPulse 2s ease-in-out infinite;
    }
    @keyframes bcPulse {
        0%,100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bridge-white) 30%, transparent); }
        50%     { box-shadow: 0 0 0 6px color-mix(in srgb, var(--bridge-white) 10%, transparent); }
    }

    .bc-card-icon {
        font-size: 56px;
        line-height: 1;
        margin-bottom: 12px;
        filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--bel-text) 20%, transparent));
    }
    .bc-card-title {
        font-family: 'Playfair Display', serif;
        font-size: 26px;
        font-weight: 700;
        margin: 0 0 6px;
        letter-spacing: -0.3px;
    }
    .bc-card-tagline {
        font-size: 13.5px;
        opacity: 0.92;
        margin: 0;
        line-height: 1.5;
    }

    /* ─── CORPS DE LA CARTE ─── */
    .bc-card-body {
        padding: 32px 32px 8px;
    }

    /* Formulaire */
    .bc-form {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .bc-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .bc-label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: var(--bc-pub-label);
    }
    .bc-field-hint {
        margin: -2px 0 0;
        font-size: 12px;
        color: var(--bc-pub-soft);
        line-height: 1.4;
    }
    .bc-forgot-wrap {
        text-align: center;
        margin-top: 14px;
    }
    .bc-forgot-btn {
        background: none;
        border: none;
        color: var(--bc-color);
        font-size: 13px;
        cursor: pointer;
        text-decoration: underline;
        font-weight: 500;
        padding: 6px;
        font-family: inherit;
    }
    .bc-forgot-btn:hover { opacity: 0.75; }

    .bc-input-wrap {
        position: relative;
    }
    .bc-input-icon {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--bc-pub-soft);
        pointer-events: none;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
    }
    .bc-page .bc-input-wrap .bc-input {
        width: 100%;
        padding: 13px 14px 13px 50px !important;
        border: 1.5px solid var(--bc-pub-input-bd);
        border-radius: 11px;
        font-size: 14.5px;
        font-family: inherit;
        background: var(--bc-pub-surface);
        color: var(--bc-pub-text);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        outline: none;
        text-indent: 0;
    }
    .bc-page .bc-input-wrap .bc-input#bc-password {
        padding-right: 48px !important;
    }
    .bc-page .bc-input:focus,
    .bc-page .bc-input:focus-visible {
        outline: none !important;
        border-color: var(--bc-color);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-color) 18%, transparent);
    }
    .bc-input::placeholder { color: var(--bel-text-soft); }

    /* Toggle voir/cacher mot de passe */
    .bc-toggle-pwd {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--bc-pub-soft);
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s;
    }
    .bc-toggle-pwd:hover { color: var(--bc-color); }

    /* Options (checkbox + remember) */
    .bc-options {
        display: flex;
        align-items: center;
        margin-top: 4px;
    }
    .bc-checkbox {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        cursor: pointer;
        user-select: none;
    }
    .bc-checkbox input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }
    .bc-checkbox-box {
        width: 18px;
        height: 18px;
        border: 1.5px solid var(--bc-pub-input-bd);
        border-radius: 5px;
        background: var(--bc-pub-surface);
        position: relative;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    .bc-checkbox-box::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
        border: solid var(--bridge-white);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .bc-checkbox input:checked + .bc-checkbox-box {
        background: var(--bc-color);
        border-color: var(--bc-color);
    }
    .bc-checkbox input:checked + .bc-checkbox-box::after {
        opacity: 1;
    }
    .bc-checkbox-text {
        font-size: 13.5px;
        color: var(--bc-pub-muted);
        font-weight: 500;
    }

    /* Bouton submit */
    .bc-submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 24px;
        background: var(--bc-color);
        color: var(--bridge-white);
        border: none;
        border-radius: 11px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        margin-top: 8px;
        box-shadow: 0 8px 20px color-mix(in srgb, var(--bc-color) 30%, transparent);
    }
    .bc-submit:hover {
        background: var(--bc-color-dark);
        transform: translateY(-1px);
        box-shadow: 0 12px 28px color-mix(in srgb, var(--bc-color) 45%, transparent);
        gap: 12px;
    }
    .bc-submit:active {
        transform: translateY(0);
    }

    /* Bandeau d'erreur */
    .bc-error {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        background: var(--bel-error-bg);
        border: 1px solid color-mix(in srgb, var(--bridge-danger) 32%, var(--bel-surface));
        border-left: 4px solid var(--bridge-danger);
        border-radius: 10px;
        color: color-mix(in srgb, var(--bel-error-text) 80%, var(--bel-text-strong));
        font-size: 13px;
        margin-bottom: 18px;
        animation: bcShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }
    .bc-error svg {
        flex-shrink: 0;
        color: var(--bridge-danger);
        margin-top: 1px;
    }
    .bc-error strong {
        font-weight: 600;
        line-height: 1.4;
    }
    .bc-error small {
        font-weight: 400;
        opacity: 0.8;
    }
    @keyframes bcShake {
        10%, 90% { transform: translateX(-1px); }
        20%, 80% { transform: translateX(2px); }
        30%, 50%, 70% { transform: translateX(-3px); }
        40%, 60% { transform: translateX(3px); }
    }

    /* Séparateur */
    .bc-divider {
        text-align: center;
        margin: 28px 0 16px;
        position: relative;
    }
    .bc-divider::before,
    .bc-divider::after {
        content: '';
        position: absolute;
        top: 50%;
        width: calc(50% - 70px);
        height: 1px;
        background: var(--bc-pub-border);
    }
    .bc-divider::before { left: 0; }
    .bc-divider::after  { right: 0; }
    .bc-divider span {
        font-size: 12px;
        font-weight: 500;
        color: var(--bc-pub-soft);
        background: var(--bc-pub-surface);
        padding: 0 12px;
        position: relative;
    }

    /* Liens autres rôles */
    .bc-other-roles {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .bc-role-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: var(--bc-pub-panel);
        border: 1px solid var(--bc-pub-border);
        border-radius: 10px;
        text-decoration: none;
        color: var(--bc-pub-muted);
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    .bc-role-link:hover {
        background: var(--bc-pub-surface);
        border-color: var(--bc-color);
        color: var(--bc-color-dark);
        transform: translateX(2px);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--bc-color) 12%, transparent);
    }
    .bc-role-link-icon {
        font-size: 22px;
    }
    .bc-role-link-text {
        flex: 1;
    }

    /* Footer de la carte */
    .bc-card-footer {
        padding: 14px 32px;
        background: var(--bc-pub-panel);
        border-top: 1px solid var(--bc-pub-border);
        text-align: center;
        font-size: 12px;
        color: var(--bc-pub-soft);
        font-weight: 500;
    }
    .bc-sep { margin: 0 6px; }

    .bc-help-text {
        margin-top: 24px;
        text-align: center;
        font-size: 13px;
        color: var(--bc-pub-caption);
    }

    /* Bandeau installation PWA */
    .bridge-app-banner {
        background: linear-gradient(135deg, var(--bc-pub-divider), var(--bc-pub-border));
        border-top: 3px solid var(--bc-pub-accent);
        padding: 16px 20px;
        text-align: center;
    }
    .bridge-app-banner-inner {
        max-width: 700px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    .bridge-app-banner-icon { font-size: 24px; }
    .bridge-app-banner-text {
        color: var(--bc-pub-muted);
        font-size: 14px;
        font-weight: 500;
    }
    .bridge-app-banner-link {
        color: var(--bc-pub-link);
        font-weight: 700;
        text-decoration: none;
        transition: color 0.2s;
    }
    .bridge-app-banner-link:hover {
        color: var(--bc-pub-link-dark);
        text-decoration: underline;
    }

    /* Footer global */
    .bc-footer {
        padding: 20px 24px;
        text-align: center;
        font-size: 12px;
        color: var(--bc-pub-soft);
        background: var(--bc-pub-surface);
        border-top: 1px solid var(--bc-pub-border);
    }

    /* ═══════════ RESPONSIVE ═══════════ */
    @media (max-width: 600px) {
        .bc-nav { padding: 14px 16px; }
        .bc-nav-back span { display: none; }
        .bc-nav-name { font-size: 14px; }
        .bc-card-header { padding: 28px 24px 24px; }
        .bc-card-icon { font-size: 44px; }
        .bc-card-title { font-size: 22px; }
        .bc-card-body { padding: 24px 22px 8px; }
        .bridge-app-banner-inner {
            flex-direction: column;
            text-align: center;
        }
    }