/*
 * cybele-pro.css — Répertoire Cybèle
 * Professional dashboard styles
 */

/* ── LOGIN ───────────────────────────────────────────────────────────────── */
.cybele-pro-login {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem 1rem;
}

.cybele-pro-login-box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(42,172,187,.12);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 440px;
    text-align: center;
}

.cybele-pro-login-logo { margin-bottom: 1rem; }
.cybele-pro-login-title { font-size: 1.5rem; font-weight: 800; color: #1A2B3C; margin: 0 0 .4rem; }
.cybele-pro-login-subtitle { color: #6B7280; font-size: .9rem; margin: 0 0 1.5rem; }

.cybele-pro-login-form .cybele-pro-field { text-align: left; margin-bottom: 1rem; }
.cybele-pro-login-form label { display: block; font-size: .825rem; font-weight: 600; margin-bottom: .3rem; color: #1A2B3C; }
.cybele-btn-full { width: 100%; justify-content: center; }

.cybele-pro-login-footer { font-size: .85rem; color: #6B7280; margin-top: 1.25rem; }
.cybele-pro-login-footer a { color: #2AACBB; }

/* ── PRO AREA LAYOUT ─────────────────────────────────────────────────────── */
.cybele-pro-area {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    min-height: 70vh;
    align-items: start;
    --cybele-teal: #2AACBB;
    --cybele-teal-light: #D9F3F7;
    --cybele-dark: #1A2B3C;
    --cybele-gray: #6B7280;
    --cybele-gray-light: #F3F4F6;
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.cybele-pro-sidebar {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(42,172,187,.08);
    padding: 1.5rem 1.25rem;
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cybele-pro-sidebar-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cybele-gray-light);
}

.cybele-pro-sidebar-header img,
.cybele-pro-sidebar-header .cybele-photo-placeholder {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
    object-fit: cover;
}

.cybele-pro-sidebar-name { display: flex; flex-direction: column; gap: .25rem; }
.cybele-pro-sidebar-name strong { font-size: .875rem; color: var(--cybele-dark); }

/* ── NAV ─────────────────────────────────────────────────────────────────── */
.cybele-pro-nav { display: flex; flex-direction: column; gap: .25rem; }

.cybele-pro-nav-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--cybele-dark);
    font-size: .875rem;
    transition: background 150ms, color 150ms;
}

.cybele-pro-nav-item:hover { background: var(--cybele-gray-light); color: var(--cybele-teal); }
.cybele-pro-nav-item.active { background: var(--cybele-teal-light); color: var(--cybele-teal); font-weight: 600; }

/* Sidebar footer */
.cybele-pro-sidebar-footer { display: flex; flex-direction: column; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--cybele-gray-light); }
.cybele-pro-logout { font-size: .8rem; color: var(--cybele-gray); text-align: center; text-decoration: none; }
.cybele-pro-logout:hover { color: #DC2626; }

/* ── STATUS BADGES ───────────────────────────────────────────────────────── */
.cybele-pro-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
}
.cybele-pro-badge-published { background: #D1FAE5; color: #065F46; }
.cybele-pro-badge-pending   { background: #FEF3C7; color: #92400E; }
.cybele-pro-badge-hidden    { background: #E5E7EB; color: #374151; }
.cybele-pro-badge-draft     { background: #E5E7EB; color: #374151; }

/* ── MAIN SECTIONS ───────────────────────────────────────────────────────── */
.cybele-pro-main { min-width: 0; }

.cybele-pro-section { display: flex; flex-direction: column; gap: 1.5rem; }

.cybele-pro-section-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cybele-dark);
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--cybele-teal-light);
}

.cybele-pro-section-desc { color: var(--cybele-gray); margin: -.75rem 0 0; font-size: .9rem; }

/* ── STATUS CARD ─────────────────────────────────────────────────────────── */
.cybele-pro-status-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cybele-pro-status-info { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cybele-pro-meta { font-size: .85rem; color: var(--cybele-gray); }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.cybele-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .6rem 1.25rem;
    border: 1.5px solid var(--cybele-teal);
    border-radius: 8px;
    color: var(--cybele-teal);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: all 200ms;
}
.cybele-btn-outline:hover { background: var(--cybele-teal); color: #fff; }

.cybele-btn-danger { background: #DC2626; border-color: #DC2626; color: #fff; }
.cybele-btn-danger:hover { background: #B91C1C; }
.cybele-btn-danger-outline { border-color: #DC2626; color: #DC2626; background: transparent; }
.cybele-btn-danger-outline:hover { background: #FEE2E2; }

/* ── QUICK ACTIONS ───────────────────────────────────────────────────────── */
.cybele-pro-quick-actions h2 { font-size: 1rem; color: var(--cybele-dark); margin: 0 0 .75rem; }
.cybele-pro-actions-grid { display: flex; flex-wrap: wrap; gap: .75rem; }

.cybele-pro-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    text-decoration: none;
    color: var(--cybele-dark);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 150ms, background 150ms;
    min-width: 140px;
    text-align: center;
}
.cybele-pro-action-card:hover { border-color: var(--cybele-teal); background: var(--cybele-teal-light); color: var(--cybele-teal); }
.cybele-pro-action-icon { font-size: 1.5rem; }

/* ── HISTORY ─────────────────────────────────────────────────────────────── */
.cybele-pro-history h2 { font-size: 1rem; color: var(--cybele-dark); margin: 0 0 .75rem; }
.cybele-pro-log-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }

.cybele-pro-log-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: .5rem .75rem;
    background: var(--cybele-gray-light);
    border-radius: 6px;
    font-size: .82rem;
}

.cybele-pro-log-date { color: var(--cybele-gray); flex-shrink: 0; }
.cybele-pro-log-action { color: var(--cybele-dark); }

/* ── CARDS ───────────────────────────────────────────────────────────────── */
.cybele-pro-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cybele-pro-card h2 { margin: 0; font-size: 1.05rem; color: var(--cybele-dark); }
.cybele-pro-danger-zone { border-color: #FECACA; }
.cybele-pro-danger-zone h2 { color: #DC2626; }

/* ── NOTICES ─────────────────────────────────────────────────────────────── */
.cybele-pro-notice {
    padding: .75rem 1rem;
    border-radius: 8px;
    font-size: .875rem;
}
.cybele-pro-notice.info    { background: var(--cybele-teal-light); color: var(--cybele-dark); border-left: 4px solid var(--cybele-teal); }
.cybele-pro-notice.warning { background: #FEF3C7; color: #92400E; border-left: 4px solid #D97706; }
.cybele-pro-notice.error   { background: #FEE2E2; color: #991B1B; border-left: 4px solid #DC2626; }
.cybele-pro-notice.success { background: #D1FAE5; color: #065F46; border-left: 4px solid #059669; }

.cybele-pro-action-status,
.cybele-delete-status {
    padding: .6rem .85rem;
    border-radius: 6px;
    font-size: .875rem;
}
.cybele-pro-action-status[hidden],
.cybele-delete-status[hidden] { display: none; }
.cybele-pro-action-status.success, .cybele-delete-status.success { background: #D1FAE5; color: #065F46; }
.cybele-pro-action-status.error,   .cybele-delete-status.error   { background: #FEE2E2; color: #991B1B; }

/* ── DELETION CONFIRM ────────────────────────────────────────────────────── */
.cybele-delete-confirm[hidden] { display: none; }
.cybele-delete-confirm { display: flex; flex-direction: column; gap: .6rem; }
.cybele-delete-warning { font-size: .875rem; color: #DC2626; margin: 0; }

/* ── TRANSLATE TAB ───────────────────────────────────────────────────────── */
.cybele-translate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.cybele-translate-col h3 {
    font-size: 1rem;
    color: var(--cybele-dark);
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--cybele-teal-light);
}

.cybele-translate-fr h3 { color: var(--cybele-gray); border-color: #e0e0e0; }

.cybele-translate-field-ref { margin-bottom: 1.25rem; }
.cybele-translate-field-ref label { display: block; font-size: .825rem; font-weight: 600; color: var(--cybele-gray); margin-bottom: .3rem; }
.cybele-translate-original { font-size: .875rem; color: var(--cybele-dark); background: var(--cybele-gray-light); padding: .6rem .85rem; border-radius: 6px; min-height: 2rem; line-height: 1.5; }

.cybele-translate-status { margin-top: .75rem; padding: .65rem .9rem; border-radius: 6px; font-size: .875rem; }
.cybele-translate-status[hidden] { display: none; }
.cybele-translate-status.success { background: #D1FAE5; color: #065F46; }
.cybele-translate-status.error   { background: #FEE2E2; color: #991B1B; }

/* ── PAYMENT PLANS ───────────────────────────────────────────────────────── */
.cybele-payment-plans {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .75rem;
}

.cybele-plan-card {
    position: relative;
    background: var(--cybele-gray-light);
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 1.5rem;
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    transition: border-color 200ms;
}

.cybele-plan-card:hover { border-color: var(--cybele-teal); }

.cybele-plan-featured {
    border-color: var(--cybele-teal);
    background: var(--cybele-teal-light);
}

.cybele-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--cybele-teal);
    color: #fff;
    padding: .2rem .75rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.cybele-plan-card h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--cybele-dark); }

.cybele-plan-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--cybele-teal);
    line-height: 1.1;
}

.cybele-plan-interval {
    font-size: .9rem;
    font-weight: 400;
    color: var(--cybele-gray);
}

.cybele-plan-card p { font-size: .82rem; color: var(--cybele-gray); margin: 0; flex: 1; }

.cybele-payment-status {
    margin-top: .75rem;
    padding: .65rem .9rem;
    border-radius: 6px;
    font-size: .875rem;
}
.cybele-payment-status[hidden] { display: none; }
.cybele-payment-status.success { background: #D1FAE5; color: #065F46; }
.cybele-payment-status.error   { background: #FEE2E2; color: #991B1B; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media ( max-width: 860px ) {
    .cybele-pro-area { grid-template-columns: 1fr; }
    .cybele-pro-sidebar { position: static; }
    .cybele-pro-nav { flex-direction: row; flex-wrap: wrap; }
    .cybele-pro-nav-item { flex: 1 1 auto; justify-content: center; font-size: .8rem; }
    .cybele-translate-grid { grid-template-columns: 1fr; }
    .cybele-translate-fr { display: none; } /* hide reference on mobile */
}

@media ( max-width: 480px ) {
    .cybele-pro-login-box { padding: 1.75rem 1.25rem; }
    .cybele-pro-actions-grid .cybele-pro-action-card { min-width: 120px; padding: .75rem; }
}

/* ── Message du formulaire « Recevoir mon lien de connexion » ───────────── */
.cybele-magic-link-status {
    margin-top: .9rem;
    padding: .7rem .9rem;
    border-radius: 8px;
    font-size: .9rem;
    line-height: 1.45;
    border-left: 3px solid transparent;
}
.cybele-magic-link-status.success {
    background: #ECFDF5;
    color: #065F46;
    border-left-color: #10B981;
}
.cybele-magic-link-status.error {
    background: #FEF2F2;
    color: #991B1B;
    border-left-color: #DC2626;
}
.cybele-magic-link-form button[type="submit"][disabled] { opacity: .6; cursor: progress; }

/* ══════════════════════════════════════════════════════════════════════════
   ONGLET TRADUCTION — mise en page en deux colonnes (v1.6.3)
   ══════════════════════════════════════════════════════════════════════════ */

.cybele-translate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}
.cybele-translate-col { min-width: 0; }
.cybele-translate-col h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1A2B3C;
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #D9F3F7;
}
.cybele-translate-fr h3 { border-bottom-color: #E5E7EB; color: #6B7280; }

.cybele-translate-field-ref { margin-bottom: 1.5rem; }
.cybele-translate-field-ref label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: #6B7280;
    margin-bottom: .35rem;
}
.cybele-translate-original {
    font-size: .875rem;
    color: #374151;
    background: #F7FAFB;
    border: 1px solid #E8ECF0;
    padding: .7rem .9rem;
    border-radius: 8px;
    min-height: 2.6rem;
    line-height: 1.6;
}
.cybele-translate-original:empty::before {
    content: '—';
    color: #9CA3AF;
}
.cybele-translate-original p:first-child { margin-top: 0; }
.cybele-translate-original p:last-child  { margin-bottom: 0; }

/* Les champs anglais : même gabarit que le questionnaire */
.cybele-translate-en .cybele-form-field { margin-bottom: 1.5rem; }
.cybele-translate-en .cybele-form-field label {
    display: block;
    font-size: .8rem;
    font-weight: 700;
    color: #1A2B3C;
    margin-bottom: .35rem;
}
.cybele-translate-en .cybele-input,
.cybele-translate-en textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: .9rem;
    font-family: inherit;
    padding: .65rem .85rem;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    background: #fff;
    line-height: 1.5;
}
.cybele-translate-en textarea { min-height: 9rem; resize: vertical; }
.cybele-translate-en .cybele-input:focus,
.cybele-translate-en textarea:focus {
    outline: none;
    border-color: #2AACBB;
    box-shadow: 0 0 0 3px rgba(42,172,187,.15);
}

/* Les deux colonnes alignent leurs champs à la même hauteur */
@media (min-width: 861px) {
    .cybele-translate-grid { position: relative; }
    .cybele-translate-fr::after {
        content: '';
        position: absolute;
        top: 0; bottom: 0; left: calc(50% - 1rem);
        border-left: 1px solid #F1F5F7;
    }
}

@media (max-width: 860px) {
    .cybele-translate-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .cybele-translate-fr { padding-bottom: 1rem; border-bottom: 1px solid #E8ECF0; }
}