/**
 * Vitrine theme - WeAreRH
 * FULA-6010 — charte (bleu --brand primaire, vert --secondary secondaire),
 * mode clair en blanc plein, toggle et logo alignés sur la navbar dashboard.
 *
 * Chargé en DERNIER sur index / pricing / enterprise : surcharge homepage.css
 * (source partagée, jamais modifiée ici) et les <style> inline des pages.
 * Les variables --brand/--secondary/--bg* viennent de tokens.generated.css.
 */

:root {
    --vt-surface: #ffffff;
    --vt-surface-alt: #ffffff;
    --vt-heading: var(--brand, #0F3D67);
    --vt-text: #102A43;
    --vt-muted: #64748b;
    --vt-border: #E8EDF0;
    --vt-link-accent: var(--secondary, #5B9573);
}

.dark {
    --vt-surface: #1e293b;
    --vt-surface-alt: #0f172a;
    --vt-heading: #9cc0e0;
    --vt-text: #f1f5f9;
    --vt-muted: #94a3b8;
    --vt-border: #334155;
    --vt-link-accent: #74a98b;
}

/* ---- Mode clair : blanc plein ---- */
body {
    background: var(--vt-surface-alt);
    color: var(--vt-text);
}

header {
    background: var(--vt-surface-alt);
    border-bottom: 1px solid var(--vt-border);
}

/* ---- Logo (même rendu que la StagingNavbar : h-7, texte sm) ---- */
.site-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.site-logo img {
    height: 28px;
    width: auto;
    object-fit: contain;
}

.site-logo span,
.site-logo h1 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--vt-heading);
}

/* ---- Toggle clair/sombre (icône seule, cible 44px, comme la navbar dashboard) ---- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--vt-muted);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.theme-toggle:hover {
    background: rgba(100, 116, 139, 0.15);
    color: var(--vt-text);
}

.theme-toggle svg {
    width: 16px;
    height: 16px;
}

.theme-toggle .icon-sun { display: none; }
.dark .theme-toggle .icon-sun { display: block; }
.dark .theme-toggle .icon-moon { display: none; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- Bleu primaire / vert secondaire (remplacent le cyan) ---- */
.btn-login,
.btn-cta.primary,
.btn-submit {
    background: var(--brand, #0F3D67);
    box-shadow: none;
}

.btn-login:hover,
.btn-cta.primary:hover,
.btn-submit:hover {
    background: var(--bgDark, #102A43);
}

.tool-card:hover,
input:focus,
textarea:focus {
    border-color: var(--secondary, #5B9573);
}

.tool-cta,
.annual-note,
.check,
.success-block .back-link,
.btn-cta.outline:hover {
    color: var(--vt-link-accent);
}

.btn-cta.outline:hover {
    border-color: var(--secondary, #5B9573);
}

.plan-badge {
    background: var(--secondary, #5B9573);
}

.badge,
.badge-annual,
.success-icon {
    background: #eef4fa;
    border-color: #b3cde5;
}

/* ---- Mode sombre : surfaces et textes codés en dur dans les pages ---- */
.dark h1,
.dark .logo-text,
.dark .hero h1,
.dark .plan-name,
.dark .plan-price .amount,
.dark .toggle-label.active,
.dark .success-block h2,
.dark .btn-cta.outline,
.dark .badge,
.dark .badge-annual {
    color: var(--vt-heading);
}

.dark .tagline,
.dark .hero p,
.dark .plan-desc,
.dark .toggle-label,
.dark .plan-price .suffix,
.dark .vat-note,
.dark .cc-note,
.dark .feature,
.dark .tool-card p,
.dark footer,
.dark footer a {
    color: var(--vt-muted);
}

.dark .hero-description,
.dark .section-title,
.dark .subtitle,
.dark .features-list li,
.dark .tool-card h3,
.dark .success-block p {
    color: var(--vt-text);
}

.dark .tool-card,
.dark .plan-card,
.dark .form-card {
    background: var(--vt-surface);
    border-color: var(--vt-border);
}

.dark .tag,
.dark .feature-icon,
.dark input,
.dark textarea {
    background: var(--vt-surface-alt);
    border-color: var(--vt-border);
    color: var(--vt-text);
}

.dark .badge,
.dark .badge-annual,
.dark .success-icon {
    background: rgba(15, 61, 103, 0.35);
    border-color: #256394;
}

.dark .toggle-switch { background: #475569; }
.dark .toggle-switch.on { background: var(--secondary, #5B9573); }
.dark .plan-card.highlight { border-color: var(--secondary, #5B9573); }
.dark .hero .trial-banner-body p { color: #fff; }
.dark .btn-cta.outline { border-color: #475569; }
.dark .btn-login,
.dark .btn-cta.primary,
.dark .btn-submit { background: #256394; }