/* Hero */
#hero {
    padding: 8rem 0;
}

.blog-hero {
    background: linear-gradient(135deg, var(--isatis-primary) 0%, #0f1a4a 60%, #1a2a5e 100%);
    position: relative;
    overflow: hidden;
}
.blog-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}
.blog-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 70% at 85% 50%, rgba(44,130,201,.15) 0%, transparent 70%);
    pointer-events: none;
}

/* Article featured */
.featured-article { transition: box-shadow .25s, transform .25s; }
.featured-article:hover { box-shadow: 0 12px 40px rgba(8,14,44,.18) !important; transform: translateY(-2px); }
.featured-article .img-cover { transition: transform .4s ease; }
.featured-article:hover .img-cover { transform: scale(1.04); }

/* Article card */
.article-card { transition: box-shadow .25s, transform .25s; }
.article-card:hover { box-shadow: 0 8px 28px rgba(8,14,44,.12) !important; transform: translateY(-3px); }
.article-card .img-cover { transition: transform .4s ease; }
.article-card:hover .img-cover { transform: scale(1.06); }

/* Image overflow clip */
.img-wrap { overflow: hidden; }
.img-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

/* CTA arrow animation */
.arrow-link { transition: gap .2s; }
.arrow-link:hover, *:hover > .arrow-link { gap: .6rem !important; }

.sidebar-list { display: flex; flex-direction: column; gap: .5rem; }
.sidebar-list__item,
.sidebar-list__link {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .875rem;
    line-height: 1.6;
    text-decoration: none;
    padding: .4rem .5rem;
    border-radius: .5rem;
    transition: background .15s;
}
.sidebar-list__link:hover { background: #f1f3f9; color: var(--isatis-primary); }
.sidebar-list__link--active { background: #eef0f7; color: var(--isatis-primary); font-weight: 600; }
.sidebar-list__icon { flex-shrink: 0; font-size: 1rem; margin-top: .1rem; }

/* Topic card hover */
.topic-card { transition: box-shadow .2s, transform .2s; }
.topic-card:hover { box-shadow: 0 6px 20px rgba(8,14,44,.1) !important; transform: translateY(-2px); }

.breadcrumb {
    min-height: 44px;
}

.breadcrumb-separator {
    width: 24px;
    height: 100%;
    display: block;
    color: #e5e7eb;
}

.sidebar-thumb {
    width: 64px;
    height: 64px;
}

.articles-grid-wrapper {
    width: 100%;
}

.articles-grid {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

.articles-grid .article-card {
    flex: 0 0 calc((100% - 3rem) / 3);   /* PC : 3 colonnes */
}

@media (max-width: 991px) {
    .articles-grid .article-card {
        flex: 0 0 calc((100% - 1.5rem) / 2);  /* tablette : 2 colonnes */
    }
}

.hero-w-75 {
    width: 75% !important;
}

.hero-w-50 {
    width: 50% !important;
}

@media (max-width: 575px) {
    .articles-grid .article-card {
        flex: 0 0 100%;  /* mobile : 1 colonne */
    }

    .hero-w-75 {
        width: 100% !important;
    }

    .hero-w-50 {
        width: 90% !important;
    }
}


/* - - - - - - - - - - - - - - -
 - - - - < ARTICLE CONTENT - - - -
 - - - - - - - - - - - - - - - */

#article-content {
    color: var(--isatis-muted);
}

#article-content h1,
#article-content h2,
#article-content h3,
#article-content h4,
#article-content h5,
#article-content h6 {
    color: var(--isatis-primary);
    padding-top: 1.2rem;
    padding-bottom: 0.6rem;
}

#article-content p {
    font-size: 1.1rem;
}

#article-content strong {
    color: var(--isatis-dark);
    font-weight: 600;
}

#article-content a {
    color: var(--isatis-dark);
    text-decoration: none;
    background-image: linear-gradient(rgba(var(--isatis-warning-rgb), 0.25), rgba(var(--isatis-warning-rgb), 0.25));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 45%;
    transition: all 0.2s ease;
}

#article-content a:hover {
    color: var(--isatis-secondary);
    text-decoration: underline;
}

body.high-contrast #article-content strong {
    color: #bc0003 !important;
}

body.high-contrast #article-content p {
    color: var(--isatis-dark) !important;
    line-height: 1.8;
}

body.high-contrast #article-content a {
    color: #0047AB !important;
    background-image: none;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    font-weight: 600;
}

body.high-contrast #article-content a:hover {
    color: #003080 !important;
    text-decoration: underline;
}

/* - - - - - - - - - - - - - - - -
 - - - - / ARTICLE CONTENT > - - - -
 - - - - < CONTRAST TOGGLE - - - - -
 - - - - - - - - - - - - - - - - */

.contrast-toggle {
    width: 36px;
    height: 20px;
    background-color: var(--isatis-muted);
    border-radius: 999px;
    position: relative;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

.contrast-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

#btn-contrast[aria-pressed="true"] .contrast-toggle {
    background-color: var(--isatis-warning);
}

#btn-contrast[aria-pressed="true"] .contrast-toggle__thumb {
    transform: translateX(16px);
}

/* - - - - - - - - - - - - - - - -
 - - - - / CONTRAST TOGGLE > - - - -
 - - - - - - - - - - - - - - - - */

.aside-sticky {
    position: sticky;
    top: 90px;
}