.ntetehiver{width: 100%; aspect-ratio: 2 / 1; position: relative}

.ntetehiver .TitreEteHiver{z-index:1; position: absolute; bottom: 0px; width: 100%; background: #182c32; height: 53%; text-align: center;display: flex; align-items: center; justify-content: center;}
.ntetehiver .TitreEteHiver h2{color:#d1902e; margin: 0; padding-top: 50px;}

.ntetehiver .CaseEte{width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0px; left: 0px; z-index: 99; 
	-webkit-mask-image: url('../img/PathGauche.svg');    -webkit-mask-repeat: no-repeat;    -webkit-mask-position: center top;    -webkit-mask-size: cover;
    mask-image: url('../img/PathGauche.svg');    mask-repeat: no-repeat;    mask-position: center top;    mask-size: cover;}
.ntetehiver .CaseEte a{ display: block;}

.ntetehiver .CaseEte picture img,
.ntetehiver .CaseHiver picture img
{width: 100%;  height: 100%; object-fit: cover;object-position: center;}

.ntetehiver .CaseEte .TitreEte{ position: absolute; z-index: 999; top: 80%; right: 0px; padding: 10px 40% 10px 10px; background: #182c32; color:#f0ebd6; font: 20px/30px 'Kalnia', serif; font-weight: 700;}
.ntetehiver .CaseEte .TexteEte{ position: absolute; left: 40px; top: 45%; width: 70%; z-index: 4; color:var(--CouleurBeige); opacity: 0; }
.ntetehiver .CaseEte:hover .TexteEte{opacity: 1;}

.ntetehiver .CaseHiver{width: 50%; height: 100%; position: absolute; top: 0px; right: 0px; z-index: 99; overflow: hidden; 
	-webkit-mask-image: url('../img/PathDroite.svg');    -webkit-mask-repeat: no-repeat;    -webkit-mask-position: center top;    -webkit-mask-size: cover;
    mask-image: url('../img/PathDroite.svg');    mask-repeat: no-repeat;    mask-position: center top;    mask-size: cover;}
.ntetehiver .CaseHiver a{display: block;}
.ntetehiver .CaseHiver .TitreHiver{ position: absolute; z-index: 999; top: 80%; left: 0px; padding: 10px 10px 10px 40%; background: #182c32; color:#f0ebd6; font: 20px/30px 'Kalnia', serif; font-weight: 700;}
.ntetehiver .CaseHiver .TexteHiver{ position: absolute; right: 40px; top: 45%; width: 70%; z-index: 4; color:var(--CouleurBeige); opacity: 0;}
.ntetehiver .CaseHiver:hover .TexteHiver{opacity: 1;}
.ntetehiver .CaseEte a:hover::after,
.ntetehiver .CaseHiver a:hover::after{opacity: 0.7; content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; background:#182c32;  }

.ntetehiver .CaseEte a::before{content: ""; top: 45%; width: 40px; height: 40px; right: -40px; background: #d1902e;-webkit-mask: url('../img/IconeEte.svg') no-repeat 50% 50%;  mask: url('../img/IconeEte.svg') no-repeat 50% 50%; display: block; z-index: 3; position: absolute;transition : all 0.2s linear;}

.ntetehiver .CaseEte a:hover::before{right: 80px;transition : all 0.2s linear;}

.ntetehiver .CaseHiver a::before{content: ""; top: 45%; width: 40px; height: 40px; left: -40px; background: #d1902e;-webkit-mask: url('../img/IconeHiver.svg') no-repeat 50% 50%;  mask: url('../img/IconeHiver.svg') no-repeat 50% 50%; display: block; z-index: 3; position: absolute;transition : all 0.2s linear;}

.ntetehiver .CaseHiver a:hover::before{left: 80px;transition : all 0.2s linear;}


@media screen and (max-width: 767px) 
{
	.ntetehiver .CaseEte, .ntetehiver .CaseHiver{ position: relative; -webkit-mask-image: none;  mask-image:none; width:100%; min-height: 350px;}
	.ntetehiver .TitreEteHiver{position: relative; display: block; width:100%; min-height: 100px;}
	.ntetehiver .TitreEteHiver h2{color:#d1902e; margin: 0; padding-top: 0px; line-height: 100px;}
	
	.ntetehiver .CaseEte .TitreEte, .ntetehiver .CaseHiver .TitreHiver { top: 10px;}
	.ntetehiver .CaseHiver .TexteHiver, .ntetehiver .CaseEte .TexteEte{top: 60px;}
	.ntetehiver .CaseEte a::before, .ntetehiver .CaseHiver a::before{top: 75px;}
	.ntetehiver .CaseEte a:hover::before{right: 20px;}
	.ntetehiver .CaseHiver a:hover::before{left: 20px;}
}
@media screen and (max-width: 1024px)
{
	.ntetehiver .TitreEteHiver h2{font-size: 20px;}
	.ntetehiver .CaseHiver a:hover::before{left: 30px;}
	.ntetehiver .CaseEte a:hover::before{right: 30px;}
	.ntetehiver .CaseHiver .TexteHiver, .ntetehiver .CaseEte .TexteEte{top: 25%;}
	
}
@media screen and (max-width: 2400px) {}