/* ==========================================================================
   Le Clos Ripert — Header et menu plein écran
   Mobile d'abord : bases pour le téléphone, puis 640px (tablette) et 1024px (grand écran).
   Hello Elementor colore liens et boutons par défaut : chaque élément redéfinit ses couleurs.
   ========================================================================== */

/* 1. Variables -------------------------------------------------------------- */
:root {
	--cr-white: #FFFFFF;
	--cr-sable: #E6D9C7;
	--cr-noisette: #8C6A4F;
	--cr-encre: #2E2620;
	--cr-taupe: #6F6259;

	--cr-font-display: 'Selino', Georgia, serif;
	/* Petits textes : police « Texte » des réglages globaux d'Elementor */
	--cr-font-ui: var(--e-global-typography-text-font-family, system-ui), system-ui, sans-serif;

	--cr-header-h: 72px;
	--cr-gutter: clamp(20px, 4vw, 56px);
	--cr-ease: cubic-bezier(.22, 1, .36, 1);
	--cr-ease-in-out: cubic-bezier(.77, 0, .18, 1);

	/* Barre d'admin WordPress (connecté) et barre de défilement compensée quand le menu est ouvert */
	--cr-admin-bar: var(--wp-admin--admin-bar--height, 0px);
	--cr-scrollbar: 0px;
}
@media (min-width: 1024px) { :root { --cr-header-h: 88px; } }
@media (max-width: 600px) { :root { --cr-admin-bar: 0px; } } /* la barre d'admin défile sur mobile */

html.cr-menu-open { overflow: hidden; }
html.cr-menu-open body { padding-right: var(--cr-scrollbar); }

/* Lien d'évitement, visible seulement au clavier */
.cr-skip-link {
	position: fixed; top: calc(var(--cr-admin-bar) + 12px); left: 12px; z-index: 1100;
	padding: 12px 20px; background: var(--cr-encre); color: var(--cr-white);
	font: 400 15px/1 var(--cr-font-ui); text-decoration: none;
	transform: translateY(-200%); transition: transform .3s var(--cr-ease);
}
.cr-skip-link:focus { transform: none; color: var(--cr-white); }


/* 2. Header ---------------------------------------------------------------- */
.site-header {
	position: fixed; top: var(--cr-admin-bar); left: 0; right: 0;
	z-index: 1000;                         /* au-dessus du menu : le bouton Fermer reste cliquable */
	height: var(--cr-header-h);
	padding-right: var(--cr-scrollbar);
	color: var(--cr-encre);
	background: var(--cr-white);
	border-bottom: 1px solid transparent;
	transition: transform .6s var(--cr-ease), background-color .4s, border-color .4s, color .4s;
}
.site-header-spacer { height: var(--cr-header-h); }
.site-header.is-scrolled { border-bottom-color: var(--cr-sable); }
.site-header.is-hidden { transform: translateY(calc(-100% - var(--cr-admin-bar))); }

/* 3 colonnes égales : le logo reste parfaitement centré */
.site-header__inner {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
	height: 100%; padding-inline: var(--cr-gutter);
}

.site-header .site-header__brand { justify-self: center; color: inherit; text-decoration: none; }
.site-header__name { font: 400 clamp(22px, 1.1rem + .7vw, 30px)/1 var(--cr-font-display); white-space: nowrap; }
.site-header__logo { width: auto; max-height: calc(var(--cr-header-h) - 32px); }

.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 28px; transition: opacity .3s, visibility .3s; }
.site-header .site-header__cta {
	display: none;                         /* sur téléphone, la réservation est dans le menu */
	padding: 10px 0 8px; border-bottom: 1px solid var(--cr-noisette);
	color: inherit; font: 400 15px/1.2 var(--cr-font-ui); letter-spacing: .04em; text-decoration: none;
	transition: opacity .3s;
}
.site-header .site-header__cta:hover { color: inherit; opacity: .7; }
@media (min-width: 640px) { .site-header .site-header__cta { display: inline-block; } }

/* Langues (header et menu) */
.cr-langs { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; font: 400 14px/1 var(--cr-font-ui); letter-spacing: .06em; }
.cr-langs a { color: inherit; opacity: .55; text-decoration: none; transition: opacity .3s; }
.cr-langs a:hover { color: inherit; opacity: 1; }
.cr-langs__current { padding-bottom: 4px; border-bottom: 1px solid var(--cr-noisette); }
.site-header__langs { display: none; }
@media (min-width: 1024px) { .site-header__langs { display: flex; } }

/* Menu ouvert : header transparent, on ne garde que Fermer et le logo */
html.cr-menu-open .site-header { color: var(--cr-encre); background: transparent; border-bottom-color: transparent; transform: none; }
html.cr-menu-open .site-header__actions { opacity: 0; visibility: hidden; }

/* Header transparent sur photo (filtre cr_header_overlay) */
.site-header--overlay:not(.is-scrolled) { color: var(--cr-white); background: transparent; }
.site-header--overlay::before {
	content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
	background: linear-gradient(rgba(30, 23, 18, .38), rgba(30, 23, 18, 0));
	transition: opacity .4s;
}
.site-header--overlay.is-scrolled::before, html.cr-menu-open .site-header--overlay::before { opacity: 0; }


/* 3. Bouton Menu / Fermer ---------------------------------------------------- */
.site-header .menu-toggle,
.site-header .menu-toggle:hover,
.site-header .menu-toggle:focus { background: none; border: 0; border-radius: 0; color: inherit; } /* reset Hello */
.site-header .menu-toggle {
	justify-self: start; display: inline-flex; align-items: center; gap: 14px;
	min-height: 44px; margin: 0; padding: 0 4px 0 0;
	font: 400 15px/1 var(--cr-font-ui); letter-spacing: .06em; cursor: pointer;
}
/* Deux traits (26 et 18 px) qui se croisent en X à l'ouverture */
.menu-toggle__icon { position: relative; width: 26px; height: 10px; }
.menu-toggle__icon span {
	position: absolute; left: 0; height: 1.2px; background: currentColor;
	transition: transform .5s var(--cr-ease-in-out), top .5s var(--cr-ease-in-out), width .5s var(--cr-ease-in-out);
}
.menu-toggle__icon span:first-child { top: 0; width: 26px; }
.menu-toggle__icon span:last-child { top: calc(100% - 1.2px); width: 18px; }
@media (hover: hover) { .menu-toggle:hover .menu-toggle__icon span:last-child { width: 26px; } }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span { top: calc(50% - .6px); width: 22px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:first-child { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:last-child { transform: rotate(-45deg); }
/* Le mot « Menu » est masqué visuellement sous 480px (toujours lu par les lecteurs d'écran) */
@media (max-width: 479px) {
	.menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.site-header a:focus-visible, .site-header button:focus-visible, .cr-menu a:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }


/* 4. Menu plein écran ------------------------------------------------------- */
.cr-menu {
	position: fixed; inset: 0; z-index: 999;
	visibility: hidden;                    /* rendu visible par GSAP (ou par .is-open sans GSAP) */
	color: var(--cr-encre); font-family: var(--cr-font-ui);
}
.cr-menu__bg { position: absolute; inset: 0; background: var(--cr-white); }
.cr-menu__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }

/* Contenu : défile si l'écran est trop bas (téléphone en paysage) */
.cr-menu__content {
	display: flex; flex-direction: column; gap: 40px; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
	padding: calc(var(--cr-admin-bar) + var(--cr-header-h) + 24px) var(--cr-gutter) 32px;
}
.cr-menu__nav { flex: 1; display: flex; align-items: center; }

/* Grands liens */
.cr-menu__list { margin: 0; padding: 0; list-style: none; }
.cr-menu__list li { margin: 0; }
.cr-menu .cr-menu__link {
	display: inline-flex; align-items: center;
	color: var(--cr-encre); text-decoration: none;
	font: 400 clamp(2.6rem, 1.6rem + 3.9vw, 5rem)/1.12 var(--cr-font-display); /* ≈ 42px → 80px */
	letter-spacing: -.01em;
	transition: opacity .4s;
}
.cr-menu__mask { display: block; overflow: hidden; padding-bottom: .06em; } /* coupe le texte qui remonte */
.cr-menu__label { display: block; white-space: nowrap; }

/* Filet noisette devant le lien survolé ou la page en cours (classe ajoutée par WordPress) */
.cr-menu__link::before {
	content: ""; flex: none; width: 0; height: 1px; background: var(--cr-noisette);
	transition: width .5s var(--cr-ease), margin-right .5s var(--cr-ease);
}
.current-menu-item > .cr-menu__link::before { width: 36px; margin-right: 20px; }
.current-menu-item > .cr-menu__link .cr-menu__label { font-style: italic; }
@media (hover: hover) {
	.cr-menu .cr-menu__link:hover { color: var(--cr-encre); }
	.cr-menu__link:hover::before { width: 36px; margin-right: 20px; }
	.cr-menu__list:hover .cr-menu__link:not(:hover) { opacity: .32; } /* les autres liens s'effacent */
}

/* Bas du menu : coordonnées, langues, réservation */
.cr-menu__footer {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px;
	padding-top: 24px; border-top: 1px solid var(--cr-sable); font-size: 14px; line-height: 1.6;
}
.cr-menu__contact { display: flex; flex-wrap: wrap; gap: 8px 48px; }
.cr-menu__contact p, .cr-menu__contact address { display: flex; flex-direction: column; margin: 0; font-style: normal; }
.cr-menu__contact address { color: var(--cr-taupe); }
.cr-menu .cr-menu__contact a { color: var(--cr-encre); text-decoration: none; }
.cr-menu .cr-menu__contact a:hover { color: var(--cr-noisette); }
.cr-menu .cr-menu__cta {
	display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 30px;
	border-radius: 999px; background: var(--cr-encre); color: var(--cr-white);
	font-size: 15px; letter-spacing: .04em; text-decoration: none; transition: background-color .3s;
}
.cr-menu .cr-menu__cta:hover { background: var(--cr-noisette); color: var(--cr-white); }
@media (max-width: 639px) {
	/* nowrap obligatoire : en colonne, « wrap » ferait déborder le bloc */
	.cr-menu__footer { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
}

/* Photo du lien survolé : grand écran seulement, deux images en fondu enchaîné */
.cr-menu__preview { display: none; }
@media (min-width: 1024px) {
	.cr-menu__inner { grid-template-columns: minmax(0, 1fr) min(38vw, 620px); }
	.cr-menu__preview { display: block; position: relative; overflow: hidden; background: var(--cr-sable); }
	.cr-menu__preview-img {
		position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
		opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.6s var(--cr-ease);
	}
	.cr-menu__preview-img.is-active { opacity: 1; transform: none; }

	/* Aucune page du menu n'a d'image mise en avant : pas de colonne photo, le menu prend toute la largeur */
	.cr-menu__inner:not(:has([data-preview])) { grid-template-columns: minmax(0, 1fr); }
	.cr-menu__inner:not(:has([data-preview])) .cr-menu__preview { display: none; }
}


/* 5. Sans GSAP / animations réduites ---------------------------------------- */
html:not(.cr-gsap) .cr-menu { opacity: 0; transition: opacity .4s, visibility 0s .4s; }
html:not(.cr-gsap) .cr-menu.is-open { opacity: 1; visibility: visible; transition: opacity .4s, visibility 0s; }

@media (prefers-reduced-motion: reduce) {
	.site-header, .menu-toggle__icon span, .cr-menu__link::before, .cr-menu__preview-img { transition-duration: .01s !important; }
	.site-header.is-hidden { transform: none; }
}