/****** HERO ********/
.hero-brasserie {
    display: flex;
    position: relative;
    min-height: calc(100vh - 100px);
	background: url(/wp-content/uploads/2025/11/Frame-58.png);
	background-size:cover;
	background-repeat:no-repeat;
}
.hero-brasserie:after{
	content:"";
	position:absolute;
	height:100px;
	width:100%;
    bottom: 0;
    left: 0;
	z-index:0;
	background:linear-gradient(to top, var(--violet-clair), transparent);
	pointer-events:none;
}
#brasserie-hero-img-left {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50vw;
    height: 90%;
    object-fit: cover;
    border-radius: 50vh 50vh 0 0; /*400px 400px 0 0 */
	z-index: 1;
}

#brasserie-hero-img-right {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 700px;
    height: auto;
    object-fit: contain;
    transform: translate(0%, -50%) rotate(33deg);
    max-height: 60vh;
}
.hero-brasserie_content{
	align-items:end;
	justify-content:center;
	display:flex;
}
.hero-brasserie_content .hero-txt {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 560px;
    background: var(--blanc);
    z-index: 3;
    height: fit-content;
    padding: 160px 70px 50px;
    border-radius: 270px 270px 0 0;
    text-align: center;
}
@media screen and (max-width:1200px){
	#brasserie-hero-img-right {
		top: 60%;
		width: 500px;
	}
}
@media screen and (max-width:991px){
	.hero-brasserie_content {
		justify-content: end;
	}
	.hero-brasserie {
		min-height: 700px;
	}
	#brasserie-hero-img-right {
        width: 400px;
        top: 45%;
        left: 55%;
    }
	.hero-brasserie_content .hero-txt {
    	padding: 100px 50px 35px;
		border-radius: 230px 230px 0 0;
	}
}
@media screen and (max-width:767px){
	.hero-brasserie {
        min-height:calc(100dvh - 90px);
    }
	#brasserie-hero-img-left{
		width: 100vw;
	}
	.hero-brasserie_content .hero-txt {
        padding: 100px 25px 40px;
        border-radius: 200px 200px 0 0;
        margin-right: -20px;
		margin-left: -20px;
		width: calc(100% + 40px);
	}
	#brasserie-hero-img-right {
        width: 280px;
        z-index: 3;
        top: 10px;
        transform: translateY(0px) rotate(35deg);
        right: 20px;
    }
}
	

/**** PRESENTATION *****/
.presentation-brasserie{
	position:relative;
	min-height: calc(70vh - 0px);
	background:url(/wp-content/uploads/2025/11/animation-louche.png);
	background-size:cover;
	background-repeat:no-repeat;
}
.presentation-brasserie:after{
	content:"";
	position:absolute;
	height:100%;
	width:100%;
    bottom: 0;
    left: 0;
	z-index:0;
	background:linear-gradient(180deg, #F3EBEC 0%, transparent 120px, transparent calc(100% - 180px) , var(--blanc) 100%);
	pointer-events:none;
}
.brasserie-presentation_content{
	position:relative;
	align-items:start;
	justify-content:center;
	display:flex;	
	padding-bottom: 250px;
}
.brasserie-presentation_content .brasserie-txt {
	position:relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 560px;
    background: var(--peps);
    z-index: 3;
    height: fit-content;
    padding: 110px 70px 110px;
    border-radius: 0 0 270px 270px ;
    text-align: center;	
}

#brasserie-presentation-img-left {
    position: absolute;
    left: 0;
    top: 30%;
    width: 450px;
    height: auto;
	z-index:1;
    object-fit: contain;
}
#brasserie-presentation-img-left {
    mask-image: url("/wp-content/uploads/2025/11/Vector-3.svg");
    -webkit-mask-image: url("/wp-content/uploads/2025/11/Vector-3.svg");
    mask-size: contain; 
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}
#brasserie-presentation-img-right {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 540px;
    height: auto;
    object-fit: contain;
    transform:translate(0%, -50%) rotate(0deg);
	max-height: 60vh;
	animation: loucheMove 6s ease-in-out infinite;
	aspect-ratio: 3/2;
}
@keyframes loucheMove {
    0% {
        transform: translate(0%, -50%) rotate(0deg);
    }
    30% {
        transform: translate(0%, -50%) rotate(40deg);
    }
	50% {
        transform: translate(0%, -50%) rotate(40deg);
    }
    80% {
        transform: translate(0%, -50%) rotate(0deg);
    }
}
@keyframes loucheMobile {
    0% {
        transform: translate(0%, -50%) rotate(20deg);
    }
    30% {
        transform: translate(0%, -50%) rotate(50deg);
    }
	50% {
        transform: translate(0%, -50%) rotate(50deg);
    }
    80% {
        transform: translate(0%, -50%) rotate(20deg);
    }
}

#brasserie-goutte{
	position: absolute;
    left: 50%;
    bottom: 0%;
    width: 200px;
    height: auto;
    object-fit: contain;
    transform: translate(-50%, 50%);
}

@media screen and (min-width:1900px) {
	#brasserie-presentation-img-right{
		left: 47%;
		top: 38%;
	}
}
@media screen and (max-width:1200px){
	.brasserie-presentation_content .brasserie-txt{
		padding: 90px 60px 110px;
	}
	#brasserie-goutte {
    position: absolute;
		width: 185px;
	}
	#brasserie-presentation-img-left {
		top: 40%;
		width: 400px;
	}
	#brasserie-presentation-img-right {
		width: 500px;
	}
}
@media screen and (max-width:991px){
	.brasserie-presentation_content {
		justify-content: end;
	}
	.brasserie-presentation_content .brasserie-txt {
        padding: 60px 60px 100px;
		border-radius: 0 0 230px 230px;
    }
	#brasserie-presentation-img-left {
        width: 300px;
    }
	#brasserie-presentation-img-right{
		left: 40%;
    	top: 44%;
		transform: translate(0%, -50%) rotate(20deg);
		animation:loucheMobile 6s ease-in-out infinite;
	}
	#brasserie-goutte {
		left: 60%;
	}
}
@media screen and (max-width:767px){
	.brasserie-presentation_content {
		padding-bottom: 400px;
	}
	.brasserie-presentation_content .brasserie-txt {
		margin-left: -20px;
        margin-right: -20px;		
		padding: 40px 25px 80px;
		border-radius: 0 0 230px 230px;
		width: calc(100% + 40px);
	}
	#brasserie-goutte {
        width: 125px;
        left: 20%;
        transform: translate(20px, 50%);
    }
	#brasserie-presentation-img-left {
        width: 240px;
        top: unset;
        bottom: 100px;
    }
	
	#brasserie-presentation-img-right {
		width: 450px;
        top: 260px;
        left: 5%;
    }
	.presentation-brasserie:after {
		background: linear-gradient(180deg, #F3EBEC 0%, transparent 100px, transparent calc(100% - 100px), var(--blanc) 100%);
	}
}
@media screen and (max-width:500px){
	#brasserie-presentation-img-right {
		width: 380px;
        top: 270px;
        left: 5%;
    }
}

/**** TCHIN *****/
.brasserie-tchin{
}
.brasserie-tchin_content{
	position:relative;
	display:flex;
	justify-content:center;
	z-index:2;
}

.tchin-txt{
	position:relative;
	width: 22vw;
	margin-top: -50px;
    margin-left: -4%;
	display: flex;
    flex-direction: column;
    gap: 15px;
	min-width: 330px;
}
#brasserie-tchin-img{
    width: 100vw;
	z-index:1;
	margin-top: -10%;
    position: relative;
	margin-bottom:-25vw;
}

@media screen and (min-width:2800px) {
	#brasserie-tchin-img{
		margin-top: -27vh;
	}
}

@media screen and (min-width:992px)  and (max-width:1200px){
	.tchin-txt {
		margin-top: 0;
		width: 300px;
		margin-left: 0%;
	}
	.brasserie-tchin_content {
		margin-top: -100px;
	}
}
@media screen  and (max-width:991px){ 
	
}
@media screen and (max-width:767px){
	#brasserie-tchin-img {
		margin-top: 0%;
	}
	.tradition-brasserie {
    	padding-top: 100px;
        min-height: calc(80vh + 100px);
    }
	.tchin-txt {
		margin-top: -50px;
		text-align: center;
	}
	.tchin-txt a{
		margin: auto;
	}
}

/**** POELE *****/
.tradition-brasserie {
	padding-top: 20vw;
    display: flex;
    position: relative;
    min-height: calc(80vh + 20vw);
	background-image: linear-gradient(180deg, var(--blanc) 0%, transparent 50%), url(/wp-content/uploads/2025/11/lin.png);
	background-size:cover;
	background-repeat:no-repeat;
	overflow: hidden;
}

#brasserie-tradition-img {
    position: absolute;
    left: 60px;
    bottom: 0;
    width: 60vw;
	max-width: 1000px;
    height: 90%;
    object-fit: cover;
    border-radius: 50vh 50vh 0 0; /* 400px 400px 0 0 */
}

.tradition-brasserie_content {
	align-items:center;
	justify-content:end;
	display:flex;
	position:relative;
}
.tradition-brasserie_content  .tradition-txt{
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 50%;
	min-width: 340px;
    z-index: 3;
    height: fit-content;
    padding: 30px;
    text-align: center;
	align-items: center;
	justify-content:center;
	position:relative;
	margin-top: 15%;
}
#brasserie-poele-img {
    position: absolute;
    left: 0;
    top: 75%;
    width: 100%;
    height: auto;
	aspect-ratio: 2/3;
    object-fit: contain;
    transform: translate(11%, -63%);
    z-index: -1;
    max-width: unset;
	max-height: calc(80vh + 10vw);
	animation: poeleMove 6s ease-in-out infinite;
}
@keyframes poeleMove {
    0% {
        transform: translate(11%, -63%) rotate(0deg);
    }
    30% {
        transform:translate(12%, -61%) rotate(10deg);
    }
	50% {
        transform: translate(12%, -61%) rotate(10deg);
    }
    80% {
        transform: translate(11%, -63%) rotate(0deg);
    }
}
@keyframes poeleMobile {
    0% {
        transform: translate(-3%, -58%) rotate(17deg);
    }
    30% {
        transform: translate(-2%, -56%) rotate(25deg);
    }
	50% {
        transform: translate(-2%, -56%) rotate(25deg);
    }
    80% {
        transform: translate(-3%, -58%) rotate(17deg);
    }
}

@media screen and (max-width:991px){
	.tradition-brasserie{
		min-height: calc(80vh + 20vw);
	}
	.tradition-brasserie_content .tradition-txt {
		width: 65%;
	}
	#brasserie-tradition-img {
		width: 68vw;
	}
}
@media screen and (max-width:767px){
	.tradition-brasserie {
        min-height: 700px;
    }
	.tradition-brasserie_content {
		align-items: start;
	}
	#brasserie-tradition-img {
		left: 0;
		width: 100vw;
		height: 370px;
		border-radius: 300px 300px 0 0;
	}

	.tradition-brasserie_content .tradition-txt {
		width: 100%;
		margin-top: 0;
		min-width: unset;
		height: 400px;
		padding: 0;
	}
	#brasserie-poele-img {
		left: 0;
		top: 50%;
		width: 135%;
		transform: translate(-3%, -58%) rotate(17deg);
		animation: poeleMobile 6s ease-in-out infinite;
		max-width: unset;
		max-height: 600px;
	}
}