/* ========================================= */
	/* 	Site Jolies Mômes v1 — mai 2026 			*/
	/* ========================================= */

	:root														{
		--screenRatio: calc(100vh / 100vw)			;
		
		--corps-de-base: clamp(16px, 5vw, 24px)	;
		--interligne-de-base: 1.4						;
		
		--fond-general: hsl(43, 30%, 89%)			;
		--fond-de-pied: hsl(34, 54%, 81%)			;
		
		--couleur-texte-base: hsl(0, 0%, 39%)		;
		
		--contraste-primaire: hsl(27, 37%, 39%)	;
		--contraste-secondaire: hsla(27, 37%, 39%, 0.54)	;
		--cerne: hsla(27, 37%, 39%, 0.41)			;
	}


	@font-face 								{
		font-family: 'texteCourant'	;
		src: local('Spectral-Regular.ttf'),
				url('pix/spectral/Spectral-Regular.ttf') format('truetype');
		font-weight: 400					;
		font-style: normal				;
		font-display: swap				;
	}

	@font-face 								{
		font-family: 'texteCourant'	;
		src: local('Spectral-Medium.ttf'),
				url('pix/spectral/Spectral-SemiBold.ttf') format('truetype');
		font-weight: 700					;
		font-style: normal				;
		font-display: swap				;
	}



	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	html {

	font-family: texteCourant, 'Source sans pro'	;
	font-size: 18px		;
	font-size: var(--corps-de-base)					;
	line-height: 1.6		;
	line-height: var(--interligne-de-base)			;
	color: #636363			;
	color: var(--contraste-primaire)					;

	scroll-behavior: smooth								;
	overflow-x: hidden	;
}

	/* =================================== */
	/* =================================== */


body						{

	/* GRID */
	display: block;
	display: grid		;
	grid-gap: 0			;
	min-height: 100vh	;
	grid-template-rows: auto auto 1fr auto	;	/* main = toute la hauteur */

	background-color: #f5e8c7;
	background-color: var(--fond-general)	;
	margin: 0			;
	overflow-x: hidden	;
	width: 100%			;
	
	outline: thin solid var(--cerne)	;
}

h3								{
	margin-bottom: .6rem	;
	padding-left: 1.5rem	;
	
	font-size: 1.3rem		;
	font-style: italic	;
}
h4								{
	font-weight: 700		;
}

p								{
	margin-bottom: 1rem	;
}
	p.ultime					{
		margin-bottom: 0	;
	}

.oblique						{
	font-style: italic	;
}
a								{
	color: inherit			;
	text-decoration: none;
}
.masque			{
	display: none !important	;
	visibility: hidden			;
}

.JM									{
	font-variant: small-caps	;
}


img							{
	border-radius: 6px	;
	outline: thin solid var(--cerne)	;
}
	.basOnly, .illustresSoins img			{
		border-radius: 0 0 6px 6px			;
	}

#carte						{
	border-radius: 6px	;
}
	#carte img					{
		outline: none			;
	}

.blocDistant				{
	margin-top: 3.5rem	;
}
.blocInverse				{
	background-color: #8c6b4a;
	background-color: var(--contraste-primaire)	;
	color: #f5e8c7;
	color: var(--fond-general)							;
}

.unRowExemplaire			{
	display: block;
	display: flex			;
	flex-direction: row	;		/* default */
}

/* ======================================================== */

header										{
	padding: 2rem							;
	text-align: center					;
	font-variant: small-caps			;

	font-size: 1.2rem						;
	color: #8c6b4a;
	color: var(--contraste-primaire)	;
}
	header p									{
		margin-bottom: 0					;
	}



/* =================================== */

nav									{
	padding: 1rem					;
	display: block;
	display: flex 					;
	justify-content: space-between				;
	align-items: center			;		/*vertical*/

	text-align: center			;

	border: 1.5px solid #8c6b4a;
	border: 1.5px solid var(--contraste-primaire)	;
	border-left: unset			;
	border-right: unset			;
	/*outline-width: 12px 0		;*/

	line-height: 1.2				;
	font-variant: small-caps	;
}

	nav div							{
		width: 32%					;
	}
	.navLogo 						{
		width: 7rem					;
		outline: none				;
	}
	nav .lienGauche				{
		text-align: right			;
	}
	nav .lienDroit					{
		text-align: left			;
	}


/* =================================== */

main							{
	padding: 2rem 3rem;
	padding: 7vw 9vw		;
	padding-top: 2rem		;
	max-width: 100%		;
	overflow-x: hidden	;
}
	
	#imageLieu img			{		/*	facultatif ¿¿¿	*/
		width: 100%;
		max-width: 100vw	;
		display: block		;
	}

	#imageLigne img		{
		width: 100%;
		max-width: 100vw	;
		display: block		;
	}

	#texteMineur				{
		width: 100%				;
		padding:	1.6rem 		;
		padding-left: 2rem 	;
		margin-bottom: 1rem	;
	}

	#texteLegende			{
		margin-top: 3rem	;
	}


	#lesmomes						{
		padding: 2rem 3rem;
		padding: 7vw 9vw			;
	}
		#bandeauNosJM					{
			margin-top: 0rem			;
			margin-bottom: 0			;
			padding: 0.3rem 1.2rem	;
			
			p								{		/*	Exemple de nesting. Généraliser.	*/
				margin-bottom: 0		;
				font-size: 1.3rem		;
			}
		}

		.portraitsJM					{
			display: block;
			display: flex				;
			flex-wrap: wrap			;
			gap: 1rem					;
		}
			.portraitsJM div			{
				flex: 0 0 calc(33.333% - 0.667rem)	;
				max-width: calc(33.333% - 0.667rem)	;
			}
			.portraitsJM img			{
				width: 100%				;
				height: auto			;
				-o-object-fit: cover		;
				object-fit: cover		;
			}
			.portraitsJM p				{
				padding-left: 0.5rem	;
				font-size: 0.9rem		;
				font-variant: small-caps;
			}

		#catalogue						{
			margin: 3rem 0				;
		}
		#catalogue .intitulesSoins	{
			display: block;
			display: flex				;
			gap: 1rem					;
			width: 100%					;
			padding: .8rem 0.8rem	;
		}
		  	.intitulesSoins p			{
				margin-bottom: 0		;
				line-height: 1			;
				text-align: center	;
			}
			.illustresSoins			{
				display: flex			;
				gap: 1rem				;
				width: 100%				;
			}
				.illustresSoins img			{
					flex: 1						;
					width: 100%					;
					height: auto				;
					-o-object-fit: contain		;
					object-fit: contain		;
					max-width: calc(100% / 3.1)	;
				}


		#fiche							{
			margin: 1.9rem 0 0 0.4rem	;
			font-size: 1.2rem			;
			line-height: 1.2			;
		}
		#carte					{
			margin: 2rem 0 2rem 0	;
			width: 32rem		;
			width: calc(100vw - 4rem)	;
			max-width: 100%			;
			height: 30rem		;
			height: calc(100vw * 1.5)	;
			outline: 1px solid var(--contraste-primaire)	;
		}


/* =================================== */

	footer						{
		display: block;
		display: flex 			;
		justify-content: space-between			;
		align-items: center	;

		padding: 1rem 3rem;
		padding: 1rem 9vw		;
		background-color: #e8d4b5;
		background-color: var(--fond-de-pied)	;

		font-size: .8rem		;
		font-style: italic	;
		line-height: 1.3		;
	}

		footer a					{
			color: inherit		;
			text-decoration: inherit	;
		}

		footer .adresse		{
			font-style: normal;
		}

		footer #reseaux		{
			display: block;
			display: flex		;
			justify-content: end			;
			-moz-column-gap: 2em	;
			column-gap: 2em	;
		}

		footer p					{
			margin-bottom: 0	;
		}


/* ======================================================== */

@media (max-width: 360px) 		{
	nav									{
		flex-direction: column		;
		gap: 0.75rem				;
	}
		nav div						{
			width: 100%				;
		}
		.navLogo 					{
			width: 4rem				;
		}
		nav .lienGauche			{
			text-align: center		;
		}
		nav .lienDroit				{
			text-align: center		;
		}
		nav a						{
			display: inline-block	;
			padding: 0.5rem 0.75rem	;
			min-height: 44px		;
			font-size: 0.9rem		;
		}

	.illustresSoins				{
		flex-direction: column		;
	}
		.illustresSoins img		{
			max-width: 100%		;
		}

	.portraitsJM div				{
		flex: 0 0 100%				;
		max-width: 100%				;
	}

	footer							{
		flex-direction: column		;
		gap: 1rem					;
		text-align: center			;
		padding: 1.5rem 2vw		;
	}
		footer #reseaux				{
			justify-content: center	;
		}
		footer a					{
			display: inline-block	;
			padding: 0.5rem 0.75rem	;
			min-height: 44px		;
		}
}

@media (min-width: 361px) and (max-width: 480px) 		{
	nav									{
		flex-direction: column		;
		gap: 1rem					;
	}
		nav div						{
			width: 100%				;
		}
		.navLogo 					{
			width: 5rem				;
		}
		nav .lienGauche			{
			text-align: center		;
		}
		nav .lienDroit				{
			text-align: center		;
		}
		nav a						{
			display: inline-block	;
			padding: 0.75rem 1rem	;
			min-height: 44px		;
		}

	
	.portraitsJM div				{
		flex: 0 0 100%				;
		max-width: 100%				;
	}

	.illustresSoins				{
		flex-direction: column	;
	}
		.illustresSoins img		{
			max-width: 100%		;
		}

	footer							{
		flex-direction: column		;
		gap: 1.5rem					;
		text-align: center			;
	}
		footer #reseaux				{
			justify-content: center	;
		}
		footer a					{
			display: inline-block	;
			padding: 0.5rem 0.75rem	;
			min-height: 44px		;
		}
}

/* ======================================================== */

@media (min-width: 1024px) 		{
	:root							{
		--corps-de-base: 16px;
	}
	#over768	{	display: none !important	;	visibility: hidden	;	}
	#over1024	{	display: block !important	;	visibility: visible	;	}


	body							{
		display: block;
		max-width: 1024px		;
		margin: 0 auto			;
	}
		p							{
			margin-bottom: 0	;
		}
		img						{
			width: 100%			;
		}

	main							{
		padding: 2rem			;
		padding-top: 3rem		;
		display: grid			;
		grid-template-areas:
			'majeur majeur lieu lieu lieu'
			'mineur mineur mineur legende legende'
			'ligne ligne ligne ligne ligne'
		;
		gap: 0				;
	}
		#texteMajeur		{	grid-area: majeur	;	}
		#imageLieu			{	grid-area: lieu	;	}
		#texteMineur		{	grid-area: mineur	;	}
		#texteLegende		{	grid-area: legende;	}
		#imageLigne			{	grid-area: ligne	;	}

		#imageLieu img		{
			width: calc(100% - 2rem)	;
			margin: 0 0 1.5rem 2rem		;
		}
		#imageLigne img	{
			width: 100%		;
		}

		#texteMajeur					{
			text-align: justify		;
		}

		#texteMineur				{
			margin-bottom: 0		;
		}

		#texteLegende, #texteMineur	{
			padding:	1.5rem
						1.5rem
						1.6rem
						2.4rem 		;
		}
		#texteLegende				{
			margin: 0				;
			align-content: end	;
		}

		#lesmomes					{
			padding: 2rem			;
		}

		.portraitsJM				{
			width: 100%				;
		}
		.portraitsJM img			{
			width: 100%				;
		}
		.portraitsJM p				{
			margin-top: .5rem		;
			padding-left: 1rem	;
			max-width: auto		;
			font-size: 1.3rem		;
		}
	
	
		#catalogue .intitulesSoins	{
			gap: 4rem					;
		}

	
	
		#zoneDeContact				{
			display: grid			;
			grid-template-areas:
				'carte carte fiche'
		}
			#fiche					{
				grid-area: fiche	;
			}
			#carte					{
				grid-area: carte	;
			}
			#fiche							{
				margin: 4rem 0 0 4.5rem	;
				font-size: 1.2rem			;
			}
				#fiche h4					{
					margin-bottom: 1rem	;
					font-size: 1.4rem		;
				}
				#fiche p.adresse			{
					margin-bottom: 1rem	;
				}
	
			#carte							{
				width: 33rem				;
				height: 33rem				;
			}


	footer						{
		margin-top: 4rem		;
		padding: 1rem 3vw		;
		font-size: 1rem		;
		line-height: 1.5		;
	}
}
/* =============================================================== */
/* =============================================================== */