/* CPTS Centre-Hérault — Bandeau haut de page [cpts_topbar]
 * Réseaux à gauche, boutons d'action à droite.
 * Sans fond : juste une ombre douce pour délimiter. Boutons « soft » façon dashboard.
 */

.cptsh-topbar {
	width: 100%;
	background: transparent;
	box-shadow: 0 8px 18px -12px rgba(35, 65, 85, .35);
	font-family: 'Montserrat', system-ui, sans-serif;
}
.cptsh-topbar__inner {
	padding: 10px 24px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
}

/* ---- Réseaux sociaux (gauche) ------------------------------------------- */
.cptsh-topbar__social { display: inline-flex; align-items: center; gap: 6px; }
.cptsh-topbar__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 12px;   /* carré arrondi façon dashboard */
	color: #234155; text-decoration: none;
	background: rgba(35, 65, 85, .05);
	transition: color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cptsh-topbar__social a:hover {
	color: #fff;
	background: linear-gradient(135deg, #2f80c2, #2aa0ad, #A6C549, #E94E1B);
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(35, 65, 85, .18);
}
.cptsh-topbar__social svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* ---- Boutons d'action (droite) — style « soft » dashboard --------------- */
.cptsh-topbar__actions {
	display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin-left: auto; justify-content: flex-end;   /* toujours calés à droite */
}
.cptsh-btn {
	display: inline-flex; align-items: center; gap: 0;
	padding: 9px 12px; border-radius: 9px;      /* moins de radius */
	font-weight: 700; font-size: 13.5px; letter-spacing: .2px;
	line-height: 1; text-decoration: none; border: 0; cursor: pointer;   /* pas de bordure */
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.cptsh-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; flex: none; }
/* Repos : icône seule. Survol/focus : le titre se déploie (le bouton s'étend). */
.cptsh-btn span {
	display: inline-block; max-width: 0; margin-left: 0;
	overflow: hidden; white-space: nowrap; opacity: 0;
	transition: max-width .35s ease, margin-left .35s ease, opacity .25s ease;
}
.cptsh-btn:hover span,
.cptsh-btn:focus-visible span { max-width: 220px; margin-left: 8px; opacity: 1; }
.cptsh-btn:hover { transform: translateY(-1px); }

/* Fond pastel + icône/texte en couleur franche (façon cards du dashboard). */

/* Adhérer — corail / orange */
.cptsh-btn--join {
	background: rgba(233, 78, 27, .12);
	color: #E94E1B;
}
.cptsh-btn--join:hover { background: #E94E1B; color: #fff; box-shadow: 0 8px 18px rgba(233, 78, 27, .30); }

/* Se connecter — bleu */
.cptsh-btn--login {
	background: rgba(47, 128, 194, .12);
	color: #2f80c2;
}
.cptsh-btn--login:hover { background: #2f80c2; color: #fff; box-shadow: 0 8px 18px rgba(47, 128, 194, .30); }

/* Tableau de bord (admin) — vert */
.cptsh-btn--admin {
	background: rgba(166, 197, 73, .18);
	color: #7d9e2b;
}
.cptsh-btn--admin:hover { background: #A6C549; color: #fff; box-shadow: 0 8px 18px rgba(166, 197, 73, .32); }

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 1023px) {
	.cptsh-topbar__inner { padding: 8px 14px; gap: 10px; }
	.cptsh-topbar__social a { width: 34px; height: 34px; border-radius: 10px; }
	.cptsh-btn { font-size: 12.5px; padding: 9px 12px; border-radius: 9px; }
	.cptsh-btn--admin { padding: 9px 11px; }
}