/* ==========================================================
   RAYONS DE SOLEIL — À LA UNE
   ========================================================== */

.rds-alaune-banner {
	   position: relative;
   
	   display: flex;
	   align-items: center;
   
	   width: 100%;
   
	   /*
		* État fermé au chargement.
		*/
	   min-height: 0;
	   max-height: 0;
   
	   padding:
		   0 54px 0 20px;
   
	   background:
		   var(--theme-palette-color-7, #f7df6a);
   
	   color:
		   var(--theme-palette-color-5, #000);
   
	   overflow: hidden;
   
	   opacity: 0;
   
	   transform:
		   translateY(-14px);
   
	   transition:
		   max-height .32s
			   cubic-bezier(0.22, 1, 0.36, 1),
		   min-height .32s
			   cubic-bezier(0.22, 1, 0.36, 1),
		   padding-top .32s
			   cubic-bezier(0.22, 1, 0.36, 1),
		   padding-bottom .32s
			   cubic-bezier(0.22, 1, 0.36, 1),
		   opacity .22s ease,
		   transform .32s
			   cubic-bezier(0.22, 1, 0.36, 1);
   
	   z-index: 10000;
   }
   
   
   /*
	* Bandeau ouvert.
	*/
   .rds-alaune-banner.is-visible {
	   min-height: 44px;
	   max-height: 80px;
   
	   padding-top: 8px;
	   padding-bottom: 8px;
   
	   opacity: 1;
   
	   transform:
		   translateY(0);
   }


/* ==========================================================
   CONTENU
   ========================================================== */

.rds-alaune-banner__track {
	width: 100%;

	overflow: hidden;
}


.rds-alaune-banner__message {
	display: block;

	width: max-content;

	font-size: 15px;
	line-height: 1.3;

	white-space: nowrap;
	color: var(--theme-palette-color-4);
}


.rds-alaune-banner__link {
	margin-left: 18px;

	color: inherit !important;

	font-weight: 500;

	text-decoration: underline;
	text-decoration-color: var(--theme-palette-color-4);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}
.rds-alaune-banner__link:hover {
	text-decoration-color: var(--theme-palette-color-2);
}

/* ==========================================================
   FERMETURE
   ========================================================== */

.rds-alaune-banner__close {
	position: absolute;

	top: 50%;
	right: 16px;

	width: 30px;
	height: 30px;

	padding: 0;

	border: 0;

	background: transparent;

	color: inherit;

	font: inherit;
	font-size: 26px;
	font-weight: 400;
	line-height: 1;

	cursor: pointer;

	transform: translateY(-50%);
	
	border-radius: 50%;
	
	transition:
		background-color .2s ease,
		color .2s ease;
}
.rds-alaune-banner__close:hover,
.rds-alaune-banner__close:focus-visible {
	background: var(--theme-palette-color-5, #000);
	color: #fff;
}
span.rds-alaune-banner__separator{
	color: var(--theme-palette-color-1, #000);
	padding: 0 35px;
}
/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 689px) {

	.rds-alaune-banner {
		padding-left: 15px;
		padding-right: 48px;
	}
	
	
	.rds-alaune-banner.is-visible {
		min-height: 42px;
	}


	.rds-alaune-banner__message {
		font-size: 14px;
	}


	.rds-alaune-banner__close {
		right: 10px;
	}

}
/* ==========================================================
   ACCESSIBILITÉ — ANIMATIONS RÉDUITES
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

	.rds-alaune-banner {
		transition: none;
		transform: none;
	}

}