:root {

            /* Branding */

            --primary-green: #009e60;

            --accent-orange: #f77f00;

            

            /* Light Mode */

            --bg-body: #ffffff;

            --bg-light: #f4f9f4;

            --bg-card: #ffffff;

            --text-main: #333333;

            --text-title: #004d2e;

            --navbar-bg: #ffffff;

            --navbar-text: #555555;

            --border-color: rgba(0,0,0,0.1);

            --shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

        }



        /* Dark Mode */

        [data-bs-theme="dark"] {

            --bg-body: #121212;

            --bg-light: #1e1e1e;

            --bg-card: #2c2c2c;

            --text-main: #e0e0e0;

            --text-title: #86efac;

            --navbar-bg: #1a1a1a;

            --navbar-text: #d1d1d1;

            --border-color: rgba(255,255,255,0.1);

            --shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

        }



        body {

            font-family: 'Open Sans', sans-serif;

            background-color: var(--bg-body);

            color: var(--text-main);

            line-height: 1.6;

            overflow-x: hidden;

            transition: background-color 0.3s, color 0.3s;

        }



        h1, h2, h3, h4, h5 {

            font-family: 'Montserrat', sans-serif;

            font-weight: 700;

            color: var(--text-title);

        }



        /* Nav */

        .navbar {

            box-shadow: 0 2px 10px var(--border-color);

            background-color: var(--navbar-bg);

            padding: 15px 0;

            transition: all 0.3s;

        }

        .navbar-brand { color: var(--primary-green) !important; font-weight: 700; font-size: 1.5rem; }

        .nav-link { color: var(--navbar-text) !important; font-weight: 600; margin-left: 15px; transition: color 0.3s; }

        .nav-link:hover, .nav-link.active { color: var(--accent-orange) !important; }

        #theme-toggle { border: none; background: transparent; font-size: 1.2rem; cursor: pointer; padding: 8px; color: var(--navbar-text); }

        #theme-toggle:hover { color: var(--accent-orange); }

        .navbar-toggler { background-color: var(--bg-light); border-color: var(--border-color); }



        /* Hero */

        .hero-section {

            background: linear-gradient(rgba(19, 189, 56, 0.9), rgba(4, 71, 24, 0.85)), url('images/Font_nature.jpg');

            background-size: cover;

            background-position: center;

            color: white;

            padding: 140px 0 100px;

            position: relative;

        }

        .hero-content h1, .hero-content p { color: white; }

        .hero-subtitle { color: var(--accent-orange) !important; font-weight: 600; }



        .profile-img-container {

            border: 5px solid var(--accent-orange);

            border-radius: 10px;

            overflow: hidden;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

            max-width: 350px;

            margin: 0 auto;

            transition: transform 0.3s;

        }

        .profile-img-container:hover { transform: scale(1.02); }

        .profile-img-container img { width: 100%; height: auto; display: block; }



        /* Sections */

        .section-padding { padding: 80px 0; }

        .section-title { text-align: center; margin-bottom: 60px; color: var(--text-title); position: relative; text-transform: uppercase; }

        .section-title::after { content: ''; display: block; width: 80px; height: 4px; background: var(--accent-orange); margin: 15px auto 0; border-radius: 2px; }



        /* Animations */

        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }

        .reveal.active { opacity: 1; transform: translateY(0); }



        /* Cards */

        .info-card {

            background: var(--bg-card);

            color: var(--text-main);

            border-radius: 8px;

            padding: 30px;

            box-shadow: var(--shadow);

            margin-bottom: 30px;

            border-top: 4px solid var(--primary-green);

            transition: transform 0.3s, box-shadow 0.3s;

            height: 100%;

        }

        .info-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); border-top-color: var(--accent-orange); }

        .info-card i { font-size: 2rem; color: var(--primary-green); margin-bottom: 20px; }

        .info-card ul { padding-left: 20px; margin-bottom: 0; }

        .info-card li { margin-bottom: 8px; }



        /* Timeline */

        .timeline-item { border-left: 2px solid var(--primary-green); padding-left: 30px; position: relative; margin-bottom: 40px; }

        .timeline-item::before { content: ''; width: 16px; height: 16px; background: var(--accent-orange); border-radius: 50%; position: absolute; left: -9px; top: 5px; box-shadow: 0 0 0 4px rgba(247, 127, 0, 0.2); }

        .timeline-date { color: var(--primary-green); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; }



        /* Gallery & Lightbox */

        .gallery-img { width: 100%; height: 250px; object-fit: cover; border-radius: 8px; transition: transform 0.3s ease; cursor: pointer; }

        .gallery-img:hover { transform: scale(1.03); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }

        .lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); backdrop-filter: blur(5px); }

        .lightbox-content { margin: auto; display: block; max-width: 90%; max-height: 85vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 3px solid white; }

        .close-btn { position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 50px; cursor: pointer; z-index: 10000; }



        /* Misc */

        .contact-section, .light-bg-section { background-color: var(--bg-light) !important; }

        .contact-icon { width: 50px; height: 50px; background: var(--primary-green); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; }

        .contact-info-item div span { color: var(--text-main); }

        

        /* Buttons */

        .btn-custom, .btn-toggle-details {

            background-color: var(--accent-orange);

            color: white;

            padding: 12px 30px;

            border-radius: 30px;

            text-decoration: none;

            font-weight: 600;

            transition: all 0.3s;

            border: 2px solid var(--accent-orange);

            display: inline-block;

            cursor: pointer;

        }

        .btn-custom:hover, .btn-toggle-details:hover { background-color: transparent; color: var(--accent-orange); }

        .btn-toggle-container { text-align: center; margin-top: 20px; width: 100%; }



        /* Footer & Social */

        footer { background: #004d2e; color: white; padding: 50px 0 20px; text-align: center; }

        .social-btn { display: inline-flex; justify-content: center; align-items: center; width: 45px; height: 45px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; color: white; margin: 0 5px; transition: all 0.3s; }

        .social-btn:hover { background-color: var(--accent-orange); transform: translateY(-3px); }



        /* Effet de survol pour les liens du footer */

footer .link-hover:hover {

    color: var(--accent-orange) !important;

    text-decoration: underline !important;

    transition: color 0.3s;

}

        /* Back to top */

        #backToTop { display: none; position: fixed; bottom: 30px; right: 30px; z-index: 99; border: none; background-color: var(--accent-orange); color: white; padding: 15px; border-radius: 50%; cursor: pointer; }



        /* Dark Mode Tweaks */

        [data-bs-theme="dark"] .text-muted { color: #aaa !important; }

        [data-bs-theme="dark"] .badge.bg-light { background-color: #333 !important; color: #86efac !important; }

        [data-bs-theme="dark"] .form-control { background-color: #2c2c2c; border-color: #444; color: #fff; }

        [data-bs-theme="dark"] .form-control:focus { background-color: #333; color: #fff; border-color: var(--primary-green); }

        .distinction-card { background: var(--bg-card); box-shadow: var(--shadow); }



        :root {

            /* Branding */

            --primary-green: #009e60;

            --accent-orange: #f77f00;

            --bg-body: #ffffff;

            --bg-light: #f4f9f4;

            --bg-card: #ffffff;

            --text-main: #333333;

            --text-title: #004d2e;

            --navbar-bg: #ffffff;

            --navbar-text: #555555;

            --border-color: rgba(0,0,0,0.1);

        }



        [data-bs-theme="dark"] {

            --bg-body: #121212;

            --bg-light: #1e1e1e;

            --bg-card: #2c2c2c;

            --text-main: #e0e0e0;

            --text-title: #86efac;

            --navbar-bg: #1a1a1a;

            --navbar-text: #d1d1d1;

            --border-color: rgba(255,255,255,0.1);

        }



        body {

            font-family: 'Open Sans', sans-serif;

            background-color: var(--bg-body);

            color: var(--text-main);

            line-height: 1.6;

            padding-top: 80px;

            transition: background-color 0.3s, color 0.3s;

        }



        h1 { font-family: 'Montserrat', sans-serif; color: var(--text-title); margin-bottom: 40px; text-align: center; border-bottom: 3px solid var(--accent-orange); display: inline-block; padding-bottom: 10px; }

        h2 { font-family: 'Montserrat', sans-serif; font-size: 1.5rem; margin-top: 35px; margin-bottom: 15px; color: var(--primary-green); border-left: 4px solid var(--accent-orange); padding-left: 15px; }

        h4 { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; color: var(--text-title); margin-bottom: 10px; font-weight: 700; }



        .navbar { background-color: var(--navbar-bg); box-shadow: 0 2px 10px var(--border-color); }

        .navbar-brand { color: var(--primary-green) !important; font-weight: 700; font-size: 1.5rem; }

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

        .nav-link:hover { color: var(--accent-orange) !important; }



        .legal-content {

            background: var(--bg-card);

            padding: 40px;

            border-radius: 8px;

            box-shadow: 0 5px 15px rgba(0,0,0,0.05);

            margin-bottom: 50px;

        }



        /* Liens dans le texte */

        .legal-content a { color: var(--accent-orange); text-decoration: none; }

        .legal-content a:hover { text-decoration: underline; }



        footer { background: #004d2e; color: white; padding: 40px 0; text-align: center; margin-top: auto; }

        

        [data-bs-theme="dark"] .legal-content { background: var(--bg-card); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }