/* ====================== NAVBAR PRINCIPALE ====================== */

/* Couleur de fond + dimensions */
.navbar.bg-dark {
    background: linear-gradient(to bottom, #7CB342, #5a8c2e) !important;
    border-bottom: 3px solid #4a7a22 !important; /* ligne plus foncée en bas pour l'effet */
}

.navbar.navbar-expand-md.fixed-top {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 70% !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.28) !important;
    padding: 0.55rem 1.2rem !important;   /* un peu plus d'espace interne */
}

/* ====================== CONTENU INTERNE ====================== */

/* On réduit les marges/padding pour gagner de l'espace horizontal */
.navbar .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.6rem !important;   /* réduit */
    padding-right: 0.6rem !important;  /* réduit */
}

/* ====================== LOGO & BRAND ====================== */

.navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 14px;
    padding: 0.3rem 0;
    flex-shrink: 0;                    /* empêche le logo de rétrécir */
}

.navbar-brand img.logo-img {
    height: 50px;
    width: auto;
    max-height: 50px;
    object-fit: contain;
}

.navbar-brand span {
    font-size: 1.4rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
}

/* ====================== MENU ====================== */

.navbar-nav {
    width: 100% !important;               /* prend tout l'espace disponible */
    justify-content: flex-end !important; /* colle le menu à droite */
    gap: 4px;                             /* espace entre les items */
}

.navbar-nav .nav-item {
    margin-left: 6px;                     /* espace entre les liens principaux */
}

/* Liens principaux */
.navbar-dark .navbar-nav .nav-link {
    color: white !important;
    padding: 0.35rem 0.35rem !important;
    font-size: 0.76rem !important;        /* ← Taille réduite */
    font-weight: 500;
    white-space: nowrap;
}

.navbar-dark .navbar-nav .nav-link:hover {
    background-color: rgba(255,255,255,0.2) !important;
    color: #ffd700 !important;
}

/* ====================== DROPDOWNS ====================== */

.nav-item.dropdown {
    position: relative;
}

.navbar-dark .dropdown-menu {
    background: linear-gradient(to bottom, #7CB342, #5a8c2e) !important;
    border: 1px solid #6ea137 !important;
    border-top: none !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    border-radius: 0 0 10px 10px !important;
    padding: 0.4rem 0;
    min-width: 250px;

    margin-top: 0 !important; /* IMPORTANT */
}

/* Items */
.navbar-dark .dropdown-item {
    color: white !important;
    padding: 0.7rem 1.5rem !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 0.76rem !important;
    font-weight: 500;
}

.navbar-dark .dropdown-item:hover,
.navbar-dark .dropdown-item:focus {
    background-color: rgba(255,255,255,0.15) !important;
    color: #ffd700 !important;
}

/* Hover parent */
.nav-item.dropdown:hover > .nav-link.dropdown-toggle {
    background-color: rgba(255,255,255,0.15) !important;
    color: #ffd700 !important;
}

/* OUVERTURE AU SURVOL */
@media (min-width: 768px) {

    .navbar .dropdown-menu {
        display: none;
    }

    .navbar .dropdown:hover > .dropdown-menu {
        display: block !important;
    }

    /* Empêche le "trou" entre bouton et menu */
    .navbar .dropdown-menu {
        top: 100%;
        left: 0;
    }
}

.dropdown-toggle::after {
    border-top-color: white !important;
}
/* ====================== MOBILE ====================== */

@media (max-width: 768px) {
    .navbar-brand img.logo-img {
        height: 40px;
    }
    .navbar-brand span {
        font-size: 1.25rem;
    }
    
    .navbar .container {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }
}

/* ====================== ESPACEMENT GLOBAL ====================== */
body {
    padding-top: 30px !important;
}

/* ====================== COULEURS & CONTENU ====================== */
:root {
    --color-bg: #FFF8F0;
    --color-accent-1: #F4D4B6;
    --color-accent-2: #E8C4A0;
    --color-text: #5A3E2B;
    --color-highlight: #F7A582;
    --color-border: #D4B896;
}

html, body, #main-content, article.page {
    height: 700px !important;
    min-height: 100vh !important;
	padding: 0 !important;
    padding-bottom: 20px !important;
	margin: 0 !important;
}

/* ====================== SUPPRESSION FOOTER ====================== */
footer.footer {
    display: none !important;
}

/* ====================== CONTENU DES PAGES ====================== */
.container {
    max-width: 1400px !important;
    width: 100% !important;


}

.row > .col-lg-8.mx-auto {
    max-width: 92% !important;
    flex: 0 0 92% !important;
    margin-left: auto;
    margin-right: auto;
}

/* ====================== BIO CONTAINER ====================== */
.bio-container {
    position: relative;
    max-width: 100%;
    width: 100%;
    margin: 1.8rem auto 2.2rem auto;
    padding: 2.6rem 2.2rem 2.2rem;
    background-color: var(--color-bg);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(212, 184, 150, 0.2);
	margin-top: 100px !important;
}

/* ====================== IMAGE BIO - HAUTE + TRÈS À DROITE ====================== */
.bio-image-container {
    position: relative;
    margin: -195px 0 20px auto !important;   /* auto à droite + marge négative en haut */
    margin-left: 680px !important;           /* ← Décalage important vers la droite */
    width: fit-content;
    max-width: 360px;
    border-radius: 10px;
    padding: 0.7rem;
    background-color: white;
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 28px rgba(212, 184, 150, 0.3);
    transform: rotate(1.5deg);
    z-index: 10;
}

.bio-image {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ====================== BIO PARAGRAPHES ====================== */
.bio-intro {
    text-align: center;
    font-size: 1.32rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2.2rem;
    padding: 1.2rem;
    background-color: rgba(244, 212, 182, 0.3);
    border-radius: 8px;
    border-left: 5px solid var(--color-highlight);
    width: 80%;
}

.bio-paragraph {
    position: relative;
    padding: 1.6rem;
    margin: 1.8rem 0;
    background-color: white;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    box-shadow: 0 5px 14px rgba(212, 184, 150, 0.18);
    color: var(--color-text);
    line-height: 1.75;
}

.bio-paragraph.p1 {
    margin-left: 4.5rem !important;
    border-top: 4px solid var(--color-accent-1);
    width: 50%;
}

.bio-paragraph.p2 {
    margin-left: -1rem !important;
    border-top: 4px solid var(--color-accent-2);
    width: 50%;
}

/* Responsive */
@media (min-width: 768px) {
    .bio-paragraph.p2 {
        margin-left: 2.5rem;
        margin-top: -1.2rem;
    }
    
    .bio-image-container {
        margin-right: 2.5rem;
        margin-top: -2.5rem;
    }
}