.row {
    display: flex;
    flex-wrap: wrap;
    margin: -12px;
}

.col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 12px;
}

.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 12px;
}

.g-4>* {
    padding: 12px;
}

.menuHeaderAdDiv1 {
    margin: 0;
    padding: 0;
}

.menuMainDiv1 {
}

.menuMainDiv2 {
}

.tutorialContentsDiv1 {
}

@keyframes fadeInUp {
    from { opacity:0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(3deg); }
}

@media ( max-width : 768px) {
    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--card-bg);
        box-shadow: var(--shadow-large);
        border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
        border: 1px solid var(--border-subtle);
        border-top: none;
        z-index: var(--z-mobile-nav);
    }
    .main-nav.active {
        display: block;
    }
    .nav-list {
        flex-direction: column;
        padding: 20px;
        gap: var(--spacing-sm);
    }
    .nav-link {
        text-align: center;
        width: 100%;
    }
    .mobile-menu-toggle {
        display: flex;
    }
    .header-content {
        position: relative;
    }
    .col-lg-4, .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-lg);
    }
    .footer-links {
        gap: var(--spacing-md);
        flex-wrap: wrap;
        justify-content: center;
    }
    .menuFooterDiv1 {
        padding: var(--spacing-2xl) 0;
    }
    .section-title {
        margin-bottom: 60px;
    }
    .topic-card {
        padding: var(--spacing-xl) var(--spacing-lg);
    }
    .featured-article {
        padding: var(--spacing-xl);
    }
}

@media ( max-width : 992px) {
    .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .footer-content {
        gap: var(--spacing-xl);
    }
    .footer-links {
        gap: 20px;
    }
    .topics-section {
        padding: 80px 0;
    }
    .topic-card {
        margin-bottom: var(--spacing-lg);
    }
    .featured-article {
        padding: 36px;
    }
}

@media ( max-width : 576px) {
    .footer-links {
        gap: 12px;
    }
    .footer-link {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    .copyright {
        flex-direction: column;
        gap: 12px;
    }
    .menuFooterDiv1 {
        padding: 36px 0;
    }
    .modern-header {
        padding: var(--spacing-md) 0;
    }
    .topics-section {
        padding: 60px 0;
    }
    .featured-article {
        padding: var(--spacing-lg);
    }
    .article-image {
        margin: var(--spacing-lg) 0;
    }
}

@media print {
    .menuHeaderDiv1, .menuFooterDiv1, .floating-elements,
        .mobile-menu-toggle {
        display: none;
    }
    .home-main-section {
        min-height: auto;
        padding: 40px 0;
    }
    .featured-article, .topic-card, .tutorialContentsDiv1,
        .tutorialAnnexesDiv1, .tutorialReferencesDiv1 {
        box-shadow: none;
        border: 1px solid #666;
        page-break-inside: avoid;
        margin-bottom: 20px;
    }
    .cta-button, .btn-primary {
        background: var(--accent-purple);
        color: white;
    }
    body {
        color: #000;
        background: white;
        font-size: 12pt;
        line-height: 1.5;
    }
    .tutorialContentsSpan1, .tutorialAnnexesSpan1, .tutorialReferencesSpan1
        {
        font-size: 18pt;
    }
    .ol_decimal_1 li {
        page-break-inside: avoid;
    }
    .section-title::after {
        background: var(--accent-purple);
    }
    a {
        color: var(--accent-purple);
        text-decoration: underline;
    }
}

@media ( prefers-contrast : high) {
    :root {
        --text-primary: #000000;
        --text-secondary: #1a1a1a;
        --text-muted: #333333;
        --border-subtle: #666666;
        --border-light: #999999;
    }
    .topic-card, .featured-article, .nav-link, .footer-link,
        .tutorialContentsDiv1, .tutorialAnnexesDiv1, .tutorialReferencesDiv1 {
        border: 2px solid var(--border-subtle);
    }
    .btn-primary {
        background: #000000;
        border: 2px solid #ffffff;
    }
    .btn-secondary {
        background: #ffffff;
        border: 2px solid #000000;
        color: #000000;
    }
    .main-nav {
        border: 2px solid var(--border-subtle);
    }
}

@media ( prefers-color-scheme : dark) {
    :root {
        --neutral-bg: #0f172a;
        --card-bg: #1e293b;
        --subtle-bg: #334155;
        --border-light: #475569;
        --border-subtle: #64748b;
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
    }
    .home-main-section {
        background: linear-gradient(135deg, var(--subtle-bg) 0%, #475569 50%, #64748b 100%);
    }
    .menuHeaderDiv1 {
        background: rgba(15, 23, 42, 0.95);
    }
    .code1 {
        background: var(--subtle-bg);
        border: 1px solid var(--border-subtle);
        color: var(--accent-purple);
    }
    ::-webkit-scrollbar-track {
        background: var(--subtle-bg);
    }
    ::-webkit-scrollbar-thumb {
        background: var(--border-subtle);
    }
}

@media ( prefers-reduced-motion : reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
        scroll-behavior: auto;
    }
    .floating-elements {
        display: none;
    }
    .topic-card:hover, .featured-article:hover, .nav-link:hover,
        .footer-link:hover, .btn-primary:hover, .tutorialContentsDiv1:hover,
        .tutorialAnnexesDiv1:hover, .tutorialReferencesDiv1:hover {
        transform: none;
    }
    .topic-card, .featured-article, .nav-link, .footer-link, .btn-primary,
        .btn-secondary, .tutorialContentsDiv1, .tutorialAnnexesDiv1,
        .tutorialReferencesDiv1, .tutorialReferencesDiv2, .ol_decimal_1 li,
        .ol_lower_roman_1 li, .ol_lower_latin_1 li, .ol_upper_roman_1 li {
    }
}

@supports selector(:focus-visible) {
    a: focus, button:focus, .btn-base:focus{ outline: none; }
    a:focus-visible, button:focus-visible, .btn-base:focus-visible {
        outline: 3px solid var(--accent-cyan);
        outline-offset: 3px;
        border-radius: var(--border-radius-sm);
    }
}

@supports (container-type: inline-size) {
    .topic-card , .tutorialContentsDiv1, .tutorialAnnexesDiv1, .tutorialReferencesDiv1 {
        container-type:inline-size;
    }
    @container (max-width: 300px) {
        .topic-icon { font-size:2.5rem; }
        .topic-title { font-size: 1.3rem; }
        .topic-description { font-size: 0.9rem; }
        .tutorialContentsSpan1, .tutorialAnnexesSpan1, .tutorialReferencesSpan1 { font-size: 1.2rem; }
        .ol_decimal_1 li { font-size: 1rem; }
    }
}