@font-face {
	  font-family: "Montserrat";
	  src: url('../fonts/Montserrat-Regular.woff2') format('woff2'), url('../fonts/Montserrat-Regular.woff') format('woff');
	  font-weight: 400;
	  font-style: normal;
	}
	@font-face {
	  font-family: "Montserrat";
	  src: url('../fonts/Montserrat-Bold.woff2') format('woff2'), url('../fonts/Montserrat-Bold.woff') format('woff');
	  font-weight: 700;
	  font-style: normal;
	}
	@font-face {
	  font-family: "Lora";
	  src: url('../fonts/Lora-SemiBold.woff2') format('woff2'), url('../fonts/Lora-SemiBold.woff') format('woff');
	  font-weight: 600;
	  font-style: normal;
	}
	
	html {
	  height: 100%;
	  font-size: 100%;
	  -ms-text-size-adjust: 100%;
	  -webkit-text-size-adjust: 100%;
	  line-height: 1.4;
	}
	html, body {
	  position: relative;
	  font-family: "Montserrat";
	  color: #F3953F;
	  font-size: 16px;
	  font-weight: 400;
	  padding: 0;
	  margin: 0;
	}
	body {
	  overflow-x: hidden;
	}	
	.button {
		display: inline-block;
		background: #F3953F;
		border: 0; 
		color: white;
		font-size: 20px;
		font-weight: 700;
		transition: all 0.25s ease-in-out;
		padding: 0.35rem 0.75rem 0.5rem;
		cursor: pointer;
		border-radius: 20px
	}
	.button:hover {
		background: #FCC86C;
	}
    .wheel {
        position: relative;
		display: inline-block;
		margin-bottom: 1.5rem;
    }
    .spinner {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
    }
    .spinner img {
	  position: absolute;
	  width: 26%;
	  transform-origin: 50% 100%;
	  top: 16%;
	  left: 37%;
	}
    /* Rotations pour chaque segment */
    #segment1 { transform: rotate(0deg); }
    #segment2 { transform: rotate(45deg); }
    #segment3 { transform: rotate(90deg); }
    #segment4 { transform: rotate(135deg); }
    #segment5 { transform: rotate(180deg); }
    #segment6 { transform: rotate(225deg); }
    #segment7 { transform: rotate(270deg); }
    #segment8 { transform: rotate(315deg); }
	.container {/*max-width: 1088px;*/ margin: 0 auto;}
	.wrapper-bg {min-height: 100vh; background: #fdf1d9 url(../images/main-bg.jpg) no-repeat center bottom; background-size: 100%; text-align: center; padding: 0 15px;}
	.wrapper-bg p{color:#000;}
	img {display: block; max-width: 100%; height: auto;}
	svg {display: block; max-width: 100%; height: auto;}
	h1 {display: inline-block; width: 100%; max-width: 905px; margin: 1rem 0 1.5rem; border-bottom: 3px solid #FCC86C; font-size: 40px; color: #F3953F; font-family: "Lora"; font-weight: 600;}
	.image-wrapper {max-width: 842px; margin: 0 auto 2rem;}
	.links-socials {text-align: center;}
	.links-socials ul {margin: 0; padding: 0.6rem 1.8rem; list-style: none; display: inline-flex; gap: 1rem; background: rgba(252, 200, 108, 0.25); border-radius: 40px;}	
	.links-socials svg {fill: #F3953F; transition: all 0.25s ease-in-out;}
	.links-socials a:hover svg {fill: #FCC86C;}
	.bandeau{background-color: #FCC86C; height: 50px; width: 100%; text-align: center; color: #FFF;}
	.footer{ background-color: #FDF1D9;text-align: center;;height:50px; padding-top: 25px;}
	.footer a{color: #000; font-size:12px;}
	
@media screen and (max-width: 767px) {
	h1 {font-size: 30px;}
	.bandeau{height: 70px; }
}