/* CTAB — Bandeau d'actualités
   Palette institutionnelle : #3F6731 (vert foncé), #6E9F33 (vert), #54B435 (vert vif) */

.ctab-nt {
	--ctab-nt-vert: #3F6731;
	--ctab-nt-vert-clair: #6E9F33;
	--ctab-nt-vert-vif: #54B435;
	--ctab-nt-fond: #F5F8FD;
	--ctab-nt-texte: #2F3A2A;
	--ctab-nt-label-fond: var(--ctab-nt-vert-clair);
	--ctab-nt-label-texte: #FFFFFF;
	--ctab-nt-bordure: transparent;
	--ctab-nt-hauteur: 44px;
	--ctab-nt-rayon: 0px;
	--ctab-nt-label-rayon: 999px;

	position: relative;
	width: 100%;
	background: var(--ctab-nt-fond);
	color: var(--ctab-nt-texte);
	border-radius: var(--ctab-nt-rayon);
	overflow: hidden;
	font-size: 15px;
	line-height: 1.4;
}

.ctab-nt__inner {
	display: flex;
	align-items: stretch;
	min-height: var(--ctab-nt-hauteur);
	max-width: 100%;
}

/* --- Libellé --- */
.ctab-nt__label {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: 6px 0 6px 10px;
	padding: 4px 14px;
	background: var(--ctab-nt-label-fond);
	color: var(--ctab-nt-label-texte);
	font-weight: 700;
	white-space: nowrap;
	border-radius: var(--ctab-nt-label-rayon);
	z-index: 2;
}

/* --- Zone défilante --- */
.ctab-nt__viewport {
	--ctab-nt-fondu: 22px;
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	margin-left: 10px;
	/* Le texte démarre après la zone de dégradé : sans ce décalage, les
	   premières lettres du titre seraient estompées par le masque. */
	padding-left: var(--ctab-nt-fondu);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ctab-nt-fondu), #000 calc(100% - var(--ctab-nt-fondu)), transparent 100%);
	        mask-image: linear-gradient(to right, transparent 0, #000 var(--ctab-nt-fondu), #000 calc(100% - var(--ctab-nt-fondu)), transparent 100%);
}

/* Modes séquentiels : le titre est immobile et rien ne sort par la gauche.
   On supprime donc le dégradé de gauche, qui n'aurait aucune utilité et
   ne ferait qu'abîmer la lecture du début de phrase. */
.ctab-nt--mode-slide-h .ctab-nt__viewport,
.ctab-nt--mode-slide-v .ctab-nt__viewport,
.ctab-nt--mode-fade .ctab-nt__viewport,
.ctab-nt--mode-type .ctab-nt__viewport {
	padding-left: 4px;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--ctab-nt-fondu)), transparent 100%);
	        mask-image: linear-gradient(to right, #000 calc(100% - var(--ctab-nt-fondu)), transparent 100%);
}

[dir="rtl"] .ctab-nt__viewport {
	margin-left: 0;
	margin-right: 10px;
	padding-left: 0;
	padding-right: var(--ctab-nt-fondu);
}

[dir="rtl"] .ctab-nt--mode-slide-h .ctab-nt__viewport,
[dir="rtl"] .ctab-nt--mode-slide-v .ctab-nt__viewport,
[dir="rtl"] .ctab-nt--mode-fade .ctab-nt__viewport,
[dir="rtl"] .ctab-nt--mode-type .ctab-nt__viewport {
	padding-right: 4px;
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--ctab-nt-fondu)), transparent 100%);
	        mask-image: linear-gradient(to left, #000 calc(100% - var(--ctab-nt-fondu)), transparent 100%);
}

.ctab-nt__track {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	height: 100%;
	will-change: transform;
}

.ctab-nt__item {
	display: flex;
	align-items: center;
	gap: .5em;
	white-space: nowrap;
	padding: 0 28px 0 0;
	margin: 0;
}

.ctab-nt__item::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 28px;
	border-radius: 50%;
	background: var(--ctab-nt-vert-clair);
	opacity: .55;
}

.ctab-nt__date {
	font-size: .85em;
	font-weight: 600;
	color: var(--ctab-nt-vert);
	opacity: .85;
}

/* --- Lien « toutes les actualités » --- */
.ctab-nt__all {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	color: inherit;
	text-decoration: none;
	border: 0;
}

.ctab-nt__chevron {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: .65;
	transition: opacity .2s, transform .2s;
}

.ctab-nt__all:hover .ctab-nt__chevron,
.ctab-nt__all:focus-visible .ctab-nt__chevron {
	opacity: 1;
	transform: rotate(-45deg) translate(2px, 2px);
}

.ctab-nt__all:focus-visible {
	outline: 2px solid var(--ctab-nt-vert);
	outline-offset: -3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   MODES D'ANIMATION
   ========================================================================== */

/* 1. Défilement continu — la piste est dupliquée par le script. */
.ctab-nt--mode-scroll .ctab-nt__track {
	animation: ctab-nt-defile var(--ctab-nt-duree, 60s) linear infinite;
}

@keyframes ctab-nt-defile {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

[dir="rtl"] .ctab-nt--mode-scroll .ctab-nt__track {
	animation-name: ctab-nt-defile-rtl;
}

@keyframes ctab-nt-defile-rtl {
	from { transform: translateX(0); }
	to   { transform: translateX(50%); }
}

.ctab-nt--pause.ctab-nt--mode-scroll:hover .ctab-nt__track,
.ctab-nt--pause.ctab-nt--mode-scroll:focus-within .ctab-nt__track {
	animation-play-state: paused;
}

/* 2 à 5. Modes séquentiels : un élément à la fois. */
.ctab-nt--mode-slide-h .ctab-nt__track,
.ctab-nt--mode-slide-v .ctab-nt__track,
.ctab-nt--mode-fade .ctab-nt__track,
.ctab-nt--mode-type .ctab-nt__track {
	display: block;
	position: relative;
	height: 100%;
}

.ctab-nt--mode-slide-h .ctab-nt__item,
.ctab-nt--mode-slide-v .ctab-nt__item,
.ctab-nt--mode-fade .ctab-nt__item,
.ctab-nt--mode-type .ctab-nt__item {
	position: absolute;
	inset: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ctab-nt--mode-slide-h .ctab-nt__item::after,
.ctab-nt--mode-slide-v .ctab-nt__item::after,
.ctab-nt--mode-fade .ctab-nt__item::after,
.ctab-nt--mode-type .ctab-nt__item::after {
	content: none;
}

.ctab-nt--mode-slide-h .ctab-nt__item.is-active,
.ctab-nt--mode-slide-v .ctab-nt__item.is-active,
.ctab-nt--mode-fade .ctab-nt__item.is-active,
.ctab-nt--mode-type .ctab-nt__item.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Glissement horizontal */
.ctab-nt--mode-slide-h .ctab-nt__item { transform: translateX(30px); transition: opacity .45s ease, transform .45s ease; }
.ctab-nt--mode-slide-h .ctab-nt__item.is-active { transform: translateX(0); }

/* Glissement vertical */
.ctab-nt--mode-slide-v .ctab-nt__item { transform: translateY(100%); transition: opacity .45s ease, transform .45s ease; }
.ctab-nt--mode-slide-v .ctab-nt__item.is-active { transform: translateY(0); }

/* Fondu */
.ctab-nt--mode-fade .ctab-nt__item { transition: opacity .6s ease; }

/* Machine à écrire */
.ctab-nt--mode-type .ctab-nt__item .ctab-nt__text::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	vertical-align: -2px;
	background: var(--ctab-nt-vert-clair);
	animation: ctab-nt-curseur .8s steps(1) infinite;
}

@keyframes ctab-nt-curseur {
	0%, 50%   { opacity: 1; }
	50.1%, 100% { opacity: 0; }
}

/* ==========================================================================
   THÈMES
   ========================================================================== */

/* 1. Classique */
.ctab-nt--classique {
	--ctab-nt-fond: #F5F8FD;
	border-top: 2px solid var(--ctab-nt-vert-clair);
	border-bottom: 2px solid var(--ctab-nt-vert-clair);
}

/* 2. Plein vert */
.ctab-nt--plein {
	--ctab-nt-fond: #6E9F33;
	--ctab-nt-texte: #FFFFFF;
	--ctab-nt-label-fond: #FFFFFF;
	--ctab-nt-label-texte: #3F6731;
}
.ctab-nt--plein .ctab-nt__date { color: rgba(255,255,255,.9); }
.ctab-nt--plein .ctab-nt__item::after { background: rgba(255,255,255,.7); }

/* 3. Contour */
.ctab-nt--contour {
	--ctab-nt-fond: #FFFFFF;
	--ctab-nt-label-fond: transparent;
	--ctab-nt-label-texte: var(--ctab-nt-vert);
	border: 2px solid var(--ctab-nt-vert-clair);
	--ctab-nt-rayon: 8px;
}
.ctab-nt--contour .ctab-nt__label {
	border: 2px solid var(--ctab-nt-vert-clair);
}

/* 4. Dégradé */
.ctab-nt--degrade {
	background: linear-gradient(135deg, #6E9F33 0%, #54B435 100%);
	--ctab-nt-texte: #FFFFFF;
	--ctab-nt-label-fond: rgba(255,255,255,.18);
	--ctab-nt-label-texte: #FFFFFF;
}
.ctab-nt--degrade .ctab-nt__date { color: rgba(255,255,255,.9); }
.ctab-nt--degrade .ctab-nt__item::after { background: rgba(255,255,255,.6); }
.ctab-nt--degrade .ctab-nt__label { backdrop-filter: blur(2px); }

/* 5. Sombre */
.ctab-nt--sombre {
	--ctab-nt-fond: #24291F;
	--ctab-nt-texte: #EDF2E6;
	--ctab-nt-label-fond: var(--ctab-nt-vert-vif);
	--ctab-nt-label-texte: #14180F;
}
.ctab-nt--sombre .ctab-nt__date { color: #A9CE7C; }

/* 6. Minimal */
.ctab-nt--minimal {
	--ctab-nt-fond: transparent;
	--ctab-nt-label-fond: transparent;
	--ctab-nt-label-texte: var(--ctab-nt-vert);
	border-bottom: 1px solid rgba(110,159,51,.35);
}
.ctab-nt--minimal .ctab-nt__label {
	padding-left: 0;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: .82em;
}

/* 7. Flèche */
.ctab-nt--fleche {
	--ctab-nt-fond: #EFF5E6;
	--ctab-nt-label-rayon: 0px;
}
.ctab-nt--fleche .ctab-nt__label {
	margin: 0;
	padding: 4px 26px 4px 16px;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.ctab-nt--fleche .ctab-nt__viewport { margin-left: 8px; }

/* 8. Pilule */
.ctab-nt--pilule {
	--ctab-nt-fond: #FFFFFF;
	--ctab-nt-rayon: 999px;
	box-shadow: 0 2px 10px rgba(63,103,49,.14);
	margin: 8px auto;
	width: calc(100% - 24px);
}

/* 9. Souligné */
.ctab-nt--souligne {
	--ctab-nt-fond: #FFFFFF;
	--ctab-nt-label-fond: transparent;
	--ctab-nt-label-texte: var(--ctab-nt-vert);
	--ctab-nt-label-rayon: 0px;
	border-bottom: 3px solid var(--ctab-nt-vert-clair);
}
.ctab-nt--souligne .ctab-nt__label {
	padding-left: 4px;
	border-bottom: 3px solid var(--ctab-nt-vert-vif);
	margin-bottom: 0;
	align-self: center;
}

/* 10. Contraste */
.ctab-nt--contraste {
	--ctab-nt-fond: #3F6731;
	--ctab-nt-texte: #FFFFFF;
	--ctab-nt-label-fond: #D7E8C2;
	--ctab-nt-label-texte: #2A4520;
}
.ctab-nt--contraste .ctab-nt__date { color: #CFE3B4; }
.ctab-nt--contraste .ctab-nt__item::after { background: rgba(255,255,255,.55); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 782px) {
	.ctab-nt { font-size: 14px; --ctab-nt-hauteur: 40px; }
	.ctab-nt__label { padding: 3px 10px; margin-left: 8px; }
	.ctab-nt__viewport { margin-left: 10px; }
	.ctab-nt__item { padding-right: 20px; }
	.ctab-nt__item::after { margin-left: 20px; }
}

@media (max-width: 480px) {
	.ctab-nt { font-size: 13px; --ctab-nt-hauteur: 36px; }
	.ctab-nt__label {
		font-size: 0;          /* on ne garde que la pastille */
		padding: 3px 8px;
		gap: 0;
	}
	.ctab-nt__label::before {
		content: "•";
		font-size: 16px;
		line-height: 1;
	}
	.ctab-nt--minimal .ctab-nt__label,
	.ctab-nt--souligne .ctab-nt__label { display: none; }
	.ctab-nt__all { width: 32px; }
	.ctab-nt--pilule { width: calc(100% - 12px); }
}

.ctab-nt--no-mobile {
	display: none;
}
@media (min-width: 783px) {
	.ctab-nt--no-mobile { display: block; }
}

/* ==========================================================================
   ACCESSIBILITÉ — respect de « réduire les animations »
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ctab-nt__track { animation: none !important; transform: none !important; }
	.ctab-nt__item { transition: none !important; transform: none !important; }
	.ctab-nt--mode-type .ctab-nt__text::after { animation: none; opacity: 0; }

	/* Les modes séquentiels affichent le premier élément, sans mouvement. */
	.ctab-nt--mode-slide-h .ctab-nt__item.is-active,
	.ctab-nt--mode-slide-v .ctab-nt__item.is-active,
	.ctab-nt--mode-fade .ctab-nt__item.is-active,
	.ctab-nt--mode-type .ctab-nt__item.is-active { opacity: 1; }

	/* Le défilement continu devient une liste défilable à la main. */
	.ctab-nt--mode-scroll .ctab-nt__viewport { overflow-x: auto; }
}