.brand-logo img {
    width: 221px !important;
    height: auto;
}

@media (min-width: 992px) {
  .container-header .mod-menu li.deeper:hover > ul {
    display: block;
  }

  .container-header .mod-menu li.deeper:hover > ul.mm-collapse {
    display: block;
    height: auto;
    visibility: visible;
  }
}

.container-header .mod-menu a:focus,
.container-header .mod-menu button:focus,
.container-header .mod-menu .nav-link:focus {
    outline: none !important;
    box-shadow: none !important;
}

/*
 * user.css — Thème Dénombrement Bruss'Help
 * À placer dans : templates/cassiopeia/css/user.css
 * Compatible Joomla 5 / Cassiopeia
 */

/* ============================================
   VARIABLES DE COULEURS
   Palette extraite du logo officiel Bruss'Help
   ============================================ */
:root {
  --bh-bleu:         #12779e;   /* bleu exact du logo Bruss'Help */
  --bh-bleu-dark:    #0d5a78;   /* version foncée pour hover/header */
  --bh-bleu-nuit:    #0a3d52;   /* header fond, footer */
  --bh-bleu-light:   #e6f4f9;   /* fond clair teinte bleue */
  --bh-gris-logo:    #9b9b9b;   /* gris exact du ".brussels" */
  --bh-gris-fond:    #f2f6f8;   /* fond page */
  --bh-gris-texte:   #3a3d44;   /* texte principal */
  --bh-gris-soft:    #6c757d;
  --bh-blanc:        #ffffff;
  --bh-border:       #ccdde6;
  --bh-accent:       #e07b20;   /* orange chaud pour accents, CTA */
  --bh-accent-light: #f0a050;
}

/* ============================================
   TYPOGRAPHIE
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=DM+Sans:wght@400;500;600&display=swap');

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: var(--bh-gris-texte);
  background-color: var(--bh-gris-fond);
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--bh-bleu-nuit);
  line-height: 1.25;
}

h2 {
  font-size: 1.6rem;
  margin-top: 2.2rem;
  margin-bottom: .8rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--bh-bleu);
  display: inline-block;
}

h3 {
  font-size: 1.2rem;
  color: var(--bh-bleu-dark);
}

/* ============================================
   HEADER / NAVBAR
   ============================================ */
.header {
  background: var(--bh-bleu-nuit) !important;
  border-bottom: 3px solid var(--bh-bleu);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* Logo / nom du site */
.navbar-brand,
.site-title a {
  color: var(--bh-blanc) !important;
  font-family: 'Source Serif 4', serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .02em;
}

.site-description {
  color: rgba(255,255,255,.65) !important;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Liens de navigation */
.navbar-nav .nav-link,
.navbar-nav > li > a {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .03em;
  padding: .65rem 1rem;
  border-radius: 4px;
  transition: background .2s, color .2s;
}

.navbar-nav .nav-link:hover,
.navbar-nav > li > a:hover {
  color: var(--bh-blanc) !important;
  background: rgba(255,255,255,.12);
}

.navbar-nav .nav-link.active,
.navbar-nav > li.active > a {
  color: #7dd4ef !important;   /* bleu clair — actif visible sur fond nuit */
  background: rgba(18,119,158,.25);
}

/* Dropdown */
.navbar-nav .dropdown-menu {
  background: var(--bh-bleu-dark);
  border: none;
  border-top: 2px solid var(--bh-bleu);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.navbar-nav .dropdown-item {
  color: rgba(255,255,255,.85) !important;
  font-size: .88rem;
  padding: .5rem 1.2rem;
  transition: background .15s;
}

.navbar-nav .dropdown-item:hover {
  background: rgba(255,255,255,.1);
  color: var(--bh-blanc) !important;
}

/* Toggler hamburger mobile */
.navbar-toggler {
  border-color: rgba(255,255,255,.4) !important;
}
.navbar-toggler-icon {
  filter: invert(1);
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */
#sp-main-body,
.container-main,
main .container {
  background: var(--bh-blanc);
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(10,61,82,.08);
  padding: 2.2rem 2.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

/* Liens dans le corps du texte */
.item-page a,
.com-content-article__body a {
  color: var(--bh-bleu);
  text-decoration: none;
  border-bottom: 1px solid rgba(18,119,158,.3);
  transition: color .15s, border-color .15s;
}

.item-page a:hover,
.com-content-article__body a:hover {
  color: var(--bh-bleu-dark);
  border-bottom-color: var(--bh-bleu);
}

/* Listes à puces */
.item-page ul li::marker,
.com-content-article__body ul li::marker {
  color: var(--bh-bleu);
}

.item-page ul li,
.com-content-article__body ul li {
  margin-bottom: .5rem;
}

/* Bold dans le texte */
strong, b {
  color: var(--bh-bleu-nuit);
}

/* ============================================
   BOUTON PRINCIPAL (CTA inscriptions)
   Le bouton teal/bleu existant dans le contenu
   ============================================ */
.btn-primary,
a.btn-primary,
.btn.btn-primary {
  background: var(--bh-bleu) !important;
  border-color: var(--bh-bleu) !important;
  color: var(--bh-blanc) !important;
  font-weight: 600;
  padding: .75rem 2rem;
  border-radius: 8px;
  letter-spacing: .03em;
  box-shadow: 0 3px 10px rgba(18,119,158,.3);
  transition: background .2s, box-shadow .2s, transform .1s;
}

.btn-primary:hover,
a.btn-primary:hover {
  background: var(--bh-bleu-dark) !important;
  border-color: var(--bh-bleu-dark) !important;
  box-shadow: 0 5px 16px rgba(18,119,158,.45);
  transform: translateY(-1px);
}

/* ============================================
   SIDEBAR / MODULES
   ============================================ */
#sp-right .moduletable,
aside .moduletable,
.sidebar-right .moduletable {
  background: var(--bh-blanc);
  border: 1px solid var(--bh-border);
  border-top: 3px solid var(--bh-bleu);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(10,61,82,.07);
}

/* Titres de modules */
.moduletable h3,
.moduletable .module-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--bh-bleu-nuit);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bh-border);
  padding-bottom: .5rem;
}

/* Liens dans les modules */
.moduletable a {
  color: var(--bh-bleu);
  text-decoration: none;
  font-size: .95rem;
  transition: color .15s;
}
.moduletable a:hover {
  color: var(--bh-bleu-dark);
  text-decoration: underline;
}

/* ============================================
   MODULE LOGIN
   ============================================ */
.moduletable .login-fields input[type="text"],
.moduletable .login-fields input[type="password"] {
  border: 1px solid var(--bh-border);
  border-radius: 6px;
  padding: .4rem .75rem;
  font-size: .9rem;
  width: 100%;
  transition: border-color .2s;
}

.moduletable .login-fields input:focus {
  border-color: var(--bh-bleu);
  outline: none;
  box-shadow: 0 0 0 3px rgba(18,119,158,.15);
}

/* ============================================
   FORMULAIRES GÉNÉRAUX
   ============================================ */
.form-control,
input[type="text"],
input[type="email"],
textarea,
select {
  border-radius: 6px;
  border: 1px solid var(--bh-border);
  font-family: 'DM Sans', sans-serif;
  transition: border-color .2s, box-shadow .2s;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus {
  border-color: var(--bh-bleu);
  box-shadow: 0 0 0 3px rgba(18,119,158,.2);
  outline: none;
}

/* ============================================
   FOOTER
   ============================================ */
footer,
#sp-footer,
.footer {
  background: var(--bh-bleu-nuit) !important;
  color: rgba(255,255,255,.7);
  padding: 2rem 0;
  margin-top: 2rem;
  font-size: .88rem;
  border-top: 3px solid var(--bh-bleu);
}

footer a,
#sp-footer a {
  color: #7dd4ef !important;
  text-decoration: none;
}

footer a:hover,
#sp-footer a:hover {
  color: var(--bh-blanc) !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
  background: transparent;
  padding: .5rem 0;
  font-size: .85rem;
}

.breadcrumb-item a {
  color: var(--bh-bleu);
}

.breadcrumb-item.active {
  color: var(--bh-gris-soft);
}

/* ============================================
   MESSAGES / ALERTES
   ============================================ */
.alert-info {
  background: var(--bh-bleu-light);
  border-left: 4px solid var(--bh-bleu);
  border-radius: 0 8px 8px 0;
  color: var(--bh-bleu-nuit);
}

.alert-success {
  background: rgba(40,167,69,.08);
  border-left: 4px solid #28a745;
}

.alert-warning {
  background: rgba(224,123,32,.08);
  border-left: 4px solid var(--bh-accent);
}

/* ============================================
   RESPONSIVE MOBILE
   ============================================ */
@media (max-width: 768px) {
  #sp-main-body,
  .container-main,
  main .container {
    padding: 1.2rem 1rem;
    border-radius: 6px;
    margin-top: .75rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  .navbar-nav .nav-link {
    padding: .5rem .75rem;
  }

  .navbar-collapse {
    background: var(--bh-bleu-dark);
    padding: .5rem 1rem;
    border-radius: 0 0 8px 8px;
    margin-top: .25rem;
  }
}

/*
 * user.css — Thème Dénombrement Bruss'Help
 * À placer dans : templates/cassiopeia/css/user.css
 * Compatible Joomla 5 / Cassiopeia
 */

/* ============================================
   VARIABLES DE COULEURS
   Palette extraite du logo officiel Bruss'Help
   ============================================ */
:root {
  --bh-bleu:         #12779e;   /* bleu exact du logo Bruss'Help */
  --bh-bleu-dark:    #0d5a78;   /* version foncée pour hover/header */
  --bh-bleu-nuit:    #0a3d52;   /* header fond, footer */
  --bh-bleu-light:   #e6f4f9;   /* fond clair teinte bleue */
  --bh-gris-logo:    #9b9b9b;   /* gris exact du ".brussels" */
  --bh-gris-fond:    #f2f6f8;   /* fond page */
  --bh-gris-texte:   #3a3d44;   /* texte principal */
  --bh-gris-soft:    #6c757d;
  --bh-blanc:        #ffffff;
  --bh-border:       #ccdde6;
  --bh-accent:       #e07b20;   /* orange chaud pour accents, CTA */
  --bh-accent-light: #f0a050;
}

/* ============================================
   TYPOGRAPHIE
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,400&family=DM+Sans:wght@400;500;600&display=swap');

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: var(--bh-gris-texte);
  background-color: var(--bh-gris-fond);
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--bh-bleu-nuit);
  line-height: 1.25;
}

h2 {
  font-size: 1.6rem;
  margin-top: 2.2rem;
  margin-bottom: .8rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--bh-bleu);
  display: inline-block;
}

h3 {
  font-size: 1.2rem;
  color: var(--bh-bleu-dark);
}

/* ============================================
   HEADER / NAVBAR
   ============================================ */
.header {
  background: var(--bh-bleu-nuit) !important;
  border-bottom: 3px solid var(--bh-bleu);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* Logo / nom du site */
.navbar-brand,
.site-title a {
  color: var(--bh-blanc) !important;
  font-family: 'Source Serif 4', serif;
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .02em;
}

.site-description {
  color: rgba(255,255,255,.65) !important;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Liens de navigation */
.navbar-nav .nav-link,
.navbar-nav > li > a {
  color: rgba(255,255,255,.85) !important;
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .03em;
  padding: .65rem 1rem;
  border-radius: 4px;
  transition: background .2s, color .2s;
}

.navbar-nav .nav-link:hover,
.navbar-nav > li > a:hover {
  color: var(--bh-blanc) !important;
  background: rgba(255,255,255,.12);
}

.navbar-nav .nav-link.active,
.navbar-nav > li.active > a {
  color: #7dd4ef !important;   /* bleu clair — actif visible sur fond nuit */
  background: rgba(18,119,158,.25);
}

/* Dropdown */
.navbar-nav .dropdown-menu {
  background: var(--bh-bleu-dark);
  border: none;
  border-top: 2px solid var(--bh-bleu);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.navbar-nav .dropdown-item {
  color: rgba(255,255,255,.85) !important;
  font-size: .88rem;
  padding: .5rem 1.2rem;
  transition: background .15s;
}

.navbar-nav .dropdown-item:hover {
  background: rgba(255,255,255,.1);
  color: var(--bh-blanc) !important;
}

/* Toggler hamburger mobile */
.navbar-toggler {
  border-color: rgba(255,255,255,.4) !important;
}
.navbar-toggler-icon {
  filter: invert(1);
}

/* ============================================
   CONTENU PRINCIPAL
   ============================================ */
#sp-main-body,
.container-main,
main .container {
  background: var(--bh-blanc);
  border-radius: 10px;
  box-shadow: 0 2px 16px rgba(10,61,82,.08);
  padding: 2.2rem 2.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

/* Liens dans le corps du texte */
.item-page a,
.com-content-article__body a {
  color: var(--bh-bleu);
  text-decoration: none;
  border-bottom: 1px solid rgba(18,119,158,.3);
  transition: color .15s, border-color .15s;
}

.item-page a:hover,
.com-content-article__body a:hover {
  color: var(--bh-bleu-dark);
  border-bottom-color: var(--bh-bleu);
}

/* Listes à puces */
.item-page ul li::marker,
.com-content-article__body ul li::marker {
  color: var(--bh-bleu);
}

.item-page ul li,
.com-content-article__body ul li {
  margin-bottom: .5rem;
}

/* Bold dans le texte */
strong, b {
  color: var(--bh-bleu-nuit);
}

/* ============================================
   BOUTON PRINCIPAL (CTA inscriptions)
   Le bouton teal/bleu existant dans le contenu
   ============================================ */
.btn-primary,
a.btn-primary,
.btn.btn-primary {
  background: var(--bh-bleu) !important;
  border-color: var(--bh-bleu) !important;
  color: var(--bh-blanc) !important;
  font-weight: 600;
  padding: .75rem 2rem;
  border-radius: 8px;
  letter-spacing: .03em;
  box-shadow: 0 3px 10px rgba(18,119,158,.3);
  transition: background .2s, box-shadow .2s, transform .1s;
}

.btn-primary:hover,
a.btn-primary:hover {
  background: var(--bh-bleu-dark) !important;
  border-color: var(--bh-bleu-dark) !important;
  box-shadow: 0 5px 16px rgba(18,119,158,.45);
  transform: translateY(-1px);
}

/* ============================================
   SIDEBAR / MODULES
   ============================================ */
#sp-right .moduletable,
aside .moduletable,
.sidebar-right .moduletable {
  background: var(--bh-blanc);
  border: 1px solid var(--bh-border);
  border-top: 3px solid var(--bh-bleu);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(10,61,82,.07);
}

/* Titres de modules */
.moduletable h3,
.moduletable .module-title {
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--bh-bleu-nuit);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bh-border);
  padding-bottom: .5rem;
}

/* Liens dans les modules */
.moduletable a {
  color: var(--bh-bleu);
  text-decoration: none;
  font-size: .95rem;
  transition: color .15s;
}
.moduletable a:hover {
  color: var(--bh-bleu-dark);
  text-decoration: underline;
}

/* ============================================
   MODULE LOGIN
   ============================================ */
.moduletable .login-fields input[type="text"],
.moduletable .login-fields input[type="password"] {
  border: 1px solid var(--bh-border);
  border-radius: 6px;
  padding: .4rem .75rem;
  font-size: .9rem;
  width: 100%;
  transition: border-color .2s;
}

.moduletable .login-fields input:focus {
  border-color: var(--bh-bleu);
  outline: none;
  box-shadow: 0 0 0 3px rgba(18,119,158,.15);
}

/* ============================================
   FORMULAIRES GÉNÉRAUX
   ============================================ */
.form-control,
input[type="text"],
input[type="email"],
textarea,
select {
  border-radius: 6px;
  border: 1px solid var(--bh-border);
  font-family: 'DM Sans', sans-serif;
  transition: border-color .2s, box-shadow .2s;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus {
  border-color: var(--bh-bleu);
  box-shadow: 0 0 0 3px rgba(18,119,158,.2);
  outline: none;
}

/* ============================================
   FOOTER
   ============================================ */
footer,
#sp-footer,
.footer {
  background: var(--bh-bleu-nuit) !important;
  color: rgba(255,255,255,.7);
  padding: 2rem 0;
  margin-top: 2rem;
  font-size: .88rem;
  border-top: 3px solid var(--bh-bleu);
}

footer a,
#sp-footer a {
  color: #7dd4ef !important;
  text-decoration: none;
}

footer a:hover,
#sp-footer a:hover {
  color: var(--bh-blanc) !important;
}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb {
  background: transparent;
  padding: .5rem 0;
  font-size: .85rem;
}

.breadcrumb-item a {
  color: var(--bh-bleu);
}

.breadcrumb-item.active {
  color: var(--bh-gris-soft);
}

/* ============================================
   MESSAGES / ALERTES
   ============================================ */
.alert-info {
  background: var(--bh-bleu-light);
  border-left: 4px solid var(--bh-bleu);
  border-radius: 0 8px 8px 0;
  color: var(--bh-bleu-nuit);
}

.alert-success {
  background: rgba(40,167,69,.08);
  border-left: 4px solid #28a745;
}

.alert-warning {
  background: rgba(224,123,32,.08);
  border-left: 4px solid var(--bh-accent);
}

/* ============================================
   RESPONSIVE MOBILE
   ============================================ */
@media (max-width: 768px) {
  #sp-main-body,
  .container-main,
  main .container {
    padding: 1.2rem 1rem;
    border-radius: 6px;
    margin-top: .75rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  .navbar-nav .nav-link {
    padding: .5rem .75rem;
  }

  .navbar-collapse {
    background: var(--bh-bleu-dark);
    padding: .5rem 1rem;
    border-radius: 0 0 8px 8px;
    margin-top: .25rem;
  }
}

/* ============================================
   WIDGETKIT SLIDESHOW — hauteur bannière fixe
   ============================================ */

/* Conteneur principal du slideshow */
.wk-slideshow,
.uk-slideshow,
[class*="wk-slideshow"],
.widgetkit-slideshow {
  height: 280px !important;
  max-height: 280px !important;
  min-height: unset !important;
  overflow: hidden !important;
}

/* Les items / slides individuels */
.wk-slideshow .wk-slideshow-items,
.uk-slideshow-items,
.wk-slideshow > ul,
.wk-slideshow > div {
  height: 280px !important;
  max-height: 280px !important;
}

/* L'image dans le slide */
.wk-slideshow img,
.uk-slideshow-items img,
.wk-slideshow .wk-cover,
.wk-slideshow [class*="cover"] {
  width: 100%;
  height: 280px !important;
  object-fit: cover;
  object-position: center 30%;
}

/* Désactiver le 100vh imposé par Widgetkit/UIkit */
.wk-slideshow [style*="height"],
.uk-slideshow [style*="height"],
.uk-slideshow-items [style*="height"] {
  height: 280px !important;
}

/* Si le slide est dans un module positionné en "banner" ou "top" */
#sp-banner .wk-slideshow,
#sp-top .wk-slideshow,
.sp-module .wk-slideshow {
  height: 280px !important;
  max-height: 280px !important;
}

/* Pas de marge/padding autour du slideshow */
.moduletable.wk-slideshow-module,
#sp-banner,
#sp-top {
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================
   WIDGETKIT SLIDESHOW — fix hauteur UIkit
   Sélecteurs exacts extraits de l'inspecteur
   ============================================ */

/* Forcer la hauteur sur le conteneur UIkit */
.uk-slideshow {
  min-height: 280px !important;
  max-height: 280px !important;
  height: 280px !important;
}

/* Écraser l'aspect-ratio 16/9 injecté en inline */
.uk-slideshow-items {
  min-height: 280px !important;
  max-height: 280px !important;
  aspect-ratio: unset !important;
}

/* L'image en cover dans sa hauteur fixe */
.uk-slideshow-items li {
  height: 280px !important;
  min-height: unset !important;
}

/* L'image elle-même */
.uk-slideshow-items img.uk-cover {
  height: 280px !important;
  object-fit: cover;
  object-position: center 40%;
}