/*
 * Bandeau météo AROME
 * Météo des Sucs
 */

		.weather-banner {
			position: relative;
			width: 100%;
			overflow: hidden;
			padding: 10px 0;
			background:
				rgba(7, 17, 25, 0.72);
			backdrop-filter: blur(10px);
		}

		.weather-banner::before,
		.weather-banner::after {
			position: absolute;
			z-index: 2;
			top: 0;
			bottom: 0;
			width: 70px;
			content: "";
			pointer-events: none;
		}

		.weather-banner::before {
			left: 0;
			background:
				linear-gradient(
					to right,
					#0b151e,
					transparent
				);
		}

		.weather-banner::after {
			right: 0;
			background:
				linear-gradient(
					to left,
					#0b151e,
					transparent
				);
		}

		.weather-banner-track {
			display: flex;
			width: max-content;
			align-items: center;
			gap: 22px;
			padding-left: 18px;
			animation:
				weatherBannerScroll
				150s
				linear
				infinite;
			will-change: transform;
		}

		.weather-banner:hover
		.weather-banner-track {
			animation-play-state: paused;
		}

		.weather-city {
			display: flex;
			flex: 0 0 auto;
			align-items: center;
			gap: 8px;
		}

		.weather-city-name {
			display: flex;
			width: 150px;
			flex: 0 0 150px;
			align-items: center;
			justify-content: flex-start;
			padding: 0 10px 0 4px;
			border: 0;
			border-radius: 0;
			background: transparent;
			text-align: left;
			font-size: 15px;
			font-weight: 600;
			line-height: 1.2;
			letter-spacing: 0.02em;
			white-space: nowrap;
		}

		.weather-period {
			display: grid;
			width: 155px;
			height: 72px;
			flex: 0 0 155px;
			grid-template-columns:
				minmax(0, 1fr)
				auto;
			grid-template-rows:
				16px
				1fr
				15px;
			column-gap: 8px;
			padding: 7px 12px;
			border:
				1px solid rgba(255, 255, 255, 0.12);
			border-radius: 12px;
			background:
				rgba(255, 255, 255, 0.045);
		}

		.weather-period.is-current {
			border-color:
				rgba(120, 255, 183, 0.4);
			background:
				rgba(71, 178, 118, 0.1);
		}

		.weather-period-label {
			grid-column: 1 / 3;
			overflow: hidden;
			color:
				rgba(255, 255, 255, 0.66);
			font-size: 10px;
			line-height: 14px;
			text-align: center;
			text-overflow: ellipsis;
			text-transform: uppercase;
			letter-spacing: 0.07em;
			white-space: nowrap;
		}

		.weather-temperature {
			display: flex;
			align-items: center;
			font-size: 23px;
			font-weight: 600;
			line-height: 1;
			white-space: nowrap;
		}

		.weather-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25px;
			line-height: 1;
		}

		.weather-details {
			grid-column: 1 / 3;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 14px;
			overflow: hidden;
			color:
				rgba(255, 255, 255, 0.68);
			font-size: 10px;
			line-height: 13px;
			white-space: nowrap;
		}

		.weather-message {
			padding: 35px;
			text-align: center;
			color:
				rgba(255, 255, 255, 0.75);
		}

		@keyframes weatherBannerScroll {
			from {
				transform: translateX(0);
			}

			to {
				transform: translateX(-50%);
			}
		}

		@media (max-width: 700px) {
			.weather-banner-track {
				gap: 18px;
				animation-duration: 95s;
			}

			.weather-city-name {
				width: 120px;
				flex-basis: 120px;
				font-size: 14px;
			}

			.weather-period {
				width: 140px;
				flex-basis: 140px;
				height: 70px;
				padding-right: 10px;
				padding-left: 10px;
			}
		}

		@media (prefers-reduced-motion: reduce) {
			.weather-banner-track {
				animation: none;
			}

			.weather-banner {
				overflow-x: auto;
			}
		}

		/* Version compacte proche du bandeau de référence */
		.weather-banner {
			padding: 5px 0;
		}

		.weather-banner-track {
			gap: 28px;
			padding-left: 12px;
		}

		.weather-city {
			gap: 10px;
		}

		.weather-city-name {
			width: 140px;
			flex-basis: 140px;
			padding: 0 10px 0 0;
			color: #ffd92f;
			font-size: 18px;
			font-weight: 700;
			text-transform: uppercase;
		}

		.weather-period {
			width: 240px;
			height: 50px;
			flex-basis: 240px;
			grid-template-columns:
				52px
				1fr
				auto;
			grid-template-rows:
				15px
				1fr;
			column-gap: 7px;
			padding: 5px 11px 6px;
			border-radius: 9px;
		}

		.weather-period-label {
			grid-column: 1 / 4;
			font-size: 10px;
			font-weight: 700;
			line-height: 12px;
		}

		.weather-temperature {
			grid-column: 1;
			grid-row: 2;
			font-size: 22px;
			font-weight: 700;
		}

		.weather-icon {
			grid-column: 3;
			grid-row: 2;
			font-size: 23px;
		}

		.weather-details {
			grid-column: 2;
			grid-row: 2;
			align-self: center;
			gap: 10px;
			font-size: 11px;
			line-height: 14px;
		}

		.weather-message {
			padding: 20px;
		}

		@media (max-width: 700px) {
			.weather-banner {
				padding: 4px 0;
			}

			.weather-city-name {
				width: 115px;
				flex-basis: 115px;
				font-size: 15px;
			}

			.weather-period {
				width: 210px;
				height: 48px;
				flex-basis: 210px;
			}
		}


		/* Nouvelle présentation compacte */
		.weather-banner-track {
			gap: 42px;
		}

		.weather-city {
			gap: 16px;
		}

		.weather-period {
			width: 245px;
			height: 50px;
			flex-basis: 245px;
			grid-template-columns:
				54px
				82px
				61px
				30px;
			grid-template-rows:
				15px
				1fr;
			column-gap: 4px;
			padding: 5px 8px 6px 10px;
		}

		.weather-period-label {
			grid-column: 1 / 4;
			grid-row: 1;
			font-family:
				"Poppins",
				Arial,
				sans-serif;
			font-size: 10px;
			font-weight: 600;
			line-height: 13px;
		}

		.weather-temperature {
			grid-column: 1;
			grid-row: 2;
			align-self: center;
			font-family:
				"Poppins",
				Arial,
				sans-serif;
			font-size: 22px;
			font-weight: 700;
		}

		.weather-feels-like {
			grid-column: 2;
			grid-row: 2;
			display: flex;
			align-items: center;
			gap: 4px;
			align-self: center;
			font-family:
				"Poppins",
				Arial,
				sans-serif;
			white-space: nowrap;
		}

		.weather-feels-label {
			color:
				rgba(255, 255, 255, 0.68);
			font-size: 10px;
			font-weight: 300;
		}

		.weather-feels-value {
			color:
				rgba(255, 255, 255, 0.92);
			font-size: 12px;
			font-weight: 300;
		}

		.weather-rain {
			grid-column: 3;
			grid-row: 2;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 3px;
			align-self: center;
			font-family:
				"Poppins",
				Arial,
				sans-serif;
			color: #6ec9ff;
			font-size: 15px;
			font-weight: 500;
			white-space: nowrap;
		}

		.weather-rain-drop {
			font-size: 16px;
			line-height: 1;
		}

		.weather-icon {
			grid-column: 4;
			grid-row: 1 / 3;
			align-self: stretch;
			justify-self: stretch;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			line-height: 1;
		}

		.weather-details {
			display: none;
		}

		@media (max-width: 700px) {
			.weather-banner-track {
				gap: 34px;
			}

			.weather-city {
				gap: 13px;
			}

			.weather-period {
				width: 225px;
				height: 48px;
				flex-basis: 225px;
				grid-template-columns:
					50px
					75px
					55px
					28px;
			}
		}


		/* Bulles raccourcies et icône légèrement débordante */
		.weather-city-name {
			color: rgba(255, 255, 255, 0.96);
		}

		.weather-period {
			position: relative;
			width: 210px;
			flex-basis: 210px;
			grid-template-columns:
				48px
				67px
				49px
				24px;
			column-gap: 3px;
			padding-right: 5px;
			padding-left: 9px;
			overflow: visible;
		}

		.weather-temperature {
			font-size: 21px;
		}

		.weather-feels-like {
			gap: 3px;
		}

		.weather-feels-label {
			font-size: 9px;
		}

		.weather-feels-value {
			font-size: 11px;
		}

		.weather-rain {
			gap: 2px;
			font-size: 14px;
		}

		.weather-rain-drop {
			font-size: 15px;
		}

		.weather-icon {
			position: relative;
			right: -3px;
			z-index: 2;
			width: 34px;
			font-size: 24px;
		}

		@media (max-width: 700px) {
			.weather-period {
				width: 198px;
				flex-basis: 198px;
				grid-template-columns:
					45px
					62px
					45px
					22px;
			}

			.weather-icon {
				right: -2px;
				font-size: 23px;
			}
		}


		/* Icône entièrement replacée dans la bulle */
		.weather-period {
			padding-right: 10px;
		}

		.weather-icon {
			position: static;
			right: auto;
			width: auto;
			min-width: 24px;
			margin: 0;
			padding: 0 2px 0 0;
			overflow: hidden;
			transform: none;
			justify-self: stretch;
		}

		@media (max-width: 700px) {
			.weather-icon {
				position: static;
				right: auto;
				width: auto;
				padding-right: 2px;
			}
		}


		/* Icône verrouillée à l'intérieur de la bulle */
		.weather-period {
			position: relative;
			overflow: hidden;
			padding-right: 42px;
		}

		.weather-period-label {
			grid-column: 1 / 4;
			padding-right: 0;
		}

		.weather-icon {
			position: absolute;
			top: 50%;
			right: 8px;
			width: 26px;
			height: 30px;
			min-width: 0;
			margin: 0;
			padding: 0;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
			line-height: 1;
			transform: translateY(-50%);
		}

		@media (max-width: 700px) {
			.weather-period {
				padding-right: 39px;
			}

			.weather-icon {
				right: 7px;
				width: 24px;
				height: 28px;
				font-size: 19px;
			}
		}


		/* Pluie rapprochée de la température ressentie */
		.weather-period {
			grid-template-columns:
				48px
				62px
				42px;
			column-gap: 1px;
		}

		.weather-feels-like {
			gap: 2px;
			padding-right: 0;
		}

		.weather-rain {
			justify-content: flex-start;
			gap: 1px;
			margin-left: -4px;
			padding: 0;
		}

		.weather-rain-drop {
			margin: 0;
			font-size: 15px;
		}

		@media (max-width: 700px) {
			.weather-period {
				grid-template-columns:
					45px
					59px
					40px;
				column-gap: 1px;
			}

			.weather-rain {
				margin-left: -4px;
			}
		}


		/* Noms de villes plus compacts, sur deux lignes si nécessaire */
		.weather-city-name {
			width: 125px;
			flex-basis: 125px;
			min-height: 0;
			padding: 0 8px 0 0;
			align-items: center;
			font-family:
				"Poppins",
				Arial,
				sans-serif;
			font-size: 13px;
			font-weight: 500;
			line-height: 1.08;
			white-space: normal;
			text-transform: uppercase;
		}

		.weather-city-name-line {
			display: block;
		}

		@media (max-width: 700px) {
			.weather-city-name {
				width: 108px;
				flex-basis: 108px;
				font-size: 12px;
				line-height: 1.08;
			}
		}


		/* Noms de villes rapprochés et alignés à droite */
		.weather-city {
			gap: 7px;
		}

		.weather-city-name {
			width: 118px;
			flex-basis: 118px;
			justify-content: flex-end;
			padding: 0 2px 0 0;
			text-align: right;
		}

		.weather-city-name > div {
			width: 100%;
			text-align: right;
		}

		@media (max-width: 700px) {
			.weather-city {
				gap: 6px;
			}

			.weather-city-name {
				width: 103px;
				flex-basis: 103px;
				padding-right: 1px;
			}
		}


		/* Centrage spécifique du Chambon-sur-Lignon */
		.weather-city-name.is-centered,
		.weather-city-name.is-centered > div {
			justify-content: center;
			text-align: center;
		}


		/* Craponne-sur-Arzon forcé sur une seule ligne */
		.weather-city-name.is-craponne {
			width: 155px;
			flex-basis: 155px;
			white-space: nowrap;
		}

		.weather-city-name.is-craponne > div {
			width: auto;
			white-space: nowrap;
		}

		@media (max-width: 700px) {
			.weather-city-name.is-craponne {
				width: 145px;
				flex-basis: 145px;
				font-size: 11px;
			}
		}


		/* Fond du bandeau aux couleurs du site */
		.weather-banner {
			background: #001f3f;
		}

		.weather-banner::before {
			background:
				linear-gradient(
					to right,
					#001f3f,
					transparent
				);
		}

		.weather-banner::after {
			background:
				linear-gradient(
					to left,
					#001f3f,
					transparent
				);
		}

		/* Période courante avec un effet blanc discret */
		.weather-period.is-current {
			border-color:
				rgba(255, 255, 255, 0.34);
			background:
				linear-gradient(
					135deg,
					rgba(255, 255, 255, 0.13),
					rgba(255, 255, 255, 0.055)
				);
			box-shadow:
				inset 0 1px 0
					rgba(255, 255, 255, 0.14),
				0 0 12px
					rgba(255, 255, 255, 0.045);
		}


		/* Lune blanche */
		.weather-icon-symbol {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
		}

		.weather-icon-symbol.is-white-moon {
			color: rgba(255, 255, 255, 0.96);
			font-size: 22px;
			font-weight: 500;
			text-shadow: 0 0 4px rgba(255, 255, 255, 0.10);
		}


		/* Représentation blanche du quartier lunaire */
		.moon-phase {
			position: relative;
			display: inline-block;
			width: 21px;
			height: 21px;
			flex: 0 0 21px;
			overflow: hidden;
			border:
				1px solid rgba(255, 255, 255, 0.78);
			border-radius: 50%;
			background: #fff;
			box-shadow:
				0 0 4px rgba(255, 255, 255, 0.14);
		}

		.moon-phase::after {
			position: absolute;
			content: "";
			border-radius: 50%;
			background: #001f3f;
		}

		/* Nouvelle lune */
		.moon-phase-new {
			background: #001f3f;
		}

		.moon-phase-new::after {
			display: none;
		}

		/* Premier croissant : lumière à droite */
		.moon-phase-waxing-crescent {
			background: #001f3f;
		}

		.moon-phase-waxing-crescent::after {
			top: 1px;
			right: 1px;
			width: 7px;
			height: 17px;
			background: #fff;
		}

		/* Premier quartier : moitié droite éclairée */
		.moon-phase-first-quarter {
			background:
				linear-gradient(
					to right,
					#001f3f 0 50%,
					#fff 50% 100%
				);
		}

		.moon-phase-first-quarter::after {
			display: none;
		}

		/* Gibbeuse croissante */
		.moon-phase-waxing-gibbous::after {
			top: 1px;
			left: -2px;
			width: 8px;
			height: 17px;
		}

		/* Pleine lune */
		.moon-phase-full::after {
			display: none;
		}

		/* Gibbeuse décroissante */
		.moon-phase-waning-gibbous::after {
			top: 1px;
			right: -2px;
			width: 8px;
			height: 17px;
		}

		/* Dernier quartier : moitié gauche éclairée */
		.moon-phase-last-quarter {
			background:
				linear-gradient(
					to right,
					#fff 0 50%,
					#001f3f 50% 100%
				);
		}

		.moon-phase-last-quarter::after {
			display: none;
		}

		/* Dernier croissant : lumière à gauche */
		.moon-phase-waning-crescent {
			background: #001f3f;
		}

		.moon-phase-waning-crescent::after {
			top: 1px;
			left: 1px;
			width: 7px;
			height: 17px;
			background: #fff;
		}


		/* Correction du dessin des phases de lune */
		.moon-phase {
			position: relative;
			display: inline-block;
			width: 20px;
			height: 20px;
			flex: 0 0 20px;
			overflow: hidden;
			border: 0;
			border-radius: 50%;
			background: #001f3f;
			box-shadow:
				0 0 4px rgba(255, 255, 255, 0.10);
		}

		.moon-phase::before,
		.moon-phase::after {
			position: absolute;
			content: "";
			border-radius: 50%;
		}

		/* Nouvelle lune */
		.moon-phase-new {
			background: #001f3f;
		}

		.moon-phase-new::before,
		.moon-phase-new::after {
			display: none;
		}

		/* Premier croissant : éclairé à droite */
		.moon-phase-waxing-crescent {
			background: #fff;
		}

		.moon-phase-waxing-crescent::before {
			top: 0;
			left: -4px;
			width: 20px;
			height: 20px;
			background: #001f3f;
		}

		.moon-phase-waxing-crescent::after {
			display: none;
		}

		/* Premier quartier : moitié droite éclairée */
		.moon-phase-first-quarter {
			background:
				linear-gradient(
					to right,
					#001f3f 0 50%,
					#fff 50% 100%
				);
		}

		.moon-phase-first-quarter::before,
		.moon-phase-first-quarter::after {
			display: none;
		}

		/* Gibbeuse croissante : majoritairement éclairée à droite */
		.moon-phase-waxing-gibbous {
			background: #fff;
		}

		.moon-phase-waxing-gibbous::before {
			top: 0;
			left: -10px;
			width: 20px;
			height: 20px;
			background: #001f3f;
		}

		.moon-phase-waxing-gibbous::after {
			display: none;
		}

		/* Pleine lune */
		.moon-phase-full {
			background: #fff;
		}

		.moon-phase-full::before,
		.moon-phase-full::after {
			display: none;
		}

		/* Gibbeuse décroissante : majoritairement éclairée à gauche */
		.moon-phase-waning-gibbous {
			background: #fff;
		}

		.moon-phase-waning-gibbous::before {
			top: 0;
			right: -10px;
			width: 20px;
			height: 20px;
			background: #001f3f;
		}

		.moon-phase-waning-gibbous::after {
			display: none;
		}

		/* Dernier quartier : moitié gauche éclairée */
		.moon-phase-last-quarter {
			background:
				linear-gradient(
					to right,
					#fff 0 50%,
					#001f3f 50% 100%
				);
		}

		.moon-phase-last-quarter::before,
		.moon-phase-last-quarter::after {
			display: none;
		}

		/* Dernier croissant : éclairé à gauche */
		.moon-phase-waning-crescent {
			background: #fff;
		}

		.moon-phase-waning-crescent::before {
			top: 0;
			right: -4px;
			width: 20px;
			height: 20px;
			background: #001f3f;
		}

		.moon-phase-waning-crescent::after {
			display: none;
		}


		/* Lune : partie non éclairée transparente */
		.moon-phase {
			position: relative;
			display: inline-block;
			width: 20px;
			height: 20px;
			flex: 0 0 20px;
			overflow: hidden;
			border: 0 !important;
			border-radius: 50%;
			background: transparent !important;
			box-shadow: none !important;
		}

		.moon-phase::before {
			position: absolute;
			inset: 0;
			content: "";
			border-radius: 50%;
			background: #fff;
		}

		.moon-phase::after {
			display: none !important;
		}

		/* Nouvelle lune */
		.moon-phase-new::before {
			display: none;
		}

		/* Premier croissant */
		.moon-phase-waxing-crescent::before {
			-webkit-mask:
				radial-gradient(
					circle at 78% 50%,
					#000 0 50%,
					transparent 51%
				);
			mask:
				radial-gradient(
					circle at 78% 50%,
					#000 0 50%,
					transparent 51%
				);
		}

		/* Premier quartier */
		.moon-phase-first-quarter::before {
			-webkit-mask:
				linear-gradient(
					to right,
					transparent 0 50%,
					#000 50% 100%
				);
			mask:
				linear-gradient(
					to right,
					transparent 0 50%,
					#000 50% 100%
				);
		}

		/* Gibbeuse croissante */
		.moon-phase-waxing-gibbous::before {
			-webkit-mask:
				radial-gradient(
					circle at 62% 50%,
					#000 0 50%,
					transparent 51%
				);
			mask:
				radial-gradient(
					circle at 62% 50%,
					#000 0 50%,
					transparent 51%
				);
		}

		/* Pleine lune */
		.moon-phase-full::before {
			-webkit-mask: none;
			mask: none;
		}

		/* Gibbeuse décroissante */
		.moon-phase-waning-gibbous::before {
			-webkit-mask:
				radial-gradient(
					circle at 38% 50%,
					#000 0 50%,
					transparent 51%
				);
			mask:
				radial-gradient(
					circle at 38% 50%,
					#000 0 50%,
					transparent 51%
				);
		}

		/* Dernier quartier */
		.moon-phase-last-quarter::before {
			-webkit-mask:
				linear-gradient(
					to right,
					#000 0 50%,
					transparent 50% 100%
				);
			mask:
				linear-gradient(
					to right,
					#000 0 50%,
					transparent 50% 100%
				);
		}

		/* Dernier croissant */
		.moon-phase-waning-crescent::before {
			-webkit-mask:
				radial-gradient(
					circle at 22% 50%,
					#000 0 50%,
					transparent 51%
				);
			mask:
				radial-gradient(
					circle at 22% 50%,
					#000 0 50%,
					transparent 51%
				);
		}

/* ==================================================
   VERSION COMPACTE DANS LA PAGE PRINCIPALE
   ================================================== */

#weather-banner-module {
	margin-top: 6px;
	overflow: hidden;
}

#weather-banner-module .weather-banner {
	min-height: 0;
	padding: 3px 0;
	border-top-color: rgba(255, 255, 255, 0.08);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

#weather-banner-module .weather-banner-track {
	gap: 12px;
	padding-left: 10px;
}

#weather-banner-module .weather-city {
	gap: 5px;
}

#weather-banner-module .weather-city-name {
	width: 105px;
	flex-basis: 105px;
	padding: 0 4px;
	font-size: 10px;
	line-height: 1.05;
}

#weather-banner-module
.weather-city-name.is-craponne {
	width: 125px;
	flex-basis: 125px;
	font-size: 9px;
}

#weather-banner-module .weather-period {
	width: 132px;
	height: 27px;
	flex-basis: 132px;
	grid-template-columns:
		minmax(0, 1fr)
		auto;
	grid-template-rows:
		8px
		1fr;
	column-gap: 4px;
	padding: 2px 5px;
	border-radius: 7px;
}

#weather-banner-module .weather-period-label {
	font-size: 7px;
	line-height: 8px;
}

#weather-banner-module .weather-temperature {
	font-size: 13px;
	line-height: 15px;
}

#weather-banner-module .weather-feels-like,
#weather-banner-module .weather-rain {
	font-size: 8px;
	line-height: 10px;
}

#weather-banner-module .weather-feels-label {
	font-size: 7px;
}

#weather-banner-module .weather-rain-drop {
	font-size: 8px;
}

#weather-banner-module .weather-icon {
	width: 18px;
	height: 18px;
	font-size: 15px;
}

#weather-banner-module .moon-phase {
	width: 15px;
	height: 15px;
	flex-basis: 15px;
}

#weather-banner-module .weather-message {
	min-height: 32px;
	padding: 8px;
	font-size: 11px;
}

@media (max-width: 700px) {
	#weather-banner-module .weather-period {
		width: 124px;
		height: 26px;
		flex-basis: 124px;
	}

	#weather-banner-module .weather-city-name {
		width: 96px;
		flex-basis: 96px;
		font-size: 9px;
	}
}
/* Bulles compactes : plus hautes et moins longues */
#weather-banner-module .weather-period {
	width: 150px;
	flex-basis: 150px;
	height: 34px;

	grid-template-columns:
		33px
		48px
		33px
		20px;

	grid-template-rows:
		10px
		21px;

	column-gap: 2px;

	padding:
		1px
		4px
		1px
		5px;
}

#weather-banner-module .weather-period-label {
	grid-column: 1 / 5;
	grid-row: 1;
	font-size: 7px;
	line-height: 9px;
}

#weather-banner-module .weather-temperature {
	font-size: 13px;
	line-height: 20px;
}

#weather-banner-module .weather-feels-like {
	gap: 1px;
}

#weather-banner-module .weather-feels-label {
	font-size: 7px;
}

#weather-banner-module .weather-feels-value {
	font-size: 8px;
}

#weather-banner-module .weather-rain {
	gap: 0;
	font-size: 8px;
}

#weather-banner-module .weather-rain-drop {
	font-size: 8px;
}

#weather-banner-module .weather-icon {
	width: 20px;
	height: 20px;
	min-width: 20px;
	font-size: 15px;
}

#weather-banner-module .moon-phase {
	width: 15px;
	height: 15px;
	flex-basis: 15px;
}

@media (max-width: 700px) {
	#weather-banner-module .weather-period {
		width: 146px;
		flex-basis: 146px;
		height: 33px;

		grid-template-columns:
			32px
			46px
			32px
			19px;
	}
}
/* Ressenti et pluie légèrement agrandis */
#weather-banner-module .weather-feels-label {
	font-size: 8px;
}

#weather-banner-module .weather-feels-value {
	font-size: 10px;
}

#weather-banner-module .weather-rain {
	gap: 1px;
	font-size: 10px;
}

#weather-banner-module .weather-rain-drop {
	font-size: 10px;
}

/* Espacement légèrement augmenté entre les bulles */
#weather-banner-module .weather-city {
	gap: 9px;
}

#weather-banner-module .weather-banner-track {
	gap: 18px;
}

@media (max-width: 700px) {
	#weather-banner-module .weather-city {
		gap: 8px;
	}

	#weather-banner-module .weather-banner-track {
		gap: 15px;
	}
}

/* Maintient le défilement du bandeau sur mobile */
@media (max-width: 700px) {
        .weather-banner:hover
        .weather-banner-track {
                animation-play-state: running;
        }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
        .weather-banner-track {
                animation:
                        weatherBannerScroll
                        95s
                        linear
                        infinite;
        }

        .weather-banner {
                overflow-x: hidden;
        }
}

/* Défilement forcé sur tous les appareils tactiles */
@media (hover: none), (pointer: coarse) {
        .weather-banner:hover
        .weather-banner-track,
        .weather-banner-track {
                animation:
                        weatherBannerScroll
                        95s
                        linear
                        infinite !important;
                animation-play-state: running !important;

                -webkit-animation:
                        weatherBannerScroll
                        95s
                        linear
                        infinite !important;
                -webkit-animation-play-state: running !important;
        }

        .weather-banner {
                overflow-x: hidden !important;
        }
}

@-webkit-keyframes weatherBannerScroll {
        from {
                -webkit-transform: translateX(0);
                transform: translateX(0);
        }

        to {
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        }
}

/* Fluidité renforcée pour Firefox mobile */
.weather-banner-track {
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        perspective: 1000px;
        will-change: transform;
}

@keyframes weatherBannerScroll {
        from {
                transform: translate3d(0, 0, 0);
        }

        to {
                transform: translate3d(-50%, 0, 0);
        }
}

@-webkit-keyframes weatherBannerScroll {
        from {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
        }

        to {
                -webkit-transform: translate3d(-50%, 0, 0);
                transform: translate3d(-50%, 0, 0);
        }
}

@media (hover: none), (pointer: coarse) {
        .weather-banner-track {
                animation-duration: 120s !important;
                transform: translate3d(0, 0, 0);
        }
}

/* Défilement mobile piloté par JavaScript */
@media (hover: none), (pointer: coarse) {
        .weather-banner-track {
                animation: none !important;
                -webkit-animation: none !important;
        }
}

/* Titre des bulles météo : bleu clair */
#weather-banner-module .weather-period-label {
    color: #7dd3fc;
    font-weight: 600;
    text-shadow: 0 0 5px rgba(125, 211, 252, 0.25);
}

/* Meteocons du bandeau météo */

#weather-banner-module .weather-icon .meteocon {
    display: block;
    width: 25px;
    height: 25px;
    max-width: none;
    object-fit: contain;
    transform-origin: center;
    position: relative;
    top: 2px;
}

@keyframes weatherIconSwing {
    0%,
    100% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }
}
/* Ressenti + pluie : 10 px vers la gauche */
#weather-banner-module .weather-feels-like,
#weather-banner-module .weather-rain {
    transform: translateX(-10px);
}