/*1366px*/@media screen and (max-width: 85.375em) {
	html, body{
		font-size: 95%;
		margin: 0;
	}

	article.type{
		font-size: 3.5rem;
		line-height: 3.5rem;
		white-space: wrap;
	}

	.next-page{
	right: 50px;
	top: 680px;
	width: 80px;
	height: 90px;
	}

	div.txt p, a.info{
		margin: 0;
		padding:0;
		line-height: 1.2rem;
	}
}


/*1080px*/@media screen and (max-width: 67.5em) {
	article.type{
		width: 90%;
		padding-top: 35%;
		font-size: 3rem;
		line-height: 3rem;
	}

	.next-page{
		right: 33px;
		top: 750px;
		height: 80px;
	}
}

.up{
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 15px 10px;
	border-color: transparent transparent var(--blanc) transparent;
}

/*860px*/@media screen and (max-width: 53.75em) {

}


/*810px*/@media screen and (max-width: 50.625em) {

article.type{
	padding-top: 50%;
}

.next-page{
	right: 20px;
	top: 1000px;
	height: 80px;
}

	.card-col4.card-back .card-col4.card-image,
	.card-col3.card-back .card-col3.card-image {
	  width: 90px;
	  height: 90px;
	}

	.card-col4.card-back h1,
	.card-col3.card-back h1 {
		font-size: 2rem;
	  line-height: 1.5em;
	}
}


/*640px*/@media screen and (max-width: 40em){
	html, body{
		font-size: 100%;
		width: 100vw;
		margin: 0;
	}

	#menuToggle {
		top: 20px;
  		left: 10px;
	}

	#menu {
		width: auto;
  		padding: 10px 0 5px 40px;
  		flex-direction: row;
  		font-size:.8rem;
	}
	
	#menu li{
  		font-size: 1rem;
	}

	section h4 span {
		display: none	}

	h1{
		text-align: center;
		font-size: 2.5rem;
		line-height: 3rem;
	}

	span.titre{
		padding: 10px 10px 0;
		line-height: 2rem;

	}

	figcaption {
		font-size: 1rem;
	}

	section{
		width: 100%;
	}

	section.plein-pot{
		padding: 0;
	}

	section.plein-pot img{
		margin: 0;
	}

	article {
    padding: 50px 0 20px;
	}
	
	article.intro,
	#img-intro,
	article.alphabet,
	article.fevrier,
	article.avril-2023,
	article.bassin,
	article.grandchamp,
	article.streetart,
	article.masques,
	article.janvier-2022,
	article.arcachon-2022,
	div.arcachon-sous-grille,
	article.juillet-2023,
	article.post-800,
	article.villas,
	article.maroc-2023,
	article.janvier-2024,
	article.fevrier-2024,
	article.mars-2024,
	article.juillet-2024,
	article.aout-2024,
	article.janvier-2025,
	article.juillet-2025,
	article.octobre-2025,
	article.decembre-2025,
	article.people{
		display: block;
	}

	article.avril-2023 img,
 	article.alphabet img,
	article.fevrier img,
	article.alphabet p,
	article.fevrier p,
	article.bassin img,
	article.grandchamp img,
	article.streetart img,
	article.masques img,
	article.janvier-2022 img,
	article.arcachon-2022 img,
	div.arcachon-sous-grille img,
	article.juillet-2023 img,
	article.post-800 img,
	article.villas img,
	article.maroc-2023 img,
	article.janvier-2024 img,
	article.fevrier-2024 img,
	article.mars-2024 img,
	article.juillet-2024 img,
	article.aout-2024 img,
	article.janvier-2025 img,
	article.juillet-2025 img,
	article.octobre-2025 img,
	article.decembre-2025 img,
	article.people img{
		margin: 30px auto;
	}
	
	article.intro span {
		font-size: 1.2em;
	}


/*	.villas .card-villas{
		height: 200px;
		margin: 100px auto;
		display: block !important;
	}

	.villas .card-villas.card-front {
		display: block !important;
z-index: 2000;
		background: red;
	}
*/

	article.post-800 .txt-800{
		padding: 0;
		font-size: 1rem;
		line-height: 1.2rem;
	}


	article.villas .txt-villas{
		padding: 1rem !important;
		font-size: 1rem !important;
		line-height: 1.2rem !important;
	}

	article.flex-basic p.col1,
	article.flex-basic p.col2,
	article.flex-basic p.col3,
	article.flex-basic p.col4,
	article.flex-basic p.col5{
		max-width: 100%;
		margin: 0 auto;
		padding: 50px 0 0;
	}
	
	/*article.flex-basic img{
		width: 90%;
	}*/

	article.flex-basic p.col4{
		max-width:100%;
		padding: 15px;
	}

	.cartouche-txt{
		padding: 0 50px;
	}

	/*Couv*****************************/
	#loader {
		top: 30%;
	  left: 43%;
}

.next-page{
	right: 0;
	top: 88%;
	width: 100px;
	height: 80px;
}

	section#couv{
	 	background-position-x: 25%;
	}

	article.type{
		width: 98%;
		padding: 90% 20px 0 25px;
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 1.4rem;
		white-space: wrap;
	}

	section#couv::after {
		bottom: 0;
	  border-width: 18px;
	}

	/*plein pot**************************************/
	section.plein-pot p {
		font-size: .8rem;
		line-height: .8rem;
		top: 10px;
		left: 10px;
	}

	/*intro*****************************/
	article.intro {
		width: 90%;
		column-count: 1;
		column-rule: 0;
		column-gap: 0;
	}

 #img-intro img{
	 	display: flex;
		flex-direction: column;
		justify-content: space-around;
		width: 100%;
		margin: 20px auto 0;
	}

	/*masques*****************************/
	div.txt p, a.info{
		font-size: 100%;
		line-height: 1.4rem;
	}

	a.info {
	 font-size: 70%;
	}

	article.flex-basic{
	flex-direction: column;
		width: 90%;
		margin: 10px auto;
	}

	article.flex-basic img.col4, article.flex-basic img.col3, article.flex-basic img.col5 {
		max-width: 90%;
		height: auto;
	}
	
	div.col3, div.col4, div.col4 {
    margin: 0 auto;
	min-width: 100%;
	}

	.cartouche-txt {
    padding: 50px 0 ;
  }
  
	article.flex-basic p.col5{
		width: 100%;
	 min-height: 320px;
	}

	/*flipcard*****************************/
	div.card-col4.card-col4,
	div.card-col3.card-col3 {
		position: static;
		width: 100%;
		height: auto;
	}

	.card-col4.card-front,
	.card-col3.card-front {
		position: absolute;
		max-width: 100%;
		height: auto;
	}

	.card-col4.card-back,
	.card-col3.card-back {
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
	}

	/*Février*****************************/
	article.fevrier figure.big {
		width: 100%;
		height: auto;
		padding: 0;
	}

	/*Alphabet*****************************/
	article.alphabet h1 {
    font-size: 4rem;
    margin: 0 auto;
	}

	/*Footer*****************************/
	footer{
		flex-direction: column;
	}
	
	p.insta{
		padding: 0;
		margin: 10px auto 0;
	}

	p.blabla {
		text-align: center;
		line-height: 1.4em;
	}
	p.sign {
		padding-left: 50px;
		margin: 10px auto 20px;
	}
}