/* ============================================================
   Styles communs ATYPYC.DS (navbar, footer, couleurs, cartes)
   Le CSS spécifique à chaque page reste dans la page concernée.
   ============================================================ */

:root {
    --bleu-nuit: #0d1b2a;
    --bleu-acier: #415a77;
    --blanc: #ffffff;
    --noir: #000000;
}

body {
    background-color: var(--noir);
    color: var(--blanc);
}

/* ---------- Navbar ---------- */
.navbar {
    background: rgba(13, 27, 42, 1) !important;
    border-bottom: 1px solid var(--bleu-acier);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-height: 50px;
}

.navbar-brand {
    font-size: 0.9rem !important;
}

.navbar-brand img {
    max-width: 20px !important;
    margin-right: 0.5rem;
}

.nav-link {
    font-size: 0.8rem !important;
    padding: 0.25rem 0.75rem !important;
}

.nav-link:hover {
    color: var(--bleu-acier) !important;
}

/* ---------- Couleur d'accent (ex-surcharge de .text-warning) ---------- */
.text-accent {
    color: var(--bleu-acier) !important;
}

/* Bootstrap 5.3 rend .text-muted / .text-secondary presque noirs (thème clair) :
   on restaure un gris clair lisible sur le fond sombre du site. */
.text-muted,
.text-secondary,
.text-body-secondary {
    color: #adb5bd !important;
}

.blockquote-footer {
    color: #adb5bd;
}

/* ---------- Cartes ---------- */
.card {
    background: rgba(27, 38, 59, 0.8);
    border: 1px solid var(--bleu-acier);
    /* Bootstrap 5.3 applique une couleur de texte sombre aux cartes (thème clair) */
    --bs-card-color: var(--blanc);
    color: var(--blanc);
}

.tech-card {
    height: 100%;
    padding: 1.5rem;
    background: rgba(27, 38, 59, 0.8);
}

.description-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--bleu-acier);
    border-radius: 10px;
    padding: 1.5rem;
}

/* ---------- Footer ---------- */
footer {
    background: var(--bleu-nuit) !important;
    border-top: 1px solid var(--bleu-acier);
    padding: 2rem 0;
}

/* ---------- Défilement ---------- */
html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bleu-nuit);
}

::-webkit-scrollbar-thumb {
    background: var(--bleu-acier);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a7a9c;
}

/* ---------- Responsive navbar / footer ---------- */
@media (max-width: 768px) {
    .nav-link {
        font-size: 0.9rem;
        padding: 0.5rem 1rem !important;
    }

    .navbar-brand {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .navbar-toggler {
        padding: 0.25rem;
        width: 40px;
        height: 40px;
    }

    .navbar-toggler-icon {
        background-size: 1.2em;
        width: 1.2em;
        height: 1.2em;
    }

    footer .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }

    footer .text-muted {
        font-size: 0.7rem;
    }
}