/* 
Fichier CSS de mariage.lesieur.me
Créé par Christophe LESIEUR
Couleurs :
Champagne #FBF2B7 #F2E0D5 #EEDFC5
Terre de sienne : #8E5434
Rouge : #A2160F
Bleu tissus : #0F1D29
Or : #DCB253

Font:
font-family: 'Squada One', cursive;
font-family: 'Caveat', cursive;
font-family: 'Dancing Script', cursive;
font-family: 'Dosis', sans-serif;
*/

/* Eléments générique à la page du site*/

* {
    margin: 0;
}

html{
	font-family: 'Dancing Script', cursive;
	font-size: 1.4em;
	background-image: url("tissus.png");
	background-repeat: repeat;
	background-position: center;
	background-attachment: scroll;
	background-size: 100%;
	scroll-behavior: smooth;
}

main{
	position:relative;
	width:80%;
	margin:auto;
	padding-bottom: 50px;
	background-image: url("img/kraft.jpeg");
	background-repeat: repeat;
	background-position: center;
	background-attachment: scroll;
	background-size: 100%;
	scroll-behavior: smooth;
}

p{
	text-align: center;
}

h1{
	font-size: 3em;
	font-weight: normal;
	text-align: center;
	color: #A2160F;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}

h3{
	font-size: 2em;
	font-weight: normal;
	text-align: center;
	color: #A2160F;
}

div a{
	display: block;
}

section{
	display: block;
	margin-left: 5%;
	margin-right: 5%;
	position: relative;
	height: auto;
}

.espace{
	height:50px;
}

/*Eléments de la barre de navigation 
##    ##    ###    ##     ## 
###   ##   ## ##   ##     ## 
####  ##  ##   ##  ##     ## 
## ## ## ##     ## ##     ## 
##  #### #########  ##   ##  
##   ### ##     ##   ## ##   
##    ## ##     ##    ###   
*/


/*V3*/
nav {
	width: 120%;
	margin-left: -10%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-family: 'Squada One', cursive;
	background-color: rgba(128, 128, 128, 0.5);
	backdrop-filter: blur(5px);
	position: -webkit-sticky;/* Safari */
	position: sticky;
	top: 0;
	transition: 1s;
	z-index:100;
}

nav p{
	font-family: 'Squada One', cursive;
	font-size: 1.4em;
	right: 1em;
	color: #DCB253;
	text-shadow: 0px 0px 10px black;
	transition: 1s;
	z-index:102;
}

.jour{
	position: absolute;
	left: .8em;
}

.menu{
	display:inline-flex;
	position: relative;
	object-position: center top;
	align-items: center;
}

.menu a{
	height: 100%;
	padding: .5em;
	font-family: 'Dosis', sans-serif;
	font-size: 1.2em;
	text-decoration: none;
	color:#DCB253;
	text-shadow: 0px 0px 10px black;
}

.menu a:hover{
	transition: .6s ease;
	background-color: rgb(128, 128, 128, .5);
}

.scrollnav img {
	height: 100px;
	object-fit: cover;
	margin-right: 3em;
	transition: 1s;
}

.scrollnav p {
	font-size: 0.8em;
	margin-left: 3em;
	transition: 1s;
}

.progress-container {
	width: 100%;
	height: 4px;
	position: absolute;
	bottom: -4px;
}
  
.progress-bar {
	height: 4px;
	background:#DCB253;
	width: 0%;
}

/* Elements de la photo de couple 
 ######   #######  ##     ## ########  ##       ######## 
##    ## ##     ## ##     ## ##     ## ##       ##       
##       ##     ## ##     ## ##     ## ##       ##       
##       ##     ## ##     ## ########  ##       ######   
##       ##     ## ##     ## ##        ##       ##       
##    ## ##     ## ##     ## ##        ##       ##       
 ######   #######   #######  ##        ######## ######## 
*/

.sectioncouple{
	width: 100%;
	margin: 0;
	height: 100vh;
}

.bandeau{
	width: 100%;
    height: 100vh;
	display: flex;
	background-color: #EEDFC5;
	position: absolute;
	justify-content: center;
}

.photocouple{
	width: 100%;
	position: relative;
    height: 100vh;
}

.imagecouple {
	width: 100%;
    height: 100vh;
	object-fit: cover;
	object-position: center top;
}

.logo{
	display: flex;
	position: absolute;
    margin-left: auto;
    margin-right: auto;
	top : 50vh;
	transform: translateY(-50%);
	z-index: 2;
}

.textebandeau{
	display: flex;
	position: absolute;
    margin-left: auto;
    margin-right: auto;
	top : 5vh;
	z-index: 4;
	font-size: 3em;
	font-family: 'Dancing Script', cursive;
	color:#DCB253;
}

.logo img{
	width: 350px;
	object-fit: cover;
}

/*

##     ## ####  ######  ########  #######  ########  ##    ## 
##     ##  ##  ##    ##    ##    ##     ## ##     ##  ##  ##  
##     ##  ##  ##          ##    ##     ## ##     ##   ####   
#########  ##   ######     ##    ##     ## ########     ##    
##     ##  ##        ##    ##    ##     ## ##   ##      ##    
##     ##  ##  ##    ##    ##    ##     ## ##    ##     ##    
##     ## ####  ######     ##     #######  ##     ##    ##    
*/


.history {
  position: relative;
  margin: auto;
}

.historyimg {
	width: 100%;
}

.histSlides {
  display: none;
}

.prec, .suiv {
  cursor: pointer;
  position: absolute;
  width: 8%;
  top: 40%;
  color: white;
  transition-delay: 2s;
  transition-timing-function: ease-in-out;
}

.suiv {
  right: 0;
  border-radius: 20% 0 0 20% / 20% 0 0 20%;
}

.prec {
	border-radius: 0 20% 20% 0 / 0 20% 20% 0 ;
}

.titre {
	color: #DCB253;
	font-size: 6em;
	padding: 8px 12px;
	position: absolute;
	top: 10%;
	width: 100%;
	text-align: center;
}

.text {
  color: #DCB253;
  font-size: 4vw;
  padding: 8px 12px;
  position: absolute;
  bottom: 3vw;
  width: 100%;
  text-align: center;
}

.textmini {
	color: #DCB253;
	cursor: pointer;
	font-size: 1.5vw;
	position: absolute;
	bottom: 3px;
	width: 20%;
	padding:1% 2%;
	text-align: center;
	background-color: rgb(255, 255, 255, 0.9);
	left: 38%;
	border-radius: 50% 50% 0 0 / 50% 50% 0 0 ;
}

.fade {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}

.hist{
	visibility:hidden;
	display:flex;
	position: absolute;
	background-color: rgb(255,255,255,.9);
	border-radius: 0 0 50% 50% / 0 0 20% 20% ;
	Top: 0px;
	right: 20%;
	height:0%;
	width: 60%;
	font-size: 0vw;
	transition-duration: 1.5s;
	flex-direction: column;
	font-family: 'Dosis', sans-serif;
	justify-content: center;
}

.hist p{
	color:#A2160F;
}

/* Elements de la section Galerie
######      ###    ##       ######## ########  #### ######## 
##    ##    ## ##   ##       ##       ##     ##  ##  ##       
##         ##   ##  ##       ##       ##     ##  ##  ##       
##   #### ##     ## ##       ######   ########   ##  ######   
##    ##  ######### ##       ##       ##   ##    ##  ##       
##    ##  ##     ## ##       ##       ##    ##   ##  ##       
 ######   ##     ## ######## ######## ##     ## #### ######## 
*/


.galery {
	position: relative;
	margin: auto;
}
  
.galimg {
	position: relative;
	width: 50%;
	left: 25%;
	max-height: 800px;
	object-fit: cover;
	object-position: center top;
}
  
.galSlides {
	display: none;
}
  
.gprec, .gsuiv {
	cursor: pointer;
	position: absolute;
	width: 8%;
	top: 40%;
	color: white;
	transition-delay: 2s;
	transition-timing-function: ease-in-out;
}
  
.gsuiv {
	right: 15%;
	border-radius: 20% 0 0 20% / 20% 0 0 20%;
}
  
.gprec {
	left: 15%;
	  border-radius: 0 20% 20% 0 / 0 20% 20% 0 ;
}
  
.points {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #DCB253;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}
  
.active, .points:hover {
	background-color: #A2160F;
}
  
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}
  
 @keyframes fade {
	from {opacity: 0}
	to {opacity: 1}
}

.copyright a{
	font-family: 'Dosis', sans-serif;
	font-size: .6em;
	text-decoration: none;
	color: black;
	text-align: center;
}


/* Elements de la section témoins 
######## ######## ##     ##  #######  #### ##    ##  ######  
   ##    ##       ###   ### ##     ##  ##  ###   ## ##    ## 
   ##    ##       #### #### ##     ##  ##  ####  ## ##       
   ##    ######   ## ### ## ##     ##  ##  ## ## ##  ######  
   ##    ##       ##     ## ##     ##  ##  ##  ####       ## 
   ##    ##       ##     ## ##     ##  ##  ##   ### ##    ## 
   ##    ######## ##     ##  #######  #### ##    ##  ######  
*/


.temoins{
	position: relative;
	margin: auto;
	height: 600px;
	width: 100%;
}


.temoinsf{
	position: absolute;
	visibility: hidden;
	width: 50%;
	height: 100%;
	right: 0px;
	transition: 1.5s;
}

.temoinsh{
	position: absolute;
	visibility: hidden;
	width: 50%;
	height: 100%;
	left: 0px;
	transition: 1.5s;
}

.flextemoins{
	display: flex;
	flex-direction: column;
	margin: auto;
	width: 40%;
	top: 0px;
}

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

.portraittemoins{
	display: block;
	object-fit: cover;
	height: 80%;
	border-radius: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3%;
	margin-bottom: 3%;
}

.noustemoins{
	display: flex;
	position: relative;
	width: 50%;
	border-radius: 50%;
	top: 300px;
	left: 50%;
	transform: translate(-50%, -50%);
}

.clictemoin{
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	
}

.volets{
	position: absolute;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	pointer-events:none;
	z-index: 20;
	width: 100%;
	height: 100%;
}

.voletf{
	z-index: 30;
	display: block;
	cursor: pointer;
	pointer-events:all;
	width: 50%;
	height: 100%;
	left: 0px;
	background-image: url("img/6438.jpg");
	background-position: center;
	background-attachment: no-repeat;
	background-size: cover;
	background-color: white;
	z-index: 20;
	transition: 1.5s;
	flex-direction: row;
}

.voleth{
	z-index: 30;
	display: block;
	cursor: pointer;
	pointer-events:all;
	width: 50%;
	height: 100%;
	right: 0px;
	background-image: url("img/6060.jpg");
	background-position: center;
	background-attachment: no-repeat;
	background-size: cover;
	background-color: white;
	z-index: 20;
	transition: 1.5s;
}

.tabh {
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	background-color: rgb(0, 0, 0,0);
	width: 50%;
	height:34%;
}

.tabh:hover {
	background-color: rgb(128,128,128,.1);
}

.tabcontenth {
	color: #0F1D29;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 66%;
	padding-left: 5%;
	padding-right: 5%;
}

.tabf {
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 14px 16px;
	background-color: rgb(0, 0, 0,0);
	width: 50%;
	height:34%;
}

.tabf:hover {
	background-color: rgb(128,128,128,.1);
}

.tabcontentf {
	color: #0F1D29;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 66%;
	padding-left: 5%;
	padding-right: 5%;
}

#jimmy {background-color: rgb(255,0,0,0.1);}
#laurent {background-color:rgb(255,0,0,0.1);}
#andrea {background-color: rgb(255,0,0,0.1);}
#yolande {background-color:rgb(255,0,0,0.1);}


/* Elements de la section domaine 
########   #######  ##     ##    ###    #### ##    ## ######## 
##     ## ##     ## ###   ###   ## ##    ##  ###   ## ##       
##     ## ##     ## #### ####  ##   ##   ##  ####  ## ##       
##     ## ##     ## ## ### ## ##     ##  ##  ## ## ## ######   
##     ## ##     ## ##     ## #########  ##  ##  #### ##       
##     ## ##     ## ##     ## ##     ##  ##  ##   ### ##       
########   #######  ##     ## ##     ## #### ##    ## ######## 
*/

.domaine {
	position: relative;
	margin: auto;
	height: 300px;
}

.domSlides {
	display: none;
}

.dompoints {
	cursor: pointer;
	height: 16px;
	width: 15%;
	margin: 10px 2px;
	background-color: #DCB253;
	border-radius: 8px 8px 8px 8px / 8px 8px 8px 8px ;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active, .dompoints:hover {
	background-color: #A2160F;
}

.imglieu{
	display: block;
	width: 100%;
}

.eglised{
	position: absolute;
	width: 45%;
	bottom: 0px;
	left: 0px;
}

.egliseg{
	position: absolute;
	width: 50%;
	bottom: 0px;
	right: 0px;
}

.imgeglise{
	display: block;
	object-fit: cover;
	object-position:center top;
	height: 300px;
	width: 100%;
}

.diveglise{
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 5%;
	width: 100%;
}

.titreeglise{
	display: block;
	position: absolute;
	font-size: 4vw;
	margin-left: auto;
	margin-right: auto;
}

.divdom{
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 300px;
}

.logodom{
	flex-grow: 1;
}

.textdom{
	flex-grow: 2;
	padding-left: 5%;
}

.imgdom{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 100%;
	object-fit: cover;
}

.photodom{
	display: flex;
	position: relative;
	justify-content: space-evenly;
	object-fit: cover;
	height: 200px;
	top: 50px;
	object-position: center top;
}

.domimg1{
	width: 30%;
}

.domimg2{
	width: 25%;
}

.domimg3{
	width: 25%;
}

.dommap{
	display: flex;
	flex-direction: row;
	justify-content: center;
}

/* Elements du formulaire
########  #######  ########  ##     ## 
##       ##     ## ##     ## ###   ### 
##       ##     ## ##     ## #### #### 
######   ##     ## ########  ## ### ## 
##       ##     ## ##   ##   ##     ## 
##       ##     ## ##    ##  ##     ## 
##        #######  ##     ## ##     ## 
*/

form {
    display: flex;
    flex-direction: column;
    margin: auto;
    color: #0F1D29;
}

.formulaire{
	display: block;
    margin-top:100px;
	margin: auto;
	width : 67%;
}

.formulaire h3 {
    color: #0F1D29;
    text-align: center;
    margin-bottom: 10px;
}

 
.form-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

input,
textarea {
    padding: 15px;
    border-radius: 20px;
    border-width: 1px;
	margin-bottom: 20px;
	color: black;
	font-family: 'Dancing Script', cursive;
	font-size: 1em;
	background-color: rgb(0, 0, 0,0);
	border-color: #DCB253;
}

.bouton {
    display: inline-block;
    border-radius: 20px;
	font-family: 'Dancing Script', cursive;
	font-size: 1em;
    color: black;
    padding: 15px;
	cursor: pointer;
	background-color:#DCB253;
    border: none;
	transition: .6s;
}
.bouton:hover{
	background-color:#A2160F;
}

label {
    margin-bottom: 10px;
}

/* Element du pied de page 
########  #######   #######  ######## ######## ########  
##       ##     ## ##     ##    ##    ##       ##     ## 
##       ##     ## ##     ##    ##    ##       ##     ## 
######   ##     ## ##     ##    ##    ######   ########  
##       ##     ## ##     ##    ##    ##       ##   ##   
##       ##     ## ##     ##    ##    ##       ##    ##  
##        #######   #######     ##    ######## ##     ## 
*/

footer {
	width: 100%;
	margin-top: 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	font-family: 'Dancing Script', cursive;
	background-color: #EEDFC5;
	bottom: 0;
}

footer p {
	color: #A2160F;
	padding: 5px;
	margin-right: 20px;
	margin-left: 20px;
}

/* Ensembles Media Queries 
##     ## ######## ########  ####    ###    
###   ### ##       ##     ##  ##    ## ##   
#### #### ##       ##     ##  ##   ##   ##  
## ### ## ######   ##     ##  ##  ##     ## 
##     ## ##       ##     ##  ##  ######### 
##     ## ##       ##     ##  ##  ##     ## 
##     ## ######## ########  #### ##     ## 
*/

@media screen and (min-width: 1280px) {
    main{
        width: 1024px;
    }
}


@media screen and (min-width: 900px) and (max-width: 1279px) {

}


@media screen and (min-width: 600px)and (max-width: 899px) {

	html{
		font-size: 1em;
	}

	nav p{
		font-size: 1em;
	}
	nav img {
		height: 100px;
	}

	.menu a{
		padding: .5em;
		font-size: 1em;
	}

	.jour{
		margin-left: 1.2em;
	}

	.scrollnav img {
		height: 50px;
		margin-right: 1em;
	}

	.scrollnav p {
		font-size: 0.5em;
		margin-left: 0.5em;
	}

	.space{
		margin-top: 50px;
	}

	.colmaster{
		grid-template-columns: 1fr;
	}


	.colmaster4{
		grid-template-columns: 1fr 1fr;
	}

	input,
	textarea {
    	padding: 9px;
		border-radius: 10px;
	}

	.bouton {
    	padding: 9px;
		border-radius: 10px;
	}

	.logo img{
		width: 200px;
	}

	.points {
		height: 8px;
		width: 8px;
	}

	.titre {
		font-size: 4em;
	}

	.temoins{
		height: 400px;
	}

	.noustemoins{
		top: 200px;
	}

}

@media screen and (max-width: 599px) {

	html{
		font-size: .8em;
	}

	main{
		width:85%;
		padding-bottom: 20px;
	}

	h1{
		font-size: 2em;
	}

	h3{
		font-size: 1em;
		margin-bottom: 12px;
	}

	nav p{
		font-size: .9em;
	}
	nav img {
		height: 80px;
	}

	.menu a{
		padding: .5em;
		font-size: .8em;
	}

	.espace{
		height:20px;
	}

	.jour{
		margin-left: .5em;
	}

	.scrollnav img {
		height: 40px;
		margin-right: 1em;
	}

	.scrollnav p {
		font-size: 0.5em;
		margin-left: 0.5em;
	}

	.textebandeau{
		font-size: 2em;
	}

	.space{
		margin-top: 20px;
	}

	input,
	textarea {
    	padding: 9px;
		border-radius: 10px;
	}

	.bouton {
    	padding: 9px;
		border-radius: 10px;
	}


	.logo img{
		width: 200px;
	}

	.points {
		height: 7px;
		width: 7px;
	  }

	  .galimg {
		width: 80%;
		left: 10%;
		max-height: 800px;
	}

	.titre {
		font-size: 3em;
	}

	.temoins{
		height: 300px;
	}
	.noustemoins{
		top: 150px;
	}

}