/* =======================================================
   JURISPRUDENT - COPILOT THEME V1
   Surcharges uniquement
   ======================================================= */


/* =======================================================
   PALETTE PAPIER
   ======================================================= */

:root[data-theme="paper"] {

    --bg: #F7F5F2;
    --bg-canvas: #F3F0EA;

    --surface: #FFFFFF;
    --surface-subtle: #FBFAF8;

    --border: #D8D8D8;
    --border-light: #E6E3DE;

    --text: #17233E;
    --text-dim: #64748B;

    --primary: #C37A2B;
    --primary-dark: #A8641F;

    --accent: #17233E;

    --shadow-card:
        0 4px 18px rgba(23,35,62,.06);

    --node-loi-bg: #EAF1F7;
    --node-loi-text: #17233E;

    --node-juris-bg: #F6E8D7;
    --node-juris-text: #A8641F;

    --node-action-bg: #E8F3EC;
    --node-action-text: #2B5840;

    --edge-color: #BCC7D4;
    --edge-highlight: #C37A2B;
}


/* =======================================================
   PALETTE NUIT
   ======================================================= */

:root[data-theme="dark"] {

    --bg: #0B1018;
    --bg-canvas: #121824;

    --surface: #17233E;
    --surface-subtle: #1D2C4A;

    --border: #2B3C5E;
    --border-light: #34466B;

    --text: #F8F9FB;
    --text-dim: #AAB6CB;

    --primary: #C37A2B;
    --primary-dark: #A8641F;

    --accent: #D7A15F;

    --node-loi-bg: #223148;
    --node-loi-text: #F0F6FF;

    --node-juris-bg: #3B2A1C;
    --node-juris-text: #F6D7AD;

    --node-action-bg: #173427;
    --node-action-text: #C9F3DA;

    --edge-color: #50627D;
    --edge-highlight: #C37A2B;
}


/* =======================================================
   LOGO
   ======================================================= */

.home-logo {

    font-size: 4rem;
    font-weight: 800;

    letter-spacing: -2px;

    line-height: 1;

    text-align: center;

    color: var(--text);
}

.home-logo span {

    color: var(--primary);

    font-weight: 900;
}

.brand-title span {
    color: var(--primary);
}


/* =======================================================
   TAGLINE
   ======================================================= */

.home-tagline {

    color: var(--accent);

    font-size: .82rem;

    letter-spacing: 1.6px;

    font-weight: 600;

    opacity: .82;
}


/* =======================================================
   BARRE DE RECHERCHE
   ======================================================= */

.home-search-box {

    border-radius: 34px;

    padding: 10px 22px;

    box-shadow:
        0 6px 24px rgba(23,35,62,.05);
}

.home-search-box:focus-within {

    border-color: var(--primary);

    box-shadow:
        0 0 0 4px rgba(195,122,43,.12);
}

.home-search-input {

    color: var(--text);
}


/* =======================================================
   BOUTON TISSER
   ======================================================= */

.home-submit-btn {

    background: var(--primary);

    color: white;

    padding: 11px 24px;

    border-radius: 24px;

    font-weight: 700;

    box-shadow:
        0 4px 12px rgba(195,122,43,.20);

    transition: all .20s ease;
}

.home-submit-btn:hover {

    background: var(--primary-dark);

    transform: translateY(-1px);

    box-shadow:
        0 8px 18px rgba(195,122,43,.25);
}


/* =======================================================
   BADGES DE SUGGESTION
   ======================================================= */

.home-badge-chip {

    background: rgba(255,255,255,.75);

    border: 1px solid var(--border);

    border-radius: 999px;

    transition: all .2s ease;
}

.home-badge-chip:hover {

    background: #FFFFFF;

    border-color: var(--primary);

    color: var(--text);
}


/* =======================================================
   HUB ATOA
   ======================================================= */

.badge-hub {

    background: #17233E;

    color: white;

    font-size: .65rem;

    letter-spacing: .5px;

    padding: 3px 8px;

    border-radius: 5px;
}


/* =======================================================
   HEADER
   ======================================================= */

header {

    backdrop-filter: blur(10px);

    box-shadow:
        0 2px 14px rgba(23,35,62,.04);
}


/* =======================================================
   BOUTON ASSISTANT
   ======================================================= */

.btn-toggle-copilot:hover,
.btn-toggle-copilot.active {

    background: #17233E;

    border-color: #17233E;

    color: white;
}


.btn-theme-toggle:hover {

    border-color: var(--primary);
}


/* =======================================================
   BARRE D'INGESTION DU GRAPHE
   ======================================================= */

.btn-ingest {

    background: var(--primary);

    color: white;
}

.btn-ingest:hover {

    background: var(--primary-dark);
}

.ingest-input:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(195,122,43,.10);
}


/* =======================================================
   PANNEAUX LATÉRAUX
   ======================================================= */

.copilot-panel-left,
.node-drawer-right {

    box-shadow:
        0 12px 36px rgba(23,35,62,.12);
}


.chat-bubble.user {

    background: var(--primary);
}


.btn-ask {

    background: var(--primary);
}

.btn-ask:hover {

    background: var(--primary-dark);
}


/* =======================================================
   DRAWER
   ======================================================= */

.fulltext-box {

    border-left: 4px solid var(--primary);
}


/* =======================================================
   MODALES
   ======================================================= */

.modal-card {

    border-radius: 18px;

    box-shadow:
        0 20px 60px rgba(23,35,62,.18);
}


/* =======================================================
   OFFRES
   ======================================================= */

.pricing-box {

    transition:
        transform .20s ease,
        box-shadow .20s ease;
}

.pricing-box:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 24px rgba(23,35,62,.08);
}


.pricing-box.popular {

    border: 2px solid var(--primary);

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FFFAF4 100%
        );
}


.pricing-badge-popular {

    background: var(--primary);
}


.pricing-btn:hover,
.pricing-box.popular .pricing-btn {

    background: var(--primary);

    border-color: var(--primary);
}


/* =======================================================
   FOOTER
   ======================================================= */

.home-footer-cta a {

    color: var(--primary);
}

.home-footer-cta a:hover {

    color: var(--primary-dark);
}


/* =======================================================
   MICRO-EFFETS PREMIUM
   ======================================================= */

.legend-bar,
.ingest-box,
.home-search-box,
.modal-card {

    backdrop-filter: blur(8px);
}