/* Liste des brèves (breves-generator.php) : tuiles en liens, et la brève ouverte dans un <dialog> (js/breves.js).
   Le reste de la liste est dans styleMobile2/Desktop2/Wide2.css. */

/* Tuiles en <a> (c'étaient des <button>) : même rendu */
a.brevesImage {
	color: #FFF;
	text-align: left;
}

/* La brève dans un <dialog>, plein écran sur iPhone */
#breveDialog {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #FFF;
	overflow: auto;
	overscroll-behavior: contain;
	outline: none;
}
#breveDialog::backdrop { /* Transparent sur iPhone : un voile sombre fait clignoter les barres de Safari */
	background: transparent;
}
html:has(#breveDialog[open]) { /* La liste ne défile pas sous la brève */
	overflow: hidden;
}

@media screen and (min-width: 500px) {
	a.brevesImage {
		overflow: hidden;
		vertical-align: top;
	}
	a.brevesImage img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 0;
	}

	#breveDialog { /* Même cadre que l'ancienne fenêtre */
		width: 600px;
		height: calc(100% - 40px);
		margin: 20px auto;
	}
	#breveDialog::backdrop {
		background: rgba(0, 0, 0, 0.80);
	}
	#breveDialog[open], #breveDialog[open]::backdrop {
		animation: breveDialogApparait .25s ease-out;
	}
	@keyframes breveDialogApparait {
		from { opacity: 0; }
	}
}

#brevesLightboxTopTitre { /* Titre en h1 dans la fenêtre : sans la marge du bas des h1 (l'ancienne fenêtre avait un div) */
	margin-bottom: 0;
}