/* ============================================================
   MetaBots SL — Thème clair (Bootstrap-like, tons blancs)
   Auto-hébergé, AUCUNE dépendance externe.
   Chargé APRÈS le <style> inline de chaque page → ses règles gagnent.
   Principe : on redéfinit les variables CSS (tout le site est piloté
   par var(--…)), puis quelques finitions sur le vocabulaire existant.
   Pour revenir au thème sombre : retirer le <link> de chaque page.
   ============================================================ */

:root {
    --primary:      #2563eb;
    --primary-dark: #1d4ed8;
    --bg:           #f5f7fb;   /* fond de page */
    --bg-card:      #ffffff;   /* surfaces / cartes */
    --bg-input:     #eef2f7;   /* pistes, sliders, hovers légers */
    --text:         #1e293b;   /* encre */
    --text-muted:   #64748b;
    --success:      #16a34a;
    --warning:      #d97706;
    --danger:       #dc2626;
    --border:       #e2e8f0;
}

/* ----- Base ----- */
body { background: var(--bg); color: var(--text); }

/* ----- En-tête / navbar (FIXE en haut au défilement) ----- */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(16,24,40,.05);
}
/* Barre de navigation de la page d'accueil : fixe + fond blanc plein largeur */
.landing-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    max-width: none;
    padding: 0.9rem 2rem;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(16,24,40,.05);
}
.header .balance {
    background: #ecfdf3;
    color: #047a48;
    border: 1px solid #d1fadf;
    border-radius: 999px;
}

/* ----- Cartes ----- */
.card {
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.modal-content,
.login-card {
    box-shadow: 0 24px 60px rgba(16,24,40,.18);
}

/* Cartes de stats : surfaces blanches visibles (sinon fond = page) */
.stat-card {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
}

/* ----- Formulaires ----- */
input, select, textarea {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: var(--text);
}
input::placeholder, textarea::placeholder { color: #94a3b8; }
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
    outline: none;
}

/* ----- Boutons : légère profondeur ----- */
.btn { box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.btn-primary:hover { background: var(--primary-dark); }
/* Boutons "clairs" (gris) utilisés via background:var(--bg-input) inline */
.btn[style*="--bg-input"] { border: 1px solid var(--border); }

/* ----- Interrupteurs (toggle) : accent bleu, piste grise visible ----- */
.toggle .slider { background: #cbd5e1; }
.toggle input:checked + .slider { background: var(--primary); }

/* ----- Barres de progression (pistes visibles) ----- */
.sub-progress,
.sub-progress-detail { background: #e5e9f2; }

/* ----- Onglets ----- */
.nav-tab:hover { color: var(--text); }

/* ----- Cartes de bots (sélecteur) ----- */
.bot-card {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.bot-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 10px 26px rgba(37,99,235,.12);
    transform: translateY(-2px);
}
.bot-card.active {
    border-color: var(--primary);
    background: #f7f9ff;
    box-shadow: 0 10px 26px rgba(37,99,235,.16);
}

/* Puces de bot */
.bot-chip { background: #ffffff; }
.bot-chip.active { background: #eef2ff; }

/* ----- Panneaux internes (commandes / fonctionnalités) ----- */
.cmd-panel, .greeting-panel { background: var(--bg); }
.emoji-btn:hover { background: #e2e8f0; }

/* ----- Cartes d'abonnement ----- */
.subscription-card {
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
.subscription-card.recommended {
    box-shadow: 0 16px 40px rgba(37,99,235,.16);
}
.subscription-card.free-trial {
    box-shadow: 0 16px 40px rgba(22,163,74,.14);
}

/* ----- Cartes de fonctionnalités (landing) — style démo ----- */
.feature-card {
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
    text-align: left;
    padding: 1.5rem;
}
.feature-card:hover {
    border-color: #dbe3ff;
    box-shadow: 0 12px 28px rgba(16,24,40,.08);
}
/* Icône : carré arrondi bleu pâle avec icône bleue (comme la démo) */
.feature-card .icon {
    width: 52px;
    height: 52px;
    margin: 0 0 1rem;
    border-radius: 14px;
    background: #eef2ff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;       /* taille de l'icône Bootstrap */
    line-height: 1;
}
.feature-card h3 { font-size: 1.05rem; }

/* ----- Modales -----
   ATTENTION : selon les pages, ".modal" désigne soit le VOILE de fond
   (index.html), soit la BOÎTE de dialogue (translator / ai-conversations).
   On n'adoucit donc QUE les voiles explicites (.modal-overlay) ; la boîte
   garde son fond var(--bg-card) = blanc opaque (sinon texte illisible). */
.modal-overlay { background: rgba(15,23,42,.55); }

/* ----- Tables : survol de ligne ----- */
tbody tr:hover { background: rgba(37,99,235,.04); }

/* ----- Login : dégradé clair ----- */
.login-page {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f7fb 100%);
}

/* ----- Landing : fond clair + titre dégradé lisible ----- */
.landing-page {
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 35%);
}
.landing-hero h1 {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.landing-footer { background: #ffffff; }