/* ==========================================================================
   Littlesoms — Enveloppe « Join our hamlet »
   Variante `envelope` du formulaire littlesoms-core : [ls_newsletter variant="envelope"].
   Chargé partout après main.css (handle littlesoms-envelope). Doc de maintenance : ENVELOPE.md (même dossier).

   COMMENT MODIFIER L'ANIMATION — tout se règle avec les variables --env-* de `.ls-env` (section 1) :
   - Vitesse ........ --env-flap-duration (rabat), --env-card-duration (sortie de la carte),
                      --env-tilt-duration (petite bascule finale de la carte).
   - Enchaînement ... --env-card-delay (la carte part X ms après le début du rabat),
                      --env-tilt-delay (la carte s'incline une fois sortie),
                      --env-close-delay (attente avant de refermer quand la souris s'en va).
   - Amplitude ...... --env-flap-angle (ouverture du rabat ; 180deg = à plat au-dessus),
                      --env-perspective (profondeur 3D ; plus petit = plus spectaculaire),
                      --env-card-tilt (angle de repos de la carte ; 0deg = droite),
                      --env-card-scale-in (taille de la carte rangée dans l'enveloppe),
                      --env-card-tuck (bout de carte qui reste dans l'enveloppe une fois sortie).
   - Courbes ........ --env-ease-flap, --env-ease-card, --env-ease-tilt.
   - Succès ......... --env-sent-delay (pause avant de ranger la carte), --env-seal-drop (hauteur de chute
                      du cachet), --env-seal-duration.
   - Taille, forme .. --env-width (largeur max), --env-ratio (largeur ÷ hauteur), --env-card-width, --env-seal-size.
   - Couleurs ....... --env-paper, --env-paper-light, --env-paper-shade, --env-inside, --env-lining, --env-shadow.
   Exemple, sur une seule section : .ls-newsletter-section .ls-env { --env-flap-duration: 600ms; --env-card-tilt: 2deg; }

   PRINCIPE (à garder) : une seule variable d'état, --env-o (0 = fermée, 1 = ouverte), posée par les
   sélecteurs d'état de la section 2 (.is-open, survol, focus, champ rempli, erreur…). Chaque pièce calcule
   sa pose à partir de --env-o et l'anime par `transition` : ouvrir et fermer sont la même règle jouée dans
   un sens ou dans l'autre ; seuls les délais changent selon le sens. Ne jamais écrire une pose deux fois.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Réglages
   -------------------------------------------------------------------------- */
.ls-env {
	/* Taille & forme */
	--env-width: 420px;            /* largeur max de l'enveloppe */
	--env-ratio: 1.5;              /* largeur ÷ hauteur de l'enveloppe */
	--env-card-width: 86%;         /* largeur de la carte / largeur de l'enveloppe */
	--env-seal-size: 17%;          /* cachet / largeur de l'enveloppe */
	--env-art-position: 50% 45%;   /* cadrage de l'illustration (object-position) */

	/* Durées & délais */
	--env-flap-duration: 420ms;
	--env-card-duration: 650ms;
	--env-tilt-duration: 520ms;
	--env-card-delay: 180ms;       /* ouverture : la carte part après le début du rabat */
	--env-tilt-delay: 560ms;       /* ouverture : la carte s'incline quand elle est presque sortie */
	--env-close-delay: 180ms;      /* fermeture : petite attente avant que la carte redescende */
	--env-fade-duration: 220ms;    /* titre, phrase et étiquette qui s'effacent derrière la carte */

	/* Courbes (sans linear() : les vieux Safari ignoreraient toute la transition) */
	--env-ease-flap: cubic-bezier(.65, 0, .35, 1);
	--env-ease-card: cubic-bezier(.2, .8, .2, 1);
	--env-ease-tilt: cubic-bezier(.34, 1.56, .64, 1);

	/* Amplitudes */
	--env-flap-angle: 180deg;
	--env-perspective: 900px;
	--env-card-tilt: -2.5deg;
	--env-card-scale-in: .42;
	--env-card-tuck: 1.75rem;

	/* Succès (après l'envoi du lien de confirmation) */
	--env-sent-delay: 450ms;
	--env-seal-drop: -3rem;
	--env-seal-duration: 700ms;

	/* Couleurs (papier crème, ombre teintée forêt, jamais de noir) */
	--env-paper: var(--ls-cream, #fbf1d7);
	--env-paper-light: #fff8e6;
	--env-paper-shade: #ecdcb2;
	--env-inside: #d6c08c;
	--env-card-paper: var(--ls-paper-field, #fffaf0);
	--env-line: #8a7658;           /* ligne pointillée du champ : 3,4:1 sur la carte (WCAG 1.4.11) */
	--env-placeholder: #6b5a43;    /* « you@daydream.ch » : 5:1 sur la carte */
	--env-lining:
		repeating-linear-gradient(90deg, rgb(163 168 71 / .2) 0 7px, transparent 7px 14px),
		repeating-linear-gradient(0deg, rgb(163 168 71 / .2) 0 7px, transparent 7px 14px),
		#f6eaca;                   /* doublure vichy olive */
	--env-shadow: 0 2px 4px rgb(10 12 5 / .35), 0 22px 40px -16px rgb(10 12 5 / .75);
}

/* --------------------------------------------------------------------------
   2. États → --env-o (0 fermée, 1 ouverte)
   -------------------------------------------------------------------------- */
.ls-env { --env-o: 0; }

/* Tap (envelope.js pose .is-open) et clavier : ouverte dès que le focus entre (la carte reste atteignable). */
.ls-env.is-open,
.ls-env:focus-within { --env-o: 1; }

/* Reste ouverte tant que quelque chose est écrit, coché ou à corriger. */
.ls-env:has(.ls-env__input:not(:placeholder-shown)),
.ls-env:has(.ls-field__check:checked),
.ls-env:has(.has-error, .ls-notice--error) { --env-o: 1; }

/* Souris : survol (jamais sur écran tactile, où :hover « colle » après un tap). */
@media (hover: hover) {
	.ls-env:hover { --env-o: 1; }
}

/* Tactile sans JS (ou avant envelope.js) : la carte est sortie, le formulaire reste utilisable. */
@media (hover: none) {
	.ls-env[data-ls-envelope="pending"]:not(.is-sent) { --env-o: 1; }
}

/* Après l'inscription, le message de succès reçoit le focus : il ne doit pas rouvrir l'enveloppe. */
.ls-env:has(> .ls-newsletter__status:focus-within):not(.is-open, :hover) { --env-o: 0; }

/* Une image : envelope.js passe par l'état « init » (pas de transition) pour se mettre en place sans animer. */
.ls-env[data-ls-envelope="init"] :is(.ls-env__card, .ls-env__flap, .ls-env__intro, .ls-env__toggle-label) { transition: none; }

/* --------------------------------------------------------------------------
   3. Mise en page : invitation (titre + phrase) au-dessus, ou à côté si la place le permet
   -------------------------------------------------------------------------- */
.ls-env {
	position: relative;
	isolation: isolate;
	container: ls-env / inline-size;
	pointer-events: none; /* seuls l'enveloppe et la carte réagissent : l'espace réservé reste inerte */
	text-align: center;
	scroll-margin-top: calc(var(--ls-header-h, 64px) + 1.5rem);
}
.ls-env__layout {
	display: grid;
	grid-template-areas: "intro" "stage";
	justify-items: center;
}
.ls-env__intro {
	grid-area: intro;
	max-width: 34rem;
	margin: 0 0 1.5rem;
}
.ls-env__title {
	margin: 0 0 .4rem;
	color: var(--ls-gold, #ffe88b);
}
.ls-env__lead {
	margin: 0;
	color: var(--ls-parchment, #f4e4ab);
	font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
	line-height: 1.55;
}

/* Scène : la carte (rangée 1, dans le flux : sa place est réservée) puis l'enveloppe (rangée 2). */
.ls-env__stage {
	grid-area: stage;
	position: relative;
	z-index: 2;
	container-type: inline-size;
	display: grid;
	grid-template-columns: 100%;
	width: min(100%, var(--env-width));
	--env-h: calc(100cqw / var(--env-ratio)); /* hauteur de l'enveloppe (lue par les enfants de la scène) */
}

/* Animations permises : l'invitation se pose dans l'espace réservé à la carte et s'efface quand elle sort. */
@media (prefers-reduced-motion: no-preference) {
	.ls-env__intro {
		grid-area: stage;
		align-self: end;
		position: relative;
		z-index: 1;
		margin-block-end: calc(min(100cqw, var(--env-width)) / var(--env-ratio) + 1.25rem);
		opacity: calc(1 - var(--env-o));
		transition: opacity var(--env-fade-duration) ease calc((1 - var(--env-o)) * (var(--env-close-delay) + var(--env-card-duration) * .5));
	}
}

/* Large (≥ 44rem disponibles) : invitation à gauche, enveloppe à droite. */
@container ls-env (min-width: 44rem) {
	.ls-env__layout {
		grid-template-areas: "intro stage";
		grid-template-columns: minmax(0, 1fr) minmax(0, var(--env-width));
		column-gap: clamp(2rem, 6cqw, 4.5rem);
		align-items: end;
	}
	.ls-env__intro {
		grid-area: intro;
		align-self: end;
		justify-self: start;
		max-width: 30rem;
		margin: 0 0 calc(var(--env-width) / var(--env-ratio) * .32);
		text-align: start;
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   4. L'enveloppe (dos, poche, rabat 3D, cachet, bouton tactile)
   Ordre d'empilement dans la scène : dos 1 · carte 2 · poche 3 · rabat 4 fermé / 1 ouvert · bouton 5.
   -------------------------------------------------------------------------- */
.ls-env__body {
	grid-row: 2;
	grid-column: 1;
	position: relative; /* pas de z-index : ses pièces s'empilent avec la carte */
	aspect-ratio: var(--env-ratio);
	pointer-events: auto;
	--ls-focus: var(--ls-forest, #242c17);
	--ls-focus-halo: var(--env-paper);
}
.ls-env__back,
.ls-env__pocket,
.ls-env__flap {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Dos (l'intérieur de l'enveloppe, visible quand le rabat est ouvert) */
.ls-env__back {
	z-index: 1;
	border-radius: 4px;
	background: linear-gradient(to bottom, var(--env-inside), var(--env-paper-shade) 62%);
	box-shadow: var(--env-shadow);
}

/* Poche : rabats latéraux + rabat du bas (le V du haut est couvert par le rabat fermé) */
.ls-env__pocket {
	z-index: 3;
	filter: drop-shadow(0 -1px 0 rgb(74 59 42 / .16)) drop-shadow(0 -6px 8px rgb(74 59 42 / .07));
}
.ls-env__pocket::before,
.ls-env__pocket::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 0 0 4px 4px;
}
.ls-env__pocket::before {
	clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
	background: linear-gradient(to bottom, var(--env-paper-shade), var(--env-paper) 58%);
}
.ls-env__pocket::after {
	clip-path: polygon(0 100%, 50% 47%, 100% 100%);
	background: linear-gradient(to top, var(--env-paper), var(--env-paper-light));
}

/* Rabat : charnière en haut, deux faces (extérieur crème + cachet / doublure vichy) */
.ls-env__flap {
	bottom: auto;
	height: 58%;
	z-index: calc(4 - 3 * var(--env-o));
	transform-origin: 50% 0;
	transform-style: preserve-3d;
	transform: perspective(var(--env-perspective)) rotateX(calc(var(--env-o) * var(--env-flap-angle)));
	/* fermeture : le rabat attend que la carte soit presque rentrée */
	--_wait: calc((1 - var(--env-o)) * (var(--env-close-delay) + var(--env-card-duration) * .6));
	transition:
		transform var(--env-flap-duration) var(--env-ease-flap) var(--_wait),
		z-index 0s linear calc(var(--_wait) + var(--env-flap-duration) / 2); /* passe derrière la carte à mi-course */
}
.ls-env__flap::before,
.ls-env__flap::after {
	content: "";
	position: absolute;
	inset: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.ls-env__flap::before { /* face extérieure */
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	background: linear-gradient(to bottom, var(--env-paper-light), var(--env-paper) 55%, var(--env-paper-shade));
}
.ls-env__flap::after { /* face intérieure (visible rabat ouvert) */
	transform: rotateX(180deg);
	clip-path: polygon(0 100%, 100% 100%, 50% 0);
	background: var(--env-lining);
}
.ls-env__seal {
	position: absolute;
	left: 50%;
	top: 92%;
	width: var(--env-seal-size);
	aspect-ratio: 1;
	margin: calc(var(--env-seal-size) / -2) 0 0 calc(var(--env-seal-size) / -2); /* % = largeur du rabat */
	background: url(../svg/wax-seal.svg) center / contain no-repeat;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(1px);
	filter: drop-shadow(0 2px 2px rgb(10 12 5 / .35));
}

/* Bouton « Open the letter » : couvre l'enveloppe ; affiché par envelope.js (tap = ouvrir / refermer) */
.ls-env__toggle:not([hidden]) {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0 0 9%;
	border: 0;
	border-radius: 4px;
	background: none;
	box-shadow: none;
	color: var(--ls-ink, #4a3b2a); /* encre sur crème : 9,6:1 */
	font: 700 .6875rem/1 var(--ls-font-body, sans-serif);
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	appearance: none;
}
.ls-env__toggle-label {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .55em .9em;
	opacity: calc(1 - var(--env-o));
	transition: opacity var(--env-fade-duration) ease calc((1 - var(--env-o)) * (var(--env-close-delay) + var(--env-card-duration)));
}
.ls-env__toggle-label::before {
	content: "";
	width: .95em;
	height: .95em;
	background: currentColor;
	-webkit-mask: url(../svg/sparkle-4.svg) center / contain no-repeat;
	mask: url(../svg/sparkle-4.svg) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   5. La carte : illustration en haut, formulaire « écrit à la main » en bas
   -------------------------------------------------------------------------- */
.ls-env__card {
	grid-row: 1;
	grid-column: 1;
	justify-self: center;
	position: relative;
	z-index: 2;
	width: var(--env-card-width);
	margin-block-end: calc(var(--env-card-tuck) * -1); /* le bas de la carte reste dans la poche */
	padding: .65rem .65rem calc(var(--env-card-tuck) + .6rem); /* le bas rentré dans la poche reste vide */
	container-type: inline-size;
	pointer-events: auto;
	text-align: start;
	color: var(--ls-ink, #4a3b2a);
	background: var(--env-card-paper);
	border-radius: var(--ls-r-photo, 2px);
	box-shadow: 0 1px 2px rgb(10 12 5 / .22), 0 14px 28px -12px rgb(10 12 5 / .55);

	/* Pose : rangée (petite, au fond de l'enveloppe) → sortie (taille réelle, légère inclinaison) */
	transform-origin: 50% 100%;
	translate: 0 calc((1 - var(--env-o)) * (var(--env-h) * .95 - var(--env-card-tuck)));
	scale: calc(var(--env-card-scale-in) + var(--env-o) * (1 - var(--env-card-scale-in)));
	rotate: calc(var(--env-o) * var(--env-card-tilt));
	--_go: calc(var(--env-o) * var(--env-card-delay) + (1 - var(--env-o)) * var(--env-close-delay));
	transition:
		translate var(--env-card-duration) var(--env-ease-card) var(--_go),
		scale var(--env-card-duration) var(--env-ease-card) var(--_go),
		rotate var(--env-tilt-duration) var(--env-ease-tilt) calc(var(--env-o) * var(--env-tilt-delay) + (1 - var(--env-o)) * var(--env-close-delay));

	/* Contexte « papier » pour les styles de formulaire de main.css et de Blocksy */
	color-scheme: light;
	--theme-form-field-background-initial-color: transparent;
	--theme-form-field-background-focus-color: transparent;
	--theme-form-field-border-initial-color: var(--env-line);
	--theme-form-field-border-focus-color: var(--ls-olive-ink, #5c6118);
	--theme-form-text-initial-color: var(--ls-ink, #4a3b2a);
	--theme-form-text-focus-color: var(--ls-ink, #4a3b2a);
	--theme-form-selection-field-initial-color: var(--ls-paper-line, #b9ae92);
	--theme-form-selection-field-active-color: var(--ls-olive-ink, #5c6118);
	--ls-field-placeholder: var(--env-placeholder);
	--ls-field-error: var(--ls-error, #a3243b);
	--ls-focus: var(--ls-forest, #242c17);  /* rose sur crème = 1,6:1 : interdit */
	--ls-focus-halo: var(--env-card-paper);
	--ls-btn-bg: var(--ls-forest, #242c17);  /* ticket forêt, texte or (11,9:1) */
	--ls-btn-bg-hover: var(--ls-moss, #2f3920);
	--ls-btn-fg: var(--ls-gold, #ffe88b);
	--ls-btn-glow: drop-shadow(0 6px 14px rgb(36 44 23 / .25));
}
.ls-env__card::after { /* liseré pointillé de papeterie */
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px dashed rgb(92 97 24 / .3);
	border-radius: 1px;
	pointer-events: none;
}

/* Illustration : vraie <img>, ratio fixe 3:2, recadrée au centre (image réglable : Hamlet → Envelope card) */
.ls-env__art {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 1px;
	background: var(--env-paper-shade);
}
.ls-env__art::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgb(74 59 42 / .12);
	pointer-events: none;
}
.ls-env__art--empty { background: var(--env-lining); }
.ls-env__img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--env-art-position);
}

/* Formulaire : e-mail + bouton sur une ligne, consentement dessous ; empilé si la carte est étroite */
.ls-env__form {
	position: relative;
	z-index: 1; /* au-dessus du liseré */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: .9rem;
	row-gap: .55rem;
	margin: .8rem 0 0;
	padding: 0 .4rem;
}
.ls-env__form > .ls-field { margin: 0; }
.ls-env__form > .ls-field--email { grid-column: 1; grid-row: 1; }
.ls-env__form > .ls-newsletter__actions { grid-column: 2; grid-row: 1; align-self: start; margin: .8rem 0 0; }
.ls-env__form > .ls-field--consent { grid-column: 1 / -1; grid-row: 2; }
@container (max-width: 19.5rem) {
	.ls-env__form { grid-template-columns: minmax(0, 1fr); }
	.ls-env__form > .ls-newsletter__actions { grid-column: 1; grid-row: 3; margin-top: .3rem; }
	.ls-env__form > .ls-newsletter__actions :is(.wp-block-button, .wp-block-button__link) { width: 100%; }
}

/* Champ e-mail : ligne pointillée, écriture Cormorant italique (sélecteurs > main.css (0,2,1)) */
.ls-env .ls-field--email .ls-field__label {
	margin: 0 0 .3rem;
	color: var(--ls-olive-ink, #5c6118); /* 5,9:1 sur crème */
	font: 700 .6875rem/1.1 var(--ls-font-body, sans-serif);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ls-env .ls-field .ls-env__input {
	min-height: 44px;
	height: auto;
	margin: 0;
	padding: .1em .15em 0;
	border: 0;
	border-bottom: 2px dotted var(--env-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ls-ink, #4a3b2a);
	font: italic 500 1.375rem/1.25 var(--ls-font-serif, serif);
	letter-spacing: 0;
}
.ls-env .ls-env__input::placeholder {
	color: var(--env-placeholder);
	font: italic 500 1.375rem/1.25 var(--ls-font-serif, serif);
	opacity: 1;
}
.ls-env .ls-field .ls-env__input:focus {
	border-bottom-style: solid;
	border-bottom-color: var(--ls-olive-ink, #5c6118);
	box-shadow: none;
}
.ls-env .ls-field.has-error .ls-env__input,
.ls-env .ls-field .ls-env__input[aria-invalid="true"] {
	border-bottom-color: var(--ls-error, #a3243b);
	box-shadow: none;
}
.ls-env .ls-env__input:autofill {
	-webkit-box-shadow: inset 0 0 0 4em var(--env-card-paper);
	-webkit-text-fill-color: var(--ls-ink, #4a3b2a);
}

/* Consentement, lien Privacy, erreurs */
.ls-env .ls-field--consent { grid-template-columns: 20px 1fr; column-gap: .6em; }
.ls-env .ls-field--consent .ls-field__check { width: 20px; height: 20px; margin-top: .1rem; }
.ls-env .ls-field--consent .ls-field__label { font-size: .8125rem; line-height: 1.4; color: var(--ls-ink, #4a3b2a); }
.ls-env .ls-field__hint { margin-top: .1rem; font-size: .75rem; }
.ls-env .ls-field__error { font-size: .75rem; }
.ls-env__notice { margin: .75rem .35rem 0; font-size: 1rem; }

/* Message de succès sous l'enveloppe (or sur forêt, via main.css .ls-notice--success) */
.ls-env > .ls-newsletter__status {
	max-width: min(100%, 30rem);
	margin: 1.5rem auto 0;
	text-align: start;
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   6. Succès (.is-sent, rendu par le plugin après le double opt-in) :
   la carte redescend, le rabat se ferme, le cachet de cire tombe. Les poses de départ seulement
   (`from`) : l'arrivée est la pose fermée normale, l'enveloppe se rouvre ensuite comme d'habitude.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.ls-env.is-sent .ls-env__card {
		animation: ls-env-card-home var(--env-card-duration) var(--env-ease-flap) var(--env-sent-delay) backwards;
	}
	.ls-env.is-sent .ls-env__flap {
		animation: ls-env-flap-shut var(--env-flap-duration) var(--env-ease-flap) calc(var(--env-sent-delay) + var(--env-card-duration) * .7) backwards;
	}
	.ls-env.is-sent .ls-env__seal {
		animation: ls-env-seal-drop var(--env-seal-duration) var(--env-ease-tilt) calc(var(--env-sent-delay) + var(--env-card-duration) * .7 + var(--env-flap-duration)) backwards;
	}
	.ls-env.is-sent :is(.ls-env__intro, .ls-env__toggle-label) {
		animation: ls-env-fade-in .4s ease calc(var(--env-sent-delay) + var(--env-card-duration) * .6) backwards;
	}
	.ls-env.is-sent > .ls-newsletter__status {
		animation: ls-env-fade-in .5s ease calc(var(--env-sent-delay) + var(--env-card-duration) * .7 + var(--env-flap-duration)) backwards;
	}
}
@keyframes ls-env-card-home { from { translate: 0 0; scale: 1; rotate: var(--env-card-tilt); } }
@keyframes ls-env-flap-shut {
	from { transform: perspective(var(--env-perspective)) rotateX(var(--env-flap-angle)); z-index: 1; }
	50% { z-index: 1; }
	50.1% { z-index: 4; }
}
@keyframes ls-env-seal-drop { from { opacity: 0; translate: 0 var(--env-seal-drop); scale: 1.6; } }
@keyframes ls-env-fade-in { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   7. Mouvement réduit : la carte est déjà sortie, rien ne bouge
   (après un succès : enveloppe scellée, elle s'ouvre d'un coup au focus / survol / tap).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ls-env:not(.is-sent) { --env-o: 1; }
	.ls-env:not(.is-sent) .ls-env__toggle:not([hidden]) { display: none; }
	.ls-env :is(.ls-env__card, .ls-env__flap, .ls-env__intro, .ls-env__toggle-label) { transition: none; }
}

/* --------------------------------------------------------------------------
   8. Variante décorative scellée (page /hamlet/welcome/) et emplacements dans les patterns
   -------------------------------------------------------------------------- */
.ls-env--sealed { --env-width: 280px; }

.ls-home-welcome__letter { margin-block-start: clamp(2.25rem, 4vw, 3rem); }
.ls-newsletter-section__envelope { margin-inline: auto; }
.ls-hamlet__envelope { position: relative; }
.ls-hamlet__envelope .ls-hamlet__note {
	max-width: 26rem;
	margin: 1.25rem auto 0;
	color: var(--ls-parchment, #f4e4ab);
	text-align: center;
}
.ls-hamlet-welcome__envelope { margin: 0 auto clamp(1rem, 3vw, 2rem); }

/* QA 2026-10-05 — links on the card: olive ink on cream (gold on cream is unreadable). */
.ls-env__card { --ls-c-link: var(--ls-olive-ink, #5c6118); }
.ls-env__card a { color: var(--ls-olive-ink, #5c6118); }
/* No invitation text next to it (sealed letter, coming soon): the envelope stands alone, centred. */
.ls-env__layout:not(:has(.ls-env__intro)) {
	grid-template-areas: "stage";
	grid-template-columns: minmax(0, var(--env-width));
	justify-content: center;
}