/* ==========================================================================
   Thème "Vivre à Madagascar" – Overrides Yeti (Bootstrap 5)
   Couleurs inspirées de Madagascar : lagon, latérite, nature tropicale
   ========================================================================== */

:root {
  /* Palette principale "Vivre à Mada" - Redéfinition */
  --bs-primary:   #2FA89C; /* Vert sarcelle (accent principal) */
  --bs-secondary: #FAA83B; /* Orange ocre (baobab) */
  --bs-success:   #278a81; /* Variante plus sombre du vert sarcelle */
  --bs-info:      #646D75; /* Gris ardoise */
  --bs-warning:   #FAA83B; /* Orange ocre */
  --bs-danger:    #D7263D; /* Rouge conservé pour les alertes */
  --bs-light:     #F2F0DC; /* Beige sable (fond clair) */
  --bs-dark:      #262626; /* Noir profond (textes forts ou fonds sombres) */

  /* Couleurs de texte par défaut */
  --bs-body-color: #262626; /* Noir profond */
  --bs-body-bg:    #F2F0DC; /* Beige sable */

  /* Liens */
  --bs-link-color:       #2FA89C;
  --bs-link-hover-color: #227d73;
}

/* Body global */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* Titres – un peu plus contrastés */
h1, h2, h3, h4, h5, h6 {
  color: #10212b;
  font-weight: 600;
}

/* Liens */
a {
  color: var(--bs-link-color);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}

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

/* Navbar principale : fond dark mais teinté */
.navbar {
  font-weight: 500;
}
/* Fix Navbar Top */
.navbar.fixed-top {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Ajout de padding-top au body pour compenser la navbar fixe */
body {
    padding-top: 76px; /* Ajuster selon la hauteur réelle de votre navbar */
}

.navbar-dark.bg-primary,
.navbar.bg-primary {
  background: #242e36; /* Navbar Gris Bleu foncé demandé */
  border-bottom: 3px solid #FAA83B; /* Liseré Orange ocre */
}

/* Liens navbar */
.navbar-dark .navbar-nav .nav-link {
  color: #F2F0DC; /* Beige sable */
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #FAA83B; /* Orange ocre au survol */
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .show > .nav-link {
  color: #FAA83B;
  position: relative;
}

.navbar-dark .navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.35rem;
  height: 2px;
  background-color: #2FA89C; /* Petit trait Vert sarcelle */
  border-radius: 999px;
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */

.btn-primary {
  --bs-btn-color: #F2F0DC;
  --bs-btn-bg: #2FA89C;
  --bs-btn-border-color: #2FA89C;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #25877d;
  --bs-btn-hover-border-color: #25877d;
  --bs-btn-focus-shadow-rgb: 47, 168, 156;
  --bs-btn-active-bg: #1e6e66;
  --bs-btn-active-border-color: #1e6e66;
}

.btn-secondary {
  --bs-btn-color: #262626;
  --bs-btn-bg: #FAA83B;
  --bs-btn-border-color: #FAA83B;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e5952d;
  --bs-btn-hover-border-color: #e5952d;
  --bs-btn-focus-shadow-rgb: 250, 168, 59;
  --bs-btn-active-bg: #d18626;
  --bs-btn-active-border-color: #c47d23;
}

.btn-outline-primary {
  --bs-btn-color: #2FA89C;
  --bs-btn-border-color: #2FA89C;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2FA89C;
  --bs-btn-hover-border-color: #2FA89C;
}

/* Bouton “tonique” type call-to-action */
.btn-hero {
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ==========================================================================
   BADGES, LABELS, PILLS
   ========================================================================== */

.badge.bg-primary {
  background-color: #2FA89C !important;
  color: #F2F0DC !important;
}

.badge.bg-secondary {
  background-color: #FAA83B !important;
  color: #262626 !important;
}

.badge.bg-light {
  background-color: #F2F0DC !important;
  color: #262626 !important;
  border: 1px solid rgba(38, 38, 38, 0.1);
}

/* ==========================================================================
   CARDS & BLOCS
   ========================================================================== */

.card {
  border-radius: 0.75rem;
  border: 1px solid rgba(38, 38, 38, 0.08);
  box-shadow: 0 6px 18px rgba(38, 38, 38, 0.06);
  background-color: #ffffff;
}

.card-header {
  background-color: rgba(47, 168, 156, 0.1); /* Teinte vert sarcelle légère */
  border-bottom-color: rgba(38, 38, 38, 0.08);
  color: #262626;
}

.card.highlight {
  border-color: #FAA83B;
}

/* ==========================================================================
   ALERTES
   ========================================================================== */

.alert-primary {
  background-color: rgba(47, 168, 156, 0.15);
  border-color: rgba(47, 168, 156, 0.4);
  color: #1e6e66;
}

.alert-warning {
  background-color: rgba(250, 168, 59, 0.15);
  border-color: rgba(250, 168, 59, 0.5);
  color: #8a520c;
}

.alert-success {
  background-color: rgba(47, 133, 90, 0.08);
  border-color: rgba(47, 133, 90, 0.4);
  color: #1f5133;
}

.alert-danger {
  background-color: rgba(215, 38, 61, 0.08);
  border-color: rgba(215, 38, 61, 0.45);
  color: #7b0f1f;
}

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */

.form-control,
.form-select {
  border-radius: 0.55rem;
  border-color: rgba(148, 163, 184, 0.7);
}

.form-control:focus,
.form-select:focus {
  border-color: #2FA89C;
  box-shadow: 0 0 0 0.2rem rgba(47, 168, 156, 0.25);
}

/* ==========================================================================
   SECTIONS HERO & LAYOUT GLOBAL
   ========================================================================== */

/* Exemple de section hero générique (si tu l’utilises) */
.hero-section {
  padding: 5rem 0 4rem;
  background: radial-gradient(circle at top left, #FAA83B 0, transparent 55%),
              radial-gradient(circle at bottom right, #2FA89C 0, transparent 60%),
              #F2F0DC;
}

.hero-section .hero-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #262626;
}

.hero-section .hero-subtitle {
  font-size: 1.1rem;
  color: #646D75;
  max-width: 40rem;
}

/* Container main un peu plus aéré sur fond sable */
.main-wrapper {
  background-color: #F2F0DC;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
  background-color: #262626;
  color: #F2F0DC;
  padding: 2rem 0;
  border-top: 4px solid #FAA83B;
}

footer a {
  color: #FAA83B;
}

footer a:hover {
  color: #ffffff;
}

/* ==========================================================================
   MODE SOMBRE – Vivre à Madagascar
   S'active quand <body class="dark-mode"> est présent
   ========================================================================== */

body.dark-mode {
  /* Fond général très sombre, texte clair */
  --bs-body-bg: #1a1a1a;   /* Noir encore plus profond que le noir profond de base */
  --bs-body-color: #F2F0DC;

  /* On garde la palette, mais on ajuste pour le contraste */
  --bs-primary:   #2FA89C; 
  --bs-secondary: #FAA83B; 
  --bs-success:   #2FA89C; 
  --bs-info:      #646D75;
  --bs-warning:   #FAA83B;
  --bs-danger:    #fb7185;
  --bs-light:     #262626;
  --bs-dark:      #000000;

  --bs-link-color:       #FAA83B;
  --bs-link-hover-color: #fcc16e;

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

/* Texte titré un peu plus clair */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #f9fafb;
}

/* Liens */
body.dark-mode a {
  color: var(--bs-link-color);
}

body.dark-mode a:hover,
body.dark-mode a:focus {
  color: var(--bs-link-hover-color);
}

/* NAVBAR sombre avec accents lagon */
body.dark-mode .navbar-dark.bg-primary,
body.dark-mode .navbar.bg-primary {
  background: linear-gradient(90deg, #0f172a, #022c3a);
}

body.dark-mode .navbar-dark .navbar-nav .nav-link {
  color: rgba(241, 245, 249, 0.9);
}

body.dark-mode .navbar-dark .navbar-nav .nav-link:hover,
body.dark-mode .navbar-dark .navbar-nav .nav-link:focus {
  color: #ffffff;
}

body.dark-mode .navbar-dark .navbar-nav .nav-link.active::after {
  background-color: #facc15; /* trait doré conservé */
}

/* CARTES & BLOCS */
body.dark-mode .card {
  background-color: #020617;
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

body.dark-mode .card-header {
  background-color: #020617;
  border-bottom-color: rgba(148, 163, 184, 0.35);
}

/* ALERTES adaptées au sombre */
body.dark-mode .alert-primary {
  background-color: rgba(34, 184, 207, 0.12);
  border-color: rgba(34, 184, 207, 0.5);
  color: #e0f9ff;
}

body.dark-mode .alert-warning {
  background-color: rgba(250, 204, 21, 0.12);
  border-color: rgba(250, 204, 21, 0.5);
  color: #fef9c3;
}

body.dark-mode .alert-success {
  background-color: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.5);
  color: #bbf7d0;
}

body.dark-mode .alert-danger {
  background-color: rgba(251, 113, 133, 0.12);
  border-color: rgba(251, 113, 133, 0.5);
  color: #ffe4e6;
}

/* FORMULAIRES */
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #020617;
  color: #e5e7eb;
  border-color: rgba(148, 163, 184, 0.6);
}

body.dark-mode .form-control::placeholder {
  color: rgba(148, 163, 184, 0.7);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  border-color: #22b8cf;
  box-shadow: 0 0 0 0.2rem rgba(34, 184, 207, 0.35);
}

/* BADGES */
body.dark-mode .badge.bg-light {
  background-color: #111827 !important;
  color: #e5e7eb !important;
  border-color: rgba(148, 163, 184, 0.5);
}

/* HERO SECTION en sombre (si tu utilises .hero-section) */
body.dark-mode .hero-section {
  background: radial-gradient(circle at top left, rgba(250, 204, 21, 0.18) 0, transparent 55%),
              radial-gradient(circle at bottom right, rgba(34, 184, 207, 0.3) 0, transparent 60%),
              #020617;
}

body.dark-mode .hero-section .hero-title {
  color: #f9fafb;
}

body.dark-mode .hero-section .hero-subtitle {
  color: #cbd5f5;
}

/* FOOTER sombre (déjà sombre, on ajuste juste un peu les contrastes) */
body.dark-mode footer {
  background-color: #020617;
  color: rgba(226, 232, 240, 0.9);
}

body.dark-mode footer a {
  color: #facc15;
}

body.dark-mode footer a:hover {
  color: #fef9c3;
}

/* ==========================================================================
   Corrections mode sombre : fonds clairs & texte
   ========================================================================== */

/* Tous les blocs "clairs" doivent devenir sombres en dark-mode */
body.dark-mode .bg-light,
body.dark-mode .bg-white {
  background-color: #020617 !important;   /* bleu nuit */
  color: #e5e7eb !important;              /* texte clair */
  border-color: rgba(148, 163, 184, 0.4) !important;
}

/* Titres dans ces blocs */
body.dark-mode .bg-light h1,
body.dark-mode .bg-light h2,
body.dark-mode .bg-light h3,
body.dark-mode .bg-light h4,
body.dark-mode .bg-light h5,
body.dark-mode .bg-light h6,
body.dark-mode .bg-white h1,
body.dark-mode .bg-white h2,
body.dark-mode .bg-white h3,
body.dark-mode .bg-white h4,
body.dark-mode .bg-white h5,
body.dark-mode .bg-white h6 {
  color: #F2F0DC !important;
}

/* Texte "muted" (qui devient trop pâle en sombre) */
body.dark-mode .text-muted {
  color: #b0b0b0 !important;
}

/* Footer : on écrase totalement le fond clair éventuel */
body.dark-mode footer,
body.dark-mode footer.bg-light {
  background-color: #000000 !important;
  color: #F2F0DC !important;
  border-top-color: #FAA83B !important;
}

/* Liens dans le footer en sombre */
body.dark-mode footer a {
  color: #FAA83B !important;
}

body.dark-mode footer a:hover {
  color: #ffffff !important;
}

/* ===================================
   Custom Madagascar Theme Adjustments
   =================================== */

/* Smooth Scrolling pour les ancres du sommaire */
html {
  scroll-behavior: smooth;
}

/* Ajustement scroll pour ne pas être caché par le header si fixe (optionnel) */
[id^="section-"] {
    scroll-margin-top: 80px;
}

/* Accordion Sommaire */
.accordion-button::after {
    /* Suppression flèche bootstrap par défaut car on en a mis une custom */
    display: none; 
}
.accordion-header button i {
    transition: transform 0.2s;
}
.accordion-header button[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
}

/* ==========================================================================
   SOUS-MENUS DROPDOWN (pour les catégories avec sous-catégories)
   ========================================================================== */

/* S'assurer que le dropdown parent ne cache pas le sous-menu */
.navbar .dropdown > .dropdown-menu {
    overflow: visible !important;
}

/* Conteneur du sous-menu */
.dropdown-submenu {
    position: relative;
}

/* Lien principal avec flèche */
.dropdown-submenu > .dropdown-toggle-sub {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.dropdown-submenu > .dropdown-toggle-sub .submenu-arrow {
    font-size: 0.65em;
    opacity: 0.5;
    transition: all 0.2s ease;
    margin-left: auto;
    padding-left: 20px;
}

/* Contenu du sous-menu - IMPORTANT: on cible .dropdown-submenu-content */
.dropdown-submenu > .dropdown-submenu-content {
    display: none !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    min-width: 220px;
    margin: 0 !important;
    margin-top: -8px !important;
    padding: 0.5rem 0;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
    background-color: #ffffff !important;
    z-index: 1060 !important;
    border: 1px solid rgba(0,0,0,0.15);
}

/* Affichage au survol (desktop) - CRITICAL */
.dropdown-submenu:hover > .dropdown-submenu-content {
    display: block !important;
}

/* Items dans le sous-menu */
.dropdown-submenu > .dropdown-submenu-content > .dropdown-item {
    padding: 0.5rem 1rem;
    color: #212529 !important;
    white-space: nowrap;
}

.dropdown-submenu > .dropdown-submenu-content > .dropdown-item:hover {
    background-color: var(--bs-primary);
    color: #fff !important;
}

.dropdown-submenu:hover > .dropdown-toggle-sub .submenu-arrow {
    transform: translateX(3px);
    opacity: 1;
}

/* Style actif pour le parent au survol */
.dropdown-submenu:hover > .dropdown-toggle-sub {
    background-color: var(--bs-primary);
    color: #fff !important;
}

/* ==========================================================================
   RESPONSIVE : Sous-menus sur mobile
   ========================================================================== */

@media (max-width: 991.98px) {
    /* Sur mobile, le sous-menu s'affiche en dessous */
    .dropdown-submenu-content {
        position: static;
        left: auto;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.03);
        border-left: 3px solid var(--bs-primary);
        margin: 0.25rem 0 0.25rem 1rem;
        padding: 0.25rem 0;
    }
    
    /* Masquer par défaut, afficher au clic via JS */
    .dropdown-submenu-content {
        display: none;
    }
    
    .dropdown-submenu.show > .dropdown-submenu-content {
        display: block;
    }
    
    /* Rotation de la flèche quand ouvert */
    .dropdown-submenu.show > .dropdown-toggle-sub .submenu-arrow {
        transform: rotate(90deg);
    }
    
    /* Items du sous-menu plus petits sur mobile */
    .dropdown-submenu-content .dropdown-item {
        padding: 0.4rem 1rem;
        font-size: 0.9em;
    }
}

/* ==========================================================================
   MODE SOMBRE : Sous-menus
   ========================================================================== */

body.dark-mode .dropdown-submenu-content {
    background-color: #1a1a2e;
    border-color: rgba(148, 163, 184, 0.3);
}

body.dark-mode .dropdown-submenu:hover > .dropdown-toggle-sub {
    background-color: rgba(255, 255, 255, 0.05);
}

@media (max-width: 991.98px) {
    body.dark-mode .dropdown-submenu-content {
        background-color: rgba(255, 255, 255, 0.03);
        border-left-color: var(--bs-primary);
    }
}