/*
 * Page unifiée des actes administratifs.
 *
 * La page vit dans un site construit avec Elementor, dont le kit et le thème
 * posent leurs propres couleurs sur les liens, les boutons et les cases — un
 * corail et un bleu ciel qui n'appartiennent pas à la charte SQY. Les règles
 * de ce fichier sont donc préfixées par `.sqy-actes` : c'est ce qui leur donne
 * le dessus, sans `!important`.
 *
 * Tout est exprimé en variables CSS : les couleurs se réaccordent ici, en un
 * seul endroit.
 */

.sqy-actes,
.sqy-fiche-page {
	--sqy-espace: 1rem;

	/*
	 * Palette relevée dans le kit Elementor du site, le 22 septembre : le bleu
	 * SQY de l'en-tête (#2D3785) et le bleu marine des aplats. Les textes
	 * secondaires tirent vers le bleu plutôt que vers le gris — la cliente l'a
	 * demandé, et un gris neutre à côté d'un bleu profond paraît sale. Le gris
	 * reste réservé aux mentions de second rang, comme la qualité du texte.
	 */
	--sqy-bleu: #2d3785;
	--sqy-marine: #1a2b63;
	--sqy-encre: var(--sqy-bleu);
	--sqy-accent: var(--sqy-bleu);
	--sqy-action: var(--sqy-bleu);
	--sqy-bordure: #d5daea;
	--sqy-filet: #eceff8;
	--sqy-fond-doux: #f5f6fb;
	--sqy-texte-doux: #4a5790;
	--sqy-gris: #6b7080;
	--sqy-rayon: 8px;
	--sqy-icone-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M7 0H1.5A1.5 1.5 0 0 0 0 1.5v11A1.5 1.5 0 0 0 1.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5L7 0zm0 1.8L10.2 5H7V1.8z'/%3E%3C/svg%3E");
	--sqy-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.4 0 6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E");

	/*
	 * Poppins partout, y compris là où Elementor pose sa variable par défaut
	 * (`--e-a-font-family`, qui vaut Roboto) : on la redéfinit plutôt que de
	 * compter sur le fait qu'aucun élément ne l'emploie.
	 */
	--e-a-font-family: Poppins, sans-serif;
	font-family: Poppins, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--sqy-encre);
}

/* Les titres héritent de la police du bloc, pas de celle des titres du kit
   (Inter). */
.sqy-actes :is(h1, h2, h3, h4, button, input, select, th, td),
.sqy-fiche-page :is(h1, h2, h3, h4) {
	font-family: inherit;
}

/* Réservé aux technologies d'assistance. Jamais `display: none` : cela
   retirerait le texte de l'arbre d'accessibilité, ce qu'on cherche à éviter. */
.sqy-actes .screen-reader-text,
.sqy-fiche-page .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Un élément marqué `hidden` le reste, quelle que soit la règle d'affichage
   qu'une autre classe lui donne. */
.sqy-actes [hidden] {
	display: none !important;
}

/* ── Barre de recherche ─────────────────────────────────────────────────── */

.sqy-actes__recherche {
	margin-bottom: 1.25rem;
}

.sqy-actes__label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: var(--sqy-bleu);
}

.sqy-actes__champ {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.sqy-actes__saisie {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
}

.sqy-actes__champ input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--sqy-bordure);
	border-radius: var(--sqy-rayon);
	color: var(--sqy-encre);
	font: inherit;
	font-size: 1rem;
}

.sqy-actes .sqy-actes__champ button {
	padding: 0.75rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--sqy-bleu);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.sqy-actes .sqy-actes__champ button:hover,
.sqy-actes .sqy-actes__champ button:focus-visible {
	background: var(--sqy-marine);
	color: #fff;
}

.sqy-actes__aide {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--sqy-texte-doux);
}

/* ── Suggestions pendant la saisie ──────────────────────────────────────── */

.sqy-actes__suggestions {
	position: absolute;
	z-index: 30;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 22rem;
	overflow-y: auto;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	border: 1px solid var(--sqy-marine);
	border-radius: var(--sqy-rayon);
	background: #fff;
	box-shadow: 0 8px 24px rgba(26, 43, 99, 0.14);
}

.sqy-actes__suggestion {
	display: block;
	padding: 0.55rem 0.75rem;
	border-radius: 6px;
	cursor: pointer;
}

.sqy-actes__suggestion:hover,
.sqy-actes__suggestion[aria-selected="true"] {
	background: var(--sqy-filet);
}

/* La sélection au clavier ne se lit pas qu'à la couleur (RGAA 3.1). */
.sqy-actes__suggestion[aria-selected="true"] {
	box-shadow: inset 3px 0 0 var(--sqy-bleu);
}

.sqy-actes__suggestion-titre {
	display: block;
	color: var(--sqy-bleu);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
}

.sqy-actes__suggestion-meta {
	display: block;
	margin-top: 0.15rem;
	color: var(--sqy-texte-doux);
	font-size: 0.8125rem;
}

/* ── Filtres : une rangée de menus au-dessus des résultats ─────────────── */

.sqy-actes__filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
}

/*
 * Sans JavaScript, les menus restent dépliés : chaque groupe s'affiche en
 * liste, sur toute la largeur. Le motif replié n'existe que quand le script
 * est là pour l'ouvrir.
 */
.sqy-actes__deroulant {
	flex: 1 1 100%;
}

.sqy-actes--js .sqy-actes__deroulant {
	position: relative;
	flex: 0 0 auto;
}

.sqy-actes .sqy-actes__declencheur,
.sqy-actes .sqy-actes__annee select {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.55rem 1rem;
	border: 1px solid var(--sqy-bordure);
	border-radius: 999px;
	background-color: #fff;
	color: var(--sqy-encre);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
}

.sqy-actes .sqy-actes__declencheur::after {
	content: "";
	width: 0.7em;
	height: 0.5em;
	background: currentColor;
	-webkit-mask: var(--sqy-chevron) center / contain no-repeat;
	mask: var(--sqy-chevron) center / contain no-repeat;
	transition: transform 0.15s ease;
}

.sqy-actes .sqy-actes__declencheur[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

.sqy-actes .sqy-actes__declencheur:hover,
.sqy-actes .sqy-actes__declencheur:focus-visible,
.sqy-actes .sqy-actes__declencheur[aria-expanded="true"],
.sqy-actes .sqy-actes__annee select:hover {
	border-color: var(--sqy-marine);
	background-color: #fff;
	color: var(--sqy-encre);
}

.sqy-actes__nombre {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--sqy-marine);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

.sqy-actes .sqy-actes__annee select {
	appearance: none;
	padding-right: 2.2rem;
	background-image: var(--sqy-chevron);
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.7em 0.5em;
}

.sqy-actes--js .sqy-actes__panneau {
	display: none;
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	min-width: 21rem;
	max-height: 24rem;
	overflow-y: auto;
	padding: 1rem 1.1rem 0.6rem;
	border: 1px solid var(--sqy-marine);
	border-radius: var(--sqy-rayon);
	background: #fff;
	box-shadow: 0 8px 24px rgba(26, 43, 99, 0.14);
}

.sqy-actes--js .est-ouvert .sqy-actes__panneau {
	display: block;
}

.sqy-actes__groupe {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.sqy-actes--js .sqy-actes__groupe {
	margin: 0;
}

/*
 * Le `fieldset` et sa `legend` restent — le §9.1 les exige pour qu'un lecteur
 * d'écran annonce « Type d'acte, groupe » avant d'énumérer les cases. Quand le
 * menu est replié derrière un bouton qui porte déjà ce nom, la légende n'est
 * plus affichée, mais elle reste lue.
 */
.sqy-actes__legende {
	padding: 0;
	margin-bottom: 0.85rem;
	color: var(--sqy-encre);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.sqy-actes--js .sqy-actes__legende {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sqy-actes__case {
	/*
	 * La case et son libellé sont frères dans le balisage — `for`/`id` les
	 * relie, ce qui vaut mieux qu'un `label` englobant pour les lecteurs
	 * d'écran. C'est donc au conteneur de les aligner.
	 */
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	margin-bottom: 0.6rem;
}

.sqy-actes__case label {
	display: flex;
	flex: 1 1 auto;
	justify-content: space-between;
	gap: 1rem;
	color: var(--sqy-encre);
	font-size: 0.9375rem;
	line-height: 1.35;
	cursor: pointer;
}

.sqy-actes .sqy-actes__case input {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin: 0;
	accent-color: var(--sqy-bleu);
}

.sqy-actes__case label:hover {
	text-decoration: underline;
}

.sqy-actes__compte {
	color: var(--sqy-texte-doux);
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.sqy-actes__plage {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.6rem 0.75rem;
	padding-bottom: 0.4rem;
}

.sqy-actes__plage label {
	font-size: 0.875rem;
	color: var(--sqy-texte-doux);
}

.sqy-actes__plage input {
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--sqy-bordure);
	border-radius: var(--sqy-rayon);
	background: #fff;
	color: var(--sqy-encre);
	font: inherit;
	font-size: 0.9375rem;
}

.sqy-actes .sqy-actes__appliquer {
	min-height: 2.75rem;
	padding: 0.55rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--sqy-marine);
	color: #fff;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.sqy-actes .sqy-actes__appliquer:hover,
.sqy-actes .sqy-actes__appliquer:focus-visible {
	background: var(--sqy-bleu);
	color: #fff;
}

/* ── Messages ───────────────────────────────────────────────────────────── */

.sqy-actes__incident {
	margin: 0 0 var(--sqy-espace);
	padding: 0.85rem 1rem;
	border-left: 4px solid var(--sqy-bleu);
	border-radius: 0 var(--sqy-rayon) var(--sqy-rayon) 0;
	background: var(--sqy-fond-doux);
	color: var(--sqy-encre);
	font-size: 0.9375rem;
}

.sqy-actes .sqy-actes__incident a {
	color: var(--sqy-bleu);
	font-weight: 600;
	text-decoration: underline;
}

.sqy-actes__compteur {
	margin: 0 0 1.25rem;
	color: var(--sqy-encre);
	font-size: 1.25rem;
	font-weight: 400;
}

.sqy-actes__compteur strong {
	font-weight: 700;
}

.sqy-actes__pour {
	color: var(--sqy-texte-doux);
	font-weight: 400;
}

.sqy-actes__actifs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 var(--sqy-espace);
	padding: 0;
	list-style: none;
}

.sqy-actes .sqy-actes__puce,
.sqy-actes .sqy-actes__reinit {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.25rem 0.7rem;
	border: 1px solid var(--sqy-bordure);
	border-radius: 999px;
	background: var(--sqy-fond-doux);
	color: var(--sqy-encre);
	font-size: 0.875rem;
	text-decoration: none;
}

.sqy-actes .sqy-actes__puce:hover {
	border-color: var(--sqy-marine);
}

.sqy-actes .sqy-actes__reinit {
	border-style: dashed;
	background: transparent;
}

/* ── Tableau ────────────────────────────────────────────────────────────── */

/*
 * ┌──────────────────────────────────────────────────────────────────────────┐
 * │  UN TABLEAU SÉMANTIQUE N'EST PAS OBLIGÉ D'AVOIR L'AIR D'UN TABLEUR.     │
 * │                                                                          │
 * │  Le §9.1 exige un vrai `<table>` — un lecteur d'écran annonce            │
 * │  « colonne Date, ligne 3 sur 20 » sur un tableau et rien du tout sur des │
 * │  `<div>`. Cette exigence porte sur la STRUCTURE, pas sur le quadrillage. │
 * │                                                                          │
 * │  Le tableau est encadré d'un filet bleu marine aux angles arrondis, son  │
 * │  en-tête sur fond bleu foncé : c'est la demande de la cliente. Les       │
 * │  angles arrondis supposent `border-collapse: separate` — en mode fusion, │
 * │  `border-radius` est ignoré.                                             │
 * └──────────────────────────────────────────────────────────────────────────┘
 */
.sqy-actes__tableau {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--sqy-marine);
	border-radius: var(--sqy-rayon);
	overflow: hidden;
	font-size: 0.9375rem;

	/*
	 * Largeurs fixes, sinon le navigateur répartit selon le contenu : la date
	 * et le type, courts et insécables, prenaient leur aise pendant que
	 * l'intitulé — la seule colonne qu'on lit vraiment — se retrouvait
	 * étranglé.
	 */
	table-layout: fixed;
}

/*
 * En pourcentages, et non en `rem` : un pourcentage s'adapte, quelle que soit
 * la largeur que le gabarit du site accorde.
 */
.sqy-actes__tableau th:nth-child(1),
.sqy-actes__tableau td:nth-child(1) { width: 14%; }

.sqy-actes__tableau th:nth-child(2),
.sqy-actes__tableau td:nth-child(2) { width: 17%; }

.sqy-actes__tableau th:nth-child(3),
.sqy-actes__tableau td:nth-child(3) { width: 37%; }

.sqy-actes__tableau th:nth-child(4),
.sqy-actes__tableau td:nth-child(4) { width: 14%; }

.sqy-actes__tableau th:nth-child(5),
.sqy-actes__tableau td:nth-child(5) { width: 18%; }

.sqy-actes .sqy-actes__tableau th,
.sqy-actes .sqy-actes__tableau td {
	/*
	 * Les bordures latérales sont remises à zéro explicitement : le thème du
	 * site pose `border: 1px` sur toutes les cellules de tableau.
	 */
	border: 0;
	border-bottom: 1px solid var(--sqy-filet);
	padding: 0.9rem 0.75rem;
	background: none;
	color: var(--sqy-encre);
	text-align: left;
	vertical-align: top;
}

.sqy-actes .sqy-actes__tableau tbody tr:last-child th,
.sqy-actes .sqy-actes__tableau tbody tr:last-child td {
	border-bottom: 0;
}

.sqy-actes .sqy-actes__tableau thead th {
	padding-top: 0.8rem;
	padding-bottom: 0.8rem;
	border: 0;
	background: var(--sqy-marine);
	vertical-align: middle;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.sqy-actes .sqy-actes__tableau thead .sqy-actes__tri {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: #fff;
	/* Le kit Elementor donne sa propre taille aux liens : l'en-tête triable
	   paraissait plus gros que ses voisins. */
	font: inherit;
	text-decoration: none;
}

.sqy-actes .sqy-actes__tableau thead .sqy-actes__tri:hover {
	text-decoration: underline;
}

.sqy-actes .sqy-actes__tableau thead a:focus-visible {
	outline-color: #fff;
}

.sqy-actes__tableau tbody tr {
	transition: background-color 0.12s ease;
}

.sqy-actes .sqy-actes__tableau tbody tr:hover > * {
	background: var(--sqy-fond-doux);
}

.sqy-actes .sqy-actes__tableau tbody th {
	font-weight: 400;
}

/* Date, type, document : trois cartouches de même gabarit. */
.sqy-actes__date,
.sqy-actes__type,
.sqy-actes .sqy-actes__pdf {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	max-width: 100%;
	padding: 0.2rem 0.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--sqy-filet);
	color: var(--sqy-marine);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
}

/* La date ne se coupe jamais en deux lignes : « 11 Août » puis « 2023 » se
   lit comme deux informations alors que c'en est une. */
.sqy-actes__date {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.sqy-actes__type {
	background: var(--sqy-marine);
	color: #fff;
}

/*
 * Tous les types au même gabarit : pleine largeur de colonne, hauteur de deux
 * lignes. « Arrêtés » et « Délibérations réglementaires » ont ainsi le même
 * cartouche ; sans cela, les libellés longs passaient sur deux lignes et
 * formaient un bloc deux fois plus gros que leurs voisins.
 */
.sqy-actes__tableau .sqy-actes__type {
	display: flex;
	justify-content: center;
	width: 100%;
	min-height: calc(2 * 1.3em + 0.4rem);
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	text-align: center;
}

.sqy-actes .sqy-actes__titre {
	display: block;
	max-width: 50ch;
	color: var(--sqy-bleu);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	text-underline-offset: 0.18em;
}

.sqy-actes .sqy-actes__titre:hover,
.sqy-actes .sqy-actes__titre:focus-visible {
	color: var(--sqy-marine);
	text-decoration: underline;
}

.sqy-actes__extrait {
	display: block;
	max-width: 62ch;
	margin-top: 0.4rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--sqy-texte-doux);
}

.sqy-actes__extrait mark {
	padding: 0.05em 0.2em;
	border-radius: 3px;
	background: #fdf0b5;
	color: inherit;
	font-weight: 600;
}

.sqy-actes .sqy-actes__origine {
	color: var(--sqy-texte-doux);
	font-size: 0.875rem;
}

/* Le téléchargement est une action : son cartouche réagit au survol. */
.sqy-actes .sqy-actes__pdf {
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.sqy-actes .sqy-actes__pdf::before {
	content: "";
	width: 0.85em;
	height: 1em;
	background: currentColor;
	/* Feuille cornée : dessinée en masque, donc sans requête ni image. */
	-webkit-mask: var(--sqy-icone-doc) center / contain no-repeat;
	mask: var(--sqy-icone-doc) center / contain no-repeat;
	flex: none;
}

.sqy-actes .sqy-actes__pdf:hover,
.sqy-actes .sqy-actes__pdf:focus-visible {
	background: var(--sqy-marine);
	color: #fff;
}

.sqy-actes__poids {
	font-size: 0.6875rem;
	font-weight: 400;
	opacity: 0.85;
}

/* ── Vide et pagination ─────────────────────────────────────────────────── */

.sqy-actes__vide {
	padding: var(--sqy-espace);
	border: 1px dashed var(--sqy-bordure);
	border-radius: var(--sqy-rayon);
	background: var(--sqy-fond-doux);
}

.sqy-actes__vide p { margin: 0 0 0.5rem; }
.sqy-actes__vide p:last-child { margin-bottom: 0; }

.sqy-actes .sqy-actes__vide a {
	color: var(--sqy-bleu);
	text-decoration: underline;
}

.sqy-actes__note {
	font-size: 0.875rem;
	color: var(--sqy-texte-doux);
}

.sqy-actes__pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: var(--sqy-espace) 0 0;
	padding: 0;
	list-style: none;
}

.sqy-actes .sqy-actes__pagination a,
.sqy-actes .sqy-actes__pagination span {
	display: inline-block;
	min-width: 2.25rem;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--sqy-bordure);
	border-radius: 999px;
	color: var(--sqy-encre);
	text-align: center;
	text-decoration: none;
	font-size: 0.9375rem;
}

.sqy-actes .sqy-actes__pagination a:hover {
	border-color: var(--sqy-marine);
}

.sqy-actes .sqy-actes__pagination [aria-current="page"] {
	background: var(--sqy-marine);
	border-color: var(--sqy-marine);
	color: #fff;
	font-weight: 700;
}

/* ── Focus visible, sans exception ──────────────────────────────────────── */

.sqy-actes a:focus-visible,
.sqy-actes button:focus-visible,
.sqy-actes input:focus-visible,
.sqy-actes select:focus-visible {
	outline: 3px solid var(--sqy-accent);
	outline-offset: 2px;
}

/* ── Chargement ─────────────────────────────────────────────────────────── */

.sqy-actes__resultats[aria-busy="true"] {
	opacity: 0.55;
	transition: opacity 0.15s;
}

/* ── Mobile : le tableau devient des cartes ─────────────────────────────── */

@media (max-width: 782px) {
	.sqy-actes--js .sqy-actes__deroulant {
		flex: 1 1 100%;
	}

	.sqy-actes .sqy-actes__declencheur {
		width: 100%;
		justify-content: space-between;
	}

	/* Sur un écran étroit, le panneau se déplie dans le flux et pousse la
	   suite vers le bas, plutôt que de flotter par-dessus. */
	.sqy-actes--js .sqy-actes__panneau {
		position: static;
		min-width: 0;
		margin-top: 0.4rem;
		box-shadow: none;
	}

	.sqy-actes .sqy-actes__tableau thead {
		/* Retiré de l'affichage ET de l'arbre d'accessibilité : en disposition
		   par cartes, les libellés sont repris sur chaque cellule. */
		display: none;
	}

	.sqy-actes__tableau,
	.sqy-actes__tableau tbody,
	.sqy-actes__tableau tr,
	.sqy-actes__tableau th,
	.sqy-actes__tableau td {
		display: block;
	}

	.sqy-actes .sqy-actes__tableau {
		table-layout: auto;
		border: 0;
		overflow: visible;
	}

	.sqy-actes__tableau th,
	.sqy-actes__tableau td {
		width: auto !important;
	}

	.sqy-actes__tableau tr {
		margin-bottom: var(--sqy-espace);
		border: 1px solid var(--sqy-bordure);
		border-radius: var(--sqy-rayon);
		padding: 1rem;
	}

	.sqy-actes .sqy-actes__tableau tbody tr:hover > * {
		background: transparent;
	}

	.sqy-actes .sqy-actes__tableau th,
	.sqy-actes .sqy-actes__tableau td {
		border-bottom: 0;
		padding: 0.3rem 0;
	}

	/* En carte, le type redevient un cartouche à sa mesure. */
	.sqy-actes__tableau .sqy-actes__type {
		display: inline-flex;
		width: auto;
		min-height: 0;
	}

	.sqy-actes__tableau td[data-libelle]::before {
		content: attr(data-libelle) " : ";
		font-weight: 700;
		font-size: 0.8125rem;
	}
}

/* ── Fiche d'un acte ─────────────────────────────────────────────────────── */

/*
 * Le titre et le corps partagent la même colonne. Le gabarit du thème pose le
 * titre pleine largeur ; sans cette contrainte commune, l'un commence au bord
 * de l'écran et l'autre au tiers de la page.
 */
.sqy-fiche-page {
	max-width: 48rem;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

.sqy-fiche-page .sqy-fiche-page__titre {
	margin: 0 0 1.75rem;
	color: var(--sqy-bleu);
	font-family: inherit;
	font-weight: 600;
	line-height: 1.2;
}

.sqy-fiche {
	max-width: none;
	margin: 0;
}

.sqy-fiche__resume {
	font-size: 1.125rem;
	line-height: 1.6;
	margin: 0 0 1.5rem;
	padding-left: 1rem;
	border-left: 3px solid var(--sqy-bleu);
}

/* Le cartouche reprend l'encadré du tableau de recherche : filet bleu marine,
   angles arrondis. Les libellés sont petits, les valeurs portent le regard. */
.sqy-fiche__identite {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: 1rem 1.5rem;
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--sqy-marine);
	border-radius: var(--sqy-rayon);
	background: var(--sqy-fond-doux);
}

.sqy-fiche__identite dt {
	margin: 0 0 0.2rem;
	color: var(--sqy-texte-doux);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.sqy-fiche__identite dd {
	margin: 0;
	color: var(--sqy-marine);
	font-weight: 500;
}

.sqy-fiche__document {
	margin: 0 0 2rem;
}

.sqy-fiche__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.5rem;
}

/* Même cartouche que le document dans le tableau de recherche, en plus grand. */
.sqy-fiche-page .sqy-fiche__telecharger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background: var(--sqy-filet);
	color: var(--sqy-marine);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.sqy-fiche-page .sqy-fiche__telecharger::before {
	content: "";
	width: 0.85em;
	height: 1em;
	background: currentColor;
	-webkit-mask: var(--sqy-icone-doc) center / contain no-repeat;
	mask: var(--sqy-icone-doc) center / contain no-repeat;
	flex: none;
}

.sqy-fiche-page .sqy-fiche__telecharger:hover,
.sqy-fiche-page .sqy-fiche__telecharger:focus-visible {
	background: var(--sqy-marine);
	color: #fff;
}

.sqy-fiche__poids {
	font-size: 0.8125rem;
	font-weight: 400;
	opacity: 0.85;
}

.sqy-fiche-page .sqy-fiche__lire {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 0.4rem;
	color: var(--sqy-bleu);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sqy-fiche__fleche {
	display: inline-block;
	transition: transform 0.15s ease;
}

.sqy-fiche__lire:hover .sqy-fiche__fleche {
	transform: translateY(2px);
}

.sqy-fiche-page a:focus-visible,
.sqy-fiche-page summary:focus-visible {
	outline: 3px solid var(--sqy-bleu);
	outline-offset: 2px;
}

.sqy-fiche__texte {
	border-top: 1px solid var(--sqy-bordure);
	padding-top: 1.5rem;
}

.sqy-fiche__texte h2 {
	color: var(--sqy-bleu);
	font-family: inherit;
}

/* Mention de second rang : petite, grise, en italique. */
.sqy-fiche__avertissement,
.sqy-fiche__qualite {
	margin: 0 0 1rem;
	color: var(--sqy-gris);
	font-size: 0.8125rem;
	font-style: italic;
}

.sqy-fiche__accordeon {
	border: 1px solid var(--sqy-marine);
	border-radius: var(--sqy-rayon);
}

.sqy-fiche__accordeon > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1.1rem;
	border-radius: var(--sqy-rayon);
	color: var(--sqy-marine);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.sqy-fiche__accordeon > summary::-webkit-details-marker {
	display: none;
}

.sqy-fiche__accordeon > summary::after {
	content: "";
	width: 0.75em;
	height: 0.5em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--sqy-chevron) center / contain no-repeat;
	mask: var(--sqy-chevron) center / contain no-repeat;
	transition: transform 0.15s ease;
}

.sqy-fiche__accordeon[open] > summary {
	border-bottom: 1px solid var(--sqy-bordure);
	border-radius: var(--sqy-rayon) var(--sqy-rayon) 0 0;
}

.sqy-fiche__accordeon[open] > summary::after {
	transform: rotate(180deg);
}

.sqy-fiche__accordeon > summary:hover {
	background: var(--sqy-fond-doux);
}

.sqy-fiche__transcription {
	padding: 1.25rem 1.1rem 0.5rem;
	line-height: 1.7;
}

.sqy-fiche__transcription p {
	margin: 0 0 1rem;
}

/* ── Version accessible d'un document (RGAA 13.3 / 13.4) ─────────────────── */

/* Dans le tableau de recherche : petite mention grise, en italique. */
.sqy-actes__acces {
	display: block;
	margin-top: 0.35rem;
	color: var(--sqy-gris);
	font-size: 0.75rem;
	font-style: italic;
	line-height: 1.3;
}

.sqy-actes__acces--absent {
	font-weight: 600;
}

/* Le seul état qui engage un agent, et non un outil. */
.sqy-actes__acces--verifie {
	font-weight: 600;
	color: #1d5c3c;
}

/*
 * La transcription reçoit le focus quand on arrive par l'ancre : sans cela,
 * un lecteur d'écran suit le lien et continue de lire là où il était.
 */
.sqy-fiche__texte h2:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.sqy-fiche__ampleur {
	font-size: 0.9rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

/* ── Tableaux de la transcription (RGAA 5.6, 5.7 et 10.11) ───────────────── */

/*
 * Un état budgétaire compte jusqu'à huit colonnes. Le débordement est confié
 * au conteneur, jamais à la page : au RGAA 10.11, un contenu qui force le
 * défilement horizontal du document est un échec.
 */
.sqy-fiche__tableau {
	overflow-x: auto;
	/*
	 * Sans cette contrainte, le conteneur s'élargit à son contenu au lieu de
	 * le faire défiler, et c'est la page entière qui part en travers.
	 */
	max-width: 100%;
	min-width: 0;
	margin: 0 0 1.5rem;
	border: 1px solid var(--sqy-bordure);
	border-radius: var(--sqy-rayon);
}

.sqy-fiche__tableau:focus-visible {
	outline: 3px solid var(--sqy-action);
	outline-offset: 2px;
}

.sqy-fiche__grille {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	line-height: 1.45;
}

.sqy-fiche__grille caption {
	caption-side: top;
	text-align: left;
	font-weight: 600;
	color: var(--sqy-encre);
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--sqy-bordure);
}

.sqy-fiche__grille th,
.sqy-fiche__grille td {
	padding: 0.45rem 0.85rem;
	border-bottom: 1px solid var(--sqy-filet);
	text-align: left;
	vertical-align: top;
}

.sqy-fiche__grille thead th {
	background: var(--sqy-fond-doux);
	color: var(--sqy-encre);
	font-weight: 600;
	white-space: normal;
	border-bottom: 1px solid var(--sqy-bordure);
}

.sqy-fiche__grille tbody th {
	font-weight: 600;
	white-space: nowrap;
}

.sqy-fiche__grille tbody tr:last-child th,
.sqy-fiche__grille tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * Les colonnes d'un état budgétaire portent des montants : les couper au
 * milieu d'un nombre rendrait la lecture fausse à l'œil.
 */
.sqy-fiche__grille td {
	white-space: nowrap;
}

@media (max-width: 40rem) {
	.sqy-fiche__grille {
		font-size: 0.82rem;
	}

	.sqy-fiche__grille th,
	.sqy-fiche__grille td {
		padding: 0.4rem 0.6rem;
	}
}