/*@import "resets.css";*/
/*@import "base.css";*/
@import "fonts.css";




body {
	display: grid;
/*	flex-direction : rows;
	flex-wrap : wrap;*/
	grid-template-rows: auto auto auto;
	grid-template-areas: "header"
								"content"
								"footer";
/*	justify-content: center;*/
	justify-items: center;
}





body > header,
body > main,
body > footer {
	padding: clamp(35px, 7vw, 150px);
}

body > header,
body > header > ul,
body > main,
body > footer, 
.site-branding,
.site-infos,
.site-description
{
	display: flex;
	flex-direction: column;
}

body > main {
	grid-area: content;
	gap : 10vh;
}


body > footer {
	grid-area: footer;
	width: 100%;
}



body > header {
	grid-area : header;
	justify-content: center;
/*	background-color: beige;*/
}

body > header,
.site-branding {
	align-items: center;
	text-align: center;
}

body > header {
	top : 0;
	left : 0;
	width: 100%;
	height : 100vh;
}

/*body > header,*/
/*body > header > ul,*/
/*body > header .site-description,*/
body > header .site-address,
body > header .site-phone {
	display: none;
}




.site-logo {
	cursor: pointer;
	line-height: 1;
	font-weight: 800;
	font-size: 	2.15rem;
	letter-spacing: -0.06rem;
}

.site-logo:hover {
	color: rgba(150, 240, 33, 1.0);
}

.site-menu.show {
	display: flex;
}

.site-infos {
	padding: 10vh 0;
}

.site-infos {
	gap: 20px;
}

.site-author a {
	display: inline-block;
	border-bottom: 1px solid black;
	padding-bottom: 0px;
}

footer p {
	font-size: 10px;
}

body > header > ul {
	list-style: none;
	flex-wrap : wrap;
	align-items : center;
	justify-content : center;
	font-size : 1.75rem;
	line-height: 1;
	gap: 1.75rem;
}

h1 {
/*	position: sticky;*/
/*	top: 0;*/
	padding: 7vh 0 0vh 0;
/*	text-align: center;*/
}

.wp-block-group.images-x2 {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.wp-block-group.images-x2 figure {
	width: 50%;
}


@media only screen and (orientation : portrait) {
	.wp-block-group.images-x2 {
		flex-wrap: nowrap;
		flex-direction: row;
	}
}

@media only screen and (orientation : landscape) {
	.wp-block-group.images-x2 {
		flex-wrap: nowrap;
		flex-direction: row;
	}

	body > main {
/*		padding: 20vw;*/
		justify-content: center;
		width: clamp(500px, 65%, 800px);
	}

}

.wp-block-columns,
.wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap : 10px;
}

.wp-block-group {
	margin-bottom: 10px;
}




.wp-block-group.horaires-tarifs ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wp-block-gallery {
	display : flex;
	flex-direction : columns;
	gap : 15px;
	
}


.contact-form-group {
	display: grid;
	grid-gap: 15px;
	grid-template-areas: "nom"
	"prenom"
	"email"
	"telephone"
	"objet"
	"message"
	"envoyer";
}

#contact-objet {
	grid-area: objet;
}

#contact-message {
	grid-area: message;
}


#contact-envoyer {
	grid-area: envoyer;
	justify-self: right;
}



button, input[type="button"], input[type="reset"], input[type="submit"],
.wpcf7-submit,
.wp-block-button__link {
	color: #fff;
	background-color: #32373c;
/*	border-radius: clamp(5px, 1.3vh, 12px) !important;*/
	box-shadow: none;
	text-decoration: none;
/*	padding: clamp(5px, 1.5vh, 15px) clamp(5px, 2vh, 20px);*/
/*	font-size: 4.2vw !important;*/
	font-weight: normal;
	border: 0;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
	cursor: pointer;
	color: #fff;
	background-color: orange;
}

button a {
	color: white;
}

.wp-block-button.has-custom-font-size.has-small-font-size a {
	color: white;
	line-height: 1;
}

.container {
  width: 100%;
  /*margin: 0 auto;*/
}
/*@media only screen and (min-width:1024px) and (min-height:728px) {*/
/*	body {
			display: grid;
			grid-template-rows: unset;
			grid-template-columns: clamp(500px, 25%, 700px) 1fr clamp(500px, 25%, 700px);
			grid-template-areas: "header content footer";
	}*/

/*}*/



.background-objects {
	position: absolute;
	width: 100%;
	height: 3050px;
	overflow: hidden;
/*	background-color: burlywood;*/
	z-index: -1000;
	top: 0;
	left: 0;
	float: left;
	display: none;
}

.background-objects #object-1 {
	position: absolute;
	background-image: url('../img/couleurs_mosaique_objets_1.png');
	height: 300px;
	background-repeat: no-repeat;
	background-size: contain;
	aspect-ratio: 7.53/6.68;
	top: 1000px;
	left: 150px;
	rotate: -25deg;
}

.background-objects #object-2 {
	position: absolute;
	background-image: url('../img/couleurs_mosaique_objets_2_croix_1.png');
	height: 500px;
	background-repeat: no-repeat;
	background-size: contain;
	aspect-ratio: 7.53/6.68;
	top: 350px;
	right: -200px;
	rotate: 15deg;
}

.background-objects #object-3 {
	position: absolute;
	background-image: url('../img/couleurs_mosaique_objets_3_lezard.png');
	height: 500px;
	background-repeat: no-repeat;
	background-size: contain;
	aspect-ratio: 13.55/11.22;
	top: 2500px;
	left: -200px;
	rotate: -60deg;
}

.background-objects #object-4 {
	position: absolute;
	background-image: url('../img/couleurs_mosaique_objets_4_marie.png');
	height: 600px;
	background-repeat: no-repeat;
	background-size: contain;
	aspect-ratio: 9.99/12.53;
	top: 2000px;
	right: -150px;
	rotate: -25deg;
}



































@media only screen and (min-width:1069px){
	img {
		border-radius: 25px;
	}
}



@media only screen and (max-width:1068px){
	img {
		border-radius: 25px;
	}

}

@media only screen and (min-width:768px) {
	body > header > ul {
		font-size : 2.25rem;
	}

	.wp-block-group.images-x2 {
		flex-wrap: nowrap;
		flex-direction: row;
	}
}

@media only screen and (min-height:768px) {
	body > header > ul {
		font-size : 2.25rem;
	}
}



@media only screen and (max-width:1068px) and (orientation : landscape) {
/*	h1 {
		font-size: 44px;
		letter-spacing: -1px;
		line-height: 1;
	}

	h2 {
		font-size: 24px;
		letter-spacing: -1px;
		line-height: 1.3;
	}*/

	body > header {
		flex-direction: unset;
		display: grid;
		grid-template-columns: 1fr 1fr;
		justify-items: center;
	}
	body > header > ul {
		flex-wrap : unset;
		align-items : center;
		justify-content : center;
		font-size : 1.75rem;
/*		width: 50%;*/
	}

	.site-branding {
/*		width: 50%;*/
	}

	.site-logo {
		font-size: 	2.15rem;
	}


	.site-address,
	.site-phone {
		display: none;
	}

	.site-branding {
	   justify-content: left;
	}

}




@media only screen and (min-width:800px) and (min-height:600px){
	img {
		border-radius: 15px;
	}
	.site-logo {
		font-size: 2.45rem;
	}
}

@media only screen and (min-width:1024px) and (min-height:768px) {
	body {
/*		display: grid;*/
	/*	flex-direction : rows;
		flex-wrap : wrap;*/
		grid-template-columns: clamp(250px, 25%, 500px) auto;
		grid-template-rows: auto auto;
		grid-template-areas: "header content"
									"header footer";
	/*	justify-content: center;*/
/*		justify-items: end;*/
	}
	body {

		grid-template-columns: clamp(200px, 25%, 700px) auto clamp(200px, 25%, 700px);
		grid-template-rows: unset;
		grid-template-areas: "header content empty"
									"header footer empty";
	}
	body,
	button,
	.wp-block-button,
	.wp-element-button,
	input,
	select,
	optgroup,
	textarea {
		font-size: 12px;
		line-height: 1.8;
	}

	body > header {
		position: fixed;
		width: clamp(200px, 25%, 500px);
		grid-template-columns: unset;
		grid-template-rows: min-content auto;
	}

	body > main {
		width: 100%;
	}
	
	body > header,
	body > main,
	body > footer {
		padding: 8vh clamp(40px, 4vw, 150px);
	}
	body > header .site-logo {
/*		font-size: 16px;*/
		font-size: clamp(1rem, 2.45cqw, 2rem);
		text-align: left;
	}

	body > header .site-address,
	body > header .site-phone {
		display: block;
	}

	body > header {
		display: grid;
		justify-content: start;
		text-align: left;
	}
	body > header .site-description {
/*		display: inline;*/
/*		flex-direction: column;*/
	}
	body > header * {
		text-align: left ;
	}

	body > header > ul {
		flex-wrap : unset;
		justify-content : left;
		font-size : 18px;
		font-size : 1.35rem;
		width: unset;
		align-items: start;
		gap: 1.5rem;
	}

	body > header, .site-branding {
        align-items: start; 
	}

	h1 {
		padding: 0;
		font-size: clamp(3.5em, 3.7vw, 6em);
	}

	h2 {
		font-size: clamp(2.0em, 2.5vw, 2.5em);
	}

	h3 {
		font-size: clamp(1.2em, 1.3vw, 1.6em);
	}

	.contact-form-group {
		grid-template-areas: "nom prenom"
		"email telephone"
		"objet objet"
		"message message"
		"envoyer envoyer";
	}
	.wp-block-gallery,
	.wp-block-group.images-x2 {
		gap: 2em;
	}

	button,
	.wp-block-button__link,
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="range"],
	input[type="date"],
	input[type="month"],
	input[type="week"],
	input[type="time"],
	input[type="datetime"],
	input[type="datetime-local"],
	input[type="color"],
	input[type="submit"],
	textarea,
	select {
		border-radius: clamp(5px, 1.3vh, 12px) !important;
		padding: 15px 20px;
	}


}

/* iPad Air */
@media only screen and (min-width: 1180px) and (min-height: 820px) {
	body > header > ul {
		font-size: 18px;
		font-size: 1.55rem;
		gap: 1.55rem;
	}
}

@media only screen and (min-width:1300px) and (min-height:1024px) {

	body > header > ul {
		font-size : 1.85rem;
	}
	.wp-block-gallery,
	.wp-block-group.images-x2 {
		gap: 3em;
	}

	

}

@media only screen and (min-width:1400px) and (min-height:900px) {

	body {

		grid-template-columns: clamp(200px, 25%, 700px) auto clamp(200px, 25%, 700px);
		grid-template-rows: unset;
		grid-template-areas: "header content empty"
									"header footer empty";
	}
	body > header,
	body > main,
	body > footer {
		padding: clamp(35px, 5vw, 100px);
	}
	body > header {
		width: clamp(200px, 25%, 700px);
	}

	.wp-block-columns, .wp-block-group__inner-container {
		gap: 20px;
	}

	body, button, .wp-block-button, .wp-element-button, input, select, optgroup, textarea {
		font-size: 14px;
		line-height: 1.7;
	}

	footer p {
		font-size: 11px;
	}

	.background-objects {
		height: 2000px;
		display: block;
	}

	.background-objects #object-1 {
		height: 250px;
		top: 1000px;
		left: 100px;
	}

	.background-objects #object-2 {
		height: 400px;
		top: 150px;
		right: -100px;
	}

	.background-objects #object-3 {
		height: 500px;
		top: 2600px;
	}

	.background-objects #object-4 {
		height: 450px;
		top: 1200px;
		right: -100px;
	}

}


@media only screen and (min-width:1920px) and (min-height:1080px) {
	img {
		border-radius: 30px;
	}
	body, button, .wp-block-button, .wp-element-button, input, select, optgroup, textarea {
		font-size: 16px;
		line-height: 1.8;
	}
	body > header .site-logo {
		font-size: 2.2rem;
	}

	body > header,
	body > main,
	body > footer,
	.site-creator
	 {
		padding: clamp(35px, 5vw, 100px);
	}

	body > header > ul {
		font-size: clamp(2.3rem, 1.92vw, 2.4rem);
		gap: 1.92vw;
	}
	footer p {
		font-size: 12px;
	}



	.background-objects {
		height: 2750px;
	}

	.background-objects #object-1 {
		height: 400px;
		top: 1000px;
		left: 150px;
	}

	.background-objects #object-2 {
		height: 500px;
		top: 150px;
		right: -100px;
	}

	.background-objects #object-3 {
		height: 500px;
		top: 2600px;
	}

	.background-objects #object-4 {
		height: 600px;
		top: 2000px;
	}

	.background-objects {
		display: block;
	}

}



@media only screen and (min-width:2561px) and (min-height:1441px){
	body > main,
	body > footer {
		max-width: 1400px;
	}
}




@media only screen and (max-width:734px){
	img {
		border-radius: 20px;
	}
}



@media only screen and (max-width:480px){
	img {
		border-radius: 15px;
	}

	body > header > ul {
		font-size : 1.75rem;
		gap : 1.75rem;
	}
}


@media only screen and (max-height:320px){
	.site-logo,
	body > header > ul {
		font-size : 1.25rem;
		gap : 1.25rem;
	}
}

@media only screen and (max-width:320px){
	.site-logo,
	body > header > ul {
		font-size : 1.45rem;
		gap : 1.45rem;
	}
}




/*


@media only screen and (min-width:1441px){

}
@media only screen and (max-width:1068px){
    
}
@media only screen and (max-width:734px){
   
}
@media only screen and (max-width:350px){
   
}
*/





@keyframes adjust-info {
	to {
		grid-template-columns: 4em 1fr;
		gap: 1rem;
		height: 4.75rem;
	}
}

@-webkit-keyframes shrink-name {
	to { font-size: 20px; }
}

@keyframes shrink-name {
	to { font-size: 20px; }
}
/*@keyframes add-shadow {
	to { box-shadow: 0 5px 5px -3px rgba(0,0,0,.26); }
}
@keyframes move-button {
	to { translate: 0% 40%; }
}
@keyframes move-and-fade-background {
	to {
		translate: 0% -5%;
		scale: 0.96;
		opacity: 0.3;
	}
}*/

/*.site-logo {
	-webkit-animation: shrink-name linear both;
	animation: shrink-name linear both;
}


.site-logo {
	animation-timeline: scroll();
	animation-range: 0 150px;
}*/

.site-creator {
	position: fixed;
	right: 0;
	bottom: 0;
	font-size: 1em;
	line-height: 1;
	font-family: "PlusJakartaSans-ExtraBold";
	font-feature-settings: 'ss01';
}

.site-creator a {
	opacity: 0.3;
}

.site-creator a:hover {
	opacity: 1;
}