/* ============================================================
   ETAT COMPACT (Material) — quand #leftPanel devient etroit (panneau
   iframe ouvert en partage 50/50, redimensionne via #resizer, ou
   simplement une fenetre plus petite) et #rightPanel quand il est
   redimensionne tres etroit.

   Reagit a la largeur REELLE du panneau via container queries, pas a
   la largeur de la fenetre : #leftPanel a deja "container-type:
   inline-size; container-name: leftpanel" (voir style.css, utilise
   par le burger a max-width:700px) et #rightPanel a deja
   "container-name: container_rightPanel" (voir responsive_map_cmz.css).
   On reutilise ces memes noms de conteneur, on ne les redeclare pas.

   Prototype/validation : maquette/navbar-desktop.html
   ============================================================ */

:root {
  --md-elev-1: 0 1px 2px rgba(9, 32, 29, .3), 0 1px 3px 1px rgba(9, 32, 29, .15);
  --md-elev-3: 0 4px 8px 3px rgba(9, 32, 29, .15), 0 1px 3px rgba(9, 32, 29, .3);
  --shadow-sm: 0 2px 8px rgba(9, 32, 29, .16);
}

/* Polices : memes familles que la maquette sur tout le navbar carte — Inter pour
   le texte courant, Poppins (plus marque) pour les libelles de boutons. Le lien
   Google Fonts est charge dans templates/new_home/index.html.twig. */
.nav-bar-map-fa {
  font-family: 'Inter', system-ui, sans-serif;
}
.nav-bar-map-fa .bouton-connexion-ma,
.nav-bar-map-fa .bouton-grille-tarifaire-ma,
.nav-bar-map-fa .bouton-deconnexion-ma {
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 600;
}

/* Rangee 1 : logo | recherche | boutons + icones de compte, colle a DROITE —
   meme ordonnancement que la maquette (logo, puis un espace flexible, puis
   recherche+actions alignees sur le bord droit ; voir
   maquette/navbar-desktop.html). Le nom/statut de l'utilisateur connecte ne
   vit plus du tout dans ce navbar : voir #clockPill_jheo_js dans
   index.html.twig (panneau iframe), seul endroit ou il apparait desormais.
   .content_entete_cta_connexion est un display:block partage avec d'autres
   pages (CGU, manifeste...) : on ne le change qu'ici, via la classe posee
   uniquement quand in_map=true (voir _newNavBar.html.twig). justify-content
   force explicitement (et pas seulement via le margin-left:auto deja pose sur
   .content_entete_recherche_map_jheo_js plus bas) : ceinture et bretelles,
   pour que recherche+boutons collent au bord droit meme si un enfant venait a
   changer sans qu'on pense a retoucher son propre margin-left. */
.content_entete_cta_connexion_map_jheo_js {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  /* Sans ce gap : aucun espace entre la recherche et "Se connecter" pour un
     visiteur non connecte. Cote connecte, l'illusion d'un espacement correct
     venait uniquement du padding:0 1rem pose en inline-style sur
     #content_cta_signup_sigin_jheo_js (voir _newNavBar.html.twig) — un
     espacement qui n'existait donc que par accident, pas par ce gap. */
  gap: 24px;
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.content_entete_recherche_map_jheo_js {
  flex: 0 1 460px;
  min-width: 0;
  margin-left: auto;
}

/* Logo : pastille blanche arrondie avec ombre portee, comme la maquette
   (.icobox du bloc logo : background:#fff;border-radius:10px;padding:6px
   16px;height:44px;box-shadow:var(--shadow-sm)). Le fond vert de
   .logo-container (map_cmz.css) reste identique au reste du navbar — seule
   l'image (deja sur fond blanc, voir style inline dans le twig) est
   maintenant recadree dans une vraie pastille au lieu d'un simple carre
   colle au bord. */
.logo-chip-jheo_js {
  background-color: transparent !important;
  padding: 0 !important;
  align-self: center;
  flex-shrink: 0;
  gap: 12px;
  text-decoration: none !important;
}
.logo-chip-jheo_js .my-logo-nav-bar {
  /* !important : map_cmz.css force .my-logo-nav-bar a 51px/8rem en dessous de
     1440px de LARGEUR DE FENETRE (@media, pas @container) — on doit gagner
     ici pour garder 44px comme la maquette, quelle que soit la fenetre. */
  height: 44px !important;
  width: auto !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
}
.logo-chip-jheo_js .my-logo-nav-bar img {
  width: auto !important;
  height: 100% !important;
  padding: 6px 16px !important;
}

.logo-chip-jheo_js .logo-home-caption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 4px 0 4px 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  white-space: nowrap;
}

.logo-chip-jheo_js .logo-home-caption-label {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.1;
}

.logo-chip-jheo_js .logo-home-caption-brand {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15;
}

.logo-chip-jheo_js:hover .logo-home-caption-brand {
  color: #ffdf2f;
}

.logo-chip-jheo_js:focus-visible {
  outline: 2px solid #ffdf2f;
  outline-offset: 4px;
  border-radius: 10px;
}

@media (max-width: 640px) {
  .logo-chip-jheo_js .logo-home-caption {
    display: none;
  }
}

/* Barre de recherche : boite blanche arrondie avec ombre, comme la maquette
   (.search-full : border-radius:14px;box-shadow:var(--shadow-sm);height:52px).
   Scope via le wrapper .content_entete_recherche_map_jheo_js pour ne pas
   toucher .recherche-navbar ailleurs sur le site (modale, CGU...). */
.content_entete_recherche_map_jheo_js .recherche-navbar {
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.content_entete_recherche_map_jheo_js #navbar_recherche_jheo_js {
  height: 52px;
}
.content_entete_recherche_map_jheo_js .btn_submit_search_navbar_js {
  width: 42px !important;
  height: 42px !important;
  box-shadow: 0 4px 10px rgba(9, 32, 29, .3) !important;
}

/* Boutons d'action (Se connecter / Grille tarifaire / Se deconnecter) :
   pilules pleine hauteur avec icone dans une pastille translucide, comme
   la maquette (.btn : height:42px;padding:0 18px;border-radius:21px ;
   .icobox : 22x22, radius 50%, background rgba(255,255,255,.2)). Les
   pastilles rondes compactes (@container plus bas) restent inchangees. */
.content_entete_cta_connexion_map_jheo_js .bouton-connexion-ma,
.content_entete_cta_connexion_map_jheo_js .bouton-grille-tarifaire-ma,
.content_entete_cta_connexion_map_jheo_js .bouton-deconnexion-ma {
  height: 42px !important;
  padding: 0 18px !important;
  border-radius: 21px !important;
  gap: 10px;
}
.content_entete_cta_connexion_map_jheo_js .bouton-connexion-ma i,
.content_entete_cta_connexion_map_jheo_js .bouton-grille-tarifaire-ma i,
.content_entete_cta_connexion_map_jheo_js .bouton-deconnexion-ma i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-size: .8rem !important;
}
.content_entete_cta_connexion_map_jheo_js .cta-actions-stack-ma {
  /* Le twig pose .flex-column (Bootstrap, !important) sur ce wrapper — cote
     a cote a toute largeur dans la maquette (.row : toujours flex-direction
     row, jamais empile), pas seulement en dessous de 1200px. */
  flex-direction: row !important;
  gap: 10px !important;
}

/* Rangee 2 : le menu de rubriques par sections (voir navbar_rubrique_groups.css)
   doit former une deuxieme ligne PLEINE LARGEUR juste sous le logo/recherche/
   boutons, comme la maquette (barre verte distincte, pastilles alignees a
   gauche) — voir maquette/navbar-desktop.html #groupBar.

   Sans ca, le <div class="collapse navbar-collapse" id="id_content_list_
   rubrique_active_jheo_js"> (Bootstrap) reste un item flex "en ligne" du
   meme .container-fluid que le logo/la recherche/les boutons et finit
   ecrase a droite de la rangee 1.

   Ne s'applique qu'en dehors du mode burger : #leftPanel.nav-burger passe
   deja ce meme element en position:absolute (voir style.css ~L3761), donc
   aucun conflit avec le tiroir mobile. */
.nav-bar-map-fa .container-fluid {
  flex-wrap: wrap;
  /* column-gap seul (pas de row-gap) : entre logo et recherche/boutons (24px,
     un peu plus que les 18px de la maquette pour eviter que tout se retrouve
     colle au logo quand la rangee devient etroite), mais 0 avant la rangee 2
     (elle s'attache directement sous la rangee 1, separee par sa seule
     bordure — voir navbar_rubrique_groups.css .rubrique-group-bar-jheo_js). */
  gap: 0 18px;
}
#id_content_list_rubrique_active_jheo_js.faniry-collapse-custom {
  flex: 1 1 100%;
  margin-top: 10px;
  order: 3;
}

/* .faniry-collapse-custom ne contient plus que le wrapper de la barre de
   pilules (.d-flex.flex-row > #list-rubrique-fa, width:100% — voir plus haut) :
   les icones de compte (profil/admin/toggle) ont rejoint la rangee 1 (voir
   .content_form_search_and_all_btn plus bas) — meme vert profond que
   .rubrique-group-bar-jheo_js (navbar_rubrique_groups.css) pour que toute la
   rangee 2 reste dans le meme ton. */
#id_content_list_rubrique_active_jheo_js.faniry-collapse-custom {
  display: flex;
  justify-content: flex-start;
  background: #092e2b;
}
/* width:100% explicite (plutot que flex-grow) sur cet unique enfant : garantit
   qu'il occupe toute la largeur de .faniry-collapse-custom, donc que les
   pilules collent bien au bord GAUCHE au lieu de se retrouver centrees/
   retrecies a leur propre largeur de contenu. */
#id_content_list_rubrique_active_jheo_js.faniry-collapse-custom > .d-flex.flex-row {
  width: 100%;
  min-width: 0;
}

/* Icones "compte" (profil / super admin / cacher partie connectee) : dans la
   rangee 1, a cote de la recherche et des boutons Se connecter-deconnecter/
   Grille tarifaire (voir _newNavBar.html.twig) — memes proportions que ces
   boutons (hauteur 42px) pour rester alignees avec eux. */
.content_entete_cta_connexion_map_jheo_js .content_form_search_and_all_btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.content_entete_cta_connexion_map_jheo_js .all-btn-action-fa {
  gap: 10px !important;
}

/* Bouton ouvrir/fermer le panneau lateral (iframe : profil, tribu,
   dashboard...) — voir .panel-toggle-jheo_js dans _newNavBar.html.twig et
   openRightSideIframe()/closeRightSideIframe() dans map_cmz_index.js.
   Remplace le style generique .menu-item-faniry (bordure carree blanche,
   icone "hamburger" fa-bars facilement confondue avec le burger des
   rubriques) par une pastille ronde coherente avec les autres icones de
   cette rangee (avatar, super admin). Deux etats bien distincts plutot
   qu'une simple nuance d'opacite :
     - ouvert (le clic va le FERMER) : pastille pleine vert fonce, fleches
       doubles ">>" (le panneau "part" vers la droite) ;
     - ferme (le clic va l'OUVRIR) : pastille contour (fond transparent,
       bordure claire), memes fleches doubles mais tournees a 180° -> "<<"
       (le panneau "revient" depuis la droite) — un seul <i>, la rotation CSS
       evite de dupliquer/permuter les classes d'icone en JS. */
.panel-toggle-jheo_js {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1.5px solid rgba(255, 255, 255, .4) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .08) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.panel-toggle-jheo_js i {
  font-size: 15px !important;
  color: #fff;
  transition: transform .25s ease;
}
.panel-toggle-jheo_js:hover {
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, .7) !important;
}
.panel-toggle-jheo_js.is-open {
  background: #0d3f3c !important;
  border-color: #d7e4e3 !important;
  box-shadow: 0 2px 8px rgba(9, 32, 29, .35);
}

/* Bouton "Accueil" (retour a la page d'accueil, voir .cmz-map-home-btn dans
   _newNavBar.html.twig) : a cote de .panel-toggle-jheo_js, meme famille de
   pastille pleine (taille/bordure/ombre/transition identiques) mais en
   ambre — memes valeurs que l'accent "Services" utilise ailleurs dans la
   navbar (pilule de rubrique, .rubrique-group-dot-jheo_js #e0ac1c) — pour
   rester distinct du vert (panneau ouvert), du bleu (agrandir) et du rouge
   (fermer) deja utilises dans cette rangee. */
.cmz-map-home-btn {
  /* 44px : meme taille que .bouton-connexion-ma/.bouton-grille-tarifaire-ma
     une fois compactees en pastille rondes (voir @container leftpanel
     (max-width:1200px) plus bas) — ce bouton n'a jamais d'etat "texte", donc
     toujours 44px, pour rester aligne avec ces voisines a toutes largeurs. */
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 1.5px solid #e0ac1c !important;
  background: #e0ac1c !important;
  box-shadow: 0 2px 8px rgba(224, 172, 28, .35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease !important;
}
.cmz-map-home-btn i {
  color: #fff !important;
  font-size: 16px !important;
}
.cmz-map-home-btn:hover {
  transform: scale(1.06) !important;
  background: #c99814 !important;
}

/* Boutons du navbar du panneau iframe (agrandir/reduire/fermer la fenetre —
   voir index.html.twig, .header-right) : meme famille de pastille PLEINE que
   .panel-toggle-jheo_js (taille/bordure/transition/ombre identiques), mais
   chacun avec sa propre couleur pour rester distinguable au premier coup
   d'oeil — bleu pour agrandir/reduire (action neutre), rouge pour fermer
   (action destructive, meme rouge que .bouton-connexion-ma ailleurs dans le
   navbar). Comportement inchange (fullScreenRightSideIframe()/
   miniScreenRightSideIframe()/closeRightSideIframe()) : seuls CSS/couleur
   changent. */
.btn_full_screen_right_side_iframe_jheo_js,
.btn_mini_screen_right_side_iframe_jheo_js,
.btn_close_right_side_iframe_jheo_js {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1.5px solid transparent !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn_full_screen_right_side_iframe_jheo_js:hover,
.btn_mini_screen_right_side_iframe_jheo_js:hover,
.btn_close_right_side_iframe_jheo_js:hover {
  transform: scale(1.06);
}
.btn_full_screen_right_side_iframe_jheo_js i,
.btn_mini_screen_right_side_iframe_jheo_js i,
.btn_close_right_side_iframe_jheo_js i {
  color: #fff !important;
}

.btn_full_screen_right_side_iframe_jheo_js,
.btn_mini_screen_right_side_iframe_jheo_js {
  background: #1e86c8 !important;
  box-shadow: 0 2px 8px rgba(30, 134, 200, .35);
}

.btn_close_right_side_iframe_jheo_js {
  background: #dc3545 !important;
  box-shadow: 0 2px 8px rgba(220, 53, 69, .35);
}
.panel-toggle-jheo_js.is-closed i {
  transform: rotate(180deg);
}

/* Pastille de recherche compacte : cachee par defaut (seule la vraie barre de
   recherche est visible tant que la rangee 1 a la place). */
.search-compact-btn-jheo_js,
.search-close-btn-jheo_js {
  display: none;
}

/* Garde defensive : le bouton de recherche doit rester vert fonce (#0d3f3c, deja
   pose en style inline dans _newNavBar.html.twig) a toutes les largeurs — jamais
   la meme couleur que "Se connecter" (rouge). */
.btn_submit_search_navbar {
  background-color: #0d3f3c !important;
}

/* "Se connecter" / "Grille tarifaire" en largeur normale : memes valeurs que la
   maquette — "Se connecter" plein rouge avec ombre portee, "Grille tarifaire" en
   pastille fantome (fond translucide, bordure claire) plutot qu'en rouge plein
   (le rouge plein vient de main.css, partage avec d'autres boutons du site — on
   ne le touche pas globalement, on cible uniquement ces deux classes ici). */
.bouton-connexion-ma {
  box-shadow: 0 4px 10px rgba(220, 53, 69, .3) !important;
  transition: filter .15s ease;
}
.bouton-grille-tarifaire-ma {
  background: rgba(255, 255, 255, .1) !important;
  border: 1px solid rgba(255, 255, 255, .35) !important;
  transition: filter .15s ease;
}
.bouton-connexion-ma:hover,
.bouton-grille-tarifaire-ma:hover {
  filter: brightness(1.08);
}

/* Boutons "Se connecter" / "Grille tarifaire" (et leur equivalent connecte
   "Se deconnecter") : pastilles rondes tonales, le libelle passe en tooltip
   (l'attribut title existe deja sur les boutons voisins de cette barre ;
   on s'appuie ici sur les <span> de libelle deja presents dans le twig).
   Seuil a 1200px (pas 980px) : le partage par defaut #leftPanel/#rightPanel
   est 50/50 (voir map_cmz.css, .leftPanel_width/.rightPanel_width) — sur un
   ecran large, 50% peut rester au-dessus de 980px et le mode compact
   n'apparaissait qu'apres avoir manuellement retreci le panneau via
   #resizer. 1200px fait que le mode compact s'active des l'ouverture du
   panneau iframe en 50/50, sur la plupart des largeurs d'ecran usuelles. */
@container leftpanel (max-width: 1200px) {
  /* Prefixees par .content_entete_cta_connexion_map_jheo_js pour egaler (et
     l'emporter sur) la specificite des regles pleine largeur ci-dessus —
     sinon, meme a l'interieur de ce @container, la regle pleine largeur
     gagnerait (specificite superieure, non liee a la condition @container). */
  .content_entete_cta_connexion_map_jheo_js .bouton-connexion-ma,
  .content_entete_cta_connexion_map_jheo_js .bouton-grille-tarifaire-ma,
  .content_entete_cta_connexion_map_jheo_js .bouton-deconnexion-ma {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
    box-shadow: var(--md-elev-1);
    transition: box-shadow .15s ease, transform .15s ease;
  }
  .content_entete_cta_connexion_map_jheo_js .bouton-connexion-ma:hover,
  .content_entete_cta_connexion_map_jheo_js .bouton-grille-tarifaire-ma:hover,
  .content_entete_cta_connexion_map_jheo_js .bouton-deconnexion-ma:hover {
    box-shadow: var(--md-elev-3);
    transform: translateY(-1px) scale(1.05);
  }
  .bouton-connexion-ma .ms-2,
  .bouton-grille-tarifaire-ma .ms-2,
  .bouton-deconnexion-ma .ms-2 {
    display: none;
  }
  .content_entete_cta_connexion_map_jheo_js .bouton-connexion-ma i,
  .content_entete_cta_connexion_map_jheo_js .bouton-grille-tarifaire-ma i,
  .content_entete_cta_connexion_map_jheo_js .bouton-deconnexion-ma i {
    background: none;
    width: auto;
    height: auto;
  }

  /* "Grille tarifaire" : ton ambre distinct du rouge de "Se connecter" et
     du vert de la recherche (.btn_submit_search_navbar), pour que les
     pastilles restent lisibles une fois reduites a une icone. */
  .bouton-grille-tarifaire-ma {
    background-color: #fdf1d6 !important;
    border-color: #fdf1d6 !important;
  }
  .bouton-grille-tarifaire-ma i {
    color: #8a5a10 !important;
  }

  /* Recherche : la barre complete se replie en pastille (comme la maquette),
     au lieu de s'ecraser illisible ("Qi ?"/"Oi ?") faute de place. */
  .content_entete_recherche_map_jheo_js {
    display: none;
  }
  .search-compact-btn-jheo_js {
    display: flex;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color:#13a9c9; 
    border: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: var(--md-elev-1);
    transition: box-shadow .15s ease, transform .15s ease;
  }
  .search-compact-btn-jheo_js:hover {
    box-shadow: var(--md-elev-3);
    transform: translateY(-1px) scale(1.05);
  }

  .content_entete_cta_connexion_map_jheo_js.search-expanded-jheo_js .content_entete_recherche_map_jheo_js {
    display: flex;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    /* Au-dessus de la pastille "Voir plus" (1601) et du tiroir des rubriques
       (1600, voir navbar_rubrique_groups.css), posés au même endroit sous
       700px : à 1500, la barre dépliée passait dessous. */
    z-index: 1700;
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: var(--md-elev-3);
    padding: 6px 6px 6px 16px;
    flex: none;
    margin-left: 0;
  }
  .content_entete_cta_connexion_map_jheo_js.search-expanded-jheo_js .search-compact-btn-jheo_js {
    display: none;
  }
  .content_entete_cta_connexion_map_jheo_js.search-expanded-jheo_js .search-close-btn-jheo_js {
    display: flex;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f4;
    border: none;
    align-items: center;
    justify-content: center;
    color: #12312c;
    flex-shrink: 0;
  }
}

/* Horloge/date, deplacees dans le navbar du panneau iframe (voir
   templates/new_home/index.html.twig, #clockPill_jheo_js) : se reduisent
   si CE panneau devient etroit a son tour. */
@container container_rightPanel (max-width: 360px) {
  #clockPill_jheo_js #currentDate {
    display: none;
  }
}
@container container_rightPanel (max-width: 230px) {
  #clockPill_jheo_js #currentTime {
    display: none;
  }
}

/* Nom/statut de l'utilisateur connecte : version stylee, a cote de l'horloge/
   date dans le navbar du panneau iframe (voir index.html.twig, .user-badge-jheo_js) —
   avatar rond + nom en gras + statut/pseudo en petit, meme esprit "pastille"
   que #clockPill_jheo_js juste a cote. Se reduit progressivement si ce
   panneau devient etroit, comme l'horloge. */
.user-badge-jheo_js {
  background: #eef4f2;
  border-radius: 999px;
  padding: 4px 14px 4px 4px;
  min-width: 0;
  /* Cliquable (ouvre "Mes informations personnelles", voir onclick dans
     index.html.twig) : affordance visuelle + leger effet au survol. */
  cursor: pointer;
  transition: background .15s ease;
}
.user-badge-jheo_js:hover {
  background: #e2ece9;
}
.user-badge-avatar-jheo_js {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0d3f3c;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}
/* Photo de profil (userConnected.photo_profil, voir index.html.twig) plutot
   qu'une icone generique — recadree en rond, plein cadre. */
.user-badge-avatar-jheo_js img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.user-badge-name-jheo_js {
  display: block;
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: #12312c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.user-badge-status-jheo_js {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  color: #5b706c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
@container container_rightPanel (max-width: 480px) {
  .user-badge-status-jheo_js {
    display: none;
  }
}
@container container_rightPanel (max-width: 340px) {
  .user-badge-jheo_js .user-badge-name-jheo_js {
    max-width: 90px;
  }
}
@container container_rightPanel (max-width: 260px) {
  .user-badge-jheo_js {
    display: none;
  }
}

/* Rangee "agrandir/notifications/fermer" (.header-right, voir
   index.html.twig) quand CE panneau (pas la fenetre) devient trop etroit
   pour tenir a cote de l'horloge/du badge utilisateur sur la meme ligne :
   .header-container passe alors en flex-wrap (deja pose en inline dans le
   twig) et .header-right — qui ne fait que la largeur de son contenu, donc
   sans prise sur le justify-content:flex-end deja pose dessus en inline —
   se retrouvait plaque a gauche, colle sous l'horloge, sans aucun espace :
   flottant, disgracieux. flex-basis:100% le force sur sa propre ligne pleine
   largeur, ou son justify-content:flex-end existant peut alors pousser les
   boutons jusqu'au bord droit comme sur la ligne du dessus ; row-gap separe
   clairement les deux lignes. Seuil choisi pour couvrir un partage
   #leftPanel/#rightPanel 50/50 sur un ecran ~1920px (panneau ~500-560px). */
@container container_rightPanel (max-width: 560px) {
  .header-container {
    row-gap: 10px;
  }
  #clockPill_jheo_js {
    display: none !important;
  }
}