/* CPTS Centre-Hérault — En-tête tout-en-un [cpts_header]
 *
 *  Bandeau FIXE en haut : (desktop) réseaux à gauche · (mobile) logo à gauche ·
 *  3 boutons à droite + burger.
 *  < 1024px : burger toujours visible (ouvre le menu plein écran) ; pas de menu inline.
 *  ≥ 1024px : sous le bandeau, logo centré + menu inline (défilent) ; au scroll,
 *             le burger apparaît dans le bandeau pour rouvrir le menu.
 *  Indépendant de [cpts_burger].
 *  (Réseaux + boutons réutilisent les classes .cptsh-topbar__* / .cptsh-btn de cpts-topbar.css)
 */

.cptsh-wrap { --cptsh-barh: 62px; }

/* ============================================================================
 * Bandeau fixe
 * ========================================================================== */
.cptsh-bar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 1000001;
	height: var(--cptsh-barh, 62px);
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 0 24px;
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(35, 65, 85, .08);
}
body.admin-bar .cptsh-bar { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .cptsh-bar { top: 46px; } }

.cptsh-bar__left  { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cptsh-bar__right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cptsh-bar__right .cptsh-topbar__actions { margin-left: 0; flex-wrap: nowrap; }

/* réserve la hauteur du bandeau (le bandeau étant fixed / hors flux) */
.cptsh-spacer { height: var(--cptsh-barh, 62px); }

/* logo dans le bandeau (mobile ; desktop au scroll) */
.cptsh-bar__logo { display: inline-flex; align-items: center; line-height: 0; flex: none; }
.cptsh-bar__logo img { height: calc(var(--cptsh-barh, 62px) - 20px); width: auto; display: block; }

/* Visibilité par défaut (mobile-first) */
.cptsh-bar .cptsh-topbar__social { display: none; }   /* réseaux : desktop only */
.cptsh-main { display: none; }                          /* bloc logo+menu : desktop only */

/* ============================================================================
 * Burger (dans le bandeau — plus de position:fixed)
 * ========================================================================== */
.cptsh__burger {
	position: static; flex: none;
	width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	background: transparent; box-shadow: none;
	transition: transform .2s ease;
}
.cptsh__burger:active { transform: scale(.94); }
.cptsh__burger-grid {
	width: 26px; height: 26px; display: block;
	background: linear-gradient(135deg, #89B8E3 0%, #84CBD5 28%, #A6C549 52%, #CC8B1A 76%, #E94E1B 100%);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask:
		radial-gradient(circle 3px at 4px 4px,   #000 96%, transparent 100%),
		radial-gradient(circle 3px at 13px 4px,  #000 96%, transparent 100%),
		radial-gradient(circle 3px at 22px 4px,  #000 96%, transparent 100%),
		radial-gradient(circle 3px at 4px 13px,  #000 96%, transparent 100%),
		radial-gradient(circle 3px at 13px 13px, #000 96%, transparent 100%),
		radial-gradient(circle 3px at 22px 13px, #000 96%, transparent 100%),
		radial-gradient(circle 3px at 4px 22px,  #000 96%, transparent 100%),
		radial-gradient(circle 3px at 13px 22px, #000 96%, transparent 100%),
		radial-gradient(circle 3px at 22px 22px, #000 96%, transparent 100%);
	mask:
		radial-gradient(circle 3px at 4px 4px,   #000 96%, transparent 100%),
		radial-gradient(circle 3px at 13px 4px,  #000 96%, transparent 100%),
		radial-gradient(circle 3px at 22px 4px,  #000 96%, transparent 100%),
		radial-gradient(circle 3px at 4px 13px,  #000 96%, transparent 100%),
		radial-gradient(circle 3px at 13px 13px, #000 96%, transparent 100%),
		radial-gradient(circle 3px at 22px 13px, #000 96%, transparent 100%),
		radial-gradient(circle 3px at 4px 22px,  #000 96%, transparent 100%),
		radial-gradient(circle 3px at 13px 22px, #000 96%, transparent 100%),
		radial-gradient(circle 3px at 22px 22px, #000 96%, transparent 100%);
	transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.cptsh__burger:hover .cptsh__burger-grid { transform: rotate(90deg); }
.cptsh__burger.is-open .cptsh__burger-grid { transform: rotate(225deg) scale(.9); }

/* ============================================================================
 * Menu plein écran (overlay) — inchangé
 * ========================================================================== */
.cptsh-navmenu {
	position: fixed; inset: 0; z-index: 1000000;
	display: flex; align-items: center; justify-content: center;
	background: #ffffff;
	opacity: 0; visibility: hidden;
	clip-path: circle(0px at calc(100% - 47px) 47px);
	transition: clip-path .55s cubic-bezier(.76,0,.24,1), opacity .35s ease, visibility 0s linear .55s;
}
.cptsh-navmenu::before {
	content: ""; position: absolute; bottom: -15%; left: -10%;
	width: 55vw; height: 55vw; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(132,203,213,.18), rgba(255,255,255,0) 70%);
}
.cptsh-navmenu.is-open {
	opacity: 1; visibility: visible;
	clip-path: circle(160% at calc(100% - 47px) 47px);
	transition: clip-path .6s cubic-bezier(.76,0,.24,1), opacity .35s ease;
}
.cptsh-navmenu__inner { width: 100%; max-height: 100vh; overflow-y: auto; padding: 90px 24px; text-align: center; }
.cptsh-navmenu__list { list-style: none; margin: 0; padding: 0; }
.cptsh-navmenu__list li {
	margin: 4px 0;
	opacity: 0; transform: translateY(26px);
	transition: opacity .45s ease, transform .45s ease;
}
.cptsh-navmenu.is-open .cptsh-navmenu__list li { opacity: 1; transform: none; }
.cptsh-navmenu.is-open .cptsh-navmenu__list > li:nth-child(1)  { transition-delay: .12s; }
.cptsh-navmenu.is-open .cptsh-navmenu__list > li:nth-child(2)  { transition-delay: .17s; }
.cptsh-navmenu.is-open .cptsh-navmenu__list > li:nth-child(3)  { transition-delay: .22s; }
.cptsh-navmenu.is-open .cptsh-navmenu__list > li:nth-child(4)  { transition-delay: .27s; }
.cptsh-navmenu.is-open .cptsh-navmenu__list > li:nth-child(5)  { transition-delay: .32s; }
.cptsh-navmenu.is-open .cptsh-navmenu__list > li:nth-child(6)  { transition-delay: .37s; }
.cptsh-navmenu.is-open .cptsh-navmenu__list > li:nth-child(7)  { transition-delay: .42s; }
.cptsh-navmenu.is-open .cptsh-navmenu__list > li:nth-child(8)  { transition-delay: .47s; }
.cptsh-navmenu.is-open .cptsh-navmenu__list > li:nth-child(9)  { transition-delay: .52s; }
.cptsh-navmenu.is-open .cptsh-navmenu__list > li:nth-child(n+10) { transition-delay: .57s; }

.cptsh-navmenu__list a {
	display: inline-block;
	font-family: 'Montserrat', system-ui, sans-serif;
	font-size: clamp(24px, 3.4vw, 42px); font-weight: 800; line-height: 1.15;
	color: #234155; text-decoration: none;
	transition: color .2s ease, transform .2s ease;
}
.cptsh-navmenu__list a:hover {
	transform: translateX(4px);
	background: linear-gradient(135deg, #2f80c2, #2aa0ad, #A6C549, #E94E1B);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.cptsh-navmenu__list .sub-menu,
.cptsh-navmenu__list .children { list-style: none; margin: 6px 0 14px; padding: 0; }
.cptsh-navmenu__list .sub-menu a,
.cptsh-navmenu__list .children a { font-size: clamp(15px, 1.6vw, 19px); font-weight: 600; color: #5a6b7b; }

body.cptsh-noscroll { overflow: hidden; }

/* ============================================================================
 * DESKTOP ≥ 1024px : bandeau (réseaux + boutons, burger au scroll)
 *                     + bloc logo centré au-dessus du menu inline
 * ========================================================================== */
@media (min-width: 1024px) {
	.cptsh-bar .cptsh-topbar__social { display: inline-flex; }

	/* Logo dans le bandeau : réserve sa place à gauche (pas de décalage des
	   réseaux) et entre par la gauche au scroll. */
	.cptsh-bar__logo {
		display: inline-flex;
		opacity: 0; transform: translateX(-28px); pointer-events: none;
		transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1);
	}
	.cptsh-bar.is-scrolled .cptsh-bar__logo {
		opacity: 1; transform: translateX(0); pointer-events: auto;
	}

	/* Le burger occupe TOUJOURS sa place à droite (espace réservé => pas de
	   décalage des boutons entre le repos et le scroll), et il entre par la
	   droite en glissant au scroll. */
	.cptsh__burger {
		display: inline-flex;
		opacity: 0; transform: translateX(28px); pointer-events: none;
		transition: opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1);
	}
	.cptsh-bar.is-scrolled .cptsh__burger {
		opacity: 1; transform: translateX(0); pointer-events: auto;
	}

	.cptsh-main {
		display: flex; flex-direction: column; align-items: center;
		gap: 16px; padding: 20px 24px 0;
	}
	.cptsh__brand { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
	.cptsh__logo { height: 180px; width: auto; display: block; }

	.cptsh__nav { display: block; width: 100%; }
	.cptsh-nav__list {
		list-style: none; margin: 0; padding: 0 !important;
		display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
		gap: 8px 30px;
	}
	.cptsh-nav__list > li { margin: 0; position: relative; list-style-type: none; }

	.cptsh-nav__list a {
		display: inline-block; padding: 6px 2px;
		font-family: 'Montserrat', system-ui, sans-serif;
		font-weight: 600; font-size: 16px; letter-spacing: .045em; text-transform: none;
		color: #234155; text-decoration: none; white-space: nowrap;
		transition: color .2s ease;
	}
	.cptsh-nav__list > li > a:hover, .current_page_item a {
		background: linear-gradient(135deg, #2f80c2, #2aa0ad, #A6C549, #E94E1B);
		-webkit-background-clip: text; background-clip: text; color: transparent;
	}
	.cptsh-nav__list .menu-item-has-children > a::after {
		content: "\25BE"; margin-left: 6px; font-size: .72em; vertical-align: middle;
	}

	/* Dropdown desktop (survol) */
	.cptsh-nav__list .sub-menu {
		list-style: none; margin: 0; padding: 8px 0;
		position: absolute; top: 100%; left: 50%;
		transform: translateX(-50%) translateY(8px);
		min-width: 230px; background: #fff;
		border-radius: 12px; box-shadow: 0 12px 34px rgba(35, 65, 85, .16);
		opacity: 0; visibility: hidden; pointer-events: none;
		transition: opacity .2s ease, transform .2s ease;
		z-index: 100;
	}
	.cptsh-nav__list > li.menu-item-has-children::after {
		content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px;
	}
	.cptsh-nav__list > li:hover > .sub-menu,
	.cptsh-nav__list > li:focus-within > .sub-menu {
		opacity: 1; visibility: visible; pointer-events: auto;
		transform: translateX(-50%) translateY(0);
	}
	.cptsh-nav__list .sub-menu li { margin: 0; }
	.cptsh-nav__list .sub-menu a {
		display: block; padding: 9px 20px; white-space: nowrap; text-align: left;
		font-size: 15px; font-weight: 600; letter-spacing: 0; color: #234155;
	}
	.cptsh-nav__list .sub-menu a:hover {
		background: rgba(132, 203, 213, .16);
		-webkit-background-clip: border-box; background-clip: border-box;
		-webkit-text-fill-color: #2aa0ad; color: #2aa0ad;
	}
	/* Page courante dans un sous-menu */
	.cptsh-nav__list .sub-menu .current-menu-item > a,
	.cptsh-nav__list .sub-menu .current_page_item > a {
		background: linear-gradient(135deg, #2f80c2, #2aa0ad, #A6C549, #E94E1B);
		-webkit-background-clip: text; background-clip: text;
		-webkit-text-fill-color: transparent; color: transparent;
	}
	/* Parent de 1er niveau actif */
	.cptsh-nav__list > li.current-menu-parent > a,
	.cptsh-nav__list > li.current-menu-ancestor > a,
	.cptsh-nav__list > li.current_page_parent > a,
	.cptsh-nav__list > li.current_page_ancestor > a {
		background: linear-gradient(135deg, #2f80c2, #2aa0ad, #A6C549, #E94E1B);
		-webkit-background-clip: text; background-clip: text;
		-webkit-text-fill-color: transparent; color: transparent;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cptsh__burger-grid, .cptsh-navmenu, .cptsh-navmenu__list li { transition: none !important; }
}