#loader {
	position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  border: 5px solid var(--blanc);
  border-radius: 50%;
  border-top: 5px solid var(--rose);
  width: 50px;
  height: 50px;
	cursor: wait;
  -webkit-animation: load 2s linear infinite; /* Safari */
  animation: load 2s linear infinite;
}

/* Safari */
@-webkit-keyframes load {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes load {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Couv**********************************************/

section#couv{
	min-height: 100vh;
	background: url(../images/couv-bdef.jpg) no-repeat;
	object-fit: cover;
}

article.type{
	width: 85%;
	margin: 0 auto;
	padding-top: 25%;
	font-size: 4rem;
	font-weight: 100;
	line-height: 3.6rem;
	white-space: wrap;
	color: var(--rose);
}

section#couv::after {
  position: absolute;
  margin-top: 1em;
  pointer-events: none;
  content: '';
  bottom: 0;
  left: 95%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 25px 0 25px;
  border-color: var(--rose) transparent transparent transparent;
  margin-left: -50px;
	animation: fleche 2s  infinite both;
}

.next-page{
position: absolute;
right: 65px;
top: 900px;
width: 100px;
height: 200px;
cursor: pointer;
}

.up{
position: fixed;
right: 5px;
top: 96%;
width: 0;
height: 0;
border-style: solid;
border-width: 0 15px 20px 15px;
border-color: transparent transparent var(--blanc) transparent;
cursor: pointer;
}




@keyframes fleche {
  from {
    transform: translate3d(0, -25%, 0);
    visibility: visible;
  }

	50%{
	transform: translate3d(0, 0, 0);
	}

  to {
		transform: translate3d(0, -25%, 0);
  }
}

/* intro **********************************************/
article.intro {
	display: flex
	padding: 3rem 0;
	width: 80%;
	margin: 0 auto;
	column-count: 3;
	column-fill: balance;
	column-rule: solid 1px var(--jaune);
	column-gap: 3rem;
}

article.intro span{
	font-weight: 600;
	font-size: 1.4em;
	color: var(--jaune);
}

article.intro p {
	text-indent: 3em;
}

article.intro p.ps {
	display: flex;
	align-items: flex-end;
	font-size:.8em;
	line-height: 1.2em;
	text-indent: 0;
}

article.intro img{
	width: 80px;
	padding-left: 1rem;
}

article.intro a{
	color:var(--jaune);
	font-weight: 600;
	text-decoration: none;
	transition: color .4s;
}

article.intro a:hover{
	color:var(--jaune-clair);
}

#img-intro {
	display: flex;
	column-gap: 2em;
	justify-content: center;
	max-width: 50vw;
	margin: 0 auto;
	padding-bottom: 2rem;
}

#img-intro img{
	min-width: 12vw;
	height: auto;
}

div.terrain {
	display:flex;
	place-items: flex-end;
}

div.terrain p{
	line-height: 1.2rem;
}

/* Masques ******************************************/
article.masques{
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: auto;
}

article.masques h1{
	grid-column: 3/7;
	grid-row: 4/5;
	text-align: center;
	place-self: center center;
}

article.masques img{
	width: 100%;
	height: auto;
}

article.masques a{
font-size: 1rem;
}

div.txt{
	position: relative;
	display: table;
	background: var(--noir);
	text-align: center;
}

div.txt p{
	display: table-cell;
	vertical-align: middle;
	padding: 10px;
}

article.masques .texte1{
	grid-column: 6/8;
	grid-row: 5/6;
	padding: 20px;
}

article.masques .texte2{
	grid-column: 2/4;
	grid-row: 7/8;
	padding: 20px;
}

article.masques .texte3{
	grid-column: 4/6;
	grid-row: 9/10;
	padding: 20px;
}

article.masques .texte4{
	grid-column: 6/7;
	grid-row: 10/11;
	padding: 20px;
}

article.masques .texte5{
	grid-column: 1/3;
	grid-row: 1/2;
	padding: 20px;
}

article.masques .texte6{
	grid-column: 1/3;
	grid-row: 1/2;
	padding: 20px;
	color: var(--rouge);
	font-weight: 600;
}

article.masques .texte7{
	grid-column: 3/5;
	grid-row: 12/13;
	padding: 20px;
}

article.masques .texte8{
	grid-column: 5/7;
	grid-row: 20/21;
	padding: 20px;
}

article.masques .texte9{
	grid-column: 5/7;
	grid-row: 15/16;
	padding: 20px;
}

article.masques .texte10{
	grid-column: 4/5;
	grid-row: 16/17;
	padding: 20px;
}

/* 2021/02 ******************************************/

article.fevrier{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.fevrier img{
	width: 100%;
	height: auto;
	transition: all 1s;
}

article.fevrier img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.fevrier img.big{
	grid-column: 2/4;
	grid-row: 2/4;
	place-self: center center;
}

article.fevrier img.big:hover{
	cursor: zoom-in;
	opacity: 1;
}

/*Bassin ******************************************/
article.bassin{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.bassin img{
	width: 100%;
	height: auto;
}

article.bassin img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.bassin img.big{
	grid-column: 1/3;
	grid-row: 1/3;
	place-self: center center;
}

article.bassin img.big:hover{
	cursor: zoom-in;
	opacity: 1;
}

/*Grandchamp ******************************************/
article.grandchamp{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.grandchamp img{
	width: 100%;
	height: auto;
}

article.grandchamp img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.grandchamp img.big{
	grid-column: 2/4;
	grid-row: 3/6;
}

article.grandchamp img.big:hover{
	cursor: zoom-in;
	opacity: 1;
}

/*Selfeet**********************************************/
div.txt-image {
  display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
  background: var(--noir);
  text-align: center;
	min-width: 22.5%;
	padding: 20px;
}

div.txt-image img {
	width: 40%;
}

div.txt-image a{
  font-size: 1rem;
}

div.txt-image p{
  padding:20px;
}

/* StreetArt ******************************************/
article.streetart{
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: auto;
}

article.streetart h1{
	grid-column: 1/4;
	grid-row: 1/2;
	text-align: left;
	place-self: center center;
}

article.streetart img{
	width: 100%;
	height: auto;
}

article.streetart img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.streetart img.mur-1{
	grid-column: 5/7;
	grid-row: 1/3;
}

article.streetart img.mur-9{
	grid-column: 2/5;
	grid-row: 3/6;
}

article.streetart img.mur-5{
	grid-column: 7/9;
	grid-row: 4/6;
}

article.streetart img.mur-6{
	grid-column: 5/7;
	grid-row: 5/7;
}

article.streetart img.mur-2{
	grid-column: 7/9;
	grid-row: 2/4;
}

article.streetart img.mur-7{
	grid-column: 3/5;
	grid-row: 6/8;
}

article.streetart img.mur-8{
	grid-column: 7/9;
	grid-row: 7/9;
}

article.streetart img.mur-3{
	grid-column: 7/9;
	grid-row: 6/7;
}

article.streetart img.mur-4{
	grid-column: 5/7;
	grid-row: 6/7;
}
/*taille modal___________

 img.mur-8.modalcontent img#img01{
  max-width: 100%;
	border: solid 5px red;
}*/

/*2022/01 ******************************************/
article.janvier-2022{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.janvier-2022 img{
	width: 100%;
	height: auto;
}

article.janvier-2022 img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.janvier-2022 img.big{
	grid-column: 2/4;
	grid-row: 2/4;
}

article.janvier-2022 img.big:hover{
	cursor: zoom-in;
	opacity: 1;
}


/*Arcachon 2022/05 ******************************************/
article.arcachon-2022{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto;
	grid-column: 1/3;
	grid-row: 1/2;
}

div.arcachon-sous-grille{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 2;
	grid-column:3/6;
	grid-row: 1/2;
}

article.arcachon-2022 img{
	width: 100%;
	height: auto;
	align-self: center;
}

article.arcachon-2022 img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.arcachon-2022 img.big{
	grid-column: 4/6;
	grid-row: 3/5;
}

article.arcachon-2022 img.big:hover{
	cursor: zoom-in;
	opacity: 1;
}

article.arcachon-2022 img.big1{
	grid-column: 1/3;
	grid-row: 1/2;
}

article.arcachon-2022 img.big1:hover{
	cursor: zoom-in;
	opacity: 1;
}

/*2023/04******************************************/

article.avril-2023{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.avril-2023 img{
	width: 100%;
	height: auto;
}

article.avril-2023 img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.avril-2023 img.big{
	grid-column: 2/4;
	grid-row: 2/4;
}

article.avril-2023 img.big:hover{
	cursor: zoom-in;
	opacity: 1;
}

/*2023/07******************************************/

article.juillet-2023{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.juillet-2023 img{
	width: 100%;
	height: auto;
}

article.juillet-2023 img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.juillet-2023 img.big{
	grid-column: 3/5;
	grid-row: 4/6;
}

article.juillet-2023 img.big:hover{
	cursor: zoom-in;
	opacity: 1;
}

/*post 800******************************************/

article.post-800{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.post-800 img{
	width: 100%;
	height: auto;
}

article.post-800 img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.post-800 .txt-800{
	grid-column: 1/4;
	grid-row: 1/2;
	display: block;
	width: 100%;
	height: auto;
	padding: 3rem;
	font-size: 1.5rem;
	line-height: 2rem;
	color: var(--jaune);
}

/*villas******************************************/

article.villas{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: auto;
}

article.villas img{
	width: 100%;
	height: auto;
}

article.villas img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.villas .txt-villas{
	grid-column: 3/5;
	grid-row: 3/4;
	display: block;
	width: 100%;
	height: auto;
	padding: 2.3rem;
	font-size: 1.5rem;
	line-height: 2rem;
	color: var(--noir);
	background-color: var(--orange)
}

/*Maroc 2023******************************************/

article.maroc-2023{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: auto;
}

article.maroc-2023 img{
	width: 100%;
	height: auto;
}

article.maroc-2023 img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.maroc-2023 img.big1{
	grid-column: 1/3;
	grid-row: 1/3;
}

article.maroc-2023 img.big2{
	grid-column: 5/7;
	grid-row: 1/3;
}

article.maroc-2023 img.big3{
	grid-column: 3/5;
	grid-row: 4/6;
}

article.maroc-2023 img.big4{
	grid-column: 1/3;
	grid-row: 8/10;
}

article.maroc-2023 img.big5{
	grid-column: 5/7;
	grid-row: 8/10;
}

/* decembre 2025******************************************************************/
article.decembre-2025{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.decembre-2025 img{
	width: 100%;
	height: auto;
}

article.decembre-2025 img.big{
	grid-column: 2/4;
	grid-row: 2/4;
	place-self: center center;
}

article.decembre-2025 img.big1{
	grid-column: 2/4;
	grid-row: 5/7;
	place-self: center center;
}

article.decembre-2025 img{
	cursor: zoom-in;
	opacity: 1;
}

article.decembre-2025 img:hover, article.decembre-2025 img.big:hover, article.decembre-2025 img.big1:hover{
	cursor: zoom-in;
	opacity: .85;
}

/* octobre 2025******************************************************************/
	article.octobre-2025{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.octobre-2025 img{
	width: 100%;
	height: auto;
}

article.octobre-2025 img.big{
	grid-column: 2/4;
	grid-row: 3/5;
	place-self: center center;
}

article.octobre-2025 img.big-1{
	grid-column:2/4;
	grid-row: 5/7;
	place-self: center center;
}

article.octobre-2025 img{
	cursor: zoom-in;
	opacity: 1;
}

article.octobre-2025 img:hover, article.octobre-2024 img.big:hover{
	cursor: zoom-in;
	opacity: .85;
}

article.octobre-2025 div.halloween img{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2rem 0;
	width: 95%;
}


/* juillet 2025******************************************************************/
article.juillet-2025{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.juillet-2025 img{
	width: 100%;
	height: auto;
}

article.juillet-2025 img.big{
	grid-column: 2/4;
	grid-row: 1/3;
	place-self: center center;
}

article.juillet-2025 img{
	cursor: zoom-in;
	opacity: 1;
}

article.juillet-2025 img:hover, article.aout-2024 img.big:hover{
	cursor: zoom-in;
	opacity: .85;
}

/* janvier 2025******************************************************************/
	article.janvier-2025{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.janvier-2025 img{
	width: 100%;
	height: auto;
}

article.janvier-2025 img.big{
	grid-column: 1/3;
	grid-row: 1/3;
	place-self: center center;
}

article.janvier-2025 img.big-1{
	grid-column:3/5;
	grid-row: 7/9;
	place-self: center center;
}

article.janvier-2025 img{
	cursor: zoom-in;
	opacity: 1;
}

article.janvier-2025 img:hover, article.janvier-2024 img.big:hover{
	cursor: zoom-in;
	opacity: .85;
}
}

article.janvier-2025 img{
	width: 100%;
	height: auto;
}

article.janvier-2025 img.big{
	grid-column: 1/3;
	grid-row: 1/3;
	place-self: center center;
}

article.janvier-2025 img.big-1{
	grid-column:3/5;
	grid-row: 7/9;
	place-self: center center;
}

article.janvier-2025 img{
	cursor: zoom-in;
	opacity: 1;
}

article.janvier-2025 img:hover, article.janvier-2024 img.big:hover{
	cursor: zoom-in;
	opacity: .85;
}

/* aout 2024******************************************************************/
article.aout-2024{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.aout-2024 img{
	width: 100%;
	height: auto;
}

article.aout-2024 img.big{
	grid-column: 2/4;
	grid-row: 2/4;
	place-self: center center;
}

article.aout-2024 img{
	cursor: zoom-in;
	opacity: 1;
}

article.aout-2024 img:hover, article.aout-2024 img.big:hover{
	cursor: zoom-in;
	opacity: .85;
}


/* juillet 2024******************************************************************/

article.juillet-2024{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: auto;
}

article.juillet-2024 img{
	width: 100%;
	height: auto;
}

article.juillet-2024 img.big{
	grid-column: 1/3;
	grid-row: 1/3;
	place-self: center center;
}

article.juillet-2024 img.big1{
	grid-column: 1/3;
	grid-row: 5/7;
	place-self: center center;
}

article.juillet-2024 img{
	cursor: zoom-in;
	opacity: 1;
}

article.juillet-2024 img:hover, article.juillet-2024 img.big:hover, article.juillet-2024 img.big1:hover{
	cursor: zoom-in;
	opacity: .85;
}


/* mars 2024 ******************************************************************/

article.mars-2024, article.fevrier-2024, article.janvier-2024{
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
}

article.mars-2024 img, article.fevrier-2024 img, article.janvier-2024 img{
	width: 100%;
	height: auto;
	transition: all 1s;
}

article.mars-2024 img:hover, article.fevrier-2024 img:hover, article.janvier-2024 img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.mars-2024 img.big{
	grid-column: 2/4;
	grid-row: 2/4;
	place-self: center center;
}

article.mars-2024 img.big1{
	grid-column: 2/4;
	grid-row: 4/6;
	place-self: center center;
}

article.mars-2024 img.big:hover, article.mars-2024 img.big1:hover{
	cursor: zoom-in;
	opacity: 1;
}

/* février 2024******************************************************************/

article.fevrier-2024 img.big{
	grid-column: 3/5;
	grid-row: 2/4;
	place-self: center center;
}

article.fevrier-2024 img.big1{
	grid-column: 1/3;
	grid-row: 4/6;
	place-self: center center;
}

article.fevrier-2024 img.big:hover, article.fevrier-2024 img.big1:hover{
	cursor: zoom-in;
	opacity: 1;
}

/* janvier 2024******************************************************************/

article.janvier-2024 img.big{
	grid-column: 1/3;
	grid-row: 1/3;
	place-self: center center;
}

article.janvier-2024 img.big1{
	grid-column: 1/3;
	grid-row: 5/7;
	place-self: center center;
}

article.janvier-2024 img.big:hover, article.janvier-2024 img.big1:hover{
	cursor: zoom-in;
	opacity: 1;
}

/*people******************************************/

article.people{
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: auto;
}

article.people img{
	width: 100%;
	height: auto;
}

article.people img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.people .people-txt{
	grid-column: 4/6;
	grid-row: 4/5;
	place-self: center center;
	display: block;
	width: 100%;
	height: auto;
	text-align: center;
	/*color: var(--jaune);
	background: black;*/
}

article.people .people-txt h1{
	font-family: 'Lobster', serif ;
	font-size: 6rem;
	color: var(--noir);
}

/* Alphabet ******************************************/
article.alphabet{
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto;
}

article.alphabet .titre{
	grid-column: 2/5;
	grid-row: 1/2;
	text-align: center;
	padding: 0 10%;
}

article.alphabet h1{
	font-family: 'Lobster', serif ;
	font-size: 5rem;
	color: var(--jaune);
	margin: 3rem 0 2rem;;
}

article.alphabet img{
	width: 100%;
	height: auto;
}

article.alphabet img:hover{
  cursor: zoom-in;
	opacity: .8;
}

article.alphabet p{
	place-self: center center;
}


/* Footer
footer{
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr auto;
	background: var(--noir);
	padding: 0 25px;
	font-size: 80%;
}

p.insta{
	grid-column: 1/2;
	display: flex;
	align-items: center;
}

p.insta img{
	width: 20px;
	transition: opacity .4s;
	padding-left: .5em;
}

p.insta img:hover{
	opacity: .7;
}

p.sign {
	grid-column: 3/4;
	display: flex;
	align-items: center;
}

p.sign img{
	display: inline;
	vertical-align: baseline;
	width: 85px;
	padding: 0 4em 0 .2em;
	transition: opacity .4s;
}

p.sign img:hover{
	opacity: .7;
}

p.blabla{
	grid-column: 2/3;
	display: block;
	max-width: 50%;
	margin: 20px auto;
	text-align: center;
}

.blabla span{
	font-size: 2em;
	color: var(--orange);
}*/

footer{
	display: flex;
	width: 100%;
	background: var(--noir);
	font-size: 80%;
	justify-content: center;
}

p.insta{
	display: flex;
	align-items: center;
	padding-left: 80px;

}

p.insta img{
	width: 20px;
	transition: opacity .4s;
	padding-left: .5em;
}

p.insta img:hover{
	opacity: .7;
}

p.sign {
}

p.sign img{
	display: inline;
	vertical-align: top;
	width: 85px;
	padding: 0 4em 0 .2em;
	transition: opacity .4s;
}

p.sign img:hover{
	opacity: .7;
}

p.blabla{
	display: block;
	max-width: 50%;
	margin: 20px auto;
	text-align: center;
}

.blabla span{
	font-size: 2em;
	color: var(--orange);
}