/* ===== VARIABLES ===== */
:root { --main-green: #008000; --dark-green: #006400; --gold: #ffd700; --light-bg: #f5f7fa; } 
/* ===== GLOBAL ===== */
 body { font-family: Arial, sans-serif; background-color: var(--light-bg); color: #222; } 
/* ===== TITRES ===== */
 h1, h2, h3, h4, h5 { font-family: 'Roboto', sans-serif; font-weight: bold; } 
/* ===== NAVBAR ===== */
    .custom-navbar { background: var(--main-green); padding: 15px 0; } 
    .custom-navbar .navbar-brand { color: var(--gold); font-weight: bold; font-size: 28px; letter-spacing: 3px; text-transform: uppercase; } 
    .custom-navbar .nav-link { font-family: 'Fira Code', monospace; color: white; margin: 0 10px; } 
    .custom-navbar .nav-link:hover { text-decoration: underline; } 
/* ===== LOGO ===== */
    .logo-img { width: 35px; 
                margin-right: 10px; } 
    .navbar-brand { display: flex;
                     align-items: center; } 
/* ===== HERO ===== */
    .hero { position: relative; 
            min-height: 400px;
            padding: 80px 0; 
            background: url("../media/article.jpg") center/cover no-repeat; 
            color: white; 
            display: flex; 
            align-items: center;
         } 
    .hero .container { position: relative; 
                        z-index: 2; } 
    .hero::after { content: "";
             position: absolute; 
                top: 0; 
                left: 0; 
                right: 0; 
                bottom: 0; 
                background: rgba(0, 0, 0, 0.4); } 
    .hero h1 { font-size: 4rem; } 
/* ===== MAIN ===== */
     main h2 { margin-bottom: 20px; } 
/* ===== ARTICLES ===== */
     article { background: white; padding: 15px; margin-bottom: 20px; border: 1px solid #ddd; transition: 0.3s; } 
     article:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } 
     article h2 { color: var(--main-green); } 
    article p {font-family: Garamond, serif;}
/* ===== IMAGES ===== */
    img {
        max-width: 100%;
        height: auto;
}
/* ===== TEXTE ===== */
     .sous-titre { color: #777; font-size: 0.9rem; }
/* ===== BUTTON ===== */
     .btn-custom { background: var(--main-green); color: white; border: none; } 
     .btn-custom:hover { background: var(--dark-green); 
    }
/* ===== SOCIAL ===== */
    .facebook { background: #1877f2; 
                color: white;  
            } 
    .twitter { background: #1da1f2; 
                color: white; 
            } 
    .linkedin { background: #0077b5; 
                color: white; 
            } 
    .facebook:hover,
    .twitter:hover,
    .linkedin:hover {
        opacity: 0.9;
}
/* ===== ASIDE ===== */
     aside {
         padding: 15px; 
    } 
    aside h3, 
    aside h4 {
         color: var(--main-green); 
        }
/* ===== LIST ===== */
     .list-group-item { border: 1px solid #ddd; }
    .list-group-item:hover { background: #e6ffe6; }
/* ===== FORM ===== */
    label { font-weight: bold; } 
/* ===== CUSTOM PAGE ===== */
    .custom-container { display: flex; gap: 20px; } 
    .sidebar-left, .sidebar-right { width: 25%; padding: 15px; } 
    .sidebar-left { background: #d4edda; } .sidebar-right { background: #f8d7da; } 
    .preview { width: 50%; background: #cfe2ff; padding: 15px; max-height: 400px; overflow: auto; }
/* ===== FOOTER ===== */
    .footer-custom { background: var(--main-green); color: white; } 
     .footer-custom h5 { margin-bottom: 10px; } 
     .footer-custom p { margin: 5px 0; } 
     .footer-custom input { border: none; } 
     .footer-custom .btn { background: white; color: var(--main-green); } 
/* ===== HOVER LOGO ===== */
    .navbar-brand {
    display: flex;
    align-items: center;
    transition: 0.3s;
    }

    .navbar-brand:hover {
    transform: scale(1.05);
    }