/* Remove margins on brand image in navbar */
.navbar-brand img {
   margin: 0 !important;
}
/* Nasyon Matinik base theme overrides.
   Add your custom Bootstrap variable overrides in a scss workflow later.
*/
/*
   Breakpoints (Bootstrap 5) — éviter l'ambiguïté à 1px près:
   - sm: 576px
   - md: 768px
   - lg: 992px (préférer max-width: 991.98px pour ne pas chevaucher 992px)
   - xl: 1200px
   - xxl: 1400px

   Conventions du thème:
   - Mobile/Tablette: @media (max-width: 991.98px)
   - Desktop: @media (min-width: 992px)
   - Bande spéciale tablette paysage (si nécessaire): @media (min-width: 992px) and (max-width: 1024px)

   Justification: utiliser 991.98px évite que 992px soit matché
   à la fois par un max-width et un min-width.
*/
body { font-family: system-ui, "Segoe UI", Arial, sans-serif; }

label {
  font-weight: bold;
  display: block;
}

input[type="number"],
input[type="date"],
input[type="file"] {
  width: auto !important;
}

.form-item, .form-actions {
  margin-top: 0;
  margin-bottom: 0;
}

.form-control {
  display: inline-block;
  width: auto;
}

.form-select {
  width: auto;
}

/* Example region styling */
.region-header { background:#111; color:#fff; }
.region-footer { background: transparent; color:#ddd; padding:2rem 0; }

/* Utility example */
.text-brand { color:#c8102e; }

/* Header enhancements */
.site-header .navbar {
   border-bottom: 1px solid rgba(0,0,0,.05);
   padding: 0;
}
.site-header-top {
   background: #f8f9fa;
}
.site-breadcrumb {
   background: #f8f9fa;
}

/* Page slider region (simple full-width media strip) */
.page-slider,
.region--page-slider {
   width: 100%;
   margin: 0;
   padding: 0;
}

.page-slider .region-inner {
   width: 100%;
   max-width: none;
   margin: 0;
}

.page-slider img,
.page-slider picture,
.page-slider figure img,
.page-slider video {
   display: block;
   width: 100%;
   height: auto;
}

/* Mobile number field: utiliser les sprites personnalisés du thème */
.mobile-number-field .mobile-number-flag {
   background-image: url('../images/mobile-number/flags.png?v=20251202') !important;
}

.iti__flag {
   background-image: url('../images/mobile-number/intl/flags.png?v=20251202') !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   .iti__flag {
      background-image: url('../images/mobile-number/intl/flags@2x.png?v=20251202') !important;
      background-size: 5632px 15px;
   }
}

/* Hide breadcrumb container when it contains no meaningful content.
   Uses :empty and :not(:has(*)) to cover whitespace-only and no-child cases.
   The important flag ensures theme-level rules don't override this.
   If your server/template sometimes outputs whitespace inside the element,
   you may need to trim that output or use a tiny JS fallback. */
.site-breadcrumb:empty,
.site-breadcrumb:not(:has(*)) {
  display: none !important;
}

/* Footer - consolidated rules */
.site-footer {
  border-top: 1px solid rgba(0,0,0,.25);
  background-color: #231f1e;
  color: #fff;
}
.site-footer a { color: #fff; }
.site-footer a:hover, .site-footer a:focus { color: #ef1923; }

/* Ensure inner region doesn't mask the footer background */
.region-footer { background: transparent; }

/* Optional explicit variant (keeps same look) */
.site-footer.site-footer--dark {
  background-color: #231f1e;
  color: #fff;
}
.site-footer.site-footer--dark .container { background: transparent; }

/* Regions helpers */
.region--nav-additional > *:not(:last-child) {
   margin-right: 1rem;
}

.site-header .region--nav-additional {
   margin-right: 1rem !important;
   padding-right: 0 !important;
}

.site-header .region--nav-user {
   margin-left: 0 !important;
   padding-left: 0 !important;
}

.site-header .region--nav-additional + .region--nav-user {
   padding-left: 0 !important;
   margin-left: 1rem !important;
}

@media (min-width: 992px) {
   .site-header .region--nav-user {
      margin-left: 0;
      padding-left: 0;
   }

   .site-header .region--nav-additional + .region--nav-user {
      padding-left: 0;
      margin-left: 1rem !important;
   }
}

/* User navigation: icon-first pills that sit at navbar end on desktop */
.region--nav-user {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   padding: 1rem 0;
   border-top: 1px solid rgba(0,0,0,0.08);
}
.region--nav-user > * {
   width: 100%;
}
.region--nav-user ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}
.region--nav-user .menu,
.region--nav-user .menu-item,
.region--nav-user .nav,
.region--nav-user .navbar-nav,
.region--nav-user li {
   list-style: none;
}
.region--nav-user .menu a,
.region--nav-user .nav-link,
.region--nav-user a {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   padding: 0.22rem 0.7rem;
   color: #fff;
   text-decoration: none;
   font-weight: 500;
   font-size: 0.8rem;
   border-radius: 999px;
   background: #231f1e;
   transition: background-color .2s ease, color .2s ease;
}
.region--nav-user .navbar-nav .nav-link,
.region--nav-user .menu .nav-link {
   font-size: 0.8rem;
   line-height: 1.3;
}
.region--nav-user .menu a::before,
.region--nav-user .nav-link::before,
.region--nav-user a::before {
   content: "\f4d7";
   font-family: "bootstrap-icons";
   font-size: 1rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
   transition: transform .2s ease;
}
.region--nav-user .menu a[href*="/user/login"]::before,
.region--nav-user .nav-link[href*="/user/login"]::before,
.region--nav-user a[href*="/user/login"]::before {
   content: "\f1be";
}
.region--nav-user .menu a[href*="/user/logout"]::before,
.region--nav-user .nav-link[href*="/user/logout"]::before,
.region--nav-user a[href*="/user/logout"]::before {
   content: "\f1c3";
}
.region--nav-user .menu a[href*="/user/register"]::before,
.region--nav-user .nav-link[href*="/user/register"]::before,
.region--nav-user a[href*="/user/register"]::before {
   content: "\f4dc";
}
.region--nav-user .menu a:hover,
.region--nav-user .menu a:focus,
.region--nav-user .nav-link:hover,
.region--nav-user .nav-link:focus,
.region--nav-user a:hover,
.region--nav-user a:focus {
   color: #fff;
   text-decoration: none;
   background: #ef1923;
}
.region--nav-user .menu a:hover::before,
.region--nav-user .menu a:focus::before,
.region--nav-user .nav-link:hover::before,
.region--nav-user .nav-link:focus::before,
.region--nav-user a:hover::before,
.region--nav-user a:focus::before {
   transform: translateY(-1px);
}

@media (max-width: 991.98px) {
   .region--nav-user {
      margin-top: 1rem;
   }
}

@media (min-width: 992px) {
   .region--nav-user {
      flex-direction: row;
      align-items: center;
      gap: 1rem;
      padding: 0;
      border-top: 0;
      margin-left: auto;
   }
   .region--nav-user > * {
      width: auto;
   }
   .region--nav-user .menu,
   .region--nav-user ul {
      flex-direction: row;
      align-items: center;
      gap: 1rem;
   }
   .region--nav-user .menu a,
   .region--nav-user .nav-link,
   .region--nav-user a {
      padding: 0.26rem 0.8rem;
   }
}

@media (min-width: 992px) {
   .site-header .region--nav-additional + .region--nav-user {
      margin-left: 0 !important;
      padding-left: 0 !important;
   }
}

/* Brand styles */
.site-header .navbar .navbar-brand {
   padding: 0;
}

.navbar-brand img,
.site-branding__logo img {
   height: 100px;
   width: auto;
}
.navbar .nav-link {
   padding-left: .5rem;
   padding-right: .5rem;
   /* Slightly larger menu text for better readability */
   font-size: 1.0625rem; /* ~17px */
   font-weight: 600;
   white-space: nowrap;
}
.dropdown-menu .dropdown-item {
   padding: .4rem .75rem;
}

/* Language switcher: flags + labels */
.language-switcher-locale-url,
.language-switcher {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   gap: 0.5rem;
   align-items: center;
}
.language-switcher-locale-url li { list-style: none; }
.language-switcher-locale-url li a {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: .15rem .4rem;
   color: inherit;
   text-decoration: none;
}
.language-switcher-locale-url li a:hover { text-decoration: underline; }

/* flag / badge before the label */
.language-switcher-locale-url li a::before {
   content: "";
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 18px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   border-radius: 3px;
   font-size: 10px;
   font-weight: 700;
   color: #222;
}

/* Use dedicated flag files for known languages */
.language-switcher-locale-url li[class*="language-fr"] a::before,
.language-switcher-locale-url a[hreflang="fr"]::before {
   background-image: url('../images/flags/fr.svg?v=20251210');
   background-size: cover;
   background-color: transparent;
   color: transparent;
}

.language-switcher-locale-url li[class*="language-mq"] a::before,
.language-switcher-locale-url a[hreflang="mq"]::before {
   background-image: url('../images/flags/mq.svg?v=20251210');
   background-size: cover;
   background-color: transparent;
   color: transparent;
}

.language-switcher-locale-url li[class*="language-en"] a::before,
.language-switcher-locale-url a[hreflang="en"]::before {
   background-image: url('../images/flags/en.svg?v=20251210');
   background-size: cover;
   background-color: transparent;
   color: transparent;
}

/* For other languages: show the language code as a compact badge using the hreflang attribute */
.language-switcher-locale-url li:not([class*="language-fr"]):not([class*="language-mq"]):not([class*="language-en"]) a::before,
.language-switcher-locale-url a:not([hreflang="fr"]):not([hreflang="mq"]):not([hreflang="en"])::before {
   background-image: none;
   background-color: #f1f1f1;
   color: #222;
   content: attr(hreflang);
   text-transform: uppercase;
}

/* Make the active language more visible */
.language-switcher-locale-url li.is-active a,
.language-switcher-locale-url li.active a { font-weight: 700; }

/* Responsive: wrap on small screens */
@media (max-width: 480px) {
   .language-switcher-locale-url { flex-wrap: wrap; gap: .25rem; }
}

/* sm breakpoint: remove margins on navbar brand for tighter layout */
@media (max-width: 480px) {
   .site-header .navbar .navbar-brand {
      margin: 0 !important;
   }
}

/* Additional selectors to match the actual block markup in the site */
/* Target the wrapper block with the ID used in your HTML and generic language-switcher-language-url class */
#block-nasyonmatinik-selecteurdelangue ul,
.language-switcher-language-url ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   gap: 0.5rem;
   align-items: center;
}
#block-nasyonmatinik-selecteurdelangue ul li,
.language-switcher-language-url ul li {
   list-style: none;
}
#block-nasyonmatinik-selecteurdelangue ul li a,
.language-switcher-language-url ul li a {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: .15rem .4rem;
   color: inherit;
   text-decoration: none;
}
#block-nasyonmatinik-selecteurdelangue ul li a::before,
.language-switcher-language-url ul li a::before {
   content: "";
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 18px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   border-radius: 3px;
   font-size: 10px;
   font-weight: 700;
   color: #222;
}

/* Use dedicated flag files for the language block markup */
#block-nasyonmatinik-selecteurdelangue ul li[hreflang="fr"] a::before,
.language-switcher-language-url ul li[hreflang="fr"] a::before,
#block-nasyonmatinik-selecteurdelangue ul a[hreflang="fr"]::before,
.language-switcher-language-url ul a[hreflang="fr"]::before {
   background-image: url('../images/flags/fr.svg?v=20251210');
   background-size: cover;
   background-color: transparent;
   color: transparent;
}

#block-nasyonmatinik-selecteurdelangue ul li[hreflang="mq"] a::before,
.language-switcher-language-url ul li[hreflang="mq"] a::before,
#block-nasyonmatinik-selecteurdelangue ul a[hreflang="mq"]::before,
.language-switcher-language-url ul a[hreflang="mq"]::before {
   background-image: url('../images/flags/mq.svg?v=20251210');
   background-size: cover;
   background-color: transparent;
   color: transparent;
}

#block-nasyonmatinik-selecteurdelangue ul li[hreflang="en"] a::before,
.language-switcher-language-url ul li[hreflang="en"] a::before,
#block-nasyonmatinik-selecteurdelangue ul a[hreflang="en"]::before,
.language-switcher-language-url ul a[hreflang="en"]::before {
   background-image: url('../images/flags/en.svg?v=20251210');
   background-size: cover;
   background-color: transparent;
   color: transparent;
}

/* Other languages: show hreflang code as badge */
#block-nasyonmatinik-selecteurdelangue ul li:not([hreflang="fr"]):not([hreflang="mq"]):not([hreflang="en"]) a::before,
.language-switcher-language-url ul li:not([hreflang="fr"]):not([hreflang="mq"]):not([hreflang="en"]) a::before,
#block-nasyonmatinik-selecteurdelangue ul a:not([hreflang="fr"]):not([hreflang="mq"]):not([hreflang="en"])::before,
.language-switcher-language-url ul a:not([hreflang="fr"]):not([hreflang="mq"]):not([hreflang="en"])::before {
   background-image: none;
   background-color: #f1f1f1;
   color: #222;
   content: attr(hreflang);
   text-transform: uppercase;
}

/* Active language */
#block-nasyonmatinik-selecteurdelangue ul li.is-active a,
#block-nasyonmatinik-selecteurdelangue ul li.active a,
.language-switcher-language-url ul li.is-active a,
.language-switcher-language-url ul li.active a,
.language-switcher-language-url ul li a.is-active {
   font-weight: 700;
}

@media (max-width: 480px) {
   #block-nasyonmatinik-selecteurdelangue ul,
   .language-switcher-language-url ul { flex-wrap: wrap; gap: .25rem; }
}

/* Hide specific language links that should not be displayed (theme-level override).
   Use only if block configuration does not filter correctly. */
#block-nasyonmatinik-selecteurdelangue ul li[hreflang="en"],
.language-switcher-language-url ul li[hreflang="en"] {
   display: none !important;
}
/* Also ensure any 'en' entries inside the additional-nav or locale-url variant are hidden */
.region--nav-additional [hreflang="en"],
.region--nav-additional .language-switcher-locale-url li[hreflang="en"],
.region--nav-additional #block-nasyonmatinik-selecteurdelangue ul li[hreflang="en"] {
   display: none !important;
}
@media (max-width: 480px) {
    #block-nasyonmatinik-selecteurdelangue ul,
    .language-switcher-language-url ul { flex-wrap: wrap; gap: .25rem; }
}

/* Disable hover lift/shadow effects on flags - keep static visuals */
#block-nasyonmatinik-selecteurdelangue ul li a::before,
.language-switcher-language-url ul li a::before {
   transition: none;
}

/* If template uses <img> inside the link, ensure no hover transform */
.language-switcher-wrapper ul li a img,
#block-nasyonmatinik-selecteurdelangue ul li a img {
   width: 28px;
   height: 18px;
   object-fit: cover;
   border-radius: 3px;
   transition: none;
}

/* Style webform links as buttons (global)
    Support multiple markup patterns:
    - .field--name-webform .field__item > a  (field wrapper > inner item > a)
    - .field--name-webform.field__item > a  (single element with both classes)
    - .field--name-webform > a               (direct child link)
*/
.field--name-webform > a,
.field--type-webform > a,
.field--name-webform.field__item > a,
.field--type-webform.field__item > a,
.field--name-webform .field__item > a,
.field--type-webform .field__item > a {
   display: inline-block;
   padding: .6rem 1rem;
   background: var(--nm-green);
   color: #fff;
   border-radius: .375rem;
   text-decoration: none;
   font-weight: 600;
   border: 1px solid rgba(var(--nm-green-rgb), 0.15);
   transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.field--name-webform > a:hover,
.field--name-webform > a:focus,
.field--type-webform > a:hover,
.field--type-webform > a:focus,
.field--name-webform.field__item > a:hover,
.field--name-webform.field__item > a:focus,
.field--type-webform.field__item > a:hover,
.field--type-webform.field__item > a:focus,
.field--name-webform .field__item > a:hover,
.field--name-webform .field__item > a:focus,
.field--type-webform .field__item > a:hover,
.field--type-webform .field__item > a:focus {
   filter: brightness(.92);
   text-decoration: none;
   transform: translateY(-1px);
   box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Inverse button on dark rows (ensure contrast) */
.front-row-2 .field--name-webform > a,
.front-row-4 .field--name-webform > a,
.front-row-2 .field--type-webform > a,
.front-row-4 .field--type-webform > a,
.front-row-2 .field--name-webform.field__item > a,
.front-row-4 .field--name-webform.field__item > a {
   background: rgba(255,255,255,0.08);
   color: #fff;
   border-color: rgba(255,255,255,0.18);
}

/* Full-width buttons on small screens */
@media (max-width: 767px) {
   .field--name-webform > a,
   .field--type-webform > a,
   .field--name-webform.field__item > a,
   .field--type-webform.field__item > a,
   .field--name-webform .field__item > a,
   .field--type-webform .field__item > a {
      display: block;
      width: 100%;
      text-align: center;
      padding: .85rem 1rem;
   }
}

/* Utility: allow authors to mark a link as secondary if they add .is-secondary to the wrapper */
.field--name-webform.is-secondary > a,
.field--name-webform.is-secondary.field__item > a,
.field--name-webform.is-secondary .field__item > a {
   background: transparent;
   color: var(--nm-black);
   border: 1px solid rgba(var(--nm-black-rgb),0.08);
}

/* Button utilities (reusable) */
.btn {
   display: inline-block;
   font-weight: 600;
   font-size: 1rem;
   line-height: 1.2;
   padding: .75rem 1.2rem;
   border-radius: .375rem;
   text-decoration: none;
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
   transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.btn:focus { outline-offset: 3px; }

/* Primary / secondary variants */
.btn--primary {
   background: var(--nm-green);
   color: #fff;
   border: 1px solid rgba(var(--nm-green-rgb), 0.15);
}
.btn--primary:hover,
.btn--primary:focus { filter: brightness(.92); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }

.btn--secondary {
   background: transparent;
   color: var(--nm-black);
   border: 1px solid rgba(var(--nm-black-rgb), 0.08);
}

/* Make webform-generated links look like primary buttons by default */
.field--name-webform > a,
.field--type-webform > a,
.field--name-webform.field__item > a,
.field--type-webform.field__item > a,
.field--name-webform .field__item > a,
.field--type-webform .field__item > a {
   font-size: 1.125rem; /* slightly larger */
   padding: 1.5rem 2rem; /* increased padding */
   border-radius: .375rem;
   display: inline-block;
   background: var(--nm-green);
   color: #fff;
   text-decoration: none;
   font-weight: 600;
   border: 1px solid rgba(var(--nm-green-rgb), 0.15);
}

@media (max-width: 767px) {
   .field--name-webform > a,
   .field--type-webform > a,
   .field--name-webform.field__item > a,
   .field--type-webform.field__item > a,
   .field--name-webform .field__item > a,
   .field--type-webform .field__item > a {
      display: block;
      width: 100%;
      text-align: center;
      padding: 1rem 1.25rem; /* slightly bigger on mobile */
      font-size: 1.025rem;
   }
}


/* Modern mobile menu and toggler styles (admin-like) */
/* Toggler: compact rounded square with animated hamburger -> X */
.navbar-toggler {
   width: 48px;
   height: 40px;
   padding: 0;
   border-radius: 8px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--nm-green);
   border: none;
   box-shadow: 0 6px 18px rgba(0,0,0,0.12);
   transition: background .15s ease, transform .12s ease, box-shadow .12s ease;
}
.navbar-toggler:focus {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,0,0,0.08);
}

/* Replace default icon with three bars made via pseudo-elements */
.navbar-toggler .navbar-toggler-icon {
   display: block;
   position: relative;
   width: 22px;
   height: 2px;
   background: #fff;
   transition: all .18s ease;
}
.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
   content: "";
   position: absolute;
   left: 0;
   width: 22px;
   height: 2px;
   background: #fff;
   transition: all .18s ease;
}
.navbar-toggler .navbar-toggler-icon::before { top: -7px; }
.navbar-toggler .navbar-toggler-icon::after { top: 7px; }

/* When expanded, animate into an X. Use aria-expanded to avoid mismatches
    where server-side rendering or markup lacks the .collapsed class. */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background: transparent; }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
   transform: rotate(45deg);
   top: 0;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
   transform: rotate(-45deg);
   top: 0;
}

/* Ensure default (closed) state shows the three bars even if .collapsed is missing */
.navbar-toggler .navbar-toggler-icon { background: #fff; }
.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after { background: #fff; }

/* Center the icon within the toggler square to avoid horizontal offset */
.navbar-toggler .navbar-toggler-icon { display: block; margin: 0 auto; }
.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after { left: 0; right: 0; margin: 0 auto; }

/* Mobile menu panel styling: dark, elevated, roomy */
@media (max-width: 991.98px) {
   .navbar {
      position: relative;
   }
   .navbar-collapse {
      background: #111;
      color: #fff;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 18px 48px rgba(0,0,0,0.28);
      margin-top: .75rem;
   }
   .navbar-collapse .navbar-nav { display: flex; flex-direction: column; gap: .25rem; }
   .navbar-collapse .nav-link {
      color: #fff;
      padding: .75rem 1rem;
      border-radius: 6px;
      font-weight: 600;
   }
   .navbar-collapse .nav-link:hover { background: rgba(255,255,255,0.04); color: #fff; }
   .navbar-collapse .dropdown-menu { position: static; background: transparent; border: none; box-shadow: none; }
   .navbar-collapse .dropdown-item { color: #fff; padding-left: 1.25rem; }
   /* Give links and actions clear separation like an admin UI */
   .navbar-collapse .nav-link + .nav-link { margin-top: .125rem; }
}

/* Slight adjustment for very small screens */
@media (max-width: 480px) {
   .navbar-toggler { width: 44px; height: 40px; }
   .navbar-collapse { padding: .75rem; margin-top: .5rem; }
}

/* Mobile: show only flags (no language label) when language switcher is placed
    inside the additional navigation region (region--nav-additional). This
    visually hides the textual label but preserves images/pseudo-element
    flags and keeps the links accessible to screen readers. */
@media (max-width: 991.98px) {
   .region--nav-additional .language-switcher-locale-url li a,
   .region--nav-additional #block-nasyonmatinik-selecteurdelangue ul li a {
   /* hide text visually but keep it available to assistive tech */
   color: transparent !important;
   text-decoration: none;
   font-size: 0; /* collapse text nodes */
   line-height: 0;
   padding: 0 .5rem; /* remove vertical padding for compact flags */
      display: inline-flex;
      align-items: center;
      justify-content: center;
   }

   /* If the switcher uses an <img> for the flag, keep it visible */
   .region--nav-additional .language-switcher-locale-url li a img,
   .region--nav-additional #block-nasyonmatinik-selecteurdelangue ul li a img {
      width: 28px;
      height: 18px;
      object-fit: cover;
      border-radius: 3px;
      display: inline-block;
      line-height: normal;
   }

   /* Ensure the pseudo-element flag remains visible (for background-image based flags) */
   .region--nav-additional .language-switcher-locale-url li a::before,
   .region--nav-additional #block-nasyonmatinik-selecteurdelangue ul li a::before {
      display: inline-block;
      margin: 0;
      width: 28px;
      height: 18px;
   }

   /* Provide an accessible fallback: keep title/aria-label visible to AT users
       by not using display:none. The color is transparent visually but readable
       by screen readers. */
   .region--nav-additional .language-switcher-locale-url li a span,
   .region--nav-additional #block-nasyonmatinik-selecteurdelangue ul li a span {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0 0 0 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
   }
}

/* On very narrow screens, stack flags vertically to avoid wrapping under the logo.
    Also make the navbar container a flex row so the logo stays at left and the
    toggler remains at the right; the additional nav sits between them but
    stacks vertically to reduce horizontal width. */
@media (max-width: 420px) {
   .site-header .navbar > .container {
      display: flex;
      align-items: center;
      gap: .25rem;
      padding-left: 0.25rem;
      padding-right: 0.25rem;
   }

   .site-header .navbar .navbar-brand { flex: 0 0 auto; }

   /* Place additional nav between branding and toggler, stack vertically but
      keep it close to the toggler (align to the right). */
   .region--nav-additional.d-flex.d-lg-none {
      display: flex !important;
      flex-direction: column;
      align-items: center;
      gap: .0625rem;
      margin-left: auto; /* push it to the right */
      margin-right: .125rem;
      max-width: 80px; /* reserve more space for the logo */
   }

   /* Keep toggler immediately to the right of nav-additional */
   .navbar-toggler {
      margin-left: 0;
      margin-right: 0.125rem;
      width: 42px;
      height: 36px;
   }

   /* Make flag links slightly larger for touch targets when stacked, but reduce horizontal padding */
   .region--nav-additional .language-switcher-locale-url li a,
   .region--nav-additional #block-nasyonmatinik-selecteurdelangue ul li a {
      padding: 0 .3rem; /* vertical padding removed for compactness */
   }

   /* Reduce gap between flags when stacked */
   .region--nav-additional .language-switcher-locale-url,
   .region--nav-additional #block-nasyonmatinik-selecteurdelangue ul {
      display: flex !important;
      flex-direction: column !important;
      gap: .0625rem !important;
      align-items: center !important;
   }

   .region--nav-additional .language-switcher-locale-url li,
   .region--nav-additional #block-nasyonmatinik-selecteurdelangue ul li {
      display: block !important;
      width: auto;
   }

  /* Allow a slightly larger logo while still fitting everything on one line */
  .site-header .navbar .navbar-brand img,
  .site-header .navbar .navbar-brand picture img {
     max-height: 80px;
     height: auto;
     width: auto;
     display: block;
  }

   /* Slightly reduce toggler size to save horizontal space */
   .navbar-toggler { width: 42px; height: 36px; }

   /* Ensure the additional-nav container doesn't push the toggler off-line.
      Limit its width and allow internal items to wrap vertically. */
   .region--nav-additional.d-flex.d-lg-none {
      max-width: 100px; /* conservative width for two stacked flags */
      margin-left: .5rem;
      margin-right: .25rem;
   }
    /* end of region--nav-additional rules */

}