/* FTIDocs — styles front (liste, barre de filtre, pagination). Léger et autonome ; les couleurs et rayons
   sont exposés en variables CSS scopées à .ftidocs, surchargeables par le thème. */

/* Les contrôles de formulaire n'héritent pas la police par défaut : on force l'héritage. */
.ftidocs button,
.ftidocs input,
.ftidocs select,
.ftidocs textarea {
	font-family: inherit;
}

.ftidocs {
	font-family: Aptos, Helvetica, Arial, sans-serif;
	--ftidocs-primary: #3889ff;                                              /* bleu FTI (éléments actifs, focus) */
	--ftidocs-primary-wash: color-mix(in srgb, var(--ftidocs-primary) 5%, #fff); /* survol des pastilles */
	--ftidocs-navy: #123347;                                                /* bleu foncé : page courante + bouton */
	--ftidocs-text: #1f2933;
	--ftidocs-muted: #606775;
	--ftidocs-field-border: #c8c8c8;                                        /* bordure des champs / selects */
	--ftidocs-focus: rgba(56, 137, 255, .18);                               /* halo de focus (rgb du primary) */
	--ftidocs-badge-bg: #1668d0;                                            /* pastille catégorie : contraste ≈5,3:1 avec le texte blanc (conforme WCAG AA) */
	--ftidocs-radius: 5px;
}

/* Texte réservé aux technologies d'assistance (masqué visuellement, lu par les lecteurs d'écran). */
.ftidocs-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Liste classique : lignes empilées, séparées par un filet. <ul> sémantique → reset de la puce. */
.ftidocs-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ftidocs-row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 22px 0;
	border-bottom: 1px solid var(--ftidocs-field-border);
}
.ftidocs-row:first-child {
	border-top: 1px solid var(--ftidocs-field-border);
}

/* Icône de téléchargement à GAUCHE. Au repos : aucune pastille (filet transparent, pas de fond), l'icône
   bichrome est posée telle quelle. Au survol : un disque bleu très clair apparaît derrière l'icône
   (token brand-secondary-pale), bordé d'un filet brand-secondary plein. Le focus clavier ajoute
   en plus un contour net (accessibilité). Le filet est en border-box pour ne pas décaler la taille. */
.ftidocs-row__dl {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	border: 1px solid transparent;
	border-radius: 50%;
	background: transparent;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}
.ftidocs-row__dl:hover,
.ftidocs-row__dl:focus-visible {
	background: var(--brand-secondary-pale, #eef5ff);
	border-color: var(--brand-secondary, #3889ff);
}
.ftidocs-row__dl:focus-visible {
	outline: 2px solid var(--brand-secondary, #3889ff);
	outline-offset: 2px;
}
.ftidocs-row__icon {
	display: block;
	width: 32px;
	height: 32px;
	/* Épaisseur de trait définie dans le SVG (viewBox 32, stroke 2 = 2px à l'écran). */
}

/* Corps : grille sur desktop/tablette — titre/desc/méta en colonne 1, pastille en haut à droite (col 2). */
.ftidocs-row__body {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 30px;
	row-gap: 4px;
	align-items: start;
}
.ftidocs-row__title,
.ftidocs-row__desc,
.ftidocs-row__meta {
	grid-column: 1;
}

/* Titre : bleu primaire. Description : noir, en gras. Méta : gris. */
.ftidocs-row__title {
	margin: 0;
	font-size: 1.25rem;          /* desktop */
	font-weight: 700;
	line-height: 1.35;
	color: var(--ftidocs-text);
}
@media (max-width: 1024px) {    /* tablette */
	.ftidocs-row__title {
		font-size: 1.125rem;
	}
}
@media (max-width: 767px) {     /* mobile */
	.ftidocs-row__title {
		font-size: 1rem;
	}
}
.ftidocs-row__desc {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ftidocs-text);
}
.ftidocs-row__meta {
	margin: 0;
	font-size: .9375rem;
	color: var(--ftidocs-muted);
}

/* Pastille de catégorie : en haut à DROITE sur desktop/tablette (col 2, ligne 1) ; pilule pleine bleue,
   texte blanc, majuscules. Sur mobile, elle passe au-dessus du titre (cf. media query). */
.ftidocs-row__cats {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
}
.ftidocs-row__badge {
	padding: 4px 14px;
	border-radius: 999px;
	background: var(--ftidocs-badge-bg);
	color: #fff;
	font-size: .875rem;          /* desktop + tablette (14px) */
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
}
@media (max-width: 767px) {     /* mobile (12px) */
	.ftidocs-row__badge {
		font-size: .75rem;
	}
	/* Mobile : le corps repasse en colonne — la pastille (1er élément du corps) passe AU-DESSUS du titre,
	   qui récupère toute la largeur disponible. */
	.ftidocs-row__body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
	}
	.ftidocs-row__cats {
		justify-content: flex-start;
		margin-bottom: 8px;
	}
}

.ftidocs-empty {
	margin: 1rem 0;
	color: var(--ftidocs-muted);
}

/* Barre de filtre — libellé AU-DESSUS du contrôle. */
.ftidocs-filterbar {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

/* Libellé du dropdown. */
.ftidocs-filterbar__label {
	font-weight: 600;
	font-size: 0.9375rem;
}

/* Dropdown natif habillé (bordure #c8c8c8, rayon, halo de focus, chevron dessiné en data-URI). Aucune
   dépendance JS. */
.ftidocs-filterbar__select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 50%;              /* desktop + tablette */
	min-width: 0;
	min-height: 54px;
	padding: 12px 44px 12px 15px;
	border: 1px solid var(--ftidocs-field-border);
	border-radius: var(--ftidocs-radius);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231f2933' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 15px center;
	color: var(--ftidocs-text);
	font-size: 1.0625rem;
	line-height: 1.2;
	cursor: pointer;
}

.ftidocs-filterbar__select:focus,
.ftidocs-filterbar__select:focus-visible {
	outline: none;
	border-color: var(--ftidocs-primary);
	box-shadow: 0 0 0 3px var(--ftidocs-focus);
}

/* Spinner AJAX : voile clair posé pendant le rechargement. Sa géométrie est calculée puis posée en inline
   par le JS (pleine largeur de page, du haut de la barre au bas des résultats couverts). La liste en cours
   de rechargement s'atténue le temps de la requête. */
.ftidocs-result.is-loading .ftidocs-result__inner {
	opacity: .45;
	pointer-events: none;
}
/* Après pagination, le JS pose un focus technique sur le bloc rafraîchi (tabindex=-1) pour la continuité
   clavier/lecteur d'écran. Ce conteneur n'est pas un contrôle interactif : on masque l'anneau de focus qui
   apparaîtrait autour de toute la zone de résultats. */
.ftidocs-result:focus,
.ftidocs-result:focus-visible {
	outline: none;
}
.ftidocs-spinner {
	z-index: 900;
	background: rgba(255, 255, 255, .5);
	pointer-events: none;
}
/* Position du glyphe FIXE par rapport à la barre (jonction barre / liste). Le décalage vertical (top) est
   posé en inline par le JS ; le centrage horizontal et le calage sur la ligne se font ici par transform —
   le glyphe enfant garde sa propre transform (rotation). */
.ftidocs-spinner__pos {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
}
.ftidocs-spinner__glyph {
	display: block;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 8px solid var(--ftidocs-focus, rgba(56, 137, 255, .18));
	border-top-color: var(--ftidocs-primary, #3889ff);
	animation: ftidocs-spin .8s linear infinite;
}
@keyframes ftidocs-spin {
	to { transform: rotate(360deg); }
}
/* Préférence « mouvement réduit » : on calme la rotation. */
@media (prefers-reduced-motion: reduce) {
	.ftidocs-spinner__glyph {
		animation-duration: 1.6s;
	}
}

/* Bouton de filtre (repli sans JS uniquement, via <noscript>). */
.ftidocs-filterbar__submit {
	padding: .45rem .9rem;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
}

/* Pagination — pastilles rondes (page courante en bleu foncé). */
.ftidocs-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 50px;           /* marge plate, identique sur tous les devices. */
}

.ftidocs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 1px solid var(--ftidocs-field-border);
	border-radius: 50%;
	background: #fff;
	color: var(--ftidocs-text);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s;
}

.ftidocs-pagination a.page-numbers:hover,
.ftidocs-pagination a.page-numbers:focus-visible {
	background: var(--ftidocs-primary-wash);
	border-color: var(--ftidocs-primary);
	color: var(--ftidocs-primary);
}

.ftidocs-pagination .page-numbers.current {
	background: var(--ftidocs-navy);
	border-color: var(--ftidocs-navy);
	color: #fff;
}

.ftidocs-pagination .page-numbers.dots {
	width: 24px;
	border: 0;
	background: none;
	color: var(--ftidocs-muted);
}

/* Flèches préc./suiv. : SVG (20×20) posés en MASQUE — la couleur suit currentColor (donc les états
   survol/primaire de la pastille). Glyphes lucide arrow-left/right. */
.ftidocs-pagination__arrow {
	display: block;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
.ftidocs-pagination__arrow--prev {
	-webkit-mask-image: url(img/arrow-left.svg);
	mask-image: url(img/arrow-left.svg);
}
.ftidocs-pagination__arrow--next {
	-webkit-mask-image: url(img/arrow-right.svg);
	mask-image: url(img/arrow-right.svg);
}

@media (max-width: 767px) {
	.ftidocs-filterbar__select {
		width: 100%;
	}
	.ftidocs-pagination {
		gap: 6px;
	}
	.ftidocs-pagination .page-numbers {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}
	.ftidocs-pagination .page-numbers.dots {
		width: 16px;
	}
	.ftidocs-pagination__arrow {
		width: 18px;
		height: 18px;
	}

	/* Compacter la pagination : sur mobile, la série complète de pastilles passe sur deux lignes. On ne
	   garde donc que la page courante, ses deux voisines immédiates, les flèches préc./suiv. et les points
	   de troncature — l'ensemble tient sur une seule ligne. Les accès « première/dernière page » restent
	   joignables via les flèches et le défilement. */
	.ftidocs-pagination .page-numbers {
		display: none;
	}
	.ftidocs-pagination .prev,
	.ftidocs-pagination .next,
	.ftidocs-pagination .dots,
	.ftidocs-pagination .page-numbers.current,
	.ftidocs-pagination .page-numbers.current + .page-numbers,
	.ftidocs-pagination .page-numbers:has(+ .page-numbers.current) {
		display: inline-flex;
	}
}