:root
{
	--color-bg : #faf8f5;
	--color-bg-alt : #f1ede6;
	--color-text : #241f1c;
	--color-text-soft : #726c64;
	--color-accent : #a9812f;
	--color-accent-dark : #8a6a22;
	--color-border : rgba(36, 31, 28, 0.1);
	--font-display : 'Cormorant Garamond', Georgia, serif;
	--font-body : 'Jost', 'Helvetica Neue', Arial, sans-serif;
	--transition : 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	--shadow-sm : 0 2px 14px rgba(36, 31, 28, 0.08);
	--shadow-md : 0 10px 30px rgba(36, 31, 28, 0.12);
	--shadow-lg : 0 22px 50px rgba(36, 31, 28, 0.2);
	--radius-sm : 6px;
	--radius-md : 14px;
}

html
{
	scroll-behavior : smooth;
}

 body
{
		font-family: var(--font-body);
		background : var(--color-bg);
		color : var(--color-text);
		margin  : 0;
		padding : 0;
		font-size : 1.15em;
		line-height : 1.6;
		-webkit-font-smoothing : antialiased;
}

.reveal
{
	opacity : 0;
	transform : translateY(24px);
	transition : opacity 0.8s ease, transform 0.8s ease;
}

.reveal.is-visible
{
	opacity : 1;
	transform : translateY(0);
}

h1, h3
{
	font-family : var(--font-display);
}

img
{
	max-width : 100%;
}

@media all and (min-width: 1250px)
{
	#Maman
	{
		font-size : 1.6em;
		width : 24%;
	}

	.Pages
	{
		padding: 17px;
		font-size : 1.1em;
	}
	.Galerie
	{
		width : 70%;
		column-count : 4;
	}
	.container
	{
		height: 45vh;
	}
	
	.container .box
	{
		line-height : 45vh;
	}
	#APropos
	{
	font-size : 1.4em;
	}
	
	.Description2
	{
	font-size : 1em;
	}
	
	.Actualite
	{
	font-size : 1em;
	}
	
	.Actu
	{	
		font-size : 1.3em;
	}
	
	.ActEnTete
	{
		font-size : 1em;
	}
}



@media all and (min-width: 950px) and (max-width: 1100px)
{
	#Maman
	{
		font-size : 1.4em;
		width : 30%;
	}

	.Pages
	{
		padding:10px;
		font-size : 1em;
	}
	.Galerie
	{
		width : 75%;
		column-count : 3;
	}
	.container
	{
		height: 33vh;
	}
		
	.container .box
	{
		line-height : 33vh;
	}
	
	#APropos
	{
	font-size : 1.2em;
	}
	
	.Description2
	{
	font-size : 0.9em;
	}
	
	.Actualite
	{
	font-size : 0.9em;
	}
	.Actu
	{	
		font-size : 1.2em;
	}
	
	.ActEnTete
	{
		font-size : 0.9em;
	}
}

@media all and (min-device-width: 480px) and (max-width: 950px)
{
	#Maman
	{
		font-size : 1.2em;
		width : 30%;
	}

	.Pages
	{
		padding:8px;
		font-size : 0.8em;
	}
	.Galerie
	{
		width : 85%;
		column-count : 2;
	}
	.container
	{
		height: 25vh;
	}
		
	.container .box
	{
		line-height : 25vh;
	}
	#APropos
	{
	font-size : 1em;
	}
	.Description2
	{
	font-size : 0.8em;
	}
	
	.Actualite
	{
	font-size : 0.8em;
	}
	
	.Actu
	{	
		font-size : 1.1em;
	}
	
	.ActEnTete
	{
		font-size : 0.8em;
	}
}

@media all and (min-width: 1100px) and (max-width: 1250px)
{
	#Maman
	{
		font-size : 1.6em;
		width : 30%;
	}

	.Pages
	{
		padding: 17px;
		font-size : 1.1em;
	}
	.Galerie
	{
		width : 70%;
		column-count : 3;
	}
	.container
	{
		height: 45vh;
	}
	
	.container .box
	{
		line-height : 45vh;
	}
	#APropos
	{
	font-size : 1.4em;
	}
	
	.Description2
	{
	font-size : 1em;
	}
	
	.Actualite
	{
	font-size : 1em;
	}
	
	.Actu
	{	
		font-size : 1.3em;
	}
	
	.ActEnTete
	{
		font-size : 1em;
	}
}

@media all and (max-device-width: 480px)
{
    	#Maman
	{
		font-size : 1.4em;
		width : 30%;
	}

	.Pages
	{
		padding:10px;
		font-size : 1em;
	}
	.Galerie
	{
		width : 90%;
		column-count : 1;
	}
	.container
	{
		height: 15vh;
	}
		
	.container .box
	{
		line-height : 15vh;
	}
	
	#APropos
	{
	font-size : 1.2em;
	}
	
	.Description2
	{
	font-size : 0.9em;
	}
	
	.Actualite
	{
	font-size : 0.9em;
	}
	.Actu
	{	
		font-size : 1.2em;
	}
	
	.ActEnTete
	{
		font-size : 0.9em;
	}
}

#Maman
	{
		padding-left : 1%;
		margin-right : 0.1%;
		padding-right : 0;
	}

#Maman span
	{
		font-size : 0.6em;
		padding-left : 1%;
		text-align: center;
	}

.Pages
	{
		margin:0px;
		text-align : center;
		height : 43px;
		line-height : 43px;
		position : relative;
	}

.Pages::after
{
	content : '';
	position : absolute;
	left : 50%;
	bottom : 6px;
	width : 0;
	height : 1px;
	background : var(--color-accent);
	transition : width var(--transition), left var(--transition);
}

.Pages:hover::after
{
	width : 60%;
	left : 20%;
}

.ActEnTete
	{
		margin-top : 0;
		text-decoration: none;
		font-weight : 500;
		font-family : var(--font-body);
		color : var(--color-bg);
		background : var(--color-text);
		padding : 0 22px;
		margin-left : 2%;
		height : 40px;
		line-height : 40px;
		border-radius : 999px;
		transition : background var(--transition), transform var(--transition), box-shadow var(--transition);
	}

.ActEnTete:hover
	{
		background : var(--color-accent-dark);
		transform : translateY(-2px);
		box-shadow : var(--shadow-sm);
	}

.container
{
	margin-top : 0px;
	width : 100%;
	display : flex;
	box-sizing : border-box;	
}


.container .box
{
	width : 25%;
	text-align : center;
	vertical-align : top ;
	flex-grow : 1;
	background-size : cover;
	background-position : center;
	transition : flex-grow var(--transition), filter var(--transition);
	filter : saturate(0.85) brightness(0.92);
	margin : 0;
	padding : 0;
}

#APropos
{
	margin-top : 100px;
	text-align: center;	
	margin-bottom : 2em;
}
	
h3
{
	margin-left : 5%;
	font-size : 1em;
}

a
{
	display : block;
	color : inherit;
}

h2
{
	margin : 0;
	padding : 0;
	line-height : 15vh;
	font-size : 0.8em;
	font-family : var(--font-body);
	transition : var(--transition);
	color: #000;
	text-decoration : none;
}

h2 span
{
	background : rgba(36, 31, 28, 0.25);
	width : 100%;
	transition : var(--transition);
	color: #fff;
	padding: 10px 25px;
	text-transform : uppercase;
	letter-spacing : 3px;
	font-weight : 500;
}

h2 a
{
	color: white;
	text-decoration : none;
}


figcaption
{
 margin-top:2px;
 color:#252424;
}

#Sommaire
{
	display : flex;
	list-style-type: none;
	height : 70px;
	background-color : transparent;
	color : var(--color-text);
    justify-content : center;
	align-items : center;
	font-size : 0.9em;
	width : 100%;
	flex-wrap : wrap;
	padding-left : 0%;
}

header
{
	display : flex;
	height : 80px;
	color : var(--color-text);
    justify-content : space-between;
	align-items : center;
	position : fixed;
	top : 0;
	width : 100%;
	box-sizing : border-box;
	margin-top : 0;
	margin-bottom : 10px;
	background-color : var(--color-bg);
	border-bottom : 1px solid transparent;
	box-shadow : none;
	transition : box-shadow var(--transition), border-color var(--transition);
	z-index : 100;
}

header.is-scrolled
{
	border-bottom-color : var(--color-border);
	box-shadow : var(--shadow-sm);
}

.nav-panel
{
	display : flex;
	flex : 1;
	justify-content : flex-end;
	align-items : center;
	gap : 24px;
	min-width : 0;
}

.menu-toggle
{
	display : none;
	flex-direction : column;
	justify-content : center;
	align-items : stretch;
	gap : 5px;
	width : 32px;
	height : 32px;
	margin-right : 4%;
	padding : 0;
	border : none;
	background : none;
	cursor : pointer;
	flex-shrink : 0;
}

.menu-toggle span
{
	display : block;
	height : 2px;
	width : 100%;
	background : var(--color-text);
	border-radius : 2px;
	transition : var(--transition);
}

header.menu-open .menu-toggle span:nth-child(1)
{
	transform : translateY(7px) rotate(45deg);
}

header.menu-open .menu-toggle span:nth-child(2)
{
	opacity : 0;
}

header.menu-open .menu-toggle span:nth-child(3)
{
	transform : translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px)
{
	.menu-toggle
	{
		display : flex;
	}

	.nav-panel
	{
		display : none;
	}

	header.menu-open .nav-panel
	{
		display : flex;
		flex-direction : column;
		align-items : center;
		gap : 6px;
		position : fixed;
		top : 80px;
		left : 0;
		right : 0;
		max-height : calc(100vh - 80px);
		overflow-y : auto;
		background : var(--color-bg);
		box-shadow : var(--shadow-md);
		padding : 18px 0 28px;
	}

	header.menu-open #Sommaire
	{
		flex-direction : column;
		height : auto;
		gap : 2px;
		width : 100%;
	}

	header.menu-open .Pages
	{
		height : auto;
		line-height : normal;
		padding : 12px 0;
		width : 100%;
	}

	header.menu-open .ActEnTete
	{
		margin : 6px 0 0 0;
	}

	header.menu-open #links
	{
		margin : 14px 0 0 0;
	}
}



.Suivant
{
    align-self: center;
    margin-left: 0;
}
.Precedent_Paysage
{
	align-self: center;
	margin-left : 1%;
}

.Precedent_Portrait
{
	align-self: center;
	margin-left : 12%;
}

.Precedent_Carre
{
	align-self: center;
	margin-left : 4%;
}


.Change
{
	color: var(--color-text-soft);
	text-decoration : none;
	font-style: normal;
	font-family : var(--font-body);
	letter-spacing : 0.06em;
	text-transform : uppercase;
	font-size : 0.7em;
	transition : color var(--transition), letter-spacing var(--transition);
}

.Change:hover
{
	color : var(--color-accent-dark);
	letter-spacing : 0.1em;
}

.Precedent_Carre .Change::before
{
	content : '\2190\00a0\00a0';
}

.Suivant .Change::after
{
	content : '\00a0\00a0\2192';
}

.Image2
{
	width : 95%;
	display : flex;
	justify-content : flex-start;
	text-align : center;
	margin: auto;
}

#MamanFP
{
	text-align: center;
	margin-top : 100px;
	padding-left : 30px;
	font-size : 2.5em;
}

#MamanFP span
{
	font-size : 0.6em;
	margin-left : 0;
	font-weight : italic;
	text-align: center;
	padding : 0px;
}



#SommaireIntro
{
	font-size : 1.2em;
}



#Vent {
	width: 100%;
	margin-top : 150px;
	margin-bottom : 0px;
	margin-left : 0px;
	padding-left : 0px;
	margin-right : 0px;
	padding-right : 0px;
	}

#Presentation
{
	font-size : 1.2em;
	margin-bottom : 100px;
}

.MerciAccueil
{
	margin-left : 38%;
	margin-right : 40%;
	margin-top : 2%;
	padding-bottom : 10px;
	padding-top : 0px;
	text-align: center;
	font-size : 1.7em;
}

.ref2
{
	text-decoration : none;
	color : var(--color-text);
	position : relative;
	display : inline-block;
	transition : color var(--transition);
}

.ref2::after
{
	content : '';
	position : absolute;
	left : 50%;
	right : 50%;
	bottom : -6px;
	height : 1px;
	background : var(--color-accent);
	transition : var(--transition);
}

.Decouvrez:hover .ref2,
.MerciAccueil:hover .ref2
{
	color : var(--color-accent-dark);
}

.Decouvrez:hover .ref2::after,
.MerciAccueil:hover .ref2::after
{
	left : 0;
	right : 0;
}

.Decouvrez
{
	margin : auto;
	margin-left : 35%;
	margin-right : 35%;
	text-align: center;
	font-size : 1.7em;
}



.Pages a
{
	color: var(--color-text);
	text-decoration : none;
	letter-spacing : 0.02em;
	transition : color var(--transition);
}

.Pages:hover a
{
	color : var(--color-accent-dark);
}



#TitreFormation
{
	font-size : 1.4em;
	font-weight : bold;
}
.box:hover
{
	flex-grow : 1.4;
	filter : saturate(1.05) brightness(1);
}

.container:hover .box:not(:hover)
{
	filter : saturate(0.5) brightness(0.6);
}

.box:hover h2
{
	line-height : 20vh;
}

.box:hover h2 span
{
	color: #262626;
	background : rgba(255, 255, 255, 0.88);
	letter-spacing : 5px;
	box-shadow : var(--shadow-md);
}



.container .box:nth-child(2)
{
	background-image : url('../images/Peintures/Peinture4-min.jpg');
	background-size : 180%;
}

.container .box:nth-child(3)
{
	background-image : url('../images/Peintures/fondcroquis-min.jpg');
	background-size : 100%;
}

.container .box:nth-child(4)
{
	background-image : url('../images/Peintures/Peinture2-min.jpg');
	background-size : 140%;
}

.container .box:nth-child(1)
{
	background-image : url('../images/Peintures/Portrait4-min.jpg');
	background-size : 100%;
}

.ImageGauche
{
	margin-left : 10%;
	width : 100%;
}

.taille25
{
	width : 100%;
}

.taille25Femme
{
	width : 70%;
}

.taille12
{
	width : 120%;
}


.taille40
{
	width : 100%;
}

.taille46
{
	width : 76%;
}

.taille41
{
	width : 91%;
}

.taille6
{
	width: 150%;
}


.taille8
{
	width: 150%;
}
.taille7
{
	width: 150%;
}

.taille80
{
	width: 110%;
}

.taille50
{
	width: 110%;
}
.taille60
{
	width: 120%;
}

.taille70
{
	width: 86%;
}
 
 .taille25Grue
{
	width: 110%;
}

.FondPDG
{
	width :100%;
	margin : 0;
	padding : 0;
}
 
#Description
{
	margin-top : 50px;
	margin-left : 20%;
	margin-right : 20%;
	font-size : 1.2em;
}

#Caption1
{
}

#Caption2
{
	color : grey;
}

#Caption3
{
	font-weight : bold;
}



.Formulaire
{
	max-width : 560px;
	margin : 0 auto;
	padding : 150px 24px 80px;
	box-sizing : border-box;
}

.itemContact
{
	margin-top : 20px;
	display : flex;
	flex-direction : column;
	align-items : stretch;
	gap : 6px;
}

.itemContact label
{
	color : var(--color-text-soft);
	font-size : 0.85em;
	text-transform : uppercase;
	letter-spacing : 0.05em;
}

.Formulaire input[type=text],
.Formulaire input[type=email],
.Formulaire textarea
{
	font-family : var(--font-body);
	font-size : 0.95em;
	padding : 10px 14px;
	border : 1px solid var(--color-border);
	border-radius : var(--radius-sm);
	background : #fff;
	color : var(--color-text);
	transition : border-color var(--transition), box-shadow var(--transition);
	width : 100%;
	box-sizing : border-box;
}

.Formulaire input[type=text]:focus,
.Formulaire input[type=email]:focus,
.Formulaire textarea:focus
{
	outline : none;
	border-color : var(--color-accent);
	box-shadow : 0 0 0 3px rgba(169, 129, 47, 0.15);
}

.Formulaire input[type=submit]
{
	display : block;
	margin : 28px auto 0;
	padding : 12px 34px;
	border : none;
	border-radius : 999px;
	background : var(--color-text);
	color : var(--color-bg);
	font-family : var(--font-body);
	font-size : 0.9em;
	letter-spacing : 0.05em;
	cursor : pointer;
	transition : background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.Formulaire input[type=submit]:hover
{
	background : var(--color-accent-dark);
	transform : translateY(-2px);
	box-shadow : var(--shadow-sm);
}

.ContacterArtiste
{
	text-align : center;
	margin : 0 0 40px;
	font-size : 2em;
	font-family : var(--font-display);
	font-weight : 600;
}

 .flottant
 {
	 float : left;
	 max-width : 30%;
	 margin-left : 8%;
	 margin-right : 6%;
 }
 
  .flottant2
 {
	 float : left;
	 max-width : 90%;
	 margin-left : 8%;
	 margin-right : 6%;
 }
 
.Actualite
{
	margin-top : 10%;
	margin-bottom : 5%;
	margin-right : 15%;
	margin-left : 8%;
	text-align: justify;
}

.Actu
{
	margin-left : 10%;
	margin-top : 5%;
	margin-bottom : 20px;
}

.Date
{
	font-style : italic;
	margin-right : 2%;
}

.ImageFlottante
{
	width : 20%;
	margin-left : 25%;
	margin-right: 5%;
	margin-bottom: 30px;
}

.ImageFlottante2
{
	width : 40%;
	margin-left : 30%;
	margin-right : 30%;
	margin-bottom: 2em;
}


.Description2
{
	text-align: justify;
}


.ImageFocused
{
    margin-right: 0%;
    margin-top: 150px;
    text-align: center;
    width: 100%;
    border-radius : var(--radius-md);
    box-shadow : var(--shadow-md);
}

.Figure_Portrait
{
    width: 57%;
}

.Figure_Portrait_First
{
	width: 57%;
	margin-left : 25%;
}

.Figure_Paysage
{
    width: 100%;
}

.Figure_Carre
{
    width: 75%;
}

.ImageFocused2
{
	margin : auto;
	margin-top : 200px;
	text-align : center;
	max-width : 80%;
	max-height : 80%;
}

.ImageFocusedLegend
{
    margin-right: 15%;
    margin-left: 15%;
    margin-top: 0px;
    text-align: center;
    max-width: 80%;
}

.Galerie
{
	margin : 2rem auto;
	column-gap : 1.5rem;
}

.Galerie a
{
	display : block;
	break-inside : avoid;
	margin-bottom : 1.5rem;
	border-radius : var(--radius-md);
	overflow : hidden;
	box-shadow : var(--shadow-sm);
	transition : box-shadow var(--transition), transform var(--transition);
}

.Galerie a:hover
{
	box-shadow : var(--shadow-lg);
	transform : translateY(-4px);
}

.Galerie img
{
	display : block;
	width : 100%;
	height : auto;
	transition : transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.Galerie a:hover img
{
	transform : scale(1.06);
}

.about2
{
	width : 60%;
	margin : auto;
}

.Merci
{
	margin-left : 33%;
	margin-top : 20 %;
}

.General
{
	display : flex;
	justify-content : flex-start;
	width : 60%;
	flex : auto;
	margin-right : 10%;
}

.fa {
  padding: 10px;
  font-size: 30px;
  width: 16px;
  height : 16px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  transition : transform var(--transition), opacity var(--transition);
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.75;
  transform : scale(1.12);
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

.insta {
  font-size: 30px;
  width: 35px;
  height : 35px;
  margin-left : 3px;
  transition : transform var(--transition), opacity var(--transition);
}

.connect {

  margin-right :7px;
  margin-left : 3px;
  width: 35px;
  height : 35px;
  transition : transform var(--transition), opacity var(--transition);
}

.connect:hover {
  opacity: 0.75;
  transform : scale(1.12);
}

.insta:hover {
  opacity: 0.75;
  transform : scale(1.12);
}

#links{
	margin-left: 10px;
	margin-right: 10px;
	display: flex;
}