/* ============================================================
   Menu des rubriques par sections dans la navbar (Restauration / Sport,
   loisirs / Alimentation / Services) — remplace l'ancienne liste plate
   #list-rubrique-fa. Voir :
     - templates/new_home/_newNavBar.html.twig (markup des pilules + panneau)
     - public/assets/css/new_home/navbar_compact.css (rangee 2 pleine largeur)
     - public/assets/js/MapCMZ/core/RubriqueState.js ("group" par rubrique)
     - public/assets/js/MapCMZ/ui/UiRubriqueAction.js (insertion dans le bon groupe)
     - public/assets/js/MapCMZ/map_cmz_instance.js (selectRubriqueGroup)

   Formation exacte de la maquette : maquette/navbar-desktop.html
   (#groupBar, #megaMenu, .mm-tile, .mm-col-title) — memes valeurs reprises
   ici (hauteur/padding de la barre, padding/largeur des tuiles, boite
   d'icone 44x44, en-tete pastille couleur + titre).
   ============================================================ */

/* #list-rubrique-fa (id historique, conserve pour le CSS du burger mobile —
   voir style.css) doit occuper toute la largeur de la rangee 2 pour que la
   barre de pilules et le panneau (position:absolute; left/right:0) s'etendent
   bord a bord comme #groupBar/#megaMenu dans la maquette. */
.rubrique-group-nav-jheo_js {
  width: 100%;
}

/* Rangee 2 : barre des pilules de groupe — memes dimensions que #groupBar
   dans la maquette (height:54px; padding:0 28px; fond vert profond). */
.rubrique-group-bar-jheo_js {
  /* #list-rubrique-fa (.rubrique-group-nav-jheo_js) porte deja width:100%,
     mais Bootstrap force .navbar-nav en flex-direction:row a partir de
     768px (.navbar-expand-md .navbar-nav) — cette barre, unique enfant,
     ne s'etire donc pas toute seule vers la droite sans width explicite,
     laissant voir le vert plus clair du navbar derriere au lieu du vert
     profond de la maquette. */
  width: 100%;
  height: 54px;
  padding: 0 28px;
  gap: 6px;
  background: #092e2b;
  border-top: 1px solid rgba(255, 255, 255, .05);
  /* Explicite (au lieu de compter sur la valeur par defaut) : les pilules
     restent collees au bord GAUCHE de la barre, jamais centrees. */
  justify-content: flex-start;
}

.rubrique-group-pill-jheo_js {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 9px;
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.rubrique-group-pill-jheo_js:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.rubrique-group-pill-jheo_js.active {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}
.rubrique-group-pill-jheo_js.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background: #dc3545;
  border-radius: 2px;
}

.rubrique-group-divider-jheo_js {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, .14);
  margin: 0 10px;
  flex-shrink: 0;
}

/* Panneau deroulant : une seule section visible a la fois (.is-active).
   Pleine largeur sous la rangee 2, comme #megaMenu dans la maquette (qui
   occupe toute la largeur de la colonne navbar/carte, pas une bulle
   flottante etroite). */
.rubrique-group-panel-jheo_js {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 0 0 18px 18px;
  border-top: 3px solid #dc3545;
  box-shadow: 0 24px 48px -14px rgba(9, 32, 29, .38);
  padding: 26px 40px 20px;
  z-index: 1500;
}

/* Chaque <ul id="group-XXX"> est a la fois la section (affichee/masquee via
   .is-active) et la liste dans laquelle UiRubriqueAction.addRubriqueActivNavbar
   ajoute les tuiles (appendChild) — l'en-tete (pastille couleur + titre,
   .rubrique-group-header-jheo_js) est le premier <li>, pose une fois dans le
   twig ; les tuiles ajoutees en JS arrivent toujours apres. */
.rubrique-group-content-jheo_js {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rubrique-group-content-jheo_js.is-active {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
}

.rubrique-group-header-jheo_js {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}
.rubrique-group-header-jheo_js .rubrique-group-dot-jheo_js {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rubrique-group-header-jheo_js .rubrique-group-title-jheo_js {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #12312c;
}

/* Tuiles : reutilisent les elements generes par UiRubriqueAction.addRubriqueActivNavbar
   (.rubrique_element_jheo_js), on ne fait que les restyler pour un fond clair —
   comportement/clics inchanges (toggleRubriqueFilterAndListRubrique). Memes
   valeurs que .mm-tile dans la maquette (largeur 132px, padding 18px 12px). */
.rubrique-group-content-jheo_js .rubrique_element_jheo_js {
  flex-direction: column !important;
  gap: 10px !important;
  width: 132px;
  height: auto !important;
  padding: 18px 12px !important;
  border-radius: 14px;
  border: 1px solid #eef1f0;
  color: #12312c !important;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.rubrique-group-content-jheo_js .rubrique_element_jheo_js:hover {
  border-color: #d7dedb;
  box-shadow: 0 8px 18px rgba(9, 32, 29, .1);
  transform: translateY(-2px);
}

/* Nom de la rubrique (ex. "Marché", "Ferme"), sous l'icone — voir
   UiRubriqueAction.addRubriqueActivNavbar (.rubrique-name-jheo_js). Explicite
   plutot que de compter sur la couleur/taille heritees du parent : garantit
   que le nom reste visible quel que soit l'ordre de chargement des feuilles
   de style (color/font-size herites de .rubrique_element_jheo_js ci-dessus
   peuvent etre gagnes par une regle .nav-link plus specifique ailleurs). */
.rubrique-group-content-jheo_js .rubrique-name-jheo_js {
  display: block;
  color: #12312c !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.25;
}

/* Boite d'icone : memes valeurs que .mm-tile .icobox (44x44, radius 12,
   fond #eef4f2). */
.rubrique-group-content-jheo_js .image_icon_rubrique {
  width: 44px !important;
  height: 44px !important;
  border: none !important;
  border-radius: 12px;
  margin-right: 0 !important;
  object-fit: contain;
  background: #eef4f2;
  padding: 11px;
}
/* "Filtre" (badge_position_filter_navbar, bg-danger dans le markup) : passe
   de rouge Bootstrap brut a l'ambre Material (#fb8c00, meme teinte que
   [data-color="orange"] dans main.css) pour ne pas entrer en concurrence
   visuelle avec le rouge du "x" de desactivation juste a cote (meme tuile,
   deux badges rouges aurait ete illisible) — ambre est aussi plus juste
   semantiquement ("un filtre est actif") que rouge ("erreur/danger"). */
.rubrique-group-content-jheo_js .badge_position_filter_navbar {
  position: absolute;
  top: 2px;
  right: 2px;
  translate: 0 0 !important;
  background-color: #fb8c00 !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 600;
  padding: 3px 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}

/* Tuile "rubrique actuellement selectionnee" (.btn_light_active, applique/
   retire par lib.js activeBtnLightActive/desActiveBtnLightActive sur
   #ID_nav_<type>_jheo_js) : par defaut (main.css) un remplissage bleu plat
   avec un coin non-arrondi et un gros "X" rouge flottant (.x_slick_active,
   dessine en 20x15 - ovale, pas rond) — ne suivait pas du tout le theme
   clair/carte de ce mega-menu, d'ou l'aspect detonnant signale. On garde le
   fond clair de la carte et on marque la selection par une bordure vive +
   une legere teinte de fond, meme logique "anneau" que les autres etats
   selectionnes de l'appli (voir main.css .active_control_jheo_js). */
.rubrique-group-content-jheo_js .rubrique_element_jheo_js.btn_light_active {
  background-color: #eef7f1 !important;
  border: 2px solid #43a047 !important;
  border-radius: 14px !important;
  color: #12312c !important;
}
.rubrique-group-content-jheo_js .rubrique_element_jheo_js.btn_light_active .rubrique-name-jheo_js {
  color: #12312c !important;
}

/* "x" de desactivation (icone simple, voir lib.js activeBtnLightActive) :
   pastille pleine Material (rouge #e53935, meme teinte que
   [data-color="red"] dans main.css) plutot que l'ancien glyphe rouge brut
   en 20x15 (ovale). Meme gabarit/logique que les autres petites pastilles
   d'action de l'appli. */
.rubrique-group-content-jheo_js .x_slick_active {
  top: -7px;
  right: -7px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e53935;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: background-color .15s ease, transform .15s ease;
}
.rubrique-group-content-jheo_js .x_slick_active:hover {
  background-color: #c62828;
  transform: scale(1.1);
}
.rubrique-group-content-jheo_js .x_slick_active svg {
  width: 11px !important;
  height: 11px !important;
  pointer-events: none;
}

/* Sous 620px de largeur reelle de panneau (#leftPanel, container "leftpanel" —
   voir style.css ~L3829) : la barre de pilules passe en scroll horizontal avec
   fondu au lieu de se compresser/casser sur plusieurs lignes, comme la
   maquette (maquette/navbar-desktop.html, @container leftpanel (max-width:620px)). */
@container leftpanel (max-width: 620px) {
  .rubrique-group-bar-jheo_js {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rubrique-group-bar-jheo_js::-webkit-scrollbar {
    display: none;
  }
  .rubrique-group-pill-jheo_js {
    flex-shrink: 0;
  }
}

/* ============================================================
   TIROIR MOBILE (burger) — sous 700px de largeur reelle de panneau
   (#leftPanel, meme seuil que le burger lui-meme : voir style.css
   #leftPanel.nav-burger / @container leftpanel (max-width:700px)).

   Le menu de groupes passe d'une barre de pilules horizontale + panneau
   flottant blanc (desktop) a une liste empilee sur fond sombre, esprit
   accordeon comme maquette/navbar-mobile.html (pastille couleur + titre,
   lignes pleine largeur icone+libelle sur fond transparent). Le clic
   garde exactement le meme comportement qu'en desktop — un seul groupe
   affiche a la fois via selectRubriqueGroup() (map_cmz_instance.js) — le
   panneau partage s'empile juste sous la liste au lieu de flotter par
   dessus la carte ; ce n'est pas un vrai accordeon "contenu sous chaque
   entete" (le JS resterait a adapter pour ca), mais le meme esprit visuel
   avec le comportement deja existant, sans rien changer au JS.
   ============================================================ */
@container leftpanel (max-width: 700px) {
  .rubrique-group-bar-jheo_js {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 8px 14px;
    gap: 2px;
    background: transparent;
    border-top: none;
  }
  .rubrique-group-pill-jheo_js {
    width: 100%;
    height: 46px;
    border-radius: 10px;
  }
  .rubrique-group-pill-jheo_js.active {
    background: rgba(255, 255, 255, .1);
  }
  .rubrique-group-pill-jheo_js.active::after {
    display: none;
  }
  .rubrique-group-divider-jheo_js {
    width: 100%;
    height: 1px;
    margin: 4px 0;
  }

  .rubrique-group-panel-jheo_js {
    position: static;
    background: transparent;
    border-radius: 0;
    /* Separateur discret entre la liste des groupes et le detail du groupe
       ouvert, a la place du border-top rouge (pense pour flotter sur la
       carte en desktop, trop marque ici en pleine largeur sur fond sombre). */
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: none;
    margin-top: 6px;
    padding: 10px 14px 12px;
  }
  .rubrique-group-header-jheo_js .rubrique-group-title-jheo_js {
    color: #eaf2f0;
  }
  .rubrique-group-content-jheo_js.is-active {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
  }
  .rubrique-group-content-jheo_js .rubrique_element_jheo_js {
    flex-direction: row !important;
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left;
    padding: 10px 8px !important;
    border-radius: 10px;
    border: none;
    background: transparent !important;
    color: #fff !important;
  }
  /* .rubrique-name-jheo_js impose #12312c !important en desktop (voir plus
     haut) — sur le fond sombre du tiroir mobile ce serait du texte fonce sur
     fond fonce, illisible : le reblanchir ici. */
  .rubrique-group-content-jheo_js .rubrique-name-jheo_js {
    color: #fff !important;
  }
  .rubrique-group-content-jheo_js .rubrique_element_jheo_js:hover {
    background: rgba(255, 255, 255, .06) !important;
    box-shadow: none;
    transform: none;
  }
  .rubrique-group-content-jheo_js .image_icon_rubrique {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px;
    background: rgba(255, 255, 255, .09);
    padding: 6px;
  }
  /* Etat "aucune rubrique" (voir regle plus bas) : texte sombre illisible sur
     le fond transparent/sombre du tiroir mobile. */
  .rubrique-group-content-jheo_js.is-active:has(> .rubrique-group-header-jheo_js:only-child)::after {
    color: rgba(255, 255, 255, .55);
  }
}

/* Aucune rubrique dans une section (ex. avant chargement des donnees) : evite
   un panneau qui semble casse — ne reste alors que l'en-tete (premier et seul
   <li>). */
.rubrique-group-content-jheo_js.is-active:has(> .rubrique-group-header-jheo_js:only-child)::after {
  content: "Aucune rubrique dans cette section pour le moment.";
  display: block;
  width: 100%;
  padding: 10px 4px;
  color: #5b706c;
  font-size: 13px;
  font-style: italic;
}

/* ============================================================
   PASTILLE COMPACTE "categorie active + Voir plus/Voir moins" — voir
   .rubrique-mini-bar-jheo_js dans _newNavBar.html.twig. Sous 700px, seul
   declencheur du tiroir de rubriques (le burger a ete retire) : categorie
   active visible d'un coup d'oeil (tenue a jour par selectRubriqueGroup()
   dans map_cmz_instance.js) + bouton qui ouvre/ferme le tiroir. Cachee par
   defaut (desktop) — visible seulement sous 700px.

   position:relative + z-index superieur a celui du tiroir (1600, voir
   style.css #leftPanel.nav-burger .faniry-collapse-custom.show) : cette
   pastille reste TOUJOURS visible/cliquable au dessus du tiroir quand il
   s'ouvre juste en dessous (voir top:100px sur le tiroir, qui laisse
   justement la place a ces 44px de hauteur fixe) — sans ca, meme position de
   depart + z-index du tiroir superieur = pastille invisible, cachee
   derriere. */
.rubrique-mini-bar-jheo_js {
  display: none;
  position: relative;
  z-index: 1601;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px;
  background: #092e2b;
  border-top: 1px solid rgba(255, 255, 255, .05);
}
.rubrique-mini-dot-jheo_js {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rubrique-mini-label-jheo_js {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rubrique-mini-voir-plus-jheo_js {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  transition: background .15s ease;
}
.rubrique-mini-voir-plus-jheo_js:hover {
  background: rgba(255, 255, 255, .22);
}
.rubrique-mini-voir-plus-jheo_js i {
  font-size: 10px;
  transition: transform .2s ease;
}
/* Tiroir ouvert (voir show/hide.bs.collapse dans map_cmz_index.js, qui bascule
   aussi le libelle Voir plus <-> Voir moins) : pastille plus marquee + fleche
   pointant vers le bas plutot que vers la droite, meme logique que le
   chevron d'un accordeon standard. */
.rubrique-mini-voir-plus-jheo_js.is-open {
  background: rgba(255, 255, 255, .26);
}
.rubrique-mini-voir-plus-jheo_js.is-open i {
  transform: rotate(90deg);
}

@container leftpanel (max-width: 700px) {
  .rubrique-mini-bar-jheo_js {
    display: flex;
  }
}