/* ============================================================
   navbar.css  —  Garderie Bana
   Shared navbar / dropdown / submenu / breadcrumb styles
   used across all public pages (was duplicated inline). 
   ============================================================ */

/* ===== Submenu (Groupes) — aligned to the parent button ===== */
.navbar-custom .nav li.groupe-dropdown{position:relative;}
/* Three colored dots under the word — playful cue that a menu exists */
.navbar-custom .nav li.groupe-dropdown > a{position:relative;}
.navbar-custom .nav li.groupe-dropdown > a .grp-dots{
   position:absolute;left:0;right:0;bottom:6px;display:flex;gap:6px;justify-content:center;
}
.navbar-custom .nav li.groupe-dropdown > a .grp-dots i{
   width:7px;height:7px;border-radius:50%;display:block;transition:.2s ease;
}
.navbar-custom .nav li.groupe-dropdown > a .grp-dots i:nth-child(1){background:#7ed957;}
.navbar-custom .nav li.groupe-dropdown > a .grp-dots i:nth-child(2){background:#ffde59;}
.navbar-custom .nav li.groupe-dropdown > a .grp-dots i:nth-child(3){background:#5ce1e6;}
.navbar-custom .nav li.groupe-dropdown:hover > a .grp-dots i,
.navbar-custom .nav li.groupe-dropdown.open > a .grp-dots i{transform:scale(1.35);}
/* keep the parent link the SAME white as the other items (do not recolor) */
.navbar-custom .nav li.groupe-dropdown.active > a{color:#fff;}
/* submenu starts at the LEFT edge of the button, just under the navbar */
.navbar-custom .nav .groupe-submenu{
   display:none;position:absolute;top:100%;left:0;margin:0;padding:8px 0;
   min-width:250px;background:#fff;border:none;border-radius:0 0 14px 14px;
   box-shadow:0 8px 20px rgba(0,0,0,.15);text-align:left;z-index:1000;
}
/* Large screens: open on hover. Small screens: open on click (.open). */
@media(min-width:992px){
   .navbar-custom .nav li.groupe-dropdown:hover .groupe-submenu{display:block;}
}
.navbar-custom .nav li.groupe-dropdown.open .groupe-submenu{display:block;}
.navbar-custom .nav .groupe-submenu li{height:auto;line-height:normal;margin:0;float:none;}
/* override site rule: ul.nav ul.dropdown-menu{text-align:center} + li a{inline-block} */
.navbar-custom ul.nav ul.dropdown-menu.groupe-submenu{text-align:left!important;}
.navbar-custom ul.nav ul.dropdown-menu.groupe-submenu li{display:block!important;width:100%;}
.navbar-custom .nav .groupe-submenu li a{
   display:block!important;text-align:left!important;padding:12px 25px!important;margin:0!important;
   line-height:1.4!important;color:#444!important;font-family:Lato,sans-serif;font-weight:700;
   font-size:14px;letter-spacing:.3px;border-radius:0;transition:.2s;
}
/* override the site's navbar hover rule (color:#fff) inside the submenu */
.navbar-custom .nav .groupe-submenu li a:hover,
.navbar-custom .nav .groupe-submenu li a:focus{background:#fdf5e6;color:#E21C3F!important;padding-left:28px!important;}
.navbar-custom .nav .groupe-submenu li.sub-active > a{font-weight:700!important;color:#E21C3F!important;background:#fdf5e6!important;}

/* ===== "La garderie" dropdown (same mechanics as groupe-dropdown) ===== */
.navbar-custom .nav li.garderie-dropdown{position:relative;}
.navbar-custom .nav li.garderie-dropdown > a{position:relative;}
.navbar-custom .nav li.garderie-dropdown > a .grp-dots{position:absolute;left:0;right:0;bottom:13px;display:flex;gap:6px;justify-content:center;}
.navbar-custom .nav li.garderie-dropdown > a .grp-dots i{width:7px;height:7px;border-radius:50%;display:block;transition:.2s ease;}
.navbar-custom .nav li.garderie-dropdown > a .grp-dots i:nth-child(1){background:#ff5157;}
.navbar-custom .nav li.garderie-dropdown > a .grp-dots i:nth-child(2){background:#ffde59;}
.navbar-custom .nav li.garderie-dropdown > a .grp-dots i:nth-child(3){background:#7ed957;}
.navbar-custom .nav li.garderie-dropdown.open > a .grp-dots i{transform:scale(1.35);}
.navbar-custom .nav li.garderie-dropdown.active > a{color:#fff;}
.navbar-custom .nav li.garderie-dropdown:hover .groupe-submenu{display:block;}
.navbar-custom .nav li.garderie-dropdown.open .groupe-submenu{display:block;}

/* active (current section) OR open (clicked):
   show the red box on Classes / La garderie buttons */
.navbar-custom .nav li.groupe-dropdown.active > a,
.navbar-custom .nav li.garderie-dropdown.active > a,
.navbar-custom .nav li.groupe-dropdown.open > a,
.navbar-custom .nav li.garderie-dropdown.open > a{
   background:#E21C3F !important;
   color:#fff !important;
   border-radius:0 0 5px 5px;
}

/* ===== Breadcrumb bar (full-width colored strip) ===== */
.bana-breadcrumb{background:#fdf5e6;border-bottom:1px solid #f0e6d2;}
.bana-breadcrumb-inner{max-width:1080px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-family:Baloo,cursive;font-size:15px;}
.bana-breadcrumb a{color:#338DE8;text-decoration:none;transition:.2s;}
.bana-breadcrumb a:hover{color:#E21C3F;}
.bana-breadcrumb .bc-sep{color:#FFA500;font-size:11px;display:flex;align-items:center;}
.bana-breadcrumb .bc-current{color:#E21C3F;font-weight:700;}