/**
 * Annonces judiciaires et légales — Le Kiosque / Pixim
 *
 * La typographie reproduit le fac-similé de la colonne imprimée tel que le
 * produit Malcom : colonne de 7,5 cm, corps en points, texte justifié, filets
 * pleins. Ce n'est pas une décision graphique, c'est la forme sous laquelle
 * l'annonce a été publiée — la modifier reviendrait à publier autre chose.
 *
 * Tout est préfixé pxal-/--pxal- : le module peut atterrir dans n'importe quel
 * gabarit, y compris YOOtheme Pro qui déclare beaucoup de classes courtes.
 */

.pxal {
	--pxal-column: 7.5cm;
	--pxal-ink: #000;
	--pxal-paper: #fff;
	--pxal-rule: #000;
	--pxal-frame: #d3d3d3;

	/*
	 * Couleur d'accent : la primaire du thème.
	 *
	 * --bs-primary est posée sur :root par la feuille du thème YOOtheme et vaut
	 * #03bccf, la même teinte que .uk-button-primary. S'y brancher plutôt que
	 * de recopier la valeur fait suivre le module si la charte du journal
	 * évolue. Le littéral reste en repli, pour le cas où le module servirait
	 * hors de ce thème.
	 *
	 * Elle sert au FOCUS, pas au survol : un anneau de focus doit rester
	 * franchement visible, c'est la seule indication dont dispose quelqu'un qui
	 * navigue au clavier.
	 */
	--pxal-accent: var(--bs-primary, #03bccf);

	/* Teinte de survol, plus douce que l'accent. */
	--pxal-hover: #e4f8fa;
	--pxal-gap: 10px;
	--pxal-pad: 15px;

	/* Le pas vertical du fac-similé Malcom : tout s'accroche dessus. */
	--pxal-lead: 13pt;

	--pxal-size-base: 8pt;
	--pxal-size-title: 13pt;
	--pxal-size-beneficiary: 18pt;
	--pxal-size-body: 11pt;
}

/* ── Grille ─────────────────────────────────────────────────────────────── */

.pxal__grid {
	display: grid;
	/* Chaque annonce garde sa colonne de 7,5 cm ; c'est le nombre de colonnes
	   qui s'adapte, jamais leur largeur. En dessous de 7,5 cm + marges, la
	   grille passe d'elle-même à une seule colonne. */
	grid-template-columns: repeat(auto-fill, minmax(min(var(--pxal-column), 100%), max-content));
	gap: calc(var(--pxal-gap) * 2);
	justify-content: center;
	align-items: start;
}

/*
 * Hauteur uniforme.
 *
 * « grid-auto-rows: 1fr » sur une grille sans hauteur définie donne à TOUTES
 * les rangées la hauteur de la plus haute : les cartes sont donc identiques
 * d'un bout à l'autre de la page, et pas seulement à l'intérieur d'une rangée
 * comme le ferait un simple align-items: stretch.
 *
 * C'est le pendant du rognage du corps : sans lui, une annonce de trois pages
 * imposerait sa hauteur à toute la grille.
 */
.pxal__grid--uniform {
	grid-auto-rows: 1fr;
	align-items: stretch;
}

.pxal__single {
	display: flex;
	justify-content: center;
}

.pxal__back {
	margin-block-end: 1rem;
}

.pxal__empty {
	margin: 0;
}

/* ── Le fac-similé ──────────────────────────────────────────────────────── */

.pxal-notice {
	position: relative;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: var(--pxal-column);
	min-block-size: 5cm;
	padding: var(--pxal-pad);
	border: 2px solid var(--pxal-frame);

	/* Fond blanc et encre noire imposés : une annonce légale est un document
	   sur papier. Un thème sombre qui la repeindrait en gris sur noir en
	   changerait la nature, et la rendrait illisible à l'impression. */
	background: var(--pxal-paper);
	color: var(--pxal-ink);

	font-family: "notice-font", "Times New Roman", Times, serif;
	font-size: var(--pxal-size-base);
	text-align: justify;
	overflow-wrap: break-word;
}

.pxal-notice > * {
	margin: var(--pxal-lead) auto 0;
}

.pxal-notice > :first-child {
	margin-block-start: 0;
}

.pxal-notice__number,
.pxal-notice__principal-title,
.pxal-notice__principal-subtitle,
.pxal-notice__title,
.pxal-notice__beneficiary,
.pxal-notice__beneficiary-subtitle {
	text-align: center;
}

.pxal-notice__number {
	font-size: var(--pxal-size-title);
	line-height: var(--pxal-size-title);
}

.pxal-notice__logo {
	text-align: center;
}

.pxal-notice__logo img {
	display: block;
	max-inline-size: 250px;
	block-size: auto;
	margin-inline: auto;
}

.pxal-notice__principal-title,
.pxal-notice__title {
	font-size: var(--pxal-size-title);
	line-height: var(--pxal-size-title);
	font-weight: 700;
}

.pxal-notice__principal-subtitle,
.pxal-notice__beneficiary-subtitle {
	margin-block-start: 0;
	font-size: var(--pxal-size-title);
	line-height: var(--pxal-size-title);
}

.pxal-notice__beneficiary {
	font-size: var(--pxal-size-beneficiary);
	line-height: var(--pxal-size-beneficiary);
	font-weight: 700;
}

.pxal-notice__body,
.pxal-notice__signature {
	font-size: var(--pxal-size-body);
	line-height: var(--pxal-lead);
}

/* Le corps vient de Malcom avec sa propre mise en forme : on ne lui impose
   qu'un rythme vertical cohérent, sans écraser ce qu'il déclare. */
.pxal-notice__body p {
	margin: 0 0 var(--pxal-lead);
}

.pxal-notice__body p:last-child {
	margin-block-end: 0;
}

.pxal-notice__body table {
	inline-size: 100%;
	border-collapse: collapse;
}

.pxal-notice__body img {
	max-inline-size: 100%;
	block-size: auto;
}

/* ── Carte rognée (liste seulement) ─────────────────────────────────────── */

/*
 * La carte devient une colonne flex : le corps occupe la place disponible et le
 * bouton se colle en bas, si bien que tous les boutons de la grille s'alignent.
 * Rien de tout cela ne s'applique à la page d'une annonce — on ne rogne jamais
 * un fac-similé qu'on est venu lire.
 */
.pxal-notice--clamped {
	display: flex;
	flex-direction: column;
	block-size: 100%;
}

/*
 * Le rognage porte sur le CORPS, pas sur la carte : les en-têtes, le titre, le
 * bénéficiaire et la date restent toujours entiers. Couper à hauteur fixe
 * aurait tranché au milieu d'une raison sociale.
 *
 * line-clamp a besoin de -webkit-box ; les deux écritures sont là, la préfixée
 * reste celle que tous les navigateurs comprennent aujourd'hui. L'ellipsis
 * finale est ajoutée par le navigateur.
 */
.pxal-notice--clamped .pxal-notice__body {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--pxal-lines, 12);
	line-clamp: var(--pxal-lines, 12);
	overflow: hidden;
}

/* Un logo démesuré ferait grandir toute la grille : on le borne dans la liste,
   sans toucher à son rendu sur la page de l'annonce. */
.pxal-notice--clamped .pxal-notice__logo img {
	max-block-size: 80px;
	inline-size: auto;
	object-fit: contain;
}

/*
 * margin-block-start:auto pousse le bouton en bas de la colonne flex — c'est ce
 * qui aligne les boutons entre cartes de contenu inégal. Il écrase la marge
 * héritée de « .pxal-notice > * ».
 */
.pxal-notice__more {
	margin-block-start: auto;
	margin-inline: auto;
	padding-block-start: var(--pxal-lead);
	font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	color: var(--pxal-accent);
}

.pxal-notice__more::after {
	content: " →";
}

.pxal-notice:has(.pxal-notice__link:hover) .pxal-notice__more,
.pxal-notice:has(.pxal-notice__link:focus-visible) .pxal-notice__more {
	text-decoration: underline;
}

/* ── Filets ─────────────────────────────────────────────────────────────── */

.pxal-notice__rule {
	inline-size: 100%;
	block-size: 0.5mm;
	border: 0;
	background: var(--pxal-rule);
}

.pxal-notice__rule--half {
	inline-size: 33%;
}

/* ── Lien vers le détail ────────────────────────────────────────────────── */

/*
 * Visible des lecteurs d'écran, invisible à l'écran. Sert au lien de repli des
 * annonces qui n'ont ni titre ni bénéficiaire : la carte reste joignable au
 * clavier sans qu'un intitulé parasite s'affiche dans le fac-similé.
 * `clip-path` plutôt que `display:none`, qui retirerait l'élément de l'arbre
 * d'accessibilité et donc du parcours au clavier.
 */
.pxal-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pxal-notice__link {
	color: inherit;
	text-decoration: none;
}

/* Le titre porte le lien, mais toute la carte est cliquable. Le pseudo-élément
   couvre la carte sans ajouter de second lien : un lecteur d'écran n'annonce
   qu'une seule cible, dont l'intitulé est le titre de l'annonce. */
.pxal-notice__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/*
 * Au survol, seul le CADRE prend la couleur du journal. Le fac-similé lui-même
 * ne bouge pas : c'est un document, on ne le colorise pas parce que la souris
 * passe dessus. La transition rend le changement lisible sans le rendre bruyant.
 */
.pxal-notice {
	transition: border-color 120ms ease-in-out;
}

.pxal-notice:has(.pxal-notice__link:hover) {
	border-color: var(--pxal-hover);
}

.pxal-notice:has(.pxal-notice__link:focus-visible) {
	outline: 2px solid var(--pxal-accent);
	outline-offset: 2px;
	border-color: var(--pxal-accent);
}

@media (prefers-reduced-motion: reduce) {
	.pxal-notice {
		transition: none;
	}
}

.pxal-notice__link:focus-visible {
	outline: none;
}

/* ── Pied de cartouche ──────────────────────────────────────────────────── */

.pxal-notice__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	justify-content: space-between;
	font-size: var(--pxal-size-base);
	font-family: inherit;
	text-align: start;
}

/* ── Actions sous une annonce ───────────────────────────────────────────── */

.pxal__actions {
	margin-block-start: 1.25rem;
	text-align: center;
}

/*
 * Repli hors UIkit seulement : sous YOOtheme, .uk-button porte déjà tout. Même
 * principe que pour la pagination — on n'écrase jamais le thème.
 */
:where(.pxal__actions) .pxal__pdf {
	display: inline-block;
	padding: 0.5em 1.25em;
	border: 1px solid currentColor;
	border-radius: 500px;
	color: var(--pxal-accent);
	text-decoration: none;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */

/*
 * Le balisage est celui d'UIkit (uk-pagination), que le thème met déjà en
 * forme — y compris la page active, rendue en blanc sur pastille de la couleur
 * primaire.
 *
 * D'où le :where() sur tout ce qui suit : il annule la spécificité de ces
 * sélecteurs, si bien qu'UIkit l'emporte partout où il est chargé, et que ces
 * règles ne servent que de repli quand le module est posé dans un gabarit sans
 * UIkit. C'est exactement la correction du défaut précédent : écrites en
 * spécificité normale, elles écrasaient la mise en forme du thème et
 * repeignaient le numéro actif en cyan — donc invisible sur sa pastille cyan.
 *
 * Règle à retenir pour la suite : dans ce module, on ne redéfinit jamais une
 * propriété qu'UIkit règle déjà, sauf à passer par :where().
 */

.pxal__pagination {
	margin-block-start: 2rem;
}

:where(.pxal__pagination) ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

:where(.pxal__pagination) a {
	color: inherit;
	text-decoration: none;
}

:where(.pxal__pagination) a:hover,
:where(.pxal__pagination) a:focus-visible {
	color: var(--pxal-accent);
}

/*
 * Page active : chiffre blanc sur pastille colorée. Identique à ce que produit
 * le thème, pour que le repli hors UIkit ait le même aspect — et jamais du
 * blanc sur blanc, qui serait le défaut symétrique de celui qu'on corrige.
 */
:where(.pxal__pagination) [aria-current="page"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 4px 10px;
	box-sizing: border-box;
	border-radius: 500px;
	background-color: var(--pxal-accent);
	color: #fff;
}

:where(.pxal__pagination) .uk-disabled > span {
	opacity: 0.5;
}

.pxal__pagination-count {
	margin-block-start: 0.75rem;
	text-align: center;
	font-size: 0.875rem;
	opacity: 0.75;
}

/* ── Impression ─────────────────────────────────────────────────────────── */

@media print {
	.pxal__back,
	.pxal__pagination {
		display: none;
	}

	.pxal-notice {
		border-color: transparent;
		break-inside: avoid;
	}
}

/*
 * La police du fac-similé.
 *
 * Le fichier notice-font.woff n'est PAS livré avec le module : sa licence doit
 * être vérifiée avant reprise depuis l'ancien site. Tant qu'il est absent, la
 * pile de repli — Times New Roman, puis la serif du système — donne un rendu
 * très proche, et la règle ci-dessous reste commentée pour éviter une requête
 * en 404 sur chaque page.
 *
 * Pour l'activer : déposer le fichier dans
 * media/mod_pixim_annonces_legales/fonts/ puis décommenter.
 *
 * @font-face {
 *     font-family: "notice-font";
 *     src: url("../fonts/notice-font.woff") format("woff");
 *     font-display: swap;
 * }
 */