/* =========================================================================
   Rheiner Paris — menu tiroir façon jessicamccormack.com
   Valeurs (dimensions, timings, couleurs) extraites de la CSS compilée du
   site de référence. Typographies : celles du thème Rheiner (variables).
   Breakpoint desktop/mobile : 1025px (aligné sur le header builder Woodmart).
   ========================================================================= */

:root {
	--rp-mask: #006498;
	--rp-mask-o: .6;
	--rp-mask-o-hover: .45;
	--rp-gray: #767676;
	--rp-black: #000;
	--rp-item-color: var(--rp-gray);        /* rubriques desktop (niveaux 1 et 2) au repos — JMC : noir */
	--rp-item-color-hover: #4a4a4a;         /* rubrique survolée / ouverte — gris foncé plutôt que noir : le saut de contraste vers #000 se lisait comme un épaississement du texte */
	--rp-line: #e9e9e9;
	--rp-ease: cubic-bezier(.4, 0, .2, 1);

	/* Typos Rheiner (exception à la réplique) */
	--rp-font-item: var(--wd-title-font, "Cormorant Garamond", serif);
	--rp-font-small: var(--wd-text-font, "Cormorant Garamond", serif);
	--rp-item-size: 17px;        /* JMC text-lg      : 20px / 25px   — Rheiner : -1px */
	--rp-item-lh: 25px;
	--rp-item-size-m: 16px;    /* JMC text-lg_mob  : 19px / 23.75px — Rheiner : -1px */
	--rp-item-lh-m: 23.75px;
	--rp-small-size: 12px;        /* JMC text-2xs     : 12px / 16.8px  */
	--rp-small-lh: 16.8px;
	--rp-letter-spacing: 0;       /* interlettrage des rubriques (niveaux 1 et 2, desktop et mobile) */
	--rp-letter-spacing-small: 0; /* interlettrage des petits textes du tiroir (onglets mobile, titres de section, bouton retour) */

	/* Largeurs du panneau (JMC) */
	--rp-w-closed: 331px;       /* w-24   : 331px  */
	--rp-w-closed-lg: 507px;    /* w-25   : 507px  */
	--rp-w-l2: 651px;           /* w-26.5 : 651px  (niveau 2 sans image) */
	--rp-w-l2-img-md: 810px;    /* w-27   : 810px  */
	--rp-w-l2-img-lg: 973px;    /* w-28   : 973px  */
	--rp-w-l2-img-2xl: 1293px;   /* w-29   : 1293px */

	--rp-header-h: var(--wd-header-general-h, 90px);

	/* Ajustements Rheiner */
	--rp-triggers-offset: 50px;  /* décalage vers la droite des déclencheurs SHOP / OUR WORLD dans le header */
	--rp-triggers-gap: 70px;     /* espace entre SHOP et OUR WORLD (JMC : 40px) */
	--rp-trigger-size: 14px;     /* taille des déclencheurs SHOP / OUR WORLD (JMC : 12px) */
	--rp-trigger-lh: 19.6px;
	--rp-trigger-letter-spacing: 0; /* interlettrage des déclencheurs SHOP / OUR WORLD dans le header */
	--rp-l2-gap: 90px;           /* espace entre la colonne niveau 1 et la colonne niveau 2 (JMC : 50px) */
	--rp-content-left: 40px;     /* marge gauche du contenu du tiroir (desktop) ; recalée par JS sur la position de SHOP */

	--rp-svg-chevron-right: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9' viewBox='0 0 6 9' fill='none'%3E%3Cpath d='M1 0.5L5 4.5L1 8.5' stroke='%23000'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
   Résidus Woodmart neutralisés (sécurité : les templates sont surchargés)
   ------------------------------------------------------------------------- */
.wd-header-main-nav:not(.rp-header-nav),
.mobile-nav.wd-side-hidden-nav,
.wd-close-side {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Déclencheurs du header (desktop)
   ------------------------------------------------------------------------- */
.rp-header-nav {
	flex: 1 1 auto;
	padding-inline: 10px;
}

.rp-header-nav .rp-header-triggers {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--rp-triggers-gap);
	margin: 0;
	padding: 0 0 0 var(--rp-triggers-offset);
	list-style: none;
}

.rp-header-triggers li {
	margin: 0;
	padding: 0;
}

.rp-header-nav .rp-header-trigger,
.rp-header-nav .rp-header-trigger:hover,
.rp-header-nav .rp-header-trigger:focus {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	font-family: var(--rp-font-small);
	font-size: var(--rp-trigger-size);
	line-height: var(--rp-trigger-lh);
	font-weight: 400;
	font-style: normal;
	letter-spacing: var(--rp-trigger-letter-spacing);
	text-transform: none;
	text-align: left;
	color: var(--nav-color, var(--wd-header-el-color, #333));
	transition: color .15s var(--rp-ease);
}

/* Header collant (après scroll) : déclencheurs SHOP / OUR WORLD et logo en noir.
   Woodmart a deux modes de sticky : le header réel qui se fixe (.whb-sticked
   posé sur .whb-header) ou un header cloné. Le clone est un élément distinct
   qui ne porte PAS la classe .whb-header — il faut donc le viser à part.
   Bloc placé AVANT celui du tiroir ouvert : à spécificité égale la règle la
   plus basse gagne, donc l'état « tiroir ouvert » reprend la main. */
.whb-header.whb-sticked .rp-header-trigger,
.whb-header.whb-sticked .rp-header-trigger span,
.whb-clone .rp-header-trigger,
.whb-clone .rp-header-trigger span {
	color: var(--rp-black) !important;
}

/* Woodmart centre la navigation dans le clone : on garde l'alignement à gauche. */
.whb-clone .rp-header-nav {
	text-align: left;
}

/* Logo noir : au scroll (header collant) et à l'ouverture du tiroir.
   Le logo est un PNG blanc posé sur un header transparent ; brightness(0) le
   rend noir sans avoir à charger un second fichier. */
.whb-header .site-logo img,
.whb-clone .site-logo img {
	transition: filter .15s var(--rp-ease);
}

.whb-header.whb-sticked .site-logo img,
.whb-clone .site-logo img,
.whb-header.desktop-drawer-open .site-logo img,
.whb-clone.desktop-drawer-open .site-logo img {
	filter: brightness(0);
}

/* Tiroir ouvert : tous gris, survol noir, actif noir */
.whb-header.desktop-drawer-open .rp-header-trigger,
.whb-header.desktop-drawer-open .rp-header-trigger span,
.whb-clone.desktop-drawer-open .rp-header-trigger,
.whb-clone.desktop-drawer-open .rp-header-trigger span {
	color: var(--rp-gray) !important;
}

.whb-header.desktop-drawer-open .rp-header-trigger:hover,
.whb-header.desktop-drawer-open .rp-header-trigger:hover span,
.whb-header.desktop-drawer-open .rp-header-trigger.is-active,
.whb-header.desktop-drawer-open .rp-header-trigger.is-active span,
.whb-clone.desktop-drawer-open .rp-header-trigger:hover,
.whb-clone.desktop-drawer-open .rp-header-trigger:hover span,
.whb-clone.desktop-drawer-open .rp-header-trigger.is-active,
.whb-clone.desktop-drawer-open .rp-header-trigger.is-active span {
	color: var(--rp-black) !important;
}

/* Déclencheur mobile (hamburger 13×13) */
.rp-mobile-trigger button,
.rp-mobile-trigger button:hover,
.rp-mobile-trigger button:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	height: 40px;
	margin: 0;
	padding: 0 10px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	color: var(--wd-header-el-color, #333);
	line-height: 1;
	transition: none;
}

.rp-mobile-trigger button svg {
	display: block;
}

/* -------------------------------------------------------------------------
   Wrapper, voile, panneau
   ------------------------------------------------------------------------- */
.rp-drawer {
	position: fixed;
	inset: 0;
	z-index: 400;
	overflow: hidden;
	background-color: rgba(255, 255, 255, .05);
	color: var(--rp-black);
}

.rp-drawer.is-hidden {
	display: none;
}

.rp-drawer__mask {
	position: absolute;
	inset: 0;
	z-index: 10;
	background-color: var(--rp-mask);
	opacity: 0;
	transition: opacity .3s var(--rp-ease);
	cursor: pointer;
}

.rp-drawer__mask.is-visible {
	opacity: var(--rp-mask-o);
}

.rp-drawer.drawer-open .rp-drawer__mask.is-visible:hover {
	opacity: var(--rp-mask-o-hover);
}

.rp-drawer__content {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 75;
	width: var(--rp-w-closed);
	max-width: 100vw;
	background-color: #fff;
	transform: translateX(-100%);
	transition: all .6s var(--rp-ease);
}

.rp-drawer__content.is-open {
	transform: translateX(0);
}

/* Largeurs niveau 2 (paliers JMC : md 768 / lg 1200 / 2xl 1680) */
@media (min-width: 768px) {
	.rp-drawer.level-2-active .rp-drawer__content {
		width: var(--rp-w-l2);
	}

	.rp-drawer.level-2-active.level-2-image .rp-drawer__content {
		width: var(--rp-w-l2-img-md);
	}
}

@media (min-width: 1200px) {
	.rp-drawer__content {
		width: var(--rp-w-closed-lg);
	}

	.rp-drawer.level-2-active.level-2-image .rp-drawer__content {
		width: var(--rp-w-l2-img-lg);
	}
}

@media (min-width: 1680px) {
	.rp-drawer.level-2-active.level-2-image .rp-drawer__content {
		width: var(--rp-w-l2-img-2xl);
	}
}

/* Reset listes / liens / boutons dans le tiroir */
.rp-drawer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rp-drawer li {
	margin: 0;
	padding: 0;
}

.rp-drawer a {
	color: inherit;
	text-decoration: none;
}

.rp-drawer a:hover,
.rp-drawer a:focus {
	text-decoration: none;
}

.rp-drawer button,
.rp-drawer button:hover,
.rp-drawer button:focus {
	display: inline-block;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-align: left;
	line-height: inherit;
	cursor: pointer;
	transition: none;
}

/* Anneau de focus uniquement en navigation clavier (comme la référence) */
.rp-drawer :focus,
.rp-drawer :focus-visible,
.rp-header-nav .rp-header-trigger:focus,
.rp-mobile-trigger button:focus {
	outline: none;
}

html[data-keyboard-input="true"] .rp-drawer :focus-visible,
html[data-keyboard-input="true"] .rp-header-nav .rp-header-trigger:focus-visible,
html[data-keyboard-input="true"] .rp-mobile-trigger button:focus-visible {
	outline: 3px solid rgba(18, 18, 18, .5);
	outline-offset: 5px;
}

.rp-drawer img {
	display: block;
	width: 100%;
	height: auto;
}

/* Défilement sans barre */
.rp-no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.rp-no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Utilitaires d'état */
.rp-drawer .is-hidden {
	display: none !important;
}

.rp-drawer .rp-ml1.is-transparent,
.rp-drawer .rp-ml2.is-transparent,
.rp-drawer .is-transparent {
	opacity: 0;
}

/* -------------------------------------------------------------------------
   Navigation desktop (≥ 1025px)
   ------------------------------------------------------------------------- */
.rp-nav-desktop {
	display: none;
	height: 100%;
	align-content: space-between;
}

.rp-nav-desktop__scroll {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-top: calc(var(--rp-header-h) - 40px);
	padding: 0 40px 40px var(--rp-content-left);
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.rp-nav-desktop__scroll::-webkit-scrollbar {
	display: none;
}

.rp-nav-desktop__row {
	display: inline-flex;
	flex-grow: 1;
}

/* Ajustement Rheiner : menu centré dans la hauteur du panneau.
   (Référence JMC : aligné en haut, sous le header — supprimer ce bloc pour y revenir.) */
.rp-nav-desktop__scroll {
	margin-top: 0;
	padding-bottom: 0;
}

.rp-nav-desktop__row {
	flex-grow: 0;
	align-items: flex-start;
	margin-block: auto;
	padding-bottom: 40px; /* symétrique du padding-top 40px des listes */
}

/* Le niveau 2 ne participe pas à la hauteur de la rangée : le niveau 1 reste
   fixe au centre quelle que soit la hauteur du sous-menu ouvert (le niveau 2
   déborde vers le bas si besoin, la zone reste défilante). */
.rp-drawer .rp-l2 {
	height: 0;
	min-height: 0;
	align-self: flex-start;
	overflow: visible;
}

.rp-drawer.level-2-active .rp-nav-desktop__row {
	display: flex;
	width: 100%;
}

/* Niveau 1 */
.rp-drawer .rp-l1 {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: fit-content;
	padding-top: 40px;
	color: var(--rp-item-color);
	letter-spacing: var(--rp-letter-spacing);
	font-family: var(--rp-font-item);
	font-size: var(--rp-item-size);
	line-height: var(--rp-item-lh);
	transition: opacity .3s var(--rp-ease);
}

.rp-l1:hover,
.rp-drawer.level-2-active .rp-l1 {
	color: var(--rp-item-color);
}

.rp-drawer .rp-l1 > li {
	margin-bottom: 16px;
}

.rp-drawer .rp-l1 > li:last-child {
	margin-bottom: 0;
}

.rp-l1__link {
	display: block;
	color: inherit;
}

.rp-l1__link:hover,
.rp-l1__link:focus-visible {
	color: var(--rp-item-color-hover);
}

/* Item parent : chevron qui apparaît et glisse vers la droite */
.rp-l1__link.has-children {
	position: relative;
	transition: all .25s var(--rp-ease);
}

.rp-l1__link.has-children::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -18px;
	display: block;
	width: 6px;
	height: 20px;
	transform: translateY(-50%);
	background-image: var(--rp-svg-chevron-right);
	background-position: 100% 50%;
	background-repeat: no-repeat;
	opacity: 0;
	transition: all .15s var(--rp-ease);
}

.rp-l1__link.has-children:hover::after,
.rp-l1__link.has-children:focus-visible::after {
	right: -23px;
	opacity: 1;
}

.rp-l1__link.has-children.is-active {
	color: var(--rp-item-color-hover);
}

.rp-l1__link.has-children.is-active::after {
	right: -23px !important;
	opacity: 1;
}

@media (min-width: 1920px) {
	.rp-l1__link.has-children {
		padding-right: 80px;
	}
}

/* Niveau 2 */
.rp-l2 {
	display: flex;
	flex: 1 1 0%;
	opacity: 0;
	transition: opacity .15s var(--rp-ease);
}

.rp-l2.is-visible {
	opacity: 1;
}

.rp-drawer .rp-l2__list {
	padding-top: 40px;
	padding-left: var(--rp-l2-gap);
	color: var(--rp-item-color);
	letter-spacing: var(--rp-letter-spacing);
	font-family: var(--rp-font-item);
	font-size: var(--rp-item-size);
	line-height: var(--rp-item-lh);
	transition: opacity .15s var(--rp-ease);
}

.rp-l2__list:hover {
	color: var(--rp-item-color);
}

.rp-drawer .rp-l2__list li {
	margin-bottom: 16px;
}

.rp-l2__list a:hover,
.rp-l2__list a:focus-visible {
	color: var(--rp-item-color-hover);
}

.rp-drawer .rp-l2__list .rp-l2__heading {
	margin-top: 60px;
}

.rp-drawer .rp-l2__list .rp-l2__heading h2 {
	margin: 0;
	color: var(--rp-black);
	font-family: var(--rp-font-small);
	font-size: var(--rp-small-size) !important;
	line-height: var(--rp-small-lh);
	font-weight: 400;
	letter-spacing: var(--rp-letter-spacing-small);
	text-transform: none;
}

.rp-l2__image {
	display: flex;
	flex: 1 1 0%;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding-top: 40px;
	padding-left: 40px;
}

.rp-l2__image > div {
	position: relative; /* contexte des images de survol superposées */
	width: 310px; /* 310px */
	height: fit-content;
}

/* Photos de niveau 2.
   .rp-l2__pic--base occupe le flux et fixe la hauteur de la colonne ; les
   photos propres à chaque rubrique se superposent et apparaissent en fondu
   au survol, sans provoquer de saut de mise en page. */
.rp-l2__pic img {
	display: block;
	width: 100%;
	height: auto;
}

.rp-l2__pic[data-image-for] {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .2s var(--rp-ease);
	pointer-events: none;
}

.rp-l2__pic[data-image-for] img {
	height: 100%;
	object-fit: cover;
}

.rp-l2__pic[data-image-for].is-visible {
	opacity: 1;
}

@media (min-width: 1680px) {
	.rp-l2__image > div {
		width: 430px; /* 430px */
	}
}

/* -------------------------------------------------------------------------
   Navigation mobile (< 1025px)
   ------------------------------------------------------------------------- */
.rp-nav-mobile {
	display: block;
	height: 100dvh;
}

.rp-nav-mobile__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-content: space-between;
	height: 100dvh;
	padding: 20px;
}

.rp-nav-mobile__top {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	height: 17px;
}

.rp-tabs {
	display: flex;
	gap: 40px;
}

.rp-drawer .rp-tab {
	color: var(--rp-gray);
	letter-spacing: var(--rp-letter-spacing-small);
	font-family: var(--rp-font-small);
	font-size: var(--rp-small-size);
	line-height: var(--rp-small-lh);
}

.rp-drawer .rp-tab.is-active {
	color: var(--rp-black);
}

.rp-drawer .rp-close {
	display: flex;
	align-items: center;
	color: var(--rp-black);
}

.rp-close svg {
	display: block;
}

.rp-nav-mobile__scroll {
	padding-top: 60px;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.rp-nav-mobile__scroll::-webkit-scrollbar {
	display: none;
}

.rp-nav-mobile__lists {
	display: flex;
	width: 100%;
	gap: 40px;
	padding-bottom: 23px;
}

/* Liste niveau 1 (onglet) */
.rp-drawer .rp-ml1 {
	position: absolute;
	left: 0;
	width: 100%;
	padding: 40px 20px 0;
	transition: opacity .2s var(--rp-ease);
}

.rp-nav-mobile:not(.level-2-active) .rp-ml1 {
	top: 60px;
}

.rp-drawer .rp-ml1 li {
	margin-bottom: 16px;
	letter-spacing: var(--rp-letter-spacing);
	font-family: var(--rp-font-item);
	font-size: var(--rp-item-size-m);
	line-height: var(--rp-item-lh-m);
	color: var(--rp-black);
}

.rp-ml1 li a,
.rp-ml1 li button {
	color: inherit;
}

/* Panneau niveau 2 */
.rp-ml2 {
	position: absolute;
	inset: 0;
	z-index: 10;
	padding: 20px 0;
	background-color: #fff;
	transition: opacity .2s var(--rp-ease);
}

.rp-ml2__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.rp-ml2__head {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 0 20px 20px;
}

.rp-ml2.is-scrolling .rp-ml2__head::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	border-bottom: 1px solid var(--rp-line);
}

.rp-drawer .rp-back {
	display: flex;
	align-items: center;
	gap: 20px;
	color: var(--rp-black);
	letter-spacing: var(--rp-letter-spacing-small);
	font-family: var(--rp-font-small);
	font-size: var(--rp-small-size);
	line-height: var(--rp-small-lh);
}

.rp-back svg {
	display: block;
	margin-bottom: 2px;
}

.rp-ml2__scroll {
	padding: 0 20px;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.rp-ml2__scroll::-webkit-scrollbar {
	display: none;
}

.rp-drawer .rp-ml2__list {
	position: relative;
	margin-top: 40px;
}

.rp-drawer .rp-ml2__list li {
	margin-bottom: 16px;
	letter-spacing: var(--rp-letter-spacing);
	font-family: var(--rp-font-item);
	font-size: var(--rp-item-size-m);
	line-height: var(--rp-item-lh-m);
	color: var(--rp-black);
}

.rp-drawer .rp-ml2__heading {
	margin-top: 40px;
	letter-spacing: var(--rp-letter-spacing-small);
	font-family: var(--rp-font-small);
	font-size: var(--rp-small-size) !important;
	line-height: var(--rp-small-lh);
}

.rp-drawer .rp-ml2__image {
	margin-top: 40px;
}

.rp-ml2__image > div {
	width: 100%;
	height: fit-content;
}

/* -------------------------------------------------------------------------
   Bascule desktop / mobile (1025px)
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.rp-drawer {
		z-index: 380; /* sous .whb-main-header (390) : le header reste visible */
	}

	.rp-nav-desktop {
		display: flex;
	}

	.rp-nav-mobile {
		display: none;
	}
}

@media (max-width: 1024.98px) {
	.rp-nav-desktop {
		display: none;
	}
}