:root{
    /* THE TRADERS’ LIGHT – Palette */
    --brand-bg:#000000;         /* noir pur */
    --brand-text:#eaeef2;       /* blanc doux */
    --brand-muted:#9aa4ad;
    --brand-blue:#61A5FF;       /* bleu TTL (CTA uniquement) */
    --brand-cyan:#00E5FF;       /* cyan hover / interactions */

    /* Bootstrap variables */
    --bs-body-bg:var(--brand-bg);
    --bs-body-color:var(--brand-text);
    --bs-primary:var(--brand-blue);
    --bs-primary-rgb:97,165,255;
    --bs-link-color:var(--brand-text);
    --bs-link-hover-color:var(--brand-cyan);
}

/* =========================================================
   GLOBAL (scopé TTL)
   ========================================================= */
body.ttl{
    background:var(--brand-bg)!important;
    color:var(--brand-text)!important;
}

/* Protection contre fonds clairs Bootstrap */
body.ttl .bg-white,
body.ttl .bg-light,
body.ttl .bg-body{
    background:var(--brand-bg)!important;
}

body.ttl .text-dark,
body.ttl .text-body,
body.ttl .text-black{
    color:var(--brand-text)!important;
}

/* Tous les liens */
a{
    color:var(--brand-text);
    text-decoration:none;
}

a:hover,
a:focus{
    color:var(--brand-cyan)!important;
}

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar{
    background:#000!important;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.navbar .nav-link{
    color:var(--brand-text)!important;
    font-weight:500;
}

/* Hover / active = CYAN */
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active{
    color:var(--brand-cyan)!important;
}

/* =========================================================
   DROPDOWN
   ========================================================= */
.dropdown-menu{
    background:#0b0d10;
    border-color:rgba(255,255,255,.08);
}

.dropdown-item{
    color:var(--brand-text);
}

.dropdown-item:hover,
.dropdown-item:focus{
    color:var(--brand-cyan);
    background:transparent;
}

.dropdown-divider{
    border-top-color:rgba(255,255,255,.10);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
    min-height:85dvh;
    display:grid;
    place-items:center;
    text-align:center;
    padding:5rem 1rem;
    background:var(--brand-bg);
}

.brand-logo{
    width:clamp(140px,22vw,260px);
    height:auto;
    filter:drop-shadow(0 8px 24px rgba(0,0,0,.35));
}

.hero h1{
    letter-spacing:.5px;
    margin-top:1.25rem;
}

.hero p.lead{
    color:var(--brand-muted);
    max-width:56ch;
    margin:.75rem auto 2rem;
}

/* =========================================================
   BUTTONS (BLEU = action principale)
   ========================================================= */
.btn-accent{
    --bs-btn-color:#0b0d10;
    --bs-btn-bg:var(--brand-blue);
    --bs-btn-border-color:var(--brand-blue);
    --bs-btn-hover-bg:var(--brand-cyan);
    --bs-btn-hover-border-color:var(--brand-cyan);
    --bs-btn-focus-shadow-rgb:0,229,255;
    transition:transform .12s ease, box-shadow .2s ease;
}

.btn-accent:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 28px rgba(0,229,255,.35);
}

/* =========================================================
   FORMS
   ========================================================= */
.form-label{
    color:rgba(34,211,238,.9); /* cyan TTL */
    font-weight:600;
    letter-spacing:.02em;
}

.form-control{
    background:#000;
    color:var(--brand-text);
    border-color:rgba(255,255,255,.2);
}

.form-control:focus{
    border-color:var(--brand-cyan);
    box-shadow:0 0 0 .15rem rgba(0,229,255,.25);
}

.form-text,
.text-muted{
    color:var(--brand-muted)!important;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
    color:var(--brand-muted);
    border-top:1px solid rgba(255,255,255,.06);
}

.site-footer a{
    color:var(--brand-muted);
    text-decoration:none;
}

.site-footer a:hover{
    color:var(--brand-cyan);
    text-decoration:underline;
}
/* =========================================================
   NEWS (article + layouts)
   ========================================================= */

/* Article typography */
.news-body{
    max-width: 760px;
    margin: 0 auto;
    padding: 1.25rem 1.25rem;     /* padding dans la card */
    text-align: left !important;
    line-height: 1.75;
    font-size: 1.02rem;
    color: rgba(255,255,255,.84);
}

/* Force anti-centrage si un parent applique text-center */
.news-body *{
    text-align: left !important;
}

/* Headings inside article */
.news-body h2{
    color: #fff;
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 1.35rem;
    margin: 1.5rem 0 .65rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding-bottom: .5rem;
}

.news-body h3{
    color: #fff;
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 1.15rem;
    margin: 1.25rem 0 .6rem;
}

/* Paragraphs */
.news-body p{
    margin: 0 0 1rem;
    color: rgba(255,255,255,.80);
}

/* Lists */
.news-body ul{
    margin: 0 0 1rem 1.1rem;
    padding-left: .25rem;
    list-style: disc;
}
.news-body li{
    margin: .2rem 0;
    color: rgba(255,255,255,.78);
}
.news-body ul li::marker{
    color: rgba(255,255,255,.45);
}

/* Links */
.news-body a{
    color: var(--bs-primary);
    text-decoration: none;
}
.news-body a:hover{
    text-decoration: underline;
}

/* Inline code + code blocks */
.news-body code{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    padding: .1rem .35rem;
    border-radius: 6px;
}
.news-body pre{
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    padding: 1rem;
    border-radius: 10px;
    overflow-x: auto;
    margin: 1rem 0;
}
.news-body pre code{
    background: transparent;
    border: 0;
    padding: 0;
}

/* Optional callout (not default) */
.news-body .ttl-callout{
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid var(--bs-primary);
    padding: .9rem 1rem;
    border-radius: 12px;
    margin: 1rem 0 1.25rem;
    color: rgba(255,255,255,.88);
}

/* News title (page title) */
.news-title{
    font-size: clamp(1.6rem, 2.2vw, 1.95rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: .15px;
    margin-bottom: .35rem;
}

/* === News hero block (image left, text right) === */
.news-hero{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start; /* ← AVANT: start */
    margin: 0 0 1.25rem;
}

.news-hero-media img{
    width: 100%;
    max-width: 210px;
    height: auto;              /* ← clé */
    aspect-ratio: auto;        /* ← enlève le carré */
    object-fit: contain;       /* ← garde les proportions */
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
    background: rgba(0,0,0,.25); /* fallback si image transparente */
}

.news-hero-text h2{
    margin-top: 0;
}

/* Responsive: stack on mobile */
@media (max-width: 768px){
    .news-hero{
        grid-template-columns: 1fr;
    }
    .news-body{
        padding: 1rem 1rem;
    }
}

/* === News link buttons === */
.news-links{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

.news-link{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .6rem;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 8px;
    color: var(--brand-cyan);
    border: 1px solid rgba(0,229,255,.35);
    background: transparent;
}

.news-link:hover{
    color: #fff;
    border-color: var(--brand-cyan);
    background: rgba(0,229,255,.08);
}

/* secondary link */
.news-link-muted{
    color: rgba(255,255,255,.65);
    border-color: rgba(255,255,255,.25);
}

.news-link-muted:hover{
    color: #fff;
    border-color: rgba(255,255,255,.5);
}

.news-hero-media img{
    background: radial-gradient(circle at top, rgba(0,229,255,.08), rgba(0,0,0,.25));
}

/* Force image + texte alignés en haut */
.news-hero-top{
    align-items: start;
}

/* Optionnel : éviter un micro décalage visuel */
.news-hero-top .news-hero-media{
    align-self: start;
}

/* Force tooltip visible on dark themes */
.tooltip {
    z-index: 9999 !important;
}

.tooltip .tooltip-inner {
    background: #111 !important;
    color: #fff !important;
    opacity: 1 !important;
    font-size: 0.85rem;
    max-width: 260px;
    text-align: left;
    border: 1px solid rgba(255,255,255,.12);
}

/* Arrow color */
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before { border-top-color: #111 !important; }

.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before { border-right-color: #111 !important; }

.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #111 !important; }

.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before { border-left-color: #111 !important; }


.ttl-action-btn{
    width: 38px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}
.ttl-action-group{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.ttl-action-btn i{
    font-size: 0.95rem;
}