/* ==========================================================================
   Sugar Man — The Art of Sugar
   Compléments à theme.json : composition éditoriale, profondeur, mouvement.
   ========================================================================== */

:root {
	--sm-obsidian: var(--wp--preset--color--obsidian, #14100e);
	--sm-cacao: var(--wp--preset--color--cacao, #423025);
	--sm-amber: var(--wp--preset--color--amber, #ad7037);
	--sm-honey: var(--wp--preset--color--honey, #e9b979);
	--sm-ivory: var(--wp--preset--color--ivory, #f2e9de);
	--sm-pad: clamp(1.25rem, 4vw, 3.5rem);
	--sm-ease: cubic-bezier(.19, 1, .22, 1);
	--sm-display: var(--wp--preset--font-family--display);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { overflow-x: clip; }
::selection { background: var(--sm-honey); color: var(--sm-obsidian); }
:focus-visible { outline: 2px solid var(--sm-honey); outline-offset: 4px; }

h1, h2, h3, .sm-display {
	font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0;
	text-wrap: balance;
}
em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }

/* Étiquettes éditoriales */
.sm-label, .is-style-label {
	font-size: var(--wp--preset--font-size--micro) !important;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sm-honey);
}

/* Boutons */
.wp-block-button__link { transition: background-color .5s var(--sm-ease), color .5s var(--sm-ease), box-shadow .5s var(--sm-ease); }
.wp-block-button.is-style-ligne .wp-block-button__link {
	background: transparent;
	color: inherit;
	box-shadow: inset 0 0 0 1px rgba(242, 233, 222, .35);
}
.wp-block-button.is-style-ligne .wp-block-button__link:hover,
.wp-block-button.is-style-ligne .wp-block-button__link:focus-visible {
	background: var(--sm-ivory);
	color: var(--sm-obsidian);
	box-shadow: inset 0 0 0 1px var(--sm-ivory);
}

/* ==========================================================================
   En-tête
   ========================================================================== */
.sm-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	padding: 1.25rem var(--sm-pad);
	color: var(--sm-ivory);
	transition: background-color .6s var(--sm-ease), padding .6s var(--sm-ease), backdrop-filter .6s;
}
.admin-bar .sm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sm-header { top: 46px; } }
/* Fond flouté porté par un pseudo-élément : un backdrop-filter (ou un transform) sur l'en-tête lui-même
   en ferait le bloc conteneur des éléments en position fixe, et le panneau du menu serait réduit à sa hauteur. */
.sm-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(20, 16, 14, .82);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	opacity: 0;
	transition: opacity .6s var(--sm-ease);
	pointer-events: none;
}
.sm-header.is-scrolled { padding-block: .7rem; }
.sm-header.is-scrolled::before { opacity: 1; }
/* Menu ouvert : l'en-tête ne doit porter aucun effet qui confinerait le panneau. */
.sm-header:has(.is-menu-open) { transform: none !important; transition: none; }
.sm-header:has(.is-menu-open)::before { display: none; }
.sm-header__actions { gap: clamp(.75rem, 2vw, 1.75rem) !important; }

.sm-wordmark {
	margin: 0;
	font-family: var(--sm-display);
	font-size: 1.35rem;
	font-weight: 400;
	letter-spacing: -.01em;
	line-height: 1;
	font-variation-settings: "opsz" 48, "SOFT" 100;
}
.sm-wordmark a { text-decoration: none; color: inherit; }
.sm-wordmark--large { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 300; }

.sm-header__book .wp-block-button__link { padding: .7rem 1.2rem; }

/* Bouton du menu : mot « Menu » + deux traits qui se croisent à l'ouverture */
.sm-menu .wp-block-navigation__responsive-container-open {
	display: inline-flex !important;
	align-items: center;
	gap: .7rem;
	padding: .5rem 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.sm-menu .wp-block-navigation__responsive-container-open::before { content: "Menu"; }
.sm-menu .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }

/* Panneau du menu plein écran */
.sm-menu .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100vh !important;
	height: 100dvh !important;
	box-sizing: border-box;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background: var(--sm-obsidian) !important;
	color: var(--sm-ivory) !important;
	/* Pas de marge haute ici : la croix se place dans le coin ; la liste commence sous elle. */
	padding: 0 var(--sm-pad) calc(var(--sm-pad) + env(safe-area-inset-bottom));
	animation: sm-menu-in .8s var(--sm-ease) both;
}
.sm-menu .is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start !important; padding-top: clamp(5.5rem, 13vh, 8rem) !important; }
.sm-menu .is-menu-open .wp-block-navigation__container { gap: clamp(.25rem, 1.2vh, .9rem) !important; align-items: flex-start !important; counter-reset: sm-menu; }
.sm-menu .is-menu-open .wp-block-navigation-item {
	counter-increment: sm-menu;
	overflow: hidden;
}
.sm-menu .is-menu-open .wp-block-navigation-item__content {
	display: inline-flex !important;
	align-items: baseline;
	gap: 1.25rem;
	font-family: var(--sm-display);
	font-size: clamp(2.6rem, 7.5vw, 6.5rem) !important;
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.02;
	text-decoration: none;
	font-variation-settings: "opsz" 144, "SOFT" 100;
	animation: sm-rise 1s var(--sm-ease) both;
	transition: color .4s var(--sm-ease), font-variation-settings .6s var(--sm-ease);
}
.sm-menu .is-menu-open .wp-block-navigation-item__content::before {
	content: counter(sm-menu, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--sans);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .2em;
	color: var(--sm-honey);
	transform: translateY(-1.6em);
}
.sm-menu .is-menu-open .wp-block-navigation-item__content:hover,
.sm-menu .is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--sm-honey);
	font-style: italic;
	font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.sm-menu .is-menu-open .wp-block-navigation-item:nth-child(2) .wp-block-navigation-item__content { animation-delay: .06s; }
.sm-menu .is-menu-open .wp-block-navigation-item:nth-child(3) .wp-block-navigation-item__content { animation-delay: .12s; }
.sm-menu .is-menu-open .wp-block-navigation-item:nth-child(4) .wp-block-navigation-item__content { animation-delay: .18s; }
.sm-menu .is-menu-open .wp-block-navigation-item:nth-child(5) .wp-block-navigation-item__content { animation-delay: .24s; }
.sm-menu .wp-block-navigation__responsive-container-close { position: absolute; top: max(1.25rem, env(safe-area-inset-top)); right: 0; color: var(--sm-ivory); padding: .5rem; margin: -.5rem; }
.sm-menu .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

/* Lien de réservation dans le menu : bouton plein, hors numérotation. */
.sm-menu .wp-block-navigation-item.sm-menu__book { counter-increment: none; margin-top: clamp(1rem, 3vh, 2rem); overflow: visible; }
.sm-menu .is-menu-open .sm-menu__book .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--sans);
	font-size: .8rem !important;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 1.1rem 1.6rem;
	background: var(--sm-honey);
	color: var(--sm-obsidian) !important;
	line-height: 1.2;
}
.sm-menu .is-menu-open .sm-menu__book .wp-block-navigation-item__content::before { content: none; }
.sm-menu .is-menu-open .sm-menu__book .wp-block-navigation-item__content:hover,
.sm-menu .is-menu-open .sm-menu__book .wp-block-navigation-item__content:focus-visible { background: var(--sm-ivory); color: var(--sm-obsidian) !important; }
.sm-menu .wp-block-navigation__responsive-container:not(.is-menu-open) .sm-menu__book { display: none; }
/* Petits écrans : liens un peu plus compacts pour limiter le défilement interne. */
@media (max-width: 400px), (max-height: 640px) {
	.sm-menu .is-menu-open .wp-block-navigation-item__content { font-size: clamp(2rem, 9.5vw, 2.6rem) !important; }
}

@keyframes sm-menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sm-rise { from { transform: translateY(105%); } to { transform: translateY(0); } }

/* ==========================================================================
   Manifeste — la photographie s'ouvre
   ========================================================================== */
.sm-manifesto {
	position: relative;
	min-height: 120svh;
	margin-block: 0 !important;
	padding: 0 !important;
	display: grid;
	align-items: end;
	background: var(--sm-obsidian);
	color: var(--sm-ivory);
	overflow: hidden;
	isolation: isolate;
}
.sm-manifesto__media {
	position: absolute !important;
	inset: 0;
	z-index: 0;
	margin: 0 !important;
	overflow: hidden;
	will-change: clip-path;
}
.sm-manifesto__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: 50% 50%;
	will-change: transform;
}
/* Assombrissement chaud pour la lisibilité du texte, sans dénaturer la matière. */
.sm-manifesto__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(20, 16, 14, .92) 0%, rgba(20, 16, 14, .55) 45%, rgba(20, 16, 14, .1) 100%),
		rgba(66, 48, 37, .35);
	mix-blend-mode: multiply;
}
.sm-manifesto__text {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(1rem, 2vw, 2rem);
	row-gap: 1.5rem;
	padding: 30vh var(--sm-pad) clamp(3rem, 10vh, 7rem);
}
.sm-manifesto__text .sm-label { grid-column: 1 / span 4; margin: 0; }
.sm-manifesto__statement {
	grid-column: 1 / span 10;
	margin: 0 !important;
	font-size: clamp(2.4rem, 6.4vw, 7.25rem) !important;
	font-weight: 300;
	line-height: .98 !important;
	letter-spacing: -.03em;
}
.sm-manifesto__statement em { color: var(--sm-honey); }
.sm-manifesto__body {
	grid-column: 8 / span 5;
	max-width: 42ch;
	margin: 1rem 0 0 !important;
	color: rgba(242, 233, 222, .8);
}
.sm-word { display: inline; }

@media (max-width: 781px) {
	.sm-manifesto { min-height: 110svh; }
	.sm-manifesto__text { grid-template-columns: minmax(0, 1fr); padding-top: 40vh; }
	.sm-manifesto__text .sm-label, .sm-manifesto__statement, .sm-manifesto__body { grid-column: 1; }
}

/* ==========================================================================
   Pied de page & réservation mobile
   ========================================================================== */

.sm-footer a { text-decoration: none; }
.sm-footer a:hover { color: var(--sm-honey); }
.sm-footer .sm-label { margin-bottom: .5rem; }
.sm-footer__legal {
	margin-top: var(--wp--preset--spacing--50) !important;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(242, 233, 222, .12);
	color: rgba(242, 233, 222, .55);
}

.sm-mobile-book { display: none; }
@media (max-width: 781px) {
	.sm-header__book { display: none !important; }
	.sm-mobile-book {
		display: block;
		position: fixed;
		inset: auto 1rem calc(1rem + env(safe-area-inset-bottom)) 1rem;
		z-index: 90;
		transform: translateY(160%);
		transition: transform .7s var(--sm-ease);
	}
	.sm-mobile-book.is-visible { transform: none; }
	.sm-mobile-book .wp-block-button, .sm-mobile-book .wp-block-button__link { width: 100%; text-align: center; }
	.sm-mobile-book .wp-block-button__link { box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
}

/* Pages sans hero : laisse la place à l'en-tête fixe. */
body:not(.home) main.wp-block-group { padding-top: calc(var(--wp--preset--spacing--60) + 4rem) !important; }
main.wp-block-post-content > .alignfull { margin-block: 0; }
/* Conteneur d'épinglage GSAP : il doit garder la pleine largeur de la section épinglée. */
/* Template immersif : chaque section gère ses marges ; le conteneur d'épinglage GSAP reste pleine largeur. */
main.sm-immersive { padding-inline: 0 !important; }
main.sm-immersive > * { margin-block: 0 !important; }
main.sm-immersive > .pin-spacer { max-width: none !important; }

/* ==========================================================================
   Mouvement réduit
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.sm-hero__scroll::after { transform: none; }
}

/* Très petits écrans (320 px) */
@media (max-width: 360px) {
	.sm-wordmark { font-size: 1.1rem; white-space: nowrap; }
	.sm-menu .wp-block-navigation__responsive-container-open::before { content: ""; }
}


/* Traînée de souris (cursor.js) : au-dessus du contenu, sous l'en-tête, sans jamais capter le pointeur. */
.sm-trail { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .sm-trail { display: none; } }

/* Police de repli des grands titres, calée sur Fraunces (opsz 144) : tant que Fraunces n'est pas chargée,
   le titre garde la même largeur et ne change pas de césure (évite le décalage de mise en page mesuré à 0,14
   sur mobile). Rapports mesurés dans Chrome : romain 0,90 × Times, italique 0,84 × Times. */
@font-face { font-family: "SM Repli Titre"; font-style: normal; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Noto Serif"); size-adjust: 90%; }
@font-face { font-family: "SM Repli Titre"; font-style: italic; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("Noto Serif Italic"); size-adjust: 84%; }
.sm-page-hero__title, .sm-h__title, .sm-steeve__name { font-family: Fraunces, "SM Repli Titre", serif !important; }