/**
 * Styles des widgets Elementor embarqués dans le thème FTI.
 *
 * Toutes les valeurs se branchent sur les variables du design system FTI (émises sur :root par le kit
 * Elementor). Chaque variable porte une valeur de repli pour garantir un rendu même hors contexte du kit.
 */

/* Méta d'article : catégories en pastilles. */
.fti-article-meta {
	font-family: var(--font-body, inherit);
}

.fti-article-meta__terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pastille identique à celle des documents (FTIDocs) : pilule pleine bleue, texte blanc, majuscules. */
.fti-article-meta__pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--ftidocs-badge-bg, #1668d0);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

/* Dégradation responsive : mobile 12px, comme sur les documents. */
@media (max-width: 767px) {
	.fti-article-meta__pill {
		font-size: 0.75rem;
	}
}

/* Barre de retour d'article (widget fti-news-backbar).
 * Le collage (position:sticky), le fond blanc et les gouttières sont portés par le conteneur du gabarit
 * qui accueille le widget ; celui-ci ne gère que la ligne (lien de retour + logo) et les fondus au
 * collage. La classe « is-stuck » est posee sur le wrapper du widget par l'IntersectionObserver
 * (assets/js/fti-news-backbar.js) au moment precis du collage — pas a l'entree dans le viewport. */

/* La barre remplit la hauteur posée sur son conteneur (réglage « Hauteur » d'Elementor, p. ex. 75px).
 * Le conteneur d'accueil est une flexbox verticale : le wrapper du widget doit donc grandir (flex-grow),
 * puis relayer la hauteur au conteneur de widget Elementor et à la barre via une chaîne flex — un simple
 * height:100% ne se résout pas à travers ces niveaux. En l'absence de hauteur définie sur le parent, tout
 * retombe sur la hauteur de contenu (padding-block ci-dessous). align-self couvre aussi le cas flex-ligne. */
.elementor-widget-fti-news-backbar {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	align-self: stretch;
}

/* Au collage, la barre doit passer DEVANT l'en-tête collant (z-index 999 dans style.css) plutôt que glisser
 * dessous. Le z-index est porté par l'élément réellement en position:sticky — le conteneur du gabarit, repéré
 * et marqué « fti-backbar-stickyhost » par le script. Il est au niveau racine (son parent .elementor-location-single
 * ne crée pas de contexte), donc il se compare directement à l'en-tête. 1001 : aligné sur la barre de la fiche
 * FTImmo. `!important` car Elementor pose son propre z-index (100) sur ce conteneur avec une priorité supérieure
 * (inline / sélecteur .elementor-element-xxxx). */
.fti-backbar-stickyhost {
	z-index: 1001 !important;
}

.elementor-widget-fti-news-backbar > .elementor-widget-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.fti-backbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	flex: 1 1 auto;
	padding-block: 8px;
	font-family: var(--font-body, inherit);
	border-bottom: 1px solid transparent;
	transition: border-color .4s ease;
}

/* Filet gris : revele en fondu a l'etat colle. */
.elementor-widget-fti-news-backbar.is-stuck .fti-backbar {
	border-bottom-color: var(--color-border-default, #d5dae0);
}

/* Lien « Retour a la liste » : toujours visible. */
.fti-backbar__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--brand-secondary, #3889ff);
	font-weight: 600;
	text-decoration: none;
	transition: color .2s ease;
}

.fti-backbar__back:hover,
.fti-backbar__back:focus-visible {
	color: var(--brand-primary, #123347);
}

/* Anneau de focus clavier visible (cohérent avec le bouton « Charger plus »). */
.fti-backbar__back:focus-visible {
	outline: 2px solid var(--brand-primary, #123347);
	outline-offset: 3px;
	border-radius: 2px;
}

.fti-backbar__arrow {
	flex: none;
	display: block;
}

/* Logo FTI : masque au repos, revele en fondu au collage (comportement FTImmo). */
.fti-backbar__logo {
	display: block;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

.fti-backbar__logo svg {
	display: block;
	height: 30px;
	width: auto;
}

.elementor-widget-fti-news-backbar.is-stuck .fti-backbar__logo {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.fti-backbar,
	.fti-backbar__logo,
	.fti-backbar__back {
		transition: none;
	}
}