/* ==================== MEDIA QUERIES & RESPONSIVE ==================== */

@media (min-width: 1025px) and (max-width: 1900px) {
	body {
		font-size: 0.7em;
	}

	p {
		font-size: 1.16em;
	}

	h1 {
		font-size: 0.36em;
	}
}

@media (max-width: 1024px) {
	body {
		font-size: 0.8em;
		padding: 0 1%;
		margin-top: 0;
		border-width: thin;
	}

	p {
		font-size: 1.2em;
		margin: auto;
	}

	h1 {
		font-size: 0.6em;
	}

	.container {
		width: 92%;
		max-width: 980px;
		margin: 0 auto -10px;
		padding: 0 1%;
	}

	.page-borders {
		padding: 12px 0.8em 80px;
	}

	.header h1 {
		font-size: 2.6em;
	}

	.header p {
		font-size: 1.3em;
	}

	.nav-list > li {
		font-size: 1.4em;
		padding: 0 0.4em;
	}

	.galerie {
		justify-content: center;
	}

	.galerie-painting img {
		height: 180px;
	}

	.image-caption {
		font-size: 2.2em;
	}

	.frame-galerie {
		border-width: 6px 8px var(--border-width-thick);
		box-shadow: 0 -1px 1px var(--frame-light),
					-1px 0 1px var(--frame-top),
					1px 0 1px var(--frame-bottom),
					0 1px 1px var(--frame-dark),
					1px 2px 8px var(--color-shadow);
	}

	/* Cadre plus large pour la peinture principale de index.php */
	.featured-painting .frame-white,
	.featured-painting .frame-silver,
	.featured-painting .frame-gold {
		border-width: 22px;
	}

	/* Styles de cadres 3D (blanc, argent, or) */
	.frame-white,
	.frame-silver,
	.frame-gold {
		border-width: 8px;
	}
}

@media (max-width: 768px) {
	body {
		font-size: 0.78em;
		padding: 0 1%;
		margin-top: 0;
		border-width: thin;
	}

	.container {
		width: 96%;
		border-width: thin;
		padding: 0 0.6em;
		margin: 0 auto -8px;
	}

	.page-borders {
		border-width: thin;
		padding: 10px 0.6em 64px;
	}

	.header h1 {
		font-size: 2.1em;
	}

	.header p {
		font-size: 1.1em;
	}

	.nav-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
		padding: 0 6px;
	}

	.nav-list > li {
		font-size: 1.2em;
		margin: 2px 4px;
		display: inline-flex;
	}

	.galerie-painting img {
		height: 160px;
	}

	.image-caption {
		font-size: 1.6em;
	}

	.frame-galerie {
		border-width: 6px 6px var(--border-width-thick);
		box-shadow: 0 -1px 1px var(--frame-light),
					-1px 0 1px var(--frame-top),
					1px 0 1px var(--frame-bottom),
					0 1px 1px var(--frame-dark),
					1px 2px 8px var(--color-shadow);
	}

	.painting-nom {
		white-space: normal;
	}

	/* Cadre plus large pour la peinture principale de index.php */
	.featured-painting .frame-white,
	.featured-painting .frame-silver,
	.featured-painting .frame-gold {
		border-width: 14px;
	}

	/* Styles de cadres 3D (blanc, argent, or) */
	.frame-white,
	.frame-silver,
	.frame-gold {
		border-width: 6px;
	}
}

@media (max-width: 480px) {
	body {
		font-size: 0.76em;
		padding: 0 6px;
		margin-top: 0;
		border-width: thin;
	}

	p, h1, h3 {
		font-size: 1.3em;
		margin: auto;
	}

	.container {
		border-width: thin;
		padding: 0 0.4em;
		margin: 0 auto -6px;
	}

	.page-borders {
		border-width: thin;
		padding: 8px 0.4em 48px;
	}

	.painting {
		margin: 4px 0;
	}

	.header h1 {
		margin: 2px 0.3em;
		font-size: 1.9em;
	}

	.header p {
		font-size: 1em;
	}

	.nav-list > li {
		font-size: 1.1em;
		margin: 2px 4px;
	}

	.galerie {
		gap: 8px;
	}

	.galerie-painting {
		width: 100%;
	}

	.galerie-painting img {
		width: 100%;
		height: auto;
	}

	.image-caption {
		font-size: 1.3em;
	}

	.frame-galerie {
		border-width: var(--border-width-thick) 6px 3px;
	}

	/* Cadre plus large pour la peinture principale de index.php */
	.featured-painting .frame-white,
	.featured-painting .frame-silver,
	.featured-painting .frame-gold {
		border-width: 10px;
	}

	/* Styles de cadres 3D (blanc, argent, or) */
	.frame-white,
	.frame-silver,
	.frame-gold {
		border-width: 4px;
	}
}

@media (max-width: 360px) {
	body {
		font-size: 0.74em;
		padding: 0 2px;
		margin-top: 0;
		border-width: thin;
	}

	p, h1, h3 {
		font-size: 1.3em;
		margin: auto;
	}

	.container {
		border-width: thin;
		padding: 0 0.1em;
		margin: 0.4em;
	}

	.page-borders {
		border-width: thin;
		padding: 4px 0.2em;
	}

	.header h1 {
		margin: 1px 0.4em;
		font-size: 1.8em;
	}

	.nav-list > li {
		font-size: 1.05em;
		margin: 0 6px;
		display: inline-grid;
	}

	.galerie-painting img {
		width: 100%;
		height: auto;
	}

	/* Cadre plus large pour la peinture principale de index.php */
	.featured-painting .frame-white,
	.featured-painting .frame-silver,
	.featured-painting .frame-gold {
		border-width: 6px;
	}

	/* Styles de cadres 3D (blanc, argent, or) */
	.frame-white,
	.frame-silver,
	.frame-gold {
		border-width: 2px;
	}
}