/**
 * Fichier : argm-public.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Éléments communs aux pages publiques des applications : jetons, boutons,
 * grilles de cartes, listes de définitions, avis, états vides et
 * pagination.
 *
 * Jetons :
 *   Espacements, tailles, graisses, rayons, durées et couleurs viennent des
 *   variables du thème Discovery, chacune avec une valeur de repli. Le thème
 *   redéfinit ses couleurs sous prefers-contrast ; aucune couleur n'est donc
 *   posée directement dans une règle.
 *
 * Accessibilité :
 * - Cibles d'au moins quarante-quatre pixels de côté.
 * - Focus visible : celui du thème, jamais retiré ici.
 * - L'action principale se distingue par son fond et sa graisse, non par sa
 *     seule couleur.
 * - Transitions retirées sous prefers-reduced-motion, bordures épaissies
 *     sous prefers-contrast.
 *
 * @package App_Rle_General_Manager
 * @since   1.0.0
 */

.argm-public {
	--argm-space-xs: var(--discovery-space-1, 0.25rem);
	--argm-space-s: var(--discovery-space-3, 0.75rem);
	--argm-space: var(--discovery-space-6, 1.5rem);
	--argm-space-l: var(--discovery-space-8, 2rem);
	--argm-text-s: var(--discovery-text-sm, 0.875rem);
	--argm-text: var(--discovery-text-base, 1rem);
	--argm-text-l: var(--discovery-text-lg, 1.15rem);
	--argm-weight: var(--discovery-weight-normal, 400);
	--argm-weight-strong: var(--discovery-weight-semibold, 600);
	--argm-line-tight: var(--discovery-line-tight, 1.2);
	--argm-line: var(--discovery-line-normal, 1.5);
	--argm-radius: var(--discovery-radius-md, 0.5rem);
	--argm-duration: var(--discovery-duration-fast, 120ms);
	--argm-reading: var(--discovery-lecture-max, 70ch);
	--argm-color-text: var(--discovery-color-text, #1a1a1a);
	--argm-color-muted: var(--discovery-color-muted, #595959);
	--argm-color-background: var(--discovery-color-background, #fff);
	--argm-color-surface: var(--discovery-color-surface, #f2f2f2);
	--argm-color-border: var(--discovery-color-border, #767676);
	--argm-color-link: var(--discovery-color-link, #0b5cad);
	--argm-color-link-hover: var(--discovery-color-link-hover, #083f77);
	--argm-color-accent: var(--discovery-color-accent, #6b3fa0);
	--argm-color-success: var(--discovery-color-succes, #1d6b35);
	--argm-color-error: var(--discovery-color-erreur, #a3241a);
	--argm-color-info: var(--discovery-color-info, #0b5cad);
	--argm-columns: 3;

	color: var(--argm-color-text);
}

/* Texte réservé aux lecteurs d'écran, pour un thème qui ne le déclare pas. */
.argm-public .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: calc(var(--argm-hairline, 1px) * -1);
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   Boutons
   ========================================================================= */

/* Le formulaire d'une action se comporte comme le bouton qu'il porte. */
.argm-public .argm-action-form {
	display: inline-block;
	margin: 0;
}

.argm-public .argm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--argm-space-xs);
	min-block-size: 44px;
	min-inline-size: 44px;
	padding: var(--argm-space-s) var(--argm-space);
	border: 1px solid var(--argm-color-border);
	border-radius: var(--argm-radius);
	background-color: var(--argm-color-surface);
	color: var(--argm-color-text);
	font: inherit;
	font-weight: var(--argm-weight-strong);
	line-height: var(--argm-line-tight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--argm-duration) ease, border-color var(--argm-duration) ease, color var(--argm-duration) ease;
}

.argm-public .argm-button:hover,
.argm-public .argm-button:focus-visible {
	border-color: var(--argm-color-text);
}

.argm-public .argm-button-primary {
	border-color: var(--argm-color-accent);
	background-color: var(--argm-color-accent);
	color: var(--argm-color-background);
}

.argm-public .argm-button-primary:hover,
.argm-public .argm-button-primary:focus-visible {
	border-color: var(--argm-color-accent);
	background-color: var(--argm-color-background);
	color: var(--argm-color-text);
}

/* =========================================================================
   Grilles et cartes
   ========================================================================= */

.argm-public .argm-grid {
	display: grid;
	grid-template-columns: repeat(var(--argm-columns), minmax(0, 1fr));
	gap: var(--argm-space);
	margin: 0 0 var(--argm-space);
	padding: 0;
	list-style: none;
}

.argm-public .argm-card {
	display: flex;
	margin: 0;
}

.argm-public .argm-card-link {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	border: 1px solid var(--argm-color-border);
	border-radius: var(--argm-radius);
	background-color: var(--argm-color-surface);
	color: var(--argm-color-text);
	text-decoration: none;
	overflow: hidden;
	transition: border-color var(--argm-duration) ease, transform var(--argm-duration) ease;
}

.argm-public .argm-card-link:hover,
.argm-public .argm-card-link:focus-visible {
	border-color: var(--argm-color-accent);
	transform: translateY(-2px);
}

.argm-public .argm-card-image {
	display: block;
	background-color: var(--argm-color-background);
}

.argm-public .argm-card-icon {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.argm-public .argm-card-text {
	display: flex;
	flex-direction: column;
	gap: var(--argm-space-xs);
	padding: var(--argm-space-s);
}

/*
 * Le titre d'une carte est un repère du document, non le titre d'une
 * section : sa taille et ses marges par défaut sont reprises.
 */
.argm-public .argm-card-title {
	margin: 0;
	font-size: var(--argm-text);
	font-weight: var(--argm-weight-strong);
	line-height: var(--argm-line-tight);
	color: inherit;
}

.argm-public .argm-card-link:hover .argm-card-title,
.argm-public .argm-card-link:focus-visible .argm-card-title {
	text-decoration: underline;
}

.argm-public .argm-card-summary {
	font-size: var(--argm-text-s);
	line-height: var(--argm-line);
}

.argm-public .argm-meta {
	margin: 0;
	font-size: var(--argm-text-s);
	color: var(--argm-color-muted);
}

/* =========================================================================
   Listes de définitions
   ========================================================================= */

/*
 * La colonne des termes prend la largeur du plus long, et toutes les
 * valeurs commencent au même endroit. Le deux-points est décoratif : la
 * liste annonce déjà la paire.
 */
.argm-public .argm-facts {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--argm-space-xs) var(--argm-space-s);
	margin: 0;
}

.argm-public .argm-fact {
	display: contents;
}

.argm-public .argm-fact dt {
	margin: 0;
	font-weight: var(--argm-weight-strong);
}

.argm-public .argm-fact dt::after {
	content: " :";
}

.argm-public .argm-fact dd {
	margin: 0;
	min-inline-size: 0;
}

/* =========================================================================
   Avis et états vides
   ========================================================================= */

.argm-public .argm-notice {
	margin: 0 0 var(--argm-space);
	padding: var(--argm-space-s) var(--argm-space);
	border: 1px solid var(--argm-color-border);
	border-inline-start-width: 6px;
	border-radius: var(--argm-radius);
	background-color: var(--argm-color-surface);
}

.argm-public .argm-notice p {
	margin: 0;
}

.argm-public .argm-notice-success {
	border-inline-start-color: var(--argm-color-success);
}

.argm-public .argm-notice-info {
	border-inline-start-color: var(--argm-color-info);
}

.argm-public .argm-notice-error {
	border-inline-start-color: var(--argm-color-error);
}

.argm-public .argm-empty {
	padding: var(--argm-space);
	border: 1px dashed var(--argm-color-border);
	border-radius: var(--argm-radius);
	text-align: center;
}

/* =========================================================================
   Pagination
   ========================================================================= */

.argm-public .argm-pagination {
	margin-block: var(--argm-space);
}

.argm-public .argm-pagination-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--argm-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.argm-public .argm-pagination .argm-button {
	padding-inline: var(--argm-space-s);
	font-weight: var(--argm-weight);
}

.argm-public .argm-pagination .current {
	border-color: var(--argm-color-accent);
	font-weight: var(--argm-weight-strong);
}

.argm-public .argm-pagination .dots {
	border-color: transparent;
	background-color: transparent;
	cursor: default;
}

/* =========================================================================
   Paliers d'écran
   ========================================================================= */

/*
 * Un écran étroit ne présente pas le nombre de colonnes réglé pour un écran
 * large : les paliers plafonnent la valeur sans la remplacer.
 */
@media (width <= 1024px) {
	.argm-public .argm-grid {
		grid-template-columns: repeat(min(var(--argm-columns), 3), minmax(0, 1fr));
	}
}

@media (width <= 768px) {
	.argm-public .argm-grid {
		grid-template-columns: repeat(min(var(--argm-columns), 2), minmax(0, 1fr));
	}
}

@media (width <= 480px) {
	.argm-public .argm-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.argm-public .argm-facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.argm-public .argm-fact dd {
		margin-block-end: var(--argm-space-xs);
	}
}

/* =========================================================================
   Préférences d'affichage
   ========================================================================= */

@media (prefers-contrast: more) {
	.argm-public .argm-button,
	.argm-public .argm-card-link,
	.argm-public .argm-notice,
	.argm-public .argm-empty {
		border-width: 2px;
	}

	.argm-public .argm-meta {
		color: var(--argm-color-text);
	}
}

@media (prefers-reduced-motion: reduce) {
	.argm-public .argm-button,
	.argm-public .argm-card-link {
		transition: none;
	}

	.argm-public .argm-card-link:hover,
	.argm-public .argm-card-link:focus-visible {
		transform: none;
	}
}

@media print {
	.argm-public .argm-pagination,
	.argm-public .argm-action-form {
		display: none;
	}

	.argm-public .argm-card-link {
		background-color: transparent;
		border-color: currentcolor;
	}
}