body {
	container: body / inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 16px;
	padding-bottom: 6px;
	align-items:center;
	overflow-x:hidden;
}

.group-top {
	display: flex;
	align-items: center;
	gap: 24px;
	font-size: 20px;
	font-family: 'Galibier';
	font-weight: 800;
	line-height: 1.1;
	text-align: left;
	padding-left: 67px;
}

.group-top-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
}

.group-etape {
	position: relative;
	width: 295px; height: 147px;
	flex-shrink: 0;
}

.spacer {
	position: absolute; top: 0; left: 0; 
	width: 295px; height: 147px;
}

.logo-etape {
	position: absolute; top: 0; bottom: 49px; left: 1px; right: 148px;
}

.subtitle-du-22-avril {
	position: absolute; top: 5px; left: 158px; right: 18px; 
	text-transform: uppercase;
}

.logo-tour {
	width: 228px;
	flex-shrink: 0;
}
.logo-tour-mobile{
	display:none;
}

.group-top-center {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: url(../assets/page-home/group-top-center.png) center / contain no-repeat;
	padding: 53px 31px 42px 32px;
}

.text2 {
	width: 309px; height: 179px;
	flex-shrink: 0;
	align-self: start;
}

.icon-moustique {
	width: 98px;
	flex-shrink: 0;
	align-self: center;
}

.group-top-right {
	width: 364px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}


.subtitle-tentez {
	position: relative; z-index: 5;
	margin: 32px 168px 0 168px;
	--min-size-px: 30; --max-size-px: 30; font-size: var(--interpolate);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}


.btn-participe1 {
	margin-top:18px;
}

.section-center-top{
	width:100%;
	margin-top:-20px;
}

.section-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 36px;
	background-color:black;
	padding: 34px 96px 80px 96px;
	width:100%;
	margin-top:-1px;
}



.group-3lots {
	container: group-3lots / inline-size;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: stretch;
	color: #fff;
	text-align: center;
	padding-bottom: 24px;
}

.subtitle-a-gagner {
	--min-size-px: 19; --max-size-px: 30; font-size: var(--interpolate);
	font-weight: 700;
	line-height: 1;
}

.row-bottom {
	display: flex;
	align-items: flex-end;
	gap: 42px;
	font-weight: 400;
	justify-content:center;
}



/* circle-icon-plus */

.circle-icon-plus {
	margin: 101px 0;
	background-color: #fff;
	padding: 9px;
	border-radius: 50%;
}

.union {
	width: 18px; height: 18px;
}
/* end circle-icon-plus*/


.lot1 {
	margin-bottom: -6px;
	width: 328px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	font-size: 16px;
	line-height: normal;
}

.text-un {
	align-self: stretch;
}

.lot2 {
	margin: 0 -6px;
	width: 340px;
	background-color: #fff;
	padding: 43px 21px 41px 21px;
	border: 6px solid #cce7eb;
	border-radius: 5px;
}

.circle-icon-plus1 {
	margin-left: 6px;
}

.lot3 {
	position: relative;
	margin-bottom: -6px;
	width: 340px; height: 250px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-shrink: 0;
	color: #000;
	font-family: 'Galibier';
	font-weight: 800;
	line-height: 1;
	background-color: #fff;
	padding: 12px 51px 24px 51px;
	border: 6px solid #cce7eb;
	border-radius: 5px;
	overflow:hidden;
}

.title2 {
	position: absolute; top: 50%; left: 50%; 
	translate: -50% -50%;
	opacity: 0.5;
	width: max-content;
	color: #cce7eb;
	font-size: 457px;
	text-transform: uppercase;
	margin-top: -31px;
}

.row-top {
	margin-top: -6px;
	width: 132px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	font-size: 96px;
}

.subtitle {
	text-transform: uppercase;
}

.graphic1 {
	width: 81px;
	flex-shrink: 0;
	aspect-ratio: 3080192 / 2829557;
}

.subtitle-places-pour {
	flex-shrink: 0;
	align-self: stretch;
	font-size: 32px;
	text-transform: uppercase;
}

.lot4 {
	margin-left: 6px;
	width: 328px; height: 258px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1px;
	flex-shrink: 0;
}

.text-un-lot-de-pieges {
	margin-top: -34px;
	flex-shrink: 0;
	font-size: 16px;
	line-height: 1.25;
	margin-bottom:7px;
}

.column {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
}

.rect {
	margin: 0 -6px -6px -6px;
	height: 250px;
	flex-shrink: 0;
	background-color: #fff;
	border: 6px solid #cce7eb;
	border-radius: 5px;
}

.lot5 {
	position: absolute; top: 45px; left: -9px; right: -15px; 
	height: 180px;
	flex-shrink: 0;
}

.image2 {
	position: absolute; top: 0; right: 0; 
	width: 184px;
}

.images {
	position: absolute; top: 2px; left: 0; 
	width: 207px; height: 178px;
}

.image3 {
	position: absolute; top: 0; left: 0; 
	width: 152px;
}

.image4 {
	position: absolute; top: 26px; right: 0; 
	width: 152px;
}

.text-visuels-non {
	opacity: 0.75;
	margin-top: 14px;
	flex-shrink: 0;
}

.group-discount {
	width: 554px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	font-weight: 400;
}

.ticket {
	position: relative;
	margin-left: 1px;
	width: 370px; height: 139px;
	flex-shrink: 0;
	--min-size-px: 16; --max-size-px: 18; font-size: var(--interpolate);
	line-height: 1;
}

.group2 {
	position: absolute; top: 20px; left: 0; 
	width: 369px; height: 91px;
}

.bg {
	position: absolute; top: 50%; left: 50%; 
	translate: -50% -50%;
	width: 369px; height: 91px;
}

.texts {
	position: absolute; top: 12px; left: 63px; 
	width: 244px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.text-jusqu-a {
	text-transform: uppercase;
	text-align: left;
}

.subtitle-35-rembourses {
	margin-top: -4px;
	--min-size-px: 20; --max-size-px: 28; font-size: var(--interpolate);
	font-weight: 500;
	text-transform: uppercase;
	text-align: center;
}

.text-en-differe {
	margin-top: -4px;
	align-self: stretch;
	text-transform: uppercase;
	text-align: right;
}

.stars {
	position: absolute; top: -10px; left: 45px; 
	width: 335px; height: 159px;
}

.text-desc {
	align-self: stretch;
	text-align: center;
}

.footer1 {
	position: relative; z-index: 1;
	margin-left: 1px;
	--min-size-px: 15; --max-size-px: 16; font-size: var(--interpolate);
	font-weight: 400;
	line-height: normal;
	text-align: center;
}

.moutique-footer-right {
	position: absolute; z-index: 1; bottom: 122px; right: 431px; 
	width: 43px;
}



/** breakpoints (margin / paddings) **/

@media screen and (max-width: 1280px) {
	.group-top {
		padding-inline: var(--margin-sm);
	}
	.group-top-center {
		padding-inline: var(--margin-sm);
	}
	.moustiques {
		margin-inline: var(--margin-md);
	}
	.subtitle-tentez {
		margin-inline: var(--margin-md);
	}
	.section-center {
		padding-inline: var(--margin-md);
	}
	.lot2 {
		padding-inline: var(--margin-sm);
	}
	.lot3 {
		padding-inline: var(--margin-md);
	}
}

@media screen and (max-width: 576px) {
	.moustiques {
		margin-inline: var(--margin-sm);
	}
	.subtitle-tentez {
		margin-inline: var(--margin-sm);
	}
	.section-center {
		padding-inline: var(--margin-sm);
	}
	.lot3 {
		padding-inline: var(--margin-sm);
	}
}



/* container queries (flex rows) */

@media screen and (max-width: 1031px) {
	.group-top {
		transform:scale(0.76);
	}
	.texts{
		line-height:1.16;
	}
}



@container body (width < 800px) {
	.group-top {
		flex-direction: column;
		align-items: center;
		gap: 0;
		transform:scale(1);
		margin-top:20px;
	}
	.group-top > * {
		margin-left: unset !important; margin-right: unset !important;
	}
	.group-top-center {
		margin-top:-60px;
	}
	.group-top-right {
		margin-top:-40px;
	}
	
	.section-center-top{
		margin-top:20px;
		width: 200%;
    margin-left: -220px;
		max-width:unset;
	}
	
	.logo-tour{ display:none;}
	.logo-tour-mobile{ 
		display:block;
		margin-top:20px;
		width:160px;
	}
}

@container group-3lots (width < 1180px) {
	.row-bottom {
		flex-direction: column;
		align-items: center;
		gap: 23px;
	}
	.row-bottom > * {
		margin-left: unset !important; margin-right: unset !important;
	}
	.circle-icon-plus{
		margin:0;
	}
	.lot4{
		margin-top:20px;
	}
}

@media screen and (max-width: 670px) {
	
	.footer{
		display:flex;
	}
}