/* .my-logo-nav-bar img{
    border-radius: 10px;
} */

.content_entete_cta_connexion{
    align-items: center;
}

/* ===== Bloc identité utilisateur (nom + date), aligné à gauche ===== */

.user-id-block-fa {
	text-align: left;
	line-height: 1.25;
}

/* Nom / statut : élément principal, mis en avant */
.user-name-fa {
	/* display: inline-flex; */
	/* align-items: center; */
	gap: 6px;
	font-weight: 700;
	letter-spacing: 0.2px;
	text-align: left !important; /* écrase le text-center hérité */
}
.user-name-fa__name { color: #fff; }
.user-name-fa__label { opacity: 0.75; font-weight: 400; }

.status-dot-fa {
	font-size: 0.5rem;
	color: #4ade80; /* vert = connecté */
}

/* Ligne horloge / date : secondaire, discrète, alignée sous le nom */
.clock-fa {
	opacity: 0.8;
	margin-top: 2px;
	align-items: center;
}
.clock-fa i { opacity: 0.75; margin-right: 3px; }
.clock-fa__sep { opacity: 0.4; }

.clock-fa--guest {
	font-weight: 500;
}

/* Mobile : on empile proprement sans perdre l'alignement gauche */
@media (max-width: 575.98px) {
	.user-name-fa__label { display: none; }
	.clock-fa {
		flex-wrap: wrap;
		row-gap: 2px;
	}
}

/* ============================================================
   Widget flottant d'aide/chat (.content_chat_map, voir
   shard/chatBot.html.twig) sur la page carte : Accueil et Grille
   tarifaire, deplaces ici depuis le navbar (voir _newNavBar.html.twig),
   rejoignent le bouton d'aide (bleu, .help-btn) — meme gabarit de
   pastille carree 44x44, mais chacun avec sa propre couleur pour rester
   distinguable au premier coup d'oeil.
   ============================================================ */

/* Accueil : meme ambre que l'ancien .cmz-map-home-btn du navbar
   (navbar_compact.css), pour garder la meme association couleur/action. */
.chat-flottant-home-jheo_js {
	background-color: #e0ac1c !important;
	color: #fff !important;
	text-decoration: none;
}
.chat-flottant-home-jheo_js:hover {
	background-color: #c99814 !important;
}
.chat-flottant-home-jheo_js:active {
	background-color: #ad8110 !important;
}

/* Bouton "replier/deplier" tout le widget (chat_flottant_toggle_jheo_js) :
   degrade bleu->violet, meme langage visuel que .toggle_map_toolbar_jheo_js
   (main.css) sur la colonne de controles de la carte — volontairement
   distinct des couleurs pleines "fonction" (ambre/violet/bleu/turquoise/
   vert) du reste du widget, pour qu'on le reconnaisse comme LE bouton meta
   qui les contient tous, pas comme une action de plus parmi elles. */
.chat_flottant_toggle_jheo_js {
	background: linear-gradient(135deg, #1e88e5, #8e24aa) !important;
	color: #fff !important;
	border: none !important;
}
.chat_flottant_toggle_jheo_js:hover {
	filter: brightness(1.1);
}
.chat_flottant_toggle_icon_jheo_js {
	pointer-events: none;
	transition: transform 0.25s ease;
}
#openFlottant.is-collapsed .chat_flottant_toggle_icon_jheo_js {
	transform: rotate(180deg);
}
/* Replie : seul le bouton meta reste visible, tous les autres (Accueil,
   Grille tarifaire, Aide, Messages, Visio - qu'ils viennent du bloc
   show_map_actions ou non) disparaissent. Cible tout enfant direct SAUF le
   toggle, plutot que de lister chaque id/classe, pour rester valable meme
   si d'autres boutons rejoignent ce widget plus tard. */
#openFlottant.is-collapsed > *:not(.chat_flottant_toggle_jheo_js) {
	display: none !important;
}
/* Message/Visio (connecte : #openMessage/#openVisio ; deconnecte :
   .btn_gris_actif_js_Elie) ne se repliaient PAS avec le reste : la regle
   "gabarit rond 44px" plus bas (#leftPanel #openMessage, #leftPanel
   #openVisio, #leftPanel .btn_gris_actif_js_Elie { display:flex !important;
   ... }) porte 2 id (#leftPanel + l'id du bouton), plus specifique que le
   seul id de la regle de repli ci-dessus (#openFlottant + 1 classe) — a
   specificite egale (les deux en !important), c'est elle qui gagnait et le
   display:flex survivait au repli. On redeclare explicitement le repli pour
   ces boutons precis, avec une specificite qui bat cette regle de gabarit. */
#openFlottant.is-collapsed > #openMessage,
#openFlottant.is-collapsed > #openVisio,
#openFlottant.is-collapsed > .btn_gris_actif_js_Elie {
	display: none !important;
}

/* Bouton dockable (fiche unique "📄" ou badge "+N", voir DockFicheManager.js
   createDockableIcon/createDockableIconForMore) : porte deja .help-btn donc
   herite du meme gabarit rond 44px que le reste du widget (voir plus haut
   #leftPanel .help-btn) — seule la couleur manquait, il restait sur le fond
   blanc par defaut de .help-btn (style.css), peu visible/distinct du reste.
   Rose vif, meme teinte que le bouton "afficher la liste" recolore sur la
   colonne de controles de la carte (main.css .cta_show_list_nav_left_jheo_js),
   pour rester coherent dans toute l'app sur "afficher plus d'elements". */
.dockable-btn-jheo_js {
	background-color: #d81b60 !important;
	border-color: #d81b60 !important;
	color: #fff !important;
}
.dockable-btn-jheo_js:hover {
	background-color: #ad1457 !important;
}

/* Grille tarifaire : violet, distinct du bleu (aide), de l'ambre
   (Accueil) et du rouge (Se deconnecter) deja utilises autour de ce
   widget/navbar. */
.chat-flottant-tarif-jheo_js {
	background-color: #6f42c1 !important;
	color: #fff !important;
}
.chat-flottant-tarif-jheo_js:hover {
	background-color: #5d36a4 !important;
}
.chat-flottant-tarif-jheo_js:active {
	background-color: #4c2c87 !important;
}

/* Positionnement : .content_chat_map est en position:sticky avec
   "left: 90vw" par defaut (voir main.css) — un offset relatif a la
   VIEWPORT, qui ne tient pas compte de la largeur reelle de #leftPanel
   une fois le panneau iframe (#rightPanel) ouvert/redimensionne via
   #resizer (partage 50/50 par defaut, voir map_cmz.css). Résultat : le
   widget peut se retrouver caché sous l'iframe ou loin de son bord.

   Sur cette page carte, .content_chat_map est un enfant BLOC (display:
   block) direct de #leftPanel (voir new_home/index.html.twig) : sa
   position statique par defaut est donc deja collee au bord GAUCHE de
   #leftPanel. Pour un element positionne (sticky se comporte comme
   relative tant qu'il n'est pas "accroche"), "left"/"right" deplacent la
   boite depuis cette position statique plutot que de la coller a un bord
   du conteneur — d'ou le "right: 16px" precedent qui la poussait en fait
   ENCORE PLUS A GAUCHE (constat remonte : le widget apparaissait a
   gauche de la carte au lieu de sa droite). On neutralise ces offsets
   ("auto") et on utilise une marge gauche automatique, qui elle aligne
   correctement une boite bloc sur le bord DROIT de son conteneur, quelle
   que soit la largeur de #leftPanel — donc toujours juste a cote du
   panneau iframe. */
/* width: fit-content (et pas juste les 150px fixes de main.css) : avec 5
   pastilles (Accueil/Grille tarifaire/Aide/Message/Visio, chacune ~44px
   + marge) le contenu de #openFlottant depasse largement 150px. Comme ce
   dernier reste en display:flex nowrap SANS que .content_chat_map ne le
   contienne (pas d'overflow:hidden), le surplus continuait a s'afficher
   par-dessus le panneau iframe voisin au lieu de s'arreter au bord de
   #leftPanel (signale : le widget "depasse" dans le champ iframe). En
   laissant la boite se dimensionner a son contenu reel, margin-left:auto
   la cale exactement contre le bord droit de #leftPanel, sans jamais
   deborder dessus. */
#leftPanel .content_chat_map {
	left: auto;
	right: auto;
	width: fit-content;
	margin-left: auto;
	/* 16px -> 28px : la barre s'est allongee (bouton "+N" dockable + bouton
	   replier, tous deux desormais dans ce meme groupe) et se retrouvait
	   colle au bord du panneau iframe voisin des que le widget grandissait
	   vers la droite. */
	margin-right: 28px;
}

/* Boutons ronds (Aide/Accueil/Grille tarifaire/Message/Visio) : .help-btn
   est une pastille carree a coins arrondis (border-radius:8px, voir
   style.css) et Message/Visio ont leur propre border-radius:8px en style
   inline (voir shard/chatBot.html.twig) — soit #openMessage/#openVisio
   quand on est connecte, soit .btn_gris_actif_js_Elie (grise, desactive)
   sinon. On uniformise tout ce widget en pastilles rondes de meme gabarit
   (44px), pour que Message/Visio matchent Aide/Accueil/Grille tarifaire
   dans les DEUX etats, au lieu de rester les deux seuls boutons carres du
   groupe. !important necessaire pour gagner sur le style inline de
   Message/Visio. Scope a #leftPanel : ne change rien sur les ~13 autres
   pages qui reutilisent shard/chatBot.html.twig. */
#leftPanel .help-btn,
#leftPanel #openMessage,
#leftPanel #openVisio,
#leftPanel .btn_gris_actif_js_Elie {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	/* Ancre de positionnement pour le badge de notification (voir
	   .content_badge_message_jheo_js plus bas) : sans ce position:relative,
	   son "position:absolute" remonterait jusqu'au premier ancetre positionne
	   (.content_chat_map, en sticky) au lieu de rester colle a CE bouton. */
	position: relative;
}
/* Message/Visio (les deux etats) centraient leur icone via un
   "margin-top:13%" cale sur l'ancienne boite 40px (voir style inline du
   <i>, shard/chatBot.html.twig) — plus juste une fois la pastille passee
   a 44px en flex : on neutralise ce hack et on relaisse le centrage flex
   ci-dessus faire le travail, avec une taille d'icone cohesive avec les
   autres pastilles du widget (20px, proche des 22px de .help-btn dans
   style.css). Combinateur ">" (enfant direct) et pas juste "i" : #openVisio
   contient aussi un <i class="fa-phone-volume"> imbrique DANS le badge
   "appel en cours" (voir .content_badge_visio_nanta_js) — un simple
   descendant "i" l'aurait aussi recadre en 20px/blanc, effacant sa couleur
   verte volontairement distincte. */
#leftPanel #openMessage > i,
#leftPanel #openVisio > i,
#leftPanel .btn_gris_actif_js_Elie > i {
	margin-top: 0 !important;
	font-size: 20px !important;
}

/* Badge de notification (pastille rouge "3", voir
   .content_badge_message_jheo_js / .content_badge_visio_nanta_js dans
   shard/chatBot.html.twig) : il etait positionne par un
   "transform: translate(60%,-250%)!important" INLINE, calibre pour
   l'ancien bouton en flux normal (pas flex) — une fois #openMessage/
   #openVisio passes en display:flex ci-dessus, ce transform partait du
   mauvais point de depart et le badge se retrouvait projete loin
   au-dessus du groupe de boutons (signale : le "3" flottait hors de son
   bouton). On sort le badge du flux flex avec position:absolute, ancre au
   coin superieur droit DU BOUTON (voir position:relative ci-dessus).
   Attention : un !important INLINE ne peut jamais etre neutralise par un
   !important d'une feuille de style externe (l'inline gagne toujours
   l'egalite de specificite) — "transform: none !important" ici serait
   donc resté sans effet. Le vrai correctif est cote Twig : ce style
   inline n'est plus emis du tout quand show_map_actions est vrai (voir
   shard/chatBot.html.twig) ; la regle transform ci-dessous ne reste que
   pour anticiper un futur balisage qui remettrait un transform NON
   important sur cet element. */
#leftPanel .content_badge_message_jheo_js,
#leftPanel .content_badge_visio_nanta_js {
	position: absolute;
	top: -4px;
	right: -4px;
}
#leftPanel .badge_message_jheo_js,
#leftPanel .badge_visio_nanta_js {
	transform: none;
}

/* Message/Visio (connecte) : meme rouge/blanc que la variante deconnectee
   pour "border/bg", mais ici on les remplit d'une couleur pleine (comme
   Aide/Accueil/Grille tarifaire) pour que le widget reste un ensemble
   coherent de pastilles pleines — et une couleur DIFFERENTE entre les
   deux (elles etaient identiques, bleu sur fond blanc, impossibles a
   distinguer au premier coup d'oeil malgre des icones differentes) :
   turquoise pour Message (meme teinte que .search-compact-btn-jheo_js,
   deja utilisee dans cette navbar), vert pour Visio (convention usuelle
   "demarrer un appel", coherente avec l'icone vert de sa pastille
   "en cours d'appel", .fa-phone-volume juste au-dessus). */
#leftPanel #openMessage {
	background-color: #13a9c9 !important;
	border-color: #13a9c9 !important;
}
/* ">" : ne pas repeindre en blanc l'icone verte du badge "appel en cours"
   imbrique plus bas dans ce meme bouton (voir commentaire plus haut). */
#leftPanel #openMessage > i {
	color: #fff !important;
}
#leftPanel #openMessage:hover {
	background-color: #0f8aa6 !important;
}
#leftPanel #openVisio {
	background-color: #28a745 !important;
	border-color: #28a745 !important;
}
#leftPanel #openVisio > i {
	color: #fff !important;
}
#leftPanel #openVisio:hover {
	background-color: #1e7e34 !important;
}

/* ============================================================
   Panneau "legende/filtre/mes favoris/favoris partages" (voir
   UIManager.defaultHTMLRightSide(), .content_legende_jheo_js) : le bouton
   fermer (.close_right_side_jheo_js) etait un simple "X" texte rouge
   (.red_color_fa_solid dans main.css, aucun fond ni forme), incoherent
   avec le design "pastille ronde pleine" deja utilise pour fermer le
   panneau iframe juste a cote (.btn_close_right_side_iframe_jheo_js,
   navbar_compact.css). On reprend exactement ce meme gabarit ici — memes
   dimensions/rayon/ombre — pour que "fermer" ait partout la meme
   signature visuelle sur cette page. Le nouveau bouton "retour"
   (.back_right_side_jheo_js, voir MapControl.goBackLegendPanel()) suit la
   meme famille de pastille, en bleu comme agrandir/reduire
   (.btn_full_screen_right_side_iframe_jheo_js) pour rester coherent avec
   ce meme systeme de couleurs (rouge = fermer/quitter, bleu = navigation/
   fenetre) tout en restant distinct du rouge voisin. */
.right_side_header_actions_jheo_js {
	gap: 8px;
}
.back_right_side_jheo_js,
.close_right_side_jheo_js, .close_filtre_spec_jheo_js {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	padding: 0 !important;
	border: 1.5px solid transparent !important;
	border-radius: 50% !important;
	box-sizing: border-box !important;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.back_right_side_jheo_js:hover,
.close_right_side_jheo_js:hover,
.close_filtre_spec_jheo_js:hover {
	transform: scale(1.06);
}
.back_right_side_jheo_js i,
.close_right_side_jheo_js i,
.close_filtre_spec_jheo_js i {
	color: #fff !important;
	font-size: 15px !important;
}
.back_right_side_jheo_js {
	background: #1e86c8 !important;
	box-shadow: 0 2px 8px rgba(30, 134, 200, .35);
}
.close_right_side_jheo_js, .close_filtre_spec_jheo_js {
	background: #dc3545 !important;
	box-shadow: 0 2px 8px rgba(220, 53, 69, .35);
}

/* ============================================================
   Responsive : widget flottant d'aide/chat sur la carte (Accueil/
   Grille tarifaire/Aide/Message/Visio/replier) — Message/Visio/
   deconnecte restent figes a 44px (regle #leftPanel .help-btn etc.
   plus haut) meme quand style.css reduit .help-btn sur petit ecran,
   ce qui recree l'incoherence de gabarit que cette meme regle visait
   a corriger. On applique les memes paliers ici, sur #leftPanel
   uniquement (page carte), pour que tout le groupe retrecisse
   ensemble. Marge droite du widget (28px, voir #leftPanel
   .content_chat_map plus haut) et espacement entre pastilles (.me-2,
   Bootstrap) reduits en meme temps pour ne pas deborder du panneau
   iframe voisin sur mobile.

   @container et pas @media, memes seuils que main.css (colonne
   controles carte) : ce widget vit lui aussi dans #leftPanel, dont la
   largeur reelle depend du partage 50/50 avec #rightPanel (voir
   .leftPanel_width/.rightPanel_width, map_cmz.css) et pas seulement de
   la largeur de la fenetre — sur ~1080px de fenetre avec le panneau
   iframe ouvert, #leftPanel tombe a ~540px alors qu'aucun seuil @media
   habituel ne se declenche, laissant ces boutons a 44px, disproportionnes
   par rapport a la carte retrecie. "leftpanel" (minuscule, sans
   prefixe) est le nom de container reellement actif sur #leftPanel
   (voir style.css, container-name:leftpanel !important — la variante
   "container_leftPanel" posee par responsive_map_cmz.css est ecrasee
   par cet !important et ne s'applique donc jamais). */
@container leftpanel (max-width: 900px) {
	#leftPanel .help-btn,
	#leftPanel #openMessage,
	#leftPanel #openVisio,
	#leftPanel .btn_gris_actif_js_Elie {
		width: 38px !important;
		height: 38px !important;
	}
	#leftPanel #openMessage > i,
	#leftPanel #openVisio > i,
	#leftPanel .btn_gris_actif_js_Elie > i {
		font-size: 17px !important;
	}
	#leftPanel .content_chat_map {
		margin-right: 16px;
	}
}

@container leftpanel (max-width: 620px) {
	#leftPanel .help-btn,
	#leftPanel #openMessage,
	#leftPanel #openVisio,
	#leftPanel .btn_gris_actif_js_Elie {
		width: 34px !important;
		height: 34px !important;
	}
	#leftPanel #openMessage > i,
	#leftPanel #openVisio > i,
	#leftPanel .btn_gris_actif_js_Elie > i {
		font-size: 15px !important;
	}
	#leftPanel .content_chat_map {
		margin-right: 8px;
	}
	#leftPanel #openFlottant > .me-2 {
		margin-right: 4px !important;
	}
	#leftPanel #openFlottant > .ms-2 {
		margin-left: 4px !important;
	}
}

@container leftpanel (max-width: 400px) {
	#leftPanel .help-btn,
	#leftPanel #openMessage,
	#leftPanel #openVisio,
	#leftPanel .btn_gris_actif_js_Elie {
		width: 30px !important;
		height: 30px !important;
	}
	#leftPanel #openMessage > i,
	#leftPanel #openVisio > i,
	#leftPanel .btn_gris_actif_js_Elie > i {
		font-size: 13px !important;
	}
}

/* @container leftpanel ne reagit qu'a la largeur (container-type:
   inline-size) — sur une fenetre large mais BASSE (ex: 1086x812), ce
   widget garde son gabarit 44px meme si la hauteur de carte disponible
   est reduite ("boutons trop grands en hauteur, independamment de
   l'iframe/la largeur", signale). Memes paliers que main.css (colonne
   controles carte), mais sur la hauteur de la FENETRE cette fois. */
@media (max-height: 850px) {
	#leftPanel .help-btn,
	#leftPanel #openMessage,
	#leftPanel #openVisio,
	#leftPanel .btn_gris_actif_js_Elie {
		width: 38px !important;
		height: 38px !important;
	}
	#leftPanel #openMessage > i,
	#leftPanel #openVisio > i,
	#leftPanel .btn_gris_actif_js_Elie > i {
		font-size: 17px !important;
	}
}

@media (max-height: 700px) {
	#leftPanel .help-btn,
	#leftPanel #openMessage,
	#leftPanel #openVisio,
	#leftPanel .btn_gris_actif_js_Elie {
		width: 34px !important;
		height: 34px !important;
	}
	#leftPanel #openMessage > i,
	#leftPanel #openVisio > i,
	#leftPanel .btn_gris_actif_js_Elie > i {
		font-size: 15px !important;
	}
}

@media (max-height: 560px) {
	#leftPanel .help-btn,
	#leftPanel #openMessage,
	#leftPanel #openVisio,
	#leftPanel .btn_gris_actif_js_Elie {
		width: 30px !important;
		height: 30px !important;
	}
	#leftPanel #openMessage > i,
	#leftPanel #openVisio > i,
	#leftPanel .btn_gris_actif_js_Elie > i {
		font-size: 13px !important;
	}
}