/**
 * Fichier : argm-dev-page.css
 * Emplacement : assets/css/
 *
 * Responsabilité :
 * Fiche d'une application et journal de ses versions : visuel, titre,
 * ligne de version, action principale et offres, en bref, présentation,
 * captures, panneaux en onglets, questions fréquentes, contenus liés,
 * documentation. Les boutons, les cartes, les listes de définitions et la
 * pagination relèvent de argm-public.css, la disposition de
 * argm-layout.css.
 *
 * Icône :
 *   Carrée, 64 % de la fenêtre sur un écran étroit, 320 pixels au-delà de
 *   768 pixels : ces largeurs sont celles que déclare l'emplacement fiche des
 *   largeurs d'image.
 *
 * Panneaux :
 *   La barre d'onglets reste cachée tant que le script ne la révèle pas ;
 *   les panneaux paraissent alors à la suite sous leur titre. Sous onglets,
 *   le titre du panneau quitte l'affichage sans quitter le document.
 *
 * Questions fréquentes :
 *   La question paraît en texte tant que le bouton de divulgation reste
 *   caché ; le bouton révélé prend sa place.
 *
 * @package App_Rle_General_Manager
 * @since   1.0.0
 */

.argm-dev-page .argm-dev-heading {
	margin-block: 0 var(--argm-space-s);
	font-size: var(--argm-text-l);
	line-height: var(--argm-line-tight);
}

.argm-dev-page .argm-dev-subheading {
	margin-block: var(--argm-space) var(--argm-space-s);
	font-size: var(--argm-text);
}

/* =========================================================================
   Visuel
   ========================================================================= */

.argm-dev-visual {
	inline-size: 64vw;
	max-inline-size: 100%;
}

.argm-dev-icon,
.argm-dev-visual img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--argm-radius);
}

/*
 * Le déclencheur du dialogue est un bouton du thème ; seule sa mise en page
 * est reprise ici, pour que l'image occupe la colonne.
 */
.argm-dev-visual button {
	display: block;
	inline-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

@media (width >= 769px) {
	.argm-dev-visual {
		inline-size: 320px;
	}
}

/* =========================================================================
   Titre et version
   ========================================================================= */

.argm-dev-title {
	margin-block: 0 var(--argm-space-s);
}

.argm-dev-summary {
	margin-block: 0 var(--argm-space-s);
	font-size: var(--argm-text-l);
	line-height: var(--argm-line);
	max-inline-size: var(--argm-reading);
}

.argm-dev-version {
	margin: 0;
	color: var(--argm-color-muted);
}

.argm-dev-version a {
	color: var(--argm-color-link);
}

.argm-dev-version a:hover,
.argm-dev-version a:focus-visible {
	color: var(--argm-color-link-hover);
}

/* =========================================================================
   Action principale
   ========================================================================= */

.argm-dev-action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--argm-space-s);
}

.argm-dev-action > p,
.argm-dev-action .argm-notice {
	margin: 0;
}

.argm-dev-downloads,
.argm-dev-stores {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--argm-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.argm-dev-status {
	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);
}

.argm-dev-held {
	font-weight: var(--argm-weight-strong);
}

.argm-dev-offers {
	inline-size: 100%;
	margin-block-start: var(--argm-space-s);
}

.argm-offers {
	display: flex;
	flex-direction: column;
	gap: var(--argm-space-s);
	margin: 0;
	padding: 0;
	list-style: none;
}

.argm-offer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--argm-space-s);
	padding: var(--argm-space-s);
	border: 1px solid var(--argm-color-border);
	border-radius: var(--argm-radius);
}

.argm-offer-text {
	flex: 1 1 12rem;
}

/* =========================================================================
   Présentation
   ========================================================================= */

.argm-dev-presentation {
	max-inline-size: var(--argm-reading);
}

.argm-dev-presentation > :first-child {
	margin-block-start: 0;
}

/* =========================================================================
   Captures
   ========================================================================= */

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

.argm-capture-figure {
	margin: 0;
}

.argm-capture-image,
.argm-capture-figure img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border: 1px solid var(--argm-color-border);
	border-radius: var(--argm-radius);
}

.argm-capture-figure button {
	display: block;
	inline-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.argm-capture-caption {
	margin-block-start: var(--argm-space-xs);
	font-size: var(--argm-text-s);
	color: var(--argm-color-muted);
}

@media (width >= 601px) {
	.argm-captures {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width >= 1025px) {
	.argm-captures {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =========================================================================
   Panneaux
   ========================================================================= */

.argm-panel-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--argm-space-s);
	margin: 0 0 var(--argm-space);
	padding: 0 0 var(--argm-space-s);
	border-block-end: 1px solid var(--argm-color-border);
	list-style: none;
}

.argm-panel-tabs[hidden] {
	display: none;
}

.argm-panel-tab {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding-inline: var(--argm-space-s);
	border: 1px solid var(--argm-color-border);
	border-radius: var(--argm-radius);
	background-color: transparent;
	color: var(--argm-color-text);
	font: inherit;
	cursor: pointer;
	transition: background-color var(--argm-duration) ease, border-color var(--argm-duration) ease;
}

.argm-panel-tab:hover,
.argm-panel-tab:focus-visible {
	background-color: var(--argm-color-surface);
	border-color: var(--argm-color-text);
}

/* L'onglet sélectionné se distingue par sa bordure et sa graisse. */
.argm-panel-tab[aria-selected="true"] {
	background-color: var(--argm-color-surface);
	border-color: var(--argm-color-accent);
	border-width: 2px;
	font-weight: var(--argm-weight-strong);
}

.argm-panel {
	margin-block-end: var(--argm-space);
}

.argm-panel-title {
	margin-block: 0 var(--argm-space-s);
	font-size: var(--argm-text-l);
}

.argm-panels-tabbed .argm-panel-title {
	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;
}

.argm-panels-tabbed .argm-panel[hidden] {
	display: none;
}

.argm-panel-body {
	max-inline-size: var(--argm-reading);
}

.argm-panel-body > :first-child {
	margin-block-start: 0;
}

.argm-panel-body > :last-child {
	margin-block-end: 0;
}

/* =========================================================================
   Questions fréquentes
   ========================================================================= */

.argm-faq {
	display: flex;
	flex-direction: column;
	gap: var(--argm-space-s);
}

.argm-faq-item {
	border: 1px solid var(--argm-color-border);
	border-radius: var(--argm-radius);
}

.argm-faq-question {
	margin: 0;
	font-size: var(--argm-text);
}

.argm-faq-text,
.argm-faq-summary {
	display: block;
	padding: var(--argm-space-s);
	font-weight: var(--argm-weight-strong);
}

.argm-faq-summary {
	min-block-size: 44px;
	cursor: pointer;
}

/* Le bouton révélé par le script prend la place de la question en texte. */
.argm-faq-toggle:not([hidden]) + .argm-faq-text {
	display: none;
}

.argm-faq-toggle {
	display: flex;
	align-items: center;
	inline-size: 100%;
	min-block-size: 44px;
	padding: var(--argm-space-s);
	border: 0;
	background: none;
	color: var(--argm-color-text);
	font: inherit;
	font-weight: var(--argm-weight-strong);
	text-align: start;
	cursor: pointer;
}

.argm-faq-toggle::after {
	content: "+";
	margin-inline-start: auto;
	padding-inline-start: var(--argm-space-s);
}

.argm-faq-toggle[aria-expanded="true"]::after {
	content: "−";
}

.argm-faq-toggle:hover,
.argm-faq-toggle:focus-visible {
	background-color: var(--argm-color-surface);
}

.argm-faq-answer {
	padding: 0 var(--argm-space-s) var(--argm-space-s);
}

.argm-faq-answer > :first-child {
	margin-block-start: 0;
}

.argm-faq-answer > :last-child {
	margin-block-end: 0;
}

/* =========================================================================
   Services extérieurs
   ========================================================================= */

.argm-services {
	margin: 0;
}

.argm-service + .argm-service {
	margin-block-start: var(--argm-space-s);
}

.argm-service dt {
	font-weight: var(--argm-weight-strong);
}

.argm-service dd {
	margin: var(--argm-space-xs) 0 0;
}

/* =========================================================================
   Contenus liés et assistance
   ========================================================================= */

.argm-dev-related + .argm-dev-related {
	margin-block-start: var(--argm-space);
}

.argm-dev-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--argm-space-s) var(--argm-space);
	margin: 0 0 var(--argm-space-s);
	padding: 0;
	list-style: none;
}

.argm-dev-links a,
.argm-dev-write a {
	color: var(--argm-color-link);
}

.argm-dev-links a:hover,
.argm-dev-links a:focus-visible,
.argm-dev-write a:hover,
.argm-dev-write a:focus-visible {
	color: var(--argm-color-link-hover);
}

.argm-dev-write {
	margin: 0;
}

/* =========================================================================
   Journal
   ========================================================================= */

.argm-journal-title {
	margin-block: 0 var(--argm-space);
}

.argm-journal-release {
	max-inline-size: var(--argm-reading);
	padding-block: var(--argm-space);
	border-block-start: 1px solid var(--argm-color-border);
}

.argm-journal-heading {
	margin-block: 0 var(--argm-space-s);
	font-size: var(--argm-text-l);
}

.argm-journal-caution {
	margin-block-end: var(--argm-space-s);
	padding: var(--argm-space-s) var(--argm-space);
	border: 1px solid var(--argm-color-border);
	border-inline-start-width: 6px;
	border-inline-start-color: var(--argm-color-accent);
	border-radius: var(--argm-radius);
	background-color: var(--argm-color-surface);
}

.argm-journal-caution > :first-child {
	margin-block-start: 0;
}

.argm-journal-caution > :last-child,
.argm-journal-text > :last-child {
	margin-block-end: 0;
}

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

@media (width <= 480px) {
	.argm-panel-tabs {
		flex-direction: column;
	}

	.argm-panel-tab {
		inline-size: 100%;
	}
}

@media (prefers-contrast: more) {
	.argm-panel-tab,
	.argm-offer,
	.argm-faq-item,
	.argm-dev-status {
		border-width: 2px;
	}

	.argm-dev-version,
	.argm-capture-caption {
		color: var(--argm-color-text);
	}
}

@media (prefers-reduced-motion: reduce) {
	.argm-panel-tab {
		transition: none;
	}
}

@media print {
	.argm-panel-tabs {
		display: none;
	}

	.argm-panels-tabbed .argm-panel[hidden] {
		display: block;
	}

	.argm-panels-tabbed .argm-panel-title {
		position: static;
		inline-size: auto;
		block-size: auto;
		margin: 0 0 var(--argm-space-s);
		clip-path: none;
		white-space: normal;
	}
}