/* ==========================================================================
   Collaborative greeting card ([maliste_carte_voeux], [maliste_cartes_modeles]) — models, creation, signing, management, finished card (envelope, effects).
   Uses the redesign tokens (redesign.css); scoped under #wrapper like the other tools.
   ========================================================================== */

#wrapper .rd-gc {
	--gc-rose: #FBE3EC;
	--gc-peche: #FDE7D8;
	--gc-lavande: #ECE4F7;
	--gc-menthe: #E1F2EA;
	--gc-ciel: #E2EEF9;

	padding-bottom: 24px;
}

/* The theme gives sections a display that would beat the hidden attribute */
#wrapper .rd-gc [hidden] {
	display: none !important;
}

/* ---------- Hero (creation) ---------- */

#wrapper .rd-gc-hero {
	padding: 48px 0 36px;
	background: var(--rd-cream-2, #F6EEE8);
}

#wrapper .rd-gc-hero .rd-lead {
	max-width: 680px;
}

#wrapper .rd-gc-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: gc-step;
}

#wrapper .rd-gc-steps li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--rd-plum, #320131);
	font-weight: 600;
	counter-increment: gc-step;
}

#wrapper .rd-gc-steps li::before {
	content: counter(gc-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--rd-berry, #B31E6F);
	color: #FFF;
	font-size: 14px;
}

/* ---------- Boxes and forms ---------- */

#wrapper .rd-gc-body {
	padding-top: 36px;
}

#wrapper .rd-gc-box {
	max-width: 820px;
	margin: 0 auto;
	padding: 30px;
	border-radius: 18px;
	background: var(--rd-surface, #FFF);
	box-shadow: 0 10px 30px -22px rgba(50, 1, 49, .5);
}

#wrapper .rd-gc-box + .rd-gc-box {
	margin-top: 20px;
}

#wrapper .rd-gc-form .rd-title {
	margin-bottom: 18px;
	font-size: 26px;
}

#wrapper .rd-gc-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 20px;
}

#wrapper .rd-gc-field {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
}

#wrapper .rd-gc-field label,
#wrapper .rd-gc-field legend {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	color: var(--rd-plum, #320131);
	font-size: 15px;
	font-weight: 600;
}

#wrapper .rd-gc-field input[type="text"],
#wrapper .rd-gc-field input[type="email"],
#wrapper .rd-gc-field input[type="date"],
#wrapper .rd-gc-field select,
#wrapper .rd-gc-field textarea {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--rd-border, #EEE2DC);
	border-radius: 10px;
	background: var(--rd-surface, #FFF);
	box-shadow: none;
	color: var(--rd-plum, #320131);
	font: inherit;
	font-size: 16px;
}

#wrapper .rd-gc-field textarea {
	resize: vertical;
	line-height: 1.5;
}

#wrapper .rd-gc-field input:focus,
#wrapper .rd-gc-field select:focus,
#wrapper .rd-gc-field textarea:focus {
	border-color: var(--rd-berry, #B31E6F);
	outline: 2px solid color-mix(in srgb, var(--rd-berry, #B31E6F) 20%, transparent);
}

#wrapper .rd-gc-field [aria-invalid="true"] {
	border-color: #B3261E;
}

#wrapper .rd-gc-help,
#wrapper .rd-gc-privacy {
	margin: 6px 0 0;
	color: var(--rd-muted, #74636F);
	font-size: 14px;
}

#wrapper .rd-gc-counter {
	text-align: right;
}

#wrapper .rd-gc-error {
	margin: 6px 0 0;
	color: #B3261E;
	font-size: 14px;
	font-weight: 600;
}

#wrapper .rd-gc-message {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--rd-pink, #F9E9EE);
	color: var(--rd-plum, #320131);
	font-size: 15px;
}

#wrapper .rd-gc-message.is-error {
	background: #FCE8E6;
	color: #8C1D18;
}

#wrapper .rd-gc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Message colours (signing) */
#wrapper .rd-gc-colors {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

#wrapper .rd-gc-color input {
	position: absolute;
	opacity: 0;
}

#wrapper .rd-gc-color input:checked + span {
	border-color: var(--rd-berry, #B31E6F);
}

#wrapper .rd-gc-color input:focus-visible + span {
	outline: 3px solid var(--rd-berry, #B31E6F);
	outline-offset: 2px;
}

#wrapper .rd-gc-color {
	position: relative;
	display: inline-flex;
	width: 44px;
	height: 44px;
	border: 2px solid var(--rd-border, #EEE2DC);
	border-radius: 50%;
	cursor: pointer;
}

#wrapper .rd-gc-color:has(input:checked) {
	border-color: var(--rd-berry, #B31E6F);
	box-shadow: inset 0 0 0 3px #FFF;
}

#wrapper .rd-gc-color.is-rose { background: var(--gc-rose); }
#wrapper .rd-gc-color.is-peche { background: var(--gc-peche); }
#wrapper .rd-gc-color.is-lavande { background: var(--gc-lavande); }
#wrapper .rd-gc-color.is-menthe { background: var(--gc-menthe); }
#wrapper .rd-gc-color.is-ciel { background: var(--gc-ciel); }

/* ---------- Links (after creation, management) ---------- */

#wrapper .rd-gc-links {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

#wrapper .rd-gc-box.rd-gc-links {
	margin: 0 auto;
}

#wrapper .rd-gc-link {
	margin: 0;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--rd-cream, #FBF7F3);
}

#wrapper .rd-gc-link.is-manage {
	background: var(--rd-pink, #F9E9EE);
}

#wrapper .rd-gc-link-label {
	margin: 0;
	color: var(--rd-plum, #320131);
	font-size: 17px;
	font-weight: 700;
}

#wrapper .rd-gc-link-row {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

#wrapper .rd-gc-link-row input {
	flex: 1;
	min-width: 0;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--rd-border, #EEE2DC);
	border-radius: 8px;
	background: var(--rd-surface, #FFF);
	color: var(--rd-text, #4A3A46);
	font: inherit;
	font-size: 14px;
}

#wrapper .rd-gc-done-detail {
	margin: 0;
	color: var(--rd-text, #4A3A46);
}

#wrapper .rd-gc-done-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 24px 0 0;
}

#wrapper .rd-gc-again {
	font-weight: 600;
}

/* ---------- Card models (creation form, universe pages) ---------- */

#wrapper .rd-gc-choose {
	min-width: 0;
	margin: 0 auto 24px;
	border: 0;
}

#wrapper .rd-gc-choose legend.rd-title {
	float: left;
	width: 100%;
	margin-bottom: 14px;
}

#wrapper .rd-gc-filters {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

#wrapper .rd-gc-filter {
	padding: 7px 16px;
	border: 1px solid var(--rd-line, #E8DCE3);
	border-radius: 999px;
	background: var(--rd-surface, #FFF);
	color: var(--rd-plum, #320131);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

#wrapper .rd-gc-filter[aria-pressed="true"] {
	border-color: var(--rd-berry, #B31E6F);
	background: var(--rd-berry, #B31E6F);
	color: #FFF;
}

/* The models' box: its padding back (.rd-gc-field takes it off), wider with the themes column */
#wrapper .rd-gc-box.rd-gc-choose {
	padding: clamp(18px, 3vw, 30px);
}

#wrapper .rd-gc-box.rd-gc-choose:has(.rd-gc-browse.has-side) {
	max-width: 1120px;
}

/* Categories: the home's occasion pills (rd-blocks.css « Pastilles »), all in view on as many rows as needed, the one picked outlined */
#wrapper .rd-gc-choose .rd-gc-cats {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 8px;
	padding: 4px 0 0;
}

#wrapper .rd-gc-cats .rd-gc-cat:first-child,
#wrapper .rd-gc-cats .rd-gc-cat:last-child {
	margin: 0;
}

/* Compact pills: the home's look at a smaller size, so that the 19 categories sit in a few short rows */
#wrapper .rd-gc-cats .rd-gc-cat {
	gap: 8px;
	height: 40px;
	padding: 4px 14px 4px 4px;
	box-shadow: 0 0 0 1px var(--rd-line, #E8DCE3);
}

#wrapper .rd-gc-cats .rd-gc-cat:hover {
	box-shadow: 0 0 0 1px var(--rd-line, #E8DCE3), 0 6px 16px -12px rgba(50, 1, 49, .45);
	transform: none;
}

#wrapper .rd-gc-cats .rd-gc-cat img {
	width: 32px;
	height: 32px;
}

#wrapper .rd-gc-cats .rd-gc-cat figcaption {
	font-size: 14px;
}

#wrapper .rd-gc-cats .rd-gc-cat.is-current {
	box-shadow: 0 0 0 2px var(--rd-berry, #B31E6F);
}

#wrapper .rd-gc-cats .rd-gc-cat.is-current figcaption {
	font-weight: 700;
}

#wrapper .rd-gc-cats .rd-gc-cat a:focus-visible {
	outline: none;
}

#wrapper .rd-gc-cats .rd-gc-cat:has(a:focus-visible) {
	outline: 2px solid var(--rd-berry, #B31E6F);
	outline-offset: 3px;
}

/* A pill without picture: its initial, or the grid of « Toutes », on a round */
#wrapper .rd-gc-cat-initial,
#wrapper .rd-gc-cat-all {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--rd-pink, #FBE4EF);
	color: var(--rd-berry, #B31E6F);
	font-family: var(--rd-title-font);
	font-size: 15px;
	font-weight: 800;
}

@media (max-width: 640px) {
	#wrapper .rd-gc-choose .rd-gc-cats {
		gap: 8px;
	}

	/* Two models a row, as on the other card grids of the site */
	#wrapper .rd-gc-choose .rd-gc-models {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	#wrapper .rd-gc-cats .rd-gc-cat {
		height: 36px;
		padding-right: 12px;
	}

	#wrapper .rd-gc-cats .rd-gc-cat img,
	#wrapper .rd-gc-cat-initial,
	#wrapper .rd-gc-cat-all {
		width: 28px;
		height: 28px;
		font-size: 13px;
	}

	#wrapper .rd-gc-cats .rd-gc-cat figcaption {
		font-size: 13px;
	}
}

/* Themes on the left (as the search page's filters), the models beside */
#wrapper .rd-gc-browse {
	clear: both;
	margin-top: 18px;
}

#wrapper .rd-gc-browse.has-side {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: start;
	gap: 32px;
}

#wrapper .rd-gc-side-box summary {
	display: none;
}

#wrapper .rd-gc-themes {
	margin: 0;
	padding: 0;
	border: 0;
}

#wrapper .rd-gc-themes legend {
	margin-bottom: 10px;
	padding: 0;
	color: var(--rd-plum, #320131);
	font-family: var(--rd-title-font);
	font-size: 19px;
	font-weight: 700;
}

#wrapper .rd-gc-themes .rd-gc-theme {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 6px 0;
	color: var(--rd-text);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

#wrapper .rd-gc-themes .rd-gc-theme input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--rd-berry, #B31E6F);
}

#wrapper .rd-gc-theme-name {
	flex: 1;
}

#wrapper .rd-gc-theme-count {
	color: var(--rd-muted);
	font-size: 13px;
}

#wrapper .rd-gc-themes .rd-gc-theme.is-empty {
	opacity: .45;
}

#wrapper .rd-gc-empty {
	margin: 8px 0 0;
	padding: 28px 20px;
	border: 1px dashed var(--rd-line, #E8DCE3);
	border-radius: 16px;
	color: var(--rd-muted);
	text-align: center;
}

/* Phones and tablets: the themes folded above the models, opened with their title */
@media (max-width: 900px) {
	#wrapper .rd-gc-browse.has-side {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	#wrapper .rd-gc-side-box {
		border: 1px solid var(--rd-line, #E8DCE3);
		border-radius: 14px;
		background: var(--rd-surface, #FFF);
	}

	#wrapper .rd-gc-side-box summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px;
		color: var(--rd-plum, #320131);
		font-weight: 700;
		cursor: pointer;
	}

	#wrapper .rd-gc-side-box .rd-gc-themes {
		padding: 0 16px 10px;
	}

	#wrapper .rd-gc-side-box .rd-gc-themes legend {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
}

#wrapper .rd-gc-models {
	clear: both;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#wrapper .rd-gc-models.is-strip {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	margin-top: 22px;
}

#wrapper .rd-gc-models > li {
	margin: 0;
}

#wrapper .rd-gc-tile {
	display: block;
	margin: 0;
	color: var(--rd-plum, #320131);
	text-decoration: none;
	cursor: pointer;
}

#wrapper .rd-gc-tile-visual {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 3px solid transparent;
	border-radius: 14px;
	background: var(--gc-img, none) center / cover no-repeat, var(--gc-bg, #320131);
	transition: transform .2s ease, border-color .2s ease;
}

#wrapper .rd-gc-tile:hover .rd-gc-tile-visual {
	transform: translateY(-2px);
}

#wrapper .rd-gc-tile input:checked + .rd-gc-tile-visual {
	border-color: var(--rd-berry, #B31E6F);
	box-shadow: 0 0 0 3px var(--rd-pink, #F7D3E3);
}

#wrapper .rd-gc-tile input:focus-visible + .rd-gc-tile-visual {
	outline: 3px solid var(--rd-berry, #B31E6F);
	outline-offset: 3px;
}

#wrapper .rd-gc-tile-name {
	display: block;
	margin-top: 8px;
	font-weight: 600;
	text-align: center;
}

#wrapper .rd-gc-tile-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #FFF;
	font-size: 12px;
	font-weight: 600;
}

#wrapper .rd-gc-strip {
	padding: 40px 0;
}

#wrapper .rd-gc-strip-more {
	margin: 22px 0 0;
	text-align: center;
}

/* ---------- The face of the card ---------- */

#wrapper .rd-gc-face {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	max-width: 820px;
	aspect-ratio: 16 / 10;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 22px;
	background: var(--gc-img, none) center / cover no-repeat, var(--gc-bg, #320131);
	box-shadow: 0 24px 50px -30px rgba(50, 1, 49, .7);
	color: #FFF;
	text-align: center;
}

#wrapper .rd-gc-face.is-ink-dark {
	color: var(--rd-plum, #320131);
}

#wrapper .rd-gc-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#wrapper .rd-gc-face-text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding: 60px 28px 30px;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}

#wrapper .rd-gc-face.is-ink-dark .rd-gc-face-text {
	background: linear-gradient(to top, rgba(255, 255, 255, .8), transparent);
}

#wrapper .rd-gc-face-title {
	font-family: var(--rd-title-font);
	font-size: clamp(30px, 5vw, 52px);
	font-weight: 800;
	line-height: 1.05;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
	outline: none;
}

#wrapper .rd-gc-face.is-ink-dark .rd-gc-face-title {
	text-shadow: 0 1px 10px rgba(255, 255, 255, .7);
}

#wrapper .rd-gc-face-intro {
	max-width: 620px;
	margin: 0 auto;
	font-size: 19px;
	font-style: italic;
	line-height: 1.45;
}

#wrapper .rd-gc-face.is-small {
	flex: 0 0 240px;
	max-width: 240px;
	border-radius: 14px;
}

#wrapper .rd-gc-face.is-small .rd-gc-face-text {
	padding: 30px 12px 12px;
}

#wrapper .rd-gc-face.is-small .rd-gc-face-title {
	font-size: 20px;
}

#wrapper .rd-gc-face.is-small .rd-gc-face-intro {
	display: none;
}

#wrapper .rd-gc-sign-head {
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 820px;
	margin: 0 auto 24px;
}

#wrapper .rd-gc-ai {
	margin: 8px 0 0;
	color: var(--rd-muted, #74636F);
	font-size: 13px;
	text-align: center;
}

#wrapper .rd-gc-from {
	margin: 20px 0 0;
	color: var(--rd-plum, #320131);
	font-size: 18px;
	font-weight: 600;
	text-align: center;
}

#wrapper .rd-gc-cta {
	margin-top: 36px;
	text-align: center;
}

#wrapper .rd-gc-cta-title {
	margin: 0 0 14px;
	color: var(--rd-plum, #320131);
	font-size: 19px;
	font-weight: 600;
}

#wrapper .rd-gc-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

/* ---------- Effects (particles placed by greeting-card.js) ---------- */

#wrapper .rd-gc-effect {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

#wrapper .rd-gc-effect i {
	position: absolute;
	left: var(--x);
	top: -10%;
	display: block;
	animation: gc-fall var(--t) linear var(--d) infinite;
}

/* « Mettre en pause » on the finished card freezes the effect */
#wrapper .rd-gc-opened.is-paused .rd-gc-effect i {
	animation-play-state: paused;
}

#wrapper .rd-gc-effect.is-neige i {
	width: calc(8px * var(--s));
	height: calc(8px * var(--s));
	border-radius: 50%;
	background: #FFF;
	box-shadow: 0 0 6px rgba(255, 255, 255, .8);
	opacity: .9;
}

#wrapper .rd-gc-effect.is-confettis i {
	width: calc(7px * var(--s));
	height: calc(12px * var(--s));
	background: hsl(var(--h), 85%, 62%);
	animation-name: gc-fall-spin;
}

#wrapper .rd-gc-effect.is-etoiles i {
	top: var(--y);
	width: calc(10px * var(--s));
	height: calc(10px * var(--s));
	background: #FFF6C9;
	clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
	animation: gc-twinkle calc(var(--t) / 3) ease-in-out var(--d) infinite;
}

#wrapper .rd-gc-effect.is-coeurs i,
#wrapper .rd-gc-effect.is-bulles i {
	top: auto;
	bottom: -10%;
	animation-name: gc-rise;
}

#wrapper .rd-gc-effect.is-coeurs i::before {
	content: "\2665";
	color: hsl(calc(330 + var(--h) / 12), 80%, 65%);
	font-size: calc(22px * var(--s));
	font-style: normal;
}

#wrapper .rd-gc-effect.is-bulles i {
	width: calc(18px * var(--s));
	height: calc(18px * var(--s));
	border: 2px solid rgba(255, 255, 255, .75);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
}

/* The layer is the reference: particles travel its whole height whatever their own size */
#wrapper .rd-gc-effect {
	container-type: size;
}

@keyframes gc-fall {
	to {
		transform: translate(30px, 115cqh);
	}
}

@keyframes gc-fall-spin {
	to {
		transform: translate(-40px, 115cqh) rotate(720deg);
	}
}

@keyframes gc-rise {
	to {
		transform: translate(20px, -115cqh);
		opacity: 0;
	}
}

@keyframes gc-twinkle {
	0%, 100% {
		opacity: .2;
		transform: scale(.6);
	}

	50% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ---------- Effects made in the admin (VRD_Greeting_Card::FX_CPT), particles drawn by greeting-effects.js ---------- */
/* Each particle: --x, --y (place), --sz (size), --c (colour), --t (duration), --d (delay); data-c: its emoji or symbol */

#wrapper .rd-gc-effect.is-fx i {
	--anim: gc-fall var(--t) linear var(--d) infinite;
	width: var(--sz);
	height: var(--sz);
	animation: var(--anim);
}

#wrapper .rd-gc-effect.is-fx.is-spin i {
	animation: var(--anim), gc-spin calc(var(--t) / 2) linear var(--d) infinite;
}

#wrapper .rd-gc-effect.is-sh-dot i {
	border-radius: 50%;
	background: var(--c);
}

#wrapper .rd-gc-effect.is-sh-confetti i {
	width: calc(var(--sz) * .55);
	background: var(--c);
}

#wrapper .rd-gc-effect.is-sh-char i {
	width: auto;
	height: auto;
	color: var(--c);
	font-size: var(--sz);
	font-style: normal;
	line-height: 1;
}

#wrapper .rd-gc-effect.is-sh-char i::before {
	content: attr(data-c);
}

#wrapper .rd-gc-effect.is-sh-image i {
	background: var(--img) center / contain no-repeat;
}

#wrapper .rd-gc-effect.is-glow i {
	filter: drop-shadow(0 0 calc(var(--sz) / 3) var(--c));
}

#wrapper .rd-gc-effect.is-fx.is-m-rise i {
	--anim: gc-rise var(--t) linear var(--d) infinite;
	top: auto;
	bottom: -10%;
}

#wrapper .rd-gc-effect.is-fx.is-m-twinkle i {
	--anim: gc-twinkle calc(var(--t) / 3) ease-in-out var(--d) infinite;
	top: var(--y);
}

#wrapper .rd-gc-effect.is-fx.is-m-drift i {
	--anim: gc-drift var(--t) linear var(--d) infinite;
	left: -10%;
	top: var(--y);
}

#wrapper .rd-gc-effect.is-fx.is-m-float i {
	--anim: gc-float calc(var(--t) / 2) ease-in-out var(--d) infinite alternate;
	top: var(--y);
}

@keyframes gc-spin {
	to {
		rotate: 360deg;
	}
}

@keyframes gc-drift {
	to {
		transform: translate(120cqw, 24px);
	}
}

@keyframes gc-float {
	from {
		transform: translate(0, 0);
	}

	to {
		transform: translate(10px, -16px);
	}
}

/* « Image entière » (a model's vrd_card_fit): the picture or the video whole, on the card's colour */
#wrapper .rd-gc-face.is-fit-contain,
#wrapper .rd-gc-tile-visual.is-fit-contain {
	background-size: contain, auto;
}

#wrapper .rd-gc-face.is-fit-contain .rd-gc-video {
	object-fit: contain;
}

/* A model's preview by the team (?apercu_modele=) */
#wrapper .rd-gc-preview-note {
	max-width: 820px;
	margin: 20px auto 0;
	padding: 10px 16px;
	border-radius: 10px;
	background: var(--rd-pink, #F7D3E3);
	color: var(--rd-plum, #320131);
	font-size: 14px;
	text-align: center;
}

/* ---------- Envelope (finished card) ---------- */

#wrapper .rd-gc-envelope {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 0 10px;
	text-align: center;
}

#wrapper .rd-gc-env-open {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

#wrapper .rd-gc-env {
	position: relative;
	display: block;
	width: min(420px, 86vw);
	aspect-ratio: 3 / 2;
	border-radius: 10px;
	background: color-mix(in srgb, var(--gc-bg, #320131) 70%, #FFF);
	box-shadow: 0 26px 50px -26px rgba(50, 1, 49, .8);
	perspective: 900px;
}

/* The lower flaps: two triangles in a darker shade */
#wrapper .rd-gc-env::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background:
		linear-gradient(to top right, color-mix(in srgb, var(--gc-bg, #320131) 88%, #000) 50%, transparent 50.5%) left bottom / 50% 100% no-repeat,
		linear-gradient(to top left, color-mix(in srgb, var(--gc-bg, #320131) 88%, #000) 50%, transparent 50.5%) right bottom / 50% 100% no-repeat;
}

#wrapper .rd-gc-env-flap {
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	height: 58%;
	background: var(--gc-bg, #320131);
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	transform-origin: top center;
	transition: transform .8s ease;
}

#wrapper .rd-gc-env-seal {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: 54px;
	height: 54px;
	margin: -27px 0 0 -27px;
	border-radius: 50%;
	background: var(--rd-berry, #B31E6F);
	box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25), 0 4px 10px rgba(0, 0, 0, .3);
	transition: opacity .3s ease;
}

#wrapper .rd-gc-env-seal::before {
	content: "\2665";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	font-size: 24px;
}

#wrapper .rd-gc-env-open:hover .rd-gc-env {
	animation: gc-wiggle .6s ease;
}

#wrapper .rd-gc-env-for {
	color: var(--rd-plum, #320131);
	font-family: var(--rd-title-font);
	font-size: 26px;
}

#wrapper .rd-gc-envelope.is-opening .rd-gc-env-seal {
	opacity: 0;
}

#wrapper .rd-gc-envelope.is-opening .rd-gc-env-flap {
	transform: rotateX(180deg);
}

#wrapper .rd-gc-envelope.is-opening .rd-gc-env {
	animation: gc-away .5s ease .45s forwards;
}

#wrapper .rd-gc-opened.is-in .rd-gc-face {
	animation: gc-in .7s ease both;
}

#wrapper .rd-gc-envelope.is-sealed .rd-gc-env {
	margin-bottom: 24px;
}

#wrapper .rd-gc-countdown {
	margin: 10px 0 0;
	color: var(--rd-berry, #B31E6F);
	font-size: 28px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

@keyframes gc-wiggle {
	25% {
		transform: rotate(-2deg);
	}

	75% {
		transform: rotate(2deg);
	}
}

@keyframes gc-away {
	to {
		transform: translateY(40px) scale(.9);
		opacity: 0;
	}
}

@keyframes gc-in {
	from {
		transform: translateY(60px) scale(.94);
		opacity: 0;
	}
}

#wrapper .rd-gc-closed {

	text-align: center;
	font-weight: 600;
}

/* ---------- Messages wall ---------- */

#wrapper .rd-gc-wall {
	margin-top: 40px;
}

#wrapper .rd-gc-wall .rd-title {
	margin-bottom: 20px;
}

#wrapper .rd-gc-notes {
	columns: 3 260px;
	column-gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#wrapper .rd-gc-note {
	position: relative;
	display: inline-block;
	width: 100%;
	margin: 0 0 18px;
	padding: 22px 22px 18px;
	border-radius: 14px;
	box-shadow: 0 8px 22px -18px rgba(50, 1, 49, .6);
	break-inside: avoid;
}

#wrapper .rd-gc-note:nth-child(3n+1) { transform: rotate(-.6deg); }
#wrapper .rd-gc-note:nth-child(3n+2) { transform: rotate(.5deg); }

#wrapper .rd-gc-note.is-rose { background: var(--gc-rose); }
#wrapper .rd-gc-note.is-peche { background: var(--gc-peche); }
#wrapper .rd-gc-note.is-lavande { background: var(--gc-lavande); }
#wrapper .rd-gc-note.is-menthe { background: var(--gc-menthe); }
#wrapper .rd-gc-note.is-ciel { background: var(--gc-ciel); }

#wrapper .rd-gc-note-text {
	margin: 0;
	color: var(--rd-plum, #320131);
	font-size: 17px;
	line-height: 1.55;
}

#wrapper .rd-gc-note-author {
	margin: 12px 0 0;
	color: var(--rd-berry, #B31E6F);
	font-weight: 700;
	text-align: right;
}

#wrapper .rd-gc-note-author::before {
	content: "— ";
}

#wrapper .rd-gc-note-remove {
	margin-top: 10px;
	padding: 6px 12px;
	border: 1px solid rgba(50, 1, 49, .2);
	border-radius: 999px;
	background: rgba(255, 255, 255, .7);
	color: #8C1D18;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

#wrapper .rd-gc-empty {
	color: var(--rd-muted, #74636F);
	text-align: center;
}

/* ---------- Finished card and management ---------- */

#wrapper .rd-gc-print-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 8px;
}



#wrapper .rd-gc-manage-head {
	max-width: 820px;
	margin: 0 auto 24px;
}

#wrapper .rd-gc-manage-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 24px auto 16px;
}

#wrapper .rd-btn.is-danger {
	border-color: #B3261E;
	color: #B3261E;
}

#wrapper .rd-gc.is-manage .rd-gc-message {
	max-width: 820px;
	margin: 0 auto 16px;
}

#wrapper .rd-gc-invalid {
	text-align: center;
}

/* ---------- Personalisation (creation form) ---------- */

#wrapper .rd-gc-custom-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: 28px;
	margin-top: 18px;
}

#wrapper .rd-gc-preview-col {
	position: sticky;
	top: 90px;
	align-self: start;
}

#wrapper .rd-gc-preview-label {
	margin: 0 0 8px;
	color: var(--rd-muted, #74636F);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}

#wrapper .rd-gc-face.is-preview {
	max-width: none;
	border-radius: 16px;
}

#wrapper .rd-gc-face.is-preview .rd-gc-face-text {
	padding: 40px 16px 18px;
}

#wrapper .rd-gc-face.is-preview .rd-gc-face-title {
	font-size: clamp(20px, 2.4vw, 28px);
}

#wrapper .rd-gc-music-row {
	display: flex;
	gap: 8px;
	align-items: center;
}

#wrapper .rd-gc-music-row select {
	flex: 1;
	min-width: 0;
}

#wrapper .rd-gc-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

#wrapper .rd-gc-swatch {
	position: relative;
	margin: 0;
	font-weight: 500;
}

#wrapper .rd-gc-swatch input {
	position: absolute;
	opacity: 0;
}

#wrapper .rd-gc-swatch span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 6px 14px 6px 8px;
	border: 2px solid var(--rd-border, #EEE2DC);
	border-radius: 999px;
	background: var(--rd-surface, #FFF);
	color: var(--rd-plum, #320131);
	font-size: 14px;
	cursor: pointer;
}

#wrapper .rd-gc-swatch span::before {
	content: "";
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--swatch, conic-gradient(#320131 0 25%, #1E5A3E 0 50%, #B31E6F 0 75%, #C9A25E 0));
}

#wrapper .rd-gc-swatch input:checked + span {
	border-color: var(--rd-berry, #B31E6F);
}

#wrapper .rd-gc-swatch input:focus-visible + span {
	outline: 3px solid var(--rd-berry, #B31E6F);
	outline-offset: 2px;
}

#wrapper .rd-gc-field input[type="file"] {
	max-width: 100%;
	font-size: 15px;
}

#wrapper .rd-gc-consent label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 500;
	line-height: 1.45;
}

#wrapper .rd-gc-consent input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

#wrapper .rd-gc-photo .rd-gc-again {
	padding: 0;
	border: 0;
	background: none;
	color: var(--rd-berry, #B31E6F);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

#wrapper .rd-gc-report {
	margin: 26px 0 0;
	font-size: 13px;
	text-align: center;
}

#wrapper .rd-gc-report a {
	color: var(--rd-muted, #74636F);
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
	#wrapper .rd-gc-custom-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	#wrapper .rd-gc-preview-col {
		position: static;
	}
}

@media (max-width: 640px) {
	#wrapper .rd-gc-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	#wrapper .rd-gc-box {
		padding: 22px 18px;
	}

	#wrapper .rd-gc-link-row {
		flex-wrap: wrap;
	}

	#wrapper .rd-gc-link-row input {
		flex-basis: 100%;
	}

	#wrapper .rd-gc-sign-head {
		flex-direction: column;
		text-align: center;
	}

	#wrapper .rd-gc-face {
		aspect-ratio: 1 / 1;
	}

	#wrapper .rd-gc-face.is-small {
		flex-basis: auto;
		width: 200px;
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Print: only the card ---------- */

@media print {
	body.vrd-rd .rd-header,
	body.vrd-rd .rd-footer,
	body.vrd-rd .is-style-rd-sous-nav,
	body.vrd-rd .is-style-rd-section,
	#wrapper .rd-gc-print-row {
		display: none !important;
	}

	#wrapper .rd-gc-face,
	#wrapper .rd-gc-note {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		box-shadow: none;
	}

	#wrapper .rd-gc-note {
		transform: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#wrapper .rd-gc-note {
		transform: none;
	}

	#wrapper .rd-gc-env,
	#wrapper .rd-gc-env-flap,
	#wrapper .rd-gc-face {
		animation: none !important;
		transition: none !important;
	}
}

/* ---------- Model filters: two drop-down menus, several choices each ---------- */

#wrapper .rd-gc-filterbar {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
}

#wrapper .rd-gc-dropdown {
	position: relative;
}

#wrapper .rd-gc-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--rd-line, #E8DCE3);
	border-radius: 999px;
	background: var(--rd-surface, #FFF);
	color: var(--rd-plum, #320131);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

#wrapper .rd-gc-dropdown.is-active .rd-gc-dropdown-toggle {
	border-color: var(--rd-berry, #B31E6F);
	box-shadow: 0 0 0 1px var(--rd-berry, #B31E6F);
}

#wrapper .rd-gc-dropdown-count {
	color: var(--rd-berry, #B31E6F);
}

#wrapper .rd-gc-dropdown-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 40;
	width: 250px;
	max-height: 320px;
	padding: 8px;
	overflow-y: auto;
	border-radius: 14px;
	background: var(--rd-surface, #FFF);
	box-shadow: 0 18px 40px -16px rgba(50, 1, 49, .45), 0 0 0 1px var(--rd-line, #E8DCE3);
}

#wrapper .rd-gc-dropdown-panel[hidden] {
	display: none;
}

#wrapper .rd-gc-dropdown-option {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 8px;
	border-radius: 8px;
	color: var(--rd-text);
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

#wrapper .rd-gc-dropdown-option:hover {
	background: var(--rd-cream, #FBF6F3);
}

#wrapper .rd-gc-dropdown-option input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--rd-berry, #B31E6F);
}

#wrapper .rd-gc-dropdown-option span:nth-of-type(1) {
	flex: 1;
}

#wrapper .rd-gc-dropdown-n {
	color: var(--rd-muted);
	font-size: 12px;
}

#wrapper .rd-gc-filter-reset {
	padding: 6px 10px;
	border: 0;
	background: none;
	color: var(--rd-berry, #B31E6F);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

/* Inside the models' fieldset: plain options (its .rd-gc-field label rule made them bold blocks) */
#wrapper .rd-gc-choose .rd-gc-dropdown-option {
	display: flex;
	margin: 0;
	color: var(--rd-text);
	font-size: 14px;
	font-weight: 400;
}

#wrapper .rd-gc-choose .rd-gc-dropdown-option input[type="checkbox"] {
	-webkit-appearance: auto;
	appearance: auto;
	flex: none;
	width: 16px;
	height: 16px;
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}