/*
 * Galerie « Journal de bord » (DAWNSTAR Photo de la semaine).
 * Rayon rouge vertical au centre, une semaine par losange, alternance gauche et droite,
 * images 16:9 aux coins biseautés, grand numéro de semaine détouré, légende en police d'affichage.
 * Sous 700 px : une colonne, rayon à gauche.
 * Jetons de DAWNSTAR Design (--dnr-*) avec repli : la galerie fonctionne sans lui.
 * Dévoilement : seulement si galerie.js a posé html.dnr-psg-js, et jamais en mouvement réduit.
 * Racine doublée (.dnr-psg.dnr-psg) dans chaque sélecteur : chaque règle l'emporte, sans !important et quel que soit
 * l'ordre de chargement, sur la feuille de base du thème (reset.css de Hello Elementor : button, [type=button]:hover,
 * figcaption, img, a, li, * { box-sizing }...) et sur dnr.css (a, p, .dnr-page a, .dnr-page img...) ; les propriétés
 * que ces feuilles imposent sont déclarées explicitement (rayons, padding, polices, transitions, boîtes...).
 */

.dnr-psg.dnr-psg {
	--psg-g: clamp(20px, 5vw, 64px);
	--psg-biseau: 18px;
	position: relative;
	color: var(--dnr-txt, #D2DAE6);
	font: 400 15px/1.6 var(--dnr-body, "IBM Plex Sans", "Segoe UI", Roboto, sans-serif);
	text-align: start;
}

/* Boîtes du navigateur (le thème met tout en border-box) ; les boutons et la visionneuse ont leur propre règle */
.dnr-psg.dnr-psg,
.dnr-psg.dnr-psg *,
.dnr-psg.dnr-psg *::before,
.dnr-psg.dnr-psg *::after {
	box-sizing: content-box;
}

/* Paragraphe sans classe (lien de retour de la page vide) : marges du navigateur */
.dnr-psg.dnr-psg p {
	margin: 1em 0;
}

/* Fil des semaines et rayon rouge central */
.dnr-psg.dnr-psg .dnr-psg__fil {
	position: relative;
	display: grid;
	gap: clamp(28px, 5vw, 60px);
	margin: 0;
	padding: 10px 0;
	list-style: none;
}

.dnr-psg.dnr-psg .dnr-psg__fil::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	transform: translateX(-50%);
	background: linear-gradient(var(--dnr-red-l, #FF6B5E), var(--dnr-red, #CC2828) 40%, rgba(204, 40, 40, .15));
	box-shadow: 0 0 14px rgba(204, 40, 40, .7);
	pointer-events: none;
}

/* Une semaine : la figure (image et légende) et le grand numéro partagent la même cellule */
.dnr-psg.dnr-psg .dnr-psg__e {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--psg-g);
	align-items: center;
	margin: 0;
	padding: 0;
}

/* Losange sur le rayon */
.dnr-psg.dnr-psg .dnr-psg__e::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 14px;
	height: 14px;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--dnr-bg, #070A0F);
	border: 2px solid var(--dnr-red-l, #FF6B5E);
	box-shadow: 0 0 12px rgba(204, 40, 40, .9);
}

/* Trait qui relie le losange à l'image */
.dnr-psg.dnr-psg .dnr-psg__e::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 50%;
	width: calc(var(--psg-g) / 2);
	height: 1px;
	background: linear-gradient(to left, var(--dnr-red-l, #FF6B5E), rgba(204, 40, 40, 0));
	pointer-events: none;
}

.dnr-psg.dnr-psg .dnr-psg__e:nth-child(even)::after {
	right: auto;
	left: 50%;
	background: linear-gradient(to right, var(--dnr-red-l, #FF6B5E), rgba(204, 40, 40, 0));
}

.dnr-psg.dnr-psg .dnr-psg__e > figure {
	position: relative;
	z-index: 1;
	grid-row: 1;
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--psg-g);
	align-items: center;
	margin: 0;
}

/* Image : bouton d'agrandissement, coins biseautés, lueur rouge qui suit le biseau */
.dnr-psg.dnr-psg .dnr-psg__ouvrir {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	white-space: normal;
	cursor: zoom-in;
	user-select: auto;
	appearance: auto;
	transition: none;
	filter: drop-shadow(0 0 16px rgba(204, 40, 40, .18));
}

.dnr-psg.dnr-psg .dnr-psg__ouvrir img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--dnr-bg2, #0B0F16);
	clip-path: polygon(var(--psg-biseau) 0, 100% 0, 100% calc(100% - var(--psg-biseau)), calc(100% - var(--psg-biseau)) 100%, 0 100%, 0 var(--psg-biseau));
}

.dnr-psg.dnr-psg .dnr-psg__ouvrir:hover {
	filter: drop-shadow(0 0 22px rgba(204, 40, 40, .45));
}

.dnr-psg.dnr-psg .dnr-psg__ouvrir:focus-visible,
.dnr-psg.dnr-psg .dnr-psg__fermer:focus-visible {
	outline: 2px solid var(--dnr-red-l, #FF6B5E);
	outline-offset: 4px;
}

.dnr-psg.dnr-psg .dnr-psg__e:nth-child(even) .dnr-psg__ouvrir {
	order: 2;
}

/* Légende : semaine en mono rouge, texte de la capture en police d'affichage */
.dnr-psg.dnr-psg .dnr-psg__e figcaption {
	position: relative;
	display: grid;
	color: inherit;
	font: inherit;
	gap: 6px;
	min-width: 0;
	justify-items: start;
}

.dnr-psg.dnr-psg .dnr-psg__e:nth-child(even) figcaption {
	text-align: right;
	justify-items: end;
}

.dnr-psg.dnr-psg .dnr-psg__sem {
	font: 500 10.5px/1.2 var(--dnr-mono, "IBM Plex Mono", Consolas, monospace);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dnr-red-l, #FF6B5E);
}

.dnr-psg.dnr-psg .dnr-psg__t {
	max-width: 34ch;
	margin: 0;
	font: 600 clamp(16px, 2vw, 20px)/1.3 var(--dnr-disp, "Chakra Petch", "Segoe UI", sans-serif);
	color: var(--dnr-ink, #F4F6FA);
	overflow-wrap: anywhere;
	text-wrap: pretty;
}

.dnr-psg.dnr-psg .dnr-psg__cr {
	font: 500 11px/1.4 var(--dnr-mono, "IBM Plex Mono", Consolas, monospace);
	letter-spacing: .06em;
	color: var(--dnr-mut, #8391A6);
}

.dnr-psg.dnr-psg .dnr-psg__cr b {
	font-weight: 500;
	color: var(--dnr-ink, #F4F6FA);
}

/* Grand numéro de semaine détouré, derrière la légende (décoratif) */
.dnr-psg.dnr-psg .dnr-psg__n {
	position: relative;
	z-index: 0;
	grid-row: 1;
	grid-column: 2;
	justify-self: start;
	align-self: center;
	transform: translateY(-78%);
	font: 700 clamp(56px, 9vw, 120px)/1 var(--dnr-disp, "Chakra Petch", "Segoe UI", sans-serif);
	letter-spacing: -.02em;
	color: rgba(238, 242, 248, .07);
	pointer-events: none;
	user-select: none;
}

@supports (-webkit-text-stroke: 1px) {
	.dnr-psg.dnr-psg .dnr-psg__n {
		color: transparent;
		-webkit-text-stroke: 1px rgba(238, 242, 248, .3);
	}
}

.dnr-psg.dnr-psg .dnr-psg__e:nth-child(even) .dnr-psg__n {
	grid-column: 1;
	justify-self: end;
}

/* Pagination */
.dnr-psg.dnr-psg .dnr-psg__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 20px;
	margin-top: clamp(36px, 6vw, 64px);
	font: 500 12px/1.2 var(--dnr-mono, "IBM Plex Mono", Consolas, monospace);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.dnr-psg.dnr-psg .dnr-psg__pages a,
.dnr-psg.dnr-psg .dnr-psg__retour {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	color: var(--dnr-ink, #F4F6FA);
	text-decoration: none;
	background: var(--dnr-bg2, #0B0F16);
	border: 1px solid var(--dnr-line2, rgba(238, 242, 248, .22));
	transition: none;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.dnr-psg.dnr-psg .dnr-psg__pages a:hover,
.dnr-psg.dnr-psg .dnr-psg__retour:hover {
	border-color: var(--dnr-red, #CC2828);
	color: #fff;
}

/* Focus au clavier : le clip-path couperait un contour extérieur ; contour à l'intérieur, fond et bordure rouges */
.dnr-psg.dnr-psg .dnr-psg__pages a:focus-visible, .dnr-psg.dnr-psg .dnr-psg__retour:focus-visible {
	outline: 2px solid var(--dnr-red-l, #FF6B5E);
	outline-offset: -5px;
	color: #fff;
	background: rgba(204, 40, 40, .28);
	border-color: var(--dnr-red-l, #FF6B5E);
}

.dnr-psg.dnr-psg .dnr-psg__pos {
	color: var(--dnr-mut, #8391A6);
}

/* Galerie vide ou page au-delà de la dernière */
.dnr-psg.dnr-psg.dnr-psg--vide {
	padding: 28px 20px;
	text-align: center;
	border: 1px solid var(--dnr-line, rgba(238, 242, 248, .12));
}

.dnr-psg.dnr-psg .dnr-psg__vide {
	margin: 0;
	font: 600 clamp(16px, 2vw, 20px)/1.3 var(--dnr-disp, "Chakra Petch", "Segoe UI", sans-serif);
	color: var(--dnr-ink, #F4F6FA);
}

/* Visionneuse : <dialog> plein écran (modal avec showModal, sinon attribut open) */
.dnr-psg.dnr-psg .dnr-psg__vis {
	position: fixed;
	inset: 0;
	z-index: 99999;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 24px;
	border: 0;
	color: var(--dnr-ink, #F4F6FA);
	background: rgba(4, 6, 10, .92);
}

.dnr-psg.dnr-psg .dnr-psg__vis[open] {
	display: grid;
	place-items: center;
}

.dnr-psg.dnr-psg .dnr-psg__vis::backdrop {
	background: transparent;
}

.dnr-psg.dnr-psg .dnr-psg__vis figure {
	width: min(1200px, 100%, calc((100dvh - 140px) * 16 / 9));
	margin: 0;
	filter: drop-shadow(0 0 40px rgba(204, 40, 40, .3));
}

.dnr-psg.dnr-psg .dnr-psg__vis img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--dnr-bg2, #0B0F16);
	clip-path: polygon(var(--psg-biseau) 0, 100% 0, 100% calc(100% - var(--psg-biseau)), calc(100% - var(--psg-biseau)) 100%, 0 100%, 0 var(--psg-biseau));
}

.dnr-psg.dnr-psg .dnr-psg__vis figcaption {
	margin-top: 10px;
	font: 500 14px/1.5 var(--dnr-body, "IBM Plex Sans", "Segoe UI", Roboto, sans-serif);
	color: var(--dnr-ink, #F4F6FA);
}

.dnr-psg.dnr-psg .dnr-psg__fermer {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	font: 600 18px/1 var(--dnr-disp, "Chakra Petch", "Segoe UI", sans-serif);
	color: var(--dnr-ink, #F4F6FA);
	background: var(--dnr-bg2, #0B0F16);
	border: 1px solid var(--dnr-line2, rgba(238, 242, 248, .22));
	border-radius: 0;
	white-space: normal;
	cursor: pointer;
	user-select: auto;
	appearance: auto;
	transition: none;
}

.dnr-psg.dnr-psg .dnr-psg__fermer:hover {
	border-color: var(--dnr-red, #CC2828);
}

/* Téléphone : une colonne, rayon à gauche */
@media (max-width: 700px) {
	.dnr-psg.dnr-psg .dnr-psg__fil::before {
		left: 8px;
		transform: none;
	}

	.dnr-psg.dnr-psg .dnr-psg__e {
		grid-template-columns: minmax(0, 1fr);
		padding-left: 28px;
	}

	.dnr-psg.dnr-psg .dnr-psg__e::before {
		top: 12px;
		left: 9px;
	}

	.dnr-psg.dnr-psg .dnr-psg__e::after {
		display: none;
	}

	.dnr-psg.dnr-psg .dnr-psg__e > figure {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
	}

	.dnr-psg.dnr-psg .dnr-psg__e:nth-child(even) .dnr-psg__ouvrir {
		order: 0;
	}

	.dnr-psg.dnr-psg .dnr-psg__e:nth-child(even) figcaption {
		text-align: left;
		justify-items: start;
	}

	.dnr-psg.dnr-psg .dnr-psg__n,
	.dnr-psg.dnr-psg .dnr-psg__e:nth-child(even) .dnr-psg__n {
		grid-column: 1;
		justify-self: end;
		align-self: end;
		transform: translateY(12%);
		font-size: clamp(56px, 18vw, 96px);
	}

	.dnr-psg.dnr-psg .dnr-psg__vis {
		padding: 72px 12px 12px;
	}

	.dnr-psg.dnr-psg .dnr-psg__vis figure {
		width: 100%;
	}
}

/* Mouvement : dévoilement à l'arrivée (à partir de la troisième entrée), survol, ouverture de la visionneuse */
@keyframes dnr-psg-in {
	from {
		opacity: 0;
		transform: translateX(var(--psg-dx, -8%)) scale(1.08);
		filter: brightness(.2);
	}
}

@keyframes dnr-psg-losange {
	from {
		transform: translate(-50%, -50%) rotate(45deg) scale(0);
		box-shadow: 0 0 0 rgba(204, 40, 40, 0);
	}
}

@keyframes dnr-psg-vis {
	from {
		opacity: 0;
		transform: scale(.97);
	}
}

@media (prefers-reduced-motion: no-preference) {
	html.dnr-psg-js .dnr-psg.dnr-psg .dnr-psg__e:nth-child(n+3):not(.in) .dnr-psg__ouvrir img {
		opacity: 0;
	}

	html.dnr-psg-js .dnr-psg.dnr-psg .dnr-psg__e:nth-child(n+3):not(.in)::before {
		transform: translate(-50%, -50%) rotate(45deg) scale(0);
	}

	html.dnr-psg-js .dnr-psg.dnr-psg .dnr-psg__e:nth-child(n+3).in .dnr-psg__ouvrir img {
		animation: dnr-psg-in 1s var(--dnr-ease, cubic-bezier(.16, 1, .3, 1)) both;
	}

	html.dnr-psg-js .dnr-psg.dnr-psg .dnr-psg__e:nth-child(n+3).in::before {
		animation: dnr-psg-losange .7s var(--dnr-ease, cubic-bezier(.16, 1, .3, 1)) both;
	}

	.dnr-psg.dnr-psg .dnr-psg__e:nth-child(even) {
		--psg-dx: 8%;
	}

	.dnr-psg.dnr-psg .dnr-psg__ouvrir {
		transition: filter .4s var(--dnr-ease, cubic-bezier(.16, 1, .3, 1));
	}

	.dnr-psg.dnr-psg .dnr-psg__vis[open] figure {
		animation: dnr-psg-vis .45s var(--dnr-ease, cubic-bezier(.16, 1, .3, 1)) both;
	}
}