/* Page dédiée — connexion WhatsApp (réutilise les variables de dashboard.css) */

.wc-lang-bar {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    right: 16px;
    z-index: 20;
}

.wc-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 28px 20px 48px;
    overflow-y: auto;
}

.wc-back {
    align-self: flex-start;
    max-width: 520px;
    width: 100%;
    margin: 0 auto 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 0.8746rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.wc-back:hover {
    color: var(--emerald);
}

.wc-card {
    width: 100%;
    max-width: 520px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px 28px 32px;
    text-align: center;
}

.wc-logo {
    display: block;
    margin: 0 auto 16px;
    font-size: 2.058rem;
    color: #3d8b5c;
    line-height: 1;
}

.wc-card h1 {
    font-family: var(--font-display);
    font-size: 1.3891rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}

.wc-lead {
    font-size: 0.9467rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 20px;
}

.wc-connected {
    margin: 0 0 16px;
    text-align: left;
}

.wc-connected-label {
    display: block;
    font-size: 0.6997rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.wc-connected-number {
    font-size: 1.0804rem;
    font-weight: 600;
    color: var(--text-primary);
}

.wc-actions {
    margin-bottom: 8px;
}

.wc-connect-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* À partir de tablette : les 2 boutons côte à côte */
@media (min-width: 768px) {
    .wc-connect-row {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .wc-connect-row .wc-connect-btn {
        flex: 1 1 180px;
        width: auto;
    }
}

.wc-connect-btn {
    width: 100%;
}

.wc-status {
    min-height: 24px;
    margin-top: 12px;
    font-size: 0.8746rem;
    text-align: center;
    color: var(--text-secondary);
}

.wc-status.success {
    color: var(--mint, #5a9a7a);
}

.wc-status.error {
    color: var(--red, #f87171);
}

.wc-status.info {
    color: var(--amber, #fbbf24);
}

/* ============================================================
   MOBILE PWA LAYER — WhatsApp Connect
   ============================================================ */
@media (max-width: 767.98px) {
    .wc-page {
        padding-top: calc(20px + env(safe-area-inset-top));
        padding-bottom: calc(40px + env(safe-area-inset-bottom));
        padding-left: 16px;
        padding-right: 16px;
    }

    .wc-back {
        min-height: 44px;
        align-items: center;
        margin-bottom: 12px;
        padding: 6px 4px;
    }

    .wc-card {
        padding: 28px 20px 24px;
        border-radius: 18px;
    }

    .wc-card h1 { font-size: 1.2862rem; }
    .wc-lead { font-size: 0.9467rem; }

    /* Boutons en mode "cards" pleine largeur */
    .wc-connect-btn {
        min-height: 52px;
        padding: 14px 16px;
        font-size: 0.9467rem;
        text-align: center;
        border-radius: 12px;
    }

    .wc-connect-row { gap: 12px; }

    /* Anti-zoom iOS */
    input, textarea, select { font-size: 16.464px !important; }
}

@media (max-width: 479.98px) {
    .wc-card { padding: 24px 16px 22px; }
    .wc-logo { font-size: 1.8008rem; }
}