h1{
color:green;
text-align:center;
padding:20px 40px 20px 40px;
background-color:#F5E20A; 
margin-bottom: 3px
}

.fondcouleur{
background-color: #f0a959;
}


.caree{
background-color:pink;
width:250px; 
height:250px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
text-align:center;
}
.caree:hover{
background-color:#e65c74;
}
.caree a{
color: #820a64;
}

.container{
	display: flex;
	justify-content: space-between;
	background-image: url("images/IMG_20241029_170024784_MFNR.jpg");
	background-position: center center;
	padding: 20px 40px;
}


#plaque{

padding-top:40px;
padding-bottom:40px;
text-align:center;
font-size:25px;
border-top:2px solid black;
border-bottom:2px solid black;
margin-top:3px;
font-weight: bold
}

#lelongtexte,
#lelongtexteb{
padding: 20px 150px 20px 150px;

background-color: rgba(255, 255, 255, 0.75);
background-image:
  url("images/imagechevalier.png"),
  url("images/sallesombre.jpg");
background-position:
  top center,
  bottom center;
background-repeat:
  no-repeat,
  no-repeat;
  
background-size: contain;
background-blend-mode: lighten;
padding: 2rem;

}
#lelongtexteb{
	background-size: cover;
	
	
	
}

#back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
display: none;
width: 55px;
height: 55px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
text-align: center;
line-height: 55px;
border-radius: 50%;
text-decoration: none;
font-size: 22px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 9999;
}

#back-to-top:hover {
background-color: #000;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* PAGE2 */
	
.galerie{

display: flex;
justify-content: space-between
}	

.image{
width:300px
}


/* ******* */	
/* PAGE3 */
/* ******* */


	#lavideo{
		padding: 40px 0 100px 0;
	}
	
	.circles {
	  position: relative;
	  width: 100%;
	  height: 300px;
	  background: #ffffff;
	  overflow: hidden;
	}

	/* base cercle */
	.circle {
	  position: absolute;
	  width: 80px;
	  height: 80px;
	  border-radius: 50%;
	  opacity: 0.9;
	}

	/* couleurs sobres */
	.c1 { background: #2563eb; left: 20%; top: 40%; }
	.c2 { background: #16a34a; left: 45%; top: 30%; }
	.c3 { background: #9333ea; left: 70%; top: 45%; }

	/* animations */
	.c1 {
	  animation: move1 2s ease-in-out infinite;
	}

	.c2 {
	  animation: move2 2s ease-in-out infinite;
	}

	.c3 {
	  animation: move3 2s ease-in-out infinite;
	}

	@keyframes move1 {
	  0%, 100% { transform: translateY(0); }
	  50% { transform: translateY(-30px); }
	}

	@keyframes move2 {
	  0%, 100% { transform: translateX(0); }
	  50% { transform: translateX(30px); }
	}

	@keyframes move3 {
	  0%, 100% { transform: translate(0, 0); }
	  50% { transform: translate(-20px, -20px); }
	}

	
	.containerb {
	display: flex;
	justify-content: center;
	margin-bottom: 50px;
	flex-direction: column;
	align-items: center;
	}
	
/* code balle rebondissante  */

	.cadre {
	width: 300px;
	height: 200px;
	border: 4px solid #999;
	position: relative;
	overflow: hidden;
	background: white;
	}

	.ball			{
	width: 30px;
	height: 30px;
	background: crimson;
	border-radius: 50%;
	position: absolute;
	animation: bounce 3s linear infinite;
	}

	@keyframes bounce {
	0%   { top: 0; left: 0; }
	25%  { top: 0; left: 270px; }
	50%  { top: 170px; left: 270px; }
	75%  { top: 170px; left: 0; }
	100% { top: 0; left: 0; }
	}
	
/* balle qui touche le sol    */			
	
.scene {
position: relative;
width: 300px;
height: 250px;
}

.ground {
position: absolute;
bottom: 40px;
width: 100%;
height: 6px;
background: #999;
}

.shadow {
position: absolute;
bottom: 34px;
left: 50%;
width: 60px;
height: 12px;
background: rgba(0,0,0,0.3);
border-radius: 50%;
transform: translateX(-50%);
animation: shadow 1.2s infinite ease-in-out;
}

.balle {
position: absolute;
bottom: 46px;
left: 50%;
width: 40px;
height: 40px;
background: crimson;
border-radius: 50%;
transform: translateX(-50%);
animation-name: bounce-1;
animation-duration: 2.4s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.28,.84,.42,1);
}

@keyframes bounce-1 {
0% {
transform: translate(-50%, 0) scale(1.1, 0.9);
}

20% {
transform: translate(-50%, -140px) scale(0.95, 1.05);
}

50% {
transform: translate(-50%, 0) scale(1.1, 0.9);
}

65% {
transform: translate(-50%, -70px) scale(0.98, 1.02);
}

80% {
transform: translate(-50%, 0) scale(1.05, 0.95);
}

100% {
transform: translate(-50%, 0) scale(1.1, 0.9);
}
}

@keyframes shadow {
0%, 50%, 80%, 100% {
transform: translateX(-50%) scale(1.2);
opacity: 0.35;
}

20% {
transform: translateX(-50%) scale(0.5);
opacity: 0.1;
}

65% {
transform: translateX(-50%) scale(0.7);
opacity: 0.2;
}
}

/* PAGE4*/

	#lelongtexteb{
	padding: 20px 150px 20px 150px
	}

	.circleb {
		width: 300px;
		height: 300px;
		margin:20px auto;

		background-image: url("images/IMG_20241029_103656840_MFNR.jpg");
		background-size: cover;
		background-position: center;

		mask-image: radial-gradient(
			circle at center,
			black 60%,
			transparent 61%
		);

		-webkit-mask-image: radial-gradient(
			circle at center,
			black 60%,
			transparent 61%
		);

		
	}