/*																										*/
/* CSS GENERAL  								mobile et fixe											*/
/*												créée le 	: 	25 juillet	2017						*/
/*												modifiée le : 	08 mars  	2026 (v3)					*/
/*																										*/

/* --- Pour tous supports																COD001		--- */
/* --- Mobiles 																			COD002		--- */
/* --- Ordinateurs 																		COD003		--- */
/* --- Pour tous supports (suite)														COD004		--- */

/* --- 																								--- */
/* --- 					Tous supports													COD001		--- */
/* --- 																								--- */

/* --- 					Html																		--- */

html					{	font-family			: Montserrat, Century Gothic, Helvetica, Arial, sans-serif;
							margin				: 0;
							padding				: 0;
}
	
body					{	display				: flex;
							flex-direction		: column;
							align-items			: center;
							margin				: 0 auto 0 auto;
							padding				: 0 0 0 0;
							background-size		: cover;
							background-position	: center;
							background-attachment: fixed;
						}

/* --- 					Fonds par défaut															--- */
						
#index, #rose, 
#bleu, #contact			{	background-image	: url('images/background-blanc-001.gif');}							

/* --- 					Header																		--- */
							
header					{	text-align			: center;}							
							
.logo					{	max-width			: 100%;
							height				: auto;}

.menu					{	text-align			: center;
							margin				: 0;
							padding				: 0;
							border				: 0px solid #FFFFFF;
						}

/* Police : light																						 */

@font-face 				{	font-family			: 'Montserrat';
							src					: url('1_fonts/montserrat-light.ttf') format('woff2');
							font-weight			: 300;
							font-style			: normal;
							font-display		: swap;}

/* Police : regular 																					*/

@font-face				{	font-family			: 'Montserrat';
							src					: url('1_fonts/montserrat-regular.ttf') format('woff2');
							font-weight			: 400;
							font-style			: normal;
							font-display		: swap;}

/* Police : medium 																						*/

@font-face				{	font-family			: 'Montserrat';
							src					: url('1_fonts/montserrat-medium.ttf') format('woff2');
							font-weight			: 500; 
							font-style			: normal;
							font-display		: swap;}

strong, b 				{	font-weight: 500;}					

/* Titres & sous-titres	H1, H2, H3 																		*/

h1, h2, h3,  h4			{	display				: inline;			font-size			: 1em;}
h1, h2					{	color 				: #1A1A1A;			font-weight			: 500;}												
h3, h4					{	color 				: #000000;			font-weight			: 400;}							

/* Initialisation de l'affichage des blocs pour Fixe Mobile et Tablette									*/

.only_f,
.only_m,
.only_t 				{	display				: none;}	

/* Affichage des blocs autorisé pour : Mobiles		0-767												*/

@media screen and (max-width: 767px)
	{.only_m 			{	display				: block;}}

/* Affichage des blocs autorisé pour : Tablettes	167-1024											*/

@media screen and (min-width: 767px) and (max-width: 1024px)
	{.only_t 			{	display				: block; }}	

/* Affichage des blocs autorisé pour : Ordinateur	1025-infini											*/

@media screen and (min-width: 1025px)
	{.only_f 			{ 	display				: block; }}						
	
/* Réaction des liens	Opacity																			*/	

a:link					{	text-decoration		: none; 	color : #000000;	opacity	: 1; 	-webkit-transition-duration : 0.3s;}
a:hover					{	text-decoration		: none; 	color : #000000;	opacity	: 0.5; 	-webkit-transition-duration : 0.3s;}
a:visited				{	text-decoration		: none;		color : #000000;}	
	
/* Réaction des liens	Neutres																			*/	
	
a.neutre:link			{	text-decoration		: none;	opacity	: 1;}
a.neutre:hover			{	text-decoration		: none;	opacity	: 1;}
a.neutre:visited		{	text-decoration		: none;	opacity	: 1;}

.diapo_mob,
.diapo_fix				{	margin				: 0;
							margin				: 0;		
							position			: relative;
							overflow			: hidden;
							border-radius		: 7px;}
							
.plan_centrer_txt		{	width				: 85%;		
							margin-left			: auto;
							margin-right		: auto;}
							
/* Page images																							*/
							
.plan_centrer_image	 	{	display				: flex;  
							align-items			: center;   
							justify-content		: center; 
							gap					: 20px;}

.plan_centrer_image img {	display				: block;
							height				: auto;}
							
	
	
/* Gestion du fondu du diaporama 																		*/
	
.fondu					{	position			: absolute;
							top					: 0;
							left				: 0;
							width				: 100%;
							height				: 100%;
							background-size		: contain;
							background-repeat	: no-repeat;
							background-position	: center;
							opacity				: 0;
							border-radius 		: 7px;
							
							/* Correctifs de rendu Chrome + Firefox										*/
							
							will-change			: opacity;
							-webkit-backface-visibility	: hidden;
							backface-visibility	: hidden;
							
							/* Animation sans "both" pour éviter les blocages Chrome 					*/
							
							animation			: fondu-universel 30s linear infinite;}	
						
/* Délais : 6s d'intervalle																			 	*/

.fondu:nth-child(1) 	{	animation-delay		: 0s;	}
.fondu:nth-child(2) 	{	animation-delay		: 6s;	}
.fondu:nth-child(3) 	{	animation-delay		: 12s;	}
.fondu:nth-child(4) 	{	animation-delay		: 18s;	}
.fondu:nth-child(5) 	{	animation-delay		: 24s;	}

/* Animation recalculée (3.33% = 1s sur 30s)														 	*/

@keyframes fondu-universel
						{	0% 		{ opacity	: 0; }
							3.33% 	{ opacity	: 1; }
							20% 	{ opacity	: 1; }
							23.33% 	{ opacity	: 0; }
							100% 	{ opacity	: 0; } }
	
/* Bords arrondis														 								*/
		
.border_5				{	-webkit-border-radius : 5px; 	-moz-border-radius : 5px; 	border-radius : 5px;}
.border_7				{	-webkit-border-radius : 7px; 	-moz-border-radius : 7px; 	border-radius : 7px;}
.border_10				{	-webkit-border-radius : 10px; 	-moz-border-radius : 10px; 	border-radius : 10px;}
	
/* Articles																								*/

.article_titre			{	display				: inline-block; /* Permet de rester sur la ligne 		*/
							padding				: 0.7em;		/* Donne de l'air au txt à l'int du blc */
							background-color	: #F8F8F8;
							border				: 1px solid #c0c0c0;
							width				: 100%;			/* S'assure de prendre toute la largeur */	
							margin				: 0;			/* Supprime les espaces parasites 		*/
							text-align			: center;
							box-sizing			: border-box;	/* Indispensable						*/	
						}
						
.article_texte			{	display				: inline-block; /* Permet de rester sur la ligne 		*/
							padding				: 1em;			/* Donne de l'air au txt à l'int du blc */
							background-color	: #FFFFFF;
							border				: 1px solid #c0c0c0;
							width				: 100%;			/* S'assure de prendre toute la largeur */	
							margin				: 0;			/* Supprime les espaces parasites 		*/
							box-sizing			: border-box;	/* Indispensable						*/	
							flex				: 1;
						}

.article_texte_video	{	display				: flex;  
							padding				: 1em;			/* Donne de l'air au txt à l'int du blc */
							background-color	: #FFFFFF;
							border				: 1px solid #c0c0c0;
							width				: 100%;			/* S'assure de prendre toute la largeur */	
							margin				: 0;			/* Supprime les espaces parasites 		*/
							box-sizing			: border-box;	/* Indispensable						*/	
							flex				: 1;
							gap					: 20px;
						}						
							
.article_admin			{	display				: flex; 		/* Permet de rester sur la ligne 		*/
							font-size			: 0.8em;
							gap					: 1em;
							padding				: 0.7em;		/* Donne de l'air au txt à l'int du blc */
							background-color	: #F3F3F3;
							border				: 1px solid #c0c0c0;
							width				: 100%;			/* S'assure de prendre toute la largeur */	
							margin				: 0;			/* Supprime les espaces parasites 		*/
							text-align			: left;
							box-sizing			: border-box;	/* Indispensable						*/	
							}
							
/* Photos																								*/

.photo_bright			{	-webkit-transition-duration	: 0.3s; 	filter 	: opacity(1.00);}
.photo_bright:hover		{	-webkit-transition-duration	: 0.3s; 	filter 	: opacity(0.90);}	

.photo_zoom 			{	transform			: scale(1.00);}	
.photo_zoom:hover 		{	transform			: scale(1.02);}	

.img_zoom				{	cursor 				: url(2_scripts/cursors/curseur_plus.cur), pointer;}	
.img_zoom_large			{	cursor 				: url(2_scripts/cursors/curseur_moins.cur), pointer;
							max-width			: none !important; 
							box-sizing			: border-box;}
.img_zoom_border
						{	border 				: 15px solid #FFFFFF;
							box-shadow			: 10px 10px 20px #595959;
							border-radius		: 7px;
						}	
						
/* Miniatures														 									*/						


.miniature				{	flex				: 1;
							display				: block;
							width				: 100%;
							height				: 100%;
							padding				: 0;
							border				: 0;
						}
							
.miniature img			{	object-fit			: cover;
							display				: block;
							width				: 100%;
							height				: auto;
						}							
							
			
/* Vidéos																								*/

.container_video		{	position			: relative;
							width				: 100%;
							padding-bottom		: 56.25%; 							/* Ratio 16:9 		*/
							height				: 0;
							overflow			: hidden;
							border-radius		: 7px; 								/* Coins arrondis 	*/
							box-shadow			: 0 10px 30px rgba(0, 0, 0, 0.15); 	/* Ombre douce		*/
							margin				: 0 0 1em 0;}

.container_video iframe	{	position			: absolute;
							top					: 0;
							left				: 0;
							width				: 100%;
							height				: 100%;
							border				: none;}
						
.vignettes_f,
.vignettes_m 			{	flex				: 1;
							width				: 100%;
							height				: 100%;
							padding				: 0;
							border				: 0;}
							
.vignettes_f img,
.vignettes_m img 		{	object-fit			: cover; 
							width				: 100%;
							height				: 100%;}							
													

/* Tout le reste																						*/

.retour_ligne			{	margin-top			: 0.8em;}	

.saut_ligne_mini 		{	margin				: 0.5em;}
.saut_ligne_simple 		{	margin				: 1.0em;}	
.saut_ligne_double 		{	margin				: 1.5em;}	
.saut_ligne_triple 		{	margin				: 2.0em;}
.saut_ligne_max			{	margin				: 2.5em;}	

.container_trait		{	width				: 40%; text-align : center;}

.trait					{	background-color	: #C0C0C0;
							height				: 1px;
							
							margin				: 0;}

.text_left				{	text-align			: left;}
.text_center			{	text-align			: center;}

.prestations dt 		{	margin				: 0 0 1em 0;}

.prestations dd 		{ 	margin-left			: 30px;}
						

.rond 					{	width				: 5px;          	/* Largeur 							*/
							height				: 5px;         		/* Hauteur (doit être égale à la largeur) */
							margin				: 0 0.5em 0 0;
							background-color	: black; 			/* Couleur de fond 					*/
							border-radius		: 50%;   			/* C'est ici que la magie opère 	*/
							display				: inline-block; 	/* Pour l'aligner facilement avec du texte */
							vertical-align		: 0.18em;}
							
.rond_admin				{	width				: 10px;          	/* Largeur							 */
							height				: 10px;         	/* Hauteur (doit être égale à la largeur) */
							margin				: 0 0.5em 0 0;
							background-color	: red; 				/* Couleur de fond 					*/
							border-radius		: 50%;   			/* C'est ici que la magie opère 	*/
							display				: inline-block; 	/* Pour l'aligner facilement avec du texte */
							vertical-align		: 0;}
							
/*  Miniatures vidéo																					*/							


.video_miniature		{	position			: relative;
							display				: inline-block;}

.video_miniature::after	{	content				: '';
							position			: absolute;
							top					: 50%;
							left				: 50%;
							transform			: translate(-50%, -50%);

							width				: 60px;
							height				: 60px;
							background-color	: rgba(255, 255, 255, 0.4);
							border-radius		: 50%;

							-webkit-mask-image	: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M35 30 L75 50 L35 70 Z' /%3E%3C/svg%3E"), 
											radial-gradient(circle, white 100%, black 100%);
							-webkit-mask-composite: destination-out;
							mask-composite: exclude;

							transition			: all 0.3s ease;
							pointer-events: none;
						}							


/* 	video																								 */

.youtube_video 			{	position			: relative;
							width				: 100%;
							cursor				: pointer;
							aspect-ratio		: 16 / 9;
						}

.youtube_vignette
						{	display				: block; 
							width				: 100%;
							height				: 100%;
							object-fit			: cover;
						}

.youtube_bouton			{	position			: absolute;
							top					: 50%;
							left				: 50%;
							transform			: translate(-50%, -50%);
							width				: 10em;
							height				: 10em;
							background			: rgba(255, 255, 255, 0.3);
							border-radius		: 50%;
						}
						
.youtube_bouton:hover	{	opacity				: 0.8;}							

.youtube_triangle 		{	position			: absolute;
							top					: 26%;
							left				: 32%;
							width				: 5em;
							height				: 5em;
							background-color	: #000000;
							clip-path			: polygon(50% 0%, 0% 100%, 100% 100%);
							transform			: rotate(90deg);
							opacity				: 0.1;
						}
						

/* --- 																								--- */
/* --- 					Ordinateurs 			[768 -> infini]							COD003		--- */
/* --- 																								--- */

@media screen and (min-width: 768px)
	{
		
	/* Police 																			Ordinateur		*/
	
	@font-face			{	font-family			: 'Montserrat';
							src					: url('1_fonts/montserrat-light.ttf')  format('truetype');
							font-display		: swap;}			
		
	/* Body 																			Ordinateur		*/
	
	body				{	background-color	: #FFFFFF;
							font-size			: 14px;				
							line-height			: 20px;					
							text-align			: justify;			
							font-family			: 'Montserrat', sans-serif;
							font-weight			: 300;}
						
	#index				{	background-image	: url('images/background-mariage-001.jpg');}
	#rose				{	background-image	: url('images/background-mariage-001.jpg');}
	#bleu				{	background-image	: url('images/background-mariage-001.jpg');}
	#contact			{	background-image	: url('images/background-mariage-001.jpg');}
							
	.container			{	width				: 95%;
							max-width			: 1000px;
							margin				: 0;}	
							
	.logo				{	margin				: 1.5em 0 0.5em 0;}
	
	.menu_off			{	color				: #000000;}		
	.menu_focus			{	color				: #808080;}	
	

	
	
	
	
	/* Espace entre le fondu et l'article												Ordinateur		*/

	.article_esp		{	display				: flex;
							gap					: 20px;}
		
	.article_esp > div	{	flex				: 1;
							padding				: 0px;
							border				: 0;}
							
	/* Galerie de photos et de vidéos													Ordinateur		*/
	
	.galerie_photo,
	.galerie_video		{	display				: grid;
							grid-template-columns: repeat(4, 1fr);
							gap					: 15px;}

	.galerie_tarifs		{	display				: grid;
							grid-template-columns: repeat(2, 1fr);
							gap					: 10px;}						

	.galerie_photo_small{	display				: grid;
							grid-template-columns: repeat(7, 1fr);
							gap					: 15px;}								
	
	/* --- Divers 																		Ordinateur		*/
	
	.espaces			{	word-spacing		: 20px;}
	.cacher_fix			{	display				: none;}			/* cacher la partie Ordinateur		*/		
	
	.menu_off			{	color				: #000000;}		
	.menu_focus			{	color				: #808080;}	
	
	.menu_off,
	.menu_focus			{	font-size			: 2.0em;			/* taille de la police des menus	*/
							line-height			: 1.5em;			/* écart entre les lignes			*/
						}							
	
	.diapo_fix			{	width				: 380px;
							max-width			: 380px;
							height				: 380px;
							max-height			: 380px;}
							
	}
	
	
	
	
	

/* --- 																								--- */
/* --- 					Mobiles 				[000 -> 767]							COD002		--- */
/* --- 																								--- */

@media screen and (max-width: 767px)
	{
		
	/* Body 																			Mobile			 */
	
	body				{	font-display		: swap;
							font-size			: 14px;
							line-height			: 21px;
							font-family			: 'Montserrat', sans-serif;
							font-weight			: 400;						
						}	
						
	/* Fonds selon les pages															Mobile			*/

	#index				{	background-image	: url('images/background-captation-004.jpg');}
	#rose				{	background-image	: url('images/background-captation-004.jpg');}
	#bleu				{	background-image	: url('images/background-captation-004.jpg');}
	#contact			{	background-image	: url('images/background-captation-004.jpg');}						
	
	.container			{	width				: 92%;
							max-width			: 767px;
							margin				: 0.4em;}	
							
	.logo				{	margin				: 0.5em 0 1em 0;}
	
	/* Réaction des liens																Mobile			*/	

	a:link				{	text-decoration		: none;		color	: #000000;}
	a:hover				{	text-decoration		: none;		color	: #000000;}
	a:visited			{	text-decoration		: none;		color	: #000000;}	
	
	/* Galerie de photos																Mobile			*/
	
	.galerie_photo		{	display				: grid;
							grid-template-columns: repeat(3, 1fr);
							gap					: 10px;}
							
	/* Galerie de videos																Mobile			*/
	
	.galerie_video		{	display				: grid;
							grid-template-columns: repeat(2, 1fr);
							gap					: 10px;}							
	
	/* Divers 																			Mobile			*/
	
	.espaces			{	word-spacing		: 10px;}
	.article_esp		{	flex-direction		: column;} 			/* Empile diapo et article 			*/	
	.cacher_mob			{	display				: none;}			/* cacher la partie Mobile			*/		
	
	
	
	.diapo_mob			{	width				: 100%;
							aspect-ratio		: 68 / 40;
							background-size		: cover;}
													
	.container_menu		{	display				: grid;
							grid-template-columns:repeat(3, 1fr);
							gap					: 13px;
							margin				: 0;			/* Supprime les espaces parasites 		*/
							text-align			: center;
							box-sizing			: border-box;	/* Indispensable						*/	
							
						}
	
	a:link				{	text-decoration	: none; 	color : #000000; opacity : 0.8;}
	a:hover				{	text-decoration	: none; 	color : #5B4835; opacity : 0.8;}
	a:visited			{	text-decoration	: none;		color : #000000; opacity : 0.8;}	
			
	.logo,
	
	
	/* Menus																							*/
	
	.menu_m_on,
	.menu_m_off			{	border				: 1px solid #000000;
							opacity				: 0.8;
						}
	
	
	.menu_m_on,
	.menu_m_off			{   display				: flex; 
							height				: 3em;
							justify-content		: center;
							align-items			: center;
							font-size			:1.1em;
						}

	.logo,
	.menu_m_on			{	background-color	: #EDE5DB;}							
		
	.menu_m_off			{	background-color	: #E2D3BC;}					
								
	.saut_menu_m		{	padding				: 0.3em;}
	
	.menu_m_intro		{	padding				: 1em;			/* Donne de l'air au txt à l'int du blc */
							background-color	: #FFFFFF;
							border				: 1px solid #c0c0c0;
							width				: 100%;			/* S'assure de prendre toute la largeur */	
							margin				: 0;			/* Supprime les espaces parasites 		*/
							box-sizing			: border-box;	/* Indispensable						*/	
							
							text-align			: left;
							font-size			: 0.9em;
							line-height			: 18px;
							
						}	
							
	.youtube_bouton		{	width				: 6em;
							height				: 6em;
						}

	.youtube_triangle 	{	width				: 3em;
							height				: 3em;
						}
	
	
	}
	



/* --- 																								--- */
/* --- 					Tablettes 				[767 -> 1024]							COD003b		--- */
/* --- 																								--- */

@media screen and (min-width: 767px) and (max-width: 1024px) 
	{
		
	/* Body 																			Tablette		*/
	
	body				{	font-size			: 18px;				
							line-height			: 26px;				
							text-align			: left;
							font-weight			: 400;
							background-color	: #FFFFFF; 
						}
						
	/* Fonds selon les pages															Tablette		*/
	
	#index				{	background-image	: url('images/background-mariage-001.jpg');}
	#rose				{	background-image	: url('images/background-mariage-001.jpg');}
	#bleu				{	background-image	: url('images/background-mariage-001.jpg');}
	#contact			{	background-image	: url('images/background-mariage-001.jpg');}					

	.menu_off			{	color				: #000000;}		
	.menu_focus			{	color				: #808080;}						
		
	.diapo_fix			{	width				: 270px;
							max-width			: 270px;
							height				: 270px;
							max-height			: 270px;}	
	
	.menu_off,
	.menu_focus			{	font-size			: 1.4em;			/* taille de la police des menus	*/
							line-height			: 1.8em;}			/* écart entre les lignes			*/	
							
	
	.galerie_video		{	display				: grid;
							grid-template-columns: repeat(3, 1fr);
							gap					: 15px;}						
	
	
	}