/*
* ID2S - dedicated to this site 
*
*/

/* Active les transitions de vue pour tout le site */
@view-transition {
  navigation: auto;
}

:root {
	--main: #84A98D;
	--contrast: #527970;

}
header#masthead {display: block !important;}
.navigation-top {display:none;}

h1 {color: var(--main);font-family:"Times New Roman", Times, serif; letter-spacing: 2px;}

/* Panel custom */
.wrap:has(.fullwidth) {max-width: 100% !important; padding: 0 0 1em 0 !important; margin: 0;}

/* Menu custom */
/* Left Menu */
	/*background:url("/wp-content/id2s/assets/img/Hotel_du_Soleil_vector.svg") center / contain no-repeat;*/
.mobmenu-left-panel {
    width: 100% !important;
}

.mobmenu-left-panel div.mobmenu-content, .mobmenu-right-panel div.mobmenu-content {
    position: relative;   /* pour que le ::after soit positionné par rapport à ce div */
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:calc(100vh-45px);
}
.mobmenu-left-panel div.mobmenu-content {
    width: 30%;
	margin-left:5vw;
}
.mobmenu-right-panel div.mobmenu-content {
	/*margin-right:5vw;*/
	width:100%;
	float:right;
}

.mobmenu-left-panel div.mobmenu-content::after, .mobmenu-right-panel div.mobmenu-content::after {
    content: "";                                    /* 1. obligatoire */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 100%;                                    /* 2. taille (à ajuster) */
    height: 100%;

    background-color: rgba(0,0,0,0.15);                       /* 3. couleur du SVG */

    -webkit-mask: url("/wp-content/id2s/assets/img/Hotel_du_Soleil_vector.svg") center / contain no-repeat;
            mask: url("/wp-content/id2s/assets/img/Hotel_du_Soleil_vector.svg") center / contain no-repeat;

    pointer-events: none;                            /* 4. ne bloque pas les clics */
    z-index: 1;                                       /* au-dessus si besoin */
}

/* Right Menu */
span.right-menu-icon-text {
	border:2px solid var(--main); 
	margin-right:2em; 
	padding:0 1em; 
	border-radius:1em;
	background-image:linear-gradient(var(--main),var(--main));
	background-repeat:no-repeat;
	background-size: 0% 100%;
	background-position:left;
	transition: background-size 0.4s ease;
	
}
span.right-menu-icon-text:hover {border-color: var(--contrast); color:var(--contrast);background-size: 100% 100%;;}

div.menu-right-menu-container {margin-top:8em;}
#mobmenuright li.menu-item {line-height:0; }
#mobmenuright li.menu-item::before{content:"réserver"; text-transform:uppercase;}
#mobmenuright li.menu-item::after{content:"_";color:transparent;line-height:3em;}


div.single-featured-image-header {height:100vh !important;}
.single-featured-image-header img {top: 0; position: fixed;}

/* SVG au centre de features image */
.custom-header-media,
.single-featured-image-header {
    position: relative;
}

.custom-header-media::after,
.single-featured-image-header::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: clamp(120px, 40vw, 400px);
    aspect-ratio: 1 / 1;

    /* La couleur finale du SVG = la couleur de fond */
    background-color: #ffffff;

    /* Le SVG devient un pochoir */
    -webkit-mask: url("/wp-content/id2s/assets/img/Hotel_du_Soleil_vector.svg") center / contain no-repeat;
            mask: url("/wp-content/id2s/assets/img/Hotel_du_Soleil_vector.svg") center / contain no-repeat;

    opacity: 0;
    pointer-events: none;
    z-index: 5;

    animation: svgFadeIn 1.4s ease-out 0.3s forwards;
}

@keyframes svgFadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .custom-header-media::after,
    .single-featured-image-header::after {
        animation: none;
        opacity: 1;
    }
}
/* Fin SVG au centre de features image */