/**
 * En-tête — icônes Agenda et Météo, bulle de l'Agenda, icônes météo animées
 * (inc/entete-icones.php, js/entete-icones.js ; proposition validée le
 * 30/10/2026 : https://claude.ai/artifact/HGy9kghsK9MdzWC5P39Afe).
 * Couleurs reprises de la loupe (#searchBt) : blanc sur la photo de
 * l'accueil, gris foncé sur fond plein.
 */

/* ---- Icônes de l'en-tête ---- */

/* Espace entre l'Agenda, la Météo et la loupe (10 px de plus). */
.hSecondary > ul {
	gap: 1rem;
}

/* La température déborde à droite de l'icône météo : place pour elle. */
.hSecondary .hIcone-li--meteo {
	margin-right: 0.8rem;
}

/*
 * Le menu est centré sur toute la largeur et les icônes (.hSmsNav) sont
 * posées par-dessus à droite : de 1024 à 1599 px, « Boutique » les touchait
 * (juste au-dessus des paliers 1100 et 1280 px de css/style.css). Le menu
 * se décale à gauche et ses onglets se resserrent avec la largeur : au
 * moins 45 px avant les icônes, 50 px après le logo. Inchangé dès 1600 px.
 */
@media (min-width: 1024px) and (max-width: 1599px) {
	.hNav .mega-menu-wrap {
		margin-right: calc((1600px - 100vw) * 0.16);
	}

	.hNav .mega-menu > li {
		padding-left: clamp(0.6rem, calc((100vw - 1000px) / 14), 4rem);
		padding-right: clamp(0.6rem, calc((100vw - 1000px) / 14), 4rem);
	}
}

.hSecondary .hIcone {
	position: relative;
	display: grid;
	place-items: center;
	color: #2e2e2e;
	text-decoration: none;
	transition: color 0.15s ease;
}

.hSecondary .hIcone[hidden] {
	display: none;
}

.hSecondary .hIcone svg {
	stroke: currentColor;
	overflow: visible;
}

.hSecondary .hIcone:hover svg,
.hSecondary .hIcone:focus-visible svg {
	transform: scale(1.15);
}

.hSecondary .hIcone:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 4px;
}

/* Numéro du jour dans le calendrier (.hSecondary svg * ne remplit rien) */
.hSecondary svg .hIcone__jour {
	fill: currentColor;
	stroke: none;
	font: 700 8.5px/1 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Point orange : un grand événement est en cours */
.hIcone__point {
	position: absolute;
	top: -1px;
	right: -3px;
	width: 9px;
	height: 9px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #e8833a;
	transform: scale(0);
	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hIcone--encours:not(.hIcone--attend) .hIcone__point {
	transform: scale(1);
}

/* L'icône « avale » la bulle qui rentre */
.hIcone--gobe svg {
	animation: hIcone-gobe 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes hIcone-gobe {
	0% { transform: scale(1); }
	35% { transform: scale(1.32); }
	60% { transform: scale(0.9); }
	100% { transform: scale(1); }
}

/* Météo : icône du jour et température maximale */
.hIcone__met {
	display: block;
	line-height: 0;
}

.hIcone__met svg {
	width: 2.6rem;
	height: 2.6rem;
}

.hIcone--meteo .hIcone__temp {
	position: absolute;
	top: -0.6rem;
	left: 1.9rem;
	font: 700 1.1rem/1 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	letter-spacing: -0.02em;
	color: currentColor;
	white-space: nowrap;
}

/* Blanc sur la photo de l'accueil, comme la loupe */
.hFixed:not(.header-scrolled) .hIcone {
	transition: color 0.15s ease 0.3s;
}

.hFixed:not(.header-scrolled):hover .hIcone {
	transition: color 0.15s ease 0s;
}

.hFixed:not(.header-scrolled):not(:hover) .hIcone,
.hFixed:not(.header-scrolled):not(:hover) .hMeteoMobile {
	color: #fff;
}

.hFixed:not(.header-scrolled):not(:hover) .hSecondary .hIcone svg {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.hFixed.is-actif:not(.header-scrolled):not(:hover) .hIcone,
.hFixed.is-actif:not(.header-scrolled):not(:hover) .hMeteoMobile {
	color: #2e2e2e;
}

/* Mobile : la météo en pilule à côté du drapeau */
.hMeteoMobile {
	display: none;
}

@media only screen and (max-width: 767px) {
	.hSecondary > ul {
		gap: 0.6rem;
	}

	.hSecondary .hIcone-li--meteo {
		display: none;
	}

	.hMeteoMobile:not([hidden]) {
		position: absolute;
		top: calc(50% - 1.5rem);
		left: 4.6rem;
		z-index: 2;
		display: inline-flex;
		gap: 0.4rem;
		align-items: center;
		height: 3rem;
		padding: 0 1rem 0 0.6rem;
		border: 1px solid rgba(46, 46, 46, 0.25);
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.85);
		color: #2e2e2e;
		font: 700 1.3rem/1 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
		text-decoration: none;
	}

	.hFixed:not(.header-scrolled):not(:hover) .hMeteoMobile:not([hidden]) {
		border-color: rgba(255, 255, 255, 0.5);
		background: rgba(255, 255, 255, 0.16);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}

	.hMeteoMobile .hIcone__met svg {
		width: 2rem;
		height: 2rem;
		stroke: currentColor;
	}

	.hMeteoMobile .hIcone__temp {
		font: inherit;
	}
}

/* ---- Icônes météo animées ---- */

.met {
	overflow: visible;
}

.met .met-rayons {
	transform-origin: 12px 12px;
	animation: met-tourne 18s linear infinite;
}

.met .met-rayons--petit {
	transform-origin: 9px 8.5px;
}

.met .met-nuage {
	animation: met-derive 6s ease-in-out infinite;
}

.met .met-nuage--2 {
	animation-duration: 7.5s;
	animation-direction: reverse;
}

.met .met-goutte {
	animation: met-tombe 1.2s linear infinite;
}

.met .met-goutte:nth-of-type(2),
.met .met-flocon:nth-of-type(2) {
	animation-delay: 0.4s;
}

.met .met-goutte:nth-of-type(3),
.met .met-flocon:nth-of-type(3) {
	animation-delay: 0.8s;
}

.met .met-flocon {
	transform-box: fill-box;
	transform-origin: center;
	animation: met-flocon 2.4s linear infinite;
}

.met .met-eclair {
	animation: met-eclair 2.8s steps(1) infinite;
}

.met .met-brume {
	animation: met-brume 4s ease-in-out infinite;
}

.met .met-brume:nth-of-type(2) {
	animation-delay: -2s;
}

@keyframes met-tourne { to { transform: rotate(360deg); } }
@keyframes met-derive { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1.3px); } }
@keyframes met-tombe { 0% { transform: translateY(-2px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(5px); opacity: 0; } }
@keyframes met-flocon { 0% { transform: translateY(-2px) rotate(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(5px) rotate(90deg); opacity: 0; } }
@keyframes met-eclair { 0%, 62%, 70%, 100% { opacity: 1; } 64%, 68% { opacity: 0.15; } }
@keyframes met-brume { 0%, 100% { transform: translateX(-1.2px); } 50% { transform: translateX(1.2px); } }

/* ---- Bulle de l'Agenda (accueil) ---- */

.hBulle {
	position: fixed;
	z-index: 10005; /* au-dessus de l'en-tête (10000), sous les cookies et la recherche */
	width: 340px;
	border-radius: 14px;
	background: #fff;
	color: #0f2e2a;
	font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	text-align: left;
	box-shadow: 0 18px 40px rgba(6, 32, 28, 0.35), 0 2px 6px rgba(6, 32, 28, 0.2);
	transform-origin: var(--origine, 90% -20px);
}

.hBulle[hidden] {
	display: none;
}

/* Pont invisible entre l'icône et la bulle : la souris peut passer de
   l'une à l'autre sans la fermer. */
.hBulle::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}

.hBulle::before {
	content: "";
	position: absolute;
	top: -7px;
	left: calc(var(--fleche, 300px) - 7px);
	width: 14px;
	height: 14px;
	border-radius: 2px;
	background: #fff;
	transform: rotate(45deg);
}

.hBulle__lien {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	overflow: hidden;
	border-radius: 14px;
	color: inherit;
	text-decoration: none;
}

.hBulle__lien:focus-visible {
	outline: 3px solid #e8833a;
	outline-offset: 2px;
}

.hBulle__photo {
	min-height: 104px;
	background: linear-gradient(140deg, #3a9c92, #1f5c56) center / cover no-repeat;
}

.hBulle__texte {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 11px 34px 13px 14px;
}

.hBulle__sur {
	display: flex;
	gap: 6px;
	align-items: center;
	color: #2d7a72;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hBulle__sur--encours::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2fb36d;
	animation: hBulle-pouls 1.6s infinite;
}

@keyframes hBulle-pouls {
	0% { box-shadow: 0 0 0 0 rgba(47, 179, 109, 0.6); }
	70%, 100% { box-shadow: 0 0 0 7px rgba(47, 179, 109, 0); }
}

.hBulle__titre {
	color: #0f2e2a;
	font-family: 'DM Serif Display', Georgia, serif;
	font-size: 18px;
	line-height: 1.15;
}

.hBulle__lieu {
	color: #4a4a4a;
	font-size: 12px;
	line-height: 1.35;
}

.hBulle__voir {
	margin-top: 2px;
	color: #1f5c56;
	font-size: 12.5px;
	font-weight: 700;
}

.hBulle__lien:hover .hBulle__voir {
	text-decoration: underline;
}

/* Décompte : la bulle rentre quand la barre est vide ; arrêté au survol */
.hBulle__temps {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background: #e8833a;
	transform: scaleX(0);
	transform-origin: left;
}

.hBulle.is-ouvert .hBulle__temps {
	animation: hBulle-decompte 6s linear forwards;
	transform: scaleX(1);
}

/* Survol de l'icône ou de la bulle : pas de décompte, elle reste. */
.hBulle.is-survol .hBulle__temps {
	display: none;
}

@keyframes hBulle-decompte {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

.hBulle__fermer {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f2f5f4;
	color: #4a4a4a;
	font-size: 16px;
	line-height: 26px;
	cursor: pointer;
}

.hBulle__fermer:hover {
	background: #e3ecea;
}

.hBulle__fermer:focus-visible {
	outline: 2px solid #1f5c56;
	outline-offset: 1px;
}

/* Dès l'arrivée sur l'accueil (30/10/2026) : la bulle descend de l'icône
   en grandissant un peu (léger rebond), le texte suit ; après 6 s, elle
   remonte en rétrécissant vers l'icône, qui rebondit (.hIcone--gobe). */
.hBulle.is-ouvert {
	animation: hBulle-ouvre 0.45s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}

.hBulle.is-ouvert .hBulle__photo {
	animation: hBulle-apparait 0.3s 0.1s both;
}

.hBulle.is-ouvert .hBulle__texte {
	animation: hBulle-monte 0.32s 0.12s both;
}

.hBulle.is-ferme {
	animation: hBulle-ferme 0.34s cubic-bezier(0.55, 0, 0.75, 0.3) both;
}

@keyframes hBulle-ouvre {
	0% { opacity: 0; transform: translateY(-12px) scale(0.86); }
	100% { opacity: 1; transform: none; }
}

@keyframes hBulle-ferme {
	0% { opacity: 1; transform: none; }
	100% { opacity: 0; transform: translateY(-14px) scale(0.6); }
}

@keyframes hBulle-apparait { from { opacity: 0; } to { opacity: 1; } }
@keyframes hBulle-disparait { from { opacity: 1; } to { opacity: 0; } }
@keyframes hBulle-monte { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Moins d'animations demandées : fondu seul, icônes immobiles */
@media (prefers-reduced-motion: reduce) {
	.hBulle.is-ouvert,
	.hBulle.is-ouvert .hBulle__photo,
	.hBulle.is-ouvert .hBulle__texte {
		animation: hBulle-apparait 0.25s both;
	}

	.hBulle.is-ferme {
		animation: hBulle-disparait 0.25s both;
	}

	.met *,
	.hIcone--gobe svg,
	.hBulle__sur--encours::before {
		animation: none !important;
	}
}

@media only screen and (max-width: 767px) {
	.hBulle__titre {
		font-size: 17px;
	}
}