/* =========================================================================
   Poterie de Naurouze — pages Loisirs créatifs (24:247), Poteries (24:180),
   Conseils (24:314) + article Conseil. Tokens et classes globales : theme.css.
   ========================================================================= */

:root {
	--pn-brown: #773118;        /* titres manuscrits des prestations */
	--pn-brown-card: #805343;   /* encart « Atelier Guiraud » */
	--pn-plum: #48232a;         /* extraits des conseils */
	--font-questrial: "Questrial", "Google Sans", system-ui, sans-serif;
}

/* Hero des pages intérieures : même style que l'accueil, un peu moins haut. */
.hero--page { padding-block: clamp(48px, 6vw, 118px) clamp(48px, 5.5vw, 100px); }
.hero--page .hero__text { margin-bottom: 0; }
/* Bouton sous l'intro du hero (page Aménagements d'extérieurs) : la marge du
   texte étant annulée ci-dessus, l'espacement est repris ici. */
.hero--page .hero__text + .button { margin-top: clamp(24px, 2.2vw, 40px); }
.hero__title--article { text-transform: none; font-size: clamp(1.75rem, 3vw, 3.5rem); }

/* =====================================================================
   LOISIRS CRÉATIFS
   ===================================================================== */
/* --- Duo de photos inclinées + libellés manuscrits + flèches dessinées ---
   Reproduction fidèle de la maquette (node 24:247) : chaque élément est
   positionné en % d'un référentiel 1920×380 (calé sur le canevas Figma),
   via des styles inline (voir template-parts/loisirs/duo.php). Bascule en
   disposition empilée simplifiée sous 780 px (les % ne s'appliquent plus). */
.duo { position: relative; padding-bottom: clamp(120px, 12vw, 230px); }
.duo-stage {
	position: relative;
	width: 100%;
	max-width: 1760px;
	margin-inline: auto;
	aspect-ratio: 1920 / 380;
}
.duo-stage__photo,
.duo-stage__label,
.duo-stage__arrow { position: absolute; }
.duo-stage__photo { transform: translate(-50%, -50%); }
.duo-stage__photo .tilted-photo { width: 100%; aspect-ratio: 1 / 1; box-shadow: 0 18px 40px rgba(0, 0, 0, .12); }
.duo-stage__photo--back .tilted-photo { transform: rotate(-3.07deg); }
.duo-stage__photo--front .tilted-photo { transform: rotate(4.09deg); }
.tilted-photo__link { display: block; width: 100%; height: 100%; }
.duo-stage__label { text-decoration: none; text-align: left; }
.duo-stage__label a { text-decoration: none; }
.duo__hand {
	display: block;
	font-family: var(--font-hand);
	font-size: clamp(1.05rem, 1.7vw, var(--text-32));
	line-height: 1.05;
	letter-spacing: .03em;
}
/* Flèche : positionnée par son centre (translate -50%/-50%), puis pivotée
   (le pivot des SVG « Vector 2 »/« Vector 3 » de la maquette est leur centre). */
.duo-stage__arrow { aspect-ratio: 76 / 80.5622; }
.duo-stage__arrow--left { transform: translate(-50%, -50%) rotate(157.7deg); }
.duo-stage__arrow--right { transform: translate(-50%, -50%); }
.duo__illustration {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 38%);
	width: clamp(140px, 12vw, 230px);
	line-height: 0;
	z-index: 2;
}

/* --- Bande beige « Accompagnement » --- */
.accomp { padding-block: clamp(90px, 10vw, 200px) clamp(64px, 6.5vw, 125px); }
.accomp .section-head__title { margin-bottom: 0; }

/* --- Prestations : titre manuscrit 96 px brun + texte 40 px + carrousel --- */
.prestation { padding-block: clamp(56px, 7vw, 135px) 0; }
.prestation__title {
	font-family: var(--font-hand);
	font-weight: 400;
	/* Même taille que le surtitre manuscrit « Loisirs créatifs » de l'accueil. */
	font-size: var(--text-32);
	line-height: 1.09;
	letter-spacing: .03em;
	color: var(--pn-brown);
	text-align: center;
	margin: 0 0 clamp(16px, 1.4vw, 28px);
}
.prestation__text {
	/* Même taille que le texte des cartes « Loisirs créatifs » de l'accueil
	   (.offre__text / .rich-text). */
	font-size: var(--text-16);
	line-height: 1.3;
	text-align: center;
	max-width: 1430px;
	margin: 0 auto clamp(40px, 5vw, 96px);
}
.prestation__text p { margin: 0; }

/* Même taille de texte de description sur toute la page Loisirs créatifs
   (bande « Accompagnement » et encart « Atelier »), à l'exception du texte
   d'intro du hero (.hero__text, commun à toutes les pages). */
.page-loisirs .accomp .section-head__title {
	font-size: var(--text-16);
	line-height: 1.3;
}

/* Carrousel « prestations » (variante « filmstrip ») : élément central
   plus grand (570 px) et net, voisins plus petits (459 px, ratio .805),
   glissés sous lui avec un recouvrement de 28 px, et voilés de crème.
   Toujours correct dès le rendu serveur (rôles is-prev/is-active/is-next
   posés en PHP) et à jour ensuite via initCarousels() (main.js) — voir
   le bloc « CARROUSEL MAISON » de theme.css pour la mécanique commune.
   Chevrons terracotta dans les marges. */
.pn-carousel--filmstrip {
	--pn-slide-side: clamp(170px, 23.906vw, 459px);
	--pn-slide-center: clamp(210px, 29.688vw, 570px);
	--pn-overlap: clamp(8px, 1.458vw, 28px);
}
.pn-carousel--filmstrip .pn-carousel__viewport {
	width: 100%;
	max-width: calc(var(--pn-slide-side) * 2 + var(--pn-slide-center) - var(--pn-overlap) * 2);
	height: var(--pn-slide-center);
	margin-inline: auto;
}
.pn-carousel--filmstrip .pn-carousel__item {
	width: var(--pn-slide-side);
	aspect-ratio: 1 / 1;
}
.pn-carousel--filmstrip .pn-carousel__item.is-prev { margin-right: calc(-1 * var(--pn-overlap)); }
.pn-carousel--filmstrip .pn-carousel__item.is-next { margin-left: calc(-1 * var(--pn-overlap)); }
.pn-carousel--filmstrip .pn-carousel__item.is-active { width: var(--pn-slide-center); }
/* Voile crème + léger assombrissement bas, sur les voisines seulement. */
.pn-carousel--filmstrip .pn-carousel__item.is-prev::before,
.pn-carousel--filmstrip .pn-carousel__item.is-next::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
	background: linear-gradient(to bottom, rgba(102, 102, 102, 0) 55%, rgba(0, 0, 0, .2));
	z-index: 1;
	pointer-events: none;
}
.pn-carousel--filmstrip .pn-carousel__item.is-prev::after,
.pn-carousel--filmstrip .pn-carousel__item.is-next::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
	background: rgba(252, 248, 241, .3);
	z-index: 2;
	pointer-events: none;
}
.pn-carousel--filmstrip .pn-carousel__arrow { color: var(--pn-brown); }

/* --- Encart brun « Atelier Guiraud » --- */
.atelier-wrap { padding-block: clamp(64px, 7vw, 135px) clamp(56px, 8vw, 165px); }
.atelier {
	background: var(--pn-brown-card);
	color: var(--pn-cream);
	border-radius: var(--radius);
	padding: clamp(32px, 3.4vw, 66px) clamp(24px, 6.5vw, 124px) clamp(40px, 3.8vw, 74px);
	text-align: center;
}
.atelier__surtitre {
	font-family: var(--font-hand);
	font-size: var(--text-32);
	line-height: 1;
	letter-spacing: .03em;
	margin: 0 0 clamp(20px, 2.2vw, 42px);
}
.atelier__logo { display: flex; justify-content: center; margin-bottom: clamp(28px, 3.2vw, 62px); }
.atelier__logo-img { width: clamp(180px, 17vw, 326px); height: auto; }
.atelier__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: clamp(28px, 5vw, 96px);
	align-items: start;
	text-align: left;
}
.atelier__body { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; }
.atelier__text { font-size: var(--text-16); line-height: 1.3; color: var(--pn-cream); }
.atelier__text p { margin: 0 0 .8em; }
.atelier__button { align-self: flex-start; margin-top: clamp(28px, 5vw, 100px); }
.button--cream { background: var(--pn-cream); color: var(--pn-brown-card); font-weight: 400; }
.button--cream:hover { background: var(--pn-beige-dark); color: var(--pn-dark); }
.atelier__media { aspect-ratio: 1 / 1; max-width: 528px; justify-self: end; width: 100%; border-radius: var(--radius); overflow: hidden; }
.atelier__media a { display: block; height: 100%; }
.atelier__img { width: 100%; height: 100%; object-fit: cover; }

/* =====================================================================
   POTERIES
   ===================================================================== */
/* --- Catégories illustrées (6 cartes) --- */
.categories { padding-block: clamp(24px, 3vw, 60px) clamp(56px, 6vw, 120px); }
.categories__list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(12px, 1vw, 18px);
}
.categories__card { display: block; text-decoration: none; color: inherit; }
.categories__media {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--pn-beige);
}
.categories__img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
a.categories__card:hover .categories__img { transform: scale(1.04); }
.categories__caption {
	display: block;
	margin-top: clamp(10px, 1.2vw, 22px);
	text-align: center;
	font-weight: 500;
	font-size: var(--text-24);
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.2;
}
.categories__item--soon .categories__card { opacity: .4; filter: grayscale(.4); cursor: default; }

.creations--poteries { padding-block: clamp(32px, 3vw, 60px) clamp(48px, 6vw, 120px); }
.creations--poteries .creations__cta { margin-bottom: 0; }

/* --- Barre « FILTRER : » à puces --- */
.filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(12px, 1.6vw, 34px);
	justify-content: flex-start;
	margin-bottom: clamp(20px, 1.9vw, 36px);
	padding-inline: clamp(0px, .7vw, 14px);
}
.filters__label { font-weight: 700; font-size: var(--text-24); text-transform: uppercase; letter-spacing: .03em; }
.filters__chip {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	border: 0;
	background: transparent;
	color: var(--pn-dark);
	font: inherit;
	font-size: var(--text-24);
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 49px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, padding .2s ease;
}
.filters__chip:hover { color: var(--pn-terracotta); }
.filters__chip-x { display: none; font-size: .8em; }
/* Puce active (maquette) : pilule terracotta, intitulé noir, croix blanche. */
.filters__chip.is-active {
	background: var(--pn-terracotta);
	color: var(--pn-dark);
	padding: 4px 22px;
}
.filters__chip.is-active:hover { color: var(--pn-dark); }
.filters__chip.is-active .filters__chip-x { display: inline; color: #fff; }
.catalogue { padding-block: clamp(24px, 3vw, 60px) clamp(64px, 8vw, 160px); }
/* Grille sur la page Poteries : alignée sur le conteneur (gouttière 40 px). */
.page-poteries .produits-grid { padding-inline: clamp(16px, 3.6vw, 69px); }

/* =====================================================================
   ARCHIVE DE CATÉGORIE — poteries mises en avant (alternance image/texte)
   Maquette node 62:2, relevé sur la frame 1920 px :
     image 800 × 810 à 80 px du bord — nom / origine 30 px sous l'image, sur
     sa largeur — texte 566 px de large, centré verticalement, à 274 px de
     l'image — 140 px entre deux blocs.
   ===================================================================== */
.showcase-list { padding-block: clamp(24px, 3vw, 56px) clamp(24px, 3vw, 60px); }
.showcase { padding-block: clamp(24px, 3.6vw, 70px); }
.showcase__grid {
	/* Pleine largeur (la maquette colle les images à 80 px du bord de page,
	   au-delà du conteneur de texte habituel). */
	max-width: none;
	margin-inline: 0;
	padding-inline: clamp(16px, 4.17vw, 80px);
	display: grid;
	grid-template-columns: minmax(0, 45.45%) minmax(0, 1fr);
	gap: clamp(24px, 15.6vw, 274px);
	align-items: center;
}
.showcase--image-left  .showcase__media   { order: 1; }
.showcase--image-left  .showcase__content { order: 2; }
.showcase--image-right .showcase__media   { order: 2; }
.showcase--image-right .showcase__content { order: 1; }
.showcase__media { min-width: 0; width: 100%; }
.showcase__figure { aspect-ratio: 800 / 810; }
.showcase__caption {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: clamp(14px, 1.56vw, 30px) 0 0;
	font-size: var(--text-16);
	letter-spacing: .03em;
	text-transform: uppercase;
}
.showcase__name { font-weight: 700; color: var(--pn-dark); text-decoration: none; }
.showcase__name:hover { color: var(--pn-terracotta); }
.showcase__origine { font-weight: 400; color: var(--pn-dark); }
.showcase__content {
	max-width: 566px;
	font-size: clamp(0.9375rem, 1.04vw, 1.1875rem);
	line-height: 1.5;
}

/* Bande de clôture : illustration des pots à cheval sur le bord haut,
   surtitre manuscrit + texte, puis deux photos inclinées (~364 px / 1920). */
.categorie-photos {
	position: relative;
	padding-block: clamp(80px, 9vw, 180px) clamp(56px, 8vw, 160px);
}
.categorie-photos__illustration {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -55%);
	width: clamp(115px, 9vw, 172px);
	line-height: 0;
	z-index: 2;
}
.categorie-photos__illustration img { width: 100%; height: auto; }
.categorie-photos .section-head { margin-bottom: clamp(32px, 4vw, 76px); }
.categorie-photos .tilted-pair { max-width: 700px; margin-block: 0; }
.categorie-photos .tilted-photo { width: 52%; max-width: 364px; }

/* --- Notre boutique --- */
.boutique { padding-bottom: 0; }
.boutique__surtitre { text-align: center; margin: 0 0 clamp(14px, 1.5vw, 28px); }
.boutique__band {
	position: relative;
	background: var(--pn-terracotta);
	color: var(--pn-cream);
	min-height: clamp(320px, 38vw, 735px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.boutique__map, .boutique__media { position: absolute; inset: 0; }
.boutique__map iframe, .boutique__img { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
.boutique__content { position: relative; z-index: 1; text-align: center; padding-block: clamp(32px, 4vw, 80px); }
.boutique__map ~ .boutique__content, .boutique__media ~ .boutique__content { display: none; }
.boutique__text { color: var(--pn-cream); max-width: 40em; margin-inline: auto; font-size: var(--text-24); }
.boutique__address { font-style: normal; font-weight: 700; font-size: var(--text-24); margin-top: 16px; }

/* =====================================================================
   CONSEILS
   ===================================================================== */
.articles { padding-block: clamp(24px, 3vw, 60px) clamp(64px, 8vw, 160px); }
.articles--related { padding-block: clamp(48px, 5vw, 100px); }
.articles--related .section-head__surtitre { text-align: center; }
.articles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(48px, 5vw, 100px) clamp(16px, 1.7vw, 32px);
}
.article-card { display: flex; flex-direction: column; min-width: 0; }
.article-card__media { display: block; }
.article-card__title {
	margin: clamp(16px, 1.6vw, 30px) 0 clamp(8px, .8vw, 16px);
	font-weight: 500;
	font-size: var(--text-24);
	letter-spacing: .03em;
	text-transform: uppercase;
	line-height: 1.3;
}
.article-card__title a { text-decoration: none; }
.article-card__title a:hover { color: var(--pn-terracotta); }
.article-card__excerpt {
	margin: 0;
	font-family: var(--font-questrial);
	font-size: clamp(1rem, 1.05vw, 1.25rem);
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--pn-plum);
	flex: 1 1 auto;
}
.article-card__more { margin: clamp(24px, 3.4vw, 66px) 0 0; text-align: center; }
.articles__empty { text-align: center; color: var(--pn-muted); }

/* Article seul */
.hero--article { padding-bottom: clamp(24px, 3vw, 56px); }
.conseil-single__back-top { text-align: left; margin-bottom: clamp(20px, 2.4vw, 40px); }
.btn-icon-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 63px;
	height: 37px;
	border-radius: 49px;
	background: var(--pn-beige-dark);
	color: var(--pn-dark);
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
.btn-icon-round:hover { background: var(--pn-terracotta); color: var(--pn-cream); transform: translateX(-3px); }
.conseil-single__media { margin-bottom: clamp(32px, 4vw, 72px); }
.conseil-single__figure { aspect-ratio: 16 / 9; max-width: 1200px; margin-inline: auto; }
.conseil-single__body { max-width: calc(860px + 2 * var(--gutter)); padding-bottom: clamp(48px, 6vw, 120px); }
.conseil-single__content { font-size: clamp(1.0625rem, 1.15vw, 1.25rem); }
.conseil-single__cta { margin-top: clamp(28px, 3vw, 56px); text-align: center; }

/* =====================================================================
   QUI SOMMES-NOUS
   ===================================================================== */
.qsn-carousel { padding-bottom: clamp(32px, 4vw, 64px); }
.qsn-histoire {
	position: relative;
	text-align: center;
	padding-block: clamp(40px, 4.5vw, 80px) clamp(120px, 11vw, 213px);
}
/* Texte d'accueil manuscrit, centré (maquette node 24:2 : bloc de 560 px de
   large sur la frame 1920, soit un retour à la ligne toutes les ~37 lettres). */
.qsn-histoire__intro {
	max-width: 560px;
	margin: 0 auto;
	font-family: var(--font-hand);
	font-weight: 400;
	font-size: var(--text-32);
	line-height: 1.45;
	letter-spacing: .03em;
}
.qsn-histoire__texte {
	max-width: 700px;
	margin: 0 auto;
	text-align: left;
	font-size: var(--text-16);
	line-height: 1.35;
}
.qsn-histoire__texte p { margin: 0 0 1.4em; }
.qsn-histoire__texte p:last-child { margin-bottom: 0; }

/* Illustration des pots : un peu plus petite que sur l'accueil. */
.page-qsn .qsn__illustration { width: clamp(115px, 9vw, 172px); }

/* Encart « Languedoc Céramique » : fond sombre (maquette), là où la page
   Loisirs créatifs utilise le brun de l'encart Atelier. */
.page-qsn .atelier { background: var(--pn-dark); }
.page-qsn .button--cream { color: var(--pn-dark); }

/* =====================================================================
   AMÉNAGEMENTS D'EXTÉRIEURS (maquette node 183:2)
   ===================================================================== */
.amg-intro { padding-block: clamp(40px, 5vw, 100px) clamp(24px, 3vw, 56px); }
.amg-cartes { padding-bottom: clamp(40px, 5vw, 100px); }

/* Carrousel « une image à la fois » : chevrons de part et d'autre du carré.
   Fondu enchaîné : toutes les diapositives sont superposées dans le cadre et
   seule l'active est opaque. L'ancienne s'efface pendant que la nouvelle
   apparaît — pas de temps mort (donc pas de clignotement) entre les deux. */
.pn-carousel--single .pn-carousel__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
}
.pn-carousel--single .pn-carousel__track { display: block; height: 100%; }
.pn-carousel--single .pn-carousel__item {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility .5s ease;
}
.pn-carousel--single .pn-carousel__item.is-active { opacity: 1; visibility: visible; }
.pn-carousel--single .pn-carousel__arrow { color: var(--pn-brown); }
@media (prefers-reduced-motion: reduce) {
	.pn-carousel--single .pn-carousel__item { transition: none; }
}

/* Famille : carrousel (≈735 px / 1920) + colonne de texte (≈573 px). */
.famille { padding-block: clamp(32px, 4.5vw, 88px); }
.famille__grid {
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
	gap: clamp(28px, 8vw, 150px);
	align-items: center;
}
.famille--media-left  .famille__media   { order: 1; }
.famille--media-left  .famille__content { order: 2; }
.famille--media-right .famille__media   { order: 2; }
.famille--media-right .famille__content { order: 1; }
.famille__media { min-width: 0; }
.famille__content { max-width: 573px; }
.famille__title {
	font-weight: 500;
	font-size: var(--text-40);
	line-height: 1.1;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 0 0 clamp(20px, 2.4vw, 44px);
}
.famille__text { font-size: clamp(0.95rem, 1.1vw, 1.25rem); line-height: 1.35; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1200px) {
	.categories__list { grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
	.atelier__grid { grid-template-columns: 1fr; }
	.atelier__media { justify-self: start; }
}
@media (max-width: 900px) {
	.pn-carousel { padding-inline: 8px; gap: 4px; }
	.pn-carousel--filmstrip { --pn-slide-side: clamp(150px, 42vw, 300px); --pn-slide-center: clamp(180px, 52vw, 360px); }
	.articles__grid { grid-template-columns: repeat(2, 1fr); }
	.filters { gap: 10px 18px; }
	.filters__label { flex: 1 1 100%; }
	.famille__grid { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 40px); }
	.famille--media-right .famille__media, .famille--media-left .famille__media { order: 1; }
	.famille__content { order: 2; max-width: none; }
	.showcase__grid { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 40px); }
	.showcase--image-right .showcase__media, .showcase--image-left .showcase__media { order: 1; }
	.showcase__content { order: 2; max-width: none; }
}
/* Duo (Loisirs créatifs) : sous 780 px, la mise en scène pixel-perfect cède
   la place à un empilement simple — photos centrées, libellés en dessous,
   flèches masquées (leur positionnement précis n'a plus de sens ici). Les
   valeurs sont posées en style inline (calquées sur la maquette 1920 px) :
   il faut donc les emporter avec !important pour les neutraliser. */
@media (max-width: 780px) {
	.duo-stage {
		aspect-ratio: auto !important;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		gap: 12px 24px;
		max-width: 460px;
	}
	.duo-stage__photo {
		position: static !important;
		transform: none !important;
		width: 42% !important;
		order: 1;
	}
	.duo-stage__photo--back { transform: rotate(-3.07deg) !important; margin-top: 24px; }
	.duo-stage__photo--front { transform: rotate(4.09deg) !important; }
	.duo-stage__label {
		position: static !important;
		width: auto !important;
		text-align: center !important;
		order: 2;
		flex: 1 1 100%;
	}
	.duo-stage__arrow { display: none; }
	.duo__hand { max-width: none; }
}
@media (max-width: 600px) {
	.categories__list { grid-template-columns: repeat(2, 1fr); }
	.articles__grid { grid-template-columns: 1fr; }
	.duo__illustration { transform: translate(-50%, 45%); }
}