section#home-1::before {
	background-image: url('../images/heart-shape-island-360.webp');
}

h1 {
	font-size: 24px;
	line-height: 36px;
	letter-spacing: 0.12px;
	margin-bottom: 20px;
	padding-bottom: 0;
	border-bottom: none;
	text-align: left;
}

main :is(h2, h3) {
	text-decoration: underline;
	text-decoration-color: var(--wyg-blue-alt);
	text-decoration-thickness: 4px;
	text-underline-offset: .3em;
}

h3 {
	font-size: 24px;
    line-height: 36px;
    letter-spacing: 0.12px;
    margin-bottom: 24px;
}

section#home-1 {
	display: flex;
    align-items: center;
    background-color: transparent;
    height: unset;

	& > div {
		position: relative;
		margin: min(75dvh, 100vw) 0 0 0;
		width: 100%;
        padding: 32px 20px;

        & p {
        	max-width: 444px;
        }
	}
}

section#home-2 {
	height: 8.5rem;
	display: flex;
	align-items: center;
	justify-content: center;

	& h2 {
		text-align: center;
		text-decoration: none;
		border-bottom: solid 4px var(--wyg-blue-alt);
		padding-bottom: 8px;
		margin: 0;
	}
}

section:nth-child(2n) {
	background-color: var(--background);
}

section:nth-child(2n+1) {
	background-color: white;
}

section:is(#home-3, #home-4, #home-5, #home-6, #home-7) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

section:is(#home-3, #home-4, #home-6, #home-7) > img {
	max-width: 100%;
	margin-bottom: 2rem;
}

section:is(#home-3, #home-4, #home-5) span {
	display: block;
	color: var(--wyg-blue-alt);
	opacity: 0.5;
	text-transform: uppercase;
	white-space: nowrap;
	font: normal normal bold 36px/48px Playfair Display;
	text-align: center;
}

section#home-5 {
	padding: 0;

	& > div {
		margin: 2rem;
	}

	& > img {
		width: min(100%, 480px);
	}
}

section#home-6 {

	& img {
		max-height: 480px;
		border-radius: 4px;
	}
}

section#home-7 {

	& img {
		border-radius: 4px;
	}
}

section#reviews {
	background: var(--wyg-blue-alt-05);
	display: flex;
	flex-direction: column;
	padding: 2rem 0 0 0;

	& h2 {
		text-align: center;
	}

	& .carousel-section {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 170%;
        margin-left: -35%;

		& button {
			display: none;
		}
	}

	& .carousel {
		position: relative;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;

		& > :first-child {
			z-index: -1000;
			order: 4;
		}

		& > .content {
			transition: .3s ease-in-out;
		}

		& > .content[display] {
			flex: 1;
			opacity: 1;
			width: max(15rem, 75vw);
			margin-inline: .5rem;
		}

		& > .content:not([display]):has(+ .content[display="1"]) {
			z-index: -1000;
			order: 0;
		}

		& > .content[display="1"] {
			z-index: 20;
			order: 1;
			opacity: 0.5;
		}

		& > .content[display="2"] {
			z-index: 30;
			order: 2;
			filter: brightness(1);

			&:hover {
				filter: brightness(0.97);
				cursor: pointer;
			}
		}

		& > .content[display="3"] {
			z-index: 20;
			order: 3;
			opacity: 0.5;
		}

		& > .content[display="3"] + .content:not([display]) {
			z-index: -1000;
			order: 4;
		}

		& > .content:not([display]) {
			width: 0;
			flex: 0;
			padding: 0;
			opacity: 0;
			margin: 0;
		}
	}

	& span.stars {
		font-size: 24px;
		color: gold;
	}

	& .review {
		display: flex;
		flex-direction: column;
		height: 32rem;
		overflow: hidden;

		& a {
			font-size: 20px;
			font-family: Playfair Display;
			color: var(--wyg-blue);
			text-decoration-thickness: 2px;
		}

		& div {
			display: flex;
    		flex-direction: column;
    		align-items: center;
			justify-content: space-evenly;
		}

		& p.date-avis {
			display: inline;
			font-size: 14px;
		}

		& > p {
			overflow: auto;
			margin-top: .5em;
			padding: .3em;
			text-align: left;
		}

		& ::-webkit-scrollbar {
		    width: .4rem;
		    height: .4rem;
		}

		& ::-webkit-scrollbar-track {
		    background: transparent;
		}

		& ::-webkit-scrollbar-thumb {
		    background: #00000080;
		    border-radius: .2rem;
		}
	}

    & .review-thumb {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0 0 1rem 0;
	}

	& #review-scroll {
		height: 4rem;
	}

	& .scroll-container {
		display: flex;
		flex-direction: row;
		align-items: center;
        justify-content: center;
        height: 100%;

		& span.dot {
			border-radius: 50%;
			margin: 6px;
			height: 8px;
			width: 8px;
			background-color: #c8c8c8;
			opacity: 1;
			transition: .3s ease-out;

			&.active {
				height: 12px;
				width: 12px;
				background-color: var(--highlight);
			}

			&.hidden {
				opacity: 0;
				height: 0;
				width: 0;
				margin: 0;
			}
		}
	}
}

section#home-8 {
	padding: 2rem;

	& :is(h2, h3, p) {
		text-align: center;
	}

	& :is(h2, h3) {
		text-decoration: none;
	}

	& div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 1rem;
	}

	& > div > div {
		max-width: 265px;
	}

}

@media only screen and (min-width: 360px) {

	section#home-1::before {
		background-image: url('../images/heart-shape-island-720.webp');
	}
}

@media only screen and (min-width: 640px) {

	h1 {
		font-size: 36px;
		line-height: 48px;
		letter-spacing: 0.36px;
	}

	h3 {
		font-size: 36px;
	    line-height: 42px;
	    letter-spacing: 0.36px;
	    margin-bottom: 40px;
	}

	section#reviews .carousel > .content[display] {
		width: 100%;
		max-width: 40rem;
	}

	section#reviews .carousel > .content:not([display]) {
		max-width: 0;
	}

	section#reviews .carousel > .content:not([display="2"]) {
		opacity: 0;
	}

	section#reviews .carousel-section button {
		display: initial;
		position: absolute;
		z-index: 40;
		height: 4em;
		width: 4em;
		background-color: transparent;
		box-shadow: none;
		background-size: 80%;
		background-position: center;
		background-repeat: no-repeat;
		transition: .1s ease-in;

		&.previous {
			right: calc(50% + min(19%, 30rem));
			background-image: url('../images/icons/icon-left.svg');
		}

		&.next {
			left: calc(50% + min(19%, 30rem));
			background-image: url('../images/icons/icon-right.svg');
		}

		&:hover {
			background-size: 100%;
		}

		&.previous:active {
			transform: translate(-.5em, 0);
		}

		&.next:active {
			transform: translate(.5em, 0);
		}
	}
}

@media only screen and (min-width: 720px) {

	h2 {
		white-space: nowrap;
	}

	section#home-1 {
		height: 100dvh;

		&::before {
			background-image: url('../images/heart-shape-island-1440.webp');
			background-position: 92% 50%;
		}
	}

	section#home-1 > div {
		position: relative;
		width: unset;
		margin: 5rem auto 0 auto;
		padding: 64px 42px;

		& h2 {
			margin-bottom: 24px;
		}
	}

	section#home-2 {
		height: 10.5rem;
	}

	section#reviews .review {
		height: 24rem;
	}
}

@media only screen and (min-width: 1024px) {

	section#home-1 > div {
		margin: 5rem auto 0 10.5rem;
	}

	section:is(#home-3, #home-4, #home-5, #home-6, #home-7) {
		
		& > div {

			& :is(h2, h3) {
				opacity: 0;
				transition: opacity .6s ease-in, transform 1s ease-out;
			}

			& p {
				opacity: 0;
				transition: opacity .6s .3s ease-in, transform 1s ease-out;
			}
		}

		& > img {
			margin-bottom: 0;
		}
	}

	section:is(#home-3, #home-4, #home-5) span {
		font: normal normal bold 80px/108px Playfair Display;
		width: 35vw;
	}

	section#home-3 {
		flex-direction: row;

		& > div span {
			font-size: 72px;
		}

		& > div p {
			max-width: 480px;
		}

		& img {
			padding: 5rem 2rem;
			opacity: 0;
			transition: opacity .6s ease-in, transform .6s ease-out;
			z-index: 1;
		}

	}

	section#home-4 {
		& > div :is(h3, p) {
			transform: translate(0, 80px);
		}

		& > div {
			margin-bottom: 7rem;

			& p {
				max-width: 760px;
			}
		}
	}

	section#home-5 {
		flex-direction: row-reverse;
		justify-content: flex-start;

		& > div :is(h3, p) {
			transform: translate(-80px, 0);
		}

		& > div p {
			max-width: 480px;
		}

		& img {
			width: unset;
			max-width: 50%;
		}
	}

	section#home-6 {
		flex-direction: row-reverse;
		justify-content: center;
		padding: 4rem;

		& div {
			max-width: 560px;
		}

		& img {
			max-width: 40%;
			max-height: 640px;
			opacity: 0;
			transform: translate(-80px, 0);
			transition: opacity .6s ease-in, transform .6s ease-out;
			margin-left: 8vw;
		}
	}

	section#home-7 {
		flex-direction: row;
		padding-top: 5rem;
		padding-bottom: 5rem;

		& img {
			opacity: 0;
			transition: opacity .6s ease-in;
		}

		& > div {
			margin-left: 5rem;
			max-width: 520px;

			& h2 {
				opacity: 0;
				transition: opacity .6s .2s ease-in;
			}

			& p {
				opacity: 0;
				transition: opacity .6s .4s ease-in;
			}

			& button {
				opacity: 0;
				transition: opacity .6s .6s ease-in;
			}
		}

	}

	section#reviews {
		padding: 4rem 0 0 0;

		& #review-scroll {
			height: 7rem;
		}
	}

	section#reviews .review {
		height: 16rem;
		padding: 2rem 4rem;

		&.content[display] {
			margin-inline: 1.5rem;
		}

		& .review-thumb {
			margin: 0 1rem 0 0;
		}

		& > div {
    		flex-direction: row;
    		justify-content: flex-start;

    		& > div {
    			height: 100%;
    			align-items: flex-start;
    		}
    	}

    	& div:has(> p.date-avis) {
    		flex-direction: row;
    		align-items: baseline;

    	}

    	& p.date-avis {
			margin-left: 1rem;
    	}
	}

	section#home-8 {
		padding: 4rem;

		& > div {
			flex-direction: row;
			margin-inline: auto;

			& > div {
				padding: 1rem;
			}
		}

	}
}

@media only screen and (min-width: 720px) and ((min-height: 704px) or (min-width: 1440px)) {

	section#home-1::before {
		background-image: url('../images/heart-shape-island-2880.webp');
	}
}