/* L’Orangerie — motion.
 *
 * The states the choreography (assets/js/lorangerie.js) animates from, and the
 * fallbacks for when it cannot run. Layout, colour and type live in Bricks; this
 * file only hides what is about to be revealed, and only under html.lo-js (set
 * by an inline head script), so a page without JS shows everything.
 *
 *   html.lo-js      JS is on; pre-paint hidden states apply.
 *   html.lo-reduit  prefers-reduced-motion: no hidden states, no pins, hero stacked.
 *   html.lo-pret    the module booted (it removes the 4 s safety below).
 *   html.lo-libre   the module failed: everything shown, at once.
 *   .lo-vu          a one-shot reveal has played; its hidden state never returns.
 *   .lo-inscrit     the newsletter sign-up went through (assets/js/infolettre.js).
 *
 * 1rem = 10px (Bricks sets html { font-size: 62.5% }).
 */

/* ------------------------------------------------------------------ Lenis -- */
/* lenis.css (1.3), inlined: the vendor folder carries the script only. */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis [data-lenis-prevent],
.lenis .brxe-offcanvas { overscroll-behavior: contain; }

/* ------------------------------------------------------------------ Inks -- */
/* Each section wears its own text inks, always (motion/ambiance.js sets
 * --lo-encre and --lo-encre-fine once on every section; the Bricks classes
 * read them, their static colours, the same pairs, as fallbacks). */
/* The menu is its own dark panel, not on the light: its running text
 * (.lo-mono coordinates) keeps the panel's inks. */
.brxe-offcanvas { --lo-encre: #EBC495; --lo-encre-fine: #C9945D; }

/* ---------------------------------------------------- SplitText line masks -- */
/* SplitText wraps each line in .lo-ligne-mask with an inline overflow: clip.
 * Charlottenburg is set tight (line-height under 1), so its accents and the
 * serif text's descenders overhang the line box and a plain mask would shave
 * them. The mask clips with a clip-path grown .18em above and below (and
 * open sideways) instead: no effect on layout, unlike padding (adjacent
 * negative margins would collapse and add .14em to every line). */
.lo-ligne-mask {
	overflow: visible !important;
	clip-path: inset(-.18em -100vw);
}
.lo-ligne { will-change: transform, opacity; }

/* The scroll cue: its pulse moves the arrow a few pixels, past its viewBox. */
[data-lo-fleche] svg,
.lo-accueil-fleche svg { overflow: visible; }

/* -------------------------------------------- Buttons: the arrow on hover -- */
/* The curved arrow (lo-fleche-cta.svg, each button's Bricks icon).
 *   .lo-btn-fleche   wears it at rest; on hover it runs out to the right and
 *                    comes back in from the left, clipped by its own SVG box.
 *   .lo-btn-survol   (header and menu buttons) and the newsletter's submit
 *                    keep it hidden past their left edge (the button clips);
 *                    on hover it slides in and the label moves over for it.
 * Keyboard focus does the same. Hover only where there is a real pointer: a
 * tap would leave it out. Specificity (0,2,0)+ so the Bricks classes, printed
 * after this file, do not undo it. */
.lo-btn svg,
.lo-formulaire button[type="submit"] svg { flex-shrink: 0; overflow: hidden; }
.lo-btn svg > g { transform-box: fill-box; }

@keyframes lo-fleche-passe {
	0% { transform: translateX(0); }
	45% { transform: translateX(125%); }
	45.01% { transform: translateX(-125%); }
	100% { transform: translateX(0); }
}

.lo-btn.lo-btn-survol,
.lo-formulaire button[type="submit"] {
	transition: background-color .5s cubic-bezier(.16, 1, .3, 1), color .5s cubic-bezier(.16, 1, .3, 1), border-color .5s cubic-bezier(.16, 1, .3, 1), padding .6s cubic-bezier(.16, 1, .3, 1);
}
/* Out by its own width and the gap: its right edge rests left of the label. */
.lo-btn.lo-btn-survol svg,
.lo-formulaire button[type="submit"] svg {
	margin-left: -2.8358rem;
	opacity: 0;
	transition: margin-left .6s cubic-bezier(.16, 1, .3, 1), opacity .45s ease;
}

.lo-btn.lo-btn-fleche:focus-visible svg > g { animation: lo-fleche-passe .8s cubic-bezier(.65, 0, .35, 1); }
.lo-btn.lo-btn-survol:focus-visible { padding-left: .9rem; }
.lo-formulaire button[type="submit"]:focus-visible { padding-left: 1.4rem; }
.lo-btn.lo-btn-survol:focus-visible svg,
.lo-formulaire button[type="submit"]:focus-visible svg { margin-left: 0; opacity: 1; }

@media (hover: hover) {
	.lo-btn.lo-btn-fleche:hover svg > g { animation: lo-fleche-passe .8s cubic-bezier(.65, 0, .35, 1); }
	.lo-btn.lo-btn-survol:hover { padding-left: .9rem; }
	.lo-formulaire button[type="submit"]:hover { padding-left: 1.4rem; }
	.lo-btn.lo-btn-survol:hover svg,
	.lo-formulaire button[type="submit"]:hover svg { margin-left: 0; opacity: 1; }
}

/* Menu rows (Figma 685:2): the menu's own curved arrow (lo-fleche-menu.svg,
 * the link's Bricks icon) waits out by its width and the row's gap; on hover
 * it slides in and the word moves over for it. */
.lo-menu-lien .icon {
	display: flex;
	flex-shrink: 0;
	margin-left: -7.3rem;
	opacity: 0;
	transition: margin-left .6s cubic-bezier(.16, 1, .3, 1), opacity .45s ease;
}
.lo-menu-lien:focus-visible .icon { margin-left: 0; opacity: 1; }
@media (hover: hover) {
	.lo-menu-lien:hover .icon { margin-left: 0; opacity: 1; }
}
html.lo-reduit .lo-menu-lien .icon { transition: none; }

/* Reduced motion: the arrow simply is there on hover, no travel. */
html.lo-reduit .lo-btn svg > g { animation: none !important; }
html.lo-reduit .lo-btn.lo-btn-survol,
html.lo-reduit .lo-btn.lo-btn-survol svg,
html.lo-reduit .lo-formulaire button[type="submit"],
html.lo-reduit .lo-formulaire button[type="submit"] svg { transition: none; }

/* ------------------------------------------------------ Pre-paint states -- */
/* Hidden before the first paint, revealed by the module. Never without lo-js,
 * never under lo-reduit. Opacity only, never visibility: what waits for its
 * reveal stays in the accessibility tree and in the Tab order (focusing it
 * plays its reveal at once, lorangerie.js). The hero's and the accueil's
 * states hang on their section, so a section whose set-up failed (.lo-vu)
 * lets go of them. */

/* Préchargement: the words and the logo come in once the module runs. */
html.lo-js:not(.lo-reduit) [data-lo-prelude-mot],
html.lo-js:not(.lo-reduit) [data-lo-prelude-logo] { opacity: 0; }

/* Héros: the five panels and the arrow are dealt by the pinned timeline. */
html.lo-js:not(.lo-reduit) #jour:not(.lo-vu) [data-lo-panneau],
html.lo-js:not(.lo-reduit) #jour:not(.lo-vu) [data-lo-fleche] { opacity: 0; }

/* Accueil: the title waits unseen; it fades in on the climb (motion/accueil.js). */
html.lo-js:not(.lo-reduit) #accueil:not(.lo-vu) .lo-accueil-titre { opacity: 0; }

/* Saison: the four qualities wait at the dim end of their scrub. */
html.lo-js:not(.lo-reduit) #experience:not(.lo-vu) .lo-qualite { opacity: .15; }

/* One-shot reveals. */
html.lo-js:not(.lo-reduit) [data-lo-reveal="lignes"]:not(.lo-vu),
html.lo-js:not(.lo-reduit) [data-lo-reveal="fondu"]:not(.lo-vu),
html.lo-js:not(.lo-reduit) [data-lo-reveal="bloc"]:not(.lo-vu) > *,
html.lo-js:not(.lo-reduit) [data-lo-reveal="galerie"]:not(.lo-vu) .lo-galerie-carte,
html.lo-js:not(.lo-reduit) [data-lo-reveal="faq"]:not(.lo-vu) > *,
html.lo-js:not(.lo-reduit) [data-lo-reveal="ovale"]:not(.lo-vu),
html.lo-js:not(.lo-reduit) [data-lo-reveal="trace"]:not(.lo-vu) { opacity: 0; }

/* Photographs: closed from the top, the wipe opens them upward. */
html.lo-js:not(.lo-reduit) [data-lo-reveal="image"]:not(.lo-vu) { clip-path: inset(100% 0% 0% 0% round 15px); }

/* Leaving at the top (motion/sortie.js): a section reaching the header wears a
 * mask, transparent from just above the header's foot, opaque a little below
 * it, placed in screen terms through the two variables: its content dissolves
 * into the background instead of sliding under the header. */
.lo-sortie {
	-webkit-mask-image: linear-gradient(to bottom, transparent var(--lo-sortie-haut), #000 var(--lo-sortie-bas));
	mask-image: linear-gradient(to bottom, transparent var(--lo-sortie-haut), #000 var(--lo-sortie-bas));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* An anchor's target takes the focus after the trip (keyboard users go on
 * from there); the section itself needs no ring. */
[data-lo-cible]:focus { outline: none; }

/* ---------------------------------------------------------------- Safety -- */
/* If the module has not booted 4 s after the styles apply (blocked, offline,
 * a parse error), the pre-paint states let go by themselves and the preloader
 * clears. Of the hero only the opening shows: its five panels share one
 * screen until the module lays them out. The module adds lo-pret once its
 * own states are in place, which removes these animations. */
@keyframes lo-secours { to { opacity: 1; clip-path: none; } }
@keyframes lo-secours-prelude { to { visibility: hidden; opacity: 0; } }

html.lo-js:not(.lo-pret):not(.lo-reduit) :is(
	[data-lo-prelude-mot], [data-lo-prelude-logo], #jour [data-lo-panneau="0"], [data-lo-fleche], .lo-accueil-titre,
	[data-lo-reveal="lignes"], [data-lo-reveal="fondu"], [data-lo-reveal="bloc"] > *,
	[data-lo-reveal="galerie"] .lo-galerie-carte, [data-lo-reveal="faq"] > *, [data-lo-reveal="ovale"],
	[data-lo-reveal="trace"], [data-lo-reveal="image"], .lo-qualite
) { animation: lo-secours .8s 4s both; }
html.lo-js:not(.lo-pret) .lo-prelude { animation: lo-secours-prelude .8s 4s both; }

/* The module failed after booting: show everything now, over any inline
 * state, with the hero laid flat (below). The qualities too: no stepper will
 * light them. */
html.lo-libre :is(
	[data-lo-prelude-mot], [data-lo-prelude-logo], #jour [data-lo-panneau], [data-lo-fleche], .lo-accueil-titre,
	[data-lo-reveal="lignes"], [data-lo-reveal="fondu"], [data-lo-reveal="bloc"] > *,
	[data-lo-reveal="galerie"] .lo-galerie-carte, [data-lo-reveal="faq"] > *, [data-lo-reveal="ovale"],
	[data-lo-reveal="trace"], [data-lo-reveal="image"], [data-lo-entete], .lo-qualite
) { visibility: visible !important; opacity: 1 !important; clip-path: none !important; }
html.lo-libre .lo-prelude { display: none !important; }

/* ------------------------------- No JS, reduced motion, failure: flat hero -- */
/* Without the pinned timeline the hero's five panels cannot share one screen:
 * they stack as ordinary blocks, one screen each, and the scroll cue goes.
 * The same when the module failed (lo-libre) or the hero alone did (.lo-plat).
 * The preloader never shows. */
html:not(.lo-js) .lo-prelude,
html.lo-reduit .lo-prelude { display: none; }

:is(html:not(.lo-js), html.lo-reduit, html.lo-libre) #jour,
:is(html:not(.lo-js), html.lo-reduit, html.lo-libre) #jour .lo-jour-scene,
#jour.lo-plat,
#jour.lo-plat .lo-jour-scene { height: auto; min-height: 0; }

:is(html:not(.lo-js), html.lo-reduit, html.lo-libre) #jour [data-lo-panneau],
#jour.lo-plat [data-lo-panneau] {
	position: relative;
	inset: auto;
	transform: none;
	min-height: 100vh;
	min-height: 100svh;
}
:is(html:not(.lo-js), html.lo-reduit, html.lo-libre) #jour [data-lo-panneau]:not([data-lo-panneau="0"]),
#jour.lo-plat [data-lo-panneau]:not([data-lo-panneau="0"]) {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
:is(html:not(.lo-js), html.lo-reduit, html.lo-libre) [data-lo-fleche],
#jour.lo-plat [data-lo-fleche] { display: none; }

/* Saison: without the stepper, no quality is dimmed. */

/* Galerie: Splide hides the slider until its script mounts it. Without JS the
 * cards stay in their row and the track scrolls sideways. */
html:not(.lo-js) .brxe-slider-nested.splide { visibility: visible; }
html:not(.lo-js) .brxe-slider-nested .splide__track { overflow-x: auto; }

/* ----------------------------------------------------- The scroll cues' jump -- */
/* A data-lo-saut link (defilement.js) jumps without scrolling: the page as it
 * was dissolves into the page where it lands (the browser's default root
 * crossfade, slowed to the spa's pace). */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .7s;
	animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* ------------------------------------------------------------- Newsletter -- */
/* Bricks' form message and Cloudflare Turnstile, in the brand (states set by
 * assets/js/infolettre.js). Bricks' own message is a coloured box: here it is
 * the section's ink, without a box. On success the form gives way to the
 * thank-you line, set in the serif (client, 2026-10-16). Turnstile only shows
 * when Cloudflare needs the visitor (interaction-only); its widget is
 * Cloudflare's iframe and keeps its look, but it eases in under the fields and
 * folds away once it has its answer. */
.lo-formulaire .brx-turnstile {
	display: flex;
	justify-content: center;
	width: 100%;
	max-height: 9rem;
	overflow: hidden;
	transition: max-height .6s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}

.lo-formulaire .brx-turnstile.lo-turnstile-fait {
	max-height: 0;
	opacity: 0;
}

.lo-formulaire .message,
.lo-formulaire .message.success,
.lo-formulaire .message.error {
	justify-content: center;
	margin-top: 1.6rem;
	padding: 0;
	background: none;
	color: var(--lo-encre, var(--lo-allee-de-sable));
	text-align: center;
}

.lo-formulaire .message .text {
	padding: 0;
	font-family: var(--lo-police-texte);
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.4;
	text-wrap: balance;
}

.lo-formulaire .message .close { display: none; }

/* After the sign-up: only the thank-you line, a little wider than the form. */
.lo-formulaire.lo-inscrit {
	width: min(48rem, 100%);
}

.lo-formulaire.lo-inscrit > :not(.message) { display: none; }

.lo-formulaire.lo-inscrit .message {
	margin-top: 0;
	animation: lo-merci .9s cubic-bezier(.16, 1, .3, 1) both;
}

.lo-formulaire.lo-inscrit .message .text {
	font-family: var(--lo-police-serif);
	font-size: var(--lo-fs-lieu, 3rem);
	font-weight: 400;
	line-height: 1.05;
	text-wrap: balance;
}

@keyframes lo-merci {
	from { opacity: 0; transform: translateY(1.2rem); }
}

html.lo-reduit .lo-formulaire .brx-turnstile { transition: none; }
html.lo-reduit .lo-formulaire.lo-inscrit .message { animation: none; }